/* OBranding — header code tay. Token đồng bộ với footer (Manrope, #272727, #FF4A0F, #E1E1E1). */
.obd-header{
  --obd-text:#272727;
  --obd-brand:#FF4A0F;
  --obd-border:#E1E1E1;
  --obd-muted:#9A9A9A;
  position:relative;
  width:100%;
  padding:0 10px;              /* khop outer container cua cac section ben duoi */
  font-family:inherit;
}
.obd-header *,
.obd-header *::before,
.obd-header *::after{ box-sizing:border-box; }

/* Theme co rule `button:hover{background:#c36}` — chi chan dung nhung nut icon,
   KHONG reset dai tra keo mat luon nen cua nut submit. */
.obd-header .obd-iconbtn,
.obd-header .obd-iconbtn:hover,
.obd-header .obd-iconbtn:focus,
.obd-header .obd-iconbtn:active,
.obd-header .obd-search--desktop button,
.obd-header .obd-search--desktop button:hover,
.obd-header .obd-search--desktop button:focus,
.obd-header .obd-search--desktop button:active{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}
.obd-header button,
.obd-header a{ -webkit-tap-highlight-color:transparent; }
.obd-header button:focus{ outline:none; }
.obd-header button:focus-visible{ outline:2px solid var(--obd-brand); outline-offset:3px; border-radius:6px; }

.obd-header__inner{
  position:relative;
  max-width:1140px;            /* = be ngang container cua section ben duoi */
  margin:0 auto;
  padding:16px 0;
  display:flex;
  align-items:center;
  gap:24px;
}

/* ---------- Logo ---------- */
.obd-header__logo{ flex:0 0 auto; display:block; line-height:0; }
.obd-header__logo img{ display:block; width:auto; height:76px; }
.obd-logo-text{ font-size:20px; font-weight:800; color:var(--obd-brand); }

/* ---------- Menu ---------- */
.obd-header__nav{ flex:1 1 auto; }
.obd-menu{
  display:flex; align-items:center; justify-content:center;
  gap:32px; margin:0; padding:0; list-style:none;
}
.obd-menu li{ margin:0; padding:0; list-style:none; }
.obd-menu a{
  display:inline-block;
  font-size:16px; font-weight:600; line-height:24px;
  color:var(--obd-text); text-decoration:none;
  transition:color .18s ease;
}
.obd-menu .current-menu-item > a,
.obd-menu .current_page_item > a,
.obd-menu .current-menu-ancestor > a{ color:var(--obd-brand); }
@media (hover:hover){
  .obd-menu a:hover{ color:var(--obd-brand); }
}

/* ---------- Actions ---------- */
.obd-header__actions{ flex:0 0 auto; display:flex; align-items:center; gap:16px; margin-left:auto; }

/* Search desktop */
.obd-header .obd-search--desktop{
  display:flex; align-items:center; gap:6px;
  width:260px; height:46px;
  padding:0 16px;
  border:1px solid var(--obd-border);
  border-radius:999px;
  background:#fff;
  transition:border-color .18s ease;
}
.obd-header .obd-search--desktop:focus-within{ border-color:var(--obd-text); }
.obd-header .obd-search--desktop input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  padding:0;                     /* theme set 8px 16px -> cong don voi padding cua form */
  font:inherit; font-size:14px; line-height:22px; color:var(--obd-text);
}

/* Nut xoa (X) mac dinh cua Chrome mau xanh -> doi sang cam bang mask */
.obd-search--desktop input[type="search"]::-webkit-search-cancel-button,
.obd-overlay__field input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-left:8px;
  cursor:pointer;
  background-color:var(--obd-brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.obd-header .obd-search--desktop input::placeholder{ color:var(--obd-muted); opacity:1; }
.obd-search--desktop button{
  flex:0 0 auto; display:grid; place-items:center;
  width:22px; height:22px; padding:0;
  border:0; background:transparent;
  color:var(--obd-muted); cursor:pointer;
  transition:color .18s ease;
}
@media (hover:hover){
  .obd-search--desktop button:hover{ color:var(--obd-brand); }
}
.obd-search--desktop svg{ width:22px; height:22px; display:block; }

/* Icon phẳng — không khung, không nền */
.obd-iconbtn{
  display:none;
  place-items:center;
  width:28px; height:28px; padding:0;
  border:0; background:transparent;
  color:var(--obd-text); cursor:pointer;
  transition:color .18s ease;
}
@media (hover:hover){
  .obd-iconbtn:hover{ color:var(--obd-brand); }
}
.obd-iconbtn svg{ width:24px; height:24px; display:block; }
.obd-burger__close{ display:none; }
.obd-header.is-menu-open .obd-burger__open{ display:none; }
.obd-header.is-menu-open .obd-burger__close{ display:block; }

/* Search overlay (mobile) */
.obd-overlay{
  position:fixed; inset:0; z-index:99999;
  display:none; flex-direction:column;
  background:#fff;
}
.obd-header.is-search-open .obd-overlay{ display:flex; }
.obd-overlay__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px;
  border-bottom:1px solid var(--obd-border);
}
.obd-overlay__brand{ line-height:0; }
.obd-overlay__brand img{ display:block; width:auto; height:56px; }
.obd-overlay__close{ display:grid; }
.obd-overlay__form{ padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.obd-overlay__field{
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 16px;
  border:1px solid var(--obd-border); border-radius:12px;
  background:#fff;
  transition:border-color .18s ease;
}
.obd-overlay__field:focus-within{ border-color:var(--obd-text); }
.obd-overlay__field svg{ width:22px; height:22px; flex:0 0 auto; color:var(--obd-muted); }
.obd-overlay__field input{
  flex:1 1 auto; min-width:0; height:100%;
  border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:var(--obd-text);
}
.obd-overlay__field input::placeholder{ color:var(--obd-muted); opacity:1; }
.obd-overlay__submit{
  height:48px; padding:0 20px;
  border:0; border-radius:12px;
  background:var(--obd-brand); color:#fff;
  font:inherit; font-size:16px; font-weight:700;
  cursor:pointer;
}
/* nen brand phai thang rule `button:hover` cua theme -> can du 3 class */
.obd-header .obd-overlay .obd-overlay__submit,
.obd-header .obd-overlay .obd-overlay__submit:hover,
.obd-header .obd-overlay .obd-overlay__submit:focus,
.obd-header .obd-overlay .obd-overlay__submit:active{
  background:var(--obd-brand); color:#fff; border-radius:12px;
}
@media (hover:hover){
  .obd-overlay__submit:hover{ filter:brightness(.95); }
}
body.obd-noscroll{ overflow:hidden; }

/* ---------- Drawer ---------- */
.obd-drawer{
  display:none;
  border-top:1px solid var(--obd-border);
  background:#fff;
}
.obd-header.is-menu-open .obd-drawer{ display:block; }
.obd-menu--drawer{
  flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:0; padding:4px 20px 12px;
}
.obd-menu--drawer li + li{ border-top:1px solid var(--obd-border); }
.obd-menu--drawer a{ display:block; padding:14px 0; font-size:16px; }

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .obd-header .obd-header__inner{ padding:10px 10px; gap:12px; }
  .obd-header__logo img{ height:56px; }
  .obd-header__nav{ display:none; }
  .obd-header .obd-search--desktop{ display:none; }
  .obd-header .obd-iconbtn{ display:grid; }
  .obd-header__actions{ gap:18px; }
}