/* ============================================
   HEADER.CSS — Header sticky + 2 overlay
   Sửa: chiều cao header, overlay menu, overlay search
   ============================================ */

/* Header sẵn nằm trong index.html với class Tailwind.
   File này chỉ chứa các tinh chỉnh đặc thù không có sẵn trong Tailwind. */

#header {
  /* Đảm bảo header luôn ở trên cùng và transition mượt */
  transition: transform 0.3s cubic-bezier(0.32, 0, 0.26, 1);
}

/* Overlay menu mobile và search: dùng cùng pattern */
#menu-overlay,
#search-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s cubic-bezier(0.32, 0, 0.26, 1);
}

#menu-overlay[aria-hidden="true"],
#search-overlay[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

#menu-overlay[aria-hidden="false"],
#search-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}