/* CSS dùng chung 3 trang bán hàng (trang chủ / trang sản phẩm / trang danh mục): header + footer.
   Nạp TRƯỚC css riêng của từng trang (/css/home.css, /css/style.css) để trang có thể ghi đè nhỏ.
   Sửa giao diện header/footer tại đây — mọi trang tự đồng bộ, không lệch nhau nữa. */

/* ---------- header: logo + ô tìm kiếm + giỏ hàng ---------- */
.hdr{position:sticky;top:0;z-index:45;background:#fff;padding:9px 14px;border-bottom:1px solid #eee;transition:transform .22s ease}
.hdr.hdr--hidden{transform:translateY(-105%)}
.hdr__row{display:flex;align-items:center;gap:10px}
.hdr__logo{flex:none;font-weight:800;font-size:18px;letter-spacing:-.3px;white-space:nowrap;color:#222;text-decoration:none}
.hdr__logo .elan{color:#ff6600}
.hdr .search{flex:1;display:flex;align-items:center;gap:8px;background:#f4f4f4;border-radius:20px;height:38px;padding:0 6px 0 14px;min-width:0}
.hdr .search input{flex:1;border:0;background:transparent;outline:none;font-size:14px;color:#222;min-width:0;font-family:inherit}
.hdr .search input::placeholder{color:#9a9a9a}
.hdr .search .go{flex:none;width:32px;height:32px;border-radius:50%;background:#dc2626;border:0;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.hdr .search .go:active{background:#b91c1c}
.hdr .search .go svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2}
.hdr .cart-btn{position:relative;flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#222}
.hdr .cart-btn svg{width:24px;height:24px;stroke:#222;fill:none;stroke-width:1.8}
.hdr .cart-btn .badge{position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:9px;background:#fb3620;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hdr .cart-btn .badge[hidden]{display:none!important}

/* ---------- footer: tên shop, địa chỉ, email, hotline, chính sách ---------- */
.foot{margin-top:10px;background:#f8f8f8;border-top:1px solid #eee;padding:16px 14px 20px;font-size:12.5px;color:#555;line-height:1.6}
.foot b{color:#222;font-size:13.5px}
.foot .row{display:flex;gap:6px;margin-top:3px}
.foot .row.hidden{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .hdr{transition:none}
}