/* =====================================================================
   buff-mxh.css  —  v6 "PRISM VIBRANT" (Giao diện SÁNG, nhiều màu)
   Phiên bản sáng/năng động — phù hợp site client nền trắng (datum/AdminLTE).
   Bảng màu chủ đạo theo yêu cầu user:
     - Trắng (white)         : nền chính, card
     - Xanh lá (green)       : thành tiền, nút đặt đơn, "live", tin cậy
     - Vàng  (yellow/amber)  : cảnh báo, số dư, hot tag, highlight
     - Đỏ    (red)           : cảnh báo giới hạn, nút huỷ, lỗi
     - Xanh dương (cyan/blue): link, icon, platform TikTok/Telegram, info
   Phong cách: card mềm bo góc lớn, gradient nhẹ, viền màu sắc, shadow pastel,
   chip nhiều màu, hover lift. Không xung đột dark/light site (tự nền trắng riêng).
   Phục vụ chung cho buff-mxh.php VÀ buff-mxh-history.php.
   Giữ nguyên toàn bộ class names của v5 để PHP không cần đổi cấu trúc HTML.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --bm-white:     #ffffff;
  --bm-paper:     #f7f9fc;
  --bm-paper-2:   #eef3f9;
  --bm-card:      #ffffff;
  --bm-line:      #e3e9f1;
  --bm-line-soft: #eef2f7;
  --bm-ink:       #16213a;
  --bm-ink-2:     #3b4a66;
  --bm-mute:      #8190a8;
  --bm-mute-2:    #aab6c8;

  --bm-green:     #18b26a;
  --bm-green-d:   #0f9457;
  --bm-green-soft:#e3f9ee;
  --bm-green-glow:rgba(24,178,106,.35);

  --bm-yellow:    #f6b50a;
  --bm-yellow-d:  #d99a00;
  --bm-yellow-soft:#fff6dc;
  --bm-yellow-glow:rgba(246,181,10,.35);

  --bm-red:       #f2385a;
  --bm-red-d:     #d61f44;
  --bm-red-soft:  #fde6ec;
  --bm-red-glow:  rgba(242,56,90,.32);

  --bm-cyan:      #19a7e0;
  --bm-cyan-d:    #1289b5;
  --bm-cyan-soft: #e0f4fc;
  --bm-cyan-glow: rgba(25,167,224,.30);

  --bm-blue:      #4a6cf7;
  --bm-purple:    #8b5cf6;

  --bm-radius:    16px;
  --bm-radius-sm: 10px;
  --bm-shadow:    0 14px 34px -18px rgba(22,33,58,.22);
  --bm-shadow-lg: 0 24px 60px -22px rgba(22,33,58,.30);
  --bm-sans:      'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --bm-mono:      'JetBrains Mono','Fira Code',ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- WRAP & NỀN ---------- */
.bm-wrap{
  position: relative;
  padding: 0 0 48px;
  margin: 0;
  font-family: var(--bm-sans);
  background:
    radial-gradient(1200px 420px at 12% -8%, var(--bm-cyan-soft) 0%, transparent 55%),
    radial-gradient(1000px 380px at 92% 4%, var(--bm-yellow-soft) 0%, transparent 52%),
    radial-gradient(900px 420px at 78% 96%, var(--bm-green-soft) 0%, transparent 55%),
    linear-gradient(180deg,#f7f9fc 0%, #f3f6fb 100%);
  color: var(--bm-ink);
  overflow: hidden;
  border-radius: 18px;
}
.bm-wrap *{ box-sizing: border-box; }
.bm-wrap > .row{ margin: 0 -10px; }
.bm-wrap .col-lg-8, .bm-wrap .col-lg-4{ padding: 0 10px; }

/* ---------- HERO ---------- */
.bm-hero{
  margin: 18px 14px 22px;
  padding: 26px 28px 22px;
  border-radius: var(--bm-radius);
  background:
    linear-gradient(135deg, #ffffff 0%, #f6faff 60%, #eef6ff 100%);
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow-lg);
  position: relative;
  overflow: hidden;
}
.bm-hero::before{
  content:''; position:absolute; right:-40px; top:-40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--bm-cyan-glow), transparent 70%);
  pointer-events:none;
}
.bm-hero::after{
  content:''; position:absolute; left:-30px; bottom:-50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--bm-yellow-glow), transparent 70%);
  pointer-events:none;
}
.bm-hero > *{ position: relative; z-index: 1; }
.bm-hero-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.bm-hero h2{
  font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--bm-ink);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.bm-hero h2 i{ color: var(--bm-yellow-d); }
