/* ==========================================================================
   Storefront — mở rộng cho các trang động (danh mục, chi tiết acc, thanh toán, tài khoản)
   Chỉ dùng biến màu / radius / shadow của style.css gốc — không đổi phong cách.
   ========================================================================== */

/* --- Tiện ích chung --- */
.page-section { padding: 20px 0 8px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-primary { color: var(--primary); }
.price-text { font-weight: 800; color: #2563eb; }
:root[data-theme="dark"] .price-text { color: #60a5fa; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.hidden { display: none !important; }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.panel + .panel { margin-top: 16px; }
.panel__title {
  font-size: 16px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.panel__title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }

/* --- Breadcrumb + tiêu đề trang --- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px;
}
.breadcrumb a { color: var(--text-secondary); font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span.sep { opacity: .6; }
.page-title { font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -0.3px; }
.page-desc { color: var(--text-secondary); font-size: 13.5px; margin-top: 6px; max-width: 900px; line-height: 1.6; }

/* --- Alert / flash --- */
.alert {
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  background: var(--bg-card); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px;
}
.alert--success { border-left-color: var(--green); }
.alert--error { border-left-color: var(--red); }
.alert--warning { border-left-color: var(--accent); background: var(--accent-light); }
.alert ul { margin-top: 6px; padding-left: 18px; list-style: disc; font-weight: 500; }
.form-error { color: var(--red); font-size: 12px; margin-top: 4px; font-weight: 600; }

/* --- Badge / tag --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 800; line-height: 1.6; white-space: nowrap;
  background: var(--primary-light); color: var(--primary);
}
.badge--green { background: rgba(34,197,94,.12); color: #16a34a; }
.badge--orange { background: rgba(249,115,22,.12); color: #ea580c; }
.badge--red { background: rgba(239,68,68,.12); color: #dc2626; }
.badge--purple { background: rgba(139,92,246,.14); color: #7c3aed; }
.badge--blue { background: rgba(37,99,235,.12); color: #2563eb; }
.badge--gray { background: var(--bg); color: var(--text-muted); }
:root[data-theme="dark"] .badge--green { color: #4ade80; }
:root[data-theme="dark"] .badge--orange { color: #fb923c; }
:root[data-theme="dark"] .badge--red { color: #f87171; }
:root[data-theme="dark"] .badge--purple { color: #a78bfa; }
:root[data-theme="dark"] .badge--blue { color: #60a5fa; }

/* --- Nhãn dán (tag) trên ảnh thẻ acc: 4 góc, chữ (nền màu / nền nhạt / viền) hoặc ảnh — xem Tag::STYLES --- */
.acc-stickers { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100% - 16px); pointer-events: none; }
.acc-stickers[hidden] { display: none; }
.acc-stickers--tl { top: 8px; left: 8px; }
.acc-stickers--tr { top: 8px; right: 8px; justify-content: flex-end; }
.acc-stickers--bl { bottom: 8px; left: 8px; align-items: flex-end; }
.acc-stickers--br { bottom: 8px; right: 8px; justify-content: flex-end; align-items: flex-end; }
/* Chia bề ngang: bên trái ≤ 60%, bên phải ≤ 40% → nhãn 2 góc cùng hàng xuống dòng thay vì đè lên nhau */
.acc-stickers--tl, .acc-stickers--bl { max-width: calc(60% - 8px); }
.acc-stickers--tr, .acc-stickers--br { max-width: calc(40% - 8px); }
.acc-discount { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 1.5; padding: 2px 7px; border-radius: 4px; }
.tag-sticker {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%;
  padding: 1px 6px; border: 1px solid transparent; border-radius: 4px;
  font-size: 10px; font-weight: 900; line-height: 1.5; letter-spacing: .3px; white-space: nowrap;
}
.tag-sticker .bi { font-size: 1em; line-height: 1; }
.tag-sticker__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tag-sticker--solid { background: var(--tag); color: var(--tag-fg); }
/* Nền tối: viền mảnh để nhãn màu đậm (xanh đen, tím than…) không chìm vào nền */
:root[data-theme="dark"] .tag-sticker--solid { border-color: rgba(255,255,255,.2); }
.tag-sticker--soft { background: color-mix(in srgb, var(--tag) 16%, var(--bg-card)); border-color: color-mix(in srgb, var(--tag) 28%, var(--bg-card)); color: color-mix(in srgb, var(--tag) 72%, var(--text)); }
.tag-sticker--outline { background: var(--bg-card); border-color: var(--tag); color: color-mix(in srgb, var(--tag) 80%, var(--text)); }
.tag-sticker--lg { padding: 2px 8px; font-size: 11.5px; }
.tag-sticker--xs { padding: 0 5px; font-size: 9.5px; line-height: 16px; }
/* Ảnh nhãn dán: giữ tỉ lệ, cao theo cỡ nhãn (Tag::IMAGE_SIZES) */
.tag-sticker-img { display: inline-flex; align-items: center; max-width: 100%; }
.tag-sticker-img__media { display: block; width: auto; max-width: 100%; height: 40px; object-fit: contain; }
.tag-sticker-img--sm .tag-sticker-img__media { height: 28px; }
.tag-sticker-img--lg .tag-sticker-img__media { height: 56px; }
.tag-sticker-img--inline .tag-sticker-img__media { height: 30px; }
.tag-sticker-img--xs .tag-sticker-img__media { height: 18px; }
@media (max-width: 640px) {
  .acc-stickers { gap: 3px; }
  .acc-stickers--tl, .acc-stickers--tr { top: 5px; }
  .acc-stickers--bl, .acc-stickers--br { bottom: 5px; }
  .acc-stickers--tl, .acc-stickers--bl { left: 5px; }
  .acc-stickers--tr, .acc-stickers--br { right: 5px; }
  .acc-stickers .tag-sticker { padding: 0 5px; font-size: 9px; }
  .acc-stickers .acc-discount { padding: 0 5px; font-size: 10px; }
  .acc-stickers .tag-sticker-img__media { height: 32px; }
  .acc-stickers .tag-sticker-img--sm .tag-sticker-img__media { height: 22px; }
  .acc-stickers .tag-sticker-img--lg .tag-sticker-img__media { height: 44px; }
}

/* --- Card acc (mở rộng .kho-card) --- */
.kho-card__meta { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.kho-card__old-price { font-size: 12px; color: var(--text-muted); text-decoration: line-through; margin-left: 6px; }
.kho-card__price-row--between { justify-content: space-between; gap: 6px; }
.kho-card__deposit { font-size: 10.5px; font-weight: 800; color: var(--accent-hover); }
.kho-card--out { opacity: .6; }

/* --- Số kết quả (trang tìm kiếm) — bộ lọc trang danh mục: mục "Trang danh mục" cuối file --- */
.result-count { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.result-count strong { color: var(--text); }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
  background: var(--bg-card); border: 1px dashed var(--border-hover); border-radius: var(--radius-lg);
}
.empty-state strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.empty-state--compact { padding: 16px; font-size: 13px; }
.empty-state--compact strong { font-size: 14px; }

/* --- Phân trang --- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 6px; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-card); font-size: 13px; font-weight: 700; color: var(--text);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .is-disabled { opacity: .45; }

/* --- Nút mua / nút phụ dùng chung (trang acc, trang đơn, túi mù) --- */
.btn-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; width: 100%; border-radius: var(--radius-sm);
  background: #f97316; color: #fff;
  font-weight: 900; font-size: 15px; letter-spacing: .2px;
  transition: background var(--transition-fast);
}
.btn-buy:hover { background: #ea580c; }
.btn-buy[disabled] { opacity: .55; cursor: not-allowed; background: #f97316; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; width: 100%; border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary); color: var(--primary); background: var(--bg-card);
  font-weight: 800; font-size: 14px; transition: all var(--transition-fast);
}
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* Mã acc + nhãn trong khung xem trước "trang chi tiết" của form nhãn dán admin (admin/tags/form) */
.acc-info__code { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--primary); background: var(--primary-light); padding: 3px 10px; border-radius: var(--radius-full); }
.acc-info__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }

/* Khung trạng thái trang đơn hàng (front/order) */
.status-banner {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
  background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.35); color: var(--text);
}
.status-banner__icon { font-size: 22px; line-height: 1; color: #ea580c; }
.status-banner--sold .status-banner__icon { color: var(--red); }
.status-banner--ok .status-banner__icon { color: #16a34a; }
.status-banner strong { display: block; font-size: 15px; font-weight: 900; color: #ea580c; }
.status-banner--sold { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
.status-banner--sold strong { color: var(--red); }
.status-banner--ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.status-banner--ok strong { color: #16a34a; }

/* --- Thanh toán / đơn hàng --- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.order-product { display: flex; gap: 14px; align-items: center; }
.order-product img { width: 120px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); background: var(--media-bg); flex-shrink: 0; }
.order-product__name { font-weight: 800; font-size: 15px; color: var(--text); }
.order-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.order-step {
  flex: 1; min-width: 120px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--text-muted); font-weight: 700;
}
.order-step b { display: block; font-size: 13px; color: var(--text-secondary); }
.order-step.is-done { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.order-step.is-done b { color: #16a34a; }
.order-step.is-current { border-color: var(--primary); background: var(--primary-light); }
.order-step.is-current b { color: var(--primary); }

.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.summary-row span { color: var(--text-secondary); }
.summary-row b { color: var(--text); }
.summary-row--total { border-bottom: none; font-size: 15px; }
.summary-row--total b { color: var(--red); font-size: 20px; font-weight: 900; }

.pay-method { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; margin-top: 12px; }
.pay-method__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; margin-bottom: 10px; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--red); }
.bank-qr-img--real { width: 200px; height: auto; min-height: 200px; }
.bank-qr-img--real img { width: 100%; height: auto; }

.cred-box { border: 1.5px solid rgba(34,197,94,.45); background: rgba(34,197,94,.06); border-radius: var(--radius); padding: 14px 16px; }
.cred-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.cred-row:last-child { border-bottom: none; }
.cred-row span { color: var(--text-secondary); font-weight: 600; }
.cred-row > span { flex-shrink: 0; }
.cred-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 800; color: var(--text); word-break: break-all; }
.cred-row__value { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* --- Trang tài khoản: khung 2 cột (cột trái front/profile/_sidebar) — chi tiết ở mục "Trang tài khoản (pf-)" cuối file --- */
.profile-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 800; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:hover td { background: var(--primary-light); }
.data-table a { color: var(--primary); font-weight: 700; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
textarea.form-input { height: auto; min-height: 90px; padding: 10px 14px; line-height: 1.5; }
.btn--submit-inline { width: auto; padding: 0 22px; }

/* --- Xác thực 2 lớp --- */
.two-factor-setup { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.two-factor-setup__qr { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.two-factor-setup__qr svg { width: 100%; height: auto; display: block; }
.two-factor-steps { list-style: decimal; padding-left: 18px; display: grid; gap: 10px; font-size: 13.5px; color: var(--text-secondary); }
.two-factor-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: 1px; color: var(--text); word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.recovery-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; background: var(--bg-card); border: 1px dashed var(--border-hover); border-radius: 6px; padding: 6px 10px; text-align: center; letter-spacing: 1px; }
@media (max-width: 640px) { .two-factor-setup { grid-template-columns: 1fr; } .two-factor-setup__qr { max-width: 220px; } }

/* --- Search result link (gợi ý tìm kiếm) --- */
a.search-result-item { color: inherit; }

/* ==========================================================================
   Header: dính trên cùng khi cuộn, nút sáng/tối tròn, nút nạp tiền bo 24px, avatar tròn + menu tài khoản
   ========================================================================== */
/* Template đặt overflow-x: hidden cho cả html và body → body thành khung cuộn riêng nên position: sticky của header
   không bám theo cửa sổ. html để visible (body tự truyền overflow cho viewport); trình duyệt hỗ trợ `clip` thì dùng
   clip — vẫn chặn tràn ngang nhưng không tạo khung cuộn. */
html { overflow-x: visible; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
.site-header { position: sticky; top: 0; z-index: 100; }

.theme-toggle, .menu-toggle, .search-toggle { width: 38px; height: 38px; padding: 0; border-radius: 50%; flex-shrink: 0; } /* nút tròn: đổi giao diện + mở menu / ô tìm (điện thoại) */
/* Nút kính lúp mở ô tìm điện thoại (#mobileSearchBar): chỉ ≤ 768px; đang mở → dấu ×, nền màu chủ đạo nhạt */
.search-toggle { display: none; }
.search-toggle__close { display: none; }
.search-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.search-toggle[aria-expanded="true"] .search-toggle__open { display: none; }
.search-toggle[aria-expanded="true"] .search-toggle__close { display: block; }
@media (max-width: 768px) { .search-toggle { display: inline-flex; } }
/* ≤ 380px header không đủ chỗ cho 5 nút → bỏ nút đổi giao diện (vẫn có công tắc ở ngăn kéo menu + ngăn Tiện ích) */
@media (max-width: 380px) { .site-header .theme-toggle { display: none; } }
.theme-toggle .icon { transition: transform .35s ease; }
.theme-toggle:hover .icon { transform: rotate(-20deg); }

.btn--nap { border-radius: 24px; }

.header-actions { position: relative; } /* khung định vị cho menu tài khoản (canh theo mép phải header) */
/* Nút tài khoản: avatar + tên + "ID · Số dư" + mũi tên (màn hẹp chỉ còn avatar — xem @media cuối mục) */
.user-menu__trigger {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; max-width: 280px;
  padding: 4px 10px 4px 4px; border-radius: 999px; color: var(--text); text-align: left;
  transition: background var(--transition-fast);
}
.user-menu__trigger:hover, .user-menu.is-open .user-menu__trigger { background: var(--primary-light); }
.user-menu__trigger:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.user-menu__meta { display: grid; min-width: 0; line-height: 1.3; }
.user-menu__name { font-size: 14.5px; font-weight: 900; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__sub { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__caret { flex-shrink: 0; font-size: 12px; color: var(--text-muted); transition: transform .18s ease; }
.user-menu.is-open .user-menu__caret { transform: rotate(180deg); }
.user-avatar {
  position: relative; overflow: hidden;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 900; line-height: 1; user-select: none;
  outline: 2px solid var(--border); outline-offset: 2px;
  transition: outline-color var(--transition-fast), transform var(--transition-fast);
}
.user-avatar--image { background: var(--bg); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Chữ cái dự phòng khi ảnh đại diện lỗi (head-scripts đổi display → flex) */
.user-avatar__letter { width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--primary); color: #fff; }
.user-menu__trigger:hover .user-avatar, .user-menu.is-open .user-menu__trigger .user-avatar { outline-color: var(--primary); }
.user-menu__trigger:active .user-avatar { transform: scale(.95); }
.user-avatar--lg { width: 46px; height: 46px; font-size: 19px; outline: none; }
.user-avatar--xl { width: 64px; height: 64px; font-size: 26px; outline: none; } /* đầu trang Tổng quan tài khoản */

/* Menu tài khoản (layouts/partials/user-menu): ai đang đăng nhập, hạng, ví + nạp, đơn cần trả, trang tài khoản (badge),
   thông báo mới, tiện ích (đã xem, giao diện tối, Zalo), đăng xuất. Phẳng: viền + nền, không bóng. */
.user-menu__avatar { position: relative; display: inline-flex; flex-shrink: 0; }
/* Chấm báo: có đơn cần thanh toán hoặc thông báo chưa đọc */
.user-menu__dot {
  position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--bg-card);
}
.user-menu__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
  width: 340px; max-width: calc(100vw - 24px); padding: 8px;
  max-height: calc(100vh - var(--header-offset, var(--header-height)) - 24px);
  max-height: calc(100dvh - var(--header-offset, var(--header-height)) - 24px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Mở: hiện ngay (visibility 0s) để focus được mục đầu bằng bàn phím; đóng: ẩn sau khi mờ dần */
.user-menu.is-open .user-menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }

.user-menu__head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 10px; }
.user-menu__who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.user-menu__who strong { font-size: 15px; font-weight: 900; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__who span { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__icon-btn {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.user-menu__icon-btn:hover, .user-menu__icon-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }

.user-menu__tier {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 3px;
  padding: 1px 8px 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.user-menu__tier:hover, .user-menu__tier:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.user-menu__tier .bi { font-size: 12px; color: var(--tier, var(--text-muted)); }
.user-menu__tier b { font-weight: 800; color: var(--text); }
.user-menu__tier small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

.user-menu__wallet {
  display: grid; gap: 10px; margin: 0 2px 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.user-menu__balance small { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.user-menu__balance b { font-size: 20px; font-weight: 900; line-height: 1.25; letter-spacing: -.3px; color: var(--text); overflow-wrap: anywhere; }
.user-menu__wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.user-menu__topup {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: #2563eb; color: #fff;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.user-menu__topup:hover, .user-menu__topup:focus-visible { background: #1d4ed8; outline: none; }
.user-menu__topup:focus-visible { box-shadow: 0 0 0 3px var(--primary-glow); }
.user-menu__topup--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text); }
.user-menu__topup--ghost:hover, .user-menu__topup--ghost:focus-visible { background: var(--bg-card); border-color: var(--primary); color: var(--primary); }

.user-menu__alert {
  display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--accent); color: var(--text);
  transition: border-color var(--transition-fast);
}
.user-menu__alert:hover, .user-menu__alert:focus-visible { border-color: var(--primary); outline: none; }
.user-menu__alert > .bi { font-size: 16px; color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
.user-menu__alert-text { flex: 1; min-width: 0; display: grid; }
.user-menu__alert-text b { font-size: 13px; font-weight: 800; }
.user-menu__alert-text small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__alert-cta { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; }

.user-menu__group { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--border); }
.user-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700; color: var(--text); text-align: left; transition: background var(--transition-fast), color var(--transition-fast);
}
.user-menu__item > .bi:first-child { width: 18px; flex-shrink: 0; text-align: center; font-size: 16px; color: var(--text-muted); transition: color var(--transition-fast); }
.user-menu__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__item:hover, .user-menu__item:focus-visible { background: var(--primary-light); color: var(--primary); outline: none; }
.user-menu__item:hover > .bi:first-child, .user-menu__item:focus-visible > .bi:first-child,
.user-menu__item.is-active > .bi:first-child, .user-menu__item.is-active { color: var(--primary); }
.user-menu__badge {
  flex-shrink: 0; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: 11px; font-weight: 800; line-height: 18px; white-space: nowrap; color: var(--text-secondary);
}
.user-menu__badge[hidden] { display: none; }
.user-menu__badge--primary { border-color: transparent; background: var(--primary); color: #fff; }
.user-menu__badge--warn { border-color: transparent; background: var(--accent-light); color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.user-menu__badge--info { border-color: transparent; background: var(--primary-light); color: var(--primary); }
.user-menu__ext { font-size: 11px; color: var(--text-muted); }
/* Tiện ích: 1 hàng ô nhỏ (Đã xem, Giao diện tối — menuitemcheckbox, Zalo, Quản trị) */
.user-menu__tools { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; padding: 8px 2px; border-top: 1px solid var(--border); }
.user-menu__tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 6px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.user-menu__tool > .bi { font-size: 16px; }
.user-menu__tool:hover, .user-menu__tool:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.user-menu__tool[aria-checked="true"] { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.user-menu__tool-count {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 10px; font-weight: 800;
}
.user-menu__tool-count[hidden] { display: none; }

/* Thông báo mới (xem trước 3 cái chưa đọc) */
.user-menu__heading {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted);
}
.user-menu__heading a { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--primary); border-radius: 4px; }
.user-menu__heading a:hover { text-decoration: underline; }
.user-menu__heading a:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: 2px; }
.user-menu__note {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text);
  transition: background var(--transition-fast);
}
.user-menu__note:hover, .user-menu__note:focus-visible { background: var(--primary-light); outline: none; }
.user-menu__note-icon {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--primary-light); color: var(--primary); font-size: 13px;
}
.user-menu__note-text { flex: 1; min-width: 0; display: grid; }
.user-menu__note-text b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__note-text small { font-size: 11px; color: var(--text-muted); }

.user-menu__logout { padding-top: 6px; border-top: 1px solid var(--border); }
.user-menu__logout .user-menu__item, .user-menu__logout .user-menu__item > .bi:first-child { color: color-mix(in srgb, var(--red) 80%, var(--text)); }
.user-menu__logout .user-menu__item:hover, .user-menu__logout .user-menu__item:focus-visible { background: color-mix(in srgb, var(--red) 8%, transparent); }

/* Nút trên header luôn cùng 1 cỡ: 38px, ≤ 540px còn 34px (cùng mốc style.css thu nút Nạp / Đăng nhập) —
   nút tròn đổi giao diện, Nạp, avatar / Đăng nhập, nút mở menu. Thêm nút mới vào header → theo đúng 2 cỡ này. */
@media (max-width: 540px) {
  .theme-toggle, .menu-toggle, .search-toggle, .header-auth-button, .user-menu__trigger .user-avatar { width: 34px; height: 34px; }
  .theme-toggle, .menu-toggle, .search-toggle, .header-auth-button { padding: 0; }
  .menu-toggle .icon { width: 18px; height: 18px; }
  .user-menu__trigger .user-avatar { font-size: 14px; }
}
@media (max-width: 768px) {
  .user-avatar--lg { width: 44px; height: 44px; font-size: 18px; }
  .user-menu__panel {
    top: calc(100% + 10px);
    max-height: calc(100vh - var(--header-offset, var(--header-height)) - var(--mbar-h, 64px) - 20px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--header-offset, var(--header-height)) - var(--mbar-h, 64px) - 20px - env(safe-area-inset-bottom, 0px));
  }
}
/* Không đủ chỗ cho tên + số dư (header còn thanh menu + ô tìm kiếm, hoặc điện thoại) → nút chỉ còn avatar tròn.
   Phần chữ ẩn kiểu "chỉ cho trình đọc màn hình" để nút vẫn có tên. */
@media (min-width: 769px) and (max-width: 1150px), (max-width: 640px) {
  .user-menu__trigger { gap: 0; padding: 0; border-radius: 50%; }
  .user-menu__trigger:hover, .user-menu.is-open .user-menu__trigger { background: none; }
  /* Vòng viền vẽ vào trong → avatar to đúng bằng các nút tròn bên cạnh (viền ngoài 2px + khe 2px làm avatar to hơn 8px) */
  .user-menu__trigger .user-avatar { outline-width: 1px; outline-offset: -1px; }
  .user-menu__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .user-menu__caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .user-menu__panel, .user-menu__trigger, .user-menu__caret, .user-avatar, .theme-toggle .icon { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .checkout, .profile-layout { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .page-title { font-size: 18px; }
  .panel { padding: 14px; border-radius: 12px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .order-product img { width: 90px; }
}

/* ==========================================================================
   Túi mù (acc random): mỗi túi là 1 thẻ mang ảnh gói / danh mục, buộc nơ vàng + huy hiệu hộp quà ở giữa
   ========================================================================== */
.bag-section { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px); }
@media (max-width: 768px) { .bag-section { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 64px); } }
.bag-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bag-section__meta { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.bag-section__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bag-random-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text);
  font-weight: 700; font-size: 13px; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.bag-random-btn:hover { border-color: var(--primary); color: var(--primary); }
.bag-random-btn[disabled] { opacity: .6; cursor: wait; }

.bag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bag-card {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: border-color .2s ease;
}
.bag-card:hover { border-color: var(--accent); }
.bag-card.is-picking { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
.bag-card:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }

/* Khung ảnh dùng chung: thẻ túi, ảnh lớn đầu trang gói, ảnh trong hộp xác nhận, mặt trước túi lúc mở */
.bag-card__image, .bag-hero__art, .bag-modal__art, .bag-stage__front {
  --ribbon: 7px;
  display: block; position: relative; overflow: hidden; background: var(--media-bg-soft);
}
.bag-card__image { aspect-ratio: 10 / 9; }
.bag-hero__art, .bag-modal__art { aspect-ratio: 16 / 10; border-radius: var(--radius); --ribbon: 10px; }
.bag-card__image img, .bag-hero__art img, .bag-modal__art img, .bag-stage__front img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease;
}
.bag-card:hover .bag-card__image img { transform: scale(1.06); }
/* Dải nơ vàng bắt chéo như gói quà: 2 thanh màu phẳng (dọc + ngang), huy hiệu hộp quà (bi-gift-fill) che chỗ giao nhau */
.bag-card__image::before, .bag-hero__art::before, .bag-modal__art::before, .bag-stage__front::before,
.bag-card__image::after, .bag-hero__art::after, .bag-modal__art::after, .bag-stage__front::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none; background: rgba(245, 158, 11, .9);
}
.bag-card__image::before, .bag-hero__art::before, .bag-modal__art::before, .bag-stage__front::before {
  top: 0; bottom: 0; left: calc(50% - var(--ribbon)); width: calc(var(--ribbon) * 2);
}
.bag-card__image::after, .bag-hero__art::after, .bag-modal__art::after, .bag-stage__front::after {
  left: 0; right: 0; top: calc(50% - var(--ribbon)); height: calc(var(--ribbon) * 2);
}
.bag-card__mystery {
  position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f59e0b;
  border: 2px solid #fff; color: #fff; font-size: 22px; font-weight: 900; line-height: 1;
  animation: bag-float 2.6s ease-in-out infinite;
}
.bag-card__mystery .bi { font-size: .8em; line-height: 1; }
.bag-card:nth-child(3n+2) .bag-card__mystery { animation-delay: -.9s; }
.bag-card:nth-child(3n) .bag-card__mystery { animation-delay: -1.7s; }
.bag-card:hover .bag-card__mystery, .bag-card.is-picking .bag-card__mystery { animation: bag-shake .45s ease-in-out infinite; }
.bag-card__mystery--lg { width: 64px; height: 64px; font-size: 34px; border-width: 3px; }
.bag-card__no {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: rgba(var(--shade), .8); color: #fff; font-size: 12px; font-weight: 900;
  font-variant-numeric: tabular-nums; backdrop-filter: blur(4px);
}
.bag-card__body { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 10px 12px; }
.bag-card__name { max-width: 100%; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-card__price { font-size: 14px; font-weight: 800; color: #2563eb; }
:root[data-theme="dark"] .bag-card__price { color: #60a5fa; }
.bag-card__cta {
  display: block; width: 100%; margin-top: 6px; height: 30px; line-height: 30px; border-radius: var(--radius-sm);
  background: #f97316; color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .3px; transition: background var(--transition-fast);
}
.bag-card:hover .bag-card__cta { background: #ea580c; }

@keyframes bag-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}
@keyframes bag-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-12deg); }
  75% { transform: translate(-50%, -50%) rotate(12deg); }
}

/* Chế độ "Chọn nhiều túi" (trang gói): mỗi túi có vòng chọn, túi đã chọn viền màu chính + dấu tích; nút đổi chữ */
.bag-card__check {
  position: absolute; top: 8px; right: 8px; z-index: 4; display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(var(--shade), .45);
  color: transparent; font-size: 14px;
}
.is-selecting .bag-card__check { display: inline-flex; }
.is-selecting .bag-card.is-selected { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: -1px; }
.is-selecting .bag-card.is-selected .bag-card__check { background: var(--primary); color: #fff; }
.is-selecting .bag-card__cta { font-size: 0; background: var(--bg); color: var(--text-secondary); outline: 1px solid var(--border); outline-offset: -1px; }
.is-selecting .bag-card__cta::after { content: "CHỌN TÚI"; font-size: 12px; }
.is-selecting .bag-card:hover .bag-card__cta { background: var(--bg); color: var(--primary); }
.is-selecting .bag-card.is-selected .bag-card__cta { background: var(--primary); color: #fff; outline: 0; }
.is-selecting .bag-card.is-selected .bag-card__cta::after { content: "ĐÃ CHỌN"; }

/* Lưới gọn (trang gói, lưu localStorage): ô vuông nhỏ chỉ còn số túi */
/* (độ ưu tiên 2 lớp để thắng số cột theo cỡ màn của .bag-grid / .bag-card ở các @media phía dưới) */
.bag-grid.bag-grid--compact { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bag-grid--compact .bag-card { border-radius: 10px; }
.bag-grid--compact .bag-card .bag-card__image { aspect-ratio: 1; --ribbon: 4px; }
.bag-grid--compact .bag-card .bag-card__mystery { width: 26px; height: 26px; font-size: 15px; border-width: 1.5px; }
.bag-grid--compact .bag-card .bag-card__no { top: auto; left: 50%; bottom: 5px; transform: translateX(-50%); padding: 1px 8px; font-size: 11.5px; }
.bag-grid--compact .bag-card .bag-card__check { top: 5px; right: 5px; width: 20px; height: 20px; font-size: 12px; }
.bag-grid--compact .bag-card .bag-card__body { display: none; }

/* Hộp xác nhận mở túi (#bagModal): bố cục gọn để vừa 1 khung không phải cuộn —
   ảnh nhỏ cạnh tên gói / túi đã chọn / giá → số lượng → tổng + số dư → nút → ghi chú. Phẳng: không đổ bóng. */
/* Cao tối đa gần trọn màn (khung chung chỉ 85–90vh) → màn laptop thấp / điện thoại vẫn không phải cuộn */
.bag-modal .modal-dialog { max-width: 460px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); box-shadow: none; }
.bag-modal .modal-header { padding: 12px 16px; }
.bag-modal .modal-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.bag-modal .modal-body { padding: 14px 16px 16px; }
.bag-modal__product { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.bag-modal__stack { position: relative; flex: none; width: 136px; }
/* Mở nhiều túi: 2 "túi" xếp chồng phía sau ảnh chính */
.bag-modal__stack::before, .bag-modal__stack::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); opacity: 0;
  background: #f59e0b; transition: opacity .25s ease, transform .25s ease;
}
.bag-modal__stack::after { background: var(--accent-hover); }
.bag-modal__stack.is-multi { margin: 0 6px 4px 0; }
.bag-modal__stack.is-multi::before { opacity: .6; transform: rotate(-4deg) translate(-4px, 3px); }
.bag-modal__stack.is-multi::after { opacity: .35; transform: rotate(4deg) translate(5px, 5px); }
.bag-modal__stack .bag-modal__art { z-index: 1; }
.bag-modal__art { border-radius: var(--radius-sm); --ribbon: 5px; }
.bag-modal__art .bag-card__mystery { width: 32px; height: 32px; font-size: 18px; }
.bag-modal__art .bag-card__no { top: 5px; left: 5px; padding: 1px 7px; font-size: 11px; }
.bag-modal__count {
  position: absolute; top: 5px; right: 5px; z-index: 3; padding: 1px 8px; border-radius: var(--radius-full);
  background: #f97316; color: #fff; font-size: 11.5px; font-weight: 900;
}
.bag-modal__info { display: grid; gap: 3px; min-width: 0; }
.bag-modal__name { font-size: 15px; font-weight: 900; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.bag-modal__picked { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.bag-modal__unit { font-size: 12.5px; color: var(--text-muted); }
.bag-modal__unit b { color: var(--text); }
/* Trang đơn: dòng "Túi đã chọn" (nhiều số túi) */
.bag-modal__bags { text-align: right; max-width: 65%; word-break: break-word; }
.bag-modal__sum { display: grid; gap: 2px; margin: 12px 0; }
.bag-modal__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.bag-modal__total b { font-size: 22px; font-weight: 900; letter-spacing: -.3px; color: var(--text); }
.bag-modal__balance { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.bag-modal__balance b { font-weight: 700; color: var(--text-secondary); }
.bag-modal__captcha { margin-bottom: 10px; }

.bag-qty { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); }
.bag-qty__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.bag-qty__head small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.bag-qty__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bag-qty__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bag-qty__chip {
  min-width: 44px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 900;
  transition: all var(--transition-fast);
}
.bag-qty__chip:hover { border-color: var(--accent); color: var(--accent-hover); }
.bag-qty__chip.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.bag-qty__chip[disabled] { opacity: .35; cursor: not-allowed; border-color: var(--border); background: var(--bg-card); color: var(--text-muted); }
.bag-qty__stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); overflow: hidden; }
.bag-qty__stepper button { width: 34px; height: 34px; font-size: 18px; font-weight: 900; color: var(--text); }
.bag-qty__stepper button:hover { background: var(--accent-light); color: var(--accent-hover); }
.bag-qty__stepper button[disabled] { opacity: .35; cursor: not-allowed; background: none; }
.bag-qty__stepper input {
  width: 46px; height: 34px; border: 0; border-inline: 1px solid var(--border); background: transparent;
  text-align: center; font-size: 14px; font-weight: 900; color: var(--text); -moz-appearance: textfield; appearance: textfield;
}
.bag-qty__stepper input::-webkit-outer-spin-button, .bag-qty__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bag-qty__stepper input:focus { outline: none; background: var(--accent-light); }

/* Đang gửi lệnh mở túi: túi rung + phát sáng, huy hiệu hộp quà xoay */
.bag-modal.is-opening .bag-modal__art { animation: bag-art-shake .35s ease-in-out infinite; outline: 3px solid #fbbf24; outline-offset: 0; }
.bag-modal.is-opening .bag-modal__art .bag-card__mystery { animation: bag-spin .7s linear infinite; }
.bag-modal.is-opening .bag-qty { opacity: .5; pointer-events: none; }
.bag-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: bag-btn-spin .7s linear infinite; }
@keyframes bag-art-shake {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-2.5deg) scale(1.02); }
  75% { transform: rotate(2.5deg) scale(1.02); }
}
@keyframes bag-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bag-btn-spin { to { transform: rotate(360deg); } }
.bag-modal__note { margin-top: 8px; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--text-secondary); }
.bag-modal__note:empty { display: none; }
.bag-modal__fair { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.45; text-align: center; color: var(--text-muted); }
.bag-modal__fair .bi { flex: none; }
.bag-modal__fair span { text-wrap: balance; }

/* Trang đơn: túi vừa mở */
.bag-reveal {
  display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 16px;
  border: 1.5px solid rgba(34, 197, 94, .45); border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.bag-reveal__art { position: relative; width: 140px; flex-shrink: 0; aspect-ratio: 16 / 10; }
.bag-reveal__art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.bag-reveal__burst { position: absolute; top: -12px; right: -10px; font-size: 26px; line-height: 1; color: #f59e0b; }
.bag-reveal__text { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.bag-reveal__text strong { display: block; font-size: 17px; font-weight: 900; color: #16a34a; }
:root[data-theme="dark"] .bag-reveal__text strong { color: #4ade80; }
.bag-reveal__count {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--radius-full);
  background: #f97316; color: #fff; font-size: 12px; font-weight: 900;
}
.bag-reveal__warn { display: block; margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent-hover); font-weight: 700; font-size: 12.5px; }
.bag-reveal__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.bag-reveal__more, .bag-reveal__replay { font-weight: 800; color: var(--primary); font-size: 13.5px; }
.bag-reveal__replay:hover, .bag-reveal__more:hover { text-decoration: underline; }

/* Tiêu đề panel có nút bên phải (VD: "Sao chép tất cả") */
.panel__head-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.panel__head-row .panel__title { margin-bottom: 0; }
.cred-box__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); font-weight: 900; color: #16a34a; font-size: 13.5px; }
.cred-box__head small { color: var(--text-muted); font-weight: 700; }
:root[data-theme="dark"] .cred-box__head { color: #4ade80; }

/* ==========================================================================
   Màn hình mở túi (trang đơn): túi rung → lần lượt bật mở (lật thẻ, loé sáng, pháo giấy) → hiện acc
   ========================================================================== */
.bag-stage {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  padding: 20px 16px; overflow-y: auto;
  background: rgba(2, 6, 23, .9);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .bag-stage { background: rgba(0, 0, 0, .92); }
.bag-stage.is-active { display: flex; animation: bag-stage-fade .3s ease both; }
.bag-stage__panel { width: 100%; max-width: 780px; margin: auto; text-align: center; color: #fff; }
.bag-stage__title { font-size: 26px; font-weight: 900; letter-spacing: -.3px; }
.bag-stage__sub { margin: 4px 0 22px; font-size: 13.5px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.bag-stage__grid { --size: 132px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bag-stage__grid[data-count="1"] { --size: 230px; }
.bag-stage__grid[data-count="2"], .bag-stage__grid[data-count="3"] { --size: 170px; }
.bag-stage__item { position: relative; width: var(--size); perspective: 900px; }
.bag-stage.is-active .bag-stage__item { animation: bag-stage-in .45s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 70ms); }
.bag-stage__flip { position: relative; aspect-ratio: 10 / 9; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.bag-stage__face {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.bag-stage__front .bag-card__mystery { width: 44px; height: 44px; font-size: 24px; }
.bag-stage__grid[data-count="1"] .bag-stage__front .bag-card__mystery { width: 64px; height: 64px; font-size: 34px; }
.bag-stage__back {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px;
  background: #fbbf24; color: #451a03;
  border: 2px solid rgba(255, 255, 255, .85);
}
.bag-stage__back b { max-width: 100%; font-size: 14px; font-weight: 900; word-break: break-all; }
.bag-stage__back small { font-size: 11.5px; font-weight: 800; opacity: .8; }
.bag-stage__check {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #16a34a; color: #fff; font-size: 20px; font-weight: 900;
}
.bag-stage__grid[data-count="1"] .bag-stage__back b { font-size: 18px; }
.bag-stage__item.is-shaking { animation: bag-stage-shake .32s ease-in-out infinite; }
.bag-stage__item.is-shaking .bag-stage__front { outline: 3px solid #fbbf24; outline-offset: 0; }
.bag-stage__item.is-shaking .bag-card__mystery { animation: bag-spin .6s linear infinite; }
.bag-stage__item.is-open .bag-stage__flip { transform: rotateY(180deg); }
/* Vòng sáng loang ra khi túi bật mở (viền màu phẳng) */
.bag-stage__item::after {
  content: ""; position: absolute; inset: -10%; z-index: 2; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 4px solid #fde047;
}
.bag-stage__item.is-open::after { animation: bag-stage-flash .75s ease-out; }
.bag-stage__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.bag-stage__actions .btn-buy { width: auto; min-width: 260px; padding: 0 28px; }
.bag-stage__skip { color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, .25); }
.bag-stage__skip:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
/* Nút loa góc trên phải: bật / tắt âm thanh mở túi */
.bag-stage__sound {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); font-size: 18px;
}
.bag-stage__sound:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.bag-stage__sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bag-stage__sound[aria-pressed="false"] { color: rgba(255, 255, 255, .5); }
.bag-stage__fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bag-confetti {
  position: fixed; width: 9px; height: 13px; border-radius: 2px; pointer-events: none;
  animation: bag-confetti 1.1s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes bag-stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bag-stage-in { from { opacity: 0; transform: translateY(24px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bag-stage-shake {
  0%, 100% { transform: rotate(0) scale(1.02); }
  25% { transform: rotate(-5deg) scale(1.05); }
  75% { transform: rotate(5deg) scale(1.05); }
}
@keyframes bag-stage-flash {
  0% { opacity: 0; transform: scale(.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes bag-confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 360deg)); }
}

@media (max-width: 1200px) { .bag-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 992px) {
  .bag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 768px) { .bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 540px) {
  .bag-grid { gap: 8px; }
  .bag-card { border-radius: 10px; }
  .bag-card__image { --ribbon: 5px; }
  .bag-card .bag-card__mystery { width: 30px; height: 30px; font-size: 17px; }
  .bag-card .bag-card__no { top: 5px; left: 5px; padding: 2px 6px; font-size: 10.5px; }
  .bag-card__mystery--lg { width: 52px; height: 52px; font-size: 28px; }
  .bag-card__body { padding: 7px 6px 8px; }
  .bag-card__name { font-size: 11.5px; }
  .bag-card__price { font-size: 12.5px; }
  .bag-card__cta { height: 26px; line-height: 26px; font-size: 10.5px; letter-spacing: 0; }
  .bag-section__actions { width: 100%; }
  .bag-section__actions > * { flex: 1; }
  .bag-reveal { flex-direction: column; text-align: center; }
  .bag-reveal__art { width: 180px; }
  .bag-reveal__links { justify-content: center; }
  .bag-qty__row { justify-content: center; }
  .bag-modal__stack { width: 112px; }
  .bag-modal__product { gap: 12px; }
  .bag-stage__title { font-size: 21px; }
  .bag-stage__grid { --size: 96px; gap: 10px; }
  .bag-stage__grid[data-count="1"] { --size: 200px; }
  .bag-stage__grid[data-count="2"], .bag-stage__grid[data-count="3"] { --size: 104px; }
  .bag-stage__front .bag-card__mystery { width: 32px; height: 32px; font-size: 18px; }
  .bag-stage__front .bag-card__no { top: 5px; left: 5px; padding: 2px 6px; font-size: 10.5px; }
  .bag-stage__back { padding: 6px; }
  .bag-stage__back b { font-size: 11.5px; }
  .bag-stage__back small { font-size: 10px; }
  .bag-stage__check { width: 26px; height: 26px; font-size: 15px; }
  .bag-stage__actions .btn-buy { min-width: 0; width: 100%; }
}
@media (max-width: 380px) { .bag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hộp xác nhận trên điện thoại: khung sát mép hơn; màn hẹp 4 nút số lượng + ô ± vẫn vừa 1 hàng */
@media (max-width: 540px) {
  .bag-modal.modal-overlay { padding: 10px; }
}
@media (max-width: 420px) {
  .bag-modal .modal-body { padding: 12px; }
  .bag-qty__chips { gap: 4px; }
  .bag-qty__chip { min-width: 38px; padding: 0 6px; }
  .bag-qty__stepper button { width: 32px; }
  .bag-qty__stepper input { width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-card__mystery, .bag-card:hover .bag-card__mystery, .bag-card.is-picking .bag-card__mystery,
  .bag-modal.is-opening .bag-modal__art, .bag-modal.is-opening .bag-modal__art .bag-card__mystery,
  .bag-stage.is-active, .bag-stage.is-active .bag-stage__item, .bag-stage__item.is-shaking,
  .bag-stage__item.is-shaking .bag-card__mystery, .bag-stage__item.is-open::after { animation: none; }
  .bag-card, .bag-card__image img, .bag-random-btn, .bag-modal__stack::before, .bag-modal__stack::after, .bag-stage__flip { transition: none; }
  .bag-confetti { display: none; }
}

/* ==========================================================================
   Nạp tiền: menu "Nạp tiền" trên header, hộp chọn #topupModal (tiền tố topup-)
   Trang Nạp thẻ (/nap-the) ở mục "Nạp thẻ cào" (nt-), trang Nạp ATM (/nap-atm) ở mục "Nạp ATM" (at-) cuối file
   ========================================================================== */
/* Hình minh hoạ (component x-topup-icon): vòng viền huy hiệu theo màu nền thẻ */
.topup-icon { display: block; flex-shrink: 0; }
.topup-icon__ring { stroke: var(--bg-card); }

/* 1 hình thức nạp: icon + "Nạp thẻ / Thẻ cào tự động" (menu header, hộp chọn, đầu trang nạp) */
.topup-option {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius); color: var(--text); text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.topup-option:hover, .topup-option:focus-visible { background: var(--primary-light); outline: none; }
.topup-option__text { display: grid; gap: 2px; min-width: 0; }
.topup-option__text strong { font-size: 15.5px; font-weight: 900; line-height: 1.3; color: var(--text); }
.topup-option__text small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.topup-option.is-current strong { color: var(--primary); }

/* Menu thả xuống của nút Nạp tiền */
.topup-menu { position: relative; flex-shrink: 0; }
.topup-menu__caret { font-size: 11px; transition: transform .18s ease; }
.topup-menu.is-open .btn--nap { background: #1d4ed8; }
.topup-menu.is-open .topup-menu__caret { transform: rotate(180deg); }
.btn--nap:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.topup-menu__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
  display: grid; gap: 2px; width: 310px; max-width: calc(100vw - 24px); padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.topup-menu.is-open .topup-menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.topup-menu__panel .topup-option, .topup-choices .topup-option { gap: 16px; }
.topup-menu__panel .topup-icon, .topup-choices .topup-icon { width: 52px; height: 52px; }
.topup-menu__panel .topup-option__text strong, .topup-choices .topup-option__text strong { font-size: 16.5px; }
.topup-menu__panel .topup-option__text small, .topup-choices .topup-option__text small { font-size: 13.5px; }

/* Hộp chọn hình thức nạp (thanh dưới mobile, menu tài khoản, trang đơn…) */
.topup-modal { max-width: 420px; }
.topup-choices { display: grid; gap: 10px; }
.topup-choices .topup-option { padding: 14px 16px; border: 1.5px solid var(--border); }
.topup-choices .topup-option:hover, .topup-choices .topup-option:focus-visible { border-color: var(--primary); }
.topup-choices__note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.topup-choices__note b { font-weight: 900; color: var(--red); }

/* Nút Nạp tiền không nằm sát mép phải (còn avatar / nút menu) → menu canh theo cả cụm nút header để không tràn ra ngoài */
@media (max-width: 640px) {
  .topup-menu { position: static; }
  .topup-menu__panel { top: calc(100% + 10px); }
  .topup-menu__caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .topup-menu__panel, .topup-menu__caret { transition: none; }
}

/* ==========================================================================
   Lịch sử mua hàng (/tai-khoan/don-hang): chỉ số, hạng thành viên, "Cần xử lý" (trả nhanh bằng ví),
   tab trạng thái + bộ lọc, thẻ đơn (menu ⋯), thống kê chi tiêu. Tiền tố: oh-
   ========================================================================== */
/* minmax(0, 1fr): cột lưới được co nhỏ hơn nội dung (tab cuộn ngang, tên dài) — không đẩy trang tràn phải */
.oh-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.oh-page .panel + .panel { margin-top: 0; }

.oh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.oh-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.oh-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.oh-btn--primary { background: var(--primary); color: #fff; }
.oh-btn--primary:hover { background: var(--primary-hover); }
.oh-btn--pay { background: #f97316; color: #fff; }
.oh-btn--pay:hover { background: #ea580c; }
.oh-btn--view { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .4); color: #15803d; }
.oh-btn--view:hover { background: rgba(34, 197, 94, .18); }
.oh-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.oh-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* Đầu trang + chỉ số */
.oh-head__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.oh-head__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.oh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.oh-kpi {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  transition: border-color var(--transition-fast);
}
a.oh-kpi:hover { border-color: var(--primary); }
a.oh-kpi:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.oh-kpi > div { display: grid; gap: 1px; min-width: 0; }
.oh-kpi small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.oh-kpi b { font-size: 18px; font-weight: 900; line-height: 1.3; letter-spacing: -.2px; color: var(--text); overflow-wrap: anywhere; }
.oh-kpi > div > span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.oh-kpi--alert { background: rgba(249, 115, 22, .06); border-color: rgba(249, 115, 22, .45); }
.oh-kpi__icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.oh-kpi__icon--green { background: rgba(34, 197, 94, .12); color: #16a34a; }
.oh-kpi__icon--blue { background: var(--primary-light); color: var(--primary); }
.oh-kpi__icon--orange { background: rgba(249, 115, 22, .12); color: #ea580c; }
.oh-kpi__icon--purple { background: rgba(139, 92, 246, .14); color: #7c3aed; }

/* Hạng thành viên: thanh tiến độ màu theo hạng, rãnh = bước nhạt của cùng màu */
.oh-tier { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border-hover); border-radius: var(--radius); }
.oh-tier__icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--tier);
  background: var(--bg); background: color-mix(in srgb, var(--tier) 15%, transparent);
}
.oh-tier__body { flex: 1; display: grid; gap: 7px; min-width: 0; }
.oh-tier__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; color: var(--text-secondary); }
.oh-tier__line strong { font-size: 14.5px; font-weight: 900; color: var(--text); }
.oh-tier__line b { color: var(--text); }
.oh-tier__bar { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--bg); background: color-mix(in srgb, var(--tier) 18%, var(--bg)); }
.oh-tier__bar span { display: block; height: 100%; border-radius: inherit; background: var(--tier); }
.oh-tier__meta { flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.oh-tier__meta b { font-size: 15px; font-weight: 900; color: var(--text); }

/* Cần xử lý */
.oh-attention { border-color: rgba(249, 115, 22, .4); }
.oh-attention .panel__title::before { background: #f97316; }
.oh-attention__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.oh-attention__head .panel__title { margin-bottom: 0; }
.oh-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: #f97316; color: #fff; font-size: 12px; font-weight: 900;
}
.oh-wallet { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: var(--radius-full); background: var(--bg); font-size: 13px; color: var(--text-secondary); }
.oh-wallet > i { color: var(--text-muted); }
.oh-wallet b { font-weight: 900; color: var(--red); }
.oh-link { height: 28px; padding: 0 12px; border-radius: var(--radius-full); background: #2563eb; color: #fff; font-size: 12px; font-weight: 800; transition: background var(--transition-fast); }
.oh-link:hover { background: #1d4ed8; }
.oh-link:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.oh-attention__hint {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: rgba(34, 197, 94, .08); color: #15803d; font-size: 12.5px; font-weight: 700;
}
.oh-due-list { display: grid; gap: 8px; }
.oh-due {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 130px 150px; align-items: center; gap: 14px;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.oh-due.is-urgent { border-color: rgba(239, 68, 68, .45); box-shadow: inset 3px 0 0 var(--red); }
.oh-due__thumb img { display: block; width: 64px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--media-bg); }
.oh-due__main { min-width: 0; }
.oh-due__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 800; color: var(--text); }
.oh-due__name:hover { color: var(--primary); }
.oh-due__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.oh-due__amount { display: grid; justify-items: end; gap: 1px; text-align: right; }
.oh-due__amount small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.oh-due__amount > b { font-size: 16px; font-weight: 900; color: var(--red); }
.oh-due__time { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.oh-due__time b { font-variant-numeric: tabular-nums; color: var(--text); }
.oh-due.is-urgent .oh-due__time, .oh-due.is-urgent .oh-due__time b { color: var(--red); }
.oh-due__actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oh-due__actions form { display: grid; }
.oh-due__short { font-size: 11.5px; font-weight: 700; text-align: center; color: var(--text-muted); }

/* Tab trạng thái (dạng phân đoạn, cuộn ngang trên màn hẹp) */
.oh-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; overflow-x: auto; background: var(--bg); border-radius: var(--radius); scrollbar-width: none; }
.oh-tabs::-webkit-scrollbar { display: none; }
.oh-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; white-space: nowrap; color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.oh-tab:hover { color: var(--primary); }
.oh-tab:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -3px; }
.oh-tab.is-active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-sm); }
.oh-tab__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 900;
}
.oh-tab.is-active .oh-tab__count { background: var(--primary-light); color: var(--primary); }
.oh-tab__count.is-alert, .oh-tab.is-active .oh-tab__count.is-alert { background: #f97316; color: #fff; }

/* Tìm kiếm + bộ lọc */
/* Ô chọn tự gửi form khi đổi (data-auto-submit); ô tìm gửi bằng Enter hoặc nút "Tìm" */
.oh-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.oh-filters .form-input { width: auto; height: 40px; }
.oh-filters select.form-input { flex: 1 1 120px; min-width: 0; padding: 0 8px; cursor: pointer; }
.oh-search { position: relative; flex: 2 1 240px; min-width: 0; }
.oh-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-muted); pointer-events: none; }
.oh-filters .oh-search .form-input { width: 100%; padding: 0 64px 0 36px; }
.oh-search__submit {
  position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 12px; border-radius: 5px;
  background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 800; transition: background var(--transition-fast);
}
.oh-search__submit:hover { background: var(--primary-hover); }
.oh-search__submit:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.oh-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); }
.oh-summary b { color: var(--text); }
.oh-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--radius-full);
  background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 800; transition: background var(--transition-fast), color var(--transition-fast);
}
.oh-chip:hover, .oh-chip:focus-visible { background: var(--primary); color: #fff; outline: none; }
.oh-summary__reset { font-size: 12.5px; font-weight: 700; color: var(--red); }
.oh-summary__reset:hover { text-decoration: underline; }
.oh-per-page { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.oh-per-page .form-input { width: auto; height: 32px; padding: 0 8px; font-size: 12.5px; cursor: pointer; }

/* Thẻ đơn */
.oh-cards { display: grid; gap: 10px; }
.oh-month { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.oh-month::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oh-cards > .oh-month:first-child { margin-top: 0; }
.oh-card {
  position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px;
  padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px); transition: border-color var(--transition-fast);
}
.oh-card:hover { border-color: var(--border-hover); }
/* Vạch màu bên trái: đơn cần trả tiền (cam), đang cọc (tím), sắp hết hạn (đỏ) */
.oh-card::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.oh-card--pending::before { background: #f97316; }
.oh-card--deposit_paid::before { background: #8b5cf6; }
.oh-card.is-urgent::before { background: var(--red); }
.oh-card:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.oh-card__thumb { position: relative; display: block; align-self: start; }
.oh-card__thumb img { display: block; width: 104px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--media-bg); }
.oh-card__qty { position: absolute; left: 5px; bottom: 5px; padding: 1px 7px; border-radius: var(--radius-full); background: #f97316; color: #fff; font-size: 11px; font-weight: 900; }
.oh-card__main { display: grid; align-content: start; gap: 6px; min-width: 0; }
.oh-card__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 800; line-height: 1.35; color: var(--text); overflow-wrap: anywhere;
}
.oh-card__name:hover { color: var(--primary); }
.oh-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.oh-card__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.oh-code {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.oh-code i { font-size: 11px; color: var(--text-muted); }
.oh-code:hover, .oh-code:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.oh-card__state { display: grid; justify-items: start; gap: 5px; }
.oh-note { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--text-secondary); }
.oh-note > i { flex-shrink: 0; margin-top: 2px; }
.oh-note b { font-variant-numeric: tabular-nums; }
.oh-note--ok { color: #15803d; }
.oh-note--warn { color: #c2410c; }
.oh-note--danger { color: #dc2626; }
.oh-note--info { color: #6d28d9; }
.oh-note--muted { font-weight: 600; color: var(--text-muted); }
.oh-progress { width: 100%; max-width: 320px; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: rgba(139, 92, 246, .16); }
.oh-progress span { display: block; height: 100%; border-radius: inherit; background: #8b5cf6; }
.oh-progress--sm { max-width: 220px; height: 5px; margin-top: 6px; }
.oh-rebuy { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.oh-rebuy:hover { text-decoration: underline; }
.oh-card__side { display: grid; justify-items: end; align-content: start; gap: 6px; min-width: 150px; text-align: right; }
.oh-card__money b { display: block; font-size: 16px; font-weight: 900; color: var(--text); }
.oh-card__money small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.oh-card__money em { font-style: normal; font-weight: 900; color: var(--red); }
.oh-card__actions { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

/* Menu ⋯ của thẻ đơn (details.dropdown: app.js đóng khi bấm ra ngoài / Esc) */
.oh-menu { position: relative; }
.oh-menu__toggle {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.oh-menu__toggle::-webkit-details-marker { display: none; }
.oh-menu__toggle::marker { content: ""; }
.oh-menu__toggle:hover, .oh-menu[open] .oh-menu__toggle { border-color: var(--primary); color: var(--primary); }
.oh-menu__toggle:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.oh-menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; width: 240px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); text-align: left;
}
.oh-menu__panel a, .oh-menu__panel button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: var(--text); text-align: left;
}
.oh-menu__panel i { width: 16px; flex-shrink: 0; color: var(--text-muted); }
.oh-menu__panel a:hover, .oh-menu__panel button:hover, .oh-menu__panel a:focus-visible, .oh-menu__panel button:focus-visible { background: var(--primary-light); color: var(--primary); outline: none; }
.oh-menu__panel a:hover i, .oh-menu__panel button:hover i { color: var(--primary); }
.oh-menu__panel form { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--border); }
.oh-menu__panel .is-danger, .oh-menu__panel .is-danger i, .oh-menu__panel .is-danger:hover i { color: var(--red); }
.oh-menu__panel .is-danger:hover, .oh-menu__panel .is-danger:focus-visible { background: rgba(239, 68, 68, .08); color: var(--red); }

/* Trống */
.oh-empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--border-hover); border-radius: var(--radius-lg); }
.oh-empty--compact { padding: 28px 16px; }
.oh-empty__icon {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 28px;
}
.oh-empty strong { display: block; font-size: 16px; font-weight: 900; color: var(--text); }
.oh-empty p { max-width: 440px; margin: 6px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.oh-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* Thống kê: biểu đồ cột 1 chuỗi (màu primary, cột ≤ 24px, đầu cột bo 4px, gốc vuông, lưới 1px) + game mua nhiều */
.oh-insights__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.oh-insights__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
.oh-insights__head h3 { font-size: 14px; font-weight: 800; color: var(--text); }
.oh-insights__head span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.oh-insights__empty { font-size: 13px; color: var(--text-muted); }
.oh-chart__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 150px auto; column-gap: 8px; padding-top: 22px; }
.oh-chart__ticks {
  display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0;
  font-size: 11px; font-weight: 700; line-height: 14px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.oh-chart__area { position: relative; }
.oh-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.oh-chart__grid span { height: 1px; background: var(--border); }
.oh-chart__cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 100%; }
.oh-chart__col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; border-radius: 6px; outline: none; }
.oh-chart__col::before { content: ""; position: absolute; inset: 0 8%; border-radius: 6px; background: var(--primary-light); opacity: 0; transition: opacity var(--transition-fast); }
.oh-chart__col:hover::before, .oh-chart__col:focus-visible::before { opacity: 1; }
.oh-chart__col:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-glow); }
/* --h (đặt trên cột) = chiều cao thanh so với mốc trục trên cùng; tooltip neo ngay trên đỉnh thanh */
.oh-chart__bar { position: relative; width: min(24px, 60%); height: var(--h, 0%); border-radius: 4px 4px 0 0; background: var(--primary); }
.oh-chart__value { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--text); }
.oh-chart__tip {
  position: absolute; bottom: calc(var(--h, 0%) + 10px); left: 50%; z-index: 5; display: grid; gap: 1px; min-width: 132px; padding: 8px 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; color: var(--text-secondary);
  opacity: 0; visibility: hidden; transform: translateX(-50%); pointer-events: none;
  transition: opacity .12s ease, visibility .12s;
}
.oh-chart__tip b { font-size: 13.5px; font-weight: 900; color: var(--text); }
.oh-chart__col:first-child .oh-chart__tip { left: 0; transform: none; }
.oh-chart__col:last-child .oh-chart__tip { left: auto; right: 0; transform: none; }
.oh-chart__col:hover .oh-chart__tip, .oh-chart__col:focus-visible .oh-chart__tip { opacity: 1; visibility: visible; }
.oh-chart__labels { grid-column: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 6px; font-size: 11.5px; font-weight: 700; text-align: center; color: var(--text-muted); }
.oh-chart__labels .is-current { color: var(--text); }
.oh-chart__table { margin-top: 10px; font-size: 12.5px; }
.oh-chart__table summary { width: fit-content; cursor: pointer; font-weight: 700; color: var(--primary); }
.oh-chart__table table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.oh-chart__table th, .oh-chart__table td { padding: 6px 0; border-bottom: 1px dashed var(--border); text-align: left; }
.oh-chart__table th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); }
.oh-chart__table td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.oh-chart__table th:not(:first-child), .oh-chart__table td:not(:first-child) { padding-left: 10px; text-align: right; }
.oh-games { display: grid; align-content: start; gap: 2px; }
.oh-game { display: grid; gap: 5px; margin: 0 -8px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); transition: background var(--transition-fast); }
.oh-game:hover, .oh-game:focus-visible { background: var(--bg); outline: none; }
.oh-game__line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.oh-game__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.oh-game__value { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.oh-game__value b { font-weight: 900; color: var(--text); }
.oh-game__bar { height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--primary-light); }
.oh-game__bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.oh-facts { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--text-secondary); }
.oh-facts li { display: flex; align-items: flex-start; gap: 8px; }
.oh-facts i { margin-top: 2px; color: var(--text-muted); }
.oh-facts b { color: var(--text); }

/* Dải hỗ trợ cuối trang */
.oh-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oh-help__item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.oh-help__item > i { flex-shrink: 0; font-size: 18px; color: var(--primary); }
.oh-help__item b { display: block; font-size: 13px; color: var(--text); }
.oh-help__item a { font-weight: 800; color: var(--primary); }

:root[data-theme="dark"] .oh-btn--view,
:root[data-theme="dark"] .oh-kpi__icon--green,
:root[data-theme="dark"] .oh-attention__hint,
:root[data-theme="dark"] .oh-note--ok { color: #4ade80; }
:root[data-theme="dark"] .oh-kpi__icon--orange,
:root[data-theme="dark"] .oh-note--warn { color: #fb923c; }
:root[data-theme="dark"] .oh-note--danger { color: #f87171; }
:root[data-theme="dark"] .oh-kpi__icon--purple,
:root[data-theme="dark"] .oh-note--info { color: #a78bfa; }

@media (min-width: 993px) and (max-width: 1200px) {
  .oh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .oh-due { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .oh-due__thumb img { width: 56px; }
  .oh-due__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .oh-due__actions > form, .oh-due__actions > .oh-btn { flex: 1 1 140px; }
  .oh-insights__grid { grid-template-columns: 1fr; }
  .oh-help { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .oh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .oh-head__top { flex-direction: column; margin-bottom: 14px; }
  .oh-head__actions { width: 100%; }
  .oh-head__actions .oh-btn { flex: 1; }
  .oh-kpi { flex-direction: column; gap: 8px; padding: 10px; }
  .oh-kpi b { font-size: 16px; }
  .oh-tier { flex-wrap: wrap; }
  .oh-tier__body { flex-basis: calc(100% - 50px); }
  .oh-tier__meta { width: 100%; padding-left: 50px; text-align: left; }
  .oh-wallet { width: 100%; }
  .oh-wallet .oh-link { margin-left: auto; }
  .oh-due { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; }
  .oh-due__amount { grid-column: 2; justify-items: start; text-align: left; }
  .oh-filters .oh-search { flex-basis: 100%; }
  .oh-filters select.form-input { flex: 1 1 calc(50% - 4px); }
  .oh-per-page { margin-left: 0; }
  .oh-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
  .oh-card__thumb img { width: 76px; }
  .oh-card__name { font-size: 14px; }
  /* Chân thẻ: [trạng thái / tiền] bên trái, nút bên phải */
  .oh-card__side {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 4px 10px;
    min-width: 0; padding-top: 10px; border-top: 1px dashed var(--border); text-align: left;
  }
  .oh-card__side .badge { grid-column: 1; grid-row: 1; }
  .oh-card__money { grid-column: 1; grid-row: 2; }
  .oh-card__money b { font-size: 15px; }
  .oh-card__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .oh-chart__plot { grid-template-rows: 130px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .oh-btn, .oh-kpi, .oh-tab, .oh-chip, .oh-code, .oh-card, .oh-menu__toggle, .oh-chart__col::before, .oh-chart__tip, .oh-game { transition: none; }
}

/* ==========================================================================
   Ví của tôi (/tai-khoan/vi): số dư + nạp nhanh, chỉ số, thẻ đang kiểm tra (tự cập nhật), lịch sử
   biến động số dư / yêu cầu nạp tiền (tab, lọc, phân trang, nhóm theo ngày, bấm mở chi tiết), biểu đồ dòng tiền,
   nguồn tiền vào ví, hướng dẫn nạp. Phẳng: viền + nền, không đổ bóng, 1 màu nhấn; xanh lá / vàng / đỏ chỉ báo ý nghĩa.
   Tiền tố: wl-
   ========================================================================== */
.wl-page {
  /* Màu chữ theo ý nghĩa, pha từ token để đọc rõ trên cả nền sáng lẫn tối */
  --wl-in: color-mix(in srgb, var(--green) 55%, var(--text));
  --wl-warn: color-mix(in srgb, var(--accent) 55%, var(--text));
  --wl-fail: color-mix(in srgb, var(--red) 75%, var(--text));
  /* 2 chuỗi biểu đồ dòng tiền: vào = màu nhấn, ra = cam nút mua (ngoại lệ đã chốt) — đã chạy kiểm tra mù màu + tương phản ≥ 3:1 sáng / tối */
  --wl-series-in: var(--primary);
  --wl-series-out: #ea580c;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
}
.wl-page .panel { box-shadow: none; }
.wl-page .panel + .panel { margin-top: 0; }
.wl-amount.is-in { color: var(--wl-in); }

.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.wl-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.wl-btn--sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.wl-btn--primary { background: var(--primary); color: #fff; }
.wl-btn--primary:hover { background: var(--primary-hover); }
.wl-btn--topup { background: #2563eb; color: #fff; }
.wl-btn--topup:hover { background: #1d4ed8; }
.wl-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.wl-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* Đầu trang: số dư + chỉ số */
.wl-head__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.wl-head__top > .wl-btn { flex-shrink: 0; }
.wl-balance {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.wl-balance__main { display: grid; gap: 4px; min-width: 0; }
.wl-balance__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.wl-balance__label i { color: var(--text-muted); }
.wl-balance__value { font-size: 32px; font-weight: 900; line-height: 1.15; letter-spacing: -.5px; color: var(--text); overflow-wrap: anywhere; }
.wl-balance__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-muted); }
.wl-balance__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.wl-hint {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary); transition: border-color var(--transition-fast);
}
.wl-hint:hover { border-color: var(--primary); }
.wl-hint:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.wl-hint > i { flex-shrink: 0; font-size: 16px; color: var(--wl-warn); }
.wl-hint b { color: var(--text); }
.wl-hint__cta { flex-shrink: 0; margin-left: auto; font-weight: 800; white-space: nowrap; color: var(--primary); }
/* Nhắc nợ (khách đang nợ shop — tự trừ vào lần nạp sau): khối tĩnh, mỗi khoản 1 dòng */
.wl-hint--static { align-items: flex-start; }
.wl-hint--static:hover { border-color: var(--border); }
.wl-hint--static > i { margin-top: 2px; }
.wl-hint__line { display: block; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }

.wl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.wl-kpi {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  transition: border-color var(--transition-fast);
}
a.wl-kpi:hover { border-color: var(--primary); }
a.wl-kpi:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.wl-kpi > div { display: grid; gap: 1px; min-width: 0; }
.wl-kpi small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.wl-kpi b { font-size: 18px; font-weight: 900; line-height: 1.3; letter-spacing: -.2px; color: var(--text); overflow-wrap: anywhere; }
.wl-kpi > div > span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.wl-kpi__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 16px;
}

/* Khối "Đang xử lý" (thẻ đang kiểm tra) */
.wl-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.wl-section-head .panel__title { margin-bottom: 0; }
.wl-count {
  min-width: 22px; height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 12px; font-weight: 800;
}
.wl-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wl-refresh {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--green);
  font-size: 13px; color: var(--text-secondary);
}
.wl-refresh[hidden] { display: none; }
.wl-refresh > i { font-size: 16px; color: var(--wl-in); }
.wl-refresh .wl-btn { margin-left: auto; }

/* Chuyển chế độ xem (gạch chân) + tab loại / trạng thái (dạng chip) */
.wl-views { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.wl-views::-webkit-scrollbar { display: none; }
.wl-view {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.wl-view:hover { color: var(--text); }
.wl-view:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -3px; }
.wl-view.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.wl-view__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 11px; font-weight: 800;
}
.wl-view.is-active .wl-view__count { background: var(--primary-light); color: var(--primary); }
.wl-view__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.wl-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.wl-tab:hover { border-color: var(--border-hover); color: var(--text); }
.wl-tab:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.wl-tab.is-active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.wl-tab__count { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.wl-tab.is-active .wl-tab__count { color: var(--primary); }

/* Tìm kiếm + bộ lọc (ô chọn tự gửi form — data-auto-submit) */
.wl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wl-filters .form-input { width: auto; height: 40px; }
.wl-filters select.form-input { flex: 1 1 130px; min-width: 0; padding: 0 8px; cursor: pointer; }
.wl-search { position: relative; flex: 2 1 260px; min-width: 0; }
.wl-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-muted); pointer-events: none; }
.wl-filters .wl-search .form-input { width: 100%; padding: 0 64px 0 36px; }
.wl-search__submit {
  position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 12px; border-radius: 5px;
  background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 800; transition: background var(--transition-fast);
}
.wl-search__submit:hover { background: var(--primary-hover); }
.wl-search__submit:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.wl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: 13px; color: var(--text-secondary); }
.wl-summary b { color: var(--text); }
.wl-summary__flow { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12.5px; }
.wl-summary__flow b { font-variant-numeric: tabular-nums; }
.wl-summary__flow .wl-amount.is-in { color: var(--wl-in); }
.wl-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--radius-full);
  background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 800;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.wl-chip:hover, .wl-chip:focus-visible { background: var(--primary); color: #fff; outline: none; }
.wl-summary__reset { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.wl-summary__reset:hover { text-decoration: underline; }
.wl-per-page { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.wl-per-page .form-input { width: auto; height: 32px; padding: 0 8px; font-size: 12.5px; cursor: pointer; }

/* Sổ biến động: nhóm theo ngày, mỗi dòng là <details> bấm để xem chi tiết */
.wl-ledger { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wl-day {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2px 10px; padding: 8px 14px;
  background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; color: var(--text-secondary);
}
.wl-day__sum { display: inline-flex; gap: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.wl-tx { border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px); }
.wl-ledger > .wl-tx:last-child { border-bottom: 0; }
.wl-tx__summary {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  padding: 12px 14px; list-style: none; cursor: pointer; transition: background var(--transition-fast);
}
.wl-tx__summary::-webkit-details-marker { display: none; }
.wl-tx__summary::marker { content: ""; }
.wl-tx__summary:hover, .wl-tx[open] > .wl-tx__summary { background: var(--bg); }
.wl-tx__summary:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -3px; }
.wl-tx:target > .wl-tx__summary { background: var(--primary-light); }
.wl-icon {
  width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-secondary); font-size: 16px;
}
.wl-tx__main { display: grid; gap: 2px; min-width: 0; }
.wl-tx__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 800; color: var(--text); }
.wl-tx__meta, .wl-topup__main small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wl-tx__meta > * + *::before, .wl-topup__main small > * + *::before { content: "·"; margin: 0 7px; color: var(--border-hover); }
.wl-tx__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .2px; color: var(--text-secondary); }
.wl-tx__money { display: grid; justify-items: end; gap: 1px; text-align: right; }
.wl-tx__money b { font-size: 15px; font-weight: 900; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.wl-tx__money small { font-size: 11.5px; white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wl-tx__chevron { font-size: 13px; color: var(--text-muted); transition: transform var(--transition-fast); }
.wl-tx[open] .wl-tx__chevron { transform: rotate(180deg); }
.wl-tx__body { padding: 2px 14px 14px 62px; background: var(--bg); }
.wl-dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.wl-dl > div { display: grid; gap: 1px; min-width: 0; }
.wl-dl dt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.wl-dl dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wl-tx__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Yêu cầu nạp tiền (cũng dùng cho khối "Đang xử lý") */
.wl-topups { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wl-topup { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wl-topup:last-child { border-bottom: 0; }
.wl-topup--wait { box-shadow: inset 3px 0 0 var(--accent); }
.wl-topup--fail { box-shadow: inset 3px 0 0 var(--red); }
.wl-topup__main { display: grid; gap: 2px; min-width: 0; }
.wl-topup__main strong { font-size: 14px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.wl-topup__main small.wl-topup__note { display: block; font-weight: 600; color: var(--text-secondary); }
.wl-topup__main small.wl-topup__note.is-fail { color: var(--wl-fail); }
.wl-topup__side { display: grid; justify-items: end; gap: 3px; text-align: right; }
.wl-topup__side b { font-size: 14.5px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-topup__side small { font-size: 11.5px; color: var(--text-muted); }
.wl-topup__retry { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.wl-topup__retry:hover { text-decoration: underline; }
.wl-status {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--bg); color: var(--text-secondary); font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.wl-status--ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--wl-in); }
.wl-status--wait, .wl-status--warn { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--wl-warn); }
.wl-status--fail { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--wl-fail); }
.wl-status--off { color: var(--text-muted); }

/* Trống */
.wl-empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--border-hover); border-radius: var(--radius-lg); }
.wl-empty--compact { padding: 28px 16px; }
.wl-empty__icon {
  width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 26px;
}
.wl-empty strong { display: block; font-size: 16px; font-weight: 900; color: var(--text); }
.wl-empty p { max-width: 460px; margin: 6px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.wl-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* Thống kê: biểu đồ cột nhóm 2 chuỗi (vào / ra, khe 2px giữa 2 cột, đầu cột bo 4px, lưới 1px) + nguồn tiền vào */
.wl-insights__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.wl-insights__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
.wl-insights__head h3 { font-size: 14px; font-weight: 800; color: var(--text); }
.wl-insights__head > span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wl-insights__empty { font-size: 13px; color: var(--text-muted); }
.wl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.wl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wl-legend b { color: var(--text); }
.wl-legend__swatch { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }
.wl-legend__swatch--in { background: var(--wl-series-in); }
.wl-legend__swatch--out { background: var(--wl-series-out); }
.wl-chart__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 160px auto; column-gap: 8px; padding-top: 12px; }
.wl-chart__ticks {
  display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0;
  font-size: 11px; font-weight: 700; line-height: 14px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.wl-chart__area { position: relative; }
.wl-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.wl-chart__grid span { height: 1px; background: var(--border); }
.wl-chart__cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 100%; }
.wl-chart__col { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; border-radius: 6px; outline: none; }
.wl-chart__col::before { content: ""; position: absolute; inset: 0 6%; border-radius: 6px; background: var(--primary-light); opacity: 0; transition: opacity var(--transition-fast); }
.wl-chart__col:hover::before, .wl-chart__col:focus-visible::before { opacity: 1; }
.wl-chart__col:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-glow); }
.wl-chart__bar { position: relative; width: min(16px, 32%); border-radius: 4px 4px 0 0; }
.wl-chart__bar--in { height: var(--in, 0%); background: var(--wl-series-in); }
.wl-chart__bar--out { height: var(--out, 0%); background: var(--wl-series-out); }
/* Tháng có tiền nhưng quá nhỏ so với mốc trục (VD 20k bên cạnh 5tr) vẫn hiện 1 vạch — số chính xác ở tooltip / bảng */
.wl-chart__bar.has-value { min-height: 2px; }
/* Tooltip neo trên đỉnh cột cao hơn của tháng (--top) */
.wl-chart__tip {
  position: absolute; bottom: calc(var(--top, 0%) + 8px); left: 50%; z-index: 5; display: grid; gap: 2px; min-width: 160px; padding: 8px 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; color: var(--text-secondary);
  opacity: 0; visibility: hidden; transform: translateX(-50%); pointer-events: none; transition: opacity .12s ease, visibility .12s;
}
.wl-chart__tip > span:first-child { font-weight: 800; color: var(--text); }
.wl-chart__tip-row { display: flex; align-items: center; gap: 6px; }
.wl-chart__tip-row b { margin-left: auto; padding-left: 12px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.wl-chart__col:first-child .wl-chart__tip { left: 0; transform: none; }
.wl-chart__col:last-child .wl-chart__tip { left: auto; right: 0; transform: none; }
.wl-chart__col:hover .wl-chart__tip, .wl-chart__col:focus-visible .wl-chart__tip { opacity: 1; visibility: visible; }
.wl-chart__labels { grid-column: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 6px; font-size: 11.5px; font-weight: 700; text-align: center; color: var(--text-muted); }
.wl-chart__labels .is-current { color: var(--text); }
.wl-chart__table { margin-top: 10px; font-size: 12.5px; }
.wl-chart__table summary { width: fit-content; cursor: pointer; font-weight: 700; color: var(--primary); }
.wl-chart__table table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.wl-chart__table th, .wl-chart__table td { padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; }
.wl-chart__table th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); }
.wl-chart__table td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wl-chart__table th:not(:first-child), .wl-chart__table td:not(:first-child) { padding-left: 10px; text-align: right; }
.wl-sources { display: grid; align-content: start; gap: 2px; }
.wl-source { display: grid; gap: 6px; padding: 6px 0; }
.wl-source__line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.wl-source__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; color: var(--text); }
.wl-source__name i { margin-right: 5px; color: var(--text-muted); }
.wl-source__value { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wl-source__value b { font-weight: 900; color: var(--text); }
.wl-source__bar { height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--bg); }
.wl-source__bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.wl-facts { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); }
.wl-facts li { display: flex; align-items: flex-start; gap: 8px; }
.wl-facts i { margin-top: 2px; color: var(--text-muted); }
.wl-facts b { color: var(--text); }
.wl-facts a { color: var(--primary); }
.wl-facts a:hover { text-decoration: underline; }

/* Hướng dẫn nạp nhanh + hỗ trợ */
.wl-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-help__item {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.wl-help__item > i { flex-shrink: 0; font-size: 18px; color: var(--text-muted); }
.wl-help__item > div { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.wl-help__item b { font-size: 13px; color: var(--text); }
.wl-help__item a { font-weight: 800; color: var(--primary); }
.wl-help__item a:hover { text-decoration: underline; }
.wl-code {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 9px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.wl-code i { font-size: 11px; color: var(--text-muted); }
.wl-code:hover, .wl-code:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }

@media (min-width: 993px) and (max-width: 1200px) {
  .wl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wl-insights__grid, .wl-help { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wl-head__top { flex-direction: column; margin-bottom: 14px; }
  .wl-balance { padding: 14px; }
  .wl-balance__value { font-size: 26px; }
  .wl-balance__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .wl-balance__actions .wl-btn:last-child { grid-column: 1 / -1; }
  .wl-hint { flex-wrap: wrap; }
  .wl-hint > span:not(.wl-hint__cta) { flex: 1 1 calc(100% - 26px); }
  .wl-hint__cta { margin-left: 26px; }
  .wl-kpi { flex-direction: column; gap: 8px; padding: 10px; }
  .wl-kpi b { font-size: 16px; }
  .wl-view { padding: 0 10px; font-size: 13.5px; }
  .wl-view__more { display: none; }
  .wl-filters .wl-search { flex-basis: 100%; }
  .wl-filters select.form-input { flex: 1 1 calc(50% - 4px); }
  .wl-per-page { margin-left: 0; }
  .wl-day { padding: 8px 12px; }
  .wl-tx__summary { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 11px 12px; }
  .wl-tx__chevron { display: none; }
  /* Màn hẹp: tên acc dài xuống tối đa 2 dòng; bỏ dấu "·" (dòng phụ dễ xuống hàng, dấu sẽ nằm lạc đầu dòng) */
  .wl-tx__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
  .wl-tx__meta, .wl-topup__main small { gap: 2px 10px; }
  .wl-tx__meta > * + *::before, .wl-topup__main small > * + *::before { content: none; }
  .wl-icon { width: 32px; height: 32px; font-size: 14px; }
  .wl-tx__body { padding: 2px 12px 12px; }
  .wl-dl { grid-template-columns: 1fr; gap: 8px; }
  .wl-topup { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 10px; padding: 11px 12px; }
  .wl-topup__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .wl-chart__plot { grid-template-rows: 140px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-btn, .wl-hint, .wl-kpi, .wl-view, .wl-tab, .wl-chip, .wl-tx__summary, .wl-tx__chevron, .wl-chart__col::before, .wl-chart__tip, .wl-code { transition: none; }
}

/* ==========================================================================
   Đăng nhập Google + reCAPTCHA (x-recaptcha, front/auth/_google, trang Bảo mật)
   Phẳng: viền + nền, không bóng. Logo G 4 màu theo quy định của Google.
   ========================================================================== */
.auth-alt { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.auth-alt::before, .auth-alt::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.google-btn:hover { border-color: var(--border-hover); background: var(--bg); }
.google-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.google-btn--inline { width: auto; display: inline-flex; }
.google-btn__logo { width: 18px; height: 18px; flex: none; }

.recaptcha { margin: 0 0 14px; max-width: 100%; }
/* Ô tick v2 (Google vẽ 304 × 78) + khung chờ đè lên tới khi iframe tải xong (.is-ready) — initRecaptcha() trong app.js */
.recaptcha__frame { position: relative; width: 304px; max-width: 100%; height: 78px; }
.recaptcha__widget { min-height: 78px; }
.recaptcha__loading { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text-secondary); }
.recaptcha.is-ready .recaptcha__loading { display: none; }
.recaptcha__tick { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 2px solid var(--border-hover); border-radius: 3px; background: var(--bg-card); }
.recaptcha__spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: recaptcha-spin .8s linear infinite; }
.recaptcha__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.recaptcha__text b { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recaptcha__text small { font-size: 11px; color: var(--text-muted); }
.recaptcha.is-slow .recaptcha__text b { color: var(--text-secondary); }
.recaptcha.is-failed .recaptcha__tick { border-color: var(--red); }
.recaptcha.is-failed .recaptcha__spinner { display: none; }
.recaptcha__retry { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.recaptcha__retry[hidden] { display: none; }
.recaptcha__retry:hover { border-color: var(--primary); }
.recaptcha__retry:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* v3: đang xin mã lúc gửi form → vòng quay thay icon khiên */
.recaptcha.is-verifying .recaptcha__note .bi { display: none; }
.recaptcha.is-verifying .recaptcha__note::before { content: ""; width: 11px; height: 11px; flex: none; margin-top: 3px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: recaptcha-spin .8s linear infinite; }
@keyframes recaptcha-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .recaptcha__spinner, .recaptcha.is-verifying .recaptcha__note::before { animation-duration: 2s; }
}
.recaptcha__note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.recaptcha__note .bi { color: var(--text-secondary); margin-top: 1px; }
.recaptcha__note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.recaptcha__error { margin-top: 6px; color: var(--red); font-size: 12px; font-weight: 600; }
.recaptcha.is-error .recaptcha__frame { outline: 1.5px solid var(--red); outline-offset: 2px; border-radius: 4px; }
/* v3: huy hiệu nổi góc màn hình che thanh dưới mobile → ẩn, dòng "Được bảo vệ bởi reCAPTCHA" trong form thay thế (Google cho phép) */
.grecaptcha-badge { visibility: hidden; }
@media (max-width: 360px) {
  /* Ô tick rộng cố định 304px: thu nhỏ để vừa hộp đăng nhập màn 320px */
  .recaptcha { overflow: hidden; }
  .recaptcha__frame { width: 304px; max-width: none; transform: scale(.88); transform-origin: 0 0; margin-bottom: -9px; }
}

.gl-linked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.gl-linked__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); }
.gl-linked__text { display: grid; gap: 2px; min-width: 0; }
.gl-linked__text b { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.gl-linked__text small { color: var(--text-muted); font-size: 12px; }
.gl-intro { font-size: 13.5px; margin-bottom: 14px; }
.gl-form { max-width: 420px; }
.gl-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--text-secondary); }
.gl-note .bi { margin-top: 2px; }
.gl-note--gap { margin-bottom: 14px; }

/* ==========================================================================
   Trang danh mục /danh-muc/{slug}: đầu trang (ctg-) + danh sách acc có bộ lọc, AJAX (al-) + thẻ acc (acc-card)
   Phẳng theo quy tắc design §8: viền 1px + nền, 1 màu nhấn --primary, không đổ bóng; nút "Mua ngay" cam (ngoại lệ đã chốt)
   ========================================================================== */

/* --- Đầu trang --- */
.ctg-head { padding-bottom: 4px; }
.ctg-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ctg-hero__image { width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); background: var(--bg); }
.ctg-hero__title { font-size: 22px; font-weight: 900; line-height: 1.25; letter-spacing: -0.3px; color: var(--text); }
.ctg-hero__desc {
  margin-top: 4px; max-width: 820px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary);
  white-space: pre-line; overflow-wrap: anywhere;
}
.ctg-hero__desc.is-folded { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctg-hero__more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.ctg-hero__more[hidden] { display: none; }
.ctg-hero__more:hover { color: var(--primary-hover); }
.ctg-hero__more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.ctg-hero__more[aria-expanded="true"] i { transform: rotate(180deg); }
.ctg-hero__stats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; list-style: none; font-size: 13px; color: var(--text-secondary); }
.ctg-hero__stats li { position: relative; }
.ctg-hero__stats li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); transform: translateY(-50%); }
.ctg-hero__stats b { font-weight: 800; color: var(--text); }
.ctg-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ctg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s;
}
.ctg-btn:hover { border-color: var(--primary); color: var(--primary); }
.ctg-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ctg-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.ctg-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.ctg-trust li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px; }
.ctg-trust li + li { border-left: 1px solid var(--border); }
.ctg-trust .bi {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg); color: var(--text-secondary); font-size: 16px;
}
.ctg-trust div { min-width: 0; }
.ctg-trust b { display: block; font-size: 13px; font-weight: 800; color: var(--text); }
.ctg-trust span { display: block; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

/* --- Bố cục danh sách: bộ lọc trái + kết quả --- */
.al-section { padding-top: 8px; scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 8px); }
.al-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; gap: 20px; }
.al-main { min-width: 0; }

.al-filter { position: sticky; top: calc(var(--header-offset, var(--header-height)) + 12px); min-width: 0; }
.al-filter__form {
  display: flex; flex-direction: column; max-height: calc(100vh - var(--header-offset, var(--header-height)) - 24px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.al-filter__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.al-filter__title { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 14px; font-weight: 800; color: var(--text); }
.al-filter__title .bi { color: var(--text-secondary); }
.al-filter__reset { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.al-filter__reset:hover { text-decoration: underline; }
.al-filter__reset[hidden] { display: none; }
.al-filter__close {
  display: none; width: 34px; height: 34px; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); cursor: pointer;
}
.al-filter__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 6px; }
.al-filter__foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.al-layout.is-live .al-filter__foot { display: none; }
.al-apply {
  width: 100%; height: 42px; border: 0; border-radius: var(--radius-sm); background: var(--primary);
  font-size: 14px; font-weight: 800; color: #fff; cursor: pointer;
}
.al-apply:hover { background: var(--primary-hover); }

/* Nhóm lọc (details): tiêu đề bấm để thu gọn */
.al-group { padding: 12px 0; border-bottom: 1px solid var(--border); }
.al-group:last-child { border-bottom: 0; }
.al-group--search { padding-top: 14px; }
.al-group__title {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 800; color: var(--text);
}
.al-group__title::-webkit-details-marker { display: none; }
.al-group__title::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .15s; }
.al-group:not([open]) > .al-group__title::after { transform: rotate(-90deg); }
.al-group[open] > .al-group__title { margin-bottom: 10px; }
.al-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.al-hint { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }

.al-search { position: relative; display: block; }
.al-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-muted); pointer-events: none; }
.al-search input, .al-input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 13px; color: var(--text); transition: border-color .15s;
}
.al-search input { height: 40px; padding: 0 12px 0 36px; }
.al-input { height: 36px; padding: 0 10px; }
.al-search input:focus, .al-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.al-input::-webkit-outer-spin-button, .al-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Gợi ý thả xuống dưới ô tìm khi đang gõ (front/category/_suggest): lựa chọn lọc khớp + acc khớp. Phẳng: viền + nền, không bóng.
   Mặc định nằm ngay dưới ô tìm, rộng bằng ô (ngăn kéo điện thoại); kiểu "Bên trên" rộng hơn ô; cột trái máy tính → JS đặt
   position: fixed (.is-floating) vì vùng cuộn của cột lọc sẽ cắt khung. */
