/* =========================================================
   PINKY — theme tokens
   Nền tím-than sâu (không đen thuần) + duotone xanh dương pastel/hồng pastel
   cho tương tác, vàng gold riêng cho tiền/số dư, số liệu
   dùng font mono kiểu hoá đơn giao dịch.
   ========================================================= */
:root {
  color-scheme: dark; /* để trình duyệt vẽ lịch/giờ, thanh cuộn... theo tông tối, không bị chìm mất icon */
  --bg: #0f0b1f;
  --bg-soft: #150f28;

  --card-bg: #17122b;
  --card-hover: #221b3f;
  --surface-2: #1d1736;

  --text: #f5f3ff;
  --text-muted: #9c93b8;
  --text-faint: #6b628c;

  --accent: #FFA0C9;         /* hồng pastel — màu chủ đạo, hành động chính */
  --accent-rgb: 255, 160, 201;
  --accent-grad-end: #FF7EB3; /* điểm cuối gradient của accent, cùng tông hồng pastel */
  --accent-2: #ffb020;       /* vàng gold — tiền / số dư */
  --accent-2-rgb: 255, 176, 32;
  --magenta: #7FD3FF;        /* xanh dương pastel — điểm nhấn phụ / trạng thái đang xử lý */
  --magenta-rgb: 127, 211, 255;

  --success: #2fe6a3;
  --success-rgb: 47, 230, 163;
  --danger: #ff5470;
  --warning: #ffb020;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --nav-bg: rgba(15, 11, 31, 0.82);
  --radius: 14px;
  --radius-sm: 9px;

  /* Lớp nền mờ phía sau các bảng nổi (đăng nhập/đăng ký, tìm kiếm, chi tiết hoá đơn...).
     Dùng chung 1 biến để mọi bảng đều mờ giống nhau; tông màu lấy theo màu chủ đạo
     (accent + magenta) thay vì màu đen. Vì viết bằng var() nên tự đổi đúng theo theme sáng/tối. */
  --overlay-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.38), rgba(var(--magenta-rgb), 0.30));
  --overlay-blur: 8px;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Màu chữ cố định khi nằm TRÊN nền gradient accent (nút chính, avatar, tab active...).
     Không đổi theo theme vì accent luôn đủ sáng để chữ tối đọc được ở cả 2 theme. */
  --on-accent: #06140f;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5fb;
  --bg-soft: #ffffff;

  --card-bg: #ffffff;
  --card-hover: #f1eefb;
  --surface-2: #f4f2fb;

  --text: #1c1730;
  --text-muted: #5c5478;
  --text-faint: #8981a3;

  --accent: #FFA0C9;         /* hồng pastel — giữ nguyên như giao diện tối, không hạ độ sáng */
  --accent-rgb: 255, 160, 201;
  --accent-grad-end: #FF7EB3; /* điểm cuối gradient của accent, cùng tông hồng pastel */
  --accent-2: #c9820a;       /* vàng gold hạ độ sáng, giữ nhận diện tiền/số dư */
  --accent-2-rgb: 201, 130, 10;
  --magenta: #4C8FC9;        /* xanh dương pastel hạ độ sáng, vẫn cùng tông gradient */
  --magenta-rgb: 76, 143, 201;

  --success: #0f9d63;
  --success-rgb: 15, 157, 99;
  --danger: #d6304f;
  --warning: #c9820a;

  --border: rgba(28, 23, 48, 0.08);
  --border-strong: rgba(28, 23, 48, 0.14);
  --nav-bg: rgba(255, 255, 255, 0.86);
}

[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(var(--accent-rgb),0.1), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 0%, rgba(var(--magenta-rgb),0.11), transparent 55%);
}

/* Chữ pastel sáng trên .alert vốn thiết kế cho card nền tối -> không đọc được trên card trắng */
[data-theme="light"] .alert-error { color: #b3193b; }
[data-theme="light"] .alert-success { color: #0f7a52; }
[data-theme="light"] .alert-success a { color: #0b5c3e; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

#deposit-history { scroll-margin-top: 90px; }
#order-qr-result { scroll-margin-top: 90px; }

/* ---------------- chuyển cảnh mượt mà giữa các trang ---------------- */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  opacity: 1;
  transition: opacity .32s ease;
  pointer-events: none;
}
.page-transition-overlay.hidden { opacity: 0; pointer-events: none; }
.page-transition-overlay.exiting { opacity: 1; pointer-events: all; transition-duration: .22s; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(var(--accent-rgb),0.2), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 0%, rgba(var(--magenta-rgb),0.18), transparent 55%);
  background-attachment: fixed, fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(0,229,199,0.3); color: #fff; }

/* Thanh cuộn mảnh, tông màu hồng chủ đạo (--accent) thay vì xám đậm mặc định - dùng độ mờ thấp để
   không lấn át nội dung, đậm hơn khi hover/kéo. scrollbar-width/scrollbar-color là chuẩn Firefox,
   ::-webkit-scrollbar-* là chuẩn Chrome/Edge/Safari - cần khai báo cả 2 để nhất quán mọi trình duyệt. */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.45); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.75); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- header ---------------- */
#app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 6%;
  background: var(--nav-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-wrap: wrap;
  gap: 10px;
}

.logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Logo PinkGM - ảnh PNG đã khử nền trắng thành trong suốt (dựng bằng scripts/make-logo-assets.js),
   nhờ vậy đặt được lên cả giao diện sáng lẫn tối mà không kèm khối chữ nhật trắng.
   aspect-ratio khớp đúng file ảnh 603x200 để trình duyệt chừa sẵn chỗ, không bị nhảy layout khi ảnh tải xong. */
.logo-img {
  height: 50px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 603 / 200;
  object-fit: contain;
  display: block;
}

.logo i {
  background: linear-gradient(135deg, var(--accent), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo span {
  background: linear-gradient(135deg, var(--accent) 10%, var(--magenta) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo b { color: var(--text); -webkit-text-fill-color: var(--text); }

nav.main-nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav.main-nav a {
  color: var(--text-muted); font-weight: 600; font-size: 15px;
  padding: 9px 16px; border-radius: 20px; transition: color .15s, background .15s;
  display: flex; align-items: center; gap: 7px;
}
nav.main-nav a:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
nav.main-nav a.active { color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.theme-toggle-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
  transition: border-color .15s, color .15s, transform .12s;
}
.theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle-btn:active { transform: scale(0.92); }

.header-right { display: flex; align-items: center; gap: 12px; }

/* ---------------- popovers dùng chung (giao diện) ---------------- */
.popover-anchor { position: relative; display: flex; }
.theme-popover {
  position: absolute; top: 48px; left: 0; background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); z-index: 200;
  display: none; animation: menuPop .16s ease;
}
.theme-popover.show { display: block; }

/* ---------------- tìm kiếm: modal căn giữa màn hình, nền phía sau mờ đi ---------------- */
.search-modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: var(--overlay-bg);
  backdrop-filter: blur(var(--overlay-blur)); -webkit-backdrop-filter: blur(var(--overlay-blur));
  display: none; align-items: flex-start; justify-content: center;
  padding: 90px 20px 20px;
}
.search-modal-overlay.show { display: flex; animation: fadeIn .18s ease; }
.search-modal {
  width: 100%; max-width: 560px; background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 14px;
  animation: modalPop .2s cubic-bezier(.2,.9,.3,1.2);
}
.search-popover-input-wrap { position: relative; margin-bottom: 4px; }
.search-popover-input-wrap i:first-child { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14px; }
.search-popover-input-wrap input {
  width: 100%; padding: 13px 40px 13px 38px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04); color: var(--text); font-size: 14.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-popover-input-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12); }
.search-modal-close { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 15px; cursor: pointer; transition: color .15s; }
.search-modal-close:hover { color: var(--danger); }
.search-popover-results { max-height: 60vh; overflow-y: auto; overflow-x: hidden; margin-top: 8px; }
.search-popover-empty { text-align: center; padding: 26px 10px; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.search-popover-empty i { font-size: 24px; margin-bottom: 10px; display: block; color: var(--accent); }
.search-popover-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-faint); padding: 6px 8px 4px; }

/* Ô tìm đơn hàng theo mã (trang Lịch sử đơn hàng) - cùng kiểu icon-trong-ô như .search-popover-input-wrap
   nhưng gắn thẳng trên trang thay vì trong popover, kèm nút xoá (x) chỉ hiện khi đã gõ chữ. */
.orders-search-box { position: relative; max-width: 420px; margin: 4px 0 22px; }
.orders-search-box i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14px; pointer-events: none; }
.orders-search-box input {
  width: 100%; padding: 12px 38px 12px 40px; border-radius: 30px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.orders-search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12); }
.orders-search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14px; cursor: pointer; transition: color .15s; }
.orders-search-clear:hover { color: var(--danger); }
.search-result-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; transition: background .12s, transform .12s; }
.search-result-item:hover, .search-result-item:focus-visible { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--magenta-rgb),0.06)); transform: translateX(2px); }
.search-result-item:hover .search-result-name, .search-result-item:focus-visible .search-result-name { color: var(--accent); }
.search-result-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.search-result-name { font-size: 13.5px; font-weight: 600; }
.search-result-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.search-result-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.18); flex-shrink: 0; }
.search-result-status-dot.status-dot-upcoming { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }

@media (max-width: 600px) {
  .search-modal-overlay { padding: 70px 14px 14px; }
}

.theme-popover { width: 220px; padding: 8px; right: auto; }
.theme-popover-title { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-faint); padding: 6px 10px 8px; }
.theme-option-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 8px; background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 13.5px; font-family: var(--font-body); transition: background .15s, color .15s;
}
.theme-option-btn i { width: 16px; text-align: center; }
.theme-option-btn:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
.theme-option-btn.active { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--magenta-rgb),0.08)); color: var(--accent); font-weight: 700; }

@media (max-width: 480px) {
  .theme-popover { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; }
}

/* ---------------- buttons ---------------- */
.btn {
  border: none; border-radius: 10px; padding: 11px 20px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden;
  font-family: var(--font-body);
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad-end) 100%);
  color: #06140f;
  box-shadow: 0 4px 20px -4px rgba(var(--accent-rgb), 0.5);
}
.btn-primary:hover { box-shadow: 0 6px 26px -4px rgba(var(--accent-rgb), 0.7); transform: translateY(-1px); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .5s;
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-success { background: linear-gradient(135deg, var(--success), #17b381); color: #06140f; }
.btn-danger { background: linear-gradient(135deg, var(--danger), #d63a5c); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn:hover { opacity: 0.95; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }

/* ---------------- wallet pill / user chip ---------------- */
.wallet-pill {
  background: linear-gradient(135deg, rgba(var(--accent-2-rgb),0.16), rgba(var(--accent-2-rgb),0.06));
  border: 1px solid rgba(var(--accent-2-rgb),0.35); color: var(--accent-2);
  padding: 11px 18px; border-radius: 24px; font-size: 14.5px; font-weight: 700;
  font-family: var(--font-mono);
  display: flex; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s;
}
.wallet-pill:hover { border-color: var(--accent-2); background: rgba(var(--accent-2-rgb),0.2); }

.user-chip { display: flex; align-items: center; gap: 10px; position: relative; cursor: pointer; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--magenta));
  color: #0b0817; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display);
}
/* Ảnh đại diện mặc định (logo PGM) có nền trong suốt và chữ màu hồng, nên phải đặt nền trắng
   cố định thay cho gradient hồng để đủ tương phản ở cả theme sáng lẫn tối, và dùng contain
   để logo không bị khung tròn cắt mất chữ. Viền mờ bên trong giữ cho hình tròn không tan
   vào nền ở theme sáng (nền thẻ và thanh điều hướng lúc đó cũng gần trắng). */
.avatar.avatar-default,
.avatar-upload-preview.avatar-default {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
  object-fit: contain;
  padding: 5px;
}
.avatar-upload-preview.avatar-default { padding: 9px; }

.user-menu {
  position: absolute; top: 48px; right: 0; background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); min-width: 210px; padding: 8px; display: none;
  animation: menuPop .16s ease;
}
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.user-menu.show { display: block; }
.user-menu a, .user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; background: none; border: none; color: var(--text); cursor: pointer; font-size: 14px; font-family: var(--font-body); }
.user-menu a:hover, .user-menu button:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
.user-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---------------- ô mật khẩu có icon hiện/ẩn ---------------- */
.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 42px; }
.password-eye {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); cursor: pointer; font-size: 14px; transition: color .15s;
}
.password-eye:hover { color: var(--accent); }
.field-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.5; }

/* ---------------- bảng cuộn ngang trên màn hình nhỏ ---------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
/* Bảng đơn hàng có thêm cột giờ và cột UID (tối đa 20 ký tự, không xuống dòng) nên cần rộng hơn
   mức tối thiểu chung; phần thừa ra người dùng cuộn ngang trong .table-scroll. */
.table-scroll table.table-wide { min-width: 1320px; }
/* Bảng lịch sử nạp tiền có 7 cột (thêm biến động + số dư trước/sau) nên cũng cần cuộn ngang
   thay vì bị bó ép vào khung .container hẹp (max-width 700px ở trang Nạp tiền). */
