/* ช่องค้นหาเดียวกันใน Hero และหัวเว็บที่ติดด้านบน */
html { scroll-padding-top: var(--kok-scroll-offset, 96px); }
.header-search[hidden] { display: none; }
.header-search {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 36px 12px;
}
.header-search > label { color: var(--dim); font-size: 13px; white-space: nowrap; }
.header-search-field {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid #6b6261;
  border-radius: 30px;
  background: #08090bea;
}
.header-search-field input {
  min-width: 0;
  width: 100%;
  flex: 1;
  min-height: 44px;
  padding: 8px 15px;
  border: 0;
  background: transparent;
  color: #f4f2ee;
  font: 400 16px var(--font-body);
  outline: none;
  border-radius: 24px;
}
.header-search-field input::placeholder { color: #aaa6a4; }
.header-search-field:focus-within { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.header-search-field button {
  min-height: 44px;
  padding: 8px 24px;
  border: 0;
  border-radius: 24px;
  background: var(--brand-yellow);
  color: #131309;
  font: 600 14px var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.header-search-field button span { margin-left: 12px; }
html[data-theme="light"] .header-search-field { background: #fff; border-color: #989391; }
html[data-theme="light"] .header-search-field input { color: #202024; }
html[data-theme="light"] .header-search-field input::placeholder { color: #68636a; }
@media(max-width:980px) { .header-search { padding-left: 20px; padding-right: 20px; } }
@media(max-width:760px) {
  .header-search { padding: 0 16px 10px; gap: 0; }
  .header-search > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .header-search-field input { padding: 8px 10px; }
  .header-search-field button { padding: 8px 18px; }
  .header-search-field button span { display: none; }
}