:root{--color-bg:#F6F7F9;--color-surface:#FFFFFF;--color-primary:#0B5FFF;--color-primary-dark:#0847C2;--color-text:#111827;--color-text-muted:#6B7280;--color-border:#E5E7EB;--color-success:#15803D;--color-danger:#DC2626;--color-badge-ai:#7C3AED}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--color-bg);color:var(--color-text)}
a{color:var(--color-primary);text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:0 16px}
header.site{position:sticky;top:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:10}
.header-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0}
.logo{font-weight:700;font-size:18px;color:var(--color-text);white-space:nowrap}
.search{flex:1;min-width:180px}.search input{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:8px}
nav.main{display:flex;gap:16px;flex-wrap:wrap}nav.main a{color:var(--color-text)}nav.main a:hover{color:var(--color-primary)}
#menu-btn{display:none;background:var(--color-primary);color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
@media(max-width:1023px){#menu-btn{display:block}nav.main{display:none;width:100%;flex-direction:column}nav.main.open{display:flex}.search{order:3;width:100%}}
.hero{display:grid;gap:24px;align-items:center;padding:32px 0}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr}}
.hero h1{font-size:22px;margin:0 0 12px}@media(min-width:1024px){.hero h1{font-size:28px}}
.hero-img{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;min-height:220px;display:flex;align-items:center;justify-content:center;font-size:64px}
.btn{display:inline-block;background:var(--color-primary);color:#fff;padding:10px 18px;border-radius:8px;border:0;cursor:pointer}.btn:hover{background:var(--color-primary-dark)}.btn.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn:disabled{opacity:.5;cursor:not-allowed}
h2{font-size:22px}@media(min-width:1024px){h2{font-size:28px}}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
.cat-tile{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:20px;text-align:center;color:var(--color-text)}
.cat-tile .icon{font-size:36px}.cat-tile .count{font-size:12px;color:var(--color-text-muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:1024px){.grid.home{grid-template-columns:repeat(4,1fr)}.grid.catalog{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card-img{position:relative;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:56px}
.badges{position:absolute;top:8px;left:8px;display:flex;gap:6px}.badge{font-size:12px;color:#fff;padding:2px 8px;border-radius:999px}.badge.ai{background:var(--color-badge-ai)}.badge.new{background:var(--color-primary)}
.card-body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-name{font-size:16px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-spec{font-size:14px;color:var(--color-text-muted)}
.price{font-size:18px;font-weight:700}.old{font-size:14px;color:var(--color-text-muted);text-decoration:line-through;margin-left:8px}
.in{font-size:14px;color:var(--color-success)}.out{font-size:14px;color:var(--color-danger)}
.why{display:grid;gap:16px}@media(min-width:1024px){.why{grid-template-columns:repeat(3,1fr)}}
.why div{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:16px}
footer{margin-top:32px;border-top:1px solid var(--color-border);background:var(--color-surface);padding:24px 0;font-size:14px;color:var(--color-text-muted)}
/* Catalog layout */
.catalog-layout{display:grid;gap:16px}@media(min-width:1024px){.catalog-layout{grid-template-columns:240px 1fr}}
.filters{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:16px}
.filters h3{font-size:14px;margin:16px 0 8px}.filters h3:first-child{margin-top:0}
.filters label{display:block;font-size:14px;margin:4px 0}
#filter-btn{display:none;margin-bottom:12px}@media(max-width:1023px){#filter-btn{display:inline-block}.filters{display:none}.filters.open{display:block}}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.toolbar select{padding:8px;border:1px solid var(--color-border);border-radius:8px}
.empty{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:24px;text-align:center}
.loadmore{text-align:center;padding:20px 0}.all-done{text-align:center;color:var(--color-text-muted);padding:12px 0}
.skeleton{height:200px;background:var(--color-border);border-radius:12px}

/* Trang chi tiet (TEC-32) */
.breadcrumb{font-size:14px;color:var(--color-text-muted);padding:16px 0 0}
.detail-layout{display:grid;gap:24px;padding:24px 0}
@media(min-width:1024px){.detail-layout{grid-template-columns:1fr 1fr}}
.detail-img{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;min-height:320px;display:flex;align-items:center;justify-content:center;font-size:96px}
.spec-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.spec-table caption{text-align:left;font-weight:700;padding:8px 0}
.spec-table th,.spec-table td{border:1px solid var(--color-border);padding:8px 12px;text-align:left}
.spec-table th{background:var(--color-bg);width:40%}