.al-group--search { position: relative; }
.al-suggest {
  position: absolute; top: calc(100% - 6px); left: 0; right: 0; z-index: 45; max-height: min(460px, 62vh); overflow-y: auto;
  overscroll-behavior: contain; padding: 6px; background: var(--bg-card); border: 1px solid var(--border-hover); border-radius: var(--radius);
}
.al-suggest[hidden] { display: none; }
.al-suggest.is-floating { position: fixed; right: auto; }
.al-suggest__group + .al-suggest__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.al-suggest__label { padding: 4px 8px 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.al-suggest__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); }
.al-suggest__item.is-active, .al-suggest__all.is-active { background: var(--primary-light); }
.al-suggest__icon {
  flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg); font-size: 14px; color: var(--text-secondary);
}
.al-suggest__text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.al-suggest__item--filter .al-suggest__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-suggest__kind { margin-right: 3px; color: var(--text-muted); }
.al-suggest__count { flex: none; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.al-suggest__thumb { flex: none; width: 64px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--media-bg); }
.al-suggest__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.al-suggest__meta { display: flex; flex-wrap: wrap; gap: 0 10px; max-height: 1.45em; margin-top: 1px; overflow: hidden; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.al-suggest__price { flex: none; text-align: right; line-height: 1.3; }
.al-suggest__price b { display: block; font-size: 13px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.al-suggest__price s { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.al-suggest mark { background: none; font-weight: 800; color: var(--primary); }
.al-suggest__all {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; margin-top: 6px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: none;
  font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.al-suggest__empty { display: flex; align-items: flex-start; gap: 8px; padding: 10px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.al-suggest__empty .bi { margin-top: 2px; color: var(--text-muted); }
.al-suggest__group + .al-suggest__empty { margin-top: 6px; border-top: 1px solid var(--border); }
/* Đang hỏi máy chủ: kính lúp đổi thành vòng quay */
.al-group--search.is-loading .al-search .bi { visibility: hidden; }
.al-group--search.is-loading .al-search::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box;
  border: 2px solid var(--border-hover); border-top-color: var(--primary); border-radius: 50%; animation: au-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .al-group--search.is-loading .al-search::before { animation: none; }
}
@media (max-width: 420px) {
  .al-suggest__thumb { width: 52px; height: 34px; }
  .al-suggest__meta { display: none; }
  .al-suggest__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.al-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.al-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.al-range__sep { color: var(--text-muted); }
.al-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.al-preset {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-secondary); transition: border-color .15s, color .15s;
}
.al-preset:hover { border-color: var(--primary); color: var(--primary); }
.al-preset.is-active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.al-options { display: flex; flex-direction: column; gap: 1px; list-style: none; }
.al-option {
  display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.al-option:hover { background: var(--bg); color: var(--text); }
.al-option input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: inherit; }
.al-option__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-option input:checked ~ .al-option__text { font-weight: 700; color: var(--text); }
.al-option.is-empty, .al-chip.is-empty { opacity: .45; cursor: not-allowed; }
.al-option.is-empty:hover { background: none; }
.al-count {
  flex: none; min-width: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* Ô tìm trong 1 nhóm lọc: lọc danh sách lựa chọn ngay trên trình duyệt (JS, không gửi lên máy chủ) → chỉ hiện khi có JS.
   Nhóm ít lựa chọn (.is-few, không có "Xem thêm") chỉ hiện ô này khi nhóm là bảng thả xuống (kiểu "Bên trên" / điện thoại hiện luôn). */
.al-optsearch { position: relative; display: none; margin-bottom: 8px; }
html.has-js .al-optsearch { display: block; }
html.has-js .al-optsearch.is-few { display: none; }
.al-optsearch .bi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; }
.al-optsearch input {
  width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 13px; color: var(--text); transition: border-color .15s;
}
.al-optsearch input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.al-optsearch__empty { padding: 6px 2px 2px; font-size: 12.5px; color: var(--text-muted); }
.al-options > li[hidden], .al-optsearch__empty[hidden] { display: none; }
.al-more > summary { padding-top: 6px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.al-more > summary::-webkit-details-marker { display: none; }
.al-more[open] > summary { display: none; }

.al-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.al-tag {
  position: relative; display: inline-flex; align-items: center; max-width: 100%; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer;
}
.al-tag input { position: absolute; opacity: 0; pointer-events: none; }
.al-tag:hover { border-color: var(--border-hover); }
.al-tag:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.al-tag:has(input:focus-visible), .al-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Thanh công cụ trên kết quả --- */
.al-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.al-toolbar__head { min-width: 0; }
.al-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; text-transform: uppercase; color: var(--text); }
.al-title:focus { outline: none; }
.al-title .bi { font-size: 19px; color: var(--text-secondary); }
.al-summary { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.al-toolbar__tools { display: flex; align-items: center; gap: 8px; }
.al-tool {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13px; font-weight: 600; color: var(--text);
}
select.al-tool { padding: 0 28px 0 10px; cursor: pointer; }
select.al-tool:focus-visible, .al-tool:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.al-sort { display: flex; align-items: center; gap: 6px; }
.al-sort__label { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.al-view { display: inline-flex; }
.al-view__btn { width: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-muted); cursor: pointer; }
.al-view__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.al-view__btn + .al-view__btn { margin-left: -1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.al-view__btn:hover { color: var(--text); }
.al-view__btn[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.al-filter-open { display: none; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; }
.al-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; color: #fff;
}
.al-badge[hidden] { display: none; }

/* Lọc nhanh (ô tick dạng chip) */
.al-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.al-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s;
}
.al-chip input { position: absolute; opacity: 0; pointer-events: none; }
.al-chip:hover { border-color: var(--border-hover); color: var(--text); }
.al-chip:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.al-chip:has(input:checked) .al-count { background: var(--bg-card); color: var(--primary); }

/* Chip bộ lọc đang áp dụng */
.al-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; list-style: none; }
.al-chip-active {
  display: inline-flex; align-items: center; gap: 2px; max-width: 280px; height: 28px; padding: 0 6px 0 10px;
  border-radius: var(--radius-sm); background: var(--primary-light); font-size: 12px; font-weight: 700; color: var(--primary);
}
.al-chip-active span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-chip-active .bi { font-size: 17px; line-height: 1; }
.al-chip-active:hover { background: color-mix(in srgb, var(--primary) 18%, var(--bg-card)); }
.al-chips__clear { padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-decoration: underline; }
.al-chips__clear:hover { color: var(--red); }

/* Kết quả + trạng thái đang tải (thanh chạy mảnh + mờ kết quả cũ) */
.al-results { position: relative; transition: opacity .15s; }
.al-results::before {
  content: ""; position: absolute; left: 0; top: -7px; width: 100%; height: 2px; border-radius: 2px;
  background: var(--primary); transform-origin: left; transform: scaleX(0); opacity: 0;
}
.al-layout.is-loading .al-results { opacity: .5; pointer-events: none; }
.al-layout.is-loading .al-results::before { opacity: 1; animation: al-progress 1.1s ease-in-out infinite; }
@keyframes al-progress { 0% { transform: scaleX(0); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(1); opacity: 0; } }
.al-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.al-results[data-view="list"] .al-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

.al-empty { padding: 48px 20px; text-align: center; background: var(--bg-card); border: 1px dashed var(--border-hover); border-radius: var(--radius-lg); }
.al-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px;
  border-radius: 50%; background: var(--bg); font-size: 22px; color: var(--text-muted);
}
.al-empty strong { display: block; font-size: 15px; color: var(--text); }
.al-empty p { max-width: 440px; margin: 4px auto 16px; font-size: 13px; color: var(--text-muted); }
.al-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Phân trang */
.al-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; }
.al-pager__pages { display: flex; gap: 6px; list-style: none; }
.al-pager__page, .al-pager__step {
  min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s;
}
.al-pager a:hover { border-color: var(--primary); color: var(--primary); }
.al-pager__page.is-current { border-color: var(--primary); background: var(--primary); color: #fff; }
.al-pager__step.is-disabled { opacity: .45; }
.al-pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; color: var(--text-muted); }
.al-pager__info { margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* --- Thẻ acc (dùng chung trang danh mục, tìm kiếm, acc tương tự) --- */
.acc-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .15s;
}
.acc-card:hover { border-color: var(--primary); }
.acc-card:has(.acc-card__title a:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.acc-card__media { position: relative; flex: none; aspect-ratio: 16 / 9.6; overflow: hidden; background: var(--bg); }
.acc-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Link riêng của ảnh nằm trên lớp phủ tiêu đề (z-index 1) → kéo ảnh ra ngoài là kéo file ảnh; nhãn dán vẫn nằm trên */
.acc-card__img-link { position: absolute; inset: 0; z-index: 2; display: block; }
.acc-card__media .acc-stickers { z-index: 3; }
.acc-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px 14px; }
.acc-card__top { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--text-muted); }
.acc-card__code {
  position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg);
  font-size: 11.5px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; cursor: copy;
}
.acc-card__code .bi { font-size: 10px; color: var(--text-muted); }
.acc-card__code:hover { border-color: var(--primary); color: var(--primary); }
.acc-card__code:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.acc-card__game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-secondary); }
.acc-card__time { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; }
.acc-card__title {
  margin: 0; min-height: calc(1.4em * 2); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acc-card__title a { color: inherit; }
.acc-card__title a:focus-visible { outline: none; }
/* Link tiêu đề phủ cả thẻ → bấm ảnh / thông số cũng mở chi tiết (1 link duy nhất cho trình đọc màn hình) */
.acc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Acc không có tiêu đề: không chừa dòng trống — tiêu đề thành lớp phủ cả thẻ, link bên trong vẫn bấm được */
.acc-card__title--empty { position: absolute; inset: 0; z-index: 1; display: block; min-height: 0; }
.acc-card__title--empty a { display: block; height: 100%; }
.acc-card__specs { display: grid; gap: 4px; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg); }
.acc-card__spec { display: flex; justify-content: space-between; gap: 10px; min-width: 0; font-size: 12px; line-height: 1.5; }
.acc-card__spec dt { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.acc-card__spec dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 700; color: var(--text); }
.acc-card__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; font-size: 11.5px; color: var(--text-muted); }
.acc-card__facts li { display: inline-flex; align-items: center; gap: 4px; }
.acc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.acc-card__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acc-card__price b { font-size: 16px; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-card__price s { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.acc-card__cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border-radius: var(--radius-sm); background: var(--primary); font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; transition: background-color .15s;
}
/* Nút "Mua ngay" của thẻ acc theo màu chủ đạo (Admin → Cài đặt → Thương hiệu), không còn cam */
.acc-card:hover .acc-card__cta { background: var(--primary-hover); }

/* Dạng danh sách: ảnh trái, thông số chia cột */
.al-results[data-view="list"] .acc-card { flex-direction: row; }
.al-results[data-view="list"] .acc-card__media { width: 280px; aspect-ratio: 16 / 10; align-self: stretch; }
.al-results[data-view="list"] .acc-card__body { padding: 14px 16px; }
.al-results[data-view="list"] .acc-card__title { min-height: 0; font-size: 15px; -webkit-line-clamp: 1; }
.al-results[data-view="list"] .acc-card__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.al-results[data-view="list"] .acc-card__spec { flex-direction: column; gap: 0; }
.al-results[data-view="list"] .acc-card__spec dt { max-width: none; }
.al-results[data-view="list"] .acc-card__spec dd { text-align: left; }
.al-results[data-view="list"] .acc-card__price { flex-direction: row; align-items: baseline; gap: 8px; }
.al-results[data-view="list"] .acc-card__price b { font-size: 18px; }
.al-results[data-view="list"] .acc-card__cta { height: 36px; padding: 0 18px; font-size: 13px; }

body.al-lock { overflow: hidden; }
.al-backdrop { display: none; }

/* Kiểu "Bên trên" (setting category_filter_layout = top): thanh lọc ngang trên kết quả, mỗi nhóm là nút thả xuống,
   lưới 4 cột. Chỉ từ 1024px — nhỏ hơn thì dùng chung ngăn kéo / khối xếp dọc với kiểu "Bên trái". */
.al-layout.al-layout--top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1024px) {
  .al-layout--top .al-filter { position: relative; top: auto; z-index: 20; }
  .al-layout--top .al-filter__form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-height: none; padding: 10px 12px; border-radius: var(--radius); }
  .al-layout--top .al-filter__head { display: contents; }
  .al-layout--top .al-filter__title { order: 0; margin: 0 2px 0 4px; font-size: 13px; white-space: nowrap; }
  .al-layout--top .al-filter__reset { order: 3; margin-left: auto; white-space: nowrap; }
  .al-layout--top .al-filter__close { display: none; }
  .al-layout--top .al-filter__body { order: 1; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 0; overflow: visible; }
  .al-layout--top .al-filter__foot { order: 4; padding: 0; border: 0; }
  .al-layout--top .al-apply { width: auto; height: 38px; padding: 0 16px; font-size: 13px; }

  .al-layout--top .al-group { position: relative; padding: 0; border: 0; }
  .al-layout--top .al-group--search { flex: 1 1 220px; max-width: 320px; }
  .al-layout--top .al-search input { height: 38px; }
  .al-layout--top .al-suggest { top: calc(100% + 6px); right: auto; width: min(460px, calc(100vw - 48px)); }
  .al-layout--left .al-filter { z-index: 20; }
  .al-layout--top .al-group__title {
    height: 38px; padding: 0 12px; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
    font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s;
  }
  .al-layout--top .al-group__title::after { margin-left: 2px; }
  .al-layout--top .al-group__title:hover { border-color: var(--border-hover); color: var(--text); }
  .al-layout--top .al-group:not([open]) > .al-group__title::after { transform: none; }
  .al-layout--top .al-group[open] > .al-group__title { margin-bottom: 0; border-color: var(--primary); color: var(--primary); }
  .al-layout--top .al-group[open] > .al-group__title::after { transform: rotate(180deg); }
  .al-layout--top .al-group.is-active > .al-group__title { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
  .al-layout--top .al-group__body {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 290px; max-height: min(420px, 60vh); overflow-y: auto;
    padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .al-layout--top .al-group.is-right > .al-group__body { left: auto; right: 0; }
  html.has-js .al-layout--top .al-optsearch.is-few { display: block; }

  .al-layout--top .al-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .al-layout--top .al-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .al-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 16px; }
  .al-grid { gap: 14px; }
}

