/*
 * Storefront chrome on top of ui-core.css (loaded first). Written mobile
 * first: most customers shop from a phone, so the base rules are the phone
 * layout and the min-width media queries add the tablet/desktop layout.
 *
 * Buttons, fields, cards, badges, alerts, tables, tabs, key/value lists and
 * the utilities all come from ui-core.css; do not redefine them here.
 * Page parts (one view each) live in shop-pages.css, loaded after this file. Layer order
 * (icons, base, components, utilities) is set in ui-assets / ui-core.css.
 *
 * Contents
 *   1. Shop tokens ....... footer colours, header/bottom-nav heights
 *   2. Page frame ........ body, .container, main
 *   3. Header ............ .header, logo, search, action buttons, bell, user chip, menus
 *   4. Page header ....... .page-hero (<x-shop.crumb>)
 *   5. Product tiles ..... .block (home category row), .tiles grid, .tile
 *   6. Prices ............ .price .price-old
 *   7. Account area ...... .account-wrap, .account-nav (layouts.account), profile hero, .sec-score .sec-checks .sec-steps .sec-logout (account.security)
 *   8. Auth card ......... .auth-card (layouts.standalone), the form parts of layouts.auth (auth.css draws its scene): .auth-input, .pw-meter, .social-buttons
 *   9. Misc .............. .qty stepper (.qty-sm), .order-list (orders as cards on phones), .order-card (<x-shop.order-card>, history), .wait-timer
 *  10. Footer ............ payment strip, commitments, dark footer
 *  11. Floating ......... support button, support chat (.chat-fab), event gift (.gift-float, .gift-fab, .gift-dlg), deposit dialog (.dlg, .dep-*), bottom nav
 *  12. Tablet / desktop .. min-width: 768px, 1024px, 1280px
 */
@layer icons, base, components, utilities;

/* ========== 1. Shop tokens ========== */
:root {
    --header-h: 56px;
    /* Height covered by sticky bars: the header, plus the menu row from 768px. Sticky side columns and #anchors start below it. */
    --sticky-top: var(--header-h);
    --bottom-nav-h: 60px;
    --footer-bg: #0f172a;
    --footer-box: #1e293b;
    --footer-text: #cbd5e1;
}
:root[data-theme="dark"] {
    --footer-bg: #060a14;
    --footer-box: #111a2c;
}

@media (min-width: 768px) {
    :root { --header-h: 76px; --sticky-top: calc(var(--header-h) + 47px); }
}

