/* ── Font tự host ────────────────────────────────────────────────
   EB Garamond — phục dựng kiểu chữ Garamond thế kỷ 16.

   Font cũ (Georgia) THIẾU khối Latin Extended Additional U+1EA0–U+1EF9, tức là
   toàn bộ chữ Việt hai dấu: ố ề ấ ầ ế ộ ợ... Trình duyệt phải tự ghép nên ra
   "muô´n" thay vì "muốn". CHỌN FONT CHO DỰ ÁN TIẾNG VIỆT THÌ LUÔN KIỂM KHỐI NÀY.

   Tự host chứ không nhúng link Google: khỏi phụ thuộc bên thứ ba, khỏi thêm một
   vòng kết nối từ VN, không đẩy IP khách sang máy chủ Google.
   Giấy phép OFL 1.1 — xem fonts/NGUON.md.
   ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ebgaramond-400-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ebgaramond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ebgaramond-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ebgaramond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ebgaramond-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ebgaramond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ebgaramond-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ebgaramond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   ĐÊM MỰC + VÀNG LÁ

   Bản trước để nền kem phủ toàn trang nên cả trang chỉ có MỘT khoảng sáng —
   không tối, không sáng, không chiều sâu. Đảo lại: nền là đêm mực sâu, giấy cũ
   trở thành vật liệu của panel chứ không phải nền trang.

   Lá bài in trên giấy kem, đặt trên nền tối thì tự phát sáng. Đó là cách để bộ
   tranh 1909 thành thứ đẹp nhất trên màn hình thay vì chìm vào nền cùng tông.

   Hiệu năng: chỉ animate transform và opacity — khách chính dùng Android tầm trung.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* nền: ba tầng sâu dần */
  --dem-sau:   #080B14;
  --dem:       #0E1322;
  --dem-nhat:  #1A2036;

  /* giấy: chỉ dùng cho panel và chữ */
  --giay:      #F0E7D4;
  --giay-mo:   #CFC3AC;
  --giay-chim: #8E8371;

  /* kim loại và lửa */
  --vang:      #D8B45C;
  --vang-sang: #F2DCA0;
  --vang-toi:  #8A6E2A;
  --than:      #C1553A;

  /* Dự phòng đều là font CÓ tiếng Việt đầy đủ. Georgia bị loại hẳn — nó là thủ phạm. */
  --chu: "EB Garamond", "Palatino Linotype", Cambria, "Times New Roman", serif;

  --nhip: cubic-bezier(.22, .68, .28, 1);   /* giấy dày rơi xuống bàn */
  --nhip-lat: cubic-bezier(.36, .06, .18, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Chốt cho thuộc tính `hidden`. PHẢI có, và phải đứng trước mọi rule `display`.
   Mặc định của trình duyệt là `[hidden] { display: none }` với độ ưu tiên gần như
   thấp nhất, nên chỉ cần `.hang-nut { display: flex }` là mọi phần tử `.hang-nut`
   mang `hidden` vẫn hiện nguyên — mà KHÔNG có lỗi nào trong console.

   Ba chỗ đang dính trước khi thêm dòng này (`thu_giao_dien.py` bắt được 14/08/2026):
   `.hang-nut` (nút cuối bài hiện ngay từ đầu thay vì sau khi đọc xong), `.lop-la`
   (bảng chi tiết lá đóng không được), `.thanh-tk` (thanh tài khoản hiện cả khi
   chưa đăng nhập). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--dem-sau);
  color: var(--giay);
  font-family: var(--chu);
  font-size: 21px;
  line-height: 1.75;
  font-weight: 500;          /* nét 400 quá mảnh trên nền tối */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Nền ─────────────────────────────────────────────────────────── */

.nen { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* hai quầng sáng lệch nhau, trôi rất chậm — cho nền có chiều sâu thay vì phẳng đen */
.nen-quang {
  position: absolute; inset: -25%;
  background:
    radial-gradient(closest-side at 26% 20%, rgba(216,180,92,.20),  transparent),
    radial-gradient(closest-side at 76% 74%, rgba(193,85,58,.16),   transparent),
    radial-gradient(closest-side at 50% 50%, rgba(26,32,54,.85),    transparent);
  animation: troi 52s ease-in-out infinite alternate;
}
@keyframes troi {
  from { transform: translate3d(-3%,-2%,0) scale(1); }
  to   { transform: translate3d(3%, 3%,0) scale(1.12); }
}

.nen-sao { position: absolute; inset: 0; }
.nen-sao i {
  position: absolute; border-radius: 50%;
  background: var(--vang-sang);
  box-shadow: 0 0 6px rgba(242,220,160,.9);
  animation: nhap 5s ease-in-out infinite;
}
@keyframes nhap {
  0%, 100% { opacity: .1;  transform: scale(.6); }
  50%      { opacity: .95; transform: scale(1); }
}

/* Bụi bay — canvas, hạt trôi rất chậm. Đây là thứ tách site "có gu" khỏi site phẳng:
   nền có chuyển động vi mô liên tục thay vì đứng im. */
.nen-bui { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Đèn bám con trỏ — một nguồn sáng mềm đi theo chuột khắp trang.
   Rẻ (chỉ đổi transform) nhưng là tín hiệu "cao cấp" mạnh nhất trong danh sách. */
.nen-den {
  position: absolute; top: 0; left: 0;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: radial-gradient(circle closest-side,
              rgba(216,180,92,.13), rgba(193,85,58,.05) 45%, transparent 70%);
  opacity: 0; transition: opacity .8s ease;
  will-change: transform;
}
.nen-den.bat { opacity: 1; }

.nen-hat { position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay; }

.nen-vien {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(8,11,20,.92) 100%);
}

/* ── Nút âm thanh ────────────────────────────────────────────────── */

.nut-am {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 20;
  display: flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .9rem; cursor: pointer;
  color: var(--giay-chim);
  background: rgba(8,11,20,.6);
  border: 1px solid rgba(216,180,92,.22);
  backdrop-filter: blur(6px);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.nut-am:hover { color: var(--vang); border-color: rgba(216,180,92,.6); }
.nut-am[aria-pressed="true"] {
  color: var(--vang); border-color: rgba(216,180,92,.5);
  box-shadow: 0 0 26px -12px rgba(216,180,92,.7);
}
/* tắt thì hiện dấu gạch chéo, bật thì hiện sóng — không đổi icon bằng JS */
.nut-am .song { opacity: 0; }
.nut-am .gach { opacity: 1; }
.nut-am[aria-pressed="true"] .song { opacity: 1; }
.nut-am[aria-pressed="true"] .gach { opacity: 0; }

@media (max-width: 600px) {
  .nut-am { top: .7rem; right: .7rem; padding: .45rem .6rem; }
  .nut-am span { display: none; }     /* chỉ còn icon, khỏi chiếm chỗ */
}

/* ── Bố cục ──────────────────────────────────────────────────────── */

main { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 5rem 1.5rem 3rem; }

.man { animation: man-vao .85s var(--nhip) both; }
@keyframes man-vao {
  from { opacity: 0; transform: translate3d(0,26px,0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* Màn đọc chỉ mờ vào, không transform: đây là màn dài nhất và có nhiều lớp 3D bên trong,
   tổ tiên có transform sẽ tạo containing block mới và làm hỏng định vị của con. */
.man-doc { animation-name: man-doc-vao; }
@keyframes man-doc-vao { from { opacity: 0; } to { opacity: 1; } }

.man-giua { text-align: center; }
.tieu-de { margin-bottom: 2.4rem; position: relative; }

h1 {
  font-size: clamp(2.25rem, 6.8vw, 3.6rem);
  font-weight: normal;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: .5rem 0 1rem;
  /* Vàng có vệt sáng quét qua rất chậm — kim loại bắt sáng, không phải màu phẳng.
     260% chiều rộng để vệt đi hết chữ rồi mới quay lại. */
  background: linear-gradient(100deg,
              var(--giay) 0 30%, var(--vang-sang) 44%, var(--vang) 54%,
              var(--giay) 68% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: quet-vang 11s ease-in-out infinite,
             lo-chu 1.1s var(--nhip) .1s both;
}
@keyframes quet-vang {
  0%, 100% { background-position: 118% 0; }
  50%      { background-position: -18% 0; }
}
/* lộ dần từ trái sang, như đang được viết ra */
@keyframes lo-chu {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -6% 0 0); }
}

.dan {
  font-size: .84rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--vang); margin: 0; font-weight: bold;
}

/* hoa tiết: gạch vàng mờ dần rồi viên kim cương */
.hoa-tiet { display: flex; align-items: center; gap: .7rem; }
.man-giua .hoa-tiet { justify-content: center; }
.hoa-tiet::before {
  content: ""; height: 1px; width: 76px;
  background: linear-gradient(90deg, transparent, var(--vang));
}
.hoa-tiet::after {
  content: ""; width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--vang); box-shadow: 0 0 10px rgba(216,180,92,.7);
}

.phu { color: var(--giay-mo); margin: 0 0 2rem; max-width: 56ch; }
.man-giua .phu { margin-left: auto; margin-right: auto; }

/* ── Chủ đề: panel giấy nổi trên nền đêm ─────────────────────────── */

.luoi-chu-de { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; perspective: 1200px; }

.the-chu-de {
  position: relative; overflow: hidden;
  font: inherit; text-align: left; cursor: pointer;
  padding: 1.5rem 1.6rem;
  color: var(--giay);
  background: linear-gradient(158deg, rgba(26,32,54,.92), rgba(14,19,34,.96));
  border: 1px solid rgba(216,180,92,.26);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(216,180,92,.12);
  transform-style: preserve-3d;
  transition: transform .45s var(--nhip), border-color .35s, box-shadow .45s;
}
.the-chu-de:hover {
  border-color: rgba(216,180,92,.75);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,1), 0 0 40px -14px rgba(216,180,92,.4),
              inset 0 1px 0 rgba(216,180,92,.3);
}
.the-chu-de b {
  display: block; font-weight: normal; font-size: 1.62rem;
  margin-bottom: .25rem; color: var(--vang-sang);
}
.the-chu-de span { font-size: 1.02rem; color: var(--giay-mo); }
/* vệt sáng bám con trỏ (biến --x/--y đặt từ JS) */
.the-chu-de::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--x,50%) var(--y,50%),
              rgba(216,180,92,.20), transparent 62%);
  transition: opacity .4s;
}
.the-chu-de:hover::after { opacity: 1; }

