:root {
  --primary: #ff5d8f;
  --primary-dark: #d6336c;
  --primary-light: #ff8fab;
  --primary-soft: #fff0f5;
  --primary-soft2: #ffe0eb;
  --blush: #fff5f8;
  --blush-deep: #fce4ee;
  --ink: #4a2536;
  --ink-soft: #7a5267;
  --muted: #b0768f;
  --line: #f6d8e4;
  --line-soft: #fbe9f0;
  --canvas: #fff9fb;
  --success: #2bae7e;
  --success-soft: #e9f9f2;
  --success-line: #bfe8d6;
  --warning: #e8930c;
  --warning-soft: #fff7e8;
  --gold: #f2c14e;
  --lilac: #b8a9e8;
  --apple: #e85d3d;
  --radius: 26px;
  --radius-card: 24px;
  --radius-chip: 16px;
}
* { -webkit-tap-highlight-color: transparent; }
body { background: var(--canvas); color: var(--ink); }

.app-shell { background: #fff; border-color: var(--line); box-shadow: 0 20px 60px #d6336c0f; }

/* ————— Header ————— */
.app-header { min-height: 88px; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--blush) 0%, #ffffff 100%); }
.brand { font-size: 24px; letter-spacing: -1.2px; font-weight: 850; line-height: 1; color: var(--ink); }
.brand span { color: var(--primary); }
#headerGreeting { font-size: 11px; margin-top: 10px; color: var(--muted); }
#headerUsername { font-size: 14px; font-weight: 700; letter-spacing: 0; }
#headerRole { font-size: 9px; font-weight: 800; padding: 4px 8px; border: 0; color: var(--primary-dark); background: var(--primary-soft2); border-radius: 999px; }

/* ————— Nội dung chính ————— */
.app-content { padding: 24px 18px 34px; }
.home-intro { padding: 4px 2px 18px; text-align: center; }
.home-intro p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; margin-top: 10px; }
.home-intro h1 { font-size: 27px; line-height: 1.35; letter-spacing: -.8px; font-weight: 780; color: var(--ink); }
.home-intro h1 span { color: var(--primary); }

