.loyalty-page,.loyalty-payment{padding:20px;border:1px solid #e7ddcd;border-radius:12px;background:#fff;color:#403a32;margin-bottom:20px}
.loyalty-tabs,.loyalty-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.loyalty-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:20px 0}
.loyalty-card{padding:18px;background:#faf6ed;border:1px solid #ede4d5;border-radius:10px}
.loyalty-card strong{display:block;font-size:26px;margin:10px 0;color:#795c27}
.loyalty-page table{width:100%;border-collapse:collapse}.loyalty-page th,.loyalty-page td{padding:12px;text-align:left;border-bottom:1px solid #eee}
.loyalty-table{overflow-x:auto}.loyalty-page label,.loyalty-dialog label,.loyalty-payment label{display:block;margin:12px 0}
.loyalty-page input:not([type=checkbox]),.loyalty-page select,.loyalty-page textarea,.loyalty-payment input:not([type=checkbox]),.loyalty-payment select{padding:10px;border:1px solid #d5cdbf;border-radius:6px;max-width:100%;width:100%}
.loyalty-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(540px,92vw);max-height:85vh;max-height:85dvh;overflow:auto;padding:25px;border:1px solid #c9a961;border-radius:14px;background:var(--customer-surface,#fff);color:var(--customer-text,#2e3c30);font-family:inherit}
.loyalty-dialog::backdrop{background:#0006}.loyalty-page button,.loyalty-payment button{margin:4px}
/* These controls also run inside the legacy shell, whose secondary buttons are white. */
.loyalty-dialog :is(h3,h4,button,input,select),.loyalty-payment :is(button,input,select){font-family:inherit}
.loyalty-dialog .btn,.loyalty-payment .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;font-size:14px;line-height:1.5;font-weight:600;letter-spacing:normal;text-transform:none;border:1px solid var(--customer-border,#d5cdbf);border-radius:10px;cursor:pointer}
.loyalty-dialog .btn-primary,.loyalty-payment .btn-primary{background:var(--customer-primary,#3d5a45);border-color:var(--customer-primary,#3d5a45);color:#fff}
.loyalty-dialog .btn-primary:hover,.loyalty-payment .btn-primary:hover{background:#354d3b;border-color:#354d3b;color:#fff}
.loyalty-dialog :is(.btn-secondary,.btn-outline),.loyalty-payment :is(.btn-secondary,.btn-outline){background:#fff;color:var(--customer-primary,#3d5a45);border-color:var(--customer-primary,#3d5a45)}
.loyalty-dialog :is(.btn-secondary,.btn-outline):hover,.loyalty-payment :is(.btn-secondary,.btn-outline):hover{background:var(--customer-secondary,#edf1e9);color:var(--customer-primary,#3d5a45)}
.loyalty-dialog .btn:disabled,.loyalty-payment .btn:disabled{opacity:.55;cursor:not-allowed}
.loyalty-dialog .btn:focus-visible,.loyalty-payment .btn:focus-visible{outline:2px solid var(--customer-primary,#3d5a45);outline-offset:3px}
.loyalty-page [role=status]{color:#795c27}.loyalty-history{list-style:none;padding:0}.loyalty-history li{padding:14px 0;border-bottom:1px solid #eee}
.loyalty-payment [hidden]{display:none!important}.loyalty-page .btn:disabled{opacity:.5;cursor:not-allowed}
/* Customer Điểm thưởng (profile). Scoped to #loyalty-section / reward dialog so admin pages are unchanged. */
.loyalty-voucher-list { min-width:0; border:0; margin:16px 0; padding:0; max-height:280px; overflow-y:auto; }
.loyalty-payment .loyalty-voucher-option { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--customer-border,#dee7e0); border-radius:10px; cursor:pointer; min-width:0; }
.loyalty-payment .loyalty-voucher-option > input { width:18px; height:18px; flex:0 0 18px; margin-top:4px; accent-color:var(--customer-primary,#315e4b); }
.loyalty-voucher-option > span { display:block; min-width:0; overflow-wrap:anywhere; }
.loyalty-voucher-option :is(strong,small,span span) { display:block; }
.loyalty-voucher-option:has(input:checked) { border-color:var(--customer-primary,#315e4b); background:var(--customer-secondary,#eef3ef); }
.loyalty-voucher-option:has(input:disabled) { opacity:.6; cursor:not-allowed; }
.loyalty-voucher-option:focus-within { outline:2px solid var(--customer-primary,#315e4b); outline-offset:2px; }
.loyalty-payment { min-width:0; overflow-wrap:anywhere; }
.loyalty-dialog,.package-dialog { max-height:calc(100dvh - 32px); overscroll-behavior:contain; }
.loyalty-payment-header { position:sticky; top:-25px; z-index:2; background:var(--customer-surface,#fff); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.loyalty-payment-footer { position:sticky; bottom:-25px; background:var(--customer-surface,#fff); padding:8px 0; z-index:2; }
body:has(:is(.loyalty-dialog,.package-dialog):modal) { overflow:hidden; }
.package-dialog .package-dialog-close { position:sticky; top:0; z-index:3; min-width:44px; min-height:44px; background:var(--customer-surface,#fff); }
#loyalty-section .loyalty-wallet{grid-template-columns:repeat(3,minmax(0,1fr))}
#loyalty-section .loyalty-wallet .loyalty-card span{display:block;font-size:14px;color:#6b6257}
#loyalty-section .loyalty-tabs{gap:8px;border-bottom:1px solid #ede4d5;padding-bottom:12px}
#loyalty-section .loyalty-tabs [aria-selected=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px #c9a961}
#loyalty-section .loyalty-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:start}
#loyalty-section .loyalty-grid .loyalty-card{display:flex;flex-direction:column;gap:6px;min-width:0}
#loyalty-section .loyalty-grid h3{margin:4px 0;font-size:18px;overflow-wrap:anywhere}
#loyalty-section .loyalty-grid p{margin:0}
#loyalty-section .loyalty-reward [data-redeem]{margin:8px 0 0;align-self:stretch}
.loyalty-badge{display:inline-block;align-self:flex-start;padding:2px 10px;border-radius:999px;background:#efe3c8;color:#5d4518;font-size:13px;font-weight:600}
.loyalty-status{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;background:#eee;color:#444}
.loyalty-status--available{background:#e3f4e6;color:#1f6b33}.loyalty-status--reserved{background:#fff1d6;color:#7a4b00}
.loyalty-status--used,.loyalty-status--fulfilled{background:#e6eef8;color:#244a7a}.loyalty-status--expired,.loyalty-status--cancelled{background:#f4e4e4;color:#8a2c2c}
.loyalty-offer-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.loyalty-offer.is-new{border-color:#c9a961;box-shadow:0 0 0 3px #c9a96155}
.loyalty-offer:focus{outline:2px solid #795c27;outline-offset:2px}
.loyalty-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0;font-size:14px}
.loyalty-facts dt{color:#6b6257}.loyalty-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.loyalty-muted{color:#6b6257;font-size:14px}.loyalty-warn{color:#8a5a00;font-weight:600}.loyalty-error{color:#a12a2a}
.loyalty-code code{font-size:15px;background:#fff;border:1px dashed #c9a961;padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
#loyalty-section .btn-sm{padding:4px 10px;font-size:13px}
.loyalty-toolbar{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end;margin-bottom:8px}
.loyalty-toolbar label{flex:1 1 180px;margin:6px 0!important}.loyalty-toolbar .loyalty-check{flex:0 0 auto;display:flex!important;gap:6px;align-items:center;padding-bottom:10px}
.loyalty-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.loyalty-chip{padding:6px 14px;border:1px solid #d5cdbf;border-radius:999px;background:#fff;color:#403a32;cursor:pointer;margin:0!important}
.loyalty-chip[aria-pressed=true]{background:#795c27;border-color:#795c27;color:#fff}
.loyalty-chip:focus-visible,#loyalty-section .btn:focus-visible{outline:2px solid #795c27;outline-offset:2px}
.loyalty-state{padding:24px;text-align:center;color:#6b6257;background:#faf6ed;border-radius:10px}
.loyalty-notice{padding:12px 16px;margin-bottom:12px;border:1px solid #e9c97a;background:#fff8e6;border-radius:10px}.loyalty-notice p{margin:0 0 6px}
.loyalty-reward-dialog h4{margin:8px 0}.loyalty-reward-dialog .loyalty-actions{justify-content:flex-end;margin:16px 0 0}
@media (max-width:600px){
  #loyalty-section.loyalty-page{padding:14px}
  #loyalty-section .loyalty-wallet{gap:8px}
  #loyalty-section .loyalty-wallet .loyalty-card{padding:10px}
  #loyalty-section .loyalty-wallet .loyalty-card span{font-size:12px}
  #loyalty-section .loyalty-wallet .loyalty-card strong{font-size:20px;margin:6px 0 0}
  #loyalty-section .loyalty-tabs .btn{flex:1 1 auto;padding:8px 10px}
  #loyalty-section .loyalty-grid{grid-template-columns:1fr}
  .loyalty-reward-dialog{padding:18px}.loyalty-reward-dialog .loyalty-actions .btn{flex:1}
}
.loyalty-fieldset{border:0;margin:0;padding:0;min-width:0}.loyalty-fieldset[hidden]{display:none}
/* Gift desk: codes wrap, the handover button stays with the status; phones get one card per redemption. */
.loyalty-desk code{word-break:break-all}.loyalty-desk td{vertical-align:top;font-size:14px}.loyalty-desk [data-fulfill]{display:block;margin:8px 0 0;white-space:nowrap}
@media (max-width:640px){
.loyalty-desk thead{display:none}.loyalty-desk table,.loyalty-desk tbody,.loyalty-desk tr,.loyalty-desk td{display:block;width:100%;box-sizing:border-box}
.loyalty-desk tr{border:1px solid #ede4d5;border-radius:10px;margin:0 0 12px;padding:8px 12px;background:#fff}
.loyalty-page .loyalty-desk td{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:6px 0;border:0}
.loyalty-desk td::before{content:attr(data-label);color:#6b6257;font-size:13px}.loyalty-desk td[colspan]{display:block}.loyalty-desk td[colspan]::before{content:none}
}

/* Hạng thành viên và tiến độ lên hạng */
.loyalty-tier-card { gap: 6px; }
.loyalty-tier-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.loyalty-tier-progress > span {
    display: block;
    height: 100%;
    background: #C9A961;
    border-radius: inherit;
}
.loyalty-tier-card small { display: block; font-size: 12px; opacity: 0.85; }
.loyalty-tier-card .loyalty-tier-note { opacity: 0.7; }

/* E07 customer surface; these selectors do not style the admin loyalty page. */
#loyalty-section,.loyalty-reward-dialog {
  --loyalty-primary:var(--customer-primary,#425f49);--loyalty-text:var(--customer-text,#2e3c30);
  --loyalty-muted:var(--customer-muted,#606e60);--loyalty-surface:var(--customer-surface,#fff);
  --loyalty-secondary:var(--customer-secondary,#edf1e9);--loyalty-border:var(--customer-border,#dce3d8);
  font-family:var(--customer-font,var(--font-body,system-ui));color:var(--loyalty-text);
}
#loyalty-section.loyalty-page { padding:0;border:0;background:transparent; }
#loyalty-section .loyalty-customer-heading { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px; }
#loyalty-section .section-title { font-family:inherit;font-size:28px;font-weight:650;line-height:1.3;margin-bottom:8px; }
#loyalty-section .loyalty-customer-heading p { color:var(--loyalty-muted); }
#loyalty-section :is(h3,h4) { font-family:inherit;color:var(--loyalty-text); }
#loyalty-section :is(p,span,strong,dd,h3),.loyalty-reward-dialog :is(p,dd,h3,h4) { overflow-wrap:anywhere; }
#loyalty-section .btn { min-height:44px;padding:10px 16px;margin:0;font:inherit;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:normal;text-transform:none;border-radius:10px; }
#loyalty-section .btn-primary { background:var(--loyalty-primary);border-color:var(--loyalty-primary);color:#fff; }
#loyalty-section .btn-primary:hover { background:#354d3b;border-color:#354d3b;color:#fff; }
#loyalty-section :is(.btn-outline,.btn-secondary) { background:var(--loyalty-surface);border:1px solid var(--loyalty-border);color:var(--loyalty-primary); }
#loyalty-section :is(.btn-outline,.btn-secondary):hover { background:var(--loyalty-secondary);color:var(--loyalty-primary); }
#loyalty-section .btn:disabled { opacity:1;background:var(--loyalty-secondary);border-color:var(--loyalty-border);color:var(--loyalty-muted);cursor:not-allowed; }
#loyalty-section :is(button,input,select) { font-family:inherit; }
#loyalty-section :is(input:not([type=checkbox]),select) { min-height:44px;font-size:16px;color:var(--loyalty-text);background:var(--loyalty-surface);border-color:var(--loyalty-border);border-radius:10px; }
#loyalty-section input::placeholder { color:var(--loyalty-muted);opacity:1; }
#loyalty-section :is(button,input,select):focus-visible,.loyalty-reward-dialog :is(button,[tabindex]):focus-visible { outline:2px solid var(--loyalty-primary);outline-offset:3px; }
#loyalty-section .loyalty-wallet { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 24px; }
#loyalty-section .loyalty-card { padding:20px;background:var(--loyalty-surface);border-color:var(--loyalty-border);border-radius:14px; }
#loyalty-section .loyalty-wallet .loyalty-card span { color:var(--loyalty-muted);font-size:14px; }
#loyalty-section .loyalty-wallet .loyalty-card > strong { font-size:28px;line-height:1.3;color:var(--loyalty-text);margin:8px 0 0; }
#loyalty-section .loyalty-wallet .loyalty-wallet-available { background:var(--loyalty-secondary); }
#loyalty-section .loyalty-wallet .loyalty-wallet-available > strong { color:var(--loyalty-primary); }
#loyalty-section .loyalty-tier-progress { margin:12px 0 8px; }
#loyalty-section .loyalty-tier-progress > span { background:var(--loyalty-primary); }
#loyalty-section .loyalty-tier-card small { color:var(--loyalty-muted);font-size:13px;opacity:1; }
#loyalty-section .loyalty-wallet-error { grid-column:1/-1; }
#loyalty-section .loyalty-tabs { gap:8px;border-color:var(--loyalty-border); }
#loyalty-section .loyalty-tabs [aria-selected=true] { box-shadow:none; }
#loyalty-section .loyalty-tabs .btn { flex:1 1 auto;transition:none; }
#loyalty-section .loyalty-toolbar { gap:12px; }
#loyalty-section .loyalty-toolbar label { margin:0!important; }
#loyalty-section .loyalty-toolbar .loyalty-check { min-height:44px;padding:0;align-items:center; }
#loyalty-section .loyalty-check input { width:18px;height:18px;accent-color:var(--loyalty-primary); }
#loyalty-section .loyalty-chips { gap:8px; }
#loyalty-section .loyalty-chip { min-height:44px;padding:8px 14px;font:inherit;font-size:14px;border-color:var(--loyalty-border);color:var(--loyalty-text);background:var(--loyalty-surface); }
#loyalty-section .loyalty-chip[aria-pressed=true] { background:var(--loyalty-primary);border-color:var(--loyalty-primary);color:#fff; }
#loyalty-section .loyalty-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px; }
#loyalty-section .loyalty-grid h3 { font-size:20px;line-height:1.4; }
#loyalty-section .loyalty-grid .loyalty-card { gap:12px; }
#loyalty-section .loyalty-card .loyalty-reward-cost { padding:12px;background:var(--loyalty-secondary);border-radius:10px; }
#loyalty-section .loyalty-reward-cost > span { display:block;font-size:14px;color:var(--loyalty-muted); }
#loyalty-section .loyalty-reward-cost > strong { font-size:22px;color:var(--loyalty-primary);margin:4px 0 0; }
#loyalty-section .loyalty-reward [data-redeem] { margin-top:auto; }
#loyalty-section .loyalty-actions { margin:0;gap:8px; }
#loyalty-section [data-pager] .loyalty-actions { margin-top:20px;align-items:center; }
#loyalty-section .loyalty-facts,.loyalty-reward-dialog .loyalty-facts { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 12px; }
#loyalty-section .loyalty-facts dt,.loyalty-reward-dialog .loyalty-facts dt { color:var(--loyalty-muted); }
#loyalty-section .loyalty-code code { border-color:var(--loyalty-border); }
#loyalty-section .loyalty-muted { color:var(--loyalty-muted); }
#loyalty-section .loyalty-state { color:var(--loyalty-text);background:var(--loyalty-secondary);border:1px solid var(--loyalty-border);padding:24px;text-align:left; }
#loyalty-section .loyalty-state .btn { margin-top:12px; }
#loyalty-section .loyalty-state[role=alert] { border-color:#a62b2b; }
#loyalty-section .loyalty-history { padding:0; }
#loyalty-section .loyalty-history li { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;border-color:var(--loyalty-border);padding:20px 0; }
#loyalty-section .loyalty-history-delta { grid-column:2;grid-row:1/span 2;align-self:center;font-size:20px; }
#loyalty-section .loyalty-history .is-credit { color:#23583a; }
#loyalty-section .loyalty-history .is-debit { color:#a62b2b; }
#loyalty-section .loyalty-history p { grid-column:1;grid-row:1; }
#loyalty-section .loyalty-history small { grid-column:1;grid-row:2;color:var(--loyalty-muted);font-size:14px; }
#loyalty-section [role=status],.loyalty-reward-dialog .loyalty-copy-feedback { color:var(--loyalty-primary); }
.loyalty-reward-dialog { border-color:var(--loyalty-border);border-radius:16px; }
.loyalty-reward-dialog h3 { font:inherit;font-size:24px;font-weight:650;margin-bottom:16px; }
.loyalty-reward-dialog h4 { font:inherit;font-size:20px;font-weight:600; }
.loyalty-reward-dialog p { margin-block:12px;line-height:1.6; }
.loyalty-reward-dialog .loyalty-actions { gap:8px;margin-top:20px; }
@media(min-width:1200px){#loyalty-section .loyalty-wallet{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:600px){
  #loyalty-section .loyalty-wallet{gap:12px;}
  #loyalty-section .loyalty-wallet-available,#loyalty-section .loyalty-tier-card{grid-column:1/-1;}
  #loyalty-section .loyalty-card{padding:16px;}
  #loyalty-section .loyalty-tabs{flex-wrap:nowrap;}
  #loyalty-section .loyalty-tabs .btn{padding:10px 8px;font-size:13px;}
  #loyalty-section .loyalty-toolbar label{flex-basis:100%;}
  #loyalty-section .loyalty-facts,.loyalty-reward-dialog .loyalty-facts{grid-template-columns:minmax(0,1fr);gap:2px;}
  #loyalty-section .loyalty-facts dd,.loyalty-reward-dialog .loyalty-facts dd{margin-bottom:8px;}
  #loyalty-section .loyalty-history li{grid-template-columns:minmax(0,1fr);}
  #loyalty-section .loyalty-history-delta{grid-column:1;grid-row:1;}
  #loyalty-section .loyalty-history p{grid-row:2;}
  #loyalty-section .loyalty-history small{grid-row:3;}
}