/* ==========================================================================
   Storefront CSS — design tokens, theme sáng / tối, component, responsive
   Design System, Themes, Components & Responsiveness
   ========================================================================== */

/* --- CSS Variables & Design System --- */
:root {
  --global-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--global-font);
  
  /* Color Palette - Light Mode */
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --white: #ffffff;
  --primary: #3b5bdb;
  --primary-hover: #2b4bc8;
  --primary-light: rgba(59, 91, 219, 0.08);
  --primary-glow: rgba(59, 91, 219, 0.25);
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-light: rgba(245, 158, 11, 0.12);
  
  --text: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  
  --border: #e5e7eb;
  --border-hover: #d1d5db;
  
  --red: #ef4444;
  --green: #22c55e;
  --orange: #f97316;
  --purple: #8b5cf6;
  --cyan: #06b6d4;
  
  --footer-bg: #111827; /* nền tối: tooltip / thanh chọn nhiều dòng / sidebar admin */
  --shade: 15, 23, 42; /* lớp phủ mờ: rgba(var(--shade), .6) — nền sau hộp thoại, chữ trên ảnh */
  --media-bg: #0f172a; /* nền khung ảnh khi ảnh đang tải / ảnh trong suốt */
  --media-bg-soft: #1e293b;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 35px rgba(0, 0, 0, 0.15);
  
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  
  --header-height: 72px;
}

/* --- Dark Theme Variables: đen thuần, xám trung tính (không ánh xanh) --- */
:root[data-theme="dark"] {
  color-scheme: dark; /* thanh cuộn, ô chọn ngày, danh sách <select> của trình duyệt cũng tối theo */
  --bg: #000000;
  --bg-card: #0a0a0a;
  --bg-elevated: #141414;
  --white: #0a0a0a;
  --primary: #4f70ed;
  --primary-hover: #6885f5;
  --primary-light: rgba(79, 112, 237, 0.15);
  --primary-glow: rgba(79, 112, 237, 0.35);

  --text: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;

  --border: #262626;
  --border-hover: #404040;

  --footer-bg: #000000;
  --shade: 0, 0, 0;
  --media-bg: #111111;
  --media-bg-soft: #171717;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 50px rgba(0, 0, 0, 0.65);
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--global-font);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.shell {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
}

.icon {
  flex-shrink: 0;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-height);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Logo chữ = tên shop (chưa có ảnh logo / ảnh lỗi) */
.header-brand__fallback {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  color: var(--primary);
  letter-spacing: -0.5px;
}

/* Header Search */
.header-search {
  position: relative;
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.header-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  background: var(--bg-card);
}

.header-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
}

.header-search input::placeholder {
  color: var(--text-muted);
}

.header-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  background: var(--primary);
  color: #fff;
  border-radius: 0 4px 4px 0;
  transition: background-color var(--transition-fast);
}

.header-search__btn:hover {
  background: var(--primary-hover);
}

/* Search Dropdown Results */
.header-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: none;
  z-index: 150;
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}

.header-search__results.is-active {
  display: block;
}

.search-results-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--primary-light);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.search-result-info strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.search-result-info span {
  font-size: 11px;
  color: var(--text-muted);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.theme-toggle {
  padding: 0 10px;
}

.theme-toggle__icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon-sun {
  display: block;
}

/* Chuyển cảnh đổi giao diện (switchTheme trong app.js gắn class lên <html>, xong thì gỡ):
   - .theme-switching: đang chuyển bằng View Transitions — tắt transition riêng của từng phần tử để giao diện mới hiện đúng màu cuối.
   - .theme-reveal: giao diện mới nằm trên, JS mở dần bằng clip-path hình tròn từ chỗ bấm (bỏ hiệu ứng mờ dần mặc định).
   - .theme-fade: trình duyệt chưa có View Transitions — màu chuyển dần. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: ease;
}

html.theme-reveal::view-transition-old(root),
html.theme-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.theme-reveal::view-transition-old(root) {
  z-index: 1;
}

html.theme-reveal::view-transition-new(root) {
  z-index: 2;
}

html.theme-switching .theme-toggle .icon {
  animation: theme-icon-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes theme-icon-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* Nạp tiền Button */
.btn--nap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  background: #2563eb;
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  transition: all var(--transition-fast);
}

.btn--nap:hover {
  background: #1d4ed8;
}

.header-topup__label--compact {
  display: none;
}

