/*
  Biến thiết kế mà file này dùng (popup, form). Trước nằm ở styles.css; bản
  giao diện khớp production bỏ styles.css nên biến mất theo → popup đổi thông
  tin tài khoản mất z-index (nằm DƯỚI trang) và mất màu nền. Đặt lại ở đây.
*/
:root {
  /* Background & Surface — green-black theo logo rồng ngọc */
  --bg-base: #07130D;
  --bg-surface: #0E2017;
  --bg-surface-2: #153322;

  /* Accent — xanh lá rồng (dragon emerald) */
  --emerald-deep: #0B5E33;  /* nền/dải đậm thay crimson cũ */
  --emerald: #1E9E57;       /* xanh lá chủ đạo, điểm nhấn */
  --jade: #4BE38A;          /* xanh lá sáng, glow/hover */

  /* Accent — vàng gold (giữ như chữ trong logo, dùng cho CTA & tiêu đề) */
  --gold-deep: #B8801F;     /* đầu tối của gradient gold */
  --gold: #E0AC46;
  --gold-bright: #ffdf8e;   /* CTA primary only */

  /* Accent cool — xanh dương núi non trong logo */
  --steel: #3B5A6B;

  /* Text */
  --text-primary: #EAF3E4;
  --text-muted: #8FB39C;

  /* Border & Overlay */
  --border-metal: #2C5A3E;
  --overlay: rgba(4, 14, 9, .55);
  --glow-cta: rgba(247, 208, 107, .45);
  --glow-jade: rgba(75, 227, 138, .45);

  /* Fonts — font game cho tiêu đề, Be Vietnam Pro cho đoạn văn (dễ đọc) */
  --font-display: "NTH Justice Mist", "Be Vietnam Pro", system-ui, sans-serif;
  --font-heading: "NTH Justice Mist", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;

  /* Font sizes — tiêu đề phóng to bù x-height nhỏ của font game */
  --fs-hero: clamp(2.6rem, 7vw, 6.5rem);
  --fs-section: clamp(2.1rem, 3.6vw, 3rem);
  --fs-card: 1.75rem;
  --fs-body: 1rem;
  --fs-caption: 0.8125rem;
  --fs-button: 1.0625rem;

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Shadow & Glow */
  --shadow-card: 0 8px 24px rgba(0,0,0,.45);
  --glow-gold: 0 0 24px var(--glow-cta);

  /* Motion */
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 550ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --container: 1280px;
  --gutter: 24px;

  /* Z-index */
  --z-base: 0;
  --z-art: 10;
  --z-content: 20;
  --z-nav: 100;
  --z-sticky-cta: 200;
  --z-modal: 1000;
}

/* =================================================================
   Forms & Article pages — dùng chung mọi game.

   ⚠️ File này dùng 32 biến CSS (--gold, --emerald, --sp-*, --font-*, --z-modal…)
   mà TỰ NÓ KHÔNG khai cái nào. Cả 32 đến từ styles.css riêng của từng game,
   phải nạp TRƯỚC file này.

   Thiếu một biến thì CSS không báo lỗi — thuộc tính đó bị bỏ qua im lặng, form
   ra sai màu hoặc mất khoảng cách mà console sạch trơn. Game mới khai đủ bộ,
   đối chiếu bằng: grep -ohE "var\(--[a-z0-9-]+" forms.css | sort -u
   ================================================================= */

/* ---------- Hiệu ứng hover cho nút ở các trang phụ (không áp cho index) ----------
   Vòng sáng tròn mờ nhẹ toả quanh nút khi rê chuột. */
.subpage .btn { position: relative; overflow: visible; }
.subpage .btn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 80%; height: 80%; transform: translate(-60%, -60%) scale(.6);
  border-radius: 999px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(247,208,107,.45), transparent 70%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.subpage .btn:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }

/* ---------- Auth layout ---------- */
.auth {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: tránh giật khi thanh địa chỉ mobile ẩn/hiện */
  display: grid; place-items: center;
  padding: 104px var(--gutter) var(--sp-9);
  position: relative; isolation: isolate;
}
.auth__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 75% 25%, rgba(30,158,87,.35), transparent 55%),
    radial-gradient(80% 70% at 20% 80%, rgba(11,94,51,.45), transparent 60%),
    linear-gradient(160deg, #0c2416 0%, var(--bg-base) 70%);
}
.auth__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 80% at 50% 45%, transparent 40%, rgba(4,14,9,.85) 100%);
}

/* ---------- Auth card ---------- */
.auth-card {
  width: 100%; max-width: 460px;
  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);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8) var(--sp-7);
}
.auth-card--wide { max-width: 560px; }

