/* HD Category Filter — panel filter category (accordion + thumb)
   Mọi kích thước tính theo --hdcf-s. Muốn to/nhỏ hơn chỉ cần đổi 1 số này.
   1 = kích thước gốc, .75 = nhỏ hơn 25% (đang dùng). */
.hdcf{
  --hdcf-s:.75;

  /* ==== Đổi màu nhấn ở đây ==== */
  --hdcf-accent:#e11b22;
  --hdcf-accent-soft:rgba(225,27,34,.07);
  --hdcf-line:#e7e9ee;
  --hdcf-ink:#1f2a37;
  --hdcf-link:#33608f;
  --hdcf-muted:#8a94a6;

  background:#fff;
  border:1px solid var(--hdcf-line);
  border-radius:calc(16px * var(--hdcf-s));
  padding:calc(14px * var(--hdcf-s)) calc(14px * var(--hdcf-s)) calc(4px * var(--hdcf-s));
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  font-size:calc(14px * var(--hdcf-s));
  line-height:1.35;
  color:var(--hdcf-ink);
}
.hdcf *,.hdcf *::before,.hdcf *::after{box-sizing:border-box}
/* reset list — ghi đè padding/margin mà theme áp cho ul trong widget */
.hdcf ul,.hdcf li{margin:0;padding:0;list-style:none;border:0;background:none}

/* ---- header ---- */
.hdcf__head{display:flex;align-items:center;gap:calc(10px * var(--hdcf-s));padding:0 0 calc(10px * var(--hdcf-s))}
.hdcf__head-ic{
  flex:0 0 auto;width:calc(34px * var(--hdcf-s));height:calc(34px * var(--hdcf-s));
  border-radius:calc(10px * var(--hdcf-s));
  display:flex;align-items:center;justify-content:center;
  background:var(--hdcf-accent-soft);color:var(--hdcf-accent);
}
.hdcf__head-ic svg{width:calc(17px * var(--hdcf-s));height:calc(17px * var(--hdcf-s))}
.hdcf__title{font-size:calc(16px * var(--hdcf-s));font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.2}
.hdcf__reset{margin-left:auto;font-size:calc(12px * var(--hdcf-s));font-weight:600;color:var(--hdcf-accent);text-decoration:none}
.hdcf__reset:hover{text-decoration:underline}