.bm-hero p{
  margin: 0; max-width: 560px; font-size: 14px; line-height: 1.6;
  color: var(--bm-ink-2);
}
.bm-badge-live{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bm-green-soft); color: var(--bm-green-d);
  border: 1px solid rgba(24,178,106,.3);
}
.bm-badge-live i{ font-size: 7px; color: var(--bm-green); animation: bmPulse 1.4s infinite; }
@keyframes bmPulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

.bm-balance{
  min-width: 220px;
  padding: 18px 20px; border-radius: 14px;
  background: linear-gradient(135deg, var(--bm-yellow) 0%, var(--bm-yellow-d) 100%);
  color: #fff; box-shadow: 0 16px 34px -14px var(--bm-yellow-glow);
  position: relative; overflow: hidden;
}
.bm-balance::after{
  content:''; position:absolute; right:-18px; top:-18px; width:80px; height:80px;
  border-radius:50%; background: rgba(255,255,255,.18);
}
.bm-balance .lbl{ font-size: 12px; font-weight: 600; opacity: .92; letter-spacing: .3px; }
.bm-balance .val{ font-size: 28px; font-weight: 800; line-height: 1.15; margin: 4px 0 10px; }
.bm-balance .val small{ font-size: 14px; font-weight: 600; opacity: .85; }
.bm-recharge{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-decoration:none;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  transition: all .2s ease;
}
.bm-recharge:hover{ background: rgba(255,255,255,.36); transform: translateY(-1px); color:#fff; }

.bm-hero-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 22px;
}
.bm-hero-stat{
  display:flex; align-items:center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--bm-line);
  box-shadow: 0 8px 22px -16px rgba(22,33,58,.25);
}
.bm-hero-stat > i{
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center; font-size: 17px;
}
.bm-hero-stat:nth-child(1) > i{ background: var(--bm-cyan-soft); color: var(--bm-cyan-d); }
.bm-hero-stat:nth-child(2) > i{ background: var(--bm-green-soft); color: var(--bm-green-d); }
.bm-hero-stat:nth-child(3) > i{ background: var(--bm-yellow-soft); color: var(--bm-yellow-d); }
.bm-hero-stat:nth-child(4) > i{ background: var(--bm-red-soft); color: var(--bm-red-d); }
.bm-hero-stat .k{ font-size: 20px; font-weight: 800; color: var(--bm-ink); line-height: 1.1; }
.bm-hero-stat .v{ font-size: 11.5px; color: var(--bm-mute); margin-top: 2px; }