.auth-card__head { text-align: center; margin-bottom: var(--sp-7); }
.auth-card__logo { height: 64px; width: auto; margin: 0 auto var(--sp-4); }
.auth-card__title { font-size: 1.5rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
/* Tiêu đề đăng nhập: to hơn + sáng màu hơn */
.auth-card__title--lg { font-size: 1.9rem; color: var(--gold-bright); }
.auth-card__sub { color: var(--text-muted); font-size: .9rem; margin-top: var(--sp-2); }

/* ---------- Form fields ---------- */
.form-field { margin-bottom: var(--sp-5); }
.form-field__label {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: var(--sp-2); letter-spacing: .02em;
}
.form-field__label .req { color: var(--jade); margin-left: 2px; }

.form-field__input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--text-primary); background: rgba(4,14,9,.6);
  border: 1px solid var(--border-metal); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-field__input::placeholder { color: rgba(143,179,156,.6); }
.form-field__input:focus {
  outline: none; border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(75,227,138,.18);
}
.form-field__hint { font-size: .76rem; color: var(--text-muted); margin-top: var(--sp-2); }

/* Ẩn/hiện mật khẩu: wrapper + nút con mắt (do form-enhance.js chèn) */
.pw-wrap { position: relative; }
.pw-wrap .form-field__input { padding-right: 44px; } /* chừa chỗ cho nút */
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); line-height: 1; opacity: .85;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.pw-toggle:hover { color: var(--gold); opacity: 1; }
.pw-toggle svg { display: block; }

/* Grid 2 cột cho form đăng ký rộng */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.form-grid .form-field--full { grid-column: 1 / -1; }

/* ---------- Actions ----------
   Hai selector chứ không phải một: trang auth (login/register/nạp bạc) bọc form
   trong .auth-card, còn popup đăng nhập ở index.html bọc trong .card (định
   nghĩa ở landing-minigame.css). Thiếu vế thứ hai thì nút trong popup co theo
   chữ — đo được 230px trong khi ô nhập ngay trên nó rộng 370px.

   Có `form` trong selector để không chạm .copy-btn, .card__close và nút trong
   popup thể lệ/lịch sử — những nút đó không nên kéo dài hết khung.

   LƯU Ý: nút ĐĂNG KÝ ở index.html:270 có style gắn thẳng trên thẻ
   (width:fit-content) nên KHÔNG ăn luật này — style gắn thẳng luôn thắng CSS
   file. Hai popup vì vậy trông khác nhau. Muốn đồng bộ phải gỡ inline style
   bên index.html. */
.auth-card .btn,
.modal .card form .btn { width: 100%; justify-content: center; margin-top: var(--sp-3); }
.auth-card__foot {
  text-align: center; margin-top: var(--sp-6);
  font-size: .9rem; color: var(--text-muted);
}
.auth-card__foot a { color: var(--jade); font-weight: 700; }
.auth-card__foot a:hover { color: var(--gold-bright); }

.form-row-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-5); font-size: .85rem;
}
.form-check { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); cursor: pointer; }
.form-check input { accent-color: var(--emerald); width: 16px; height: 16px; }
/* Dòng đồng ý điều khoản: giữ trên 1 hàng ở màn rộng.
   Màn hẹp phải cho xuống dòng — xem media query cuối mục Responsive. */
.form-check--agree { flex-wrap: nowrap; white-space: nowrap; font-size: .85rem; }
.form-check--agree input { flex-shrink: 0; }
.form-link { color: var(--jade); font-weight: 700; }
.form-link:hover { color: var(--gold-bright); }

/* ---------- Nạp Bạc: lưới chọn gói ---------- */
.topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.topup-option { cursor: pointer; }
.topup-option input { position: absolute; opacity: 0; pointer-events: none; }
.topup-option__box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-4) var(--sp-2); border-radius: var(--radius-md);
  border: 1px solid var(--border-metal); background: rgba(4,14,9,.5);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.topup-option__box b { color: var(--gold-bright); font-size: 1rem; }
.topup-option__box em { color: var(--text-muted); font-style: normal; font-size: .76rem; }
.topup-option:hover .topup-option__box { border-color: var(--jade); }
.topup-option input:checked + .topup-option__box {
  border-color: var(--jade); background: rgba(30,158,87,.14);
  box-shadow: 0 0 0 2px rgba(75,227,138,.3);
}
.topup-option input:checked + .topup-option__box b { color: var(--jade); }
@media (max-width: 560px) { .topup-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Content page: sidebar + nội dung ---------- */
.content-page { padding: 104px 0 var(--sp-9); }
.content-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-7); align-items: start; }