@media (max-width: 1100px) {
  .ctg-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctg-trust li:nth-child(3) { border-left: 0; }
  .ctg-trust li:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ≤ 1023px: bộ lọc thành ngăn kéo trượt từ trái (chỉ khi JS chạy — tắt JS thì bộ lọc nằm ngay trên kết quả) */
@media (max-width: 1023px) {
  .al-layout { grid-template-columns: minmax(0, 1fr); }
  .al-filter { position: static; }
  .al-filter__form { max-height: none; }
  .al-layout.is-live .al-filter-open { display: inline-flex; }
  .al-layout.is-live .al-filter {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100; width: min(360px, 88vw);
    visibility: hidden; transform: translateX(-100%); transition: transform .22s ease, visibility 0s linear .22s;
  }
  .al-layout.is-live .al-filter.is-open { visibility: visible; transform: none; transition: transform .22s ease; }
  .al-layout.is-live .al-filter__form { height: 100%; max-height: none; border-width: 0 1px 0 0; border-radius: 0; }
  .al-layout.is-live .al-filter__close { display: inline-flex; }
  .al-layout.is-live .al-filter__foot { display: block; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .al-layout.is-live .al-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(var(--shade), 0.65); }

  /* Bộ lọc "Hiện luôn trên trang" (setting category_filter_mobile = inline, .al-layout--m-inline — §6.21): không ngăn kéo,
     không nút "Bộ lọc". Ô tìm + mỗi nhóm là 1 nút; bấm nút → nhóm mở hết bề ngang ngay dưới hàng nút (JS: mỗi lúc 1 nhóm).
     Dùng html.has-js (đặt trong <head>) để nhóm thu gọn sẵn từ lúc tải, không nháy; tắt JS → form mở sẵn + nút Áp dụng như cũ. */
  html.has-js .al-layout--m-inline .al-filter-open,
  html.has-js .al-layout--m-inline .al-filter__close,
  html.has-js .al-layout--m-inline .al-filter__foot { display: none; }
  html.has-js .al-layout--m-inline .al-filter {
    position: relative; top: auto; bottom: auto; left: auto; z-index: 20; width: auto; visibility: visible; transform: none; transition: none;
  }
  html.has-js .al-layout--m-inline .al-filter__form { height: auto; border-width: 1px; border-radius: var(--radius-lg); }
  html.has-js .al-layout--m-inline .al-filter__head { padding: 10px 12px; }
  html.has-js .al-layout--m-inline .al-filter__title { font-size: 13px; }
  html.has-js .al-layout--m-inline .al-filter__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 12px 12px; overflow: visible; }
  html.has-js .al-layout--m-inline .al-group { min-width: 0; padding: 0; border: 0; }
  html.has-js .al-layout--m-inline .al-group--search { flex: 1 1 100%; }
  html.has-js .al-layout--m-inline .al-group__title {
    height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
    font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap;
  }
  html.has-js .al-layout--m-inline .al-group__title::after { margin-left: 2px; }
  html.has-js .al-layout--m-inline .al-group > .al-group__title::after { transform: none; }
  html.has-js .al-layout--m-inline .al-group > .al-group__title { margin-bottom: 0; }
  html.has-js .al-layout--m-inline .al-group.is-active > .al-group__title { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
  html.has-js .al-layout--m-inline .al-group[data-group] > .al-group__body { display: none; }
  html.has-js .al-layout--m-inline .al-optsearch.is-few { display: block; }
  html.has-js .al-layout--m-inline .al-optsearch input { background: var(--bg-card); font-size: 16px; } /* 16px: iOS không phóng to trang khi chạm ô */
  html.has-js .al-layout--m-inline.is-live .al-group[data-group][open] { flex: 1 1 100%; }
  html.has-js .al-layout--m-inline.is-live .al-group[data-group][open] > .al-group__title { border-color: var(--primary); color: var(--primary); }
  html.has-js .al-layout--m-inline.is-live .al-group[data-group][open] > .al-group__title::after { transform: rotate(180deg); }
  html.has-js .al-layout--m-inline.is-live .al-group[data-group][open] > .al-group__body {
    display: block; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  }
}

@media (max-width: 900px) {
  .ctg-hero { grid-template-columns: auto minmax(0, 1fr); }
  .ctg-hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 768px) {
  .al-section { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 64px); }
  .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .al-results[data-view="list"] .acc-card__media { width: 200px; }
  .al-results[data-view="list"] .acc-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ctg-hero { gap: 12px; padding: 14px; }
  .ctg-hero__image { width: 52px; height: 52px; }
  .ctg-hero__title { font-size: 18px; }
  .ctg-hero__stats { gap: 2px 18px; font-size: 12.5px; }
  .ctg-hero__actions .ctg-btn { flex: 1; }
  .ctg-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ctg-trust li { gap: 8px; padding: 10px; }
  .ctg-trust .bi { width: 30px; height: 30px; font-size: 14px; }
  .ctg-trust span { display: none; }

  .al-toolbar { align-items: stretch; gap: 10px; }
  .al-toolbar__head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .al-title { font-size: 15px; }
  .al-summary { margin: 0; font-size: 12px; text-align: right; }
  .al-toolbar__tools { width: 100%; }
  .al-sort { flex: 1; min-width: 0; }
  .al-sort__label { display: none; }
  .al-sort select { width: 100%; min-width: 0; }
  /* Lọc nhanh: 1 hàng cuộn ngang */
  .al-quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 10px; padding: 0 12px 2px; scrollbar-width: none; }
  .al-quick::-webkit-scrollbar { display: none; }

  .acc-card__body { gap: 6px; padding: 10px; }
  .acc-card__time { display: none; }
  .acc-card__title { font-size: 13px; }
  .acc-card__specs { padding: 6px 8px; }
  .acc-card__spec { font-size: 11.5px; }
  .acc-card__facts { font-size: 11px; gap: 2px 8px; }
  .acc-card__foot { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; }
  .acc-card__price b { font-size: 14.5px; }
  .acc-card__price s { font-size: 11px; }
  .acc-card__cta { height: 30px; font-size: 12px; }

  .al-results[data-view="list"] .acc-card__media { width: 118px; aspect-ratio: auto; }
  .al-results[data-view="list"] .acc-card__title { -webkit-line-clamp: 2; font-size: 13px; }
  .al-results[data-view="list"] .acc-card__specs { grid-template-columns: minmax(0, 1fr); padding: 0; background: none; gap: 2px; }
  .al-results[data-view="list"] .acc-card__spec { flex-direction: row; }
  .al-results[data-view="list"] .acc-card__spec dd { text-align: right; }
  .al-results[data-view="list"] .acc-card__facts { display: none; }
  .al-results[data-view="list"] .acc-card__foot { flex-direction: row; align-items: center; }
  .al-results[data-view="list"] .acc-card__price { flex-direction: column; gap: 0; }
  .al-results[data-view="list"] .acc-card__price b { font-size: 15px; }
  .al-results[data-view="list"] .acc-card__cta { height: 30px; padding: 0 12px; font-size: 12px; }

  .al-pager { gap: 4px; }
  .al-pager__pages { gap: 4px; }
  .al-pager__pages .is-far { display: none; }
  .al-pager__page, .al-pager__step { min-width: 34px; height: 34px; padding: 0 8px; }
  .al-pager__step span { display: none; }
}

@media (max-width: 380px) {
  .al-toolbar__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .al-summary { text-align: left; }
  .ctg-trust b { font-size: 12px; }
  .al-grid { gap: 8px; }
  .acc-card__body { padding: 8px; }
  .acc-card__code .bi { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .al-layout.is-live .al-filter, .al-layout.is-live .al-filter.is-open { transition: none; }
  .al-layout.is-loading .al-results::before { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Header & menu (Admin → Header & Menu) — tiền tố hd- (thanh menu, menu thả xuống, menu lớn, nút Danh mục, thanh thứ 2,
   hàng cuộn ngang điện thoại), mnav- (menu trong ngăn kéo điện thoại). Phẳng: viền + nền, không đổ bóng.
   --header-offset = chiều cao header thực (gồm thanh thứ 2 khi bật) → vị trí dính / neo cuộn của các trang.
   ========================================================================== */
:root { --subheader-height: 46px; --header-offset: var(--header-height); }
@media (min-width: 769px) {
  html.has-subheader { --header-offset: calc(var(--header-height) + var(--subheader-height)); }
  html.has-subheader.is-sub-hidden { --header-offset: var(--header-height); }
}
.site-header [hidden], .hd-chips [hidden] { display: none !important; }

/* Thanh menu dùng chung (1 tầng / thanh thứ 2 / tiện ích) */
.hd-nav { min-width: 0; }
.hd-bar { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hd-item { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.hd-item--mega { position: static; }
/* Link định vị: chữ ẩn cho trình đọc màn hình ("mở tab mới", position absolute) nằm trong link, không thoát ra ngoài vùng cuộn
   ngang → không nới khung nhìn điện thoại. Menu lớn vẫn canh theo thanh header vì mục chứa nó (.hd-item--mega) là static. */
.hd-link, .hd-list__link, .hd-chip, .hd-mega__head { position: relative; }
.hd-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.hd-link:hover, .hd-item.is-open > .hd-link { color: var(--primary); background: var(--primary-light); }
.hd-link.is-current, .hd-item.is-active > .hd-link, .hd-link.is-highlight { color: var(--primary); }
.hd-link.is-highlight { font-weight: 800; }
span.hd-link.is-heading { cursor: default; }
.hd-link__icon { font-size: 16px; line-height: 1; color: var(--primary); }
.hd-link__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hd-link__text { overflow: hidden; text-overflow: ellipsis; }
.hd-link__detail { font-weight: 700; color: var(--text); }
.hd-link__desc { font-size: 11.5px; font-weight: 400; color: var(--text-muted); white-space: normal; }
.hd-caret { font-size: 10px; transition: transform var(--transition-fast); }
.hd-item.is-open > .hd-link .hd-caret, .hd-item.is-open > .hd-catalog__btn .hd-caret, .hd-item.is-open > .hd-caret-btn i { transform: rotate(180deg); }
.hd-caret-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px; margin-left: -4px;
  border-radius: var(--radius-sm); font-size: 10px; color: var(--text-muted);
}
.hd-caret-btn i { transition: transform var(--transition-fast); }
.hd-caret-btn:hover, .hd-item.is-open > .hd-caret-btn { color: var(--primary); }
.hd-link:focus-visible, .hd-caret-btn:focus-visible, .hd-list__link:focus-visible, .hd-mega__head:focus-visible, .hd-catalog__btn:focus-visible,
.hd-cat a:focus-visible, .hd-mega__top a:focus-visible, .hd-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Nhãn nhỏ (HOT, MỚI…) + số acc đã xem */
.hd-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; height: 17px; padding: 0 6px; border-radius: var(--radius-full);
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; line-height: 1; text-transform: uppercase;
}
.hd-badge--primary { background: var(--primary-light); color: var(--primary); }
.hd-badge--hot { background: color-mix(in srgb, var(--red) 14%, transparent); color: color-mix(in srgb, var(--red) 78%, var(--text)); }
.hd-badge--new { background: color-mix(in srgb, var(--green) 16%, transparent); color: color-mix(in srgb, var(--green) 55%, var(--text)); }
.hd-badge--muted { border: 1px solid var(--border); color: var(--text-muted); }
.hd-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary);
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
}

/* Menu thả xuống */
.hd-drop {
  position: absolute; top: 100%; left: 0; z-index: 130; display: none; min-width: 230px; max-width: min(340px, calc(100vw - 24px));
  padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.hd-item.is-open > .hd-drop { display: block; }
.hd-drop.is-end { left: auto; right: 0; }
.hd-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.hd-list--nested { margin: 0 0 4px 20px; padding-left: 8px; border-left: 1px solid var(--border); }
.hd-list__link {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text); text-align: left;
}
.hd-list__link:hover { background: var(--bg); color: var(--primary); }
.hd-list__link.is-current { background: var(--primary-light); color: var(--primary); }
.hd-list__link .hd-link__icon { width: 18px; text-align: center; color: var(--text-muted); }
.hd-list__link:hover .hd-link__icon, .hd-list__link.is-current .hd-link__icon, .hd-list__link.is-highlight .hd-link__icon { color: var(--primary); }
.hd-list__link.is-highlight { color: var(--primary); }
.hd-list__link .hd-link__body { flex: 1; }
.hd-list__link .hd-link__text { white-space: normal; }
span.hd-list__link.is-heading { padding-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }

/* Menu lớn nhiều cột (mục có mục cấp 3): phủ cả bề ngang header, nội dung trong khung .shell */
.hd-drop--mega {
  right: 0; max-width: none; padding: 0; border-width: 1px 0; border-radius: 0;
  max-height: calc(100vh - var(--header-offset) - 16px); overflow-y: auto;
}
.hd-mega { padding-top: 16px; padding-bottom: 18px; }
.hd-mega__top, .hd-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hd-mega__top { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.hd-mega__top strong, .hd-cat__head strong { font-size: 15px; font-weight: 800; color: var(--text); }
.hd-mega__top a, .hd-cat__head a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.hd-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 20px; }
.hd-mega__head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13.5px; font-weight: 800; color: var(--text); }
a.hd-mega__head:hover, button.hd-mega__head:hover { color: var(--primary); }
.hd-mega__col .hd-list__link { padding: 6px 10px; font-weight: 500; }

/* Header 1 tầng: menu nằm giữa logo và ô tìm */
.hd-nav--top { flex: 0 1 auto; }
.hd-nav--top .hd-link { min-height: 38px; padding: 0 12px; }
.site-header:not(.site-header--double) .header-search { min-width: 200px; }

/* Header 2 tầng: hàng trên logo · ô tìm (rộng hơn) · nút; thanh thứ 2 bên dưới */
.site-header--double .header-search { max-width: 560px; margin-left: 12px; }
/* Thanh thứ 2 nằm đè lên khoảng đệm .subheader-spacer ngay dưới header (không chiếm chỗ trong luồng trang): ẩn / hiện khi cuộn
   không làm đổi chiều cao trang → trình duyệt không tự chỉnh vị trí cuộn (tránh vòng lặp ẩn → hiện → ẩn). */
.site-header--double .site-header__inner { z-index: 2; }
.subheader {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1; height: var(--subheader-height);
  background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.subheader-spacer { height: calc(var(--subheader-height) - 1px); }
.subheader__inner { display: flex; align-items: stretch; gap: 10px; height: 100%; }
.hd-bar--catalog { flex-shrink: 0; align-items: center; }
.hd-nav--sub { display: flex; flex: 1 1 auto; }
.hd-nav--sub > .hd-bar { width: 100%; }
.hd-nav--sub .hd-bar > .hd-item > .hd-link { position: relative; align-self: stretch; min-height: 0; padding: 0 12px; border-radius: 0; background: none; }
.hd-nav--sub .hd-bar > .hd-item > .hd-link:hover, .hd-nav--sub .hd-bar > .hd-item.is-open > .hd-link { background: none; color: var(--primary); }
.hd-nav--sub .hd-bar > .hd-item.is-active > .hd-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary);
}
.site-header.is-sub-hidden .subheader { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }

/* Nút "Danh mục" + menu lớn mọi danh mục */
.hd-catalog__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.hd-catalog__btn .bi-list { font-size: 17px; }
.hd-catalog__btn:hover, .hd-catalog.is-open > .hd-catalog__btn { background: var(--primary-hover); }
.hd-cat { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 280px; }
.hd-cat--flat { display: block; min-height: 0; padding-top: 16px; padding-bottom: 18px; }
.hd-cat__roots { margin: 0; padding: 10px 10px 10px 0; list-style: none; border-right: 1px solid var(--border); }
.hd-cat__root {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: var(--text);
}
.hd-cat__root:hover, .hd-cat__root.is-current { background: var(--primary-light); color: var(--primary); }
.hd-cat__arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.hd-cat__thumb {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-muted); font-size: 15px;
}
.hd-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hd-cat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hd-cat__pane { min-width: 0; padding: 14px 0 18px 20px; }
.hd-cat__head { margin-bottom: 12px; }
.hd-cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; align-content: start; }
.hd-cat__child { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 800; color: var(--text); }
.hd-cat__child:hover { background: var(--bg); color: var(--primary); }
.hd-cat__links { display: grid; gap: 1px; margin: 0 0 0 50px; padding: 0; list-style: none; }
.hd-cat__links a { display: block; padding: 3px 0; font-size: 12.5px; color: var(--text-secondary); }
.hd-cat__links a:hover { color: var(--primary); }
.hd-cat__links a.hd-cat__more { font-weight: 700; color: var(--primary); }
.hd-cat__empty { font-size: 13px; color: var(--text-muted); }

