/* SỬA CHỮA V1.0.2 — Layer 3 viewport/safe-area/responsive ownership.
   This is the only file allowed to own AppShell viewport and BottomNav geometry. */

html{height:100%;min-height:100%;overflow:hidden;background:#000}
body{position:relative;width:100%;height:100dvh;min-height:100dvh;overflow:hidden;background:#000}
.app{position:relative;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
.screen{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-top) + 8px) max(var(--side),env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) max(var(--side),env(safe-area-inset-left));scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}

/* Floating BottomNav: one vertical positioning mechanism only. */
.tabwrap{position:absolute;left:0;right:0;top:auto;bottom:max(2px,calc(env(safe-area-inset-bottom) - 14px));height:64px;margin:0;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));z-index:80;pointer-events:none;background:transparent}
.tabs{width:min(560px,100%);height:64px;margin:0 auto}

@media (max-width:390px){
  :root{--side:18px}
  .title{font-size:34px}
  .hero{min-height:252px;padding:20px}
  .hero h2{font-size:31px}
  .stat-grid{gap:8px}
  .stat-card{min-height:90px;padding:12px 10px 13px}
  .stat-icon{top:10px;right:9px;width:26px;height:26px;border-radius:9px}
  .stat-icon svg{width:16px;height:16px}
  .stat-value{font-size:28px}
  .stat-label{font-size:12px}
  .issue-grid{gap:9px}
  .issue-card{min-height:136px;padding:13px}
  .repair-option-top{display:block}
  .repair-option-top b{display:block;margin-top:8px}
  .form-grid.two{grid-template-columns:1fr}
  .form-card{padding:17px}
  .tab span{font-size:9px}
}

@media (min-width:700px){
  :root{--side:30px}
  .screen{max-width:920px;left:50%;right:auto;transform:translateX(-50%)}
  .detail{left:50%;right:auto;width:min(920px,100%);transform:translateX(-50%)}
  .title{font-size:44px}
  .hero{min-height:330px}
  .hero h2{font-size:42px}
  .stat-grid{gap:14px}
  .stat-card{min-height:108px;padding:16px}
  .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-card{padding:20px}
  .ticket-card{padding:18px}
  .detail-info-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-info-card>div,.detail-info-card>div:nth-child(n){border-radius:0}
  .detail-info-card>div:first-child{border-radius:20px 0 0 0}
  .detail-info-card>div:nth-child(3){border-radius:0 20px 0 0}
  .detail-info-card>div:nth-last-child(3){border-radius:0 0 0 20px}
  .detail-info-card>div:last-child{border-radius:0 0 20px 0}
}

@media (min-width:1100px){
  body{background:#05070b}
  .app{max-width:1440px;margin:0 auto}
  .screen{max-width:1120px;padding-bottom:34px;padding-left:170px}
  .detail{max-width:950px}
  .tabwrap{top:50%;bottom:auto;left:22px;right:auto;width:122px;height:auto;padding:0;transform:translateY(-50%)}
  .tabs{width:122px;height:auto;grid-template-columns:1fr;gap:4px;padding:7px;border-radius:31px}
  .tab{min-height:68px;border-radius:24px}
  .tab span{font-size:10px}
  .hero{min-height:360px}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .toast{bottom:30px}
}

@media (display-mode:standalone) and (max-width:1099px){
  html,body,.app{height:100vh;min-height:100vh;max-height:100vh}
  .screen{padding-top:calc(env(safe-area-inset-top) + 12px)}
}