/* Sidebar panels (dùng chung cho content page) */
.content-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); }
.side-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-md);
  overflow: hidden;
}
.side-panel--download { padding: var(--sp-5); text-align: center; }
.side-panel__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.side-panel__brand img { height: 52px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.side-panel__brand span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--text-muted); }
.side-panel__cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
/* 3 nút riêng biệt: xếp dọc, mỗi nút 1 hàng */
.side-panel__cta--triple { grid-template-columns: 1fr; }
.side-panel__cta--triple .side-cta { padding: var(--sp-3) var(--sp-4); }
.side-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-sm);
  font-weight: 800; font-size: .9rem; letter-spacing: .02em;
  border: 1px solid var(--border-metal); color: var(--text-primary);
  background: rgba(4,14,9,.5); transition: all var(--dur-fast);
}
.side-cta span { color: var(--jade); }
.side-cta:hover { border-color: var(--jade); color: var(--jade); }
.side-cta--primary { color: #04140A; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: #fff3cf; }
.side-cta--primary span { color: #04140A; }
.side-cta--primary:hover { color: #04140A; transform: translateY(-1px); box-shadow: var(--glow-gold); }

.side-panel__head {
  background: linear-gradient(180deg, var(--emerald-deep), rgba(11,94,51,.6));
  color: var(--gold-bright); font-weight: 800; font-size: 1.1rem; letter-spacing: .03em;
  text-align: center; padding: var(--sp-4); border-bottom: 1px solid var(--border-metal);
}
.side-panel__menu { padding: var(--sp-3) var(--sp-5); }
.side-panel__menu li { border-bottom: 1px dashed rgba(44,90,62,.5); }
.side-panel__menu li:last-child { border-bottom: 0; }
.side-panel__menu a {
  display: block; padding: var(--sp-3) 0; color: var(--text-primary); font-weight: 700; font-size: .9rem; line-height: 1.4;
  transition: color var(--dur-fast), padding var(--dur-fast);
}
.side-panel__menu a::before { content: "› "; color: var(--jade); font-weight: 800; }
.side-panel__menu a:hover { color: var(--jade); padding-left: var(--sp-2); }

/* Cột nội dung */
.content-main {
  background: linear-gradient(180deg, rgba(14,32,23,.5), rgba(7,19,13,.5));
  border: 1px solid var(--border-metal); border-radius: var(--radius-md);
  padding: 0 var(--sp-7) var(--sp-7);
}
.content-main__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--sp-7)) var(--sp-6);
  padding: var(--sp-5) var(--sp-7);
  background: linear-gradient(180deg, var(--emerald-deep), rgba(11,94,51,.4));
  border-bottom: 1px solid var(--border-metal);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.content-main__cat { font-size: 1.3rem; font-weight: 800; color: var(--gold-bright); letter-spacing: .02em; }
.content-main__crumb { font-size: .82rem; color: var(--text-muted); }

/* ---------- Article body ---------- */
.article__head { margin-bottom: var(--sp-6); text-align: center; border-bottom: 1px dashed rgba(44,90,62,.5); padding-bottom: var(--sp-5); }
.article__meta { color: var(--text-muted); font-size: .85rem; margin-top: var(--sp-3); letter-spacing: .04em; }
.article__title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--gold); line-height: 1.25; }
.article__hero {
  margin: 0 0 var(--sp-6); aspect-ratio: 16/7;
  border-radius: var(--radius-lg); border: 1px solid var(--border-metal);
  background:
    radial-gradient(circle at 50% 40%, rgba(30,158,87,.3), transparent 60%),
    linear-gradient(160deg, #0e2417, var(--bg-base));
  display: grid; place-items: center;
}
.article__hero span { color: var(--text-muted); font-weight: 700; letter-spacing: .1em; }
/* Ảnh đại diện bài do posts.js đổ vào ô trên. Bài chưa có ảnh thì ô giữ nguyên
   nền trang trí, nên rule này không trúng gì cả.

   width/height 100% đủ để ảnh phủ kín dù ô cha dùng place-items:center — đã đo
   thật 14/08/2026: ảnh 804x351 khớp đúng vùng trong viền của ô. KHÔNG cần thêm
   place-self:stretch như .news__feature-link; ô đó cần vì phần tử con là <a>
   rỗng, không có kích thước riêng để 100% bám vào.

   overflow:hidden ở đây (không như trang chủ, nơi nó nằm ở link con) vì ô này
   không có phần tử trung gian nào để đặt: ảnh là con trực tiếp. Cần nó để bo
   góc cắt được ảnh.

   object-fit:cover giữ ảnh không méo dù tỉ lệ admin upload là bao nhiêu. */
.article__hero { overflow: hidden; }
.article__hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.article__body { margin: 0; }
.article__body h2 { font-size: 1.4rem; color: var(--gold); margin: var(--sp-7) 0 var(--sp-4); }
.article__body p { color: var(--text-primary); opacity: .92; margin-bottom: var(--sp-4); line-height: 1.8; }
.article__body ul { margin: 0 0 var(--sp-4) var(--sp-5); list-style: disc; }
.article__body li { color: var(--text-primary); opacity: .92; margin-bottom: var(--sp-2); }
.article__back { display: inline-block; margin: var(--sp-2) 0 var(--sp-5); color: var(--jade); font-weight: 700; }
.article__back:hover { color: var(--gold-bright); }

/* ---------- Trang tin tức (tin-tuc.html) ----------
   Dùng lại .content-page + .content-main ở trên; đây chỉ là phần danh sách và
   nút chuyển trang chưa có ở đâu. Nút lọc kế thừa dáng .news__tab của trang
   chủ để hai chỗ nhìn cùng một hệ. */
.newslist__tabs {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--border-metal); margin-bottom: var(--sp-5);
}
.newslist__tab {
  position: relative;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  color: var(--text-muted); padding: var(--sp-3) var(--sp-4);
  transition: color var(--dur-fast);
}
.newslist__tab:hover { color: var(--text-primary); }
.newslist__tab.is-active { color: var(--gold); }
.newslist__tab.is-active::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: -1px;
  height: 2px; background: var(--gold);
}