@layer components {
    /* ========== 2. Page frame ========== */
    html { scroll-padding-top: calc(var(--sticky-top) + 12px); }
    body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 12px; }
    main.container { padding-top: 14px; padding-bottom: 16px; min-height: 60vh; }

    /* ========== 3. Header ========== */
    .header { position: sticky; top: 0; z-index: 999; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
    .header-inner { max-width: 1280px; margin: 0 auto; height: var(--header-h); padding: 0 12px; display: flex; align-items: center; gap: 8px; }
    .header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
    .logo { display: flex; align-items: center; min-width: 0; min-height: 40px; font-weight: 700; font-size: 20px; color: var(--primary); white-space: nowrap; overflow: hidden; }
    /* An uploaded logo is drawn --logo-w wide (admin "Độ rộng logo trên máy tính") on computers and in the footer; the phone header gives it the 48px its bar has room for. */
    .logo img { width: auto; max-width: none; height: 48px; flex-shrink: 0; object-fit: contain; object-position: left center; }
    .logo-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 6px; border-radius: 9px; background: var(--grad); color: #fff; font-size: 17px; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
    .logo-text { overflow: hidden; text-overflow: ellipsis; font-size: 16px; letter-spacing: -.2px; }
    @media (min-width: 400px) { .logo-text { font-size: 18px; } }
    /* Search: a soft pill that turns white with the shop-colour ring while typing; the round button on its right sends it. */
    .search { display: none; position: relative; flex: 1; max-width: 520px; }
    .search input { min-height: 44px; padding: 0 52px 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--surface-2); transition: background .15s, border-color .15s, box-shadow .15s; }
    .search input:hover { border-color: var(--border); }
    .search input:focus { background: var(--card); border-color: var(--primary); box-shadow: var(--focus-ring); }
    .search button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--grad); color: #fff; font-size: 19px; cursor: pointer; transition: transform .15s; }
    .search button:hover { transform: scale(1.06); }
    /* Suggestions under a search box (header and search page), filled by shop-core.js. */
    .suggest-box { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 460px); padding: 6px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-pop); text-align: left; }
    .suggest-box[hidden] { display: none; }
    .suggest-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
    .suggest-clear { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; }
    .suggest-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink); }
    .suggest-row:hover, .suggest-row.is-active { background: var(--surface-2); }
    .suggest-media { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: var(--primary-soft); color: var(--primary); font-size: 18px; }
    .suggest-media img { width: 100%; height: 100%; object-fit: cover; }
    .suggest-body { flex: 1; min-width: 0; display: grid; }
    .suggest-body b { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
    .suggest-body small { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
    .suggest-row .badge { flex: none; }
    .suggest-all { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
    .suggest-all b { color: var(--primary); }
    .header-right { display: flex; align-items: center; gap: 6px; flex: none; }
    .header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
    .header-btn > i { font-size: 20px; }
    .btn-topup { background: var(--grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent); }
    .btn-topup:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 34%, transparent); }
    /* Nạp tiền is the one filled button; Nạp game and Làm CTV share one quiet outlined look, only their icon carries a colour. */
    .btn-game, .btn-ctv { --btn-tone: var(--primary); background: var(--card); border-color: var(--border); color: var(--ink); }
    .btn-ctv { --btn-tone: var(--ok); }
    .btn-game > i, .btn-ctv > i { color: var(--btn-tone); }
    .btn-game:hover, .btn-game.active, .btn-ctv:hover, .btn-ctv.active { border-color: var(--btn-tone); background: color-mix(in srgb, var(--btn-tone) 8%, var(--card)); }
    /* Tablets keep the header on one line: Làm CTV shrinks to its briefcase. */
    @media (max-width: 1099px) { .btn-ctv { width: 40px; padding: 0; } .btn-ctv > span { display: none; } }
    .btn-login { background: var(--surface-2); color: var(--ink); }
    .btn-login:hover { background: var(--primary-soft); color: var(--primary-strong); }
    /* On a guest's phone the header keeps room for the logo: topping up needs an account first, and the bottom bar still has Nạp tiền. */
    @media (max-width: 479px) { .header-right:has(.btn-login) .btn-topup { display: none; } }
    .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s, color .15s; }
    .theme-toggle:hover, .bell > summary:hover { background: var(--primary-soft); color: var(--primary-strong); }
    /* The video author's starry moon by day and his sun by night (x-shop.theme-toggle): the one going turns and shrinks away
       as the other turns in. */
    .theme-toggle > svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity .3s ease, rotate .45s cubic-bezier(.2, .8, .2, 1), scale .45s cubic-bezier(.2, .8, .2, 1); }
    .theme-toggle .theme-sun, :root[data-theme="dark"] .theme-toggle .theme-moon { opacity: 0; rotate: -90deg; scale: .4; }
    :root[data-theme="dark"] .theme-toggle .theme-sun { opacity: 1; rotate: 0deg; scale: 1; color: #fbbf24; }
    /* Switching light/dark cross-fades the whole page (shop-core.js wraps it in a View Transition): a quick dissolve on the
       graphics card, the new page (its scene already moving) coming up through the old picture. */
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease-out; }

    .bell, .user-chip { position: relative; }
    :is(.bell, .user-chip) > summary { list-style: none; cursor: pointer; }
    :is(.bell, .user-chip) > summary::-webkit-details-marker { display: none; }
    .bell > summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 21px; transition: background .15s, color .15s; }
    .bell-dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--card); }
    /* Phones show a ☰ menu button (✕ while open) so customers see where their account lives; the avatar, name, balance and caret take its place from 768px. */
    .user-chip > summary { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 12px; transition: background .15s; }
    .user-chip > summary > .avatar, .user-chip .who, .user-chip .user-caret, .user-chip[open] .user-burger .bx-menu, .user-chip:not([open]) .user-burger .bx-x { display: none; }
    .user-burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: 24px; transition: background .15s, color .15s; }
    .user-chip[open] .user-burger { background: var(--primary); color: #fff; }
    .user-chip .who { line-height: 1.2; min-width: 0; }
    .user-chip .who small { display: block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
    .user-chip .who span { font-size: 13px; font-weight: 700; color: var(--accent-strong); }
    .user-chip .user-caret { color: var(--faint); }
    .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 17px; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* Main menu under the header from 768px; phones use the bottom nav instead. */
    .main-nav { display: none; }

    /* Dropdown panels under the header buttons: full width under the header on phones. */
    .pop { position: fixed; z-index: 1000; left: 8px; right: 8px; top: calc(var(--header-h) + 6px); max-height: calc(100vh - var(--header-h) - var(--bottom-nav-h) - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--text); }
    .pop-title { padding: 6px 10px 8px; font-weight: 700; color: var(--ink); }
    .pop-empty { margin: 0; padding: 4px 10px 8px; color: var(--muted); }
    .notice { display: block; padding: 10px; border-top: 1px solid var(--line); border-radius: 8px; color: inherit; }
    .notice:hover { background: var(--hover); }
    .notice b { display: block; }
    .notice p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
    .notice time { font-size: 11.5px; color: var(--faint); }
    .notice.is-new { background: var(--accent-soft); }
    .notice b > i { margin-right: 6px; font-size: 16px; vertical-align: -3px; }
    .notice-success b > i { color: var(--ok); }
    .notice-info b > i { color: var(--info); }
    .notice-warning b > i { color: var(--warn); }
    .notice-failed b > i { color: var(--bad); }
    .menu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
    .menu-head b { color: var(--ink); }
    .menu-who { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; line-height: 1.3; }
    .menu-who .avatar { width: 36px; height: 36px; }
    .menu-who > span { min-width: 0; }
    .menu-who b { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .menu-who small { display: block; font-size: 12px; }
    .menu-who .menu-balance b { display: inline; color: var(--accent-strong); font-size: inherit; }
    .acct-menu .menu-head .menu-theme { flex: none; display: inline-grid; width: 32px; min-height: 0; height: 32px; padding: 0; border-radius: 50%; background: var(--card); font-size: 17px; }
    .acct-menu .menu-head .menu-theme > i { color: var(--text); font-size: 17px; }
    .menu-group { display: block; padding: 10px 10px 4px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
    .pop a, .pop button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .pop a > i, .pop button > i { font-size: 18px; color: var(--muted); }
    .pop a:hover, .pop button:hover { background: var(--hover); color: var(--primary); }
    .pop a.notice { display: block; min-height: 0; padding: 10px; }
    /* Account menu rows: each icon sits in a soft tile of its group's tone. */
    .acct-menu .menu-sec { --tone: var(--primary); }
    .acct-menu .tone-info { --tone: var(--info); }
    .acct-menu .tone-warn { --tone: var(--warn); }
    .acct-menu .tone-ok { --tone: var(--ok); }
    .acct-menu .tone-ink { --tone: var(--ink); }
    .acct-menu .menu-sec a > i, .acct-menu .menu-sec button > i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); font-size: 15px; }
    .acct-menu .menu-sec a:hover, .acct-menu .menu-sec button:hover { background: color-mix(in srgb, var(--tone) 8%, transparent); color: var(--ink); }
    /* One item per row, kept low so the list stays short. */
    .acct-menu .menu-sec a, .acct-menu .menu-sec button { gap: 9px; min-height: 34px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
    .acct-menu .menu-group { padding: 8px 8px 2px; font-size: 10.5px; }
    .acct-menu .menu-foot { --tone: var(--muted); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
    .acct-menu .menu-foot .menu-logout { --tone: var(--bad); color: var(--bad); }
    /* Phones: a narrow list under the ☰ button instead of a full-width panel. */
    .pop.acct-menu { left: auto; width: min(284px, calc(100vw - 16px)); }
    /* "Làm CTV" card at the top of the account menu. */
    .pop a.menu-ctv { margin: 6px 0 4px; padding: 8px 10px; background: var(--ok-soft); color: var(--ok-ink); }
    .pop a.menu-ctv > i { color: inherit; font-size: 20px; }
    .pop a.menu-ctv > i:last-child { margin-left: auto; font-size: 18px; }
    .pop a.menu-ctv span { display: grid; line-height: 1.3; }
    .pop a.menu-ctv small { color: var(--muted); font-size: 12px; font-weight: 500; }
    .pop a.menu-ctv:hover { background: color-mix(in srgb, var(--ok) 20%, var(--card)); color: var(--ok-ink); }
    .pop .bell-sound { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; font-size: 13px; color: var(--muted); }
    .pop .bell-sound[aria-pressed="false"] > i { color: var(--faint); }
    /* A new notice that arrived while the page was open, under the header for a few seconds. */
    .notice-toast { position: fixed; z-index: 1600; left: 8px; right: 8px; top: calc(var(--header-h) + 8px); display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--text); animation: notice-in .25s ease-out; }
    .notice-toast > i { flex: none; font-size: 22px; color: var(--ok); }
    .notice-toast.notice-info > i { color: var(--info); }
    .notice-toast.notice-warning > i { color: var(--warn); }
    .notice-toast.notice-failed > i { color: var(--bad); }
    .notice-toast b { display: block; color: var(--ink); }
    .notice-toast p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
    .notice-welcome { align-items: center; overflow: hidden; cursor: pointer; }
    .notice-welcome > i { font-size: 26px; }
    .notice-welcome p strong { color: var(--ink); }
    .notice-welcome::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ok); transform-origin: left; animation: welcome-timer 5s linear forwards; }
    .notice-welcome.notice-info::after { background: var(--info); }
    @keyframes welcome-timer { to { transform: scaleX(0); } }
    @keyframes notice-in { from { opacity: 0; transform: translateY(-8px); } }
    .pop form { margin: 0; }

    .impersonation-bar { background: #0f172a; color: #fff; font-size: 13px; }
    .impersonation-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .impersonation-bar button { border: 0; border-radius: 8px; background: #fff; color: #0f172a; padding: 6px 12px; font-weight: 600; cursor: pointer; }

    /* ========== 4. Page header: <x-shop.crumb> ========== */
    .page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 14px; padding: 14px; border-radius: var(--radius); background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 12%, var(--card)), var(--card) 70%); box-shadow: var(--shadow-card); overflow: hidden; }
    .page-hero::after { content: ""; position: absolute; z-index: -1; top: -70px; right: -50px; width: 180px; height: 180px; border-radius: 50%; border: 26px solid color-mix(in srgb, var(--primary) 8%, transparent); }
    .page-hero-icon { --tile: var(--primary); --tile-2: var(--primary-strong); flex: none; }
    .page-hero-icon img, .page-hero-icon .shortcut-icon { width: 56px; height: 56px; border-radius: 17px; object-fit: cover; }
    .page-hero-icon img { box-shadow: var(--shadow-card); }
    .page-hero-icon .shortcut-icon { font-size: 28px; }
    .page-hero-icon img.is-card { width: auto; aspect-ratio: 3 / 2; border-radius: 12px; }
    .page-hero-body { min-width: 0; flex: 1; }
    .page-hero-path { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
    .page-hero-path > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .page-hero-path a { padding: 8px 0; color: inherit; }
    .page-hero-path a:hover { color: var(--primary); }
    .page-hero-path a:last-child { font-weight: 600; color: var(--primary); }
    .page-hero h1 { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
    .page-hero p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
    .page-hero-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
    .page-hero-stats li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-card); font-size: 12px; font-weight: 600; color: var(--ink); }
    .page-hero-stats i { font-size: 15px; color: var(--primary); }
    .page-hero-stats .bxs-check-circle { color: var(--ok); }
    .page-hero-stats .bxs-hot, .page-hero-stats .bxs-zap { color: var(--warn); }
    .page-hero-stats .bxs-star { color: var(--yellow-500); }
    .page-hero-stats li.is-out { background: var(--bad-soft); box-shadow: none; color: var(--bad-ink); }
    .page-hero-stats li.is-out i { color: var(--bad); }
    .page-hero-stats li.is-off { background: var(--ok-soft); box-shadow: none; color: var(--ok-ink); }
    .page-hero-stats li.is-off i { color: var(--ok); }
    .page-hero-stats li:has(> .badge) { padding: 0; background: none; box-shadow: none; }

    /* ========== 5. Product tiles ========== */
    .block { margin: 0 0 32px; }
    main.container > .block:last-child { margin-bottom: 0; }
    /* Section head: a big bold title on the left, a quiet "Xem tất cả ›" link on the right. */
    .block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
    .section-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink); letter-spacing: -.02em; text-wrap: balance; }
    /* A title's icon sits in a small gradient chip (the shop colour; a block may tint it). */
    .section-title > i { --chip: var(--primary); --chip-2: var(--primary-strong); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(135deg, var(--chip), var(--chip-2)); color: #fff; font-size: 18px; box-shadow: 0 6px 14px color-mix(in srgb, var(--chip) 30%, transparent); }
    .block-link { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; color: var(--primary); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s; }
    .block-link > i { font-size: 18px; transition: transform .15s; }
    .block-link:hover { background: var(--primary-soft); }
    .block-link:hover > i { transform: translateX(2px); }
    .section-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
    .block-more { display: flex; justify-content: center; margin-top: 18px; }
    .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
    /* Product card: no border, a soft shadow, the picture inset in its own rounded frame; lifts on hover. */
    .tile { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 7px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); color: inherit; transition: transform .2s, box-shadow .2s; }
    .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
    .tile-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
    .tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
    .tile:hover .tile-media img { transform: scale(1.04); }
    /* Picture placeholder (x-shop.media): gradient with a soft light spot and dot pattern, an icon badge picked from the name, then the label. ph-0 … ph-5 is the colour, picked from the name. */
    .media-placeholder { --ph-1: #f43f5e; --ph-2: #f97316; display: flex; flex-direction: column; gap: .45em; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 8px 10px; overflow: hidden; text-align: center; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.2; text-shadow: 0 1px 2px rgb(0 0 0 / .18); background: radial-gradient(circle at 18% 12%, rgb(255 255 255 / .28), transparent 42%), radial-gradient(rgb(255 255 255 / .13) 1px, transparent 1.5px) 0 0 / 12px 12px, linear-gradient(135deg, var(--ph-1), var(--ph-2)); }
    .media-placeholder > i { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 30%; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); font-size: 1.9em; text-shadow: none; }
    .media-placeholder > span:empty { display: none; }
    .media-placeholder > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }
    .ph-1 { --ph-1: #8b5cf6; --ph-2: #d946ef; }
    .ph-2 { --ph-1: #0ea5e9; --ph-2: #6366f1; }
    .ph-3 { --ph-1: #10b981; --ph-2: #0891b2; }
    .ph-4 { --ph-1: #f59e0b; --ph-2: #ef4444; }
    .ph-5 { --ph-1: #ec4899; --ph-2: #8b5cf6; }
    /* A product card already prints the name under the picture and covers the picture's edges with badges, so only the icon shows there. */
    .tile-media .media-placeholder { padding-bottom: 14px; font-size: 18px; }
    .tile-media .media-placeholder > span { display: none; }
    .tile-stats { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(15, 23, 42, .8); color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
    .tile-stats .sep { display: inline-block; width: 1px; height: 9px; margin: 0 5px; background: rgba(255, 255, 255, .5); vertical-align: middle; }
    .tile-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: #facc15; color: #78350f; font-size: 10.5px; font-weight: 700; }
    .tile-badge.flash, .flash-tag { gap: 2px; background: linear-gradient(90deg, #ee2c2c, #ff7337); color: #fff; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
    .tile-badge.flash b, .flash-tag b { margin-left: 3px; padding: 0 4px; border-radius: 4px; background: #ffd424; color: #ee2c2c; }
    .flash-tag { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 5px; font-size: 11px; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
    .tile-badge.image { padding: 0; background: none; }
    .tile-badge.image img { height: 22px; width: auto; }
    .tile-body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 11px 4px 3px; }
    .tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
    .tile-sub { font-size: 12.5px; font-weight: 600; color: var(--accent-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tile-sub:has(+ .tile-price) { font-weight: 500; color: var(--muted); }
    /* The price sits on the card's floor under a dashed rule, so a row of cards lines up whatever the name length. */
    .tile-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }
    .tile .price { font-size: 16px; letter-spacing: -.01em; }
    .sold-out { position: absolute; inset: 0; display: grid; place-items: center; background: var(--veil); color: var(--bad); font-weight: 700; font-size: 15px; }

    /* ========== 6. Prices ========== */
    .price { color: var(--accent-strong); font-weight: 700; }
    .price-old { color: var(--faint); text-decoration: line-through; font-size: 12.5px; font-weight: 500; }

    /* ========== 7. Account area (layouts.account) ========== */
    .account-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
    .account-side { min-width: 0; }
    .account-user { display: none; }
    /* Phones: the menu is a row of chips that scrolls sideways. */
    .account-nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 -12px; padding: 2px 12px 4px; scrollbar-width: none; }
    .account-nav::-webkit-scrollbar { display: none; }
    /* Any sideways row being dragged with the mouse (shop-core.js): no text selection, and links/labels inside do not steal the drag. */
    .is-dragging { cursor: grabbing; user-select: none; }
    .is-dragging * { pointer-events: none; }
    .account-nav a, .account-nav button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
    .account-nav a > i, .account-nav button > i { font-size: 17px; }
    .account-nav .active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .account-nav form { margin: 0; flex: none; }
    .account-nav .nav-logout, .account-nav .nav-group, .account-nav .nav-sub-only { display: none; }
    .account-main { min-width: 0; }
    /* Account pages: cards stack on phones, two columns from 1024px (.account-cols). */
    .account-cols { display: grid; gap: 0 20px; align-items: start; }
    .account-cols > * { min-width: 0; }
    .setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
    .setting-row > div { flex: 1 1 240px; min-width: 0; }
    .setting-row h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
    .setting-row h2 > i { color: var(--primary); font-size: 19px; }
    .setting-row p { margin: 0; font-size: 13px; color: var(--muted); }
    .setting-row + .setting-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    /* Member rank (account.profile #hang): the badge reached, a meter to the next rank and the whole ladder with each rank's deposit floor; colours from .rank-{style} (ui-core.css § 3.19). */
    .rank-card { position: relative; display: grid; gap: 14px; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--rank-b) 30%, var(--line)); }
    .rank-card::before { content: ''; position: absolute; z-index: -1; top: -80px; left: -60px; width: 260px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rank-b) 22%, transparent), transparent); }
    .rank-card-head { display: flex; align-items: center; gap: 14px; }
    .rank-card-head small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
    .rank-card-head h2 { margin: 0 0 2px; color: color-mix(in srgb, var(--rank-c) 80%, var(--ink)); font-size: 22px; line-height: 1.2; }
    .rank-card-head p { margin: 0; color: var(--muted); font-size: 13px; }
    .rank-card-head p b { color: var(--ink); }
    .rank-track-scroll { margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
    .rank-track-scroll::-webkit-scrollbar { display: none; }
    .rank-track { --stop: 44px; position: relative; min-width: calc(var(--steps) * 72px); padding-top: 30px; }
    .rank-rail { position: absolute; top: calc(30px + var(--stop) * .516 - 5px); left: calc(50% / var(--steps)); right: calc(50% / var(--steps)); height: 10px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
    .rank-rail-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: inherit; background: var(--grad); box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 40%, transparent); transform-origin: left; animation: rank-fill 1s cubic-bezier(.22, .9, .3, 1) both; }
    .rank-pin { position: absolute; bottom: calc(100% + var(--stop) * .42 + 4px); left: var(--fill); translate: -50% 0; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 30%, transparent); animation: rank-pin .5s .7s both; }
    .rank-pin::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--primary); }
    .rank-stops { position: relative; display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
    .rank-stops li { display: grid; justify-items: center; align-content: start; gap: 1px; text-align: center; }
    .rank-stops .rank-badge { --size: var(--stop); margin-bottom: 2px; }
    .rank-stops .rank-badge.is-locked { filter: grayscale(1) opacity(.55); }
    .rank-stop-dot { width: var(--stop); height: var(--stop); margin-bottom: 2px; display: grid; place-items: center; }
    .rank-stop-dot::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px color-mix(in srgb, var(--primary) 40%, transparent); }
    .rank-stops li.is-current .rank-badge { animation: rank-beat 2.2s ease-in-out infinite; }
    .rank-stops b { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 12.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .rank-stops li:not(.is-done) b { color: var(--muted); font-weight: 600; }
    .rank-stops li.is-current b { color: color-mix(in srgb, var(--rank-c) 80%, var(--ink)); }
    .rank-stops small { color: var(--muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .rank-perks { display: grid; gap: 10px; }
    .rank-perks-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14px; }
    .rank-perks-head i { align-self: center; color: var(--primary); font-size: 17px; }
    .rank-perks-head span { flex: 1 1 100%; color: var(--muted); font-size: 12.5px; }
    .rank-perks-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 8px; margin: 0 -20px; padding: 4px 20px 6px; overflow-x: auto; scroll-padding: 0 20px; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .rank-perks-list::-webkit-scrollbar { display: none; }
    .rank-perks-list li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--rank-b) 14%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-b) 22%, var(--line)); text-align: center; scroll-snap-align: start; }
    .rank-perks-list .rank-badge { --size: 34px; margin-bottom: 2px; }
    .rank-perks-list b { color: color-mix(in srgb, var(--rank-c) 80%, var(--ink)); font-size: 12.5px; line-height: 1.2; }
    .rank-perks-list strong { background: linear-gradient(135deg, var(--rank-a), var(--rank-c)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .rank-perks-list small { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
    .rank-perks-list li.is-locked { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
    .rank-perks-list li.is-locked strong { opacity: .75; }
    .rank-perks-list li.is-current { box-shadow: inset 0 0 0 2px var(--rank-b), 0 6px 16px color-mix(in srgb, var(--rank-b) 28%, transparent); }
    .rank-perks-list li.is-current small { color: var(--ok-ink); }
    .rank-perks-list li.is-current::before { content: ''; position: absolute; top: -1px; left: 50%; translate: -50% 0; width: 36%; height: 3px; border-radius: 0 0 4px 4px; background: var(--rank-b); }
    .rank-perks-sample { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); font-size: 12.5px; line-height: 1.5; }
    .rank-perks-sample i { margin-top: 2px; font-size: 15px; }
    .rank-perks-sample b { color: var(--ink); }
    @media (min-width: 768px) { .rank-perks-head span { flex: 1 1 auto; } }
    .rank-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--rank-b) 8%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-b) 16%, var(--line)); }
    .rank-next p { flex: 1 1 200px; margin: 0; font-size: 13.5px; line-height: 1.5; }
    .rank-next p > b { color: var(--primary); }
    .rank-next-name { display: inline-flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--rank-c) 80%, var(--ink)); font-weight: 700; vertical-align: middle; }
    .rank-cta { border: 0; background: var(--grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 22%, transparent); }
    .rank-top { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rank-b) 10%, var(--surface-2)); color: color-mix(in srgb, var(--rank-c) 80%, var(--ink)); font-size: 13.5px; font-weight: 600; }
    :root[data-theme="dark"] :is(.rank-card-head h2, .rank-next-name, .rank-top, .rank-perks-list b, .rank-stops li.is-current b) { color: var(--rank-a); }
    @keyframes rank-fill { from { transform: scaleX(0); } }
    @keyframes rank-pin { from { opacity: 0; translate: -50% 6px; } }
    @keyframes rank-beat { 50% { transform: scale(1.1); } }
    @media (prefers-reduced-motion: reduce) { .rank-rail-fill, .rank-pin, .rank-stops li.is-current .rank-badge { animation: none; } }
    .rank-chip { gap: 4px; padding-left: 2px; background: color-mix(in srgb, var(--rank-b) 16%, var(--card)); color: color-mix(in srgb, var(--rank-c) 85%, var(--ink)); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-b) 30%, transparent); }
    .rank-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--rank-b) 26%, var(--card)); }
    :root[data-theme="dark"] .rank-chip { color: var(--rank-a); }
    /* Profile hero (account.profile, account.deposit): who, wallet, counts and shortcuts on a pale shop-tinted card. */
    .profile-hero { position: relative; display: grid; gap: 14px; margin-bottom: 16px; padding: 18px 16px 14px; border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--card)), color-mix(in srgb, var(--primary) 3%, var(--card)) 70%); color: var(--ink); box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 8%, transparent); overflow: hidden; isolation: isolate; }
    .profile-hero::before { content: ''; position: absolute; z-index: -1; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%); }
    .profile-hero-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .profile-hero-user .avatar { width: 58px; height: 58px; font-size: 26px; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px color-mix(in srgb, var(--primary) 22%, var(--line)); }
    .profile-hero-user > div { min-width: 0; }
    .profile-ava { position: relative; flex: none; }
    .profile-ava-pick { position: relative; display: block; border-radius: 50%; cursor: pointer; }
    .profile-ava-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .profile-ava-pick .avatar { transition: box-shadow .2s, opacity .2s; }
    .profile-ava-pick:hover .avatar, .profile-ava-pick:has(input:focus-visible) .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--primary); }
    .profile-ava-cam { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--card); border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; box-shadow: var(--shadow); }
    .profile-ava-cam .bx-loader-alt, .is-saving .profile-ava-cam .bxs-camera { display: none; }
    .is-saving .profile-ava-cam .bx-loader-alt { display: inline-block; }
    .is-saving .profile-ava-pick .avatar { opacity: .6; }
    .profile-ava-remove { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 12px; cursor: pointer; }
    .profile-ava-remove:hover { color: var(--bad); border-color: currentColor; }
    .profile-ava-error { display: block; color: var(--bad); font-size: 12px; }
    .profile-ava-error:empty { display: none; }
    .profile-hero h1 { margin: 0 0 4px; font-size: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .profile-hero-user p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12.5px; color: var(--muted); }
    .profile-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
    .profile-chip i { color: var(--warn); }
    .profile-hero-wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); border-radius: 14px; background: var(--card); }
    .profile-hero-wallet small { display: block; font-size: 12px; color: var(--muted); }
    .profile-hero-wallet b { font-size: 22px; letter-spacing: -.01em; color: var(--primary); }
    .profile-hero-wallet .btn { flex: none; border: 0; background: var(--grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 22%, transparent); }
    .profile-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; text-align: center; }
    .profile-hero-stats > div + div { border-left: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); }
    .profile-hero-stats dt { font-size: 11.5px; color: var(--muted); }
    .profile-hero-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .profile-hero-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); }
    .profile-hero-links a { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; color: var(--text); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
    .profile-hero-links a i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--card); color: var(--primary); font-size: 20px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, var(--line)); }
    .profile-hero-links a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); }
    /* Profile cards: account facts, linked networks, recent sign-ins. */
    .info-rows { display: grid; margin: 0; }
    .info-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
    .info-rows > div:first-child { border-top: 0; padding-top: 0; }
    .info-rows dt { flex: none; color: var(--muted); }
    .info-rows dd { margin: 0; min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
    .info-rows dd a { font-weight: 600; }
    .info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
    .social-links, .login-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .social-links li, .login-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
    .social-links li.is-linked { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); }
    .social-links li.is-off { opacity: .6; }
    .social-links li.is-google { --brand: #ea4335; }
    .social-links li.is-facebook { --brand: #1877f2; }
    .social-links li.is-zalo { --brand: #0068ff; }
    .social-links li.is-discord { --brand: #5865f2; }
    .social-links-icon, .login-list-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
    .social-links-icon { background: var(--brand); color: #fff; }
    .login-list-icon { background: var(--primary-soft); color: var(--primary); }
    .social-links li > div, .login-list li > div { min-width: 0; }
    .social-links b, .login-list b { display: block; font-size: 14px; }
    .social-links small, .login-list small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .social-links small.text-ok { color: var(--ok-ink); font-weight: 600; }
    .social-links form { margin: 0; }
    .login-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    .login-list .login-ip { color: var(--bad); font-weight: 700; }
    .login-list .badge { margin-left: auto; flex: none; }
    .login-list.is-strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 78%); margin: 0 -20px; padding: 0 20px 2px; scroll-padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .login-list.is-strip::-webkit-scrollbar { display: none; }
    .login-list.is-strip li { position: relative; scroll-snap-align: start; }
    .login-list.is-strip .badge { position: absolute; top: 8px; right: 8px; }
    .login-list.is-strip li:has(.badge) .login-ip { padding-right: 68px; }
    @media (min-width: 768px) { .login-list.is-strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; overflow: visible; } }
    .qr-box { display: grid; place-items: center; margin-bottom: 14px; }
    .qr-box svg { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
    /* Security page (account.security): score ring (--score = 0..100), checklist, 2FA steps, sign-out-other-devices form. */
    .sec-score { --tone: var(--bad); --tone-soft: var(--bad-soft); display: flex; align-items: center; gap: 16px; border-color: color-mix(in srgb, var(--tone) 25%, var(--line)); background: linear-gradient(135deg, var(--tone-soft), var(--card) 70%); }
    .sec-score.is-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); }
    .sec-score.is-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }
    .sec-score-ring { position: relative; flex: none; display: grid; place-content: center; justify-items: center; width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--score) * 1%), var(--surface-2) 0); }
    .sec-score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--card); }
    .sec-score-ring b, .sec-score-ring small { position: relative; line-height: 1; }
    .sec-score-ring b { color: var(--tone); font-size: 26px; font-weight: 800; }
    .sec-score-ring small { margin-top: 2px; color: var(--muted); font-size: 11px; }
    .sec-score-main { min-width: 0; }
    .sec-score-main > small { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .sec-score-main h2 { margin: 2px 0 6px; color: var(--tone); font-size: 20px; }
    .sec-score-main p { display: flex; gap: 6px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
    .sec-score-main p i { flex: none; margin-top: 1px; color: var(--tone); font-size: 17px; }
    .sec-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .sec-checks li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
    .sec-checks li.is-done { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
    .sec-checks-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--warn-soft); color: var(--warn); font-size: 20px; }
    .sec-checks-icon i + i { position: absolute; right: -4px; bottom: -4px; border-radius: 50%; background: var(--card); font-size: 15px; }
    .is-done .sec-checks-icon { background: var(--ok-soft); color: var(--ok); }
    .sec-checks b { display: block; font-size: 14px; line-height: 1.3; }
    .sec-checks small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
    .sec-steps { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 20px; color: var(--text-2); font-size: 13.5px; }
    .sec-logout { display: grid; gap: 10px; justify-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .sec-logout .field { width: min(100%, 340px); margin: 0; }
    .card > .dep-methods { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

    /* ========== 8. Auth card ========== */
    .auth-card { position: relative; isolation: isolate; width: 100%; max-width: 440px; margin: 8px auto 24px; padding: 24px 18px; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
    .auth-card::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 150px; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); pointer-events: none; }
    .auth-card h1 { margin: 0 0 20px; font-size: 22px; text-align: center; color: var(--ink); }
    .auth-input { position: relative; }
    .auth-input > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 19px; pointer-events: none; transition: color .15s; }
    .auth-input > input { min-height: 48px; padding-left: 42px; font-size: 15px; }
    .auth-input:has(.auth-eye) > input { padding-right: 48px; }
    .auth-input:focus-within > i { color: var(--primary); }
    .auth-input.is-invalid > input { border-color: var(--bad); }
    .auth-input.is-invalid > i { color: var(--bad); }
    .auth-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
    .auth-eye:hover, .auth-eye[aria-pressed=true] { color: var(--ink); background: var(--surface-2); }
    .pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 4px; margin-top: 7px; }
    .pw-meter[hidden] { display: none; }
    .pw-meter span { height: 4px; border-radius: 99px; background: var(--line); transition: background-color .2s; }
    .pw-meter small { min-width: 44px; padding-left: 4px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; }
    .pw-meter[data-level='1'] span:nth-child(-n+1) { background: var(--bad); }
    .pw-meter[data-level='2'] span:nth-child(-n+2) { background: var(--warn); }
    .pw-meter[data-level='3'] span:nth-child(-n+3) { background: color-mix(in srgb, var(--ok) 70%, var(--warn)); }
    .pw-meter[data-level='4'] span { background: var(--ok); }
    .pw-meter[data-level='1'] small { color: var(--bad); }
    .pw-meter[data-level='2'] small { color: var(--warn); }
    .pw-meter[data-level='3'] small, .pw-meter[data-level='4'] small { color: var(--ok); }
    .auth-invite { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok-ink); font-size: 13px; }
    .auth-invite i { font-size: 17px; }
    .auth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; }
    .auth-row a { font-weight: 600; }
    .auth-submit { min-height: 50px; font-size: 15.5px; font-weight: 700; }
    .auth-submit i { font-size: 20px; transition: transform .15s; }
    .auth-submit:hover i { transform: translateX(3px); }
    .auth-alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
    .auth-alt a { font-weight: 700; }
    .auth-alt a i { vertical-align: -2px; }
    .auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--faint); font-size: 12.5px; }
    .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
    .social-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .btn-social { min-height: 46px; background: var(--card); color: var(--ink); border: 1px solid var(--border); box-shadow: none; font-weight: 600; }
    .btn-social:hover { border-color: color-mix(in srgb, var(--social, var(--primary)) 55%, var(--border)); background: color-mix(in srgb, var(--social, var(--primary)) 7%, var(--card)); }
    .btn-social i { font-size: 21px; color: var(--social); }
    .btn-social.is-facebook { --social: #1877f2; }
    .btn-social.is-zalo { --social: #0068ff; }
    .btn-social.is-discord { --social: #5865f2; }
    .btn-social.is-off { opacity: .55; filter: grayscale(.6); }
    body.standalone { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%), radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 40%), var(--bg); }
    body.standalone .auth-card { margin: 0; }
    .standalone-card { text-align: center; }
    .standalone-card h1 { margin-bottom: 10px; }
    .standalone-logo { justify-content: center; margin-bottom: 20px; }
    .standalone-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 26px; background: var(--grad); color: #fff; font-size: 40px; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--primary) 70%, transparent); }
    .standalone-code { display: block; margin-bottom: 2px; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .3em; }
    .standalone-actions { display: grid; gap: 8px; margin-top: 18px; }

    /* ========== 9. Misc ========== */
    .qty { display: inline-flex; align-items: center; gap: 6px; }
    .qty button { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--input-bg); color: inherit; font-size: 18px; cursor: pointer; }
    .qty input { width: 56px; min-height: 38px; text-align: center; padding: 0 4px; -moz-appearance: textfield; appearance: textfield; }
    .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .qty button:disabled { opacity: .4; cursor: default; }
    .qty-sm button { width: 30px; height: 30px; font-size: 16px; }
    .qty-sm input { width: 44px; min-height: 30px; }

    /* Order lists: a card per order on phones, a table row from 768px up. */
    .order-list { display: grid; gap: 10px; }
    .order-item { display: grid; gap: 6px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: inherit; }
    a.order-item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
    .order-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .order-item-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
    .order-item-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
    .order-item-meta .price { font-size: 14px; }
    .order-item-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--primary); }
    .order-item-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
    .order-item-actions form { margin: 0; }
    /* Order cards (<x-shop.order-card>, Lịch sử): id + time + status, the product row, extra rows, total + actions. One column on phones, two from 1024px. */
    .order-cards { display: grid; gap: 12px; }
    .order-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
    .order-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); box-shadow: var(--shadow-pop); }
    .order-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
    .order-card-id { font-weight: 700; color: var(--ink); }
    .order-card-time { color: var(--muted); }
    .order-card-time::before { content: "·"; margin-right: 8px; color: var(--faint); }
    .order-card-head .badge { margin-left: auto; }
    .order-card-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; }
    a.order-card-body:hover .order-card-info b { color: var(--primary); }
    .order-card-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--primary-soft); color: var(--primary); font-size: 28px; border: 1px solid var(--line); }
    .order-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .order-card.is-credit .order-card-thumb { background: var(--ok-soft); color: var(--ok); }
    .order-card.is-debit .order-card-thumb { background: var(--bad-soft); color: var(--bad); }
    .order-card.is-wide-thumb .order-card-thumb { width: 84px; height: 56px; }
    .order-card-info { display: grid; gap: 3px; min-width: 0; }
    .order-card-info b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; transition: color .15s; }
    .order-card-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
    .order-card-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 14px 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; }
    .order-card-rows dt { color: var(--muted); }
    .order-card-rows dd { margin: 0; text-align: right; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
    .order-card-rows .progress { display: inline-block; vertical-align: middle; width: 70px; height: 6px; margin-right: 8px; }
    .order-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 10px 14px; border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--primary) 3%, var(--card)); }
    .order-card-total { font-size: 13px; color: var(--muted); }
    .order-card-total b { margin-left: 4px; font-size: 17px; font-weight: 700; }
    .order-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
    .order-card-actions form { margin: 0; }

    /* Live "đã chờ" clock of the deposit waiting screens (card, bank transfer). */
    .wait-timer { font-variant-numeric: tabular-nums; }

    /* Filter row above a list: two columns on phones (.wide spans both), one wrapping row from 768px. */
    .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
    .filter-bar > .wide { grid-column: 1 / -1; }
    .filter-bar input, .filter-bar select { width: 100%; }

    /* Order detail pages: complaint fold and the "Donate tăng tốc" panel (rocket head, queue lane from the back of the line to the front, donation list). */
    .complaint-box > summary { color: var(--bad); }
    .complaint-sent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
    .complaint-sent-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 20px; }
    .complaint-sent b { color: var(--ok-ink); font-size: 14px; }
    .complaint-sent p { margin: 2px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.45; }
    .complaint-sent.is-new { animation: complaint-sent-in .5s cubic-bezier(.22, .9, .3, 1.2) both; }
    .complaint-sent.is-new .complaint-sent-icon { animation: complaint-sent-pop .6s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
    @keyframes complaint-sent-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
    @keyframes complaint-sent-pop { from { transform: scale(0); } }
    @media (prefers-reduced-motion: reduce) { .complaint-sent.is-new, .complaint-sent.is-new .complaint-sent-icon { animation: none; } }
    .boost-panel { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 12%, var(--card)), var(--card) 150px); }
    .boost-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .boost-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--boost-grad); color: #fff; font-size: 24px; box-shadow: 0 8px 18px rgb(249 115 22 / .32); }
    .boost-head-text { min-width: 0; }
    .boost-head-text h2 { margin: 0; font-size: 17px; color: var(--ink); }
    .boost-head-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
    .boost-rank { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, var(--border)); }
    .boost-rank-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
    .boost-rank-num small { width: 100%; color: var(--muted); font-size: 12px; }
    .boost-rank-num b { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--warn-ink); }
    .boost-rank-num span { color: var(--muted); font-size: 13px; }
    .boost-lane { position: relative; height: 8px; margin: 16px 12px 6px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
    .boost-lane-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--boost-grad); }
    .boost-lane-me { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f97316; color: #fff; font-size: 14px; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--card), 0 4px 10px rgb(249 115 22 / .4); }
    .boost-lane-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
    .boost-lane-ends i { color: var(--warn); }
    .boost-place-line { margin: 10px 0 0; font-size: 13.5px; }
    .boost-place-line strong { color: var(--warn-ink); }
    .boost-history { display: grid; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
    .boost-history li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
    .boost-history li > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); font-size: 15px; }
    .boost-history li > span { flex: 1; min-width: 0; color: var(--text); }
    .boost-history small { display: block; color: var(--muted); font-size: 11.5px; }
    .boost-history b { color: var(--ink); }
    .boost-history li.boost-history-total { border-bottom: 0; font-weight: 600; }
    .boost-history-total b { color: var(--warn-ink); font-size: 15px; }
    .boost-submit { width: 100%; justify-content: center; background: var(--boost-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgb(249 115 22 / .28); }
    .boost-submit:hover { filter: brightness(1.05); color: #fff; }
    /* Right after a donation: the panel glows, the rocket shakes and lifts off then drops back in, the lane runs to the new place (is-racing), sparks, coins and
       bolts burst at the marker, "+amount" floats up from the place box and the new donation row slides in lit up. */
    .boost-icon, .boost-rank { position: relative; }
    .boost-icon { overflow: hidden; }
    .boost-panel.is-boosted { animation: boost-glow 1.8s ease-out; }
    .boost-icon.is-launch i { animation: boost-launch 1.15s cubic-bezier(.5, 0, .3, 1); }
    .boost-icon.is-launch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -14px 16px -6px color-mix(in srgb, var(--warn) 30%, #fff); opacity: 0; animation: boost-flame 1.15s ease-out; }
    .boost-panel.is-racing .boost-lane-fill { transition: width 1.15s cubic-bezier(.25, .8, .25, 1); }
    .boost-panel.is-racing .boost-lane-me { transition: left 1.15s cubic-bezier(.25, .8, .25, 1); }
    .boost-lane-me.is-hit { animation: boost-hit .6s cubic-bezier(.3, 1.6, .5, 1); }
    .boost-rank-num b.is-tick { display: inline-block; animation: boost-tick .35s cubic-bezier(.3, 1.6, .5, 1); }
    .boost-sparks { position: absolute; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
    .boost-spark { position: absolute; left: 0; top: 0; display: block; opacity: 0; animation: boost-spark .95s cubic-bezier(.15, .7, .3, 1) forwards; }
    .boost-spark.bx { margin: -9px 0 0 -9px; font-size: 18px; color: var(--warn); }
    .boost-spark.is-coin { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, color-mix(in srgb, var(--warn) 45%, #fff) 30%, var(--warn) 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 80%, #fff), 0 2px 6px color-mix(in srgb, var(--warn) 45%, transparent); }
    .boost-spark.is-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; background: var(--boost-grad); }
    .boost-plus { position: absolute; top: 10px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--boost-grad); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 8px 18px color-mix(in srgb, var(--warn) 40%, transparent); pointer-events: none; animation: boost-plus 2.1s cubic-bezier(.2, .8, .3, 1) forwards; }
    .boost-history li.is-new { animation: boost-row 1.6s ease-out; border-radius: 10px; }
    .boost-submit.is-launching { pointer-events: none; overflow: hidden; }
    .boost-submit.is-launching i { animation: boost-launch .62s cubic-bezier(.5, 0, .3, 1); }
    @keyframes boost-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent); } 35% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warn) 14%, transparent), 0 18px 40px color-mix(in srgb, var(--warn) 25%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
    @keyframes boost-launch { 0% { transform: none; } 10% { transform: translate(-2px, 1px) rotate(-10deg); } 20% { transform: translate(2px, -1px) rotate(8deg); } 30% { transform: translate(-1px, 1px) rotate(-6deg); } 58% { transform: translate(14px, -46px) rotate(0); opacity: 1; } 59% { opacity: 0; } 60% { transform: translate(-14px, 46px); opacity: 0; } 61% { opacity: 1; } 100% { transform: none; } }
    @keyframes boost-flame { 0%, 25% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes boost-hit { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 3px var(--card), 0 0 0 10px color-mix(in srgb, var(--warn) 30%, transparent); } 100% { transform: translate(-50%, -50%) scale(1); } }
    @keyframes boost-tick { 0% { transform: scale(1); } 45% { transform: scale(1.3); color: var(--warn); } 100% { transform: scale(1); } }
    @keyframes boost-spark { 0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 14px)) scale(1) rotate(var(--spin)); } }
    @keyframes boost-plus { 0% { opacity: 0; transform: translateY(16px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 25% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-34px); } }
    @keyframes boost-row { 0% { opacity: 0; transform: translateX(-14px); background: color-mix(in srgb, var(--warn) 22%, transparent); } 20% { opacity: 1; transform: none; } 100% { background: transparent; } }
    @media (prefers-reduced-motion: reduce) { .boost-panel.is-boosted, .boost-icon.is-launch i, .boost-icon.is-launch::after, .boost-lane-me.is-hit, .boost-rank-num b.is-tick, .boost-spark, .boost-plus, .boost-history li.is-new, .boost-submit.is-launching i { animation: none; } }

    /* Community invite: <x-shop.community-invite>. */
    .community-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
    .community-card[hidden] { display: none; }
    .community-card > div { flex: 1 1 240px; min-width: 0; }
    .community-card h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
    .community-card h2 > i { color: var(--primary); font-size: 19px; }
    .community-card p { margin: 0; font-size: 13px; color: var(--muted); }
    .community-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .btn-discord { background: #5865f2; box-shadow: none; }
    .btn-zalo { background: #0068ff; box-shadow: none; }

    /* ========== 10. Footer ========== */
    .site-footer { margin-top: 32px; }
    /* Shop promises: small white tiles, each promise an icon in a soft shop-colour square beside its text. */
    .commitments { padding: 4px 0 20px; }
    .commitments .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .commitment { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); }
    .commitment i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-size: 19px; }
    .commitment span { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
    /* Phones: the dark footer is short stacked groups split by hairlines — headings hidden, links in one wrapping row. */
    .footer-dark { background: var(--footer-bg); color: var(--footer-text); padding: 18px 0 14px; }
    .footer-dark .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .footer-dark .container > div + div { padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .08); }
    .footer-dark h3 { display: none; }
    .footer-brand { display: flex; align-items: center; min-height: 32px; font-weight: 700; font-size: 19px; color: #fff; }
    .footer-brand img { width: var(--logo-w); max-width: 100%; height: auto; flex-shrink: 0; object-fit: contain; }
    .footer-brand .logo-text { font-size: inherit; letter-spacing: 0; }
    .footer-about { margin: 8px 0 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
    .footer-links a { display: flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 13.5px; color: var(--footer-text); }
    .footer-links a i { display: none; }
    .footer-links a:hover { color: #fff; }
    .footer-hours { margin: 6px 0 0; font-size: 13px; }
    .footer-hours b { display: inline; margin-right: 6px; font-weight: 600; color: #fff; }
    .support-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin: 0 8px 8px 0; border-radius: 999px; background: var(--footer-box); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); color: #fff; font-size: 13.5px; font-weight: 600; transition: background .15s; }
    .support-btn:hover { background: var(--primary); }
    .footer-hotline { margin: 0; font-size: 13.5px; }
    /* Accepted ways to pay: small dark chips inside the footer bar, beside the support buttons. */
    .footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .footer-pay-label { font-size: 13px; }
    .pay-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--footer-box); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); color: #fff; font-size: 13px; font-weight: 600; }
    .pay-chip i { font-size: 17px; color: var(--primary); }
    .footer-hotline a { color: #fff; font-weight: 600; }
    /* Phones: the copyright line sits between the floating gift and chat buttons instead of under them. */
    .powered { background: var(--footer-bg); color: var(--faint); text-align: center; padding: 12px 84px; font-size: 12px; line-height: 1.5; border-top: 1px solid rgb(255 255 255 / .06); }

    /* ========== 11. Floating: support button, support chat, event gift, deposit dialog, bottom nav ========== */
    .support-fab { position: fixed; right: 14px; bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 1500; }
    .support-fab > button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .12); cursor: pointer; }
    .support-fab .chat-icon { width: 26px; height: 26px; }
    .support-fab .links { position: absolute; right: 0; bottom: 66px; min-width: 220px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
    .support-fab .links div { padding: 6px 10px; font-weight: 700; color: var(--ink); }
    .support-fab .links a { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border-radius: 8px; color: var(--text); font-weight: 600; }
    .support-fab .links a:hover { background: var(--hover); }
    .support-fab .links i { color: var(--primary); font-size: 18px; }
    /* Support chat: right side by default, .is-left when Settings → Chat puts it on the left. */
    .chat-fab { position: fixed; right: 14px; bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 1500; }
    .chat-fab.is-left { left: 14px; right: auto; }
    .chat-fab > button { position: relative; display: flex; align-items: center; gap: 8px; height: 52px; min-width: 52px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
    .chat-fab > button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 40%, transparent), 0 2px 6px rgba(0, 0, 0, .12); }
    .chat-fab .chat-icon { flex: none; width: 26px; height: 26px; }
    .chat-fab .chat-close { display: none; font-size: 26px; }
    .chat-fab .chat-label { display: none; }
    .chat-fab:has(.chat-panel:not([hidden])) .chat-icon { display: none; }
    .chat-fab:has(.chat-panel:not([hidden])) .chat-close { display: block; }
    .chat-fab .chat-dot { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--card); border-radius: 999px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; }
    .chat-panel { position: absolute; right: 0; bottom: 64px; display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 28px); height: calc(100vh - var(--header-h) - var(--bottom-nav-h) - 100px); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 16px 48px rgba(0, 0, 0, .22); font-weight: 500; }
    .chat-fab.is-left .chat-panel { left: 0; right: auto; }
    /* Opening pops the panel up from the button; closing (.is-closing, set by the script for a moment) plays it backwards. */
    .chat-panel { transform-origin: bottom right; animation: chat-pop-in .24s cubic-bezier(.22, 1, .36, 1); }
    .chat-fab.is-left .chat-panel { transform-origin: bottom left; }
    .chat-fab.is-closing .chat-panel { animation: chat-pop-out .2s ease-in forwards; }
    @keyframes chat-pop-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
    @keyframes chat-pop-out { to { opacity: 0; transform: translateY(16px) scale(.94); } }
    /* Who answers sets the colour: the AI in the shop colour, the staff queue in blue, a staff member in green. */
    .chat-panel { --mode: var(--primary); }
    .chat-panel[data-mode="waiting"] { --mode: var(--info); }
    .chat-panel[data-mode="staff"] { --mode: var(--ok); }
    .chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--mode); color: #fff; transition: background .3s; }
    .chat-who { min-width: 0; }
    .chat-who b { display: flex; align-items: center; gap: 6px; }
    .chat-badge { padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / .24); font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .03em; }
    .chat-head .chat-close-btn span { display: none; }
    .chat-mode { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--mode) 9%, var(--card)); color: var(--text); font-size: 12.5px; line-height: 1.35; }
    .chat-mode > i { flex: none; color: var(--mode); font-size: 18px; }
    .chat-mode > span { flex: 1; min-width: 0; }
    .chat-mode button { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--ok); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter .15s; }
    .chat-mode button:hover { filter: brightness(1.08); }
    .chat-mode button[hidden] { display: none; }
    /* Staff shift hours under the strip, with whether staff is on shift right now. */
    .chat-shift { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 12px; line-height: 1.35; }
    .chat-shift > i { flex: none; font-size: 15px; }
    .chat-shift > span { flex: 1; min-width: 0; }
    .chat-shift b { color: var(--text); }
    .chat-shift em { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-size: 11.5px; font-style: normal; font-weight: 700; }
    .chat-shift em::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .chat-shift em.is-on { background: var(--ok-soft); color: var(--ok-ink); }
    /* Once staff is asked: "Đã gửi yêu cầu → Chờ nhân viên nhận / Nhân viên đã nhận" under the strip text; the moment staff takes it the strip flashes green. */
    .chat-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .chat-steps[hidden] { display: none; }
    .chat-steps b { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 11.5px; font-weight: 700; }
    .chat-steps b i { font-size: 14px; }
    .chat-steps b.is-done { background: var(--ok-soft); color: var(--ok-ink); }
    .chat-steps b.is-wait { background: var(--info-soft); color: var(--info-ink); }
    .chat-steps b.is-wait i { animation: chat-wait 1.6s ease-in-out infinite; }
    .chat-mode.is-accepted { animation: chat-accepted 1.4s ease-out; }
    .chat-mode.is-accepted .chat-steps b:last-child { animation: gift-won-in .5s cubic-bezier(.2, 1.4, .4, 1); }
    @keyframes chat-wait { 50% { opacity: .35; } }
    @keyframes chat-accepted { 0%, 40% { background: color-mix(in srgb, var(--ok) 28%, var(--card)); } }
    .chat-head .ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 22px; }
    .chat-head b { display: block; font-size: 15px; }
    .chat-head small { font-size: 12px; opacity: .9; }
    .chat-head button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 24px; cursor: pointer; transition: background .15s; }
    .chat-head button:hover { background: rgb(255 255 255 / .18); }
    .chat-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow-y: auto; background: var(--surface-2); }
    .chat-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; white-space: normal; }
    .chat-msg small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .65; }
    .chat-msg a { color: inherit; text-decoration: underline; word-break: break-all; }
    .chat-msg img { display: block; max-width: 100%; margin-top: 4px; border-radius: 10px; }
    .chat-msg.customer { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--primary); color: #fff; }
    .chat-msg.bot, .chat-msg.staff { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--card); color: var(--ink-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
    .chat-msg.staff { border-left: 3px solid var(--ok); }
    .chat-msg .who { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; color: var(--ok); font-size: 11px; font-weight: 700; }
    .chat-msg.bot .who { color: var(--primary); }
    .chat-msg .who em { padding: 0 6px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); font-size: 10px; font-style: normal; }
    /* "Attach this order?" card on the customer's own order page. */
    .chat-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 12px 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 12px; background: var(--warn-soft); color: var(--text); font-size: 13px; line-height: 1.4; }
    .chat-order[hidden] { display: none; }
    .chat-order > i { flex: none; color: var(--warn-ink); font-size: 20px; }
    .chat-order > span { flex: 1; min-width: 0; }
    .chat-order > div { display: flex; justify-content: flex-end; gap: 6px; width: 100%; }
    .chat-order button { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
    .chat-order button.yes { border-color: var(--primary); background: var(--primary); color: #fff; }
    .chat-msg.system { align-self: center; border-radius: 10px; background: var(--hover); color: var(--text); font-size: 12.5px; text-align: center; }
    /* An order number or order link in a message: tap to see that order in a sheet over the chat. */
    .chat-order-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0; padding: 2px 9px 2px 6px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; transition: background .15s; }
    .chat-order-chip:hover { background: color-mix(in srgb, var(--primary) 18%, var(--card)); }
    .chat-order-chip i { font-size: 15px; }
    .chat-msg.customer .chat-order-chip { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .18); color: #fff; }
    .chat-sheet { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; background: var(--overlay); animation: chat-dim-in .25s ease-out; }
    .chat-sheet[hidden] { display: none; }
    .chat-sheet-card { width: 100%; max-height: 86%; overflow-y: auto; padding: 4px 14px 14px; border-radius: 16px 16px 0 0; background: var(--card); box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); animation: chat-sheet-in .3s cubic-bezier(.22, 1, .36, 1); }
    .chat-sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -14px 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
    .chat-sheet-head b { display: flex; align-items: center; gap: 6px; color: var(--ink-strong); font-size: 14.5px; }
    .chat-sheet-head b i { color: var(--primary); font-size: 18px; }
    .chat-sheet-head button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; cursor: pointer; }
    .chat-sheet-head button:hover { background: var(--hover); color: var(--ink); }
    .chat-sheet-note { margin: 10px 0; color: var(--muted); font-size: 13px; text-align: center; }
    .chat-sheet-note i { margin-right: 6px; }
    .chat-od-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .chat-od-media { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; }
    .chat-od-media img { width: 100%; height: 100%; object-fit: cover; }
    .chat-od-media .media-placeholder { padding: 0; font-size: 10px; }
    .chat-od-media .media-placeholder > span { display: none; }
    .chat-od-head small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
    .chat-od-head b { display: block; color: var(--ink-strong); font-size: 15px; line-height: 1.3; }
    .chat-od-rows { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; }
    .chat-od-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .chat-od-rows dt { color: var(--muted); }
    .chat-od-rows dd { margin: 0; color: var(--ink-strong); font-weight: 700; }
    .chat-od-progress { display: grid; gap: 5px; margin-bottom: 10px; font-size: 13px; }
    .chat-od-progress small { margin-left: 6px; color: var(--muted); font-size: 12px; }
    .chat-od-bar { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--hover); }
    .chat-od-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--info), var(--ok)); }
    .chat-od-note { display: flex; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-ink); font-size: 13px; }
    .chat-od-note i { flex: none; font-size: 18px; }
    .chat-od-note b { display: block; }
    .chat-sheet-body .btn i { margin-right: 6px; }
    .chat-quick { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; background: var(--card); scrollbar-width: none; }
    .chat-quick button { flex: none; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
    .chat-quick button:hover { border-color: var(--primary); color: var(--primary); }
    .chat-quick button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
    .chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--card); }
    .chat-form textarea { flex: 1; height: 40px; min-height: 40px; max-height: 96px; padding: 9px 12px; line-height: 20px; scrollbar-width: thin; border-radius: 12px; resize: none; }
    .chat-form button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; cursor: pointer; }
    .chat-form button:disabled { opacity: .5; }
    .chat-attach { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); font-size: 22px; cursor: pointer; }
    .chat-attach:hover { background: var(--hover); color: var(--primary); }
    .chat-card { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--warn-soft); font-size: 13px; }
    .chat-card select, .chat-card input[type=text] { min-height: 34px; height: 34px; padding: 0 10px; font-size: 13px; }
    .chat-card small { color: var(--warn-ink); }
    .chat-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .chat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .chat-card .chat-card-x { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; }
    .chat-card .chat-card-x:hover { background: var(--hover); color: var(--ink); }
    .chat-card button { height: 34px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
    .chat-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; background: var(--card); color: var(--muted); font-size: 12.5px; }
    .chat-preview img { width: 44px; height: 44px; margin: 0; border-radius: 8px; object-fit: cover; }
    .chat-preview span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .chat-preview span.bad { color: var(--bad); white-space: normal; }
    .chat-preview button { border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
    .chat-drop { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; border: 3px dashed var(--primary); border-radius: 16px; background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); font-weight: 700; pointer-events: none; }
    .chat-panel.dragging .chat-drop { display: grid; }
    .chat-links { display: flex; justify-content: center; gap: 10px; padding: 0 12px 8px; background: var(--card); font-size: 12px; }
    .chat-links a { color: var(--muted); }
    /* Phones: the open chat is a near full-screen sheet sliding up while the page behind slowly dims (tap it or "Đóng" to close, both play backwards); the round button hides meanwhile and, closed, sits above the bottom nav. */
    @keyframes chat-sheet-in { from { transform: translateY(100%); } }
    @keyframes chat-sheet-out { to { transform: translateY(100%); } }
    @keyframes chat-dim-in { from { background-color: transparent; } }
    @keyframes chat-dim-out { to { background-color: transparent; } }
    @media (prefers-reduced-motion: reduce) { .chat-fab, .chat-fab .chat-panel, .chat-sheet, .chat-sheet-card, .chat-mode.is-accepted, .chat-steps b { animation: none !important; } }
    @media (max-width: 767px) {
        body:has(.chat-panel:not([hidden])) { overflow: hidden; }
        .chat-fab:has(.chat-panel:not([hidden])) { inset: 0; z-index: 1700; background: var(--overlay); transform: none; animation: chat-dim-in .32s ease-out; }
        .chat-fab.is-closing:has(.chat-panel:not([hidden])) { animation: chat-dim-out .26s ease-in forwards; }
        .chat-fab:has(.chat-panel:not([hidden])) > button { display: none; }
        .chat-fab .chat-panel, .chat-fab.is-left .chat-panel { left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top) + 24px); width: auto; max-width: none; height: auto; padding-bottom: env(safe-area-inset-bottom); border-radius: 20px 20px 0 0; animation: chat-sheet-in .38s cubic-bezier(.22, 1, .36, 1); }
        .chat-fab.is-closing .chat-panel { animation: chat-sheet-out .26s cubic-bezier(.55, 0, 1, .45) forwards; }
        .chat-head .chat-close-btn { display: inline-flex; gap: 2px; width: auto; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: rgb(255 255 255 / .2); font-size: 14px; font-weight: 700; }
        .chat-head .chat-close-btn > i { font-size: 22px; }
        .chat-head .chat-close-btn span { display: inline; }
        .chat-drop { border-radius: 20px 20px 0 0; }
    }
    /* Event gift button, bottom left above the bottom nav. */
    /* Without an image: a gift icon on the shop gradient with a "Quà" tag and a soft pulse. With the uploaded button image (else the event image): a sticker as wide as a product tile image, plus a small × that hides it for the visit. */
    .gift-float { position: fixed; left: 16px; bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 1400; }
    .gift-float[hidden] { display: none; }
    .gift-fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--warn)); color: #fff; font-size: 28px; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); cursor: pointer; animation: gift-wiggle 2.4s infinite; }
    /* The pulse is a ring that grows and fades (scale and opacity, drawn once), not an animated shadow repainted every frame. */
    .gift-fab:not(.has-image)::after { content: ''; position: absolute; z-index: -1; inset: -3px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 55%, transparent); animation: gift-pulse 2.4s ease-out infinite; }
    .gift-fab.has-image { width: min(calc((100vw - 34px) / 2), 170px); height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; animation: gift-float 3s ease-in-out infinite; }
    .gift-fab.has-image > img { display: block; width: 100%; height: auto; max-height: min(calc((100vw - 34px) / 2), 170px); object-fit: contain; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .28)); }
    .gift-float-close { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgb(15 23 42 / .72); color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
    .gift-fab > i { text-shadow: 0 2px 4px rgb(0 0 0 / .2); }
    .gift-fab-tag { position: absolute; left: 50%; bottom: -9px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #facc15, #f97316); color: #7c2d12; font-size: 10px; font-weight: 900; line-height: 1.5; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 2px 6px rgb(0 0 0 / .2); }
    .gift-fab[disabled] { animation: none; filter: grayscale(.4); }
    .gift-fab[disabled]::after { display: none; }
    @keyframes gift-pulse { 0% { scale: 1; opacity: 1; } 70%, 100% { scale: 1.5; opacity: 0; } }
    @keyframes gift-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
    @keyframes gift-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
    /* Deposit dialog (header "Nạp tiền" button, home deposit box). */
    .dlg-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 15vh 16px 16px; overflow-y: auto; background: var(--overlay); animation: chat-dim-in .3s ease-out; }
    .dlg { width: 500px; max-width: 100%; border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-pop); animation: chat-pop-in .28s cubic-bezier(.22, 1, .36, 1); }
    .dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
    .dlg-head h3 { margin: 0; color: var(--ink-strong); font-size: 18px; font-weight: 700; line-height: 24px; }
    .dlg-head button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -8px -8px 8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
    .dlg-head button:hover { background: var(--hover); color: var(--primary); }
    .dlg-body { padding: 20px; color: var(--text-2); font-size: 14px; }
    .dep-methods { display: grid; gap: 12px; }
    .dep-method { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-strong); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
    .dep-method:hover { border-color: var(--primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 16%, transparent); transform: translateY(-1px); }
    .dep-method i.bx:first-child { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #f97316, #e11d48); color: #fff; font-size: 26px; box-shadow: 0 6px 14px rgba(225, 29, 72, .25); }
    .dep-method[data-show-dialog="bank"] i.bx:first-child { background: linear-gradient(135deg, #0ea5e9, #2563eb); box-shadow: 0 6px 14px rgba(37, 99, 235, .25); }
    .dep-method b { display: block; font-size: 15px; }
    .dep-method small { color: var(--muted); font-weight: 500; }
    .dep-method .bx-chevron-right { margin-left: auto; color: var(--faint); font-size: 22px; }
    .dep-method.is-closed i.bx:first-child { background: color-mix(in srgb, var(--faint) 16%, var(--card)); color: var(--faint); box-shadow: none; }
    .dep-method.is-closed b em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 2px; }
    .dep-closed { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 4px; text-align: center; }
    .dep-closed > b { color: var(--ink-strong); font-size: 15px; }
    .dep-closed > span:not(.dep-closed-art) { max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .dep-closed .btn { margin-top: 8px; }
    .dep-closed-art { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in srgb, var(--faint) 16%, var(--card)); color: var(--faint); font-size: 30px; }
    .dep-closed-art .bxs-lock-alt { position: absolute; right: -2px; bottom: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); font-size: 14px; box-shadow: 0 0 0 3px var(--card); }
    .box-tab-off { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 1px; }
    .dep-form label { display: block; margin-bottom: 14px; color: var(--text-2); font-weight: 500; }
    .dep-form label > span { display: block; margin-bottom: 6px; }
    .dep-pick { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
    .dep-pick legend { margin-bottom: 6px; padding: 0; color: var(--text-2); font-weight: 500; }
    .dep-pick legend small { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
    .dep-pick .telco-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .dep-pick label { display: flex; margin: 0; }
    .dep-pick .telco { min-height: 48px; }
    .amount-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .amount-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; margin: 0; padding: 6px 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); text-align: center; cursor: pointer; container-type: inline-size; }
    .amount-pick input { position: absolute; opacity: 0; pointer-events: none; }
    .amount-pick b { color: var(--ink); font-size: 14px; }
    /* "nhận 800.000đ" stays on one line, shrinking a touch with the tile; on the narrowest phones every tile puts the amount on its own line instead, so the tiles always keep one height. */
    .amount-pick small { color: var(--ok-ink); font-size: clamp(10px, 12.5cqi, 11px); font-weight: 600; white-space: nowrap; }
    @container (max-width: 79.98px) {
        .amount-pick small { font-size: 11px; line-height: 1.3; }
        .amount-pick small span { display: block; }
    }
    .amount-pick:hover { border-color: var(--primary); }
    .amount-pick:has(input:checked) { border-color: var(--primary); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--primary); }
    .amount-pick:has(input:checked) b { color: var(--primary-strong); }
    .amount-pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
    .card-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; color: var(--bad-ink); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
    .card-hint[hidden] { display: none; }
    .card-hint i { flex: none; color: var(--bad); font-size: 15px; }
    form input.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
    .card-hint.is-soft { color: var(--warn-ink); }
    .card-hint.is-soft i { color: var(--warn); }
    form input.is-invalid.is-soft { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
    .dep-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
    /* Bank dialog guide card: numbered steps on a soft blue card, the shop's own tips under a dashed line. */
    .dep-guide { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--info-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, var(--border)); }
    .dep-guide-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--info-ink); font-size: 14px; font-weight: 700; }
    .dep-guide-head i { font-size: 18px; }
    .dep-guide ol, .dep-guide-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .dep-guide ol { counter-reset: dep-step; }
    .dep-guide li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
    .dep-guide ol li::before { counter-increment: dep-step; content: counter(dep-step); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--info); color: #fff; font-size: 12px; font-weight: 700; }
    .dep-guide-tips { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--info) 30%, var(--border)); }
    .dep-guide-tips i { flex: none; width: 22px; margin-top: 1px; color: var(--info); font-size: 16px; text-align: center; }
    .dep-bank { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .dep-bank > img { width: 100%; max-width: 200px; margin: 0 auto; border-radius: 6px; background: var(--hover); aspect-ratio: 1; object-fit: contain; }
    .dep-bank p { margin: 0 0 6px; }
    .dep-copy { padding: 0 0 0 4px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .dep-code { color: var(--highlight); font-weight: 700; }
    /* Bank logo (VietQR CDN) on a white chip before the bank name; dropped when it fails to load. */
    .bank-brand { display: flex; align-items: center; gap: 8px; }
    .bank-brand > img { flex: none; width: auto; height: 28px; max-width: 84px; padding: 3px 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; }
    .dep-live { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--hover); color: var(--muted); font-size: 13px; }
    .dep-live > span { display: inline-flex; align-items: center; gap: 6px; }
    .dep-live > .dep-live-done { display: block; }
    .dep-live-done .bx { margin-right: 4px; vertical-align: -4px; }
    .dep-live .bx { flex: none; font-size: 18px; }
    .dep-live.is-done { background: var(--ok-soft); color: var(--ok-ink); font-weight: 600; }
    .dep-promo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: var(--radius-sm); background: linear-gradient(100deg, color-mix(in srgb, var(--ok) 14%, var(--card)), var(--card)); }
    .dep-promo > i { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 19px; }
    .dep-promo b { display: block; color: var(--ok-ink); font-size: 14.5px; }
    .dep-promo small { display: block; color: var(--text-2); font-size: 12.5px; }
    .dep-tiers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text-2); font-size: 13px; }
    .dep-tiers > b { width: 100%; color: var(--ink-strong); }
    .dep-tiers span b { color: var(--accent); }
    .dep-calc { margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
    .dep-calc label { display: block; margin: 8px 0 4px; font-size: 13px; }
    .dep-calc p { margin: 8px 0 0; }
    .dep-calc-out { color: var(--accent); }
    .dep-calc .dep-calc-warn { margin-top: 4px; color: var(--warn-ink); font-size: 12.5px; }
    /* Event gift dialog: a narrow centred .dlg, opened above the home notice popup when both are up. */
    .dlg-overlay[data-gift-dialog] { z-index: 2050; }
    .gift-dlg { width: 420px; text-align: center; }
    .gift-hero { position: relative; display: grid; place-items: center; height: 150px; margin: -4px 0 12px; overflow: hidden; border-radius: var(--radius-sm); background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / .35), transparent 45%), radial-gradient(rgb(255 255 255 / .15) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(135deg, var(--primary), var(--warn)); color: #fff; }
    .gift-hero > i { font-size: 76px; text-shadow: 0 6px 16px rgb(0 0 0 / .2); animation: gift-wiggle 2.4s infinite; }
    .gift-hero.has-image { height: auto; max-height: 220px; background: var(--surface-2); }
    .gift-img { display: block; width: 100%; height: 220px; padding: 8px; object-fit: contain; }
    .gift-reward { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-size: 13.5px; }
    .gift-reward > i { color: #f59e0b; }
    .gift-reward b { font-weight: 900; }
    .gift-rules { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--hover); color: var(--text); text-align: left; font-size: 13.5px; white-space: pre-line; }
    .gift-result { margin: 0 0 12px; color: var(--accent-strong); font-weight: 700; }
    .gift-result:empty { display: none; }
    /* Opened: twelve sparks fly out of the gift while the reward card pops in above the button. */
    .gift-sparks { position: absolute; left: 50%; top: 50%; pointer-events: none; }
    .gift-sparks i { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 2px; background: #facc15; opacity: 0; }
    .gift-sparks i:nth-child(3n + 1) { background: #fff; }
    .gift-sparks i:nth-child(3n + 2) { background: var(--primary); border-radius: 50%; }
    .gift-hero.is-won .gift-sparks i { animation: gift-spark .9s cubic-bezier(.2, .8, .3, 1) calc(var(--i) * 18ms) both; }
    .gift-hero.is-won > i, .gift-hero.is-won > .gift-img { animation: gift-open .6s ease-out; }
    @keyframes gift-spark { 0% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateY(0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg + 40deg)) translateY(-86px) scale(1); } }
    @keyframes gift-open { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-6deg); } 60% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); } }
    .gift-won { display: grid; gap: 2px; margin: 0 0 12px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-ink); animation: gift-won-in .5s cubic-bezier(.2, 1.4, .4, 1); }
    .gift-won[hidden] { display: none; }
    .gift-won > span { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
    .gift-won > b { color: var(--ink-strong); font-size: 26px; font-weight: 900; line-height: 1.2; }
    .gift-won > small { font-size: 13px; }
    @keyframes gift-won-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
    /* Below the button: the conditions with the customer's progress, the countdown, how the reward arrives and "Quà của bạn". */
    .gift-status { display: grid; gap: 10px; margin-top: 14px; text-align: left; }
    .gift-loading { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
    .gift-loading i { margin-right: 6px; }
    .gift-box { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
    .gift-box-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--ink-strong); font-size: 13.5px; }
    .gift-box-title i { color: var(--primary); font-size: 17px; }
    .gift-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .gift-checks li { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 13.5px; font-weight: 600; }
    .gift-checks li > i { flex: none; margin-top: 1px; color: var(--muted); font-size: 18px; }
    .gift-checks li.is-done > i { color: var(--ok); }
    .gift-checks li.is-todo > i { color: var(--warn); }
    .gift-checks li > span { flex: 1; min-width: 0; }
    .gift-checks small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
    .gift-bar { display: block; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--hover); }
    .gift-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--warn)); }
    .gift-next, .gift-how { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; }
    .gift-next { background: var(--info-soft); color: var(--info-ink); }
    .gift-next b { font-size: 15px; font-variant-numeric: tabular-nums; }
    .gift-next.is-blocked { background: var(--warn-soft); color: var(--warn-ink); }
    .gift-how { align-items: flex-start; background: var(--hover); color: var(--text); }
    .gift-next i, .gift-how i { flex: none; font-size: 18px; }
    .gift-history-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
    .gift-history-row:first-of-type { border-top: 0; }
    .gift-history-row.is-new { margin: 0 -8px; padding: 7px 8px; border-radius: var(--radius-sm); background: var(--warn-soft); animation: gift-won-in .5s ease-out; }
    .gift-history-row b { display: block; color: var(--ink-strong); font-size: 14px; }
    .gift-history-row small { color: var(--muted); font-size: 12px; }
    .gift-tag { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); font-size: 12px; font-style: normal; font-weight: 700; }
    .gift-tag.is-wait { background: var(--warn-soft); color: var(--warn-ink); }
    .gift-history-empty { margin: 0; color: var(--muted); font-size: 13px; }
    @media (prefers-reduced-motion: reduce) { .gift-hero.is-won .gift-sparks i, .gift-hero.is-won > i, .gift-hero.is-won > .gift-img, .gift-won, .gift-history-row.is-new { animation: none; } }

    /* Phone tab bar: the open tab's icon sits in a soft shop-colour pill; "Nạp tiền" keeps the same pill filled with the shop gradient, a light sweeping across it now and then. */
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; justify-content: space-around; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding: 4px 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .05); }
    .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
    .bottom-nav a i { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 999px; font-size: 22px; transition: background .2s, color .2s; }
    /* The account or notification sheet is open on a phone: the floating buttons never sit on its rows. */
    @media (max-width: 767px) {
        body:has(.user-chip[open], .bell[open]) .chat-fab, body:has(.user-chip[open], .bell[open]) .support-fab, body:has(.user-chip[open], .bell[open]) .gift-float { opacity: 0; visibility: hidden; pointer-events: none; }
    }
    /* A page field has the keyboard (shop-core.js): the bottom bars and floating buttons step aside so they never sit on it. */
    @media (max-width: 767px) and (pointer: coarse) {
        .is-typing .bottom-nav, .is-typing .chat-fab, .is-typing .support-fab, .is-typing .gift-float, .is-typing .gt-paybar { opacity: 0; visibility: hidden; pointer-events: none; }
    }
    .bottom-nav a.active { color: var(--primary-strong); }
    .bottom-nav a.active i { background: var(--primary-soft); color: var(--primary); }
    .bottom-nav .nav-topup { color: var(--primary-strong); }
    .bottom-nav .nav-topup i { position: relative; overflow: hidden; background: var(--grad); color: #fff; font-size: 20px; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s; }
    .bottom-nav .nav-topup i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: topup-shine 4.5s ease-in-out 1.5s infinite; }
    .bottom-nav .nav-topup:active i { transform: scale(.92); }
    @keyframes topup-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
    @media (prefers-reduced-motion: reduce) { .bottom-nav .nav-topup i::after { animation: none; } }

    /* ========== 12. Tablet / desktop ========== */
    @media (min-width: 480px) {
        .dep-bank { grid-template-columns: 150px minmax(0, 1fr); }
        .dep-bank > img { margin: 0; }
    }
    @media (min-width: 640px) {
        .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .commitments .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 768px) {
        body { padding-bottom: 0; }
        .container { padding: 0 16px; }
        main.container { padding-top: 20px; padding-bottom: 24px; }
        .header-inner { padding: 0 16px; gap: 24px; }
        .header-right { gap: 8px; }
        .logo { font-size: 24px; min-height: 48px; }
        .logo img { width: var(--logo-w); height: auto; max-height: 68px; }
        .logo-mark { width: 40px; height: 40px; margin-right: 8px; border-radius: 11px; font-size: 24px; }
        .logo-text { font-size: inherit; letter-spacing: 0; }
        .user-chip > summary { height: 44px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface-2); }
        .user-chip > summary:hover, .user-chip[open] > summary { background: var(--primary-soft); }
        .user-chip > summary > .avatar { display: grid; }
        .user-chip .who { display: block; }
        .user-chip .user-caret { display: inline; }
        .user-burger { display: none; }
        .search { display: block; }
        .pop { position: absolute; left: auto; right: 0; top: calc(100% + 8px); width: 300px; max-height: min(480px, calc(100vh - 120px)); }
        .user-chip .pop { max-height: calc(100vh - var(--header-h) - 16px); }
        /* PC: the light/dark switch already sits in the header. */
        .user-chip .pop.acct-menu { width: 260px; }
        .user-chip .acct-menu .menu-head .menu-theme { display: none; }
        .user-chip .pop a, .user-chip .pop button { min-height: 36px; font-size: 14px; }
        .user-chip .acct-menu .menu-sec a, .user-chip .acct-menu .menu-sec button { min-height: 32px; font-size: 13.5px; }
        .user-chip .pop .menu-group { padding: 6px 8px 1px; }
        /* Header and menu read as one white bar: the line sits under the menu only. */
        .header { border-bottom: 0; }
        .main-nav { display: block; position: sticky; top: var(--header-h); z-index: 998; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15, 23, 42, .04); }
        /* Plain text links; a thin shop-colour line slides in under the open page. */
        .main-nav .container { display: flex; align-items: center; gap: 2px; height: 46px; overflow-x: auto; scrollbar-width: none; }
        .main-nav a { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; height: 46px; padding: 0 14px; color: var(--text-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: color .15s; }
        .main-nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .2s; }
        .main-nav a:hover { color: var(--ink); }
        .main-nav a.active { color: var(--primary); }
        .main-nav a:hover::after { transform: scaleX(.4); }
        .main-nav a.active::after { transform: scaleX(1); }
        .notice-toast { left: auto; right: 16px; width: 340px; }
        .notice-welcome { width: 260px; }
        .page-hero { align-items: center; gap: 18px; margin-bottom: 18px; padding: 20px 24px; border-radius: var(--radius-lg); }
        .page-hero::after { top: -90px; right: -40px; width: 240px; height: 240px; border-width: 34px; }
        .page-hero-icon img, .page-hero-icon .shortcut-icon { width: 72px; height: 72px; border-radius: 21px; }
        .page-hero-icon .shortcut-icon { font-size: 34px; }
        .page-hero h1 { font-size: 25px; }
        .page-hero p { font-size: 14px; }
        .block { margin-bottom: 44px; }
        .section-title { font-size: 23px; }
        .block-link { font-size: 14px; }
        .tile { padding: 10px; border-radius: var(--radius-lg); }
        .tile-media { border-radius: 12px; }
        .tile-body { gap: 6px; padding: 13px 6px 4px; }
        .tile-name { font-size: 14.5px; }
        .tile .price { font-size: 17px; }
        .tile-media .media-placeholder { font-size: 22px; }
        .account-wrap { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
        .account-side { position: sticky; top: calc(var(--sticky-top) + 16px); }
        /* Card-less side column like a marketplace account page: the user on top, then groups with a tinted icon and indented links. */
        .account-user { display: flex; align-items: center; gap: 12px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
        .account-user .avatar { flex: none; width: 50px; height: 50px; font-size: 22px; }
        .account-user > div { min-width: 0; }
        .account-user b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink); }
        .account-user a { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 13px; color: var(--muted); }
        .account-user a:hover { color: var(--primary); }
        .account-nav { display: block; margin: 0; padding: 16px 0 0; overflow: visible; }
        .account-nav .nav-group { --tone: var(--primary); display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
        .account-nav .nav-group:first-child { margin-top: 0; }
        .account-nav .nav-group > i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
        .account-nav .tone-info { --tone: var(--info); }
        .account-nav .tone-warn { --tone: var(--warn); }
        .account-nav .tone-ok { --tone: var(--ok); }
        .account-nav .tone-accent { --tone: var(--accent); }
        .account-nav .tone-ink { --tone: var(--ink); }
        .account-nav a, .account-nav button { display: flex; width: 100%; height: 34px; padding: 0 0 0 36px; border: 0; border-radius: 0; background: none; color: var(--text-2); font-size: 14px; font-weight: 400; }
        .account-nav a > i, .account-nav button > i { display: none; }
        .account-nav .nav-sub-only { display: flex; }
        .account-nav a:hover, .account-nav button:hover { color: var(--primary); }
        .account-nav .active, .account-nav .active:hover { background: none; color: var(--primary); font-weight: 600; }
        .account-nav .nav-logout { display: block; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
        .account-nav .nav-logout button { gap: 10px; padding-left: 0; color: var(--muted); }
        .account-nav .nav-logout button > i { display: inline; width: 26px; text-align: center; font-size: 18px; }
        .filter-bar { display: flex; flex-wrap: wrap; }
        .filter-bar > * { width: auto; flex: 0 1 160px; }
        .filter-bar > input[type=text] { flex: 1 1 220px; }
        .filter-bar > .btn { flex: none; }
        .auth-card { margin-top: 24px; padding: 28px 28px; }
        .commitments { padding-bottom: 36px; }
        /* Room under the promises for the floating buttons, which dock there above the footer bar. */
        body:has(.chat-fab, .support-fab, .gift-float:not([hidden])) .commitments { padding-bottom: 92px; }
        .commitment { gap: 12px; padding: 16px 18px; }
        .commitment i { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
        .commitment span { font-size: 14px; }
        /* Computers: the dark footer is a slim centred block — logo and about, then the links with the support hours on their own centred row, then payment and support — split by thin rules, headings hidden. */
        .footer-dark { padding: 14px 0; }
        .footer-dark .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
        .footer-dark .container > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-width: 0; padding: 0 24px; }
        .footer-dark .container > div + div { padding-top: 0; border-top: 0; border-left: 1px solid rgb(255 255 255 / .1); }
        .footer-dark .container > .footer-pay { gap: 8px; padding: 0 20px; }
        .footer-dark .container > .footer-guide { flex-basis: 100%; justify-content: center; border-left: 0; }
        .footer-dark .container > .footer-guide + div { border-left: 0; }
        .footer-brand { margin: 0; font-size: 18px; }
        .footer-about { max-width: 280px; margin: 0; font-size: 12.5px; -webkit-line-clamp: 2; }
        .footer-links a { padding: 0; }
        .footer-links a i { display: inline-block; }
        .footer-hours { margin: 0; font-size: 13.5px; }
        .support-btn { height: 30px; margin: 0; padding: 0 12px; font-size: 13px; }
        .powered { padding: 9px 16px; font-size: 12px; }
        .support-fab { bottom: 24px; right: 20px; }
        .chat-fab { bottom: 24px; right: 20px; }
        .chat-fab.is-left { left: 20px; right: auto; }
        .chat-fab > button { padding: 0 18px 0 14px; }
        .chat-fab .chat-label { display: inline; }
        .chat-fab:has(.chat-panel:not([hidden])) .chat-label { display: none; }
        .chat-panel { height: 520px; }
        .gift-float { bottom: 24px; left: 20px; }
        .gift-fab.has-image { width: 240px; }
        .gift-fab.has-image > img { max-height: 240px; }
        .support-fab > button { width: 58px; height: 58px; }
        .bottom-nav { display: none; }
    }
    @media (min-width: 1024px) {
        .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
        .account-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .order-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1200px) {
        .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
}