/* ============================================================
   NEXIM — style dùng chung cho trang danh mục (cha & con)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333; background:#fff; }
a { color:#005f00; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== Header ===== */
.topbar { background:#fff; border-bottom:1px solid #ddd; }
.topbar-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:10px 16px; }
.logo { background:#367c2b; color:#fff; font-weight:bold; font-size:20px; padding:8px 14px; letter-spacing:.5px; white-space:nowrap; }
.logo span { font-weight:normal; font-size:11px; display:block; letter-spacing:2px; }
.search-wrap { flex:1; display:flex; max-width:640px; }
.search-wrap input { flex:1; border:1px solid #999; border-right:none; padding:8px 10px; font-size:14px; outline:none; }
.search-wrap input:focus { border-color:#367c2b; }
.search-wrap button { background:#367c2b; color:#fff; border:none; padding:8px 16px; cursor:pointer; font-size:14px; }
.search-wrap button:hover { background:#2b6222; }
.top-links { display:flex; gap:2px; font-size:13px; align-items:center; }
.top-links a { color:#333; padding:8px 11px; border-radius:3px; white-space:nowrap; }
.top-links a:hover { background:#f0f6ee; color:#2b6222; text-decoration:none; }
.top-links a.cart { background:#367c2b; color:#fff; font-weight:bold; padding:8px 14px; margin-left:8px; }
.top-links a.cart:hover { background:#2b6222; }
.top-links a.cart .cart-badge { background:#fff; color:#c00; }
.cart-badge { background:#c00; color:#fff; border-radius:9px; font-size:10px; padding:1px 6px; margin-left:4px; }

/* ===== Khung trang ===== */
.breadcrumb { max-width:1280px; margin:0 auto; padding:10px 16px; font-size:12px; color:#666; }
.layout { max-width:1280px; margin:0 auto; display:flex; align-items:flex-start; padding:0 16px 60px; gap:24px; }
.container { max-width:1280px; margin:0 auto; padding:0 16px 60px; }
.page-title { font-size:26px; font-weight:normal; color:#222; margin:6px 0 4px; }
.result-count { color:#666; font-size:13px; margin-bottom:14px; }
.intro { background:#f7f7f5; border:1px solid #e3e3de; padding:14px 16px; line-height:1.55; margin-bottom:28px; max-width:860px; }
.intro b { color:#222; }
.warn { background:#fff8e6; border:1px solid #e8d9a8; border-left:3px solid #d4a017; padding:12px 16px; line-height:1.55; margin:-14px 0 28px; max-width:860px; font-size:12px; color:#6b5b1e; }

/* ===== Sidebar bộ lọc ===== */
.sidebar { width:230px; flex-shrink:0; position:sticky; top:0; max-height:100vh; overflow-y:auto; padding-bottom:40px; }
.filter-group { border-top:1px solid #ddd; padding:12px 0; }
.filter-group:first-child { border-top:none; }
.filter-group h4 { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#555; margin-bottom:8px; }
.filter-options { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid #bbb; background:#fff; padding:5px 10px; font-size:12px; cursor:pointer; border-radius:2px; user-select:none; }
.chip:hover { border-color:#367c2b; color:#367c2b; }
.chip.active { background:#367c2b; border-color:#367c2b; color:#fff; }
.filter-list label { display:block; padding:4px 0; font-size:13px; cursor:pointer; }
.filter-list input { margin-right:7px; vertical-align:middle; }
.clear-filters { display:none; margin-top:14px; width:100%; padding:7px 0; background:#fff; border:1px solid #c00; color:#c00; font-size:12px; cursor:pointer; }
.clear-filters:hover { background:#fdf2f2; }
.clear-filters.visible { display:block; }
.other-cat a { display:block; padding:4px 0; font-size:12px; }

/* ===== Khu sản phẩm ===== */
.main { flex:1; min-width:0; }
.prod-section { margin-bottom:44px; }
.prod-section.hidden { display:none; }
.section-head { border-bottom:2px solid #367c2b; padding-bottom:6px; margin-bottom:14px; }
.section-head h2 { font-size:19px; font-weight:normal; color:#222; }
.section-head .sub { font-size:12px; color:#666; margin-top:3px; }
.section-body { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.drawing-box { width:230px; flex-shrink:0; }
.drawing-box svg { border:1px solid #e0e0e0; background:#fff; width:100%; }
.spec-mini { width:100%; border-collapse:collapse; margin-top:8px; font-size:12px; }
.spec-mini td { border:1px solid #e0e0e0; padding:4px 8px; }
.spec-mini td:first-child { background:#f7f7f5; color:#555; width:55%; }
table.prices { border-collapse:collapse; width:100%; }
table.prices th { background:#eef3ec; border:1px solid #d5ddd2; padding:6px 10px; font-size:12px; text-align:left; color:#333; white-space:nowrap; }
table.prices td { border:1px solid #e0e0e0; padding:5px 10px; font-size:13px; white-space:nowrap; }
table.prices tr:hover td { background:#f4f8f2; }
table.prices tr.hidden { display:none; }
.partnum { color:#005f00; font-weight:bold; }
.price { text-align:right; font-variant-numeric:tabular-nums; }
.add-btn { background:#fff; border:1px solid #367c2b; color:#367c2b; padding:3px 10px; font-size:11px; cursor:pointer; border-radius:2px; }
.add-btn:hover { background:#367c2b; color:#fff; }
.tables-col { flex:1; min-width:420px; }
.no-results { display:none; padding:40px 0; color:#666; font-size:15px; }
.no-results.visible { display:block; }

/* ===== Lưới ô danh mục (trang cha) ===== */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; max-width:1000px; }
.tile { border:1px solid #e0e0e0; background:#fff; padding:16px 12px 14px; text-align:center; display:block; color:#333; }
.tile:hover { border-color:#367c2b; box-shadow:0 2px 8px rgba(54,124,43,.15); text-decoration:none; }
.tile svg { width:100%; height:92px; margin-bottom:8px; }
.tile .name { color:#005f00; font-weight:bold; font-size:13px; line-height:1.3; }
.tile:hover .name { text-decoration:underline; }
.tile .std { font-size:11px; color:#888; margin-top:3px; }

/* ===== Giới thiệu (trang cha) ===== */
.about { margin-top:44px; max-width:900px; }
.about h2 { font-size:19px; font-weight:normal; color:#222; border-bottom:2px solid #367c2b; padding-bottom:6px; margin-bottom:14px; }
.about h3 { font-size:14px; color:#222; margin:20px 0 6px; }
.about p { line-height:1.65; margin-bottom:10px; color:#444; }
.about table { border-collapse:collapse; margin:12px 0; width:100%; }
.about th { background:#eef3ec; border:1px solid #d5ddd2; padding:7px 12px; font-size:12px; text-align:left; }
.about td { border:1px solid #e0e0e0; padding:6px 12px; font-size:13px; }

/* ===== Footer, toast, giỏ hàng ===== */
footer { border-top:1px solid #ddd; background:#f7f7f5; margin-top:40px; }
.footer-inner { max-width:1280px; margin:0 auto; padding:18px 16px; font-size:11px; color:#777; }
.footer-inner a { margin-right:16px; }
.toast { position:fixed; bottom:24px; right:24px; background:#367c2b; color:#fff; padding:10px 18px; border-radius:3px; font-size:13px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:60; }
.toast.show { opacity:1; }
.cart-panel { display:none; position:fixed; top:70px; right:16px; width:300px; background:#fff; border:1px solid #ccc; box-shadow:0 3px 12px rgba(0,0,0,.15); z-index:50; font-size:12px; }
.cart-panel.visible { display:block; }
.cart-panel h5 { background:#367c2b; color:#fff; font-size:13px; padding:8px 12px; font-weight:bold; }
.cart-lines { max-height:220px; overflow-y:auto; }
.cart-line { display:flex; justify-content:space-between; gap:8px; padding:6px 12px; border-bottom:1px solid #eee; }
.cart-line .p { color:#005f00; font-weight:bold; }
.cart-total { display:flex; justify-content:space-between; padding:10px 12px; font-size:13px; background:#f7f7f5; border-top:1px solid #ddd; }
.cart-total b { color:#c00; font-size:15px; }
.cart-vat-note { padding:0 12px 10px; color:#888; font-size:11px; background:#f7f7f5; }