.newslist { display: flex; flex-direction: column; gap: var(--sp-4); }
.newslist__empty { color: var(--text-muted); text-align: center; padding: var(--sp-8) 0; }

/* Thẻ bài: ảnh trái, nội dung giữa, ngày phải.
   Cột ảnh cố định 200px + minmax(0,1fr) cho phần giữa: không có minmax thì
   tiêu đề dài đẩy cột ngày tràn khỏi thẻ. */
.news-item {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: var(--sp-5); align-items: start;
  padding: var(--sp-4);
  background: linear-gradient(180deg, rgba(14,32,23,.6), rgba(7,19,13,.6));
  border: 1px solid var(--border-metal); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.news-item:hover { border-color: var(--jade); transform: translateY(-2px); }

/* Tỉ lệ cố định + object-fit: ảnh admin upload cỡ nào cũng không làm méo thẻ
   hay đẩy các hàng cao thấp khác nhau. */
.news-item__thumb {
  display: block; aspect-ratio: 16/10; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border-metal);
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-item__body { min-width: 0; }
.news-item__title { font-size: 1.05rem; font-weight: 700; line-height: 1.45; margin: var(--sp-2) 0; }
.news-item__title a { color: var(--text-primary); transition: color var(--dur-fast); }
.news-item__title a:hover { color: var(--gold); }
.news-item__desc { color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.news-item__date { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }

/* ---------- Nút chuyển trang ---------- */
.newslist__pagination { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-7); }
.page-link {
  min-width: 40px; padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  color: var(--text-primary); background: rgba(4,14,9,.5);
  border: 1px solid var(--border-metal); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--dur-fast);
}
.page-link:hover:not(:disabled) { border-color: var(--jade); color: var(--jade); }
.page-link.is-active { color: #04140A; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: transparent; }
.page-link:disabled { opacity: .4; cursor: default; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; }
  .content-sidebar { order: 2; }
  .content-main { order: 1; }

  /* Ảnh hẹp lại nhưng vẫn nằm bên trái: bỏ hẳn cột ảnh ở đây là mất thứ giúp
     lướt mắt nhanh nhất trong danh sách. */
  .news-item { grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-4); }
  /* Ngày xuống dưới phần chữ, thụt vào ngang cột đó */
  .news-item__date { grid-column: 2; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .auth-card { padding: var(--sp-7) var(--sp-5); }
  .content-main { padding: 0 var(--sp-5) var(--sp-5); }
  .content-main__head { margin-inline: calc(-1 * var(--sp-5)); padding-inline: var(--sp-5); }

  /* Màn hẹp nhất: ảnh phủ hết bề ngang, chữ nằm dưới. Ép 140px ở đây thì cột
     chữ còn ~150px, tiêu đề vỡ thành cả chục dòng. */
  .news-item { grid-template-columns: minmax(0, 1fr); }
  .news-item__date { grid-column: 1; }
  /* Nút lọc nhiều hơn 4 mục sẽ tràn: cho cuộn ngang thay vì xuống 3 hàng. */
  .newslist__tabs { flex-wrap: nowrap; overflow-x: auto; }
  .newslist__tab { flex: 0 0 auto; }

  /* Dòng "Tôi đồng ý với Điều khoản & Chính sách bảo mật" đo được 340px khi bị
     ép một hàng. Nó nằm TRONG .auth-card nên đẩy chính thẻ đó phình lên 390px
     ở màn 360px — kéo theo mọi ô nhập, nút và tiêu đề tràn khỏi mép phải, và
     cả trang cuộn ngang được (scrollWidth 415px).

     Cho xuống dòng là thẻ trở lại 312px, scrollWidth về đúng 360px.
     Ảnh hưởng: register.html và popup đăng ký ở trang-chu.html.

     GIỮ flex-wrap: nowrap. Đổi sang wrap thì ô đánh dấu và phần chữ thành hai
     dòng riêng — ô trơ trọi một dòng, nhìn như lỗi. Chỉ white-space là đủ:
     phần chữ tự xuống dòng bên trong, ô vẫn nằm cạnh nó.

     align-items: flex-start để ô thẳng hàng với DÒNG CHỮ ĐẦU; giữ center thì
     ô trôi xuống giữa hai dòng, lệch khỏi chữ. */
  .form-check--agree { white-space: normal; align-items: flex-start; }
}

/* ---------- Popup đăng ký (trang chủ, hiện khi vào trang) ---------- */
.reg-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.reg-modal.is-open { opacity: 1; visibility: visible; }
.reg-modal__backdrop { position: absolute; inset: 0; background: rgba(4,10,7,.78); }
.reg-modal__card {
  position: relative; margin: auto;
  transform: translateY(14px) scale(.97);
  transition: transform var(--dur-base) var(--ease);
}
.reg-modal.is-open .reg-modal__card { transform: none; }
.reg-modal__close {
  position: absolute; top: 10px; right: 14px;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--text-muted);
  transition: color var(--dur-fast);
}
.reg-modal__close:hover { color: var(--gold); }