/* ---------- TOOLBAR ---------- */
.bm-toolbar{
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
  margin: 0 14px 16px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--bm-line); border-radius: 14px;
  box-shadow: 0 8px 22px -18px rgba(22,33,58,.25);
}
.bm-search{
  position: relative; flex: 1 1 240px;
}
.bm-search i{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--bm-mute); font-size: 14px;
}
.bm-search input{
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--bm-line); border-radius: 999px;
  font-size: 14px; color: var(--bm-ink); background: var(--bm-paper);
  outline: none; transition: all .2s ease;
}
.bm-search input:focus{
  border-color: var(--bm-cyan); background: #fff;
  box-shadow: 0 0 0 4px var(--bm-cyan-soft);
}
.bm-sort{ display:flex; gap: 8px; flex-wrap: wrap; }
.bm-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--bm-ink-2);
  background: var(--bm-paper); border: 1.5px solid var(--bm-line);
  transition: all .18s ease;
}
.bm-chip i{ font-size: 11px; }
.bm-chip:hover{ border-color: var(--bm-cyan); color: var(--bm-cyan-d); }
.bm-chip.active{
  background: linear-gradient(135deg, var(--bm-cyan) 0%, var(--bm-cyan-d) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -10px var(--bm-cyan-glow);
}

/* ---------- PLATFORM TABS ---------- */
.bm-platforms{
  display:flex; gap: 10px; flex-wrap: wrap;
  margin: 0 14px 18px;
}
.bm-platform-tab{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--bm-ink-2);
  background: #fff; border: 1.5px solid var(--bm-line);
  box-shadow: 0 6px 16px -14px rgba(22,33,58,.3);
  transition: all .2s ease;
}
.bm-platform-tab:hover{ transform: translateY(-2px); border-color: var(--bm-cyan); }
.bm-platform-tab.active{
  background: linear-gradient(135deg, var(--bm-blue) 0%, var(--bm-cyan) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(74,108,247,.45);
}
.bm-pt-ic{
  width: 26px; height: 26px; border-radius: 8px;
  display:flex; align-items:center; justify-content:center; font-size: 13px;
  background: var(--bm-paper-2); color: var(--bm-ink-2);
}
.bm-pt-count{
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.25); color: inherit;
}
.bm-platform-tab:not(.active) .bm-pt-count{ background: var(--bm-paper-2); color: var(--bm-mute); }
.bm-pt-ic.fb{ background:#e7f0ff; color:#1877f2; }
.bm-pt-ic.ig{ background:#fde7f6; color:#c13584; }
.bm-pt-ic.tt{ background:#e0f4fc; color:#000; }
.bm-pt-ic.yt{ background:#fde6ec; color:#ff0000; }
.bm-pt-ic.tw{ background:#e0f4fc; color:#1da1f2; }
.bm-pt-ic.tg{ background:#e0f4fc; color:#29a9eb; }
.bm-pt-ic.sh{ background:#e3f9ee; color:#ee4d2d; }
.bm-pt-ic.def{ background: var(--bm-paper-2); color: var(--bm-mute); }

/* ---------- SERVICE GRID ---------- */
.bm-svc-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 0 14px;
}
.bm-svc{
  position: relative; padding: 18px 18px 16px;
  border-radius: var(--bm-radius); background: #fff;
  border: 1px solid var(--bm-line);
  box-shadow: 0 10px 26px -20px rgba(22,33,58,.28);
  cursor: pointer; transition: all .22s cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
.bm-svc::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width: 4px;
  background: linear-gradient(180deg, var(--bm-cyan), var(--bm-blue));
  opacity: .85;
}
.bm-svc:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(74,108,247,.4);
  border-color: rgba(74,108,247,.3);
}
.bm-svc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; margin-bottom: 10px; }
.bm-svc-name{
  font-size: 15px; font-weight: 800; color: var(--bm-ink); line-height: 1.3;
}
.bm-svc-hot{
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--bm-red), var(--bm-red-d)); color: #fff;
  box-shadow: 0 6px 14px -8px var(--bm-red-glow);
  white-space: nowrap;
}
.bm-svc-desc{
  font-size: 12.5px; color: var(--bm-mute); line-height: 1.5;
  margin: 0 0 14px; min-height: 38px;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.bm-svc-meta{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bm-svc-tag{
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--bm-paper); color: var(--bm-ink-2); border: 1px solid var(--bm-line-soft);
}
.bm-svc-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 10px;
  padding-top: 12px; border-top: 1px dashed var(--bm-line);
}
.bm-svc-price{ display:flex; flex-direction: column; }
.bm-svc-price .num{
  font-family: var(--bm-mono); font-size: 20px; font-weight: 800; color: var(--bm-green-d);
  line-height: 1;
}
.bm-svc-price .unit{ font-size: 11px; color: var(--bm-mute); font-weight: 600; margin-top: 3px; }
.bm-svc-cta{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 10px;
  background: linear-gradient(135deg, var(--bm-green) 0%, var(--bm-green-d) 100%);
  box-shadow: 0 8px 18px -10px var(--bm-green-glow);
  transition: all .2s ease;
}
.bm-svc:hover .bm-svc-cta{ transform: scale(1.04); }
.bm-svc-cta i{ font-size: 11px; }

/* ---------- CATEGORY TITLES (render by JS) ---------- */
.bm-cat-title{
  font-size: 13px; font-weight: 800; color: var(--bm-ink);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 22px 14px 12px; display:flex; align-items:center; gap: 10px;
}
.bm-cat-title h6{ font-size: 13px; font-weight: 800; color: var(--bm-ink); margin: 0; text-transform: uppercase; letter-spacing: .5px; }
.bm-cat-bar{ width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, var(--bm-yellow), var(--bm-yellow-d)); }
.bm-cat-line{ flex: 1; height: 1px; background: linear-gradient(90deg, var(--bm-line), transparent); }

/* ---------- ORDER PANEL (cột phải) ---------- */
.bm-order{
  position: sticky; top: 14px;
  margin: 0 14px; border-radius: var(--bm-radius);
  background: #fff; border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow-lg); overflow: hidden;
}
.bm-order-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--bm-blue) 0%, var(--bm-cyan) 100%);
  color: #fff;
}
.bm-order-head h4{ margin: 0; font-size: 17px; font-weight: 800; display:flex; align-items:center; gap: 9px; }
.bm-step{
  font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3);
}
.bm-order-body{ padding: 20px 22px 22px; }
.bm-field{ margin-bottom: 16px; }
.bm-field label{
  display:flex; align-items:center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--bm-ink-2); margin-bottom: 7px;
}
.bm-field label i{ color: var(--bm-cyan-d); font-size: 12px; }
.bm-field .req{ color: var(--bm-red); font-weight: 800; }

