:root{--bg:#000;--surface:#1c1c1e;--surface-2:#2c2c2e;--text:#fff;--text-2:#a9a9af;--blue:#0a84ff;--green:#30d158;--line:rgba(255,255,255,.10);--safe-top:max(10px,env(safe-area-inset-top));--safe-bottom:max(10px,env(safe-area-inset-bottom));--tab-h:66px;--side:18px;--radius-card:24px;--motion:cubic-bezier(.22,.8,.2,1);--motion-spring:cubic-bezier(.2,.9,.25,1.12);--glass-line:rgba(255,255,255,.20);--glass-shadow:0 18px 50px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.055)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}body{height:100dvh;overflow:hidden}button,input{font:inherit}button{color:inherit}.app{height:100dvh;position:relative;overflow:hidden;background:var(--bg)}.screen{position:absolute;inset:0;display:none;overflow:auto;overscroll-behavior-y:contain;padding:calc(var(--safe-top) + 8px) var(--side) calc(var(--tab-h) + max(4px,env(safe-area-inset-bottom)) + 28px);scrollbar-width:none}.screen::-webkit-scrollbar{display:none}.screen.active{display:block}.head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 18px}.title{font-size:42px;line-height:1.03;letter-spacing:-1.5px;font-weight:780;margin:0}.avatar{width:46px;height:46px;border-radius:50%;border:3px solid var(--blue);color:var(--blue);display:grid;place-items:center;font-size:21px;flex:none}.search{height:50px;border-radius:25px;display:flex;align-items:center;gap:8px;padding:0 16px;margin-bottom:24px;color:#8e8e93;max-width:760px}.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:18px}.hero{min-height:280px;border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(circle at 15% 5%,#78e7ff,transparent 34%),radial-gradient(circle at 90% 18%,#ffd56d,transparent 34%),linear-gradient(145deg,#5e5ce6,#30d158);margin-bottom:30px;overflow:hidden}.hero h2{font-size:32px;line-height:1.05;margin:5px 0 8px;letter-spacing:-.8px}.hero p{margin:0 0 16px;color:rgba(255,255,255,.86)}.btn{border:0;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;padding:11px 18px;font-weight:700;align-self:flex-start}.section{margin-top:28px}.section h2{font-size:27px;line-height:1.1;letter-spacing:-.5px;margin:0 0 14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tile{height:145px;border:0;border-radius:22px;padding:18px;color:#fff;font-size:22px;font-weight:750;text-align:left;display:flex;align-items:flex-end}.t1{background:linear-gradient(150deg,#73e4ff,#4b8df7)}.t2{background:linear-gradient(150deg,#ffd68b,#ff903d)}.t3{background:linear-gradient(150deg,#9bea92,#45c24e)}.t4{background:linear-gradient(150deg,#b5a8ff,#7959ff)}.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:18px;margin-left:-8px;margin-right:-8px}.ico{width:56px;height:56px;border-radius:14px;background:var(--surface);display:grid;place-items:center;font-size:26px}.rn{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs{font-size:14px;color:var(--text-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price{border:0;border-radius:999px;color:var(--blue);padding:9px 13px;font-weight:750}.card{border-radius:22px;padding:18px}.primary{width:100%;border:0;border-radius:17px;background:var(--blue);color:#fff;font-size:18px;font-weight:750;padding:15px;margin-top:15px}.pills{display:flex;gap:9px;overflow:auto;margin-bottom:12px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 1px 6px}.pills::-webkit-scrollbar{display:none}.pill{border:0;border-radius:999px;color:#fff;padding:10px 14px;white-space:nowrap;scroll-snap-align:start}.tabwrap{position:fixed;left:0;right:0;bottom:0;padding:0 12px max(4px,calc(env(safe-area-inset-bottom) - 6px));z-index:20;pointer-events:none}.tabs{height:66px;border-radius:33px;display:grid;grid-template-columns:repeat(5,1fr);padding:4px;overflow:hidden;pointer-events:auto}.tab{border:0;background:transparent;color:#eee;border-radius:28px;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;position:relative;overflow:hidden}.tab i{font-style:normal;font-size:21px;line-height:1}.tab span{white-space:nowrap}.detail{position:absolute;inset:0;display:none;z-index:40;background:#000;padding:calc(var(--safe-top) + 8px) var(--side) calc(max(8px,env(safe-area-inset-bottom)) + 18px);overflow:auto}.detail.open{display:block}.back{width:40px;height:40px;border:0;border-radius:50%;color:var(--blue);font-size:24px;display:grid;place-items:center}.detail h1{font-size:34px;line-height:1.08;letter-spacing:-.8px;margin:22px 0 4px}.muted{color:var(--text-2)}.prices{border-radius:22px;padding:0 18px;margin-top:22px}.pl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 0;border-bottom:1px solid var(--line)}.pl:last-child{border:0}.pl strong{font-variant-numeric:tabular-nums}.pl.hn strong{color:var(--green);font-size:25px}.version-badge{position:fixed;top:calc(env(safe-area-inset-top) + 5px);right:8px;z-index:90;padding:5px 8px;border-radius:999px;color:rgba(255,255,255,.70);font-size:10px;font-weight:700;letter-spacing:.2px;background:rgba(35,35,39,.50);border:1px solid rgba(255,255,255,.10);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none;user-select:none}.source-label{display:flex;align-items:center;gap:5px;min-width:0}.source-link{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex:none;text-decoration:none;color:var(--blue)}.source-link svg{width:14px;height:14px}.detail-copy{margin-top:18px}.variant-panel{margin-top:26px;padding:16px;border-radius:24px}.variant-group+.variant-group{margin-top:22px}.variant-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.variant-title{font-size:18px;font-weight:720;letter-spacing:-.2px}.variant-current{font-size:13px;color:var(--text-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.capacity-list{display:flex;gap:9px;overflow:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 1px 5px}.capacity-list::-webkit-scrollbar,.color-list::-webkit-scrollbar{display:none}.capacity-btn{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 15px;min-width:70px;white-space:nowrap;color:#fff;font-weight:650;scroll-snap-align:start}.color-list{display:flex;gap:14px;align-items:center;overflow:auto;scrollbar-width:none;padding:4px 2px 7px}.color-btn{width:42px;height:42px;border-radius:50%;border:0;padding:0;position:relative;flex:none;background:var(--swatch,#888);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 2px 9px rgba(0,0,0,.20)}.color-btn::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;transition:border-color .20s var(--motion),transform .22s var(--motion)}.color-btn.on::before{border-color:rgba(255,255,255,.82);transform:scale(1.02)}.color-btn.on::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(10,132,255,.76);box-shadow:0 0 0 2px rgba(10,132,255,.10)}button,.row,.tile,.pill,.avatar,.back,.search,.card,.prices,.tabs,.variant-panel{-webkit-tap-highlight-color:transparent}button,.row,.tile,.pill,.avatar,.back,.price,.primary,.btn,.tab,.source-link,.capacity-btn,.color-btn{transition:transform .20s var(--motion),background .22s var(--motion),border-color .22s var(--motion),box-shadow .24s var(--motion),color .20s var(--motion),opacity .20s var(--motion)}.tabs,.card,.prices,.search,.avatar,.back,.price,.pill,.source-link,.capacity-btn,.variant-panel{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(53,53,58,.52),rgba(24,24,28,.52));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 34px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}.tabs{background:linear-gradient(145deg,rgba(65,65,70,.70),rgba(26,26,30,.60));border-color:var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(32px) saturate(165%);backdrop-filter:blur(32px) saturate(165%)}.tab::before{content:"";position:absolute;inset:3px;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.075));border:1px solid rgba(255,255,255,.13);box-shadow:0 8px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.15);opacity:0;transform:scale(.88);transition:opacity .20s var(--motion),transform .28s var(--motion-spring);z-index:0}.tab.on{color:var(--blue)}.tab.on::before{opacity:1;transform:scale(1)}.tab i,.tab span{position:relative;z-index:1}.pill.on,.capacity-btn.on{background:linear-gradient(145deg,rgba(105,105,113,.74),rgba(46,46,52,.70));border-color:rgba(255,255,255,.23);box-shadow:0 8px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.17)}.tile{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.06)}.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.25),transparent 34%,transparent 63%,rgba(255,255,255,.08));opacity:.62;pointer-events:none}.primary,.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 10px 28px rgba(10,132,255,.18)}@media (hover:hover) and (pointer:fine){.tab:hover::before{opacity:.72;transform:scale(.97)}.tab.on:hover::before{opacity:1;transform:scale(1.02)}.tab:hover i{transform:translateY(-1px) scale(1.06)}.tile:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.26)}.row:hover{background:rgba(255,255,255,.065);transform:translateX(2px)}.pill:hover,.price:hover,.avatar:hover,.back:hover,.source-link:hover,.capacity-btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}.color-btn:hover{transform:translateY(-2px) scale(1.06)}.primary:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.search:hover{border-color:rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.22)}}@media (hover:none),(pointer:coarse){.tab:active,.pill:active,.price:active,.avatar:active,.back:active,.primary:active,.btn:active,.source-link:active,.capacity-btn:active{transform:scale(.95)}.tile:active{transform:scale(.982)}.row:active{transform:scale(.992);background:rgba(255,255,255,.06)}.color-btn:active{transform:scale(.91)}}@media (min-width:768px) and (max-width:1199px){:root{--side:30px;--tab-h:76px}.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)}}@media (min-width:1200px){:root{--side:40px;--tab-h:0px}body{background:#0b0b0d}.app{height:100dvh;background:#0b0b0d}.screen{inset:0 auto 0 224px;width:min(calc(100vw - 244px),1240px);padding:38px 40px 64px;background:#000;border-radius:34px 0 0 34px;box-shadow:-12px 0 48px rgba(0,0,0,.18)}.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{height:100%;border-radius:30px;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:92px 10px 12px;overflow:visible;position:relative}.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}.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{font-size:23px;width:28px;text-align:center}.detail{inset:24px 24px 24px auto;width:520px;border-radius:28px;padding:28px;box-shadow:-24px 0 70px rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.08)}.detail h1{font-size:38px}.primary{max-width:520px}.version-badge{top:28px;right:38px}}@media (min-width:1500px){.screen{left:244px;width:min(calc(100vw - 284px),1360px)}.tabwrap{width:204px}.grid{gap:20px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}