/* HẠO NAM AI V2.0.4 — RESPONSIVE FOUNDATION
   Single owner of viewport, Safari safe-area, sidebar and BottomNav geometry. */

@media(max-width:767px){
  :root{--side:clamp(14px,4vw,18px)}
  html{height:100%;min-height:100%;overflow:hidden;overflow-x:hidden;background:#020407}
  body{position:relative;width:100%;height:100dvh;min-height:100svh;overflow:hidden;overflow-x:hidden;background-color:#020407}
  .app{position:relative;width:100%;height:100dvh;min-height:100svh;max-height:100dvh;overflow:hidden;overflow-x:hidden;box-shadow:none}
  .screen{width:100%;height:100%;min-height:0;padding-left:var(--side);padding-right:var(--side);padding-bottom:calc(88px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom));overscroll-behavior-x:none}
  .detail{width:100%;height:100%;min-height:0;padding-bottom:calc(96px + env(safe-area-inset-bottom));overflow-x:hidden}
  .tabwrap{position:absolute;left:0;right:0;top:auto;bottom:max(4px,calc(env(safe-area-inset-bottom) - 12px));height:64px;margin:0;padding:0 clamp(8px,3.5vw,14px);z-index:80;pointer-events:none;background:transparent}
  .tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;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;width:100%;min-width:0;height:56px;min-height:56px;padding:0 1px;border-radius:28px;color:rgba(255,255,255,.94);font-size:clamp(8.6px,2.35vw,10px);gap:2px;overflow:hidden}
  .tab i{font-size:20px;line-height:1}.tab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .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(max-width:360px){
  .tabwrap{padding-inline:8px}.tabs{height:60px;border-radius:30px}.tab{height:52px;min-height:52px;font-size:8.6px}.tab i{font-size:18.5px}
}

@supports(height:100svh){
  @media(max-width:767px){body,.app{min-height:100svh}}
}

@media(display-mode:standalone) and (max-width:767px){
  html{height:100%;min-height:100%}
  body,.app{height:100dvh;min-height:100dvh;max-height:100dvh}.tabwrap{bottom:max(4px,calc(env(safe-area-inset-bottom) - 12px))}
}

@media(min-width:768px) and (max-width:1199px){
  :root{--side:clamp(24px,4vw,34px)}
  .screen{padding-top:calc(var(--safe-top) + 20px);padding-left:var(--side);padding-right:var(--side);padding-bottom:calc(104px + var(--safe-bottom));scroll-padding-bottom:calc(112px + var(--safe-bottom));overflow-x:hidden;overscroll-behavior-x:none}
  .title{font-size:clamp(40px,5vw,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:24px;max-width:980px}
  .tabwrap{position:fixed;left:50%;right:auto;bottom:0;width:min(760px,calc(100% - 44px));height:calc(80px + var(--safe-bottom));padding:0 0 calc(var(--safe-bottom) + 8px);transform:translateX(-50%);z-index:80}
  .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;width:100%;height:72px;margin:0;padding:4px;border-radius:36px;overflow:hidden}.tab{min-width:0;height:64px;font-size:10.5px}.tab span{white-space:nowrap}.tab i{font-size:21px}
  .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}.quote-summary{max-width:900px}
}

@media(min-width:1200px){
  :root{--side:40px;--sidebar-width:clamp(184px,13.5vw,204px)}
  body{background-color:#020407}
  .screen{inset:0 0 0 calc(var(--sidebar-width) + 36px);width:auto;padding:32px clamp(32px,4vw,64px) 58px;border-radius:32px 0 0 32px;background:transparent;box-shadow:-12px 0 48px rgba(0,0,0,.10);overflow-x:hidden;overscroll-behavior-x:none}
  .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:28px;max-width:1120px}
  .tabwrap{position:absolute;left:18px;right:auto;top:18px;bottom:18px;width:var(--sidebar-width);height:auto;padding:0;z-index:60;transform:none}
  .tabs{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;height:100%;padding:112px 10px 14px;overflow:hidden;border-radius:30px}
  .tab{width:100%;height:56px;min-height:56px;flex:none;border-radius:18px;flex-direction:row;justify-content:flex-start;gap:11px;padding:0 14px;font-size:13.5px;cursor:pointer}.tab i{width:27px;font-size:22px;text-align:center}.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .detail{inset:24px 24px 24px auto;width:min(520px,calc(100vw - var(--sidebar-width) - 110px));padding:28px;border-radius:28px;border:1px solid rgba(255,255,255,.08);box-shadow:-24px 0 70px rgba(0,0,0,.58);overflow-x:hidden}.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:1600px){
  :root{--sidebar-width:204px}.screen{padding-left:56px;padding-right:72px}.grid{gap:20px}
}

@supports(overflow:clip){html,body,.app{overflow-x:clip}}