/* GPBank brand layer for the recovered demo build. */
:root {
  --gp-orange: #f7941d;
  --gp-red: #ef4130;
  --gp-green: #3a9948;
  --gp-green-deep: #1d6b38;
  --gp-ink: #172033;
  --gp-cream: #fff8f1;
  --fusion-blue: #c7462d;
  --fusion-blue-mid: #ef4130;
  --fusion-teal: #f7941d;
  --fusion-green: #3a9948;
  --fusion-lime: #8dc63f;
}

body {
  background: linear-gradient(135deg, #fff8f1 0%, #fff 42%, #f4fbf3 100%);
}

/* The recovered bundle uses VPBank-named utility classes. Keep the layout,
   but point every brand surface at GPBank's orange/red + green palette. */
.bg-quik-gradient,
.bg-vpbank-gradient,
.bg-vpbank-brand,
.pro-brand-bg {
  background-image: linear-gradient(135deg, var(--gp-red) 0%, var(--gp-orange) 50%, var(--gp-green) 100%) !important;
}

.bg-vpbank-merchant {
  background: linear-gradient(155deg, #c7462d 0%, var(--gp-red) 28%, var(--gp-orange) 62%, var(--gp-green) 100%) !important;
}

.bg-vpbank-merchant-bar {
  background: linear-gradient(100deg, #b9362b, var(--gp-red), var(--gp-orange)) !important;
}

.bg-vpbank-merchant-card {
  background: linear-gradient(135deg, #8f3c31, var(--gp-green-deep)) !important;
}

:root[data-pro-status="brand"] .pro-statusbar {
  background: linear-gradient(100deg, #b9362b, var(--gp-red), var(--gp-orange)) !important;
}

.pro-btn-grad {
  background-image: linear-gradient(100deg, var(--gp-red), var(--gp-orange) 54%, var(--gp-green)) !important;
}

.pro-text-grad {
  background-image: linear-gradient(96deg, var(--gp-red), var(--gp-orange) 48%, var(--gp-green)) !important;
}

[class~="text-[#00b167]"],
[class~="text-vpbank"],
[class~="text-vpbank-50"],
[class~="text-vpbank-100"] {
  color: var(--gp-green) !important;
}

[class~="bg-[#00b167]"],
[class~="bg-vpbank"] {
  background-color: var(--gp-green) !important;
}

[class~="border-[#00b167]"],
[class~="border-vpbank"] {
  border-color: var(--gp-green) !important;
}

[class~="hover:text-[#00b167]"]:hover,
[class~="hover:text-vpbank"]:hover {
  color: var(--gp-green-deep) !important;
}

[class~="hover:bg-[#00b167]"]:hover,
[class~="hover:bg-vpbank"]:hover {
  background-color: var(--gp-green-deep) !important;
}

/* A secondary CRM flow in the recovered bundle uses Vietcombank-prefixed
   utility classes. It is still part of this demo and must use GPBank colors. */
[class~="bg-vietcombank-gradient"] {
  background-image: linear-gradient(135deg, var(--gp-red), var(--gp-orange) 54%, var(--gp-green)) !important;
}

[class*="bg-vietcombank"] {
  background-color: var(--gp-green) !important;
}

[class*="text-vietcombank"] {
  color: var(--gp-green-deep) !important;
}

[class*="border-vietcombank"] {
  border-color: var(--gp-green) !important;
}

/* Normalize the older Quik/VPBank utility palette that is still embedded in
   several recovered screens and button variants. */
[class~="bg-quik-gradient"],
[class~="bg-vpbank-gradient"],
[class~="bg-vietcombank-gradient"] {
  background-image: linear-gradient(105deg, var(--gp-red) 0%, var(--gp-orange) 52%, var(--gp-green) 100%) !important;
  background-color: transparent !important;
}

[class~="bg-quik-blue"],
[class~="bg-vpbank"],
[class~="bg-vietcombank"] {
  background-color: var(--gp-green) !important;
  background-image: none !important;
}

[class~="bg-quik-blue-50"],
[class~="bg-vpbank-50"],
[class~="bg-vpbank-100"],
[class~="bg-vietcombank-50"],
[class~="bg-[#e6f9f1]"],
[class~="bg-[#c0f0dc]"] {
  background-color: #eaf6e9 !important;
}

[class~="bg-quik-orange"],
[class~="bg-quik-orange-50"],
[class~="bg-[#FDE7E9]"] {
  background-color: #fff1dd !important;
}

[class~="text-quik-blue"],
[class~="text-vpbank"],
[class~="text-vpbank-dark"],
[class~="text-vpbank-deep"],
[class~="text-vpbank-ink"],
[class~="text-vietcombank-deep"],
[class~="text-vietcombank-ink"],
[class~="text-quik-blue-dark"],
[class~="text-[#007e49]"],
[class~="text-[#009a59]"],
[class~="text-[#003f25]"],
[class~="text-[#054c2e]"] {
  color: var(--gp-green-deep) !important;
}

[class~="text-quik-orange"],
[class~="text-[#D11424]"],
[class~="text-[#A60F1C]"],
[class~="text-[#5C070F]"],
[class~="text-[#ED1B2E]"] {
  color: var(--gp-red) !important;
}

[class~="border-quik-blue"],
[class~="border-vpbank"],
[class~="border-vietcombank"],
[class~="border-[#93e5c3]"] {
  border-color: #b7deb8 !important;
}

[class~="border-quik-orange"],
[class~="border-[#F7A6AE]"] {
  border-color: #f4c28c !important;
}

[class~="from-quik-orange"],
[class~="from-quik-orange-50"],
[class~="from-[#ED1B2E]"],
[class~="from-[#D11424]"],
[class~="from-[#F04E5E]"] {
  --tw-gradient-from: var(--gp-red) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 65 48 / 0) var(--tw-gradient-to-position) !important;
}

[class~="from-[#00b167]"],
[class~="from-[#009a59]"] {
  --tw-gradient-from: var(--gp-green) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(58 153 72 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-quik-orange"],
[class~="to-[#009a59]"],
[class~="to-[#007e49]"],
[class~="to-[#ED1B2E]"],
[class~="to-[#F04E5E]"],
[class~="to-[#B3121F]"] {
  --tw-gradient-to: var(--gp-orange) var(--tw-gradient-to-position) !important;
}

[class~="to-[#FDE7E9]"] {
  --tw-gradient-to: #fff1dd var(--tw-gradient-to-position) !important;
}

[class~="from-[#13c97a]"],
[class~="to-[#009a59]"],
[class~="to-[#007e49]"] {
  --tw-gradient-from: var(--gp-green) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: var(--gp-green-deep) var(--tw-gradient-to-position) !important;
}

[class~="from-quik-blue"],
[class~="from-quik-blue-dark"],
[class~="from-[#003f25]"],
[class~="from-[#054c2e]"] {
  --tw-gradient-from: var(--gp-green-deep) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(29 107 56 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-quik-blue"],
[class~="to-quik-blue-dark"],
[class~="to-[#003f25]"],
[class~="to-[#054c2e]"] {
  --tw-gradient-to: var(--gp-green-deep) var(--tw-gradient-to-position) !important;
}

[class~="from-[#e6f9f1]"],
[class~="to-[#e6f9f1]"],
[class~="to-[#c0f0dc]"] {
  --tw-gradient-from: #eaf6e9 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #f5fbf3 var(--tw-gradient-to-position) !important;
}

[class~="bg-[#ED1B2E]"],
[class~="bg-[#D11424]"],
[class~="bg-[#F04E5E]"],
[class~="bg-[#28c785]"] {
  background-color: var(--gp-red) !important;
}

[class~="bg-[#28c785]"],
[class~="bg-[#f2f8f5]"] {
  background-color: #eaf6e9 !important;
}

[class~="bg-[#FEE2E2]"],
[class~="bg-[#FBD0D4]"],
[class~="bg-[#FDE7E9]"] {
  background-color: #fff1dd !important;
}

[class~="text-[#28c785]"],
[class~="text-[#c0f0dc]"],
[class~="text-[#F7A6AE]"],
[class~="text-[#F27C88]"] {
  color: var(--gp-green) !important;
}

[class~="border-[#28c785]"],
[class~="border-[#c0f0dc]"] {
  border-color: #b7deb8 !important;
}

[class~="border-[#F27C88]"],
[class~="border-[#F04E5E]"] {
  border-color: #f4c28c !important;
}

[class~="bg-gold-gradient"] {
  background-image: linear-gradient(105deg, var(--gp-red), var(--gp-orange)) !important;
}

[class*="bg-diamond-gold"] {
  background-color: rgb(247 148 29 / .14) !important;
}

[class~="text-diamond-gold"],
[class~="text-diamond-gold-light"],
[class~="text-vpbank-gold"],
[class~="text-vietcombank-gold"] {
  color: var(--gp-orange) !important;
}

[class*="bg-quik-orange/"] {
  background-color: rgb(247 148 29 / .14) !important;
}

[class*="bg-quik-blue-50/"] {
  background-color: rgb(58 153 72 / .12) !important;
}

[class*="bg-vpbank/"] {
  background-color: rgb(58 153 72 / .12) !important;
}

[class*="bg-vietcombank/"] {
  background-color: rgb(58 153 72 / .12) !important;
}

[class*="border-quik-orange"] {
  border-color: #f4c28c !important;
}

[class*="border-quik-blue"] {
  border-color: #b7deb8 !important;
}

[class*="border-vpbank"] {
  border-color: #b7deb8 !important;
}

[class~="shadow-vpbank\/30"],
[class~="shadow-vpbank\/25"],
[class~="shadow-vietcombank\/30"],
[class~="shadow-quik-orange\/30"] {
  --tw-shadow-color: rgb(58 153 72 / .28) !important;
}

/* Primary actions should read as GPBank actions even when the original
   bundle assembled the gradient from separate from/to utilities. */
button[class~="bg-quik-blue"],
button[class~="bg-vpbank"],
button[class~="bg-vietcombank"],
button[class~="bg-quik-gradient"],
button[class~="bg-vpbank-gradient"],
button[class~="bg-vietcombank-gradient"] {
  border-color: rgba(58, 153, 72, .42) !important;
  color: #fff !important;
}

button[class~="active:bg-vpbank-50"]:active,
button[class~="active:bg-vpbank-100"]:active,
button[class~="active:bg-quik-blue-50"]:active,
button[class~="active:bg-gray-50"]:active {
  background-color: #eaf6e9 !important;
}

button[class~="hover:bg-vpbank-50"]:hover,
button[class~="hover:bg-quik-blue-50"]:hover,
button[class~="hover:bg-vietcombank-50"]:hover {
  background-color: #eaf6e9 !important;
}

/* Keep the device status strip readable on the login flow too. Some screens
   attach a legacy pale background utility directly to this element. */
.pro-statusbar {
  background: linear-gradient(100deg, #b9362b, var(--gp-red), var(--gp-orange)) !important;
  color: #fff !important;
}

img[src$="gpbank-logo.svg"] {
  object-fit: contain;
}

/* Full logo in the compact app icon remains legible on the GPBank gradient. */
img[src$="gpbank-logo.svg"].w-\[60\%\] {
  width: 82% !important;
  height: auto !important;
  max-height: 82% !important;
}

input:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--gp-orange) !important;
}

/* Final action-control pass. The original demo mixes several generations of
   Quik/VPBank/Vietcombank utilities on buttons. Normalize the actual action
   states here so no old red, teal, or blue button remains visible. */
button[class~="bg-quik-orange"],
button[class~="bg-quik-orange-50"],
button[class~="bg-[#009a59]"],
button[class~="bg-[#00b167]"],
button[class~="bg-[#28c785]"],
button[class~="bg-[#ED1B2E]"],
button[class~="bg-[#D11424]"],
button[class~="bg-[#F04E5E]"] {
  background-image: none !important;
}

button[class~="bg-quik-orange"] {
  background-color: var(--gp-orange) !important;
  border-color: rgba(247, 148, 29, .46) !important;
}

button[class~="bg-quik-orange"]:hover,
button[class~="bg-quik-orange"]:focus-visible {
  background-color: var(--gp-red) !important;
}

button[class~="bg-quik-orange"]:active,
button[class~="active:bg-[#D11424]"]:active {
  background-color: #cf382b !important;
}

button[class~="bg-[#009a59]"],
button[class~="bg-[#00b167]"],
button[class~="bg-[#28c785]"],
button[class~="bg-quik-blue"],
button[class~="bg-vpbank"],
button[class~="bg-vietcombank"] {
  background-color: var(--gp-green) !important;
  border-color: rgba(58, 153, 72, .48) !important;
}

button[class~="bg-[#009a59]"]:hover,
button[class~="bg-[#00b167]"]:hover,
button[class~="bg-[#28c785]"]:hover,
button[class~="bg-quik-blue"]:hover,
button[class~="bg-vpbank"]:hover,
button[class~="bg-vietcombank"]:hover,
button[class~="active:bg-quik-blue-dark"]:active {
  background-color: var(--gp-green-deep) !important;
}

button[class~="bg-[#ED1B2E]"],
button[class~="bg-[#D11424]"],
button[class~="bg-[#F04E5E]"] {
  background-color: var(--gp-red) !important;
}

/* Correct the gradient endpoints individually. This matters for the many
   CTA cards that were assembled with Tailwind from/to utilities instead of a
   named gradient class. */
[class~="from-quik-orange"] {
  --tw-gradient-from: var(--gp-orange) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 148 29 / 0) var(--tw-gradient-to-position) !important;
}

[class~="from-quik-orange-50"] {
  --tw-gradient-from: #fff1dd var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 241 221 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-[#ED1B2E]"],
[class~="to-[#D11424]"],
[class~="to-[#F04E5E]"],
[class~="to-[#B3121F]"] {
  --tw-gradient-to: var(--gp-red) var(--tw-gradient-to-position) !important;
}

[class~="to-quik-orange"] {
  --tw-gradient-to: var(--gp-orange) var(--tw-gradient-to-position) !important;
}

[class~="from-[#00b167]"],
[class~="from-[#009a59]"],
[class~="from-[#13c97a]"],
[class~="from-quik-blue"],
[class~="from-quik-blue-light"],
[class~="from-vpbank"],
[class~="from-vietcombank"] {
  --tw-gradient-from: var(--gp-green) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(58 153 72 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-[#009a59]"],
[class~="to-[#007e49]"],
[class~="to-[#054c2e]"],
[class~="to-quik-blue"],
[class~="to-quik-blue-dark"],
[class~="to-quik-blue-light"],
[class~="to-vpbank-dark"],
[class~="to-vietcombank-dark"] {
  --tw-gradient-to: var(--gp-green-deep) var(--tw-gradient-to-position) !important;
}

[class~="via-quik-blue"],
[class~="via-vpbank"],
[class~="via-vietcombank"] {
  --tw-gradient-via: var(--gp-green) !important;
}

[class~="from-[#FDE7E9]"],
[class~="from-[#e6f9f1]"],
[class~="from-quik-blue-50"],
[class~="from-vpbank-50"],
[class~="from-vietcombank-50"] {
  --tw-gradient-from: #f5fbf3 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(245 251 243 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-[#FDE7E9]"],
[class~="to-[#e6f9f1]"],
[class~="to-[#c0f0dc]"],
[class~="to-quik-blue-100"],
[class~="to-quik-blue-50"] {
  --tw-gradient-to: #eaf6e9 var(--tw-gradient-to-position) !important;
}

/* Secondary and icon actions keep a warm paper surface with a GPBank focus
   state instead of the source demo's neutral/teal flash. */
button[class~="active:bg-gray-50"]:active,
button[class~="active:bg-gray-100"]:active,
button[class~="active:bg-gray-200"]:active,
button[class~="hover:bg-gray-50"]:hover,
button[class~="hover:bg-gray-100"]:hover,
button[class~="active:bg-vpbank-50"]:active,
button[class~="active:bg-vietcombank-50"]:active,
button[class~="active:bg-quik-blue-50"]:active {
  background-color: #f5fbf3 !important;
}

button[class~="hover:border-gray-200"]:hover,
button[class~="focus:border-vpbank"]:focus,
button[class~="focus:border-vietcombank"]:focus,
button[class~="focus:border-quik-blue"]:focus,
button[class~="focus:border-[#00b167]"]:focus {
  border-color: var(--gp-green) !important;
}

button[class~="pro-btn-grad"],
button[class~="bg-quik-gradient"],
button[class~="bg-vpbank-gradient"],
button[class~="bg-vietcombank-gradient"] {
  background-image: linear-gradient(100deg, var(--gp-red) 0%, var(--gp-orange) 52%, var(--gp-green) 100%) !important;
  box-shadow: 0 8px 18px -10px rgba(58, 153, 72, .72) !important;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

button[class~="pro-btn-grad"]:hover,
button[class~="bg-quik-gradient"]:hover,
button[class~="bg-vpbank-gradient"]:hover,
button[class~="bg-vietcombank-gradient"]:hover {
  filter: saturate(1.08) brightness(.98);
  box-shadow: 0 10px 22px -10px rgba(239, 65, 48, .55) !important;
}

button[class~="pro-btn-grad"]:active,
button[class~="bg-quik-gradient"]:active,
button[class~="bg-vpbank-gradient"]:active,
button[class~="bg-vietcombank-gradient"]:active {
  filter: saturate(.96) brightness(.94);
  transform: translateY(1px);
}

button:disabled,
button[disabled] {
  filter: saturate(.35) !important;
  box-shadow: none !important;
}

/* Button-only palette: GPBank actions are warm orange/red. The green in the
   logo remains available for data/status visuals, but must not tint controls. */
button[class~="pro-btn-grad"],
button[class~="bg-quik-gradient"],
button[class~="bg-vpbank-gradient"],
button[class~="bg-vietcombank-gradient"],
button[class*="bg-gradient-to"] {
  background-image: linear-gradient(100deg, var(--gp-red) 0%, var(--gp-orange) 100%) !important;
  border-color: rgba(239, 65, 48, .42) !important;
  color: #fff !important;
}

button[class~="bg-quik-blue"],
button[class~="bg-vpbank"],
button[class~="bg-vietcombank"],
button[class~="bg-[#009a59]"],
button[class~="bg-[#00b167]"],
button[class~="bg-[#28c785]"] {
  background-color: var(--gp-orange) !important;
  background-image: none !important;
  border-color: rgba(247, 148, 29, .48) !important;
  color: #fff !important;
}

button[class~="bg-quik-orange"] {
  background-color: var(--gp-orange) !important;
  border-color: rgba(247, 148, 29, .48) !important;
}

button[class~="bg-quik-blue"]:hover,
button[class~="bg-vpbank"]:hover,
button[class~="bg-vietcombank"]:hover,
button[class~="bg-[#009a59]"]:hover,
button[class~="bg-[#00b167]"]:hover,
button[class~="bg-[#28c785]"]:hover,
button[class~="bg-quik-orange"]:hover,
button[class~="pro-btn-grad"]:hover,
button[class~="bg-quik-gradient"]:hover,
button[class~="bg-vpbank-gradient"]:hover,
button[class~="bg-vietcombank-gradient"]:hover,
button[class*="bg-gradient-to"]:hover {
  background-color: var(--gp-red) !important;
  background-image: linear-gradient(100deg, #cf382b 0%, var(--gp-red) 52%, var(--gp-orange) 100%) !important;
  border-color: rgba(207, 56, 43, .58) !important;
}

button[class~="bg-quik-blue"]:active,
button[class~="bg-vpbank"]:active,
button[class~="bg-vietcombank"]:active,
button[class~="bg-[#009a59]"]:active,
button[class~="bg-[#00b167]"]:active,
button[class~="bg-[#28c785]"]:active,
button[class~="bg-quik-orange"]:active,
button[class~="active:bg-quik-blue-dark"]:active,
button[class~="active:bg-[#D11424]"]:active,
button[class~="pro-btn-grad"]:active,
button[class~="bg-quik-gradient"]:active,
button[class~="bg-vpbank-gradient"]:active,
button[class~="bg-vietcombank-gradient"]:active,
button[class*="bg-gradient-to"]:active {
  background-color: #b92f26 !important;
  background-image: linear-gradient(100deg, #a92a22 0%, #cf382b 100%) !important;
}

/* Legacy brand-colored descendants inside icon/compound buttons. */
button [class~="bg-quik-blue"],
button [class~="bg-vpbank"],
button [class~="bg-vietcombank"],
button [class~="bg-[#009a59]"],
button [class~="bg-[#00b167]"],
button [class~="bg-[#28c785]"],
button [class~="bg-vpbank-50"],
button [class~="bg-vietcombank-50"],
button [class~="bg-quik-blue-50"] {
  background-color: #fff1dd !important;
  background-image: none !important;
}

button [class~="text-vpbank"],
button [class~="text-vpbank-dark"],
button [class~="text-vpbank-deep"],
button [class~="text-vietcombank"],
button [class~="text-vietcombank-deep"],
button [class~="text-quik-blue"],
button [class~="text-[#009a59]"],
button [class~="text-[#007e49]"] {
  color: var(--gp-red) !important;
}

button [class~="border-vpbank"],
button [class~="border-vietcombank"],
button [class~="border-quik-blue"] {
  border-color: #f4c28c !important;
}

button[class~="border-vpbank"],
button[class~="border-vietcombank"],
button[class~="border-quik-blue"],
button[class~="border-[#00b167]"],
button[class~="border-[#009a59]"] {
  border-color: #f4c28c !important;
}

button[class~="text-vpbank"],
button[class~="text-vpbank-dark"],
button[class~="text-vpbank-deep"],
button[class~="text-vietcombank"],
button[class~="text-vietcombank-deep"],
button[class~="text-quik-blue"],
button[class~="text-[#009a59]"],
button[class~="text-[#007e49]"] {
  color: var(--gp-orange) !important;
}

/* Bottom navigation is rendered as links rather than <button>, but it is an
   action control visually and must follow the same warm palette. */
a[class~="text-diamond-gold-deep"],
button[class~="text-diamond-gold-deep"],
[role="button"][class~="text-diamond-gold-deep"] {
  color: var(--gp-orange) !important;
}

[class~="border-diamond-gold"] {
  border-color: rgba(247, 148, 29, .34) !important;
}

button[class~="bg-vpbank-50"],
button[class~="bg-vietcombank-50"],
button[class~="bg-quik-blue-50"] {
  background-color: #fff1dd !important;
  background-image: none !important;
}

button[class~="hover:bg-vpbank-50"]:hover,
button[class~="hover:bg-vietcombank-50"]:hover,
button[class~="hover:bg-quik-blue-50"]:hover,
button[class~="active:bg-vpbank-50"]:active,
button[class~="active:bg-vietcombank-50"]:active,
button[class~="active:bg-quik-blue-50"]:active {
  background-color: #fff1dd !important;
  background-image: none !important;
}

/* Last sweep for dynamically assembled controls. Several demo flows build
   their class string at runtime, so exact-token rules alone are not enough. */
:is(button, a, [role="button"])[class*="bg-[#00b167]"],
:is(button, a, [role="button"])[class*="bg-[#009a59]"],
:is(button, a, [role="button"])[class*="bg-[#28c785]"],
:is(button, a, [role="button"])[class*="bg-vpbank"],
:is(button, a, [role="button"])[class*="bg-vietcombank"],
:is(button, a, [role="button"])[class*="bg-quik-blue"],
:is(button, a, [role="button"])[class*="bg-emerald"],
:is(button, a, [role="button"])[class*="bg-green"],
:is(button, a, [role="button"])[class*="bg-teal"],
:is(button, a, [role="button"])[class*="bg-lime"] {
  background-color: var(--gp-orange) !important;
  background-image: none !important;
  border-color: #f4c28c !important;
}

:is(button, a, [role="button"])[class*="bg-[#00b167]/"],
:is(button, a, [role="button"])[class*="bg-[#009a59]/"],
:is(button, a, [role="button"])[class*="bg-[#28c785]/"],
:is(button, a, [class*="bg-vpbank/"] , [class*="bg-vietcombank/"] , [class*="bg-quik-blue-50/"] ),
:is(button, a, [role="button"])[class*="bg-emerald-"][class*="/"],
:is(button, a, [role="button"])[class*="bg-green-"][class*="/"],
:is(button, a, [role="button"])[class*="bg-teal-"][class*="/"] {
  background-color: #fff1dd !important;
  background-image: none !important;
}

:is(button, a, [role="button"])[class*="from-[#00b167]"],
:is(button, a, [role="button"])[class*="from-[#009a59]"],
:is(button, a, [role="button"])[class*="from-[#28c785]"],
:is(button, a, [role="button"])[class*="from-[#007e49]"],
:is(button, a, [role="button"])[class*="from-quik-blue"],
:is(button, a, [role="button"])[class*="from-vpbank"],
:is(button, a, [role="button"])[class*="from-vietcombank"],
:is(button, a, [role="button"])[class*="bg-gradient"] {
  background-image: linear-gradient(100deg, var(--gp-red) 0%, var(--gp-orange) 100%) !important;
  border-color: #f4c28c !important;
}

:is(button, a, [role="button"])[class*="text-[#00b167]"],
:is(button, a, [role="button"])[class*="text-[#009a59]"],
:is(button, a, [role="button"])[class*="text-[#007e49]"],
:is(button, a, [role="button"])[class*="text-[#054c2e]"],
:is(button, a, [role="button"])[class*="text-vpbank"],
:is(button, a, [role="button"])[class*="text-vietcombank"],
:is(button, a, [role="button"])[class*="text-quik-blue"],
:is(button, a, [role="button"])[class*="text-emerald"],
:is(button, a, [role="button"])[class*="text-green"],
:is(button, a, [role="button"])[class*="text-teal"] {
  color: var(--gp-orange) !important;
}

:is(button, a, [role="button"])[class*="border-[#00b167]"],
:is(button, a, [role="button"])[class*="border-[#009a59]"],
:is(button, a, [role="button"])[class*="border-[#93e5c3]"],
:is(button, a, [role="button"])[class*="border-vpbank"],
:is(button, a, [role="button"])[class*="border-vietcombank"],
:is(button, a, [role="button"])[class*="border-quik-blue"],
:is(button, a, [role="button"])[class*="border-emerald"],
:is(button, a, [role="button"])[class*="border-green"],
:is(button, a, [role="button"])[class*="border-teal"] {
  border-color: #f4c28c !important;
}

/* Inline style values from the Pro bundle otherwise outrank utility rules. */
:is(button, a, [role="button"])[style*="#3A9948"],
:is(button, a, [role="button"])[style*="#3a9948"],
:is(button, a, [role="button"])[style*="#00B167"],
:is(button, a, [role="button"])[style*="#00b167"],
:is(button, a, [role="button"])[style*="#009A59"],
:is(button, a, [role="button"])[style*="#009a59"],
:is(button, a, [role="button"])[style*="rgb(58, 153, 72)"],
:is(button, a, [role="button"])[style*="rgb(0, 177, 103)"],
:is(button, a, [role="button"])[style*="rgb(0, 154, 89)"] {
  background-color: var(--gp-orange) !important;
  background-image: linear-gradient(100deg, var(--gp-red), var(--gp-orange)) !important;
  border-color: #f4c28c !important;
  color: #fff !important;
}

/* Preserve white secondary surfaces while recoloring their old brand border
   and icon. This is the biometric/login icon action in particular. */
button[class~="bg-white"][class~="border-vpbank"],
button[class~="bg-white"][class~="border-vietcombank"],
button[class~="bg-white"][class~="border-quik-blue"] {
  background-color: #fff !important;
  background-image: none !important;
  border-color: #f4c28c !important;
  color: var(--gp-orange) !important;
}

:is(button, a, [role="button"]) [class*="bg-[#00b167]"],
:is(button, a, [role="button"]) [class*="bg-[#009a59]"],
:is(button, a, [role="button"]) [class*="bg-[#28c785]"],
:is(button, a, [role="button"]) [class*="bg-vpbank"],
:is(button, a, [role="button"]) [class*="bg-vietcombank"],
:is(button, a, [role="button"]) [class*="bg-quik-blue"],
:is(button, a, [role="button"]) [class*="bg-emerald"],
:is(button, a, [role="button"]) [class*="bg-green"],
:is(button, a, [role="button"]) [class*="bg-teal"] {
  background-color: #fff1dd !important;
  background-image: none !important;
}

:is(button, a, [role="button"]) [class*="text-[#00b167]"],
:is(button, a, [role="button"]) [class*="text-[#009a59]"],
:is(button, a, [role="button"]) [class*="text-[#007e49]"],
:is(button, a, [role="button"]) [class*="text-[#054c2e]"],
:is(button, a, [role="button"]) [class*="text-vpbank"],
:is(button, a, [role="button"]) [class*="text-vietcombank"],
:is(button, a, [role="button"]) [class*="text-quik-blue"],
:is(button, a, [role="button"]) [class*="text-emerald"],
:is(button, a, [role="button"]) [class*="text-green"],
:is(button, a, [role="button"]) [class*="text-teal"] {
  color: var(--gp-orange) !important;
}

/* Strong warm fills always use white text; this prevents a legacy green text
   utility from reducing contrast on a recolored CTA. */
:is(button, a, [role="button"])[class*="bg-gradient-to"],
:is(button, a, [role="button"])[class~="pro-btn-grad"],
:is(button, a, [role="button"])[class~="bg-quik-gradient"],
:is(button, a, [role="button"])[class~="bg-vpbank-gradient"],
:is(button, a, [role="button"])[class~="bg-vietcombank-gradient"],
:is(button, a, [role="button"])[class~="bg-quik-blue"],
:is(button, a, [role="button"])[class~="bg-vpbank"],
:is(button, a, [role="button"])[class~="bg-vietcombank"],
:is(button, a, [role="button"])[class~="bg-quik-orange"],
:is(button, a, [role="button"])[class*="bg-[#00b167]"],
:is(button, a, [role="button"])[class*="bg-[#009a59]"],
:is(button, a, [role="button"])[class*="bg-[#28c785]"] {
  color: #fff !important;
}

/* Warm, compact surface system for the recovered screens. */
.bg-quik-gradient,
.bg-vpbank-gradient,
.bg-vietcombank-gradient,
.bg-vpbank-merchant,
.pro-brand-bg,
[class~="from-diamond-navy"],
[class~="from-quik-blue-dark"] {
  background-image: linear-gradient(115deg, #c7462d 0%, var(--gp-red) 48%, var(--gp-orange) 100%) !important;
}

[class~="bg-[#f2f8f5]"],
[class~="bg-[#F4F6FB]"],
[class~="bg-[#f0fbf6]"] {
  background-color: #fff9f4 !important;
  background-image: none !important;
}

/* Replace green/pastel tiles inside navigation links with a single warm
   secondary tone, while leaving positive chart bars untouched. */
:is(button, a, [role="button"]) [class~="bg-[#e6f9f1]"],
:is(button, a, [role="button"]) [class~="bg-[#c0f0dc]"],
:is(button, a, [role="button"]) [class~="bg-vpbank-50"],
:is(button, a, [role="button"]) [class~="bg-vietcombank-50"],
:is(button, a, [role="button"]) [class~="bg-quik-blue-50"],
:is(button, a, [role="button"]) [class~="bg-quik-blue-50/50"] {
  background-color: #fff1dd !important;
  background-image: none !important;
}

:is(button, a, [role="button"]) [class~="text-[#009a59]"],
:is(button, a, [role="button"]) [class~="text-[#007e49]"],
:is(button, a, [role="button"]) [class~="text-[#054c2e]"],
:is(button, a, [role="button"]) [class~="text-vpbank"],
:is(button, a, [role="button"]) [class~="text-vpbank-deep"],
:is(button, a, [role="button"]) [class~="text-vietcombank"],
:is(button, a, [role="button"]) [class~="text-quik-blue"] {
  color: #c85b28 !important;
}

:is(button, a, [role="button"]) [class~="border-[#93e5c3]"],
:is(button, a, [role="button"]) [class~="border-vpbank"],
:is(button, a, [role="button"]) [class~="border-vietcombank"],
:is(button, a, [role="button"]) [class~="border-quik-blue"] {
  border-color: #f4c28c !important;
}

/* Report-period controls: dark text on light pills, white text only on a
   genuinely dark/strong surface. */
button[class~="text-diamond-platinum/80"],
button[class~="text-diamond-platinum/70"],
button[class~="text-diamond-platinum"],
button[class~="text-diamond-ivory"] {
  color: #5b4033 !important;
}

button[class~="text-diamond-navy"] {
  color: #7b2f26 !important;
}

button[class~="bg-white/15"] {
  background-color: rgba(91, 45, 35, .28) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

button[class~="bg-white/15"]:hover,
button[class~="bg-white/15"]:active {
  background-color: rgba(91, 45, 35, .42) !important;
}

[class~="bg-diamond-gold/30"] {
  background-color: rgba(91, 45, 35, .30) !important;
  color: #fff7ed !important;
}

[class~="text-diamond-gold-light"] {
  color: #fff7ed !important;
}

/* Light secondary controls must stay white with warm, readable text. This
   covers the report-export action and the reconciliation secondary action. */
:is(button, a, [role="button"])[class*="bg-white"][class*="border-vpbank"],
:is(button, a, [role="button"])[class*="bg-white"][class*="border-vietcombank"],
:is(button, a, [role="button"])[class*="bg-white"][class*="border-quik-blue"],
:is(button, a, [role="button"])[class*="bg-white"][class*="text-vpbank"],
:is(button, a, [role="button"])[class*="bg-white"][class*="text-vietcombank"],
:is(button, a, [role="button"])[class*="bg-white"][class*="text-quik-blue"] {
  background-color: #fff !important;
  background-image: none !important;
  color: #b94b2c !important;
  border-color: #f4c28c !important;
}

/* Semi-transparent white controls sit on a colored header; use a dark warm
   tint behind white text so the label remains legible. */
[class~="bg-white/15"],
[class~="bg-white/20"] {
  background-color: rgba(91, 45, 35, .28) !important;
}

[class~="bg-white/15"]:hover,
[class~="bg-white/15"]:active,
[class~="bg-white/20"]:hover,
[class~="bg-white/20"]:active {
  background-color: rgba(91, 45, 35, .42) !important;
}

/* More screen rows: tighter rhythm and reliable contrast for the label and
   supporting description. */
a[class~="active:bg-gray-50"] {
  min-height: 58px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

a[class~="active:bg-gray-50"] > div:nth-child(2) > div:first-child {
  color: #1f2937 !important;
}

a[class~="active:bg-gray-50"] > div:nth-child(2) > div:nth-child(2) {
  color: #667085 !important;
}

/* Legacy body/muted utilities are used on many interactive rows and tabs.
   Keep them neutral and readable on white or warm surfaces instead of
   leaking the old bank palette into controls. */
:is(button, a, [role="button"])[class*="text-vpbank-body"],
:is(button, a, [role="button"])[class*="text-vietcombank-body"],
:is(button, a, [role="button"])[class*="text-vpbank-muted"],
:is(button, a, [role="button"])[class*="text-vietcombank-muted"],
:is(button, a, [role="button"])[class*="text-vpbank-deep"],
:is(button, a, [role="button"])[class*="text-vietcombank-deep"] {
  color: #4b5563 !important;
}

:is(button, a, [role="button"])[class*="text-vpbank-body"]:hover,
:is(button, a, [role="button"])[class*="text-vietcombank-body"]:hover,
:is(button, a, [role="button"])[class*="text-vpbank-muted"]:hover,
:is(button, a, [role="button"])[class*="text-vietcombank-muted"]:hover,
:is(button, a, [role="button"])[class*="text-vpbank-deep"]:hover,
:is(button, a, [role="button"])[class*="text-vietcombank-deep"]:hover {
  color: #a93c2b !important;
}

/* The secondary action in reconciliation and similar flows must never be a
   blank orange block: white surface, warm border, dark readable label. */
:is(button, a, [role="button"])[class*="bg-white"][class*="border-vpbank/"],
:is(button, a, [role="button"])[class*="bg-white"][class*="border-vietcombank/"],
:is(button, a, [role="button"])[class*="bg-white"][class*="border-quik-blue/"] {
  background: #ffffff !important;
  background-image: none !important;
  color: #a93c2b !important;
  border-color: #f4c28c !important;
}

:is(button, a, [role="button"])[class*="bg-white"][class*="border-vpbank/"] svg,
:is(button, a, [role="button"])[class*="bg-white"][class*="border-vietcombank/"] svg,
:is(button, a, [role="button"])[class*="bg-white"][class*="border-quik-blue/"] svg {
  color: #f7941d !important;
  stroke: currentColor !important;
}

/* Header navigation buttons sit directly on the red/orange brand bar. A
   warm translucent chip keeps the back icon visible instead of placing cream
   text on a pale tile. */
button[class~="text-diamond-gold-light"],
button[class*="text-diamond-gold-light"] {
  background-color: rgba(91, 45, 35, .28) !important;
  background-image: none !important;
  color: #ffffff !important;
}

button[class~="text-diamond-gold-light"]:hover,
button[class~="text-diamond-gold-light"]:active,
button[class*="text-diamond-gold-light"]:hover,
button[class*="text-diamond-gold-light"]:active {
  background-color: rgba(91, 45, 35, .42) !important;
  color: #ffffff !important;
}

/* Pro home header: give the store identity and notification actions a real
   dark warm chip so the white copy never sits on a washed-out rectangle. */
.pro-brand-bg > div:first-child > button:nth-child(2),
.pro-brand-bg > div:first-child > button:nth-child(3) {
  background-color: rgba(91, 45, 35, .28) !important;
  background-image: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
}

.pro-brand-bg > div:first-child > button:nth-child(2) {
  padding: 7px 10px !important;
}

.pro-brand-bg > div:first-child > button:nth-child(2):hover,
.pro-brand-bg > div:first-child > button:nth-child(2):active,
.pro-brand-bg > div:first-child > button:nth-child(3):hover,
.pro-brand-bg > div:first-child > button:nth-child(3):active {
  background-color: rgba(91, 45, 35, .42) !important;
}

/* Pro home quick actions: keep the light action tray, but use dark readable
   labels beneath the white icon tiles. */
.pro-brand-bg > div:nth-child(2) {
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px 0 9px !important;
  border-radius: 16px 16px 4px 4px !important;
  background: #fff1dd !important;
}

.pro-brand-bg > div:nth-child(2) > button {
  background: transparent !important;
  color: #5b4033 !important;
}

.pro-brand-bg > div:nth-child(2) > button > span:last-child {
  color: #5b4033 !important;
  font-weight: 600 !important;
}

/* Login form accents use old VPBank utility names. Keep the field, heading
   and inline icons on the same GPBank orange system as the CTAs. */
.bg-vpbank-merchant [class~="text-vpbank"],
.bg-vpbank-merchant [class~="text-vpbank-dark"],
.bg-vpbank-merchant [class~="text-vpbank-deep"],
.bg-vpbank-merchant [class~="text-vpbank-gold"] {
  color: #a93c2b !important;
}

.bg-vpbank-merchant input[class*="border-vpbank"],
.bg-vpbank-merchant input[class*="focus:border-vpbank"] {
  border-color: #f4c28c !important;
}

.bg-vpbank-merchant input[class*="focus:border-vpbank"]:focus {
  border-color: #f7941d !important;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, .14) !important;
}

/* Home screen continuity pass: the status strip and the brand header share
   one horizontal gradient, so there is no visible color break at the device
   clock boundary. */
.pro-statusbar,
.pro-brand-bg {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #c7462d 0%, #ef4130 52%, #f7941d 100%) !important;
}

/* Join the quick-action tray to the revenue card as one continuous surface.
   The tray owns the top corners and the card owns the bottom corners; this
   removes the doubled rounded seam visible in the previous preview. */
.pro-brand-bg > div:nth-child(2) {
  border-radius: 18px 18px 0 0 !important;
  border-bottom: 1px solid rgba(244, 194, 140, .55) !important;
}

.pro-screen > div.relative.z-10 > div:first-child {
  border-radius: 0 0 18px 18px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}