/* ============================================================
   WemakeUI Premium Theme — P2P Client Storefront
   v3 — Complete visual overhaul. Loaded after main.css.
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --wx-50:#eff6ff; --wx-100:#dbeafe; --wx-200:#bfdbfe; --wx-300:#93c5fd;
  --wx-400:#60a5fa; --wx-500:#3b82f6; --wx-600:#2563eb; --wx-700:#1d4ed8;
  --wx-800:#1e40af; --wx-900:#1e3a8a;
  --wx-text:#0f172a; --wx-text2:#334155; --wx-muted:#64748b; --wx-faint:#94a3b8;
  --wx-bg:#f0f4fc; --wx-surface:#ffffff; --wx-sunken:#f8fafc;
  --wx-border:#e2e8f0; --wx-border2:#f1f5f9;
  --wx-r-sm:6px; --wx-r:10px; --wx-r-lg:14px; --wx-r-xl:20px; --wx-r-full:9999px;
  --wx-sh-xs:0 1px 3px rgba(15,23,42,.08);
  --wx-sh:0 4px 16px rgba(15,23,42,.08);
  --wx-sh-lg:0 12px 40px rgba(15,23,42,.12);
  --wx-sh-brand:0 4px 20px rgba(37,99,235,.35);
  --wx-grad:linear-gradient(135deg,var(--primary,#2563eb) 0%,var(--primary1,#06b6d4) 100%);
  --wx-grad-hero:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#0e7490 100%);
  --wx-grad-soft:linear-gradient(135deg,rgba(37,99,235,.07),rgba(6,182,212,.07));
  --wx-grad-card:linear-gradient(160deg,#f8faff 0%,#eef3ff 100%);
}

/* ── Base ───────────────────────────────────────────────────── */
html, body { background: var(--wx-bg) !important; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--wx-text) !important;
}

/* ── Kill legacy top bar + right balance sidebar ───────────── */
.header-top { display: none !important; }
/* Right sidebar: balance moved to profile page */
.card-wallet-home { display: none !important; }

/* ── Notice bar ────────────────────────────────────────────── */
.header-notice-bar {
  background: var(--wx-grad);
  color: #fff; font-size: 13px; text-align: center; padding: 7px 0;
}
.header-notice-bar p { margin: 0; font-weight: 500; }

/* ============================================================
   HEADER
   ============================================================ */
.header-part {
  background: #ffffff !important;
  border-bottom: 1px solid var(--wx-border) !important;
  box-shadow: 0 1px 10px rgba(15,23,42,.06) !important;
  position: sticky !important; top: 0 !important; z-index: 200 !important;
}
.header-content {
  display: flex !important; align-items: center !important;
  gap: 16px !important; padding: 12px 0 !important;
  min-height: 64px !important;
}

.header-media-group { display: flex; align-items: center; gap: 8px; }
.header-media-group button { background: none !important; border: none !important; color: var(--wx-text2) !important; font-size: 18px; padding: 8px; border-radius: var(--wx-r); cursor: pointer; }
.header-media-group button:hover { background: var(--wx-50) !important; color: var(--wx-700) !important; }
/* On large screens, hide the duplicate mobile logo (header-logo shows instead) */
@media (min-width: 992px) { .header-media-group a { display: none !important; } }

.header-logo {
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important;
}
.header-logo img { max-height: 44px; width: auto; display: block; }
/* If logo image broken, show site name via CSS generated content isn't possible;
   but we can style the alt-text container nicely */
