/* =================================================================
   Landing TL16 — Minigame styles (đặc thù sự kiện)
   Kế thừa design tokens từ styles.css (tông xanh lá rồng + vàng kim).
   Chỉ chứa phần KHÔNG có sẵn ở Homepage V1: tụ hội, vòng quay, popup thẻ bài.
   ================================================================= */

/* ---------- Nút nhỏ (styles.css gốc chỉ có btn--lg) ---------- */
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: .82rem; }

/* ---------- Hero: chỉnh lại cho tiêu đề dạng CHỮ ----------
   styles.css đặt hero theo trang chủ, nơi tiêu đề là ẢNH logo (.hero__logo):
   cỡ chữ đẩy lên 7vw/6.5rem và line-height 1.02 — ảnh không quan tâm hai giá
   trị đó. Trang này để chữ thật nên giữ nguyên là tràn khung 680px và hai
   dòng chồng lên nhau.

   Ba dòng dưới đây trả về đúng thông số của bản thiết kế landing. Không sửa
   styles.css vì trang chủ đang hiển thị đúng với giá trị hiện tại. */
.hero__content { max-width: 760px; }
.hero__title { font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: 1.18; padding-bottom: .12em; }
.hero__title-lg { white-space: nowrap; }

/* Hai nút CTA nằm ngang. styles.css cho phép wrap vì trang chủ có nút dài
   hơn; ở đây wrap làm nút xếp dọc, vỡ bố cục hero. */
.hero__cta { flex-wrap: nowrap; gap: var(--sp-4); }
.hero__cta .btn--lg { padding: var(--sp-3) var(--sp-5); font-size: 1rem; white-space: nowrap; }

/* ---------- Chừa chỗ cho header khi cuộn tới anchor ----------
   .site-header là fixed cao 72px đè lên trang; không chừa chỗ thì tiêu đề
   section chui dưới header mỗi khi bấm một mục menu.

   Đặt ở file này chứ không ở styles.css: styles.css dùng chung mọi trang, mà
   trang-chu.html cũng có #beta — thêm ở đó là đổi luôn hành vi cuộn trang chủ.
   Liệt kê từng id thay vì section[id] chung: #top là hero cao kín màn hình,
   chừa khoảng trên nó là thừa. */
[id="s-features"], [id="s-tuhoi"], [id="s-vanmay"], [id="beta"] {
  scroll-margin-top: 88px;
}

/* Nút nổi góc phải dưới (.support-stack / .support-fab): đã chuyển sang
   styles.css vì trang-chu.html nay cũng dùng, mà trang đó không nạp file này. */

/* ================================================================
   SECTION: THIÊN LONG TỤ HỘI (counter mốc)
   ================================================================ */
.tuhoi { padding-block: var(--sp-9); background: var(--bg-surface); }
.tuhoi__panel {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, var(--bg-surface-2), var(--bg-surface));
  border: 1px solid var(--border-metal); border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-7); box-shadow: var(--shadow-card);
}
.tuhoi__count {
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold-bright);
  text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-top: var(--sp-4);
  white-space: nowrap;
}
.tuhoi__count b { color: var(--jade); }

.progress {
  position: relative; height: 30px; border-radius: 999px;
  background: rgba(4,14,9,.55); border: 1px solid var(--border-metal);
  overflow: hidden;
}
.progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--emerald), var(--jade));
  box-shadow: 0 0 16px var(--glow-jade); transition: width var(--dur-slow) var(--ease);
}
.progress__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.tuhoi__claim { margin-top: var(--sp-6); }

/* ================================================================
   SECTION: THỬ THÁCH VẬN MAY (vòng quay lưới 6 ô)
   ================================================================ */
.vanmay { padding-block: var(--sp-9); }
.vanmay__layout {
  display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-7); align-items: start;
}

/* Panel nhiệm vụ thêm lượt */
.task-panel {
  background: linear-gradient(180deg, rgba(14,32,23,.92), rgba(7,19,13,.96));
  border: 1px solid var(--border-metal); border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.task-panel__title {
  font-family: var(--font-heading); font-size: 1.3rem; color: var(--gold);
  text-align: center; margin-bottom: var(--sp-5);
}
.task-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px dashed rgba(44,90,62,.5); font-size: .9rem;
}
.task-list li:last-child { border-bottom: 0; }
.task-list li span em { color: var(--jade); font-style: normal; font-weight: 700; }
.task-claim { flex: 0 0 auto; }
.task-list li.is-done { opacity: .6; }
.vanmay__tools { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }

