/* ===========================================================
   vault-bridge.css
   Cầu nối giữa layout cũ (.main-wrapper, .top-header) và
   sidebar/topbar Vault mới (.shop-sidebar, .shop-topbar).
   =========================================================== */

:root {
  --vault-sidebar-w: 248px;
  --vault-sidebar-w-collapsed: 76px;
  --vault-topbar-h: 68px;
}

/* Body / page background */
html, body {
  background: var(--shop-bg-0, #07080C) !important;
  color: var(--shop-fg-2, #C6C9D2);
}

/* Ẩn header.top-header cũ (nếu trang nào render trong <header class="top-header">) */
.top-header { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Sidebar Vault — fixed bên trái */
.shop-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--vault-sidebar-w);
  z-index: 1030;
  transition: width .2s ease, transform .2s ease;
  overflow-y: auto;
}
body.toggled .shop-sidebar { width: var(--vault-sidebar-w-collapsed); }
body.toggled .shop-sidebar .brand .wordmark,
body.toggled .shop-sidebar .shop-nav-group .label,
body.toggled .shop-sidebar .shop-nav-item .label-txt,
body.toggled .shop-sidebar .shop-nav-item .chev,
body.toggled .shop-sidebar .shop-nav-item .badge,
body.toggled .shop-sidebar .wallet-card { display: none; }
body.toggled .shop-sidebar .shop-nav-item { justify-content: center; }

@media (max-width: 991.98px) {
  .shop-sidebar { transform: translateX(-100%); }
  body.toggled .shop-sidebar { transform: translateX(0); width: var(--vault-sidebar-w); }
}

/* Topbar Vault — fixed top */
.shop-topbar {
  position: fixed;
  top: 0; right: 0;
  left: var(--vault-sidebar-w);
  z-index: 1020;
  transition: left .2s ease;
}
body.toggled .shop-topbar { left: var(--vault-sidebar-w-collapsed); }
@media (max-width: 991.98px) { .shop-topbar { left: 0; } }

/* Main wrapper cũ — đẩy qua phải né sidebar + chừa chỗ topbar */
.main-wrapper {
  margin-left: var(--vault-sidebar-w);
  padding-top: var(--vault-topbar-h);
  background: var(--shop-bg-0, #07080C);
  min-height: 100vh;
  transition: margin-left .2s ease;
}
body.toggled .main-wrapper {
  margin-left: var(--vault-sidebar-w-collapsed);
}
@media (max-width: 991.98px) {
  .main-wrapper { margin-left: 0; }
}

/* Main content cũ — bỏ background trắng nếu có */
.main-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile overlay khi mở sidebar */
.vault-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1025;
}
@media (max-width: 991.98px) {
  body.toggled .vault-mobile-overlay { display: block; }
}

/* Sidebar Vault không bị metismenu CSS cũ override */
.shop-sidebar a { text-decoration: none; }
.shop-sidebar .brand:hover { text-decoration: none; }

/* Submenu trong sidebar Vault */
.vault-submenu-wrap { position: relative; }
.vault-submenu-toggle .chev {
  margin-left: auto;
  transition: transform .2s ease;
  color: var(--shop-fg-4, #5A6072);
}
.vault-submenu-wrap.open .vault-submenu-toggle .chev {
  transform: rotate(90deg);
}
.vault-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 32px;
}
.vault-submenu-wrap.open .vault-submenu {
  max-height: 200px;
}
.shop-nav-sub {
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: var(--shop-fg-3, #8A8FA0) !important;
}
.shop-nav-sub:hover {
  color: var(--shop-fg-1, #F5F6F8) !important;
  background: var(--shop-bg-2, #12151F) !important;
}
.shop-nav-sub::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--shop-fg-4, #5A6072);
  margin-right: 10px;
  vertical-align: middle;
}
body.toggled .vault-submenu { display: none; }

/* ===========================================================
   Vault search dropdown
   =========================================================== */
.vault-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--shop-bg-2, #12151F);
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-height: 420px;
  overflow: hidden;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.vault-search-dropdown .vsd-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06));
  font-size: 12px;
  color: var(--shop-fg-3, #8A8FA0);
  letter-spacing: 0.04em;
}
.vault-search-dropdown .vsd-list {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}
.vault-search-dropdown .vsd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--shop-fg-2, #C6C9D2);
  transition: background .12s;
}
.vault-search-dropdown .vsd-item:hover,
.vault-search-dropdown .vsd-item.is-active {
  background: var(--shop-bg-3, #1A1E2B);
  color: var(--shop-fg-1, #F5F6F8);
}
.vault-search-dropdown .vsd-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--shop-bg-4, #232838);
}
.vault-search-dropdown .vsd-info {
  flex: 1;
  min-width: 0;
}
.vault-search-dropdown .vsd-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shop-fg-1, #F5F6F8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-search-dropdown .vsd-type {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shop-red-2, #FF3B43);
  margin-top: 2px;
}
.vault-search-dropdown .vsd-price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--shop-fg-1, #F5F6F8);
  flex-shrink: 0;
}
.vault-search-dropdown .vsd-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--shop-fg-3, #8A8FA0);
}
.vault-search-dropdown .vsd-empty strong { color: var(--shop-fg-1, #F5F6F8); }

/* ===========================================================
   Index page — đồng nhất tông màu Vault
   =========================================================== */

/* Stats card (Số dư / Đã nạp / Source / Tool) */
.sth-stat-card,
.stats-card,
.stats-card-balance,
.stats-card-deposit,
.stats-card-source,
.stats-card-tool {
  background: var(--shop-bg-1, #0D0F16) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.sth-stat-card:hover,
.stats-card:hover {
  border-color: var(--shop-line-3, rgba(255,255,255,0.16)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px);
}

/* Stat icon — đổi sang accent Vault đỏ-cam */
.sth-stat-balance .sth-stat-icon {
  background: rgba(232,32,42,0.12) !important;
  color: #FF7B81 !important;
  border: 1px solid rgba(232,32,42,0.25) !important;
}
.sth-stat-deposit .sth-stat-icon {
  background: rgba(244,121,32,0.12) !important;
  color: #FFB05F !important;
  border: 1px solid rgba(244,121,32,0.25) !important;
}
.sth-stat-source .sth-stat-icon {
  background: rgba(139,92,246,0.12) !important;
  color: #A78BFA !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
}
.sth-stat-tool .sth-stat-icon {
  background: rgba(255,181,71,0.12) !important;
  color: #FFB547 !important;
  border: 1px solid rgba(255,181,71,0.30) !important;
}
.sth-stat-icon { border-radius: 11px !important; }

.sth-stat-label,
.stats-card .fs-6,
.stats-card h4 small {
  color: var(--shop-fg-3, #8A8FA0) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}
.sth-stat-value,
.stats-card h4 {
  color: var(--shop-fg-1, #F5F6F8) !important;
  font-weight: 800 !important;
}
.sth-stat-unit {
  color: var(--shop-fg-3, #8A8FA0) !important;
}

/* Background của main wrapper */
.main-wrapper,
.main-content {
  background: var(--shop-bg-0, #07080C) !important;
}

/* Section title (Tool đề xuất / Source đề xuất) — gradient đỏ-cam Vault thay cầu vồng */
.section-header { text-align: center; margin: 2.5rem 0 1.5rem !important; }
.section-title {
  background: linear-gradient(90deg, #E8202A 0%, #FF2323 25%, #FF7033 50%, #F47920 75%, #FFB547 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: vault-grad-shift 6s linear infinite;
}
/* Layer text trắng phía sau — tone-down để hợp dark theme */
.section-title::before {
  color: rgba(255,255,255,0.08) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.08) !important;
  text-shadow: none !important;
  background: none !important;
}
@keyframes vault-grad-shift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* Product card chính */
.product-card {
  background: var(--shop-bg-1, #0D0F16) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform .25s, border-color .25s, box-shadow .25s !important;
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232,32,42,0.35) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,32,42,0.15) inset !important;
}

.product-card .card-body { color: var(--shop-fg-2, #C6C9D2) !important; background: transparent !important; }
.product-card .card-title,
.product-card h4.card-title {
  color: #F5F6F8 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 8px 0 12px !important;
  line-height: 1.3 !important;
  text-align: center;
}
.product-card .card-title a,
.product-card h4.card-title a {
  color: #F5F6F8 !important;
  text-decoration: none;
}
.product-card:hover .card-title a,
.product-card .card-title a:hover {
  color: #FF3B43 !important;
}

/* Product image cleanup */
.product-card .product-image-container {
  background: var(--shop-bg-2, #12151F) !important;
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  position: relative;
  overflow: hidden;
}
.product-card .product-image-container img {
  background: var(--shop-bg-2, #12151F) !important;
}

/* Product stats row (eye / download) — đặt lại trong card body, không tràn ra ngoài */
.product-card .product-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  gap: 8px;
}

/* Badge eye/download trên card */
.product-card .product-stats .badge {
  background: rgba(255,255,255,0.06) !important;
  color: var(--shop-fg-2, #C6C9D2) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
.product-card .download-count {
  color: var(--shop-fg-2, #C6C9D2) !important;
}
.product-card .download-count .text-warning {
  color: var(--shop-amber, #FFB547) !important;
}

/* Giá sản phẩm */
.product-card .price-display,
.product-card .price-display font[color] {
  color: var(--shop-amber, #FFB547) !important;
  font-weight: 700;
}
.product-card .price-display del {
  color: var(--shop-fg-4, #5A6072) !important;
  font-weight: 500;
}

/* Ribbon HOT/NEW */
.card__ribbon {
  background: var(--shop-grad-red, linear-gradient(135deg, #E8202A, #FF7033)) !important;
  color: #fff !important;
}

/* CTA button "XEM CHI TIẾT" — đè cả .button + shimmer + hover xanh lá */
.product-action .button,
.product-card .product-action .button,
.product-action a.button {
  background: linear-gradient(135deg, #E8202A 0%, #FF2323 50%, #FF7033 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 6px 18px rgba(232,32,42,0.35), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  color: #fff !important;
}
.product-action .button:hover,
.product-card .product-action .button:hover {
  background: linear-gradient(135deg, #C81920 0%, #E8202A 50%, #F47920 100%) !important;
  box-shadow: 0 10px 26px rgba(232,32,42,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px);
}
.product-action .button::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent) !important;
}
.product-action .button_lg,
.product-action .button_sl,
.product-action .button_text {
  background: transparent !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Banner image holder */
.banner-container { background: transparent !important; }

/* Alert thông báo (nếu có notify) */
.alert-border-danger, .alert-danger {
  background: rgba(232,32,42,0.08) !important;
  border: 1px solid rgba(232,32,42,0.25) !important;
  color: var(--shop-fg-2, #C6C9D2) !important;
}
.alert-border-danger .text-danger,
.alert-danger .text-danger {
  color: var(--shop-red-2, #FF3B43) !important;
}

/* Modal notification */
.modal-content {
  background: var(--shop-bg-2, #12151F) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
}
.modal-header, .modal-footer { border-color: var(--shop-line, rgba(255,255,255,0.06)) !important; }
.modal-title { color: var(--shop-fg-1, #F5F6F8) !important; }
.btn-close { filter: invert(1) brightness(0.85) !important; }

/* Bootstrap primary button (mọi nơi) */
.btn-primary {
  background: var(--shop-grad-red, linear-gradient(135deg, #E8202A, #FF7033)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); }

/* Link mặc định */
a:not(.shop-nav-item):not(.brand):not(.vsd-item):not(.btn):not(.button):not(.iconbtn):not(.avatar):not(.btn-primary):not(.btn-ghost):not(.btn-buy):not(.btn-buy-now) {
  color: var(--shop-red-2, #FF3B43);
}

/* Footer — đồng nhất nền đen Vault, đè cả var(--bg-card) navy gốc + offset sidebar 260px cũ */
body .page-footer,
body.toggled .page-footer,
html body .page-footer {
  background: var(--shop-bg-0, #07080C) !important;
  background-color: var(--shop-bg-0, #07080C) !important;
  border-top: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  box-shadow: none !important;
  text-align: center;
  /* Đẩy footer theo sidebar Vault 248px (thay vì 260px cũ) */
  left: var(--vault-sidebar-w, 248px) !important;
}
body.toggled .page-footer {
  left: var(--vault-sidebar-w-collapsed, 76px) !important;
}
@media (max-width: 991.98px) {
  body .page-footer,
  body.toggled .page-footer { left: 0 !important; }
}
.page-footer p {
  color: var(--shop-fg-3, #8A8FA0) !important;
  margin: 0 !important;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ===========================================================
   Toast notification "vừa mua" — đồng nhất tông Vault
   =========================================================== */
.virtual-transaction-notification {
  background: var(--shop-bg-2, #12151F) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,32,42,0.08) !important;
}
.virtual-transaction-notification::before {
  background: linear-gradient(90deg, #E8202A, #F47920, #FFB547, #E8202A) !important;
  background-size: 200% 100% !important;
  opacity: 0.85 !important;
}
.virtual-transaction-notification:hover {
  border-color: rgba(232,32,42,0.30) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,32,42,0.20) !important;
}

/* Avatar tròn — đè inline gradient cam/xanh bằng gradient đỏ-cam Vault */
.virtual-transaction-notification .avatar-inner {
  background: linear-gradient(135deg, #E8202A 0%, #FF7033 100%) !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 12px rgba(232,32,42,0.35);
}
.virtual-transaction-notification .avatar-placeholder {
  color: #fff !important;
  font-weight: 800 !important;
}

/* Text trong toast */
.virtual-transaction-notification .transaction-user-name {
  color: var(--shop-fg-1, #F5F6F8) !important;
  font-weight: 700 !important;
}
.virtual-transaction-notification .transaction-action {
  color: var(--shop-fg-3, #8A8FA0) !important;
}
.virtual-transaction-notification .transaction-product {
  color: var(--shop-red-2, #FF7B81) !important;
  font-weight: 700 !important;
}
.virtual-transaction-notification .transaction-close {
  color: var(--shop-fg-3, #8A8FA0) !important;
  background: transparent !important;
  border: 0 !important;
}
.virtual-transaction-notification .transaction-close:hover {
  color: var(--shop-fg-1, #F5F6F8) !important;
}

/* ===========================================================
   Các trang con (Recharge / Tool history / Source history / Profile)
   Map accent xanh cyan #06B6D4 / #0891b2 → đỏ-cam Vault
   =========================================================== */

/* ---- Card chính (.hc-card) ---- */
.hc-card {
  background: var(--shop-bg-1, #0D0F16) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  border-radius: 14px !important;
}
.hc-head {
  background: var(--shop-bg-2, #12151F) !important;
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
.hc-head-title { color: var(--shop-fg-1, #F5F6F8) !important; }
.hc-head-title svg { color: var(--shop-red-2, #FF3B43) !important; }

/* Row count badge */
.row-count {
  background: rgba(232,32,42,0.12) !important;
  color: var(--shop-red-2, #FF7B81) !important;
  border: 1px solid rgba(232,32,42,0.25) !important;
}

/* ---- Table ---- */
table.ht thead tr { background: var(--shop-bg-2, #12151F) !important; }
table.ht thead th {
  color: var(--shop-fg-4, #5A6072) !important;
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
table.ht tbody tr {
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  background: transparent;
}
table.ht tbody tr:hover { background: var(--shop-bg-2, #12151F) !important; }
table.ht tbody td { color: var(--shop-fg-2, #C6C9D2); }

/* ---- DataTables toolbar + footer ---- */
.dt-toolbar {
  background: var(--shop-bg-2, #12151F) !important;
  border-bottom: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
.dt-toolbar select,
.dt-toolbar input {
  background: var(--shop-bg-0, #07080C) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
}
.dt-toolbar select:focus,
.dt-toolbar input:focus {
  border-color: var(--shop-red, #E8202A) !important;
  box-shadow: 0 0 0 3px rgba(232,32,42,0.15) !important;
}
.dt-toolbar label { color: var(--shop-fg-3, #8A8FA0) !important; }

.dt-footer {
  background: var(--shop-bg-2, #12151F) !important;
  border-top: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
.dt-footer .dataTables_info { color: var(--shop-fg-4, #5A6072) !important; }

/* Pagination — đè màu cyan gốc */
.dt-footer .paginate_button {
  background: var(--shop-bg-1, #0D0F16) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  color: var(--shop-fg-3, #8A8FA0) !important;
}
.dt-footer .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--shop-bg-2, #12151F) !important;
  border-color: rgba(232,32,42,0.40) !important;
  color: var(--shop-red-2, #FF3B43) !important;
}
.dt-footer .paginate_button.current,
.dt-footer .paginate_button.current:hover {
  background: linear-gradient(135deg, #E8202A 0%, #FF7033 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(232,32,42,0.40) !important;
}

/* ---- Amount chips (chọn nhanh số tiền) ---- */
.amt-chip {
  background: var(--shop-bg-2, #12151F) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
  color: var(--shop-fg-2, #C6C9D2) !important;
}
.amt-chip:hover,
.amt-chip.active {
  background: rgba(232,32,42,0.12) !important;
  color: var(--shop-red-2, #FF7B81) !important;
  border-color: rgba(232,32,42,0.40) !important;
}

/* ---- Sum box (số tiền sẽ nhận) ---- */
.sum-box {
  background: linear-gradient(135deg, rgba(232,32,42,0.08), rgba(244,121,32,0.05)) !important;
  border: 1px solid rgba(232,32,42,0.20) !important;
}
.sum-label { color: var(--shop-fg-3, #8A8FA0) !important; }
.sum-value {
  color: var(--shop-amber, #FFB547) !important;
  font-family: 'Inter', monospace !important;
}

/* ---- CTA button chính (Nạp / Chuyển khoản / Xác nhận) ---- */
.cta-btn {
  background: linear-gradient(135deg, #E8202A 0%, #FF2323 50%, #FF7033 100%) !important;
  box-shadow: 0 6px 20px rgba(232,32,42,0.30) !important;
  color: #fff !important;
  border: 0 !important;
}
.cta-btn:hover {
  background: linear-gradient(135deg, #C81920 0%, #E8202A 50%, #F47920 100%) !important;
  box-shadow: 0 10px 28px rgba(232,32,42,0.45) !important;
}

/* ---- Captcha input ---- */
.cap-input {
  background: var(--shop-bg-0, #07080C) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
}
.cap-input:focus {
  border-color: var(--shop-red, #E8202A) !important;
  box-shadow: 0 0 0 3px rgba(232,32,42,0.15) !important;
}
.cap-label { color: var(--shop-fg-3, #8A8FA0) !important; }

/* ---- Date / time cells trong table ---- */
.dc-date, .date-cell { color: var(--shop-fg-1, #F5F6F8); }
.dc-time, .dc-sep { color: var(--shop-fg-4, #5A6072); }

/* ---- Profile page ---- */
.avatar-circle {
  background: linear-gradient(135deg, #E8202A 0%, #FF7033 100%) !important;
  border: 2px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 6px 18px rgba(232,32,42,0.35) !important;
}
.avatar-online { background: var(--shop-success, #22C55E) !important; }
.hero-name { color: var(--shop-fg-1, #F5F6F8) !important; }

/* ---- Tool/Source history specific ---- */
.days-badge {
  background: rgba(232,32,42,0.10) !important;
  color: var(--shop-red-2, #FF7B81) !important;
  border: 1px solid rgba(232,32,42,0.25) !important;
}
.act-btn,
.act-wrap .btn {
  background: var(--shop-bg-2, #12151F) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
  color: var(--shop-fg-2, #C6C9D2) !important;
}
.act-btn:hover,
.act-wrap .btn:hover {
  background: rgba(232,32,42,0.10) !important;
  border-color: rgba(232,32,42,0.40) !important;
  color: var(--shop-red-2, #FF3B43) !important;
}

/* ---- Generic form-control trên các trang khác ---- */
.main-content .form-control,
.main-content .form-select {
  background: var(--shop-bg-0, #07080C) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
}
.main-content .form-control:focus,
.main-content .form-select:focus {
  border-color: var(--shop-red, #E8202A) !important;
  box-shadow: 0 0 0 3px rgba(232,32,42,0.15) !important;
}
.main-content .form-control::placeholder { color: var(--shop-fg-4, #5A6072) !important; }

/* ---- container-fluid background ---- */
.main-content .container-fluid { background: transparent !important; }

/* ---- Modal đè color xanh cyan ---- */
.modal-content { background: var(--shop-bg-2, #12151F) !important; }

/* ---- SweetAlert ---- */
.swal2-popup {
  background: var(--shop-bg-2, #12151F) !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
  border: 1px solid var(--shop-line, rgba(255,255,255,0.06)) !important;
}
.swal2-title { color: var(--shop-fg-1, #F5F6F8) !important; }
.swal2-html-container { color: var(--shop-fg-2, #C6C9D2) !important; }
.swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, #E8202A 0%, #FF7033 100%) !important;
  border: 0 !important;
}
.swal2-styled.swal2-cancel {
  background: var(--shop-bg-3, #1A1E2B) !important;
  border: 1px solid var(--shop-line-2, rgba(255,255,255,0.10)) !important;
}

/* Footer — ẩn khi dùng Vault layout (tùy chọn, comment lại nếu muốn giữ) */
.page-footer {
  background: transparent !important;
  border-top: 1px solid var(--shop-line, rgba(255,255,255,0.06));
  color: var(--shop-fg-3, #8A8FA0);
}

/* Search box trong Vault topbar — đảm bảo input không bị bootstrap/form override */
.shop-search input,
.shop-search input.form-control,
.shop-search input[type="text"],
.shop-search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: var(--shop-fg-1, #F5F6F8) !important;
  flex: 1 !important;
  font: inherit !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
.shop-search input::placeholder {
  color: var(--shop-fg-4, #5A6072) !important;
}
.shop-search input:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}