/* ---------- Input báo lỗi (khi thông tin sai) ---------- */
.form-field__input.is-error,
.pw-wrap.is-error .form-field__input {
  border-color: #e11d1d;
  box-shadow: 0 0 0 3px rgba(225,29,29,.22);
}

/* ---------- Popup thông báo (dùng chung, do form-alert.js điều khiển) ---------- */
.alert-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(4,10,7,.72);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.alert-overlay.is-open { opacity: 1; visibility: visible; }

.alert-box {
  width: 100%; max-width: 380px; text-align: center;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border-metal); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  transform: translateY(12px) scale(.96);
  transition: transform var(--dur-base) var(--ease);
}
.alert-overlay.is-open .alert-box { transform: none; }

.alert-box__icon {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.8rem; font-weight: 800;
}
/* Màu icon theo loại popup */
.alert-box--error .alert-box__icon { color: #e11d1d; border: 2px solid #e11d1d; background: rgba(225,29,29,.1); }
.alert-box--success .alert-box__icon { color: var(--jade); border: 2px solid var(--jade); background: rgba(75,227,138,.12); }
.alert-box__title { font-family: var(--font-heading); font-size: 1.35rem; color: var(--gold-bright); margin-bottom: var(--sp-2); }
.alert-box__msg { color: var(--text-primary); opacity: .9; font-size: .95rem; margin-bottom: var(--sp-4); }
.alert-box__extra { margin-bottom: var(--sp-6); }
.alert-box .btn { width: 100%; justify-content: center; }

/* Khối mã đăng ký trong popup thành công (bấm để sao chép) */
.reg-code {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-4); margin-bottom: var(--sp-2);
  border: 1px dashed var(--jade); border-radius: var(--radius-md);
  background: rgba(75,227,138,.08); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.reg-code:hover { background: rgba(75,227,138,.14); }
.reg-code__value {
  font-family: var(--font-body); font-weight: 800; font-size: 1.3rem;
  letter-spacing: .12em; color: var(--jade);
}
.reg-code__hint { font-size: .74rem; color: var(--text-muted); }
.reg-code.is-copied { border-color: var(--gold-bright); }
.reg-code.is-copied .reg-code__hint { color: var(--gold-bright); }
.reg-code__note { font-size: .78rem; color: var(--text-muted); }

/* ---------- Khối quà trong popup đăng ký thành công ---------- */
/* Ô 64px vừa đúng cỡ ảnh gốc của vật phẩm. flex: 0 0 auto để flex không bóp
   ngang: cao đặt cứng 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. */
.gift-icons {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; margin: var(--sp-4) 0;
}
.gift-ico {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(75,227,138,.3), transparent 70%);
  border: 1px solid var(--border-metal);
}
/* Chừa 4px đệm để ảnh không dính sát viền. */
.gift-ico img {
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;
}

/* ---------- Chú thích tên vật phẩm khi rê chuột / chạm ----------
   Đặt ở forms.css vì cả ba trang có popup quà đều nạp file này (trang chủ,
   register.html, và index.html), còn landing-minigame.css thì CHỈ index.html
   nạp. Để luật ở bên đó thì thêm class vào popup của auth.js cũng không có
   tác dụng gì — đúng cái bẫy đã vấp một lần.

   Tên lớp trung tính (không mang chữ `reward` hay `gift`) vì nó phục vụ cả ô
   `.reward-ico` của trang sự kiện lẫn ô `.gift-ico` của hai trang kia.

   Không dùng thuộc tính `title` của trình duyệt: nó chỉ hiện khi rê chuột, chờ
   ~1 giây, và điện thoại chạm vào thì không hiện gì — trong khi phần lớn người
   chơi vào bằng điện thoại. `tabindex="0"` trên thẻ cha làm nó nhận được focus
   khi chạm, nhờ đó :focus-within kích hoạt được. */
.co-chu-thich { position: relative; cursor: help; }
.co-chu-thich::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface-2); color: var(--text-primary);
  border: 1px solid var(--border-metal); border-radius: var(--radius-md);
  font-size: .78rem; line-height: 1.3; white-space: nowrap;
  /* visibility chứ không chỉ opacity: ẩn bằng opacity thôi thì trình đọc màn
     hình vẫn thấy chữ và đọc tên món quà hai lần mỗi ô (một lần từ alt của
     ảnh, một lần từ tooltip). visibility cất hẳn nó khỏi cây trợ năng. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
  z-index: 3;
}
.co-chu-thich:hover::after,
.co-chu-thich:focus::after,
.co-chu-thich:focus-within::after { opacity: 1; visibility: visible; }
/* Viền bàn phím: giữ dấu hiệu focus rõ ràng, không tắt outline. */
.co-chu-thich:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
/* Ô đầu và cuối dãy: tooltip neo giữa sẽ tràn mép màn hẹp vì tên vật phẩm dài
   hơn ô 64px nhiều. Neo theo mép trong của ô biên. */
