:root{--bg:#0b1220;--surface:#121a2a;--muted:#93a4c8;--border:#1b2844;--primary:#3b82f6;--accent:#22d3ee;--danger:#ef4444}
*{box-sizing:border-box}
body{margin:0;font-family:'Bounhome','Noto Sans Lao','Phetsarath OT',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#e6eeff;background:#0a1020}
.container{max-width:1200px;margin:0 auto;padding:16px}
.header{position:sticky;top:0;background:rgba(10,16,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:40px;height:40px;border-radius:999px;border:1px solid var(--border)}
.search{flex:1;display:flex;gap:8px}
.input{flex:1;background:#0f1a33;border:1px solid var(--border);border-radius:10px;color:#dbe8ff;padding:10px}
.btn{background:#3b82f6;border:0;border-radius:10px;color:#03122a;font-weight:800;padding:10px 14px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:#abc8ff}
.btn.alt{background:#1b2a4d;color:#d5e4ff;border:1px solid var(--border)}
.btn.danger{background:#ef4444;color:#210}
.nav{display:flex;gap:8px}
.grid{display:grid;grid-template-columns:260px 1fr;gap:16px}
.sidebar{background:#121a2a;border:1px solid var(--border);border-radius:14px;padding:14px}
.card{background:#121a2a;border:1px solid var(--border);border-radius:14px;padding:14px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.thumb{width:100%;height:170px;object-fit:cover;border-radius:12px;border:1px solid #22345a;background:#0b1426}
.price{font-weight:800}
.badge{background:#162447;border:1px solid #233966;color:#9bc2ff;border-radius:999px;padding:3px 8px;font-size:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
footer{color:#8aa0c8;text-align:center;padding:30px 10px}
.modal{position:fixed;inset:0;background:rgba(7,12,22,.7);display:none;place-items:center;z-index:20}
.modal.active{display:grid}
.sheet{width:min(820px,94vw);max-height:90vh;overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.right{text-align:right}
.pill{display:inline-block;background:#0f1d3a;border:1px solid #274074;color:#a8c7ff;padding:4px 10px;border-radius:999px;font-size:12px}
.notice{border-left:4px solid #22d3ee;background:#0d1a33;padding:10px;border-radius:10px}
.category{display:flex;flex-wrap:wrap;gap:8px}
.category .btn{background:#0f1a33;border:1px solid var(--border);color:#b8d0ff}
.google{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;border-radius:10px;padding:10px 14px;border:0;cursor:pointer}
.google img{width:18px;height:18px}