/* ── Ô nhập ──────────────────────────────────────────────────────── */

textarea {
  width: 100%; font: inherit; color: var(--giay);
  background: rgba(8,11,20,.55);
  border: 1px solid rgba(216,180,92,.24);
  padding: 1.1rem 1.2rem; resize: vertical;
  transition: border-color .35s, box-shadow .35s;
}
textarea::placeholder { color: var(--giay-chim); }
textarea:focus {
  outline: none; border-color: var(--vang);
  box-shadow: 0 0 0 3px rgba(216,180,92,.14), 0 0 30px -12px rgba(216,180,92,.5);
}
.dem { font-size: .86rem; color: var(--giay-chim); text-align: right; margin: .5rem 0 1rem; }

/* Gợi ý câu hỏi theo chủ đề. Bấm là điền vào ô. */
.goi-y-hoi { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.8rem; }
.goi-y-hoi button {
  font: inherit; font-size: .9rem; font-style: italic; text-align: left;
  cursor: pointer; color: var(--giay-chim);
  background: rgba(14,19,34,.5);
  border: 1px solid rgba(216,180,92,.14);
  padding: .5rem .9rem;
  transition: color .3s, border-color .3s;
}
.goi-y-hoi button:hover { color: var(--giay-mo); border-color: rgba(216,180,92,.42); }

/* ── Tài khoản, credit, thanh toán ───────────────────────────────────
   Cùng bảng màu, cùng nhịp với phần còn lại. Một trang xem tarot mà tới phần trả
   tiền lại đổi sang giao diện "web bán hàng" là chỗ khách tỉnh giấc — và cảm giác
   nghi thức dựng suốt bốn màn trước tan ngay tại đó. */

.thanh-tk {
  position: fixed; top: 1.1rem; left: 1.1rem; z-index: 20;
  display: flex; align-items: center; gap: .9rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .95rem; color: var(--giay-chim);
  background: rgba(8,11,20,.6);
  border: 1px solid rgba(216,180,92,.22);
  backdrop-filter: blur(6px);
}
.thanh-tk .ten-tk { color: var(--giay-mo); text-transform: none; letter-spacing: .04em; }
.thanh-tk #so-du { color: var(--vang); }

.lien-ket {
  font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--giay-chim); border-bottom: 1px solid rgba(216,180,92,.3);
  transition: color .3s, border-color .3s;
}
.lien-ket:hover { color: var(--vang); border-color: var(--vang); }

.the-tk { max-width: 24rem; margin: 0 auto 1.6rem; text-align: left; }
.the-tk label {
  display: block; margin-bottom: 1.1rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--giay-chim);
}
.the-tk input {
  display: block; width: 100%; margin-top: .5rem;
  font: inherit; font-size: 1rem; letter-spacing: normal; text-transform: none;
  color: var(--giay); background: rgba(8,11,20,.55);
  border: 1px solid rgba(216,180,92,.24); padding: .8rem 1rem;
  transition: border-color .35s, box-shadow .35s;
}
.the-tk input::placeholder { color: var(--giay-chim); font-size: .86rem; }
.the-tk input:focus {
  outline: none; border-color: var(--vang);
  box-shadow: 0 0 0 3px rgba(216,180,92,.14), 0 0 30px -12px rgba(216,180,92,.5);
}
.the-tk .nut-chinh { width: 100%; }
.loi-tk {
  color: var(--than); font-size: .9rem; margin: 0 0 1rem;
  border-left: 2px solid var(--than); padding-left: .8rem;
}