.bm-service-pick{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bm-paper); border: 1.5px dashed var(--bm-line);
  transition: all .2s ease;
}
.bm-service-pick.has-svc{ background: var(--bm-green-soft); border-color: var(--bm-green); border-style: solid; }
.bm-sp-ic{
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
  display:flex; align-items:center; justify-content:center; font-size: 16px;
  background: #fff; color: var(--bm-mute); border: 1px solid var(--bm-line);
}
.bm-service-pick.has-svc .bm-sp-ic{ background: var(--bm-green); color: #fff; border-color: transparent; }
.bm-sp-txt{ flex: 1; min-width: 0; }
.bm-sp-name{ font-size: 13.5px; font-weight: 700; color: var(--bm-ink); }
.bm-sp-sub{ font-size: 11.5px; color: var(--bm-mute); margin-top: 2px; }
.bm-sp-empty .bm-sp-name{ color: var(--bm-mute); }
.bm-sp-clear{
  font-size: 11px; color: var(--bm-red-d); cursor: pointer; font-weight: 700;
  background: none; border: none; padding: 4px 6px;
}
.bm-sp-clear:hover{ text-decoration: underline; }

.bm-ctrl-wrap{ position: relative; }
.bm-ctrl-ic{
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--bm-mute); font-size: 13px; z-index: 2;
}
.bm-ctrl{
  width: 100%; padding: 11px 14px 11px 38px;
  border: 1.5px solid var(--bm-line); border-radius: 11px;
  font-size: 13.5px; color: var(--bm-ink); background: var(--bm-paper);
  outline: none; transition: all .2s ease; font-family: var(--bm-sans);
}
textarea.bm-ctrl{ padding-left: 14px; resize: vertical; line-height: 1.5; }
.bm-ctrl:focus{
  border-color: var(--bm-cyan); background: #fff;
  box-shadow: 0 0 0 4px var(--bm-cyan-soft);
}

.bm-qty-row{ display:flex; gap: 8px; align-items: stretch; }
.bm-qty-btn{
  width: 44px; flex: 0 0 44px; border: 1.5px solid var(--bm-line);
  background: #fff; color: var(--bm-cyan-d); font-size: 18px; font-weight: 800;
  border-radius: 11px; cursor: pointer; transition: all .15s ease;
}
.bm-qty-btn:hover{ background: var(--bm-cyan-soft); border-color: var(--bm-cyan); }
.bm-qty-row .bm-ctrl{ padding-left: 14px; text-align: center; font-family: var(--bm-mono); font-weight: 700; }

.bm-range-hint{
  display:flex; justify-content:space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--bm-mute); margin-top: 7px;
}
.bm-range-hint b{ color: var(--bm-ink-2); font-weight: 700; }