.gift-icons .co-chu-thich:first-child::after { left: 0; transform: none; }
.gift-icons .co-chu-thich:last-child::after { left: auto; right: 0; transform: none; }

.gift-social { display: flex; gap: var(--sp-3); justify-content: center; }
/* Ghi đè .alert-box .btn { width:100% } bên trên: luật đó dành cho nút Đồng Ý
   chiếm trọn bề ngang, còn hai nút mạng xã hội phải nằm cạnh nhau.
   Cỡ chữ đặt tại đây vì .btn--sm chỉ tồn tại trong landing-minigame.css,
   file mà trang chủ và register.html không nạp. */
.gift-social .btn { width: auto; flex: 1; padding: var(--sp-2) var(--sp-4); font-size: .82rem; }

/* ---------- Hiện/ẩn theo trạng thái đăng nhập ----------
   Nguồn sự thật: thuộc tính data-auth trên <html>, do auth-state.js đặt.
   Ở "unknown" ẩn cả hai nhóm — chưa biết người dùng là ai thì không đoán,
   đoán sai là nháy giao diện.
   Chỉ ẩn khi data-auth CÓ giá trị: JS chết hoàn toàn thì thuộc tính không
   tồn tại, mọi thứ hiện như cũ thay vì trang trắng.
   !important vì .reg-modal.is-open đặt visibility:visible và .reg-modal có
   display:flex — không có nó thì popup lọt qua. */
[data-auth="unknown"] [data-guest-only],
[data-auth="unknown"] [data-user-only]  { display: none !important; }
[data-auth="user"]    [data-guest-only] { display: none !important; }
[data-auth="guest"]   [data-user-only]  { display: none !important; }

/* ================================================================
   TRANG TÀI KHOẢN (tai-khoan.html)

   Bố cục dùng lại nguyên .content-layout + .side-panel + .content-main của
   trang bài viết (dòng 150-212). Ở đây chỉ thêm ba thứ chưa có: bảng thông
   tin, badge xác thực, và trạng thái đang chọn của menu.
   ================================================================ */

/* Lời chào dưới tiêu đề trang */
.account-hello { text-align: center; color: var(--text-muted); margin-bottom: var(--sp-6); }
.account-hello b { color: var(--jade); }

/* ---------- Bảng thông tin ----------
   Dùng <dl> chứ không phải <table>: đây là danh sách cặp tên–giá trị, không
   phải dữ liệu hai chiều. Trình đọc màn hình đọc đúng quan hệ mà không cần
   thêm caption/scope. */
.account-table { display: grid; grid-template-columns: 180px 1fr; gap: 0; }
.account-table dt,
.account-table dd {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px dashed rgba(44,90,62,.5);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.account-table dt { color: var(--text-muted); font-weight: 700; font-size: .88rem; }
.account-table dd { color: var(--text-primary); font-weight: 700; }
/* Hàng cuối không cần gạch chân. dt và dd là hai loại thẻ khác nhau nên
   nth-last-of-type đếm riêng từng loại — đổi cấu trúc HTML thì kiểm lại. */
.account-table dt:nth-last-of-type(1),
.account-table dd:nth-last-of-type(1) { border-bottom: 0; }

/* Màn hẹp: nhãn nằm trên, giá trị nằm dưới, không ép cột 180px */
@media (max-width: 560px) {
  .account-table { grid-template-columns: 1fr; }
  .account-table dt { border-bottom: 0; padding-bottom: 0; }
  .account-table dd { padding-top: var(--sp-1); }
  /* Màn hẹp: tên vật phẩm dài (ví dụ "Phiếu 1000 Kim Nguyên Bảo Khoá") để
     nguyên một dòng thì tràn khỏi màn. Cho xuống dòng và chặn bề rộng.

     Luật này của trang sự kiện (landing-minigame.css) chuyển sang đây cùng lúc
     với luật tooltip gốc: cả ba trang có popup quà đều nạp forms.css, còn
     landing-minigame.css chỉ index.html nạp — để bên đó thì popup ở trang chủ
     và register.html vẫn tràn mép trên điện thoại. */
  .co-chu-thich::after { white-space: normal; width: max-content; max-width: 46vw; text-align: center; }
}

/* ---------- Badge xác thực email ---------- */
.account-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2); border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  border: 1px solid currentColor;
}
/* Badge nằm TRONG <span id="fEmail"> chứ không phải con trực tiếp của <dd>, nên
   `gap` của .account-table dd không với tới — phải tự tách bằng margin. Cái span
   đó có để nút [Đổi] không bị `textContent = ...` xoá mất (xem tai-khoan.html). */