#deposit-history table { min-width: 780px; }
/* Bảng biến động số dư có cột "Loại" (badge chữ dài như "Thanh toán đơn hàng") và cột "Nội dung"
   chứa cả tên game/gói + mã đơn, nên cần rộng hơn mức tối thiểu chung để không bị bó chữ. */
#balance-history-box table { min-width: 900px; }
#deposit-history td:nth-child(3), #deposit-history th:nth-child(3),
#deposit-history td:nth-child(4), #deposit-history th:nth-child(4) { white-space: nowrap; }

.container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; width: 100%; flex: 1; }
/* Trang Nạp Game cần rộng hơn khung .container mặc định để chứa lưới gói nạp (5 cột) + khung giỏ hàng bên cạnh. */
.product-page-container { max-width: 1320px; }

/* Tablet (thiết bị cảm ứng, không phải điện thoại nhỏ - min-width 600px để loại điện thoại ra):
   lề 2 bên 20px mặc định quá sát so với màn hình rộng hơn của tablet (banner, lưới game bị ép sát mép).
   Dùng % (thay vì px cố định) để lề tự to/nhỏ theo đúng bề rộng từng thiết bị tablet, có chặn trên dưới
   qua clamp() để không bị quá hẹp (tablet nhỏ) hay quá rộng (tablet lớn, gần bằng khổ desktop). */
@media (hover: none) and (pointer: coarse) and (min-width: 600px) {
  .container { padding-left: clamp(20px, 6vw, 64px); padding-right: clamp(20px, 6vw, 64px); }
}

.page-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.page-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 26px; }

/* ---------------- BANNER TRANG CHỦ (carousel) ---------------- */
/* Tỉ lệ ~3.71:1 đo theo dải banner của tdstore247.com ở mọi kích thước màn hình (mobile/tablet/desktop
   đều giữ đúng tỉ lệ này) — dùng aspect-ratio để chiều cao luôn tự co giãn theo đúng tỉ lệ đó,
   không cần media query riêng cho từng breakpoint. */
.banner-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 3.71 / 1;
  margin-top: 0; /* .container đã có padding-top 30px riêng, không cần cộng thêm nữa kẻo cách quá xa thanh menu */
  margin-bottom: clamp(20px, 4vw, 40px); /* xuống hàng trust-row bên dưới */
  overflow: hidden;
  /* KHÔNG đặt màu nền riêng: ảnh hé lộ 2 bên nhỏ hơn ảnh chính nên luôn lộ ra khoảng trống quanh nó -
     nếu tô nền riêng (dù trắng hay tối) thì trông như một khối màu thừa, chỏi với ảnh banner.
     Để trong suốt thì khoảng trống đó hiện ra đúng nền trang (vốn đã có sẵn glow hồng/xanh + lưới chấm
     xuyên suốt toàn site, xem `body` bên dưới) - hoà vào giao diện thay vì là một khối riêng biệt. */
  border-radius: 18px;
  animation: fadeUp .6s ease both;
}
/* Kiểu "peek carousel": ảnh đang xem nằm giữa, kích thước gốc (scale 1); 2 ảnh kề bên nhỏ hơn
   (scale BANNER_PEEK_SCALE, đứng phía sau về z-index) nhưng hiện đủ màu (opacity 1, không làm mờ),
   hé lộ ở 2 mép. Toàn bộ vị trí (left/transform/opacity) được JS (home.js) tính theo khoảng cách tới
   slide đang xem rồi gán trực tiếp qua inline style, để khi chuyển slide mọi ảnh cùng trượt liên tục
   sang vị trí kế tiếp (kể cả ảnh đang ẩn ngoài rìa) thay vì bật/tắt đột ngột - tạo cảm giác "lướt" qua
   từng ảnh một. */
.banner-track { position: relative; width: 100%; height: 100%; }
/* Khung mỗi slide LUÔN giữ nguyên kích thước 75%x100% (bằng đúng ảnh đang active) - ảnh kề bên
   không thu nhỏ bằng cách bóp khung (sẽ khiến object-fit:cover chỉ đổi vùng crop, nội dung ảnh
   bên trong vẫn to y như cũ, không hề trông nhỏ đi), mà thu nhỏ bằng transform: scale() ngay trên
   khung đó - phóng to/thu nhỏ toàn bộ ảnh một cách đồng đều, đúng cảm giác zoom in/out. */
.banner-slide {
  position: absolute; top: 50%; left: 50%;
  width: 75%; height: 100%;
  transform: translate(-50%, -50%) scale(1);
  display: block;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0; z-index: 0; pointer-events: none;
  transition: left .6s ease, transform .6s ease, opacity .6s ease;
  box-shadow: 0 16px 40px -18px rgba(var(--accent-rgb),0.35);
}
.banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(15, 11, 31, 0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; z-index: 4;
  opacity: 0;
  transition: background .2s ease, opacity .2s ease;
}
/* Chỉ ẩn mặc định trên thiết bị có chuột thật (hover:hover) - rê chuột vào dải ảnh mới hiện nút
   (bật qua class .arrows-visible, gán bằng JS mouseenter/mouseleave trong home.js - đáng tin cậy hơn
   dùng thẳng :hover trong CSS vì còn phải phối hợp với @media(hover) cho từng loại thiết bị).
   Thiết bị cảm ứng (điện thoại/tablet) không có hover nên luôn hiện sẵn, không thì không ai bấm được. */
@media (hover: hover) {
  .banner-carousel.arrows-visible .banner-arrow { opacity: 1; }
}
@media (hover: none) {
  .banner-arrow { opacity: 1; }
}
.banner-arrow:hover { background: rgba(15, 11, 31, 0.8); }
.banner-arrow-prev { left: 14px; }
.banner-arrow-next { right: 14px; }
@media (max-width: 560px) { .banner-arrow { width: 28px; height: 28px; font-size: 12px; } }

.banner-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 4; }
.banner-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; }
.banner-dot.active { background: #fff; transform: scale(1.2); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- hàng trust-badge dưới banner trang chủ ---------------- */
/* Đủ rộng thì hiện thành 1 hàng đứng yên, căn giữa. Không đủ rộng thì các mục sẽ không vừa 1 hàng -
   thay vì xuống dòng (nhìn rối) hay cắt cụt, cho chạy ngang liên tục kiểu băng chuyền.
   Kỹ thuật: nhân đôi các mục ngay trong HTML (.trust-item.dup, aria-hidden vì trùng nội dung), rồi
   trượt .trust-track đúng -50% chiều rộng của chính nó - vì nửa sau là bản sao y hệt nửa đầu nên khi
   trượt hết nửa quãng đường, cảnh nhìn thấy giống hệt lúc bắt đầu -> lặp vô hạn mượt mà, không giật.
   Bật/tắt chế độ cuộn (.is-scrolling) do JS (updateTrustMarquee() trong home.js) quyết định bằng
   cách ĐO bề rộng thực tế thay vì đoán qua breakpoint cố định - vì số mục trong thanh có thể thêm/bớt
   nên ngưỡng "vừa 1 hàng hay không" cũng đổi theo, không cố định theo cỡ màn hình. JS cũng tự tính
   animation-duration theo bề rộng nội dung để tốc độ trượt (px/giây) luôn như nhau trên mọi màn hình,
   tránh cảnh nội dung dài bị trượt nhanh giật cục còn nội dung ngắn thì trượt ì ạch. */
.trust-row {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 0 0 clamp(20px, 4vw, 40px);
  animation: fadeUp .6s ease .1s both;
}
/* Kích thước co giãn mượt theo bề rộng màn hình (clamp) - màn hình càng rộng, hàng badge càng to,
   không cần thêm breakpoint riêng vì ở màn hình hẹp phần vw tự nhiên rơi về mức tối thiểu. */
.trust-track { display: flex; align-items: center; gap: clamp(28px, 2.6vw, 48px); }
.trust-item {
  display: flex; align-items: center; gap: clamp(8px, 0.7vw, 11px); white-space: nowrap; flex-shrink: 0;
  font-size: clamp(13px, 1.25vw, 17px); color: var(--text-muted); font-weight: 500;
}
.trust-item i { color: var(--accent); font-size: clamp(13px, 1.25vw, 17px); }
.trust-item.dup { display: none; }

.trust-row.is-scrolling {
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.trust-row.is-scrolling .trust-item.dup { display: flex; }
/* animation-duration set bằng JS theo bề rộng nội dung thực tế (xem updateTrustMarquee) */
.trust-row.is-scrolling .trust-track { animation: trustMarquee linear infinite; }
@keyframes trustMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- thẻ ví minh hoạ (trang Nạp tiền) ---------------- */
.wallet-illustration {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.08), rgba(var(--magenta-rgb),0.05));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 22px;
  animation: fadeUp .5s ease both;
}
@media (max-width: 560px) { .wallet-illustration { flex-direction: column; text-align: center; } }
.wi-icon-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wi-wallet-icon {
  font-size: 40px; color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.5));
  animation: wiPulse 2.4s ease-in-out infinite;
}
.wi-coin { position: absolute; color: var(--accent-2); font-size: 15px; animation: wiFloat 2.6s ease-in-out infinite; }
.wi-coin-1 { top: -2px; right: 2px; animation-delay: 0s; }
.wi-coin-2 { bottom: 0; left: -8px; font-size: 12px; animation-delay: 1.1s; }
.wi-spark { position: absolute; top: -6px; left: 10px; color: var(--magenta); font-size: 12px; animation: wiTwinkle 1.8s ease-in-out infinite; }
@keyframes wiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes wiFloat { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes wiTwinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.wi-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.wi-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 460px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Lịch sử đơn hàng: mỗi đơn là một "tờ hoá đơn"
   ========================================================= */
.invoice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  /* Lúc bay vào, thẻ nằm lệch sang phải 46px -> sẽ làm cả trang bị kéo ngang trong ~0.5s.
     Dùng "clip" (không phải "hidden") để chặn tràn ngang mà vẫn cho thẻ nhấc lên theo chiều dọc khi rê chuột. */
  overflow-x: clip;
}
@media (max-width: 1024px) { .invoice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .invoice-grid { grid-template-columns: 1fr; } }

.invoice-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--card-bg));
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 18px 18px 14px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease;
  /* Bay vào từ bên phải: đơn mới nhất vào trước, các đơn cũ hơn lần lượt trôi vào sau.
     Dùng "backwards" (không phải "both") vì "both" sẽ khoá vĩnh viễn thuộc tính transform
     khiến hiệu ứng nhấc thẻ lúc rê chuột (:hover) không chạy được. */
  animation: invoiceIn .5s cubic-bezier(.2,.8,.2,1) backwards;
}
.invoice-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--magenta));
  opacity: 0; transition: opacity .2s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.invoice-card:hover { transform: translateY(-5px); background: var(--card-hover); }
.invoice-card:hover::before { opacity: 1; }
.invoice-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.invoice-card:active { transform: translateY(-2px) scale(.99); }

@keyframes invoiceIn {
  from { opacity: 0; transform: translateX(46px) scale(.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Khi được dẫn thẳng tới một tờ hoá đơn cụ thể (vd. từ trang Biến động số dư), tắt hiệu ứng
   bay vào để hiệu ứng nhấp/phát sáng bên dưới không bị rối mắt vì chạy chồng lên nhau. */
.invoice-card.no-fly-in { animation: none; }

/* Nhấp nhẹ lên xuống 2 nhịp kèm quầng sáng phía sau, sáng nhất lúc thẻ nhấc lên cao nhất -
   như có nguồn sáng bên dưới thẻ. Dùng chung cho tờ hoá đơn (trang Lịch sử đơn hàng) và
   dòng lịch sử nạp tiền (trang Nạp tiền) khi được dẫn tới từ trang Biến động số dư.
   Selector ".invoice-card.no-fly-in.bounce-glow-highlight" bắt buộc phải có vì ".invoice-card.no-fly-in"
   ở trên có độ đặc hiệu cao hơn (2 class) nên sẽ thắng và triệt tiêu animation này nếu chỉ viết ".bounce-glow-highlight". */
.bounce-glow-highlight,
.invoice-card.no-fly-in.bounce-glow-highlight {
  animation: bounceGlowHighlight 1.8s cubic-bezier(.34,.6,.3,1);
  position: relative; z-index: 3;
}
@keyframes bounceGlowHighlight {
  0%   { transform: translateY(0);    box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
  15%  { transform: translateY(-10px); box-shadow: 0 22px 40px -12px rgba(var(--accent-rgb),0.55), 0 0 55px 14px rgba(var(--accent-rgb),0.35); }
  35%  { transform: translateY(0);    box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb),0.22), 0 0 20px 4px rgba(var(--accent-rgb),0.12); }
  50%  { transform: translateY(-6px); box-shadow: 0 16px 32px -10px rgba(var(--accent-rgb),0.45), 0 0 42px 10px rgba(var(--accent-rgb),0.28); }
  70%  { transform: translateY(0);    box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb),0.18), 0 0 16px 3px rgba(var(--accent-rgb),0.1); }
  100% { transform: translateY(0);    box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
}

.invoice-newest-tag {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  color: var(--on-accent);
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 4px 12px; border-bottom-left-radius: 10px;
}

.invoice-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.invoice-id { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.invoice-game {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 13px; margin-bottom: 13px;
  border-bottom: 1px dashed var(--border-strong);
}
.invoice-game-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.25), rgba(var(--magenta-rgb),0.25));
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 15px;
}
.invoice-game-text { min-width: 0; }
.invoice-game-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-game-pkg { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.invoice-game-name-link, .invoice-game-name-link { color: var(--text); text-decoration: none; display: inline-block; max-width: 100%; }
a.invoice-game-name-link:hover { text-decoration: underline; }
a.invoice-game-pkg-link { text-decoration: none; display: block; }
a.invoice-game-pkg-link:hover { text-decoration: underline; }

.invoice-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 7px; }
.invoice-row b { color: var(--text); font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; }
.invoice-row.total b { color: var(--accent-2); font-size: 15px; }

