/* KHO MÁY MỚI V1.1 CLEAN FOUNDATION
   Layer 1: tokens, reset, app shell, typography and shared layout. */
:root{
  --bg:#000;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --text:#fff;
  --text-2:#a9a9af;
  --line:rgba(255,255,255,.10);
  --blue:#0a84ff;
  --blue-2:#59b6ff;
  --green:#30d158;
  --nav-active:#bf5af2;
  --nav-active-hover:#ca7cff;
  --safe-top:max(10px,env(safe-area-inset-top));
  --safe-bottom:max(10px,env(safe-area-inset-bottom));
  --side:18px;
  --radius-card:24px;
  --motion:cubic-bezier(.22,.8,.2,1);
  --motion-spring:cubic-bezier(.2,.9,.25,1.12);
  --glass-bg:linear-gradient(145deg,rgba(53,53,58,.52),rgba(24,24,28,.52));
  --glass-border:1px solid rgba(255,255,255,.11);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 34px rgba(0,0,0,.18);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#020407;color:var(--text)}
html{overscroll-behavior:none}
body{
  height:100dvh;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button,input{font:inherit}
button{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.app{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(98% 70% at -10% -6%,rgba(34,132,232,.42) 0%,rgba(20,84,151,.23) 34%,rgba(9,35,66,.08) 52%,transparent 71%),
    radial-gradient(84% 64% at 110% 16%,rgba(139,88,232,.30) 0%,rgba(82,48,154,.16) 36%,rgba(35,20,72,.055) 55%,transparent 73%),
    radial-gradient(94% 68% at -12% 105%,rgba(22,151,145,.22) 0%,rgba(11,89,93,.11) 39%,transparent 73%),
    linear-gradient(158deg,#050b14 0%,#010204 41%,#06050b 72%,#020406 100%);
}
.screen{
  position:absolute;
  inset:0;
  display:none;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:calc(var(--safe-top) + 8px) var(--side) calc(92px + env(safe-area-inset-bottom));
  scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom));
  background:transparent;
}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:block}
.head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:8px 0 18px;
}
.title{margin:0;font-size:42px;line-height:1.03;letter-spacing:-1.5px;font-weight:780}
.build-badge{
  position:absolute;
  right:54px;
  top:5px;
  padding:4px 6px;
  border-radius:999px;
  color:rgba(255,255,255,.66);
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.2px;
  background:rgba(35,35,39,.44);
  border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
  backdrop-filter:blur(12px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:none;
  user-select:none;
}
.avatar{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:3px solid var(--blue);color:var(--blue);font-size:21px}
.hero{
  min-height:280px;
  margin-bottom:30px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:radial-gradient(circle at 15% 5%,#78e7ff,transparent 34%),radial-gradient(circle at 90% 18%,#ffd56d,transparent 34%),linear-gradient(145deg,#5e5ce6,#30d158);
}
.hero h2{margin:5px 0 8px;font-size:32px;line-height:1.05;letter-spacing:-.8px}
.hero p{margin:0 0 16px;color:rgba(255,255,255,.86)}
.section{margin-top:28px}
.section h2{margin:0 0 14px;font-size:27px;line-height:1.1;letter-spacing:-.5px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.muted{color:var(--text-2)}
.card-title{margin:0}
#homeList,#quoteList,#catalogList,#searchList{min-width:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}