:root{--primary-color:#0ca2ed;--secondary-color:#5f92f7;--page:#f1f5f9;--surface:#fff;--text:#1e293b;--muted:#64748b;--line:#e2e8f0;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:Oswald,sans-serif;font-size:14px;font-weight:500;letter-spacing:.5px;line-height:1.5}h1,h2,h3,p,ol{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #38bdf8;outline-offset:4px}a[aria-disabled=true]{cursor:default}[hidden]{display:none!important}.home-icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-80px;left:16px;background:#fff;color:#0369a1;padding:12px;z-index:150}.skip-link:focus{top:8px}
.top-header-bar{height:32px;color:#fff;background:#0284c7;font-size:12px;font-weight:700}.top-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;max-width:1600px;margin:auto}.top-header-left,.top-header-right,.top-header-right a{display:flex;align-items:center;gap:8px}.top-header-left{white-space:nowrap;overflow:hidden}.top-header-left>span:last-child{overflow:hidden;text-overflow:ellipsis}.top-header-right{gap:22px;flex-shrink:0}.top-header-right .home-icon{width:16px;height:16px;opacity:.85}.hot-label{border-radius:2px;background:#ff9800;color:white;font-size:10px;padding:1px 6px;letter-spacing:.4px}
.shop-header{height:78px;position:sticky;top:16px;z-index:40;margin:16px 16px 0;padding:0 48px;background:rgba(255,255,255,.95);border-radius:7px;box-shadow:0 6px 20px #1e293b04;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(14px)}.header-left,.header-actions{display:flex;align-items:center;gap:20px}.shop-logo{width:120px;display:flex;align-items:center}.shop-logo img{width:100%;height:54px;object-fit:contain}.menu-toggle{background:var(--primary-color);color:white;border:0;border-radius:12px;width:40px;height:40px;display:grid;place-items:center;box-shadow:0 5px 14px #0ca2ed30}.menu-toggle:hover{background:#0284c7}.header-actions{gap:16px}.language-mark{color:#93c5fd;display:flex}.user-dropdown{position:relative}.user-toggle{display:flex;align-items:center;gap:7px;background:#fff;border:0;box-shadow:0 5px 22px #0ca2ed24;border-radius:12px;padding:6px 10px 6px 6px;text-align:left;min-width:116px}.user-toggle>img{border-radius:50%;border:2px solid #bae6fd;padding:2px}.user-toggle>span{display:flex;flex-direction:column;line-height:1.4;font-size:14px}.user-toggle small{color:var(--primary-color);font-size:12px}.user-toggle .home-icon{width:15px;height:15px;color:#94a3b8;margin-left:4px}.dropdown-panel{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px #0f172a20;border-radius:12px;width:220px;padding:8px}.dropdown-panel a,.dropdown-panel button{display:flex;align-items:center;gap:10px;padding:11px;border:0;background:none;font:inherit;width:100%;text-align:left;border-radius:7px}.dropdown-panel a:hover,.dropdown-panel button:hover{color:#0284c7;background:#f0f9ff}
.menu-backdrop{position:fixed;inset:0;background:#0f172a65;backdrop-filter:blur(3px);z-index:80}.shop-drawer{position:fixed;left:0;top:0;bottom:0;background:#fff;width:300px;max-width:85vw;z-index:90;padding:20px;overflow:auto;box-shadow:10px 0 35px #0f172a20}.drawer-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px}.drawer-heading>img{width:150px;height:54px;object-fit:contain}.icon-button{border:0;background:transparent;display:grid;place-items:center;width:36px;height:36px;border-radius:8px}.icon-button:hover{background:#f1f5f9}.shop-drawer nav a{display:flex;gap:10px;align-items:center;border-radius:10px;padding:12px;margin:3px 0}.shop-drawer nav a.active{background:var(--primary-color);color:#fff}.shop-drawer nav a:hover:not(.active){background:#f0f9ff;color:#0284c7}.drawer-label{font-size:11px;color:#94a3b8;margin:25px 12px 8px}.drawer-support{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:24px;color:#0284c7}body.menu-open{overflow:hidden}
.homepage-container{width:90%;max-width:1400px;margin:36px auto 50px}.hero-section{display:grid;grid-template-columns:2.03fr 1fr;gap:12px;height:380px}.banner-frame{position:relative;border-radius:13px;padding:3px;overflow:hidden;background:linear-gradient(120deg,#8b5cf6,#38bdf8 35%,#facc15 70%,#fb7185);box-shadow:0 5px 20px #0ca2ed33;min-width:0}.banner-carousel{width:100%;height:100%;position:relative;border-radius:10px;overflow:hidden;background:#e0f2fe}.banner-slide{height:100%;width:100%}.banner-slide img{width:100%;height:100%;object-fit:cover}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#33415555;color:white;display:grid;place-items:center;z-index:2}.carousel-arrow:hover{background:#0284c7cc}.carousel-arrow.previous{left:12px}.carousel-arrow.previous .home-icon{transform:rotate(180deg)}.carousel-arrow.next{right:12px}.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.carousel-dots button{width:7px;height:7px;padding:0;border:0;background:#ffffff80;border-radius:10px}.carousel-dots button.active{background:#0ca2ed;width:21px}
.ranking-card{background:#fff;border:2.5px solid #38bdf8;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px #38bdf82e;min-width:0;display:flex;flex-direction:column;height:100%}.ranking-heading{background:#38bdf8;display:flex;align-items:center;gap:10px;padding:10px 16px;flex-shrink:0;min-height:60px}.ranking-heading img{width:38px;height:38px;object-fit:contain;border-radius:50%;background:white;padding:2px;box-shadow:0 2px 6px #0002}.ranking-heading h2{color:#0c4a6e;font-family:Signika,sans-serif;font-weight:700;font-size:21px;letter-spacing:.5px}.ranking-tabs{display:flex;gap:8px;padding:12px 16px 6px}.ranking-tabs button{padding:5px 18px;background:white;border:1px solid #e2e8f0;border-radius:8px;font-weight:700;font-size:13px;box-shadow:0 2px 4px #00000003}.ranking-tabs button.active{color:white;background:#38bdf8;border-color:#38bdf8;box-shadow:0 3px 10px #38bdf84d}.ranking-panel{padding:4px 12px 10px;flex:1;min-height:0;overflow-y:auto}.ranking-panel ol{padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}.ranking-panel li{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:10px;padding:8px 10px;min-width:0;height:46px}.ranking-panel li:nth-child(odd){background:#f0f9ff}.ranking-panel li>img{width:32px;height:32px;object-fit:contain;border-radius:50%;flex-shrink:0}.ranking-place{width:24px;flex-shrink:0;text-align:center;color:#94a3b8;font-size:16px}.ranking-place .home-icon{width:23px;height:23px;stroke-width:2.5}.place-1{color:#f59e0b}.place-2{color:#94a3b8}.place-3{color:#d97706}.ranking-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;font-weight:700;letter-spacing:.5px}.place-1~.ranking-name,.place-3~.ranking-name{color:#92400e}.ranking-amount{color:#075985;background:#38bdf8;border-radius:20px;font-size:12px;padding:4px 12px;white-space:nowrap;box-shadow:0 3px 8px #38bdf833}.ranking-panel li.ranking-empty{height:230px;display:flex;flex-direction:column;text-align:center;justify-content:center;gap:15px;line-height:1.8;color:#64748b;background:none;font-size:14px}.ranking-empty>.home-icon{width:44px;height:44px;color:#7dd3fc}.ranking-empty a{color:#0284c7;border-radius:8px;padding:7px 18px;background:#f0f9ff}
.notice-bar{display:flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;background:#fff;border-left:3px solid #0284c7;border-radius:7px;box-shadow:0 3px 5px #0f172a15;padding:8px}.notice-bell{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;flex-shrink:0;background:#0284c7;color:#fff}.notice-bell .home-icon{width:17px;height:17px}.notice-bar>b{background:#e0f2fe;color:#0284c7;padding:2px 7px;border-radius:6px;font-size:10px;white-space:nowrap}.notice-scroll{flex:1;overflow:hidden;min-width:0}.notice-scroll p{width:max-content;animation:notice-travel 30s linear infinite;font-size:13px}.notice-scroll:hover p{animation-play-state:paused}@keyframes notice-travel{from{transform:translateX(50px)}to{transform:translateX(-100%)}}.home-notice-content{background:#fff;padding:16px;border-radius:10px;margin-top:12px}.home-notice-content img{max-width:100%;height:auto}.purchases-bar{overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px;margin-top:14px;min-height:87px}.purchases-track{display:flex;gap:10px;width:max-content;min-width:100%;align-items:center}.purchases-track.animate{animation:purchases-travel 45s linear infinite}.purchases-bar:hover .purchases-track{animation-play-state:paused}.purchase-card{display:flex;align-items:center;gap:8px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;box-shadow:0 2px 4px #0f172a03;padding:8px 10px;white-space:nowrap;min-height:65px;flex-shrink:0;font-size:11px}.purchase-card b{color:#6366f1;font-size:11px}.purchase-card p{color:#0284c7;font-size:11px;font-weight:600}.purchase-card small{font-size:10px;color:#64748b}.purchase-avatar{position:relative}.purchase-avatar img{width:44px;height:44px;object-fit:contain}.purchase-avatar span{position:absolute;bottom:-2px;left:0;background:#22c55e;color:white;border-radius:3px;font-size:8px;white-space:nowrap;padding:0 3px}.purchases-empty{display:flex;justify-content:center;align-items:center;gap:8px;min-height:65px;width:100%;color:#0284c7;font-size:13px}@keyframes purchases-travel{to{transform:translateX(-50%)}}
.shortcuts{margin:40px 0 20px}.horizontal-banner{display:block;border-radius:14px;overflow:hidden;margin:20px 8px 32px}.horizontal-banner img{width:100%;height:auto;max-height:230px;object-fit:cover;border-radius:14px}.catalog-section{margin:0 0 48px;scroll-margin-top:115px}.catalog-heading{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}.catalog-heading>h2:not(.sr-only){text-align:center;font-size:28px;color:#0284c7;padding:30px 0}.catalog-title-image{width:100%;max-width:440px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 10px #008cff38);transition:transform .3s}.catalog-title-image:hover{transform:scale(1.03)}#reg-lien-quan .catalog-title-image{max-width:450px}.category-banner{display:block;width:100%;max-width:1152px;padding:0 8px;margin-top:16px}.category-banner img{width:100%;height:auto;max-height:200px;object-fit:cover;border-radius:16px;border:1px solid #cbd5e1;box-shadow:0 3px 6px #0f172a12}.catalog-search{display:flex;align-items:center;gap:10px;background:white;border:1px solid #cbd5e1;border-radius:12px;padding:10px 14px;margin:0 0 18px;max-width:100%;box-shadow:0 2px 5px #0f172a04}.catalog-search .home-icon{width:18px;height:18px;color:#0ca2ed}.catalog-search:focus-within{border-color:#0ca2ed;box-shadow:0 0 0 3px #0ca2ed18}.catalog-search input{width:100%;border:0;background:none;color:#334155;font-size:13px;min-width:0;outline:0}.catalog-search input:focus-visible{outline:0}.catalog-search input::placeholder{color:#94a3b8}.search-count{font-size:11px;white-space:nowrap;color:#0284c7}.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}.product-card-wrapper{min-width:0}.product-card{height:100%}.product-card-body{padding:16px;display:flex;flex:1;flex-direction:column;align-items:center;text-align:center}.product-card-body h3{font-size:16px;font-weight:600;line-height:1.3;min-height:42px;display:grid;place-items:center;margin-bottom:8px;overflow-wrap:anywhere}.product-card-body h3 a:hover{color:#0284c7}.product-stock{font-size:13px;margin-bottom:12px;color:#64748b}.product-stock strong{color:#ef4444;font-weight:600;margin-left:3px}.view-all{display:flex;justify-content:center;margin-top:auto;width:100%}.view-all img{width:auto;max-width:100%;height:42px;object-fit:contain}.unavailable{background:#f1f5f9;color:#64748b;border-radius:7px;padding:8px 14px;font-size:12px;margin-top:auto;min-height:36px}.catalog-empty{text-align:center;padding:40px;background:white;border-radius:12px;color:#64748b}.bottom-banner{margin-bottom:30px}
.shop-footer{background:white;border-top:1px solid #e2e8f0;padding:40px 5% 20px}.footer-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr 1fr 1.1fr;gap:32px}.footer-brand img{width:180px;height:65px;object-fit:contain;margin-bottom:18px}.footer-grid h2{font-size:17px;color:#0f172a;margin-bottom:18px}.footer-grid p{font-size:13px;color:#64748b;line-height:1.8}.footer-grid>div>a:not(:first-child),.footer-grid>div:not(.footer-brand)>a{display:flex;align-items:center;gap:6px;font-size:13px;color:#64748b;margin-bottom:11px}.footer-grid a:hover{color:#0284c7!important}.footer-grid .home-icon{width:17px;height:17px}.footer-zalo{background:#f0f9ff;border:1px solid #bae6fd;padding:7px 12px;border-radius:8px;max-width:110px;margin-top:16px}.footer-copyright{text-align:center;padding:18px 0 0;border-top:1px solid var(--line);margin:25px auto 0;max-width:1400px;color:#94a3b8;font-size:12px}.floating-zalo{position:fixed;right:20px;bottom:110px;z-index:45;border-radius:50%;filter:drop-shadow(0 2px 5px #0f172a25);transition:transform .2s}.floating-zalo:hover{transform:scale(1.08)}.music-widget{position:fixed;right:20px;bottom:20px;z-index:45;background:#0009;backdrop-filter:blur(8px);border-radius:30px;box-shadow:0 4px 16px #0004}.music-widget button{display:flex;align-items:center;gap:12px;color:white;font-size:12px;border:0;background:none;padding:11px 16px}.music-widget .home-icon{width:18px;height:18px}.music-widget #music-label{opacity:.85}.mobile-bottom-nav{display:none}.bubble-layer{position:fixed;inset:0;pointer-events:none;z-index:35;overflow:hidden}.bubble-layer i{position:absolute;left:calc(8% + var(--bubble)*13%);bottom:-90px;width:calc(18px + var(--bubble)*5px);height:calc(18px + var(--bubble)*5px);border-radius:50%;border:2px solid #bae6fd77;box-shadow:inset 2px 2px 4px #fff9,0 1px 5px #38bdf81a;animation:bubble-rise calc(16s + var(--bubble)*2s) linear infinite;animation-delay:calc(var(--bubble)*-3.6s)}@keyframes bubble-rise{to{transform:translate(25px,-110vh)}}
.notice-dialog{position:fixed;border:0;border-radius:16px;background:#fff;padding:28px 18px 20px;width:510px;max-width:90vw;color:#334155;box-shadow:0 15px 50px #0c4a6e40}.notice-dialog::backdrop{background:#0c4a6e55;backdrop-filter:blur(5px)}.notice-dialog>h2{display:flex;align-items:center;justify-content:center;color:#0ca2ed;font:700 21px Signika,sans-serif;gap:6px;margin-bottom:18px}.notice-close{position:absolute;right:10px;top:10px;color:#94a3b8}.notice-dialog-content{max-height:60vh;overflow-y:auto;text-align:center}.notice-dialog-content img{width:100%;height:auto;border-radius:10px}.notice-accept{display:block;margin:25px auto 0;background:#0ca2ed;color:#fff;text-transform:uppercase;font-size:13px;border:3px double #fff;border-radius:14px;outline:2px solid #38bdf8;padding:10px 26px;box-shadow:0 4px 10px #38bdf833}
@media(min-width:1500px){.shop-header{max-width:1500px;margin-left:auto;margin-right:auto}.hero-section{height:420px}.ranking-panel li{height:53px}.ranking-heading{height:65px}}
@media(max-width:1023px){.hero-section{grid-template-columns:1fr;height:auto}.banner-frame{aspect-ratio:16/9}.ranking-card{height:360px}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-actions{gap:12px}.shop-header{padding:0 32px}.top-header-right{gap:14px}.top-header-right a:first-child{display:none}.homepage-container{width:92%}.footer-grid{grid-template-columns:1fr 1fr}.ranking-panel li{height:46px}}
@media(max-width:767px){body{font-size:13px;padding-bottom:70px}.top-header-bar{font-size:11px}.top-header-inner{padding:0 14px;gap:0}.top-header-right{display:none}.shop-header{margin:16px 16px 0;height:74px;padding:0 30px;top:10px}.header-left{width:100%;justify-content:space-between;gap:16px}.shop-logo{width:110px}.header-actions{display:none}.menu-toggle{width:40px;height:40px}.homepage-container{width:auto;margin:26px 16px 32px}.hero-section{gap:12px}.banner-frame{border-radius:13px}.carousel-arrow{display:none}.ranking-heading{min-height:58px;padding:10px 16px}.ranking-heading h2{font-size:21px}.ranking-card{height:355px}.ranking-panel{padding:4px 12px 8px}.ranking-panel li{height:46px;padding:8px 10px}.ranking-name{font-size:13px}.ranking-amount{font-size:12px;padding:4px 12px}.notice-bar{margin-top:14px;min-height:44px}.notice-bar>b{display:none}.notice-scroll p{font-size:13px}.purchases-bar{margin-top:12px;min-height:76px;padding:8px}.purchase-card{min-height:58px;font-size:10px;padding:6px 8px}.purchase-avatar img{width:38px;height:38px}.purchases-empty{font-size:11px;min-height:58px;white-space:normal;text-align:center}.shortcuts{margin-top:24px;margin-bottom:16px}.horizontal-banner{margin:16px 0 24px;border-radius:12px}.horizontal-banner img{border-radius:12px;max-height:none}.catalog-title-image{max-width:240px}#reg-lien-quan .catalog-title-image{max-width:250px}.catalog-heading{margin-bottom:16px}.category-banner{padding:0 4px;margin-top:12px}.category-banner img{border-radius:12px;max-height:140px}.catalog-section{margin-bottom:30px;scroll-margin-top:105px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-search{padding:9px 12px;margin-bottom:14px}.catalog-search input{font-size:12px}.search-count{font-size:10px}.product-card-body{padding:12px}.product-card-body h3{font-size:13px;min-height:35px;margin-bottom:7px}.product-stock{font-size:12px;margin-bottom:10px}.view-all img{height:34px}.shop-footer{padding:26px 20px 20px}.footer-grid{gap:24px 20px}.footer-brand,.footer-grid>div:last-child{grid-column:1/-1}.footer-grid h2{font-size:15px;margin-bottom:14px}.footer-grid p,.footer-grid>div:not(.footer-brand)>a{font-size:12px}.footer-brand img{margin:auto auto 16px}.footer-brand p{text-align:center}.footer-copyright{font-size:11px}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;min-height:64px;padding:8px 20px max(8px,env(safe-area-inset-bottom));background:#fffffffa;backdrop-filter:blur(12px);z-index:60;display:flex;align-items:center;justify-content:space-around;box-shadow:0 -3px 16px #0f172a0a;border-top:1px solid #f1f5f9}.mobile-bottom-nav>a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;min-width:68px}.mobile-bottom-nav .home-icon{width:23px;height:23px;stroke:#0f172a;fill:#0ca2ed22}.mobile-bottom-nav .mobile-mascot{position:relative;width:100px;color:#0ca2ed;padding-top:30px}.mobile-mascot img{position:absolute;width:100px;height:100px;object-fit:contain;bottom:23px;filter:drop-shadow(0 3px 3px #0ca2ed33)}.mobile-mascot>span{font-size:10px}.floating-zalo{right:18px;bottom:125px}.floating-zalo img{width:48px;height:48px}.music-widget{bottom:130px;right:20px}.music-widget button{gap:8px;padding:10px 14px}.floating-zalo:has(+.music-widget){bottom:115px;z-index:46}.notice-dialog{padding:28px 14px 20px}.notice-dialog>h2{font-size:20px}.catalog-heading>h2:not(.sr-only){font-size:22px}}
.banner-slide video{display:block;width:100%;height:100%;object-fit:cover}.product-card-wrapper .card-image video{display:block;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:14px 14px 0 0!important;transition:transform .4s ease}.product-card-wrapper:hover .card-image video{transform:scale(1.08)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0ca2ed;border-radius:6px}
@media(max-width:767px){.ranking-panel ol{gap:4px}.ranking-panel li{height:43px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.bubble-layer{display:none}}