.header-logo a {
  font-size: 22px !important; font-weight: 900 !important;
  background: var(--wx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -0.5px; text-decoration: none !important;
}

/* Search bar */
.header-form {
  flex: 1 !important; max-width: 500px !important;
  display: flex !important; align-items: center !important;
  background: var(--wx-sunken) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-full) !important;
  overflow: hidden !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.header-form:focus-within {
  border-color: var(--wx-400) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  background: #fff !important;
}
.header-form input {
  flex: 1 !important;
  background: transparent !important; border: none !important; outline: none !important;
  color: var(--wx-text) !important; padding: 10px 16px !important;
  font-size: 14px !important;
}
.header-form input::placeholder { color: var(--wx-faint) !important; }
.header-form button {
  background: var(--wx-grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--wx-r-full) !important;
  margin: 4px !important; width: 36px !important; height: 36px !important;
  flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
}

/* Header widgets */
.header-widget-group {
  display: flex !important; align-items: center !important; gap: 4px !important;
  flex-shrink: 0 !important; margin-left: auto !important;
}
.header-widget {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; padding: 7px 10px !important;
  border-radius: var(--wx-r) !important;
  color: var(--wx-text2) !important;
  font-size: 14px !important;
  transition: background .15s, color .15s !important;
  text-decoration: none !important;
}
.header-widget:hover {
  background: var(--wx-50) !important;
  color: var(--wx-700) !important;
  text-decoration: none !important;
}
.header-widget sup {
  background: #ef4444 !important;
  color: #fff !important; font-size: 10px !important;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-widget img {
  width: 32px !important; height: 32px !important;
  border-radius: var(--wx-r-full) !important;
  border: 2px solid var(--wx-border) !important;
  object-fit: cover;
}
.header-widget span p { margin: 0 !important; line-height: 1.3 !important; font-size: 12px !important; }
.header-widget span p:first-child { font-weight: 700 !important; font-size: 13px !important; color: var(--wx-text) !important; }
.header-widget span p[style*="color:blue"] { color: var(--wx-600) !important; }

/* Locale switcher */
.header-locale { display: flex; align-items: center; gap: 4px; }
.header-locale-item {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--wx-sunken); border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-full); padding: 5px 12px;
  font-size: 12px; color: var(--wx-muted);
  transition: background .15s, border-color .15s;
}
.header-locale-item:hover { background: var(--wx-50); border-color: var(--wx-300); color: var(--wx-700); }
.header-locale-item i { font-size: 13px; color: var(--wx-500); }
.header-locale-item select {
  border: none !important; background: transparent !important;
  font-size: 12px !important; color: var(--wx-text) !important;
  padding: 0 !important; cursor: pointer; outline: none;
}
@media (max-width:991px) { .header-locale { display: none !important; } }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-part {
  background: #ffffff !important;
  border-bottom: 1px solid var(--wx-border) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
}
.navbar-list { gap: 2px; }
.navbar-link {
  color: var(--wx-text2) !important;
  font-weight: 600 !important; font-size: 13.5px !important;
  border-radius: var(--wx-r) !important;
  padding: 10px 14px !important;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.navbar-link:hover {
  background: var(--wx-50) !important;
  color: var(--wx-700) !important;
}
.navbar-item.active > .navbar-link,
.navbar-link.active {
  background: var(--wx-grad) !important;
  color: #fff !important;
  box-shadow: var(--wx-sh-brand);
}
.navbar-info-group .navbar-info p span { color: var(--wx-text) !important; font-weight: 700; }
.navbar-info-group { border-left: 1px solid var(--wx-border) !important; padding-left: 16px !important; margin-left: 8px !important; }
.navbar-info { display: flex !important; align-items: center !important; gap: 8px !important; padding: 4px 10px !important; }
.navbar-info p { margin: 0 !important; line-height: 1.3 !important; }
.navbar-info p small { color: var(--wx-muted) !important; font-size: 10px !important; display: block; }
.navbar-info p span { font-size: 13px !important; font-weight: 700 !important; color: var(--wx-text) !important; }
.navbar-info i, .navbar-info svg { color: var(--wx-500) !important; font-size: 18px !important; }

/* Megamenu */
.megamenu {
  background: #ffffff !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-lg) !important;
  border: 1.5px solid var(--wx-border) !important;
}
.megamenu-list li a {
  color: var(--wx-text2) !important;
  border-radius: var(--wx-r-sm) !important;
  transition: background .15s, color .15s, padding-left .15s;
}
.megamenu-list li a:hover {
  color: var(--wx-700) !important; background: var(--wx-50) !important; padding-left: 6px;
}
.megamenu-title { color: var(--wx-faint) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   HERO / SECTION HEADINGS
   main.css has: .home-heading h3:not(.no-bg) { background:grad !important }
   We match the exact selector (same specificity, loaded after = wins)
   ============================================================ */
.home-heading {
  background: transparent !important;
  border: none !important; border-bottom: 2px solid var(--wx-border2) !important;
  padding: 0 0 12px !important; margin-bottom: 20px !important;
}
.home-heading h3:not(.no-bg) {
  background: transparent !important;
  color: var(--wx-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.home-heading h3, .home-heading h2 {
  font-weight: 800 !important; color: var(--wx-text) !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-size: 17px !important; margin: 0 !important;
  background: transparent !important;
  text-transform: none !important;
}
.home-heading h3::before {
  content: '' !important;
  display: inline-block !important; width: 4px !important; height: 20px !important;
  background: var(--wx-grad) !important; border-radius: 2px !important; flex-shrink: 0 !important;
}
.home-heading h3 img { width: 22px !important; height: 22px !important; border-radius: 5px !important; flex-shrink: 0 !important; margin: 0 !important; }

/* ============================================================
   CATEGORY PILLS
   ============================================================ */
.custom-button-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
.custom-button-list li {
  display: inline-flex !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
  width: auto !important; flex: none !important;
}
.btn-category-home {
  display: inline-flex !important; align-items: center !important;
  width: auto !important; min-width: unset !important; max-width: none !important;
  background: var(--wx-surface) !important;
  color: var(--wx-text2) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-full) !important;
  font-weight: 600 !important; font-size: 13px !important;
  padding: 7px 16px !important; line-height: 1.4 !important;
  box-shadow: var(--wx-sh-xs) !important;
  transition: all .18s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.btn-category-home:hover {
  border-color: var(--wx-400) !important;
  color: var(--wx-700) !important;
  background: var(--wx-50) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--wx-sh) !important;
  text-decoration: none !important;
}
.btn-category-home.active {
  background: var(--wx-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--wx-sh-brand) !important;
}

/* ============================================================
   PRODUCT CARDS — Feature Card (BOX / LIST)
   ============================================================ */
.feature-card {
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-xs) !important;
  overflow: visible !important;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  margin-bottom: 14px;
  position: relative;
}
.feature-card:hover {
  box-shadow: var(--wx-sh-lg) !important;
  transform: translateY(-4px);
  border-color: var(--wx-200) !important;
}

/* Accent bar on left */
.feature-card::after {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--wx-grad);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity .2s;
}
.feature-card:hover::after { opacity: 1; }

.feature-content { padding: 18px 20px !important; border-left: none !important; }
.feature-name a {
  color: var(--wx-text) !important; font-weight: 700 !important; font-size: 15px !important;
  text-decoration: none !important;
  transition: color .15s;
}
.feature-name a:hover { color: var(--wx-600) !important; }
.feature-desc { color: var(--wx-muted) !important; font-size: 13px !important; margin: 6px 0 !important; }
.feature-price {
  margin: 8px 0 12px !important;
}
.feature-price span {
  font-size: 18px !important; font-weight: 800 !important;
  background: var(--wx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.feature-price del { color: var(--wx-faint) !important; font-size: 13px; font-weight: 400; margin-right: 6px; }
.feature-rating i.active { color: #f59e0b !important; }

/* Labels / badges inside cards */
.label-text {
  display: inline-flex !important; align-items: center; gap: 4px;
  font-size: 12px !important; color: var(--wx-muted) !important;
  background: var(--wx-sunken); border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-full); padding: 3px 10px; margin: 3px 4px 3px 0;
}
.label-text b { color: var(--wx-text2) !important; font-weight: 600 !important; }
.label-text.off {
  background: #fef2f2 !important; border-color: #fecaca !important;
  color: #dc2626 !important; font-weight: 700 !important;
}
.label-text.feat { background: #eff6ff !important; border-color: #bfdbfe !important; color: var(--wx-700) !important; }

/* ── Out-of-stock: show badge, DO NOT DIM the card ─────────── */
.product-disable {
  opacity: 1 !important;
}
.product-disable::before {
  position: absolute !important;
  content: "Hết hàng" !important;
  top: 12px !important; right: 12px !important;
  left: auto !important; bottom: auto !important;
  transform: none !important; -webkit-transform: none !important;
  width: auto !important;
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
  color: #fff !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 3px 10px !important; border-radius: var(--wx-r-full) !important;
  text-transform: uppercase !important; letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(220,38,38,.4) !important;
  text-shadow: none !important;
  z-index: 2 !important;
}
/* Subtle border tint for out-of-stock */
.feature-card.product-disable { border-color: #fecaca !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-buy, .buy-btn-box4 {
  background: var(--wx-grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--wx-r) !important;
  font-weight: 700 !important; font-size: 13px !important;
  padding: 9px 18px !important;
  box-shadow: var(--wx-sh-brand) !important;
  transition: filter .15s, box-shadow .15s, transform .1s !important;
  width: 100% !important;
}
.btn-buy:hover, .buy-btn-box4:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 24px rgba(37,99,235,.45) !important;
  transform: translateY(-1px) !important;
}
.btn-buy:active { transform: translateY(0) !important; }
.btn-buy:disabled, .buy-btn-box4:disabled {
  background: linear-gradient(135deg,#94a3b8,#64748b) !important;
  box-shadow: none !important; cursor: not-allowed !important;
  opacity: 0.9 !important;
}

.btn-more, .more-btn-box4 {
  background: var(--wx-surface) !important; color: var(--wx-text2) !important;
  border: 1.5px solid var(--wx-border) !important; border-radius: var(--wx-r) !important;
  font-weight: 600 !important; font-size: 13px !important; padding: 9px 18px !important;
  transition: all .15s !important; width: 100% !important;
}
.btn-more:hover, .more-btn-box4:hover {
  background: var(--wx-50) !important;
  border-color: var(--wx-300) !important;
  color: var(--wx-700) !important;
}

.btn-more-new {
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--wx-grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--wx-r-full) !important;
  font-weight: 700 !important; font-size: 14px !important;
  padding: 12px 36px !important;
  box-shadow: var(--wx-sh-brand) !important;
  transition: filter .15s, transform .15s !important;
}
.btn-more-new:hover { filter: brightness(1.1) !important; transform: translateY(-2px) !important; }

/* Generic Bootstrap primary btn */
.btn-primary, .btn.btn-primary {
  background: var(--wx-grad) !important; border: none !important;
  border-radius: var(--wx-r) !important; font-weight: 600 !important;
  box-shadow: var(--wx-sh-brand) !important;
}
.btn-primary:hover { filter: brightness(1.08) !important; }
.btn-outline-primary {
  border-color: var(--wx-400) !important;
  color: var(--wx-600) !important; border-radius: var(--wx-r) !important;
}
.btn-outline-primary:hover {
  background: var(--wx-50) !important;
  border-color: var(--wx-500) !important;
}

/* ============================================================
   RIGHT SIDEBAR — WALLET / ACCOUNT CARDS
   ============================================================ */
.account-card, .card-wallet-home {
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh) !important;
  overflow: hidden;
}
.my-wallet {
  background: var(--wx-grad) !important; color: #fff !important;
  border-radius: var(--wx-r) !important; padding: 20px !important;
  position: relative; overflow: hidden;
}
.my-wallet::before {
  content: '';
  position: absolute; right: -20px; top: -20px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.1); border-radius: 50%;
}
.my-wallet p { color: rgba(255,255,255,.8) !important; font-size: 13px !important; margin: 0 0 4px; }
.my-wallet h3 {
  color: #fff !important; font-weight: 800 !important;
  font-size: 22px !important; margin: 0 !important;
}
.wallet-card {
  background: var(--wx-grad-card) !important;
  border: 1px solid var(--wx-border) !important;
  border-radius: var(--wx-r) !important;
  padding: 14px !important; margin-bottom: 10px;
  transition: box-shadow .15s;
}
.wallet-card:hover { box-shadow: var(--wx-sh) !important; }
.wallet-card h3 { color: var(--wx-text) !important; font-weight: 800 !important; font-size: 17px !important; margin: 0 !important; }
.wallet-card p { color: var(--wx-muted) !important; font-size: 12px !important; margin: 2px 0 0; }
.wallet-card .icofont, .wallet-card .fa { font-size: 20px !important; color: var(--wx-500) !important; }

/* Social login */
.user-form-social .facebook {
  background: var(--wx-grad) !important; color: #fff !important;
  border-radius: var(--wx-r) !important; font-weight: 600 !important;
}
.user-form-social .google {
  background: var(--wx-surface) !important; color: var(--wx-text) !important;
  border: 1.5px solid var(--wx-border) !important; border-radius: var(--wx-r) !important;
}

/* ============================================================
   BOX_4 PRODUCT CARDS
   ============================================================ */
.product-box4 {
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-xs) !important;
  overflow: hidden !important;
  transition: box-shadow .25s, transform .25s, border-color .25s !important;
}
.product-box4:hover {
  box-shadow: var(--wx-sh-lg) !important;
  transform: translateY(-4px) !important;
  border-color: var(--wx-200) !important;
}
.product-head-box4 {
  background: var(--wx-grad) !important; color: #fff !important;
  padding: 16px 16px 14px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
.product-head-box4 img { width: 28px; height: 28px; border-radius: 6px; }
.product-head-box4 h4 {
  color: #fff !important; font-weight: 700 !important;
  font-size: 14px !important; margin: 0 !important;
}
.price-box4 strong, .proce-box4-not-discount {
  font-size: 16px !important; font-weight: 800 !important;
  background: var(--wx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.price-box4 span { color: var(--wx-faint) !important; font-size: 12px !important; text-decoration: line-through; }

/* ============================================================
   FLOATING CATEGORY SIDEBAR
   ============================================================ */
#top-menu-left, #top-menu-right {
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-lg) !important;
  padding: 8px !important;
}
#top-menu-left {
  left: calc(var(--wx-sidebar-w, 256px) + 12px) !important;
  transition: left .2s ease !important;
}
body.wx-layout.wx-nav-closed #top-menu-left {
  left: 12px !important;
}
#top-menu-right { right: 12px; }
@media (max-width: 991.98px) {
  #top-menu-left { left: 12px !important; }
}
#top-menu-left li, #top-menu-right li { margin: 2px 0; }
#top-menu-left .menu-item, #top-menu-right .menu-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  border-radius: var(--wx-r) !important;
  color: var(--wx-text2) !important; font-weight: 600 !important; font-size: 13px !important;
  padding: 9px 12px !important;
  transition: background .15s, color .15s !important;
}
#top-menu-left .menu-item:hover, #top-menu-right .menu-item:hover {
  background: var(--wx-50) !important; color: var(--wx-700) !important;
}
#top-menu-left .menu-item.active, #top-menu-right .menu-item.active {
  background: var(--wx-grad) !important; color: #fff !important;
  box-shadow: var(--wx-sh-brand) !important;
}
#top-menu-left .menu-item img, #top-menu-right .menu-item img {
  width: 20px; height: 20px; border-radius: 5px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select,