.invoice-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 13px; padding-top: 11px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
}
.invoice-date { color: var(--text-faint); font-family: var(--font-mono); }
.invoice-more { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.invoice-more i { transition: transform .2s ease; }
.invoice-card:hover .invoice-more i { transform: translateX(3px); }

/* ---------------- phân trang ---------------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 26px; }
.page-btn {
  min-width: 36px; height: 36px; padding: 0 11px;
  border-radius: 9px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--accent); }
.page-btn:active:not(:disabled) { transform: scale(.94); }
.page-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  border-color: transparent; color: var(--on-accent); font-weight: 800;
}
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-btn.page-dots { border-color: transparent; background: none; cursor: default; min-width: 24px; padding: 0 2px; }

/* ---------------- tờ hoá đơn chi tiết (giữa màn hình) ---------------- */
/* Khung chứa tờ hoá đơn + khung QR "Thanh toán ngay": máy tính/tablet xếp cạnh nhau (flex row mặc
   định), điện thoại xếp chồng dọc (đổi flex-direction ở media query bên dưới, cùng breakpoint
   700px dùng nhất quán cho toàn trang). */
.invoice-modal-flex { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; max-width: 860px; margin: auto; }
.invoice-qr-panel { display: none; flex: 1 1 360px; max-width: 400px; align-self: center; }
.invoice-qr-panel.show { display: block; animation: fadeUp .25s ease; }
@media (max-width: 700px) {
  .invoice-modal-flex { flex-direction: column; align-items: center; }
  .invoice-qr-panel { max-width: 430px; width: 100%; }
}

.invoice-detail-card {
  position: relative;
  width: 100%; max-width: 430px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--card-bg));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 28px 26px 24px;
  animation: modalPop .26s cubic-bezier(.2,.9,.3,1.2);
}
.invoice-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 26px; }
.invoice-detail-code { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent); }

.invoice-detail-game {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px dashed var(--border-strong);
}

.invoice-detail-rows { display: flex; flex-direction: column; gap: 11px; }
.invoice-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; color: var(--text-muted); }
.invoice-detail-row b { color: var(--text); font-family: var(--font-mono); font-weight: 600; text-align: right; word-break: break-word; }

.invoice-detail-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
  font-size: 13.5px; color: var(--text-muted);
}
.invoice-detail-total b { color: var(--accent-2); font-family: var(--font-mono); font-size: 20px; font-weight: 800; }

@media (max-width: 560px) {
  .invoice-detail-card { padding: 24px 18px 20px; }
  .invoice-detail-row { font-size: 12.5px; }
  .invoice-detail-total b { font-size: 18px; }
  .order-progress-step { width: 58px; }
  .order-progress-dot { width: 26px; height: 26px; font-size: 11px; }
  .order-progress-label { font-size: 9.5px; }
}

/* ---------------- game grid ---------------- */
.section-heading { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.section-heading .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
/* Đứng ngay sau .line (flex:1 đã chiếm hết khoảng trống còn lại) nên tự nằm sát mép phải, cùng hàng
   với tên mục - dùng cho nút "Xem thêm" của từng mục trang chủ. */
.section-more-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: color .15s;
}
.section-more-link i { font-size: 11px; transition: transform .15s; }
.section-more-link:hover { color: var(--accent); }
.section-more-link:hover i { transform: translateX(2px); }

.home-section { margin-bottom: 42px; }

/* auto-fill + minmax thay vì cố định số cột theo breakpoint: trình duyệt tự tính số ô vừa khít bề rộng
   hiện có, miễn mỗi ô tối thiểu 168px - cột co giãn (1fr) lấp hết phần dư. Nhờ vậy tablet không bị ép
   cứng về 1 số cột cố định; tuỳ bề rộng thiết bị mà có thể ra 4, 5 hay 6 cột. */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
/* Điện thoại vẫn giữ cố định 3 cột + gap hẹp hơn như cũ (ô nhỏ lại có chủ đích cho vừa màn hình nhỏ) -
   không nằm trong yêu cầu điều chỉnh lần này, chỉ áp dụng auto-fill cho từ tablet trở lên. */
@media (max-width: 700px) { .game-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* Dải "xem trước" riêng của từng mục trang chủ (khác lưới đầy đủ ở trang "Xem thêm"): màn hình chứa
   được bao nhiêu cột thì xếp bấy nhiêu (auto-fill), luôn hiện ĐÚNG 2 hàng đầy - phần dư khách xem tiếp
   ở trang "Xem thêm" của từng mục.
   Số cột KHÔNG cố định nên không thể ẩn phần dư bằng :nth-child như trước (số thứ tự cần ẩn đổi theo
   bề rộng màn hình) - việc này do trimSectionsToTwoRows() trong home.js đo và xử lý. Thẻ bị ẩn vẫn nằm
   trong DOM để đổi cỡ cửa sổ không phải gọi lại API.
   Chỉ áp từ tablet/desktop trở lên (>700px) - nếu để vô điều kiện thì rule này (đứng sau trong file)
   sẽ đè mất rule 3 cột của .game-grid ở khối @media (max-width:700px) phía trên do cùng độ ưu tiên CSS.
   Dưới 700px vẫn dùng đúng 3 cột kế thừa từ .game-grid như bình thường.
   Cột dùng minmax(130px, 1fr): auto-fill xếp được bao nhiêu cột rộng tối thiểu 130px thì xếp, rồi 1fr
   chia đều phần dư VÀO CÁC THẺ. Hai lần thử trước đều dở hơn:
   - Cột cỡ CỨNG 160px + justify-content:space-between: phần dư dồn hết vào các KHE, ở những bề rộng mà
     phần dư gần bằng 1 cột thì khe phình từ 18px lên gần 50px, thẻ trông rời rạc lỏng lẻo.
   - minmax(160px, 1fr): khe đứng yên 18px nhưng thẻ co giãn tận 160-199px, vì mức tối thiểu cao nên số
     cột ít, phần dư chia cho ít thẻ nên mỗi thẻ phình nhiều.
   Hạ mức tối thiểu xuống 130px làm số cột nhiều hơn (desktop 7 cột), phần dư chia cho nhiều thẻ hơn nên
   biên độ co giãn của thẻ hẹp lại còn khoảng 143-166px, trong khi khe vẫn luôn đúng 18px. */
@media (min-width: 701px) {
  .home-section-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---------------- mục "Lợi ích khi nạp game tại PinkGaming" (cuối trang chủ) ---------------- */
/* MỘT hình thái duy nhất cho mọi cỡ màn hình, KHÔNG nút bấm: dải 2 hàng vuốt ngang, thẻ là hình chữ
   nhật cỡ cố định ~300px (không giãn ra lấp đầy hàng như lưới thường, để thẻ luôn gọn và đều nhau ở
   mọi thiết bị). Màn chứa được bao nhiêu cột thì hiện bấy nhiêu, phần dư khách tự vuốt sang.
   grid-auto-flow: column đổi chiều xếp thẻ từ "hết hàng mới xuống dòng" thành "hết cột mới sang phải":
   cột 1 chứa thẻ 1-2, cột 2 chứa thẻ 3-4... nên dù admin thêm bao nhiêu lợi ích, mục này luôn cao đúng
   2 hàng. Với 6 lợi ích mặc định = 3 cột: màn rộng thấy hết, tablet trở xuống bắt đầu phải vuốt. */
.benefits-sub { margin: -10px 0 18px; max-width: 620px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* Vài icon gaming (tay cầm, vương miện, sao) mờ nhạt trôi nhẹ phía sau mục Lợi ích - chỉ để tạo
   không khí, không mang nghĩa gì nên đánh dấu aria-hidden. Opacity rất thấp (0.05-0.07) để không
   lấn chữ; nội dung thật (heading/sub/grid) phải tự nâng z-index vì phần tử position:static vốn
   được vẽ ĐÈ LÊN phần tử position:absolute có z-index:auto theo thứ tự stacking mặc định của CSS. */
.benefits-section { position: relative; }
.benefits-section > .section-heading,
.benefits-section > .benefits-sub,
.benefits-section > .benefit-grid { position: relative; z-index: 1; }

.benefit-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.benefit-decor i {
  position: absolute; color: var(--accent); opacity: 0.05;
  animation: decorFloat 7s ease-in-out infinite;
}
.benefit-decor i:nth-child(1) { top: -6%; left: 1%; font-size: 92px; --r: -16deg; }
.benefit-decor i:nth-child(2) {
  top: 40%; right: 2%; font-size: 74px; color: var(--accent-2); opacity: 0.06; --r: 14deg;
  animation-delay: .9s; animation-duration: 8s;
}
.benefit-decor i:nth-child(3) {
  bottom: -8%; left: 26%; font-size: 58px; color: var(--magenta); opacity: 0.05; --r: -10deg;
  animation-delay: 1.6s; animation-duration: 6.5s;
}
@keyframes decorFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
@media (max-width: 560px) {
  .benefit-decor i:nth-child(1) { font-size: 64px; }
  .benefit-decor i:nth-child(2) { font-size: 52px; }
  .benefit-decor i:nth-child(3) { font-size: 42px; }
}

.benefit-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  /* minmax(<đáy>, 1fr) cho ra ĐÚNG 2 hành vi mong muốn chỉ bằng 1 khai báo:
     - Khi số cột nhân với đáy vẫn NHỎ HƠN bề rộng khung (VD máy tính 1160px, 6 lợi ích = 3 cột):
       phần 1fr chia đều chỗ trống cho các cột -> thẻ giãn ra 377px, lấp kín hàng, không còn khoảng
       trống thừa bên phải và cũng không phải cuộn.
     - Khi không đủ chỗ (tablet/điện thoại, hoặc admin thêm nhiều lợi ích): 1fr chia ra nhỏ hơn đáy nên
       bị đáy chặn lại, thẻ giữ đúng cỡ đáy và phần dư tràn ra ngoài cho khách vuốt.
     Đáy = min(300px, calc(100% - 44px)): trần 300px giữ thẻ gọn; mức calc để điện thoại không bị tràn -
     khung nội dung luôn hẹp hơn màn hình 40px, trừ thêm 44px nữa thì luôn còn ~30px cho thẻ kế bên hé
     ra làm tín hiệu vuốt (màn 375px -> thẻ 291px). */
  grid-auto-columns: minmax(min(300px, calc(100% - 44px)), 1fr);
  column-gap: 14px;
  row-gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* overflow-x:auto kéo theo overflow-y cũng thành auto -> hiệu ứng nhấc thẻ khi hover và bóng đổ bị
     cắt cụt. Chừa padding dọc để chúng có chỗ hiển thị trọn vẹn. */
  padding: 6px 0 10px;
}
.benefit-card { scroll-snap-align: start; }

/* Thiết bị cảm ứng vuốt tay là đủ nên ẩn thanh cuộn cho sạch. Nhưng máy tính dùng chuột thì KHÔNG cuộn
   ngang được, mà mục này lại cố ý không có nút mũi tên - nên phải để lộ 1 thanh cuộn mảnh làm chỗ kéo,
   nếu không người dùng chuột sẽ không có cách nào xem hết. */
.benefit-grid { scrollbar-width: none; -ms-overflow-style: none; }
.benefit-grid::-webkit-scrollbar { display: none; }
@media (hover: hover) {
  .benefit-grid { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .benefit-grid::-webkit-scrollbar { display: block; height: 8px; }
  .benefit-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
  .benefit-grid::-webkit-scrollbar-track { background: transparent; }
}

.benefit-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .2s ease;
  animation: fadeUp .45s ease backwards;
}

/* Vệt sáng gradient toả từ góc trên-trái, chỉ hiện khi rê chuột - cùng ngôn ngữ với viền gradient của
   .game-card nhưng nhẹ hơn vì thẻ này chỉ để đọc, không bấm được. */
.benefit-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px 170px at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
/* ::before là phần tử absolute nên vốn được vẽ ĐÈ LÊN chữ (chữ không được định vị) - phải kéo nội
   dung thật lên trên bằng z-index, nếu không chữ sẽ bị phủ 1 lớp hồng mờ khi hover. */
.benefit-card > * { position: relative; z-index: 1; }
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 30px -18px rgba(var(--accent-rgb), 0.55);
}
.benefit-card:hover::before { opacity: 1; }
.benefit-card:hover .benefit-icon { transform: scale(1.08) rotate(-5deg); }

/* Chip icon dùng nền gradient đặc + chữ --on-accent (giống nút chính, tab active) thay vì icon màu
   accent trên nền mờ: accent là hồng pastel rất sáng nên nếu để làm màu chữ thì ở theme sáng gần như
   chìm mất - nền đặc đảm bảo tương phản ở cả 2 theme. */
.benefit-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), 0.9);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.benefit-body { min-width: 0; } /* cho phép chữ dài xuống dòng thay vì kéo giãn ô lưới */
.benefit-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.benefit-desc { font-size: 13px; line-height: 1.65; color: var(--text-muted); }

