@charset "UTF-8";
/* หัวเว็บกลาง — CSS ชุดเดียวของ partials/header.html
   หน้าขายทุกหน้า (deploy.mjs เติมลิงก์ให้) และหน้าเครื่องมือ /promotion-planner (Worker แยก) โหลดไฟล์นี้จาก /partials/header.css
   ห้ามพึ่งตัวแปรของ site.css — โทเคนที่ใช้ประกาศไว้บน .nav เอง หน้าเครื่องมือจึงใช้ได้โดยไม่ต้องมี site.css
   แก้หัวเว็บที่นี่ที่เดียว (ย้ายออกจาก site.css + v2.css 2 พ.ย. 2026 — เจ้าของสั่ง) · ห้ามเปลี่ยนชื่อ class โดยไม่บอกเซสชัน promotion-planner-ai */
.nav {
  --nav-indigo: #2f3fb0; --nav-indigo-deep: #1f2a80; --nav-red: #d6312b; --nav-red-deep: #b8231f;
  --nav-ink: #151833; --nav-ink-2: #555a74; --nav-line: #e3e7ef;
  --nav-max: 1240px; --nav-gutter: clamp(16px, 4vw, 40px); --nav-ease: cubic-bezier(.16, 1, .3, 1);
  position: sticky; top: 0; z-index: 50; padding: 14px 0;
  font: 400 17px/1.7 "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif; color: var(--nav-ink);
}
.nav__bar { width: min(var(--nav-max), 100% - 2 * var(--nav-gutter)); margin-inline: auto; display: flex; align-items: center; gap: 28px;
  padding: 8px 10px 8px 14px; border-radius: 11px; transition: background-color .35s, box-shadow .35s, width .5s var(--nav-ease), padding .35s; }
.nav.is-float .nav__bar { background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(21, 24, 51, .10), 0 0 0 1px rgba(21, 24, 51, .05); width: min(1120px, 100% - 2 * var(--nav-gutter)); }
.nav__logo img { display: block; height: 40px; width: auto; max-width: none; }
.nav__links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav__links a { text-decoration: none; color: var(--nav-ink-2); transition: color .2s; white-space: nowrap; }
.nav__links a:hover { color: var(--nav-ink); }
.nav__links a[aria-current="page"] { color: var(--nav-indigo); font-weight: 600; }
.nav__cta { margin-left: auto; display: flex; gap: 8px; }

/* ปุ่มในหัวเว็บ — ประกาศครบที่นี่ ไม่พึ่ง .btn ของหน้า */
.nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 8px;
  font: 600 14px/1.2 "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--nav-ease), background-color .2s, box-shadow .25s var(--nav-ease); }
.nav .btn svg { flex: none; }
.nav .btn:hover { transform: translateY(-2px); }
.nav .btn:active { transform: translateY(0) scale(.98); }
.nav .btn--primary { background: var(--nav-indigo); color: #fff; box-shadow: 0 8px 20px rgba(47, 63, 176, .25); }
.nav .btn--primary:hover { background: var(--nav-indigo-deep); color: #fff; box-shadow: 0 14px 30px rgba(47, 63, 176, .3); }
.nav .btn--ghost { background: var(--nav-red); color: #fff; }
.nav .btn--ghost:hover { background: var(--nav-red-deep); color: #fff; }
@media (max-width: 1280px) { .nav__links { gap: 20px; } .nav__bar { gap: 22px; } }

/* ปุ่มเมนูจอเล็ก (js/nav.js ของหน้าขายสร้าง · หน้าเครื่องมือได้มาพร้อม HTML) — จอใหญ่ซ่อน */
.nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 0 11px; border: 0; border-radius: 8px; background: rgba(21, 24, 51, .06); cursor: pointer; }
.nav__burger span { display: block; height: 2px; border-radius: 2px; background: var(--nav-ink); transition: transform .25s var(--nav-ease), opacity .2s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__burger:focus-visible { outline: 2px solid var(--nav-indigo); outline-offset: 2px; }

@media (max-width: 1100px) {
  .nav__bar { gap: 8px; }
  .nav__logo { margin-right: auto; }
  .nav__cta { margin-left: 0; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; width: 44px; height: 44px; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 0; position: absolute; top: calc(100% - 4px); left: var(--nav-gutter); right: var(--nav-gutter);
    padding: 8px; border-radius: 11px; background: #fff; box-shadow: 0 18px 50px rgba(21, 24, 51, .16), 0 0 0 1px rgba(21, 24, 51, .06); font-size: 17px; }
  .nav.is-open .nav__links a { display: block; padding: 13px 14px; border-radius: 8px; color: var(--nav-ink); }
  .nav.is-open .nav__links a:hover, .nav.is-open .nav__links a[aria-current] { background: rgba(47, 63, 176, .07); color: var(--nav-indigo); }
}
@media (max-width: 760px) { .nav .btn--sm { min-height: 44px; } }
/* มือถือ: "เข้าสู่ระบบ" ย้ายจากปุ่มบนหัวเว็บไปอยู่ในเมนู (li มี hidden ไว้ จอใหญ่ไม่เห็นซ้ำ) */
@media (max-width: 560px) {
  .nav__cta .btn--ghost { display: none; }
  .nav__logo img { height: 32px; }
  .nav.is-open .nav__links li.nav__login-m { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--nav-line); }
}