/* Lưới 6 ô */
.spin { text-align: center; }
.spin__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.spin__cell {
  position: relative; min-height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  background: var(--bg-surface-2); border: 2px solid var(--border-metal);
  border-radius: var(--radius-lg); color: var(--text-primary);
  font-weight: 700; font-size: .82rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base), border-color var(--dur-base);
}
.spin__cell .cell-ico {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
/* Ô có ảnh vật phẩm thay cho emoji. Ảnh gốc là icon vuông 64px của game;
   object-fit: contain giữ đúng tỉ lệ nếu sau này thay bằng ảnh khác cỡ. */
.spin__cell img.cell-ico {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.spin__cell.is-thanks { color: var(--text-muted); }
/* ô đang sáng khi quay */
.spin__cell.is-active {
  border-color: var(--jade); background: rgba(30,158,87,.2);
  box-shadow: 0 0 0 3px rgba(75,227,138,.35), 0 6px 20px var(--glow-jade);
  transform: translateY(-2px) scale(1.04);
}
/* ô trúng cuối cùng */
.spin__cell.is-win {
  border-color: var(--gold-bright); background: rgba(247,208,107,.16);
  box-shadow: 0 0 0 4px var(--glow-cta), 0 8px 24px var(--glow-cta);
}
.spin__meta { margin-top: var(--sp-6); }
.spin__remaining {
  font-weight: 800; color: var(--text-primary); margin-bottom: var(--sp-4); font-size: 1.05rem;
}
.spin__remaining b { color: var(--gold-bright); font-size: 1.3rem; }

/* ================================================================
   POPUP thẻ bài (card stack) — dùng chung mọi popup landing
   ================================================================ */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  /* place-items:center cũ làm nội dung cao hơn màn hình tràn ĐỀU hai đầu và
     không cuộn tới được. align-items:start + overflow-y:auto cho cuộn tới
     phần cuối; justify-items vẫn center để popup nằm giữa theo chiều ngang.

     KHÔNG cho .card tự cuộn: .card::before vẽ viền vàng bằng inset:8px, thẻ
     cuộn thì viền cuộn theo nội dung và chỉ bao được phần đầu.
     overflow-x:hidden vì .card-stack::before/::after xoay 3deg + dịch 7px,
     có thể tràn ngang và tạo thanh cuộn ngang. */
  display: grid; align-items: start; justify-items: center;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: var(--sp-5);
  background: rgba(4,14,9,.72); backdrop-filter: blur(3px);
  animation: modalFade var(--dur-base) var(--ease);
}
/* Tôn trọng thuộc tính hidden — class .modal không được ghi đè [hidden] */
.modal[hidden] { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

/* thẻ bài xếp chồng */
/* margin-block:auto — grid item còn chỗ thì tự căn giữa, hết chỗ thì dính lên
   trên và cuộn được (bù cho .modal đã đổi sang align-items:start). */
.card-stack {
  position: relative; width: min(94vw, 500px);
  margin-block: auto;
  animation: cardPop var(--dur-base) var(--ease);
}
@keyframes cardPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card-stack::before, .card-stack::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius-lg); background: var(--bg-surface-2);
  border: 1px solid var(--border-metal);
}
.card-stack::before { transform: rotate(-3deg) translate(-7px, 7px); opacity: .55; }
.card-stack::after  { transform: rotate(3deg) translate(7px, 7px);  opacity: .35; }

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(14,32,23,.97), rgba(7,19,13,.99));
  border: 1px solid var(--border-metal); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-8) var(--sp-7) var(--sp-7);
}
.card::before { /* viền trong vàng */
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(224,172,70,.35); border-radius: calc(var(--radius-lg) - 5px);
  pointer-events: none;
}
.card__title {
  font-family: var(--font-heading); font-size: 1.5rem; color: var(--gold);
  text-align: center; margin-bottom: var(--sp-5);
}
.card__text { text-align: center; color: var(--text-primary); line-height: 1.6; }
.card__note { font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: var(--sp-4); }
.card__close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  background: rgba(4,14,9,.6); border: 1px solid var(--border-metal); color: var(--gold);
  transition: var(--dur-fast);
}
.card__close:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(126,35,24,.4); }

/* code box + copy */
.code-box {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(4,14,9,.6); border: 1px dashed var(--gold);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0;
  font-family: monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 2px;
  color: var(--gold-bright); word-break: break-all;
}
/* Tôn trọng thuộc tính hidden — `display: flex` ở trên đè [hidden] nếu thiếu
   dòng này, làm ô "Cảm ơn tham gia" (không có mã) hiện hộp mã giả
   XXXXXXXXXXXX. Cùng nếp với .modal[hidden] bên dưới. Ảnh hưởng cả popup
   đăng ký khi admin chưa cấu hình giftcode (landing-auth.js:133). */
