:root{--primary-900:#0c1929;--primary-800:#132742;--primary-700:#1a365d;--primary-600:#234876;--primary-500:#2d5a8f;--primary-400:#4a7ab3;--primary-300:#7da3cf;--primary-200:#b0cbe6;--primary-100:#e3eef7;--primary-50:#f5f9fc;--accent-600:#991b1b;--accent-500:#dc2626;--accent-400:#ef4444;--accent-300:#f87171;--accent-200:#fca5a5;--accent-100:#fee2e2;--success-600:#16a34a;--success-700:#15803d;--success-500:#22c55e;--success-100:#dcfce7;--warning-500:#eab308;--warning-100:#fef9c3;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--font-display:var(--font-sarabun), var(--font-kanit), sans-serif;--font-body:var(--font-sarabun), "Noto Sans Thai", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease;--header-height:70px;--sidebar-width:280px;--container-max:1400px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);color:var(--gray-800);background-color:var(--gray-50);flex-direction:column;min-height:100vh;font-size:1rem;line-height:1.6;display:flex}a{color:var(--primary-600);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary-500)}img{max-width:100%;height:auto;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--gray-900);font-weight:600;line-height:1.3}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.container{width:100%;max-width:var(--container-max);padding:0 var(--space-lg);margin:0 auto}.main-content{padding-top:var(--header-height);flex:1}.header{height:var(--header-height);background:linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 100%);box-shadow:var(--shadow-lg);z-index:1000;position:fixed;top:0;left:0;right:0}.header-container{justify-content:space-between;align-items:center;gap:var(--space-lg);height:100%;display:flex}.logo{align-items:center;gap:var(--space-sm);display:flex}.logo-img{width:auto;height:46px}.footer .logo-img{height:42px}.search-bar,.search-box{flex:1;max-width:500px;position:relative}.search-input{width:100%;height:44px;padding:0 var(--space-lg) 0 48px;border-radius:var(--radius-full);color:var(--gray-800);transition:all var(--transition-fast);background:#fffffff2;border:2px solid #0000;font-size:.9375rem}.search-input::placeholder{color:var(--gray-400)}.search-input:focus{border-color:var(--accent-400);outline:none;box-shadow:0 0 0 4px #fb923c33}.search-icon{color:var(--gray-400);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.header-actions{align-items:center;gap:var(--space-md);display:flex}.header-btn{align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:#fff;transition:all var(--transition-fast);font-size:.875rem;font-weight:500;display:flex}.header-btn:hover{color:#fff;background:#ffffff1a}.header-btn.cart{background:var(--accent-500);padding:var(--space-sm) var(--space-lg)}.header-btn.cart:hover{background:var(--accent-600)}.cart-count{color:var(--accent-600);border-radius:var(--radius-full);margin-left:var(--space-xs);background:#fff;padding:2px 6px;font-size:.75rem;font-weight:700}.nav-bar{border-bottom:1px solid var(--gray-200);top:var(--header-height);z-index:999;background:#fff;height:50px;position:fixed;left:0;right:0}.nav-container{align-items:center;gap:var(--space-xl);height:100%;display:flex}.nav-menu{align-items:center;gap:var(--space-xs);display:flex}.nav-item{position:relative}.nav-link{align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);color:var(--gray-700);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:.9375rem;font-weight:500;display:flex}.nav-link:hover{background:var(--gray-100);color:var(--primary-600)}.nav-link.products-btn{background:var(--primary-700);color:#fff}.nav-link.products-btn:hover{background:var(--primary-600);color:#fff}.mega-menu{border-radius:var(--radius-lg);width:900px;box-shadow:var(--shadow-xl);padding:var(--space-lg);opacity:0;visibility:hidden;transition:all var(--transition-fast);z-index:1000;background:#fff;position:absolute;top:100%;left:0;transform:translateY(10px)}.nav-item:hover .mega-menu{opacity:1;visibility:visible;transform:translateY(0)}.mega-menu-grid{gap:var(--space-lg);grid-template-columns:repeat(3,1fr);display:grid}.mega-menu-category h4{color:var(--primary-700);margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:2px solid var(--primary-100);font-size:.9375rem}.mega-menu-category ul{gap:var(--space-xs);flex-direction:column;display:flex}.mega-menu-category a{padding:var(--space-xs) 0;color:var(--gray-600);transition:all var(--transition-fast);font-size:.875rem;display:block}.mega-menu-category a:hover{color:var(--primary-600);padding-left:var(--space-sm)}.hero{background:linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 50%, var(--primary-600) 100%);padding:var(--space-3xl) 0;margin-top:50px;position:relative;overflow:hidden}.hero:before{content:"";opacity:.5;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.hero-content{z-index:1;gap:var(--space-3xl);grid-template-columns:1fr 1fr;align-items:center;display:grid;position:relative}.hero-text h1{color:#fff;margin-bottom:var(--space-lg);font-size:3rem;font-weight:700;line-height:1.2}.hero-text h1 span{color:var(--accent-400)}.hero-text p{color:var(--primary-200);margin-bottom:var(--space-xl);font-size:1.125rem;line-height:1.7}.hero-btns{gap:var(--space-md);display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent-500);color:#fff;box-shadow:0 4px 14px #ea580c66}.btn-primary:hover{background:var(--accent-600);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #ea580c80}.btn-secondary{color:#fff;background:#ffffff1a;border:2px solid #ffffff4d}.btn-secondary:hover{color:#fff;background:#fff3;border-color:#ffffff80}.hero-stats{gap:var(--space-lg);margin-top:var(--space-2xl);grid-template-columns:repeat(3,1fr);display:grid}.stat-item{text-align:center}.stat-number{color:var(--accent-400);font-size:2.5rem;font-weight:700;line-height:1}.stat-label{color:var(--primary-200);margin-top:var(--space-xs);font-size:.875rem}.hero-visual{position:relative}.hero-card{border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);background:#fff}.hero-card h2{margin-bottom:var(--space-lg);color:var(--primary-800);font-size:1.25rem}.category-quick-links{gap:var(--space-md);grid-template-columns:repeat(2,1fr);display:grid}.category-link{align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--gray-50);border-radius:var(--radius-md);color:var(--gray-700);transition:all var(--transition-fast);font-size:.875rem;font-weight:500;display:flex}.category-link:hover{background:var(--primary-50);color:var(--primary-700);transform:translate(4px)}.category-link .icon{background:var(--primary-100);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--primary-600);justify-content:center;align-items:center;display:flex}.features{padding:var(--space-3xl) 0;background:#fff}.features-grid{gap:var(--space-xl);grid-template-columns:repeat(4,1fr);display:grid}.feature-card{text-align:center;padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--gray-50);transition:all var(--transition-normal)}.feature-card:hover{box-shadow:var(--shadow-lg);background:#fff;transform:translateY(-4px)}.feature-icon{width:64px;height:64px;margin:0 auto var(--space-lg);background:linear-gradient(135deg, var(--primary-500), var(--primary-600));border-radius:var(--radius-lg);color:#fff;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.feature-card h3{margin-bottom:var(--space-sm);color:var(--gray-900);font-size:1.125rem}.feature-card p{color:var(--gray-600);font-size:.9375rem;line-height:1.6}.products-section{padding:var(--space-3xl) 0}.section-header{margin-bottom:var(--space-xl);justify-content:space-between;align-items:center;display:flex}.section-title{color:var(--gray-900);font-size:1.75rem}.section-title span{color:var(--primary-600)}.view-all-link{align-items:center;gap:var(--space-xs);color:var(--primary-600);font-weight:500;display:flex}.view-all-link:hover{color:var(--primary-500)}.products-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.product-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);border:1px solid var(--gray-200);background:#fff;overflow:hidden}.product-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-200);transform:translateY(-4px)}.product-image{background:var(--gray-100);justify-content:center;align-items:center;height:180px;display:flex;position:relative;overflow:hidden}.product-image img{object-fit:contain;max-height:140px;transition:transform var(--transition-normal), opacity var(--transition-normal)}.product-image img.loading{opacity:.5;filter:blur(5px)}.product-image img.loaded{opacity:1;filter:none;animation:.5s ease-in-out fadeInImage}.product-image img.error,.product-image img.placeholder{opacity:.7}@keyframes fadeInImage{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.product-card:hover .product-image img.loaded{transform:scale(1.05)}.product-badge{top:var(--space-sm);left:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;position:absolute}.product-badge.in-stock{background:var(--success-100);color:var(--success-700)}.product-badge.hot{background:var(--accent-100);color:var(--accent-600)}.product-info{padding:var(--space-lg)}.product-category{color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs);font-size:.75rem}.product-name{color:var(--gray-900);margin-bottom:var(--space-sm);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1rem;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.product-code{font-family:var(--font-mono);color:var(--gray-700);background:var(--gray-100);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-bottom:var(--space-md);font-size:.8125rem;display:inline-block}.product-footer{padding-top:var(--space-md);border-top:1px solid var(--gray-100);justify-content:space-between;align-items:center;display:flex}.product-price{color:var(--accent-600);font-size:1.125rem;font-weight:700}.product-price .from{color:var(--gray-500);font-size:.75rem;font-weight:400}.product-delivery{color:var(--gray-500);font-size:.8125rem}.categories-section{padding:var(--space-3xl) 0;background:var(--gray-100)}.categories-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.category-card{border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;transition:all var(--transition-normal);background:#fff;border:2px solid #0000}.category-card:hover{border-color:var(--primary-300);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.category-icon{width:72px;height:72px;margin:0 auto var(--space-lg);background:linear-gradient(135deg, var(--primary-100), var(--primary-50));border-radius:var(--radius-lg);color:var(--primary-600);justify-content:center;align-items:center;font-size:2rem;display:flex}.category-card h3{color:var(--gray-900);margin-bottom:var(--space-xs);font-size:1rem}.category-card p{color:var(--gray-500);font-size:.8125rem}.page-header{background:linear-gradient(135deg, var(--primary-800), var(--primary-700));padding:var(--space-xl) 0;margin-top:50px}.breadcrumb{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.breadcrumb a{color:var(--primary-200);font-size:.875rem}.breadcrumb a:hover{color:#fff}.breadcrumb span{color:var(--primary-300)}.breadcrumb .current{color:#fff}.page-title{color:#fff;font-size:2rem}.page-title-th{color:var(--primary-200);margin-top:var(--space-xs);font-size:1rem;font-weight:400}.products-layout{grid-template-columns:var(--sidebar-width) 1fr;gap:var(--space-xl);padding:var(--space-xl) 0;display:grid}.sidebar{border-radius:var(--radius-lg);padding:var(--space-lg);height:fit-content;top:calc(var(--header-height) + 70px);background:#fff;position:sticky}.sidebar-section{margin-bottom:var(--space-xl)}.sidebar-section:last-child{margin-bottom:0}.sidebar-title{color:var(--gray-900);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--primary-100);font-size:.9375rem;font-weight:600}.sidebar-links{gap:var(--space-xs);flex-direction:column;display:flex}.sidebar-link{padding:var(--space-sm) var(--space-md);color:var(--gray-600);border-radius:var(--radius-sm);transition:all var(--transition-fast);justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.sidebar-link:hover{background:var(--gray-50);color:var(--primary-600)}.sidebar-link.active{background:var(--primary-50);color:var(--primary-700);font-weight:500}.sidebar-link .count{background:var(--gray-200);border-radius:var(--radius-full);color:var(--gray-600);padding:2px 8px;font-size:.75rem}.product-list-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.product-count{color:var(--gray-600);font-size:.9375rem}.sort-select{padding:var(--space-sm) var(--space-md);border:1px solid var(--gray-300);border-radius:var(--radius-md);color:var(--gray-700);cursor:pointer;background:#fff;font-size:.875rem}.product-detail{padding:var(--space-xl) 0}.product-detail-grid{gap:var(--space-2xl);grid-template-columns:1fr 1.2fr;display:grid}.product-gallery{border-radius:var(--radius-lg);padding:var(--space-xl);background:#fff}.main-image{aspect-ratio:1;background:var(--gray-100);border-radius:var(--radius-md);margin-bottom:var(--space-lg);justify-content:center;align-items:center;display:flex}.main-image img{object-fit:contain;max-width:80%;max-height:80%}.image-thumbs{gap:var(--space-sm);display:flex}.thumb{background:var(--gray-100);border-radius:var(--radius-sm);cursor:pointer;width:80px;height:80px;transition:all var(--transition-fast);border:2px solid #0000}.thumb:hover,.thumb.active{border-color:var(--primary-500)}.product-info-detail{border-radius:var(--radius-lg);padding:var(--space-xl);background:#fff}.product-info-detail h1{color:var(--gray-900);margin-bottom:var(--space-sm);font-size:1.5rem}.product-subtitle{color:var(--gray-500);margin-bottom:var(--space-lg);font-size:1rem}.product-meta{gap:var(--space-lg);padding:var(--space-lg) 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);margin-bottom:var(--space-lg);display:flex}.meta-item{gap:var(--space-xs);flex-direction:column;display:flex}.meta-label{color:var(--gray-500);text-transform:uppercase;font-size:.75rem}.meta-value{color:var(--gray-900);font-size:1rem;font-weight:600}.meta-value.price{color:var(--accent-600);font-size:1.5rem}.meta-value.stock{color:var(--success-700)}.config-section{margin-bottom:var(--space-lg)}.config-title{color:var(--gray-700);margin-bottom:var(--space-sm);font-size:.875rem;font-weight:600}.config-options{gap:var(--space-sm);flex-wrap:wrap;display:flex}.config-option{padding:var(--space-sm) var(--space-md);border:2px solid var(--gray-200);border-radius:var(--radius-md);color:var(--gray-600);cursor:pointer;transition:all var(--transition-fast);font-size:.875rem}.config-option:hover{border-color:var(--primary-300)}.config-option.selected{border-color:var(--primary-500);background:var(--primary-50);color:var(--primary-700)}.config-input{gap:var(--space-sm);display:flex}.config-input input{padding:var(--space-sm) var(--space-md);border:2px solid var(--gray-200);border-radius:var(--radius-md);flex:1;font-size:.9375rem}.config-input input:focus{border-color:var(--primary-500);outline:none}.config-input span{color:var(--gray-500);align-items:center;font-size:.875rem;display:flex}.add-to-cart-section{gap:var(--space-md);margin-top:var(--space-xl);display:flex}.qty-input{border:2px solid var(--gray-200);border-radius:var(--radius-md);align-items:center;display:flex;overflow:hidden}.qty-btn{width:44px;height:44px;color:var(--gray-600);transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.qty-btn:hover{background:var(--gray-100)}.qty-input input{text-align:center;border:none;width:60px;height:44px;font-size:1rem;font-weight:600}.btn-add-cart{background:var(--accent-500);color:#fff;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);transition:all var(--transition-fast);flex:1;font-size:1rem;font-weight:600}.btn-add-cart:hover{background:var(--accent-600)}.specs-section{border-radius:var(--radius-lg);padding:var(--space-xl);margin-top:var(--space-xl);background:#fff}.specs-title{margin-bottom:var(--space-lg);font-size:1.25rem}.specs-table{border-collapse:collapse;width:100%}.specs-table tr{border-bottom:1px solid var(--gray-100)}.specs-table tr:last-child{border-bottom:none}.specs-table th{text-align:left;padding:var(--space-md);color:var(--gray-600);background:var(--gray-50);width:200px;font-size:.875rem;font-weight:500}.specs-table td{padding:var(--space-md);color:var(--gray-800);font-size:.9375rem}.footer{background:var(--primary-900);color:#fff;padding:var(--space-3xl) 0 var(--space-xl);margin-top:auto}.footer-grid{gap:var(--space-2xl);margin-bottom:var(--space-2xl);grid-template-columns:2fr 1fr 1fr 1fr;display:grid}.footer-brand p{color:var(--primary-300);margin-top:var(--space-md);font-size:.9375rem;line-height:1.7}.footer-contact{margin-top:var(--space-lg)}.footer-contact-item{align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-sm);color:var(--primary-200);font-size:.875rem;display:flex}.footer-contact-item a{color:inherit}.footer-contact-item a:hover{color:#fff;text-decoration:underline}.footer-title{color:#fff;margin-bottom:var(--space-lg);font-size:1rem;font-weight:600}.footer-links{gap:var(--space-sm);flex-direction:column;display:flex}.footer-links a{color:var(--primary-300);transition:all var(--transition-fast);font-size:.9375rem}.footer-links a:hover{color:#fff;padding-left:var(--space-sm)}.footer-bottom{padding-top:var(--space-xl);border-top:1px solid var(--primary-700);justify-content:space-between;align-items:center;display:flex}.footer-bottom p{color:var(--primary-300);font-size:.875rem}.footer-social{gap:var(--space-md);display:flex}.social-link{background:var(--primary-700);border-radius:var(--radius-full);color:#fff;width:40px;height:40px;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.social-link:hover{background:var(--accent-500);color:#fff;transform:translateY(-2px)}.about-hero{background:linear-gradient(135deg, var(--primary-800), var(--primary-600));padding:var(--space-3xl) 0;text-align:center;margin-top:50px}.about-hero h1{color:#fff;margin-bottom:var(--space-lg);font-size:2.5rem}.about-hero p{color:var(--primary-200);max-width:600px;margin:0 auto;font-size:1.125rem}.about-content{padding:var(--space-3xl) 0}.about-grid{gap:var(--space-3xl);grid-template-columns:1fr 1fr;align-items:center;display:grid}.about-text h2{color:var(--gray-900);margin-bottom:var(--space-lg);font-size:2rem}.about-text p{color:var(--gray-600);margin-bottom:var(--space-lg);font-size:1.0625rem;line-height:1.8}.about-image{background:var(--gray-200);border-radius:var(--radius-xl);aspect-ratio:4/3;color:var(--gray-400);justify-content:center;align-items:center;display:flex}.contact-section{padding:var(--space-3xl) 0}.contact-grid{gap:var(--space-2xl);grid-template-columns:1fr 1.5fr;display:grid}.contact-info{background:var(--primary-700);border-radius:var(--radius-xl);padding:var(--space-xl);color:#fff}.contact-info h3{color:#fff;margin-bottom:var(--space-xl);font-size:1.5rem}.contact-item{gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.contact-item-icon{border-radius:var(--radius-md);background:#ffffff1a;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.contact-item-text h4{color:#fff;margin-bottom:var(--space-xs);font-size:1rem}.contact-item-text p{color:var(--primary-200);font-size:.9375rem;line-height:1.6}.contact-form{border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-lg);background:#fff}.contact-form h3{margin-bottom:var(--space-xl);font-size:1.5rem}.form-row{gap:var(--space-lg);margin-bottom:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}.form-group{margin-bottom:var(--space-lg)}.form-group label{color:var(--gray-700);margin-bottom:var(--space-sm);font-size:.875rem;font-weight:500;display:block}.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--space-md);border:2px solid var(--gray-200);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:.9375rem}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-500);outline:none}.form-group textarea{resize:vertical;min-height:120px}.btn-submit{width:100%;padding:var(--space-md) var(--space-xl);background:var(--accent-500);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;font-size:1rem;font-weight:600}.btn-submit:hover{background:var(--accent-600)}@media (max-width:1200px){.hero-content{grid-template-columns:1fr}.hero-visual{display:none}.features-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:992px){.products-layout{grid-template-columns:1fr}.sidebar{position:static}.product-detail-grid{grid-template-columns:1fr}.mega-menu{width:600px}.mega-menu-grid{grid-template-columns:repeat(2,1fr)}.about-grid,.contact-grid{grid-template-columns:1fr}}@media (max-width:768px){:root{--header-height:60px}.search-bar,.header-btn span{display:none}.logo-img{height:34px}.nav-bar{overflow-x:auto}.hero{padding:var(--space-2xl) 0}.hero-text h1{font-size:2rem}.hero-stats{gap:var(--space-md);grid-template-columns:repeat(3,1fr)}.stat-number{font-size:1.75rem}.features-grid{grid-template-columns:1fr}.categories-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{gap:var(--space-xl);grid-template-columns:1fr}.footer-bottom{gap:var(--space-lg);text-align:center;flex-direction:column}.form-row{grid-template-columns:1fr}}@media (max-width:480px){.container{padding:0 var(--space-md)}.hero-btns{flex-direction:column}.btn{width:100%}.categories-grid,.products-grid{grid-template-columns:1fr}.add-to-cart-section{flex-direction:column}.qty-input{justify-content:center}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hidden{display:none}.block{display:block}.flex{display:flex}.grid{display:grid}.skeleton{background:linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-in{animation:.5s forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:.5s forwards slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.search-dropdown{border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;max-height:600px;transition:all var(--transition-normal);z-index:1000;background:#fff;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;transform:translateY(-10px)}.search-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.search-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--gray-200);background:var(--gray-50);z-index:10;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.search-count{color:var(--gray-700);font-size:.875rem;font-weight:600}.clear-history{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border:1px solid var(--gray-300);border-radius:var(--radius-md);color:var(--gray-600);cursor:pointer;transition:all var(--transition-fast);background:#fff;font-size:.8125rem;display:flex}.clear-history:hover{background:var(--gray-100);border-color:var(--gray-400);color:var(--gray-800)}.search-result-item{gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--gray-100);cursor:pointer;transition:all var(--transition-fast);color:inherit;text-decoration:none;display:flex}.search-result-item:hover,.search-result-item.selected{background:var(--primary-50);border-left:3px solid var(--accent-500);padding-left:calc(var(--space-lg) - 3px)}.search-result-item:last-child{border-bottom:none}.result-image{border-radius:var(--radius-md);background:var(--gray-100);flex-shrink:0;width:80px;height:80px;position:relative;overflow:hidden}.result-image img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.search-result-item:hover .result-image img{transform:scale(1.1)}.stock-badge{border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.025em;padding:2px 6px;font-size:.625rem;font-weight:600;position:absolute;top:4px;right:4px}.stock-badge.in-stock{background:var(--success-500);color:#fff}.stock-badge.out-stock{background:var(--warning-500);color:#fff}.result-info{flex:1;min-width:0}.result-title{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-xs);display:flex}.result-title h4{color:var(--gray-900);margin:0;font-size:1rem;font-weight:600;line-height:1.4}.result-title h4 mark{background:var(--accent-200);color:var(--accent-600);border-radius:2px;padding:0 2px}.result-code{font-family:var(--font-mono);color:var(--primary-600);background:var(--primary-100);border-radius:var(--radius-sm);flex-shrink:0;padding:2px 6px;font-size:.75rem;font-weight:600}.result-name-en{color:var(--gray-600);margin-bottom:var(--space-sm);text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;overflow:hidden}.result-name-en mark{background:var(--accent-200);color:var(--accent-600);border-radius:2px;padding:0 2px}.result-meta{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);display:flex}.result-category{color:var(--gray-500);font-size:.8125rem}.result-price{color:var(--accent-600);font-size:.9375rem;font-weight:700}.search-history-item{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--gray-100);cursor:pointer;transition:all var(--transition-fast);color:var(--gray-700);text-decoration:none;display:flex}.search-history-item i:first-child{color:var(--gray-400);font-size:.875rem}.search-history-item span{flex:1;font-size:.9375rem}.search-history-item i:last-child{color:var(--gray-300);font-size:.75rem}.no-results{padding:var(--space-3xl) var(--space-lg);text-align:center}.no-results i{color:var(--gray-300);margin-bottom:var(--space-lg);font-size:3rem}.no-results p{color:var(--gray-700);margin-bottom:var(--space-sm);font-size:1.125rem;font-weight:600}.search-hint{color:var(--gray-500);margin-top:var(--space-sm);font-size:.875rem;display:block}.error-results i{color:var(--warning-500)}.search-footer{padding:var(--space-md) var(--space-lg);background:var(--gray-50);border-top:1px solid var(--gray-200);text-align:center}.more-results{color:var(--gray-600);font-size:.875rem;font-style:italic}.search-dropdown::-webkit-scrollbar{width:8px}.search-dropdown::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-lg)}.search-dropdown::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-lg)}.search-dropdown::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.search-loading{padding:var(--space-2xl);justify-content:center;align-items:center;display:flex}.search-loading:after{content:"";border:3px solid var(--gray-200);border-top-color:var(--accent-500);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:768px){.search-dropdown{max-height:400px;left:-16px;right:-16px}.result-image{width:60px;height:60px}.result-title h4{font-size:.9375rem}.result-name-en{font-size:.8125rem}}.type-link-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.type-link{align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--gray-50);border-radius:var(--radius-md);color:var(--gray-700);transition:all var(--transition-fast);display:flex}.type-link i{color:var(--gray-400);font-size:.75rem}.type-link:hover{background:var(--primary-50);color:var(--primary-700)}.hero-banner{margin-top:var(--space-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);line-height:0;overflow:hidden}.hero-banner img{width:100%;height:auto;display:block}.info-panel{border-radius:var(--radius-lg);padding:var(--space-xl);margin-top:var(--space-xl);background:#fff}.info-panel h2{margin-bottom:var(--space-md);font-size:1.125rem}.info-panel p{color:var(--gray-600);line-height:1.8}.btn-ghost{padding:var(--space-sm) var(--space-md);border:1px solid var(--gray-300);border-radius:var(--radius-md);color:var(--gray-600);cursor:pointer;background:#fff;flex:1;font-size:.875rem}.btn-ghost:disabled{cursor:not-allowed;opacity:.7}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:1rem}.btn-outline{color:var(--primary-600);border:1px solid var(--primary-300);background:0 0}.btn-outline:hover{background:var(--primary-50);border-color:var(--primary-500)}.btn-outline-light{color:#fff;background:#ffffff1f;border:1px solid #ffffff80}.btn-outline-light:hover{background:#ffffff38}.btn-success{background:var(--success-600);color:#fff}.btn-success:hover{background:var(--success-500)}.required{color:var(--accent-500)}.field-error{margin-top:var(--space-xs);color:var(--accent-500);font-size:.8125rem}.contact-form input.error,.contact-form select.error,.contact-form textarea.error{border-color:var(--accent-400)}.form-note{margin-top:var(--space-md);color:var(--gray-500);font-size:.8125rem;line-height:1.7}.contact-card,.quick-actions{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);background:#fff}.quick-actions{margin-top:var(--space-xl)}.contact-card>h2,.quick-actions>h2{color:var(--gray-900);margin-bottom:var(--space-lg);font-size:1.125rem}.contact-card .contact-item{gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--gray-100);align-items:flex-start;display:flex}.contact-card .contact-item:last-child{border-bottom:0;padding-bottom:0}.contact-icon{border-radius:var(--radius-md);background:var(--primary-50);height:2.5rem;color:var(--primary-600);flex:0 0 2.5rem;justify-content:center;align-items:center;display:flex}.contact-detail h3{color:var(--gray-900);margin-bottom:var(--space-xs);font-size:.9375rem}.contact-detail p{color:var(--gray-600);font-size:.875rem;line-height:1.7}.contact-detail a{color:var(--primary-600)}.contact-detail a:hover{text-decoration:underline}.quick-action-btn{align-items:center;gap:var(--space-sm);padding:var(--space-md);margin-bottom:var(--space-sm);border-radius:var(--radius-md);background:var(--gray-50);color:var(--gray-700);transition:all var(--transition-fast);font-weight:500;display:flex}.quick-action-btn:last-child{margin-bottom:0}.quick-action-btn:hover{background:var(--primary-50);color:var(--primary-700)}.quick-action-btn.phone i{color:var(--primary-500)}.quick-action-btn.line i{color:#06c755}.quick-action-btn.email i{color:var(--accent-500)}.map-section{padding:var(--space-3xl) 0;background:var(--gray-50)}.map-section h2{color:var(--gray-900);margin-bottom:var(--space-lg);font-size:1.5rem}.map-wrapper{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);line-height:0;overflow:hidden}.map-info{margin-top:var(--space-lg);color:var(--gray-600);line-height:1.8}.faq-quick{padding:var(--space-3xl) 0;background:#fff}.faq-quick h2{text-align:center;color:var(--gray-900);margin-bottom:var(--space-xl);font-size:1.5rem}.faq-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.faq-card{padding:var(--space-lg);border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--gray-50)}.faq-card h3{color:var(--gray-900);margin-bottom:var(--space-sm);font-size:1rem}.faq-card p{color:var(--gray-600);font-size:.9375rem;line-height:1.7}.help-search{padding:var(--space-2xl) 0 var(--space-lg);background:var(--gray-50)}.search-box-large{max-width:640px;margin:0 auto;position:relative}.search-box-large i{left:var(--space-lg);color:var(--gray-400);position:absolute;top:50%;transform:translateY(-50%)}.search-box-large input{width:100%;padding:var(--space-md) var(--space-lg) var(--space-md) var(--space-3xl);font-family:var(--font-body);border:1px solid var(--gray-300);border-radius:var(--radius-full);background:#fff;font-size:1rem}.search-box-large input:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px var(--primary-100);outline:none}.help-search-status{max-width:640px;margin:var(--space-md) auto 0;color:var(--gray-500);text-align:center;font-size:.875rem}.help-categories{padding:var(--space-2xl) 0;background:var(--gray-50)}.help-category-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.help-category-card{padding:var(--space-xl);border:1px solid var(--gray-200);border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-fast);background:#fff;display:block}.help-category-card:hover{border-color:var(--primary-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}.help-category-card h2{color:var(--gray-900);margin-bottom:var(--space-xs);font-size:1.0625rem}.help-category-card p{color:var(--gray-500);font-size:.875rem}.faq-section{padding:var(--space-3xl) 0}.faq-group{margin-bottom:var(--space-2xl);scroll-margin-top:var(--space-3xl)}.faq-group>h2{align-items:center;gap:var(--space-sm);color:var(--gray-900);padding-bottom:var(--space-md);margin-bottom:var(--space-lg);border-bottom:2px solid var(--primary-100);font-size:1.375rem;display:flex}.faq-group>h2 i{color:var(--primary-500)}.faq-accordion .faq-item{border:1px solid var(--gray-200);border-radius:var(--radius-md);margin-bottom:var(--space-sm);background:#fff;overflow:hidden}.faq-accordion .faq-item.active{border-color:var(--primary-300)}.faq-question{justify-content:space-between;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-lg);font-family:var(--font-body);color:var(--gray-800);text-align:left;cursor:pointer;background:0 0;border:0;font-size:1rem;font-weight:500;display:flex}.faq-question:hover{color:var(--primary-600)}.faq-question i{color:var(--gray-400);transition:transform var(--transition-fast);flex-shrink:0;font-size:.875rem}.faq-item.active .faq-question i{transform:rotate(180deg)}.faq-answer{padding:0 var(--space-lg) var(--space-lg);color:var(--gray-600);line-height:1.8}.faq-answer p+p,.faq-answer p+ul,.faq-answer p+ol,.faq-answer ul+p,.faq-answer ol+p,.faq-answer table+p{margin-top:var(--space-md)}.faq-answer ul,.faq-answer ol{padding-left:var(--space-xl)}.faq-answer li{margin-bottom:var(--space-xs)}.info-table{width:100%;margin-top:var(--space-md);border-collapse:collapse}.info-table td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--gray-200);font-size:.9375rem}.info-table tr:last-child td{border-bottom:0}.still-need-help{padding:var(--space-3xl) 0;background:linear-gradient(135deg, var(--primary-700), var(--primary-600))}.help-cta{text-align:center;color:#fff}.help-cta h2{margin-bottom:var(--space-sm);font-size:1.75rem}.help-cta p{color:var(--primary-200);margin-bottom:var(--space-xl)}.help-actions{justify-content:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.error-page{padding:var(--space-3xl) 0;background:var(--gray-50)}.error-content{text-align:center;max-width:640px;margin:0 auto}.error-icon{width:5rem;height:5rem;margin-bottom:var(--space-lg);border-radius:var(--radius-full);background:var(--primary-100);color:var(--primary-600);justify-content:center;align-items:center;font-size:2rem;display:inline-flex}.error-icon.error-500{background:var(--accent-100);color:var(--accent-500)}.error-code{font-family:var(--font-display);color:var(--gray-900);margin-bottom:var(--space-sm);font-size:4rem;line-height:1}.error-content h2{color:var(--gray-800);margin-bottom:var(--space-sm);font-size:1.375rem}.error-content>p{color:var(--gray-600);margin-bottom:var(--space-xl)}.error-suggestions,.error-contact{text-align:left;padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-xl);border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;display:inline-block}.error-suggestions h3,.error-contact p{color:var(--gray-800);margin-bottom:var(--space-md);font-size:1rem}.error-suggestions ul{padding-left:var(--space-lg);color:var(--gray-600);line-height:2}.error-suggestions a{color:var(--primary-600)}.error-suggestions a:hover{text-decoration:underline}.contact-options{gap:var(--space-lg);flex-wrap:wrap;display:flex}.contact-link{color:var(--primary-600);font-weight:500}.contact-link:hover{text-decoration:underline}.error-hint{color:var(--gray-500);margin-bottom:var(--space-xl);font-size:.9375rem}.error-digest{font-family:var(--font-mono);color:var(--gray-400);margin-bottom:var(--space-lg);font-size:.8125rem}.error-actions{justify-content:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.search-history-item{align-items:center;gap:var(--space-md);width:100%;padding:var(--space-md) var(--space-lg);font-family:var(--font-body);color:var(--gray-700);text-align:left;cursor:pointer;background:0 0;border:0;font-size:.9375rem;display:flex}.search-history-item:hover{background:var(--gray-50)}.search-history-item span{flex:1}.search-history-item i{color:var(--gray-400);font-size:.75rem}.clear-history{font-family:var(--font-body);color:var(--gray-500);cursor:pointer;background:0 0;border:0;font-size:.8125rem}.clear-history:hover{color:var(--accent-500)}@media (max-width:768px){.error-code{font-size:3rem}.contact-options,.help-actions,.error-actions{flex-direction:column}}