/* ============================================================
   FORMATIX — แถบบนของ UI v2 (docs/แผนปรับโฉมหน้าเว็บ.md ข้อ 3.7 · ตามแบบในสไลด์ที่ออกแบบไว้)
   โปร่งบนสุดของหน้า ไม่มีแผ่นกระจกลอยอยู่ → เลื่อนลงแล้วค่อยมีพื้นฝ้าบาง ๆ + เส้นล่างเส้นเดียว
   ซ้าย: เมนู (ไอคอนล้วน) · โลโก้ · ชื่อ "Formatix Creations" ตัวพิมพ์ปกติ  ขวา: ftc. Main → · ภาษา · ตั้งค่า · โปรไฟล์ (ใหญ่สุด)
   ขอบซ้าย/ขวาตรงกับเนื้อหาของทุกหน้า (กรอบ 1600px) — ไม่ลอยเป็นกล่อง 1280px กลางจออีกแล้ว
   ทุกกฎผูกกับ html[data-ui="v2"] → มือถือ / โหมดแอปไม่โดน
   !important เฉพาะพื้นผิวของแถบ (พื้น · เบลอ · เงา · มุม): glass.css กับธีมคลาสสิกวางกฎไว้หลายชั้นตามสถานะ Liquid Glass
   แถบแบบนี้ต้องหน้าตาเดียวกันทั้งตอนเปิดและปิด Liquid Glass
   ============================================================ */
html[data-ui="v2"] {
  --v2-pad: calc(max(0px, (100% - 1600px) / 2) + clamp(24px, 3.4vw, 56px));   /* ขอบเนื้อหาเดียวกับ .shell ของทุกหน้า v2 */
  --v2-nav: 72px;
}

/* ---------- แผ่นแถบ ---------- */
html[data-ui="v2"] .topbar { padding: 0; }
/* ตัวเลือกยาวกว่าปกติเพื่อชนะกฎความกว้าง/ขอบของ glass.css (:root.lg-refract:not(...) .topbar-in) ที่ยังใช้ --shell 1280px */
html:root[data-ui="v2"] header.topbar > .topbar-in {
  position: relative;
  isolation: isolate;
  max-width: none;
  height: var(--v2-nav);
  padding: 0 var(--v2-pad);
  gap: 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-ui="v2"] .topbar-in::after { display: none !important; }
/* พื้นฝ้าโผล่เมื่อเลื่อนลง (app.js ใส่ .is-stuck ที่ .topbar เมื่อเลื่อนเกิน 24px) */
html[data-ui="v2"] .topbar-in::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: 0 !important;
  background: color-mix(in oklab, var(--bg) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 var(--line) !important;
  opacity: 0 !important;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
html[data-ui="v2"] .topbar.is-stuck .topbar-in::before { opacity: 1 !important; }

/* ---------- ซ้าย: เมนู · โลโก้ · ชื่อ ---------- */
html[data-ui="v2"] .topbar-start { gap: 4px; }
html[data-ui="v2"] .nav-trigger {
  width: 44px;
  height: 44px;
  margin-left: -10px;                       /* ให้เส้นของไอคอนชิดขอบเดียวกับเนื้อหาด้านล่าง */
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--ink);
}
html[data-ui="v2"] .nav-trigger::after { display: none; }
html[data-ui="v2"] .nav-trigger svg { width: 24px; height: 24px; }
html[data-ui="v2"] .nav-trigger:hover,
html[data-ui="v2"] .nav-menu.is-open .nav-trigger {
  background: color-mix(in oklab, var(--ink) 9%, transparent);
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}
html[data-ui="v2"] .brand { gap: 12px; margin-left: 4px; }
html[data-ui="v2"] .brand img { width: 34px; height: 34px; }
html[data-ui="v2"] .brand-name {
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
html[data-ui="v2"] .brand-name span { color: var(--mute); font-weight: 500; }

/* ---------- ขวา: ภาษา · ตั้งค่า · โปรไฟล์ ---------- */
html[data-ui="v2"] .acct { gap: 12px; min-height: 0; }
html[data-ui="v2"] .lang-switch {
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: none;
}
html[data-ui="v2"] .lang-switch button { min-width: 38px; font-size: 12.5px; color: var(--mute); }
html[data-ui="v2"] .lang-switch button:hover { color: var(--ink); }
html[data-ui="v2"] .lang-switch button.is-on { background: color-mix(in oklab, var(--ink) 14%, transparent); color: var(--ink); }
html[data-ui="v2"] .acct .icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
html[data-ui="v2"] .acct .icon-btn:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); }
html[data-ui="v2"] .signin-btn {
  height: 42px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  font-size: 15px;
}
html[data-ui="v2"] .signin-btn:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); border-color: var(--line-strong); }
/* โปรไฟล์ใหญ่และเด่นสุดของแถบ (ระบบบัญชีเป็นจุดเด่นของเว็บ) */
html[data-ui="v2"] .avatar-btn {
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ink) 82%, transparent);
}
html[data-ui="v2"] .avatar-btn .avatar { --size: 46px; }
html[data-ui="v2"] .avatar-btn:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--accent-soft); }
html[data-ui="v2"] .avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--accent-ring); }

/* ปุ่ม ftc. Main → (landing.css เปิดเฉพาะตอนอ่าน About) วางชิดขวาของฝั่งซ้าย = อยู่หน้าปุ่มภาษา */
html[data-ui="v2"] .ld-topgo { margin-left: auto; }

/* ---------- เมนูหลัก: แผ่นกระจกลอยใต้ปุ่ม ไม่ติดขอบจอ ---------- */
html[data-ui="v2"] .main-menu {
  top: calc(var(--v2-nav) - 8px);
  left: calc(max(0px, (100vw - 1600px) / 2) + clamp(14px, 2.4vw, 44px));
  width: 300px;
  padding: 10px;
  border: var(--hair);
  border-radius: 20px;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
          backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--shadow-lg);
}
html[data-ui="v2"] .main-menu::before { display: none; }