.bm-quick{ display:flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bm-quick button{
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: var(--bm-yellow-soft); color: var(--bm-yellow-d);
  border: 1px solid rgba(246,181,10,.3); cursor: pointer; transition: all .15s ease;
}
.bm-quick button:hover{ background: var(--bm-yellow); color: #fff; }

.bm-progress{ margin: 18px 0 14px; }
.bm-progress-bar{
  height: 10px; border-radius: 999px; background: var(--bm-paper-2);
  overflow: hidden; border: 1px solid var(--bm-line-soft);
}
.bm-progress-fill{
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bm-green), var(--bm-cyan));
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.bm-progress-lbl{
  display:flex; justify-content:space-between; font-size: 11.5px; color: var(--bm-mute);
  margin-top: 7px;
}
.bm-progress-lbl b{ color: var(--bm-ink-2); font-weight: 700; }
.bm-progress-lbl i{ color: var(--bm-green-d); }

.bm-total{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px; border-radius: 12px; margin: 16px 0;
  background: linear-gradient(135deg, var(--bm-green-soft) 0%, #fff 100%);
  border: 1.5px solid var(--bm-green);
}
.bm-total-lbl{ font-size: 13px; font-weight: 700; color: var(--bm-ink-2); display:flex; align-items:center; gap: 7px; }
.bm-total-lbl i{ color: var(--bm-green-d); }
.bm-total-val{
  font-family: var(--bm-mono); font-size: 24px; font-weight: 800; color: var(--bm-green-d);
}
.bm-total-val small{ font-size: 13px; font-weight: 600; }

.bm-btn{
  width: 100%; padding: 15px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--bm-green) 0%, var(--bm-green-d) 100%);
  box-shadow: 0 14px 28px -12px var(--bm-green-glow);
  display:flex; align-items:center; justify-content:center; gap: 9px;
  transition: all .2s ease;
}
.bm-btn:hover{ transform: translateY(-2px); box-shadow: 0 20px 36px -14px var(--bm-green-glow); }
.bm-btn:active{ transform: translateY(0); }
.bm-btn:disabled{ opacity: .6; cursor: not-allowed; transform: none; }
.bm-btn i{ font-size: 15px; }

.bm-trust{
  display:flex; justify-content:space-between; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px dashed var(--bm-line);
}
.bm-trust-item{
  flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--bm-mute);
  display:flex; flex-direction: column; align-items:center; gap: 5px;
}
.bm-trust-item i{ font-size: 15px; }
.bm-trust-item:nth-child(1) i{ color: var(--bm-green); }
.bm-trust-item:nth-child(2) i{ color: var(--bm-yellow-d); }
.bm-trust-item:nth-child(3) i{ color: var(--bm-cyan); }

/* ---------- EMPTY STATE ---------- */
.bm-empty{
  text-align: center; padding: 56px 24px; margin: 0 14px;
  border-radius: var(--bm-radius); background: #fff; border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow);
}
.bm-empty-ic{
  width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 22px;
  display:flex; align-items:center; justify-content:center; font-size: 34px;
  background: linear-gradient(135deg, var(--bm-yellow-soft), var(--bm-cyan-soft));
  color: var(--bm-yellow-d);
}
.bm-empty h3, .bm-empty h5{ font-size: 18px; font-weight: 800; color: var(--bm-ink); margin: 0 0 8px; }
.bm-empty p{ font-size: 13.5px; color: var(--bm-mute); margin: 0 0 20px; max-width: 380px; margin-left:auto; margin-right:auto; }
.bm-empty-btn{
  display:inline-flex; align-items:center; gap: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 700; color: #fff;
  padding: 11px 22px; border-radius: 12px;
  background: linear-gradient(135deg, var(--bm-cyan), var(--bm-cyan-d));
  box-shadow: 0 12px 24px -12px var(--bm-cyan-glow);
  transition: all .2s ease;
}
.bm-empty-btn:hover{ transform: translateY(-2px); color:#fff; }

/* ---------- SKELETON ---------- */
.bm-skeleton-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 0 14px;
}
.bm-skel-card{
  padding: 18px; border-radius: var(--bm-radius); background: #fff;
  border: 1px solid var(--bm-line);
}
.bm-skel-line{
  height: 12px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--bm-paper-2) 25%, var(--bm-paper) 37%, var(--bm-paper-2) 63%);
  background-size: 400% 100%; animation: bmShimmer 1.4s ease infinite;
}
.bm-skel-line.tall{ height: 20px; width: 70%; margin-bottom: 14px; }
.bm-skel-line.short{ width: 45%; }
@keyframes bmShimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ---------- MODAL ---------- */
.bm-modal-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
.bm-modal-ic{
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center; font-size: 28px;
  background: linear-gradient(135deg, var(--bm-cyan-soft), var(--bm-green-soft));
  color: var(--bm-cyan-d);
}

