/* HAP mobile header v2 (2026-09-03) - white sticky header, text logo, hero-style search row (hopamviet style) */
@media (max-width: 991.98px) {
  header {
    position: sticky !important; top: 0; z-index: 1030;
    background: #fff !important; background-image: none !important;
    border-bottom: 1px solid #e3e8ef; box-shadow: 0 1px 6px rgba(0,0,0,.06);
    padding: 6px 0 0 !important;
  }
  header .row.justify-content-between { align-items: center; row-gap: 0; flex-wrap: wrap; }
  header .logo { display: flex; align-items: center; min-height: 44px; padding-left: 12px !important; flex: 1 1 0% !important; min-width: 0; max-width: none !important; width: auto !important; }
  header .logo a { display: flex !important; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
  header .logo img { width: 34px !important; height: 34px !important; border-radius: 8px; flex: 0 0 34px; }
  header .logo .site_name { display: none !important; }
  header .logo a::after {
    content: "H\1EE3p \00C2m Pro";
    font-size: 19px; font-weight: 800; letter-spacing: -.2px; color: #0f7fab; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  header .show-search { display: none !important; }
  header .hap-header-tools { flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 4px !important; gap: 6px !important; }
  header .hap-theme-toggle { color: #3a4a5c !important; background: #f2f5f9 !important; border: 0 !important; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  header .hap-theme-toggle svg { stroke: #3a4a5c; }
  header .userbox { flex: 0 0 auto !important; flex-wrap: nowrap !important; padding-right: 12px !important; gap: 6px !important; }
  header .userbox .text-white, header .userbox .text-white span { color: #3a4a5c !important; }
  header .userbox > a[href*="thanh-vien"] { display: inline-flex !important; align-items: center; }
  header .userbox > a[href*="thanh-vien"] img { width: 34px !important; height: 34px !important; margin: 0 !important; }
  header .userbox > a[href*="thanh-vien"] span { display: none !important; }
  header .userbox .hap-userbox-dropdown { display: none !important; }
  header .hap-mobile-nav > button { width: 38px !important; height: 38px !important; border-radius: 50%; background: #f2f5f9 !important; }
  header .hap-mobile-nav > button svg { stroke: #3a4a5c !important; }
  header .navbar {
    display: flex !important; flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    order: 3 !important; padding: 8px 12px 12px !important; margin: 0 !important; background: transparent !important;
  }
  header .navbar .primary-menu { display: none !important; }
  header .navbar .search-form {
    display: flex !important; align-items: center; position: relative; width: 100%; height: 50px;
    background: #fff; border: 0 !important; border-radius: 999px !important; overflow: hidden;
    box-shadow: 0 4px 16px rgba(20,40,80,.14), 0 0 0 1px rgba(20,40,80,.06);
    opacity: 1 !important; visibility: visible !important; transform: none !important; margin: 0 !important; padding: 0 0 0 40px !important;
  }
  header .navbar .search-form::before {
    content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  header .navbar .search-form:focus-within { box-shadow: 0 4px 16px rgba(20,40,80,.16), 0 0 0 2px rgba(15,127,171,.35); }
  header .navbar .search-form #search-q {
    order: 1; flex: 1 1 auto; min-width: 0; height: 48px !important; border: 0 !important; background: transparent !important;
    padding: 0 4px 0 2px !important; font-size: 15px; color: #1f2a37; box-shadow: none !important; outline: 0;
  }
  header .navbar .search-form #search-q::placeholder { color: #8a97a8; }
  header .navbar .search-form button[onclick*="startVoiceSearch"] {
    order: 2; position: static !important; transform: none !important; flex: 0 0 auto; width: auto !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 6px !important; display: inline-flex; align-items: center; background: none !important; border: 0 !important;
  }
  header .navbar .search-form button[onclick*="startVoiceSearch"] svg { width: 24px; height: 24px; fill: #6b7a8c; }
  header .navbar .search-form #search-submit {
    order: 3; flex: 0 0 auto; height: 40px; margin: 0 5px 0 4px; padding: 0 18px !important; border-radius: 999px !important;
    background: #1c2f5e !important; color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px;
  }
  header .navbar .search-form #search-submit svg { display: none; }
  header .navbar .search-form #search-submit::after { content: "T\00ECm"; }
  .hap-home__hero .hap-home__search { display: none !important; }
  .hap-home__hero .hap-home__hero-pills { display: none !important; }
  .hap-home__hero { padding-top: 22px !important; }
}
@media (max-width: 991.98px) {
  html.dark-mode header { background: #171b22 !important; border-bottom-color: #2a313c; }
  html.dark-mode header .logo a::after { color: #5fc3f0; }
  html.dark-mode header .hap-theme-toggle, html.dark-mode header .hap-mobile-nav > button { background: #232a35 !important; }
  html.dark-mode header .hap-theme-toggle svg, html.dark-mode header .hap-mobile-nav > button svg { stroke: #dfe6ee !important; }
  html.dark-mode header .userbox .text-white, html.dark-mode header .userbox .text-white span { color: #dfe6ee !important; }
  html.dark-mode header .navbar .search-form { background: #1f252e; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
  html.dark-mode header .navbar .search-form #search-q { color: #e8eef5; }
  html.dark-mode header .navbar .search-form #search-submit { background: #0f7fab !important; }
}
@media (max-width: 991.98px) {
  header .navbar .search-form #search-submit { position: static !important; right: auto !important; top: auto !important; transform: none !important; }
}
/* v2.1: full-width search + admin bar tidy (<992px) */
@media (max-width: 991.98px) {
  header .navbar .search-form { max-width: none !important; width: 100% !important; flex: 1 1 100% !important; }
  html.admin-bar header { top: 32px !important; }
  #wpadminbar #wp-admin-bar-customize, #wpadminbar #wp-admin-bar-updates, #wpadminbar #wp-admin-bar-comments,
  #wpadminbar #wp-admin-bar-new-content, #wpadminbar #wp-admin-bar-edit, #wpadminbar #wp-admin-bar-litespeed-menu,
  #wpadminbar #wp-admin-bar-wpseo-menu, #wpadminbar #wp-admin-bar-view { display: none !important; }
  #wpadminbar #wp-admin-bar-my-account .display-name, #wpadminbar #wp-admin-bar-my-account > a > span:not(.avatar) { display: none !important; }
  #wpadminbar #wp-admin-bar-top-secondary { position: absolute; right: 0; top: 0; }
}
@media (max-width: 782px) {
  html.admin-bar header { top: 46px !important; }
}