/* Warm gold is the main accent throughout the site. */
.site-layout {
    --teal: #8a5a16;
    --line: #eddfc9;
    --ink: #4b3828;
    --muted: #6b5d4b;
    background:
        radial-gradient(ellipse 70% 500px at 85% 4%, #ffe6b5 0%, transparent 75%),
        radial-gradient(ellipse 48% 480px at 0% 35%, #fff0c9 0%, transparent 80%),
        linear-gradient(180deg, #fff8e9 0%, #fffaf3 750px, #fffdf8 100%);
}
.site-header { background: #fffdf8f2; border-bottom-color: #efdfc5; box-shadow: 0 5px 24px #a7782b12; }
.site-brand { color: #6b4b27; }
.site-brand small { color: #8a5d22; }
.site-brand-icon { width: 43px; height: 43px; border: 0; background: transparent; color: #9b6116; box-shadow: none; }
.brand-logo-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-brand-mark .brand-logo-image { width: 44px; height: 44px; }
.site-nav { border-color: #eee2ce; box-shadow: 0 5px 18px #a4772b12; }
.site-nav-link { color: #66543e; }
.site-nav-link:hover { color: #704610; background: #fff6e6; }
.site-nav-link.active { color: #805119; }
.site-nav-link.active::after { background: linear-gradient(90deg, #e2a335, #bc7d22); }
.site-layout .primary-button, .site-layout .hero-side .button, .site-layout .affiliate-home-link .primary-button {
    background: linear-gradient(105deg, #ffe4ad, #ffc878 65%, #ffd5a5);
    border-color: #edbd73;
    color: #57391e;
    box-shadow: 0 5px 15px #d7933b33;
}
.site-layout .primary-button:hover, .site-layout .hero-side .button:hover, .site-layout .affiliate-home-link .primary-button:hover {
    background: linear-gradient(105deg, #ffdfa0, #f8b75d 65%, #ffc790);
    border-color: #d89944;
    color: #4f3117;
}
.site-layout .hero-actions .hero-button { color: #57391e; background: linear-gradient(105deg, #ffe4ad, #ffc878 65%, #ffd5a5); border-color: #ffddab; }
.site-layout .hero-actions .hero-button:hover { background: #ffe1a9; color: #4f3117; }
.site-layout .reference-hero { border-color: #edc98e; box-shadow: 0 16px 40px #bc873a33, 0 3px 12px #e3ad5b24; background-image: linear-gradient(90deg, #35200fdf 0%, #4a2d12a0 38%, #60401b0d 78%), url('../images/chung-suc-gold.webp'); }
.campaign-banner { display: block; align-self: start; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #edc98e; border-radius: 16px; background: #2e1c0e; box-shadow: 0 16px 40px #bc873a33, 0 3px 12px #e3ad5b24; }
.campaign-banner video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.campaign-banner:focus-visible { outline: 3px solid #d99d24; outline-offset: 4px; }
@media (max-width: 760px) { .campaign-banner { border-radius: 12px; } }
.hero-kicker { background: #4d311dbd; border-color: #ffe0a65e; }
.hero-text-link { background: #3f281aaf; text-shadow: 0 1px 4px #35200f; }
.site-layout .reference-hero h1 span { color: #ffe2aa; }
.reference-hero::before { background: radial-gradient(ellipse at 6% 102%, #ffc7656b, transparent 43%), radial-gradient(circle at 98% 6%, #ffe39c66, transparent 35%); }
.site-layout .hero-side { border-color: #f0d8af; background: radial-gradient(circle at 50% 0%, #ffdda1 0%, transparent 48%), linear-gradient(160deg, #fff9eb, #fff0ce 54%, #fffaf0); box-shadow: 0 12px 30px #c18a3921; }
.hero-side-spark { color: #9a641b; border-color: #f1d7a5; box-shadow: 0 5px 20px #d69c4933; }
.site-layout .hero-side-label { color: #795016; border-color: #ecd09d; }
.hero-feature { color: #594633; border-color: #f0dfc1; box-shadow: 0 3px 10px #bd8b4410; }
.hero-feature svg { color: #9b671e; }
.hero-feature:hover { box-shadow: 0 5px 15px #bc8b402d; }
.site-layout .intro-card { border-color: #eedec6; box-shadow: 0 12px 32px #a4783212; }
.site-layout .intro-card::before { background: linear-gradient(90deg, transparent, #e4b564, #ffe1a7, #e4b564, transparent); }
.intro-eyebrow, .site-layout .intro-card h2, .site-layout .intro-card h2 span { color: #875713; }
.intro-badge { color: #80510f; background: #fff5df; border-color: #f1d7a4; }
.intro-columns > div { background: #fffaf2; border-color: #eee1cc; }
.intro-columns h3, .intro-columns > div:last-child h3 { color: #805119; }
.intro-columns ul { color: #635441; }
.intro-columns > div:hover { border-color: #eacb91; box-shadow: 0 8px 20px #ad7b2b16; }
.community-link { color: #714815; background: #fff1d8; }
.site-notice { border-color: #efd7aa; box-shadow: 0 5px 20px #b4843811; }
.site-notice-icon { background: linear-gradient(135deg, #ac7626, #805317); }
.notice-hot { color: #795016; background: #fff2d9; }
.featured-section .section-heading svg { color: #91601c; }
.featured-label { color: #7f5319; background: #fff0d3; }
.featured-grid { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
.feature-tile:hover, .product-card:hover, .activity-card:hover, .affiliate-home-stats > div:hover, .steps-grid > div:hover { border-color: #e4c28c; box-shadow: 0 15px 35px #a6762820; }
.feature-tile > header, .activity-card > header { color: #fffaf0; background: linear-gradient(100deg, #754f21, #9a6b2f); }
.feature-tile-art { background-image: linear-gradient(90deg, #39240fe8, #63421850), url('../images/chung-suc-gold.webp'); }
.feature-tile-art strong { color: #fff4df; text-shadow: 0 3px 12px #3e250f; }
.deposit-activity > header { background: linear-gradient(100deg, #116f70, #258e7d); }
.guide-card { background: linear-gradient(135deg, #fff9ed, #fffdf8); border-color: #f1dfc1; }
.guide-card > span, .guide-card a { color: #805119; }
.guide-row { background: #fffaf1; border-color: #efdfc8; color: #66533d; }
.product-card { border-color: #ebdfcd; background: linear-gradient(150deg, #fff, #fffaf1); }
.package-icon, .price-card:first-child .package-icon, .price-card:last-child .package-icon { color: #94611c; background: #fff1d7; border-color: #efd4a6; box-shadow: 0 5px 14px #d9a35b22; }
.product-card h3 { color: #654825; }
.affiliate-home-stats > div { border-color: #efdfc5; background: linear-gradient(135deg, #fff, #fffaf1); }
.affiliate-home-stats strong { color: #875713; }
.affiliate-home-link { border-color: #efdfc5; background: linear-gradient(110deg, #fff, #fff8e9); }
.steps-grid > div > span { color: #805119; background: #fff0d3; border-color: #eed3a3; }
.eyebrow, .form-kicker { color: #805119; }
.panel-icon, .auth-card-icon, .preview-heading-icon { color: #94611c; background: #fff1d7; border-color: #efd4a6; }
.preview-product { background: #fffaf1; border-color: #efdfc8; color: #5e4a35; }
.preview-product strong { color: #805119; }
.quick-product.selected { border-color: #bd8837; background: #fff4df; box-shadow: 0 0 0 1px #bd8837; }
.quick-product strong { color: #805119; }
.text-input:focus { border-color: #bb8230; box-shadow: 0 0 0 3px #dcaa4e2b; }
.modal-tabs button[aria-selected=true] { color: #805119; }
.auth-modal { box-shadow: 0 24px 80px #81572245, 0 0 0 1px #f0d8af; }
.site-footer { background: #fffdf9; }

/* Keep navigation visible and anchor targets clear of the two-row mobile header. */
.site-header { position: sticky; top: 0; }
@media (max-width: 1100px) { html { scroll-padding-top: 150px; } }

.affiliate-home-stats > div { flex-direction: row; align-items: center; gap: 14px; }
.affiliate-home-stats > div > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.affiliate-home-stats .affiliate-stat-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; color: #875713; background: #fff0d3; }
.affiliate-home-stats strong { line-height: 1.3; }
.affiliate-home-link .referral-link .text-input { min-width: 0; flex: 1; }
.affiliate-home-link .helper-text { margin: 10px 0; }
@media (max-width: 560px) {
    .affiliate-home-link .referral-link .text-input { flex-basis: 100%; }
    .affiliate-home-link .referral-link .button { width: 100%; }
}

/* Order workspace */
.order-page-heading h1, .order-panel-header h2 { display: flex; align-items: center; gap: 9px; }
.order-page-heading h1 svg { color: #b77c1b; }
.order-overview { display: grid; grid-template-columns: minmax(200px, .85fr) minmax(260px, 1fr) minmax(250px, 1.25fr); gap: 14px; margin: 0 0 22px; }
.order-balance-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 21px; color: #fffdf6; border-radius: 14px; background: linear-gradient(130deg, #996119, #c88f27); box-shadow: 0 8px 22px #a3742b2b; }
.order-balance-card > span { display: flex; align-items: center; gap: 7px; }
.order-balance-card strong { font-size: 25px; line-height: 1.2; }
.order-balance-card a { margin-top: auto; padding: 7px 13px; border: 1px solid #ffffff88; border-radius: 30px; color: #fff; background: #ffffff24; }
.order-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.order-stat-grid > div { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid #eddfc9; border-radius: 11px; }
.order-stat-grid strong, .order-stat-grid small { display: block; line-height: 1.4; }.order-stat-grid strong { color: #5f4527; font-size: 19px; }.order-stat-grid small { color: #756c61; font-size: 11px; }
.order-stat-icon, .order-overview-emblem { flex: none; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: #91621e; background: #fff1d4; }.order-stat-icon.success { color: #1e8055; background: #e1f7e9; }
.order-overview-note { display: flex; align-items: center; gap: 15px; padding: 20px; background: linear-gradient(125deg, #fff, #fff8e9); border: 1px solid #eddfc9; border-radius: 14px; }.order-overview-note strong { color: #6d4c22; font-size: 15px; }.order-overview-note p { color: #756c61; margin: 6px 0; }.order-overview-note a { color: #875713; }
.order-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }.order-workspace .panel { min-width: 0; padding: 22px; }.order-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f0e7d9; }.order-panel-header h2 { font-size: 17px; }.order-panel-header p { color: #766d61; margin-top: 3px; font-size: 12px; }
.order-mode-switch { display: flex; gap: 3px; padding: 4px; background: #f4eee4; border-radius: 30px; }.order-mode-switch button { padding: 8px 12px; border: 0; border-radius: 25px; color: #746452; background: transparent; white-space: nowrap; }.order-mode-switch button[aria-pressed="true"] { color: #845410; background: #fff; box-shadow: 0 2px 6px #886b3021; }.order-mode-switch button:focus-visible { outline: 2px solid #a76c16; outline-offset: 2px; }
.order-member-note { display: flex; align-items: center; gap: 9px; padding: 12px; margin: 16px 0 20px; color: #775322; background: #fff8e9; border: 1px solid #f1dfbe; border-radius: 9px; }.order-member-note strong { color: #815000; }
.package-picker .quick-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }.package-picker .quick-product { min-height: 90px; padding: 12px; background: #fffdf9; border-color: #eadfce; cursor: pointer; }.package-picker .quick-product:hover { border-color: #c89549; }.package-picker .quick-product span { color: #5c492e; font-size: 13px; font-weight: 600; }.package-picker .quick-product small { display: block; color: #74695e; margin-top: 4px; overflow-wrap: anywhere; }.package-picker .quick-product strong { font-size: 13px; }.package-picker .quick-product.selected { background: #fff3d8; border-color: #b77c1b; }.package-picker .quick-product:focus-visible { outline: 2px solid #9e6819; outline-offset: 2px; }.package-select-label { margin-top: 10px; }
.order-payment-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 15px; margin: 16px 0; padding: 14px; border-radius: 9px; background: #faf7f1; }.order-payment-details > div { display: flex; flex-direction: column; color: #756b5e; font-size: 12px; }.order-payment-details strong { color: #624725; font-size: 13px; }
.order-checkout { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 16px; border-top: 1px solid #eee3d1; }.order-checkout > div > span, .order-checkout > div > strong { display: block; }.order-checkout > div > span { color: #766c60; }.order-checkout > div > strong { color: #85550f; font-size: 21px; }.order-checkout .button { width: auto; }.order-checkout-note { margin-top: 12px; }.order-unavailable { margin-bottom: 16px; }
.order-search { display: flex; gap: 8px; margin: 16px 0; }.order-search .button { width: auto; flex: none; }.order-tracking-panel .table-wrap { overflow-x: auto; }.order-tracking-panel table { min-width: 500px; }.order-tracking-panel td { vertical-align: top; overflow-wrap: anywhere; }.order-tracking-panel .event-code, .order-tracking-panel .table-subtitle { overflow-wrap: anywhere; word-break: break-word; }.order-tracking-panel .badge { white-space: normal; }
[data-order-panel][hidden] { display: none; }
.guest-overview { grid-template-columns: minmax(200px, .85fr) minmax(250px, 2.25fr); }.guest-picker-label { display: block; color: #554a3d; font-weight: 500; }.package-picker .quick-product:disabled { cursor: not-allowed; opacity: .7; }
@media (max-width: 1000px) { .order-overview { grid-template-columns: 1fr 1.3fr; }.order-overview-note { grid-column: 1 / -1; }.order-workspace { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .order-overview { grid-template-columns: 1fr; }.order-overview-note { grid-column: auto; }.order-workspace .panel { padding: 17px; }.order-panel-header { align-items: flex-start; flex-wrap: wrap; }.package-picker .quick-products { grid-template-columns: repeat(2, minmax(0,1fr)); }.order-checkout { align-items: stretch; flex-direction: column; }.order-checkout .button { width: 100%; } }
@media (min-width: 561px) and (max-width: 1000px) { .guest-overview .order-overview-note { grid-column: auto; } }

/* Account overview */
.account-workspace { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); align-items: start; gap: 20px; }
.account-sidebar, .account-content { display: grid; gap: 16px; min-width: 0; }
.account-workspace .panel { border: 1px solid #eddfc9; border-radius: 15px; box-shadow: 0 9px 28px #9c71370c; }
.account-profile-panel { position: relative; overflow: hidden; padding: 28px 24px 22px; background: linear-gradient(155deg, #fffaf0, #fff 65%); }
.account-profile-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #d59a3b, #f2d39b, #d59a3b); }
.account-profile-decoration { position: absolute; top: 25px; right: 24px; color: #b78130; opacity: .45; }
.account-avatar { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #efca8b; border-radius: 19px; background: linear-gradient(145deg, #fff3d7, #ffe3ac); color: #805116; font-size: 26px; line-height: 1; }
.account-profile-title { margin-top: 17px; min-width: 0; }.account-member-label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid #ebd5ad; border-radius: 20px; background: #fff7e7; color: #805311; font-size: 11px; }.account-profile-title h2 { color: #5a3d20; font-size: 20px; margin: 7px 0 0; overflow-wrap: anywhere; }.account-profile-title p { color: #75685a; overflow-wrap: anywhere; }
.account-profile-meta { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #f0e5d5; color: #685b4c; }.account-profile-meta span { display: flex; align-items: flex-start; gap: 9px; min-width: 0; overflow-wrap: anywhere; }.account-profile-meta svg { flex: none; margin-top: 2px; color: #9d6b28; }
.account-wallet-panel { padding: 22px 24px; }.account-wallet-heading, .account-section-heading, .account-benefit-copy { display: flex; align-items: center; gap: 12px; }.account-small-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #f1dfbd; border-radius: 12px; background: #fff5e2; color: #94611c; }.account-wallet-heading h2, .account-section-heading h2, .account-benefit-copy h2 { font-size: 15px; color: #594127; }.account-wallet-heading p, .account-section-heading p, .account-benefit-copy p { color: #776a5b; font-size: 12px; margin: 3px 0 0; }.account-balance { display: block; margin: 19px 0; color: #805119; font-size: 27px; line-height: 1.2; }.account-balance small { font-size: 16px; margin-left: 3px; }
.account-information, .account-actions { padding: 24px; }.account-section-heading { padding-bottom: 19px; border-bottom: 1px solid #f0e5d5; }.account-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 25px; margin: 2px 0 0; }.account-info-grid > div { min-width: 0; padding: 16px 0; border-bottom: 1px solid #f3ebe0; }.account-info-grid dt { color: #766a5c; font-size: 12px; }.account-info-grid dd { margin: 5px 0 0; color: #503d2b; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.account-benefit { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: linear-gradient(110deg, #fffdf8, #fff2d6); }.account-benefit > strong { color: #895914; font-size: 27px; line-height: 1; }.account-benefit > strong small { font-size: 16px; }
.account-action-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 16px; }.account-action-links a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 54px; padding: 12px; border: 1px solid #eee1cc; border-radius: 10px; color: #6a4c28; background: #fffbf4; }.account-action-links a:hover { color: #6a4311; background: #fff3dc; border-color: #e5c591; text-decoration: none; }.account-action-links a > span { display: flex; align-items: center; gap: 8px; }.account-action-links svg { flex: none; color: #a47229; }
.account-logout { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 13px; padding: 8px 4px; border: 0; background: transparent; color: #9c4a3d; cursor: pointer; }.account-logout:hover { color: #793529; text-decoration: underline; }.account-logout:focus-visible, .account-action-links a:focus-visible { outline: 2px solid #a76c16; outline-offset: 3px; }
@media (max-width: 850px) { .account-workspace { grid-template-columns: 1fr; }.account-sidebar { grid-template-columns: 1fr 1fr; align-items: stretch; }.account-wallet-panel { display: flex; flex-direction: column; }.account-wallet-panel .button { margin-top: auto; } }
@media (max-width: 560px) { .account-sidebar, .account-info-grid, .account-action-links { grid-template-columns: 1fr; }.account-workspace { gap: 14px; }.account-information, .account-actions { padding: 20px; }.account-info-grid > div { padding: 12px 0; }.account-benefit { padding: 18px 20px; }.account-action-links { gap: 8px; }.account-action-links a { min-height: 48px; } }

/* Quick order and public price table */
.home-order-panel { position: relative; overflow: hidden; margin-top: 18px; padding: 24px; border-color: #ebd4ad; background: linear-gradient(145deg, #fffefb, #fff8e9); box-shadow: 0 12px 34px #9c713719; scroll-margin-top: 118px; }
.home-order-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #b87517, #ffd58c, #b87517); }
.home-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #efe1cb; }
.home-order-heading h2 { display: flex; align-items: center; gap: 9px; margin-top: 5px; color: #5c3b18; font-size: 20px; }
.home-order-heading h2 svg { color: #b77a1d; }.home-order-heading p { margin-top: 5px; color: #776b5d; }
.home-balance { flex: none; display: flex; flex-direction: column; align-items: flex-end; padding: 10px 14px; border: 1px solid #ecd5ad; border-radius: 11px; color: #76501c; background: #fff7e8; }.home-balance span { font-size: 10px; }.home-balance strong { font-size: 17px; }
.home-order-panel form { margin-top: 20px; }.home-order-fields { display: grid; grid-template-columns: minmax(240px, 1.6fr) minmax(160px, 1fr); gap: 14px; align-items: start; }.home-order-fields .field { margin: 0; }.home-code-field { grid-column: 1 / -1; }.home-code-field textarea { resize: vertical; min-height: 74px; }
.home-order-checkout { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #efe1cb; }.home-order-price, .home-order-total { display: flex; flex-direction: column; }.home-order-price span, .home-order-total span { color: #7a6d5d; font-size: 11px; }.home-order-price strong { color: #665038; font-size: 14px; }.home-order-price small { color: #8b7b69; }.home-order-total strong { color: #945c0e; font-size: 22px; }.home-order-checkout .button { width: auto; min-width: 180px; }
.home-order-guest { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 18px; border: 1px solid #ecd6b2; border-radius: 12px; background: #fffaf0; }.home-order-guest-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #9a651b; background: #ffedcb; }.home-order-guest strong { color: #62441e; }.home-order-guest p { margin-top: 4px; color: #776b5d; }.home-order-guest .button { width: auto; margin-left: auto; }
.product-table-panel { overflow: hidden; padding: 0; border-color: #eadbc2; }.product-table { min-width: 760px; }.product-table th { color: #735b3d; background: #fff7e9; }.product-table td { vertical-align: middle; }.product-table-name { display: flex; align-items: center; gap: 11px; min-width: 230px; }.product-table-name .package-icon { flex: none; width: 39px; height: 39px; border-radius: 11px; }.product-table-name strong, .product-table-name small { display: block; }.product-table-name strong { color: #574129; }.product-table-name small { max-width: 330px; margin-top: 3px; color: #7b7065; }.product-table .money strong, .product-table .money small { display: block; }.product-table .money small { margin-top: 3px; color: #8b7c6b; font-weight: 400; }.product-table-action { width: auto; min-height: 36px; padding: 7px 12px; white-space: nowrap; }.product-table-muted { color: #aa9d8c; }
@media (max-width: 760px) { .home-order-fields { grid-template-columns: 1fr; }.home-package-field, .home-workers-field, .home-code-field { grid-column: auto; }.home-order-checkout { gap: 14px; flex-wrap: wrap; }.home-order-checkout .button { flex: 1; } }
@media (max-width: 560px) { .home-order-panel { padding: 19px 16px; }.home-order-heading { align-items: flex-start; }.home-balance { padding: 8px 10px; }.home-order-fields { grid-template-columns: 1fr; }.home-package-field, .home-code-field { grid-column: auto; }.home-order-checkout { align-items: stretch; flex-direction: column; }.home-order-checkout .button { width: 100%; }.home-order-guest { align-items: flex-start; flex-wrap: wrap; }.home-order-guest .button { width: 100%; margin-left: 0; } }
.wallet-amount-panel { min-height: 100%; }
.wallet-auto-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; padding: 13px 14px; color: #73501f; background: #fff8e9; border: 1px solid #ecd3a5; border-radius: 10px; font-size: 12px; line-height: 1.65; }
.wallet-auto-note svg { flex: none; margin-top: 1px; color: #b57418; }
.wallet-auto-note strong { color: #965d0d; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
.wallet-qr-button { margin-top: 4px; }
.wallet-qr-button:disabled { cursor: not-allowed; opacity: .55; }
.field-error { margin-top: 7px; color: #b3261e; font-size: 11px; }
.deposit-qr-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; color: #4f402f; background: transparent; border: 0; border-radius: 18px; overflow: visible; }
.deposit-qr-modal::backdrop { background: rgba(36, 27, 17, .65); backdrop-filter: blur(5px); }
.deposit-qr-modal-card { max-height: calc(100vh - 32px); padding: 22px; overflow-y: auto; background: #fffdf9; border: 1px solid #ead8b9; border-radius: 18px; box-shadow: 0 24px 70px rgba(42, 30, 15, .28); }
.deposit-qr-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eee1cd; }
.deposit-qr-modal-header h2 { margin-top: 5px; color: #503b22; font-size: 20px; }
.deposit-qr-close { display: grid; place-items: center; width: 38px; height: 38px; flex: none; color: #765521; background: #fff6e5; border: 1px solid #e8d0a5; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; }
.deposit-qr-close:hover { color: #fff; background: #a86b15; border-color: #a86b15; }
.deposit-qr-close:focus-visible { outline: 3px solid rgba(205, 143, 46, .32); outline-offset: 2px; }
.deposit-qr-modal .vietqr-image-wrapper { width: 260px; }
@media (min-width: 761px) { .wallet-payment-panel { display: none; } }
@media (min-width: 761px) and (max-width: 1000px) { .wallet-top-grid .wallet-side { display: block; } }
@media (max-width: 760px) {
    .wallet-top-grid { display: flex; flex-direction: column; }
    .wallet-top-grid .wallet-amount-panel { order: 1; }
    .wallet-top-grid .wallet-side { display: contents; }
    .wallet-top-grid .balance-card { order: 2; }
    .wallet-top-grid .wallet-payment-panel { order: 3; scroll-margin-top: 92px; }
    .wallet-payment-panel .panel-heading { margin-bottom: 16px; }
    .copy-field { max-width: 100%; flex-wrap: wrap; }
}
.vietqr-box { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; }
.vietqr-image-wrapper { width: 230px; max-width: 100%; aspect-ratio: 1; border-radius: 12px; background: #ffffff; border: 1px solid #ebd8b6; box-shadow: 0 4px 16px rgba(118, 80, 28, 0.08); padding: 8px; display: flex; align-items: center; justify-content: center; }
.vietqr-image-wrapper img { width: 100%; height: auto; display: block; border-radius: 6px; }
.payment-detail-list { width: 100%; margin: 4px 0 0 0; }
.payment-detail-list > div { align-items: center; padding: 10px 0; }
.copy-field { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.copy-val { font-weight: 600; color: #574129; word-break: break-all; }
.memo-highlight { color: #b77a1d; font-family: monospace; font-size: 13px; background: #fff8eb; padding: 2px 7px; border-radius: 6px; border: 1px dashed #e8cb9b; }
.money-highlight { color: #8e580e; font-size: 14px; }
.copy-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #e2cb9f; border-radius: 7px; background: #fffdf9; color: #76521e; font-size: 11px; cursor: pointer; transition: all .15s ease; flex-shrink: 0; }
.copy-chip:hover { background: #fdf5e6; border-color: #c79e49; color: #55370d; }
.copy-chip.copied { background: #27ae60; color: #fff; border-color: #27ae60; }
.payment-note { text-align: center; color: #786d5e; font-size: 11px; line-height: 1.45; }
.notice-inline { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; background: #fff9ea; border: 1px solid #eed6aa; color: #785319; font-size: 12px; width: 100%; }
.notice-inline svg { flex-shrink: 0; color: #b87c1f; }