.header-auth-button {
  background: var(--bg);
  border-radius: 24px;
}

.menu-toggle {
  display: none;
  padding: 0 10px;
}

/* ==========================================================================
   Hero Section & Leaderboard
   ========================================================================== */
.hero-section {
  padding: 20px 0;
}

.hero-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 20px;
}

/* Hero Sidebar: Top Nạp tháng (5 người, render sẵn từ server) — phẳng: chỉ viền + nền, không đổ bóng */
.hero-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/* Tông trung tính: chữ thường, không nền màu — màu (nếu có) chỉ đến từ icon hạng admin tải lên */
.hero-sidebar__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.2px;
}

.hero-sidebar__title .bi {
  color: var(--text-muted);
  font-size: 14px;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.live-indicator::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* Top Donor List — 5 dòng giãn đều theo chiều cao banner (máy tính) */
.top-donor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.top-donor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.top-donor-item:hover {
  border-color: var(--border);
}

/* Số thứ hạng (chưa có icon): vòng viền mảnh, không tô màu */
.top-donor-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid var(--border-hover, var(--border));
  color: var(--text-secondary);
}

.top-donor-item:nth-child(-n+3) .top-donor-rank {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Icon hạng do admin tải lên (Admin → Banner & TOP nạp) */
.top-donor-rank--icon {
  border: 0;
  border-radius: 0;
}

.top-donor-rank--icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-donor-rank__num {
  display: none; /* data-fallback-hide: ảnh lỗi → hiện lại số */
}

/* Hạng còn trống (tháng mới / ít người nạp) */
.top-donor-item--empty .top-donor-name,
.top-donor-item--empty .top-donor-amount {
  color: var(--text-muted);
  font-weight: 600;
}

.top-donor-item--empty .top-donor-rank--icon img {
  opacity: .45;
}

.top-donor-user {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.top-donor-name {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-donor-vip {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  display: inline-block;
}

.top-donor-amount {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Mẫu THÔNG BÁO của khối cạnh banner (HeroPanel, front/home/_notice) — thay cho TOP NẠP khi admin chọn.
   Nội dung soạn bằng CKEditor (đã lọc, bọc class ck-content): kiểu riêng của CKEditor (cỡ chữ, tô sáng, kiểu ảnh, bảng,
   danh sách việc) đến từ vendor/ckeditor5/ckeditor5-content.css; ở đây đặt lại chữ / màu theo token của shop và bù các
   kiểu bị reset chung xoá (lề đoạn, chấm danh sách). Phẳng, không bóng.
   Máy tính: khung cao bằng banner (340px), dài hơn thì cuộn trong khung; ≤ 992px nằm dưới banner, hiện hết. */
.hero-notice {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
  overflow-wrap: anywhere;
}

/* Biến của ckeditor5-content.css: chữ theo shop thay cho Helvetica / đen cố định */
.hero-notice,
.hero-notice.ck-content {
  --ck-content-font-family: inherit;
  --ck-content-font-size: 13px;
  --ck-content-font-color: var(--text);
  --ck-content-line-height: 1.6;
  --ck-content-overflow-wrap: anywhere;
  --ck-content-color-image-caption-background: transparent;
  --ck-content-color-image-caption-text: var(--text-muted);
  --ck-content-color-table-caption-background: transparent;
  --ck-content-color-table-caption-text: var(--text-muted);
  --ck-content-image-style-spacing: 10px;
  --ck-content-table-style-spacing: 10px;
  --ck-content-media-style-spacing: 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.hero-notice > :first-child {
  margin-top: 0;
}

.hero-notice > :last-child {
  margin-bottom: 0;
}

.hero-notice p,
.hero-notice ul,
.hero-notice ol,
.hero-notice blockquote,
.hero-notice pre,
.hero-notice figure,
.hero-notice hr {
  margin: 0 0 8px;
}

.hero-notice h2,
.hero-notice h3,
.hero-notice h4 {
  margin: 10px 0 6px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

.hero-notice h2 {
  font-size: 16px;
}

.hero-notice h3 {
  font-size: 14.5px;
}

.hero-notice h4 {
  font-size: 13.5px;
}

.hero-notice ul,
.hero-notice ol {
  padding-left: 18px;
}

.hero-notice ul {
  list-style: disc;
}

.hero-notice ol {
  list-style: decimal;
}

.hero-notice ul.todo-list {
  padding-left: 26px;
  list-style: none;
}

.hero-notice li + li {
  margin-top: 4px;
}

.hero-notice li::marker {
  color: var(--primary);
}

.hero-notice strong {
  font-weight: 700;
}

.hero-notice a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-notice a:hover {
  color: var(--primary-hover);
}

.hero-notice blockquote {
  padding: 0 0 0 10px;
  border-left: 3px solid var(--border-hover);
  font-style: normal;
  color: var(--text-secondary);
}

.hero-notice hr {
  height: 1px;
  border: 0;
  background: var(--border-hover);
}

.hero-notice code {
  font-size: 12px;
}

.hero-notice pre {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 12px;
  overflow-x: auto;
}

.hero-notice img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Ảnh / bảng giữ cách dựng của CKEditor (figure = display: table để chú thích nằm đúng dưới ảnh) — chỉ chặn tràn khung */
.hero-notice .image,
.hero-notice .media {
  max-width: 100%;
}

.hero-notice .media {
  display: block;
  min-width: 0;
}

/* Bảng rộng hơn khung thì cuộn ngang trong chính nó */
.hero-notice figure.table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.hero-notice .table table {
  border-collapse: collapse;
  font-size: 12.5px;
}

.hero-notice .table table td,
.hero-notice .table table th {
  min-width: 2em;
  padding: 4px 6px;
  border: 1px solid var(--border-hover);
}

.hero-notice .table table th {
  font-weight: 700;
  background: var(--bg-card);
}

/* Video YouTube (RichText::display): khung 16:9 co theo bề rộng */
.hero-notice .rt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--media-bg);
}

.hero-notice .rt-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 993px) {
  .hero-sidebar--notice {
    max-height: 340px;
  }
}

/* Hero Banner — ảnh máy tính nên 1200×450 (8:3), điện thoại 800×450 (16:9).
   Máy tính cao cố định 340px (khung TOP NẠP giãn theo); ≤ 992px cao theo tỉ lệ ảnh (xem phần Responsive). */
.hero-banner {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* TOP NẠP ẩn theo cỡ màn (Admin → Banner & TOP nạp → Hiển thị TOP NẠP; LeaderboardService::visibility).
   Máy tính tắt → banner rộng hết hàng, cao theo tỉ lệ 8:3 của ảnh (≈ 1220px → 450px), tối thiểu 340px. */
@media (min-width: 993px) {
  .hero-layout.hero-layout--no-top-desktop {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-layout--no-top-desktop .hero-sidebar {
    display: none;
  }
  .hero-layout--no-top-desktop .hero-banner {
    min-height: clamp(340px, 31vw, 450px);
  }
}
@media (max-width: 992px) {
  .hero-layout--no-top-mobile .hero-sidebar {
    display: none;
  }
}

.hero-banner__track {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  display: flex;
  align-items: center;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide picture {
  display: contents;
}

.hero-slide__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--shade), 0.6);
}

/* Banner không có ảnh (slide mặc định khi admin chưa bật banner nào) */
.hero-slide--plain {
  background: var(--media-bg);
}

/* Có link mà không có chữ nút → cả banner là link */
.hero-slide__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide__link:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: -3px;
}

.hero-slide__link ~ .hero-slide__content {
  pointer-events: none;
}

.hero-slide__link ~ .hero-slide__content a {
  pointer-events: auto;
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  padding: 28px clamp(20px, 3.4vw, 40px);
  max-width: 600px;
  color: #fff;
}

/* Đang ẩn chữ nhưng vẫn hiện nút → nút nằm góc dưới trái, không che giữa ảnh */
.hero-slide--buttons-only {
  align-items: flex-end;
}

.hero-slide--buttons-only .hero-slide__content {
  padding-bottom: 30px;
}

.hero-slide--buttons-only .btn--hero-secondary {
  background: rgba(var(--shade), 0.55);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-full);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.hero-title {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-title em {
  font-style: normal;
  color: #fbbf24;
}

.hero-desc {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #f97316;
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.btn--hero-primary:hover {
  background: #ea580c;
}

.btn--hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.btn--hero-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Banner Dots */
.hero-banner__dots {
  position: absolute;
  bottom: 16px;
  right: 24px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.hero-banner__dots button {
  width: 24px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  transition: all var(--transition-fast);
}

.hero-banner__dots button.active {
  width: 40px;
  background: #fbbf24;
}

/* Ẩn khỏi màn hình nhưng trình đọc màn hình / SEO vẫn đọc được (VD: h1 khi banner đầu chỉ có ảnh) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Danh mục nổi bật trang chủ: CSS ở cuối shop.css (tiền tố fc-) */

/* ==========================================================================
   Kho Game Sections & Cards
   ========================================================================== */
.kho-section {
  padding: 16px 0 20px;
}

.kho-section__header {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.kho-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

.kho-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  font-size: 20px;
}

/* Số ô mỗi hàng do admin cài (Cài đặt → Bố cục trang chủ) — cùng cơ chế biến CSS với .fc-grid */
.kho-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
  gap: 16px;
}

/* Thẻ danh mục / gói (trang chủ, danh mục con, tìm kiếm) — phẳng: viền + nền, hover chỉ đổi màu viền */
.kho-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
}

.kho-card:hover {
  border-color: var(--primary);
}

/* Ảnh hiển thị trọn vẹn (contain, không cắt) trong khung 16:10 có lề trong — không sát mép thẻ.
   Ảnh khác tỉ lệ (16:9, 2:1…) để trống 2 bên / trên dưới trên nền --bg. */
.kho-card__image {
  aspect-ratio: 16 / 10;
  margin: 8px 8px 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

.kho-card__image-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kho-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 64px;
  justify-content: flex-start;
}

.kho-card__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.kho-card__count {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

.kho-card__price-row {
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.kho-card__price {
  font-size: 14.5px;
  font-weight: 800;
  color: #2563eb; /* Royal blue matching user screenshot */
  line-height: 1.2;
}

:root[data-theme="dark"] .kho-card__price {
  color: #60a5fa;
}

/* ==========================================================================
   Community Articles Section
   ========================================================================== */
.community-articles {
  padding: 28px 0;
}

.community-articles__container {
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
:root[data-theme="dark"] .community-articles__container {
  background: var(--bg-card); /* nền nhạt màu nhấn trên nền đen thành mảng xanh navy → dùng nền thẻ */
}

.community-articles__heading span {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.community-articles__heading h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin: 4px 0 6px;
}

.community-articles__heading p {
  font-size: 14px;
  color: var(--text-secondary);
}

.community-articles__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 14px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.community-articles__btn:hover {
  background: var(--primary-hover);
}

/* ==========================================================================
   Storefront SEO Section
   ========================================================================== */
.storefront-seo {
  padding: 24px 0;
}

.storefront-seo__inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.storefront-seo__inner span {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.storefront-seo__inner h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 10px;
}

.storefront-seo__inner p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 900px;
}

.storefront-seo__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.storefront-seo__links a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.storefront-seo__links a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Footer: mục "Footer" cuối shop.css (tiền tố ft-) */

/* ==========================================================================
   Floating Action Buttons (Chat & Messenger)
   ========================================================================== */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.support-chat-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.support-chat-trigger:hover {
  border-color: var(--primary);
}

.support-chat-trigger__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ô biểu tượng Zalo: chữ "Zalo" trắng trên nền xanh thương hiệu Zalo (ngoại lệ màu thương hiệu — khách nhận ra kênh ngay) */
.support-chat-trigger__icon--zalo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #0068ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;
}

.support-chat-trigger:hover {
  border-color: #0068ff;
}

.support-chat-trigger strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
}

.support-chat-trigger small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Đang trong giờ hỗ trợ (SiteFooter::supportStatus) → chữ xanh lá */
.support-chat-trigger small.is-open {
  color: color-mix(in srgb, var(--green) 70%, var(--text));
}

.messenger-float {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0084ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.messenger-float:hover {
  background: #0073e6;
}

/* ==========================================================================
   Modals & Dialogs
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--shade), 0.65);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-active .modal-dialog {
  transform: scale(1);
}

.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: var(--red);
  color: #fff;
}

.modal-body {
  padding: 20px;
}

/* Modal Form Styles */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  font-size: 13.5px;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
}

.btn--submit {
  width: 100%;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 800;
  transition: all var(--transition-fast);
}

.btn--submit:hover {
  background: var(--primary-hover);
}

/* Topup QR & Bank details */
.bank-qr-box {
  background: var(--bg);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

.bank-qr-img {
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.bank-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.bank-info-row:last-child {
  border-bottom: none;
}

.copy-btn {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 4px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-30px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.is-show {
  transform: translateX(0);
  opacity: 1;
}

.toast--success {
  border-left-color: var(--green);
}

.toast--error {
  border-left-color: var(--red);
}

/* ==========================================================================
   Mobile Drawer & Mobile Bottom App Bar Styles
   ========================================================================== */
/* Ngăn kéo menu điện thoại (layouts/partials/mobile-nav, tiền tố mdr- + mobile-drawer__*; JS initMobileDrawer — §6.43).
   Trượt từ trái, lớp nền mờ phía sau; phẳng §8: viền + nền, không đổ bóng. Kéo sang trái để đóng (--mdr-drag). */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--shade), 0.55);
  z-index: 210;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* Mở: hiện ngay (visibility không chờ hết hiệu ứng) để nút đóng nhận focus được */
.mobile-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

html.is-mdrawer-open {
  overflow: hidden;
}

.mobile-drawer {
  --mdr-danger: #dc2626;
  --mdr-ok: #16a34a;
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  max-width: 88vw;
  height: 100%;
  height: 100dvh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  z-index: 220;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  outline: none;
  overscroll-behavior: contain;
}

:root[data-theme="dark"] .mobile-drawer {
  --mdr-danger: #f87171;
  --mdr-ok: #4ade80;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer.is-dragging {
  transition: none;
  transform: translateX(var(--mdr-drag, 0px));
}

/* --- Đầu ngăn: logo + đóng, ô tìm --- */
.mdr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--border);
}

.mdr-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.mdr-brand__logo {
  display: block;
  max-width: 190px;
  max-height: 38px;
  object-fit: contain;
}

.mdr-brand__name {
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mdr-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mdr-close:hover,
.mdr-close:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.mdr-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 12px 14px 0;
}

.mdr-search__icon {
  position: absolute;
  left: 13px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.mdr-search__input {
  width: 100%;
  height: 42px;
  padding: 0 46px 0 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 999px);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.mdr-search__input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-card);
}

.mdr-search__input::-webkit-search-cancel-button {
  display: none;
}

.mdr-search__btn {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

/* --- Thân ngăn (cuộn) --- */
.mobile-drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Tài khoản */
.mdr-account {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.mdr-account__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdr-account__who {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.mdr-account__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdr-account__text b,
.mdr-account__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-account__text b {
  font-size: 15px;
  font-weight: 800;
}

.mdr-account__text small {
  font-size: 12px;
  color: var(--text-muted);
}

.mdr-icon-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}

.mdr-icon-btn:hover,
.mdr-icon-btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.mdr-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tier, var(--primary)) 10%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.mdr-tier i {
  color: var(--tier, var(--primary));
}

.mdr-tier small {
  overflow: hidden;
  font-weight: 500;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.mdr-wallet__text {
  display: flex;
  flex-direction: column;
}

.mdr-wallet__text small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.mdr-wallet__text b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.mdr-wallet__go {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
}

.mdr-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--text);
  text-decoration: none;
}

.mdr-alert > i {
  font-size: 16px;
  color: var(--accent);
}

.mdr-alert__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdr-alert__text b {
  font-size: 13px;
}

.mdr-alert__text small {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-alert__cta {
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.mdr-alert__cta.is-pay {
  border-color: #ea580c;
  background: #ea580c;
  color: #fff;
}

/* Khách chưa đăng nhập */
.mdr-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.mdr-guest__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 22px;
}

.mdr-guest b {
  font-size: 15px;
  font-weight: 800;
}

.mdr-guest small {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.mdr-guest__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.mdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.mdr-btn:hover,
.mdr-btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.mdr-btn--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.mdr-btn--primary:hover,
.mdr-btn--primary:focus-visible {
  background: var(--primary-hover);
  color: #fff;
}

.mdr-btn--block {
  width: 100%;
}

.mdr-btn--danger {
  color: var(--mdr-danger);
}

.mdr-btn--danger:hover,
.mdr-btn--danger:focus-visible {
  border-color: var(--mdr-danger);
  color: var(--mdr-danger);
}

/* Thao tác nhanh: 4 ô */
.mdr-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.mdr-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.mdr-quick__item:hover,
.mdr-quick__item:focus-visible,
.mdr-quick__item.is-current {
  border-color: var(--primary);
}

.mdr-quick__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 17px;
}

.mdr-quick__count {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 18px;
  padding: 0 5px;
  border: 2px solid var(--bg-card);
  border-radius: 999px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}

.mdr-quick__count[hidden] {
  display: none;
}

.mdr-quick__item b {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-quick__item small {
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Khối + tiêu đề */
.mdr-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mdr-heading {
  margin: 0 4px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mdr-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Dòng link (dùng chung partial menu/drawer + menu/link variant drawer) */
.mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible {
  background: var(--bg);
  outline: none;
}

.mobile-drawer__link.is-active,
.mobile-drawer__link.is-current {
  background: var(--primary-light);
  color: var(--primary);
}

.mobile-drawer__link-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 15px;
}

.mobile-drawer__link.is-active .mobile-drawer__link-icon,
.mobile-drawer__link.is-current .mobile-drawer__link-icon {
  background: var(--bg-card);
  color: var(--primary);
}

/* Công tắc giao diện tối */
.mdr-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--border-hover);
  transition: background-color var(--transition-fast);
}

.mdr-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition-fast);
}