/* Điện thoại chỉ thu gọn phần đệm/cỡ chữ bên trong thẻ - bố cục dải 2 hàng vuốt ngang đã dùng chung
   cho mọi cỡ màn hình ở khối .benefit-grid phía trên, không cần khai báo lại. */
@media (max-width: 560px) {
  .benefits-sub { font-size: 12.5px; margin-bottom: 14px; }
  .benefit-card { padding: 14px; gap: 12px; }
  .benefit-icon { width: 38px; height: 38px; font-size: 15px; border-radius: 11px; }
  .benefit-title { font-size: 14px; margin-bottom: 3px; }
  .benefit-desc { font-size: 12.5px; line-height: 1.55; }
}

.how-it-works-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 4px; }
.how-step {
  position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 14px; text-align: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
  animation: fadeUp .45s ease backwards;
}
.how-step:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 14px 26px -16px rgba(var(--accent-rgb),0.5); }
.how-step-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05) 72%);
}
.how-step-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
/* Mũi tên nối 2 thẻ liền kề cùng hàng, gợi ý "dòng chảy" quy trình thay cho số thứ tự - chỉ có ý nghĩa
   khi 2 thẻ đứng cạnh nhau nên ẩn ở layout 1 cột (điện thoại) và ẩn riêng lẻ ở chỗ xuống hàng của layout
   2 cột (tablet). */
.how-step:not(:last-child)::before {
  content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 50%; right: -13px; transform: translateY(-50%);
  font-size: 13px; color: var(--text-faint); z-index: 1;
}
/* Dưới 860px chuyển thành lưới 2x2 kiểu "rắn bò" (snake): DOM vẫn giữ đúng thứ tự 1-2-3-4 (đọc màn
   hình/tab vẫn đúng mạch), chỉ đổi VỊ TRÍ HIỂN THỊ của thẻ 3-4 bằng grid-column/grid-row -
     [1 Chọn game] -> [2 Nhập UID]
                              |
     [4 Nhận ngay] <- [3 Thanh toán]
   nên mũi tên luôn nối đúng 2 thẻ liền kề thật sự trên màn hình (phải, xuống, trái) - không còn mũi
   tên chỉ chung chung vào giữa lưới gây hiểu lầm như bản trước. */
@media (max-width: 860px) {
  .how-it-works-grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .how-step:nth-child(1) { grid-column: 1; grid-row: 1; }
  .how-step:nth-child(2) { grid-column: 2; grid-row: 1; }
  .how-step:nth-child(3) { grid-column: 2; grid-row: 2; }
  .how-step:nth-child(4) { grid-column: 1; grid-row: 2; }
  .how-step:nth-child(2)::before { display: none; }
  .how-step:nth-child(3)::before { display: none; }
  .how-step:nth-child(2)::after {
    content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    font-size: 13px; color: var(--text-faint); z-index: 1;
  }
  .how-step:nth-child(3)::after {
    content: '\f104'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 50%; left: -13px; transform: translateY(-50%);
    font-size: 13px; color: var(--text-faint); z-index: 1;
  }
}
/* Vẫn giữ lưới 2x2 ở điện thoại (không thu về 1 cột như trước) - thu nhỏ thẻ thành hình vuông đều
   cạnh cho gọn, giảm icon/chữ tương ứng để vừa trong ô vuông hẹp. Cột giãn rộng hơn bản trước (10px ->
   16px) để mũi tên trái/phải nằm giữa khe hở không bị đè lên viền thẻ 2 bên. */
@media (max-width: 560px) {
  .how-it-works-grid { column-gap: 16px; }
  .how-step { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; }
  .how-step-icon { width: 44px; height: 44px; font-size: 17px; margin-bottom: 8px; }
  .how-step-title { font-size: 12.5px; }
}

/* ---- Mục "Những câu hỏi thường gặp" (cuối trang chủ, dưới "Cách thức hoạt động") ----
   Accordion đơn giản: mỗi câu hỏi mở/đóng độc lập (không đóng các câu khác đang mở), chiều cao
   phần trả lời chuyển động bằng max-height (đo bằng scrollHeight lúc mở, xem toggleFaqItem trong
   home.js) vì CSS không animate được auto -> giá trị cụ thể. */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 4px auto 0; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item.open { border-color: var(--border-strong); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.faq-question:hover { color: var(--accent); }
.faq-chevron { flex-shrink: 0; font-size: 13px; color: var(--text-muted); transition: transform 0.25s, color 0.2s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-answer-inner {
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 560px) {
  .faq-question { padding: 14px 16px; font-size: 13.5px; gap: 10px; }
  .faq-answer-inner { padding: 0 16px 15px; font-size: 13px; }
}

.login-btn-icon-mobile { display: none; }
.login-btn { padding: 9px 16px; font-size: 14px; }

/* ---------------- thanh điều hướng cố định dưới cùng (điện thoại) ---------------- */
/* Dùng đặc điểm THIẾT BỊ CẢM ỨNG (hover:none + pointer:coarse) thay vì chỉ đoán theo bề rộng màn
   hình - vì tablet đủ kích cỡ (7-13 inch) cần nhận đúng giao diện này, trong khi laptop/desktop dù
   thu hẹp cửa sổ trình duyệt hẹp tới đâu (có chuột thật) vẫn nên giữ giao diện desktop.
   Giữ thêm "(max-width: 700px)" song song để cửa sổ trình duyệt hẹp trên máy tính bàn (chuột thật,
   không rơi vào điều kiện cảm ứng) vẫn co gọn header khi cần. */
.mobile-bottom-nav { display: none; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  #app-header { padding: 12px 4%; }
  nav.main-nav { display: none; }
  body { padding-bottom: 66px; }
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
  }
  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-align: center;
    background: none; border: none; cursor: pointer; font-family: var(--font-body); padding: 4px 2px;
    transition: color .15s;
  }
  /* Cỡ chữ/icon của thanh menu dưới cùng co giãn nhẹ theo bề rộng thiết bị (clamp) - ở điện thoại nhỏ
     giữ nguyên cỡ cũ, ở tablet (màn hình cảm ứng rộng hơn) tự to hơn cho dễ nhìn/dễ chạm, không bị
     tí hin so với màn hình lớn. */
  .mobile-nav-item { font-size: clamp(12px, 3.2vw, 15px); }
  .mobile-nav-item i { font-size: clamp(20px, 5.2vw, 27px); }
  .mobile-nav-item.active { color: var(--accent); }

  /* Nút đăng nhập thu gọn thành biểu tượng tròn, cùng cỡ với nút tìm kiếm/sáng-tối để vừa một hàng với logo */
  .login-btn {
    padding: 0; border-radius: 50%; flex-shrink: 0;
  }
  .login-btn-text, .login-btn-icon-desktop { display: none; }
  .login-btn-icon-mobile { display: inline; }

  /* Ẩn ô số dư trên thanh trên cùng cho gọn (số dư vẫn xem được ở trang Nạp tiền / Tài khoản).
     Dùng display:none chứ không xoá khỏi HTML để refreshBalance() vẫn chạy bình thường. */
  .wallet-pill { display: none; }

  /* Thu nhỏ nhẹ logo + các nút để logo và toàn bộ nút luôn nằm gọn trên MỘT hàng.
     Kích thước nút dùng clamp() để co giãn theo thiết bị - cỡ tối thiểu giữ như điện thoại nhỏ hiện tại,
     cỡ tối đa lớn hơn hẳn cho tablet, tránh nút bị nhỏ xíu khó nhìn/khó bấm trên màn hình cảm ứng to. */
  #app-header { flex-wrap: nowrap; gap: 8px; }
  .logo { font-size: 18px; gap: 7px; min-width: 0; flex-shrink: 1; }
  .logo-img { height: 38px; max-width: 46vw; }
  .header-actions { gap: 7px; flex-wrap: nowrap; flex-shrink: 0; }
  .theme-toggle-btn { width: clamp(40px, 11.5vw, 58px); height: clamp(40px, 11.5vw, 58px); font-size: clamp(15px, 4.4vw, 20px); }
  .login-btn { width: clamp(40px, 11.5vw, 58px); height: clamp(40px, 11.5vw, 58px); }
  .avatar { width: clamp(38px, 11vw, 56px); height: clamp(38px, 11vw, 56px); }
  .user-chip { gap: 6px; }
}

.game-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .2s ease;
  animation: fadeUp .45s ease backwards;
  box-shadow: 0 2px 12px -6px rgba(0,0,0,0.3);
}
.game-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--magenta));
  opacity: 0; transition: opacity .25s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
.game-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 18px 32px -14px rgba(var(--accent-rgb),0.45); }
.game-card:hover::before { opacity: 1; }
.game-card:active { transform: translateY(-3px) scale(1); }

/* Card "Vật phẩm hot" (chứa badge .status-hot trong .game-cover) hiện viền gradient THƯỜNG TRỰC thay vì
   chỉ lúc hover, cùng tông cam-vàng với chính badge HOT (không dùng tông hồng/xanh mặc định của
   ::before) để nổi bật đúng nghĩa "nóng". Bám theo :has(.status-hot) thay vì thêm class riêng ở JS -
   card nào có badge HOT thì tự động lên viền, không cần đồng bộ 2 nơi. */
.game-card:has(.status-hot)::before {
  opacity: 1;
  background: linear-gradient(135deg, #ff5f3d, var(--warning));
}
.game-card:has(.status-hot):hover { box-shadow: 0 18px 32px -14px rgba(255,95,61,0.45); }

.game-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); border-radius: 16px; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.game-card:hover .game-cover img { transform: scale(1.1); }

