.vietqr,
.vietqr-banks {
--vietqr-accent: var(--wp-admin-theme-color, #3858e9);
--vietqr-accent-contrast: #fff;
--vietqr-accent-hover: var(--vietqr-accent);
--vietqr-button-radius: var(--vietqr-radius-sm);
--vietqr-text: #1e1e1e;
--vietqr-text-muted: #757575;
--vietqr-surface: #fff;
--vietqr-surface-alt: #f6f7f7;
--vietqr-border: #e0e0e0;
--vietqr-notice: #fcf9e8;
--vietqr-notice-border: #f0c33c;
--vietqr-success: #00a32a;
--vietqr-success-bg: #edfaef;
--vietqr-success-text: #007017;
--vietqr-success-border: #b8e6bf;
--vietqr-radius: 8px;
--vietqr-radius-sm: 4px;
--vietqr-gap: 16px;
--vietqr-focus: 0 0 0 2px var(--vietqr-surface), 0 0 0 4px var(--vietqr-accent);
} .vietqr-checkout__label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.vietqr-checkout__label-logo {
display: inline-block;
height: 18px;
width: auto;
margin: 0;
}
.vietqr-checkout__desc {
margin: 0 0 8px;
}
.vietqr-banks {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.vietqr-banks .vietqr-banks__item {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 36px;
margin: 0;
padding: 4px 6px;
border: 1px solid var(--vietqr-border);
border-radius: var(--vietqr-radius-sm);
background: var(--vietqr-surface);
color: var(--vietqr-text-muted);
font-size: 11px;
line-height: 1.2;
text-align: center;
}
.vietqr-banks .vietqr-banks__logo {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
object-fit: contain;
}
.vietqr-banks .vietqr-banks__item--more {
cursor: help;
} .vietqr {
container-type: inline-size;
container-name: vietqr;
box-sizing: border-box;
max-width: 760px;
margin: 24px auto;
padding: 0;
border: 1px solid var(--vietqr-border);
border-radius: var(--vietqr-radius);
background: var(--vietqr-surface);
color: var(--vietqr-text);
font-size: 15px;
line-height: 1.5;
text-align: left;
overflow: hidden;
}
.vietqr *,
.vietqr *::before,
.vietqr *::after {
box-sizing: inherit;
}
.vietqr :where(p, dl, dt, dd, ul, li, figure, figcaption, h2, header, details, summary) {
margin: 0;
padding: 0;
}
.vietqr :where(img) {
max-width: 100%;
height: auto;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
} .vietqr .vietqr__title,
.vietqr .vietqr__amount,
.vietqr .vietqr__amount-label,
.vietqr .vietqr__amount-value,
.vietqr .vietqr__section-title,
.vietqr .vietqr__hint,
.vietqr .vietqr__divider,
.vietqr .vietqr__notice,
.vietqr .vietqr__label,
.vietqr .vietqr__field,
.vietqr .vietqr__value,
.vietqr .vietqr__app-name {
text-transform: none;
letter-spacing: normal;
font-style: normal;
}
.vietqr .vietqr__field,
.vietqr .vietqr__value {
font-size: 15px;
}
.vietqr .vietqr__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
padding: var(--vietqr-gap);
border-bottom: 1px solid var(--vietqr-border);
}
.vietqr .vietqr__title {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: inherit;
margin: 0;
text-transform: none;
letter-spacing: normal;
}
.vietqr .vietqr__amount {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
}
.vietqr .vietqr__amount-label {
color: var(--vietqr-text-muted);
font-size: 13px;
}
.vietqr .vietqr__amount-value {
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--vietqr-text);
}
.vietqr .vietqr__section-title {
margin: 0 0 12px;
padding: 0;
font-weight: 600;
font-size: 15px;
color: var(--vietqr-text);
}
.vietqr .vietqr__hint {
color: var(--vietqr-text-muted);
font-size: 13px;
margin: 0;
padding: 0;
} .vietqr .vietqr__apps {
container-type: inline-size;
container-name: vietqr-apps;
padding: 0;
} .vietqr .vietqr__app-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
@container vietqr-apps (min-width: 300px) {
.vietqr .vietqr__app-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@container vietqr-apps (min-width: 560px) {
.vietqr .vietqr__app-list {
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
}
.vietqr .vietqr__app-item {
margin: 0;
padding: 0;
list-style: none;
}
.vietqr .vietqr__app-item::before,
.vietqr .vietqr__app-item::marker {
content: none;
}
.vietqr .vietqr__app {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
padding: 10px 3px 8px;
border: 1px solid var(--vietqr-border);
border-radius: var(--vietqr-radius);
background: var(--vietqr-surface);
color: var(--vietqr-text);
font-size: 11px;
font-weight: 500;
line-height: 1.25;
text-align: center;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.1s ease, background-color 0.1s ease;
}
.vietqr .vietqr__app--autofill {
border-color: var(--vietqr-success-border);
}
.vietqr .vietqr__app:hover,
.vietqr .vietqr__app:active {
border-color: var(--vietqr-accent);
background: var(--vietqr-surface-alt);
color: var(--vietqr-text);
}
.vietqr .vietqr__app:focus-visible {
outline: none;
box-shadow: var(--vietqr-focus);
}
.vietqr .vietqr__app-logo-wrap {
display: block;
flex: none;
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--vietqr-surface-alt);
overflow: hidden;
}
.vietqr .vietqr__app-logo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .vietqr .vietqr__app-name {
display: -webkit-box;
max-width: 100%;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow-wrap: break-word;
word-break: normal;
} .vietqr .vietqr__badge {
display: inline-block;
max-width: 100%;
margin-top: auto;
padding: 1px 5px;
border-radius: 8px;
background: var(--vietqr-success-bg);
color: var(--vietqr-success-text);
font-size: 9.5px;
font-weight: 600;
line-height: 1.35;
text-transform: none;
letter-spacing: normal;
white-space: normal;
overflow-wrap: normal;
}
.vietqr .vietqr__more-apps {
margin: 10px 0 0;
}
.vietqr .vietqr__more-apps > summary {
cursor: pointer;
color: var(--vietqr-text);
text-decoration: underline;
text-underline-offset: 2px;
font-size: 14px;
}
.vietqr .vietqr__more-apps > .vietqr__app-list {
margin-top: 8px;
}
.vietqr .vietqr__apps-legend {
margin: 12px 0 0;
}
.vietqr .vietqr__apps-legend .vietqr__badge {
margin: 0 4px 0 0;
vertical-align: 1px;
}
.vietqr .vietqr__divider {
display: flex;
align-items: center;
gap: 12px;
margin-top: var(--vietqr-gap);
color: var(--vietqr-text-muted);
font-size: 13px;
margin-bottom: 0;
padding: 0;
font-size: 13px;
}
.vietqr .vietqr__divider::before,
.vietqr .vietqr__divider::after {
content: "";
flex: 1;
border-top: 1px solid var(--vietqr-border);
} .vietqr .vietqr__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"transfer"
"apps"
"qr";
gap: 20px;
padding: var(--vietqr-gap);
}
.vietqr .vietqr__transfer {
grid-area: transfer;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.vietqr .vietqr__apps {
grid-area: apps;
}
.vietqr .vietqr__qr {
grid-area: qr;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.vietqr .vietqr__qr-image {
display: block;
width: 100%;
max-width: 260px;
aspect-ratio: 1;
margin: 0 auto;
background: #fff;
}
.vietqr .vietqr__details {
display: flex;
flex-direction: column;
min-width: 0;
}
.vietqr .vietqr__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 12px;
padding: 10px 0;
border-top: 1px solid var(--vietqr-border);
}
.vietqr .vietqr__row:first-child {
border-top: 0;
}
.vietqr .vietqr__label {
margin: 0;
color: var(--vietqr-text-muted);
font-size: 13px;
font-weight: 400;
}
.vietqr .vietqr__field {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin-left: auto;
text-align: right;
}
.vietqr .vietqr__value {
min-width: 0;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
.vietqr .vietqr__row--memo .vietqr__value {
padding: 2px 8px;
border-radius: var(--vietqr-radius-sm);
background: var(--vietqr-notice);
font-size: 16px;
letter-spacing: 0.02em;
}
.vietqr .vietqr__notice {
margin: 0;
padding: 10px 12px;
border: 1px solid var(--vietqr-notice-border);
border-radius: var(--vietqr-radius-sm);
background: var(--vietqr-notice);
color: var(--vietqr-text);
font-size: 14px;
} .vietqr .vietqr__button,
.vietqr .vietqr__copy {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--vietqr-accent);
border-radius: var(--vietqr-radius-sm);
cursor: pointer;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.vietqr .vietqr__button {
min-height: 40px;
padding: 8px 16px;
border-color: var(--vietqr-accent);
border-radius: var(--vietqr-button-radius);
background: var(--vietqr-accent);
color: var(--vietqr-accent-contrast);
font-size: 14px;
}
.vietqr .vietqr__button:hover {
border-color: var(--vietqr-accent-hover);
background: var(--vietqr-accent-hover);
color: var(--vietqr-accent-contrast);
}
.vietqr .vietqr__copy {
flex: none;
min-height: 28px;
padding: 4px 10px;
border-color: var(--vietqr-border);
border-radius: var(--vietqr-button-radius);
background: var(--vietqr-surface);
color: var(--vietqr-text);
font-size: 12px;
}
.vietqr .vietqr__copy:hover {
border-color: var(--vietqr-accent);
background: var(--vietqr-surface-alt);
}
.vietqr .vietqr__copy.is-copied {
border-color: var(--vietqr-success);
color: var(--vietqr-success);
}
.vietqr .vietqr__button:focus-visible,
.vietqr .vietqr__copy:focus-visible {
box-shadow: var(--vietqr-focus);
}
.vietqr .vietqr__button:disabled {
cursor: progress;
opacity: 0.7;
}
.vietqr .vietqr__icon {
flex: none;
width: 20px;
height: 20px;
}  .vietqr .vietqr__status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
}
.vietqr .vietqr__status-text {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 220px;
margin: 0;
color: var(--vietqr-text-muted);
font-size: 14px;
}
.vietqr .vietqr__spinner {
flex: none;
width: 14px;
height: 14px;
border: 2px solid var(--vietqr-border);
border-top-color: var(--vietqr-accent);
border-radius: 50%;
animation: vietqr-spin 0.9s linear infinite;
}
.vietqr.is-stopped .vietqr__spinner {
animation: none;
border-top-color: var(--vietqr-border);
}
@keyframes vietqr-spin {
to {
transform: rotate(360deg);
}
}
.vietqr .vietqr__button--secondary {
background: transparent;
color: var(--vietqr-accent);
}
.vietqr .vietqr__button--secondary:hover {
background: var(--vietqr-surface-alt);
color: var(--vietqr-accent);
} .vietqr.vietqr--paid .vietqr__paid {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 24px var(--vietqr-gap);
background: var(--vietqr-success-bg);
color: var(--vietqr-success-text);
text-align: center;
}
.vietqr.vietqr--paid .vietqr__paid-icon {
color: var(--vietqr-success);
}
.vietqr.vietqr--paid .vietqr__hint {
color: var(--vietqr-text);
}
@container vietqr (min-width: 680px) {
.vietqr .vietqr__body {
grid-template-columns: 260px minmax(0, 1fr);
grid-template-areas:
"qr transfer"
"apps apps";
column-gap: 32px;
padding: 24px;
}
.vietqr .vietqr__transfer {
align-self: center;
}
.vietqr .vietqr__header {
padding: 20px 24px;
}
.vietqr .vietqr__amount {
align-items: flex-end;
}
}
@media (prefers-reduced-motion: reduce) {
.vietqr .vietqr__spinner {
animation-duration: 3s;
}
.vietqr *,
.vietqr-banks * {
transition: none;
}
}
@media print {
.vietqr .vietqr__apps,
.vietqr .vietqr__button,
.vietqr .vietqr__copy {
display: none;
}
}li.wc_payment_method>label>img {
max-height: 20px;
max-width: 120px;
}
.power_by {
opacity: 0.68;
}
.list-bank {
max-width: 90px !important;
}
.list-bank-box{
background: #fff !important;
margin-bottom: 4px;
margin-right: 4px;
border: 1px solid #ccc;
}
.list-bank img {
object-fit: contain;
margin: 0px !important;
}