@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Kanit:wght@300;400;500;600&display=swap";.storefront-app{flex-direction:column;min-height:100vh;display:flex}.storefront-header{background-color:var(--bg-surface);border-bottom:1px solid var(--border-color);z-index:50;height:70px;position:sticky;top:0}.logo{color:var(--text-main)}.header-nav{align-items:center;gap:1.5rem;display:flex}.cart-btn{border-radius:var(--radius-full)}.storefront-main{flex:1;padding:2rem 0}.storefront-footer{background-color:var(--bg-surface);border-top:1px solid var(--border-color);padding:2rem 0}@media (width<=640px){.header-nav{gap:.5rem}.header-nav .btn span{display:none}.logo span{font-size:1.25rem}.storefront-header .container{padding:0 .5rem}}.admin-app{background-color:var(--bg-color);min-height:100vh;display:flex}.admin-sidebar{background-color:var(--bg-surface);border-right:1px solid var(--border-color);flex-direction:column;width:260px;height:100vh;display:flex;position:sticky;top:0}.sidebar-header{border-bottom:1px solid var(--border-color);padding:1.5rem}.sidebar-nav{flex-direction:column;flex:1;gap:.5rem;padding:1.5rem 1rem;display:flex}.nav-item{border-radius:var(--radius-md);color:var(--text-muted);transition:all var(--transition-fast);align-items:center;gap:.75rem;padding:.75rem 1rem;font-weight:500;display:flex}.nav-item:hover{background-color:var(--bg-color);color:var(--text-main)}.nav-item.active{background-color:var(--primary-light);color:var(--primary)}.sidebar-footer{border-top:1px solid var(--border-color);padding:1.5rem 1rem}.admin-main{flex-direction:column;flex:1;min-width:0;display:flex}.admin-topbar{background-color:var(--bg-surface);border-bottom:1px solid var(--border-color);z-index:40;justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex;position:sticky;top:0}.avatar{border-radius:var(--radius-full);background-color:var(--primary);color:#fff;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:flex}.admin-content{flex:1;padding:2rem;overflow-y:auto}@media (width<=768px){.admin-app{flex-direction:column}.admin-sidebar{border-right:none;border-bottom:1px solid var(--border-color);width:100%;height:auto;position:relative}.sidebar-nav{white-space:nowrap;flex-direction:row;padding:.75rem;overflow-x:auto}.nav-item{justify-content:center;padding:.5rem}.nav-item span,.sidebar-footer{display:none}.admin-topbar{height:60px;padding:0 1rem}.admin-content{padding:1rem}}.home-page{width:100%}.banner-slider{width:100%;height:400px;box-shadow:var(--shadow-glow);border-radius:20px;margin-bottom:3rem;position:relative;overflow:hidden}@media (width<=768px){.banner-slider{height:250px}}.banner-slide{opacity:0;transition:opacity 1s ease-in-out;position:absolute;inset:0}.banner-slide.active{opacity:1;z-index:10}.banner-image{object-fit:cover;width:100%;height:100%}.highlights-container{scroll-snap-type:x mandatory;gap:1.5rem;padding-bottom:1rem;display:flex;overflow-x:auto}.highlights-container::-webkit-scrollbar{height:8px}.highlights-container::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.highlights-container::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}.highlight-card{scroll-snap-align:start;min-width:280px}.videos-container{scroll-snap-type:x mandatory;gap:1rem;padding-bottom:1rem;display:flex;overflow-x:auto}.video-card{aspect-ratio:9/16;scroll-snap-align:start;border:1px solid var(--border);border-radius:20px;min-width:300px;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080}.category-tabs{padding-bottom:.5rem}.category-tab{background-color:var(--bg-card);border:1px solid var(--border);color:var(--text);white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:30px;padding:.75rem 1.5rem;font-weight:500;transition:all .3s}.category-tab:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}.category-tab.active{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-color:#0000;box-shadow:0 4px 15px #3b82f666}.product-card{flex-direction:column;height:100%;display:flex}.product-image-container{background-color:#000;border-radius:16px 16px 0 0;width:100%;padding-top:100%;position:relative;overflow:hidden}.product-image{object-fit:cover;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0}.product-card:hover .product-image{transform:scale(1.1)}.product-badges{flex-direction:column;gap:.5rem;display:flex;position:absolute;top:.75rem;left:.75rem}.product-info{flex-direction:column;flex:1;padding:1.5rem;display:flex}.add-to-cart-btn{border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:.75rem;display:flex}.add-to-cart-btn:disabled{color:#ffffff4d;box-shadow:none;cursor:not-allowed;background:#ffffff1a}.mb-2{margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mt-auto{margin-top:auto}.timeline-line{z-index:0}.step-icon{z-index:1}.stat-card{transition:transform var(--transition-normal)}.stat-card:hover{transform:translateY(-5px)}.icon-box{border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;display:flex}.bg-primary-light{background-color:var(--primary-light)}.bg-danger-light{background-color:var(--danger-light)}.bg-success-light{background-color:var(--success-light)}.border-l-4{border-left-style:solid;border-left-width:4px}.border-l-success{border-left-color:var(--success)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-info{color:var(--info)}.text-warning{color:var(--warning)}.bg-bg-color{background-color:var(--bg-color)}.rounded-md{border-radius:var(--radius-md)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.py-16{padding-top:4rem;padding-bottom:4rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mx-auto{margin-left:auto;margin-right:auto}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem}:root{--primary:#3b82f6;--primary-hover:#2563eb;--primary-light:#3b82f633;--secondary:#8b5cf6;--secondary-hover:#7c3aed;--accent:#06b6d4;--success:#10b981;--success-light:#10b98133;--danger:#ef4444;--danger-light:#ef444433;--warning:#f59e0b;--warning-light:#f59e0b33;--info:#3b82f6;--info-light:#3b82f633;--bg-color:#0f172a;--bg-surface:#1e293bb3;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#33415580;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Kanit";--shadow-sm:0 1px 2px 0 #00000080;--shadow-md:0 4px 6px -1px #00000080;--shadow-lg:0 10px 15px -3px #00000080;--shadow-glow:0 0 20px #3b82f626;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:1rem;--radius-full:9999px;--transition-fast:.15s ease-in-out;--transition-normal:.3s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;overflow-x:hidden}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#3b82f626 0,#0000 50%),radial-gradient(at 100% 0,#8b5cf626 0,#0000 50%);background-attachment:fixed;line-height:1.5}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (width>=640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.text-center{text-align:center}.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.w-full{width:100%}.h-full{height:100%}.btn{border-radius:var(--radius-md);transition:var(--transition-fast);justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-weight:500;display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-outline{border:1px solid var(--border-color);color:var(--text-main);background-color:#0000}.btn-outline:hover{background-color:var(--bg-surface);border-color:var(--primary);color:var(--primary)}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{opacity:.9}.card{background-color:var(--bg-surface);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow);border:1px solid var(--border-color);transition:box-shadow var(--transition-normal), transform var(--transition-normal);overflow:hidden}.card:hover{transform:translateY(-2px);box-shadow:0 8px 30px #3b82f633}.badge{border-radius:var(--radius-full);padding:.125rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.badge-warning{background-color:var(--warning-light);color:var(--warning)}.badge-success{background-color:var(--success-light);color:var(--success)}.badge-danger{background-color:var(--danger-light);color:var(--danger)}.badge-primary{background-color:var(--primary-light);color:var(--primary)}.input{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-surface);width:100%;color:var(--text-main);transition:border-color var(--transition-fast);padding:.5rem .75rem;font-family:inherit}.input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light);outline:none}.table-container{width:100%;overflow-x:auto}.table{border-collapse:collapse;text-align:left;width:100%}.table th,.table td{border-bottom:1px solid var(--border-color);padding:1rem}.table th{background-color:var(--bg-surface);color:var(--text-muted);font-weight:600}