/* ============================================================
   WemakeUI SaaS Storefront — Design System v6
   Complete rewrite: sidebar-left layout, light blue palette
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --wx-sidebar-w: 256px;
  --wx-header-h: 64px;
  --wx-notice-h: 36px;

  --wx-primary: var(--primary, #2563eb);
  --wx-primary-50: color-mix(in srgb, var(--wx-primary) 10%, #ffffff 90%);
  --wx-primary-100: color-mix(in srgb, var(--wx-primary) 18%, #ffffff 82%);
  --wx-primary-700: color-mix(in srgb, var(--wx-primary) 82%, #000000 18%);
  --wx-primary-800: color-mix(in srgb, var(--wx-primary) 70%, #000000 30%);
  --wx-primary-accent: var(--primary1, var(--wx-primary-700));
  --wx-ring-soft: color-mix(in srgb, var(--wx-primary) 10%, transparent);
  --wx-ring-mid: color-mix(in srgb, var(--wx-primary) 12%, transparent);
  --wx-shadow-brand: color-mix(in srgb, var(--wx-primary) 35%, transparent);
  --wx-shadow-brand-soft: color-mix(in srgb, var(--wx-primary) 8%, transparent);

  --wx-bg: #f8fafc;
  --wx-surface: #ffffff;
  --wx-border: #e2e8f0;
  --wx-border-2: #f1f5f9;

  --wx-text: #1e293b;
  --wx-text-2: #64748b;
  --wx-text-3: #94a3b8;

  /* Aliases — tương thích nhánh long (Phase 2) */
  --wx-brand-primary: var(--wx-primary);
  --wx-text2: var(--wx-text-2);
  --wx-border2: var(--wx-border-2);

  --wx-success: #16a34a;
  --wx-success-bg: #f0fdf4;
  --wx-danger: #dc2626;
  --wx-danger-bg: #fef2f2;
  --wx-warning: #d97706;
  --wx-warning-bg: #fffbeb;

  --wx-r: 8px;
  --wx-r-lg: 12px;
  --wx-r-xl: 16px;

  --wx-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --wx-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --wx-shadow-lg: 0 10px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);

  --wx-t: .2s ease;
}

/* ── Reset / Base ── */
html { scroll-behavior: smooth; }

body.wx-layout {
  background: var(--wx-bg) !important;
  padding-left: var(--wx-sidebar-w) !important;
  padding-top: var(--wx-header-h) !important;
  padding-right: 0 !important;
  margin: 0 !important;
  transition: padding-left var(--wx-t);
}
body.wx-layout.wx-has-notice {
  padding-top: calc(var(--wx-header-h) + var(--wx-notice-h)) !important;
}
body.wx-layout.wx-nav-closed { padding-left: 0 !important; }

/* ── Notice Bar ── */
.header-notice-bar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--wx-notice-h) !important;
  z-index: 1055 !important;
  background: var(--wx-primary) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  padding: 0 20px !important;
}
.header-notice-bar .container { width: 100%; }
.header-notice-bar p { margin: 0 !important; color: #fff !important; font-size: 13px !important; }

/* ── Sidebar ── */
.wx-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--wx-sidebar-w);
  height: 100vh;
  background: var(--wx-surface);
  border-right: 1px solid var(--wx-border);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--wx-t);
}
body.wx-layout.wx-has-notice .wx-sidebar { top: var(--wx-notice-h); height: calc(100vh - var(--wx-notice-h)); }
body.wx-layout.wx-nav-closed .wx-sidebar { transform: translateX(calc(-1 * var(--wx-sidebar-w))); }

/* Brand / Logo */
.wx-sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: var(--wx-header-h); min-height: var(--wx-header-h);
  border-bottom: 1px solid var(--wx-border);
  flex-shrink: 0;
}
.wx-sidebar-logo-link { display: flex; align-items: center; flex: 1; min-width: 0; text-decoration: none; }
.wx-sidebar-logo { max-height: 34px; max-width: 160px; width: auto; object-fit: contain; }
.wx-sidebar-close-btn {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: none; background: none;
  color: var(--wx-text-2); font-size: 18px;
  border-radius: var(--wx-r); cursor: pointer; margin-left: 8px;
  transition: background var(--wx-t), color var(--wx-t);
}
.wx-sidebar-close-btn:hover { background: var(--wx-primary-50); color: var(--wx-primary); }


/* Navigation */
.wx-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.wx-sidebar-nav::-webkit-scrollbar { width: 4px; }
.wx-sidebar-nav::-webkit-scrollbar-thumb { background: var(--wx-border); border-radius: 4px; }

.wx-nav-list { list-style: none; margin: 0; padding: 0; }
.wx-nav-item { margin: 3px 8px; }

.wx-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: var(--wx-r);
  color: var(--wx-text-2);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--wx-t), color var(--wx-t);
}
.wx-nav-link:hover { background: var(--wx-primary-50); color: var(--wx-primary); text-decoration: none; }
/* active = trang hiện tại → xanh đậm */
.wx-nav-link.wx-active { background: var(--wx-primary); color: #fff; }
.wx-nav-link.wx-active .wx-nav-caret { color: rgba(255,255,255,.7); }
/* wx-open do JS (user mở tay) → xanh nhạt */
.wx-nav-item.wx-open > .wx-nav-link { background: var(--wx-primary-100); color: var(--wx-primary); }
/* wx-open do PHP (trang active thật) → xanh đậm giống wx-active */
.wx-nav-item.wx-nav-active-group > .wx-nav-link { background: var(--wx-primary); color: #fff; }
.wx-nav-item.wx-nav-active-group > .wx-nav-link .wx-nav-caret { color: rgba(255,255,255,.7); }

.wx-nav-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; opacity: .75; }
.wx-nav-link:hover .wx-nav-icon,
.wx-nav-link.wx-active .wx-nav-icon,
.wx-nav-item.wx-open > .wx-nav-link .wx-nav-icon { opacity: 1; }
.wx-nav-label { flex: 1; }
.wx-nav-caret { font-size: 11px; color: var(--wx-text-3); flex-shrink: 0; transition: transform .18s ease; }

/* Sub-menu */
.wx-nav-sub { display: none; list-style: none; margin: 2px 0 4px; padding: 0 0 0 28px; }
.wx-nav-item.wx-open > .wx-nav-sub { display: block; }
.wx-nav-sub > li { margin: 1px 0; }
.wx-nav-sub > li > a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: var(--wx-r);
  color: var(--wx-text-2); font-size: 13px; text-decoration: none;
  transition: background var(--wx-t), color var(--wx-t);
}
.wx-nav-sub > li > a:hover { background: var(--wx-primary-50); color: var(--wx-primary); text-decoration: none; }
.wx-nav-sub > li > a img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; border-radius: 3px; }

/* AJAX mega-menu rendered inside sidebar sub */
.wx-nav-sub .row, #menu-categories-container .row { display: block !important; margin: 0 !important; }
.wx-nav-sub [class*="col-"], #menu-categories-container [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }
.wx-nav-sub .megamenu-wrap, #menu-categories-container .megamenu-wrap { padding: 4px 0 2px; }
.wx-nav-sub .megamenu-wrap > a, #menu-categories-container .megamenu-wrap > a { display: block !important; font-size: 10.5px !important; font-weight: 700 !important; color: var(--wx-text-3) !important; text-transform: uppercase !important; letter-spacing: .07em !important; padding: 4px 12px 2px !important; text-decoration: none !important; }
.wx-nav-sub .megamenu-list, #menu-categories-container .megamenu-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.wx-nav-sub .megamenu-list li a, #menu-categories-container .megamenu-list li a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 12px !important; color: var(--wx-text-2) !important; font-size: 13px !important; border-radius: var(--wx-r) !important; text-decoration: none !important; transition: background var(--wx-t), color var(--wx-t) !important; }
.wx-nav-sub .megamenu-list li a:hover, #menu-categories-container .megamenu-list li a:hover { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; }
.wx-nav-sub .megamenu-list li a img, #menu-categories-container .megamenu-list li a img { width: 18px !important; height: 18px !important; object-fit: contain !important; border-radius: 3px !important; }
.skeleton-menu-title { height: 10px; border-radius: 4px; background: var(--wx-border); margin: 6px 12px 4px; width: 55%; }
.skeleton-menu-item { height: 10px; border-radius: 4px; background: var(--wx-border); margin: 6px 12px; animation: wxSkeletonPulse 1.5s infinite; }
@keyframes wxSkeletonPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Sidebar footer */
.wx-sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--wx-border); flex-shrink: 0; }
.wx-sidebar-logout-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border-radius: var(--wx-r); border: none; background: transparent; color: var(--wx-danger); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--wx-t); }
.wx-sidebar-logout-btn:hover { background: var(--wx-danger-bg); }
.wx-sidebar-footer-info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wx-text-2); margin-bottom: 5px; line-height: 1.4; }
.wx-sidebar-footer-info:last-child { margin-bottom: 0; }
.wx-sidebar-footer-info img { width: 16px; height: 16px; }
/* Reset card-style on nav.php's .wx-sidebar-nav so it doesn't appear as a second panel */
.wx-sidebar > .wx-sidebar-nav { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 0 !important; padding: 8px 0 !important; }