/* Menu tiện ích (góc phải thanh thứ 2) */
.hd-tools { display: flex; flex-shrink: 0; margin-left: auto; }
.hd-tools .hd-bar { gap: 0; }
.hd-tools .hd-item + .hd-item::before { content: ""; width: 1px; height: 16px; margin: 0 2px; background: var(--border); }
.hd-tools .hd-item > .hd-link { min-height: 32px; padding: 0 9px; font-size: 12.5px; color: var(--text-secondary); }
.hd-tools .hd-link__icon { font-size: 15px; color: var(--text-muted); }
.hd-tools .hd-link:hover .hd-link__icon, .hd-tools .hd-link.is-current .hd-link__icon, .hd-tools .hd-link.is-highlight .hd-link__icon { color: var(--primary); }
.hd-tools .hd-drop { left: auto; right: 0; }

/* Điện thoại (header 2 tầng): hàng menu cuộn ngang dưới ô tìm kiếm — không dính khi cuộn */
.hd-chips { display: none; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.hd-chips__list {
  display: flex; gap: 8px; margin: 0 auto; padding-top: 8px; padding-bottom: 8px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.hd-chips__list::-webkit-scrollbar { display: none; }
.hd-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: var(--bg-card); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.hd-chip .hd-link__icon { font-size: 14px; }
.hd-chip.is-current, .hd-chip.is-active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.hd-chip.is-highlight { color: var(--primary); }

/* Ngăn kéo menu điện thoại: nhóm gập / mở */
.mnav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mnav-list--sub { margin: 2px 0 6px 25px; padding-left: 10px; border-left: 1px solid var(--border); }
.mnav-group > summary { list-style: none; }
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-caret { margin-left: auto; font-size: 12px; color: var(--text-muted); transition: transform var(--transition-fast); }
.mnav-group[open] > summary .mnav-caret { transform: rotate(180deg); }
.mnav-sub > .mobile-drawer__link.mnav-parent { margin-left: 35px; width: calc(100% - 35px); font-weight: 700; }
.mnav-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mnav-detail { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.mobile-drawer__link.is-current, .mobile-drawer__link.is-active, .mobile-drawer__link.is-highlight { color: var(--primary); }
.mobile-drawer__link .hd-badge, .mobile-drawer__link .hd-count { margin-left: auto; }
.mobile-drawer__link .hd-badge ~ .hd-count, .mnav-summary .hd-badge ~ .mnav-caret { margin-left: 6px; }

/* Trang Nạp ATM khi shop chưa cấu hình ngân hàng */
.topup-bank-off { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; }
.topup-bank-off > .bi { font-size: 28px; color: var(--text-muted); }
.topup-bank-off__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

@media (max-width: 1100px) {
  /* Tiện ích chỉ còn icon (tên vẫn là nhãn của nút cho trình đọc màn hình); mục không có icon giữ chữ */
  .hd-tools .hd-link.has-icon .hd-link__body {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hd-tools .hd-item + .hd-item::before { display: none; }
  .site-header--double .header-search { max-width: none; }
}
@media (max-width: 992px) {
  /* Header 1 tầng 769–992px: mục có icon chỉ còn icon (không thì nút Đăng nhập bị đẩy ra ngoài) */
  .hd-nav--top .hd-bar > .hd-item > .hd-link.has-icon { padding: 0 10px; }
  .hd-nav--top .hd-bar > .hd-item > .hd-link.has-icon .hd-link__body {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hd-nav--top .hd-bar > .hd-item > .hd-link.has-icon .hd-badge { display: none; }
  .hd-cat { grid-template-columns: 200px minmax(0, 1fr); }
  .hd-catalog__btn { padding: 0 12px; }
}
@media (max-width: 768px) {
  .hd-nav--top, .subheader, .subheader-spacer { display: none; }
  .hd-chips { display: block; }
}
@media (max-width: 540px) {
  .header-brand__fallback { display: block; max-width: 38vw; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .subheader, .hd-caret, .hd-caret-btn i, .mnav-caret { transition: none; }
}

/* ==========================================================================
   Trang tài khoản: Tổng quan (/tai-khoan), Hồ sơ cá nhân (/tai-khoan/thong-tin), Thông báo (/tai-khoan/thong-bao),
   Bảo mật & đăng nhập (/tai-khoan/bao-mat) + cột trái dùng chung mọi trang tài khoản (front/profile/_sidebar).
   Phẳng theo §8: viền 1px + nền, không đổ bóng, 1 màu nhấn --primary; xanh lá / vàng / đỏ chỉ báo ý nghĩa
   (pha từ token để đọc rõ cả sáng lẫn tối). Nút nạp xanh / trả tiền cam = ngoại lệ đã chốt. Tiền tố: pf-
   ========================================================================== */
.profile-layout {
  --pf-ok: color-mix(in srgb, var(--green) 55%, var(--text));
  --pf-warn: color-mix(in srgb, var(--accent) 55%, var(--text));
  --pf-fail: color-mix(in srgb, var(--red) 75%, var(--text));
}
.profile-layout .panel { box-shadow: none; }
.pf-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.pf-page .panel + .panel { margin-top: 0; }

/* --- Nút, link, chip, nhãn --- */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pf-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.pf-btn--sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.pf-btn--primary { background: var(--primary); color: #fff; }
.pf-btn--primary:hover { background: var(--primary-hover); }
.pf-btn--topup { background: #2563eb; color: #fff; }
.pf-btn--topup:hover { background: #1d4ed8; }
.pf-btn--pay { background: #ea580c; color: #fff; }
.pf-btn--pay:hover { background: #c2410c; }
.pf-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.pf-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.pf-btn--danger { background: var(--bg-card); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--pf-fail); }
.pf-btn--danger:hover { background: color-mix(in srgb, var(--red) 8%, var(--bg-card)); border-color: var(--red); }

.pf-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.pf-link:hover { text-decoration: underline; }
.pf-link:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: 2px; border-radius: 4px; }

.pf-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
span.pf-chip { cursor: default; }
a.pf-chip:hover, button.pf-chip:hover { border-color: var(--primary); color: var(--primary); }
.pf-chip:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: 1px; }
.pf-chip .bi-copy { font-size: 11px; color: var(--text-muted); }
.pf-chip--tier .bi { color: var(--tier, var(--text-muted)); }
.pf-chip--ok { color: var(--pf-ok); }
.pf-chip--warn { color: var(--pf-warn); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.pf-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--bg); color: var(--text-secondary);
}
.pf-tag--ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--pf-ok); }
.pf-tag--warn { background: var(--accent-light); color: var(--pf-warn); }
.pf-tag--info { background: var(--primary-light); color: var(--primary); }
.pf-tag--fail { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--pf-fail); }
.pf-tag--muted { background: var(--bg); color: var(--text-muted); }

.pf-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 800;
}
.pf-count--warn { background: var(--accent-light); color: var(--pf-warn); }
.pf-muted { font-size: 12.5px; color: var(--text-muted); }
.pf-note-text { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.pf-note-text:first-child { margin-top: 0; }
.pf-note-text a { font-weight: 700; color: var(--primary); }
.pf-note-text a:hover { text-decoration: underline; }
.pf-help { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.pf-optional-label { font-weight: 600; color: var(--text-muted); }

/* --- Khung panel --- */
.pf-panel__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.pf-panel__head .panel__title { margin-bottom: 0; }
.pf-panel__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pf-panel__foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pf-intro { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 16px; }
.pf-intro > div { flex: 1 1 320px; min-width: 0; }
.pf-intro + .pf-score, .pf-intro + .pf-tabs { margin-top: 16px; }

.pf-hint {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary); transition: border-color var(--transition-fast);
}
.pf-hint > .bi { flex-shrink: 0; font-size: 16px; color: var(--pf-warn); }
a.pf-hint:hover { border-color: var(--primary); }
a.pf-hint:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.pf-hint b { color: var(--text); }
.pf-hint a { font-weight: 700; color: var(--primary); }
.pf-hint--static { box-shadow: none; }
.pf-hint--static > .bi { color: var(--text-muted); }

.pf-empty {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 18px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.pf-empty > .bi { flex-shrink: 0; font-size: 26px; color: var(--text-muted); }
.pf-empty > div { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.pf-empty b { font-size: 14px; font-weight: 800; color: var(--text); }
.pf-empty span { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.pf-empty--ok > .bi { color: var(--pf-ok); }
.pf-empty--sm { padding: 14px; flex-wrap: nowrap; }
.pf-empty--sm > .bi { font-size: 20px; }
.pf-empty--sm > div { flex-basis: auto; }

/* --- Cột trái: thẻ khách + menu nhóm --- */
.pf-side { display: grid; gap: 12px; min-width: 0; }
.pf-side .panel { padding: 14px; }
.pf-side .panel + .panel { margin-top: 0; }
.pf-side__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-side__name { min-width: 0; display: grid; }
.pf-side__name strong { font-size: 15px; font-weight: 900; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-side__name span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-side__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-side__balance {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg);
}
.pf-side__balance > div { min-width: 0; }
.pf-side__balance small { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.pf-side__balance b { font-size: 17px; font-weight: 900; color: var(--text); overflow-wrap: anywhere; }

.pf-nav { display: grid; gap: 2px; }
.pf-nav__label { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.pf-nav__label:first-child { padding-top: 2px; }
.pf-nav__link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; color: var(--text); text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pf-nav__link > .bi:first-child { width: 18px; flex-shrink: 0; text-align: center; font-size: 16px; color: var(--text-muted); }
.pf-nav__text { flex: 1; min-width: 0; }
.pf-nav__link:hover { background: var(--bg); }
.pf-nav__link:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -1px; }
.pf-nav__link.is-active { background: var(--primary-light); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.pf-nav__link.is-active > .bi:first-child { color: var(--primary); }
.pf-nav__badge {
  min-width: 20px; height: 20px; padding: 0 6px; flex-shrink: 0; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--bg); color: var(--text-secondary);
}
.pf-nav__badge--primary { background: var(--primary); color: #fff; }
.pf-nav__badge--warn { background: var(--accent-light); color: var(--pf-warn); }
.pf-nav__badge--info { background: var(--primary-light); color: var(--primary); }
.pf-nav__ext { font-size: 11px; color: var(--text-muted); }
.pf-nav__logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.pf-nav__logout .pf-nav__link, .pf-nav__logout .pf-nav__link > .bi:first-child { color: var(--pf-fail); }
.pf-nav__logout .pf-nav__link:hover { background: color-mix(in srgb, var(--red) 8%, transparent); }

/* --- Tổng quan: đầu trang --- */
.pf-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.pf-hero__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pf-hero__who { min-width: 0; display: grid; gap: 4px; }
.pf-hero__greet { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pf-hero__name { font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.3px; color: var(--text); overflow-wrap: anywhere; }
.pf-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text-secondary); }
.pf-hero__meta .bi-calendar3 { color: var(--text-muted); }
.pf-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pf-hero__wallet {
  display: grid; gap: 4px; min-width: 290px; padding: 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.pf-hero__wallet > small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.pf-hero__wallet > small .bi { color: var(--text-muted); }
.pf-hero__wallet > b { font-size: 28px; font-weight: 900; line-height: 1.2; letter-spacing: -.5px; color: var(--text); overflow-wrap: anywhere; }
.pf-hero__wallet > span { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.pf-hero__actions { display: flex; gap: 8px; margin-top: 8px; }
.pf-hero__actions .pf-btn { flex: 1 1 auto; }
.pf-hero__actions .pf-btn:last-child { flex: 0 0 40px; padding: 0; }

/* --- Chỉ số --- */
.pf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf-kpi {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text);
  transition: border-color var(--transition-fast);
}
.pf-kpi:hover { border-color: var(--primary); }
.pf-kpi:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.pf-kpi > div { display: grid; gap: 1px; min-width: 0; }
.pf-kpi small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.pf-kpi b { font-size: 19px; font-weight: 900; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: anywhere; }
.pf-kpi > div > span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.pf-kpi__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 17px;
}
.pf-kpi--alert { box-shadow: inset 3px 0 0 var(--accent); }
.pf-kpi--alert .pf-kpi__icon { background: var(--accent-light); color: var(--pf-warn); }

.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.pf-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-main, .pf-aside { display: grid; gap: 16px; min-width: 0; }

/* --- Việc cần làm --- */
.pf-todos { display: grid; gap: 8px; }
.pf-todo {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  transition: border-color var(--transition-fast);
}
.pf-todo.is-urgent { box-shadow: inset 3px 0 0 var(--red); }
.pf-todo--topup { grid-template-columns: 52px minmax(0, 1fr) auto; }
a.pf-todo:hover { border-color: var(--primary); }
a.pf-todo:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.pf-todo__thumb { display: block; width: 52px; height: 40px; overflow: hidden; border-radius: 8px; background: var(--bg); }
.pf-todo__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-todo__thumb--icon { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-secondary); }
.pf-todo__main { min-width: 0; display: grid; gap: 4px; }
.pf-todo__name { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.pf-todo__name:hover { color: var(--primary); }
.pf-todo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-muted); }
.pf-todo__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.pf-todo__amount { display: grid; text-align: right; }
.pf-todo__amount small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.pf-todo__amount b { font-size: 15px; font-weight: 900; white-space: nowrap; }
.pf-todo__actions { display: grid; justify-items: end; gap: 3px; }
.pf-todo__short { font-size: 11px; font-weight: 700; color: var(--pf-fail); white-space: nowrap; }
.pf-todo__chev { color: var(--text-muted); }

/* --- Dòng đơn gần đây / biến động ví --- */
.pf-rows > li + li { border-top: 1px solid var(--border); }
.pf-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 96px; align-items: center; gap: 12px;
  padding: 10px 6px; border-radius: var(--radius-sm); color: var(--text); transition: background var(--transition-fast);
}
.pf-row:hover { background: var(--bg); }
.pf-row:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -2px; }
.pf-row__thumb { width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--bg); }
.pf-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-row__thumb--icon { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-size: 17px; color: var(--text-secondary); }
.pf-row__main { min-width: 0; display: grid; gap: 3px; }
.pf-row__title { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--text-muted); }
.pf-row__side { display: grid; justify-items: end; gap: 3px; text-align: right; }
.pf-row__side b { font-size: 14px; font-weight: 900; white-space: nowrap; }
.pf-row__side small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.pf-row__time { font-size: 12px; color: var(--text-muted); text-align: right; }
.pf-amount.is-in { color: var(--pf-ok); }

/* --- Mức độ bảo mật --- */
.pf-score__head { display: flex; align-items: center; gap: 12px; }
.pf-score__value { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.5px; color: var(--text); white-space: nowrap; }
.pf-score__value small { margin-left: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--text-muted); }
.pf-score__text { min-width: 0; display: grid; gap: 1px; }
.pf-score__text strong { font-size: 14px; font-weight: 800; }
.pf-score--ok .pf-score__text strong { color: var(--pf-ok); }
.pf-score--warn .pf-score__text strong { color: var(--pf-warn); }
.pf-score--fail .pf-score__text strong { color: var(--pf-fail); }
.pf-score__text span { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.pf-bar { height: 8px; margin-top: 12px; overflow: hidden; border-radius: var(--radius-full); background: var(--bg); }
.pf-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.pf-bar--ok > span { background: var(--green); }
.pf-bar--warn > span { background: var(--accent); }
.pf-bar--fail > span { background: var(--red); }

.pf-checks { display: grid; margin-top: 12px; }
.pf-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; }
.pf-check + .pf-check { border-top: 1px solid var(--border); }
.pf-checks--compact .pf-check { padding: 8px 0; }
.pf-check__icon { font-size: 16px; line-height: 20px; }
.pf-check.is-done .pf-check__icon { color: var(--pf-ok); }
.pf-check.is-todo .pf-check__icon { color: var(--pf-warn); }
.pf-check.is-optional .pf-check__icon { color: var(--text-muted); }
.pf-check__body { min-width: 0; display: grid; gap: 2px; }
.pf-check__body b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 800; line-height: 20px; }
.pf-check__body small { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.pf-check__action { font-size: 12.5px; font-weight: 700; line-height: 20px; color: var(--primary); white-space: nowrap; }
.pf-check.is-done .pf-check__action { color: var(--text-muted); }
.pf-check__action:hover { color: var(--primary); text-decoration: underline; }

/* --- Thông báo --- */
.pf-notes { display: grid; gap: 2px; }
.pf-note {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  border: 1px solid transparent; border-radius: var(--radius); color: var(--text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pf-note:hover { background: var(--bg); }
.pf-note:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -2px; }
.pf-note.is-unread { background: var(--primary-light); }
.pf-note.is-unread:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.pf-note__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-secondary); font-size: 16px;
}
.pf-note.is-unread .pf-note__icon { color: var(--primary); }
.pf-note__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pf-note__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-note__title { min-width: 0; font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; }
.pf-note__new {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-full);
  background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800;
}
.pf-note__msg { font-size: 13px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.pf-note__meta { font-size: 11.5px; color: var(--text-muted); }
.pf-note__chev { align-self: center; color: var(--text-muted); }
.pf-notes--compact .pf-note { gap: 10px; padding: 10px 8px; }
.pf-notes--compact .pf-note__icon { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.pf-notes--compact .pf-note__title { font-size: 13px; }
.pf-notes--compact .pf-note__msg {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px;
}
.pf-day { margin: 14px 4px 6px; font-size: 12px; font-weight: 800; color: var(--text-muted); }
.pf-day:first-child { margin-top: 0; }

.pf-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.pf-tab:hover { border-color: var(--border-hover); color: var(--text); }
.pf-tab:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.pf-tab.is-active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.pf-tab__count { min-width: 18px; padding: 0 5px; border-radius: var(--radius-full); text-align: center; font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.pf-tab.is-active .pf-tab__count { color: var(--primary); }
.pf-tab__count.is-alert, .pf-tab.is-active .pf-tab__count.is-alert { background: var(--primary); color: #fff; }

/* --- Tiện ích nhanh --- */
.pf-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pf-tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--text); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pf-tool > .bi { font-size: 19px; color: var(--text-secondary); transition: color var(--transition-fast); }
.pf-tool:hover { border-color: var(--primary); color: var(--primary); }
.pf-tool:hover > .bi { color: var(--primary); }
.pf-tool:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.pf-tool__count {
  position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 10.5px; font-weight: 800;
}
.pf-tool__count[hidden] { display: none; }

/* --- Hạng thành viên --- */
.pf-tier { display: flex; align-items: center; gap: 12px; }
.pf-tier__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: color-mix(in srgb, var(--tier, var(--text-muted)) 12%, transparent); color: var(--tier, var(--text-secondary));
}
.pf-tier__body { min-width: 0; display: grid; gap: 2px; }
.pf-tier__body strong { font-size: 15px; font-weight: 900; }
.pf-tier__body span { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.pf-tier__body b { color: var(--text); }
.pf-ladder { display: grid; margin-top: 12px; }
.pf-ladder__step { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text-secondary); }
.pf-ladder__step + .pf-ladder__step { border-top: 1px dashed var(--border); }
.pf-ladder__step > .bi { color: var(--text-muted); }
.pf-ladder__step.is-reached > .bi { color: var(--primary); }
.pf-ladder__step.is-current { font-weight: 800; color: var(--text); }
.pf-ladder__name { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pf-ladder__min { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Thiết bị & lịch sử đăng nhập --- */
.pf-device { display: flex; align-items: flex-start; gap: 12px; }
.pf-device > div { min-width: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pf-device b { font-size: 13.5px; color: var(--text); }
.pf-device__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 17px;
}
.pf-login { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.pf-login + .pf-login { border-top: 1px solid var(--border); }
.pf-login.is-current .pf-device__icon { background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }
.pf-login__main { min-width: 0; display: grid; gap: 2px; }
.pf-login__main b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 800; }
.pf-login__main span { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.pf-login__time { display: grid; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.pf-login__time small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pf-logout-others {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.pf-logout-others__text { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.pf-logout-others__text b { font-size: 13.5px; }
.pf-logout-others__text span { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.pf-logout-others__form { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-logout-others__form .form-input { width: 200px; height: 40px; }
.pf-logout-others__error { flex-basis: 100%; margin-top: 0; }

.pf-tips { display: grid; gap: 10px; }
.pf-tips li { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.pf-tips .bi { flex-shrink: 0; font-size: 16px; line-height: 20px; color: var(--text-muted); }
.pf-tips b { color: var(--text); }

.pf-form .pf-help { margin: -4px 0 14px; }
.pf-pw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; margin-bottom: 14px; }

/* --- Hồ sơ cá nhân --- */
.pf-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; }
.pf-facts > div + div { border-top: 1px solid var(--border); }
.pf-facts dt { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.pf-facts dd { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.pf-facts dd small { font-weight: 600; color: var(--text-muted); }
.pf-icon-btn {
  width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-secondary); font-size: 12px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pf-icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.pf-icon-btn:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: 1px; }

/* Chọn giao diện: hình minh hoạ vẽ đúng màu nền / thẻ của 2 bộ token (cố ý không dùng biến vì phải hiện cả 2 giao diện cùng lúc) */
.pf-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 10px; margin-top: 12px; }
.pf-theme {
  position: relative; display: grid; gap: 8px; padding: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition-fast);
}
.pf-theme:hover { border-color: var(--border-hover); }
.pf-theme input { position: absolute; opacity: 0; pointer-events: none; }
.pf-theme:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.pf-theme:has(input:focus-visible) { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.pf-theme__art {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 10px 1fr; gap: 4px;
  height: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 6px;
}
.pf-theme__art span { position: relative; border-radius: 3px; }
.pf-theme__art span:first-child { grid-column: 1 / -1; }
.pf-theme__art--light { background: #f0f2f5; }
.pf-theme__art--light span { background: #fff; }
.pf-theme__art--light span:first-child { background: #3b5bdb; }
.pf-theme__art--dark { background: #000; }
.pf-theme__art--dark span { background: #1a1a1a; }
.pf-theme__art--dark span:first-child { background: #4f70ed; }
.pf-theme__art--system { background: #f0f2f5; }
.pf-theme__art--system::before { content: ""; position: absolute; inset: 0 0 0 50%; background: #000; }
.pf-theme__art--system span { background: rgba(128, 128, 128, .45); }
.pf-theme__art--system span:first-child { background: #4f70ed; }
.pf-theme__label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }

/* Ngăn kéo điện thoại: số việc cần xem ở mục Tài khoản */
.mobile-drawer__badge {
  margin-left: auto; flex-shrink: 0; padding: 0 8px; border-radius: var(--radius-full);
  background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 800; line-height: 20px; white-space: nowrap;
}
.mobile-drawer__badge--info { background: color-mix(in srgb, #2563eb 12%, transparent); color: color-mix(in srgb, #2563eb 75%, var(--text)); }
.mobile-drawer__badge--warn { background: color-mix(in srgb, #d97706 14%, transparent); color: color-mix(in srgb, #b45309 80%, var(--text)); }

/* --- Responsive --- */
@media (max-width: 1250px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .pf-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pf-row__time { display: none; }
}
@media (max-width: 1100px) {
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* ≤ 992px (khung tài khoản 1 cột): bỏ thẻ khách, menu thành hàng tab cuộn ngang ngay trên nội dung */
@media (max-width: 992px) {
  .pf-side__card { display: none; }
  .pf-nav { position: relative; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius); }
  .pf-nav::-webkit-scrollbar { display: none; }
  .pf-nav__label, .pf-nav__logout, .pf-nav__link--extra { display: none; }
  .pf-nav__link { flex-shrink: 0; width: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  .pf-nav__link.is-active { box-shadow: none; }
  .pf-hero { grid-template-columns: minmax(0, 1fr); }
  .pf-hero__wallet { min-width: 0; }
}
@media (max-width: 760px) {
  .pf-aside, .pf-grid--even { grid-template-columns: minmax(0, 1fr); }
  .pf-optional { display: none; }
  .pf-todo { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pf-todo--topup { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pf-todo__thumb { width: 44px; height: 44px; }
  .pf-todo__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  .pf-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  .pf-form__spacer { display: none; }
  .pf-pw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .pf-kpis { gap: 8px; }
  .pf-kpi { flex-direction: column; gap: 8px; padding: 12px; }
  .pf-kpi__icon { width: 30px; height: 30px; font-size: 15px; }
  .pf-kpi b { font-size: 16px; }
  .pf-hero__id { align-items: flex-start; gap: 12px; }
  .pf-hero .user-avatar--xl { width: 52px; height: 52px; font-size: 21px; }
  .pf-hero__name { font-size: 20px; }
  .pf-hero__wallet { padding: 14px; }
  .pf-hero__wallet > b { font-size: 24px; }
  .pf-login { grid-template-columns: 36px minmax(0, 1fr); }
  .pf-login__time { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; text-align: left; font-weight: 600; }
  .pf-logout-others__form, .pf-logout-others__form .form-input, .pf-logout-others__form .pf-btn { width: 100%; }
  .pf-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pf-theme__label { font-size: 12px; }
  .pf-row { gap: 10px; }
  .pf-row__thumb { width: 40px; height: 40px; }
}
@media (max-width: 540px) {
  .pf-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .pf-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Thanh điều hướng dưới điện thoại (≤ 768px) + ngăn trượt — layouts/partials/mobile-bar(/*), initMobileBar (app.js)
   Tiền tố: mbar- thanh · msheet- khung ngăn · ms- thành phần chung trong ngăn · msc- Danh mục · mst- Nạp tiền · msa- Tài khoản.
   Phẳng (§8): không bóng; tách lớp bằng viền + nền. Thanh nằm trên ngăn (ngăn trượt ra từ mép trên thanh) → đang mở
   ngăn vẫn bấm được ô khác. Chiều cao thanh = --mbar-h (body chừa đáy, toast, nút nổi, menu tài khoản header dùng chung).
   ========================================================================== */
:root { --mbar-h: 64px; }
.mbar, .msheet, .msheet-backdrop { display: none; }
html.is-msheet-open { overflow: hidden; } /* khoá cuộn trang phía sau (html truyền overflow cho khung nhìn) */

@media (max-width: 768px) {
  /* ---------- Thanh 5 ô ---------- */
  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-card); border-top: 1px solid var(--border);
    transition: transform .22s ease;
  }
  /* Đang gõ trong ô nhập (bàn phím ảo mở) → thu thanh xuống, không nổi lên trên bàn phím */
  html.is-typing .mbar { transform: translateY(calc(100% + 30px)); }
  .mbar__inner {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 560px; height: var(--mbar-h); margin: 0 auto; padding: 0 4px;
  }
  .mbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; padding: 6px 2px 7px; border: 0; background: none; color: var(--text-muted);
    font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: color var(--transition-fast);
  }
  .mbar__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 30px; border-radius: 15px; font-size: 20px; line-height: 1;
    transition: background var(--transition-fast);
  }
  .mbar__label {
    max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; text-overflow: ellipsis;
  }
  /* Ô của trang đang xem / ngăn đang mở: chữ màu chính + nền viên thuốc sau icon.
     Đang mở 1 ngăn → chỉ ô của ngăn đó được tô (không 2 ô cùng màu). */
  .mbar__item.is-active, .mbar__item[aria-expanded="true"] { color: var(--primary); }
  .mbar__item.is-active .mbar__icon, .mbar__item[aria-expanded="true"] .mbar__icon { background: var(--primary-light); }
  .mbar.has-sheet .mbar__item.is-active:not([aria-expanded="true"]) { color: var(--text-muted); }
  .mbar.has-sheet .mbar__item.is-active:not([aria-expanded="true"]) .mbar__icon { background: none; }
  .mbar__item:active .mbar__icon { background: var(--primary-light); }
  .mbar__item:focus-visible { outline: none; }
  .mbar__item:focus-visible .mbar__icon, .mbar__item:focus-visible .mbar__fab { outline: 2px solid var(--primary); outline-offset: 2px; }

  .mbar__icon--avatar .user-avatar { width: 26px; height: 26px; font-size: 12px; outline: none; }
  .mbar__item.is-active .mbar__icon--avatar .user-avatar,
  .mbar__item[aria-expanded="true"] .mbar__icon--avatar .user-avatar { outline: 2px solid var(--primary); outline-offset: 1px; }
  /* Số việc cần xem (đơn chờ trả + thông báo chưa đọc) — đỏ = cần xử lý */
  .mbar__badge {
    position: absolute; top: -4px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 4px;
    border: 2px solid var(--bg-card); border-radius: 9px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 14px; text-align: center;
  }

  /* Nút Nạp tiền giữa: tròn xanh (ngoại lệ màu nút nạp §8), nhô lên khỏi thanh; mở ngăn → dấu + xoay thành × */
  .mbar__item--topup { color: var(--text-secondary); }
  .mbar__fab {
    display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: -26px;
    border: 5px solid var(--bg-card); border-radius: 50%; background: #2563eb; color: #fff; font-size: 22px; line-height: 1;
    transition: background var(--transition-fast);
  }
  .mbar__fab .bi { transition: transform .22s ease; }
  .mbar__item--topup:active .mbar__fab, .mbar__item--topup[aria-expanded="true"] .mbar__fab { background: #1d4ed8; }
  .mbar__item--topup[aria-expanded="true"] .mbar__fab .bi { transform: rotate(45deg); }
  .mbar__item--topup.is-active .mbar__label, .mbar__item--topup[aria-expanded="true"] .mbar__label { color: var(--primary); }

  /* ---------- Khung ngăn trượt ---------- */
  .msheet-backdrop {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 140; background: rgba(var(--shade), .55); opacity: 0; transition: opacity .24s ease;
  }
  .msheet-backdrop.is-open { opacity: 1; }
  .msheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; z-index: 150;
    bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
    max-width: 560px; margin: 0 auto;
    max-height: calc(100vh - var(--mbar-h) - 56px);
    max-height: calc(100dvh - var(--mbar-h) - env(safe-area-inset-bottom, 0px) - 56px);
    background: var(--bg-card); border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: none;
  }
  .msheet.is-open { transform: translateY(var(--msheet-drag, 0px)); }
  .msheet.is-dragging { transition: none; }
  .msheet-backdrop[hidden], .msheet[hidden] { display: none; }

  .msheet__drag { flex-shrink: 0; padding: 8px 16px 12px; border-bottom: 1px solid var(--border); touch-action: none; cursor: grab; user-select: none; }
  .msheet__grip { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--border-hover); }
  .msheet__head { display: flex; align-items: center; gap: 12px; }
  .msheet__titles { flex: 1; min-width: 0; }
  .msheet__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--text); }
  .msheet__subtitle { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
  .msheet__close {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-secondary); font-size: 14px; cursor: pointer;
  }
  .msheet__close:hover, .msheet__close:focus-visible { border-color: var(--border-hover); color: var(--text); outline: none; }
  /* Bố cục khối (không grid / flex): thân ngăn cao cố định + nội dung dài hơn thì grid ép khung cuộn ngang (hàng tab,
     hàng chip) về chiều cao tối thiểu */
  .msheet__body {
    flex: 1; min-height: 0; padding: 14px 16px 36px; /* đáy chừa chỗ nút Nạp tiền nhô lên khỏi thanh */
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .msheet__body > * + * { margin-top: 18px; }
  .msheet__body > .msc-panel { margin-top: 16px; }

  /* ---------- Thành phần chung ---------- */
  .ms-section { display: grid; gap: 10px; min-width: 0; }
  .ms-heading {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  }
  .ms-heading small, .ms-heading .ms-link { margin-left: auto; letter-spacing: 0; text-transform: none; }
  .ms-heading small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
  .ms-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
  .ms-link .bi { font-size: 11px; }

  .ms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
  .ms-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 2px 6px;
    border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: center;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .ms-tile:active, .ms-tile:focus-visible { background: var(--primary-light); outline: none; }
  .ms-tile__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text-secondary); font-size: 20px;
  }
  .ms-tile__label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  }
  .ms-tile.is-current .ms-tile__icon { border-color: var(--primary); color: var(--primary); }
  .ms-tile.is-current .ms-tile__label { color: var(--primary); }
  .ms-tile__count {
    position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px;
    border: 2px solid var(--bg-card); border-radius: 10px; background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
  }
  .ms-tile__count--alert { background: var(--red); }
  .ms-tile__count[hidden] { display: none; }
  .ms-tile__badge { position: absolute; top: -8px; right: -14px; border: 2px solid var(--bg-card); height: 19px; }
  .ms-tile__badge.hd-badge--primary { background: color-mix(in srgb, var(--primary) 14%, var(--bg-card)); }
  .ms-tile__badge.hd-badge--hot { background: color-mix(in srgb, var(--red) 14%, var(--bg-card)); }
  .ms-tile__badge.hd-badge--new { background: color-mix(in srgb, var(--green) 16%, var(--bg-card)); }
  .ms-tile__badge.hd-badge--muted { background: var(--bg-card); }
  /* Công tắc giao diện tối: công tắc nhỏ ở góc ô icon */
  .ms-tile__state {
    position: absolute; right: -8px; bottom: -5px; width: 24px; height: 14px;
    border: 2px solid var(--bg-card); border-radius: 9px; background: var(--border-hover); box-sizing: content-box;
    transition: background var(--transition-fast);
  }
  .ms-tile__state::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff;
    transition: transform var(--transition-fast);
  }
  .ms-tile--switch[aria-checked="true"] .ms-tile__icon { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary); }
  .ms-tile--switch[aria-checked="true"] .ms-tile__state { background: var(--primary); }
  .ms-tile--switch[aria-checked="true"] .ms-tile__state::after { transform: translateX(10px); }

  .ms-list { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
  .ms-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 12px; color: var(--text); text-decoration: none; }
  .ms-list > .ms-row + .ms-row { border-top: 1px solid var(--border); }
  a.ms-row:active, a.ms-row:focus-visible { background: var(--primary-light); outline: none; }
  .ms-row__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 10px; background: var(--bg); color: var(--text-secondary); font-size: 16px;
  }
  .ms-row__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .ms-row__text b { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .ms-row__text small { font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
  .ms-row__go { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
  .ms-row.is-current b, .ms-row.is-current .ms-row__icon { color: var(--primary); }
  .ms-row--warn { box-shadow: inset 3px 0 0 var(--accent); }
  .ms-row--warn .ms-row__icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
  .ms-row__cta {
    flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-full);
    font-size: 12.5px; font-weight: 800; color: var(--text);
  }
  .ms-row__cta--pay { border-color: #ea580c; background: #ea580c; color: #fff; } /* trả tiền = cam nút mua (§8) */
  .ms-row--contact { gap: 10px; }
  .ms-row--contact .ms-row__text small { color: var(--text-secondary); }
  .ms-row--contact .ms-btn { min-width: 64px; }

  .ms-badge {
    flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary);
    font-size: 11px; font-weight: 800; line-height: 16px; white-space: nowrap;
  }
  .ms-badge--warn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 60%, var(--text)); }

  .ms-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 700;
    white-space: nowrap; text-decoration: none; cursor: pointer; touch-action: manipulation;
  }
  .ms-btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .ms-btn--block { width: 100%; }
  .ms-btn--primary { background: var(--primary); color: #fff; }
  .ms-btn--primary:active { background: var(--primary-hover); }
  .ms-btn--topup { background: #2563eb; color: #fff; }
  .ms-btn--topup:active { background: #1d4ed8; }
  .ms-btn--ghost { border-color: var(--border); background: var(--bg-card); color: var(--text); }
  .ms-btn--ghost:active, .ms-btn--ghost:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
  .ms-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ms-icon-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); font-size: 14px; cursor: pointer;
  }
  .ms-icon-btn:active, .ms-icon-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }

  .ms-callout { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .ms-callout__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 10px; background: var(--primary-light); color: var(--primary); font-size: 17px;
  }
  .ms-callout__text { display: grid; gap: 3px; min-width: 0; }
  .ms-callout__text b { font-size: 14.5px; font-weight: 800; color: var(--text); }
  .ms-callout__text small { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

  .ms-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ms-facts:empty { display: none; }
  .ms-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
  .ms-facts .bi { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: var(--text-muted); }
  .ms-facts b { color: var(--text); }

  .ms-empty { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 18px 8px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--text-muted); }
  .ms-empty > .bi { font-size: 26px; }
  .ms-empty p { margin: 0; }
  .ms-empty[hidden] { display: none; }

  /* ---------- Ngăn Danh mục ---------- */
  .msc-search { position: relative; display: flex; align-items: center; gap: 8px; }
  .msc-search__icon { position: absolute; left: 13px; font-size: 15px; color: var(--text-muted); pointer-events: none; }
  .msc-search__input {
    flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); font: inherit; font-size: 16px; /* ≥ 16px: iOS không tự phóng to khi gõ */
  }
  .msc-search__input::placeholder { color: var(--text-muted); }
  .msc-search__input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-glow); }
  .msc-search__btn {
    flex-shrink: 0; height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius);
    background: var(--primary); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  }
  .msc-chips { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .msc-chips::-webkit-scrollbar { display: none; }
  .msc-chip {
    position: relative; flex-shrink: 0; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .msc-chip:active, .msc-chip:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
  .msc-tabs { display: flex; gap: 4px; margin-left: -16px; margin-right: -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
  .msc-tabs::-webkit-scrollbar { display: none; }
  .msc-tab {
    position: relative; flex-shrink: 0; margin-bottom: -1px; padding: 9px 12px 10px; border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
  }
  .msc-tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary); }
  .msc-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px 6px 0 0; }
  .msc-panel { display: grid; gap: 8px; min-width: 0; }
  .msc-panel[hidden] { display: none; }
  .msc-all {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
    background: var(--primary-light); color: var(--primary); font-size: 13.5px; font-weight: 600;
  }
  .msc-all b { font-weight: 800; }
  .msc-cat { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
  .msc-cat.is-active { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
  .msc-cat[hidden] { display: none; }
  .msc-cat__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; color: var(--text); border-radius: var(--radius); }
  .msc-cat__head:active, .msc-cat__head:focus-visible { background: var(--primary-light); outline: none; }
  .msc-cat__thumb {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-muted); font-size: 18px;
  }
  .msc-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .msc-cat__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .msc-cat__text b { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .msc-cat__text small { font-size: 12px; color: var(--text-muted); }
  .msc-cat.is-active .msc-cat__text b { color: var(--primary); }
  .msc-cat__go { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
  .msc-cat__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 68px; }
  .msc-sub {
    max-width: 100%; overflow: hidden; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
  }
  .msc-sub:active, .msc-sub:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
  .msc-sub.is-current { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
  .msc-sub--more { color: var(--primary); }
  .msc-sub[hidden] { display: none; }
  /* Đang gõ lọc: bỏ tab + kho nổi bật, hiện mọi nhóm, chỉ giữ danh mục khớp */
  .msheet--catalog.is-filtering [data-msc-featured],
  .msheet--catalog.is-filtering .msc-tabs,
  .msheet--catalog.is-filtering .msc-all,
  .msheet--catalog.is-filtering [data-msc-none] { display: none; }
  .msheet--catalog.is-filtering .msc-panel { display: grid; }
  .msheet--catalog.is-filtering .msc-panel.is-empty { display: none; }

  /* ---------- Ngăn Nạp tiền ---------- */
  .mst-balance { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .mst-balance__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 12px; background: var(--primary-light); color: var(--primary); font-size: 18px;
  }
  .mst-balance__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .mst-balance__text small { font-size: 12px; color: var(--text-muted); }
  .mst-balance__text b, .msa-wallet__text b { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .mst-choices .topup-option { padding: 12px 14px; }
  .mst-choices .topup-option:active { border-color: var(--primary); background: var(--primary-light); }
  .mst-transfer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius); }
  .mst-transfer__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .mst-transfer__text small { font-size: 12px; color: var(--text-muted); }
  .mst-transfer code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 800; letter-spacing: .02em;
    color: var(--text); overflow-wrap: anywhere;
  }

  /* ---------- Ngăn Tài khoản ---------- */
  .msa-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .msa-head__who { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .msa-head__who > b { overflow: hidden; font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
  .msa-head__who > small { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
  .msa-tier {
    justify-self: start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 4px; overflow: hidden;
    padding: 2px 9px 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-full);
    font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
  }
  .msa-tier .bi { color: var(--tier, var(--text-muted)); }
  .msa-tier small { overflow: hidden; font-weight: 600; color: var(--text-muted); text-overflow: ellipsis; }
  .msa-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .msa-wallet__text { flex: 1; min-width: 120px; display: grid; gap: 1px; }
  .msa-wallet__text small { font-size: 12px; color: var(--text-muted); }
  .msa-wallet__actions { display: flex; gap: 8px; }
}

@media (max-width: 380px) {
  .mbar__icon { width: 46px; }
  .mbar__label { font-size: 10.5px; }
  .ms-grid { gap: 4px 2px; }
  .ms-tile__icon { width: 44px; height: 44px; }
  .ms-tile__label { font-size: 11.5px; }
  .msc-cat__subs { padding-left: 12px; }
  .msa-wallet__actions { width: 100%; }
  .msa-wallet__actions .ms-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mbar, .msheet, .msheet-backdrop, .mbar__fab .bi { transition: none; }
}

/* ==========================================================================
   Nhận thông báo qua Telegram (trang Tài khoản → Thông báo, front/profile/_telegram) — tiền tố ptg-
   Phẳng theo quy tắc §8, dùng lại nút pf-btn của trang tài khoản.
   ========================================================================== */
.ptg { margin-top: 16px; }
.ptg .panel__title { display: inline-flex; align-items: center; gap: 8px; }
.ptg .panel__title > .bi { color: var(--primary); }
.ptg-state { padding: 2px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border)); font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--green) 60%, var(--text)); }
.ptg-state.is-off { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: color-mix(in srgb, var(--red) 80%, var(--text)); }
.ptg code { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); font-size: 12px; }
.ptg-warn { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); }
.ptg-warn > .bi { color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
.ptg-form { margin-top: 14px; display: grid; gap: 14px; }
.ptg-events { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.ptg-events legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 800; color: var(--text); }
.ptg-event { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; transition: border-color var(--transition-fast); }
.ptg-event:hover { border-color: var(--border-hover); }
.ptg-event:has(input:checked) { border-color: var(--primary); }
.ptg-event input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); }
.ptg-event span { display: grid; gap: 2px; min-width: 0; }
.ptg-event b { font-size: 13px; color: var(--text); }
.ptg-event small { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.ptg-event--inline { max-width: 420px; }
.ptg-quiet { max-width: 360px; }
.ptg-time { display: flex; align-items: center; gap: 8px; }
.ptg-time .form-input { flex: 1; min-width: 0; }
.ptg-time > span { color: var(--text-muted); }
.ptg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ptg-unlink { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ptg-steps { margin-top: 4px; padding: 14px 16px; border: 1px dashed var(--border-hover); border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.ptg-steps ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; color: var(--text-secondary); }
.ptg-steps [data-telegram-state] { margin: 10px 0 0; font-weight: 700; }

@media (max-width: 640px) {
  .ptg-events { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Nạp thẻ cào (/nap-the): đầu trang (chế độ, số dư, chỉ số thẻ của khách), form "Nạp 1 thẻ" / "Nạp nhiều thẻ",
   khối "Thẻ vừa gửi", bảng chiết khấu loại thẻ × mệnh giá, lịch sử thẻ (bấm mở chi tiết), tính thẻ cần nạp,
   hướng dẫn seri / mã thẻ, hỗ trợ, hỏi đáp. Phẳng: viền + nền, không đổ bóng, 1 màu nhấn; xanh lá / vàng / đỏ chỉ báo
   ý nghĩa (tiền vào / cảnh báo / lỗi); nút gửi thẻ xanh nạp tiền #2563eb (ngoại lệ đã chốt). Tiền tố: nt-
   ========================================================================== */
.nt-page {
  /* Màu chữ theo ý nghĩa, pha từ token để đọc rõ trên cả nền sáng lẫn tối */
  --nt-ok: color-mix(in srgb, var(--green) 55%, var(--text));
  --nt-warn: color-mix(in srgb, var(--accent) 55%, var(--text));
  --nt-fail: color-mix(in srgb, var(--red) 75%, var(--text));
  --nt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
}
.nt-page [hidden] { display: none !important; }
.nt-page .panel { box-shadow: none; }
.nt-page .panel + .panel { margin-top: 0; }
.nt-page > .breadcrumb { margin-bottom: -6px; }

.nt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.nt-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-btn:disabled { opacity: .55; cursor: not-allowed; }
.nt-btn--sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.nt-btn--primary { background: var(--primary); color: #fff; }
.nt-btn--primary:hover { background: var(--primary-hover); }
.nt-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.nt-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

.nt-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.nt-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.nt-section-head .panel__title { margin-bottom: 0; }
.nt-section-head__note { font-size: 12.5px; color: var(--text-muted); }
.nt-section-head__link { margin-left: auto; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--primary); }
.nt-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.nt-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.nt-best {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: var(--radius-full);
  background: var(--bg-card); color: var(--primary); font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap;
}

/* Logo loại thẻ: ô chữ cái theo màu nhà mạng (nhạt) hoặc ảnh admin đặt trên nền trắng */
.nt-logo {
  --telco: #3b5bdb;
  position: relative; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid color-mix(in srgb, var(--telco) 30%, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--telco) 10%, var(--bg-card)); color: color-mix(in srgb, var(--telco) 80%, var(--text));
  font-size: 16px; font-weight: 900; line-height: 1;
}
.nt-logo--xs { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.nt-logo--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.nt-logo--lg { width: 100%; height: 48px; font-size: 20px; }
.nt-logo--image { padding: 4px 6px; background: #fff; border-color: var(--border); }
.nt-logo--xs.nt-logo--image, .nt-logo--sm.nt-logo--image { padding: 2px 3px; }
.nt-logo--image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nt-logo__letter {
  position: absolute; inset: 0; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--telco) 10%, var(--bg-card)); color: color-mix(in srgb, var(--telco) 80%, var(--text));
}

/* ---------- Đầu trang ---------- */
.nt-hero > * + * { margin-top: 16px; }
.nt-hero > [data-card-stats]:not(:has(.nt-kpis)) { display: none; }
.nt-hero__top { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; }
.nt-hero__intro { flex: 1; min-width: 0; }
.nt-hero__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nt-mode {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--text-secondary);
}
.nt-mode--auto { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); color: var(--nt-ok); }
.nt-mode__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.nt-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.nt-facts li { display: inline-flex; align-items: center; gap: 6px; }
.nt-facts i { color: var(--text-muted); }
.nt-facts b { font-weight: 800; color: var(--text); }
.nt-wallet {
  flex-shrink: 0; width: 300px; display: grid; align-content: start; gap: 4px; padding: 16px 18px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.nt-wallet__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.nt-wallet__label i { color: var(--text-muted); }
.nt-wallet__value { font-size: 28px; font-weight: 900; line-height: 1.2; letter-spacing: -.5px; color: var(--text); overflow-wrap: anywhere; }
.nt-wallet__meta { font-size: 12px; color: var(--text-muted); }
.nt-wallet__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.nt-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nt-method {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color var(--transition-fast);
}
.nt-method:hover { border-color: var(--border-hover); }
.nt-method:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-method > i {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 18px;
}
.nt-method > span { display: grid; gap: 1px; min-width: 0; }
.nt-method strong { font-size: 14px; font-weight: 800; }
.nt-method small { font-size: 12px; color: var(--text-muted); }
.nt-method.is-current { border-color: var(--primary); background: var(--primary-light); }
.nt-method.is-current > i { background: var(--bg-card); color: var(--primary); }
.nt-method.is-current strong { color: var(--primary); }

.nt-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.nt-callout > i { font-size: 16px; color: var(--nt-warn); }
.nt-callout > span:not(.nt-callout__actions) { flex: 1; min-width: 220px; }
.nt-callout b { color: var(--text); }
.nt-callout__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Khuyến mãi nạp tiền đang chạy (partial front/topup/_promo: trang Nạp ATM, Nạp thẻ, xem trước ở Admin → Khuyến mãi nạp) */
.nt-promo {
  display: grid; gap: 10px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--primary);
}
.nt-promo__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nt-promo__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); font-size: 17px;
}
.nt-promo__title { flex: 1; min-width: 180px; display: grid; gap: 1px; }
.nt-promo__title strong { font-size: 14px; font-weight: 800; color: var(--text); }
.nt-promo__title small { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.nt-promo__end { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; color: var(--text-secondary); }
.nt-promo__end b { font-variant-numeric: tabular-nums; color: var(--text); }
.nt-promo__tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nt-promo__tier {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 5px 4px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg);
  font-size: 12.5px; color: var(--text-secondary); transition: border-color var(--transition-fast);
}
.nt-promo__tier b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
a.nt-promo__tier:hover, .nt-promo__tier.is-current { border-color: var(--primary); }
a.nt-promo__tier:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-promo__gift {
  padding: 4px 10px; border-radius: var(--radius-full); background: var(--primary-light);
  color: var(--primary); font-weight: 800; white-space: nowrap;
}
.nt-promo__tier.is-current .nt-promo__gift { background: var(--primary); color: #fff; }
.nt-promo__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
/* Tiền khuyến mãi trong dòng lịch sử nạp / khối xem lại / modal thành công */
.nt-row__bonus { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--primary); }
.nt-bonus { color: var(--primary); }

.nt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nt-kpi {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color var(--transition-fast);
}
.nt-kpi:hover { border-color: var(--primary); }
.nt-kpi:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-kpi__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 16px;
}
.nt-kpi__body { display: grid; gap: 1px; min-width: 0; }
.nt-kpi small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.nt-kpi b { font-size: 18px; font-weight: 900; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: anywhere; }
.nt-kpi b em { font-size: 12.5px; font-style: normal; font-weight: 700; letter-spacing: 0; color: var(--text-muted); }
.nt-kpi__body > span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.nt-kpi.is-wait { box-shadow: inset 3px 0 0 var(--accent); }
.nt-kpi.is-wait .nt-kpi__icon { color: var(--nt-warn); }

/* ---------- Bố cục 2 cột ---------- */
.nt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.nt-main, .nt-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.nt-aside__desc { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.nt-aside__desc b { color: var(--text); }

/* ---------- Form gửi thẻ ---------- */
.nt-send__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.nt-send__head .panel__title { margin-bottom: 0; }
.nt-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.nt-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); background: transparent;
  font-size: 13px; font-weight: 800; white-space: nowrap; color: var(--text-secondary); cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.nt-tab:hover { color: var(--text); }
.nt-tab:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.nt-tab.is-active { background: var(--bg-card); border-color: var(--border); color: var(--primary); }
.nt-tab__meta { font-size: 11px; font-weight: 700; color: var(--text-muted); }

.nt-slots {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--primary);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.nt-slots > i { color: var(--primary); }
.nt-slots.is-full { box-shadow: inset 3px 0 0 var(--accent); }
.nt-slots.is-full > i { color: var(--nt-warn); }
.nt-off { display: grid; justify-items: center; gap: 6px; }
.nt-off > i { font-size: 28px; color: var(--text-muted); }
.nt-off .nt-btn { margin-top: 6px; }

.nt-step { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.nt-step__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 800; color: var(--text); }
.nt-step__num {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 12px; font-weight: 900;
}
.nt-step__hint { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.nt-telco, .nt-amount { position: relative; display: block; min-width: 0; cursor: pointer; }
.nt-telco input, .nt-amount input { position: absolute; opacity: 0; pointer-events: none; }
.nt-telcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.nt-telco__box {
  position: relative; display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nt-telco__text { display: grid; min-width: 0; }
.nt-telco__text strong { font-size: 14px; font-weight: 800; color: var(--text); }
.nt-telco__text small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.nt-telco__best { position: absolute; top: -9px; left: 10px; }
.nt-telco__check { position: absolute; top: 6px; right: 7px; font-size: 14px; line-height: 1; color: var(--primary); opacity: 0; transition: opacity var(--transition-fast); }
.nt-telcos--images { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.nt-telcos--images .nt-telco__box { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 10px 10px; text-align: center; }
.nt-telcos--images .nt-telco__text { justify-items: center; }
.nt-telcos--images .nt-telco__check { top: 4px; right: 4px; border-radius: 50%; background: var(--bg-card); }
.nt-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.nt-amount__box {
  display: grid; gap: 1px; padding: 10px 6px; text-align: center;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nt-amount__box strong { font-size: 15px; font-weight: 900; color: var(--text); }
.nt-amount__box small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
/* % chiết khấu riêng của mệnh giá (đổi theo loại thẻ đang chọn); mệnh giá loại thẻ không nhận → mờ, không chọn được */
.nt-amount__rate { font-size: 10.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nt-amount__rate:empty { display: none; }
.nt-amount.is-off { cursor: not-allowed; }
.nt-amount.is-off .nt-amount__box { border-style: dashed; background: var(--bg); }
.nt-amount.is-off .nt-amount__box strong, .nt-amount.is-off .nt-amount__box small { color: var(--text-muted); }
.nt-amount.is-off .nt-amount__box strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.nt-amount.is-off:hover .nt-amount__box { border-color: var(--border); }
.nt-telco:hover .nt-telco__box, .nt-amount:hover .nt-amount__box { border-color: var(--border-hover); }
.nt-telco input:checked + .nt-telco__box, .nt-amount input:checked + .nt-amount__box { border-color: var(--primary); background: var(--primary-light); }
.nt-telco input:checked + .nt-telco__box .nt-telco__check { opacity: 1; }
.nt-amount input:checked + .nt-amount__box strong, .nt-amount input:checked + .nt-amount__box small, .nt-amount input:checked + .nt-amount__box .nt-amount__rate { color: var(--primary); }
.nt-telco input:focus-visible + .nt-telco__box, .nt-amount input:focus-visible + .nt-amount__box { outline: 3px solid var(--primary-glow); outline-offset: 2px; }

.nt-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.nt-note > i { margin-top: 1px; }
.nt-note b { color: var(--text); }
.nt-note--warn { box-shadow: inset 3px 0 0 var(--accent); }
.nt-note--warn > i { color: var(--nt-warn); }

/* Ô seri / mã thẻ: đếm ký tự, nút Dán / Xoá, nhắc định dạng (ok / warn / error) */
.nt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nt-field { min-width: 0; }
.nt-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.nt-field__head .nt-label { margin-bottom: 0; }
.nt-field__count { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nt-field__control { position: relative; }
.nt-code { height: 48px; padding-right: 46px; font-family: var(--nt-mono); font-size: 16px; font-weight: 700; letter-spacing: .6px; }
.nt-code::placeholder { font-family: var(--global-font); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.nt-field__btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nt-field__btn:hover { background: var(--bg-card); color: var(--text); }
.nt-field__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.nt-field__hint { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.nt-field[data-level="ok"] .nt-field__hint { color: var(--nt-ok); }
.nt-field[data-level="warn"] .nt-field__hint { color: var(--nt-warn); }
.nt-field[data-level="warn"] .nt-code { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.nt-field[data-level="error"] .nt-field__hint { color: var(--nt-fail); }
.nt-field[data-level="error"] .nt-code { border-color: color-mix(in srgb, var(--red) 60%, var(--border)); }
.nt-swap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px; color: var(--text-secondary);
}
.nt-swap > i { color: var(--nt-warn); }
.nt-swap b { color: var(--text); }
.nt-swap .nt-btn { margin-left: auto; }
.nt-tip { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.nt-tip > i { margin-top: 1px; }
.nt-tip b { color: var(--text-secondary); }

/* Xem lại trước khi gửi: thẻ minh hoạ + số tiền */
.nt-review {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; margin: 4px 0 16px; padding: 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.nt-review__card {
  --telco: #3b5bdb;
  position: relative; display: grid; align-content: space-between; gap: 6px; aspect-ratio: 1.6; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 4px 0 var(--telco); overflow: hidden;
}
.nt-review__telco { font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--telco) 75%, var(--text)); }
.nt-review__face { font-size: 22px; font-weight: 900; letter-spacing: -.3px; color: var(--text); }
.nt-review__serial { font-family: var(--nt-mono); font-size: 12px; color: var(--text-muted); }
.nt-review__chip { position: absolute; top: 16px; right: 16px; width: 30px; height: 22px; border: 1px solid var(--border-hover); border-radius: 5px; background: var(--bg); }
.nt-review__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.nt-review__lines > div:last-child { border-bottom: 0; }
.nt-review__lines dt { font-weight: 600; color: var(--text-secondary); }
.nt-review__lines dd { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.nt-review__lines .is-total dt { font-weight: 800; color: var(--text); }
.nt-review__lines .is-total dd { font-size: 20px; font-weight: 900; color: var(--nt-ok); }

.nt-page .recaptcha { margin-bottom: 12px; }
.nt-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px;
  border: 0; border-radius: var(--radius-sm); background: #2563eb; color: #fff; font-size: 15px; font-weight: 900; cursor: pointer;
  transition: background var(--transition-fast);
}
.nt-submit:hover { background: #1d4ed8; }
.nt-submit:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-submit:disabled { opacity: .55; cursor: not-allowed; }
.nt-form__foot { display: flex; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--text-muted); }

/* Nạp nhiều thẻ: bảng dòng thẻ (≤ 860px mỗi dòng thành thẻ) */
.nt-batch__intro { display: flex; gap: 8px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.nt-batch__intro > i { margin-top: 2px; color: var(--text-muted); }
.nt-batch__intro b { color: var(--text); }
.nt-batch__errors {
  margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--red); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.nt-batch__errors strong { color: var(--nt-fail); }
.nt-batch__errors ul { margin-top: 4px; padding-left: 18px; list-style: disc; }
.nt-batch__table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.nt-batch__labels, .nt-batch__row {
  display: grid; grid-template-columns: 26px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr) 84px 34px;
  gap: 8px; align-items: center; padding: 8px 10px;
}
.nt-batch__labels { background: var(--bg); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.nt-batch__labels span:nth-last-child(2) { text-align: right; }
.nt-batch__row + .nt-batch__row { border-top: 1px solid var(--border); }
.nt-batch__row.is-error { box-shadow: inset 3px 0 0 var(--red); }
.nt-batch__no {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); font-size: 12px; font-weight: 800; color: var(--text-secondary);
}
.nt-batch__cell { display: block; min-width: 0; }
.nt-batch__cap { display: none; }
.nt-batch__row .form-input { height: 38px; padding: 0 10px; font-size: 13px; }
.nt-batch__row .nt-code { padding-right: 10px; font-size: 13.5px; letter-spacing: .3px; }
.nt-batch__credit { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--nt-ok); }
.nt-batch__remove {
  width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nt-batch__remove:hover:not(:disabled) { border-color: var(--border); color: var(--nt-fail); }
.nt-batch__remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.nt-batch__remove:disabled { opacity: .35; cursor: default; }
.nt-batch__warn { grid-column: 2 / -1; margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--nt-warn); }
.nt-batch__warn.is-error { color: var(--nt-fail); }
.nt-batch__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.nt-batch__limit { font-size: 12px; color: var(--text-muted); }
.nt-paste { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--border-hover); border-radius: var(--radius); background: var(--bg); }
.nt-paste .nt-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.nt-paste code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); font-family: var(--nt-mono); font-size: 12px; }
.nt-paste__text { height: auto; min-height: 96px; padding: 10px 12px; background: var(--bg-card); font-family: var(--nt-mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.nt-paste__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nt-paste__row .form-input { flex: 1 1 150px; width: auto; height: 34px; background: var(--bg-card); font-size: 13px; }
.nt-paste__note { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.nt-batch__sum {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.nt-batch__sum > div { display: grid; gap: 2px; min-width: 0; }
.nt-batch__sum span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.nt-batch__sum b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.nt-batch__sum .is-total b { font-size: 18px; color: var(--nt-ok); }

/* ---------- Thẻ vừa gửi + dòng thẻ (lịch sử) ---------- */
.nt-sent {
  margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--primary); background: var(--bg-card); scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px);
}
.nt-sent:focus { outline: none; }
.nt-sent:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-sent__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.nt-sent__title { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; padding-top: 4px; }
.nt-sent__head h3 { font-size: 14.5px; font-weight: 800; color: var(--text); }
.nt-sent__close {
  flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nt-sent__close:hover { background: var(--bg); color: var(--text); }
.nt-sent__close:focus-visible { outline: 2px solid var(--primary); }
.nt-rejected { display: grid; gap: 8px; margin-top: 8px; }
.nt-rejected li {
  display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--red); font-size: 13px;
}
.nt-rejected li > i { margin-top: 2px; color: var(--nt-fail); }
.nt-rejected li > span { display: grid; gap: 2px; min-width: 0; }
.nt-rejected strong { color: var(--text); }
.nt-rejected small { font-size: 12.5px; line-height: 1.45; color: var(--nt-fail); }

.nt-rows { display: grid; }
.nt-row + .nt-row { border-top: 1px solid var(--border); }
.nt-row__summary {
  display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 12px 8px;
  border-radius: var(--radius-sm); cursor: pointer; list-style: none; transition: background var(--transition-fast);
}
.nt-row__summary::-webkit-details-marker { display: none; }
.nt-row__summary:hover { background: var(--bg); }
.nt-row__summary:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -3px; }
.nt-row__main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.nt-row__main strong { font-size: 14px; font-weight: 800; color: var(--text); }
.nt-row__main small { font-size: 12px; font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; }
.nt-row__main .nt-row__note { color: var(--text-secondary); }
.nt-row__main .nt-row__note.is-warn { color: var(--nt-warn); }
.nt-row__main .nt-row__note.is-fail { color: var(--nt-fail); }
.nt-row__side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; text-align: right; }
.nt-status {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--text-secondary);
}
.nt-status--ok { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); color: var(--nt-ok); }
.nt-status--wait { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }
.nt-status--warn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--nt-warn); }
.nt-status--fail { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); color: var(--nt-fail); }
.nt-row__credit { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--nt-ok); }
.nt-row__expect { font-size: 11.5px; color: var(--text-muted); }
.nt-row__caret { flex-shrink: 0; color: var(--text-muted); transition: transform var(--transition-fast); }
.nt-row__details[open] .nt-row__caret { transform: rotate(180deg); }
.nt-row__body { padding: 2px 0 14px 48px; }
.nt-facts-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px;
}
.nt-facts-list > div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.nt-facts-list dt { font-weight: 600; white-space: nowrap; color: var(--text-muted); }
.nt-facts-list dd { font-weight: 700; text-align: right; overflow-wrap: anywhere; color: var(--text); }
.nt-facts-list .is-strong dd { font-weight: 900; color: var(--nt-ok); }
.nt-facts-list .is-fail { grid-column: 1 / -1; }
.nt-facts-list .is-fail dd { color: var(--nt-fail); }
.nt-row__late { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--nt-warn); }
.nt-row__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nt-empty {
  display: grid; justify-items: center; gap: 4px; padding: 26px 16px; text-align: center;
  border: 1px dashed var(--border-hover); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.nt-empty > i { font-size: 26px; color: var(--text-muted); }
.nt-empty strong { font-size: 14.5px; color: var(--text); }

/* ---------- Bảng chiết khấu: cột loại thẻ dính khi cuộn ngang ---------- */
.nt-rates__scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.nt-rates__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nt-rates__table th, .nt-rates__table td { padding: 0; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.nt-rates__table tbody tr:last-child > * { border-bottom: 0; }
.nt-rates__table thead th { padding: 9px 10px; background: var(--bg); font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.nt-rates__table thead th.is-col { color: var(--primary); }
.nt-rates__table tbody th { padding: 8px 12px; text-align: left; font-weight: 700; color: var(--text); }
.nt-rates__table thead th:first-child { padding-left: 12px; text-align: left; }
.nt-rates__table thead th:first-child, .nt-rates__table tbody th { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--border); }
.nt-rates__table tbody th { background: var(--bg-card); }
.nt-rates__table .nt-rates__rate { padding: 8px 10px; font-weight: 700; color: var(--text-secondary); }
.nt-rates__telco { display: inline-flex; align-items: center; gap: 8px; }
.nt-rates__name { display: grid; }
.nt-rates__pct, .nt-rates__swipe { display: none; }
.nt-rates__table tr.is-active > td, .nt-rates__table td.is-col { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.nt-rate {
  display: grid; justify-items: end; align-content: center; gap: 1px;
  width: 100%; min-width: 72px; min-height: 44px; padding: 4px 10px; border: 0; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary); cursor: pointer;
}
.nt-rate__pct { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.nt-rate:hover { background: var(--primary-light); color: var(--primary); }
.nt-rate:hover .nt-rate__pct { color: var(--primary); }
.nt-rate:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Chiết khấu thấp nhất của mệnh giá: viền trong màu chính (phẳng, không tô màu cả ô) */
.nt-rate.is-best { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); color: var(--text); }
.nt-rate.is-best .nt-rate__pct { color: var(--primary); }
.nt-rate[aria-pressed="true"], .nt-rate[aria-pressed="true"] .nt-rate__pct { background: var(--primary); color: #fff; }
.nt-rate--off { position: relative; display: grid; place-items: center end; color: var(--text-muted); cursor: default; font-weight: 600; }
.nt-rate--off:hover { background: transparent; color: var(--text-muted); }
.nt-rates__foot { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.nt-rates__foot > i { margin-top: 1px; }
.nt-rates__foot a { font-weight: 700; color: var(--primary); }

/* ---------- Tính thẻ cần nạp ---------- */
.nt-calc__input { position: relative; }
.nt-calc__input .form-input { height: 44px; padding-right: 34px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nt-calc__input > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-weight: 700; color: var(--text-muted); }
.nt-calc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nt-chip {
  height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.nt-chip:hover { border-color: var(--primary); color: var(--primary); }
.nt-chip:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.nt-chip--accent { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--nt-warn); }
.nt-calc__out { display: grid; gap: 8px; margin-top: 12px; }
.nt-calc__empty {
  display: flex; gap: 8px; padding: 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.nt-calc__empty > i { margin-top: 1px; }
.nt-calc__list { display: grid; gap: 8px; }
.nt-calc__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nt-calc__item.is-best { border-color: var(--primary); }
.nt-calc__main { flex: 1; display: grid; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.nt-calc__main strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.nt-calc__main small { font-size: 12px; color: var(--text-muted); }
.nt-calc__bank {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); transition: border-color var(--transition-fast);
}
.nt-calc__bank:hover { border-color: var(--primary); }
.nt-calc__bank > i { color: var(--text-muted); }
.nt-calc__bank b { color: var(--text); }

/* ---------- Hướng dẫn: minh hoạ thẻ cào (SVG) ---------- */
.nt-art { margin: 0 0 14px; }
.nt-art svg { display: block; width: 100%; height: auto; }
.nt-art__card { fill: var(--bg-card); stroke: var(--border-hover); stroke-width: 1; }
.nt-art__band { fill: var(--primary-light); }
.nt-art__brand { fill: var(--primary); font: 800 13px var(--global-font); letter-spacing: 1px; }
.nt-art__value { fill: var(--text); font: 900 15px var(--global-font); }
.nt-art__scratched { fill: var(--bg); stroke: var(--border); }
.nt-art__silver { fill: color-mix(in srgb, var(--text-muted) 45%, var(--bg-card)); }
.nt-art__digits { fill: var(--text); font: 800 15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; }
.nt-art__caption { fill: var(--text-muted); font: 600 10px var(--global-font); }
.nt-art__small { fill: var(--text-muted); font: 600 11px var(--global-font); }
.nt-art__serial { fill: var(--text-secondary); font: 700 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nt-art__marker circle { fill: var(--primary); }
.nt-art__marker text { fill: #fff; font: 800 12px var(--global-font); }
.nt-guide__steps { display: grid; gap: 10px; }
.nt-guide__steps li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
/* Số bước = số đánh dấu trên hình minh hoạ */
.nt-guide__steps li > span {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary); font-size: 11px; font-weight: 800; color: #fff;
}
.nt-guide__steps li.is-tip > i { width: 20px; flex-shrink: 0; text-align: center; color: var(--text-muted); }
.nt-guide__steps b { color: var(--text); }
.nt-guide__sub { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--text); }
.nt-formats { display: grid; gap: 7px; }
.nt-formats li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.nt-formats__name { min-width: 88px; font-weight: 700; color: var(--text); }
.nt-formats__val { color: var(--text-secondary); }

/* ---------- Hỗ trợ ---------- */
.nt-help__list { display: grid; gap: 6px; }
.nt-help__item, .nt-help__bank {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); transition: border-color var(--transition-fast);
}
.nt-help__item:hover, .nt-help__bank:hover { border-color: var(--primary); }
.nt-help__item:focus-visible, .nt-help__bank:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.nt-help__item > i {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 15px;
}
.nt-help__item > span, .nt-help__bank > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.nt-help__item strong, .nt-help__bank strong { font-size: 13px; font-weight: 800; }
.nt-help__item small, .nt-help__bank small { font-size: 12px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.nt-help__hours { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.nt-help__bank { margin-top: 12px; background: var(--bg); }
.nt-help__bank > i:first-child { font-size: 18px; color: var(--primary); }
.nt-help__bank > i:last-child { color: var(--text-muted); }

/* ---------- Hỏi đáp ---------- */
.nt-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
.nt-faq__item { border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast); }
.nt-faq__item[open] { border-color: var(--border-hover); }
.nt-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none;
}
.nt-faq__item summary::-webkit-details-marker { display: none; }
.nt-faq__item summary::after { content: "\F282"; flex-shrink: 0; font-family: "bootstrap-icons"; font-size: 12px; color: var(--text-muted); transition: transform var(--transition-fast); }
.nt-faq__item[open] summary::after { transform: rotate(180deg); }
.nt-faq__item summary:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: -3px; border-radius: var(--radius-sm); }
.nt-faq__item p { padding: 0 14px 12px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .nt-row__caret, .nt-faq__item summary::after { transition: none; }
}
@media (max-width: 1100px) {
  .nt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ≤ 992px: 1 cột, thứ tự: form → tính thẻ → bảng chiết khấu → lịch sử → hướng dẫn → hỗ trợ */
@media (max-width: 992px) {
  /* align-items: stretch — kiểu start của lưới làm khối rộng theo nội dung (bảng chiết khấu tràn ngang màn hình) */
  .nt-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .nt-layout > * { min-width: 0; }
  .nt-main, .nt-aside { display: contents; }
  .nt-order-1 { order: 1; } .nt-order-2 { order: 2; } .nt-order-3 { order: 3; }
  .nt-order-4 { order: 4; } .nt-order-5 { order: 5; } .nt-order-6 { order: 6; }
  .nt-hero__top { flex-direction: column; gap: 14px; }
  .nt-wallet { width: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .nt-wallet__label, .nt-wallet__value, .nt-wallet__meta { grid-column: 1; }
  .nt-wallet__actions { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-content: flex-end; }
}
@media (max-width: 860px) {
  .nt-batch__labels { display: none; }
  .nt-batch__row { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 34px; row-gap: 8px; padding: 10px; }
  .nt-batch__no { grid-row: 1; grid-column: 1; }
  .nt-batch__cell:nth-of-type(1) { grid-row: 1; grid-column: 2; }
  .nt-batch__cell:nth-of-type(2) { grid-row: 1; grid-column: 3; }
  .nt-batch__remove { grid-row: 1; grid-column: 4; }
  .nt-batch__cell:nth-of-type(3) { grid-row: 2; grid-column: 2; }
  .nt-batch__cell:nth-of-type(4) { grid-row: 2; grid-column: 3; }
  .nt-batch__credit { grid-row: 3; grid-column: 2 / 4; text-align: left; }
  .nt-batch__credit:not(:empty)::before { content: "Ví nhận "; font-weight: 600; color: var(--text-muted); }
  .nt-batch__warn { grid-row: 4; grid-column: 2 / -1; }
  .nt-batch__cap { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .nt-batch__credit:empty { display: none; }
}
@media (max-width: 640px) {
  .nt-wallet { grid-template-columns: minmax(0, 1fr); }
  .nt-wallet__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  .nt-wallet__value { font-size: 24px; }
  .nt-facts { gap: 6px 14px; font-size: 12.5px; }
  .nt-method { gap: 10px; padding: 10px; }
  .nt-method > i { width: 32px; height: 32px; font-size: 16px; }
  .nt-method strong { font-size: 13px; }
  .nt-method small { font-size: 11.5px; }
  .nt-kpis { gap: 8px; }
  .nt-kpi { padding: 10px; }
  .nt-kpi__icon { display: none; }
  .nt-kpi b { font-size: 16px; }
  .nt-send__head { flex-direction: column; align-items: stretch; }
  .nt-tabs { display: flex; }
  .nt-tab { flex: 1; justify-content: center; padding: 0 8px; }
  .nt-telcos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nt-telco__box { gap: 8px; padding: 9px 10px; }
  .nt-telcos--images .nt-telco__box { padding: 12px 8px 9px; }
  .nt-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nt-amount__box { padding: 9px 4px; }
  .nt-amount__box strong { font-size: 13.5px; }
  .nt-amount__box small { font-size: 10.5px; }
  .nt-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nt-review { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; }
  .nt-review__card { display: none; }
  .nt-batch__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-batch__sum .is-total { grid-column: 1 / -1; }
  .nt-row__body { padding-left: 0; }
  .nt-facts-list { grid-template-columns: minmax(0, 1fr); }
  .nt-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .nt-section-head__link { margin-left: 0; }
  /* Bảng chiết khấu: % chiết khấu xuống dưới tên loại thẻ, bỏ cột riêng + nhãn "Tốt nhất" để thấy nhiều mệnh giá hơn */
  .nt-rates__table .nt-rates__rate, .nt-rates__telco .nt-best { display: none; }
  .nt-rates__pct { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .nt-rates__swipe { display: inline; }
  .nt-rates__table tbody th { padding: 6px 10px; }
  .nt-rates__table thead th:first-child { padding-left: 10px; }
  .nt-rate { min-width: 64px; padding: 0 8px; }
}
@media (max-width: 480px) {
  .nt-batch__cell:nth-of-type(3) { grid-column: 2 / 4; }
  .nt-batch__cell:nth-of-type(4) { grid-row: 3; grid-column: 2 / 4; }
  .nt-batch__credit { grid-row: 4; }
  .nt-batch__warn { grid-row: 5; }
  .nt-row__summary { gap: 10px; }
  .nt-row__summary > .nt-row__caret { display: none; }
  .nt-row__main strong { font-size: 13.5px; }
}

/* ==========================================================================
   Nạp ATM (/nap-atm): dùng chung khối nt- của trang Nạp thẻ (đầu trang, ví, 2 hình thức, chỉ số, bước, dòng lịch sử,
   hỗ trợ, hỏi đáp); phần riêng: ô số tiền + chọn nhanh, QR (đang tải / lỗi / phóng to), thông tin nhận tiền có nút sao chép,
   theo dõi tiền về + âm báo, kiểm tra trước khi chuyển, chưa nhận được tiền, modal "Nạp tiền thành công".
   Phẳng: viền + nền, không đổ bóng; 1 màu nhấn --primary; xanh lá chỉ cho tiền vào / thành công, vàng cho cảnh báo. Tiền tố: at-
   ========================================================================== */
.at-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3px; }
.at-transfer__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.at-off__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.at-step--last { margin-bottom: 0; }

/* ---------- Bước 1: số tiền ---------- */
.at-amount__input { position: relative; max-width: 420px; }
.at-amount__input .form-input {
  height: 50px; padding: 0 76px 0 14px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.at-amount__input .form-input::placeholder { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.at-amount__unit { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 15px; font-weight: 800; color: var(--text-muted); }
.at-amount__clear {
  position: absolute; top: 50%; right: 36px; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.at-amount__clear:hover { background: var(--bg); color: var(--text); }
.at-amount__clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.at-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin-top: 10px; }
.at-preset {
  height: 38px; padding: 0 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.at-preset:hover { border-color: var(--border-hover); color: var(--text); }
.at-preset:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.at-preset[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.at-preset--accent { grid-column: span 2; border-style: dashed; color: var(--nt-warn); }
.at-amount__hint { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.at-amount__hint b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.at-amount__hint.is-warn { color: var(--nt-warn); }

/* ---------- Bước 2: QR + thông tin nhận tiền ---------- */
.at-pay { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.at-qr { display: grid; gap: 8px; text-align: center; }
/* Ảnh QR luôn trên nền trắng (quét được cả ở giao diện tối) */
.at-qr__frame {
  position: relative; min-height: 220px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.at-qr__frame img { display: block; width: 100%; height: auto; cursor: zoom-in; transition: opacity var(--transition-fast); }
.at-qr__frame.is-loading img { opacity: .25; }
.at-qr__spinner {
  position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -14px; width: 28px; height: 28px;
  display: none; align-items: center; justify-content: center; font-size: 22px; color: var(--primary);
}
.at-qr__frame.is-loading .at-qr__spinner { display: inline-flex; animation: at-spin .9s linear infinite; }
.at-qr__error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  background: var(--bg-card); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.at-qr__error > i { font-size: 22px; color: var(--nt-warn); }
.at-qr__caption { font-size: 12px; font-weight: 700; line-height: 1.45; color: var(--text-muted); }
.at-qr__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.at-qr__actions .nt-btn { padding: 0 8px; }

.at-info { display: grid; min-width: 0; }
.at-line {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0;
  padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px;
}
.at-line[hidden] { display: none; }
.at-line dt { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-secondary); }
.at-line dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; min-width: 0; text-align: right; }
.at-line strong { font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.at-line .at-mono { font-size: 15.5px; }
.at-line--content {
  flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary-light);
}
.at-line--content .at-mono { font-size: 18px; font-weight: 900; color: var(--primary); }
.at-required {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: var(--radius-full); background: var(--bg-card); font-size: 10.5px; font-weight: 800; color: var(--nt-warn);
}
.at-copy {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.at-copy:hover { border-color: var(--primary); color: var(--primary); }
.at-copy:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.at-copy--icon { width: 28px; padding: 0; justify-content: center; }

/* ---------- Bước 3: theo dõi tiền về + âm báo ---------- */
.at-watch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--primary);
}
.at-watch__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--primary); animation: at-pulse 1.6s ease-in-out infinite; }
.at-watch__text { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.at-watch__text strong { font-size: 14px; font-weight: 800; color: var(--text); }
.at-watch__text small { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.at-watch__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.at-watch[data-state="checking"] .at-watch__dot { animation-duration: .6s; }
.at-watch[data-state="stopped"] { box-shadow: inset 3px 0 0 var(--border-hover); }
.at-watch[data-state="stopped"] .at-watch__dot { animation: none; background: var(--text-muted); }

.at-sound { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.at-sound__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.at-sound__label i { color: var(--text-muted); }
.at-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.at-seg__opt { position: relative; display: block; cursor: pointer; }
.at-seg__opt[hidden] { display: none; }
.at-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.at-seg__opt span {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 3px);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.at-seg__opt:hover span { color: var(--text); }
.at-seg__opt input:checked + span { background: var(--bg-card); border-color: var(--border); color: var(--primary); }
.at-seg__opt input:focus-visible + span { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.at-sound__test {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.at-sound__test:hover { text-decoration: underline; }
.at-sound__test:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- Lịch sử ---------- */
.at-row__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-secondary); font-size: 16px;
}
.nt-row--ok .at-row__icon { color: var(--nt-ok); }
.nt-facts-list .is-wide { grid-column: 1 / -1; }
.nt-facts-list .is-wide dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------- Cột phải ---------- */
.at-checklist { display: grid; gap: 10px; }
.at-checklist li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.at-checklist li > i { flex-shrink: 0; margin-top: 1px; font-size: 15px; color: var(--text-muted); }
.at-checklist b { color: var(--text); overflow-wrap: anywhere; }
.at-trouble { display: grid; gap: 10px; margin-bottom: 12px; }
.at-trouble li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.at-trouble li > span {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary); font-size: 11px; font-weight: 800; color: #fff;
}
.at-trouble b { color: var(--text); overflow-wrap: anywhere; }
.at-trouble__copy { width: 100%; margin-bottom: 8px; }

/* ---------- Modal: phóng to QR + nạp tiền thành công (nằm ngoài .nt-page → tự khai báo màu ý nghĩa) ---------- */
.at-modal {
  --nt-ok: color-mix(in srgb, var(--green) 55%, var(--text));
  --nt-warn: color-mix(in srgb, var(--accent) 55%, var(--text));
}
.at-modal [hidden] { display: none !important; }
.at-modal .modal-dialog { box-shadow: none; }
.at-zoom { max-width: 420px; }
.at-zoom__img { padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.at-zoom__img img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.at-zoom__facts { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; }
.at-zoom__facts > div { display: flex; justify-content: space-between; gap: 12px; }
.at-zoom__facts dt { color: var(--text-muted); }
.at-zoom__facts dd { font-weight: 800; text-align: right; overflow-wrap: anywhere; color: var(--text); }
.at-zoom__tip { display: flex; gap: 8px; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.at-zoom__tip > i { margin-top: 2px; color: var(--text-muted); }
.at-zoom__tip b { color: var(--text); }
.at-zoom__open { width: 100%; margin-top: 12px; }

.at-success { max-width: 420px; padding: 28px 22px 20px; text-align: center; }
.at-success__close { position: absolute; top: 12px; right: 12px; }
.at-success__icon {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid color-mix(in srgb, var(--green) 55%, var(--border)); background: color-mix(in srgb, var(--green) 12%, var(--bg-card));
  font-size: 34px; color: var(--nt-ok);
}
.at-success__title { font-size: 20px; font-weight: 900; color: var(--text); }
.at-success__desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.at-success__amount { margin: 10px 0 14px; font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.8px; color: var(--nt-ok); }
.at-success__facts {
  display: grid; gap: 8px; padding: 12px 14px; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px;
}
.at-success__facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.at-success__facts dt { flex-shrink: 0; color: var(--text-muted); }
.at-success__facts dd { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; color: var(--text); }
.at-success__facts .is-strong dd { font-size: 15px; font-weight: 900; }
.at-success__orders {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.at-success__orders > i { margin-top: 1px; color: var(--nt-warn); }
.at-success__orders.is-ok { box-shadow: inset 3px 0 0 var(--green); }
.at-success__orders.is-ok > i { color: var(--nt-ok); }
.at-success__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.at-success__actions .nt-btn:first-child { grid-column: 1 / -1; height: 44px; font-size: 14px; }
.at-modal.is-pop .at-success__icon { animation: at-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.at-modal.is-pop .at-success__amount { animation: at-rise .45s ease-out .1s both; }

@keyframes at-spin { to { transform: rotate(360deg); } }
@keyframes at-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes at-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes at-rise { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .at-watch__dot, .at-qr__frame.is-loading .at-qr__spinner, .at-modal.is-pop .at-success__icon, .at-modal.is-pop .at-success__amount { animation: none; }
}
@media (max-width: 768px) {
  .at-pay { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .at-qr { width: 100%; max-width: 280px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .at-transfer__tools { width: 100%; }
  .at-transfer__tools .nt-btn { flex: 1; }
  .at-amount__input { max-width: none; }
  .at-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .at-preset { height: 36px; padding: 0 4px; font-size: 12.5px; }
  .at-line { flex-wrap: wrap; }
  .at-line dd { justify-content: space-between; width: 100%; text-align: left; }
  .at-line--content .at-mono { font-size: 17px; }
  .at-watch__actions { width: 100%; }
  .at-watch__actions .nt-btn { flex: 1; }
  .at-seg { width: 100%; }
  .at-seg__opt { flex: 1; }
  .at-seg__opt span { width: 100%; justify-content: center; padding: 0 6px; }
  .at-success { padding: 26px 16px 16px; }
  .at-success__amount { font-size: 30px; }
}
@media (max-width: 380px) {
  .at-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-preset--accent { grid-column: 1 / -1; }
}

/* ==========================================================================
   Footer (tiền tố ft-) — layouts/partials/footer, dữ liệu App\Services\Content\SiteFooter.
   Phẳng theo §8: nền --bg-card trên --bg, tách lớp bằng viền, 1 màu nhấn --primary; xanh lá chỉ cho "đang hỗ trợ".
   Mốc: > 1023px 3 vùng (thương hiệu · cột link · liên hệ) · 769–1023px thương hiệu + liên hệ trên, cột link dưới
   · ≤ 768px 1 cột, cột link thu gọn (JS initFooter) · ≤ 540px dải cam kết gọn.
   ========================================================================== */
.ft {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13.5px;
}
.ft ul, .ft ol, .ft dl, .ft p { margin: 0; padding: 0; }
.ft ul, .ft ol { list-style: none; }
@media (min-width: 769px) { .ft-only-mobile { display: none !important; } }
@media (max-width: 768px) { .ft-only-desktop { display: none !important; } }

/* Dải cam kết: ô cách nhau bằng khe 1px trên nền màu viền (đường kẻ đúng cả khi xuống hàng) */
.ft-trust { border-bottom: 1px solid var(--border); }
.ft-trust__list { display: grid; grid-template-columns: repeat(var(--ft-trust, 4), minmax(0, 1fr)); gap: 1px; background: var(--border); }
.ft .ft-trust__list { margin: 0 auto; padding-left: 0; padding-right: 0; }
.ft-trust__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 20px; background: var(--bg-card); }
.ft-trust__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--primary-light); color: var(--primary); font-size: 18px;
}
.ft-trust__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-trust__text b { color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.ft-trust__text small { color: var(--text-muted); font-size: 12px; line-height: 1.45; }

/* 3 vùng chính */
.ft-main {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.6fr) minmax(0, 1.2fr);
  gap: 40px; padding-top: 40px; padding-bottom: 36px;
}
.ft-main--no-links { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* Thương hiệu */
.ft-brand { min-width: 0; }
.ft-brand__logo { display: inline-flex; align-items: center; max-width: 100%; color: var(--text); text-decoration: none; }
.ft-brand__logo img { display: block; width: auto; height: auto; max-width: 200px; max-height: 44px; object-fit: contain; }
.ft-brand__name { display: flex; color: var(--text); font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: .01em; overflow-wrap: anywhere; }
.ft-brand__logo:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.ft-brand__about { margin-top: 14px !important; color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; }

.ft-social { margin-top: 20px; }
.ft-social__label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.ft-social__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-social__link {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-secondary); font-size: 16px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ft-social__link:hover { border-color: var(--primary); color: var(--primary); }
.ft-social__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Cột link */
.ft-links { display: grid; grid-template-columns: repeat(var(--ft-cols, 3), minmax(0, 1fr)); gap: 28px 24px; min-width: 0; }
.ft-col { position: relative; min-width: 0; }
.ft-col__title { margin: 0 0 14px; color: var(--text); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
.ft-col__list { display: flex; flex-direction: column; gap: 10px; }
.ft-col__list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ft-col__toggle { display: none; }
.ft-link {
  padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13.5px; line-height: 1.45;
  text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; transition: color var(--transition-fast);
}
a.ft-link:hover, button.ft-link:hover { color: var(--primary); }
.ft-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.ft-link.is-current { color: var(--primary); font-weight: 700; }
.ft-link.is-highlight { color: var(--primary); font-weight: 700; }
.ft-link__ext { margin-left: 5px; font-size: 10px; opacity: .6; }
.ft-col__list .hd-badge { font-size: 9.5px; }

/* Liên hệ */
.ft-contact { min-width: 0; }
.ft-hours {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.ft-hours > .bi { margin-top: 1px; color: var(--text-muted); font-size: 15px; }
.ft-hours b { display: block; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ft-hours small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.ft-hours__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.ft-hours.is-open .ft-hours__dot { background: var(--green); }
.ft-hours.is-open small { color: color-mix(in srgb, var(--green) 70%, var(--text)); }
.ft-contact__list { display: flex; flex-direction: column; gap: 12px; }
.ft-contact__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ft-contact__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-secondary); font-size: 15px;
}
.ft-contact__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ft-contact__body small { color: var(--text-muted); font-size: 11.5px; line-height: 1.3; }
.ft-contact__body a { color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.ft-contact__body a:hover { color: var(--primary); }
.ft-contact__body a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.ft-contact__copy {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-muted); font-size: 14px; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ft-contact__copy:hover { border-color: var(--border); color: var(--primary); }
.ft-contact__copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Thanh toán & an toàn: vạch kẻ trong khung nội dung (không tràn mép) */
.ft-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding-top: 18px; padding-bottom: 18px; background-image: linear-gradient(var(--border), var(--border));
  background-size: calc(100% - 40px) 1px; background-position: center top; background-repeat: no-repeat;
}
.ft-meta__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ft-meta__label { color: var(--text-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ft-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ft-chip > .bi { color: var(--text-muted); font-size: 13px; }
.ft-chip--telco { padding-left: 4px; }
.ft-chip .nt-logo--xs.nt-logo--image { width: 34px; }

/* Bản quyền */
.ft-bottom { border-top: 1px solid var(--border); background: var(--bg); }
.ft-bottom__inner { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; padding-bottom: 16px; }
.ft-bottom__copy { color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; }
.ft-bottom__copy b { color: var(--text); font-weight: 700; }
.ft-bottom__business { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
/* Chừa chỗ cho nút nổi góc phải (Lên đầu trang, Zalo, Messenger) khi cuộn hết trang:
   nút chat rộng nằm ngang dòng bản quyền, nút tròn nằm ngang hàng thanh toán */
@media (min-width: 769px) and (max-width: 1760px) {
  .ft.has-floating .ft-bottom__inner { padding-right: 240px; }
  .ft.has-floating .ft-meta { padding-right: 96px; }
}

/* Nút "Lên đầu trang" nổi (hiện khi đã cuộn xuống — JS initFooter) */
.fab-top {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-secondary);
  font-size: 17px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.fab-top:hover { border-color: var(--primary); color: var(--primary); }
.fab-top:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fab-top[hidden] { display: none; }

@media (max-width: 1023px) {
  .ft-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; }
  .ft-main--no-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ft-links { grid-column: 1 / -1; order: 3; padding-top: 28px; border-top: 1px solid var(--border); }
  .ft-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ft-links[style*="--ft-cols: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .ft { margin-top: 28px; }
  .ft-main, .ft-main--no-links { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; padding-bottom: 8px; }
  .ft-brand { padding-bottom: 22px; }
  .ft-links { display: block; order: 0; padding-top: 0; border-top: 1px solid var(--border); }
  .ft-col { border-bottom: 1px solid var(--border); }
  .ft-col__title { margin: 0; padding: 15px 36px 15px 0; }
  .ft-col__list { padding-bottom: 16px; }
  .ft-col.is-collapsed .ft-col__list { display: none; }
  .ft-col__toggle:not([hidden]) {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end;
    height: 50px; padding: 0 2px; border: 0; background: none; color: var(--text-muted); font-size: 14px; cursor: pointer;
  }
  .ft-col__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
  .ft-col__toggle .bi { transition: transform var(--transition-fast); }
  .ft-col__toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
  .ft-contact { padding-top: 22px; }
  .ft-contact .ft-col__title { margin: 0 0 14px; padding: 0; }
  .ft-meta { flex-direction: column; align-items: flex-start; }
  /* nút chat nằm trong khoảng trống dưới cùng, nút Messenger tròn nằm cạnh phải chữ */
  .ft.has-floating .ft-bottom__inner { padding-right: 64px; padding-bottom: 120px; }
  .fab-top { display: none !important; }
}

@media (max-width: 540px) {
  .ft-trust__item { gap: 10px; padding: 14px 12px; }
  .ft-trust__icon { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
  .ft-trust__text b { font-size: 12.5px; }
  .ft-trust__text small { font-size: 11.5px; }
  .ft-meta__group { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .ft-trust__text small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-col__toggle .bi { transition: none; }
}

/* ==========================================================================
   Trang nội dung /trang/{slug} (tiền tố pg-) — front/page, nội dung Markdown đã dựng ở ContentPageService::render.
   Cột bài viết + cột phải dính (mục lục, trang khác, hỗ trợ); ≤ 992px 1 cột, mục lục thành khối gập trong bài.
   ========================================================================== */
.pg { padding-top: 20px; padding-bottom: 8px; }
.pg-head { max-width: 820px; margin: 14px 0 22px; }
.pg-head__title { margin: 0; color: var(--text); font-size: clamp(24px, 3vw, 32px); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.pg-head__lead { margin: 10px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.pg-head__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--text-muted); font-size: 12.5px; }
.pg-head__meta span { display: inline-flex; align-items: center; gap: 6px; }

.pg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.pg-article { min-width: 0; padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.pg-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-offset, var(--header-height)) + 16px); min-width: 0; }

/* Nội dung bài viết */
.pg-prose { color: var(--text); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.pg-prose > * + * { margin-top: 14px; }
.pg-prose > :first-child { margin-top: 0; }
.pg-prose h2 {
  margin-top: 32px; padding-top: 4px; color: var(--text); font-size: 20px; font-weight: 800; line-height: 1.35;
  scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px);
}
.pg-prose h3 { margin-top: 24px; color: var(--text); font-size: 16.5px; font-weight: 800; line-height: 1.4; scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px); }
.pg-prose h4, .pg-prose h5, .pg-prose h6 { margin-top: 20px; font-size: 15px; font-weight: 800; }
.pg-prose p { margin-bottom: 0; }
.pg-prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-prose a:hover { text-decoration-thickness: 2px; }
.pg-prose strong { color: var(--text); font-weight: 700; }
.pg-prose ul, .pg-prose ol { padding-left: 22px; }
.pg-prose ul { list-style: disc; }
.pg-prose ol { list-style: decimal; }
.pg-prose ul ul { list-style: circle; }
.pg-prose li + li { margin-top: 6px; }
.pg-prose li::marker { color: var(--text-muted); }
.pg-prose ol > li::marker { color: var(--primary); font-weight: 700; }
.pg-prose blockquote {
  margin-left: 0; margin-right: 0; padding: 12px 16px; border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--primary-light); color: var(--text-secondary);
}
.pg-prose code { padding: 1px 6px; border-radius: 5px; background: var(--bg); font-size: .9em; }
.pg-prose pre { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow-x: auto; }
.pg-prose pre code { padding: 0; background: none; }
.pg-prose hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
.pg-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.pg-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-prose th, .pg-prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.pg-prose th { background: var(--bg); color: var(--text); font-weight: 700; white-space: nowrap; }
.pg-prose tr:last-child td { border-bottom: 0; }
.pg-prose ul.pg-contacts { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.pg-contacts li { margin: 0 !important; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }

/* Mục lục gập trong bài (màn hẹp) */
.pg-toc-inline { display: none; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.pg-toc-inline summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--text); font-weight: 700; cursor: pointer; list-style: none; }
.pg-toc-inline summary::-webkit-details-marker { display: none; }
.pg-toc-inline summary span { color: var(--text-muted); font-weight: 600; }
.pg-toc-inline__caret { margin-left: auto; color: var(--text-muted); transition: transform var(--transition-fast); }
.pg-toc-inline[open] .pg-toc-inline__caret { transform: rotate(180deg); }
.pg-toc-inline ol { margin: 0; padding: 0 14px 12px 36px; }
.pg-toc-inline li + li { margin-top: 6px; }
.pg-toc-inline a { color: var(--text-secondary); }
.pg-toc-inline a:hover { color: var(--primary); }

/* Chân bài */
.pg-article__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border);
}
.pg-article__foot b { display: block; color: var(--text); font-size: 15px; }
.pg-article__foot span { color: var(--text-muted); font-size: 13px; }
.pg-article__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pg-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.pg-btn--primary { background: var(--primary); color: #fff; }
.pg-btn--primary:hover { background: var(--primary-hover); color: #fff; }
.pg-btn--ghost { border-color: var(--border); background: var(--bg-card); color: var(--text-secondary); }
.pg-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* Cột phải */
.pg-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.pg-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pg-card__title .bi { color: var(--text-muted); }
.pg-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: pg-toc; }
.pg-toc__list li { counter-increment: pg-toc; }
.pg-toc__list a {
  display: flex; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.45;
  box-shadow: inset 2px 0 0 transparent; text-decoration: none;
}
.pg-toc__list a::before { content: counter(pg-toc); flex-shrink: 0; min-width: 14px; color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-toc__list a:hover { background: var(--bg); color: var(--text); }
.pg-toc__list a.is-active { background: var(--primary-light); color: var(--primary); font-weight: 700; box-shadow: inset 2px 0 0 var(--primary); }
.pg-toc__list a.is-active::before { color: var(--primary); }
.pg-others { list-style: none; margin: 0; padding: 0; }
.pg-others li + li { border-top: 1px solid var(--border); }
.pg-others a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px; color: var(--text-secondary); font-size: 13.5px; text-decoration: none; }
.pg-others a:hover { color: var(--primary); }
.pg-others .bi { color: var(--text-muted); font-size: 12px; }
.pg-help__hours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; color: var(--text-muted); font-size: 12.5px; }
.pg-help__hours b { color: var(--text-secondary); font-weight: 700; }
.pg-help__hours b.is-open { color: color-mix(in srgb, var(--green) 70%, var(--text)); }
.pg-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-help a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.pg-help a:hover { border-color: var(--primary); color: var(--primary); }
.pg-help .bi { flex-shrink: 0; color: var(--text-muted); font-size: 15px; }
.pg-help span { display: flex; flex-direction: column; min-width: 0; }
.pg-help small { color: var(--text-muted); font-size: 11px; font-weight: 600; }

@media (max-width: 992px) {
  .pg-layout, .pg-layout--no-toc { grid-template-columns: minmax(0, 1fr); }
  .pg-aside { position: static; }
  .pg-aside .pg-toc { display: none; }
  .pg-aside .pg-card--help { display: none; } /* màn hẹp: liên hệ đã có ở cuối bài + footer */
  .pg-toc-inline { display: block; }
}
@media (max-width: 640px) {
  .pg { padding-top: 14px; }
  .pg-head { margin: 10px 0 16px; }
  .pg-head__lead { font-size: 14px; }
  .pg-article { padding: 20px 16px; border-radius: var(--radius); }
  .pg-prose { font-size: 14.5px; }
  .pg-prose h2 { margin-top: 26px; font-size: 18px; }
  .pg-article__foot { flex-direction: column; align-items: stretch; }
  .pg-article__actions .pg-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-toc-inline__caret { transition: none; }
}

/* ==========================================================================
   Trang gói túi mù /random/{slug} (tiền tố rp-) — front/random-package, dữ liệu
   App\Services\Random\BlindBagPage, JS initRandomPackagePage. Lưới túi + hộp xác nhận = mục "Túi mù" đầu file.
   Phẳng theo §8: viền + nền, không đổ bóng; 1 màu nhấn --primary; nút mở túi cam + nút nạp xanh (ngoại lệ đã chốt);
   xanh lá chỉ cho "đủ số dư / giao tự động", vàng cho "sắp hết / còn thiếu".
   Mốc: ≤ 1100px cột phải hẹp, gói khác 2 cột · ≤ 992px phần dưới 1 cột (cách bốc → túi của bạn → thông tin →
   hỏi đáp → hỗ trợ), cam kết dưới ảnh 1 cột · ≤ 768px đầu trang 1 cột (ảnh → thông tin + mua → 4 cam kết), thanh nổi nằm
   trên thanh dưới điện thoại, nút đổi kiểu lưới lên cạnh tiêu đề · ≤ 540px gọn chữ · ≤ 420px nút xếp dọc, cam kết bỏ dòng phụ.
   ========================================================================== */
.rp-page {
  --rp-ok: color-mix(in srgb, var(--green) 55%, var(--text));
  --rp-warn: color-mix(in srgb, var(--accent) 60%, var(--text));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
}
.rp-page [hidden] { display: none !important; }
.rp-page .panel { box-shadow: none; padding: 18px; }
.rp-page .panel + .panel { margin-top: 0; }
.rp-page > .breadcrumb { margin-bottom: -6px; }

.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.rp-btn:hover { border-color: var(--primary); color: var(--primary); }
.rp-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.rp-btn.is-active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.rp-btn[disabled] { opacity: .6; cursor: wait; }
.rp-btn--primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.rp-btn--primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: #fff; }
.rp-btn--lg { height: 48px; font-size: 14px; }
.rp-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer;
}
.rp-link:hover { color: var(--primary); }
.rp-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- Nhắc đơn chờ thanh toán ---------- */
.rp-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}
.rp-alert > i { font-size: 18px; color: var(--rp-warn); }
.rp-alert > span:not(.rp-alert__actions) { flex: 1; min-width: 240px; }
.rp-alert b { color: var(--text); }
.rp-alert__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Đầu trang ---------- */
.rp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "media info" "perks info"; gap: 16px 24px; align-items: start;
  padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.rp-hero__media { grid-area: media; min-width: 0; }
.rp-hero__info { grid-area: info; }
/* 4 cam kết dưới ảnh: ô cách nhau bằng khe 1px trên nền màu viền */
.rp-perks {
  grid-area: perks; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--border);
}
.rp-perks li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; background: var(--bg-card); }
.rp-perks .bi {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); color: var(--text-secondary); font-size: 16px;
}
.rp-perks div { display: grid; min-width: 0; }
.rp-perks b { font-size: 13px; font-weight: 800; color: var(--text); }
.rp-perks span { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.rp-flag {
  position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: var(--radius-full); background: rgba(var(--shade), .78);
  color: #fff; font-size: 12px; font-weight: 800;
}
.rp-flag i { color: #fbbf24; }
.rp-hero__info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.rp-eyebrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap;
}
.rp-chip i { color: var(--text-muted); }
a.rp-chip:hover { border-color: var(--primary); color: var(--primary); }
.rp-chip--ok { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); color: var(--rp-ok); }
.rp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.rp-title { font-size: 26px; font-weight: 900; line-height: 1.25; letter-spacing: -.4px; color: var(--text); overflow-wrap: anywhere; }
.rp-lead { margin-top: -6px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.rp-price { display: flex; align-items: baseline; gap: 6px; }
.rp-price strong { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.6px; color: var(--text); }
.rp-price span { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-secondary); }
.rp-facts li { display: inline-flex; align-items: center; gap: 6px; }
.rp-facts i { color: var(--text-muted); }
.rp-facts b { font-weight: 800; color: var(--text); }

.rp-stock { display: grid; gap: 8px; }
.rp-stock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); }
.rp-stock__left b { font-size: 15px; font-weight: 900; color: var(--text); }
.rp-stock__note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.rp-meter { height: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg); }
.rp-meter span { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.rp-stock.is-low .rp-meter span { background: var(--accent); }
.rp-stock.is-low .rp-stock__left b { color: var(--rp-warn); }

/* Ô chọn số lượng + tổng tiền + ví */
.rp-buy { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.rp-buy__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rp-buy__label { font-size: 14px; font-weight: 800; color: var(--text); }
.rp-buy__head small { font-size: 12px; color: var(--text-muted); }
.rp-buy__head small b { color: var(--text-secondary); }
.rp-buy__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rp-qty { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-qty__chip {
  min-width: 52px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text); font-size: 14px; font-weight: 800; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.rp-qty__chip:hover { border-color: var(--primary); color: var(--primary); }
.rp-qty__chip:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.rp-qty__chip.is-active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rp-qty__chip:disabled { opacity: .4; cursor: not-allowed; }
.rp-stepper { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.rp-stepper button { width: 38px; height: 38px; color: var(--text); font-size: 15px; cursor: pointer; }
.rp-stepper button:hover:not(:disabled) { background: var(--primary-light); color: var(--primary); }
.rp-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.rp-stepper input {
  width: 52px; height: 38px; border: 0; border-inline: 1px solid var(--border); background: transparent;
  text-align: center; font-size: 15px; font-weight: 800; color: var(--text); -moz-appearance: textfield; appearance: textfield;
}
.rp-stepper input::-webkit-outer-spin-button, .rp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rp-stepper input:focus { outline: none; background: var(--primary-light); }
.rp-buy__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px;
  border-top: 1px dashed var(--border); font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
}
.rp-buy__total b { font-size: 22px; font-weight: 900; letter-spacing: -.3px; color: var(--text); }
.rp-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.rp-wallet > i { color: var(--text-muted); }
.rp-wallet > span { flex: 1; min-width: 200px; }
.rp-wallet b { color: var(--text); }
.rp-wallet.is-ok > i, .rp-wallet.is-ok [data-rp-wallet-ok] { color: var(--rp-ok); }
.rp-wallet.is-short > i, .rp-wallet.is-short [data-rp-wallet-short], .rp-wallet.is-short [data-rp-short] { color: var(--rp-warn); }
.rp-wallet__topup {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  background: #2563eb; color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.rp-wallet__topup:hover { background: #1d4ed8; color: #fff; }
.rp-buy__note { margin-top: -6px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.rp-buy__actions { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.rp-buy__actions .btn-buy { height: 48px; }

.rp-soldout { display: grid; gap: 6px; padding: 16px; border: 1px dashed var(--border-hover); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.rp-soldout b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text); }
.rp-soldout__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.rp-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- Lưới túi ---------- */
.rp-bags {
  padding: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px);
}
.rp-bags__head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.rp-bags__title h2, .rp-bags__title h1 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--text); }
.rp-bags__title h1 { font-size: 22px; line-height: 1.3; letter-spacing: -.3px; overflow-wrap: anywhere; }
.rp-bags__title h2 i, .rp-bags__title h1 i { color: var(--text-muted); }
.rp-bags__title p { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.rp-bags__title p b { color: var(--text); }
.rp-bags__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-goto {
  display: inline-flex; align-items: center; height: 38px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
}
.rp-goto:focus-within { border-color: var(--primary); }
.rp-goto label { padding: 0 4px 0 12px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); }
.rp-goto input {
  width: 72px; height: 100%; border: 0; background: transparent; font-size: 13.5px; font-weight: 800; color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.rp-goto input::-webkit-outer-spin-button, .rp-goto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rp-goto input:focus { outline: none; }
.rp-goto button { width: 38px; height: 100%; border-left: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; }
.rp-goto button:hover { background: var(--primary-light); color: var(--primary); }
.rp-view { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.rp-view button { width: 32px; height: 30px; border-radius: 4px; color: var(--text-muted); cursor: pointer; }
.rp-view button:hover { color: var(--text); }
.rp-view button[aria-pressed="true"] { background: var(--bg-card); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border); }
.rp-view button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rp-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: var(--radius-sm);
  background: var(--primary-light); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.rp-hint i { color: var(--primary); }
.rp-hint b { color: var(--text); }
.rp-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--text-secondary); }
.rp-pages b { color: var(--text); }
.rp-pages .pagination { margin: 0; }
.rp-empty-bags {
  display: grid; justify-items: center; gap: 4px; padding: 36px 16px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text-secondary);
}
.rp-empty-bags i { font-size: 28px; color: var(--text-muted); }
.rp-empty-bags strong { font-size: 15px; color: var(--text); }

/* ---------- Thông tin + hoạt động ---------- */
.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.rp-main, .rp-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.rp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rp-panel-head .panel__title { margin-bottom: 0; }
.rp-note { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

.rp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rp-steps li { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.rp-steps__num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 900;
}
.rp-steps b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 800; color: var(--text); }
.rp-steps li div span { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* Mô tả gói do admin nhập: nằm đầu trang (trong khối đầu trang, hoặc dưới tên gói khi khối đó tắt) */
.rp-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.rp-desc__text { white-space: pre-line; overflow-wrap: anywhere; }
.rp-desc--top {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px);
}
/* Mô tả dài: thu gọn còn 4 dòng (điện thoại 5), JS hiện nút "Xem thêm" khi chữ bị cắt; tắt JS → hiện hết */
html.has-js .rp-desc__text:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rp-desc__more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.rp-desc__more[hidden] { display: none; }
.rp-desc__more:hover { color: var(--primary-hover); }
.rp-desc__more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.rp-desc__more[aria-expanded="true"] i { transform: rotate(180deg); }
.rp-bags__head > .rp-desc--top { flex: 0 0 100%; }
.rp-spec__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border); font-size: 13.5px; }
.rp-spec__row:first-child { padding-top: 0; border-top: 0; }
.rp-spec dt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-secondary); }
.rp-spec dt i { width: 16px; text-align: center; color: var(--text-muted); }
.rp-spec dd { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rp-spec dd a { color: var(--primary); }
.rp-spec dd a:hover { text-decoration: underline; }

.rp-mini {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 12px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--border);
}
.rp-mini--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-mini > div { min-width: 0; padding: 8px 10px; background: var(--bg-card); }
.rp-mini dt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.rp-mini dd { font-size: 16px; font-weight: 900; color: var(--text); overflow-wrap: anywhere; }


.rp-mine__list { display: grid; gap: 6px; }
.rp-mine__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--transition-fast);
}
.rp-mine__list a:hover { border-color: var(--primary); }
.rp-mine__text { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.rp-mine__text b { font-weight: 800; }
.rp-mine__text small { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.rp-mine__go { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--primary); }
.rp-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--primary); }
.rp-more:hover { text-decoration: underline; }