.cac-goi {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.the-goi {
  display: flex; flex-direction: column; gap: .35rem; align-items: center;
  min-width: 9.5rem; padding: 1.3rem 1.4rem; cursor: pointer;
  font: inherit; color: var(--giay);
  background: rgba(14,19,34,.7);
  border: 1px solid rgba(216,180,92,.24);
  transition: border-color .35s, box-shadow .35s, transform .35s var(--nhip);
}
.the-goi:hover {
  border-color: var(--vang); transform: translateY(-3px);
  box-shadow: 0 0 44px -18px rgba(216,180,92,.8);
}
.the-goi b { font-size: 1.05rem; font-weight: 400; }
.the-goi .gia { color: var(--vang); font-size: 1.25rem; }
.the-goi .don-gia { color: var(--giay-chim); font-size: .8rem; }

.khung-qr { margin: 0 auto 1.8rem; max-width: 26rem; }
.khung-qr img {
  display: block; margin: 1.2rem auto; width: 280px; height: auto;
  /* Nền trắng là bắt buộc: app ngân hàng quét QR trên nền tối rất hay trượt. */
  background: #fff; padding: .6rem; border: 1px solid rgba(216,180,92,.3);
}
.chi-tiet-ck {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.1rem;
  text-align: left; font-size: .92rem; margin: 0 0 1.2rem;
}
.chi-tiet-ck dt { color: var(--giay-chim); }
.chi-tiet-ck dd { margin: 0; color: var(--giay); }
.chi-tiet-ck dd b { color: var(--vang); letter-spacing: .08em; }
.cho-tien { color: var(--giay-mo); font-size: .92rem; }

/* ── Màn chờ đọc bài ───────────────────────────────────────────────
   Ba chấm thở lệch nhịp nhau. Không dùng thanh tiến độ: mình KHÔNG biết còn bao lâu,
   mà thanh tiến độ chạy tới 90% rồi đứng là lời hứa hão — khách tin nó rồi mất tin
   vào cả trang. Nhịp thở chỉ nói "vẫn đang chạy", đúng thứ mình biết chắc. */
.vong-cho { display: flex; gap: .7rem; justify-content: center; margin: 0 0 2rem; }
.vong-cho i {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--vang); opacity: .25;
  animation: cho-tho 1.6s ease-in-out infinite;
}
.vong-cho i:nth-child(2) { animation-delay: .22s; }
.vong-cho i:nth-child(3) { animation-delay: .44s; }
@keyframes cho-tho {
  0%, 100% { opacity: .2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-.35rem); }
}
#loi-cho { min-height: 3.2em; }   /* chừa chỗ sẵn, đổi lời không làm trang nhảy */
.canh-cho {
  max-width: 34rem; margin: 1.4rem auto 0; font-size: .92rem;
  color: var(--giay-mo); line-height: 1.65;
  border: 1px solid rgba(216,180,92,.25);
  background: rgba(14,19,34,.6);
  padding: 1rem 1.3rem;
}
.canh-cho b { color: var(--vang-sang); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .vong-cho i { animation: none; opacity: .7; }
}

/* Ba lá giờ cũng bấm được vào từng lá để xem chi tiết tranh, như bản chín lá.
   Chỉ gắn khi lá có đủ dữ liệu — con trỏ hình bàn tay mà bấm không ra gì thì tệ hơn
   là không có gì để bấm. */
.o-la .lat.bam-duoc { cursor: pointer; }
/* Sáng lên đặt ở MẶT TRƯỚC, tuyệt đối không đặt ở `.trong`.
   `.trong` là phần tử giữ `transform-style: preserve-3d`, mà một `filter` bất kỳ ép
   phần tử làm phẳng con 3D của nó — nên rê chuột vào là mặt lưng (đang xoay 180° nấp
   sau) lật lên trên. Đã dính đúng lỗi này 13/08/2026: lá vừa lật xong, hover một cái
   là quay về mặt lưng, mà không có lỗi nào trong console. */
.o-la .lat.bam-duoc:hover .mat-truoc { filter: brightness(1.12); }

.ve-trang-chu {
  position: fixed; bottom: 1rem; left: 1.1rem; z-index: 19;
  font-size: .76rem; letter-spacing: .1em; text-decoration: none;
  color: var(--giay-chim); transition: color .3s;
}
.ve-trang-chu:hover { color: var(--vang); }
/* ── Hộp thư hỗ trợ ──────────────────────────────────────────────── */

#cham-thu { color: var(--than); font-size: 1.3rem; line-height: 0; margin-left: .2rem; }

.man-thu { padding-bottom: 4rem; }
.ds-thu { display: flex; flex-direction: column; gap: .6rem;
          max-width: 42rem; margin: 0 auto 2rem; }
.the-thu {
  display: flex; flex-direction: column; gap: .35rem; text-align: left;
  font: inherit; cursor: pointer; padding: .9rem 1.1rem; color: var(--giay-mo);
  background: rgba(14,19,34,.6); border: 1px solid rgba(216,180,92,.18);
  transition: border-color .3s, color .3s;
}
.the-thu:hover { border-color: var(--vang); color: var(--giay); }
.the-thu.co-tra-loi { border-left: 2px solid var(--vang); }
.tt-dau {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vang); display: flex; justify-content: space-between; gap: 1rem;
}
.tt-dau em { font-style: normal; color: var(--giay-chim); letter-spacing: .04em; }
.tt-cd { font-size: .98rem; }

.mot-thu { max-width: 42rem; margin: 0 auto 2rem; text-align: left; }
.mot-thu h2 { font-size: 1.2rem; font-weight: 500; margin: 0 0 1.2rem; color: var(--vang-sang); }
.mach-thu { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.tin { padding: .9rem 1.1rem; background: rgba(14,19,34,.6);
       border-left: 2px solid rgba(240,231,212,.2); }
.tin-toi { border-left-color: var(--vang); background: rgba(216,180,92,.06); }
.tin-ai {
  display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--giay-chim);
}
.tin-toi .tin-ai { color: var(--vang); }
.tin-ai em { font-style: normal; letter-spacing: .04em; }
.tin p { margin: 0; font-size: .98rem; line-height: 1.65; white-space: pre-wrap; }

.o-tra-thu { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.o-tra-thu textarea { width: 100%; }
#thu-moi { max-width: 42rem; }
#thu-moi input, #thu-moi textarea {
  display: block; width: 100%; margin-top: .5rem; font: inherit; font-size: 1rem;
  letter-spacing: normal; text-transform: none; color: var(--giay);
  background: rgba(8,11,20,.55); border: 1px solid rgba(216,180,92,.24);
  padding: .8rem 1rem;
}
#thu-moi input:focus, #thu-moi textarea:focus {
  outline: none; border-color: var(--vang);
}

/* ── Danh sách quẻ đã rút ────────────────────────────────────────── */