.code-box[hidden] { display: none; }
.copy-btn {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  font-weight: 800; font-size: .8rem; color: #04140A;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 1px solid #fff3cf;
  transition: var(--dur-fast);
}
.copy-btn:hover { transform: translateY(-1px); }
.copy-btn.is-copied { background: linear-gradient(180deg, var(--jade), var(--emerald)); }

/* reward icons row */
.reward-icons { display: flex; gap: var(--sp-3); justify-content: center; margin: var(--sp-5) 0; }
.reward-ico {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.4rem;
  background: radial-gradient(circle, rgba(30,158,87,.35), transparent 70%);
  border: 1px solid var(--border-metal);
}
/* Popup trúng thưởng đổ ảnh vật phẩm vào .reward-ico (ô 46px). Không ràng
   kích thước ở đây thì ảnh 64px tràn ra ngoài khung. Chừa 4px đệm để ảnh
   không dính sát viền. */
.reward-ico img {
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;
}
/* Modal đăng ký và Tụ Hội hiện ảnh vật phẩm thật (ảnh 64px). Ô 46px mặc định
   làm ảnh thu nhỏ mất chi tiết, nên nới riêng các hàng này. Không sửa
   .reward-ico gốc vì modal Trúng vật phẩm vòng quay dùng chung.

   flex: 0 0 auto để flex không bóp ngang: cao đặt cứng 64px nên bị bóp là ô
   méo thành chữ nhật đứng trên màn hẹp. Hết chỗ thì xuống hàng, không bóp. */
.reward-icons--lg { flex-wrap: wrap; }
.reward-icons--lg .reward-ico { flex: 0 0 auto; width: 64px; height: 64px; }

/* Tooltip tên vật phẩm cho dãy icon quà.

   ⚠️ LUẬT THẬT nay nằm ở forms.css dưới tên `.co-chu-thich` — file đó cả ba
   trang có popup quà đều nạp, còn file này chỉ index.html nạp. Chuyển sang đó
   để popup ở trang chủ và register.html cũng dùng được cùng một bản.

   Tên `.reward-ico--tip` giữ nguyên vì markup index.html đang dùng ở hai chỗ
   (popup đăng ký và popup Tụ Hội); nó chỉ còn là bí danh trỏ về luật chung,
   KHÔNG lặp lại luật. Sửa cách hiện tooltip thì sửa forms.css. */
.reward-ico--tip { position: relative; cursor: help; }
/* Neo theo mép trong cho icon biên — phần này riêng của dãy `.reward-icons--lg`
   nên ở lại đây; forms.css lo cho dãy `.gift-icons` của hai trang kia. */
.reward-icons--lg .reward-ico--tip:first-child::after { left: 0; transform: none; }
.reward-icons--lg .reward-ico--tip:last-child::after { left: auto; right: 0; transform: none; }

/* rules text */
.rules-text { color: var(--text-primary); font-size: .9rem; line-height: 1.7; }
.rules-text p { margin-bottom: var(--sp-3); }
.rules-text b { color: var(--gold); }
.rules-text ul { margin: 0 0 var(--sp-3) var(--sp-5); list-style: disc; }
.rules-text li { margin-bottom: var(--sp-1); }

/* history table */

/* Popup lịch sử rộng hơn các popup khác: bảng 4 cột, riêng cột Giftcode là
   chuỗi monospace ~12 ký tự không xuống dòng được, nên 500px mặc định của
   .card-stack bóp các cột còn lại quá hẹp. Chỉ nới popup này — các popup kia
   là văn bản ngắn, rộng thêm chỉ làm dòng chữ dài khó đọc. */
#modal-history .card-stack { width: min(94vw, 685px); }