/* ── Overlay ── */
.wx-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1038; pointer-events: none; }
.wx-overlay.active { display: block; pointer-events: auto; }

/* ── Header ── */
.wx-header {
  position: fixed;
  top: 0; left: var(--wx-sidebar-w); right: 0;
  height: var(--wx-header-h);
  background: var(--wx-surface);
  border-bottom: 1px solid var(--wx-border);
  z-index: 1030;
  display: flex; align-items: center;
  transition: left var(--wx-t), top var(--wx-t);
}
body.wx-layout.wx-has-notice .wx-header { top: var(--wx-notice-h); }
body.wx-layout.wx-nav-closed .wx-header { left: 0; }

.wx-header-inner { display: flex; align-items: center; gap: 10px; padding: 0 20px; width: 100%; }
.wx-header-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wx-header-mobile-logo { display: none; }
.wx-header-mobile-logo img { max-height: 28px; max-width: 120px; width: auto; object-fit: contain; }

/* Toggle button */
.wx-sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: none; background: transparent;
  color: var(--wx-text-2); font-size: 16px;
  border-radius: var(--wx-r); cursor: pointer; flex-shrink: 0;
  transition: background var(--wx-t), color var(--wx-t);
}
.wx-sidebar-toggle:hover { background: var(--wx-primary-50); color: var(--wx-primary); }

/* Search */
.wx-header-search { flex: 1; display: flex; align-items: center; max-width: 420px; position: relative; margin: 0 4px; }
.wx-header-search input[type="text"] { width: 100% !important; height: 38px !important; padding: 0 38px 0 14px !important; border: 1px solid var(--wx-border) !important; border-radius: 999px !important; background: var(--wx-bg) !important; font-size: 13.5px !important; color: var(--wx-text) !important; outline: none !important; box-shadow: none !important; transition: border-color var(--wx-t), box-shadow var(--wx-t) !important; }
.wx-header-search input[type="text"]:focus { border-color: var(--wx-primary) !important; box-shadow: 0 0 0 3px var(--wx-ring-soft) !important; }
.wx-header-search input[type="text"]::placeholder { color: var(--wx-text-3) !important; }
.wx-header-search button[type="submit"] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--wx-text-3); font-size: 14px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; transition: color var(--wx-t); }
.wx-header-search button[type="submit"]:hover { color: var(--wx-primary); }

/* Header right */
.wx-header-right { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
.wx-header-locale { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.wx-header-locale-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--wx-text-2); padding: 4px 8px; border-radius: var(--wx-r); }
.wx-header-locale-item i { font-size: 13px; color: var(--wx-text-3); }
.wx-header-locale-item select { border: none; background: transparent; font-size: 12px; color: var(--wx-text-2); cursor: pointer; outline: none; padding: 0; max-width: 80px; }

/* Icon buttons */
.wx-header-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--wx-text-2); font-size: 16px; border-radius: var(--wx-r); cursor: pointer; text-decoration: none; position: relative; transition: background var(--wx-t), color var(--wx-t); }
.wx-header-btn:hover { background: var(--wx-primary-50); color: var(--wx-primary); text-decoration: none; }

/* Badge */
.wx-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--wx-danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--wx-surface); }

/* User widget */
.wx-header-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--wx-r); text-decoration: none; transition: background var(--wx-t); margin-left: 4px; }
.wx-header-user:hover { background: var(--wx-primary-50); text-decoration: none; }
.wx-header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wx-border); flex-shrink: 0; }
.wx-header-username { font-size: 13px; font-weight: 600; color: var(--wx-text); white-space: nowrap; }

/* ── Recharge Modal (centered) ── */
.wx-recharge-panel { position: fixed; top: 50%; left: 50%; width: 600px; max-width: calc(100vw - 32px); max-height: 80vh; background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 16px; z-index: 1055; transform: translate(-50%, -48%) scale(0.96); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.wx-overlay.for-recharge { z-index: 1054; }
.wx-recharge-panel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.wx-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 56px; border-bottom: 1px solid var(--wx-border); flex-shrink: 0; border-radius: 16px 16px 0 0; }
.wx-panel-title { font-size: 15px; font-weight: 600; color: var(--wx-text); margin: 0; display: flex; align-items: center; gap: 8px; }
.wx-panel-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--wx-text-2); font-size: 18px; border-radius: var(--wx-r); cursor: pointer; transition: background var(--wx-t), color var(--wx-t); }
.wx-panel-close:hover { background: var(--wx-primary-50); color: var(--wx-primary); }
.wx-panel-list { list-style: none; margin: 0; padding: 12px; overflow-y: auto; flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-content: start; }
.wx-panel-list::-webkit-scrollbar { width: 4px; }
.wx-panel-list::-webkit-scrollbar-thumb { background: var(--wx-border); border-radius: 4px; }
.wx-panel-list > li { margin: 0; display: flex; }
.wx-panel-list > li > a { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px; padding-right: 14px; border-radius: 12px; background: var(--wx-surface); border: 1px solid var(--wx-border); box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03); color: var(--wx-text); text-decoration: none; font-size: 13px; line-height: 1.35; transition: background var(--wx-t), border-color var(--wx-t), box-shadow var(--wx-t), transform var(--wx-t); min-width: 0; width: 100%; min-height: 76px; overflow-wrap: break-word; word-break: normal; text-wrap: pretty; hyphens: auto; overflow: visible; }
.wx-panel-list > li > a:hover { background: var(--wx-primary-50); color: var(--wx-primary); border-color: var(--wx-primary-100); box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); transform: translateY(-1px); text-decoration: none; }
.wx-panel-list > li > a img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.wx-panel-list > li > a::after { content: "Hoạt động"; position: absolute; top: 4px; right: 4px; background: #d1fae5; color: #047857; font-size: 9px; font-weight: 600; line-height: 1.4; padding: 1px 5px; border-radius: 8px; letter-spacing: .2px; white-space: nowrap; pointer-events: none; }
@media (max-width: 767.98px) {
  .wx-recharge-panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }
  .wx-panel-header {
    height: 52px;
    padding: 0 14px;
  }
  .wx-panel-title {
    font-size: 14px;
    gap: 6px;
    min-width: 0;
  }
  .wx-panel-close {
    width: 30px;
    height: 30px;
    font-size: 16px;
    flex-shrink: 0;
  }
  .wx-panel-list {
    padding: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .wx-panel-list > li > a {
    align-items: flex-start;
    padding: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    min-height: 56px;
    border-radius: 10px;
  }
  .wx-panel-list > li > a img {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }
}
@media (max-width: 399.98px) {
  .wx-recharge-panel {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }
  .wx-panel-header {
    padding: 0 12px;
  }
  .wx-panel-list {
    padding: 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .wx-panel-list > li > a {
    padding: 9px 10px;
  }
}

/* ── Mobile Category Sidebar ── */
.category-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: min(310px, 88vw) !important; height: 100vh !important; background: var(--wx-surface) !important; border-right: 1px solid var(--wx-border) !important; z-index: 1050 !important; transform: translateX(-110%) !important; transition: transform var(--wx-t) !important; overflow-y: auto !important; display: block !important; box-shadow: var(--wx-shadow-lg) !important; }
.category-sidebar.open { transform: translateX(0) !important; }
@media (min-width: 992px) { .category-sidebar { display: none !important; } }

.category-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px !important; height: 64px !important; border-bottom: 1px solid var(--wx-border) !important; }
.category-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--wx-text) !important; margin: 0 !important; }
.category-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border: none !important; background: none !important; color: var(--wx-text-2) !important; font-size: 18px !important; border-radius: var(--wx-r) !important; cursor: pointer !important; }
.category-close:hover { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; }
.category-list { list-style: none !important; margin: 0 !important; padding: 8px !important; }
.category-item { margin-bottom: 2px !important; }
.category-link { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: var(--wx-r) !important; color: var(--wx-text-2) !important; text-decoration: none !important; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer !important; transition: background var(--wx-t), color var(--wx-t) !important; }
.category-link:hover { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; text-decoration: none !important; }
.dropdown-list { list-style: none !important; padding: 0 0 0 20px !important; margin: 0 !important; display: none; }
.dropdown-list.open { display: block; }
.dropdown-list li a { display: block !important; padding: 7px 12px !important; border-radius: var(--wx-r) !important; color: var(--wx-text-2) !important; font-size: 13px !important; text-decoration: none !important; transition: background var(--wx-t), color var(--wx-t) !important; }
.dropdown-list li a:hover { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; }
.dropdown-link { position: relative; }
.dropdown-link::after { content: '\203A'; position: absolute; right: 12px; font-size: 18px; color: var(--wx-text-3); line-height: 1; transition: transform .18s; }
.dropdown-link.open::after { transform: rotate(90deg); }

