@charset "UTF-8";
/* KVT voucher UI: yellow/charcoal tickets, cart voucher rows and wallet sheet. Markup comes from vouchers.js. */
:root {
    --kvt-ui-yellow: #ffd500;
    --kvt-ui-yellow-hover: #efc900;
    --kvt-ui-yellow-line: #ebd46f;
    --kvt-ui-soft: #fff9dc;
    --kvt-ui-ink: #202020;
    --kvt-ui-muted: #666;
    --kvt-ui-subtle: #767676;
    --kvt-ui-placeholder: #8a8a8a;
    --kvt-ui-line: #e4e4e4;
    --kvt-ui-page: #f5f5f5;
    --kvt-ui-focus: #8a6c00;
    --kvt-ui-char: #1d1b18;
    --kvt-ui-ticket: #fffbeb;
    --kvt-ui-ticket-line: #f0dfa0;
    --kvt-ui-ok: #1f7a4d;
    --kvt-ui-danger: #b42318;
}

/* Panel (product page) */
.kvt-voucher-panel { box-sizing: border-box; width: 100%; margin: 20px 0; padding: 16px; border: 1px solid #f1e5b9; border-radius: 16px; background: linear-gradient(180deg,#fffdf3,#fff 70%); color: var(--kvt-ui-ink); scroll-margin-top: 76px; }
.kvt-voucher-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kvt-voucher-heading > h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--kvt-ui-ink); font: 700 16px/1.35 Roboto,Arial,sans-serif; text-transform: none; }
.kvt-voucher-heading > h2::before { content: "\f145"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--kvt-ui-char); color: var(--kvt-ui-yellow); font: 900 12px/1 "Font Awesome 6 Free"; transform: rotate(-8deg); }
.kvt-voucher-wallet { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--kvt-ui-ink); font: 600 12px/1.3 Roboto,Arial,sans-serif; white-space: nowrap; cursor: pointer; }
.kvt-voucher-wallet::after { content: "\f054"; color: var(--kvt-ui-subtle); font: 900 10px/1 "Font Awesome 6 Free"; }
.kvt-voucher-wallet:hover { text-decoration: underline; text-underline-offset: 3px; }
.kvt-voucher-preview-label { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; color: var(--kvt-ui-subtle); font: 400 11px/1.5 Roboto,Arial,sans-serif; }
.kvt-voucher-preview-label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #e0a800; }
.kvt-voucher-inline-list,.kvt-wallet-list { display: grid; gap: 10px; }

/* Ticket: stub + perforation + body, notches cut with a mask so they work on any background. */
.kvt-voucher-ticket { --stub: 82px; --notch: 7px; position: relative; display: grid; grid-template-columns: var(--stub) minmax(0,1fr) auto; align-items: center; column-gap: 12px; box-sizing: border-box; min-width: 0; min-height: 88px; margin: 0; padding: 0 12px 0 0; border: 0; border-radius: 12px; background: var(--kvt-ui-ticket); box-shadow: inset 0 0 0 1px var(--kvt-ui-ticket-line); overflow: hidden;
    -webkit-mask: radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
            mask: radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat; }