.man-que-cu { padding-bottom: 4rem; }
.ds-que {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .9rem; max-width: 56rem; margin: 0 auto 2rem;
}
.the-que {
  display: flex; flex-direction: column; gap: .5rem; text-align: left;
  font: inherit; cursor: pointer; padding: 1.1rem 1.2rem;
  color: var(--giay-mo);
  background: rgba(14,19,34,.65);
  border: 1px solid rgba(216,180,92,.2);
  transition: border-color .35s, transform .35s var(--nhip), color .35s;
}
.the-que:hover {
  border-color: var(--vang); color: var(--giay); transform: translateY(-2px);
}
.tq-dau {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vang); display: flex; justify-content: space-between; gap: 1rem;
}
.tq-dau em { font-style: normal; color: var(--giay-chim); letter-spacing: .04em; }
.tq-hoi {
  font-size: .95rem; line-height: 1.55;
  /* Cắt còn ba dòng: thẻ nào cũng cao bằng nhau thì lưới mới đọc được, mà câu hỏi
     dài ngắn rất khác nhau. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tq-con { font-size: .78rem; color: var(--giay-chim); }

/* Nút xoá: mờ hẳn cho tới khi rê chuột vào thẻ. Đây là hành động không lấy lại được,
   không nên là thứ đập vào mắt trước cả nội dung.
   .o-que là ô lưới thật, .the-que căng kín nó — nút xoá nằm ngoài nút mở quẻ. */
.o-que { position: relative; display: grid; }
.xoa-que {
  /* Góc dưới phải, không phải góc trên: góc trên phải đã có ngày giờ trong .tq-dau,
     đặt nút lên đó là che mất. Dưới này chỉ có .tq-con ngắn nằm bên trái. */
  position: absolute; bottom: .6rem; right: .7rem;
  font: inherit; font-size: .72rem; letter-spacing: .1em; cursor: pointer;
  color: var(--giay-chim); background: rgba(8,11,20,.7);
  border: 1px solid rgba(240,231,212,.14); padding: .2rem .55rem;
  opacity: 0; transition: opacity .3s, color .3s, border-color .3s;
}
.o-que:hover .xoa-que, .xoa-que:focus { opacity: 1; }
.xoa-que:hover { color: var(--than); border-color: var(--than); }
/* Trên điện thoại không có "rê chuột" — hiện mờ sẵn. */
@media (hover: none) { .xoa-que { opacity: .55; } }

.ve-cau-hoi {
  position: fixed; bottom: 1rem; left: 12rem; z-index: 19;
  font-size: .76rem; letter-spacing: .1em; text-decoration: none;
  color: var(--giay-chim); transition: color .3s;
}
.ve-cau-hoi:hover { color: var(--vang); }
/* Trên màn hẹp chúng đụng vào bàn phím ảo và các nút cuối màn — giấu đi, nút quay
   lại của trình duyệt trên điện thoại làm đúng việc này rồi. */
@media (max-width: 720px) { .ve-trang-chu, .ve-cau-hoi { display: none; } }

/* ── Màn thông báo ───────────────────────────────────────────────── */

.loi-nhan {
  max-width: 54ch; margin: 0 auto 2.4rem;
  color: var(--giay); line-height: 1.9; text-align: left;
}
.loi-nhan p { margin: 0 0 1.1rem; }
.loi-nhan p:last-child { margin-bottom: 0; }

/* ── Hỏi lại cùng một chuyện ─────────────────────────────────────── */

.hoi-cu {
  margin: 0 auto 1.8rem; max-width: 52ch; padding: 1rem 1.4rem;
  border-left: 2px solid var(--vang-toi); text-align: left;
  color: var(--giay); font-style: italic; font-size: 1.02rem;
}

.hai-duong { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.the-duong {
  font: inherit; cursor: pointer; padding: 1.4rem 1.5rem;
  color: var(--giay);
  background: linear-gradient(158deg, rgba(26,32,54,.92), rgba(14,19,34,.96));
  border: 1px solid rgba(216,180,92,.26);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(216,180,92,.12);
  transition: border-color .35s, box-shadow .45s, transform .35s var(--nhip);
}
.the-duong:hover {
  border-color: rgba(216,180,92,.75); transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,1), 0 0 40px -14px rgba(216,180,92,.4);
}
.the-duong b {
  display: block; font-weight: normal; font-size: 1.3rem;
  color: var(--vang-sang); margin-bottom: .45rem;
}
.the-duong span { font-size: .96rem; color: var(--giay-mo); line-height: 1.62; }
.the-duong em { color: var(--vang); font-style: normal; }

/* Dòng khai báo đặt trên đầu bài đọc: quẻ này là quẻ cũ xem lại, hay là một góc
   nhìn khác. Phải nằm TRÊN bài đọc chứ không phải dưới — nó là điều kiện để đọc
   phần còn lại cho đúng, không phải chú thích thêm vào. */
/* Cảnh báo bản xem thử. Cố ý dùng màu lửa chứ không dùng vàng lá: nó KHÔNG phải một
   phần của nghi thức, nó là lời nói thẳng với người đang dựng. Phải khác hẳn mọi thứ
   quanh nó, không thì lại chìm vào trang và trở thành vô hình như lần trước. */
.nhac-mau[hidden] { display: none; }
.nhac-mau {
  margin: 0 0 1.8rem; padding: .9rem 1.2rem;
  border: 1px dashed rgba(193,85,58,.7);
  background: rgba(193,85,58,.1);
  color: var(--giay); font-size: .96rem; line-height: 1.7;
}
.nhac-mau strong { color: var(--than); font-weight: normal; }

.nhac-que[hidden] { display: none; }
.nhac-que {
  margin: 0 0 1.8rem; padding: .85rem 1.2rem;
  border: 1px solid rgba(216,180,92,.3);
  background: rgba(216,180,92,.07);
  color: var(--giay-mo); font-size: .96rem; font-style: italic; line-height: 1.65;
}

/* ── Hai người là ai ─────────────────────────────────────────────── */

.doi-nguoi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2.2rem; }
.mot-nguoi { display: grid; gap: .7rem; align-content: start; }
.dan-nho {
  margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--vang); font-weight: bold;
}
.mot-nguoi input {
  width: 100%; font: inherit; color: var(--giay);
  background: rgba(8,11,20,.55);
  border: 1px solid rgba(216,180,92,.24);
  padding: .8rem 1rem;
  transition: border-color .35s, box-shadow .35s;
}
.mot-nguoi input::placeholder { color: var(--giay-chim); }
.mot-nguoi input:focus {
  outline: none; border-color: var(--vang);
  box-shadow: 0 0 0 3px rgba(216,180,92,.14), 0 0 30px -12px rgba(216,180,92,.5);
}

/* Đường bỏ qua để nhạt và nhỏ — có mặt cho người không muốn khai, nhưng không
   mời gọi. Bắt buộc điền ở tier miễn phí là mất khách ngay đầu phễu. */
.bo-qua {
  display: block; margin: 1.6rem auto 0; padding: .4rem;
  font: inherit; font-size: .88rem; background: none; border: 0; cursor: pointer;
  color: var(--giay-chim); text-decoration: underline;
  text-decoration-color: rgba(142,131,113,.4); text-underline-offset: 4px;
  transition: color .3s;
}
.bo-qua:hover { color: var(--giay-mo); }

/* ── Nghi thức tĩnh tâm ──────────────────────────────────────────── */

.man-nghi-thuc { position: relative; padding: 3rem 0 2rem; }

/* Nền lùi hẳn xuống trong lúc nghi thức — bụi bay và sao nhấp nháy là thứ kéo mắt
   đi lung tung, mà cả màn này chỉ có một việc: giữ mắt đứng yên. */
body.nghi-thuc .nen-bui,
body.nghi-thuc .nen-sao { opacity: .22; transition: opacity 1.4s ease; }
.nen-bui, .nen-sao { transition: opacity 1.4s ease; }

.vong-tho {
  position: absolute; left: 50%; top: 42%; z-index: -1;
  width: min(440px, 84vw); aspect-ratio: 1; margin-left: min(-220px, -42vw);
  transform: translateY(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side,
              rgba(216,180,92,.24), rgba(193,85,58,.09) 55%, transparent 72%);
  animation: tho 5.5s ease-in-out infinite;
}
.vong-tho::after {
  content: ""; position: absolute; inset: 24%;
  border: 1px solid rgba(216,180,92,.3); border-radius: 50%;
}
/* Chu kỳ 5,5s phải khớp với NHIP_THO trong app.js — nút "Tôi đã sẵn sàng" chỉ hiện
   sau trọn MỘT nhịp thở. Đổi chỗ này thì đổi cả chỗ kia. */
@keyframes tho {
  0%, 100% { transform: translateY(-50%) scale(.72); opacity: .5; }
  50%      { transform: translateY(-50%) scale(1.06); opacity: 1; }
}

.ten-doi { display: grid; gap: 1rem; margin: 1.8rem 0 2.2rem; }
.ten-doi p {
  margin: 0; font-size: clamp(1.5rem, 4.6vw, 2.15rem);
  color: var(--vang-sang); line-height: 1.25;
}
.ten-doi .sinh {
  display: block; font-size: .52em; font-style: italic;
  color: var(--giay-mo); letter-spacing: .06em; margin-top: .2rem;
}
/* Không khai tên thì chính câu hỏi lên thay chỗ đó. Nhỏ hơn hẳn tên vì nó là một
   câu chứ không phải một cái tên — để cỡ tên thì tràn màn hình. */
.ten-doi .cau-hoi-nhac {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-style: italic;
  color: var(--giay); max-width: 34ch; margin: 0 auto; line-height: 1.6;
}
.loi-nhac { color: var(--giay-mo); line-height: 1.9; margin: 0 0 2.4rem; }

#hang-nut-nghi-thuc[hidden] { display: none; }
#hang-nut-nghi-thuc { animation: man-vao 1.1s var(--nhip) both; }

