/* ═══════════════════════════════════════════════════════════════════
   TRANG CHỦ — kể chuyện theo cú cuộn

   Nạp SAU style.css và chỉ thêm, không sửa lại thứ có sẵn: biến màu, font tự
   host, .nut-chinh/.nut-phu, .hoa-tiet, lớp nền đều dùng nguyên của trang đọc bài.

   KHÔNG cướp cú cuộn. Không scroll-jacking, không cuộn ngang giả, không khoá
   bánh xe chuột. Ba lý do, theo thứ tự quan trọng:
     1. Cuộn bị cướp thì phím Page Down, phím Home, thanh cuộn và trình đọc màn
        hình đều hỏng theo.
     2. Trên Android tầm trung — khách chính của web này — mọi thư viện cướp cuộn
        đều giật.
     3. Người đang buồn vào đây tìm câu trả lời, không tìm một màn trình diễn bắt
        họ ngồi xem hết mới cho vào.
   Việc duy nhất JS làm là gắn lớp `.hien` khi một khối lọt vào tầm mắt. Tắt JS
   thì mọi thứ vẫn đọc được, chỉ là không có hoạt ảnh.
   ═══════════════════════════════════════════════════════════════════ */

/* Chốt cho `hidden`, phải đứng trước mọi rule `display`. Lý do đầy đủ ở style.css.
   Trang này dính ngay khi thêm khối "lá của hôm nay": `.la-ngay { display: grid }`
   làm phần lá hiện sẵn từ lúc mở trang, trước cả khi bấm nút lật. */
[hidden] { display: none !important; }

.trang-chu main { position: relative; z-index: 1; }

/* ── Nút bám trên ─────────────────────────────────────────────────── */

.nut-bam-tren {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 30;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: .6rem 1.1rem;
  color: var(--vang);
  background: rgba(8,11,20,.72);
  border: 1px solid rgba(216,180,92,.4);
  backdrop-filter: blur(6px);
  transition: color .3s, background .3s, border-color .3s;
}
.nut-bam-tren:hover {
  color: var(--dem-sau); background: var(--vang); border-color: var(--vang);
}

/* ── Bộ khung một khối ────────────────────────────────────────────── */

.khoi {
  min-height: 100svh;              /* svh, không phải vh: thanh địa chỉ Safari/Chrome
                                      trên điện thoại co lại làm 100vh nhảy giật */
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 1.5rem;
  position: relative;
}
.khoi .trong { max-width: 46rem; margin: 0 auto; width: 100%; }

.khoi h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.18;
  font-weight: 500; margin: 0 0 1.6rem; letter-spacing: -.01em;
}
.khoi h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.25;
  font-weight: 500; margin: 0 0 1.4rem;
}
.khoi h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .3rem; }

.nhan-khoi {
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--vang-toi); margin: 0 0 1rem;
}
.khoi .phu { font-size: 1.05rem; max-width: 42ch; }
.khoi .phu.nho { font-size: .98rem; color: var(--giay-chim); }
.khoi-mo .phu, .khoi-ket .phu { margin-left: auto; margin-right: auto; }
.khoi-mo, .khoi-ket { text-align: center; }
.khoi-mo .hoa-tiet, .khoi-ket .hoa-tiet { justify-content: center; }
.khoi-mo .hang-nut, .khoi-ket .hang-nut { justify-content: center; }

.ghi-nho {
  margin: 1.6rem 0 0; font-size: .84rem; letter-spacing: .1em;
  color: var(--giay-chim);
}

/* Câu hỏi mẫu ở màn mở. Bày ra thành mấy viên rời chứ không thành danh sách gạch
   đầu dòng — mắt lướt qua bắt được một câu giống chuyện của mình là đủ, không ai
   đọc hết sáu dòng ở màn đầu. */
.cac-cau-hoi {
  list-style: none; padding: 0; margin: 2.2rem auto 0; max-width: 40rem;
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
}
.cac-cau-hoi li {
  font-size: .92rem; font-style: italic; color: var(--giay-mo);
  padding: .45rem .95rem;
  border: 1px solid rgba(216,180,92,.18);
  background: rgba(14,19,34,.5);
  transition: color .4s, border-color .4s;
}
.cac-cau-hoi li:hover { color: var(--giay); border-color: rgba(216,180,92,.45); }
@media (max-width: 720px) {
  .cac-cau-hoi { gap: .4rem; }
  .cac-cau-hoi li { font-size: .84rem; padding: .35rem .7rem; }
}

