/* =========================================================
   Lớp màu thương hiệu — giống hệt bản Shop Thịnh Vượng Elite.
   Dải "fusion" lấy từ banner VPBank CommCredit:
   xanh dương đậm -> giao thoa -> xanh lá VPBank.
   Nạp sau CSS gốc nên các quy tắc ở đây thắng.
   ========================================================= */
:root {
  --fusion-blue: #16307D;
  --fusion-blue-mid: #0F6E96;
  --fusion-teal: #00B167;
  --fusion-green: #00B74F;
  --fusion-lime: #9FD356;
}

/* nền thương hiệu dùng chung dải màu */
.bg-quik-gradient,
.bg-vpbank-gradient,
.bg-vpbank-brand {
  background: linear-gradient(135deg, var(--fusion-blue) 0%, var(--fusion-blue-mid) 20%, var(--fusion-teal) 56%, var(--fusion-green) 100%);
}

/* các mặt nền tối (màn đăng nhập, thanh merchant) */
.bg-vpbank-merchant {
  background: linear-gradient(155deg, var(--fusion-blue) 0%, var(--fusion-blue-mid) 24%, var(--fusion-teal) 60%, #009A4B 100%);
}
.bg-vpbank-merchant-bar { background: #12285F; }
.bg-vpbank-merchant-card { background: #0B5B48; }

/* nút hành động chính theo dải màu */
.pro-btn-grad {
  background-image: linear-gradient(100deg, var(--fusion-blue) 0%, var(--fusion-blue-mid) 18%, var(--fusion-teal) 52%, var(--fusion-green) 100%);
  color: #fff;
}

/* ---------------------------------------------------------
   Số liệu trên nền màu -> chữ trắng cho tương phản rõ.
   (.text-gold-gradient, .text-diamond-gold-light vốn là màu vàng;
   sau khi đổi bộ màu chúng ngả xanh nên chìm vào nền.)
--------------------------------------------------------- */
:is(
  [class~="bg-quik-gradient"],
  [class~="bg-vpbank-gradient"],
  [class~="bg-vpbank-brand"],
  [class~="bg-vpbank-merchant"],
  [class~="bg-vpbank-merchant-card"],
  [class~="bg-vpbank-merchant-bar"],
  [class~="bg-vpbank"]
) :is(
  .tabular-nums,
  .text-gold-gradient,
  .text-diamond-gold-light,
  .text-diamond-gold,
  .text-vpbank-50,
  .text-vpbank-100
) {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background-image: none;
}

/* số nằm trong thẻ nền sáng lồng bên trong thì giữ chữ tối */
:is(
  [class~="bg-quik-gradient"],
  [class~="bg-vpbank-gradient"],
  [class~="bg-vpbank-brand"],
  [class~="bg-vpbank-merchant"],
  [class~="bg-vpbank"]
) :is([class~="bg-white"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-diamond-ivory"]) :is(
  .tabular-nums,
  .text-gold-gradient,
  .text-diamond-gold-light
) {
  color: #101828;
  -webkit-text-fill-color: #101828;
}

/* nhãn phụ trên nền màu sáng hơn cho dễ đọc */
:is([class~="bg-quik-gradient"], [class~="bg-vpbank-gradient"], [class~="bg-vpbank-brand"]) :is(.text-diamond-platinum\/80, .text-white\/70) {
  color: rgba(255, 255, 255, .88);
}