/* ── Mobile Bottom Nav ── */
.wx-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--wx-surface); border-top: 1px solid var(--wx-border); z-index: 1039; align-items: stretch; }
.wx-mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--wx-text-2); text-decoration: none; padding: 6px 0; border: none; background: none; cursor: pointer; transition: color var(--wx-t); }
.wx-mobile-nav-item i { font-size: 18px; }
.wx-mobile-nav-item.active, .wx-mobile-nav-item:hover { color: var(--wx-primary); text-decoration: none; }

/* Hide old layout elements */
.header-part { display: none !important; }
.navbar-part { display: none !important; }
.nav-sidebar { display: none !important; }
.mobile-menu { display: none !important; }
.backdrop { display: none !important; }
.cart-sidebar { display: none !important; }
/* Floating category panel — controlled by admin setting menu_category_right (1=right, 2=left, 0=off) */

/* Scroll-to-top */
.backtop { position: fixed; bottom: 24px; right: 20px; width: 38px; height: 38px; background: var(--wx-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; box-shadow: var(--wx-shadow-md); z-index: 990; transition: background var(--wx-t); }
.backtop:hover { background: var(--wx-primary-700); color: #fff; text-decoration: none; }

/* ── Page layout ── */
.wx-page-shell { padding-bottom: 32px; }
.inner-section { padding-top: 0 !important; }
section.py-5 { padding-top: 0 !important; }

/* ── Page Hero ── */
.wx-page-hero { padding: 24px 0 16px; }
.wx-page-kicker { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--wx-primary); text-transform: uppercase; letter-spacing: .07em; background: var(--wx-primary-50); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.wx-page-title { font-size: 22px; font-weight: 700; color: var(--wx-text); margin: 0 0 8px 0; line-height: 1.3; }
.wx-page-desc { font-size: 13.5px; color: var(--wx-text-2); margin: 0; max-width: 620px; line-height: 1.6; }

/* ── Cards ── */
.account-card { background: var(--wx-surface) !important; border: 1px solid var(--wx-border) !important; border-radius: var(--wx-r-lg) !important; padding: 20px !important; margin-bottom: 20px !important; box-shadow: var(--wx-shadow) !important; }
.account-title { font-size: 15px !important; font-weight: 600 !important; color: var(--wx-text) !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--wx-border) !important; }

/* ── Tables ── */
.wx-table { width: 100%; border-collapse: separate; border-spacing: 0; border: none !important; }
.wx-table thead th { background: color-mix(in srgb, var(--wx-primary) 6%, #ffffff 94%) !important; font-size: 11.5px !important; font-weight: 700 !important; color: var(--wx-text-2) !important; text-transform: uppercase !important; letter-spacing: .05em !important; padding: 12px 14px !important; border-bottom: 1px solid var(--wx-border-2) !important; white-space: nowrap; }
.wx-table tbody td { padding: 12px 14px !important; border-bottom: 1px solid var(--wx-border-2) !important; font-size: 13.5px !important; color: var(--wx-text) !important; vertical-align: middle !important; background: #fff !important; }
.wx-table tbody tr:last-child td { border-bottom: none !important; }
.wx-table tfoot td { padding: 12px 14px !important; border-top: 1px solid var(--wx-border) !important; background: color-mix(in srgb, var(--wx-primary) 5%, #ffffff 95%) !important; font-size: 13px !important; vertical-align: middle !important; }
.wx-table.table-hover tbody tr:hover td { background: var(--wx-primary-50) !important; }
.wx-table th.text-right, .wx-table td.text-right { text-align: right !important; }
.wx-table th.text-center, .wx-table td.text-center { text-align: center !important; }
.wx-table th, .wx-table td { border-left: none !important; border-right: none !important; box-shadow: none !important; }
.wx-table .badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .35rem !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; border: none !important; }
.wx-table .badge.bg-success { background: var(--wx-success-bg) !important; color: var(--wx-success) !important; }
.wx-table .badge.bg-warning { background: var(--wx-warning-bg) !important; color: var(--wx-warning) !important; }
.wx-table .badge.bg-info { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; }
.table-scroll, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Card component ── */
.wx-card { background: var(--wx-surface); border: 1px solid rgba(203,213,225,0.5); border-radius: 16px; box-shadow: 0 2px 12px rgba(15,23,42,.06); overflow: hidden; margin-bottom: 1.25rem; }
.wx-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; gap: .75rem; flex-wrap: wrap; }
.wx-card-title { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; font-weight: 600; color: var(--wx-text-2); letter-spacing: -.01em; }
.wx-card-title i { flex-shrink: 0; }
.wx-card-body { padding: 1.25rem; }
/* Stronger separator between filter area and table header */
.wx-card > .wx-card-body { border-bottom: 2px solid var(--wx-border) !important; }
.wx-card:last-child { margin-bottom: 0; }

/* ── Select ── */
.wx-select { display: block; width: 100%; height: 42px; padding: 0 32px 0 12px; font-size: 13.5px; color: var(--wx-text); background: var(--wx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--wx-border); border-radius: var(--wx-r); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color var(--wx-t); }
.wx-select:focus { border-color: var(--wx-primary); box-shadow: 0 0 0 3px var(--wx-ring-soft); }

/* ── Form label ── */
.wx-form-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--wx-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }

/* ── Button size modifier ── */
.wx-btn-sm { padding: 6px 14px !important; font-size: 12.5px !important; }

/* ── Buttons ── */
/* ── form-btn (modal submit) hover ── */
.form-btn { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease !important; cursor: pointer; }
.form-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px var(--wx-shadow-brand) !important; filter: brightness(1.08); }
.form-btn:active { transform: translateY(1px) !important; box-shadow: none !important; }

.wx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: 10px 20px !important; border-radius: var(--wx-r) !important; font-weight: 500 !important; font-size: 13.5px !important; letter-spacing: .01em !important; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .15s ease, border-color .15s ease, color .15s ease !important; border: 1px solid transparent !important; cursor: pointer; line-height: 1.4; }
.wx-btn:active { transform: translateY(1px) !important; }
.wx-btn-primary { background: var(--wx-primary) !important; border-color: var(--wx-primary) !important; color: #fff !important; }
.wx-btn-primary:hover { background: var(--wx-primary-700) !important; border-color: var(--wx-primary-700) !important; color: #fff !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px var(--wx-shadow-brand) !important; }
.wx-btn-secondary { background: var(--wx-surface) !important; border-color: var(--wx-border) !important; color: var(--wx-text) !important; }
.wx-btn-secondary:hover { background: var(--wx-bg) !important; border-color: var(--wx-primary) !important; color: var(--wx-primary) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px var(--wx-ring-mid) !important; }
.wx-btn-danger { background: var(--wx-danger) !important; border-color: var(--wx-danger) !important; color: #fff !important; }
.wx-btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(220,38,38,.35) !important; }
.wx-btn-full { width: 100% !important; display: flex !important; }

/* ── Forms ── */
.wx-form-group { margin-bottom: 1rem; }
.wx-input {
  display: block; width: 100%; height: 42px;
  padding: 0 14px;
  font-size: 13.5px; color: var(--wx-text);
  background: var(--wx-surface);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r);
  outline: none;
  transition: border-color var(--wx-t), box-shadow var(--wx-t);
  box-sizing: border-box;
}
.wx-input::placeholder { color: var(--wx-text-3); }
.wx-input:focus { border-color: var(--wx-primary); box-shadow: 0 0 0 3px var(--wx-ring-soft); }
textarea.wx-input { height: auto; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.6; }
.form-control { font-size: 13.5px !important; }
.form-control:focus { border-color: var(--wx-primary) !important; box-shadow: 0 0 0 3px var(--wx-ring-soft) !important; }
.form-select:focus { border-color: var(--wx-primary) !important; box-shadow: 0 0 0 3px var(--wx-ring-soft) !important; }
textarea.form-control { resize: vertical !important; }

/* ── Filter row ── */
.top-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.filter-show, .filter-short, .filter-action { display: flex; align-items: center; gap: 6px; }
.filter-label { font-size: 12px; color: var(--wx-text-2); font-weight: 500; margin: 0; white-space: nowrap; }
.filter-select { font-size: 13px !important; height: 34px !important; padding: 0 8px !important; border-radius: var(--wx-r) !important; border-color: var(--wx-border) !important; min-width: 70px; }
.wx-filter-grid { margin-bottom: 14px; }
.shop-widget-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--wx-border); border-radius: var(--wx-r); font-size: 13px; cursor: pointer; background: var(--wx-surface); color: var(--wx-text); transition: all var(--wx-t); }
.shop-widget-btn:hover { border-color: var(--wx-primary); color: var(--wx-primary); }
.bottom-paginate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--wx-border); margin-top: 4px; }
.page-info { font-size: 13px; color: var(--wx-text-2); margin: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; }
.pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: var(--wx-r) !important;
    font-size: 13px !important;
    color: var(--wx-text) !important;
    border: 1.5px solid var(--wx-border) !important;
    background: var(--wx-surface) !important;
    line-height: 1 !important;
    transition: all var(--wx-t) !important;
    font-weight: 500 !important;
}
.pagination .page-item .page-link i { line-height: 1 !important; }
.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active { background: var(--wx-primary) !important; border-color: var(--wx-primary) !important; color: #fff !important; font-weight: 600 !important; }
.pagination .page-item.disabled .page-link { color: var(--wx-text-3) !important; pointer-events: none !important; opacity: .5 !important; }
.pagination .page-item .page-link:hover:not(.active) { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; border-color: var(--wx-primary) !important; }

/* ── Empty state ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--wx-text-2); }
.empty-state svg { margin-bottom: 16px; opacity: .5; }
.empty-state p { font-size: 14px; margin: 0; }

/* ── Home ── */
.home-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.home-heading h3 { font-size: 16px; font-weight: 600; color: var(--wx-text); margin: 0; display: flex; align-items: center; gap: 6px; }
.home-heading h3 i { font-size: 16px; color: var(--wx-primary); }

/* ── Tool pages ── */
.wx-tool-hero { border-radius: var(--wx-r-lg) !important; overflow: hidden; background-size: cover !important; background-position: center !important; padding: 28px 32px !important; position: relative; }
.wx-tool-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,64,175,.88) 0%, rgba(59,130,246,.72) 100%); z-index: 0; }
.wx-tool-hero .welcomto { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }
.wx-tool-hero .box-intro { width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wx-tool-hero .box-intro img { width: 44px; height: 44px; object-fit: contain; }
.wx-tool-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.wx-tool-stat { border-radius: var(--wx-r) !important; font-size: 13.5px !important; }

/* Tool grid */
.all-product-main.wx-tool-grid.row,
.wx-tool-grid.row,
.wx-tool-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
.wx-tool-grid > [class*="col-"], .wx-tool-grid > div { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.box-product-main { border-radius: var(--wx-r-lg) !important; padding: 16px !important; min-height: 80px; cursor: pointer; background-size: cover !important; background-position: center !important; transition: transform var(--wx-t), box-shadow var(--wx-t); }
.box-product-main:hover { transform: translateY(-3px); box-shadow: var(--wx-shadow-md) !important; }
.box-product-main a { text-decoration: none !important; display: block; }
.box-img-product { width: 50px; height: 50px; background: rgba(255,255,255,.18); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px; }
.wx-tool-frame { border-radius: var(--wx-r-lg) !important; overflow: hidden !important; border: 1px solid var(--wx-border) !important; }
.wx-tool-frame iframe { display: block !important; border: none !important; }

/* ── Blog ── */
.blog-card { background: var(--wx-surface) !important; border: 1px solid var(--wx-border) !important; border-radius: var(--wx-r-lg) !important; overflow: hidden; margin-bottom: 20px; transition: box-shadow var(--wx-t) !important; box-shadow: var(--wx-shadow) !important; }
.blog-card:hover { box-shadow: var(--wx-shadow-md) !important; }
.blog-media, .blog-card .blog-img { display: block; height: 200px; overflow: hidden; }
.blog-card img, .blog-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .3s !important; }
.blog-card:hover img { transform: scale(1.04) !important; }
.blog-content { padding: 16px !important; }
.blog-meta { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 8px !important; padding: 0 !important; list-style: none !important; }
.blog-meta li { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; color: var(--wx-text-2) !important; }
.blog-title { font-size: 15px !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.blog-title a { color: var(--wx-text) !important; text-decoration: none !important; }
.blog-title a:hover { color: var(--wx-primary) !important; }
.blog-desc { font-size: 13px !important; color: var(--wx-text-2) !important; margin-bottom: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.blog-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 13px !important; color: var(--wx-primary) !important; font-weight: 500 !important; text-decoration: none !important; }
.blog-btn:hover { text-decoration: underline !important; }
.blog-widget { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); padding: 16px; margin-bottom: 16px; box-shadow: var(--wx-shadow); }
.blog-widget-title { font-size: 14px; font-weight: 600; color: var(--wx-text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wx-border); }
.blog-widget-form { display: flex; margin-bottom: 0; }
.blog-widget-form input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid var(--wx-border); border-right: none; border-radius: var(--wx-r) 0 0 var(--wx-r); font-size: 13px; outline: none; }
.blog-widget-form button { padding: 8px 14px; background: var(--wx-primary); border: 1px solid var(--wx-primary); color: #fff; border-radius: 0 var(--wx-r) var(--wx-r) 0; cursor: pointer; font-size: 14px; }
.blog-widget-feed { list-style: none; margin: 0; padding: 0; }
.blog-widget-feed li { display: flex; gap: 12px; margin-bottom: 12px; }
.blog-widget-feed li:last-child { margin-bottom: 0; }
.blog-widget-media { width: 60px; height: 60px; border-radius: var(--wx-r); overflow: hidden; flex-shrink: 0; display: block; }
.blog-widget-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-widget-text a { display: block; color: var(--wx-text); font-size: 13px; font-weight: 500; margin-bottom: 3px; text-decoration: none; line-height: 1.4; }
.blog-widget-text a:hover { color: var(--wx-primary); }
.blog-widget-text span { font-size: 12px; color: var(--wx-text-2); }
.blog-widget-category { list-style: none; margin: 0; padding: 0; }
.blog-widget-category li { border-bottom: 1px solid var(--wx-border-2); }
.blog-widget-category li:last-child { border-bottom: none; }
.blog-widget-category li a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13px; color: var(--wx-text); text-decoration: none; }
.blog-widget-category li a:hover { color: var(--wx-primary); }
.blog-widget-category li a span { background: var(--wx-primary-50); color: var(--wx-primary); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.wx-content-html { font-size: 14.5px; line-height: 1.75; color: var(--wx-text); }
.wx-content-html h1, .wx-content-html h2, .wx-content-html h3 { margin-top: 1.5em; }
.wx-content-html img { max-width: 100%; border-radius: var(--wx-r); }
.wx-content-html a { color: var(--wx-primary); }
.wx-content-html pre { background: var(--wx-bg); border: 1px solid var(--wx-border); border-radius: var(--wx-r); padding: 16px; overflow-x: auto; font-size: 13px; }

/* ── Account / Profile ── */
.feature-content { padding-left: 0 !important; border-left: none !important; }
.wx-sidebar-nav { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); padding: 8px; margin-bottom: 16px; box-shadow: var(--wx-shadow); }
.sidebar_profile { display: flex !important; align-items: center !important; padding: 9px 12px !important; border-radius: var(--wx-r) !important; color: var(--wx-text-2) !important; text-decoration: none !important; font-size: 13.5px !important; transition: background var(--wx-t), color var(--wx-t) !important; cursor: pointer !important; margin-bottom: 2px !important; }
.sidebar_profile:hover { background: var(--wx-primary-50) !important; color: var(--wx-primary) !important; text-decoration: none !important; }
.sidebar_profile.active { background: var(--wx-primary-100) !important; color: var(--wx-primary-700) !important; }
.sidebar_profile h6 { margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 10px !important; color: inherit !important; }
.sidebar_profile h6 i { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
.label-text { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--wx-bg); border: 1px solid var(--wx-border); margin-right: 6px; font-weight: 500; white-space: nowrap; }
.label-text.feat { background: var(--wx-primary-50); border-color: var(--wx-primary-100); color: var(--wx-primary-700); }
.label-text.order { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.details-name { font-size: 15px; font-weight: 600; color: var(--wx-text); margin-bottom: 12px; }
.details-name a { color: var(--wx-primary); text-decoration: none; }
.details-meta p { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.details-desc { font-size: 13.5px; color: var(--wx-text-2); line-height: 1.6; }

/* ── Footer ── */
footer.footer-part { background: var(--wx-surface) !important; border-top: 1px solid var(--wx-border) !important; padding: 32px 0 24px !important; }
.footer-logo img { max-height: 36px; width: auto; margin-bottom: 12px; }
.footer-desc { font-size: 13px; color: var(--wx-text-2); line-height: 1.6; margin-bottom: 0; }
.footer-title { font-size: 14px; font-weight: 600; color: var(--wx-text); margin-bottom: 14px; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--wx-text-2); }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links ul li { margin-bottom: 6px; }
.footer-links ul li a { font-size: 13px; color: var(--wx-text-2); text-decoration: none; }
.footer-links ul li a:hover { color: var(--wx-primary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid var(--wx-border); }
.footer-copytext { font-size: 12px; color: var(--wx-text-3); margin: 0; }
.footer-copytext a { color: var(--wx-primary); text-decoration: none; }
.footer-widget { margin-bottom: 24px; }

/* ── Auth Pages (login, register, forgot-password, verify) ── */
.wx-auth-layout { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; background: var(--wx-bg); padding: 2rem; }
.wx-auth-card { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 460px; box-shadow: 0 8px 32px var(--wx-shadow-brand-soft); }
.wx-auth-header { text-align: center; margin-bottom: 2rem; }
.wx-auth-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--wx-text); margin: 0 0 .375rem; }
.wx-auth-header p { color: var(--wx-text-2); margin: 0; font-size: .9rem; }
.wx-auth-body .wx-form-group { margin-bottom: 1rem; }
.wx-auth-body .wx-btn-full { margin-top: .5rem; }
.wx-auth-links { display: flex; justify-content: center; margin-top: .75rem; font-size: .875rem; color: var(--wx-text-2); }
.wx-auth-links a { color: var(--wx-primary); text-decoration: none; }
.wx-auth-links a:hover { text-decoration: underline; }
.wx-auth-footer { text-align: center; margin-top: 1.5rem; font-size: .875rem; color: var(--wx-text-2); }
.wx-auth-footer a { color: var(--wx-primary); text-decoration: none; }
.wx-auth-footer a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .wx-auth-card { padding: 1.5rem 1.25rem; border-radius: 12px; } }