/* ---- section = category cha ---- */
.hdcf__sec{border-top:1px solid var(--hdcf-line)}
.hdcf__sec-h{
  display:flex;align-items:center;gap:calc(8px * var(--hdcf-s));width:100%;
  margin:0;padding:calc(12px * var(--hdcf-s)) 0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:calc(12.5px * var(--hdcf-s));line-height:1.2;
  letter-spacing:.03em;text-transform:uppercase;color:var(--hdcf-ink);text-align:left;
}
.hdcf__sec-h:hover{color:var(--hdcf-accent)}
.hdcf__sec-h:focus-visible{outline:2px solid var(--hdcf-accent);outline-offset:2px;border-radius:6px}
.hdcf__badge{
  margin-left:auto;flex:0 0 auto;
  font-weight:700;font-size:calc(11px * var(--hdcf-s));line-height:1;letter-spacing:0;
  color:var(--hdcf-accent);background:var(--hdcf-accent-soft);
  border-radius:20px;padding:calc(4px * var(--hdcf-s)) calc(7px * var(--hdcf-s));
}
.hdcf__badge[hidden]{display:none}
.hdcf__caret{flex:0 0 auto;margin-left:auto;width:calc(14px * var(--hdcf-s));height:calc(14px * var(--hdcf-s));color:#b6bdc9;transition:transform .18s ease}
.hdcf__badge+.hdcf__caret{margin-left:0}
.hdcf__sec[data-hdcf-open="1"] .hdcf__caret{transform:rotate(180deg)}
.hdcf__sec-b{display:none;padding:0 0 calc(12px * var(--hdcf-s))}
.hdcf__sec[data-hdcf-open="1"] .hdcf__sec-b{display:block}

/* ---- ô tìm kiếm ---- */
.hdcf__search{
  display:flex;align-items:center;gap:calc(8px * var(--hdcf-s));
  height:calc(38px * var(--hdcf-s));padding:0 calc(10px * var(--hdcf-s));
  margin:0 0 calc(8px * var(--hdcf-s));
  border:1px solid var(--hdcf-line);border-radius:calc(10px * var(--hdcf-s));background:#fafbfc;
}
.hdcf__search:focus-within{border-color:var(--hdcf-accent);background:#fff}
.hdcf__search svg{width:calc(15px * var(--hdcf-s));height:calc(15px * var(--hdcf-s));color:var(--hdcf-muted);flex:0 0 auto}
.hdcf__search input[type="search"],.hdcf__search input[type="text"]{
  flex:1 1 auto;width:100%!important;height:100%!important;margin:0!important;padding:0!important;
  border:0!important;background:none!important;box-shadow:none!important;outline:0!important;
  font-family:inherit!important;font-size:calc(13px * var(--hdcf-s))!important;
  color:var(--hdcf-ink)!important;-webkit-appearance:none;appearance:none;
}
.hdcf__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hdcf__x{border:0;background:none;padding:0;cursor:pointer;color:var(--hdcf-muted);display:none;line-height:0}
.hdcf__search.is-filled .hdcf__x{display:block}

/* ---- list = category con ---- */
.hdcf__list{
  max-height:min(calc(360px * var(--hdcf-s)),58vh);
  overflow-y:auto;overscroll-behavior:contain;
  padding:1px!important;
  scrollbar-width:thin;scrollbar-color:var(--hdcf-accent) #f1f2f5;
}
.hdcf__list::-webkit-scrollbar{width:5px}
.hdcf__list::-webkit-scrollbar-track{background:#f1f2f5;border-radius:6px}
.hdcf__list::-webkit-scrollbar-thumb{background:var(--hdcf-accent);border-radius:6px}
.hdcf__list>li{margin:0 0 calc(6px * var(--hdcf-s))}
.hdcf__list>li:last-child{margin-bottom:0}
.hdcf__list li[hidden]{display:none}
.hdcf__row{
  display:flex;align-items:center;gap:calc(10px * var(--hdcf-s));
  padding:calc(6px * var(--hdcf-s)) calc(8px * var(--hdcf-s));
  border:1px solid var(--hdcf-line);border-radius:calc(12px * var(--hdcf-s));background:#fff;
  text-decoration:none!important;color:inherit;transition:border-color .15s,background .15s;
}
.hdcf__row:hover{border-color:var(--hdcf-accent);background:var(--hdcf-accent-soft)}
.hdcf__item.is-active>.hdcf__row{border-color:var(--hdcf-accent);background:var(--hdcf-accent-soft)}
.hdcf__item.is-active .hdcf__name{color:var(--hdcf-accent)}

/* thumb: ảnh đã upload, không có thì dùng chữ cái đầu */
.hdcf__thumb{
  flex:0 0 auto;width:calc(34px * var(--hdcf-s));height:calc(34px * var(--hdcf-s));
  border-radius:calc(9px * var(--hdcf-s));overflow:hidden;
  border:1px solid var(--hdcf-line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hdcf__thumb img{width:100%;height:100%;object-fit:contain;padding:calc(2px * var(--hdcf-s));display:block;border-radius:0;margin:0;max-width:none}
.hdcf__thumb--letter{
  font-weight:700;font-size:calc(15px * var(--hdcf-s));line-height:1;letter-spacing:0;
  color:hsl(var(--hdcf-h,210) 52% 38%);
  background:hsl(var(--hdcf-h,210) 62% 96%);
  border-color:hsl(var(--hdcf-h,210) 40% 88%);
}
.hdcf__thumb--all{color:var(--hdcf-muted);background:#f6f7f9}
.hdcf__thumb--all svg{width:calc(16px * var(--hdcf-s));height:calc(16px * var(--hdcf-s))}
.hdcf__item.is-active .hdcf__thumb--all{color:var(--hdcf-accent);background:#fff;border-color:var(--hdcf-accent)}

.hdcf__name{
  min-width:0;flex:1 1 auto;
  font-size:calc(13.5px * var(--hdcf-s));font-weight:600;color:var(--hdcf-link);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdcf__go{flex:0 0 auto;width:calc(14px * var(--hdcf-s));height:calc(14px * var(--hdcf-s));color:#c8ced8}
.hdcf__row:hover .hdcf__go,.hdcf__item.is-active .hdcf__go{color:var(--hdcf-accent)}

/* cấp 3 (nếu có) */
.hdcf__kids{padding:0 0 calc(4px * var(--hdcf-s)) calc(44px * var(--hdcf-s))!important}
.hdcf__kids a{display:block;padding:calc(4px * var(--hdcf-s)) 0;font-size:calc(12.5px * var(--hdcf-s));color:var(--hdcf-link);text-decoration:none}
.hdcf__kids a:hover{color:var(--hdcf-accent)}
.hdcf__kids .is-active>a{color:var(--hdcf-accent);font-weight:600}

.hdcf__none{
  display:none;margin:0 0 calc(6px * var(--hdcf-s));padding:calc(10px * var(--hdcf-s));
  border:1px dashed var(--hdcf-line);border-radius:calc(10px * var(--hdcf-s));
  font-size:calc(12.5px * var(--hdcf-s));color:var(--hdcf-muted);text-align:center;
}
.hdcf__sec.is-empty .hdcf__none{display:block}
.hdcf__sec.is-empty .hdcf__list{display:none}

/* ---- mobile / trong drawer Filter của Flatsome ---- */
@media (max-width:849px){
  .hdcf{border:0;border-radius:0;padding:0;box-shadow:none}
  .hdcf__list{max-height:min(calc(420px * var(--hdcf-s)),52vh)}
  .hdcf__sec:first-of-type{border-top:0}
}
.off-canvas .hdcf,.mfp-content .hdcf{border:0;padding:0;box-shadow:none}