/* Thẻ <a> đội lốt nút: .nut-chinh trong style.css viết cho <button> nên thiếu
   mấy thuộc tính của liên kết. */
a.nut-chinh, a.nut-phu {
  display: inline-block; text-decoration: none; text-align: center;
}

/* ── Hiện dần khi lọt vào tầm mắt ─────────────────────────────────── */

[data-hien] {
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity .9s var(--nhip), transform .9s var(--nhip);
  transition-delay: calc(var(--tre, 0) * 110ms);
}
[data-hien].hien { opacity: 1; transform: none; }

/* ── Nhắc cuộn ────────────────────────────────────────────────────── */

.nhac-cuon {
  position: absolute; bottom: 2.2rem; left: 0; right: 0;
  text-align: center; color: var(--giay-chim);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  animation: nhac-tho 3.4s ease-in-out infinite;
}
.nhac-cuon i {
  display: block; width: 1px; height: 2.4rem; margin: .8rem auto 0;
  background: linear-gradient(var(--vang-toi), transparent);
}
@keyframes nhac-tho { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ── Quạt bài ─────────────────────────────────────────────────────── */

.quat-gioi-thieu {
  display: flex; justify-content: center; align-items: flex-end;
  margin-top: 3.5rem; min-height: 15rem;
  padding: 0 1rem;
}
.quat-gioi-thieu .the {
  width: clamp(3.2rem, 7vw, 5.4rem); flex: 0 0 auto;
  margin-left: -1.4rem;            /* chồng mép lên nhau thành quạt */
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(216,180,92,.25);
  box-shadow: 0 14px 34px -18px #000;
  /* Nghiêng theo vị trí trong quạt: --n chạy từ -10,5 tới 10,5 (22 lá), --lech là
     trị tuyệt đối của nó để hai đầu quạt võng xuống. --lech tính sẵn ở JS chứ
     không dùng abs() của CSS — hàm đó mới có ở Chrome 133 và Firefox 136, mà khách
     chính của web là Android tầm trung, đời trình duyệt không đoán được. */
  transform: rotate(calc(var(--n) * 1.15deg)) translateY(calc(var(--lech) * 3px));
  transform-origin: 50% 130%;
  opacity: 0;
  transition: opacity .7s var(--nhip), transform .9s var(--nhip);
  transition-delay: calc(var(--i) * 45ms);
}
.quat-gioi-thieu.hien .the { opacity: 1; }
.quat-gioi-thieu .the:first-child { margin-left: 0; }
.quat-gioi-thieu .the img { display: block; width: 100%; height: auto; }

/* Đưa một lá lên trước khi rê chuột — cho cảm giác bộ bài có thật, cầm được */
.quat-gioi-thieu .the:hover {
  transform: rotate(calc(var(--n) * 1.15deg))
             translateY(calc(var(--lech) * 3px - 1.4rem)) scale(1.06);
  z-index: 2; border-color: var(--vang);
  transition-delay: 0s;
}

/* ── Đoạn trích ───────────────────────────────────────────────────── */

.trich { margin: 2.4rem 0 0; padding: 0; }
.hoi-trich {
  color: var(--giay-mo); font-style: italic; margin: 0 0 1.2rem;
  font-size: 1.05rem;
}
.trich blockquote {
  margin: 0; padding: 1.4rem 1.6rem;
  background: rgba(14,19,34,.66);
  border-left: 2px solid var(--vang);
}
.trich blockquote p { margin: 0 0 .9rem; }
.trich blockquote p:last-child { margin-bottom: 0; }
.trich figcaption {
  margin-top: .9rem; font-size: .82rem; color: var(--giay-chim);
  letter-spacing: .04em;
}

/* ── Lá của hôm nay ───────────────────────────────────────────────── */

.hop-la-ngay { margin-top: 2rem; }
#nut-la-ngay { min-width: 14rem; }

.la-ngay {
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem;
  align-items: start; margin-bottom: 1.6rem;
  animation: la-hien .9s var(--nhip) both;
}
@keyframes la-hien {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}
.la-ngay-anh { width: 11rem; flex: 0 0 auto; }
.la-ngay-anh img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid rgba(216,180,92,.35);
  box-shadow: 0 18px 44px -20px #000, 0 0 40px -18px rgba(216,180,92,.5);
}
.la-ngay-chu h3 {
  margin: 0 0 .6rem; font-size: 1.5rem; font-weight: 500; color: var(--vang-sang);
}
.lng-nguoc { font-size: .95rem; color: var(--than); font-style: italic; }
.lng-cot-loi { margin: 0 0 1.2rem; font-size: 1.05rem; color: var(--giay); }
.lng-nhan {
  margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vang-toi);
}
.la-ngay-chu ul {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.la-ngay-chu li {
  font-size: .86rem; color: var(--giay-mo);
  border: 1px solid rgba(216,180,92,.18);
  background: rgba(14,19,34,.5); padding: .3rem .7rem;
}
.lng-tu-khoa { margin: 0 0 1.3rem; font-size: .95rem; color: var(--giay-mo); }
.lng-soi {
  margin: 0; padding: .9rem 1.1rem; font-style: italic; font-size: 1rem;
  color: var(--giay); border-left: 2px solid var(--vang);
  background: rgba(216,180,92,.06);
}
.lng-moi {
  max-width: 44rem; font-size: .98rem; line-height: 1.7; color: var(--giay-mo);
  padding-top: 1.4rem; border-top: 1px solid rgba(240,231,212,.1);
}
.lng-moi b { color: var(--giay); }
.lng-moi .nut-chinh { display: block; width: fit-content; margin-top: 1.1rem; }

@media (max-width: 720px) {
  .la-ngay { grid-template-columns: 1fr; gap: 1.2rem; justify-items: center; }
  .la-ngay-anh { width: 9rem; }
  .la-ngay-chu { text-align: left; }
}

/* ── Số liệu bộ bài ───────────────────────────────────────────────── */

.so-lieu {
  display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 2.4rem 0;
}
.so-lieu div { margin: 0; }
.so-lieu dt {
  font-size: clamp(1.9rem, 5vw, 2.7rem); color: var(--vang);
  line-height: 1.1; font-weight: 400;
}
.so-lieu dd {
  margin: .3rem 0 0; font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--giay-chim);
}