#fEmail .account-badge { margin-left: var(--sp-2); }
.account-badge--ok { color: var(--jade); background: rgba(75,227,138,.12); }
.account-badge--no { color: #e11d1d; background: rgba(225,29,29,.12); }

/* ---------- Nút [Đổi] cuối mỗi dòng sửa được ----------
   Nhỏ và mờ hơn nút chính: nó nằm trong bảng đọc, không phải lời kêu gọi hành
   động. `margin-left: auto` đẩy sang mép phải của ô, tách khỏi giá trị.

   Không dùng .btn: nút .btn có padding và cỡ chữ của nút chính, đặt trong ô
   bảng cao 40px là hàng phình gấp rưỡi. */
.btn-doi {
  margin-left: auto;
  padding: 2px var(--sp-3);
  font-size: .78rem; font-weight: 700;
  color: var(--gold); background: transparent;
  border: 1px solid var(--border-metal); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn-doi:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Form đổi thông tin trong popup ----------
   Nhãn canh TRÁI: .alert-box đặt text-align center cho cả hộp, mà nhãn ô nhập
   canh giữa thì mắt không dò được đâu là nhãn của ô nào. */
.security-form { text-align: left; }
.security-form .form-field { margin-bottom: var(--sp-4); }
/* Nút "Xác nhận" nằm trong form nên .alert-box .btn (width:100%) đã phủ tới;
   chỉ cần tách khỏi ô cuối. */
.security-form .btn { margin-top: var(--sp-2); }

/* ---------- Popup báo lỗi phải nằm TRÊN popup chứa form ----------
   Mọi .alert-overlay dùng chung `--z-modal` nên cái tạo SAU nằm trên. File
   account-security.js tạo popup form CUỐI CÙNG (nó cần errorPopup có sẵn để
   dùng), nên không đảo thứ tự tạo được — nâng z-index là cách gọn nhất.

   Lỗi thì GIỮ form mở (người dùng còn phải sửa lại ô vừa nhập), khác với
   thành công — ca đó JS tự đóng form trước khi báo. */
.alert-overlay:has(.alert-box--error) { z-index: calc(var(--z-modal) + 1); }

/* Nút "Huỷ" của popup (nút mặc định do makePopup dựng, nằm ngay sau khối form).
   Làm nhạt đi để không tranh chấp với "Xác nhận" — hai nút vàng giống hệt nhau
   xếp chồng là mời người dùng bấm nhầm.

   `:has()` không được hỗ trợ thì luật này bị bỏ qua và nút giữ màu vàng cũ —
   xấu hơn nhưng vẫn bấm đúng, nên không cần đường lui bằng JS. */
.alert-box__extra:has(.security-form) + .btn {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-metal); box-shadow: none;
}
.alert-box__extra:has(.security-form) + .btn:hover { color: var(--text-primary); }

/* ---------- Nút gửi trong các mục (Nạp thẻ, Mở khóa nhân vật) ----------
   Cột nội dung ở đây rộng ~806px, rộng gấp rưỡi khung của login/nạp bạc. Kéo
   nút rộng hết như .auth-card .btn thì nút dài quá khổ; để nút co theo chữ thì
   lại lệch hẳn so với ô chọn ngay trên nó. Chặn trần 320px và canh lề trái là
   đường giữa: thẳng hàng với ô nhập mà không dài lê thê.

   Màn hẹp dưới 320px thì width:100% thắng max-width, nút tự rộng hết khung. */
.account-section form > .btn {
  width: 100%; max-width: 320px;
  justify-content: center; margin-top: var(--sp-5);
}

/* ---------- Khối "Lưu ý" dưới form nạp ---------- */
.topup-note {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--border-metal); border-radius: var(--radius-md);
  background: rgba(4,14,9,.4);
}
.topup-note__title { font-size: .9rem; font-weight: 800; color: var(--gold); margin-bottom: var(--sp-2); }
.topup-note__list { list-style: disc; padding-left: var(--sp-5); }
.topup-note__list li { color: var(--text-muted); font-size: .85rem; line-height: 1.7; }
.topup-note__list b { color: var(--jade); }

/* ---------- Thông tin chuyển khoản (trong popup) ----------
   Dựng bằng DOM trong account-page.js. Mã nội dung dùng .reg-code có sẵn
   (ui-popup.js makeCodeBox) — bấm để sao chép. */
