/*
 * theailand-core/design/chrome.css — chrome ร่วม (header/search/ผลค้นหา) อิง tokens.css
 * import คู่กับ tokens.css · คลาส prefix x- กันชนกับสไตล์แอป
 */
.x-header {
  display: flex; align-items: center; gap: var(--space);
  padding: 12px var(--space);
  background: var(--c-navy); color: #fff;
}
.x-header__brand { font-family: var(--font-head); font-weight: 700; }
.x-header__brand b { color: var(--c-gold); }

/* ช่องค้นหา */
.x-search {
  display: flex; gap: 8px; width: 100%;
}
.x-search input {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
  font-family: var(--font-th); font-size: 1em;
}
.x-search button {
  padding: 10px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--c-gold); color: #1a1205; font-weight: 600; cursor: pointer;
}
.x-search button:hover { background: var(--c-gold-2); }

/* รายการผลค้นหา */
.x-result {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin: 6px 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); text-decoration: none; color: var(--c-text);
}
.x-result:hover { border-color: var(--c-navy-2); box-shadow: var(--shadow); }
.x-result__title { font-weight: 600; }                 /* keyword = หัวข้อ */
.x-result__sub { color: var(--c-text-muted); font-size: .9em; width: 100%; }

/* ป้ายเว็บปลายทาง "คนละเว็บ" — คนละสี ให้เด่น */
.x-result__site {
  font-size: .82em; font-weight: 700; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  color: #fff; background: var(--c-crosssite);
}
.x-result--cross { border-color: var(--c-crosssite); }

/* ปุ่มสลับ theme (dark/light) + ภาษา (TH/EN) — theme-i18n.js (DRY ทุกแอป) */
.x-controls { display: inline-flex; gap: 8px; align-items: center; }
.x-toggle {
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  border-radius: 999px; min-width: 40px; height: 36px; padding: 0 12px;
  font-family: var(--font-th); font-size: .95rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, transform .08s;
}
.x-toggle:hover { border-color: var(--c-navy-2); }
.x-toggle:active { transform: scale(.95); }
.x-toggle--lang { font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
/* บน header navy: ปุ่มต้องอ่านออกบนพื้นเข้ม */
.x-header .x-toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.x-header .x-toggle:hover { background: rgba(255,255,255,.22); }