.game-sale-ribbon {
  position: absolute; top: 10px; left: -30px; width: 110px; text-align: center;
  background: linear-gradient(135deg, var(--danger), #ff8a5c); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px; font-family: var(--font-mono);
  padding: 3px 0; transform: rotate(-35deg); box-shadow: 0 3px 10px -2px rgba(255,84,112,0.5);
  z-index: 3;
}

/* Huy hiệu vàng/bạc/đồng cho top 3 mục "Bán chạy" - ruy băng chéo góc trên-phải ảnh bìa, đối xứng với
   ruy băng SALE (góc trên-trái, .game-sale-ribbon) và không đè lên badge giao hàng (góc dưới-trái).
   Xem rankBadgeHtml() trong sections.js. */
.game-rank-badge {
  position: absolute; top: 10px; right: -37px; width: 138px; text-align: center;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; font-family: var(--font-mono);
  padding: 5px 0; transform: rotate(35deg); box-shadow: 0 3px 10px -2px rgba(0,0,0,0.35);
  z-index: 3; overflow: hidden;
}
.game-rank-badge.rank-1 { background: linear-gradient(135deg, #ffe08a, #d9a520); }
.game-rank-badge.rank-2 { background: linear-gradient(135deg, #e7e7e7, #a3a3a3); }
.game-rank-badge.rank-3 { background: linear-gradient(135deg, #e3a873, #a8672e); }
/* Dải sáng quét chéo qua ruy băng, lặp vô hạn - overflow:hidden ở .game-rank-badge chặn dải sáng
   tràn ra ngoài khung ruy băng. prefers-reduced-motion đã bị chặn tốc độ animation ở rule chung
   đầu file (:97) nên không cần lặp lại điều kiện ở đây. */
.game-rank-badge::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: rank-badge-shine 2.8s ease-in-out infinite;
}
@keyframes rank-badge-shine {
  0%, 20% { left: -130%; }
  70%, 100% { left: 130%; }
}
@media (max-width: 700px) { .game-rank-badge { width: 96px; top: 6px; right: -28px; font-size: 10.5px; padding: 3px 0; } }
.game-grid-compact .game-rank-badge { width: 74px; top: 5px; right: -22px; font-size: 9px; padding: 2px 0; }
.game-info { min-width: 0; padding: 10px 10px 12px; text-align: center; }
.game-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Dòng giá trong thẻ "Vật phẩm hot" (item.type === 'package', xem sections.js) - cùng tông màu với
   .pkg-price/.pkg-price-sale/.pkg-price-original ở trang chọn gói để nhất quán toàn site. */
.game-price { margin-top: 3px; font-family: var(--font-mono); font-size: 13px; }
.game-price-original { color: var(--text-faint); text-decoration: line-through; margin-right: 5px; }
.game-price-current { color: var(--accent-2); font-weight: 700; }
.game-price-original + .game-price-current { color: var(--danger); }
/* Badge trạng thái giao hàng - dùng ở 2 nơi khác nhau: trang chủ (đè lên ảnh bìa game trong .game-cover,
   nên cần position:absolute + nền đậm cho dễ đọc trên ảnh) và trang chọn gói (nằm cạnh tên game trên nền
   thẻ bình thường, không cần absolute). Rule gốc dưới đây phục vụ trang chọn gói; .game-cover .game-status
   ghi đè riêng cho ngữ cảnh đè-lên-ảnh ở trang chủ. */
.game-status {
  font-size: 11.5px; font-weight: 700; margin-top: 5px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 20px;
}
/* "Giao ngay" dùng xanh dương pastel (--magenta) cho khớp tông xanh của giao diện,
   thay vì xanh lá vốn chỉ dành cho trạng thái "thành công". */
.status-giao-ngay { color: var(--magenta); background: rgba(var(--magenta-rgb),0.12); }
.status-dat-hang { color: var(--accent); background: rgba(var(--accent-rgb),0.12); }
/* Thời gian giao hàng ước tính (VD: "5-10 phút") - dùng tông xanh lá để tách biệt với nhãn kiểu
   giao hàng (magenta/accent) đứng ngay cạnh nó trên trang Nạp Game. */
.status-delivery-time { color: var(--success); background: rgba(var(--success-rgb),0.12); }

.game-cover .game-status {
  position: absolute; left: 7px; bottom: 7px; z-index: 2; margin-top: 0;
  font-size: 10.5px; gap: 4px; color: #fff; backdrop-filter: blur(3px);
}
.game-cover .status-giao-ngay { background: rgba(var(--magenta-rgb),0.85); }
.game-cover .status-dat-hang { background: rgba(var(--accent-rgb),0.85); }
/* Badge thay thế cho thẻ "Vật phẩm hot" (status-hot) và "Game sắp ra mắt" (status-upcoming) - cùng vị
   trí/kiểu dáng với status-giao-ngay/status-dat-hang, chỉ khác tông màu. */
.game-cover .status-hot { background: linear-gradient(135deg, rgba(255,95,61,0.9), rgba(var(--accent-2-rgb),0.9)); }
.game-cover .status-upcoming { background: rgba(var(--accent-2-rgb),0.85); }

/* Card thu nhỏ trên điện thoại: giảm bo góc, đệm chữ, cỡ chữ và ruy băng SALE cho vừa cột hẹp (3 cột/hàng) */
@media (max-width: 700px) {
  .game-card, .game-card::before, .game-cover { border-radius: 12px; }
  .game-info { padding: 6px 5px 8px; }
  .game-name { font-size: 11.5px; }
  .game-cover .game-status { font-size: 9px; padding: 2px 6px; left: 5px; bottom: 5px; gap: 3px; }
  .game-cover .game-status i { font-size: 8px; }
  .game-sale-ribbon { width: 78px; top: 6px; left: -22px; font-size: 8.5px; padding: 2px 0; }
}

/* ---------------- trang Nạp Game: banner + ảnh đại diện + nhãn/đánh giá ---------------- */
.game-hero { padding: 0; overflow: hidden; }
.game-hero-banner-wrap { position: relative; width: 100%; overflow: hidden; }
.game-hero-banner { width: 100%; display: block; }
.game-hero-banner.game-hero-banner-fallback {
  aspect-ratio: 3.6 / 1;
  background: linear-gradient(120deg, var(--accent), var(--magenta)); /* dùng khi admin chưa đặt ảnh banner */
}
@media (max-width: 560px) {
  .game-hero-banner.game-hero-banner-fallback { aspect-ratio: 2 / 1; }
  /* img.game-hero-banner (element+class) đặc hiệu hơn .game-hero-banner ở khối desktop bên dưới nên
     phải đặt trong chính media query mobile này - để ngoài sẽ luôn thắng và đè mất height:100%/object-fit
     của khối desktop, khiến ảnh banner luôn hiện theo tỉ lệ gốc thay vì theo khung + vị trí admin đã chọn. */
  img.game-hero-banner { height: auto; }
}
/* Trên giao diện máy tính (>560px): khung banner cố định tỉ lệ 3.2:0.7, ảnh admin tải lên tự động
   crop + căn giữa để lấp đầy khung (giống ảnh bìa Facebook) thay vì hiện theo tỉ lệ gốc của ảnh.
   Mobile vẫn giữ hành vi cũ (hiện nguyên vẹn ảnh, không cắt) vì khung quá dẹt sẽ cắt mất nội dung
   chính của ảnh trên màn hình hẹp. */
@media (min-width: 561px) {
  .game-hero-banner-wrap { aspect-ratio: 3.2 / 0.7; }
  .game-hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
}
.game-hero-body {
  display: flex; gap: 18px; align-items: flex-end;
  padding: 0 22px 20px; margin-top: -64px; position: relative; z-index: 1;
}
.game-hero-avatar {
  width: 128px; height: 128px; border-radius: 22px; object-fit: cover; flex-shrink: 0;
  border: 3px solid var(--card-bg); background: var(--surface-2);
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.55);
}
.game-hero-info { flex: 1; min-width: 0; padding-bottom: 3px; }
.game-hero-name {
  font-family: var(--font-display); font-size: 21px; font-weight: 800; margin-bottom: 9px;
}
/* Màn hình >560px (đã có khung riêng cho mobile ở dưới): phóng to avatar + tên game dần theo bề
   rộng màn hình (clamp) thay vì 1 cỡ cố định, để không quá to trên tablet nhưng vẫn rõ hơn trên
   desktop rộng. */
@media (min-width: 561px) {
  .game-hero-avatar { width: clamp(136px, 100px + 4vw, 168px); height: clamp(136px, 100px + 4vw, 168px); border-radius: 24px; }
  .game-hero-name { font-size: clamp(22px, 16px + 0.7vw, 29px); }
  /* .game-hero-info neo đáy trùng đáy avatar (align-items: flex-end ở .game-hero-body) - tăng
     padding-bottom đẩy tên + badge lên gần chân ảnh banner hơn mà không đụng vị trí avatar. */
  .game-hero-info { padding-bottom: 16px; }
}
.game-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.game-hero-badges .game-status { margin-top: 0; }
.game-hero-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px; color: #fff; white-space: nowrap;
}
.game-hero-badge-a { background: linear-gradient(135deg, var(--accent-2), #ffcf6b); color: #3a2a00; }
.game-hero-badge-b { background: linear-gradient(135deg, var(--danger), #ff8a5c); }
.game-hero-badge-c { background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); color: var(--on-accent); }
.game-hero-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--accent-2); }
.game-hero-rating i { color: var(--accent-2); font-size: 11px; }
@media (max-width: 560px) {
  .game-hero-body { flex-direction: column; align-items: flex-start; margin-top: -46px; gap: 10px; padding: 0 16px 16px; }
  .game-hero-avatar { width: 96px; height: 96px; border-radius: 18px; }
}

/* skeleton loading */
.skeleton-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.skeleton-box { border-radius: 9px; background: linear-gradient(100deg, var(--surface-2) 30%, var(--card-hover) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-card .skeleton-box:first-child { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; flex-shrink: 0; }
.skeleton-lines { padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.skeleton-lines .skeleton-box { height: 11px; width: 70%; }
.skeleton-lines .skeleton-box:last-child { width: 40%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; color: var(--text-muted); margin-bottom: 7px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03); color: var(--text); font-size: 14px; outline: none;
  font-family: var(--font-body); transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }

/* Bố cục 2 cột trang Nạp Game: lưới gói nạp bên trái + giỏ hàng dính (sticky) bên phải, mục Mô tả/
   Chính sách bảo hành nằm dưới cùng, giống bố cục tham khảo (ảnh chụp trang nạp game của đối tác).
   Tách thành 2 grid con thay vì 1 grid dùng chung (giả sử qua grid-template-areas 2 hàng) vì đã thử
   và phát hiện: vùng chứa (containing block) của position:sticky trên 1 grid item KHÔNG bị giới hạn
   trong đúng ô/hàng riêng của item đó (dù chỉ gán item vào 1 hàng qua grid-area) - trình duyệt vẫn
   tính theo toàn bộ chiều cao grid cha, khiến giỏ hàng dính (sticky) tới tận cuối trang thay vì thả
   ra ngay sau khi hết danh sách gói. Giải pháp chắc chắn hơn: đặt "main + aside" (giỏ hàng) trong 1
   grid RIÊNG (.product-layout-top) chỉ chứa đúng 2 phần đó, để chiều cao grid cha = đúng phạm vi
   muốn cho phép sticky; "Mô tả"/"Chính sách bảo hành" (.product-layout-bottom) đặt trong 1 grid con
   khác bên dưới (.product-layout-bottom-row) chỉ để giữ cùng độ rộng cột trái với danh sách gói,
   không liên quan gì tới sticky nữa nên không bị ảnh hưởng. */
.product-layout { display: flex; flex-direction: column; gap: 24px; }
.product-layout-top { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.product-layout-bottom-row { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
@media (max-width: 960px) {
  .product-layout-top { grid-template-columns: 1fr; }
  .product-layout-bottom-row { grid-template-columns: 1fr; }
}
/* Cột trái xếp chồng "Lưu ý" (nếu có) phía trên card danh sách gói, cùng chiều rộng với nhau -
   khớp bố cục tham khảo: khối Lưu ý nằm ngang hàng đầu với "Thông tin đơn hàng" bên cột phải. */
.product-layout-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.product-layout-bottom { grid-column: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Thanh chuyển đổi kênh nạp "Nạp UID" / "Nạp Login" - chỉ hiện nếu game có cấu hình gói Login (xem
   product.js: hasLoginPackages). Cố định đúng 2 nút, nổi bật hơn tab phân loại phụ bên dưới vì đây là
   lựa chọn ảnh hưởng tới cả danh sách gói lẫn field điền trong "Thông tin đơn hàng". */
.pkg-mode-toggle { display: flex; gap: 10px; margin-bottom: 16px; }
.pkg-mode-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--border-strong);
  background: var(--card-bg); color: var(--text-muted); font-size: 14px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.pkg-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.pkg-mode-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  border-color: transparent; color: var(--on-accent);
  box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb),0.55);
}

/* Tab lọc phân loại gói nạp (VD: "Đá sáng thế" / "Lõi sử ký"), chỉ hiện khi admin có cấu hình
   phân loại cho game - xem games.package_categories / packages.category. */
.pkg-category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.pkg-category-chip {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border-strong);
  background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 13px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.pkg-category-chip:hover { border-color: var(--accent); color: var(--accent); }
.pkg-category-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  border-color: transparent; color: var(--on-accent);
  box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb),0.55);
}
.pkg-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 16px 0 24px; }
@media (max-width: 1180px) { .pkg-list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) and (min-width: 701px) { .pkg-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .pkg-list { grid-template-columns: repeat(2, 1fr); } }
.pkg-option {
  border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 14px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  background: rgba(255,255,255,0.02);
  /* z-index: 0 (thay vì để auto) để mở ngữ cảnh xếp lớp (stacking context) riêng cho từng thẻ.
     Nếu không, lúc hover ảnh phóng to (transform ở dưới) tự tạo ngữ cảnh xếp lớp riêng cho ảnh và
     đẩy nó lên trên dấu tick/nhãn sale (vốn nằm trước ảnh trong DOM) dù ảnh không có z-index. */
  position: relative;
  z-index: 0;
}
.pkg-option:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb),0.5); }
.pkg-option.selected {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.16), rgba(var(--magenta-rgb),0.08));
  box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 24px -14px rgba(var(--accent-rgb),0.55);
}
.pkg-option.selected::before {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10.5px;
  position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px -2px rgba(var(--accent-rgb),0.6);
  animation: pkgCheckPop .22s cubic-bezier(.3,1,.4,1.3);
  z-index: 2;
}
@keyframes pkgCheckPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pkg-option img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; margin: 0 0 10px; display: block; transition: transform .2s; }
.pkg-option:hover img { transform: scale(1.04); }
.pkg-name { font-size: 13.5px; font-weight: 700; margin-bottom: 7px; line-height: 1.3; }
.pkg-price { font-size: 14.5px; color: var(--accent-2); font-weight: 700; font-family: var(--font-mono); }

