@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";
:root{--primary:#1a1a2e;--primary-light:#16213e;--accent:#ff4d6d;--accent-hover:#ff758f;--secondary:#0f3460;--background:#f8fafc;--surface:#fff;--text:#0f172a;--text-muted:#64748b;--glass-bg:#ffffffd9;--glass-border:#ffffff80;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-lg:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-xl:0 25px 50px -12px #00000040;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--header-height:64px}@media (min-width:768px){:root{--header-height:72px}}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{background:var(--background);color:var(--text);padding-bottom:70px;font-family:Inter,Sarabun,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;overflow-x:hidden}@media (min-width:768px){body{padding-bottom:0}}h1,h2,h3,h4,.logo{letter-spacing:-.02em;font-family:Outfit,Sarabun,sans-serif}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@media (min-width:768px){.container{padding:0 1.5rem}}.section{padding:2.5rem 0}@media (min-width:768px){.section{padding:4rem 0}}.flex-between-responsive{flex-direction:column;gap:1rem;display:flex}@media (min-width:768px){.flex-between-responsive{flex-direction:row;justify-content:space-between;align-items:flex-end}}.text-center-mobile{text-align:center}@media (min-width:768px){.text-center-mobile{text-align:left}}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}.glass-dark{-webkit-backdrop-filter:blur(12px);color:#fff;background:#1a1a2ee6;border:1px solid #ffffff1a}.header{height:var(--header-height);z-index:1000;align-items:center;transition:all .3s;display:flex;position:fixed;top:0;left:0;right:0}.header.scrolled{box-shadow:var(--shadow-md);background:#fff}.header-content{justify-content:space-between;align-items:center;width:100%;display:flex}.logo{color:var(--primary);align-items:center;gap:2px;font-size:1.4rem;font-weight:800;text-decoration:none;display:flex}@media (min-width:768px){.logo{font-size:1.6rem}}.logo span{background:linear-gradient(135deg, var(--accent), #ff758f);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.desktop-nav{align-items:center;gap:2rem;display:none}@media (min-width:768px){.desktop-nav{display:flex}}.desktop-nav a{color:var(--text);font-size:.95rem;font-weight:500;text-decoration:none;transition:color .2s;position:relative}.desktop-nav a:hover{color:var(--accent)}.desktop-nav a:after{content:"";background:var(--accent);width:0;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.desktop-nav a:hover:after{width:100%}.hamburger{cursor:pointer;z-index:1100;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:flex}@media (min-width:1025px){.hamburger{display:none}}.hamburger span{background:var(--primary);border-radius:2px;width:24px;height:2.5px;transition:all .3s;display:block}.hamburger.active span:first-child{transform:translateY(7.5px)rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-7.5px)rotate(-45deg)}.mobile-drawer{z-index:1050;background:#fff;flex-direction:column;gap:1.5rem;width:80%;max-width:320px;height:100vh;padding:80px 2rem 2rem;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;right:-100%;box-shadow:-10px 0 30px #0000001a}.mobile-drawer.open{right:0}.drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1040;opacity:0;visibility:hidden;background:#00000080;width:100%;height:100%;transition:all .3s;position:fixed;top:0;left:0}.drawer-overlay.active{opacity:1;visibility:visible}.mobile-drawer a{color:var(--text);border-bottom:1px solid #f1f5f9;padding:.5rem 0;font-size:1.2rem;font-weight:600;text-decoration:none}.bottom-nav{-webkit-backdrop-filter:blur(15px);height:65px;padding-bottom:env(safe-area-inset-bottom);z-index:999;background:#ffffffe6;border-top:1px solid #0000000d;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}@media (min-width:768px){.bottom-nav{display:none}}.bottom-nav-item{color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.75rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.bottom-nav-item svg{width:22px;height:22px}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-item.active svg{fill:var(--accent)}.hero-wrapper{padding-top:calc(var(--header-height) + 1.5rem);background:radial-gradient(circle at 100% 0,#ff4d6d0d,#0000),radial-gradient(circle at 0 100%,#1a1a2e0d,#0000);padding-bottom:2.5rem}@media (min-width:768px){.hero-wrapper{padding-top:calc(var(--header-height) + 3rem);padding-bottom:5rem}}.hero-box{text-align:center;max-width:800px;margin:0 auto}.hero-title{margin-bottom:1rem;font-size:clamp(2rem,8vw,4rem);font-weight:800;line-height:1.1}@media (min-width:768px){.hero-title{margin-bottom:1.5rem}}.hero-title span{color:var(--accent)}.hero-subtitle{color:var(--text-muted);margin-bottom:2rem;max-width:600px;margin-inline:auto;font-size:1rem}@media (min-width:768px){.hero-subtitle{margin-bottom:3rem;font-size:1.2rem}}.search-container-v2{max-width:600px;margin:0 auto}.search-container-v2 input{border-radius:var(--radius-full);border:1px solid var(--glass-border);width:100%;box-shadow:var(--shadow-md);background:#fff;padding:1rem 1.5rem;font-size:1rem;transition:all .3s}@media (min-width:768px){.search-container-v2 input{box-shadow:var(--shadow-lg);padding:1.25rem 2rem;font-size:1.1rem}}.search-container-v2 input:focus{border-color:var(--accent);box-shadow:var(--shadow-xl);outline:none;transform:translateY(-2px)}.product-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@media (min-width:540px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}}@media (min-width:1024px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2rem}}.card-premium{background:var(--surface);border-radius:var(--radius-md);border:1px solid #0000000a;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}@media (min-width:768px){.card-premium{border-radius:var(--radius-lg)}}.card-premium:hover{box-shadow:var(--shadow-xl);transform:translateY(-8px)}.image-container{aspect-ratio:1;position:relative;overflow:hidden}.image-container img{object-fit:cover;width:100%;height:100%;transition:transform .6s}.info-box{flex-direction:column;flex:1;padding:.75rem;display:flex}@media (min-width:768px){.info-box{padding:1.25rem}}.title-premium{-webkit-line-clamp:2;-webkit-box-orient:vertical;height:2.6em;margin-bottom:.5rem;font-size:.85rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}@media (min-width:768px){.title-premium{height:2.8em;font-size:1rem}}.price-box{flex-wrap:wrap;align-items:baseline;gap:.25rem;margin-bottom:.75rem;display:flex}.price-main{color:var(--text);font-size:1.1rem;font-weight:800}@media (min-width:768px){.price-main{font-size:1.4rem}}.price-old{color:var(--text-muted);font-size:.75rem;text-decoration:line-through}.btn-premium{background:var(--primary);color:#fff;text-align:center;border-radius:var(--radius-sm);margin-top:auto;padding:.6rem;font-size:.8rem;font-weight:700;text-decoration:none;transition:all .3s}@media (min-width:768px){.btn-premium{border-radius:var(--radius-md);padding:.8rem;font-size:.95rem}}.btn-premium:hover{background:var(--accent);box-shadow:0 4px 15px #ff4d6d66}.category-grid-v2{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@media (min-width:540px){.category-grid-v2{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}}@media (min-width:1024px){.category-grid-v2{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem}}.cat-card-v2{border-radius:var(--radius-md);text-align:center;color:inherit;background:#fff;border:1px solid #00000008;padding:1rem;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.cat-card-v2{border-radius:var(--radius-lg);padding:1.5rem}}.cat-card-v2:hover{background:var(--primary);color:#fff;border-color:var(--accent);transform:translateY(-5px)}.cat-icon-v2{width:50px;height:50px;margin:0 auto .75rem;transition:transform .4s}@media (min-width:768px){.cat-icon-v2{width:80px;height:80px;margin-bottom:1rem}}.footer{background:var(--primary);color:#fff;margin-top:3rem;padding:3rem 0}@media (min-width:768px){.footer{margin-top:5rem;padding:5rem 0 2rem}}.footer-content{flex-direction:column;gap:2.5rem;margin-bottom:2.5rem;display:flex}@media (min-width:768px){.footer-content{grid-template-columns:2fr 1fr 1fr;gap:4rem;margin-bottom:4rem;display:grid}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.6s forwards fadeIn}.banner-horizontal-wrapper{z-index:10;margin-top:-2rem;margin-bottom:2rem;position:relative}@media (min-width:768px){.banner-horizontal-wrapper{margin-top:-3.5rem;margin-bottom:3.5rem}}.banner-horizontal{border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background:#fff;border:4px solid #fff;justify-content:center;align-items:center;padding:.5rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;overflow:hidden}.banner-square-wrapper{width:100%}.banner-square{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:1;background:#fff;border:4px solid #fff;justify-content:center;align-items:center;padding:8px;transition:all .3s;display:flex;overflow:hidden}.banner-horizontal:hover,.banner-square:hover{box-shadow:var(--shadow-xl);border-color:var(--accent);transform:translateY(-5px)}.banner-image{border-radius:var(--radius-md);object-fit:contain;max-width:100%;height:auto;display:block}.banner-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (min-width:768px){.banner-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}@media (min-width:1024px){.banner-grid{grid-template-columns:repeat(4,1fr);gap:2rem}}