/* ── So với đi xem ngoài đời ──────────────────────────────────────── */

.ba-y { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 2.4rem 0; }
.ba-y > div {
  padding: 1.4rem 1.5rem;
  background: rgba(14,19,34,.6);
  border-top: 2px solid rgba(216,180,92,.4);
}
.ba-y h3 { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 500; color: var(--vang-sang); }
.ba-y p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--giay-mo); }
@media (max-width: 720px) {
  .ba-y { grid-template-columns: 1fr; }
  .so-lieu { gap: 1.6rem; }
}

/* ── Bài đọc mẫu ──────────────────────────────────────────────────── */

.khoi-mau .trong { max-width: 50rem; }
.bai-mau { margin-top: 2.4rem; }
.hoi-mau {
  font-style: italic; color: var(--giay-mo); margin: 0 0 1.4rem;
  font-size: 1.05rem;
}
.ba-la-mau {
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.ba-la-mau figure { margin: 0; text-align: center; max-width: 9rem; }
.ba-la-mau img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid rgba(216,180,92,.3);
  box-shadow: 0 14px 34px -18px #000;
}
.ba-la-mau img.nguoc { transform: rotate(180deg); }
.ba-la-mau figcaption {
  margin-top: .6rem; font-size: .84rem; color: var(--giay-mo); line-height: 1.4;
}
.ba-la-mau small { color: var(--giay-chim); font-size: .76rem; }

/* Panel giấy giống hệt màn đọc bài thật — khách nhìn thấy đúng thứ họ sẽ nhận. */
.van-mau {
  background: rgba(240,231,212,.045);
  border-left: 2px solid rgba(216,180,92,.4);
  padding: 1.5rem 1.7rem;
}
.van-mau p { margin: 0 0 1.1rem; }
.van-mau p:last-child { margin-bottom: 0; }
.van-mau b { color: var(--vang-sang); font-weight: 500; }

.hoi-mau-them {
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(240,231,212,.1);
}
.ghi-mau {
  margin: 1.2rem 0 0; font-size: .84rem; color: var(--giay-chim);
  letter-spacing: .04em;
}

/* ── Thử đèn soi lá ───────────────────────────────────────────────── */

