/* --------------------------------------------------------------
   GREEN9SOFT – Sleek Nav (drop-in)
   - วางไฟล์นี้ "หลัง" style.css เดิมของคุณ
   - ไม่เปลี่ยนพื้นหลัง/กรอบของ header และ "ไม่" บังคับสีตัวอักษร
   - ลิงก์เมนูจะใช้สีเดิมจากธีม (color: inherit)
   -------------------------------------------------------------- */

:root{
  /* ปรับได้ตามชอบ */
  --nav-gap: 20px;                /* ระยะห่างระหว่างเมนู */
  --nav-cta-gap-compact: -8px;    /* ให้ปุ่ม CTA สองปุ่มชิดกัน */
  --nav-underline-offset: -6px;   /* ระยะเส้นใต้ hover จากตัวอักษร */
  --nav-cta-bg: #34c46a;          /* สีพื้นปุ่ม CTA */
  --nav-cta-radius: 14px;         /* มุมโค้งปุ่ม CTA */
  --nav-cta-shadow: 0 6px 16px rgba(52,195,106,.28);
}

/* กล่องเมนูหลัก */
.g9-nav .menu{
  display:flex;
  align-items:center;
  gap:var(--nav-gap);
  margin:0; padding:0;
  list-style:none;
}

/* รายการเมนู */
.g9-nav .menu > li{ list-style:none; }

/* ลิงก์ของเมนู – คง "สีเดิม" และเอาความโปร่งออกให้ชัด */
.g9-nav .menu > li > a{
  display:inline-block;
  padding:10px 0;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:inherit;             /* ใช้สีจากธีมเดิม */
  opacity:1 !important;      /* กันจาง/ซีดจากสไตล์เดิม */
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease;
  position:relative;
}
.g9-nav .menu > li > a:hover,
.g9-nav .menu > li > a:focus{
  opacity:1;
  transform:translateY(-1px);
}
/* เส้นไฮไลต์ตอน hover ใช้ currentColor เพื่อเข้ากับสีเดิม */
.g9-nav .menu > li:not(.cta) > a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:var(--nav-underline-offset);
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease;
}
.g9-nav .menu > li:not(.cta) > a:hover::after{ transform:scaleX(1); }

/* โฟกัสด้วยคีย์บอร์ดให้เห็นชัดขึ้น */
.g9-nav .menu > li > a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:6px;
}

/* ปุ่ม CTA (SIGN IN / เริ่มต้นใช้งาน) */
.g9-nav .menu > li.cta > a{
  padding:10px 18px;
  background:var(--nav-cta-bg);
  color:#fff;
  border-radius:var(--nav-cta-radius);
  box-shadow:var(--nav-cta-shadow);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}
.g9-nav .menu > li.cta > a:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* ทำให้ CTA สองปุ่มชิดกันขึ้น */
.g9-nav .menu > li.cta + li.cta{ margin-left:var(--nav-cta-gap-compact); }

/* มือถือ */
@media (max-width:900px){
  .g9-nav .menu{ gap:10px; }
  .g9-nav .menu > li > a{ padding:12px 2px; display:block; }
  .g9-nav .menu > li.cta > a{ width:100%; text-align:center; }
  .g9-nav .menu > li.cta + li.cta{ margin-left:0; }
}

/* (ตัวเลือก) ถ้าต้องการให้ตัวอักษรอ่อนลงเมื่อทับพื้นมืด ให้เติมคลาส .is-dark ที่ .g9-nav */
.g9-nav.is-dark .menu > li > a{ color:#f3f7fb; }  /* ใช้เฉพาะเมื่อเพิ่มคลาสนี้เท่านั้น */