/* ── Ô xác minh (Turnstile) ──────────────────────────────────────── */

/* KHÔNG chừa chiều cao. Với data-appearance="interaction-only" thì bình thường widget
   không vẽ gì cả — chừa sẵn 70px sẽ thành một khoảng trống khó hiểu giữa trang. Trường
   hợp Cloudflare thật sự bắt bấm là hiếm, và lúc đó đẩy hàng nút xuống chấp nhận được. */
.o-kiem { margin-bottom: 1.4rem; }
.loi-kiem[hidden] { display: none; }
.loi-kiem {
  margin: .7rem 0 0; font-size: .94rem; color: var(--than); font-style: italic;
}

/* ── Nút ─────────────────────────────────────────────────────────── */

.hang-nut { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.man-giua .hang-nut { justify-content: center; }

.nut-chinh, .nut-phu {
  font: inherit; font-size: 1.04rem; letter-spacing: .05em;
  padding: .85rem 2.2rem; cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .4s, border-color .4s, box-shadow .4s, transform .3s var(--nhip);
}
.nut-chinh {
  background: none; color: var(--vang-sang);
  border: 1px solid var(--vang);
  box-shadow: 0 0 26px -14px rgba(216,180,92,.8);
}
.nut-chinh span { position: relative; z-index: 1; }
.nut-chinh::before {   /* vàng dâng từ dưới lên */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--vang-sang), var(--vang));
  transform: translate3d(0,101%,0);
  transition: transform .5s var(--nhip);
}
.nut-chinh:hover { color: var(--dem-sau); box-shadow: 0 0 44px -10px rgba(216,180,92,.75); }
.nut-chinh:hover::before { transform: none; }
.nut-chinh:active { transform: translateY(1px); }

.nut-phu { background: none; color: var(--giay-mo); border: 1px solid rgba(240,231,212,.2); }
.nut-phu:hover { border-color: var(--giay-mo); color: var(--giay); }

/* focus rõ cho bàn phím — checklist WCAG */
:focus-visible { outline: 2px solid var(--vang); outline-offset: 3px; }

/* ── Lá bài ──────────────────────────────────────────────────────── */

.la, .lat { aspect-ratio: 500 / 866; position: relative; }
.la {
  border: 1px solid rgba(216,180,92,.3); overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.95);
}

/* Mặt sau tạm vẽ bằng gradient. Hoa văn thật nên đặt vẽ —
   KHÔNG lấy mặt sau bản in hiện đại, xem bo_bai/NGUON.md. */
.mat-sau {
  width: 100%; height: 100%;
  background-color: #2A1B2E;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 8px, rgba(216,180,92,.30) 8px 9px),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(216,180,92,.30) 8px 9px),
    radial-gradient(circle at 50% 50%, rgba(216,180,92,.42) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(193,85,58,.30) 0 26%, transparent 27%);
}

/* ── Màn xáo ─────────────────────────────────────────────────────── */

.san-xao { perspective: 1400px; height: 340px; display: grid; place-items: center; margin: 2.5rem 0; }
.chong { position: relative; width: 165px; transform-style: preserve-3d; animation: xoay 11s linear infinite; }
@keyframes xoay { to { transform: rotateY(360deg); } }
.chong .la {
  position: absolute; inset: 0; width: 165px;
  animation: nhip-xao 1.6s var(--nhip) infinite;
  box-shadow: 0 0 50px -16px rgba(216,180,92,.55);
}
@keyframes nhip-xao {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  30%      { transform: translate3d(-28px,-16px,36px) rotate(-9deg); }
  62%      { transform: translate3d(24px,-7px,-24px) rotate(7deg); }
}

/* ── Màn chọn ────────────────────────────────────────────────────── */

.san-quat { perspective: 1600px; padding: 2.5rem 0 1rem; }
.quat-bai { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; transform-style: preserve-3d; }
.quat-bai .la {
  width: 68px; cursor: pointer;
  transform: rotate(var(--nghieng, 0deg));
  transition: transform .5s var(--nhip), box-shadow .5s, opacity .55s;
  animation: la-vao .7s var(--nhip) both;
  animation-delay: var(--tre, 0s);
}
@keyframes la-vao {
  from { opacity: 0; transform: translate3d(0,54px,-220px) rotate(var(--nghieng,0deg)); }
  to   { opacity: 1; }
}
.quat-bai .la:hover {
  transform: translate3d(0,-20px,70px) rotate(var(--nghieng,0deg));
  box-shadow: 0 30px 46px -22px rgba(0,0,0,1), 0 0 40px -12px rgba(216,180,92,.6);
}
.quat-bai .la.da-chon {
  transform: translate3d(0,-22px,50px) rotate(var(--nghieng,0deg));
  box-shadow: 0 0 0 2px var(--vang), 0 0 52px -10px rgba(216,180,92,.85);
}
.quat-bai .la.mo { opacity: .16; pointer-events: none; transform: scale(.92) rotate(var(--nghieng,0deg)); }

/* ── Màn đọc ─────────────────────────────────────────────────────── */

.man-doc { padding-bottom: 5rem; }

/* KHÔNG dùng position:sticky ở đây.
   Đã thử và hỏng hai đường cùng lúc: nền gradient tắt dần sang trong suốt nên chữ cuộn
   chui qua đè lên tên lá; còn nền đặc thì đè lên các lớp quầng sáng (chúng nằm sau <main>)
   tạo ra một hình chữ nhật tối có cạnh thẳng, trông như miếng vá dán lên.
   Ba lá đứng yên ngay trên bài đọc, cuộn lên xem lại là đủ. */
.cot-la { position: relative; padding: .5rem 0 2.4rem; text-align: center; }

/* Quầng sáng mềm sau ba lá — chỉ là ánh sáng, không viền, không hộp, không cạnh. */
.cot-la::before {
  content: ""; position: absolute; pointer-events: none;
  left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: min(130%, 940px); height: 460px;
  background: radial-gradient(ellipse at center, rgba(216,180,92,.15), transparent 68%);
}
.cot-la > * { position: relative; }

.ba-la { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin: 1.2rem 0 0; perspective: 1600px; }
.o-la { text-align: center; position: relative; }

.o-la .ten-vi-tri {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vang); margin: 0 0 .7rem;
  /* Chừa đủ chỗ cho HAI dòng. "KHOẢNG GIỮA HAI NGƯỜI" ở cỡ mới có thể xuống dòng,
     mà nếu chỉ chừa một dòng thì ba lá bắt đầu ở ba độ cao khác nhau. */
  min-height: 3.6em;
}
/* gạch vàng mảnh dưới nhãn vị trí — cho ba cột có nhịp thay vì chữ trôi nổi */
.o-la .ten-vi-tri::after {
  content: ""; display: block; width: 26px; height: 1px; margin: .5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--vang), transparent);
}

.o-la .ten-la { font-size: 1.12rem; margin: .9rem 0 0; color: var(--giay); }
.o-la .nguoc { color: var(--than); font-style: italic; }

/* Bay lơ lửng. Đặt ở .lat (lớp NGOÀI) chứ không ở .trong — .trong đang giữ phép quay
   lật bài, hai transform trên cùng một phần tử sẽ đá nhau. Mỗi lá một chu kỳ lệch nhau
   để ba lá không nhấp nhô cùng nhịp như đồ chơi. */
