/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/15cdfa1fd883cec2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fcce74a2c50797d0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/192831e68d5da19b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/24af766ee9bbfc8b.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/7cd1f28582bd3aa4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/4c25826416358c17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/a4a19814300ef353.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/39cfa85ed7f5b690.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/1f09cf2cad8deace.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cc213dd9a52f2956.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/9a81d46fe497bb94.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/d0a722dfe679d853.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/ccf0be0636649040.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/7fecf4f094b40b5d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/7932b61e1016c9af.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* bụt Ktol — a clear, youthful storefront, in light and dark. */
:root {
  color-scheme:light; --bg:#f7f8fc; --surface:#fff; --surface-soft:#f0f3fa; --surface-glass:#fffffff5;
  --line:#e0e5ee; --line-strong:#b7c5df; --hairline:#e7ebf3; --ink:#1b2437; --ink-soft:#3d4c63; --muted:#647187;
  --blue:#345de3; --blue-dark:#244ac2; --blue-light:#edf2ff; --mint:#345de3; --mint-light:#edf2ff;
  --gold:#a56b18; --gold-light:#fff3dc; --danger:#c73747; --danger-light:#ffeef0; --warning:#996115;
  --r-xs:9px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --shadow:0 8px 32px #223a6710; --shadow-lg:0 24px 80px #16224425; --ease:cubic-bezier(.23,1,.32,1);
  --font:"Be Vietnam Pro",system-ui,-apple-system,sans-serif; --font-display:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --wallet:#edf2ff; --wallet-ink:#274679; --positive:#177354; --positive-bg:#eaf8f1; --input:#fff;
  --overlay:#17243f55; --accent-fill:#345de3; --accent-ink:#fff;
}
:root[data-theme=dark] {
  color-scheme:dark; --bg:#12151d; --surface:#1b202c; --surface-soft:#242c3c; --surface-glass:#1b202cf5;
  --line:#333d50; --line-strong:#53698f; --hairline:#2c3546; --ink:#f2f4ff; --ink-soft:#d1d9e9; --muted:#a6b1c7;
  --blue:#a4b9ff; --blue-dark:#becbff; --blue-light:#28385c; --mint:#a4b9ff; --mint-light:#28385c;
  --gold:#edc889; --gold-light:#3b3325; --danger:#ff9cac; --danger-light:#442a36; --warning:#efc77f;
  --wallet:#223050; --wallet-ink:#d0dcff; --positive:#9bdfba; --positive-bg:#263e36; --input:#151b26;
  --overlay:#030812aa; --shadow:0 8px 32px #0002; --shadow-lg:0 24px 80px #0007;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
html,body { min-height:100%; margin:0; }
body { background:var(--bg); color:var(--ink); font:400 15px/1.6 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,textarea,select { font:inherit; touch-action:manipulation; }
button { border:0; color:inherit; background:none; cursor:pointer; -webkit-appearance:none; }
a { color:var(--blue); text-decoration:none; }
button,a { transition:transform 150ms var(--ease),background-color 150ms,color 150ms,border-color 150ms; }
button:active:not(:disabled),.hero-cta:active { transform:scale(.97); }
button:disabled { opacity:.55; cursor:not-allowed; }
button[aria-busy=true] { cursor:wait; }
button[aria-busy=true]::after { content:""; width:12px; height:12px; display:inline-block; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; margin-left:8px; animation:spin .65s linear infinite; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button svg { width:20px; height:20px; flex:none; }
.hidden { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:16px; z-index:100; background:var(--ink); color:var(--surface); padding:12px 20px; border-radius:12px; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
#app { width:min(100%,1180px); min-height:100dvh; margin:auto; padding:0 32px calc(110px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; gap:24px; min-height:92px; border-bottom:1px solid var(--hairline); }
.wordmark { display:flex; align-items:center; gap:11px; color:var(--ink); font:800 23px/1.2 var(--font-display); letter-spacing:-.8px; margin-right:auto; }
.wordmark small { display:block; font:500 10px var(--font); color:var(--muted); letter-spacing:0; margin-top:5px; }
.brand-monogram { display:grid; place-items:center; width:43px; height:43px; border-radius:14px; background:var(--accent-fill); color:#fff; font:800 31px var(--font-display); padding-right:3px; letter-spacing:-2px; }
.brand-lockup { display:flex; align-items:center; gap:9px; min-width:0; }
.avatar { display:grid; place-items:center; flex:none; width:35px; height:35px; border-radius:50%; background:var(--blue-light); color:var(--blue); font-weight:700; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.brand { max-width:160px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:600; }
.user-logo { display:flex; align-items:center; gap:12px; min-width:0; margin-right:auto; color:var(--ink); }
.user-logo .avatar { width:44px; height:44px; border-radius:15px; outline:1px solid var(--line); outline-offset:3px; }
.user-logo .who { min-width:0; }
.user-logo .brand { display:block; font-size:15px; font-weight:700; max-width:230px; }
.user-logo .subbrand { display:block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-logo .avatar.has-photo { padding:2px; background:linear-gradient(135deg,#759bff,#d59ed8,#8ed2bf); outline:none; }
.user-logo .avatar.has-photo img { border-radius:13px; }
.subbrand { font-size:10px; color:var(--muted); margin-top:2px; }
.subbrand i { display:none; }
.top-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-soft); color:var(--ink-soft); font-size:19px; }
.icon-btn.on { background:var(--blue-light); color:var(--blue); }
.theme-toggle { display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:12px; font-weight:500; }
.theme-toggle svg { width:17px; height:17px; }
.theme-moon { display:none; }
[data-theme=dark] .theme-sun { display:none; }
[data-theme=dark] .theme-moon { display:block; }
.notice { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; line-height:1.6; margin:18px 0 0; }
.notice-dot { width:5px; height:5px; background:var(--blue); border-radius:50%; flex:none; }
.intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:center; padding:38px 0 40px; }
.intro-copy { min-width:0; }
.intro-label { margin:0 0 16px; color:var(--muted); font-size:13px; }
.intro h1 { font:800 clamp(40px,4.7vw,62px)/1.12 var(--font-display); letter-spacing:-2.8px; margin:0 0 19px; }
.headline-line { display:block; overflow:clip; padding-bottom:.14em; margin-bottom:-.14em; }
.headline-line>span { display:inline-block; animation:type-reveal .7s var(--ease) both; }
.headline-line:nth-child(2)>span { animation-delay:80ms; }
.headline-accent { background:linear-gradient(100deg,var(--blue) 10%,#8258cc 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme=dark] .headline-accent { background-image:linear-gradient(100deg,#a4b9ff,#d0a7ff); }
@keyframes type-reveal { from { opacity:0; transform:translateY(70%) rotate(3deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
.hero-cta { position:relative; overflow:hidden; isolation:isolate; }
.hero-cta::before { content:""; position:absolute; pointer-events:none; inset:-80% auto -80% 0; width:30%; background:linear-gradient(90deg,transparent,#ffffff30,transparent); transform:translateX(-180%) rotate(20deg); transition:transform 250ms var(--ease); }
.intro-copy>p:not(.intro-label) { max-width:36ch; color:var(--muted); font-size:14px; line-height:1.8; margin:0; }
.intro-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:26px; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:48px; padding:13px 20px; border-radius:12px; background:var(--accent-fill); color:#fff; font-size:13px; font-weight:600; }
.hero-cta>span { font-size:19px; }
.intro .text-button { font-size:12px; }
.wallet { background:var(--wallet); color:var(--wallet-ink); border:1px solid var(--hairline); border-radius:24px; padding:26px; min-width:0; }
.wallet-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wallet-top>div:first-child { min-width:0; }
.kicker { font-size:12px; font-weight:500; }
.balance { color:var(--ink); font:800 clamp(30px,3.3vw,42px)/1.4 var(--font-display); letter-spacing:-1.4px; margin:4px 0 6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wallet-meta { font-size:10px; opacity:.9; }
.wallet-right { display:grid; justify-items:end; gap:10px; flex-shrink:0; }
.round-btn { width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; color:var(--wallet-ink); }
.secure-chip { font-size:9px; font-weight:500; }
.balance-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0; padding-top:18px; border-top:1px solid var(--line-strong); }
.balance-stats>div { min-width:0; }
.balance-stats span { display:block; font-size:9px; }
.balance-stats b { display:block; font-size:12px; margin-top:5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wallet-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.w-btn { display:flex; justify-content:center; align-items:center; gap:6px; padding:10px 6px; min-height:42px; font-size:11px; font-weight:500; border-radius:11px; background:var(--surface); color:var(--ink-soft); }
.w-btn.primary { background:var(--accent-fill); color:white; }
.w-btn>span { display:flex; }
.w-btn svg { width:16px; height:16px; }
.balance-hidden .balance,.balance-hidden .balance-stats b,.balance-hidden .wallet-meta { filter:blur(9px); user-select:none; }
.tabs { position:fixed; z-index:40; inset:auto 0 0; width:100%; background:var(--surface-glass); border-top:1px solid var(--line); padding:7px max(16px,calc((100% - 640px)/2)) calc(7px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; backdrop-filter:blur(12px); }
.tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; padding:6px 4px; font-size:10px; font-weight:500; color:var(--muted); border-radius:11px; white-space:nowrap; }
.tab-icon { display:flex; font-size:18px; }
.tab-icon svg { width:21px; height:21px; }
.tab.active { color:var(--blue); background:var(--blue-light); font-weight:600; }
.tab-glider { display:none; }
.more-overlay { position:fixed; z-index:60; inset:0; background:var(--overlay); display:flex; align-items:flex-end; justify-content:center; }
.more-sheet { background:var(--surface); border-radius:24px 24px 0 0; width:min(100%,560px); padding:22px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg); animation:sheet-enter .2s var(--ease); }
.more-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.more-sheet-head h2 { font:700 20px var(--font-display); margin:0; }
.more-sheet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.more-sheet .tab { flex-direction:row; gap:12px; min-height:60px; font-size:13px; justify-content:flex-start; padding:16px; background:var(--surface-soft); }
.more-sheet .tab.active { background:var(--blue-light); }
@keyframes sheet-enter { from { opacity:0; transform:translateY(24px); } }
.views { min-width:0; }
.panel { padding:30px; background:var(--surface); border:1px solid var(--hairline); border-radius:24px; margin:28px 0 0; min-width:0; animation:view-enter .18s var(--ease); }
.back-button { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--muted); font-size:11px; margin:0 0 19px; padding:0; }
.page-wallet-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; background:var(--blue-light); border-radius:18px; margin:0 0 28px; }
.page-wallet-summary>div>span { display:block; color:var(--muted); font-size:12px; }
.page-wallet-summary b { display:block; color:var(--ink); font:800 34px var(--font-display); letter-spacing:-1px; margin-top:5px; overflow-wrap:anywhere; }
.page-wallet-actions { display:flex; flex-wrap:wrap; gap:10px; }
.page-wallet-actions .btn-ghost { margin:0; width:auto; background:var(--surface); font-size:11px; }
.overview-panel { padding:0; margin:0; background:transparent; border:0; }
@keyframes view-enter { from { opacity:.3; transform:translateY(5px); } }
.home-shop-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }
.home-shop-heading h2 { font:800 26px/1.3 var(--font-display); margin:0 0 7px; letter-spacing:-.8px; }
.home-shop-heading p { font-size:12px; color:var(--muted); margin:0; }
.home-help { display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--surface); padding:24px; border:1px solid var(--hairline); border-radius:18px; margin:24px 0; }
.home-help b { font-size:15px; font-weight:600; }
.home-help p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.wallet-insights { background:var(--surface); border:1px solid var(--hairline); border-radius:18px; margin-top:24px; }
.wallet-insights>summary { padding:20px 24px; font-size:14px; font-weight:600; display:flex; justify-content:space-between; cursor:pointer; list-style:none; }
.wallet-insights>summary::-webkit-details-marker { display:none; }
.wallet-insights[open]>summary>span { transform:rotate(45deg); }
.insights-body { padding:10px 24px 24px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0 0 26px; }
.section-heading h1,.admin-head h1 { font:800 clamp(25px,3vw,34px)/1.25 var(--font-display); letter-spacing:-1.1px; margin:0 0 8px; }
.section-heading p { color:var(--muted); font-size:13px; line-height:1.75; margin:0; max-width:65ch; }
.section-icon { display:grid; place-items:center; width:45px; height:45px; color:var(--blue); border-radius:14px; background:var(--blue-light); flex-shrink:0; }
.section-icon svg { width:23px; height:23px; }
.period-chip { color:var(--muted); font-size:11px; padding:8px 12px; background:var(--surface-soft); border-radius:9px; white-space:nowrap; }
.metric-grid,.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0; }
.metric-card,.stat { border:1px solid var(--hairline); background:var(--surface-soft); padding:19px; border-radius:14px; min-width:0; }
.metric-card>span,.stat>span { display:block; font-size:11px; color:var(--muted); }
.metric-card>b,.stat>b { display:block; color:var(--ink); font:700 25px var(--font-display); margin:12px 0 6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-card>small { color:var(--muted); font-size:10px; }
.metric-card.positive>b { color:var(--positive); }
.flow-card { background:var(--surface-soft); border-radius:16px; padding:24px; }
.flow-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.flow-head b { display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:5px; }
.eyebrow { display:block; color:var(--muted); font-size:11px; }
.chart-legend { font-size:10px; white-space:nowrap; color:var(--muted); }
.chart-legend::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue); margin-right:7px; }
.spark-wrap { height:125px; margin:24px 0 10px; background:repeating-linear-gradient(to top,transparent 0,transparent 30px,var(--line) 31px); }
#miniChart { height:100%; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:end; gap:clamp(14px,4vw,52px); padding:0 20px; }
.chart-bar { height:var(--h); min-height:2px; max-height:100%; background:var(--line-strong); border-radius:5px 5px 0 0; }
.chart-bar.today { background:var(--blue); }
.chart-labels { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; color:var(--muted); font-size:10px; }
.quick-head,.recent-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 15px; }
.quick-head h2,.recent-head h2 { font:700 18px var(--font-display); margin:0; letter-spacing:-.4px; }
.quick-head>span { font-size:11px; color:var(--muted); }
.quick-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.quick-action { text-align:left; padding:16px; background:var(--surface-soft); border-radius:14px; display:flex; flex-direction:column; gap:12px; }
.quick-action>span { color:var(--blue); width:23px; height:23px; }
.quick-action svg { width:23px; height:23px; }
.quick-action b { display:block; font-size:12px; font-weight:600; }
.quick-action small { display:block; color:var(--muted); font-size:10px; line-height:1.6; margin-top:3px; }
.premium-banner { display:flex; align-items:center; width:100%; text-align:left; gap:16px; padding:20px; margin-top:22px; border-radius:14px; background:var(--blue-light); }
.premium-banner-mark { font-size:24px; color:var(--blue); }
.premium-banner b { display:block; font-size:13px; font-weight:600; }
.premium-banner small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.premium-banner-arrow { margin-left:auto; font-size:23px; color:var(--blue); }
.home-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--hairline); }
.home-row:last-child { border-bottom:0; }
.home-row-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--positive-bg); color:var(--positive); flex:none; }
.home-row-mark.out { color:var(--blue); background:var(--blue-light); }
.home-row-info { flex:1; min-width:0; }
.home-row-info b { display:block; font-size:12px; font-weight:600; }
.home-row-info span { display:block; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.home-row-amt { font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.home-row-amt.in { color:var(--positive); }
.home-row-amt.out { color:var(--ink-soft); }
.text-button { display:inline-flex; align-items:center; gap:12px; color:var(--blue); font-size:12px; font-weight:600; min-height:44px; padding:5px 0; white-space:nowrap; }
label { display:block; font-size:13px; font-weight:500; margin:20px 0 9px; }
label em { color:var(--muted); font-size:11px; font-style:normal; font-weight:400; margin-left:5px; }
input,textarea,select { width:100%; min-height:48px; padding:13px 15px; border-radius:12px; border:1px solid var(--line); background:var(--input); color:var(--ink); font-size:16px; transition:border-color .15s; }
textarea { resize:vertical; line-height:1.7; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.9; }
input[type=checkbox] { width:18px; min-height:18px; accent-color:var(--accent-fill); }
.btn-main,.btn-ok,.btn-no,.btn-ghost,.btn-gold { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:47px; padding:12px 17px; font-size:13px; font-weight:600; border-radius:12px; margin-top:15px; }
.btn-main,.btn-ok { color:#fff; background:var(--accent-fill); }
.btn-main>span { margin-left:auto; }
.btn-ghost { background:var(--surface-soft); color:var(--ink-soft); border:1px solid var(--line); }
.btn-gold { color:var(--gold); background:var(--gold-light); }
.btn-no { color:var(--danger); background:var(--danger-light); }
.chip-row,.seg-row,.admin-nav { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 15px; color:var(--ink-soft); background:var(--surface-soft); border:1px solid transparent; border-radius:10px; font-size:12px; font-weight:500; }
.chip.active { color:var(--blue); background:var(--blue-light); border-color:var(--blue); }
.hint,.sub { color:var(--muted); font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.hint { margin:14px 0; }
.warn { color:var(--warning); font-size:12px; padding:12px; background:var(--gold-light); border-radius:10px; }
.divider { height:1px; background:var(--hairline); margin:26px 0; }
.list { display:grid; gap:12px; margin-top:18px; }
.card,.result-card { border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:18px; min-width:0; }
.card .name { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.card .sub { margin:5px 0; }
.card>b { display:block; margin-top:9px; font-size:17px; font-variant-numeric:tabular-nums; }
.card-top,.row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.row { padding:12px 0; border-bottom:1px solid var(--hairline); }
.row:last-child { border-bottom:0; }
.meta { min-width:0; flex:1; overflow-wrap:anywhere; }
.k { color:var(--muted); font-size:11px; }
.v { color:var(--ink); font-size:14px; margin-top:5px; overflow-wrap:anywhere; }
.copy { display:inline-flex; justify-content:center; align-items:center; gap:6px; min-width:44px; min-height:40px; padding:8px 12px; background:var(--surface-soft); color:var(--blue); border-radius:9px; font-size:11px; font-weight:500; }
.copy.wide { width:100%; margin-top:12px; }
.copy.done { background:var(--positive-bg); color:var(--positive); }
.badge { display:inline-block; color:var(--positive); background:var(--positive-bg); border-radius:7px; padding:4px 8px; margin-top:5px; font-size:10px; font-weight:500; }
.badge.warn { color:var(--warning); background:var(--gold-light); }
.badge.bad { color:var(--danger); background:var(--danger-light); }
.ok-line { color:var(--positive); font-size:13px; font-weight:600; margin-bottom:10px; }
.skeleton-line { min-height:18px; border-radius:7px; background:var(--line); opacity:.6; margin:12px 0; }
.skeleton-line.short { width:60%; }
.empty-state { grid-column:1/-1; text-align:center; padding:44px 24px; background:var(--surface-soft); border-radius:16px; }
.empty-state>b { display:block; color:var(--ink); font-size:15px; font-weight:600; }
.empty-state>span { display:block; font-size:35px; margin-bottom:8px; color:var(--muted); }
.empty-state>p { color:var(--muted); font-size:12px; line-height:1.7; margin:8px 0 0; }
.bank-scroll { display:flex; gap:9px; overflow:auto; padding:3px 0 12px; }
.bank-chip { flex:0 0 auto; min-width:110px; padding:12px 15px; text-align:left; background:var(--surface-soft); border:1px solid transparent; border-radius:12px; }
.bank-chip b { font-size:13px; }
.bank-chip.active { border-color:var(--blue); background:var(--blue-light); }
.bank-chip .sub { font-size:10px; }
.withdraw-hero,.dep-hero { background:var(--blue-light); border-radius:18px; padding:24px; margin:20px 0; color:var(--ink); }
.withdraw-hero span { display:block; color:var(--muted); font-size:12px; }
.withdraw-hero strong { font:800 32px var(--font-display); margin-top:6px; display:block; }
.withdraw-favorites { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.favorite { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px; border:1px solid var(--line); border-radius:10px; min-height:44px; }
.favorite b { font-size:11px; }
.favorite span { font-size:10px; color:var(--muted); }
.dep-head { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.dep-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:13px; margin-top:14px; }
.dep-row b { font-weight:600; overflow-wrap:anywhere; }
.dep-memo-badge { margin-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; background:var(--surface); border-radius:12px; font-size:12px; }
.memo-mark { color:var(--blue); font-size:18px; }
.dep-qr,.qr-box { width:min(100%,240px); margin:22px auto 12px; padding:12px; border-radius:16px; background:#fff; }
.dep-qr img,.qr-box img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.dep-qr-cap { color:var(--muted); text-align:center; font-size:11px; line-height:1.7; }
.dep-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0; }
.dep-step { display:flex; align-items:flex-start; gap:10px; }
.dep-step-n { display:grid; place-items:center; width:25px; height:25px; flex:none; border-radius:50%; font-size:11px; background:var(--blue-light); color:var(--blue); }
.dep-step b { display:block; font-size:12px; font-weight:600; }
.dep-step div>span { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.qr-memo { font-size:12px; overflow-wrap:anywhere; }
.shop-dep-card { display:flex; align-items:center; gap:14px; width:100%; padding:16px 20px; background:var(--blue-light); border-radius:14px; text-align:left; margin-bottom:20px; }
.shop-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--surface); color:var(--blue); font-size:22px; flex:none; }
.shop-info { flex:1; min-width:0; }
.shop-info b { display:block; font-size:14px; font-weight:600; }
.shop-info>span { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.shop-card { display:flex; align-items:center; flex-wrap:wrap; gap:18px; background:var(--surface-soft); padding:24px; border:1px solid var(--line); border-radius:18px; }
.voucher-mark { display:grid; place-items:center; width:56px; height:56px; border-radius:15px; background:#2348bc; color:white; font:800 22px var(--font-display); letter-spacing:-1px; }
.voucher-form { border:1px solid var(--line); background:var(--surface-soft); border-radius:18px; padding:24px; margin-top:20px; }
.vc-total { padding:18px 0 8px; color:var(--muted); font-size:12px; }
.vc-total b { font:700 24px var(--font-display); color:var(--ink); display:block; margin-top:5px; font-variant-numeric:tabular-nums; }
.catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:34px 0 22px; }
.catalog-heading h2 { font:700 22px var(--font-display); letter-spacing:-.6px; margin:0; }
.catalog-heading p { font-size:12px; color:var(--muted); margin:7px 0 0; }
.catalog-heading>span { color:var(--muted); font-size:11px; white-space:nowrap; }
.search-field { display:flex; align-items:center; gap:12px; margin:0; padding:0 16px; background:var(--input); border:1px solid var(--line); border-radius:12px; }
.search-field>span { font-size:25px; color:var(--muted); }
.search-field input { border:0; background:transparent; padding-left:0; }
.catalog-filters { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:16px 0 24px; }
#productCount { color:var(--muted); margin-left:auto; font-size:11px; }
.acc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.acc-card { position:relative; isolation:isolate; border:1px solid var(--line); border-radius:20px; padding:8px; overflow:hidden; display:flex; flex-direction:column; min-width:0; background:var(--surface); transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; }
.acc-card::after { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; background:linear-gradient(125deg,#6c8eff,#c291e1 50%,#73cdbb); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:.26; transition:opacity .18s; }
.acc-card { animation:product-enter 300ms var(--ease) backwards; }
.acc-card:nth-child(2) { animation-delay:50ms; }
.acc-card:nth-child(3) { animation-delay:100ms; }
.acc-card:nth-child(4) { animation-delay:150ms; }
.acc-card:nth-child(5) { animation-delay:200ms; }
@keyframes product-enter { from { opacity:0; transform:translateY(12px); } }
.acc-card:focus-within::after { opacity:1; }
.product-symbol { transition:transform .22s var(--ease); }
.product-art { position:relative; min-height:160px; background:#e8edff; color:#3850a1; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; overflow:hidden; }
.product-art::after { content:""; position:absolute; inset:-50% auto -50% 0; width:32%; background:linear-gradient(90deg,transparent,#ffffff60,transparent); transform:translateX(-180%) rotate(20deg); transition:transform 250ms var(--ease); pointer-events:none; }
.product-symbol { font:800 42px var(--font-display); letter-spacing:-2px; }
.product-art-caption { font-size:10px; opacity:.8; letter-spacing:0; }
.acc-card:nth-child(3n+2) .product-art { background:#ffe9e0; color:#854f3c; }
.acc-card:nth-child(3n) .product-art { background:#ddf3ec; color:#226d59; }
.acc-card:nth-child(4n) .product-art { background:#eee4ff; color:#6c4593; }
.product-content { padding:16px 12px 10px; display:flex; flex-direction:column; flex:1; }
.acc-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.acc-top>b,.acc-top h3 { font:700 17px var(--font-display); margin:0; letter-spacing:-.3px; }
.acc-top h3>a { color:var(--ink); }
.stock-pill { color:var(--positive); background:var(--positive-bg); border-radius:7px; padding:4px 7px; font-size:9px; font-weight:500; }
.stock-pill.unavailable { color:var(--muted); background:var(--surface-soft); }
.product-description { color:var(--muted); font-size:11px; line-height:1.75; margin:12px 0 20px; }
.product-bottom { margin-top:auto; padding-top:18px; }
.acc-price { color:var(--ink); font:800 24px var(--font-display); letter-spacing:-.8px; font-variant-numeric:tabular-nums; margin-bottom:14px; }
.acc-price small { display:block; font:400 10px var(--font); color:var(--muted); letter-spacing:0; margin-top:3px; }
.acc-buy { min-height:42px; font-size:12px; margin:0; }
.acc-buy:disabled { background:var(--surface-soft); color:var(--muted); opacity:1; }
.product-link { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:42px; padding:10px 12px; color:var(--blue); background:var(--blue-light); border-radius:10px; font-size:11px; font-weight:600; }
.premium-hero { display:flex; align-items:flex-start; gap:22px; padding:28px; background:var(--blue-light); border-radius:18px; }
.premium-emblem { font-size:34px; color:var(--blue); }
.premium-hero h1 { font:700 28px/1.3 var(--font-display); margin:10px 0; letter-spacing:-.8px; }
.premium-hero p { font-size:13px; color:var(--muted); }
.premium-orbit { display:none; }
.benefit-list article { display:flex; align-items:flex-start; gap:16px; padding:22px 0; border-bottom:1px solid var(--hairline); }
.benefit-list article>span { color:var(--blue); font-size:24px; }
.benefit-list b { font-size:14px; font-weight:600; }
.benefit-list p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.admin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.admin-pill { color:var(--blue); background:var(--blue-light); padding:7px 10px; border-radius:8px; font-size:10px; font-weight:600; }
.admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:15px; }
.admin-actions>button { flex:1; min-width:90px; margin:0; }
.admin-actions>span:empty { flex:1; }
.admin-nav { margin:22px 0; }
.stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ops-feed { color:var(--muted); font-size:11px; line-height:1.8; background:var(--surface-soft); padding:15px; border-radius:12px; }
.sp-row { display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:14px; }
.sp-row b { font-size:12px; }
.sp-row input { min-width:0; }
.check-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.check-row input { width:18px; min-height:18px; }
.settings-preview { display:flex; gap:15px; align-items:center; padding:18px; border-radius:15px; background:var(--surface-soft); }
.settings-preview-fab { width:45px; height:45px; flex:none; }
.settings-preview img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.settings-preview b { font-size:13px; }
.settings-preview small { display:block; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.user-box { background:var(--surface-soft); border-radius:14px; padding:18px; margin-top:15px; }
.support-fab { position:fixed; z-index:35; right:22px; bottom:calc(94px + env(safe-area-inset-bottom)); width:45px; height:45px; border:2px solid var(--surface); background:var(--accent-fill); border-radius:50%; overflow:hidden; box-shadow:var(--shadow); padding:0; }
.support-fab img { width:100%; height:100%; object-fit:cover; }
.support-fab-fallback { display:none; color:#fff; font-weight:700; font-size:22px; }
.support-fab.no-img img { display:none; }
.support-fab.no-img .support-fab-fallback { display:block; }
.cskh { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:32px; border-top:1px solid var(--line); padding:22px 0; color:var(--ink-soft); font-size:13px; font-weight:500; }
.cskh>span { color:var(--blue); }
.foot { color:var(--muted); font-size:11px; padding:0 0 12px; }
.modal,.ban-overlay { position:fixed; z-index:80; inset:0; display:flex; align-items:center; justify-content:center; background:var(--overlay); padding:22px; backdrop-filter:blur(5px); }
.modal-card,.ban-card { width:min(100%,440px); border-radius:23px; background:var(--surface); padding:28px; box-shadow:var(--shadow-lg); animation:modal-enter .2s var(--ease); }
.modal-title { font:700 21px var(--font-display); letter-spacing:-.6px; }
.modal-body { font-size:13px; color:var(--ink-soft); line-height:1.8; white-space:pre-wrap; margin:15px 0 24px; }
.ban-card { text-align:center; }
.ban-icon { display:grid; place-items:center; width:48px; height:48px; background:var(--danger-light); color:var(--danger); border-radius:50%; margin:auto; font-weight:700; font-size:24px; }
.ban-card h2 { font-size:22px; line-height:1.4; }
.ban-reason-label,.ban-date { font-size:11px; color:var(--muted); }
.ban-reason { font-size:14px; }
@keyframes modal-enter { from { opacity:0; transform:scale(.97) translateY(8px); } }
.toast { position:fixed; z-index:100; left:50%; top:max(20px,env(safe-area-inset-top)); transform:translateX(-50%); max-width:min(480px,calc(100% - 32px)); background:var(--ink); color:var(--bg); border-radius:12px; padding:13px 20px; font-size:12px; box-shadow:var(--shadow-lg); }
.boot { min-height:100dvh; padding:28vh 24px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.boot-orb { display:grid; place-items:center; width:62px; height:62px; border-radius:21px; background:var(--accent-fill); color:#fff; font:800 40px var(--font-display); letter-spacing:-3px; margin-bottom:12px; }
.boot strong { font-size:16px; font-weight:600; }
.boot>span { color:var(--muted); font-size:12px; }
.access-gate { min-height:100dvh; max-width:480px; margin:auto; padding:15vh 28px 48px; display:flex; flex-direction:column; align-items:flex-start; }
.access-gate h1 { font:700 30px/1.3 var(--font-display); letter-spacing:-1px; margin:28px 0 12px; }
.access-gate p { color:var(--muted); font-size:14px; line-height:1.8; }
.access-gate .hero-cta { margin-top:20px; }
.access-gate .btn-ghost { width:auto; }
.bgm-youtube { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; left:-10px; bottom:-10px; border:0; }
body:not([data-view=home]) .intro { display:none; }
.public-container { width:min(100%,1180px); margin:auto; padding:0 32px; }
.public-nav { display:flex; align-items:center; gap:24px; margin:0 20px; }
.public-nav a { color:var(--ink-soft); font-size:12px; font-weight:500; }
.public-login { min-height:42px; font-size:11px; padding:10px 15px; }
.public-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:70px; align-items:center; padding:62px 0 66px; }
.public-hero h1 { font:800 clamp(44px,5.1vw,68px)/1.1 var(--font-display); letter-spacing:-3px; margin:0 0 22px; }
.public-hero>div>p:not(.intro-label) { max-width:38ch; color:var(--muted); font-size:14px; line-height:1.85; }
.public-feature { padding:30px; border-radius:24px; background:var(--blue-light); }
.public-feature-top { display:flex; justify-content:space-between; color:var(--blue); font-size:11px; }
.public-feature h2 { font:700 30px/1.3 var(--font-display); letter-spacing:-1px; margin:26px 0; }
.public-categories { display:grid; gap:10px; }
.public-categories>a { display:flex; align-items:center; gap:12px; color:var(--ink); padding:13px; background:var(--surface); border-radius:14px; font-size:12px; font-weight:600; }
.public-categories small { display:block; color:var(--muted); font-size:10px; font-weight:400; margin-top:4px; }
.public-categories b { margin-left:auto; }
.category-mark { display:grid; place-items:center; width:39px; height:39px; border-radius:11px; background:#ddf3ec; color:#226d59; font:800 13px var(--font-display); }
.category-mark.mb { background:#e8edff; color:#3850a1; }
.catalog-count { color:var(--muted); font-size:11px; }
.public-catalog .product-art img { width:100%; height:auto; aspect-ratio:5/3; object-fit:cover; display:block; }
.public-catalog .product-art { min-height:0; }
.purchase-guide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:80px; padding:60px 0; margin-top:58px; border-top:1px solid var(--line); }
.purchase-guide h2 { font:800 38px/1.2 var(--font-display); letter-spacing:-1.5px; margin:0 0 20px; }
.purchase-guide>div>p { color:var(--muted); font-size:13px; max-width:30ch; }
.purchase-guide ol { margin:0; padding:0; list-style:none; counter-reset:guide; }
.purchase-guide li { counter-increment:guide; position:relative; padding:0 0 24px 46px; }
.purchase-guide li::before { content:counter(guide); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--blue-light); color:var(--blue); font-size:11px; font-weight:600; }
.purchase-guide li>b { font-size:14px; font-weight:600; }
.purchase-guide li>p { color:var(--muted); font-size:12px; line-height:1.8; margin:7px 0 0; max-width:52ch; }
.public-footer { border-top:1px solid var(--line); padding:30px 0 35px; }
.public-footer>.wordmark { display:inline-flex; font-size:21px; }
.public-footer>p { color:var(--muted); font-size:12px; margin:17px 0; }
.public-footer>div { display:flex; gap:25px; flex-wrap:wrap; font-size:12px; margin:20px 0; }
.public-footer>small { color:var(--muted); font-size:10px; }
.public-product { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; padding-top:35px; }
.public-product-image { border-radius:24px; overflow:hidden; }
.public-product-image img { width:100%; height:auto; display:block; }
.product-detail { padding-top:55px; }
.product-detail h1 { font:800 40px/1.2 var(--font-display); letter-spacing:-1.6px; margin:15px 0; }
.detail-price { font:800 34px var(--font-display); margin:20px 0 10px; letter-spacing:-1px; }
.availability { color:var(--muted); font-size:12px; }
.product-detail>p:not(.detail-price) { font-size:13px; color:var(--muted); line-height:1.8; }
.product-detail .hero-cta { margin:20px 0 12px; }
.product-detail .detail-note { font-size:11px!important; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (hover:hover) and (pointer:fine) {
  .acc-card:hover { transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 12px 28px #4361a71a; }
  .acc-card:hover::after { opacity:1; }
  .acc-card:hover .product-symbol { transform:scale(1.04); }
  .acc-card:hover .product-art::after,.hero-cta:hover::before { transform:translateX(440%) rotate(20deg); }
  .hero-cta:hover,.btn-main:hover:not(:disabled),.w-btn.primary:hover { background:#244bc6; }
  .tab:hover:not(.active),.icon-btn:hover,.btn-ghost:hover { background:var(--blue-light); color:var(--blue); }
  .text-button:hover { color:var(--blue-dark); }
  .quick-action:hover,.product-link:hover { background:var(--blue-light); }
}
@media (max-width:950px) {
  #app { padding-left:24px; padding-right:24px; }
  .intro { gap:30px; }
  .intro h1 { font-size:48px; }
  .brand-lockup .who { display:none; }
  .wallet { padding:22px; }
  .quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .acc-grid { gap:14px; }
  .product-art { min-height:145px; }
  .public-nav { gap:15px; margin:0 8px; }
  .public-hero { gap:35px; }
  .public-feature { padding:25px; }
  .public-feature h2 { font-size:26px; }
  .public-product { gap:30px; }
}
@media (max-width:700px) {
  #app { padding:0 18px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { min-height:80px; gap:10px; padding-top:env(safe-area-inset-top); }
  .wordmark { font-size:20px; gap:9px; letter-spacing:-.7px; }
  .wordmark small { font-size:9px; }
  .user-logo { gap:10px; }
  .user-logo .avatar { width:37px; height:37px; border-radius:12px; }
  .user-logo .brand { font-size:13px; max-width:140px; }
  .user-logo .subbrand { font-size:9px; max-width:140px; }
  .brand-monogram { width:36px; height:36px; border-radius:12px; font-size:26px; }
  .brand-lockup { display:none; }
  .top-actions { gap:6px; }
  .theme-toggle { padding:8px 10px; min-height:40px; gap:6px; font-size:10px; }
  .theme-toggle svg { width:16px; height:16px; }
  .icon-btn { width:36px; height:40px; border-radius:10px; font-size:19px; }
  .notice { font-size:9px; margin:13px 0 0; }
  .intro { grid-template-columns:minmax(0,1fr); gap:24px; padding:27px 0 30px; }
  .intro-label { font-size:11px; margin-bottom:12px; }
  .intro h1 { font-size:46px; letter-spacing:-2px; margin-bottom:15px; }
  .intro-copy>p:not(.intro-label) { font-size:12px; max-width:35ch; }
  .intro-actions { margin-top:20px; gap:18px; }
  .intro .text-button { font-size:11px; }
  .hero-cta { font-size:12px; min-height:44px; padding:11px 16px; gap:20px; }
  .wallet { padding:20px; border-radius:20px; }
  .balance { font-size:33px; line-height:1.25; }
  .balance-stats { margin:17px 0; padding-top:15px; }
  .balance-stats span { font-size:9px; }
  .balance-stats b { font-size:11px; }
  .tabs { padding-left:8px; padding-right:8px; gap:3px; }
  .tab { font-size:9px; min-height:49px; gap:4px; padding:5px 3px; border-radius:10px; }
  .tab-icon svg { width:20px; height:20px; }
  .home-shop-heading { gap:10px; align-items:flex-start; margin-bottom:19px; }
  .home-shop-heading h2 { font-size:23px; letter-spacing:-.7px; }
  .home-shop-heading p { font-size:11px; max-width:26ch; }
  .home-shop-heading>.text-button { font-size:10px; gap:7px; min-height:30px; }
  .acc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .acc-card { padding:6px; border-radius:17px; }
  .product-art { min-height:120px; border-radius:12px; gap:5px; }
  .product-symbol { font-size:31px; letter-spacing:-1.5px; }
  .product-art-caption { font-size:9px; }
  .product-content { padding:13px 7px 7px; }
  .acc-top { gap:6px; }
  .acc-top>b,.acc-top h3 { font-size:15px; }
  .stock-pill { font-size:8px; padding:4px 5px; }
  .product-description { font-size:10px; line-height:1.7; margin:10px 0 14px; }
  .product-bottom { padding-top:15px; }
  .acc-price { font-size:21px; margin-bottom:12px; }
  .acc-price small { font-size:9px; }
  .product-link { padding:9px 8px; font-size:10px; min-height:40px; }
  .acc-buy { font-size:10px; min-height:42px; padding:10px 5px; }
  .home-products .acc-card:last-child { display:none; }
  .home-help { padding:19px; gap:13px; margin:20px 0; }
  .home-help b { font-size:13px; }
  .home-help p { font-size:11px; }
  .home-help .text-button { font-size:11px; }
  .wallet-insights>summary { padding:18px; font-size:12px; }
  .insights-body { padding:8px 16px 20px; }
  .panel { padding:22px 18px; border-radius:20px; margin-top:23px; }
  .page-wallet-summary { padding:18px; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
  .page-wallet-summary b { font-size:30px; }
  .page-wallet-actions { gap:8px; }
  .page-wallet-actions .btn-ghost { min-height:40px; padding:9px 12px; font-size:10px; }
  .overview-panel { padding:0; margin:0; }
  .section-heading { gap:12px; margin-bottom:23px; }
  .section-heading h1 { font-size:27px; letter-spacing:-1px; }
  .section-heading p { font-size:11px; }
  .section-icon { width:38px; height:38px; border-radius:12px; }
  .section-icon svg { width:20px; height:20px; }
  .period-chip { font-size:10px; padding:6px 9px; }
  .metric-grid,.stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric-card,.stat { padding:15px; }
  .metric-card>span,.stat>span { font-size:10px; }
  .metric-card>b,.stat>b { font-size:21px; margin:10px 0 5px; }
  .metric-card>small { font-size:9px; }
  .flow-card { padding:17px; }
  .flow-head b { font-size:11px; }
  .chart-legend { font-size:9px; }
  #miniChart { gap:15px; padding:0 6px; }
  .spark-wrap { height:100px; }
  .quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-action { padding:15px; gap:9px; }
  .quick-action b { font-size:11px; }
  .quick-action small { font-size:9px; }
  .quick-head h2,.recent-head h2 { font-size:17px; }
  .quick-head>span { font-size:9px; }
  .home-row-info b { font-size:11px; }
  .home-row-info span { font-size:9px; }
  .home-row-amt { font-size:11px; }
  .premium-banner { padding:17px; gap:11px; }
  .premium-banner b { font-size:12px; }
  .premium-banner small { font-size:10px; }
  .shop-dep-card { padding:15px; gap:10px; }
  .shop-info b { font-size:12px; }
  .shop-info>span { font-size:10px; }
  .shop-card { padding:18px; gap:12px; }
  .voucher-mark { width:43px; height:43px; font-size:18px; border-radius:12px; }
  .shop-card>.btn-gold { min-height:40px; font-size:11px; }
  .catalog-heading { align-items:flex-start; gap:10px; margin:28px 0 18px; }
  .catalog-heading h2 { font-size:20px; }
  .catalog-heading p { font-size:11px; }
  .catalog-heading>span { font-size:9px; }
  .catalog-filters { gap:7px; }
  #productCount { font-size:10px; }
  .chip { font-size:11px; min-height:40px; padding:8px 12px; }
  .voucher-form { padding:19px; }
  .hint,.sub { font-size:11px; }
  .dep-steps { grid-template-columns:minmax(0,1fr); gap:17px; }
  .dep-hero { padding:19px; }
  .dep-row { font-size:12px; }
  .dep-memo-badge { font-size:11px; }
  .dep-head { font-size:11px; }
  .dep-qr { width:min(100%,210px); }
  .card,.result-card { padding:15px; }
  .card .name { font-size:12px; }
  .modal-card,.ban-card { padding:24px; border-radius:20px; }
  .modal-title { font-size:19px; }
  .modal-body { font-size:12px; }
  .premium-hero { padding:20px; gap:14px; }
  .premium-hero h1 { font-size:23px; }
  .premium-hero p { font-size:12px; }
  .premium-emblem { font-size:26px; }
  .sp-row { grid-template-columns:48px minmax(0,1fr) minmax(0,1fr); gap:7px; }
  .sp-row label { grid-column:1/-1; }
  .support-fab { right:14px; bottom:calc(83px + env(safe-area-inset-bottom)); width:40px; height:40px; }
  .cskh { font-size:12px; margin-top:26px; padding:20px 0; }
  .foot { font-size:10px; }
  .public-container { padding:0 20px; }
  .public-nav,.public-login { display:none; }
  .public-hero { grid-template-columns:minmax(0,1fr); padding:35px 0 38px; gap:28px; }
  .public-hero h1 { font-size:50px; letter-spacing:-2.2px; }
  .public-hero>div>p:not(.intro-label) { font-size:12px; }
  .public-feature { padding:24px; border-radius:22px; }
  .public-feature h2 { font-size:27px; }
  .public-catalog .acc-top h3 { font-size:13px; }
  .public-catalog .home-shop-heading h2 { font-size:23px; }
  .purchase-guide { grid-template-columns:minmax(0,1fr); gap:24px; padding:35px 0; margin-top:35px; }
  .purchase-guide h2 { font-size:32px; letter-spacing:-1.2px; }
  .purchase-guide>div>p { font-size:12px; max-width:40ch; }
  .purchase-guide li { padding-bottom:22px; }
  .purchase-guide li>b { font-size:13px; }
  .purchase-guide li>p { font-size:11px; }
  .public-footer { padding:25px 0; }
  .public-product { grid-template-columns:minmax(0,1fr); padding-top:20px; gap:20px; }
  .product-detail { padding-top:0; }
  .product-detail h1 { font-size:34px; }
}
@media (max-width:360px) {
  #app { padding-left:14px; padding-right:14px; }
  .wordmark { font-size:18px; }
  .wordmark small { display:none; }
  .theme-toggle #themeLabel { display:none; }
  .intro h1 { font-size:42px; }
  .home-shop-heading { flex-wrap:wrap; }
  .catalog-heading { flex-wrap:wrap; }
  .acc-grid { gap:9px; }
  .acc-price { font-size:19px; }
  .acc-top { align-items:flex-start; flex-direction:column; }
  .product-symbol { font-size:27px; }
  .product-art { min-height:108px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.using-keyboard .panel,.using-keyboard .acc-card,.using-keyboard .more-sheet { animation:none; }

/* Slow wallet aurora; the readable content never moves. */
.wallet { position:relative; isolation:isolate; overflow:hidden; background:#172c55; border-color:#728ccb55; color:#e4ecff; }
.wallet::before { content:""; position:absolute; z-index:-1; inset:-65%; background:radial-gradient(ellipse at 25% 30%,#3989c5 0,transparent 40%),radial-gradient(ellipse at 70% 65%,#7864d1 0,transparent 38%),radial-gradient(ellipse at 45% 80%,#39a89d 0,transparent 35%),#14284c; animation:wallet-aurora 22s ease-in-out infinite alternate; pointer-events:none; }
@keyframes wallet-aurora { from { transform:translate(-5%,-3%) rotate(-12deg); } to { transform:translate(6%,4%) rotate(13deg); } }
.wallet .balance { color:#fff; }
.wallet .round-btn { color:#fff; border-color:#d3e1ff55; background:#ffffff0c; }
.wallet .balance-stats { border-color:#d3e1ff44; }
.wallet .w-btn:not(.primary) { background:#ffffffeb; color:#1c355d; }
.wallet-brandline { font-size:12px; font-weight:500; margin-bottom:23px; color:#dce9ff; }
.wallet-brandline>span { font-weight:600; background:linear-gradient(90deg,#fff,#a9f0ff,#e6bcff,#b5ffe0,#fff); background-size:300% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:word-colors 8s ease-in-out infinite alternate; }
.headline-accent { background-size:240% 100%; animation:word-colors 9s ease-in-out infinite alternate; }
@keyframes word-colors { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.notice { background:var(--blue-light); padding:9px 12px; border-radius:10px; gap:10px; }
.notice-window { min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.notice-track { display:flex; width:max-content; animation:notice-flow 35s linear infinite; }
.notice-track>span { flex:none; white-space:nowrap; font-size:10px; color:var(--blue); }
@keyframes notice-flow { to { transform:translateX(-50%); } }
.notice:focus .notice-track,.notice:hover .notice-track { animation-play-state:paused; }
.tabs { inset:auto auto calc(14px + env(safe-area-inset-bottom)) 50%; transform:translateX(-50%); width:min(490px,calc(100% - 28px)); padding:7px 9px; border:1px solid var(--line); border-radius:27px; box-shadow:0 12px 40px #15326025,inset 0 1px #ffffff25; backdrop-filter:blur(24px); }
.tabs .tab { border-radius:20px; min-height:50px; }
.support-fab { bottom:calc(100px + env(safe-area-inset-bottom)); }
.effect-card { position:relative; }
.effect-card.acc-card::after { display:none; }
@property --rim-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.animated-rim { position:absolute; z-index:3; inset:0; padding:1.2px; border-radius:inherit; pointer-events:none; background:conic-gradient(from var(--rim-angle),transparent 0deg,var(--blue) 75deg,#ba8cdd 140deg,#66ceba 210deg,transparent 300deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:.52; animation:rim-turn 14s linear infinite paused; }
.rim-visible>.animated-rim { animation-play-state:running; }
@keyframes rim-turn { to { --rim-angle:360deg; } }
.auto-deposit-status { background:var(--blue-light); color:var(--blue); padding:15px 17px; border-radius:12px; font-size:12px; line-height:1.8; margin:20px 0; }
@media (prefers-reduced-motion:reduce) {
 .notice-track { transform:none; animation:none; width:auto; }
 .notice-track>span { white-space:normal; }
 .notice-track>span[aria-hidden] { display:none; }
 .wallet::before,.headline-accent,.wallet-brandline>span,.animated-rim { animation:none!important; }
}
.deposit-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.deposit-input-card,.deposit-qr-card { border:1px solid var(--line); padding:24px; border-radius:20px; background:var(--surface); min-width:0; }
.deposit-step-heading { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.deposit-step-heading>span { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--blue); background:var(--blue-light); font-size:11px; font-weight:600; flex:none; }
.deposit-step-heading h2 { font-size:16px; font-weight:600; line-height:1.5; letter-spacing:-.4px; margin:0; }
.deposit-amount-field { display:flex; align-items:center; gap:12px; border:1px solid var(--line-strong); border-radius:14px; background:var(--input); padding-right:18px; }
.deposit-amount-field input { font:600 29px/1.4 var(--font); border:0; min-width:0; background:transparent; padding:16px; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.deposit-amount-field>span { color:var(--muted); font-size:17px; }
.deposit-amount-hint { color:var(--blue); font-size:12px; margin:9px 0 16px; }
.deposit-quick-amounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.deposit-quick-amounts .chip { padding:9px 6px; font-size:11px; }
.deposit-recipient { display:flex; align-items:center; gap:12px; margin:28px 0 18px; padding-top:23px; border-top:1px solid var(--line); }
.deposit-bank-icon { width:43px; height:43px; border-radius:13px; background:#2854ba; color:white; display:grid; place-items:center; font-size:16px; font-weight:700; }
.deposit-recipient b { display:block; font-size:13px; font-weight:600; }
.deposit-recipient span { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.deposit-input-card .dep-row { display:block; margin:15px 0; }
.deposit-input-card .dep-row>span { display:block; font-size:10px; color:var(--muted); margin-bottom:5px; }
.deposit-input-card .dep-row>b { font-size:14px; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.deposit-qr-card { text-align:center; background:var(--surface-soft); }
.deposit-qr-card .deposit-step-heading { justify-content:center; }
.qr-amount-label { font-size:11px; color:var(--muted); }
.qr-amount-label strong { display:block; color:var(--ink); font-size:24px; font-weight:600; margin-top:4px; letter-spacing:-.7px; }
.deposit-qr-card .dep-qr { width:min(100%,285px); padding:13px; margin:18px auto; border-radius:18px; box-shadow:0 4px 20px #253e7010; }
.deposit-qr-card .dep-memo-badge { display:flex; text-align:left; justify-content:space-between; gap:12px; background:var(--surface); border:1px dashed var(--line-strong); margin-top:16px; }
.dep-memo-badge small { display:block; color:var(--muted); font-size:9px; }
.dep-memo-badge strong { display:block; color:var(--blue); font-size:13px; margin-top:4px; overflow-wrap:anywhere; }
.qr-transfer-note { font-size:10px; color:var(--muted); line-height:1.8; }
.qr-transfer-note b { color:var(--ink-soft); font-weight:600; }
.announcement-dialog { position:fixed; border:0; border-radius:22px; background:var(--surface); color:var(--ink); padding:0; width:min(720px,calc(100% - 28px)); max-height:calc(100dvh - 40px); overflow:auto; box-shadow:var(--shadow-lg); }
.announcement-dialog::backdrop { background:#070d20a6; backdrop-filter:blur(6px); }
.announcement-dialog>img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.announcement-x { position:absolute; top:12px; right:12px; z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:#111827a6; font-size:25px; }
.announcement-actions { display:flex; gap:12px; justify-content:center; padding:18px 24px 8px; }
.announcement-actions button { width:auto; min-width:125px; margin:0; }
.announcement-dialog>p { color:var(--muted); text-align:center; font-size:11px; line-height:1.7; padding:0 20px 18px; margin:6px 0 0; }
@media (max-width:700px) {
 .deposit-layout { grid-template-columns:minmax(0,1fr); gap:17px; }
 .deposit-input-card,.deposit-qr-card { padding:18px; border-radius:16px; }
 .deposit-step-heading h2 { font-size:14px; }
 .deposit-amount-field input { font-size:26px; padding:14px; }
 .deposit-quick-amounts { gap:7px; }
 .deposit-quick-amounts .chip { font-size:10px; }
 .deposit-qr-card .dep-qr { width:min(100%,250px); }
 .deposit-input-card .dep-row>b { font-size:13px; }
 .announcement-dialog { border-radius:17px; }
 .announcement-actions { padding:14px 15px 6px; gap:9px; }
 .announcement-actions button { min-width:0; flex:1; font-size:11px; padding:11px 7px; }
 .announcement-dialog>p { font-size:10px; padding-bottom:14px; }
 #tabNap>.back-button { display:none; }
 .auto-deposit-status { font-size:11px; }
}

/* Typography revision: readable Vietnamese, controlled weight and clean wrapping. */
.intro h1,.public-hero h1 { font-weight:700; font-size:clamp(34px,4vw,52px); line-height:1.24; letter-spacing:-1.5px; }
.home-shop-heading h2 { font-weight:650; font-size:24px; line-height:1.45; letter-spacing:-.65px; }
.home-shop-heading { align-items:flex-start; }
.home-shop-heading>div { flex:1; min-width:0; }
.home-shop-heading p { line-height:1.8; }
.section-heading h1,.admin-head h1 { font-weight:650; letter-spacing:-.8px; line-height:1.35; }
.balance,.page-wallet-summary b { font-weight:650; letter-spacing:-1px; }
.product-symbol { font-weight:700; }
.acc-price { font-weight:650; }
@media (max-width:700px) {
 .intro h1,.public-hero h1 { font-size:34px; line-height:1.26; letter-spacing:-1px; }
 .home-shop-heading { flex-wrap:wrap; gap:8px; }
 .home-shop-heading>div { flex-basis:100%; }
 .home-shop-heading h2 { font-size:22px; font-weight:650; letter-spacing:-.55px; line-height:1.45; }
 .home-shop-heading p { max-width:none; font-size:11px; }
 .home-shop-heading>.text-button { min-height:32px; font-size:11px; }
 .section-heading h1 { font-size:24px; font-weight:650; }
 .balance { font-size:31px; }
}
/* local font route ready */

/* Home: wallet first, with every everyday destination in reach. */
:root[data-theme=dark] {
 --bg:#0e131b; --surface:#171f2b; --surface-soft:#1c2735; --surface-glass:#151d29ed;
 --line:#2c3a4d; --hairline:#253142; --line-strong:#465d7b;
 --ink:#edf3fc; --ink-soft:#c4d1e3; --muted:#98a9c0;
 --blue:#a0bcff; --blue-light:#223451; --input:#111a26;
 --accent-fill:#416ee6; --positive:#97dfc1; --positive-bg:#203b34;
}
.intro { padding:28px 0 26px; gap:48px; }
.intro-label { display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:13px; }
.intro-label>span { width:6px; height:6px; border-radius:50%; background:var(--positive); box-shadow:0 0 12px #79d5ad40; }
.intro h1 { font-size:clamp(30px,3.6vw,46px); font-weight:600; line-height:1.3; letter-spacing:-1.3px; margin-bottom:14px; }
.intro-copy>p:not(.intro-label) { font-size:12px; max-width:32ch; line-height:1.85; }
.wallet { border-radius:25px; padding:25px; background:#18334e; box-shadow:0 18px 45px #06111c24; }
.wallet::before { background:radial-gradient(ellipse at 25% 30%,#357a9b 0,transparent 43%),radial-gradient(ellipse at 75% 70%,#3b609c 0,transparent 41%),radial-gradient(ellipse at 40% 85%,#2c7f79 0,transparent 38%),#142740; }
.wallet-brandline { margin-bottom:20px; font-size:11px; letter-spacing:.1px; }
.wallet .kicker { font-size:11px; color:#d4e2f4; }
.wallet .balance { font-size:clamp(33px,3.2vw,42px); line-height:1.4; font-weight:600; letter-spacing:-1.3px; }
.wallet .balance-stats { margin:18px 0; }
.wallet .w-btn.primary { background:#edf4ff; color:#1b3a65; }
.wallet .w-btn:not(.primary) { background:#dceaff16; color:#eaf2ff; border:1px solid #c6dfff24; }
.wallet .round-btn { background:#071a2928; border-color:#c7ddff33; }
.home-services { margin:0 0 32px; }
.services-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 17px; }
.services-eyebrow { color:var(--blue); font-size:10px; letter-spacing:1.1px; margin:0 0 4px; }
.services-heading h2 { margin:0; font-size:21px; line-height:1.5; font-weight:600; letter-spacing:-.55px; }
.services-heading>span { font-size:10px; color:var(--muted); white-space:nowrap; padding:6px 9px; border:1px solid var(--hairline); border-radius:8px; }
.services-heading>.home-support { font-size:11px; color:var(--blue); white-space:nowrap; min-height:44px; padding:9px 12px; border-radius:12px; background:var(--surface-soft); }
body[data-view=home] .support-fab { display:none; }
.home-services .quick-actions { grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; }
.home-services .quick-action { position:relative; min-width:0; min-height:134px; border:1px solid var(--line); border-radius:19px; padding:18px 13px; gap:16px; background:linear-gradient(145deg,var(--surface-soft),var(--surface)); transition:transform 180ms var(--ease),border-color 180ms ease,background-color 180ms ease; }
.home-services .quick-action>span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--blue-light); color:var(--blue); box-shadow:inset 0 1px #ffffff0b; }
.home-services .quick-action svg { width:22px; height:22px; }
.home-services .quick-action b { font-size:12px; font-weight:600; line-height:1.5; }
.home-services .quick-action small { font-size:9px; line-height:1.7; margin-top:4px; }
.home-services .q-nap>span { color:var(--positive); background:var(--positive-bg); }
.home-services .q-wd>span { color:var(--gold); background:var(--gold-light); }
.home-services .q-acc>span { color:var(--ink-soft); background:var(--surface-soft); border:1px solid var(--line); }
.home-services .q-nap { border-color:color-mix(in srgb,var(--positive) 30%,var(--line)); }
.home-shop-heading h2 { font-size:21px; }
.home-shop-heading p { font-size:11px; }
.tabs { border-color:var(--line-strong); box-shadow:0 14px 38px #030b1e45,inset 0 1px #ffffff09; }
[data-theme=dark] .tabs .tab.active { background:#30446a; color:#d8e5ff; }
.animated-rim { opacity:.33; }
@media (hover:hover) and (pointer:fine) {
 .home-services .quick-action:hover { transform:translateY(-3px); border-color:var(--blue); }
 .wallet .w-btn:hover { filter:brightness(1.1); }
}
@media (max-width:950px) {
 .home-services .quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .home-services .quick-action { min-height:110px; flex-direction:row; align-items:center; gap:13px; padding:16px; }
}
@media (max-width:700px) {
 .topbar { min-height:74px; }
 .notice { margin-top:10px; padding:7px 11px; }
 .intro { gap:14px; padding:20px 0; }
 .intro-label { display:none; }
 .intro h1 { font-size:24px; font-weight:600; line-height:1.5; letter-spacing:-.8px; margin-bottom:5px; }
 .intro .headline-line { display:inline; }
 .intro .headline-line+.headline-line { margin-left:.2em; }
 .intro-copy>p:not(.intro-label) { max-width:none; font-size:11px; line-height:1.8; }
 .wallet { padding:20px; border-radius:22px; }
 .wallet-brandline { display:none; }
 .wallet .balance { font-size:32px; line-height:1.25; }
 .wallet .balance-stats { margin:12px 0; padding-top:10px; gap:8px; }
 .home-services { margin-bottom:27px; }
 .services-heading { margin-bottom:13px; }
 .services-eyebrow { font-size:9px; letter-spacing:.7px; }
 .services-heading h2 { font-size:19px; letter-spacing:-.4px; }
 .services-heading>span { font-size:9px; padding:5px 7px; }
 .home-services .quick-actions { gap:9px; }
 .home-services .quick-action { flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:110px; padding:13px 5px; gap:10px; border-radius:17px; }
 .home-services .quick-action>span { width:38px; height:38px; border-radius:12px; }
 .home-services .quick-action b { font-size:11px; }
 .home-services .quick-action small { font-size:9px; margin-top:3px; }
 .home-shop-heading h2 { font-size:20px; }
}
@media (max-width:350px) {
 .home-services .quick-action small { font-size:8px; }
 .home-services .quick-action { min-height:112px; }
 .services-heading h2 { font-size:17px; }
 .intro h1 { font-size:22px; }
}

/* Full Vietnamese glyphs must never be clipped by the heading reveal. */
body { font-synthesis:none; font-kerning:normal; }
.headline-line { overflow:visible; padding-top:.14em; padding-bottom:.18em; margin-top:-.14em; margin-bottom:-.18em; }
@keyframes type-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.home-shop-heading h2,.section-heading h1,.admin-head h1,.balance,.page-wallet-summary b,.acc-price { font-weight:600; }

/* Music remains available on mobile; load the player only when enabled. */
.top-actions { flex-shrink:0; }
#btnBgm { display:grid; }
.music-background { position:fixed; left:-1000px; top:0; width:200px; height:200px; overflow:hidden; opacity:0; pointer-events:none; }
.music-background .bgm-youtube { position:static; display:block; width:200px; height:200px; opacity:1; border:0; pointer-events:none; }
@media (max-width:350px) { .top-actions { gap:4px; } .theme-toggle { padding:8px; } .topbar { gap:8px; } .user-logo { gap:8px; } }

#bootRecovery { display:grid; gap:16px; justify-items:center; margin-top:20px; }
#bootRecovery .text-button { font-size:12px; }
/* Purchased credentials stay inside an explicit, reusable receipt. */
.order-receipt{padding:0!important;overflow:hidden}
.order-receipt summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px;cursor:pointer;list-style:none}
.order-receipt summary::-webkit-details-marker{display:none}
.order-receipt summary>span{min-width:0;overflow-wrap:anywhere}
.order-receipt summary>span:last-child{text-align:right;flex-shrink:0}
.order-receipt summary small{display:block;font-size:11px;line-height:1.6;opacity:.65;margin-top:5px}
.order-receipt[open] summary{border-bottom:1px solid var(--line,rgba(128,128,128,.2))}
.order-content{padding:12px;display:grid;gap:12px}
.account-delivery .meta{min-width:0;flex:1}
.account-delivery .v{white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.account-delivery .copy{flex-shrink:0}