.rp-help .rp-note { margin: -4px 0 10px; }
.rp-help__list { display: grid; gap: 6px; }
.rp-help__list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); transition: border-color var(--transition-fast);
}
.rp-help__list a:hover { border-color: var(--primary); }
.rp-help__list i {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg); color: var(--text-secondary); font-size: 14px;
}
.rp-help__list span:not(.rp-help__go) { display: grid; flex: 1; min-width: 0; font-size: 13px; }
.rp-help__list small { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.rp-help__go { font-size: 12px; font-weight: 700; color: var(--primary); }

/* ---------- Gói khác ---------- */
.rp-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.rp-related__head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--text); }
.rp-related__head h2 i { color: var(--text-muted); }
.rp-related__head a { font-size: 13px; font-weight: 700; color: var(--primary); }
.rp-related__head a:hover { text-decoration: underline; }
.rp-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-pkg {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text); transition: border-color var(--transition-fast);
}
.rp-pkg:hover { border-color: var(--primary); }
.rp-pkg:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.rp-pkg__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-bg-soft); }
.rp-pkg__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rp-pkg__body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.rp-pkg__name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 800; line-height: 1.35; }
.rp-pkg__game { font-size: 12px; color: var(--text-muted); }
.rp-pkg__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.rp-pkg__stock { font-size: 12px; color: var(--text-muted); }
.rp-pkg.is-out .rp-pkg__image img { opacity: .45; }
.rp-pkg.is-out .rp-pkg__stock { font-weight: 700; color: var(--rp-warn); }