.bank-info { text-align: left; margin-top: var(--sp-4); }
/*
  KHÔNG ép chiều cao cố định. Ảnh VietQR là 540×640 — CAO hơn rộng vì dưới mã
  còn in tên chủ tài khoản, số tài khoản và số tiền. Ép `height: 200px` rồi cho
  ảnh `width: 100%` thì chiều cao ảnh tự tính ra ~207px, cộng padding là tràn
  hẳn ra ngoài khung trắng (thấy trên máy thật 17/08/2026).

  Để chiều cao tự co theo ảnh, và chặn thêm bằng `max-height` phòng dịch vụ QR
  đổi sang tỉ lệ dài hơn.
*/
.bank-info__qr {
  width: 200px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; padding: var(--sp-3);
  border: 1px solid var(--border-metal); border-radius: var(--radius-md);
  background: #fff;   /* mã QR cần nền sáng mới quét được */
}
/*
  `object-fit: contain` + `max-height`: ảnh luôn nằm GỌN trong khung dù dịch vụ
  đổi tỉ lệ. Không dùng `cover` — nó cắt bớt mép, mà mép mã QR bị cắt là điện
  thoại quét không ra.
*/
.bank-info__qr img {
  width: 100%; height: auto;
  max-height: 260px; object-fit: contain;
}
/*
  Nhánh không tải được ảnh: khung mất chiều cao từ ảnh nên phải tự dựng lại,
  không thì còn mỗi hai dòng chữ dính vào nhau nhìn như lỗi vỡ trang.
*/
.bank-info__qr span {
  color: #6b6258; font-size: .8rem; text-align: center;
  min-height: 174px; display: grid; place-items: center;
}
.bank-info__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px dashed rgba(44,90,62,.5);
  font-size: .88rem;
}
.bank-info__row:last-child { border-bottom: 0; }
.bank-info__row dt { color: var(--text-muted); }
.bank-info__row dd { color: var(--text-primary); font-weight: 700; text-align: right; }
.bank-info__warn {
  margin-top: var(--sp-4); color: #ff8a8a; font-size: .85rem;
  font-weight: 700; line-height: 1.6;
}

/* ---------- Menu bên: mục đang chọn ----------
   Màu chữ và hover đã có sẵn ở .side-panel__menu a (dòng 190-195); ở đây chỉ
   thêm trạng thái "đang chọn". */
.side-panel__menu a.is-active { color: var(--gold-bright); padding-left: var(--sp-2); }
.side-panel__menu a.is-active::before { color: var(--gold-bright); }

/* ---------- Màn hẹp: menu lên TRÊN nội dung ----------
   Luật chung ở dòng 236-240 đặt .content-sidebar { order: 2 } — đúng cho trang
   bài viết (nội dung quan trọng hơn menu), sai cho trang này (menu là thứ để
   chuyển mục, để dưới cùng thì phải cuộn hết trang mới đổi được). Đảo lại
   TRONG PHẠM VI .account-page để không đụng tới article.html. */
@media (max-width: 900px) {
  .account-page .content-sidebar { order: 1; }
  .account-page .content-main { order: 2; }
}

/* ================================================================
   MỤC LỊCH SỬ NẠP (tai-khoan.html — mục thứ 4)

   Tên class có tiền tố `topup-history-` chứ không phải `history-table`
   trần: landing-minigame.css:309 đã có `.history-table` cho bảng vòng
   quay (th dính đầu bảng, hàng chẵn nền tối). Hiện tại tai-khoan.html
   KHÔNG nạp file đó nên chưa đè nhau — đặt tên riêng để sau này gộp
   CSS hay nạp thêm cũng không vỡ âm thầm.
   ================================================================ */

/* Câu dẫn trên mỗi form PIN */
.topup-history__lead {
  color: var(--text-muted); font-size: .9rem; line-height: 1.7;
  margin-bottom: var(--sp-5);
}

/* Dòng tóm tắt trên bảng — số liệu tính trên TOÀN BỘ lịch sử,
   không phải trang đang xem (hợp đồng API mục 3). */
.topup-history__summary {
  color: var(--text-primary); font-size: .92rem; line-height: 1.8;
  margin-bottom: var(--sp-4);
}
.topup-history__summary b { color: var(--gold-bright); }

/* Bảng cuộn ngang trên màn hẹp thay vì ép 5 cột chồng lên nhau.
   Bảng này đọc theo hàng (một giao dịch một hàng) nên xé cột ra là
   mất nghĩa. */
.topup-history__wrap { overflow-x: auto; }
.topup-history__table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem; min-width: 560px;
}
.topup-history__table th {
  background: var(--emerald-deep); color: var(--gold-bright);
  padding: var(--sp-3); text-align: left;
  font-weight: 800; font-size: .8rem; white-space: nowrap;
}
.topup-history__table td {
  padding: var(--sp-3); border-bottom: 1px solid rgba(44,90,62,.4);
  color: var(--text-primary); vertical-align: middle;
}
.topup-history__table tr:last-child td { border-bottom: 0; }

/* Dòng "Chưa có giao dịch nào" */
.topup-history__empty {
  text-align: center; color: var(--text-muted); padding: var(--sp-6);
}

/* Cụm phân trang. Tôn trọng [hidden] vì đặt display: flex — cùng lý do
   với .account-actions[hidden] ở trên. */
.topup-history__pager {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); margin-top: var(--sp-5);
}
.topup-history__pager[hidden] { display: none; }
.topup-history__pager .btn { min-width: 110px; justify-content: center; }
.topup-history__page { color: var(--text-muted); font-size: .85rem; }

/* Badge trạng thái thứ tư: "Đang xử lý".
   Ba trạng thái kia dùng lại .account-badge--ok / --no có sẵn ở trên.
   status 2 (Thất bại) và 3 (Sai mệnh giá) chung một màu đỏ — chữ do
   backend trả đã phân biệt đủ. */
.account-badge--wait { color: var(--gold); background: rgba(224,172,70,.12); }