input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select.select {
  border-radius: var(--wx-r) !important;
  border: 1.5px solid var(--wx-border) !important;
  background: var(--wx-surface) !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-size: 14px !important;
}
.form-control:focus, .form-select:focus, textarea:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
  border-color: var(--wx-400) !important;
  box-shadow: 0 0 0 3px rgba(99,179,237,.18) !important;
  outline: none !important;
}
.nice-select {
  border-radius: var(--wx-r) !important;
  border: 1.5px solid var(--wx-border) !important;
}
.form-label { font-weight: 600 !important; font-size: 13px !important; color: var(--wx-text2) !important; }

/* ============================================================
   CARDS (generic)
   ============================================================ */
.card {
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-xs) !important;
}
.card-header {
  background: var(--wx-surface) !important;
  border-bottom: 1px solid var(--wx-border2) !important;
  font-weight: 700 !important; padding: 16px 20px !important;
}
.card-body { padding: 20px !important; }

/* Alerts */
.alert { border-radius: var(--wx-r) !important; border: 1px solid transparent !important; }
.alert-success { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.alert-danger  { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
.alert-warning { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
.alert-info    { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }

/* Badges */
.badge.bg-primary { background: var(--wx-grad) !important; border-radius: var(--wx-r-full) !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link, .bottom-paginate a, .bottom-paginate span {
  border-radius: var(--wx-r-sm) !important;
  border: 1.5px solid var(--wx-border) !important;
  color: var(--wx-text2) !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
.pagination .page-link:hover { background: var(--wx-50) !important; border-color: var(--wx-300) !important; }
.pagination .page-item.active .page-link, .bottom-paginate .active {
  background: var(--wx-grad) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: var(--wx-sh-brand) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-part {
  background: #0f172a !important;
  color: rgba(255,255,255,.6) !important;
  border-top: none !important;
  margin-top: 60px !important;
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}
.footer-part .container > .row { padding-bottom: 40px !important; }

/* Footer logo — gradient text so it looks good even if image broken */
.footer-logo {
  display: inline-block !important;
  margin-bottom: 16px !important;
}
.footer-logo img {
  max-height: 40px; width: auto;
  filter: brightness(0) invert(1) !important;
}
/* If image fails, the <a> text / alt still shows styled */
.footer-logo a {
  font-size: 22px !important; font-weight: 900 !important;
  background: var(--wx-grad) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
  letter-spacing: -0.5px;
}

.footer-desc {
  color: rgba(255,255,255,.5) !important;
  font-size: 13.5px !important; line-height: 1.7 !important;
  margin-top: 8px !important;
}

/* Footer headings */
.footer-title {
  color: #fff !important; font-weight: 700 !important;
  font-size: 14px !important; text-transform: uppercase !important;
  letter-spacing: 1px !important; margin-bottom: 20px !important;
  position: relative; padding-bottom: 10px;
}
.footer-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; background: var(--wx-grad);
  border-radius: 2px;
}

/* Footer contact list */
.footer-contact { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-contact li {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  margin-bottom: 12px !important; color: rgba(255,255,255,.55) !important;
  font-size: 13.5px !important;
}
.footer-contact li p { margin: 0 !important; color: rgba(255,255,255,.7) !important; }
.footer-contact li i, .footer-contact li svg,
.footer-contact li img { color: var(--wx-400) !important; margin-top: 2px !important; flex-shrink: 0; }

/* Footer links */
.footer-links ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-links ul li { margin-bottom: 10px !important; }
.footer-links ul li a {
  color: rgba(255,255,255,.6) !important; font-size: 13.5px !important;
  text-decoration: none !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  transition: color .15s, gap .15s !important;
}
.footer-links ul li a::before {
  content: '→'; font-size: 11px; opacity: .5; transition: opacity .15s;
}
.footer-links ul li a:hover { color: #fff !important; }
.footer-links ul li a:hover::before { opacity: 1; }

/* Footer widget general link */
.footer-part a { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.footer-part a:hover { color: #fff !important; }

/* Footer bottom bar */
.footer-bottom {
  background: rgba(0,0,0,.2) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 16px 0 !important; margin-top: 0 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 12px !important;
}
.footer-copytext {
  color: rgba(255,255,255,.4) !important;
  font-size: 12.5px !important; margin: 0 !important;
}
.footer-copytext a { color: rgba(255,255,255,.6) !important; }
.footer-copytext a:hover { color: #fff !important; }
.footer-card { display: flex; align-items: center; gap: 8px; }

/* Footer widget spacing */
.footer-widget { padding-bottom: 8px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state { color: var(--wx-muted); padding: 48px 0; text-align: center; }
.empty-state p { color: var(--wx-muted) !important; margin-top: 14px; font-size: 15px; }
.empty-state svg { opacity: .5; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-content {
  border-radius: var(--wx-r-xl) !important;
  border: 1px solid var(--wx-border) !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.25) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--wx-surface) !important;
  border-bottom: 1px solid var(--wx-border2) !important;
  padding: 18px 24px !important;
  font-weight: 700 !important;
}
.modal-body { padding: 24px !important; }
.modal-footer { border-top: 1px solid var(--wx-border2) !important; padding: 14px 24px !important; }
.btn-close { opacity: .5 !important; }
.btn-close:hover { opacity: 1 !important; }

/* ============================================================
   BACK TO TOP + MISC
   ============================================================ */
.backtop {
  background: var(--wx-grad) !important; color: #fff !important;
  border-radius: var(--wx-r-full) !important;
  box-shadow: var(--wx-sh-brand) !important;
  width: 44px !important; height: 44px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Skeleton loaders */
.skeleton-card, .skeleton-image, .skeleton-title, .skeleton-text,
.skeleton-stock, .skeleton-sales, .skeleton-price, .skeleton-button,
.skeleton-category-btn, .skeleton-menu-title, .skeleton-menu-item {
  border-radius: var(--wx-r-sm) !important;
}

/* ============================================================
   PRODUCT LIST — Card price area alignment
   ============================================================ */
.card-price-product-list {
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.card-price-product-list .feature-price { text-align: right; }

/* Action buttons row */
.feature-content .row:last-child { margin-top: 12px !important; gap: 0; }
.feature-content .row:last-child .col { padding-right: 4px; padding-left: 4px; }
.feature-content .row:last-child .col:first-child { padding-left: 0; }
.feature-content .row:last-child .col:last-child  { padding-right: 0; }

/* ============================================================
   PRODUCT BOX_4 — specific overrides
   ============================================================ */
.product-body-box4 { padding: 16px !important; }
.product-body-box4 p {
  color: var(--wx-muted) !important; font-size: 13px !important;
  display: flex; align-items: flex-start; gap: 6px;
}
.product-body-box4 p .fa-circle-check { color: var(--wx-500) !important; margin-top: 3px; }
.product-footer-box4 {
  background: var(--wx-sunken) !important;
  border-top: 1px solid var(--wx-border2) !important;
  padding: 14px 16px !important;
}
.product-footer-box4 strong { color: var(--wx-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.product-buttons-box4 {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  padding: 12px 16px !important; gap: 8px !important;
  border-top: 1px solid var(--wx-border2) !important;
}
.border-end-box4 { border-right: 1px solid var(--wx-border2) !important; }

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.home-section, .home-wrapper { background: transparent !important; }

/* Sticky top spacing so navbar isn't hidden under fixed header */
.sticky-bar, .is_stuck { z-index: 99 !important; }

/* Table styling */
table.table { border-radius: var(--wx-r-lg) !important; overflow: hidden; }
.table thead th {
  background: #f8fafc !important; color: var(--wx-text2) !important;
  font-weight: 700 !important; font-size: 13px !important;
  border-bottom: 2px solid var(--wx-border) !important;
}
.table tbody tr:hover { background: var(--wx-50) !important; }
.table td, .table th { border-color: var(--wx-border2) !important; }

/* Input group tweaks */
.input-group > .form-control { border-radius: var(--wx-r) 0 0 var(--wx-r) !important; }
.input-group > .btn { border-radius: 0 var(--wx-r) var(--wx-r) 0 !important; }

/* Tabs (e.g. order history) */
.nav-tabs { border-bottom: 2px solid var(--wx-border) !important; }
.nav-tabs .nav-link {
  border: none !important; border-bottom: 2px solid transparent !important;
  color: var(--wx-muted) !important; font-weight: 600 !important;
  border-radius: 0 !important; padding: 10px 16px !important;
  transition: color .15s !important;
}
.nav-tabs .nav-link:hover { color: var(--wx-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--wx-600) !important; border-bottom-color: var(--wx-600) !important;
  background: transparent !important;
}

/* ============================================================
   SECTION HEADER — home-heading with "Xem tất cả" link
   ============================================================ */
.wx-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.wx-viewall-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600;
  color: var(--wx-600);
  text-decoration: none;
  transition: color .15s, gap .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.wx-viewall-link:hover { color: var(--wx-700); gap: 8px; text-decoration: none; }

/* ============================================================
   PRODUCT ROW — wx-prow (LIST mode)
   ============================================================ */
.wx-prow-list { display: flex !important; flex-direction: column !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }

.wx-prow {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  padding: 12px 16px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow .2s, border-color .2s, transform .2s !important;
  margin: 0 !important; width: 100% !important; box-sizing: border-box !important;
}
.wx-prow::before {
  content: '' !important;
  position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important;
  background: var(--wx-grad) !important; opacity: 0 !important;
  transition: opacity .2s !important; border-radius: 0 2px 2px 0 !important;
}
.wx-prow:hover { box-shadow: var(--wx-sh-lg) !important; border-color: var(--wx-200) !important; transform: translateY(-2px) !important; }
.wx-prow:hover::before { opacity: 1 !important; }

/* Info (left) */
.wx-prow-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.wx-prow-name {
  font-size: 14px !important; font-weight: 700 !important; color: var(--wx-600) !important;
  text-decoration: none !important; display: block !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  line-height: 1.4 !important; margin: 0 !important;
  transition: color .15s !important;
}
.wx-prow-name:hover { color: var(--wx-700) !important; text-decoration: none !important; }
.wx-prow-meta { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }

/* Badges */
.wx-prow-badge {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  font-size: 11px !important; font-weight: 500 !important;
  padding: 2px 8px !important; border-radius: 999px !important; border: 1px solid transparent !important;
  line-height: 1.5 !important;
}
.wx-prow-badge b { font-weight: 700 !important; }
.wx-prow-badge--stock { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
.wx-prow-badge--sold  { background: #fff7ed !important; border-color: #fed7aa !important; color: #c2410c !important; }
.wx-prow-badge--off   { background: #fef2f2 !important; border-color: #fecaca !important; color: #dc2626 !important; font-weight: 700 !important; }

/* Side (right) */
.wx-prow-side {
  flex-shrink: 0 !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 10px !important;
}
.wx-prow-pricing { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 1px !important; }
.wx-prow-price-del { font-size: 11px !important; color: var(--wx-faint) !important; text-decoration: line-through !important; line-height: 1 !important; white-space: nowrap !important; }
.wx-prow-price {
  font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important;
  background: var(--wx-grad) !important; -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.wx-prow-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: var(--wx-grad) !important; color: #fff !important; border: none !important;
  border-radius: var(--wx-r) !important; font-size: 12px !important; font-weight: 700 !important;
  padding: 7px 14px !important; box-shadow: var(--wx-sh-brand) !important;
  transition: filter .15s, transform .1s !important; white-space: nowrap !important; cursor: pointer !important;
  text-transform: uppercase !important; letter-spacing: .3px !important;
}
.wx-prow-btn:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; color: #fff !important; }
.wx-prow-btn:disabled { background: linear-gradient(135deg,#cbd5e1,#94a3b8) !important; box-shadow: none !important; cursor: not-allowed !important; opacity: .8 !important; }

/* Out of stock */
.wx-prow--oos { border-color: #fecaca !important; }
.wx-prow--oos .wx-prow-name { color: var(--wx-text2) !important; }

/* Mobile — stack vertically */
@media (max-width: 575.98px) {
  .wx-prow { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .wx-prow-side { justify-content: space-between !important; }
  .wx-prow-name { white-space: normal !important; }
}

/* ============================================================
   PRODUCT CARDS GRID — wx-pc (LIST mode redesign)
   ============================================================ */
.wx-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important; padding: 0 !important;
}

.wx-pc {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  background: var(--wx-surface) !important;
  border: 1.5px solid var(--wx-border) !important;
  border-radius: var(--wx-r-lg) !important;
  box-shadow: var(--wx-sh-xs) !important;
  overflow: visible !important;
  position: relative !important;
  transition: box-shadow .2s, transform .2s, border-color .2s !important;
}
.wx-pc:hover {
  box-shadow: var(--wx-sh-lg) !important;
  transform: translateY(-3px) !important;
  border-color: var(--wx-300) !important;
}

/* Badge row — inline flow, không absolute */
.wx-pc-badges {
  display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
}
.wx-pc-badge-sale {
  display: inline-flex !important; align-items: center !important;
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
  color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
  padding: 2px 8px !important; border-radius: 999px !important;
  letter-spacing: .3px !important;
}
.wx-pc-badge-oos {
  display: inline-flex !important; align-items: center !important;
  background: #64748b !important;
  color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
  padding: 2px 8px !important; border-radius: 999px !important;
  letter-spacing: .3px !important;
}

/* Body */
.wx-pc-body {
  flex: 1 !important;
  padding: 12px 12px 8px !important;
  display: flex !important; flex-direction: column !important; gap: 6px !important;
}
.wx-pc-name {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--wx-text) !important; text-decoration: none !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  line-height: 1.35 !important; min-height: 2.7em !important;
  transition: color .15s !important;
}
.wx-pc-name:hover { color: var(--wx-600) !important; text-decoration: none !important; }
.wx-pc--oos .wx-pc-name { color: var(--wx-text2) !important; }

.wx-pc-shortdesc {
  font-size: 12px !important; color: var(--wx-text2) !important;
  margin: 0 !important; line-height: 1.45 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 400 !important; opacity: .85 !important;
}
.wx-pc--oos .wx-pc-shortdesc { opacity: .55 !important; }

.wx-fav-shortdesc {
  font-size: 11px !important; color: var(--wx-text2) !important;
  margin: 3px 0 0 !important; line-height: 1.4 !important;
  max-width: 360px;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  white-space: normal !important;
  font-weight: 400 !important; opacity: .85 !important;
}

.wx-pc-meta {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  font-size: 11px !important; color: var(--wx-text2) !important;
}
.wx-pc-stock, .wx-pc-sold {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
}
.wx-pc-stock i { color: #3b82f6 !important; }
.wx-pc-sold  i { color: #f97316 !important; }

/* Footer */
.wx-pc-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-top: 1px solid var(--wx-border2) !important;
  background: var(--wx-sunken) !important;
  gap: 8px !important;
  overflow: hidden !important;
  border-radius: 0 0 var(--wx-r-lg) var(--wx-r-lg) !important;
}
/* price co lại khi hẹp, không vượt quá nửa footer */
.wx-pc-price {
  display: flex !important; align-items: center !important; gap: 6px !important;
  flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important;
}
/* button/oos luôn hiển thị, không bao giờ bị đẩy ra */
.wx-pc-footer-right {
  display: flex !important; align-items: center !important; gap: 6px !important;
  flex-shrink: 0 !important;
}
.wx-pc-price strong {
  font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important;
  background: var(--wx-grad) !important; -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important; background-clip: text !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.wx-pc-btn {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  background: var(--wx-grad) !important; color: #fff !important; border: none !important;
  border-radius: var(--wx-r) !important; font-size: 11px !important; font-weight: 700 !important;
  padding: 6px 12px !important; box-shadow: var(--wx-sh-brand) !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: filter .15s, transform .1s !important;
  text-transform: uppercase !important; letter-spacing: .3px !important;
  flex-shrink: 0 !important;
}
.wx-pc-btn:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; color: #fff !important; }
.wx-pc-btn:disabled { background: linear-gradient(135deg,#cbd5e1,#94a3b8) !important; box-shadow: none !important; cursor: not-allowed !important; }
.wx-pc-fav { position: absolute !important; top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.92) !important; border: 1px solid #e2e8f0 !important; border-radius: 50% !important; cursor: pointer; color: #cbd5e1; font-size: 13px; line-height: 1; transition: color .2s, border-color .2s, box-shadow .2s; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0 !important; }
.wx-pc-fav:hover { color: #ef4444; border-color: #ef4444 !important; box-shadow: 0 2px 8px rgba(239,68,68,.2); }
.wx-pc-fav.active { color: #ef4444 !important; border-color: #ef4444 !important; }

/* Column modifiers: BOX/BOX_5=2 cols, BOX_6=1 col */
.wx-card-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.wx-card-grid-1 { grid-template-columns: 1fr !important; }
@media (max-width: 575.98px) { .wx-card-grid-2 { grid-template-columns: 1fr !important; } }

/* BOX_4 — ảnh bên trên */
.wx-pc-img-wrap { width:100%; height:160px; overflow:hidden; border-radius:var(--wx-r-lg) var(--wx-r-lg) 0 0 !important; flex-shrink:0; background:var(--wx-sunken); display:flex; align-items:center; justify-content:center; }
.wx-pc-img-wrap img { width:100%; height:100%; object-fit:contain; display:block; }

/* BOX_5 / BOX_6 — ảnh bên trái */
.wx-pc--img-left { flex-direction:row !important; }
.wx-pc-img-left-col { width:130px; flex-shrink:0; overflow:hidden; border-radius:var(--wx-r-lg) 0 0 var(--wx-r-lg) !important; align-self:stretch; background:var(--wx-sunken); display:flex; align-items:center; justify-content:center; }
.wx-pc-img-left-col img { width:100%; height:100%; object-fit:contain; display:block; }
.wx-pc-text-col { flex:1 !important; display:flex !important; flex-direction:column !important; position:relative; min-width:0; }
.wx-pc--img-left .wx-pc-footer { border-radius:0 0 var(--wx-r-lg) 0 !important; }
.wx-pc--img-left .wx-pc-fav { top:6px !important; right:6px !important; }
@media (max-width:575.98px) {
  .wx-pc--img-left { flex-direction:column !important; }
  .wx-pc-img-left-col { width:100% !important; height:140px; border-radius:var(--wx-r-lg) var(--wx-r-lg) 0 0 !important; }
  .wx-pc--img-left .wx-pc-footer { border-radius:0 0 var(--wx-r-lg) var(--wx-r-lg) !important; }
}

/* Responsive */
@media (max-width: 479.98px)  { .wx-card-grid { grid-template-columns: 1fr !important; gap: 8px !important; } }

/* ============================================================
   FEED — Giao dịch gần đây (home page)
   ============================================================ */
.wx-feed-card {
  margin-bottom: 3px !important;
  border-radius: 6px !important;
  transition: none !important;
}
.wx-feed-card:hover { transform: none !important; box-shadow: var(--wx-sh-xs) !important; }
.wx-feed-card::after { display: none !important; }
.wx-feed-card .feature-content { padding: 4px 10px !important; }
.wx-feed-item { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 0; }
.wx-feed-item-main { font-size: .72rem; color: var(--wx-text); line-height: 1.25; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-feed-time { font-size: .65rem; color: var(--wx-text-2); white-space: nowrap; flex-shrink: 0; background: var(--wx-primary-50); color: var(--wx-primary); padding: 1px 6px; border-radius: 20px; }