/* ————— Thẻ ví ————— */
.wallet-card { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 28px; padding: 30px 24px 22px; box-shadow: 0 14px 34px #ff5d8f33; position: relative; overflow: hidden; }
.wallet-card::after { content: "☁️"; position: absolute; right: 14px; bottom: 8px; font-size: 26px; opacity: .35; }
.wallet-card h2 { font-size: 40px; font-weight: 780; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.wallet-card > div:last-child { margin-top: 20px; padding-top: 16px; font-size: 12px; }
.wallet-card button { min-height: 38px; box-shadow: none; font-size: 12px; padding: 10px 18px; border-radius: 999px; }
.wallet-card p { font-size: 12px; letter-spacing: .3px; }

/* ————— Lưới thống kê ————— */
.stats-grid { gap: 10px; margin-top: 18px !important; margin-bottom: 22px !important; }
.stats-grid > div { padding: 16px 6px 14px; border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: 0 4px 16px #d6336c08; background: var(--blush); }
.stats-grid > div > span:nth-child(2) { font-size: 14px; margin: 7px 0 4px; font-variant-numeric: tabular-nums; }
.stats-grid > div > span:last-child { color: var(--muted); font-size: 10px; }

/* ————— Thẻ chuyển đổi link ————— */
.converter-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 18px 20px; box-shadow: 0 10px 30px #d6336c0a; background: #fff; }
.converter-card > div:first-child { font-size: 14px; line-height: 1.7; }
#inputShopeeUrl { padding: 16px 46px 16px 16px; background: var(--blush); border: 1px solid var(--line); border-radius: 16px; font-size: 15px; height: 54px; }
#inputShopeeUrl::placeholder { color: var(--muted); }
#inputShopeeUrl:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px #ff5d8f26; }
#btnSubmitShopee { min-height: 52px; border-radius: 16px; font-size: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); box-shadow: 0 8px 20px #ff5d8f33; animation: ctaPulse 2.6s ease-in-out infinite; }
#btnSubmitShopee:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
@keyframes ctaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
#homeResultBox { margin-top: 16px; border-radius: 18px; background: var(--success-soft); border: 1px solid var(--success-line); padding: 14px; }
#homeResultBox::before { content: "🎉"; }
#homeResultUrl { font-size: 13px; line-height: 1.7; }
#homeResultSubId { max-width: 42%; overflow-wrap: anywhere; font-size: 10px; }
.info-note { margin-top: 20px !important; padding: 18px; border-radius: 20px; background: var(--primary-soft); font-size: 12px; line-height: 1.8; color: var(--ink-soft); border: 1px solid var(--line-soft); }
.info-note p { font-size: 13px; color: var(--ink); }
.info-note::after { content: "💝"; }

/* ————— Tab điều hướng đáy ————— */
.app-nav { border-top: 1px solid var(--line-soft); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #ffffffeb; backdrop-filter: blur(14px); box-shadow: 0 -8px 30px #d6336c0a; border-radius: 24px 24px 0 0; }
.app-nav button { flex: 1; min-height: 52px; color: #c98ca3; gap: 4px; font-size: 11px; font-weight: 600; }
.app-nav button i { font-size: 19px; padding: 6px 14px; margin: 0; border-radius: 14px; transition: background-color .2s; }
.app-nav .tab-active { color: var(--primary-dark); font-weight: 750; }
.app-nav .tab-active i { background: var(--primary-soft2); transform: scale(1.08); }
.app-nav button:active { transform: scale(.95); }

/* ————— Thẻ lịch sử & đơn hàng ————— */
.history-card { padding: 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; overflow-wrap: anywhere; box-shadow: 0 4px 14px #d6336c07; }
.history-card:active { transform: scale(.99); }
.status-pill { font-size: 11px; font-weight: 750; color: var(--warning); background: var(--warning-soft); padding: 6px 10px; border-radius: 999px; }
.status-success { color: var(--success); background: var(--success-soft); }
.small-action { border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; font-size: 12px; color: var(--primary-dark); font-weight: 700; background: var(--blush); }
.small-action:active { transform: scale(.96); }
.empty-state { text-align: center; padding: 55px 28px; border: 2px dashed var(--line); border-radius: 24px; background: var(--blush); color: var(--muted); }
.empty-state::before { content: "🧸"; font-size: 34px; display: block; margin-bottom: 14px; }
.empty-state i { font-size: 24px; color: var(--primary-light); margin-bottom: 10px; }
.empty-state p { font-size: 13px; line-height: 1.8; max-width: 270px; margin: auto; }

/* ————— Dialog & form ————— */
dialog { width: min(390px,calc(100% - 32px)); border: 1px solid var(--line); border-radius: 28px; padding: 28px; max-height: calc(100dvh - 32px); color: var(--ink); box-shadow: 0 28px 90px #d6336c2e; background: #fff; }
dialog::backdrop { background: #4a253655; backdrop-filter: blur(5px); }
dialog .dialog-brand { font-size: 20px; margin-bottom: 22px; }
dialog input { background: var(--blush); min-height: 50px; font-size: 16px; border-radius: 14px; border: 1px solid var(--line); }
dialog input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px #ff5d8f22; }
dialog label { color: var(--ink-soft); font-size: 13px; }
dialog button[type=submit], #authSubmit, #passwordSubmit { background: linear-gradient(135deg, var(--primary), var(--primary-light)); min-height: 50px; font-size: 14px; box-shadow: 0 8px 20px #ff5d8f2e; border-radius: 16px; }
#authTitle { font-size: 24px; line-height: 1.3; letter-spacing: -.5px; }
#authError:empty, #passwordError:empty { display: none; }
#authError:not(:empty), #passwordError:not(:empty) { padding: 12px 14px; background: var(--primary-soft); border: 1px solid var(--line); border-radius: 12px; line-height: 1.6; color: var(--primary-dark); }

/* ————— Trang tài khoản ————— */

/* ————— Trợ giúp & thông báo ————— */
#toast { max-width: calc(100vw - 30px); width: max-content; border-radius: 999px; padding: 14px 20px; top: 14px; font-size: 13px; background: var(--ink); }
button, a { touch-action: manipulation; }
button { transition: background-color .15s, transform .15s, opacity .15s; }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
@media (min-width: 768px) { .app-shell { margin-top: 24px; margin-bottom: 24px; min-height: calc(100vh - 48px); border-radius: 30px 30px 0 0; overflow: visible; } .app-header { border-radius: 30px 30px 0 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.wallet-card p, .wallet-card > div:last-child { color: white; }
#headerUsername { max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profileFullName { overflow-wrap: anywhere; }
#profileAccountHolder { max-width: 60%; text-align: right; overflow-wrap: anywhere; }
#toast { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ————— Điểm nhấn dễ thương ————— */
.app-header::before { content: "🌷 "; }
#viewHome::before { content: "☁️ 🌸 ☁️"; display: block; text-align: center; font-size: 18px; margin-bottom: 10px; opacity: .8; }
.converter-card { position: relative; overflow: hidden; }
.converter-card::before { content: ""; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff0f5 0%, transparent 70%); }

/* ————— Chọn ngân hàng ————— */
.bank-field { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; min-height: 60px; transition: border-color .15s, box-shadow .15s; }
.bank-field:focus-visible, .bank-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #ff5d8f26; }
.bank-field[aria-invalid="true"], .bank-input[aria-invalid="true"] { border-color: #ef4444; background: #fef2f2; }
.bank-input { width: 100%; padding: 14px; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; color: var(--ink); }
.bank-input::placeholder { font-weight: 500; letter-spacing: normal; text-transform: none; color: #94a3b8; }
.field-error { color: #dc2626; font-size: 11px; margin-top: 4px; min-height: 0; }
.field-error:empty { display: none; }
.bank-badge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid var(--line); }
.bank-sheet { width: 100%; max-width: 28rem; max-height: 82vh; background: #fff; border-radius: 26px 26px 0 0; display: flex; flex-direction: column; box-shadow: 0 -10px 40px #0000001f; animation: sheet-up .22s ease-out; }
@media (min-width: 640px) { .bank-sheet { border-radius: 26px; max-height: 75vh; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.bank-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--line-soft); }
.bank-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
.bank-group-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 4px 8px; }
.bank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.bank-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; }
.bank-tile[aria-selected="true"], .bank-row[aria-selected="true"] { border-color: var(--primary); background: var(--primary-soft); }
.bank-list { border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; }
.bank-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; }
.bank-row:last-child { border-bottom: 0; }
.bank-row .bank-badge { width: 36px; height: 36px; border-radius: 10px; }
.bank-row-check { margin-left: auto; color: var(--primary); visibility: hidden; }
.bank-row[aria-selected="true"] .bank-row-check { visibility: visible; }

/* ————— Trang thông báo ————— */
.notif-page { position: fixed; inset: 0; z-index: 55; background: var(--canvas); }
.notif-shell { max-width: 28rem; margin: 0 auto; height: 100%; display: flex; flex-direction: column; background: var(--canvas); }
.notif-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 12px 6px; }
.notif-head h2 { text-align: center; font-size: 18px; font-weight: 800; color: var(--ink); margin: 0; }
.notif-back { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 18px; }
.notif-readall { font-size: 13px; font-weight: 800; color: var(--primary-dark); padding: 8px 6px; }
.notif-readall:disabled { color: #cbd5e1; }
.notif-chips { display: flex; gap: 8px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.notif-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-soft); min-height: 40px; }
.notif-chip[aria-selected="true"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.notif-chip-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.notif-chip-count:empty { display: none; }
.notif-chip[aria-selected="true"] .notif-chip-count { background: #ffffff38; }
.notif-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.notif-group-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 4px 8px; }
.notif-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; overflow: hidden; }
.notif-item { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 14px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line-soft); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:active { background: var(--blush); }
.notif-icon { position: relative; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.notif-icon.is-order { background: #eef4ff; color: #3b6fd8; }
.notif-icon.is-cashback { background: var(--success-soft); color: var(--success); }
.notif-icon.is-withdraw { background: #fff0f1; color: #e0455a; }
.notif-icon.is-refund { background: var(--warning-soft); color: var(--warning); }
.notif-icon.is-system { background: var(--primary-soft); color: var(--primary-dark); }
.notif-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px; background: #e0455a; border: 2px solid #fff; }
.notif-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.notif-item.is-read .notif-title { font-weight: 700; color: var(--ink-soft); }
.notif-text { font-size: 12.5px; color: #64748b; line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-meta { font-size: 11px; color: #94a3b8; margin-top: 5px; }
.notif-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.notif-amount { font-size: 14px; font-weight: 800; white-space: nowrap; }
.notif-amount.is-plus { color: var(--success); }
.notif-amount.is-minus { color: #e0455a; }
.notif-amount.is-pending { color: var(--warning); }
.notif-chevron { color: #cbd5e1; font-size: 12px; }
.notif-more { display: block; margin: 14px auto 0; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; color: var(--primary-dark); }
.notif-empty { text-align: center; padding: 56px 16px; color: var(--ink-soft); font-size: 13px; }
.notif-empty i { font-size: 34px; color: var(--line); display: block; margin-bottom: 12px; }

/* ————— Đơn hàng ————— */
.order-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.order-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.order-chip span { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blush-deep); color: var(--primary-dark); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.order-chip span:empty { display: none; }
.order-chip[aria-selected="true"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.order-chip[aria-selected="true"] span { background: #ffffff38; color: #fff; }
.order-help { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.order-help summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 13.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.order-help summary::-webkit-details-marker { display: none; }
.order-help summary > .fa-circle-question { color: var(--primary-dark); font-size: 16px; }
.order-help-chevron { margin-left: auto; color: #94a3b8; transition: transform .2s; }
.order-help[open] .order-help-chevron { transform: rotate(180deg); }
.order-help-body { padding: 0 16px 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.order-help-body ul { margin: 8px 0 12px; padding-left: 18px; list-style: disc; }
.order-help-body li { margin: 4px 0; }
.order-help-body li::marker { color: var(--primary); }
.order-lookup-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--primary-light); background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 13px; }
.order-card { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; padding: 14px; box-shadow: 0 4px 14px #d6336c07; }
.order-card-head { display: flex; align-items: center; gap: 8px; }
.order-card-code { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-platform { flex: none; padding: 2px 8px; border-radius: 8px; background: #ee4d2d; color: #fff; font-size: 11px; font-weight: 800; }
.order-status { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.order-status.is-PENDING { background: var(--warning-soft); color: #b86e00; }
.order-status.is-APPROVED { background: #eef4ff; color: #3b6fd8; }
.order-status.is-SETTLED { background: var(--success-soft); color: #1d8a62; }
.order-status.is-CANCELLED { background: #f1f5f9; color: #64748b; }
.order-card-date { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.order-product { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.order-product-thumb { width: 40px; height: 40px; border-radius: 12px; background: #f1f5f9; color: #94a3b8; display: flex; align-items: center; justify-content: center; }
.order-product-name { font-size: 12.5px; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-plus { font-size: 13px; font-weight: 800; color: var(--success); white-space: nowrap; }
.order-plus.is-muted { color: #94a3b8; text-decoration: line-through; }
.order-more-items { font-size: 11.5px; color: var(--ink-soft); padding-top: 8px; }
.order-card-total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.order-card-total strong { font-size: 15px; }
.order-sheet { width: 100%; max-width: 28rem; max-height: 88vh; background: #f8f6f7; border-radius: 26px 26px 0 0; display: flex; flex-direction: column; animation: sheet-up .22s ease-out; }
@media (min-width: 640px) { .order-sheet { border-radius: 26px; max-height: 80vh; } }
.order-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border-radius: 26px 26px 0 0; border-bottom: 1px solid var(--line-soft); }
.order-sheet-head h2 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.order-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; }
.order-sheet-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line-soft); }
.od-box { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.od-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #64748b; padding: 3px 0; }
.od-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.od-product-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.4; margin-bottom: 6px; }
.od-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.od-cashback { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 18px; background: var(--success-soft); border: 1px solid var(--success-line); color: #1d8a62; font-weight: 800; margin-bottom: 10px; }
.od-cashback strong { font-size: 22px; }
.od-cashback.is-cancelled { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.order-nocomm { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: rgba(0,0,0,.04); border-radius: 10px; padding: 8px 10px; margin: 8px 0 0; line-height: 1.5; }
.od-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 4px 2px 8px; }
.od-meta { font-size: 12px; color: #94a3b8; margin: 2px; display: flex; align-items: center; gap: 6px; }
.od-copy { color: var(--primary-dark); padding: 4px 6px; }

/* ————— Hướng dẫn ————— */
.guide-entry { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 4px 14px #d6336c07; }
.guide-entry-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.guide-body { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.guide-hero { background: var(--primary-soft); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.guide-hero h3 { font-size: 16px; font-weight: 800; color: var(--primary-dark); margin: 0 0 6px; }
.guide-hero p { margin: 6px 0; color: var(--ink); }
.guide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.guide-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.guide-heading { font-size: 15px; font-weight: 800; color: var(--ink); margin: 18px 2px 8px; }
.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.guide-steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 0 10px 30px; }
.guide-steps li::before { content: counter(step); position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border-radius: 999px; background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.guide-step-icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.guide-steps b { color: var(--ink); }
.guide-steps p { margin: 2px 0 0; font-size: 12.5px; }
.guide-faq { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; }
.guide-faq details { border-bottom: 1px solid var(--line-soft); }
.guide-faq details:last-child { border-bottom: 0; }
.guide-faq summary { list-style: none; cursor: pointer; padding: 14px 40px 14px 16px; position: relative; font-weight: 800; color: var(--ink); font-size: 13.5px; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; position: absolute; right: 16px; top: 11px; font-size: 18px; color: var(--primary-dark); font-weight: 700; }
.guide-faq details[open] summary::after { content: "−"; }
.guide-faq details p { margin: 0; padding: 0 16px 14px; font-size: 12.5px; }
.guide-faq a { color: var(--primary-dark); font-weight: 700; text-decoration: underline; }

/* ————— Giới thiệu bạn bè ————— */
.ref-hero { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; border-radius: 26px; padding: 20px 16px 16px; box-shadow: 0 14px 30px #d6336c33; }
.ref-hero h2 { font-size: 24px; font-weight: 800; margin: 0; }
.ref-hero > p { font-size: 13px; opacity: .9; margin: 4px 0 14px; }
.ref-code-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; color: var(--ink); border-radius: 20px; padding: 14px 16px; }
.ref-code-label { display: block; font-size: 12px; color: var(--ink-soft); }
.ref-code-card strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: .06em; color: var(--primary-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ref-code-copy { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); font-size: 18px; }
.ref-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ref-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.ref-share { background: #fff; color: var(--primary-dark); }
.ref-invite { background: #ffffff2e; color: #fff; border: 1px solid #ffffff66; }
.ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ref-stats > div { background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 14px 8px; text-align: center; }
.ref-stats strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.ref-stats span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ref-stats small { display: block; font-size: 11px; color: var(--primary-dark); font-weight: 700; margin-top: 2px; }
.ref-tier-text.is-BRONZE { color: #b5651d; } .ref-tier-text.is-SILVER { color: #64748b; } .ref-tier-text.is-GOLD { color: #d99a00; }
.ref-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; padding: 16px; }
.ref-card h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.ref-sub { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
.ref-bar { height: 10px; border-radius: 999px; background: #f1f5f9; margin-top: 14px; overflow: hidden; }
.ref-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary-light), var(--primary-dark)); transition: width .4s ease; }
.ref-bar-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: #94a3b8; margin-top: 6px; }
.ref-steps { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: ref; }
.ref-steps li { counter-increment: ref; position: relative; padding: 0 0 14px 40px; }
.ref-steps li::before { content: counter(ref); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--primary-dark); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ref-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.ref-steps b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.ref-steps b i { color: var(--primary-dark); font-size: 13px; }
.ref-steps p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.ref-tiers { display: grid; gap: 8px; margin-top: 12px; }
.ref-tier { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid transparent; }
.ref-tier.is-current { background: var(--primary-soft); border-color: var(--line); }
.ref-tier i { font-size: 20px; text-align: center; }
.ref-tier b { display: block; font-size: 14px; color: var(--ink); }
.ref-tier small { font-size: 12px; color: var(--ink-soft); }
.ref-tier strong { font-size: 20px; font-weight: 800; }
.ref-tier .is-you { color: var(--primary-dark); font-size: 12px; font-weight: 800; margin-left: 4px; }
.ref-rules { margin: 12px 0 0; padding: 12px 12px 12px 30px; background: #f8fafc; border-radius: 14px; font-size: 12px; color: var(--ink-soft); line-height: 1.55; list-style: disc; }
.ref-invitee { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ref-invitee:last-child { border-bottom: 0; }
.ref-invitee b { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ref-invitee small { display: block; font-size: 11.5px; color: #94a3b8; }
.ref-pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #64748b; white-space: nowrap; }
.ref-pill.is-ok { background: var(--success-soft); color: #1d8a62; }
.ref-empty { text-align: center; font-size: 12.5px; color: var(--ink-soft); padding: 14px 6px 4px; }

/* ————— Săn deal ————— */
.deal-entry-icon { background: #fff4e5; color: #f08c00; }
.deals-sub { font-size: 12px; color: var(--ink-soft); text-align: center; margin: -2px 16px 4px; }
.notif-chip i { font-size: 12px; }
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.deal-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.deal-thumb { position: relative; aspect-ratio: 1; background: #f1f5f9; }
.deal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-thumb .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 28px; }
.deal-badge { position: absolute; top: 8px; right: 8px; background: #fff0f1; color: #e0455a; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 8px; }
.deal-flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.deal-flags span { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; color: #fff; }
.deal-flags .is-mall { background: #d0011b; }
.deal-flags .is-flash { background: #f08c00; }
.deal-info { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.deal-name { font-size: 12.5px; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.deal-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.deal-price strong { color: #e0455a; font-size: 15px; font-weight: 800; }
.deal-price s { color: #94a3b8; font-size: 11px; }
.deal-meta { font-size: 11px; color: #94a3b8; }
.deal-voucher { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 1px dashed var(--primary-light); border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 800; min-width: 0; }
.deal-voucher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-voucher small { font-weight: 600; color: var(--ink-soft); display: block; }
.deal-buy { margin-top: auto; min-height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; font-size: 12.5px; font-weight: 800; }
.deal-buy:disabled { opacity: .6; }
.deal-thumb img + .fallback { display: none; }

/* ————— Điểm danh ————— */
.checkin-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: 0 4px 14px #d6336c07; }
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkin-head h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.checkin-head p { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }
.checkin-btn { flex: none; min-height: 42px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; font-weight: 800; font-size: 13px; }
.checkin-btn:disabled { background: #f1f5f9; color: #94a3b8; }
.checkin-week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 14px 0 6px; }
.checkin-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.checkin-week span { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 13px; font-weight: 800; }
.checkin-week .is-checked span { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; }
.checkin-week .is-today span { box-shadow: 0 0 0 2px var(--primary-light); }
.checkin-note { font-size: 12px; color: var(--ink-soft); margin: 0; }
.wheel-entry-icon { background: #eef2ff; color: #6366f1; }
/* ————— Vòng quay ————— */
.wheel-body { text-align: center; }
.wheel-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.wheel-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 26px; padding: 22px 16px; }
.wheel-stage { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin: 6px auto 20px; }
.wheel-svg { width: 100%; height: 100%; transition: transform 4.2s cubic-bezier(.17,.67,.12,1); filter: drop-shadow(0 10px 24px #d6336c33); }
.wheel-pointer { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 24px solid var(--primary-dark); z-index: 2; }
.wheel-hub { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; background: var(--primary-dark); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; border: 5px solid #fde68a; }
.wheel-spin { width: min(100%, 280px); min-height: 52px; border-radius: 999px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .08em; }
.wheel-spin:disabled { opacity: .55; }
.wheel-result { font-size: 15px; font-weight: 800; color: var(--primary-dark); min-height: 22px; margin: 12px 0 0; }
.wheel-locked { font-size: 13px; color: var(--ink-soft); background: #f8fafc; border-radius: 14px; padding: 12px; margin: 12px 0 0; }
.wheel-rules { text-align: left; font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 14px 4px 0; padding-left: 18px; list-style: disc; }
@media (prefers-reduced-motion: reduce) { .wheel-svg { transition: none; } }

.deal-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 16px 6px; padding: 4px; background: #f1f5f9; border-radius: 16px; }
.deal-segment button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.deal-segment button[aria-selected="true"] { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px #0000000f; }
.deal-code-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 16px 6px; padding: 8px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; }
.deal-code-filter button { width: 28px; height: 28px; border-radius: 999px; background: #fff; }
.voucher-list { display: grid; gap: 10px; padding-top: 4px; }
.voucher-ticket { display: grid; grid-template-columns: 96px 1fr; background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; }
.voucher-stub { position: relative; background: linear-gradient(160deg, var(--primary-dark), var(--primary)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; text-align: center; }
.voucher-stub small { font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .9; }
.voucher-stub strong { font-size: 18px; font-weight: 800; line-height: 1.15; }
.voucher-stub::after { content: ""; position: absolute; right: -7px; top: 0; bottom: 0; width: 14px; background: radial-gradient(circle at 7px 7px, var(--canvas) 6px, transparent 6.5px) 0 0 / 14px 16px repeat-y; }
.voucher-main { padding: 12px 12px 12px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.voucher-main h4 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }
.voucher-main p { font-size: 11.5px; color: var(--ink-soft); margin: 0; }
.voucher-actions { display: flex; gap: 8px; }
.voucher-code { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border: 1px dashed var(--primary-light); border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.voucher-code span { overflow: hidden; text-overflow: ellipsis; }
.voucher-see { flex: none; padding: 0 12px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; font-size: 12px; font-weight: 800; }

/* ————— Lịch sử link có ảnh + tên sản phẩm ————— */
.link-product { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-top: 12px; }
.link-thumb { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #f1f5f9; color: #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.link-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.link-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.link-url { display: block; font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ————— Điện thoại: ô nhập ≥ 16px để iPhone không tự phóng to khi chạm vào ô (rồi không thu lại) ————— */
@media (max-width: 768px), (hover: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px !important; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ═════════ Chuyển động — chỉ phản hồi thao tác của khách + một điểm nhấn "kẹo rơi vào ví" ═════════
   Mọi hiệu ứng tắt khi máy bật "giảm chuyển động" (quy tắc prefers-reduced-motion ở trên). */
@keyframes db-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes db-sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes db-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes db-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes db-candy { 0% { transform: translate(-50%, 18px) scale(.7); opacity: 0; } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { transform: translate(-50%, -34px) scale(.9); opacity: 0; } }
@keyframes db-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@keyframes db-reveal { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Hộp thoại & bảng trượt: nền mờ dần, nội dung trượt lên */
#withdrawModal:not(.hidden), #bankModal:not(.hidden), #notificationsModal:not(.hidden), #orderDetailModal:not(.hidden),
#orderLookupModal:not(.hidden), #guideModal:not(.hidden), #bankPicker:not(.hidden) { animation: db-fade-in .18s ease-out; }
#withdrawModal > div, #bankModal > div, #notificationsModal > div { animation: db-sheet-in .26s cubic-bezier(.2,.8,.2,1); }
dialog[open] { animation: db-sheet-in .24s cubic-bezier(.2,.8,.2,1); }
dialog[open]::backdrop { animation: db-fade-in .2s ease-out; }
.notif-page:not(.hidden) { animation: db-sheet-in .24s cubic-bezier(.2,.8,.2,1); }

/* Tạo link: vệt sáng chạy trên nút trong lúc chờ; ô kết quả mở ra */
#btnSubmitShopee:disabled { background-image: linear-gradient(100deg, var(--primary-dark) 30%, var(--primary-light) 50%, var(--primary-dark) 70%); background-size: 200% 100%; animation: db-shimmer 1.2s linear infinite; opacity: 1; }
#homeResultBox:not(.hidden) { animation: db-reveal .3s cubic-bezier(.2,.8,.2,1); }

/* Sao chép: biểu tượng đổi thành ✓ trong chốc lát */
.is-copied { animation: db-pop .32s ease-out; }
.is-copied .fa-copy::before, .is-copied .fa-clone::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* Khung xương khi tải */
.skeleton-list { display: grid; gap: 10px; }
.skeleton-card { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line-soft); }
.skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skeleton-tile { border-radius: 18px; background: #fff; border: 1px solid var(--line-soft); padding: 0 0 12px; overflow: hidden; }
.sk { border-radius: 10px; background: linear-gradient(90deg, #f6eef2 25%, #fdf7fa 50%, #f6eef2 75%); background-size: 200% 100%; animation: db-shimmer 1.3s linear infinite; }
.sk-thumb { width: 52px; height: 52px; border-radius: 12px; }
.sk-line { height: 11px; margin: 6px 0; }
.sk-line.short { width: 55%; }
.sk-square { aspect-ratio: 1; border-radius: 0; margin-bottom: 10px; }
.skeleton-tile .sk-line { margin: 8px 10px; }

/* Điểm nhấn: kẹo rơi vào ví khi số dư tăng */
.wallet-card { isolation: isolate; }
.candy-drop { position: absolute; left: 50%; top: 42%; z-index: 3; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--primary-dark); font-weight: 800; font-size: 14px; box-shadow: 0 8px 20px #d6336c40; pointer-events: none; animation: db-candy 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.balance-bump { display: inline-block; animation: db-pop .45s ease-out; }

/* Điểm danh: ô hôm nay nảy lên khi vừa điểm danh */
.checkin-week .just-checked span { animation: db-pop .45s ease-out; }

/* Vòng quay: pháo giấy khi trúng */
.confetti { position: absolute; left: 50%; top: 50%; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 4; animation: db-confetti 1.1s cubic-bezier(.15,.7,.3,1) forwards; }

.deal-cashback { font-size: 12.5px; font-weight: 800; color: var(--pb-dark, #a23d6e); margin: 2px 0 0; }
.deal-rich { position: absolute; left: 6px; bottom: 6px; background: #ffe7a3; color: #6b4a00; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; }