.thu-den { margin-top: 2.4rem; }
.hang-hoi { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
.hang-hoi button {
  font: inherit; font-size: .95rem; cursor: pointer; text-align: left;
  color: var(--giay-mo); background: rgba(14,19,34,.7);
  border: 1px solid rgba(216,180,92,.24); padding: .7rem 1.1rem;
  transition: color .3s, border-color .3s, background .3s;
}
.hang-hoi button:hover { color: var(--giay); border-color: rgba(216,180,92,.55); }
.hang-hoi button[aria-pressed="true"] {
  color: var(--vang); border-color: var(--vang); background: rgba(216,180,92,.09);
}

.hang-la-den {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: .7rem; margin-bottom: 1.6rem;
}
.hang-la-den figure { margin: 0; text-align: center; }
.hang-la-den .khung {
  border-radius: 3px; overflow: hidden; border: 1px solid rgba(240,231,212,.12);
  /* Lá không được dẫn thì CHÌM hẳn xuống, không chỉ là lá được dẫn sáng lên.
     Chênh lệch mới là thứ mắt đọc được; sáng đều thì không ai thấy gì đổi. */
  filter: saturate(.25) brightness(.42);
  transition: filter .6s var(--nhip), transform .6s var(--nhip),
              box-shadow .6s var(--nhip), border-color .6s;
}
.hang-la-den figure.sang .khung {
  filter: none; transform: translateY(-.5rem);
  border-color: var(--vang);
  box-shadow: 0 0 34px -6px rgba(216,180,92,.75);
}
.hang-la-den img { display: block; width: 100%; height: auto; }
.hang-la-den figcaption {
  font-size: .74rem; letter-spacing: .04em; margin-top: .5rem;
  color: var(--giay-chim); transition: color .6s;
}
.hang-la-den figure.sang figcaption { color: var(--vang); }

.dap-den {
  margin: 0; padding: 1.2rem 1.4rem; min-height: 5rem;
  background: rgba(14,19,34,.66);
  border-left: 2px solid rgba(216,180,92,.35);
  font-size: .98rem; color: var(--giay-mo);
  transition: opacity .35s;
}
.dap-den.dang-doi { opacity: .25; }

/* ── Hai cột ──────────────────────────────────────────────────────── */

.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.hai-cot p { margin: 0; font-size: 1rem; }

/* ── Hai gói ──────────────────────────────────────────────────────── */

.hai-goi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem;
  margin-top: 2.6rem; align-items: start;
}
.cot-goi {
  padding: 1.8rem 1.6rem;
  background: rgba(14,19,34,.6);
  border: 1px solid rgba(240,231,212,.1);
  display: flex; flex-direction: column; height: 100%;
}
.cot-noi { border-color: rgba(216,180,92,.45); background: rgba(20,26,44,.72); }
.gia-goi { margin: 0 0 1.2rem; font-size: 1.7rem; color: var(--vang); }
.gia-goi span {
  display: block; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--giay-chim);
}
.cot-goi ul { list-style: none; margin: 0 0 1.8rem; padding: 0; flex: 1; }
.cot-goi li {
  position: relative; padding-left: 1.3rem; margin-bottom: .7rem;
  font-size: .96rem; line-height: 1.55;
}
.cot-goi li::before {
  content: "·"; position: absolute; left: .35rem; color: var(--vang-toi);
  font-size: 1.4rem; line-height: 1.1;
}

/* ── Chân trang ───────────────────────────────────────────────────── */

footer {
  padding: 3rem 1.5rem 4rem; text-align: center;
  border-top: 1px solid rgba(240,231,212,.08);
}
footer p {
  margin: .4rem auto; max-width: 44rem;
  font-size: .82rem; color: var(--giay-chim);
}

/* ── Màn hẹp ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .khoi { min-height: auto; padding: 4rem 1.2rem; }
  .khoi-mo { min-height: 100svh; }
  .hai-cot, .hai-goi { grid-template-columns: 1fr; }
  /* Sáu lá xếp một hàng trên màn hẹp thì mỗi lá bé bằng con tem — chia hai hàng ba. */
  .hang-la-den { grid-template-columns: repeat(3, 1fr); }
  .nut-bam-tren { top: auto; bottom: 1rem; right: 1rem; left: 1rem; text-align: center; }
  .quat-gioi-thieu .the { margin-left: -1.9rem; }
}

/* ── Tôn trọng người tắt hoạt ảnh ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Không chỉ rút ngắn thời gian — BỎ HẲN dịch chuyển. Người bật thiết lập này
     phần lớn vì chuyển động làm họ chóng mặt, mà một cú trượt nhanh vẫn là trượt. */
  [data-hien], [data-hien].hien { opacity: 1; transform: none; transition: none; }
  .quat-gioi-thieu .the { opacity: 1; transition: none; }
  .nhac-cuon { animation: none; }
  .hang-la-den .khung, .hang-la-den figure.sang .khung { transition: filter .2s; }
  .hang-la-den figure.sang .khung { transform: none; }
}