/* ===== Top navigation (new design) — scoped under .nhx so it coexists with the Porto theme.
   Loaded site-wide via _header.php. Markup in _nav_top.php. ===== */
.nhx{
  --blue:#0d57c7; --blue-2:#0a78ef; --navy:#07285d; --muted:#5e6b82;
  --line:#e5ebf4; --green:#18a957; --max:1160px;
  font-family:'Prompt','Noto Sans Thai',sans-serif;
}
.nhx *{box-sizing:border-box}
.nhx a{text-decoration:none;color:inherit}

.nhx .container{max-width:none;width:min(var(--max),calc(100% - 32px));margin:auto;padding:0}

.nhx .topbar{background:#07111f;color:#dce7ff;font-size:14px;padding:8px 0}
.nhx .topbar .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.nhx header{position:sticky;top:0;z-index:60;margin:0;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(229,235,244,.85)}

.nhx .nav{position:relative;display:flex;align-items:center;justify-content:space-between;
  min-height:72px;gap:20px;flex-wrap:nowrap}

.nhx .brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy);white-space:nowrap}
.nhx .logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:22px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  box-shadow:0 10px 25px rgba(13,87,199,.25)}
.nhx .brand small{display:block;color:var(--muted);font-weight:600;line-height:1.2;font-size:12px}

.nhx .navlinks{display:flex;align-items:center;gap:18px;font-size:15px;font-weight:700;color:#3c4961}
.nhx .navlinks a{padding:6px 2px;white-space:nowrap;transition:color .15s}
.nhx .navlinks a:hover,.nhx .navlinks a.active{color:var(--blue)}

.nhx .nav-right{display:flex;align-items:center;gap:10px}
.nhx .nav-cta{display:flex;gap:10px}
.nhx .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 18px;border-radius:14px;font-weight:800;font-size:15px;
  transition:.2s ease;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.nhx .btn:hover{transform:translateY(-2px)}
.nhx .btn-line{background:var(--green);color:#fff;box-shadow:0 12px 28px rgba(24,169,87,.2)}
.nhx .btn-ghost{border-color:#cfd9e9;background:#fff;color:var(--navy)}

.nhx .nhx-burger{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  width:46px;height:46px;font-size:22px;line-height:1;color:var(--navy);cursor:pointer;
  align-items:center;justify-content:center}

@media (max-width:1024px){
  .nhx .navlinks{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(7,17,31,.12);padding:6px 0}
  .nhx .navlinks.open{display:flex}
  .nhx .navlinks a{padding:13px 22px;border-bottom:1px solid #f1f4f9;font-size:16px}
  .nhx .navlinks a:last-child{border-bottom:0}
  .nhx .nhx-burger{display:inline-flex}
}
@media (max-width:640px){
  .nhx .brand small{display:none}
  .nhx .brand{font-size:14px;gap:9px}
  .nhx .logo{width:38px;height:38px;font-size:18px}
  .nhx .nav-cta .btn-line{display:none}   /* ซ่อนปุ่ม LINE บนมือถือ (มีปุ่ม LINE ลอยมุมจออยู่แล้ว) */
  .nhx .nav-right{gap:8px}
  .nhx .btn{padding:0 13px;min-height:42px;font-size:14px}
  .nhx .topbar{font-size:12.5px}
  .nhx .nav{min-height:60px;gap:10px}
}
@media (max-width:400px){
  .nhx .nav-cta .btn-ghost{display:none}  /* จอเล็กมาก: เหลือแค่ปุ่มเมนู (โทร/LINE ใช้ปุ่มลอยมุมจอ) */
}