.history-wrap { max-height: 58vh; overflow-y: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.history-table th {
  position: sticky; top: 0;
  background: var(--emerald-deep); color: var(--gold-bright);
  padding: var(--sp-3); text-align: left; font-weight: 800; font-size: .8rem;
}
.history-table td { padding: var(--sp-3); border-bottom: 1px solid rgba(44,90,62,.4); color: var(--text-primary); }
.history-table tr:nth-child(even) td { background: rgba(4,14,9,.3); }
.history-table .col-code { font-family: monospace; color: var(--gold); }
.history-empty { text-align: center; color: var(--text-muted); padding: var(--sp-6); }

/* form error line (dùng cho popup auth) */
.form-error { color: #ff8a6a; font-size: .82rem; min-height: 1rem; margin-bottom: var(--sp-3); text-align: center; }

/* social row trong popup auth */
.popup-social { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }

/* ================================================================
   SECTION: CAROUSEL TÍNH NĂNG (tái dùng .carousel từ styles.css,
   nhưng landing dùng full-width slide → thêm biến thể)
   ================================================================ */
.feature-carousel { padding-block: var(--sp-9); background: var(--bg-surface); }
.fcar { position: relative; display: flex; align-items: center; gap: var(--sp-4); max-width: 960px; margin: 0 auto; }
.fcar__viewport { flex: 1; overflow: hidden; border-radius: var(--radius-lg); }
.fcar__track { display: flex; transition: transform var(--dur-slow) var(--ease); }
/* Slide nay khong con phan tu con: anh banner da co chu in san (xem index.html).
   Nen bo het thuoc tinh chu va display:grid — khong con gi de can giua.
   aspect-ratio 16/8 = 2:1, khop dung ti le anh 832x416 nen anh khong bi keo gian. */
.fcar__slide {
  min-width: 100%; aspect-ratio: 16/8;
  background-size: cover; background-position: center;
  border: 1px solid var(--border-metal);
}
.fcar__arrow {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1px solid var(--border-metal); color: var(--gold);
  font-size: 1.6rem; cursor: pointer; transition: var(--dur-fast);
}
.fcar__arrow:hover { border-color: var(--gold); color: var(--gold-bright); }
.fcar__dots { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-5); }
.fcar__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--border-metal); cursor: pointer; }
.fcar__dots button.is-active { background: var(--gold); }

/* ---------- USP: 4 lý do chơi ----------
   Section đang để hidden trong index.html. Giữ style ở đây vì styles.css
   dùng chung đã bỏ nhóm .usp* — trang khác không dùng tới. */
.usp { padding-block: var(--sp-9); }
.usp__lead { max-width: 820px; margin: 0 auto var(--sp-7); text-align: center; font-size: 1.15rem; line-height: 1.7; color: var(--text-muted); }
.usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.usp__card {
  background: linear-gradient(180deg, var(--bg-surface-2), var(--bg-surface));
  border: 1px solid var(--border-metal); border-radius: var(--radius-lg);
  padding: var(--sp-6); text-align: center;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base);
}
.usp__card:hover { transform: translateY(-6px); border-color: var(--gold); }
.usp__icon {
  font-size: 2rem; width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; color: var(--gold-bright);
  background: radial-gradient(circle, rgba(30,158,87,.28), transparent 70%);
  border: 1px solid var(--border-metal); border-radius: 50%;
}
.usp__card h3 { font-size: 1.35rem; color: var(--gold); margin-bottom: var(--sp-2); }
.usp__card p { color: var(--text-muted); font-size: .92rem; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* Ba mốc dưới đây bám theo breakpoint của styles.css (1439/1199/767/480),
   giữ .usp* co giãn cùng nhịp với phần còn lại của trang. */
@media (max-width: 1439px) {
  .usp { padding-block: var(--sp-8); }
}
@media (max-width: 1199px) {
  .usp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .usp__grid { grid-template-columns: 1fr; }
  /* Màn hẹp: cho tiêu đề và nút xuống dòng, giữ nowrap là tràn ngang. */
  .hero__title-lg { white-space: normal; }
  .hero__cta { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .usp__lead { font-size: 1rem; }
}

@media (max-width: 860px) {
  .vanmay__layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .spin__cell { min-height: 104px; font-size: .72rem; padding: var(--sp-3) var(--sp-1); }
  .spin__cell .cell-ico { font-size: 1.7rem; }
  .spin__cell img.cell-ico { width: 40px; height: 40px; }
  .tuhoi__count { font-size: .9rem; white-space: normal; }
  /* Luật cho tên vật phẩm dài tràn mép màn hẹp nay ở forms.css, cùng chỗ với
     luật tooltip gốc `.co-chu-thich` — file đó cả ba trang có popup quà đều
     nạp, còn file này chỉ index.html nạp. */
  .fcar__arrow { display: none; }
}
@media (max-width: 520px) {
  /* Panel Tụ Hội chỉ chừa ~272px bề ngang ở màn 360px, trong khi 5 ô 64px
     cộng khoảng cách cần 368px — dãy rớt xuống 3 hàng lệch (2-2-1), nhìn như
     xếp hỏng. Thu ô xuống 40px và bóp khoảng cách cho 5 quà nằm thẳng hàng.

     Chỉ nhắm dãy trong #s-tuhoi: popup #modal-tuhoi-code dùng chung
     .reward-icons--lg nhưng giữ nguyên cỡ 64px. */
  #s-tuhoi .reward-icons--lg { gap: var(--sp-2); flex-wrap: nowrap; }
  #s-tuhoi .reward-icons--lg .reward-ico { width: 40px; height: 40px; }
}