.lat {
  transform-style: preserve-3d;
  animation: bay var(--chu-ky, 6s) ease-in-out infinite;
  animation-delay: var(--lech, 0s);
}
@keyframes bay {
  0%, 100% { transform: translate3d(0,0,0)    rotateZ(0deg)   rotateX(0deg); }
  50%      { transform: translate3d(0,-11px,0) rotateZ(.75deg) rotateX(2.4deg); }
}
.o-la:nth-child(1) .lat { --chu-ky: 6.2s;  --lech: 0s; }
.o-la:nth-child(2) .lat { --chu-ky: 7.4s;  --lech: -1.8s; }
.o-la:nth-child(3) .lat { --chu-ky: 6.8s;  --lech: -3.4s; }

.lat .trong {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 1.1s var(--nhip-lat);
}
.lat.da-lat .trong { transform: rotateY(180deg); }
.lat .mat {
  position: absolute; inset: 0; backface-visibility: hidden;
  overflow: hidden;
  /* viền vàng mảnh vẽ bằng shadow trong, không dùng border — border ăn vào kích thước
     và làm hở một sợi nền ở mép khi lá quay nghiêng */
  box-shadow: inset 0 0 0 1px rgba(216,180,92,.42);
}
/* Hào quang ấm + bóng đổ dưới chân, gộp trong một box-shadow.
   Làm bằng box-shadow chứ không bằng phần tử phụ: .lat là ngữ cảnh 3D, con của nó
   vẽ sai mặt phẳng, còn dùng z-index âm thì bóng dễ biến mất hẳn. */
.lat.da-lat {
  box-shadow: 0 0 78px -16px rgba(216,180,92,.6),
              0 34px 40px -24px rgba(0,0,0,.95);
}
.lat .mat-truoc { transform: rotateY(180deg); }
.lat .mat-truoc img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* kéo giấy kem về phía màu ấm để nó không loé trắng trên nền đêm */
  filter: saturate(1.08) contrast(1.05) brightness(.96);
}
.lat .mat-truoc.lat-nguoc img { transform: rotate(180deg); }

/* Ánh sáng chiếu xiên trên mặt lá: sáng góc trên trái, tối dần xuống góc dưới phải.
   Đây là thứ biến tấm ảnh phẳng thành vật thể có khối. */
.lat .mat-truoc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(152deg, rgba(255,238,196,.20) 0%, transparent 34%,
                    transparent 62%, rgba(16,10,4,.30) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(16,10,4,.26) 100%);
}

.vach-doc { height: 1px; background: rgba(216,180,92,.2); margin: 2rem 0 2.4rem; position: relative; }
.vach-day {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--vang-toi), var(--vang-sang));
  box-shadow: 0 0 14px rgba(216,180,92,.7);
  transition: width .15s linear;
}

/* Panel giấy: đây mới là chỗ giấy cũ xuất hiện, nổi trên nền đêm */
.panel-giay {
  font-weight: 400;   /* chữ tối trên nền sáng, 500 sẽ nặng */
  background: linear-gradient(168deg, #F3EBD9, #E4D8BE);
  color: #241E15;
  padding: clamp(1.6rem, 5vw, 3rem);
  border: 1px solid rgba(216,180,92,.5);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,1), 0 0 0 1px rgba(0,0,0,.35);
  position: relative;
}
/* bốn góc vàng */
.panel-giay::before, .panel-giay::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--vang-toi);
}
.panel-giay::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.panel-giay::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

.bai-doc p {
  font-size: 1.08rem; line-height: 1.82;
  margin: 0 0 1.5rem; max-width: 62ch;
  opacity: 0; transform: translate3d(0,28px,0);
  transition: opacity .95s var(--nhip), transform .95s var(--nhip);
}
.bai-doc p.hien { opacity: 1; transform: none; }
.bai-doc strong {
  font-weight: normal; color: #8A3A25;
  letter-spacing: .01em; border-bottom: 1px solid rgba(138,58,37,.28);
}
.bai-doc p:last-child {
  font-style: italic; color: #5C5343; font-size: 1.16rem;
  border-left: 2px solid var(--vang-toi); padding-left: 1.3rem; margin-top: 2rem;
}

.tu { opacity: 0; animation: chu-hien .65s var(--nhip) forwards; }
@keyframes chu-hien {
  from { opacity: 0; filter: blur(4px); transform: translateY(3px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TRẢI CHÍN LÁ — bản đầy đủ

   Nghi thức ba nhịp:
     1. chọn đủ chín lá  → chín lá bay về giữa màn hình, chồng lên nhau, xoay
     2. chồng bài toả ra → ba hàng ba lá, có tiêu đề hàng
     3. chạm từng lá     → lá lật, bảng nội dung của lá đó mở lên

   Cả nhịp 1 và 2 chạy trong lớp .bay (position:fixed) bằng kỹ thuật FLIP —
   xem hieu_ung.js. Ở đây chỉ có phần trang trí.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Lớp bay: chỉ sống trong lúc chuyển màn ──────────────────────── */

.bay { position: fixed; inset: 0; z-index: 30; pointer-events: none; perspective: 1500px; }
.bay[hidden] { display: none; }

/* .gop đứng yên chính giữa và không bao giờ được animate — nó là mốc toạ độ
   để JS tính đường bay. Thứ quay là .xoay bên trong. */
.gop {
  position: absolute; left: 50%; top: 50%;
  width: var(--gop-rong, 172px); aspect-ratio: 500 / 866;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
/* quầng sáng bùng lên lúc chín lá chập vào nhau */
.gop::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  background: radial-gradient(circle closest-side,
              rgba(242,220,160,.34), rgba(216,180,92,.14) 42%, transparent 70%);
  opacity: 0; transition: opacity .7s ease;
}
.gop.sang::before { opacity: 1; }

.xoay { position: absolute; inset: 0; transform-style: preserve-3d; }
.xoay .la {
  position: absolute; inset: 0;
  transition: transform var(--thoi, .95s) var(--nhip);
  box-shadow: 0 24px 46px -22px rgba(0,0,0,.95), 0 0 34px -14px rgba(216,180,92,.5);
}
.xoay.dang-xoay { animation: gop-xoay 1.25s cubic-bezier(.5,.03,.28,1) forwards; }
@keyframes gop-xoay {
  0%   { transform: rotateY(0deg)   scale(1); }
  50%  { transform: rotateY(400deg) scale(1.09); }
  100% { transform: rotateY(720deg) scale(1); }
}

/* ── Màn trải ────────────────────────────────────────────────────── */

/* Chỉ mờ vào, KHÔNG transform. Màn này được dựng ngay giữa lúc chồng bài đang xoay,
   và hieu_ung.js đo toạ độ các ô ngay sau đó — một animation dịch chuyển đang chạy
   sẽ làm phép đo lệch, lá bay xong hạ xuống trượt chỗ. Cùng lý do với .man-doc. */
.man-trai { padding-bottom: 5rem; animation-name: man-doc-vao; }
.chi-dan {
  color: var(--giay-chim); font-size: .96rem; font-style: italic;
  margin: -1.2rem 0 2.8rem;
}

.cac-hang { display: grid; gap: 3.6rem; }

.hang { position: relative; }
/* Quầng sáng sau mỗi hàng. Cùng cách làm với .cot-la::before: CHỈ là ánh sáng —
   không viền, không nền đặc — nên không tạo ra hình chữ nhật có cạnh thẳng đè lên nền. */
.hang::before {
  content: ""; position: absolute; pointer-events: none;
  left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: min(128%, 920px); height: 420px;
  background: radial-gradient(ellipse at center, rgba(216,180,92,.14), transparent 68%);
}
.hang > * { position: relative; }

.dau-hang { display: flex; align-items: baseline; gap: .85rem; margin-bottom: 1.4rem; }
.dau-hang h2 {
  font-size: 1.5rem; font-weight: normal; margin: 0; white-space: nowrap;
  color: var(--vang-sang); letter-spacing: .05em; text-transform: uppercase;
}
.dau-hang .phu-hang {
  margin: 0; color: var(--giay-chim); font-size: .94rem; font-style: italic;
}
.dau-hang::after {
  content: ""; flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, rgba(216,180,92,.55), transparent);
}

.ba-o { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

/* ── Một lá trong hàng ───────────────────────────────────────────── */

.o-la9 { text-align: center; }
.o-la9 .ten-o {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--vang); margin: 0 0 .6rem; min-height: 3.4em; font-weight: bold;
}
.o-la9 .ten-o::after {
  content: ""; display: block; width: 22px; height: 1px; margin: .45rem auto 0;
  background: linear-gradient(90deg, transparent, var(--vang), transparent);
}

/* Perspective đặt ở ĐÂY chứ không ở .ba-o: .khung-la có transform riêng (rung),
   mà một transform ở giữa sẽ cắt đứt chuỗi perspective từ tổ tiên xuống. Mỗi lá
   tự giữ perspective của mình thì không phụ thuộc ai cả. */
.khung-la { perspective: 900px; cursor: pointer; }
@keyframes rung {
  0%, 100% { transform: rotate(-.45deg) translateY(0); }
  50%      { transform: rotate(.45deg)  translateY(-2px); }
}

/* BA chuyển động nghỉ (bay, rung, lấp lánh) đều tắt cho tới khi có .san-sang,
   do app.js gắn SAU khi lá đã hạ xuống. Bật sớm thì lá đang dập dềnh đúng lúc
   hieu_ung.js đo toạ độ đích, và bản sao sẽ hạ xuống lệch chỗ vài pixel.
   `bay` kế thừa từ luật .lat chung ở màn đọc — phải chặn lại rồi mới bật đúng lúc. */
.o-la9 .lat { animation: none; transition: box-shadow .45s; }
.o-la9.san-sang .lat {
  animation: bay var(--chu-ky, 6s) ease-in-out infinite;
  animation-delay: var(--lech, 0s);
}
.o-la9.san-sang .khung-la {
  animation: rung var(--ky-rung, 3.2s) ease-in-out infinite;
  animation-delay: var(--lech-rung, 0s);
}
.khung-la:hover .lat, .khung-la:focus-visible .lat {
  box-shadow: 0 0 66px -12px rgba(216,180,92,.8), 0 28px 44px -22px rgba(0,0,0,1);
}

/* Lấp lánh: một vệt sáng quét chéo qua mặt sau rồi nghỉ. Nghỉ dài hơn quét —
   quét liên tục thì chín lá cùng nhấp nháy trông như biển quảng cáo. */
.o-la9 .mat-sau::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(242,220,160,.30) 47%,
              rgba(255,246,222,.46) 50%, rgba(242,220,160,.30) 53%, transparent 62%);
  background-size: 300% 100%;
  background-position: 155% 0;
}
.o-la9.san-sang .mat-sau::after {
  animation: lap-lanh var(--ky-lanh, 5.4s) ease-in-out infinite;
  animation-delay: var(--lech-lanh, 0s);
}
@keyframes lap-lanh {
  0%, 60%, 100% { background-position: 155% 0; }
  26%           { background-position: -55% 0; }
}