.kvt-voucher-ticket::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: calc(var(--stub) - 1px); z-index: 1; border-left: 2px dashed #fff8; pointer-events: none; }
.kvt-voucher-mark { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; align-self: stretch; min-height: 88px; padding: 10px 6px; border: 0; background: linear-gradient(150deg,#ffe766,#ffc400); color: var(--kvt-ui-char); font: 800 28px/1 Roboto,Arial,sans-serif; text-align: center; }
/* Icon slot = 1em of the mark so % and the truck sit at the same height; the label never wraps. */
.kvt-voucher-mark::after { content: "GIẢM GIÁ"; margin-top: 6px; font: 700 9px/1.2 Roboto,Arial,sans-serif; letter-spacing: .03em; white-space: nowrap; }
.kvt-voucher-mark.is-shipping { background: linear-gradient(150deg,#3a362f,#151412); color: var(--kvt-ui-yellow); font-size: 0; letter-spacing: 0; }
.kvt-voucher-mark.is-shipping::before { content: "\f0d1"; font: 900 22px/28px "Font Awesome 6 Free"; }
.kvt-voucher-mark.is-shipping::after { content: "VẬN CHUYỂN"; }
.kvt-voucher-ticket:has(.is-shipping)::before { border-left-color: #fff3; }
.kvt-voucher-copy { min-width: 0; padding: 12px 0; }
.kvt-voucher-copy h3 { display: -webkit-box; margin: 0 0 3px; overflow: hidden; color: var(--kvt-ui-ink); font: 700 14px/1.35 Roboto,Arial,sans-serif; text-transform: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kvt-voucher-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--kvt-ui-muted); font: 400 12px/1.45 Roboto,Arial,sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kvt-voucher-copy small { display: block; margin-top: 4px; color: var(--kvt-ui-muted); font: 400 11px/1.45 Roboto,Arial,sans-serif; }
.kvt-voucher-benefit { display: block; margin: 0 0 2px; color: #b8860b; font: 800 15px/1.3 Roboto,Arial,sans-serif; }
.kvt-voucher-code { display: inline-block; margin-top: 6px; padding: 2px 7px; border: 1px dashed #c9a227; border-radius: 5px; background: #fff; color: var(--kvt-ui-ink); font: 700 11px/1.5 ui-monospace,Consolas,monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.kvt-voucher-copy .kvt-voucher-applied { display: flex; align-items: center; gap: 5px; color: var(--kvt-ui-ok); font-weight: 700; }
.kvt-voucher-copy .kvt-voucher-applied::before { content: "\f00c"; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--kvt-ui-ok); color: #fff; font: 900 8px/1 "Font Awesome 6 Free"; }
.kvt-voucher-unavailable { color: var(--kvt-ui-danger) !important; }
.kvt-voucher-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 76px; min-height: 34px; margin: 0; padding: 0 14px; border: 1px solid var(--kvt-ui-char); border-radius: 999px; background: var(--kvt-ui-char); color: var(--kvt-ui-yellow); font: 700 12px/1 Roboto,Arial,sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .1s; }
.kvt-voucher-button:hover:not(:disabled) { background: #000; color: var(--kvt-ui-yellow); }
.kvt-voucher-button:active:not(:disabled) { transform: scale(.96); }
.kvt-voucher-button.is-saved { border-color: #d8d2bd; background: #fff; color: var(--kvt-ui-ink); }
.kvt-voucher-button.is-saved:hover:not(:disabled) { background: #f6f3ea; color: var(--kvt-ui-ink); }
.kvt-voucher-button.is-saved:disabled { min-width: 0; padding: 0 4px; border-color: transparent; background: none; color: var(--kvt-ui-ok); }
.kvt-voucher-button.is-saved:disabled::before { content: "\f00c"; font: 900 11px/1 "Font Awesome 6 Free"; }
.kvt-voucher-button:disabled { cursor: default; }
.kvt-voucher-ticket.is-applied { --kvt-ui-ticket: #fff3c4; box-shadow: inset 0 0 0 2px var(--kvt-ui-char); }
.kvt-voucher-ticket.is-unavailable { --kvt-ui-ticket: #f6f6f5; --kvt-ui-ticket-line: #e6e6e3; }
.kvt-voucher-ticket.is-unavailable .kvt-voucher-mark { filter: grayscale(1); opacity: .45; }
.kvt-voucher-ticket.is-unavailable h3 { color: var(--kvt-ui-subtle); }
.kvt-voucher-ticket.is-unavailable .kvt-voucher-button { border-color: #e2e2e0; background: #ededeb; color: #9a9a96; }
.kvt-voucher-empty { margin: 0; padding: 28px 16px 22px; border: 1.5px dashed #e3dcc4; border-radius: 12px; color: var(--kvt-ui-muted); background: #fffdf6; font: 400 13px/1.5 Roboto,Arial,sans-serif; text-align: center; }
.kvt-voucher-empty::before { content: "\f145"; display: block; margin-bottom: 8px; color: #e0c45c; font: 900 26px/1 "Font Awesome 6 Free"; transform: rotate(-8deg); }
.kvt-voucher-live { margin: 10px 0 0; color: var(--kvt-ui-ok); font: 500 12px/1.5 Roboto,Arial,sans-serif; }
.kvt-voucher-live:empty { display: none; }

/* Cart voucher rows: the whole row opens the wallet through the existing button. */
.kvt-voucher-panel.is-cart { margin: 0 0 18px; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--kvt-ui-line); border-radius: 0; background: none; scroll-margin-top: 140px; }
.kvt-voucher-panel.is-cart .kvt-voucher-heading { margin: 0 0 10px; }
.kvt-voucher-panel.is-cart .kvt-voucher-heading > h2 { font-size: 15px; }
.kvt-voucher-panel.is-cart .kvt-voucher-heading > h2::before { content: none; }
.kvt-voucher-panel.is-cart .kvt-voucher-inline-list { gap: 8px; }
.kvt-voucher-choice { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--kvt-ui-line); border-radius: 12px; background: #fff; transition: border-color .15s, background-color .15s; }
.kvt-voucher-choice:hover { border-color: #d6cfb6; background: #fffdf6; }
.kvt-voucher-choice-icon { position: relative; display: grid; place-items: center; width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(150deg,#ffe766,#ffc400); color: var(--kvt-ui-char); font: 800 15px/1 Roboto,Arial,sans-serif;
    -webkit-mask: radial-gradient(circle 4px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 4px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat;
            mask: radial-gradient(circle 4px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 4px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat; }
.kvt-voucher-choice-icon .fa { font-size: 14px; }
.kvt-voucher-choice:has(.fa-truck) .kvt-voucher-choice-icon { background: linear-gradient(150deg,#3a362f,#151412); color: var(--kvt-ui-yellow); }
.kvt-voucher-choice-copy { min-width: 0; }
.kvt-voucher-choice-copy strong { display: block; color: var(--kvt-ui-ink); font: 600 14px/1.35 Roboto,Arial,sans-serif; }
.kvt-voucher-choice-copy span { display: block; margin-top: 2px; overflow: hidden; color: var(--kvt-ui-subtle); font: 400 12px/1.4 Roboto,Arial,sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.kvt-voucher-choice-action { position: static; display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; margin: 0; padding: 0 0 0 8px; border: 0; border-radius: 0; background: none; color: var(--kvt-ui-ink); font: 700 13px/1 Roboto,Arial,sans-serif; white-space: nowrap; cursor: pointer; }
.kvt-voucher-choice-action::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.kvt-voucher-choice-action::after { content: "\f054"; color: var(--kvt-ui-subtle); font: 900 11px/1 "Font Awesome 6 Free"; }
.kvt-voucher-choice-action:hover { background: none; }
.kvt-voucher-choice-action:focus-visible { outline: 0; }
.kvt-voucher-choice:has(.kvt-voucher-choice-action:focus-visible) { outline: 3px solid var(--kvt-ui-focus); outline-offset: 2px; }
.kvt-voucher-choice.has-voucher { border-color: var(--kvt-ui-char); background: #fffbea; box-shadow: inset 0 0 0 1px var(--kvt-ui-char); }
.kvt-voucher-choice.has-voucher .kvt-voucher-choice-copy span { color: var(--kvt-ui-ok); font-weight: 600; }
.kvt-voucher-choice.has-voucher .kvt-voucher-choice-copy span::before { content: "\f00c"; margin-right: 5px; font: 900 10px/1 "Font Awesome 6 Free"; }
.kvt-voucher-reminder { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: #fff4c7; color: var(--kvt-ui-ink); }
.kvt-voucher-reminder p { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 12px/1.45 Roboto,Arial,sans-serif; }
.kvt-voucher-reminder p::before { content: "\f0f3"; flex: none; color: #b8860b; font: 900 12px/1 "Font Awesome 6 Free"; }
.kvt-voucher-text-button { flex: none; min-height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: var(--kvt-ui-char); color: var(--kvt-ui-yellow); font: 700 12px/1 Roboto,Arial,sans-serif; cursor: pointer; }

/* Wallet + reminder dialogs: centred card on desktop, bottom sheet on phones. */
.kvt-voucher-dialog { box-sizing: border-box; width: min(560px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; margin: auto; padding: 24px; border: 0; border-radius: 20px; color: var(--kvt-ui-ink); background: #fff; box-shadow: 0 24px 80px #0005; }
.kvt-voucher-dialog[open] { animation: kvt-voucher-pop .2s ease-out; }
.kvt-voucher-dialog::backdrop { background: #0f0e0c99; backdrop-filter: blur(2px); }
.kvt-voucher-dialog > h2 { margin: 0 44px 6px 0; color: var(--kvt-ui-ink); font: 700 20px/1.35 Roboto,Arial,sans-serif; text-transform: none; }
.kvt-voucher-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--kvt-ui-ink); background: #f2f1ed; font: 400 24px/1 Roboto,Arial,sans-serif; cursor: pointer; }
.kvt-voucher-close:hover { background: #e8e6df; }
.kvt-voucher-dialog-note { margin: 0 0 16px; color: var(--kvt-ui-subtle); font: 400 12px/1.6 Roboto,Arial,sans-serif; }
.kvt-voucher-dialog .kvt-voucher-button { min-height: 36px; }
.kvt-wallet-rule { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff7d6; color: #5c4a10; font: 500 12px/1.5 Roboto,Arial,sans-serif; }
.kvt-wallet-rule::before { content: "\f05a"; flex: none; color: #b8860b; font: 900 13px/1 "Font Awesome 6 Free"; }
.kvt-wallet-tabs { position: sticky; top: -24px; z-index: 1; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; margin: 0 0 14px; padding: 4px; border: 0; border-radius: 12px; background: #f2f1ed; }
.kvt-wallet-tab { flex: 1; min-height: 38px; margin: 0; padding: 6px 8px; border: 0; border-radius: 9px; color: var(--kvt-ui-muted); background: transparent; font: 600 13px/1.3 Roboto,Arial,sans-serif; cursor: pointer; }
.kvt-wallet-tab[aria-selected="true"] { color: var(--kvt-ui-ink); background: #fff; box-shadow: 0 1px 3px #0000001f; }
.kvt-voucher-warning-copy { margin: 10px 0 14px; color: var(--kvt-ui-ink); font: 400 15px/1.6 Roboto,Arial,sans-serif; }
.kvt-voucher-warning-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; background: none; }
.kvt-voucher-warning-list p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px dashed #d9bd55; border-radius: 10px; background: var(--kvt-ui-ticket); color: var(--kvt-ui-ink); font: 600 14px/1.4 Roboto,Arial,sans-serif; }
.kvt-voucher-warning-list p::before { content: "\f145"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(150deg,#ffe766,#ffc400); color: var(--kvt-ui-char); font: 900 13px/1 "Font Awesome 6 Free"; }
.kvt-voucher-warning-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kvt-voucher-primary,.kvt-voucher-secondary { flex: 1; min-height: 46px; padding: 8px 16px; border: 1px solid var(--kvt-ui-yellow); border-radius: 12px; color: var(--kvt-ui-ink); background: var(--kvt-ui-yellow); font: 700 15px/1.3 Roboto,Arial,sans-serif; cursor: pointer; }
.kvt-voucher-primary:hover { background: var(--kvt-ui-yellow-hover); }
.kvt-voucher-secondary { border-color: #d6d3ca; color: var(--kvt-ui-ink); background: #fff; font-weight: 600; }
.kvt-voucher-secondary:hover { background: #f7f6f2; }
.kvt-voucher-panel button:focus-visible,.kvt-voucher-dialog button:focus-visible { outline: 3px solid var(--kvt-ui-focus); outline-offset: 3px; }
@keyframes kvt-voucher-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes kvt-voucher-sheet { from { transform: translateY(100%); } }
@keyframes kvt-voucher-fade { from { opacity: 0; } }
@media(max-width:600px) {
    .kvt-voucher-panel { margin: 16px 0; padding: 14px; border-radius: 14px; scroll-margin-top: 72px; }
    .kvt-voucher-heading > h2 { font-size: 15px; }
    .kvt-voucher-ticket { --stub: 72px; min-height: 84px; column-gap: 10px; padding-right: 10px; }
    .kvt-voucher-mark { min-height: 84px; padding: 10px 4px; font-size: 24px; }
    .kvt-voucher-mark.is-shipping::before { font-size: 19px; line-height: 24px; }
    .kvt-voucher-mark::after { margin-top: 5px; font-size: 8.5px; letter-spacing: .02em; }
    .kvt-voucher-copy h3 { font-size: 13px; }
    .kvt-voucher-copy p { font-size: 12px; }
    .kvt-voucher-button { min-width: 68px; padding: 0 12px; }
    .kvt-voucher-dialog { width: 100%; max-width: 100%; max-height: 88dvh; margin: auto 0 0; padding: 26px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px #0003; }
    .kvt-voucher-dialog[open] { animation: kvt-voucher-sheet .28s cubic-bezier(.2,.8,.2,1); }
    .kvt-voucher-dialog[open]::backdrop { animation: kvt-voucher-fade .28s ease-out; }
    .kvt-voucher-dialog::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 4px; background: #dcdad3; transform: translateX(-50%); }
    .kvt-voucher-dialog > h2 { font-size: 18px; }
    .kvt-voucher-close { top: 18px; right: 12px; width: 34px; height: 34px; font-size: 22px; }
    .kvt-wallet-tabs { top: -26px; }
    .kvt-voucher-warning-actions { flex-direction: column; }
}
/* Narrow holders (product column, 320px wallet): the action moves under the copy. */
.kvt-voucher-panel,.kvt-wallet-list { container-type: inline-size; }
@container (max-width: 330px) {
    .kvt-voucher-heading { flex-wrap: wrap; row-gap: 2px; }
    .kvt-voucher-ticket { --stub: 72px; grid-template-columns: var(--stub) minmax(0,1fr); }
    .kvt-voucher-mark { grid-row: 1 / span 2; min-height: 0; padding: 10px 4px; font-size: 22px; }
    .kvt-voucher-mark.is-shipping::before { font-size: 18px; line-height: 22px; }
    .kvt-voucher-mark::after { margin-top: 5px; font-size: 8.5px; letter-spacing: .02em; }
    .kvt-voucher-copy { padding: 12px 0 8px; }
    .kvt-voucher-copy h3 { -webkit-line-clamp: 1; }
    .kvt-voucher-ticket .kvt-voucher-button { grid-column: 2; justify-self: start; min-height: 30px; margin: 0 0 12px; }
}
@media(prefers-reduced-motion:reduce) {
    .kvt-voucher-dialog[open],.kvt-voucher-dialog[open]::backdrop { animation: none; }
    .kvt-voucher-button,.kvt-voucher-choice { transition: none; }
}