/* SỬA CHỮA V1.0.2 — CLEAN FOUNDATION
   Layer 1: Apple/iOS visual tokens, reset, typography and shared layout.
   Viewport/safe-area/BottomNav geometry remains owned only by responsive.css. */
:root{
  --bg:#000;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --text:#fff;
  --text-2:rgba(235,235,245,.62);
  --text-3:rgba(235,235,245,.38);
  --label:#b9dcff;
  --line:rgba(255,255,255,.095);
  --blue:#0a84ff;
  --blue-2:#64b5ff;
  --green:#30d158;
  --orange:#ff9f0a;
  --red:#ff453a;
  --cyan:#64d2ff;
  --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:20px;
  --radius-card:22px;
  --motion:cubic-bezier(.22,.8,.2,1);
  --motion-spring:cubic-bezier(.2,.9,.25,1.12);
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --glass-bg:linear-gradient(180deg,rgba(42,42,48,.54),rgba(20,20,24,.46));
  --glass-border:1px solid rgba(255,255,255,.105);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 34px rgba(0,0,0,.16);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;background:#000;color:var(--text)}
html{overscroll-behavior:none}
body{
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.28;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button,input,textarea,select{font:inherit}
button{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.app{
  background:
    radial-gradient(90% 58% at -18% -10%,rgba(10,132,255,.19),transparent 62%),
    radial-gradient(82% 55% at 112% 8%,rgba(191,90,242,.13),transparent 64%),
    radial-gradient(82% 50% at -18% 112%,rgba(48,209,88,.075),transparent 64%),
    linear-gradient(180deg,#04070b 0%,#000 42%,#030205 100%);
}
.screen{display:none;scrollbar-width:none;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:10px 0 22px;
}
.head>div:first-child{min-width:0}
.eyebrow{
  margin:0 0 6px;
  color:var(--blue-2);
  font-size:12px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.12em;
}
.title{
  margin:0;
  font-family:var(--font-display);
  font-size:36px;
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:700;
}
.build-badge{
  position:absolute;
  right:54px;
  top:3px;
  padding:4px 7px;
  border-radius:999px;
  color:rgba(255,255,255,.58);
  font-size:9px;
  line-height:1;
  font-weight:650;
  letter-spacing:.01em;
  background:rgba(35,35,39,.34);
  border:1px solid rgba(255,255,255,.075);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
  backdrop-filter:blur(12px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;
  user-select:none;
}
.avatar{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(10,132,255,.88);
  color:#9bd4ff;
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
}
.hero{
  min-height:276px;
  margin-bottom:26px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border-radius:24px;
}
.repair-hero{
  background:
    radial-gradient(circle at 14% 4%,rgba(108,220,255,.88),transparent 32%),
    radial-gradient(circle at 96% 8%,rgba(171,88,236,.76),transparent 34%),
    radial-gradient(circle at 82% 100%,rgba(48,209,88,.46),transparent 34%),
    linear-gradient(145deg,#0a4b9e,#50389e 55%,#123a33);
}
.hero small{font-size:11px;font-weight:700;letter-spacing:.085em;color:rgba(255,255,255,.80)}
.hero h2{
  margin:7px 0 9px;
  font-family:var(--font-display);
  font-size:34px;
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
}
.hero p{margin:0 0 18px;color:rgba(255,255,255,.84);max-width:520px;font-size:16px;line-height:1.32}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.section{margin-top:30px}
.section h2{
  margin:0 0 15px;
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:700;
}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--text-2)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.model-list,#ticketList,#homeTicketList,#searchList{min-width:0}
.quote-stage[hidden]{display:none}
.form-grid{display:grid;gap:14px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail{
  position:absolute;
  inset:0;
  z-index:80;
  display:none;
  overflow-x:hidden;
  overflow-y:auto;
  padding:calc(var(--safe-top) + 14px) var(--side) calc(30px + env(safe-area-inset-bottom));
  background:radial-gradient(115% 66% at 10% -10%,rgba(10,132,255,.14),transparent 50%),linear-gradient(180deg,#07090d,#000 62%);
  scrollbar-width:none;
}
.detail::-webkit-scrollbar{display:none}
.detail.open{display:block;animation:detailIn .2s var(--motion)}
@keyframes detailIn{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}