:root{--bg: #f1f1f1;--text: #3283ce;--muted: #2739db;--line: #2b2b2b;--brand: #1e90ff;--card-bg: #fafcff;--btn-bg: #1ea5ff;--btn-color: #fff}*{box-sizing:border-box;margin:0;padding:0;font-family:Battambang,Segoe UI,sans-serif}input,button,p,div,small,a,h1,h2,h3,h4,h5,h6{font-family:Battambang,sans-serif;font-weight:400}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,sans-serif}body{background:var(--bg);color:var(--text)}.app-shell{display:flex;height:100vh}.sidebar{width:220px;background:#cbd0d4;padding:20px;flex-shrink:0;display:flex;flex-direction:column;transition:transform .3s ease}.sidebar.open{transform:translate(0)}.logo{font-size:1.8rem;margin-bottom:20px}.logo span{color:var(--brand)}.menu{display:flex;flex-direction:column;gap:10px}.menu-link{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:6px}.menu-link.active{background:var(--brand);color:#fff}.mobile-topbar{display:none;background:#0c0d13;padding:10px;align-items:center;gap:10px}.hamburger{font-size:1.5rem;background:none;border:none;color:var(--text);cursor:pointer}.logo-mobile{font-size:1.5rem;flex:1;color:var(--text)}.content{flex:1;padding:20px;overflow-y:auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.header-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.search-input{padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:#e6edf3;color:var(--text);min-width:200px}.search-input:focus{outline:none;border-color:var(--brand)}.toggle{display:flex;gap:5px}.toggle-btn{padding:6px 12px;border-radius:6px;background:var(--line);border:none;color:var(--text);cursor:pointer}.toggle-btn.active{background:var(--brand);color:#fff}.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.card{background:var(--card-bg);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s}.card:hover{transform:translateY(-4px)}.thumb{height:150px;background:#222;background-size:cover;background-position:center}.card-body{padding:10px;display:flex;flex-direction:column;gap:6px}.card-title{font-size:1rem;font-weight:700}.price{color:var(--brand);font-weight:700}.btn{padding:6px 10px;background:var(--btn-bg);color:var(--btn-color);border:none;border-radius:6px;cursor:pointer}.list{display:flex;flex-direction:column;gap:12px}.row{display:flex;justify-content:space-between;background:var(--card-bg);padding:10px;border-radius:8px;align-items:center;flex-wrap:wrap}.row-main{display:flex;gap:12px;align-items:center;flex:1 1 auto}.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.row-title{font-weight:700}.thumb.small{width:150px;height:150px;background:#222;background-size:cover;border-radius:6px}.empty,.center{color:var(--muted);text-align:center;padding:30px}@media (max-width: 768px){.app-shell{flex-direction:column}.sidebar{position:absolute;z-index:10;height:100%;transform:translate(-100%)}.mobile-topbar{display:flex}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.card .thumb{height:120px}.list .row{flex-direction:column;align-items:flex-start;gap:8px}.row-side{flex-direction:row;justify-content:space-between;width:100%}.search-input{min-width:120px;flex:1 1 100%;margin-bottom:8px}}@media (max-width: 480px){.grid{grid-template-columns:1fr}.card .thumb{height:100px}.menu-link{font-size:.9rem;padding:5px 6px}.row-main{gap:8px}.row-title{font-size:.95rem}}.row.full-image{display:flex;gap:20px;background:var(--card-bg);border-radius:10px;overflow:hidden;padding:10px;align-items:stretch}.row.full-image .thumb.full{flex:0 0 200px;height:200px;background-size:cover;background-position:center;border-radius:10px}.row.full-image .row-content{flex:1;display:flex;flex-direction:column;justify-content:space-between}.row.full-image .row-title{font-size:1.1rem;font-weight:700}.row.full-image .price{color:var(--brand);font-weight:700;margin-top:10px}@media (max-width: 768px){.row.full-image{flex-direction:column}.row.full-image .thumb.full{width:100%;height:180px}}@media (max-width: 768px){.grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.card .thumb{height:180px}}@media (max-width: 480px){.grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.card .thumb{height:150px}}.card-link{text-decoration:none;color:inherit}.card-link .card{cursor:pointer;transition:transform .2s,box-shadow .2s}.card-link .card:hover{transform:translateY(-4px);box-shadow:0 6px 18px #0000001a}.product-detail{display:flex;gap:40px;flex-wrap:wrap;padding:20px;background:#f8f8f8}.left-column{flex:1.5;min-width:300px}.main-image img{width:100%;max-height:600px;border-radius:10px;object-fit:contain}.sub-images{display:flex;gap:10px;margin-top:15px;overflow-x:auto;padding-bottom:5px}.sub-images img{width:70px;height:70px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border .2s,transform .2s}.right-column{flex:1;display:flex;flex-direction:column;gap:12px}.right-column h1{font-size:2rem}.right-column .price{font-weight:700;font-size:1.4rem;color:#e60023}.right-column .btn{background:#007bff;color:#fff;padding:12px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}.right-column .btn:hover{background:#0056b3}@media (max-width: 768px){.product-detail{flex-direction:column;align-items:center}.right-column{text-align:left}.main-image img{max-height:400px}.sub-images img{width:60px;height:60px}}.main-image{width:100%;max-width:500px;aspect-ratio:1;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f0f0f0}.main-image img{width:100%;height:100%;object-fit:contain}.sub-images{display:flex;gap:10px;margin-top:10px;overflow-x:auto}.sub-images img{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border .2s,transform .2s}.sub-images img.active{border-color:#007bff;transform:scale(1.05)}@media (max-width: 768px){.main-image{max-width:100%;height:250px}.sub-images img{width:40px;height:40px}}