.mdr-switch[aria-checked="true"] .mdr-switch__track {
  background: var(--primary);
}

.mdr-switch[aria-checked="true"] .mdr-switch__track::after {
  transform: translateX(16px);
}

/* Danh mục game: chip kho nổi bật + cây gập / mở */
.mdr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 2px 6px;
}

.mdr-chip {
  max-width: 100%;
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-chip:hover,
.mdr-chip:focus-visible,
.mdr-chip.is-current {
  border-color: var(--primary);
  color: var(--primary);
}

.mdr-cat > summary {
  list-style: none;
}

.mdr-cat > summary::-webkit-details-marker {
  display: none;
}

.mdr-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mdr-cat__head:hover,
.mdr-cat__head:focus-visible {
  background: var(--bg);
  outline: none;
}

.mdr-cat__head.is-active b {
  color: var(--primary);
}

.mdr-thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 15px;
}

.mdr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdr-thumb--sm {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 13px;
}

.mdr-cat__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdr-cat__text b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-cat__text small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.mdr-cat__caret {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.mdr-cat[open] > summary .mdr-cat__caret {
  transform: rotate(180deg);
}

.mdr-cat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px 27px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.mdr-cat__all {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mdr-cat__child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.mdr-cat__all:hover,
.mdr-cat__all:focus-visible,
.mdr-cat__child:hover,
.mdr-cat__child:focus-visible {
  background: var(--bg);
  outline: none;
}

.mdr-cat__child.is-current,
.mdr-cat__all.is-current {
  background: var(--primary-light);
  color: var(--primary);
}

.mdr-cat__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-cat__count {
  flex-shrink: 0;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--text-muted);
}

/* Hỗ trợ */
.mdr-support {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.mdr-support__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.mdr-support.is-open .mdr-support__dot {
  background: var(--mdr-ok);
}

.mdr-support > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdr-support b {
  font-size: 13px;
}

.mdr-support small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.mdr-contacts {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.mdr-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.mdr-contact + .mdr-contact {
  border-top: 1px solid var(--border);
}

.mdr-contact__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 4px 9px 10px;
  color: var(--text);
  text-decoration: none;
}

.mdr-contact__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 14px;
}

.mdr-contact__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdr-contact__text b {
  font-size: 13px;
}

.mdr-contact__text small {
  overflow: hidden;
  font-size: 12px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdr-contact__action {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.mdr-contact .mdr-icon-btn {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.mdr-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  text-decoration: none;
}

.mdr-address i {
  margin-top: 2px;
  color: var(--text-muted);
}

.mdr-logout {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mdr-foot {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 360px) {
  .mobile-drawer__body {
    padding-inline: 10px;
  }

  .mdr-quick {
    gap: 4px;
  }

  .mdr-quick__item small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer-overlay,
  .mdr-cat__caret,
  .mdr-switch__track,
  .mdr-switch__track::after {
    transition: none;
  }
}

/* Mobile Search Bar Container */
.mobile-search-bar {
  display: none;
}

/* ==========================================================================
   Comprehensive Multi-Device Responsive Design System
   Breakpoints:
   1. Large Desktop (1200px+)
   2. Standard Laptop & Netbook (993px - 1200px)
   3. Tablet Landscape & Small Laptop (769px - 992px)
   4. Tablet Portrait & Large Mobile (541px - 768px)
   5. Standard Mobile Phone (381px - 540px)
   6. Extra-Small Mobile Phone (<= 380px)
   ========================================================================== */

/* --- 1. Large Screen & Standard Laptops (max-width: 1200px) --- */
@media (max-width: 1200px) {
  .shell {
    max-width: 100%;
    padding: 0 16px;
  }
  .hero-layout {
    grid-template-columns: 280px 1fr;
    gap: 16px;
  }
  .header-search {
    max-width: 300px;
  }
  .kho-grid {
    gap: 14px;
  }
}

/* --- 2. Tablets Landscape & Small Laptops (max-width: 992px) --- */
@media (max-width: 992px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Banner xếp trên, cao ≈ tỉ lệ 8:3 của ảnh máy tính theo bề rộng màn hình (960px → 360px, 768px → 288px).
     Dùng height + clamp() thay cho aspect-ratio: aspect-ratio + min-height đẩy bề rộng tràn màn hẹp,
     + max-height (màn xoay ngang) thì co bề rộng lại. */
  .hero-banner {
    order: 1;
    min-height: 0;
    height: clamp(200px, 37.5vw, 360px);
  }
  .hero-sidebar {
    order: 2;
  }
  /* TOP nạp xuống dưới banner, rộng cả hàng: tên + hạng VIP trên 1 dòng */
  .top-donor-item {
    flex: none;
  }
  .top-donor-user {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .top-donor-name {
    min-width: 0;
  }
  .top-donor-vip {
    flex-shrink: 0;
  }
  .hero-slide__content {
    padding: 24px;
    max-width: 540px;
  }
  .hero-title {
    font-size: clamp(20px, 3vw, 27px);
  }
  /* Máy tính bảng (541–992px) */
  .kho-grid {
    grid-template-columns: repeat(var(--cols-tablet, 3), minmax(0, 1fr));
    gap: 14px;
  }
}

/* --- 3. Tablets Portrait & Large Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(var(--mbar-h, 64px) + env(safe-area-inset-bottom, 0px));
  }

  .menu-toggle {
    display: inline-flex;
  }

  .header-search {
    display: none; /* Header search replaced by sticky mobile search below */
  }

  /* Ẩn sẵn, bấm nút kính lúp trên header (.search-toggle) mới hiện — initMobileSearchToggle trong app.js */
  .mobile-search-bar.is-open {
    display: block;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    position: sticky;
    top: var(--header-height);
    z-index: 95;
  }

  .mobile-search-bar .header-search {
    display: flex;
    max-width: 100%;
    width: 100%;
  }

  .mobile-search-bar .header-search__results {
    min-width: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 55vh;
  }

  .floating-actions {
    bottom: calc(var(--mbar-h, 64px) + 12px + env(safe-area-inset-bottom, 0px));
  }

  .hero-slide__content {
    padding: 18px 20px;
  }
  .hero-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .btn--hero-primary, .btn--hero-secondary {
    padding: 9px 16px;
    font-size: 13px;
  }



  /* Lưới không gắn biến (trang tìm kiếm, acc tương tự…) giữ 2 cột như cũ; lưới trang chủ theo cài đặt máy tính bảng */
  .kho-grid {
    grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0, 1fr));
    gap: 12px;
  }

  .community-articles__container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
    padding: 20px 16px;
  }
  .community-articles__btn {
    width: 100%;
    justify-content: center;
  }

  .storefront-seo__inner {
    padding: 20px 16px;
  }
}