.sale-badge {
  position: absolute; top: -8px; right: -6px;
  background: linear-gradient(135deg, var(--danger), #ff8a5c); color: #fff;
  font-size: 10.5px; font-weight: 800; font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 20px;
  box-shadow: 0 4px 12px -2px rgba(255,84,112,0.5);
  transform: rotate(4deg);
  z-index: 2;
}
.pkg-price-original { font-size: 11.5px; color: var(--text-faint); text-decoration: line-through; font-family: var(--font-mono); }
.pkg-price-sale { color: var(--danger); margin-top: 1px; }

/* Nhãn HOT góc trên bên trái - lệch màu với sale-badge (góc phải) để không gây nhầm lẫn khi 1 gói
   vừa sale vừa được gán HOT cùng lúc. */
.hot-badge {
  position: absolute; top: -8px; left: -6px;
  background: linear-gradient(135deg, #ff5f3d, var(--warning)); color: #fff;
  font-size: 10.5px; font-weight: 800; font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 20px;
  box-shadow: 0 4px 12px -2px rgba(255,95,61,0.5);
  transform: rotate(-4deg);
  z-index: 2;
}
.hot-badge i { margin-right: 2px; }

/* Gói nạp hết hàng - vẫn hiện trong danh sách nhưng làm mờ + xám lại, không cho bấm chọn (bỏ hẳn
   onclick trong JS thay vì chỉ chặn bằng CSS, để chắc chắn không lọt lệnh chọn qua bàn phím/touch).
   .stock-badge phủ kín thẻ (thay vì đặt góc như hot-badge/sale-badge) vì nó thay thế hẳn hành động
   chọn gói, cần đủ nổi bật để khách không tưởng nhầm là vẫn bấm mua được. */
.pkg-option.out-of-stock {
  cursor: not-allowed; opacity: 0.55; filter: grayscale(0.6);
}
.pkg-option.out-of-stock:hover { border-color: var(--border-strong); transform: none; box-shadow: none; }
.stock-badge {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(15, 11, 31, 0.5); border-radius: 12px;
  font-size: 12px; font-weight: 800; color: #fff;
}

.qty-stepper { display: flex; align-items: stretch; border: 1.5px solid var(--border-strong); border-radius: 10px; overflow: hidden; user-select: none; }
.qty-stepper button {
  width: 40px; height: 40px; border: none; background: rgba(255,255,255,0.03); color: var(--text);
  font-size: 17px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, color .15s, transform .1s;
}
.qty-stepper button:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.16); color: var(--accent); }
.qty-stepper button:active:not(:disabled) { background: rgba(var(--accent-rgb),0.28); color: var(--accent); transform: scale(0.92); }
.qty-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Ẩn nút tam giác tăng/giảm mặc định của trình duyệt (Chrome/Edge/Safari) - đã có nút +/- riêng nên
   không cần đôi hàng, tránh trùng lặp và lệch giao diện trên desktop. */
.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper input {
  width: 100%; height: 40px; border: none; border-left: 1.5px solid var(--border-strong); border-right: 1.5px solid var(--border-strong);
  background: transparent; color: var(--text); text-align: center; font-size: 15px; font-weight: 700;
  font-family: var(--font-mono); outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
/* Bản gọn của .qty-stepper, dùng khi nút số lượng nằm lọt trong thẻ gói ở giỏ hàng: bề rộng cố định
   (không còn kéo hết chiều ngang như lúc còn là 1 mục riêng) và thấp hơn để không lấn át tên/giá gói. */
.qty-stepper-sm { border-radius: 9px; }
.qty-stepper-sm button { width: 30px; height: 30px; font-size: 15px; }
.qty-stepper-sm input { width: 40px; height: 30px; font-size: 13.5px; padding: 0; }
/* ---------------- giỏ hàng / thông tin đơn hàng (trang Nạp Game) ---------------- */
.order-summary-card { position: sticky; top: 88px; display: flex; flex-direction: column; }
@media (max-width: 960px) { .order-summary-card { position: static; } }

.order-summary-empty { text-align: center; padding: 46px 16px; color: var(--text-muted); animation: fadeUp .3s ease both; }
.order-summary-empty i { font-size: 36px; margin-bottom: 14px; display: block; color: var(--text-faint); opacity: .65; }
.order-summary-empty-sub { font-size: 12.5px; margin-top: 5px; }

.order-summary-filled { display: none; }
.order-summary-filled.show { display: block; animation: fadeUp .28s ease both; }

.order-summary-cart-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; }

/* Lưới 2 hàng: hàng trên là ảnh + tên/giá + nút bỏ chọn, hàng dưới dành riêng cho nút số lượng nằm
   ở góc dưới BÊN TRÁI (thẳng lề với tên gói). Dùng grid thay vì flex để nút số lượng canh đúng lề
   trái của phần chữ mà không cần margin-left ước lượng theo bề rộng ảnh. */
.order-summary-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "img info remove"
    "img qty  qty";
  gap: 10px 12px; align-items: center;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); position: relative;
}
.order-summary-item img { grid-area: img; width: 54px; height: 54px; border-radius: 10px; object-fit: cover; align-self: start; }
.order-summary-item-info { grid-area: info; min-width: 0; }
.order-summary-item-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; word-break: break-word; }
.order-summary-item-price { font-family: var(--font-mono); color: var(--accent-2); font-weight: 700; font-size: 13.5px; }
.order-summary-item-remove {
  grid-area: remove; align-self: start;
  width: 26px; height: 26px; border-radius: 50%; border: none; flex-shrink: 0; cursor: pointer;
  background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 12px;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s;
}
.order-summary-item-remove:hover { background: rgba(255,84,112,0.15); color: var(--danger); transform: rotate(90deg); }
.order-summary-item-qty { grid-area: qty; justify-self: start; }

/* Ô ghi chú của khách. Nhãn là flex 2 đầu để bộ đếm ký tự nằm cùng dòng bên phải, không chiếm thêm
   dòng riêng phía dưới ô nhập. */
.order-note-group label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order-note-optional { color: var(--text-faint); font-weight: 500; }
.order-note-counter { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
.order-note-counter b { font-weight: 700; color: var(--text-muted); }
.order-note-counter.is-full, .order-note-counter.is-full b { color: var(--danger); }
.order-note-group textarea {
  resize: vertical; min-height: 62px; line-height: 1.5;
}
.order-note-group textarea::placeholder { color: var(--text-faint); }

.order-summary-card .payment-method-list { grid-template-columns: 1fr; gap: 10px; }

/* Dropdown chọn server tuỳ chỉnh (thay cho <select> mặc định của trình duyệt để đồng bộ theme tối/sáng
   của site - popup của <select> gốc không style được, luôn hiện theo giao diện hệ điều hành). */
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03); color: var(--text); font-size: 14px; font-family: var(--font-body);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.custom-select-trigger:hover { border-color: var(--accent); }
.custom-select-trigger .placeholder { color: var(--text-faint); }
.custom-select-trigger i { font-size: 12px; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; }
.custom-select.open .custom-select-trigger { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }
.custom-select.open .custom-select-trigger i { transform: rotate(180deg); color: var(--accent); }

.custom-select-options {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.45);
  padding: 6px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  max-height: 240px; overflow-y: auto;
}
.custom-select.open .custom-select-options { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.custom-select-option {
  padding: 10px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text);
  transition: background .12s, color .12s;
}
.custom-select-option:hover { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.custom-select-option.selected {
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.18), rgba(var(--magenta-rgb),0.1));
  color: var(--accent); font-weight: 700;
}

.order-summary-totals { margin: 6px 0 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.order-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-muted); }
.order-summary-row b { color: var(--text); font-family: var(--font-mono); transition: color .15s; }
.order-summary-row.total { padding-top: 9px; border-top: 1px dashed var(--border-strong); }
.order-summary-row.total span { color: var(--text); font-weight: 700; font-size: 14px; }
.order-summary-row.total b { color: var(--accent-2); font-size: 19px; font-weight: 800; }

.order-summary-submit { width: 100%; }

.pkg-sale-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,84,112,0.08); border: 1px solid rgba(255,84,112,0.28);
  border-radius: 12px; padding: 13px 16px; font-size: 13px; color: var(--text-muted);
  margin: -6px 0 18px;
}
.pkg-sale-note i { color: var(--danger); margin-top: 2px; }
.pkg-sale-note b { color: var(--text); }

.pkg-description-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius: 12px; padding: 13px 16px; font-size: 13px; color: var(--text-muted);
  margin: -6px 0 18px; line-height: 1.6;
}
.pkg-description-note i { color: var(--accent); margin-top: 2px; }
.pkg-description-note > div { white-space: pre-wrap; word-break: break-word; }

/* Mô tả chung cho cả game (xem game.description / description_images) - hiện thành 1 card riêng
   trong .product-layout-bottom (dưới giỏ hàng trên mobile, dưới danh sách gói nạp trên desktop),
   không phải theo từng gói nạp - nhờ nằm cùng cột chọn gói nên tự động cùng chiều rộng, không tràn
   ra bằng cả cột giỏ hàng. */
.game-description-body {
  font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.8; white-space: pre-wrap; word-break: break-word;
  margin-top: 14px;
}
/* Tiêu đề đậm admin tự chèn (##...##) để phân mục trong bài mô tả dài - đậm + to hơn hẳn văn bản
   thường, đứng riêng 1 dòng giống các mục "Cách nạp...", "Lưu Ý" trong ảnh minh hoạ admin gửi. */
.game-description-heading {
  font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.4;
  margin-top: 22px;
}
/* Khối đầu tiên trong 1 bài mô tả có thể là đoạn chữ thường, dòng ##tiêu đề## hay ảnh chèn giữa
   bài - cả 3 loại đều cần margin-top: 0 khi đứng đầu, nếu không khoảng cách dưới tiêu đề thẻ ("Mô
   tả"/"Chính sách bảo hành") sẽ lệch tuỳ theo loại khối admin viết đầu tiên. */
.game-description-content > *:first-child { margin-top: 0; }
/* Đoạn nhấn mạnh admin tự bọc (!!...!!), vd cảnh báo quan trọng giữa 1 đoạn văn bản thường. */
.game-description-highlight { color: var(--danger); font-weight: 700; }
/* Đoạn nhấn mạnh trung tính admin tự bọc (**...**), đậm + to hơn văn bản thường nhưng nhẹ hơn tiêu
   đề ##...## (không tách dòng riêng, không đổi màu) - dùng khi chỉ muốn nhấn giọng 1 cụm từ giữa câu. */
.game-description-bold { font-weight: 600; font-size: 15px; }
.game-description-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
  margin-top: 16px;
}
.game-description-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--border); cursor: zoom-in; transition: transform .15s, border-color .15s;
}
.game-description-gallery img:hover { transform: scale(1.03); border-color: var(--accent); }

/* Ảnh chèn ngay trong dòng chảy mô tả (token [img:...] admin chèn tại vị trí con trỏ) - hiện như
   1 khối riêng giữa các đoạn chữ, không còn dồn thành dải ở cuối bài. */
.game-description-inline-img {
  display: block; max-width: 100%; margin: 16px auto; border-radius: 14px;
  border: 1px solid var(--border); cursor: zoom-in; transition: transform .15s, border-color .15s;
}
.game-description-inline-img:hover { transform: scale(1.01); border-color: var(--accent); }

/* Mô tả có thể rất dài (nhiều đoạn + nhiều ảnh) -> mặc định thu gọn còn 420px, mờ dần ở đáy để gợi ý
   còn nội dung phía dưới, bấm "Xem thêm" mới mở hết (xem setupGameDescriptionCollapse trong product.js). */
.game-description-collapse { position: relative; overflow: hidden; transition: max-height .3s ease; }
.game-description-fade { display: none; }
.game-description-collapse.is-collapsed .game-description-fade {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events: none;
}
.game-description-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 14px; padding: 9px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer;
}
.game-description-toggle:hover { border-color: var(--accent); }

/* Lightbox phóng to ảnh minh hoạ - tái dùng .modal-overlay, chỉ đổi khung trong (.image-lightbox-inner) */
.image-lightbox-inner { position: relative; max-width: min(90vw, 720px); margin: auto; }
.image-lightbox-inner img { display: block; max-width: 100%; max-height: 80vh; border-radius: 14px; }
.image-lightbox-inner .modal-close {
  top: -14px; right: -14px; background: var(--card-bg); border: 1px solid var(--border-strong);
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* Khối "Lưu ý" của trang Nạp Game: .game-note-card là lớp nền trắng bo góc (var(--card-bg), giống
   các card khác), cùng chiều rộng với card danh sách gói (xem .product-layout-main phía trên).
   .game-note-box giữ nguyên giao diện cảnh báo màu vàng nhạt ban đầu, đặt lồng bên trong lớp nền đó. */
.game-note-card { padding: 16px; }
.game-note-box {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,176,32,0.08); border: 1px solid rgba(255,176,32,0.28);
  border-radius: 14px; padding: 14px 18px; font-size: 13px; color: var(--text-muted);
}
.game-note-box i {
  color: var(--warning); margin-top: 1px; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,176,32,0.16);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.game-note-box > div { white-space: pre-wrap; word-break: break-word; padding-top: 4px; }
.game-note-box b { color: var(--text); }

/* Thanh tiến trình trạng thái đơn hàng (Đặt hàng -> Đã thanh toán -> Đang xử lý -> Hoàn thành) trong
   modal chi tiết đơn - dùng chung gradient hồng chủ đạo với các trạng thái "đã chọn/nổi bật" khác của
   trang (pkg-option đã chọn, hero badge...). Chỉ hiện cho đơn còn trong luồng bình thường - đơn
   Thất bại/Đã huỷ là điểm dừng ngoài luồng nên không "tiến" tới bước nào, badge trạng thái là đủ. */