/* ---------- Thanh nổi đáy màn: mở nhanh / túi đã chọn ---------- */
.rp-dock, .rp-selectbar {
  position: fixed; left: 50%; bottom: 16px; z-index: 130; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(760px, calc(100% - 32px)); padding: 10px 10px 10px 12px;
  border: 1px solid var(--border-hover); border-radius: var(--radius); background: var(--bg-card);
}
.rp-dock__thumb { flex-shrink: 0; width: 56px; height: 35px; border-radius: 6px; object-fit: cover; background: var(--media-bg-soft); }
.rp-dock__info { display: grid; flex: 1; min-width: 0; }
.rp-dock__info b { overflow: hidden; font-size: 13.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.rp-dock__info > span { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.rp-dock__btn { flex-shrink: 0; width: auto; height: 42px; padding: 0 18px; font-size: 14px; }
.rp-selectbar { border-color: var(--primary); }
.rp-selectbar__info { display: grid; flex: 1; min-width: 0; }
.rp-selectbar__info b { font-size: 14px; font-weight: 800; color: var(--text); }
.rp-selectbar__info span { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-muted); }
.rp-selectbar__total { font-size: 16px; font-weight: 900; white-space: nowrap; color: var(--text); }
.rp-selectbar__actions { display: flex; flex-shrink: 0; gap: 8px; }
.rp-selectbar .btn-buy { width: auto; height: 40px; padding: 0 16px; font-size: 13.5px; }
.rp-selectbar .rp-btn { height: 40px; }
/* Nút nổi Zalo / Messenger / Lên đầu trang nhích lên trên thanh nổi */
html.rp-dock-on .floating-actions, html.rp-bar-on .floating-actions { bottom: 96px; }

@media (max-width: 1100px) {
  .rp-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .rp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .rp-hero { gap: 16px 20px; }
  .rp-title { font-size: 23px; }
  .rp-perks { grid-template-columns: minmax(0, 1fr); }
  .rp-layout { grid-template-columns: minmax(0, 1fr); }
  .rp-main, .rp-aside { display: contents; }
  .rp-howto { order: 1; }
  .rp-mine { order: 3; }
  .rp-info { order: 4; }
  .rp-faq { order: 5; }
  .rp-help { order: 6; }
}

@media (max-width: 768px) {
  .rp-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "media" "info" "perks"; gap: 18px; }
  .rp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nút đổi kiểu lưới lên cạnh tiêu đề để hàng công cụ vừa 1 dòng */
  .rp-bags__title { padding-right: 84px; }
  .rp-view { position: absolute; top: 0; right: 0; }
  .rp-bags__tools { width: 100%; order: 2; }
  .rp-bags__head > .rp-desc--top { order: 1; }
  html.has-js .rp-desc__text:not(.is-open) { -webkit-line-clamp: 5; }
  .rp-bags__tools > .rp-btn { flex: 1 1 auto; }
  .rp-goto { flex: 1 1 160px; }
  .rp-goto input { flex: 1; width: auto; min-width: 0; }
  .rp-pages { justify-content: center; text-align: center; }
  .rp-dock, .rp-selectbar { bottom: calc(var(--mbar-h, 64px) + 8px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); }
  html.rp-dock-on .floating-actions, html.rp-bar-on .floating-actions { bottom: calc(var(--mbar-h, 64px) + 84px + env(safe-area-inset-bottom, 0px)); }
  .rp-selectbar { flex-wrap: wrap; gap: 8px 12px; }
  .rp-selectbar__actions { width: 100%; }
  .rp-selectbar__actions > * { flex: 1; }
}

@media (max-width: 540px) {
  .rp-hero, .rp-bags, .rp-page .panel { padding: 14px; }
  .rp-title, .rp-bags__title h1 { font-size: 20px; }
  .rp-lead { font-size: 13px; }
  .rp-price strong { font-size: 26px; }
  .rp-buy { padding: 12px; }
  .rp-qty { flex: 1 1 100%; }
  .rp-qty__chip { flex: 1; min-width: 0; padding: 0 6px; }
  .rp-stepper { flex: 1 1 100%; justify-content: space-between; }
  .rp-stepper input { flex: 1; }
  .rp-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rp-steps li { grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 0; border: 0; }
  .rp-spec__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
  .rp-perks li { gap: 8px; padding: 10px; }
  .rp-perks .bi { width: 30px; height: 30px; font-size: 14px; }
  .rp-perks b { font-size: 12.5px; }
  .rp-related__grid { gap: 8px; }
  .rp-pkg__body { padding: 8px 10px 10px; }
  .rp-pkg__name { font-size: 13px; }
  .rp-pkg__meta { font-size: 12px; }
  .rp-dock__thumb { display: none; }
  .rp-dock__btn { padding: 0 14px; }
  .is-selecting .bag-card__cta::after { font-size: 10.5px; }
}

@media (max-width: 420px) {
  .rp-perks span { display: none; }
  .rp-buy__actions { grid-template-columns: minmax(0, 1fr); }
  .rp-bags__tools > .rp-btn { flex: 1 1 calc(50% - 4px); padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-meter span { transition: none; }
}

/* ==========================================================================
   Trang chi tiết acc /acc/{id}/{slug} (tiền tố acd-) — front/account, dữ liệu App\Services\Catalog\AccountPage,
   JS initAccountPage (app.js). Thẻ acc ở khối "Acc tương tự" = partials/account-card (mục "Trang danh mục").
   Phẳng theo §8: viền + nền, không đổ bóng; 1 màu nhấn --primary (giá, mục đang chọn, link); nút mua cam + nút nạp xanh
   (ngoại lệ đã chốt); xanh lá chỉ cho "đang bán / đủ số dư / đã mua", vàng cho "đang giữ / còn thiếu / vừa thay đổi",
   đỏ nhạt cho % giảm giá. Ảnh lớn có lớp chữ trắng trên nền mờ rgba(var(--shade)).
   Mốc: ≤ 1100px cột phải hẹp · ≤ 992px phần dưới 1 cột (thông số → so giá → mô tả → thanh toán → cách mua → hỏi đáp →
   hỗ trợ → đã xem) · ≤ 860px đầu trang 1 cột (ảnh → thông tin + mua → 4 cam kết) · ≤ 768px thanh nổi nằm trên thanh dưới
   điện thoại · ≤ 540px gọn chữ, thông số 1 cột, hộp xác nhận mua thành ngăn trượt sát đáy · ≤ 420px cam kết bỏ dòng phụ.
   ========================================================================== */
.acd-page {
  --acd-ok: color-mix(in srgb, var(--green) 55%, var(--text));
  --acd-warn: color-mix(in srgb, var(--accent) 60%, var(--text));
  --acd-bad: color-mix(in srgb, var(--red) 75%, var(--text));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
}
.acd-page [hidden] { display: none !important; }
.acd-page .panel { box-shadow: none; padding: 18px; }
.acd-page .panel + .panel { margin-top: 0; }
.acd-page > .breadcrumb { margin-bottom: -6px; }

.acd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.acd-btn:hover { border-color: var(--primary); color: var(--primary); }
.acd-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.acd-btn--primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.acd-btn--primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: #fff; }
.acd-btn--lg { height: 48px; font-size: 14px; }
.acd-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer;
}
.acd-link:hover { color: var(--primary); }
.acd-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.acd-note { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.acd-note b { color: var(--text); }
.acd-note a { font-weight: 700; color: var(--primary); }
.acd-note a:hover { text-decoration: underline; }

.acd-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}
.acd-alert > i { font-size: 18px; color: var(--acd-warn); }
.acd-alert > span { flex: 1; min-width: 220px; }
.acd-alert b { color: var(--text); }