/* --- 4. Standard Mobile Phones (max-width: 540px) --- */
@media (max-width: 540px) {
  :root {
    --header-height: 56px;
  }

  .shell {
    padding: 0 12px;
  }

  .brand__logo-img {
    height: 36px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-topup__label--full {
    display: none;
  }
  .header-topup__label--compact {
    display: inline;
  }

  .btn--nap {
    padding: 0 10px;
    height: 34px;
    font-size: 12px;
  }

  .header-auth-button {
    height: 34px;
    padding: 0 8px;
  }
  .header-auth-button__label {
    display: none; /* Icon only */
  }

  .theme-toggle {
    height: 34px;
    padding: 0 8px;
  }
  .theme-toggle__label {
    display: none;
  }

  .menu-toggle {
    height: 34px;
    padding: 0 8px;
  }

  .hero-section {
    padding: 10px 0 14px;
  }

  /* Điện thoại: ≈ tỉ lệ 16:9 (ảnh điện thoại riêng nếu admin tải lên) — 390px → 207px, 320px → 180px */
  .hero-banner {
    height: clamp(180px, 53vw, 290px);
    border-radius: 12px;
  }

  .hero-slide__content {
    padding: 14px 14px 24px;
  }

  .hero-slide--buttons-only .hero-slide__content {
    padding-bottom: 24px;
  }

  .hero-badge {
    font-size: 9px;
    padding: 3px 8px;
    margin-bottom: 6px;
  }

  .hero-title {
    font-size: clamp(16px, 4.6vw, 20px);
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .hero-desc {
    display: none; /* Hide long text on mobile to avoid vertical bloat */
  }

  .hero-cta {
    gap: 6px;
  }

  .btn--hero-primary, .btn--hero-secondary {
    padding: 7px 12px;
    font-size: 12px;
  }

  .hero-banner__dots {
    bottom: 8px;
    right: 10px;
    gap: 5px;
  }
  .hero-banner__dots button {
    width: 16px;
    height: 4px;
  }
  .hero-banner__dots button.active {
    width: 26px;
  }

  .hero-sidebar {
    padding: 12px;
    border-radius: 12px;
  }
  .hero-sidebar__title {
    font-size: 13.5px;
  }

  /* Điện thoại (≤ 540px) */


  .kho-section {
    padding: 12px 0 14px;
  }
  .kho-section__title {
    font-size: 14.5px;
    margin-bottom: 10px;
  }

  .kho-grid {
    grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
    gap: 8px;
  }
  .kho-card {
    border-radius: 10px;
  }
  .kho-card__image {
    margin: 6px 6px 0;
    border-radius: 7px;
  }
  .kho-card__body {
    padding: 8px 10px 10px;
    min-height: 54px;
    gap: 2px;
  }
  .kho-card__name {
    font-size: 12px;
  }
  .kho-card__count {
    font-size: 11px;
  }
  .kho-card__price {
    font-size: 13px;
  }

  .community-articles {
    padding: 14px 0;
  }
  .community-articles__heading h2 {
    font-size: 16px;
  }
  .community-articles__heading p {
    font-size: 12px;
  }

  .storefront-seo {
    padding: 14px 0;
  }
  .storefront-seo__inner h2 {
    font-size: 16px;
  }
  .storefront-seo__inner p {
    font-size: 12px;
  }
  .storefront-seo__links a {
    font-size: 11px;
    padding: 4px 10px;
  }

  .support-chat-trigger {
    padding: 8px 12px;
  }
  .support-chat-trigger small {
    display: none;
  }
  .support-chat-trigger strong {
    font-size: 11px;
  }

  .messenger-float {
    width: 44px;
    height: 44px;
  }
  .messenger-float svg {
    width: 22px;
    height: 22px;
  }

  .modal-dialog {
    max-width: calc(100vw - 20px);
    border-radius: 14px;
    max-height: 85vh;
  }
  .modal-header {
    padding: 14px 16px;
  }
  .modal-title {
    font-size: 16px;
  }
  .modal-body {
    padding: 14px;
  }

  .toast-container {
    left: 10px;
    right: 10px;
    bottom: calc(var(--mbar-h, 64px) + 8px + env(safe-area-inset-bottom, 0px));
  }
  .toast {
    font-size: 12px;
    padding: 9px 12px;
  }
}

/* Điện thoại / máy tính bảng xoay ngang (màn thấp): banner không chiếm quá 2/3 chiều cao màn hình */
@media (max-width: 992px) and (orientation: landscape) and (max-height: 540px) {
  .hero-banner {
    max-height: max(64vh, 180px);
  }
  .hero-desc {
    display: none;
  }
}

/* --- 5. Extra Small Mobile Phones (max-width: 380px) --- */
@media (max-width: 380px) {
  .hero-badge {
    display: none; /* màn rất hẹp: chừa chỗ cho tiêu đề + nút */
  }
  .shell {
    padding: 0 8px;
  }

  .header-actions {
    gap: 4px;
  }

  .btn--nap {
    padding: 0 8px;
    font-size: 11px;
  }


  .kho-grid {
    gap: 6px;
  }
  .kho-card__body {
    padding: 6px 8px 8px;
  }
  .kho-card__name {
    font-size: 11px;
  }
  .kho-card__count {
    font-size: 10px;
  }
  .kho-card__price {
    font-size: 12px;
  }
}