/* Tên lá có mặt trong DOM ngay từ đầu để giữ chỗ — lật xong mới hiện thì bố cục
   không bị xô, mà cũng không lộ lá trước khi khách lật. */
.o-la9 .ten-la {
  font-size: 1.02rem; margin: .8rem 0 0; color: var(--giay-mo);
  visibility: hidden;
}
.o-la9.da-lat-roi .ten-la { visibility: visible; }
.o-la9 .nguoc { color: var(--than); font-style: italic; }
.o-la9.da-doc .ten-la { color: var(--vang-sang); }
.o-la9.da-doc .ten-la::before {
  content: "◆"; font-size: .6em; color: var(--vang); margin-right: .45em;
  vertical-align: middle;
}

/* ── Đoạn AI viết cho cả hàng ────────────────────────────────────── */

/* Không đặt trên panel giấy như phần kết: ba panel giấy xen giữa ba hàng lá sẽ
   chặt vụn trang. Để chữ sáng trên nền đêm, có vạch vàng dẫn — đọc như người
   đọc bài đang nói giữa hai hàng, còn panel giấy để dành cho phần kết. */
.doc-khoi {
  margin-top: 2rem; padding-left: 1.5rem;
  border-left: 2px solid var(--vang-toi);
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity .95s var(--nhip), transform .95s var(--nhip);
}
.doc-khoi[hidden] { display: none; }
.doc-khoi.hien { opacity: 1; transform: none; }
.doc-khoi p { margin: 0; font-size: 1.05rem; line-height: 1.82; color: var(--giay); }

.ket-9[hidden] { display: none; }
.ket-9 { margin-top: 3.4rem; }

/* Phần kết có bốn đoạn: mạch chung / lời khuyên / CÂU HỎI CUỐI / mời hỏi.
   Luật chung của .bai-doc đóng khung đoạn CUỐI CÙNG, nhưng ở đây đoạn đáng đóng
   khung là câu hỏi cuối, còn đoạn cuối cùng là lời mời hỏi — một ghi chú, không
   phải cao trào. Đảo lại cho đúng thứ bậc. */
.ket-9 .bai-doc p:nth-last-child(2) {
  font-style: italic; color: #5C5343; font-size: 1.16rem;
  border-left: 2px solid var(--vang-toi); padding-left: 1.3rem; margin-top: 2rem;
}
.ket-9 .bai-doc p:last-child {
  font-style: normal; font-size: .98rem; color: #6B5C3C;
  border-left: 0; padding-left: 0;
  margin-top: 1.7rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(138,110,42,.3);
}

/* ── Hỏi thêm ────────────────────────────────────────────────────── */

.hoi-dap { margin-top: 3.8rem; }
.hoi-dap[hidden] { display: none; }

.mach-hoi { display: grid; gap: 2.4rem; margin: 1.8rem 0 2.2rem; }
.mach-hoi:empty { display: none; margin: 0; }

.luot { display: grid; gap: 1.1rem; }
.cau-hoi-khach {
  justify-self: end; max-width: 84%; margin: 0;
  padding: .85rem 1.25rem; font-size: 1.02rem; color: var(--giay);
  background: linear-gradient(158deg, rgba(26,32,54,.95), rgba(14,19,34,.98));
  border: 1px solid rgba(216,180,92,.3);
}

.tra-loi { border-left: 2px solid var(--vang-toi); padding-left: 1.5rem; }
.tra-loi .van p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.82; color: var(--giay); }
.tra-loi .van p:last-child { margin-bottom: 0; }

.dang-doc { margin: 0; color: var(--giay-chim); font-style: italic; }
.dang-doc::after { content: ""; animation: cham 1.5s steps(1) infinite; }
@keyframes cham {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

/* Hàng lá được dẫn, gắn ngay dưới câu trả lời.
   Lý do có nó: lá sáng nằm tận trên ba hàng, còn câu trả lời ở cuối trang — khách
   đang đọc thì không nhìn thấy lá nào vừa sáng. Hàng này cho thấy ngay tại chỗ,
   và bấm vào thì nhảy lên đúng lá đó. */
.la-dan { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.4rem; }
.la-dan .nhan {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vang-toi); font-weight: bold;
}
.la-dan button {
  display: flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .9rem; color: var(--giay-mo); cursor: pointer;
  padding: .28rem .75rem .28rem .28rem; background: none;
  border: 1px solid rgba(216,180,92,.28);
  transition: color .3s, border-color .3s, background .3s;
}
.la-dan button:hover {
  color: var(--vang-sang); border-color: var(--vang); background: rgba(216,180,92,.1);
}
.la-dan img { width: 26px; display: block; border: 1px solid rgba(216,180,92,.35); }
.la-dan img.nguoc { transform: rotate(180deg); }