/* ---------- HISTORY PAGE ---------- */
.bm-hist-wrap{
  margin: 16px 14px; border-radius: var(--bm-radius); background: #fff;
  border: 1px solid var(--bm-line); box-shadow: var(--bm-shadow); overflow: hidden;
}
.bm-mg-item{
  display:flex; align-items:center; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--bm-line-soft); transition: background .15s ease;
}
.bm-mg-item:hover{ background: var(--bm-paper); }
.bm-mg-item:last-child{ border-bottom: none; }
.bm-mg-item .badge.bad{ background: var(--bm-red-soft); color: var(--bm-red-d); }
.bm-mg-item .badge{ font-weight: 700; }
.bm-mg-item .text-success{ color: var(--bm-green-d) !important; font-weight: 700; }
.bm-mg-item .text-warning{ color: var(--bm-yellow-d) !important; font-weight: 700; }
.bm-mg-item .text-danger{ color: var(--bm-red-d) !important; font-weight: 700; }

/* ---------- STATUS BADGES màu ---------- */
.bm-wrap .badge-success{ background: var(--bm-green); }
.bm-wrap .badge-warning{ background: var(--bm-yellow); color:#3a2a00; }
.bm-wrap .badge-danger{ background: var(--bm-red); }
.bm-wrap .badge-info{ background: var(--bm-cyan); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px){
  .bm-hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .bm-order{ position: static; }
}
@media (max-width: 560px){
  .bm-hero{ padding: 20px 18px; margin: 14px 10px 18px; }
  .bm-hero h2{ font-size: 21px; }
  .bm-hero-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .bm-svc-grid{ grid-template-columns: 1fr; }
  .bm-toolbar{ margin: 0 10px 14px; }
  .bm-platforms{ margin: 0 10px 16px; }
  .bm-svc-grid{ padding: 0 10px; }
  .bm-balance{ min-width: 100%; }
}

/* ---------- DARK MODE (site bật dark-mode toggle) ---------- */
body.dark-mode .bm-wrap{
  background:
    radial-gradient(1200px 420px at 12% -8%, rgba(25,167,224,.12) 0%, transparent 55%),
    radial-gradient(1000px 380px at 92% 4%, rgba(246,181,10,.10) 0%, transparent 52%),
    linear-gradient(180deg,#0f1623 0%, #0b1018 100%);
  color: #e6edf3;
}
body.dark-mode .bm-hero,
body.dark-mode .bm-svc,
body.dark-mode .bm-order,
body.dark-mode .bm-empty,
body.dark-mode .bm-hist-wrap,
body.dark-mode .bm-toolbar{
  background: #161d2b; border-color: #2a3548; box-shadow: 0 14px 34px -18px rgba(0,0,0,.5);
}
body.dark-mode .bm-hero-stat{ background:#161d2b; border-color:#2a3548; }
body.dark-mode .bm-hero h2,
body.dark-mode .bm-svc-name,
body.dark-mode .bm-sp-name,
body.dark-mode .bm-empty h3{ color: #e6edf3; }
body.dark-mode .bm-hero p,
body.dark-mode .bm-svc-desc,
body.dark-mode .bm-sp-sub,
body.dark-mode .bm-mute{ color: #8b9bab; }
body.dark-mode .bm-search input,
body.dark-mode .bm-ctrl,
body.dark-mode .bm-service-pick,
body.dark-mode .bm-svc-tag,
body.dark-mode .bm-skel-card{ background: #111722; border-color: #2a3548; color:#e6edf3; }
body.dark-mode .bm-chip{ background:#111722; border-color:#2a3548; color:#c9d4e3; }
body.dark-mode .bm-progress-bar{ background:#111722; }
body.dark-mode .bm-mg-item:hover{ background:#111722; }
body.dark-mode .bm-mg-item{ border-bottom-color:#2a3548; }
body.dark-mode .bm-cat-title{ color:#e6edf3; }

/* =====================================================================
   HISTORY PAGE v2 — styles cho buff-mxh-history.php
   Thống kê, filter pills, bảng, badge trạng thái, progress mini, nút action
   ===================================================================== */

/* ---------- HERO nhỏ history ---------- */
.bm-hist-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 18px; flex-wrap: wrap;
  margin: 18px 14px 8px;
}
.bm-hist-head h2{
  font-size: 24px; font-weight: 800; margin: 0; color: var(--bm-ink);
  display:flex; align-items:center; gap:10px;
}
.bm-hist-head h2 i{ color: var(--bm-cyan-d); }
.bm-hist-head p{ margin: 6px 0 0; font-size: 13.5px; color: var(--bm-mute); }

/* ---------- THỐNG KÊ ---------- */
.bm-hist-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 8px 14px 18px;
}
.bm-hist-stat{
  display:flex; align-items:center; gap: 13px;
  padding: 16px 18px; border-radius: var(--bm-radius); background: #fff;
  border: 1px solid var(--bm-line);
  box-shadow: 0 10px 26px -20px rgba(22,33,58,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bm-hist-stat:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(22,33,58,.32); }
.bm-hs-ic{
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center; font-size: 19px;
}
.bm-hs-ic.tot{ background: var(--bm-cyan-soft); color: var(--bm-cyan-d); }
.bm-hs-ic.run{ background: var(--bm-yellow-soft); color: var(--bm-yellow-d); }
.bm-hs-ic.done{ background: var(--bm-green-soft); color: var(--bm-green-d); }
.bm-hs-ic.spent{ background: var(--bm-red-soft); color: var(--bm-red-d); }
.bm-hs-k{ font-size: 24px; font-weight: 800; color: var(--bm-ink); line-height: 1.1; font-family: var(--bm-mono); }
.bm-hs-v{ font-size: 12px; color: var(--bm-mute); margin-top: 3px; font-weight: 600; }

/* ---------- CARD ---------- */
.bm-card{
  margin: 0 14px 30px; border-radius: var(--bm-radius); background: #fff;
  border: 1px solid var(--bm-line); box-shadow: var(--bm-shadow-lg); overflow: hidden;
}
.bm-card-head{
  display:flex; justify-content:space-between; align-items:center; gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--bm-line-soft);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}
.bm-card-head h3{
  margin: 0; font-size: 16px; font-weight: 800; color: var(--bm-ink);
  display:flex; align-items:center; gap: 9px;
}
.bm-card-head h3 i{ color: var(--bm-cyan-d); }

/* ---------- FILTER PILLS ---------- */
.bm-filter-pills{ display:flex; gap: 7px; flex-wrap: wrap; }
.bm-filter-pill{
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--bm-ink-2);
  background: var(--bm-paper); border: 1.5px solid var(--bm-line);
  transition: all .18s ease;
}
.bm-filter-pill:hover{ border-color: var(--bm-cyan); color: var(--bm-cyan-d); }
.bm-filter-pill.active{
  background: linear-gradient(135deg, var(--bm-cyan) 0%, var(--bm-cyan-d) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -10px var(--bm-cyan-glow);
}

/* ---------- GHOST BUTTON ---------- */
.bm-btn-ghost{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size: 12.5px; font-weight: 700; color: var(--bm-green-d);
  background: var(--bm-green-soft); border: 1.5px solid rgba(24,178,106,.3);
  padding: 8px 16px; border-radius: 10px; transition: all .2s ease;
}
.bm-btn-ghost:hover{ background: var(--bm-green); color:#fff; transform: translateY(-1px); }

/* ---------- TABLE ---------- */
.bm-table{ width: 100%; margin: 0; font-size: 13px; }
.bm-table thead th{
  background: var(--bm-paper); color: var(--bm-ink-2);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 13px 14px; border-bottom: 2px solid var(--bm-line); white-space: nowrap;
}
.bm-table tbody td{ padding: 13px 14px; border-bottom: 1px solid var(--bm-line-soft); vertical-align: middle; color: var(--bm-ink-2); }
.bm-table tbody tr{ transition: background .15s ease; }
.bm-table tbody tr:hover{ background: var(--bm-paper); }
.bm-table tbody tr.bm-row-failed{ background: rgba(242,56,90,.04); }
.bm-table tbody tr.bm-row-failed:hover{ background: rgba(242,56,90,.08); }

.bm-ord-code{
  font-family: var(--bm-mono); font-size: 12px; font-weight: 700;
  color: var(--bm-cyan-d); background: var(--bm-cyan-soft);
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
}
.bm-link-cell a{ color: var(--bm-blue); text-decoration: none; }
.bm-link-cell a:hover{ text-decoration: underline; }

/* ---------- STATUS BADGE ---------- */
.bm-status{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.bm-status .bm-dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.bm-status.pending{ background: #eef1f6; color: #6b7a99; }
.bm-status.processing{ background: var(--bm-cyan-soft); color: var(--bm-cyan-d); }
.bm-status.processing .bm-dot{ animation: bmPulse 1.2s infinite; }
.bm-status.in_progress{ background: #e7f0ff; color: #2563eb; }
.bm-status.in_progress .bm-dot{ animation: bmPulse 1.2s infinite; }
.bm-status.completed{ background: var(--bm-green-soft); color: var(--bm-green-d); }
.bm-status.partial{ background: var(--bm-yellow-soft); color: var(--bm-yellow-d); }
.bm-status.canceled{ background: var(--bm-red-soft); color: var(--bm-red-d); }
.bm-status.refunded{ background: #f3e8ff; color: #7c3aed; }
.bm-status.failed{ background: var(--bm-red-soft); color: var(--bm-red-d); }

/* ---------- PROGRESS MINI ---------- */
.bm-progress-mini{
  width: 70px; height: 7px; border-radius: 999px; background: var(--bm-paper-2);
  overflow: hidden; border: 1px solid var(--bm-line-soft);
}
.bm-progress-mini span{
  display:block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bm-cyan), var(--bm-green));
  transition: width .4s ease;
}
.bm-progress-mini.partial span{ background: linear-gradient(90deg, var(--bm-yellow), var(--bm-yellow-d)); }

/* ---------- ACTION BUTTONS ---------- */
.bm-act-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 6px 11px; border-radius: 8px; border: 1.5px solid transparent;
  transition: all .15s ease; white-space: nowrap;
}
.bm-act-btn.refill{ background: var(--bm-green-soft); color: var(--bm-green-d); border-color: rgba(24,178,106,.3); }
.bm-act-btn.refill:hover{ background: var(--bm-green); color:#fff; }
.bm-act-btn.cancel{ background: var(--bm-red-soft); color: var(--bm-red-d); border-color: rgba(242,56,90,.3); }
.bm-act-btn.cancel:hover{ background: var(--bm-red); color:#fff; }
.bm-act-btn i{ font-size: 10px; }

/* ---------- EMPTY ROW ---------- */
.bm-empty-row td{
  text-align: center; padding: 48px 24px !important; color: var(--bm-mute);
}
.bm-empty-row td i{ font-size: 32px; display:block; margin-bottom: 12px; opacity: .4; }
.bm-empty-row td a{ color: var(--bm-cyan-d); font-weight: 700; }
.bm-empty-row td a:hover{ text-decoration: underline; }

/* ---------- RESPONSIVE history ---------- */
@media (max-width: 991px){
  .bm-hist-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .bm-hist-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .bm-hist-stat{ padding: 12px 14px; }
  .bm-hs-k{ font-size: 20px; }
  .bm-card-head{ flex-direction: column; align-items: flex-start; }
  .bm-table{ font-size: 12px; }
  .bm-table thead th, .bm-table tbody td{ padding: 10px 10px; }
}

/* ---------- DARK MODE history ---------- */
body.dark-mode .bm-hist-stat,
body.dark-mode .bm-card{ background: #161d2b; border-color: #2a3548; }
body.dark-mode .bm-card-head{ background: linear-gradient(135deg,#161d2b 0%,#1a2233 100%); border-bottom-color:#2a3548; }
body.dark-mode .bm-hist-head h2,
body.dark-mode .bm-card-head h3,
body.dark-mode .bm-hs-k{ color: #e6edf3; }
body.dark-mode .bm-table thead th{ background:#111722; color:#c9d4e3; border-bottom-color:#2a3548; }
body.dark-mode .bm-table tbody td{ color:#c9d4e3; border-bottom-color:#2a3548; }
body.dark-mode .bm-table tbody tr:hover{ background:#111722; }
body.dark-mode .bm-ord-code{ background: rgba(25,167,224,.15); color: var(--bm-cyan); }
body.dark-mode .bm-filter-pill{ background:#111722; border-color:#2a3548; color:#c9d4e3; }