/* ---------- Đầu trang ---------- */
.acd-hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "gallery info" "perks info"; gap: 16px 28px; align-items: start;
  padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.acd-gallery { grid-area: gallery; display: grid; gap: 10px; min-width: 0; }
.acd-info { grid-area: info; display: grid; gap: 14px; align-content: start; min-width: 0; }

/* Ảnh lớn: chuyển ảnh, vuốt, phóng to; video YouTube chỉ tạo khung khi khách bấm */
.acd-stage { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--media-bg); }
.acd-stage__frame { position: relative; aspect-ratio: 16 / 10; cursor: zoom-in; touch-action: pan-y; }
.acd-stage__img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.acd-stage__video { position: absolute; inset: 0; background: #000; }
.acd-stage__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.acd-stage.is-video .acd-stage__frame { cursor: default; }
.acd-stage.is-sold .acd-stage__img, .acd-stage.is-hidden .acd-stage__img { opacity: .55; }
.acd-stage__state, .acd-stage__count, .acd-stage__zoom {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--radius-full);
  background: rgba(var(--shade), .72); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.acd-stage__state { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; }
.acd-stage.is-reserved .acd-stage__state i { color: #fbbf24; }
.acd-stage__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.acd-stage__bar > * { pointer-events: auto; }
.acd-stage__zoom { border: 1px solid rgba(255, 255, 255, .18); cursor: pointer; transition: background var(--transition-fast); }
.acd-stage__zoom:hover { background: rgba(var(--shade), .9); }
.acd-stage__zoom:focus-visible, .acd-stage__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.acd-stage.is-video .acd-stage__zoom, .acd-stage.is-video .acd-stage__count { display: none; }
.acd-stage__nav {
  position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-top: -20px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  background: rgba(var(--shade), .6); color: #fff; font-size: 17px; cursor: pointer;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.acd-stage__nav:hover { background: rgba(var(--shade), .88); }
.acd-stage__nav--prev { left: 10px; }
.acd-stage__nav--next { right: 10px; }
.acd-stage.is-video .acd-stage__nav { display: none; }
@media (hover: hover) {
  .acd-stage__nav { opacity: 0; }
  .acd-stage:hover .acd-stage__nav, .acd-stage__nav:focus-visible { opacity: 1; }
}

.acd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.acd-thumb {
  position: relative; flex: 0 0 96px; aspect-ratio: 16 / 10; overflow: hidden; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--media-bg-soft);
  opacity: .72; cursor: pointer; scroll-snap-align: start; transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.acd-thumb:hover { opacity: 1; border-color: var(--border-hover); }
.acd-thumb:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.acd-thumb.is-active { opacity: 1; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.acd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acd-thumb__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  background: rgba(var(--shade), .45); color: #fff; font-size: 12px; font-weight: 800;
}
.acd-thumb__play i { font-size: 18px; }
.acd-videolink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); }
.acd-videolink small { font-weight: 600; color: var(--text-muted); }
.acd-videolink:hover { text-decoration: underline; }

/* 4 cam kết dưới ảnh: ô cách nhau bằng khe 1px trên nền màu viền */
.acd-perks {
  grid-area: perks; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--border);
}
.acd-perks li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; background: var(--bg-card); }
.acd-perks .bi {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); color: var(--text-secondary); font-size: 16px;
}
.acd-perks div { display: grid; min-width: 0; }
.acd-perks b { font-size: 13px; font-weight: 800; color: var(--text); }
.acd-perks span { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.acd-perks a { font-weight: 700; color: var(--primary); }
.acd-perks a:hover { text-decoration: underline; }

/* Thông tin */
.acd-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acd-chip, .acd-status {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap;
}
.acd-chip i { color: var(--text-muted); }
a.acd-chip:hover, .acd-chip--code:hover { border-color: var(--primary); color: var(--primary); }
.acd-chip--code { cursor: pointer; font-variant-numeric: tabular-nums; }
.acd-chip--code:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acd-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.acd-status--available { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); color: var(--acd-ok); }
.acd-status--available .acd-status__dot { background: var(--green); }
.acd-status--reserved { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--acd-warn); }
.acd-status--reserved .acd-status__dot { background: var(--accent); }
.acd-title { font-size: 26px; font-weight: 900; line-height: 1.25; letter-spacing: -.4px; color: var(--text); overflow-wrap: anywhere; }
.acd-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: -6px; font-size: 13px; color: var(--text-secondary); }
.acd-meta li { display: inline-flex; align-items: center; gap: 6px; }
.acd-meta i { color: var(--text-muted); }

.acd-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.acd-highlights > div { min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.acd-highlights dt { font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--text-muted); }
.acd-highlights dd { font-size: 15px; font-weight: 900; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }

.acd-price { display: grid; gap: 4px; }
.acd-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.acd-price__now { font-size: 32px; font-weight: 900; line-height: 1.1; letter-spacing: -.6px; color: var(--primary); font-variant-numeric: tabular-nums; }
.acd-price__old { font-size: 15px; color: var(--text-muted); }
.acd-discount {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--acd-bad); font-size: 12px; font-weight: 800;
}
.acd-price__sub { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13px; color: var(--text-secondary); }
.acd-price__sub b { color: var(--text); }

/* Khối mua */
.acd-buy {
  display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px);
}
.acd-buy:has(.acd-state--mine) { box-shadow: inset 3px 0 0 var(--primary); }
.acd-buy:has(.acd-state--ok) { box-shadow: inset 3px 0 0 var(--green); }
.acd-buy:has(.acd-state--hold) { box-shadow: inset 3px 0 0 var(--accent); }
.acd-buy .acd-note { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.acd-buy .acd-note b { color: var(--text-secondary); }
.acd-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.acd-modes button {
  display: grid; justify-items: center; gap: 1px; padding: 7px 6px; border-radius: 5px;
  font-size: 14px; font-weight: 800; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
}
.acd-modes button span { display: inline-flex; align-items: center; gap: 6px; }
.acd-modes button small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.acd-modes button:hover { color: var(--text); }
.acd-modes button[aria-selected="true"] { background: var(--primary-light); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.acd-modes button[aria-selected="true"] small { color: var(--primary); }
.acd-modes button:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.acd-panel { display: grid; gap: 12px; }
.acd-panel form { display: grid; gap: 12px; }
.acd-panel__title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--text); }
.acd-panel--deposit { padding-top: 14px; border-top: 1px dashed var(--border-hover); }
.acd-buy.has-modes .acd-panel__title { display: none; }
.acd-buy.has-modes .acd-panel--deposit { padding-top: 0; border-top: 0; }
.acd-buy__btn { height: 50px; font-size: 15.5px; }

.acd-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.acd-wallet > i { color: var(--text-muted); }
.acd-wallet > span { flex: 1; min-width: 180px; }
.acd-wallet b { color: var(--text); }
.acd-wallet.is-ok > i, .acd-wallet.is-ok .acd-wallet__state { color: var(--acd-ok); }
.acd-wallet.is-short > i, .acd-wallet.is-short .acd-wallet__state, .acd-wallet.is-short .acd-wallet__state b { color: var(--acd-warn); }
.acd-wallet__topup {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  background: #2563eb; color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.acd-wallet__topup:hover { background: #1d4ed8; color: #fff; }

.acd-deposit { min-width: 0; margin: 0; padding: 0; border: 0; }
.acd-deposit legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 800; color: var(--text); }
.acd-deposit__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.acd-deposit__option { position: relative; }
.acd-deposit__option input { position: absolute; opacity: 0; pointer-events: none; }
.acd-deposit__option span {
  display: grid; justify-items: center; gap: 1px; padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.acd-deposit__option span:hover { border-color: var(--border-hover); }
.acd-deposit__option b { font-size: 14px; font-weight: 900; color: var(--text); }
.acd-deposit__option small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.acd-deposit__option input:checked + span { border-color: var(--primary); background: var(--primary-light); box-shadow: inset 0 0 0 1px var(--primary); }
.acd-deposit__option input:checked + span b { color: var(--primary); }
.acd-deposit__option input:focus-visible + span { outline: 3px solid var(--primary-glow); outline-offset: 1px; }
.acd-deposit__policy { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* Ô số liệu nhỏ (đơn của bạn, acc đang được giữ, tiền cọc) */
.acd-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--border);
}
.acd-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acd-facts:not(.acd-facts--3) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.acd-facts > div { min-width: 0; padding: 8px 10px; background: var(--bg-card); }
.acd-facts dt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.acd-facts dd { font-size: 14.5px; font-weight: 900; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.acd-state { display: grid; gap: 12px; }
.acd-state__head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.acd-state__head b { font-weight: 900; color: var(--text); }
.acd-state__head i { font-size: 18px; color: var(--text-muted); }
.acd-state--mine .acd-state__head i { color: var(--primary); }
.acd-state--ok .acd-state__head i { color: var(--acd-ok); }
.acd-state--hold .acd-state__head i { color: var(--acd-warn); }
.acd-state__actions { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }

.acd-changed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-sm);
  background: var(--accent-light); font-size: 13px; line-height: 1.5; color: var(--text);
}
.acd-changed > i { font-size: 16px; color: var(--acd-warn); }
.acd-changed > span:not(.acd-changed__actions) { flex: 1; min-width: 200px; font-weight: 700; }
.acd-changed__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acd-changed .acd-btn { height: 32px; padding: 0 10px; font-size: 12.5px; }

.acd-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- Thông số, mô tả, cách mua, hỏi đáp | cột phải ---------- */
.acd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.acd-main, .acd-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.acd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.acd-panel-head .panel__title { margin-bottom: 0; }
.acd-specs-panel, .acd-desc-panel, .acd-faq { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px); }

.acd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.acd-specs__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px;
}
.acd-specs dt { flex-shrink: 0; max-width: 50%; font-weight: 600; color: var(--text-secondary); }
.acd-specs dd { min-width: 0; text-align: right; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.acd-specs dd a { color: var(--primary); }
.acd-specs dd a:hover { text-decoration: underline; }
/* Thông số "chọn nhiều" dài (VD trang phục): nút mở hộp danh sách (front/account/_spec-list) */
.acd-spec-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.acd-spec-btn span { color: var(--text-muted); font-weight: 600; }
.acd-spec-btn--sm { padding: 3px 9px; font-size: 12px; }
.acd-spec-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.acd-spec-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acd-slist .acd-slist__dialog { display: flex; flex-direction: column; max-width: 640px; max-height: min(86vh, 760px); overflow: hidden; box-shadow: none; }
.acd-slist__head { flex: none; align-items: flex-start; gap: 12px; }
.acd-slist__heading { min-width: 0; }
.acd-slist__heading .modal-title { overflow-wrap: anywhere; }
.acd-slist__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.acd-slist__sub b { color: var(--text); }
.acd-slist__search { flex: none; position: relative; padding: 12px 20px 0; }
.acd-slist__search .bi { position: absolute; left: 32px; top: 50%; margin-top: 6px; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.acd-slist__search .form-input { width: 100%; height: 40px; padding-left: 36px; }
.acd-slist__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 16px; }
.acd-slist__items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; counter-reset: slist; }
.acd-slist__items li {
  counter-increment: slist; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere;
}
.acd-slist__items li::before { content: counter(slist); flex: none; min-width: 20px; font-size: 11px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.acd-slist__items li[hidden] { display: none; }
.acd-slist__empty { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.acd-slist__foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.acd-slist__copy, .acd-slist__close {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.acd-slist__copy { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
.acd-slist__copy:hover { border-color: var(--primary); color: var(--primary); }
.acd-slist__close { border: 0; background: var(--primary); color: #fff; }
.acd-slist__close:hover { background: var(--primary-hover); }
@media (max-width: 540px) {
  .acd-slist__items { grid-template-columns: minmax(0, 1fr); }
  .acd-slist__body, .acd-slist__search, .acd-slist__foot { padding-left: 14px; padding-right: 14px; }
  .acd-slist__search .bi { left: 26px; }
  .acd-slist__foot > * { flex: 1; justify-content: center; }
  .acd-slist__copy, .acd-slist__close { white-space: nowrap; }
}
@media (max-width: 420px) {
  .acd-slist__copy-more { display: none; }
}

.acd-desc { font-size: 14px; line-height: 1.75; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.acd-desc.is-folded { max-height: 12.25em; overflow: hidden; }
.acd-desc__more { margin-top: 8px; color: var(--primary); }
.acd-desc__more[aria-expanded="true"] i { transform: rotate(180deg); }

.acd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acd-steps li { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.acd-steps__num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 900;
}
.acd-steps b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 800; color: var(--text); }
.acd-steps li div span { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* So giá với danh mục: thanh từ giá thấp nhất → cao nhất, vạch trung bình, chấm = acc này (1 màu --primary) */
.acd-insight .acd-note { margin-top: -4px; }
.acd-verdict {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--primary-light); color: var(--primary); font-size: 12.5px; font-weight: 800;
}
.acd-range { position: relative; margin: 14px 0 4px; padding-top: 30px; }
.acd-range__tag {
  position: absolute; top: 0; left: var(--x); transform: translateX(-50%); padding: 2px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  font-size: 11.5px; font-weight: 800; color: var(--text); white-space: nowrap;
}
.acd-range__track { position: relative; height: 8px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg); }
.acd-range__avg { position: absolute; top: -6px; bottom: -6px; left: var(--x); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-muted); }
.acd-range__dot {
  position: absolute; top: 50%; left: var(--x); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 2px var(--bg-card);
}
.acd-range__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }
.acd-range__labels span { display: grid; gap: 1px; }
.acd-range__labels span:nth-child(2) { text-align: center; }
.acd-range__labels span:last-child { text-align: right; }
.acd-range__labels b { font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.acd-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--primary); }
.acd-more:hover { text-decoration: underline; }

.acd-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.acd-list li:first-child { padding-top: 0; border-top: 0; }
.acd-list li:last-child { padding-bottom: 0; }
.acd-list i, .acd-help__list i {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg); color: var(--text-secondary); font-size: 14px;
}
.acd-list span { display: grid; flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.acd-list b { font-weight: 800; }
.acd-list small { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.acd-list__go { align-self: center; font-size: 12px; font-weight: 700; color: var(--primary); }
.acd-list__go:hover { text-decoration: underline; }

.acd-help .acd-note { margin: -4px 0 10px; }
.acd-help__list { display: grid; gap: 6px; }
.acd-help__list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); transition: border-color var(--transition-fast);
}
.acd-help__list a:hover { border-color: var(--primary); }
.acd-help__list span:not(.acd-help__go) { display: grid; flex: 1; min-width: 0; font-size: 13px; }
.acd-help__list small { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.acd-help__go { font-size: 12px; font-weight: 700; color: var(--primary); }
.acd-help__copy { width: 100%; margin-top: 10px; }

.acd-recent__list { display: grid; gap: 6px; }
.acd-recent__list a {
  display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); transition: border-color var(--transition-fast);
}
.acd-recent__list a:hover { border-color: var(--primary); }
.acd-recent__thumb { flex-shrink: 0; width: 64px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--media-bg-soft); }
.acd-recent__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acd-recent__thumb--icon { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); font-size: 16px; }
.acd-recent__text { display: grid; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.acd-recent__text b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; }
.acd-recent__text small { font-size: 12px; font-weight: 800; color: var(--primary); }

/* ---------- Acc tương tự ---------- */
.acd-related { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px); }
.acd-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.acd-related__head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--text); }
.acd-related__head h2 i { color: var(--text-muted); }
.acd-related__head p { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.acd-related__head a { font-size: 13px; font-weight: 700; color: var(--primary); }
.acd-related__head a:hover { text-decoration: underline; }
/* Luôn 4 cột (≤ 860px: 2) — view đã cắt số acc thành bội của 4 để không lẻ hàng (lưới .kho-grid mặc định 3 cột ở máy tính bảng) */
.kho-grid.acd-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Thanh nổi đáy màn ---------- */
.acd-dock {
  position: fixed; left: 50%; bottom: 16px; z-index: 130; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(760px, calc(100% - 32px)); padding: 10px 10px 10px 12px;
  border: 1px solid var(--border-hover); border-radius: var(--radius); background: var(--bg-card);
}
.acd-dock__thumb { flex-shrink: 0; width: 56px; height: 35px; border-radius: 6px; object-fit: cover; background: var(--media-bg-soft); }
.acd-dock__info { display: grid; flex: 1; min-width: 0; }
.acd-dock__info > b { overflow: hidden; font-size: 13.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.acd-dock__info > span { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.acd-dock__price { font-size: 13.5px; font-weight: 900; color: var(--primary); }
.acd-dock__info s { color: var(--text-muted); }
.acd-dock__btn { flex-shrink: 0; width: auto; height: 42px; padding: 0 18px; font-size: 14px; }
html.acd-dock-on .floating-actions { bottom: 96px; }

/* ---------- Xem ảnh toàn màn hình (<dialog>) ---------- */
.acd-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgb(var(--shade)); color: #fff;
}
.acd-lightbox[open] { display: flex; flex-direction: column; }
.acd-lightbox::backdrop { background: transparent; }
html.is-lightbox-open { overflow: hidden; }
.acd-lightbox__top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.acd-lightbox__count { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.acd-lightbox__title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .85); }
.acd-lightbox__btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; cursor: pointer;
  transition: background var(--transition-fast);
}
.acd-lightbox__btn:hover { background: rgba(255, 255, 255, .2); }
.acd-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.acd-lightbox__body { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 0 68px; touch-action: pan-y; }
.acd-lightbox__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.acd-lightbox__nav { position: absolute; top: 50%; margin-top: -22px; }
.acd-lightbox__nav--prev { left: 12px; }
.acd-lightbox__nav--next { right: 12px; }
.acd-lightbox__hint { padding: 8px 12px 14px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- Hộp xác nhận mua / đặt cọc (<dialog id="acd-confirm">, thay hộp confirm của trình duyệt) ----------
   Dialog phủ cả màn làm lớp nền mờ, khung .acd-confirm__box ở giữa (≤ 540px: ngăn trượt sát đáy) — không dùng ::backdrop
   vì trình duyệt cũ không cho ::backdrop đọc biến CSS. data-mode buy | deposit × data-pay wallet | transfer trên dialog
   ẩn phần tử [data-cf-mode] / [data-cf-pay] không khớp. Dialog nằm ngoài .acd-page → tự khai báo màu ý nghĩa. */
.acd-confirm {
  --acd-warn: color-mix(in srgb, var(--accent) 60%, var(--text));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
  border: 0; background: rgba(var(--shade), .65); backdrop-filter: blur(4px); color: var(--text);
}
.acd-confirm[open] { display: flex; align-items: center; justify-content: center; }
.acd-confirm::backdrop { background: transparent; }
html:has(.acd-confirm[open]) { overflow: hidden; }
.acd-confirm[data-mode="buy"] [data-cf-mode="deposit"],
.acd-confirm[data-mode="deposit"] [data-cf-mode="buy"],
.acd-confirm[data-pay="wallet"] [data-cf-pay="transfer"],
.acd-confirm[data-pay="transfer"] [data-cf-pay="wallet"] { display: none !important; }
.acd-confirm__box {
  display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
  animation: acd-cf-in .18s ease-out;
}
@keyframes acd-cf-in { from { opacity: 0; transform: translateY(8px); } }
.acd-confirm__head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--border); }
.acd-confirm__title { font-size: 16px; font-weight: 900; color: var(--text); }
.acd-confirm__title i { margin-right: 4px; color: var(--primary); }
.acd-confirm__close {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
}
.acd-confirm__close:hover { background: var(--bg); color: var(--text); }
.acd-confirm__close:focus-visible, .acd-confirm__ok:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
.acd-confirm__body { display: grid; gap: 12px; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.acd-confirm__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acd-confirm__product img { flex-shrink: 0; width: 96px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; background: var(--media-bg-soft); }
.acd-confirm__product div { display: grid; gap: 2px; min-width: 0; }
.acd-confirm__product b {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--text); overflow-wrap: anywhere;
}
.acd-confirm__product span { font-size: 12.5px; color: var(--text-muted); }
.acd-confirm__rows { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.acd-confirm__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.acd-confirm__rows > div + div { border-top: 1px solid var(--border); }
.acd-confirm__rows dt { font-size: 13px; color: var(--text-secondary); }
.acd-confirm__rows dd { font-size: 13.5px; font-weight: 700; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.acd-confirm__rows dd s { margin-right: 4px; font-weight: 600; color: var(--text-muted); }
.acd-confirm__rows dd i { color: var(--text-muted); }
.acd-confirm__short, .acd-confirm__short b { color: var(--acd-warn); }
.acd-confirm__rows > .acd-confirm__total { align-items: center; background: var(--bg-card); }
.acd-confirm__total dt { font-size: 13.5px; font-weight: 800; color: var(--text); }
.acd-confirm__total dd { font-size: 21px; font-weight: 900; letter-spacing: -.3px; color: var(--primary); }
.acd-confirm__next {
  display: flex; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}
.acd-confirm__next > i { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.acd-confirm__next b { color: var(--text); }
.acd-confirm__policy { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.acd-confirm__policy i { flex-shrink: 0; margin-top: 2px; }
.acd-confirm__alt { display: inline-flex; align-items: baseline; gap: 6px; justify-self: start; font-size: 13px; font-weight: 700; color: var(--primary); }
.acd-confirm__alt:hover { text-decoration: underline; }
.acd-confirm__foot {
  display: grid; flex-shrink: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px;
  padding: 12px 18px 16px; border-top: 1px solid var(--border);
}
.acd-confirm__foot .acd-btn, .acd-confirm__ok { height: 48px; font-size: 14.5px; }
.acd-confirm__ok .bag-spinner, .acd-confirm__busy { display: none; }
/* Đang gửi đơn: nút chính giữ màu + vòng quay, các nút khác mờ */
.acd-confirm.is-busy .acd-confirm__ok { opacity: 1; cursor: progress; }
.acd-confirm.is-busy .acd-confirm__ok .bag-spinner { display: inline-block; }
.acd-confirm.is-busy .acd-confirm__busy { display: inline; }
.acd-confirm.is-busy .acd-confirm__label { display: none !important; }
.acd-confirm.is-busy .acd-confirm__back, .acd-confirm.is-busy .acd-confirm__close { opacity: .5; cursor: not-allowed; }

@media (max-width: 1100px) {
  .acd-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .acd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acd-specs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 992px) {
  .acd-hero { gap: 16px 20px; }
  .acd-title { font-size: 23px; }
  .acd-perks { grid-template-columns: minmax(0, 1fr); }
  .acd-layout { grid-template-columns: minmax(0, 1fr); }
  .acd-main, .acd-aside { display: contents; }
  .acd-specs-panel { order: 1; }
  .acd-insight { order: 2; }
  .acd-desc-panel { order: 3; }
  .acd-pay { order: 4; }
  .acd-howto { order: 5; }
  .acd-faq { order: 6; }
  .acd-help { order: 7; }
  .acd-recent { order: 8; }
  .acd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .kho-grid.acd-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acd-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "gallery" "info" "perks"; gap: 18px; }
  .acd-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .acd-dock { bottom: calc(var(--mbar-h, 64px) + 8px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); }
  html.acd-dock-on .floating-actions { bottom: calc(var(--mbar-h, 64px) + 84px + env(safe-area-inset-bottom, 0px)); }
  .acd-lightbox__body { padding: 0 8px; }
  .acd-lightbox__nav { top: auto; bottom: 8px; margin-top: 0; }
  .acd-lightbox__body:has(.acd-lightbox__nav) { padding-bottom: 60px; }
}

@media (max-width: 540px) {
  .acd-hero, .acd-page .panel { padding: 14px; }
  .acd-hero { gap: 14px; }
  .acd-title { font-size: 20px; }
  .acd-price__now { font-size: 28px; }
  .acd-buy { padding: 12px; }
  .acd-thumb { flex-basis: 80px; }
  .acd-stage__nav { width: 34px; height: 34px; margin-top: -17px; font-size: 15px; }
  .acd-stage__zoom span { display: none; }
  .acd-specs { grid-template-columns: minmax(0, 1fr); }
  .acd-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acd-steps li { grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 0; border: 0; }
  .acd-state__actions { grid-template-columns: minmax(0, 1fr); }
  .acd-perks li { gap: 8px; padding: 10px; }
  .acd-perks .bi { width: 30px; height: 30px; font-size: 14px; }
  .acd-perks b { font-size: 12.5px; }
  .acd-dock__thumb { display: none; }
  .acd-dock__btn { padding: 0 14px; }
  /* Hộp xác nhận thành ngăn trượt sát đáy (nút xác nhận gần ngón cái) */
  .acd-confirm { padding: 12px 0 0; }
  .acd-confirm[open] { align-items: flex-end; }
  .acd-confirm__box { max-width: none; border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: acd-cf-up; }
  .acd-confirm__head { padding-left: 14px; }
  .acd-confirm__body { padding: 14px; }
  .acd-confirm__foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .acd-confirm__product img { width: 80px; height: 50px; }
}
@keyframes acd-cf-up { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 420px) {
  .acd-perks span { display: none; }
  .acd-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acd-facts--3 dd { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .acd-stage__nav, .acd-thumb, .acd-modes button, .acd-deposit__option span { transition: none; }
  .acd-confirm__box { animation: none; }
}

/* ==========================================================================
   Trang xác thực: đăng nhập / đăng ký / quên mật khẩu / 2FA / tạm khoá (tiền tố au-)
   View front/auth/* + hộp Đăng nhập (#authModal.au-modal), JS initAuthPages() trong app.js.
   Phẳng (quy tắc §8): tách lớp bằng viền + nền, 1 màu nhấn --primary; đỏ / vàng / xanh lá chỉ báo ý nghĩa.
   ========================================================================== */
:root {
  --au-ok: color-mix(in srgb, var(--green) 70%, var(--text));
  --au-warn: color-mix(in srgb, var(--accent) 72%, var(--text));
  --au-bad: color-mix(in srgb, var(--red) 80%, var(--text));
}

.au-page { padding: 28px 0 56px; }
.au-wrap { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 380px); gap: 24px; justify-content: center; align-items: start; }
/* Trang /dang-nhap /dang-ky: không có cột phải → chỉ thẻ form ở giữa (mọi cỡ màn) */
.au-wrap.au-wrap--single { grid-template-columns: minmax(0, 460px); }
.au-main { min-width: 0; }
.au-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.au-card--center { text-align: center; }
.au-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.au-card__icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--primary-light); color: var(--primary); font-size: 22px;
}
.au-card__icon--lg { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; font-size: 28px; }
.au-card__icon--warn { background: var(--accent-light); color: var(--au-warn); }
.au-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; color: var(--text); }
.au-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.au-subtitle b { color: var(--text-secondary); font-weight: 700; }
.au-intro { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.au-intro b { color: var(--text); }
.au-card--center .au-intro { max-width: 380px; margin: 6px auto 0; }

/* "Đăng nhập để tiếp tục: …" */
.au-dest {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  box-shadow: inset 3px 0 0 var(--primary); font-size: 13px; color: var(--text-secondary);
}
.au-dest .bi { color: var(--primary); font-size: 16px; }
.au-dest b { color: var(--text); }

/* Tab Đăng nhập / Đăng ký */
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.au-tab {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 7px;
  font-size: 14px; font-weight: 700; color: var(--text-secondary); text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.au-tab:hover { color: var(--text); }
.au-tab.is-active { background: var(--bg-card); color: var(--primary); box-shadow: 0 0 0 1px var(--border); }
.au-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Form */
.au-form { display: grid; gap: 14px; min-width: 0; }
.au-form[hidden] { display: none; }
.au-mode { display: grid; gap: 14px; }
.au-mode[hidden] { display: none; }
.au-field { display: grid; gap: 6px; min-width: 0; }
.au-label { font-size: 13px; font-weight: 700; color: var(--text); }
.au-label small { font-weight: 500; color: var(--text-muted); }
.au-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.au-mini-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none; cursor: pointer;
}
.au-mini-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.au-mini-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.au-control { position: relative; display: flex; align-items: center; min-width: 0; }
.au-control__icon { position: absolute; left: 13px; font-size: 16px; color: var(--text-muted); pointer-events: none; transition: color var(--transition-fast); }
.au-input {
  width: 100%; height: 46px; padding: 0 14px 0 40px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font-size: 15px; outline: none; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.au-input::placeholder { color: var(--text-muted); }
.au-input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 3px var(--primary-glow); }
.au-control:focus-within .au-control__icon { color: var(--primary); }
.au-control--password .au-input, .au-control:has(.au-control__state) .au-input { padding-right: 46px; }
.au-control.is-invalid .au-input { border-color: var(--red); }
.au-control.is-ok .au-input { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.au-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.au-eye {
  position: absolute; right: 4px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font-size: 17px; cursor: pointer;
}
.au-eye:hover { color: var(--text); }
.au-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.au-control__state { position: absolute; right: 13px; display: grid; place-items: center; font-size: 16px; pointer-events: none; }
.au-control__state.is-ok { color: var(--au-ok); }
.au-control__state.is-bad { color: var(--au-bad); }
.au-control__state.is-checking { color: var(--text-muted); }

.au-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.au-hint[hidden] { display: none; }
.au-hint.is-ok { color: var(--au-ok); }
.au-hint.is-bad { color: var(--au-bad); }
.au-hint.is-warn { color: var(--au-warn); }
.au-hint--center { text-align: center; }
.au-error { margin: 0; font-size: 12px; font-weight: 600; color: var(--au-bad); }
.au-caps { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--au-warn); }
.au-caps[hidden] { display: none; }

/* Gợi ý tên tài khoản còn trống */
.au-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.au-suggest[hidden] { display: none; }
.au-suggest button {
  height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.au-suggest button:hover { border-color: var(--primary); color: var(--primary); }

/* Độ mạnh mật khẩu + điều kiện */
.au-meter { display: flex; align-items: center; gap: 10px; }
.au-meter__bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.au-meter__bars i { height: 4px; border-radius: 2px; background: var(--border); transition: background var(--transition-fast); }
.au-meter__label { min-width: 92px; font-size: 12px; font-weight: 700; text-align: right; color: var(--text-muted); }
.au-meter[data-level="1"] .au-meter__bars i:nth-child(-n+1) { background: var(--red); }
.au-meter[data-level="2"] .au-meter__bars i:nth-child(-n+2) { background: var(--accent); }
.au-meter[data-level="3"] .au-meter__bars i:nth-child(-n+3),
.au-meter[data-level="4"] .au-meter__bars i { background: var(--green); }
.au-meter[data-level="1"] .au-meter__label { color: var(--au-bad); }
.au-meter[data-level="2"] .au-meter__label { color: var(--au-warn); }
.au-meter[data-level="3"] .au-meter__label, .au-meter[data-level="4"] .au-meter__label { color: var(--au-ok); }
.au-rules { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12px; color: var(--text-muted); }
.au-rules li { display: flex; align-items: center; gap: 6px; }
.au-rules li.is-ok { color: var(--au-ok); }
.au-rules li.is-bad { color: var(--au-bad); }

/* Ô tick */
.au-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.au-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); }
.au-check b { display: block; font-weight: 600; color: var(--text); }
.au-check small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-muted); }

