/* KHO MÁY MỚI V1.1 CLEAN FOUNDATION
   Layer 3: viewport and responsive ownership. This is the only file allowed to own BottomNav geometry. */
@media (max-width:767px){
  html{height:100%;min-height:100%;overflow:hidden;background:#020306}
  body{position:relative;width:100%;height:100dvh;min-height:100dvh;overflow:hidden;background:#020306}
  .app{position:relative;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;box-shadow:none}
  .screen{width:100%;height:100%;min-height:0;padding-bottom:calc(92px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .detail{width:100%;height:100%;min-height:0;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .tabwrap{position:absolute;left:0;right:0;top:auto;bottom:max(2px,calc(env(safe-area-inset-bottom) - 14px));height:64px;margin:0;padding:0 14px;z-index:80;pointer-events:none;background:transparent}
  .tabs{position:relative;isolation:isolate;width:100%;height:64px;margin:0;padding:4px;overflow:hidden;pointer-events:auto;border-radius:32px;background:linear-gradient(180deg,rgba(190,190,200,.10),rgba(18,18,24,.14));border:1px solid rgba(255,255,255,.095);box-shadow:0 10px 30px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.025);-webkit-backdrop-filter:blur(19px) saturate(220%) brightness(1.08);backdrop-filter:blur(19px) saturate(220%) brightness(1.08)}
  .tabs::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12),rgba(255,255,255,.015) 30%,transparent 54%,rgba(255,255,255,.025) 76%,rgba(255,255,255,.055));opacity:.54}
  .tabs::after{content:"";position:absolute;left:8%;right:8%;top:0;z-index:1;height:1px;pointer-events:none;background:rgba(255,255,255,.26);opacity:.48}
  .tab{position:relative;z-index:2;height:56px;min-height:56px;border-radius:28px;color:rgba(255,255,255,.94);font-size:10px;gap:2px}.tab i{font-size:21.5px;line-height:1}
  .tab::before{inset:2px;border-radius:27px;background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.040));border:1px solid rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(8px) saturate(165%);backdrop-filter:blur(8px) saturate(165%);opacity:0;transform:scale(.90)}
  .tab.on::before{opacity:1;transform:scale(1);background:linear-gradient(180deg,rgba(208,158,255,.18),rgba(111,55,170,.075));border-color:rgba(206,158,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(191,90,242,.055),0 5px 16px rgba(70,25,115,.08),0 0 18px rgba(191,90,242,.10)}
  .tab:active{transform:scale(.965)}
  .variant-panel{padding:20px 20px 28px}#colorCurrent{max-width:60%}.capacity-list{gap:12px;padding:20px 26px 26px;margin:-11px -22px -11px}.color-list{gap:17px;padding:12px 10px 20px}.detail-toolbar{margin-bottom:16px}.back,.detail-home{width:42px;height:42px}.pl.source-row{grid-template-columns:minmax(0,1fr) 30px auto;column-gap:10px;padding:18px 0}
}
@media (display-mode:standalone) and (max-width:767px){html,body,.app{height:100vh;min-height:100vh;max-height:100vh}.tabwrap{bottom:max(2px,calc(env(safe-area-inset-bottom) - 14px))}}
@media (min-width:768px) and (max-width:1199px){
  :root{--side:30px}
  .app{background:radial-gradient(1000px 760px at -5% -9%,rgba(34,132,232,.36) 0%,rgba(20,84,151,.19) 37%,transparent 73%),radial-gradient(900px 700px at 109% 12%,rgba(139,88,232,.25) 0%,rgba(82,48,154,.12) 39%,transparent 74%),radial-gradient(980px 720px at -2% 110%,rgba(22,151,145,.16) 0%,transparent 75%),linear-gradient(158deg,#050b14 0%,#010204 43%,#06050b 74%,#020406 100%)}
  .screen{padding-top:calc(var(--safe-top) + 18px);padding-bottom:calc(76px + var(--safe-bottom) + 42px)}.title{font-size:46px}.hero{min-height:320px;padding:30px}.hero h2{font-size:38px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tile{height:170px}#homeList,#quoteList,#catalogList,#searchList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}.tabwrap{padding:0 26px calc(var(--safe-bottom) + 8px)}.tabs{height:76px;max-width:760px;margin:0 auto;border-radius:38px}.tab{font-size:10.5px}.detail{left:auto;width:min(520px,62vw);box-shadow:-26px 0 60px rgba(0,0,0,.55)}.quote-root,.series-nav,.other-nav{max-width:760px}
}
@media (min-width:1200px){
  :root{--side:40px}body{background:#0b0b0d}
  .app{height:100dvh;background:radial-gradient(1000px 760px at -5% -9%,rgba(34,132,232,.36) 0%,rgba(20,84,151,.19) 37%,transparent 73%),radial-gradient(900px 700px at 109% 12%,rgba(139,88,232,.25) 0%,rgba(82,48,154,.12) 39%,transparent 74%),radial-gradient(980px 720px at -2% 110%,rgba(22,151,145,.16) 0%,transparent 75%),linear-gradient(158deg,#050b14 0%,#010204 43%,#06050b 74%,#020406 100%)}
  .screen{inset:0 auto 0 224px;width:min(calc(100vw - 244px),1240px);padding:38px 40px 64px;border-radius:34px 0 0 34px;box-shadow:-12px 0 48px rgba(0,0,0,.18);background:transparent}.head{margin:0 0 24px}.title{font-size:48px}.search{height:52px}.hero{min-height:350px;padding:34px}.hero h2{font-size:44px}.section{margin-top:34px}.section h2{font-size:30px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.tile{height:170px}#homeList,#quoteList,#catalogList,#searchList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
  .tabwrap{left:20px;right:auto;top:20px;bottom:20px;width:184px;padding:0;z-index:60}.tabs{position:relative;height:100%;padding:92px 10px 12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;overflow:visible;border-radius:30px}.tabs::before{content:"HẠO NAM\A KHO MÁY MỚI";white-space:pre;position:absolute;top:24px;left:20px;color:#fff;font-size:13px;line-height:1.35;font-weight:800}.tabs::after{display:none}.tab{height:58px;flex:none;border-radius:18px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 15px;font-size:14px;cursor:pointer}.tab i{width:28px;font-size:23px;text-align:center}
  .detail{inset:24px 24px 24px auto;width:520px;padding:28px;border-radius:28px;border:1px solid rgba(255,255,255,.08);box-shadow:-24px 0 70px rgba(0,0,0,.58)}.detail h1{font-size:38px}.primary{max-width:520px}.quote-root{max-width:780px}.series-nav,.other-nav{max-width:900px}.quote-summary{max-width:920px}
}
@media (min-width:1500px){.screen{left:244px;width:min(calc(100vw - 284px),1360px)}.tabwrap{width:204px}.grid{gap:20px}}