/* ── Bootstrap overrides ── */
.badge.bg-primary { background: var(--wx-primary) !important; }
.badge.bg-danger { background: var(--wx-danger) !important; }
.badge.bg-success { background: var(--wx-success) !important; }
.badge.bg-warning { background: var(--wx-warning) !important; }
.modal-content { border-radius: var(--wx-r-xl) !important; border: none !important; box-shadow: var(--wx-shadow-lg) !important; overflow: hidden !important; }
.modal-close { top: 12px !important; right: 14px !important; background: #fee2e2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.modal-close:hover { background: #dc2626 !important; color: #fff !important; }
.product-disable::before { display: none !important; }
.fs-sm { font-size: 13px !important; }
.text-right { text-align: right !important; }

/* ── Site container (replaces Bootstrap .container sitewide) ── */
.wx-site-container { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; padding-bottom: 2rem; }
@media (min-width: 768px)  { .wx-site-container { padding-left: 2rem;  padding-right: 2rem;  } }
@media (min-width: 1400px) { .wx-site-container { padding-left: 3rem;  padding-right: 3rem;  } }

/* ── Account pages shared layout ── */
.wx-account-layout  { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem 0; }
.wx-account-sidebar { width: 260px; flex-shrink: 0; }
.wx-account-main    { flex: 1; min-width: 0; }
@media (max-width: 991px) { .wx-account-layout { flex-direction: column; } .wx-account-sidebar { width: 100%; } }

/* ── Account page-specific layouts ── */
.wx-profile-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.wx-profile-fields .wx-form-group { margin-bottom: 0; }
@media (max-width:991px) { .wx-profile-fields { grid-template-columns: repeat(2,1fr); } }
@media (max-width:576px)  { .wx-profile-fields { grid-template-columns: 1fr; } }
.wx-pw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width:991px) { .wx-pw-grid { grid-template-columns: 1fr; } }
.wx-security-row { display: flex; align-items: center; justify-content: space-between; padding: .875rem 0; border-bottom: 1px solid var(--wx-border); }
.wx-security-row:last-of-type { border-bottom: none; }
.wx-security-label { font-size: .9rem; color: var(--wx-text); flex: 1; padding-right: 1rem; }
.wx-vat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wx-vat-grid-full { grid-column: 1 / -1; }
@media (max-width:576px) { .wx-vat-grid-2 { grid-template-columns: 1fr; } }