.order-progress { display: flex; align-items: flex-start; margin: 4px 0 20px; }
.order-progress-step { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 76px; text-align: center; }
.order-progress-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--surface-2); color: var(--text-faint); border: 2px solid var(--border-strong);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.order-progress-step.done .order-progress-dot {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); border-color: transparent; color: var(--on-accent);
}
.order-progress-step.current .order-progress-dot {
  background: rgba(var(--accent-rgb),0.16); border-color: var(--accent); color: var(--accent);
  animation: orderProgressPulse 1.6s ease-in-out infinite;
}
.order-progress-label { font-size: 11px; color: var(--text-faint); margin-top: 6px; line-height: 1.3; }
.order-progress-step.done .order-progress-label, .order-progress-step.current .order-progress-label { color: var(--text); font-weight: 600; }
.order-progress-line { flex: 1 1 auto; height: 2px; background: var(--border-strong); margin-top: 15px; transition: background .4s ease; }
.order-progress-line.done { background: linear-gradient(90deg, var(--accent), var(--accent-grad-end)); }
@keyframes orderProgressPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.45); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); }
}

/* Khối khiếu nại đơn hàng (trang Lịch sử đơn hàng) - viền trái đổi màu theo trạng thái, cùng quy ước
   với .toast/.badge (vàng=chờ xử lý, xanh lá=đã xử lý, đỏ=từ chối) thay vì dùng chung màu vàng cảnh
   báo của .game-note-box cho mọi trạng thái. */
.complaint-box {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 14px 18px; font-size: 13px; color: var(--text-muted);
  margin-top: 16px; animation: fadeUp .32s cubic-bezier(.2,.9,.3,1) both;
}
.complaint-box-content { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.complaint-box b { color: var(--text); }
.complaint-box-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  color: var(--accent); background: rgba(var(--accent-rgb),0.16);
}
/* Khiếu nại mới gửi/đang chờ xử lý dùng màu hồng chủ đạo của trang (--accent) thay vì vàng cảnh báo
   dùng chung cho "chờ xử lý" ở nơi khác (đơn hàng, nạp tiền) - tránh cảm giác báo lỗi/cảnh báo cho
   1 hành động khách vừa chủ động thực hiện thành công (gửi khiếu nại). */
.complaint-box.status-pending { border-left-color: var(--accent); }
.complaint-box.status-pending .complaint-box-icon { color: var(--accent); background: rgba(var(--accent-rgb),0.16); }
.complaint-box.status-resolved { border-left-color: var(--success); }
.complaint-box.status-resolved .complaint-box-icon { color: var(--success); background: rgba(47,230,163,0.16); }
.complaint-box.status-rejected { border-left-color: var(--danger); }
.complaint-box.status-rejected .complaint-box-icon { color: var(--danger); background: rgba(255,84,112,0.16); }
.complaint-form-box { flex-direction: column; align-items: stretch; padding: 8px 12px 5px; gap: 3px; }
.complaint-textarea {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  height: 76px; min-height: 76px; max-height: 160px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03);
  color: var(--text); font-size: 12.5px; font-family: var(--font-body); padding: 8px 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.complaint-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }
.complaint-form-actions { display: flex; gap: 8px; margin-top: 2px; }

.field-attention { animation: fieldAttention .5s ease 2; border-radius: 12px; }
@keyframes fieldAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 255,84,112), 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(var(--danger-rgb, 255,84,112), 0); }
}

.alert { padding: 13px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; display: none; animation: fadeUp .25s ease both; }
.alert.show { display: block; }
.alert-error { background: rgba(255,84,112,0.1); border: 1px solid rgba(255,84,112,0.3); color: #ffb3c1; }
.alert-success { background: rgba(47,230,163,0.1); border: 1px solid rgba(47,230,163,0.3); color: #93f2cf; }
.alert-success a { color: #2fe6a3; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; }
tr { transition: background .12s; }
tr:hover td { background: rgba(255,255,255,0.025); }

.badge { padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; white-space: nowrap; }
.badge-clickable { font-family: var(--font-body); transition: opacity .15s; }
.badge-clickable:hover { opacity: 0.75; }
.badge-pending, .badge-pending_payment { background: rgba(255,176,32,0.15); color: var(--warning); }
.badge-processing { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
/* Khiếu nại "Chờ xử lý" dùng riêng màu hồng chủ đạo (đồng bộ với .complaint-box.status-pending),
   tách khỏi .badge-pending (vàng) vốn dùng chung cho đơn hàng/nạp tiền "chờ xử lý". */
.badge-complaint-pending { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.badge-completed, .badge-approved { background: rgba(47,230,163,0.15); color: var(--success); }
.badge-failed, .badge-rejected, .badge-cancelled { background: rgba(255,84,112,0.15); color: var(--danger); }
.balance-change-plus { color: var(--success); font-weight: 700; font-family: var(--font-mono); }
.balance-change-minus { color: var(--danger); font-weight: 700; font-family: var(--font-mono); }
.balance-row-in { animation: fadeUp .35s ease both; }

/* KHÔNG dùng align-items:center để canh giữa nội dung theo chiều dọc - đây là lỗi CSS phổ biến của
   flexbox: khi nội dung con cao hơn viewport (vd tờ hoá đơn + khung QR xếp chồng trên điện thoại),
   align-items:center sẽ cắt mất phần đầu nội dung và không cách nào cuộn lên để thấy lại được, dù
   overlay có overflow-y:auto - trình duyệt coi phần bị cắt đó nằm "ngoài" vùng cuộn hợp lệ. Kết quả
   là thao tác vuốt lên của khách bị "lọt" xuống trang phía sau (scroll chaining) thay vì cuộn được
   tờ hoá đơn. Thay bằng margin:auto trên chính khung nội dung (.modal-card/.invoice-modal-flex/
   .image-lightbox-inner) - vẫn canh giữa y hệt khi nội dung vừa màn hình, nhưng khi tràn thì toàn bộ
   nội dung (kể cả phần đầu) đều cuộn tới được bình thường. */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg);
  backdrop-filter: blur(var(--overlay-blur)); -webkit-backdrop-filter: blur(var(--overlay-blur));
  display: none; justify-content: center; z-index: 2000; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modal-overlay.show { display: flex; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 18px; padding: 30px;
  max-width: 420px; width: 100%; position: relative; margin: auto;
  max-height: calc(100vh - 40px); overflow-y: auto;
  animation: modalPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modalPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close { position: absolute; top: 20px; right: 22px; cursor: pointer; color: var(--text-muted); font-size: 18px; transition: color .15s, transform .15s; }
.modal-close:hover { color: var(--danger); transform: rotate(90deg); }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; background: rgba(255,255,255,0.03); padding: 5px; border-radius: 11px; }
.tab-btn { flex: 1; padding: 10px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 700; font-size: 13.5px; transition: background .15s, color .15s; }
.tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); color: #06140f; }

/* Modal chọn game/vật phẩm để thêm vào các mục trang chủ (xem openHomeSectionPicker trong admin.js) -
   tái dùng chung #admin-edit-modal, chỉ thêm CSS cho phần nội dung riêng (ô tìm kiếm + danh sách tick). */
.picker-search-input {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; margin-bottom: 12px;
}
.picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.picker-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); cursor: pointer; transition: background .15s, border-color .15s;
}
.picker-item:hover { background: var(--card-hover); border-color: var(--border-strong); }
.picker-item input { width: 16px; height: 16px; flex-shrink: 0; }
.picker-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.picker-item span { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item-disabled { opacity: 0.5; cursor: not-allowed; }
.picker-item-disabled:hover { background: none; border-color: var(--border); }
.picker-item-badge {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-2);
  padding: 1px 6px; border-radius: 20px; margin-left: 4px;
}

/* Tiêu đề phụ trong tab admin "Danh mục trang chủ" (xem renderHomeSectionCardHtml trong admin.js).
   Danh sách chỉnh sửa CỐ Ý không có nhãn phân biệt "admin tự thêm" vs "thuật toán chọn" - chủ shop
   không muốn phân biệt, nên mọi dòng .game-admin-card trong danh sách trông giống hệt nhau. */
.home-section-subheading {
  font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Dòng tiêu đề của mỗi thẻ "Danh mục trang chủ" trong trang quản trị: bấm cả dòng để thu gọn/mở rộng
   (xem toggleHomeSectionCollapse trong admin.js) nên cần con trỏ tay, và không bôi đen chữ khi bấm
   nhanh nhiều lần. margin-bottom bị bỏ vì khoảng cách đã chuyển xuống phần thân, tránh chừa chỗ
   trống thừa lúc mục đang thu gọn.
   Phải viết kèm .card-title (không chỉ .home-section-head) mới đủ độ ưu tiên: .card-title cũng chỉ có
   1 class nhưng khai báo ở PHÍA DƯỚI trong file này nên sẽ thắng nếu để selector đứng một mình. */
.card-title.home-section-head { cursor: pointer; user-select: none; margin-bottom: 0; }
.home-section-head:hover .btn { border-color: var(--accent); color: var(--accent); }

/* Khối "Xem trước trang chủ" trong tab admin - dùng LẠI đúng .game-card/.game-cover/... như trang chủ
   thật (qua sectionGridHtml() trong sections.js, xem renderHomeSectionCardHtml trong admin.js), chỉ
   thu nhỏ lại bằng modifier này để không chiếm quá nhiều chỗ trong khung quản trị (cùng mức thu nhỏ
   với card trên điện thoại, xem khối "Card thu nhỏ trên điện thoại" phía trên). */
.game-grid-compact { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.game-grid-compact .game-card, .game-grid-compact .game-card::before, .game-grid-compact .game-cover { border-radius: 10px; }
.game-grid-compact .game-info { padding: 5px 4px 7px; }
.game-grid-compact .game-name { font-size: 10px; }
.game-grid-compact .game-price { font-size: 10px; margin-top: 1px; }
.game-grid-compact .game-cover .game-status { font-size: 8px; padding: 2px 5px; left: 4px; bottom: 4px; gap: 2px; }
.game-grid-compact .game-cover .game-status i { font-size: 7px; }
.game-grid-compact .game-sale-ribbon { width: 60px; top: 5px; left: -18px; font-size: 7px; padding: 1px 0; }

.empty-state { text-align: center; padding: 54px 20px; color: var(--text-muted); }
/* Icon FA bọc trong 1 vòng tròn nền mờ dạng gradient thay vì icon trần trơ giữa khoảng trắng - tạo cảm
   giác như 1 hình minh hoạ nhẹ (không cần ảnh thật) cho trạng thái trống (lịch sử đơn hàng, kết quả tìm
   kiếm, chưa đăng nhập...). Dùng chung 1 rule cho mọi .empty-state nên tự áp dụng ở mọi nơi đã có sẵn
   icon, không cần sửa từng chỗ gọi. */
.empty-state i {
  width: 72px; height: 72px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; border-radius: 50%; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.05) 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.16);
  animation: emptyIconPop .35s cubic-bezier(.3,1,.4,1.3) backwards;
}
@keyframes emptyIconPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 560px) {
  .empty-state i { width: 58px; height: 58px; font-size: 22px; margin-bottom: 12px; }
}

/* Khối kết quả QR không hiển thị gì cho tới khi có đơn hàng - chỉ khoác giao diện .card
   khi thực sự có nội dung, tránh một khung trống thừa thãi trên trang. */
.order-qr-result-wrap:not(:empty) {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
  margin-top: 20px; animation: fadeUp .3s ease both;
}
.qr-box { text-align: center; }
.qr-frame {
  position: relative; width: 236px; margin: 16px auto; padding: 14px;
}
.qr-frame::before, .qr-frame::after,
.qr-frame .corner-br, .qr-frame .corner-bl { content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--accent); }
.qr-frame::before { top: 0; left: 0; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 6px 0 0 0; }
.qr-frame::after { top: 0; right: 0; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); border-radius: 0 6px 0 0; }
.qr-frame .corner-bl { bottom: 0; left: 0; border-bottom: 3px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 0 0 0 6px; }
.qr-frame .corner-br { bottom: 0; right: 0; border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); border-radius: 0 0 6px 0; }
.qr-box img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.transfer-info { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: left; font-size: 13.5px; line-height: 2; }
.transfer-info b { color: var(--accent-2); font-family: var(--font-mono); }

.deposit-poll-status {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
}
.deposit-poll-status i.spinner { color: var(--accent); animation: spin 1s linear infinite; }

.deposit-result { text-align: center; padding: 18px 10px 6px; animation: fadeUp .3s ease both; }
.deposit-result i { font-size: 46px; margin-bottom: 12px; display: block; }
.deposit-result-title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.deposit-result-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.deposit-result-success i { color: var(--success); }
.deposit-result-success .deposit-result-title { color: var(--success); }
.deposit-result-rejected i { color: var(--danger); }
.deposit-result-rejected .deposit-result-title { color: var(--danger); }

