/* ==== Brand chips (dải dưới tiêu đề) ==== */
.xhd-brand-filter{ margin:8px 0 16px; }
.xhd-brand-filter__wrap{
  display:flex; flex-wrap:wrap; gap:10px;
}

/* Chip nhỏ gọn */
.xhd-brand-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width: 92px; height: 36px;              /* nhỏ hơn bản trước */
  background:#fff; border:1px solid #e9edf3; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  text-decoration:none; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.xhd-brand-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.xhd-brand-chip.is-active{
  border-color:#3b82f6;
  box-shadow:0 8px 20px rgba(59,130,246,.16);
}

/* Logo nhỏ */
.xhd-brand-chip__img img{
  display:block; margin:auto;
  max-width:80px; max-height:22px; width:auto; height:auto;
}

/* Nút reset × */
.xhd-brand-chip.xhd-brand-reset{
  width:36px; height:36px; font-size:18px; font-weight:700; color:#999;
  box-shadow:none;
}
.xhd-brand-chip.xhd-brand-reset:hover{
  color:#e11d48; border-color:#e11d48; transform:none;
}

/* Mobile: 2 cột gọn */
@media (max-width:600px){
  .xhd-brand-filter__wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .xhd-brand-chip{ width:100%; }
}

/* ==== Radio (sidebar) ==== */
.xhd-brand-radios__list{
  display:flex; flex-wrap:wrap; gap:8px;
}
.xhd-brand-radio{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
}
.xhd-brand-radio input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.xhd-brand-radio__img,
.xhd-brand-radio__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width: 88px; height: 34px;
  background:#fff; border:1px solid #e9edf3; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.xhd-brand-radio__img img{
  display:block; max-width:78px; max-height:20px; width:auto; height:auto;
}

/* Radio reset × */
.xhd-brand-radio__chip.xhd-brand-reset{
  width:34px; height:34px; font-size:16px; font-weight:700; color:#999;
}

/* Active state */
.xhd-brand-radio.is-active .xhd-brand-radio__img,
.xhd-brand-radio.is-active .xhd-brand-radio__chip{
  border-color:#3b82f6; box-shadow:0 6px 16px rgba(59,130,246,.16);
}

/* Sidebar hẹp: 3 cột */
@media (max-width:480px){
  .xhd-brand-radios__list{ display:grid; grid-template-columns:repeat(2,1fr); }
  .xhd-brand-radio__img, .xhd-brand-radio__chip{ width:100%; }
}


/* Radio list chuẩn */
.xhd-brand-radiolist { margin:8px 0; }
.xhd-brand-radiolist__ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.xhd-brand-radiolist.is-horizontal .xhd-brand-radiolist__ul { flex-direction:row; flex-wrap:wrap; gap:12px 18px; }
.xhd-brand-radiolist__item { display:flex; align-items:center; gap:8px; cursor:pointer; }
.xhd-brand-radiolist__item input[type="radio"] { accent-color:#3b82f6; }
.xhd-brand-radiolist__logo { width:18px; height:18px; object-fit:contain; display:inline-block; }
.xhd-brand-radiolist__label { font-size:14px; color:#111; }
/* Pill “đang chọn” + link reset */
.xhd-selected-pill{ margin-bottom:6px; }
.xhd-selected-pill__label{
  display:inline-flex; align-items:center; gap:8px;
  background:#3b82f6; color:#fff; padding:6px 10px; border-radius:8px;
  text-decoration:none; font-size:13px;
}
.xhd-selected-pill__label:hover{ opacity:.9; }
.xhd-selected-pill__x{ background:#1e5bd6; border-radius:6px; padding:0 6px; line-height:18px; display:inline-block; }
.xhd-selected-hint{ font-size:13px; color:#666; margin:6px 0 4px; }
.xhd-selected-hint a{ color:#1d4ed8; text-decoration:underline; }


/* Khung của radiolist */
/* Bố cục: radio | CHIP (logo) | tên */
.xhd-brand-radiolist__item{
  display:grid;
  grid-template-columns: 18px 84px 1fr; /* radio | chip | tên */
  align-items:center;
  column-gap:10px;
}

/* Khung chip của logo */
.xhd-brand-radiolist__logo-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  width:84px; height:42px;        /* kích thước hộp chip */
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(17,24,39,.06);
  padding:0 8px;                  /* đệm trong chip */
}

/* Logo bên trong chip */
.xhd-brand-radiolist__logo{
  width:auto; height:26px;        /* logo to hơn chút */
  max-width:100%;
  object-fit:contain; display:block;
}

/* Khi chọn (input:checked) thì chip nổi bật */
.xhd-brand-radiolist__item input[type="radio"]:checked + .xhd-brand-radiolist__logo-wrap{
  border-color:#3b82f6;
  box-shadow:0 8px 20px rgba(59,130,246,.16);
}

/* Tên thương hiệu */
.xhd-brand-radiolist__label{ font-size:14px; color:#111; }


/* Canh thẳng hàng radio | logo | tên */
.xhd-brand-radiolist__ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.xhd-brand-radiolist__item{
  display:grid;
  grid-template-columns: 18px 56px 1fr; /* radio | logo | tên */
  align-items:center;
  column-gap:10px;
}
.xhd-brand-radiolist__item input[type="radio"]{ margin:0; accent-color:#3b82f6; }

/* Logo to & đẹp hơn */
.xhd-brand-radiolist__logo{
  width:48px; height:28px;        /* bạn có thể đổi 56x32 nếu muốn lớn hơn */
  object-fit:contain; display:block;
}
.xhd-brand-radiolist__label{ font-size:14px; color:#111; }


span.xhd-brand-radiolist__label {
    display: none;
}