/* Nút */
.au-submit {
  width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background var(--transition-fast);
}
.au-submit:hover { background: var(--primary-hover); color: #fff; }
.au-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.au-submit:disabled, .au-submit.is-disabled { opacity: .55; cursor: not-allowed; }
.au-submit.is-disabled { pointer-events: none; }
.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px;
  border: 1px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.au-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.au-btn--ghost { border-color: var(--border); background: var(--bg-card); color: var(--text); }
.au-btn--ghost:hover { border-color: var(--border-hover); background: var(--bg); color: var(--text); }
.au-btn:disabled { opacity: .55; cursor: not-allowed; }
.au-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.au-spinner { width: 16px; height: 16px; flex: none; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: au-spin .7s linear infinite; }
.au-btn--ghost .au-spinner, .au-control__state .au-spinner { border-color: var(--border); border-top-color: var(--primary); }
.au-control__state .au-spinner { width: 14px; height: 14px; }
@keyframes au-spin { to { transform: rotate(360deg); } }

.au-switch { margin: 0; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.au-switch a { font-weight: 700; color: var(--primary); }
.au-terms { margin: -4px 0 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.au-terms a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.au-form .auth-alt { margin: 0; }
.au-form .google-btn { height: 46px; }
.au-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.au-toggle {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px;
  border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.au-toggle:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Thông báo trong form */
.au-alert {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.au-alert[hidden] { display: none; }
.au-alert > .bi { flex: none; margin-top: 1px; font-size: 16px; }
.au-alert--error { box-shadow: inset 3px 0 0 var(--red); background: color-mix(in srgb, var(--red) 6%, var(--bg-card)); }
.au-alert--error > .bi { color: var(--au-bad); }
.au-alert--info { box-shadow: inset 3px 0 0 var(--primary); }
.au-alert--info > .bi { color: var(--primary); }
.au-alert ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.au-alert a { font-weight: 700; color: var(--primary); }

/* Tài khoản đăng nhập lần trước (localStorage) */
.au-recent { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.au-recent[hidden] { display: none; }
.au-recent__use {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; transition: background var(--transition-fast);
}
.au-recent__use:hover { background: var(--primary-light); }
.au-recent__use > .bi { margin-left: auto; font-size: 20px; color: var(--text-muted); }
.au-recent__avatar, .au-account__avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); font-size: 14px; font-weight: 800;
}
.au-recent__text, .au-account__text { min-width: 0; display: grid; }
.au-recent__text small, .au-account__text small { font-size: 11.5px; color: var(--text-muted); }
.au-recent__text b, .au-account__text b { overflow: hidden; font-size: 14px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.au-recent__forget { width: 42px; flex: none; border: 0; border-left: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; }
.au-recent__forget:hover { color: var(--au-bad); }

/* Khối trống (đăng ký tạm ngưng, chưa có cách nhận mã) */
.au-empty { display: grid; justify-items: center; gap: 8px; padding: 18px 14px; border: 1px dashed var(--border-hover); border-radius: var(--radius); text-align: center; }
.au-empty__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--text-secondary); font-size: 22px; }
.au-empty b { font-size: 15px; color: var(--text); }
.au-empty p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

/* Các bước (quên mật khẩu, 2FA) */
.au-steps { margin: 0 0 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.au-steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.au-steps li { min-width: 0; display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 3px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.au-steps li.is-done { border-top-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--text-secondary); }
.au-steps li.is-current { border-top-color: var(--primary); color: var(--text); }
.au-steps__dot { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); font-size: 11px; font-weight: 800; }
.au-steps li.is-done .au-steps__dot { border-color: transparent; background: var(--primary-light); color: var(--primary); }
.au-steps li.is-current .au-steps__dot { border-color: var(--primary); background: var(--primary); color: #fff; }
.au-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tài khoản đang lấy lại mật khẩu */
.au-account { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.au-account__text { flex: 1; }
.au-account form { margin: 0; }

/* Chọn nơi nhận mã */
.au-choices { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.au-choices legend { margin-bottom: 8px; padding: 0; }
.au-choice {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg-card); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.au-choice:hover { border-color: var(--border-hover); }
.au-choice input { position: absolute; opacity: 0; pointer-events: none; }
.au-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.au-choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.au-choice__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--bg); color: var(--text-secondary); font-size: 18px; }
.au-choice:has(input:checked) .au-choice__icon { background: var(--bg-card); color: var(--primary); }
.au-choice__text { flex: 1; min-width: 0; display: grid; }
.au-choice__text b { font-size: 14px; color: var(--text); }
.au-choice__text small { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.au-choice__check { font-size: 18px; color: var(--primary); opacity: 0; }
.au-choice:has(input:checked) .au-choice__check { opacity: 1; }
.au-choice.is-disabled { background: var(--bg); opacity: .65; cursor: not-allowed; }

/* Nhờ shop hỗ trợ */
.au-support { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.au-support__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--text); }
.au-support__title .bi { color: var(--text-secondary); }
.au-support__message { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius-sm); background: var(--bg); }
.au-support__message p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.au-support__message .au-btn { height: 32px; padding: 0 10px; font-size: 12.5px; }
.au-support__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Hạn mã / số lần thử */
.au-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 12.5px; color: var(--text-secondary); }
.au-meta span { display: inline-flex; align-items: center; gap: 6px; }
.au-meta b { font-variant-numeric: tabular-nums; color: var(--text); }
.au-meta .is-warn { color: var(--au-warn); }
.au-form.is-expired .au-meta { display: none; }

/* Ô mã 6 số: ô nhập thật nằm trong suốt trên 6 ô hiển thị (JS thêm .is-enhanced; tắt JS → ô nhập thường) */
.au-otp { position: relative; }
.au-otp__input { padding: 0 14px; font-size: 20px; font-weight: 800; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.au-otp__cells { display: none; }
.au-otp.is-enhanced .au-otp__cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.au-otp.is-enhanced .au-otp__input {
  position: absolute; inset: 0; z-index: 1; height: 100%; border-color: transparent; background: transparent;
  color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; box-shadow: none;
}
.au-otp.is-enhanced .au-otp__input::selection { background: transparent; }
.au-otp.is-enhanced .au-otp__input::placeholder { color: transparent; }
.au-otp__cell {
  height: 54px; display: grid; place-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.au-otp__cell.is-filled { border-color: var(--border-hover); background: var(--bg-card); }
.au-otp__cell.is-active { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 3px var(--primary-glow); }
.au-otp.is-invalid .au-otp__cell { border-color: var(--red); }

/* Danh sách ghi chú / trợ giúp */
.au-notes { margin: 0; padding: 12px; list-style: none; display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.au-notes li { display: flex; align-items: flex-start; gap: 8px; }
.au-notes .bi { flex: none; margin-top: 2px; color: var(--text-muted); }
.au-notes a { font-weight: 700; color: var(--primary); }
.au-notes--left { margin-top: 16px; text-align: left; }
.au-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.au-row-actions form { flex: 1 1 170px; margin: 0; display: flex; }
.au-row-actions .au-btn { flex: 1 1 170px; }
.au-help { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.au-help summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.au-help summary::-webkit-details-marker { display: none; }
.au-help summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.au-help[open] summary::after { transform: rotate(-135deg); }
.au-help ul { margin: 0; padding: 0 14px 12px 32px; list-style: disc; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.au-help a { font-weight: 600; color: var(--primary); }
.au-footer-form { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }

/* Trang tạm khoá */
.au-timer { display: grid; gap: 2px; margin: 16px auto; }
.au-timer small { font-size: 12px; color: var(--text-muted); }
.au-timer b { font-size: 36px; font-weight: 800; letter-spacing: 1px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Cột phải */
.au-aside { min-width: 0; display: grid; gap: 14px; }
.au-panel { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.au-panel--plain { background: transparent; }
.au-panel__title { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 800; color: var(--text); }
.au-panel__text { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.au-panel__note { display: flex; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.au-panel__note .bi { flex: none; margin-top: 2px; color: var(--text-muted); }
.au-howto { margin: 0; padding: 0; list-style: none; counter-reset: au-step; display: grid; gap: 12px; }
.au-howto li { counter-increment: au-step; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
.au-howto li::before {
  content: counter(au-step); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 800;
}
.au-howto b { font-size: 13.5px; color: var(--text); }
.au-howto small { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.au-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.au-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.au-status.is-open { color: var(--au-ok); }
.au-status.is-open i { background: var(--green); }
.au-contacts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.au-contacts li { display: flex; align-items: center; gap: 6px; }
.au-contacts a {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.au-contacts a:hover { border-color: var(--border-hover); background: var(--bg); }
.au-contacts a > span:last-child { min-width: 0; display: grid; }
.au-contacts small { font-size: 11.5px; color: var(--text-muted); }
.au-contacts b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.au-contacts__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--text-secondary); }
.au-copy { width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; }
.au-copy:hover { border-color: var(--primary); color: var(--primary); }
.au-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.au-tips li { display: flex; align-items: flex-start; gap: 10px; }
.au-tips .bi { flex: none; margin-top: 1px; font-size: 15px; color: var(--text-muted); }
.au-tips b { color: var(--text); overflow-wrap: anywhere; }

.au-check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.au-check-row > .au-mini-link { flex: none; }
.au-control--two .au-input { padding-right: 82px; }
.au-eye--gen { right: 40px; font-size: 15px; }

/* Hộp Đăng nhập trên mọi trang — gọn trong 1 khung, không phải cuộn: tab thay tiêu đề (nút đóng nằm cạnh tab), nhãn ô chỉ cho
   trình đọc màn hình (chữ gợi ý trong ô nói rõ cần nhập gì), bỏ dòng gợi ý / danh sách điều kiện mật khẩu / "Đã có tài khoản?".
   Thêm dòng / khối mới vào hộp → đo lại ở 1366×657, 1280×600 và 360×640. */
.au-modal .modal-dialog { max-width: 420px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); box-shadow: none; }
/* Đầu hộp: logo giữa (cao --au-logo-h), nút đóng góc phải cùng hàng — khoảng trống trái bằng nút đóng để logo đúng tâm */
.au-modal { --au-logo-h: 38px; }
/* Logo có khoảng thở trên / dưới rộng hơn các phần khác của hộp (chủ shop yêu cầu 2026-10-09) */
.au-modal .modal-header { padding: 20px 14px 8px; border: 0; gap: 8px; }
.au-modal .modal-header::before { content: ""; flex: none; width: 34px; }
.au-modal .modal-close-btn { flex: none; width: 34px; height: 34px; }
.au-modal__brand { flex: 1; min-width: 0; height: var(--au-logo-h); display: flex; align-items: center; justify-content: center; }
.au-modal__crop { position: relative; display: block; overflow: hidden; aspect-ratio: var(--logo-ratio); width: min(100%, calc(var(--au-logo-h) * var(--logo-ratio))); }
.au-modal__crop img { position: absolute; left: var(--logo-x); top: var(--logo-y); width: var(--logo-w); max-width: none; height: auto; max-height: none; }
.au-modal__logo { max-width: 100%; max-height: var(--au-logo-h); object-fit: contain; }
.au-modal__brand--empty { height: auto; }
.au-modal .modal-body { padding: 12px 16px 16px; }
.au-modal .au-tabs { margin: 0 0 12px; padding: 3px; }
.au-modal .au-tab { height: 32px; font-size: 13.5px; }
.au-modal .au-intro, .au-modal .au-switch, .au-modal .au-rules, .au-modal .au-hint--extra, .au-modal .au-check small { display: none; }
.au-modal .au-form { gap: 8px; }
.au-modal .au-field { gap: 3px; }
.au-modal .au-label { font-size: 12.5px; line-height: 16px; }
.au-modal .au-label small { font-size: 11.5px; }
.au-modal .au-input { height: 38px; font-size: 14.5px; }
.au-modal .au-hint { font-size: 11.5px; line-height: 1.4; }
.au-modal .au-suggest { gap: 4px; font-size: 11.5px; }
.au-modal .au-suggest button { height: 24px; padding: 0 8px; font-size: 12px; }
.au-modal .au-eye { width: 34px; height: 34px; }
.au-modal .au-eye--gen { right: 36px; }
.au-modal [data-username-status]:not(.is-ok):not(.is-bad) { display: none; }
.au-modal .au-meter { gap: 8px; }
.au-modal .au-meter__label { min-width: 0; font-size: 11.5px; }
.au-modal .au-check { align-items: center; }
.au-modal .au-check input { margin-top: 0; }
.au-modal .au-submit { height: 44px; }
.au-modal .recaptcha { margin: 0; }
/* Form đăng nhập / đăng ký (hộp + trang): ô tick reCAPTCHA + câu báo lỗi canh giữa */
.au-form .recaptcha__frame { margin-inline: auto; }
.au-form .recaptcha__error { text-align: center; }
@media (max-width: 360px) {
  /* ô thu 0.88 (gốc 0 0, bề rộng bố cục vẫn 304px) → đặt lề trái = giữa khung − nửa bề rộng sau thu */
  .au-form .recaptcha__frame { margin-inline: calc(50% - 134px) 0; }
}
@media (max-width: 340px) {
  /* màn 320px: form chỉ ~262px → thu 0.85 (258px) để không bị cắt viền 2 bên */
  .au-form .recaptcha__frame { transform: scale(.85); margin-inline: calc(50% - 129px) 0; margin-bottom: -12px; }
}
.au-modal .au-terms { margin: 0; font-size: 11.5px; line-height: 1.45; }
.au-modal .au-form .auth-alt { font-size: 11.5px; }
.au-modal .google-btn { height: 40px; }
.au-modal .au-recent__use { padding-top: 6px; padding-bottom: 6px; }

@media (max-width: 900px) {
  .au-wrap { grid-template-columns: minmax(0, 560px); }
}
@media (max-width: 540px) {
  .au-page { padding: 14px 0 32px; }
  .au-card { padding: 18px 16px; border-radius: var(--radius); }
  .au-card__head { margin-bottom: 14px; }
  .au-title { font-size: 20px; }
  .au-input { font-size: 16px; } /* iOS không phóng to trang khi chạm ô nhập */
  .au-rules { grid-template-columns: 1fr; }
  .au-steps li:not(.is-current) .au-steps__label { display: none; }
  .au-otp.is-enhanced .au-otp__cells { gap: 6px; }
  .au-otp__cell { height: 48px; font-size: 20px; }
  .au-panel { padding: 16px; border-radius: var(--radius); }
  .au-modal .modal-body { padding: 10px 12px 14px; }
  .au-modal { --au-logo-h: 34px; }
  .au-modal .modal-header { padding: 16px 12px 6px; }
  .au-modal .au-tabs { margin-bottom: 10px; }
  .au-modal .au-input { font-size: 16px; } /* iOS không phóng to trang khi chạm ô nhập */
  .au-support__message { flex-direction: column; }
}
/* Màn thấp (laptop 1280×600, điện thoại nằm ngang): logo nhỏ, khoảng cách hẹp — form Đăng ký vẫn vừa 1 khung */
@media (max-height: 640px) {
  .au-modal { --au-logo-h: 28px; }
  .au-modal .modal-header { padding-top: 12px; padding-bottom: 4px; }
  .au-modal .modal-body { padding-top: 8px; padding-bottom: 12px; }
  .au-modal .au-tabs { margin-bottom: 6px; }
  .au-modal .au-form { gap: 5px; }
  .au-modal .au-field { gap: 2px; }
  .au-modal .au-label { line-height: 15px; }
  .au-modal .au-input { height: 34px; }
  .au-modal .au-eye { width: 32px; height: 32px; }
  .au-modal .au-submit { height: 42px; }
  .au-modal .google-btn { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .au-tab, .au-input, .au-control__icon, .au-submit, .au-btn, .au-choice, .au-otp__cell, .au-meter__bars i, .au-recent__use, .au-contacts a { transition: none; }
}

/* ==========================================================================
   Khách vừa mua — thanh chạy ngang dưới hero trang chủ (tiền tố pt-)
   Dữ liệu: App\Services\Content\PurchaseTicker; bật / tắt: Admin → Banner & TOP nạp → #khach-vua-mua.
   JS initPurchaseTicker() (app.js) nhân bản mục cho đủ rộng + đặt --pt-duration theo tốc độ (px/giây) admin chọn.
   ========================================================================== */
.pt {
  margin-top: -6px;
  padding-bottom: 6px;
}

.pt-bar {
  display: flex;
  align-items: stretch;
  height: 46px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pt-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0 14px;
  border-right: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.pt-label .bi {
  font-size: 15px;
  color: var(--text-muted);
}

.pt-label__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.pt-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -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);
}

.pt-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: pt-scroll var(--pt-duration, 60s) linear infinite;
  will-change: transform;
}

.pt-viewport:hover .pt-track,
.pt-viewport:focus-within .pt-track,
.pt.is-paused .pt-track {
  animation-play-state: paused;
}

@keyframes pt-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pt-group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-item {
  position: relative;
  display: flex;
}

/* Chấm ngăn cách giữa 2 mục */
.pt-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--border-hover);
}

.pt-item__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  text-decoration: none;
}

a.pt-item__inner:hover .pt-item__title,
a.pt-item__inner:focus-visible .pt-item__title {
  color: var(--primary);
}

a.pt-item__inner:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: 8px;
}

.pt-item__img {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--media-bg-soft);
  object-fit: cover;
}

.pt-item__name {
  color: var(--text);
  font-weight: 700;
}

.pt-item__title {
  color: var(--text);
  font-weight: 600;
}

.pt-item__price {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.pt-item__time {
  color: var(--text-muted);
  font-size: 12px;
}

.pt-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.pt-toggle:hover {
  color: var(--text);
  background: var(--bg);
}

.pt-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

@media (max-width: 992px) {
  .pt {
    margin-top: -4px;
  }
}

@media (max-width: 540px) {
  .pt {
    margin-top: -6px;
    padding-bottom: 2px;
  }
  .pt-bar {
    height: 40px;
    border-radius: 10px;
  }
  .pt-label {
    padding: 0 11px;
  }
  /* Chỉ còn chấm + icon, chữ vẫn có cho trình đọc màn hình */
  .pt-label__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pt-item__inner {
    gap: 7px;
    padding: 0 14px;
    font-size: 12.5px;
  }
  .pt-item__img {
    width: 22px;
    height: 22px;
  }
  .pt-item__price,
  .pt-item__time {
    font-size: 11.5px;
  }
  .pt-toggle {
    width: 38px;
  }
}

/* Giảm chuyển động: không chạy, khách tự cuộn ngang; bỏ bản sao + nút dừng */
@media (prefers-reduced-motion: reduce) {
  .pt-track {
    animation: none;
  }
  .pt-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pt-group[aria-hidden="true"],
  .pt-toggle {
    display: none;
  }
}

/* ==========================================================================
   Blog / Tin tức (tiền tố bl-) — front/blog/index | show | _card | _sidebar, khối "Góc cộng đồng" trang chủ, hộp articlesModal,
   kết quả tìm kiếm. Phẳng theo §8 (viền + nền, 1 màu nhấn). Trang bài viết dùng lại khung pg- của trang nội dung.
   ========================================================================== */
.bl { padding-top: 20px; padding-bottom: 8px; }

/* Đầu trang danh sách */
.bl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 14px 0 18px; }
.bl-head__text { flex: 1 1 420px; min-width: 0; max-width: 760px; }
.bl-head__title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); font-size: clamp(24px, 3vw, 32px); font-weight: 900; line-height: 1.2; }
.bl-head__title .bi { color: var(--primary); font-size: .8em; }
.bl-head__lead { margin: 8px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.bl-head__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; color: var(--text-muted); font-size: 12.5px; }
.bl-head__meta span, .bl-head__meta a { display: inline-flex; align-items: center; gap: 6px; }
.bl-head__meta a { color: var(--text-muted); text-decoration: none; }
.bl-head__meta a:hover { color: var(--primary); }

.bl-search {
  position: relative; display: flex; align-items: center; flex: 0 1 380px; min-width: 0; height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.bl-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.bl-search > .bi { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.bl-search input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 40px; border: 0; background: none; color: var(--text); font-size: 14px; outline: none; }
.bl-search__btn { height: 34px; margin-right: 4px; padding: 0 14px; border: 0; border-radius: calc(var(--radius) - 2px); background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.bl-search__btn:hover { background: var(--primary-hover); }

/* Tab chuyên mục cuộn ngang */
.bl-tabs { display: flex; gap: 8px; margin-bottom: 20px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.bl-tabs::-webkit-scrollbar { display: none; }
.bl-tabs__item {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.bl-tabs__item small { color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.bl-tabs__item:hover { border-color: var(--primary); color: var(--primary); }
.bl-tabs__item.is-active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.bl-tabs__item.is-active small { color: var(--primary); }
.bl-tabs__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Chip chuyên mục + thẻ */
.bl-chip {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.bl-chip:hover { color: var(--primary-hover); }
.bl-chip--muted { background: var(--bg); color: var(--text-secondary); }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.bl-tag small { color: var(--text-muted); font-size: 11px; }
.bl-tag:hover, .bl-tag.is-active { border-color: var(--primary); color: var(--primary); }

/* Thẻ bài viết */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bl-grid--home { grid-template-columns: repeat(var(--bl-cols, 3), minmax(0, 1fr)); }
.bl-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
  transition: border-color var(--transition-fast);
}
.bl-card:hover, .bl-card:focus-within { border-color: var(--primary); }
/* Ảnh bìa hiển thị trọn (contain, không cắt) trong khung có lề trong — không sát mép thẻ (giống .kho-card, §6.37) */
.bl-card__media { position: relative; aspect-ratio: 1.91 / 1; margin: 8px 8px 0; border-radius: 10px; overflow: hidden; background: var(--bg); }
.bl-card__media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.bl-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 34px; }
.bl-card__flag {
  position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; background: rgba(var(--shade), .72); color: #fff; font-size: 11.5px; font-weight: 700;
}
.bl-card__flag .bi { color: #fbbf24; }
.bl-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.bl-card__title { margin: 0; color: var(--text); font-size: 16px; font-weight: 800; line-height: 1.4; }
.bl-card__title a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bl-card__title a:focus-visible { outline: none; }
.bl-card:hover .bl-card__title a { color: var(--primary); }
.bl-card__excerpt {
  margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 4px; color: var(--text-muted); font-size: 12px; }
.bl-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Bài nổi bật: 1 bài lớn + 2 bài nhỏ */
.bl-featured { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 28px; }
.bl-featured--single { grid-template-columns: minmax(0, 1fr); }
.bl-card--lead .bl-card__media { aspect-ratio: 16 / 9; }
.bl-card--lead .bl-card__title { font-size: clamp(18px, 2vw, 22px); }
.bl-featured__side { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bl-card--row { flex-direction: row; }
.bl-card--row .bl-card__media { flex: 0 0 42%; align-self: center; margin: 8px 0 8px 8px; }
.bl-card--row .bl-card__body { padding: 14px; }
.bl-card--row .bl-card__title { font-size: 15px; }

/* Bố cục danh sách + cột phải */
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.bl-main { min-width: 0; scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 12px); }
.bl-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-offset, var(--header-height)) + 16px); min-width: 0; }
.bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.bl-toolbar__title { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--text); font-size: 18px; font-weight: 800; }
.bl-toolbar__title small { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.bl-sort { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.bl-sort select {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 600;
}
.bl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bl-active__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--primary); border-radius: 999px;
  background: var(--primary-light); color: var(--primary); font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.bl-active__clear { color: var(--text-muted); font-size: 12.5px; text-decoration: underline; }
.bl-pagination { margin-top: 24px; }
.bl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-secondary);
}
.bl-empty > .bi { color: var(--text-muted); font-size: 36px; }
.bl-empty b { color: var(--text); font-size: 16px; }
.bl-empty p { margin: 0 0 6px; font-size: 13.5px; }

/* Cột phải */
.bl-side-cats { list-style: none; margin: 0; padding: 0; }
.bl-side-cats a {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; color: var(--text-secondary);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.bl-side-cats a .bi { color: var(--text-muted); }
.bl-side-cats a span { flex: 1; min-width: 0; }
.bl-side-cats a small { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.bl-side-cats a:hover { background: var(--bg); color: var(--text); }
.bl-side-cats a.is-active { background: var(--primary-light); color: var(--primary); box-shadow: inset 2px 0 0 var(--primary); }
.bl-side-cats a.is-active .bi, .bl-side-cats a.is-active small { color: var(--primary); }
.bl-side-popular { list-style: none; margin: 0; padding: 0; counter-reset: bl-pop; }
.bl-side-popular li { counter-increment: bl-pop; }
.bl-side-popular li + li { border-top: 1px solid var(--border); }
.bl-side-popular a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; padding: 10px 2px; text-decoration: none; }
.bl-side-popular a::before { content: counter(bl-pop); grid-row: span 2; color: var(--text-muted); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bl-side-popular__title { color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.bl-side-popular small { color: var(--text-muted); font-size: 11.5px; }
.bl-side-popular a:hover .bl-side-popular__title { color: var(--primary); }
.bl-rss { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--text-muted); font-size: 12.5px; text-decoration: none; }
.bl-rss:hover { color: var(--primary); }

/* Trang bài viết */
.bl-progress { position: fixed; z-index: 120; top: var(--header-offset, var(--header-height)); left: 0; right: 0; height: 3px; pointer-events: none; }
.bl-progress span { display: block; width: 100%; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; }
.bl-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 0; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: inset 3px 0 0 #f59e0b;
}
.bl-preview > .bi { color: #d97706; font-size: 18px; }
.bl-preview div { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.bl-preview b { color: var(--text); }
.bl-preview span { color: var(--text-muted); font-size: 13px; }
:root[data-theme="dark"] .bl-preview > .bi { color: #fbbf24; }
.bl-post__head { max-width: 860px; margin: 16px 0 20px; }
.bl-post__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bl-post__title { margin: 0; color: var(--text); font-size: clamp(24px, 3.4vw, 36px); font-weight: 900; line-height: 1.22; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bl-post__lead { margin: 12px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.bl-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; color: var(--text-muted); font-size: 13px; }
.bl-post__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bl-post__author { color: var(--text-secondary); font-weight: 700; }
.bl-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 800;
}
.bl-post__cover { margin: 0 0 22px; padding: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); aspect-ratio: 1.91 / 1; }
.bl-post__cover img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: var(--bg); }
.bl-prose { font-size: 16px; }
.bl-heading-link {
  margin-left: 6px; padding: 0 4px; border: 0; background: none; color: var(--text-muted); font-size: .7em; vertical-align: middle;
  opacity: 0; cursor: pointer; transition: opacity var(--transition-fast);
}
.bl-prose h2:hover .bl-heading-link, .bl-prose h3:hover .bl-heading-link, .bl-heading-link:focus-visible { opacity: 1; }
.bl-heading-link:hover { color: var(--primary); }
.bl-post__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; color: var(--text-muted); }
.bl-feedback {
  display: flex; flex-direction: column; gap: 8px; margin-top: 24px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.bl-feedback__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bl-feedback__ask b { color: var(--text); font-size: 15px; }
.bl-feedback__buttons { display: flex; gap: 8px; }
.bl-feedback__buttons .pg-btn[disabled] { opacity: .55; cursor: default; }
.bl-feedback__buttons .pg-btn.is-picked { border-color: var(--primary); background: var(--primary-light); color: var(--primary); opacity: 1; }
.bl-feedback__result { margin: 0; color: var(--text-muted); font-size: 13px; }
.bl-feedback__result:empty { display: none; }
.bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.bl-share__label { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.bl-share__btn {
  display: inline-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; text-decoration: none; cursor: pointer;
}
.bl-share__btn:hover { border-color: var(--primary); color: var(--primary); }
.bl-share__btn[hidden] { display: none; }
.bl-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.bl-adjacent__item {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none;
}
.bl-adjacent__item small { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.bl-adjacent__item span { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.bl-adjacent__item:hover { border-color: var(--primary); }
.bl-adjacent__item:hover span { color: var(--primary); }
.bl-adjacent__item--next { text-align: right; }
.bl-adjacent__item--next small { justify-content: flex-end; }
.bl-section { margin-top: 36px; }
.bl-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.bl-section__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 20px; font-weight: 800; }
.bl-section__head h2 .bi { color: var(--text-muted); }
.bl-section__head a { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.bl-accounts { --cols-desktop: 4; }

/* Trang chủ + hộp "Bài viết hướng dẫn" */
.bl-home { padding: 36px 0 8px; }
.bl-home__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.bl-home__kicker { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bl-home__head h2 { margin: 4px 0 0; color: var(--text); font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; }
.bl-home__lead { max-width: 440px; margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; text-align: right; }

/* Thẻ "Kho bài viết" trang chủ (bl-hub): ảnh bìa bài mới nhất + số bài | chủ đề, tiêu đề, bài mới | nút Xem tất cả.
   Phẳng §8; ảnh bìa hiện trọn (contain) trong khung có lề như thẻ blog. */
.bl-hub {
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden;
  transition: border-color var(--transition-fast);
}
.bl-hub:hover { border-color: var(--border-hover); }
.bl-hub__media {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 184px; margin: 8px;
  border-radius: 10px; background: var(--bg); overflow: hidden; text-decoration: none;
}
/* Ảnh bìa các bài mới xếp chồng, JS đổi .is-active → ảnh mờ dần + thu nhẹ về đúng cỡ (ảnh nền che ảnh cũ bằng nền khung) */
.bl-hub__slide {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: var(--bg);
  opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform .9s ease;
}
.bl-hub__slide.is-active { z-index: 2; opacity: 1; transform: none; }
.bl-hub__dots { position: absolute; right: 10px; bottom: 14px; z-index: 3; display: inline-flex; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgba(var(--shade), .55); }
.bl-hub__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: width .3s ease, background-color .3s ease; }
.bl-hub__dots span.is-active { width: 16px; border-radius: 999px; background: #fff; }
.bl-hub__posts li.is-current a, .bl-hub__posts li.is-current a .bi { color: var(--primary); }
.bl-hub__placeholder { color: var(--text-muted); font-size: 44px; opacity: .5; }
.bl-hub__count {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; background: rgba(var(--shade), .82); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4;
}
.bl-hub__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 24px; }
.bl-hub__topics { color: var(--primary); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bl-hub__title { margin: 6px 0 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; line-height: 1.25; letter-spacing: -0.2px; }
.bl-hub__title a { color: var(--text); text-decoration: none; }
.bl-hub__title a:hover { color: var(--primary); }
.bl-hub__desc { margin: 6px 0 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.bl-hub__posts {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
  margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border);
}
.bl-hub__posts li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bl-hub__posts a {
  flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--text); font-size: 13.5px; font-weight: 600;
  line-height: 1.45; text-decoration: none;
}
.bl-hub__posts a .bi { flex-shrink: 0; color: var(--text-muted); font-size: 10px; }
.bl-hub__posts a span { min-width: 0; overflow-wrap: anywhere; }
.bl-hub__posts a:hover, .bl-hub__posts a:hover .bi { color: var(--primary); }
.bl-hub__posts time { flex-shrink: 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.bl-hub__action { display: flex; align-items: center; padding: 20px 26px 20px 4px; }
.bl-hub__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); font-size: 14px; font-weight: 800; white-space: nowrap; text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.bl-hub__cta:hover { background: var(--primary); color: #fff; }
.bl-hub__cta:focus-visible, .bl-hub__title a:focus-visible, .bl-hub__posts a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.bl-hub__cta .bi { transition: transform var(--transition-fast); }
.bl-hub__cta:hover .bi { transform: translateX(3px); }

@media (max-width: 992px) {
  .bl-hub { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  .bl-hub__media { grid-row: 1 / span 2; }
  .bl-hub__body { padding: 18px 20px 6px; }
  .bl-hub__posts { grid-template-columns: minmax(0, 1fr); }
  .bl-hub__action { padding: 8px 20px 18px; }
}
@media (max-width: 640px) {
  .bl-home { padding-top: 24px; }
  .bl-home__lead { max-width: none; text-align: left; }
  .bl-hub { grid-template-columns: minmax(0, 1fr); }
  .bl-hub__media { grid-row: auto; min-height: 0; aspect-ratio: 1.91 / 1; }
  .bl-hub__body { padding: 10px 16px 4px; }
  .bl-hub__posts li:nth-child(n+5) { display: none; }
  .bl-hub__action { padding: 10px 16px 16px; }
  .bl-hub__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-hub, .bl-hub__cta, .bl-hub__cta .bi, .bl-hub__slide, .bl-hub__dots span { transition: none; }
  .bl-hub__slide { transform: none; }
}
.bl-modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bl-modal-list a {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); text-decoration: none;
}
.bl-modal-list a:hover { border-color: var(--primary); }
.bl-modal-list strong { color: var(--text); font-size: 14px; }
.bl-modal-list span { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
.bl-modal-list small { color: var(--text-muted); font-size: 11.5px; }
.bl-modal-all { width: 100%; height: 42px; margin-top: 14px; }

@media (max-width: 1100px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-grid--home[style*="--bl-cols: 1"] { grid-template-columns: minmax(0, 1fr); }
  .bl-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr); }
  .bl-aside { position: static; }
  .bl-post .bl-aside .pg-toc { display: none; }
  .bl-featured { grid-template-columns: minmax(0, 1fr); }
  .bl-featured__side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-card--row { flex-direction: column; }
  .bl-card--row .bl-card__media { flex: none; aspect-ratio: 1.91 / 1; margin: 8px 8px 0; }
  .bl-accounts { --cols-desktop: 2; }
}
@media (max-width: 768px) {
  .bl-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bl, .bl-post { padding-top: 14px; }
  .bl-head { margin: 10px 0 14px; }
  .bl-search { flex-basis: 100%; }
  .bl-grid, .bl-grid--home, .bl-grid--related, .bl-featured__side { grid-template-columns: minmax(0, 1fr); }
  .bl-card__title { font-size: 15.5px; }
  .bl-post__lead { font-size: 15px; }
  .bl-prose { font-size: 15px; }
  .bl-adjacent { grid-template-columns: minmax(0, 1fr); }
  .bl-adjacent__item--next { text-align: left; }
  .bl-adjacent__item--next small { justify-content: flex-start; }
  .bl-feedback__ask { flex-direction: column; align-items: flex-start; }
  .bl-heading-link { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-heading-link { transition: none; }
}

/* ==========================================================================
   Danh mục nổi bật trang chủ (tiền tố fc-, FeaturedCategories — §6.22)
   Mỗi ô = icon bo góc ở giữa + tên in hoa bên dưới, không khung thẻ (mẫu chủ shop 2026-10-09).
   Số cột do admin cài: view gắn --cols-desktop / --cols-tablet / --cols-mobile (> 992px · 541–992px · ≤ 540px).
   ========================================================================== */
.fc {
  padding: 16px 0 24px;
}

.fc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

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

.fc-head__title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--primary);
}

.fc-head__meta {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.fc-head__meta b {
  color: var(--text);
  font-weight: 700;
}

/* Lưới: flex xuống hàng, xếp sát từ TRÁI (không canh giữa, không giãn cho đầy hàng).
   Bề rộng ô = 1 / --fc-cols của hàng nhưng không quá --fc-cell → màn rộng các ô đứng gần nhau (không thưa),
   số cột admin cài = số ô tối thiểu vừa 1 hàng. Điện thoại không giới hạn --fc-cell → đúng N cột đầy hàng. */
.fc-grid {
  --fc-cols: var(--cols-desktop, 6);
  --fc-gap: 12px;
  --fc-icon: 64px;
  --fc-cell: 136px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px var(--fc-gap);
}

.fc-cell {
  display: flex;
  flex: 0 0 min(calc((100% - (var(--fc-cols) - 1) * var(--fc-gap)) / var(--fc-cols)), var(--fc-cell));
  min-width: 0;
}

/* Ô = icon bo góc + tên in hoa bên dưới, không khung thẻ (mẫu chủ shop 2026-10-09). Số liệu nằm ở title của link. */
.fc-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px;
  border-radius: var(--radius);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.fc-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fc-tile__media {
  flex-shrink: 0;
  width: var(--fc-icon);
  height: var(--fc-icon);
  padding: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color var(--transition-fast);
}

.fc-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--bg);
  object-fit: cover;
}

/* Ô liên kết admin tự thêm (Facebook, Zalo…) không có ảnh riêng: icon trắng trên nền màu nhận diện của mạng xã hội
   (--fc-glyph; không đặt → màu chủ đạo). Ngoại lệ màu thương hiệu như nút Zalo nổi / logo Google. */
.fc-tile__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--fc-glyph, var(--primary));
  color: #fff;
  font-size: calc(var(--fc-icon) * 0.44);
  line-height: 1;
}

.fc-tile__glyph b {
  font-size: calc(var(--fc-icon) * 0.26);
  font-weight: 800;
  letter-spacing: -0.2px;
}

.fc-tile__name {
  max-width: 100%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.fc-tile:hover .fc-tile__media {
  border-color: var(--primary);
}

.fc-tile:hover .fc-tile__name {
  color: var(--primary);
}

/* Mọi cỡ màn: icon + tên canh TRÁI trong ô → icon đầu mỗi hàng thẳng mép tiêu đề khối (không canh giữa trong ô) */
.fc-tile {
  align-items: flex-start;
  padding-left: 0;
  text-align: left;
}

@media (max-width: 992px) {
  .fc-grid {
    --fc-cols: var(--cols-tablet, 3);
    --fc-gap: 10px;
    --fc-icon: 58px;
    --fc-cell: 128px;
    row-gap: 18px;
  }
}

@media (max-width: 540px) {
  .fc {
    padding: 10px 0 16px;
  }

  .fc-head {
    margin-bottom: 12px;
  }

  .fc-head__title {
    font-size: 15px;
  }

  .fc-head__title::before {
    height: 15px;
  }

  .fc-head__meta {
    font-size: 12px;
  }

  .fc-grid {
    --fc-cols: var(--cols-mobile, 4);
    --fc-gap: 6px;
    --fc-icon: 48px;
    --fc-cell: 100%;
    row-gap: 14px;
  }

  .fc-tile {
    gap: 6px;
    padding: 2px 2px 2px 0;
  }

  .fc-tile__media {
    border-radius: 13px;
  }

  .fc-tile__media img,
  .fc-tile__glyph {
    border-radius: 9px;
  }

  /* Mặc định 4 ô / hàng (ô ~68–85px): chữ nhỏ, không giãn chữ để tên ngắn nằm gọn 1 dòng */
  .fc-tile__name {
    font-size: 11px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-tile__media,
  .fc-tile__name {
    transition: none;
  }
}

/* ==========================================================================
   Hộp xác nhận chung (tiền tố cfm-) — thay window.confirm / window.prompt của trình duyệt
   JS shopConfirm() / initConfirmDialogs() trong app.js tự dựng <dialog class="cfm"> cuối <body>; dùng chung
   storefront + admin (layout admin nạp shop.css). Dialog phủ cả màn làm lớp nền mờ (không dùng ::backdrop),
   khung .cfm__box ở giữa; ≤ 540px thành ngăn sát đáy. Phẳng (§8): viền + nền, đỏ chỉ cho thao tác nguy hiểm.
   ========================================================================== */
.cfm {
  --cfm-danger: #dc2626;
  position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: rgba(var(--shade), .6); color: var(--text);
}
:root[data-theme="dark"] .cfm { --cfm-danger: #f87171; }
.cfm:not([open]) { display: none; }
.cfm[open] { display: flex; align-items: center; justify-content: center; }
.cfm::backdrop { background: transparent; }
html:has(.cfm[open]) { overflow: hidden; }
.cfm__box {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px 14px; width: 100%; max-width: 440px; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
  animation: cfm-in .16s ease-out;
}
@keyframes cfm-in { from { opacity: 0; transform: translateY(8px); } }
.cfm__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); font-size: 19px;
}
.cfm[data-tone="danger"] .cfm__icon { background: color-mix(in srgb, var(--cfm-danger) 12%, transparent); color: var(--cfm-danger); }
.cfm__text { display: grid; align-content: start; gap: 6px; min-width: 0; padding-top: 1px; }
.cfm__title { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.cfm__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.cfm__body:empty { display: none; }
.cfm__input {
  width: 100%; height: 42px; margin-top: 6px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font: inherit; font-size: 14px; color: var(--text);
}
.cfm__input[hidden] { display: none; }
.cfm__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.cfm__foot { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 10px; }
.cfm__btn {
  min-width: 96px; height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cfm__btn--cancel:hover { border-color: var(--border-hover); background: var(--bg); }
.cfm__btn--ok { border-color: var(--primary); background: var(--primary); color: #fff; }
.cfm__btn--ok:hover { border-color: color-mix(in srgb, var(--primary) 85%, #000); background: color-mix(in srgb, var(--primary) 85%, #000); }
.cfm[data-tone="danger"] .cfm__btn--ok { border-color: #dc2626; background: #dc2626; }
.cfm[data-tone="danger"] .cfm__btn--ok:hover { border-color: #b91c1c; background: #b91c1c; }
.cfm__btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }

@media (max-width: 540px) {
  .cfm { padding: 12px 0 0; }
  .cfm[open] { align-items: flex-end; }
  .cfm__box {
    max-width: none; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: cfm-up;
  }
  .cfm__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfm__btn { min-width: 0; height: 46px; padding: 0 10px; }
}
@keyframes cfm-up { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .cfm__box { animation: none; }
}

/* ==========================================================================
   Hộp "Tài khoản đã xem gần đây" (#recentlyViewedModal, layouts/partials/modals) — tiền tố rv-
   Danh sách dựng bằng JS renderRecentlyViewed() (app.js) từ localStorage 'shop-recent'.
   Ảnh hiển thị trọn (contain) trong khung 16:10 có lề trong, như thẻ danh mục / blog. Phẳng §8.
   ========================================================================== */
.rv-modal [hidden] { display: none !important; }
.rv-modal .modal-dialog {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  overflow: hidden;
  box-shadow: none;
}
.rv-modal .modal-header { flex-shrink: 0; gap: 12px; }
.rv-head { display: grid; gap: 2px; min-width: 0; }
.rv-head__sub { font-size: 12.5px; color: var(--text-muted); }
.rv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; overscroll-behavior: contain; }

.rv-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rv-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color var(--transition-fast);
}
.rv-item:hover, .rv-item:focus-within { border-color: var(--primary); }
.rv-item.is-current { box-shadow: inset 3px 0 0 var(--primary); }
.rv-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 44px 8px 8px;
  color: var(--text);
  text-decoration: none;
  border-radius: inherit;
}
.rv-item__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.rv-item__thumb {
  position: relative;
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 16 / 10;
  padding: 4px;
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}
.rv-item__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.rv-item__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 22px;
}

.rv-item__body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.rv-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.rv-item__kind { display: inline-flex; align-items: center; gap: 4px; }
.rv-item__code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-weight: 700;
  color: var(--text-secondary);
}
.rv-item__now {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}
.rv-item__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rv-item__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rv-item__price { font-size: 14px; font-weight: 800; color: var(--primary); }
.rv-item__time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.rv-item__go { flex-shrink: 0; color: var(--text-muted); font-size: 14px; }
.rv-item:hover .rv-item__go { color: var(--primary); }

.rv-item__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.rv-item__remove:hover { border-color: var(--border); background: var(--bg); color: var(--red); }
.rv-item__remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Có nút bỏ ở góc trên phải → mũi tên xuống giữa-dưới để không đè nhau */
.rv-item__link .rv-item__go { position: absolute; right: 15px; bottom: 12px; }

.rv-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px 24px; text-align: center; }
.rv-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 24px;
}
.rv-empty strong { font-size: 15px; color: var(--text); }
.rv-empty p { max-width: 340px; margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.rv-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.rv-empty__btn:hover { background: var(--primary-hover); color: #fff; }

.rv-foot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.rv-foot__note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.rv-foot__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rv-foot__clear:hover { border-color: var(--red); }
:root[data-theme="dark"] .rv-foot__clear { color: #f87171; }
:root[data-theme="dark"] .rv-foot__clear:hover { border-color: #f87171; }

@media (max-width: 540px) {
  .rv-body { padding: 8px; }
  .rv-item__link { gap: 10px; padding: 6px 40px 6px 6px; }
  .rv-item__thumb { width: 88px; padding: 3px; }
  .rv-item__title { font-size: 13.5px; }
  .rv-item__price { font-size: 13.5px; }
  .rv-item__go { display: none; }
  .rv-foot__note { display: none; }
  .rv-foot { justify-content: center; }
}
@media (max-width: 360px) {
  .rv-item__thumb { width: 76px; }
  .rv-item__kind { display: none; }
}

/* ==========================================================================
   Popup thông báo khi vào trang chủ (tiền tố hpop-) — front/home/_popup + _popup-card, dữ liệu App\Services\Content\HomePopup,
   JS initHomePopup (app.js). Dùng khung hộp thoại chung .modal-overlay; nội dung CKEditor dùng kiểu chữ của khối Thông báo
   cạnh banner (.hero-notice, style.css) + ckeditor5-content.css. Phẳng §8: viền + nền, không đổ bóng, 1 màu nhấn --primary.
   Khung cao tối đa 88dvh, nội dung dài thì cuộn trong hộp; ≤ 540px hộp sát 2 mép (lề 12px).
   ========================================================================== */
.hpop .hpop__dialog {
  max-width: 520px;
  max-height: min(88vh, 88dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
}
.hpop__close { position: absolute; top: 12px; right: 12px; z-index: 1; border: 1px solid var(--border); }
.hpop__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hpop__box { padding: 20px 20px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hpop__head { display: flex; align-items: center; gap: 10px; padding-right: 40px; margin-bottom: 14px; }
.hpop__icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--primary-light); color: var(--primary); font-size: 17px;
}
.hpop__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
/* Ghi đè khung cuộn / nền của .hero-notice: trong popup nội dung nằm thẳng trên nền hộp, cỡ chữ lớn hơn */
.hpop__content.hero-notice {
  flex: none; min-height: 0; padding: 0; border-radius: 0; background: none; overflow: visible;
  --ck-content-font-size: 14px; font-size: 14px; line-height: 1.65;
}
.hpop__content.hero-notice h2 { font-size: 17px; }
.hpop__content.hero-notice h3 { font-size: 15.5px; }
.hpop__content.hero-notice h4 { font-size: 14.5px; }
.hpop__actions { margin-top: 16px; }
.hpop__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; padding: 10px 16px;
  border-radius: var(--radius); background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; text-align: center;
  transition: background var(--transition-fast);
}
.hpop__btn:hover { background: var(--primary-hover); color: #fff; }
.hpop__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hpop__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; flex: none; padding: 10px 20px 14px; }
.hpop__dismiss {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-card);
  color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.hpop__dismiss:hover { border-color: var(--primary); color: var(--primary); }
.hpop__dismiss--snooze { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 540px) {
  .hpop.modal-overlay { padding: 12px; }
  .hpop__box { padding: 16px 16px 4px; }
  .hpop__title { font-size: 16.5px; }
  .hpop__icon { width: 32px; height: 32px; font-size: 15px; }
}