#app-footer { padding: 34px 6% 22px; border-top: 1px solid var(--border); margin-top: auto; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.footer-about p { color: var(--text-muted); font-size: 13px; line-height: 1.7; max-width: 340px; }
.footer-col-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--text); margin-bottom: 12px; text-transform: uppercase; }
.footer-col a { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; padding: 6px 0; transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { max-width: 1200px; margin: 22px auto 0; padding-top: 18px; border-top: 1px dashed var(--border); text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* ---------------- thanh nổi chat hỗ trợ khách hàng ---------------- */
.floating-widget { position: fixed; right: 22px; bottom: 22px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.floating-toggle {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; position: relative;
  background: linear-gradient(135deg, var(--accent), var(--magenta)); color: var(--on-accent);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(var(--accent-rgb),0.6); transition: transform .15s;
}
.floating-toggle:hover { transform: scale(1.06); }

/* Chấm đỏ số tin chưa đọc - dùng chung ở cả nút hỗ trợ khách (widget) lẫn nút tab "Người dùng" admin. */
.chat-unread-badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 20px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
  font-family: var(--font-mono); line-height: 1;
}

/* Khung chat - thay cho menu link mạng xã hội cũ. Ẩn/hiện bằng .floating-widget.open, giống hệt
   cơ chế cũ của .floating-menu để tái dùng nguyên logic toggleFloatingWidget()/closePopovers(). */
.chat-panel {
  display: none; flex-direction: column;
  width: min(340px, calc(100vw - 24px)); height: min(460px, calc(100vh - 140px));
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 20px 50px -14px rgba(0,0,0,0.5); animation: menuPop .16s ease;
}
.floating-widget.open .chat-panel { display: flex; }
.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--magenta)); color: var(--on-accent);
}
.chat-panel-title { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chat-panel-close { cursor: pointer; font-size: 16px; opacity: .85; transition: opacity .15s, transform .15s; }
.chat-panel-close:hover { opacity: 1; transform: rotate(90deg); }
.chat-panel-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-panel-empty { margin: auto; text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 20px; }
.chat-panel-empty i { font-size: 26px; margin-bottom: 8px; display: block; color: var(--accent); }

/* Bong bóng chat - .mine/.theirs tính theo NGƯỜI ĐANG XEM (khách xem thì "mine" = sender 'user',
   admin xem cùng luồng đó thì "mine" = sender 'admin'), nên tái dùng được cho cả khung chat khách
   lẫn modal chat trong trang admin (xem renderChatBubbles trong layout.js/admin.js). */
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-row.theirs { justify-content: flex-start; }
.chat-bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.chat-bubble-row.mine .chat-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); color: var(--on-accent); border-bottom-right-radius: 4px; }
.chat-bubble-row.theirs .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.chat-bubble-time { display: block; font-size: 10px; margin-top: 4px; opacity: .7; }
.chat-bubble-image { display: block; max-width: 100%; width: 180px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; }

/* Nút kẹp ảnh + khung xem trước ảnh đang chờ gửi - dùng chung cho khung chat khách và modal chat admin. */
.chat-attach-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border-strong); transition: color .15s, border-color .15s;
}
.chat-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-pending-image { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }
.chat-pending-image img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong); }
.chat-pending-image.uploading img { opacity: .5; }
.chat-pending-image i { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.chat-pending-image i:hover { color: var(--danger); }

.chat-panel-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-panel-input input { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 13px; }
.chat-panel-input input:focus { outline: none; border-color: var(--accent); }
.chat-panel-input button {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--magenta)); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
.chat-panel-input button:hover { transform: scale(1.06); }
.chat-panel-input button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------------- Tab "Người dùng" trang admin: cột tin nhắn + modal chat ---------------- */
.admin-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 4px; margin-left: 6px; border-radius: 20px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; font-family: var(--font-mono); vertical-align: 2px;
}
.users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.users-toolbar-right { display: flex; align-items: center; gap: 10px; }
.users-search-input {
  flex: 1; min-width: 180px; max-width: 320px; padding: 9px 14px; border-radius: 20px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 13px;
}
.users-search-input:focus { outline: none; border-color: var(--accent); }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-slider { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px; cursor: pointer; transition: background .15s, border-color .15s; }
.switch-slider::before { content: ''; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: transform .15s, background .15s; }
.switch input:checked + .switch-slider { background: rgba(var(--accent-rgb),0.25); border-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(17px); background: var(--accent); }

.user-msg-preview-wrap { position: relative; display: inline-block; max-width: 260px; }
.user-msg-preview { cursor: pointer; display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-muted); transition: color .15s; background: none; border: none; text-align: left; padding: 0; font-family: var(--font-body); }
.user-msg-preview:hover { color: var(--accent); }
.user-msg-preview.unread { color: var(--text); font-weight: 700; }
.user-msg-preview-empty { color: var(--text-faint); font-size: 12.5px; }

/* Số tin nhắn chưa đọc CỦA RIÊNG khách đó - chấm đỏ ở góc trên phải ngay ô tin nhắn của dòng đó,
   khác với .admin-tab-badge vốn là tổng số hội thoại chưa đọc trên toàn nút tab "Người dùng". */
.user-msg-unread-badge {
  position: absolute; top: -9px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 20px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  border: 2px solid var(--card-bg); pointer-events: none;
}

.admin-chat-meta { font-size: 12.5px; color: var(--text-muted); margin: -6px 0 14px; }
.admin-chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px 2px 10px; margin: 0 -6px 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 800px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--magenta)); opacity: .7; }
.stat-value { font-size: 25px; font-weight: 800; font-family: var(--font-mono); }
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }

/* Ô thống kê bấm được (dẫn sang tab tương ứng, có lọc sẵn). Dùng thẻ <button> để bàn phím
   và trình đọc màn hình hiểu đây là nút bấm, nên phải reset lại style mặc định của button. */
.stat-card-link {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.stat-card-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb),0.85);
}
.stat-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-hint { font-size: 11.5px; color: var(--accent); font-weight: 700; margin-top: 10px; opacity: 0; transition: opacity .15s; }
.stat-card-link:hover .stat-hint, .stat-card-link:focus-visible .stat-hint { opacity: 1; }
/* Trên thiết bị cảm ứng không có trạng thái hover nên luôn hiện gợi ý, nếu không sẽ
   không có gì cho biết ô này bấm được. */
@media (hover: none) {
  .stat-hint { opacity: 1; }
}

/* Thanh "đang lọc ..." phía trên bảng, hiện khi vào tab từ ô thống kê */
.admin-filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius: 12px; padding: 11px 16px; margin-bottom: 16px;
  font-size: 13px; color: var(--text-muted);
}
.admin-filter-bar b { color: var(--text); }
.admin-filter-bar i { color: var(--accent); }

/* Dòng tiêu đề ngăn cách các ngày trong bảng đơn hàng / nạp tiền */
.table-day-row td {
  background: var(--surface-2);
  font-weight: 700; font-size: 12.5px; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.4px;
  border-top: 1px solid var(--border-strong);
  position: sticky; left: 0;
}
.table-day-row td i { color: var(--accent); margin-right: 7px; }
.table-day-count { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 10px; }

.cell-time { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
/* UID tài khoản game dài tới 20 ký tự - giữ nguyên 1 dòng (bảng đã cuộn ngang được)
   và dùng font mono để dễ đối chiếu từng ký tự khi nạp thủ công. */
.cell-uid { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

.table-input {
  width: 100%; padding: 6px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
}

/* Ô nhập URL ảnh + nút tải ảnh từ máy đứng cạnh nhau (form thêm/sửa game & gói nạp) */
.image-input-row { display: flex; align-items: center; gap: 8px; }
.image-input-row input { flex: 1; min-width: 0; }
.image-input-row .btn { flex-shrink: 0; padding: 9px 12px; }

/* Dải ảnh minh hoạ mô tả game trong modal sửa game (admin) - xem renderGameGalleryEditor() trong admin.js */
.admin-gallery-editor {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}
.admin-gallery-empty { font-size: 12.5px; color: var(--text-faint); margin-bottom: 10px; }
.admin-gallery-thumb { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.admin-gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong);
}
.admin-gallery-thumb-remove {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--card-bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 0;
}
.pkg-add-row td { vertical-align: middle; }

/* Kéo-thả sắp xếp gói nạp trong bảng quản trị */
.pkg-drag-handle { width: 28px; text-align: center; color: var(--text-faint); cursor: grab; }
.pkg-row { cursor: grab; transition: background .15s, opacity .15s; }
.pkg-row:active { cursor: grabbing; }
.pkg-row.dragging { opacity: 0.35; background: rgba(var(--accent-rgb),0.08); }
.pkg-row:hover .pkg-drag-handle { color: var(--accent); }

/* Hộp gợi ý kéo-thả (dùng chung cho danh sách game & danh sách gói nạp) */
.games-order-hint {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
  background: rgba(var(--magenta-rgb),0.08); border: 1px solid rgba(var(--magenta-rgb),0.28);
  border-radius: 12px; padding: 11px 16px; margin-bottom: 16px;
}
.games-order-hint i { color: var(--magenta); margin-right: 7px; }
.games-order-hint b { color: var(--text); }

/* Kéo-thả sắp xếp thứ tự game ngoài trang chủ */
.game-drag-handle { color: var(--text-faint); cursor: grab; font-size: 15px; flex-shrink: 0; }
.game-admin-card { cursor: grab; transition: background .15s, opacity .15s; }
.game-admin-card:active { cursor: grabbing; }
.game-admin-card.dragging { opacity: 0.35; }

/* Dòng đang bị ẩn khỏi trang chủ (lợi ích tắt hiển thị) - làm nhạt để phân biệt ngay với dòng đang bật,
   nhưng vẫn đọc và bấm được để admin bật lại. */
.is-hidden-row { opacity: 0.55; }
.badge-muted {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); vertical-align: middle;
}

/* Form thêm lợi ích: xếp dọc trong 1 khung riêng (không dùng .inline-form như các tab khác) vì có
   bảng chọn icon chiếm trọn chiều ngang, xếp thành hàng ngang sẽ vỡ bố cục. */
.benefit-add-form {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px;
}
.benefit-add-form .form-group:last-of-type { margin-bottom: 14px; }

/* Bảng chọn icon cho từng lợi ích (tab "Lợi ích" trang quản trị) */
.benefit-icon-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px;
  max-height: 190px; overflow-y: auto;
  padding: 10px; margin-bottom: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.benefit-icon-choice {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 15px; cursor: pointer;
  transition: color .15s, border-color .15s, transform .15s, background .15s;
}
.benefit-icon-choice:hover { color: var(--accent); border-color: var(--border-strong); transform: translateY(-2px); }
.benefit-icon-choice.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-end));
  border-color: transparent; color: var(--on-accent);
}
.game-admin-card:hover .game-drag-handle { color: var(--accent); }

.admin-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tab { padding: 9px 17px; border-radius: 9px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13.5px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.admin-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-grad-end)); border-color: transparent; color: #06140f; }
.admin-tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

.admin-fade-in { animation: fadeUp .32s cubic-bezier(.2,.9,.3,1) both; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.inline-form .form-group { margin-bottom: 0; flex: 1; min-width: 140px; }

/* ---------------- toast ---------------- */
#toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--card-bg); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 13px 18px; font-size: 13.5px; min-width: 240px; max-width: 320px;
  animation: toastIn .22s ease, toastOut .22s ease 2.8s forwards;
}
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-success { border-left-color: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ---------------- trang "Thông tin tài khoản" ---------------- */
.account-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-top: 6px; }
@media (max-width: 640px) { .account-info-grid { grid-template-columns: 1fr; } }
.account-info-item .info-label { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.account-info-item .info-value { font-size: 15px; font-weight: 700; font-family: var(--font-mono); }
.account-info-item .info-value.accent { color: var(--accent-2); }

.avatar-upload-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.avatar-upload-preview {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(135deg, var(--accent), var(--magenta)); color: #0b0817;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px;
  font-family: var(--font-display); border: 2px solid var(--border-strong);
}
.avatar-upload-actions .btn { margin-right: 8px; }
.avatar-upload-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; }

.card-title { font-weight: 700; font-size: 15.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.card-title i { color: var(--accent); }

/* ---------------- lựa chọn phương thức thanh toán ---------------- */
.payment-method-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 10px 0 20px; }
@media (max-width: 560px) { .payment-method-list { grid-template-columns: 1fr; } }
.payment-method-option {
  border: 1.5px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; transition: border-color .15s, background .15s, transform .12s;
  background: rgba(255,255,255,0.02);
}
.payment-method-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.payment-method-option.selected {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.16), rgba(var(--magenta-rgb),0.08));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.payment-method-option i { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.payment-method-name { font-size: 13.5px; font-weight: 700; }
.payment-method-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Trên điện thoại, nâng nút hỗ trợ tròn nổi lên trên thanh điều hướng dưới cùng để không bị che/chồng */
@media (max-width: 700px) {
  .floating-widget { bottom: 72px; right: 12px; }
  .chat-panel { height: min(60vh, calc(100vh - 160px)); }
}