/* ── Account horizontal tabs ── */
.wx-acct-tabs { display: flex; align-items: center; gap: 6px; padding: 10px; background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); box-shadow: var(--wx-shadow); margin: 1.5rem 0 1.25rem; flex-wrap: wrap; }
.wx-acct-tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 20px; border-radius: var(--wx-r); color: var(--wx-text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background var(--wx-t), color var(--wx-t); white-space: nowrap; border: none; background: transparent; cursor: pointer; line-height: 1; }
.wx-acct-tab:hover { background: var(--wx-primary-50); color: var(--wx-primary); text-decoration: none; }
.wx-acct-tab.active { background: var(--wx-primary); color: #fff !important; }
.wx-acct-tab i { font-size: 12px; }
.wx-acct-tab-sep { flex: 1; min-width: 4px; }
.wx-acct-tab.logout { color: var(--wx-danger) !important; }
.wx-acct-tab.logout:hover { background: var(--wx-danger-bg); }
@media (max-width: 575px) { .wx-acct-tab span { display: none; } .wx-acct-tab { padding: 8px 10px; } }

/* ── Profile sidebar nav ── */
.sidebar_profile { display: flex; align-items: center; padding: .625rem .875rem; border-radius: 8px; color: var(--wx-text-2); text-decoration: none; margin-bottom: .25rem; transition: background var(--wx-t), color var(--wx-t); }
.sidebar_profile:hover { background: var(--wx-border); color: var(--wx-primary); text-decoration: none; }
.sidebar_profile.active, .sidebar_profile.active_s { background: var(--wx-primary-50); color: var(--wx-primary); font-weight: 500; }
.sidebar_profile h6 { margin: 0; font-size: .875rem; font-weight: inherit; display: flex; align-items: center; gap: .5rem; }
.sidebar_profile i  { width: 16px; text-align: center; }

/* ── Account tables ── */
.wx-align-end { text-align: right; }
.wx-money-positive { color: #16a34a; }
.wx-money-negative { color: #dc2626; }
.wx-money-current  { color: var(--wx-primary); }

/* ── Orders & Products shared ── */
.wx-order-filter-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .75rem; }
@media (max-width:991px) { .wx-order-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:575px) { .wx-order-filter-grid { grid-template-columns: 1fr; } }
.wx-amount-pill, .wx-pay-pill { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.wx-amount-pill { background: var(--wx-primary-50); color: var(--wx-primary); }
.wx-pay-pill    { background: var(--wx-danger-bg);  color: var(--wx-danger);  }
.wx-order-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--wx-border); }
.wx-action-group { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
tr.wx-row-deleted td { background: #fef2f2 !important; color: var(--wx-text-2); }
.wx-order-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.wx-order-summary .details-name { font-size: 1.1rem; margin-bottom: .75rem; }
.wx-order-summary .details-meta p { display: flex; gap: .75rem; flex-wrap: wrap; }
.wx-order-toolbar .wx-input, .wx-order-toolbar .wx-select { min-height: 42px; }
.wx-order-table textarea { min-height: 42px; resize: vertical; }
.wx-table-note { min-height: 20px; resize: vertical; }
.wx-table-compact th, .wx-table-compact td { vertical-align: middle; }
.wx-favorite-table .feature-name { margin: 0; font-size: .95rem; }
.wx-favorite-table .feature-name a { color: var(--wx-text); text-decoration: none; font-weight: 600; }
.wx-favorite-table .feature-name a:hover { color: var(--wx-primary); }
.wx-favorites-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Filter bar ── */
.wx-table-footer    { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-top: 1px solid var(--wx-border); flex-wrap: wrap; gap: .5rem; }
.wx-table-info      { margin: 0; color: var(--wx-text-2); font-size: .875rem; }
.wx-filter-shell    { padding: 1.25rem; }
.wx-filter-grid     { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.wx-filter-actions  { display: flex; gap: .75rem; flex-wrap: wrap; }
.wx-filter-bar      { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wx-filter-bar .wx-input { flex: 1 1 120px; min-width: 120px; }
.wx-filter-meta     { display: flex; align-items: center; gap: 1.25rem; padding-top: .625rem; font-size: .8125rem; color: var(--wx-text-2); flex-wrap: wrap; }
.wx-filter-meta label { display: flex; align-items: center; gap: .375rem; }
.wx-filter-meta select { height: 32px; padding: 0 .5rem; border: 1px solid var(--wx-border); border-radius: var(--wx-r); background: var(--wx-surface); font-size: .8125rem; color: var(--wx-text); cursor: pointer; }
.wx-table-wrap      { overflow-x: auto; }
.wx-card > .wx-table-wrap { margin: 0; border: none; border-radius: 0; background: transparent; overflow-x: auto; }
.wx-card > .wx-table-wrap .wx-table { min-width: 100%; }
.wx-card > .wx-table-wrap .wx-table tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.wx-card > .wx-table-wrap .wx-table tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }
.wx-card > .wx-table-wrap + .wx-empty-state { margin: 0 1rem 1rem; border: 1px dashed var(--wx-border); border-radius: 14px; background: #fff; }
.wx-table-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:.95rem 1.25rem 1.1rem; font-size:.82rem; color:var(--wx-text-2); }
.wx-card .wx-table-wrap + .wx-table-foot { border-top: 1px solid var(--wx-border); }
/* Neutralize Bootstrap .table heavy borders when wx-table is applied */
.table > :not(caption) > * > * { box-shadow: none !important; }
.wx-table.table > :not(caption) > * { border-top-width: 0 !important; border-color: transparent !important; }
.wx-table.table > :not(caption) > * > * { border-bottom: 1px solid var(--wx-border-2) !important; box-shadow: none !important; }
.wx-table.table thead > * > * { background: color-mix(in srgb, var(--primary,#2563eb) 6%, #ffffff 94%) !important; border-bottom: 1px solid var(--wx-border) !important; font-size: 11.5px !important; font-weight: 700 !important; color: var(--wx-text-2,#64748b) !important; text-transform: uppercase !important; letter-spacing: .05em !important; padding: 12px 14px !important; white-space: nowrap; }
.wx-table.table tbody tr:last-child > * { border-bottom: none !important; }
.wx-table.table tbody tr:hover > * { background: color-mix(in srgb, var(--primary,#2563eb) 3%, #ffffff 97%) !important; }
.wx-account-table tbody td { font-size: 13px !important; border-bottom: 1px solid var(--wx-border-2) !important; }
.wx-account-table tbody tr:hover td { background: color-mix(in srgb, var(--wx-primary) 3%, #ffffff 97%) !important; }
.wx-account-table .wx-row-time { font-size: .82rem; color: var(--wx-text-2); white-space: nowrap; }
.wx-account-table .wx-row-note { display: inline-flex; align-items: center; gap: .55rem; color: var(--wx-text); }
.wx-account-table .wx-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wx-account-table .wx-row-muted { color: var(--wx-text-2); font-size: .82rem; }
.wx-account-table .wx-col-tight { width: 1%; white-space: nowrap; }
.wx-table-foot      { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem; border-top: 1px solid var(--wx-border); flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--wx-text-2); }
.wx-empty-state     { text-align: center; padding: 3rem 1rem; color: var(--wx-text-2); }
.wx-empty-state i   { font-size: 2.5rem; opacity: .25; margin-bottom: .75rem; display: block; }
.wx-empty-state p   { margin: 0; font-size: .9rem; }
@media (max-width: 991px) { .wx-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px) { .wx-filter-grid { grid-template-columns: 1fr; } }

/* Balance chip in header */
.wx-header-balance { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--wx-primary-50); border: 1px solid var(--wx-primary); border-radius: 999px; color: var(--wx-primary); font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; margin-right: 4px; transition: background var(--wx-t), color var(--wx-t); }
.wx-header-balance:hover { background: var(--wx-primary); color: #fff; text-decoration: none; }
.wx-header-balance i { font-size: 12px; }

/* ── Responsive ── */
@media (max-width: 1199.98px) { .wx-header-search { max-width: 300px; } .wx-header-username { display: none; } }
@media (max-width: 575.98px) { .wx-header-balance { display: none; } }

@media (max-width: 991.98px) {
  body.wx-layout { padding-left: 0 !important; padding-bottom: 56px !important; }
  .wx-sidebar { transform: translateX(calc(-1 * var(--wx-sidebar-w))); z-index: 1060 !important; pointer-events: auto !important; }
  .wx-sidebar.open { transform: translateX(0); }
  body.wx-layout.wx-sidebar-open #wxOverlay { z-index: 1049 !important; }
  body.wx-layout.wx-sidebar-open .wx-sidebar,
  body.wx-layout.wx-sidebar-open .wx-sidebar * { pointer-events: auto !important; }
  .wx-sidebar-close-btn { display: inline-flex; }
  .wx-header { left: 0 !important; }
  .wx-header-mobile-logo { display: block; }
  .wx-mobile-nav { display: none; }
  .wx-header-locale { display: none; }
  .wx-tool-grid.row, .wx-tool-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767.98px) {
  body.wx-layout .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .wx-page-shell {
    padding-bottom: 24px;
  }
  .wx-page-hero {
    padding: 18px 0 14px;
  }
  .wx-header-search { max-width: 180px; }
  .wx-page-title { font-size: 19px; }
  .account-card { padding: 14px !important; }
  .wx-card-body,
  .wx-tab-frame {
    padding: 14px !important;
  }
}
@media (max-width: 575.98px) { .wx-header-search { max-width: 130px; } .wx-page-title { font-size: 17px; } .top-filter { gap: 6px; } }

/* Export modal (product-order) */
.export-radio-box.active-radio { border-color: #667eea !important; background: rgba(102,126,234,.06) !important; }
#exportAccountColumnsList .export-col-handle:active { cursor: grabbing; }
#exportAccountColumnsList .list-group-item { user-select: none; transition: transform .2s, box-shadow .2s, border-color .2s; background: #fff; }
#exportAccountColumnsList .list-group-item:hover { border-color: rgba(102,126,234,.5) !important; background-color: rgba(102,126,234,.03) !important; }
#exportAccountColumnsList .list-group-item.sortable-ghost { opacity: .5; background-color: rgba(102,126,234,.1) !important; border-color: #667eea !important; }

/* Product detail page */
/* Gallery card: chia 1|9 — thumb col bên trái, main image bên phải */
.wx-product-gallery-card { padding: 1rem; overflow: hidden; height: 420px; display: grid; grid-template-columns: 10% 1fr; gap: .75rem; align-items: stretch; box-sizing: border-box; }
.wx-product-gallery-card .details-label-group { grid-column: 1 / -1; }
/* Cột 1: thumbnail strip dọc (~10%) */
.wx-gallery-thumbs { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; max-height: 100%; padding-right: 2px; min-height: 0; scrollbar-width: thin; }
.wx-gallery-thumbs::-webkit-scrollbar { width: 4px; }
.wx-gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 3px; }
.wx-gallery-thumb { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: contain; background: #fff; border-radius: var(--wx-r); border: 2px solid var(--wx-border); cursor: pointer; transition: border-color var(--wx-t), transform .12s ease; flex-shrink: 0; }
.wx-gallery-thumb:hover { transform: scale(1.04); }
.wx-gallery-thumb.active { border-color: var(--wx-primary); box-shadow: 0 0 0 1px var(--wx-primary) inset; }
/* Cột 2: ảnh chính (~90%) */
.wx-gallery-main { position: relative; min-height: 0; min-width: 0; border-radius: var(--wx-r-lg); overflow: hidden; background: var(--wx-bg); display: flex; align-items: center; justify-content: center; }
.wx-gallery-img { width: 100%; height: 100%; display: block; border-radius: var(--wx-r-lg); object-fit: contain; transition: opacity .15s ease; }
.wx-gallery-img--hidden { display: none; }

/* Nút phóng to góc dưới-phải ảnh chính */
.wx-gallery-zoom { position: absolute; bottom: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(15,23,42,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .12s ease; z-index: 4; }
.wx-gallery-zoom:hover { background: rgba(15,23,42,.85); transform: scale(1.06); }
.wx-gallery-zoom i { font-size: 15px; }

/* Lightbox fullscreen — trang chi tiết */
.wx-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.88); padding: 24px; cursor: zoom-out; }
.wx-lightbox.is-open { display: flex; animation: wxFadeIn .15s ease; }
.wx-lightbox img { max-width: calc(100vw - 60px); max-height: calc(100vh - 60px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.wx-lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #0f172a; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: background .15s ease, transform .12s ease; z-index: 2; }
.wx-lightbox-close:hover { background: #fff; transform: scale(1.05); }
@keyframes wxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.wx-product-summary { height: 100%; display: flex; flex-direction: column; }
.wx-product-summary .wx-card-body { flex: 1; display: flex; flex-direction: column; }
.wx-product-summary .wx-product-share { margin-top: auto; }
.wx-product-summary .details-name { display: flex; align-items: center; gap: .75rem; font-size: 1.5rem; font-weight: 700; color: var(--wx-text); margin-bottom: 1rem; }
.wx-product-summary .details-name img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.wx-product-summary .details-meta p { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.wx-product-summary .details-price { margin: 1rem 0; color: var(--wx-danger); }
.wx-product-summary .details-price del { color: var(--wx-text-2); margin-right: .5rem; }
.wx-product-summary .details-desc { color: var(--wx-text-2); line-height: 1.8; }
.wx-product-share { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--wx-border); }
.wx-product-share .details-share-list { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.wx-product-share .details-share-list a { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--wx-border); border-radius: 999px; color: var(--wx-text-2); background: var(--wx-bg); transition: all .2s ease; }
.wx-product-share .details-share-list a:hover { background: var(--wx-primary); border-color: var(--wx-primary); color: #fff; }
.wx-product-share .details-share-list a i { font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin: 0; padding: 0; }
.view-list-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid #e2e8f0; }
.view-list-group .view-list-title { font-size: .875rem; color: #64748b; white-space: nowrap; }
.view-share-list { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.view-share-list a { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid #e2e8f0; border-radius: 999px; color: #64748b; background: #fff; transition: all .2s ease; text-decoration: none; }
.view-share-list a:hover { background: var(--wx-primary-700); border-color: var(--wx-primary-700); color: #fff; }
.view-share-list a i { font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin: 0; padding: 0; }
.wx-product-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; align-items: stretch; }
.wx-product-grid--wide { grid-template-columns: 1fr; }
.wx-product-grid--wide .wx-product-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,380px); gap: 2rem; align-items: start; }
.wx-product-grid--wide .wx-product-summary .details-name { grid-column: 1 / -1; }
.wx-product-grid--wide .wx-product-summary .wx-product-share { grid-column: 1 / -1; }
.wx-product-actions { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,7fr); gap: .75rem; }
.wx-product-actions .wx-btn { width: 100%; justify-content: center; }
.wx-tab-shell { margin-bottom: 1rem; }
.wx-tab-list { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; }
.wx-tab-list .tab-link { display: block; padding: .75rem 1rem; border: 1px solid var(--wx-border); border-radius: 999px; color: var(--wx-text-2); background: var(--wx-surface); font-weight: 600; text-decoration: none; }
.wx-tab-list .tab-link.active,
.wx-tab-list .tab-link:hover { background: var(--wx-primary-50); border-color: var(--wx-primary); color: var(--wx-primary); }
.wx-tab-panel { display: none; }
.wx-tab-panel.active { display: block; }
.wx-tab-frame { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); padding: 1.5rem; }
.wx-tab-frame textarea { border-radius: var(--wx-r); min-height: 180px; }
.wx-content-stack { display: grid; gap: 1rem; }
.wx-form-row { display: grid; grid-template-columns: minmax(180px,220px) minmax(0,1fr); gap: 1rem; align-items: start; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--wx-border); }
.wx-form-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.wx-form-label-block { font-weight: 700; color: var(--wx-text); }
.wx-input-inline-group { display: flex; align-items: stretch; gap: .75rem; flex-wrap: wrap; }
.wx-input-prefix { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 0 .875rem; border: 1px solid var(--wx-border); border-radius: var(--wx-r); background: var(--wx-surface-alt); font-weight: 700; color: var(--wx-text-2); }
.wx-input-inline-group .wx-input { flex: 1; min-width: 220px; }
.wx-copy-strong { display: inline-flex; align-items: center; gap: .5rem; color: var(--wx-primary); font-weight: 700; cursor: pointer; word-break: break-all; }
.wx-form-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.wx-affiliate-value { color: var(--wx-primary); font-weight: 700; }
@media (max-width: 991px) {
  /* Gallery + Info card dính liền thành 1 khối khi xếp dọc */
  .wx-product-grid { grid-template-columns: 1fr; gap: 0; }
  .wx-product-actions { grid-template-columns: 1fr; }
  .wx-form-row { grid-template-columns: 1fr; }
  .wx-input-inline-group .wx-input { min-width: 0; }
  .wx-product-gallery-card { grid-template-columns: 72px 1fr; height: 340px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: none; }
  .wx-product-grid > :last-child .wx-card { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 4px 12px rgba(15,23,42,.06); }
  .wx-product-grid > :last-child .wx-product-summary { margin-top: 0; }
}
@media (max-width: 575px) {
  .wx-product-gallery-card { grid-template-columns: 60px 1fr; height: 280px; gap: .5rem; padding: .75rem; }
}

/* Cell alignment helpers */
.wx-cell-center { text-align: center !important; vertical-align: middle !important; }
.wx-cell-end    { text-align: center !important; vertical-align: middle !important; }
.wx-action-group { flex-wrap: nowrap; }
.wx-table-note  { width: 160px; max-width: 200px; }

/* ── Long branch additions ── */
.wx-card-footer { padding: 12px 20px; border-top: 1px solid var(--wx-border); background: var(--wx-bg); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.wx-stat-card { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); padding: 1.125rem 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: box-shadow var(--wx-t); }
.wx-stat-card:hover { box-shadow: var(--wx-shadow-md); }
.wx-stat-value { font-size: 1.375rem; font-weight: 700; color: var(--wx-text); line-height: 1.2; margin-bottom: .25rem; }
.wx-stat-label { font-size: 12px; color: var(--wx-text-2); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.wx-stat-icon { width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.wx-wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 767.98px) { .wx-wallet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479.98px) { .wx-wallet-grid { grid-template-columns: 1fr; } }
.wx-amount-positive { color: #16a34a !important; font-weight: 600 !important; }
.wx-amount-negative { color: #dc2626 !important; font-weight: 600 !important; }
.wx-amount-balance  { color: var(--wx-primary) !important; font-weight: 600 !important; }
.wx-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.wx-status-success { background: var(--wx-success-bg); color: var(--wx-success); }
.wx-status-danger  { background: var(--wx-danger-bg);  color: var(--wx-danger);  }
.wx-status-warning { background: var(--wx-warning-bg); color: var(--wx-warning); }
.wx-status-info    { background: var(--wx-primary-50); color: var(--wx-primary); }
.wx-status-neutral { background: var(--wx-border-2);   color: var(--wx-text-2);  }
.wx-alert { padding: 12px 16px; border-radius: var(--wx-r); font-size: 13.5px; line-height: 1.55; margin-bottom: 1rem; border-left: 4px solid; }
.wx-alert-success { background: var(--wx-success-bg); color: #15803d; border-color: var(--wx-success); }
.wx-alert-danger  { background: var(--wx-danger-bg);  color: #b91c1c; border-color: var(--wx-danger);  }
.wx-alert-warning { background: var(--wx-warning-bg); color: #92400e; border-color: var(--wx-warning); }
.wx-alert-info    { background: var(--wx-primary-50); color: var(--wx-primary-800); border-color: var(--wx-primary); }
.wx-sidebar-card { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-r-lg); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 1rem; }
.wx-sidebar-card-top { background: linear-gradient(135deg, var(--wx-primary) 0%, var(--wx-primary-700) 100%); padding: 1.25rem; text-align: center; }
.wx-sidebar-card-avatar { width: 64px; height: 64px; border-radius: 16px; border: 3px solid rgba(255,255,255,.4); object-fit: cover; margin: 0 auto .625rem; display: block; }
.wx-sidebar-card-name { color: #fff; font-size: 14px; font-weight: 600; margin: 0 0 .25rem; }
.wx-sidebar-card-balance { color: rgba(255,255,255,.85); font-size: 13px; }
.wx-sidebar-card-nav { padding: .5rem; }
.wx-sidebar-card-nav a { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: 8px; color: var(--wx-text-2); text-decoration: none; font-size: 13.5px; transition: background var(--wx-t), color var(--wx-t); margin-bottom: 2px; }
.wx-sidebar-card-nav a:hover { background: var(--wx-primary-50); color: var(--wx-primary); }
.wx-sidebar-card-nav a.active { background: var(--wx-primary-100); color: var(--wx-primary); font-weight: 500; }
.wx-sidebar-card-nav a i { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px; }
.wx-recharge-layout { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1rem 0; }
.wx-recharge-sidebar { width: 220px; flex-shrink: 0; }
.wx-recharge-main { flex: 1; min-width: 0; }
.wx-recharge-methods a { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 8px; color: var(--wx-text-2); text-decoration: none; font-size: 13.5px; transition: background var(--wx-t), color var(--wx-t); margin-bottom: 2px; }
.wx-recharge-methods a:hover { background: var(--wx-primary-50); color: var(--wx-primary); }
.wx-recharge-methods a.active { background: var(--wx-primary-100); color: var(--wx-primary); font-weight: 500; }
@media (max-width: 991.98px) { .wx-recharge-layout { flex-direction: column; } .wx-recharge-sidebar { width: 100%; } }
.wx-btn-lg { padding: 13px 28px !important; font-size: 15px !important; }
.wx-card > .wx-sidebar-nav, .wx-account-sidebar .wx-card .wx-sidebar-nav { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; margin-bottom: 0 !important; padding: 0 !important; }
.wx-wallet-primary { text-align: center; padding: 1.25rem 1rem; background: linear-gradient(135deg, var(--wx-primary) 0%, var(--wx-primary-accent) 100%); border-radius: var(--wx-r-lg); margin-bottom: 1rem; color: #fff; }
.wx-wallet-primary p { margin: 0; font-size: .875rem; opacity: .85; }
.wx-wallet-primary h3 { margin: .25rem 0 0; font-size: 1.75rem; font-weight: 700; }
.aff-balance-box { background: var(--wx-primary-50); border-radius: var(--wx-r); padding: 14px; margin-bottom: 16px; }
.aff-balance-label { font-size: 13px; color: var(--wx-text-2); margin-bottom: 4px; }
.aff-balance-value { font-size: 22px; font-weight: 700; color: var(--wx-primary); }
.gap-2 { gap: .5rem !important; }
.fw-600 { font-weight: 600 !important; }

/* ── Account stat cards (profile + transactions) ── */
.wx-balance-card { background: linear-gradient(135deg, var(--wx-primary) 0%, var(--wx-primary-accent) 100%); border-radius: 16px; padding: 1.5rem 1.75rem; color: #fff; position: relative; overflow: hidden; margin-bottom: 1rem; }
.wx-balance-card::before { content: ""; position: absolute; right: -20px; top: -20px; width: 160px; height: 160px; background: rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.wx-balance-card::after  { content: ""; position: absolute; right: 20px; bottom: -60px; width: 200px; height: 200px; background: rgba(255,255,255,.05); border-radius: 50%; pointer-events: none; }
.wx-balance-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.wx-balance-icon { width: 48px; height: 48px; background: rgba(255,255,255,.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.wx-balance-label { font-size: .78rem; opacity: .8; margin-bottom: .3rem; letter-spacing: .3px; text-transform: uppercase; }
.wx-balance-amount { font-size: 2rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.wx-balance-actions { display: flex; gap: .625rem; position: relative; z-index: 1; }
.wx-balance-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 10px; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); transition: background .18s, border-color .18s; }
.wx-balance-actions a:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.7); color: #fff; }

.wx-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; margin-bottom: 1.25rem; }
.wx-stat-card { background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 14px; padding: 1rem 1.125rem; display: flex; align-items: center; gap: .875rem; }
.wx-stat-icon { width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.wx-stat-icon.green { background: #dcfce7; color: #16a34a; }
.wx-stat-icon.red   { background: #fee2e2; color: #dc2626; }
.wx-stat-icon.blue  { background: var(--wx-primary-100); color: var(--wx-primary); }
.wx-stat-label { font-size: .72rem; color: var(--wx-text-2); margin-bottom: .2rem; font-weight: 500; }
.wx-stat-value { font-size: 1rem; font-weight: 700; color: var(--wx-text); line-height: 1.2; }

/* Profile info rows */
.wx-info-row { display: flex; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--wx-border-2); }
.wx-info-row:last-child { border-bottom: none; }
.wx-info-label { width: 160px; flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--wx-text-2); }
.wx-info-value { flex: 1; font-size: .9rem; color: var(--wx-text); }
.wx-info-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--wx-primary-50); color: var(--wx-primary); border-radius: 20px; font-size: .75rem; font-weight: 600; }

@media (max-width: 576px) {
  .wx-stat-grid { grid-template-columns: 1fr; }
  .wx-balance-top { flex-direction: column; gap: .75rem; }
  .wx-info-label { width: 110px; }
}

/* ── VAT form grid ── */
.wx-vat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wx-vat-grid-full { grid-column: 1 / -1; }
@media (max-width: 576px) { .wx-vat-grid-2 { grid-template-columns: 1fr; } }

/* ── Segmented tab (wx-tabs / wx-tab) ── */
.wx-tabs { display: inline-flex; gap: .375rem; background: var(--wx-sunken); border: 1px solid var(--wx-border); border-radius: 12px; padding: .3rem; margin-bottom: 1.5rem; }
.wx-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.125rem; border-radius: 9px; border: none; background: transparent; color: var(--wx-text-2); font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; white-space: nowrap; }
.wx-tab:hover:not(.active) { background: var(--wx-surface); color: var(--wx-text); }
.wx-tab.active { background: var(--wx-surface); color: var(--wx-primary); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.wx-tab i { font-size: .85rem; }