/* Màu sắc (biến CSS sinh từ trang quản trị) + khung gợi ý. Luôn được nạp. */
.mspc-form { position: relative; }

.trangchu-header-search.mspc-form { background-color: var(--mspc-bg); border-color: var(--mspc-border); color: var(--mspc-text); }
.mspc-form .trangchu-header-searchdanhmuc { border-right-color: var(--mspc-divider); }
.mspc-form .trangchu-header-searchdanhmuc select { color: var(--mspc-text); background: transparent var(--mspc-arrow) no-repeat right center; }
.mspc-form .trangchu-header-searchdanhmuc select option { color: #26221e; background: #fff; }
.mspc-form .mspc-icon { color: var(--mspc-text); }
.mspc-form .trangchu-header-searchinput input { color: var(--mspc-text); }
.mspc-form .trangchu-header-searchinput input::placeholder { color: var(--mspc-placeholder); opacity: 1; }
.mspc-form .trangchu-header-searchbtn { background: var(--mspc-btn-bg); color: var(--mspc-btn-text); transition: background-color .15s; }
.mspc-form .trangchu-header-searchbtn:hover,
.mspc-form .trangchu-header-searchbtn:focus-visible { background: var(--mspc-btn-hover); color: var(--mspc-btn-text); }

/* Khung gợi ý */
.mspc-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 440px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--mspc-divider, #e6e0d6);
  border-radius: var(--mspc-radius, 4px);
  box-shadow: 0 8px 24px rgba(34, 30, 26, .12);
  text-align: left;
}
.mspc-suggest[hidden] { display: none; }
.mspc-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: #26221e;
  text-decoration: none;
  border-bottom: 1px solid #f2ede5;
}
.mspc-suggest-item:hover,
.mspc-suggest-item.is-active { background: var(--mspc-hover-bg, #faf6ef); color: #26221e; }
.mspc-suggest-thumb { flex: none; width: 48px; height: 48px; border-radius: 3px; overflow: hidden; background: #f4f1ec; }
.mspc-suggest-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mspc-suggest-info { flex: 1; min-width: 0; }
.mspc-suggest-name { display: block; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mspc-suggest-name mark { background: none; color: var(--mspc-accent, #a8823c); padding: 0; }
.mspc-suggest-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 13px; line-height: 18px; color: #6b645c; }
.mspc-suggest-meta .amount { color: var(--mspc-accent, #a8823c); font-weight: 600; }
.mspc-suggest-meta del .amount { color: #9b948b; font-weight: 400; }
.mspc-suggest-msg { padding: 14px 12px; font-size: 14px; color: #6b645c; }
.mspc-suggest-all {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #221e1a;
  background: var(--mspc-hover-bg, #f7f1e6);
  text-decoration: none;
}
.mspc-suggest-all:hover,
.mspc-suggest-all.is-active { background: var(--mspc-btn-bg, #d6bd8c); color: var(--mspc-btn-text, #221e1a); }
.mspc-form.is-loading .mspc-icon { animation: mspc-pulse 1s infinite; }
@keyframes mspc-pulse { 50% { opacity: .35; } }