/* ===================== HEADER — GLASS NAV ===================== */
.fp-header{
  position:sticky;top:0;z-index:900;
  height:var(--fp-header-h);
  background:var(--fp-glass-bg);
  backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  border-bottom:1px solid var(--fp-glass-border);
  transition:background var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease);
}
.fp-header.is-scrolled{box-shadow:0 4px 24px rgba(28,61,58,.08)}

/* Mỗi breakpoint có MỘT hàng header riêng biệt — không dùng chung layout để tránh xung đột */
.fp-header-row{height:var(--fp-header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.fp-header-row--desktop{display:flex}
.fp-header-row--mobile{display:none}

/* Desktop ≥1024px: ép nowrap để không bao giờ vỡ dòng / đè nút CTA */
@media (min-width:1024px){
  .fp-header-row--desktop{
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
  }
  .fp-nav{flex:0 1 auto;min-width:0}
  .fp-header-actions{flex-shrink:0}
}

.fp-logo{display:flex;align-items:center;gap:10px;font-family:var(--fp-font-heading);font-weight:700;font-size:19px;color:var(--fp-color-secondary);flex-shrink:0}
.fp-logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
.fp-nav{display:flex;align-items:center;gap:2px}
.fp-nav a{
  font-size:14.5px;font-weight:500;color:var(--fp-color-text);padding:9px 16px;border-radius:999px;white-space:nowrap;
  transition:background var(--fp-dur-1) var(--fp-ease), color var(--fp-dur-1) var(--fp-ease);
}
.fp-nav a:hover{background:rgb(61 139 130 / 10%);color:var(--fp-color-primary)}
.fp-nav a.active{color:var(--fp-color-cta);font-weight:600}
.fp-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ===== Tài khoản đã đăng nhập — desktop ===== */
.fp-account{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 6px;border-radius:var(--fp-radius-pill);background:rgba(255,255,255,.5)}
.fp-account__link{text-decoration:none !important;color:inherit !important;display:flex;align-items:center;gap:9px}
.fp-account__avatar{display:flex;flex-shrink:0;border-radius:50%;overflow:hidden;width:32px;height:32px}
.fp-account__avatar img{display:block;width:32px;height:32px;border-radius:50%}
.fp-account__info{display:flex;flex-direction:column;line-height:1.2;max-width:120px}
.fp-account__name{font-size:12.5px;font-weight:700;color:var(--fp-color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-account__role{font-size:10.5px;color:var(--fp-color-text-muted)}
.fp-account__logout{font-size:12px;font-weight:600;color:var(--fp-color-primary);padding:6px 4px;flex-shrink:0}
.fp-account__logout:hover{text-decoration:underline}
.fp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fp-font-body);font-weight:600;font-size:14.5px;
  padding:11px 22px;border-radius:var(--fp-radius-md);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:filter var(--fp-dur-1) var(--fp-ease), transform var(--fp-dur-1) var(--fp-ease), box-shadow var(--fp-dur-1) var(--fp-ease), background var(--fp-dur-1) var(--fp-ease);
}
.fp-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.fp-btn:active{transform:translateY(0)}
.fp-btn--cta{background:var(--fp-btn-cta-bg);color:#fff;box-shadow:var(--fp-glow-primary)}
/* Ghost = kính thật (glassmorphism), không phải viền trơ trên nền trong suốt */
.fp-btn--ghost{
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--fp-color-primary);
}
.fp-btn--ghost:hover{background:rgba(255,255,255,0.6)}
.fp-btn--sm{padding:8px 16px;font-size:13.5px}

/* ===== Hàng mobile (<1024px): Logo trái · icon Tìm kiếm gọn · Hamburger phải ===== */
.fp-header-row--mobile{
  padding:0.75rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  width:100%;
  box-sizing:border-box;
}
.fp-logo--mobile{gap:0;flex-shrink:0}

/* ===== Ô tìm kiếm inline thật trên mobile — thay hẳn nút bấm mở overlay
   cũ. Nằm giữa Logo và Hamburger, luôn hiển thị, gõ xong bấm Enter/Go là
   submit thẳng theo form GET chuẩn WordPress, không cần JS can thiệp. ===== */
.mobile-header-search{flex:1 1 auto;min-width:0;display:flex}
.mobile-search-input{
  width:100%;height:38px;min-width:0;
  background:#f1f5f9;
  border:1px solid #e2e8f0;border-radius:20px;
  padding:0 16px;
  font-size:16px; /* BẮT BUỘC ≥16px — dưới mức này Safari iOS tự động zoom khi focus, đúng lỗi cần tránh */
  font-weight:500;
  color:#0f172a;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mobile-search-input::placeholder{color:#94a3b8;font-weight:400}
.mobile-search-input:focus{
  outline:none;background:#fff;border-color:#0d9488;
  box-shadow:0 0 0 3px rgb(13 148 136/12%); /* viền teal nhẹ khi focus — không dùng overlay/modal tối màn hình */
}
/* Ẩn nút "x" xoá nhanh mặc định của trình duyệt trên input[type=search] để
   giao diện gọn, không xung đột thị giác với bo góc pill. */
.mobile-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* Hamburger — tương phản rõ, không bao giờ "tàng hình" */
.fp-burger{
  width:40px;height:40px;border-radius:var(--fp-radius-md);flex-shrink:0;
  border:1.5px solid var(--fp-color-primary);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.fp-burger .bar{
  position:absolute;width:20px;height:2.5px;border-radius:2px;
  background:var(--fp-color-primary);
  transition:transform var(--fp-dur-2) var(--fp-ease), opacity var(--fp-dur-2) var(--fp-ease);
}
.fp-burger .bar:nth-child(1){transform:translateY(-6px)}
.fp-burger .bar:nth-child(3){transform:translateY(6px)}
.fp-burger.is-open .bar:nth-child(1){transform:rotate(45deg)}
.fp-burger.is-open .bar:nth-child(2){opacity:0}
.fp-burger.is-open .bar:nth-child(3){transform:rotate(-45deg)}

/* ===== Rotating label — placeholder "typing" giữa các cụm từ (chỉ hiển thị ở dsearch-trigger desktop, ĐÃ ẩn trên mobile ở trên) ===== */
.rotate-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s ease, filter .25s ease}
.rotate-label.is-fading{opacity:0;filter:blur(2px)}

/* ===== Search icon — trạng thái động (search ⇄ loading) ===== */
.gsearch-icon{color:var(--fp-color-primary);display:flex;flex-shrink:0;transition:opacity .25s ease, filter .25s ease}
.gsearch-icon.spin svg{animation:gsearchSpin .8s linear infinite}
@keyframes gsearchSpin{to{transform:rotate(360deg)}}

/* ===== Kết quả tìm kiếm — dùng chung cho Mobile overlay & Desktop dock ===== */
.gsearch-results{overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height var(--fp-dur-3) var(--fp-ease), opacity var(--fp-dur-2) var(--fp-ease), margin-top var(--fp-dur-3) var(--fp-ease);}
.gsearch-results.is-open{max-height:340px;opacity:1;margin-top:10px;overflow-y:auto}
.gsearch-result{
  display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:14px;cursor:pointer;
  opacity:0;transform:translateY(6px) scale(.97);animation:gsearchResultIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:background var(--fp-dur-1) var(--fp-ease);
}
.gsearch-result:hover,.gsearch-result.is-active{background:rgb(61 139 130/9%)}
.gsearch-result .r-icon{
  width:29px;height:29px;border-radius:9px;background:rgb(13 148 136/10%);color:var(--fp-color-cta);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px;
}
.gsearch-result .r-main{flex:1;min-width:0}
.gsearch-result .r-title{font-size:13.5px;font-weight:600;color:var(--fp-color-text);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gsearch-result .r-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgb(13 148 136/10%);color:var(--fp-color-cta);white-space:nowrap}
.gsearch-result .r-meta{font-size:12px;color:var(--fp-color-text-muted);margin-top:2px}
.gsearch-result mark{background:rgb(245 158 11/28%);color:var(--fp-color-secondary);border-radius:3px;padding:0 1px}
@keyframes gsearchResultIn{to{opacity:1;transform:translateY(0) scale(1)}}
.gsearch-empty{padding:16px 8px;font-size:13px;color:var(--fp-color-text-muted);text-align:center}

/* ===== Lớp phủ nền (scrim) — hiện khi menu hamburger hoặc search dock
   desktop đang mở. (Overlay tìm kiếm mobile + lớp nền riêng của nó đã bị
   gỡ bỏ — mobile giờ dùng ô tìm kiếm thật luôn hiển thị, không còn panel
   nào cần che mờ nền.) ===== */
.fp-scrim{
  position:fixed;inset:0;z-index:890;background:rgba(15,30,28,.4);
  opacity:0;pointer-events:none;transition:opacity var(--fp-dur-3) var(--fp-ease);
}
.fp-scrim.is-open{opacity:1;pointer-events:auto}
.no-anim{transition:none !important}

/* ===== Search dock (desktop) — nằm giữa header, mở rộng 280→520px kiểu Apple ===== */
.dsearch-trigger{
  display:none;align-items:center;gap:9px;height:40px;padding:0 18px 0 15px;border-radius:999px;
  border:1px solid var(--fp-color-border);background:#fff;color:var(--fp-color-text-muted);
  width:100%;max-width:280px;flex-shrink:1;min-width:0;
  font-size:13.5px;font-weight:500;cursor:pointer;
  transition:border-color var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease), opacity var(--fp-dur-2) var(--fp-ease), transform var(--fp-dur-2) var(--fp-ease);
}
.dsearch-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsearch-trigger svg{color:var(--fp-color-primary);flex-shrink:0}
.dsearch-trigger:hover{border-color:var(--fp-color-primary);box-shadow:var(--fp-glow-primary)}
.dsearch-trigger.is-hidden{opacity:0;transform:scale(.92);pointer-events:none}

.dsearch-dock{
  display:none;position:fixed;top:0;left:50%;height:var(--fp-header-h);z-index:950;
  align-items:center;transform:translateX(-50%);
  width:280px;opacity:0;pointer-events:none;
  transition:width .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.dsearch-dock.is-open{display:flex;opacity:1;pointer-events:auto;width:520px}
@media (max-width:1180px){.dsearch-dock.is-open{width:440px}}
.dsearch-field{
  width:100%;display:flex;align-items:center;gap:10px;border-radius:999px;border:1px solid var(--fp-color-primary);
  background:var(--fp-glass-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);-webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  padding:11px 10px 11px 18px;box-shadow:0 12px 30px rgba(28,61,58,.14), 0 0 0 4px rgb(61 139 130/12%);
}
.dsearch-field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14.5px;color:var(--fp-color-text)}
.dsearch-field .gsearch-icon{opacity:0;transform:translateX(8px);filter:blur(4px);transition:opacity .35s ease .12s, transform .35s ease .12s, filter .35s ease .12s}
.dsearch-dock.is-open.gsearch-field-ready .gsearch-icon{opacity:1;transform:translateX(0);filter:blur(0)}
.dsearch-close{
  flex-shrink:0;width:26px;height:26px;border:none;border-radius:50%;background:rgba(28,61,58,.08);
  color:var(--fp-color-text-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--fp-dur-1) var(--fp-ease);
}
.dsearch-close:hover{background:rgba(28,61,58,.16)}
.dsearch-results{
  display:none;position:fixed;top:calc(var(--fp-header-h) + 8px);left:50%;transform:translateX(-50%);
  width:520px;max-width:calc(100vw - 40px);z-index:949;
  background:var(--fp-glass-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);-webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  border:1px solid var(--fp-glass-border);border-radius:24px;box-shadow:0 20px 44px rgba(28,61,58,.16);
  padding:10px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--fp-dur-3) var(--fp-ease), opacity var(--fp-dur-2) var(--fp-ease);
}
@media (max-width:1180px){.dsearch-results{width:440px}}
.dsearch-results.is-open{display:block;max-height:400px;opacity:1;overflow-y:auto}

/* ===================== MOBILE NAV DRAWER — chỉ điều hướng ===================== */
.fp-mobile-nav{
  display:none;position:fixed;top:var(--fp-header-h);left:0;right:0;z-index:895;
  padding:14px 20px 22px;
  background:var(--fp-panel-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(160%);
  border-bottom:1px solid var(--fp-glass-border);box-shadow:0 16px 32px rgba(28,61,58,.1);
  border-radius:0 0 20px 20px;
  transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:transform var(--fp-dur-3) var(--fp-ease), opacity var(--fp-dur-3) var(--fp-ease);
}
.fp-mobile-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.mnav-links{display:flex;flex-direction:column}
.mnav-links a{
  padding:15px 6px;font-size:15px;font-weight:600;color:var(--fp-color-secondary);
  border-bottom:1px solid var(--fp-color-border);display:flex;align-items:center;justify-content:space-between;
  transition:color var(--fp-dur-1) var(--fp-ease), padding-left var(--fp-dur-1) var(--fp-ease);
}
.mnav-links a:hover{color:var(--fp-color-primary);padding-left:10px}
.mnav-links a:last-child{border-bottom:none}
.mnav-links a span{color:var(--fp-color-text-muted);font-weight:400;font-size:13px}
.mnav-cta{margin-top:20px;display:flex;gap:10px;align-items:center}
.mnav-cta + .mnav-cta{margin-top:10px}
.mnav-cta__full{width:100%}

/* ===== Tài khoản đã đăng nhập — drawer mobile ===== */
.mnav-account{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:8px 10px;border-radius:var(--fp-radius-md);background:rgba(255,255,255,.6)}
.mnav-account__link{text-decoration:none !important;color:inherit !important;display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.mnav-account__avatar{display:flex;flex-shrink:0;border-radius:50%;overflow:hidden;width:36px;height:36px}
.mnav-account__avatar img{display:block;width:36px;height:36px;border-radius:50%}
.mnav-account__info{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.mnav-account__name{font-size:13.5px;font-weight:700;color:var(--fp-color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnav-account__role{font-size:11px;color:var(--fp-color-text-muted)}
.mnav-cta .mnav-account ~ .fp-btn{flex:none;padding:9px 14px}
.mnav-cta .fp-btn{flex:1}

/* ===================== RESPONSIVE — mốc chuẩn 1024px (đồng bộ toàn theme) ===================== */
@media (min-width:1024px){
  /* Ô tìm kiếm giữa header CHỈ dành cho mobile — trên PC ẩn tuyệt đối,
     nhường toàn bộ không gian cho menu điều hướng + CTA. */
  .dsearch-trigger,
  .dsearch-dock,
  .dsearch-results{
    display:none !important;
  }
  /* Ẩn TUYỆT ĐỐI mọi phần tử mobile trên desktop — không chỉ display:none
     mà còn chặn hẳn tương tác/độ rộng, tránh lọt khoảng trắng vô hình. */
  .fp-header-row--mobile,
  .fp-burger,
  .fp-mobile-nav{
    display:none !important;
    visibility:hidden;
    width:0;height:0;
    pointer-events:none;
  }
}
@media (max-width:1023px){
  .fp-header-row--desktop{display:none}
  .fp-header-row--mobile{display:flex}
  .fp-mobile-nav{display:block}
}