/* Lá được dẫn thì sáng lên. Chỉ làm sáng thôi KHÔNG đủ rõ trên nền đêm — chính
   chỗ tám lá kia chìm xuống mới làm mắt bắt được lá nào đang được nói tới. */
.cac-hang.dang-soi .o-la9 { transition: opacity .7s ease; }
.cac-hang.dang-soi .o-la9:not(.sang) { opacity: .3; }
.o-la9.sang .lat {
  box-shadow: 0 0 100px -4px rgba(242,220,160,.95),
              0 0 44px -10px rgba(216,180,92,.9),
              0 30px 46px -24px rgba(0,0,0,1);
}
.o-la9.sang .ten-la { color: var(--vang-sang); }
.o-la9.sang .ten-o { color: var(--vang-sang); }

.o-hoi[hidden] { display: none; }
.goi-y { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.goi-y button {
  font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
  padding: .4rem .9rem; background: none; color: var(--giay-mo);
  border: 1px solid rgba(216,180,92,.25);
  transition: color .3s, border-color .3s;
}
.goi-y button:hover { color: var(--vang-sang); border-color: var(--vang); }

.hang-hoi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: .8rem; flex-wrap: wrap;
}
.con-hoi { margin: 0; font-size: .86rem; color: var(--giay-chim); }

.het-hoi[hidden] { display: none; }
.het-hoi {
  margin: 1.8rem 0 0; padding-left: 1.5rem;
  border-left: 2px solid var(--vang-toi);
  color: var(--giay-mo); font-style: italic;
}

/* ── Bảng nội dung một lá ────────────────────────────────────────── */

.lop-la {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(6, 8, 15, .84);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  animation: lop-vao .38s ease both;
}
.lop-la[hidden] { display: none; }
@keyframes lop-vao { from { opacity: 0; } to { opacity: 1; } }
.lop-la.dang-dong { animation: lop-ra .26s ease both; }
@keyframes lop-ra { to { opacity: 0; } }

.hop-la {
  position: relative; cursor: default;
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.3rem, 3vw, 2.4rem);
  width: min(920px, 100%); max-height: min(86vh, 780px);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 400;
  background: linear-gradient(168deg, #F3EBD9, #E4D8BE);
  color: #241E15;
  border: 1px solid rgba(216,180,92,.55);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,1), 0 0 100px -30px rgba(216,180,92,.4);
  animation: hop-vao .52s var(--nhip) both;
}
@keyframes hop-vao {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.lop-la.dang-dong .hop-la { animation: hop-ra .26s ease both; }
@keyframes hop-ra { to { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); } }

.dong-la {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  background: none; border: 1px solid rgba(138,110,42,.32);
  color: #6B5C3C; cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.dong-la:hover { color: #241E15; border-color: var(--vang-toi); background: rgba(216,180,92,.16); }

.anh-la { align-self: start; }
.anh-la img {
  width: 100%; display: block;
  border: 1px solid rgba(138,110,42,.45);
  box-shadow: 0 24px 48px -26px rgba(0,0,0,.9);
}
.anh-la.nguoc img { transform: rotate(180deg); }

.chu-la { overflow-y: auto; padding-right: .6rem; }
.chu-la .dan { color: #8A6E2A; font-size: .76rem; letter-spacing: .2em; }
.chu-la h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem); font-weight: normal;
  margin: .35rem 0 .5rem; line-height: 1.14; color: #241E15;
}
.hop-y-o { margin: 0; color: #5C5343; font-style: italic; font-size: 1rem; }
.hop-vach {
  height: 1px; margin: 1.2rem 0;
  background: linear-gradient(90deg, var(--vang-toi), rgba(138,110,42,.12));
}
.hop-cot-loi { margin: 0 0 1.4rem; font-size: 1.14rem; line-height: 1.7; }

.hop-muc { margin-bottom: 1.3rem; }
.hop-muc h3 {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: #8A6E2A; margin: 0 0 .5rem; font-weight: bold;
}
.hop-muc p { margin: 0; font-size: 1.04rem; line-height: 1.75; }
.hop-muc ul { margin: 0; padding-left: 1.1rem; font-size: 1.02rem; line-height: 1.7; }
.hop-muc li { margin-bottom: .2rem; }

.hop-tu-khoa { margin: 0 0 1.2rem; color: #5C5343; font-size: .98rem; }
.hop-cau-hoi {
  margin: 0; font-style: italic; color: #5C5343; font-size: 1.1rem;
  border-left: 2px solid var(--vang-toi); padding-left: 1.1rem;
}

footer {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem 4rem;
  border-top: 1px solid rgba(216,180,92,.16);
  font-size: .9rem; color: var(--giay-chim);
}
footer p { margin: 0; }

/* ── Điểm ngắt: 375 / 768 / 1024 theo checklist ──────────────────── */

@media (max-width: 768px) {
  main { padding: 3rem 1.15rem 2rem; }
  .luoi-chu-de { grid-template-columns: 1fr; }
  .doi-nguoi { grid-template-columns: 1fr; gap: 1.8rem; }
  .hai-duong { grid-template-columns: 1fr; }
  .quat-bai .la { width: 54px; }
  .san-xao { height: 260px; }
  .chong, .chong .la { width: 128px; }

  .gop { --gop-rong: 128px; }
  .cac-hang { gap: 2.8rem; }
  .ba-o { gap: .7rem; }
  .dau-hang { flex-wrap: wrap; gap: .3rem .8rem; }
  .dau-hang h2 { font-size: 1.28rem; }
  .dau-hang::after { display: none; }   /* hết chỗ, gạch vàng thành vướng */
  .o-la9 .ten-o { font-size: .64rem; letter-spacing: .08em; min-height: 4.2em; }
  .o-la9 .ten-la { font-size: .88rem; }
  .doc-khoi { padding-left: 1.1rem; }

  /* Modal xếp dọc: ảnh trên, chữ dưới. Ảnh thu lại còn nửa chiều rộng, không thì
     phải cuộn hết một màn hình ảnh mới tới chữ. */
  .hop-la { grid-template-columns: 1fr; max-height: 88vh; overflow-y: auto; }
  .anh-la { width: 58%; margin: 0 auto; }
  .chu-la { overflow: visible; padding-right: 0; }
}
@media (max-width: 375px) {
  body { font-size: 19px; }
  .quat-bai .la { width: 46px; }
  .ba-la { gap: .5rem; }
  .o-la .ten-vi-tri { font-size: .7rem; letter-spacing: .08em; }

  .gop { --gop-rong: 104px; }
  .ba-o { gap: .45rem; }
  .o-la9 .ten-o { font-size: .58rem; letter-spacing: .05em; }
  .o-la9 .ten-la { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bai-doc p { opacity: 1; transform: none; }
  .nen-quang, .nen-sao, .nen-bui, .nen-den { display: none; }
  /* Chín lá: bỏ hẳn lấp lánh và rung — hai thứ này chạy vô hạn, mà `animation-duration:
     .01ms` ở trên chỉ làm chúng nhấp nháy điên loạn chứ không tắt. Phần bay/toả thì
     hieu_ung.js tự bỏ qua, nhảy thẳng sang trạng thái cuối. */
  .khung-la, .o-la9 .mat-sau::after, .o-la9 .lat { animation: none !important; }
  .doc-khoi { opacity: 1; transform: none; }
  /* h1 dùng animation để lộ chữ — tắt animation mà không xử lý thì clip-path kẹt
     ở trạng thái đầu và tiêu đề biến mất hoàn toàn. */
  h1 { clip-path: none !important; background-position: 50% 0 !important; }
}