/* ====== FIX LOGO + TEXT TRONG TOPBAR ====== */

/* Hàng topbar canh giữa theo trục dọc, không bị xuống hàng */
.topbar .topbar-inner{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap: nowrap;             /* ngăn chữ cạnh logo bị rớt xuống */
}

/* Logo + 2 dòng chữ cạnh logo */
.topbar .logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  white-space: nowrap;            /* giữ 2 dòng chữ nằm gọn, không wrap lung tung */
}

/* Ô vuông DNT */
.topbar .logo .logo-mark{
  width:40px; height:40px;
  flex: 0 0 40px;                 /* giữ kích thước cố định */
  border-radius:10px;
  background:#fff;
  display:grid; place-items:center;
  color:#2b6ef2; font-weight:900;
  box-shadow: var(--shadow);
}

/* Khối chữ cạnh logo */
.topbar .logo .brand-lines{
  display:flex;
  flex-direction: column;
  justify-content: center;        /* canh đúng giữa theo chiều dọc */
  line-height: 1.1;
  margin: 0;
}

/* Ghi đè mọi margin inline cũ (tránh margin-top:-2px làm lệch) */
.topbar .logo .brand-lines > *{
  margin:0 !important;
}

/* Nếu vẫn đang dùng div có inline-style cũ thì ép bỏ margin-top */
.topbar .logo div[style*="margin-top"]{ margin-top:0 !important; }

/* Ô search giãn ra đúng, tránh đẩy logo */
.topbar .search{
  flex:1;
  min-width: 360px;               /* để layout không ép search quá nhỏ */
}
@media (max-width: 960px){
  .topbar .search{ min-width: 0; }
}

/* Navbar: underline mục đang chọn (cho chắc) */
.nav .nav-inner{ display:flex; align-items:center; gap:24px; height:50px; }
.nav .nav-link{ font-weight:600; color:#0b2a6a; opacity:.9; padding-bottom:6px; }
.nav .nav-link.active{ color:var(--brand); border-bottom:2px solid var(--brand); }

#grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; align-items: stretch; }
#grid .card{ display:flex; flex-direction:column; height:100%; border:1px solid #e5eaf3; border-radius:16px; overflow:hidden; background:#fff; }
#grid .thumb{ aspect-ratio:1/1; background:#f2f6ff; display:grid; place-items:center; }
#grid .thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
#grid .card-body{ display:flex; flex-direction:column; gap:8px; padding:12px; }
#grid .name{ font-size:14px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
#grid .price{ font-weight:800; color:#0652ff; }
#grid .unit{ font-size:12px; color:var(--muted); }
#grid .exp{ font-size:12px; color:var(--muted); }
#grid .add-to-cart{ margin-top:auto; }

#grid .card{ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; cursor: pointer; user-select: none; }
#grid .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: #dbe4f2; }
#grid .card:focus{ outline: 2px solid var(--ring); outline-offset: 2px; }
#grid .price .unit{ font-weight:600; font-size:12px; color: var(--muted); margin-left:4px; }
#grid .sub{ font-size:12px; color: var(--muted); display:flex; align-items:center; gap:6px; }
#grid .tag{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; border:1px solid #dbe3f7; background:#f1f5ff; color:#0b2a6a; font-weight:700; font-size:12px; }