/* Navbar V2 — topbar ไล่สี + เมนู 2 บรรทัด + ช่องค้นหา + ปุ่มเข้าสู่ระบบ (โทนน้ำเงิน Sabo เดิม) */
.topbar{ background:linear-gradient(90deg,var(--blue-deep),var(--blue-dark) 45%,var(--blue)); color:#fff; font-size:13px; }
.topbar .container{ height:40px; }
.topbar-left{ gap:10px; font-weight:500; }
.topbar-logo{ width:26px; height:26px; border-radius:50%; background:#fff; padding:2px; object-fit:contain; }
.topbar-right{ gap:16px; }
.topbar-right a, .topbar-right a:hover{ width:auto; height:auto; border-radius:0; background:none; color:#fff; font-size:13px; }
.topbar-right .topbar-hotline{ display:inline-flex; gap:6px; align-items:center; font-weight:500; padding:4px 12px; border-radius:999px; background:linear-gradient(135deg,#e13b3b,#c62828); box-shadow:0 2px 8px rgba(198,40,40,.45); transition:.2s; }
.topbar-right .topbar-hotline b{ font-family:"Kanit",sans-serif; font-size:15px; letter-spacing:.5px; color:#fff; }
.topbar-right .topbar-hotline i{ animation:hlRing 2.4s ease-in-out infinite; transform-origin:50% 50%; }
.topbar-right .topbar-hotline:hover{ background:linear-gradient(135deg,#ef4b4b,#d32f2f); transform:translateY(-1px); }
@keyframes hlRing{ 0%,60%,100%{ transform:rotate(0); } 66%{ transform:rotate(-18deg); } 72%{ transform:rotate(16deg); } 78%{ transform:rotate(-12deg); } 84%{ transform:rotate(8deg); } }
@media (prefers-reduced-motion:reduce){ .topbar-right .topbar-hotline i{ animation:none; } }
.topbar-clock b{ color:#fde68a; font-weight:600; font-variant-numeric:tabular-nums; }
.fs-ctl{ display:inline-flex; gap:2px; }
.fs-ctl button{ background:none; border:0; color:#fff; font:inherit; cursor:pointer; padding:2px 7px; border-radius:6px; }
.fs-ctl button:hover{ background:rgba(255,255,255,.2); }

/* พื้นขาวทึบ + เส้นไล่สีด้านล่าง */
.navbar{ background:#fff !important; backdrop-filter:none; border-bottom:0; box-shadow:0 6px 22px rgba(6,46,99,.1); position:relative; }
.navbar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--blue-deep),var(--blue),#38bdf8); }
.brand-text strong{ color:var(--blue-dark); }

/* เมนู: ไทยตัวหนา + อังกฤษเล็กใต้ข้อความ, ตัว active เป็นแคปซูลไล่สี */
.nav-menu{ gap:4px; }
.nav-menu > li > a{ flex-direction:column; justify-content:center; gap:0; padding:7px 16px; border-radius:12px; line-height:1.15; text-align:center; font-weight:500; font-size:14.5px; }
.nav-menu > li > a small, .mobile-menu small{ display:block; font-size:10.5px; font-weight:300; color:var(--gray-400); letter-spacing:.02em; }
.nav-menu > li > a:hover{ background:var(--blue-light); }
.nav-menu > li.active > a{ background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:#fff; box-shadow:0 8px 18px rgba(11,94,215,.35); }
.nav-menu > li.active > a small{ color:#cfe1fa; }
.nav-menu > li > a .chev{ position:absolute; right:3px; top:8px; font-size:8px; }
.nav-menu > li > a{ position:relative; }

/* ช่องค้นหา + ปุ่มเข้าสู่ระบบ */
.nav-search{ display:flex; align-items:center; gap:8px; padding:0 12px; height:40px; width:230px; background:var(--blue-pale); border:1px solid var(--border); border-radius:999px; transition:.2s; }
.nav-search:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,94,215,.15); background:#fff; }
.nav-search i{ color:var(--gray-400); }
.nav-search input{ flex:1; min-width:0; border:0; background:none; outline:0; font:inherit; font-size:13.5px; color:var(--ink); }
.nav-search kbd{ font:inherit; font-size:10.5px; color:var(--gray-600); background:#fff; border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.nav-login{ display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:14px; color:#fff; font-weight:500; line-height:1.15;
  background:linear-gradient(135deg,var(--blue-dark),var(--blue)); box-shadow:0 8px 18px rgba(11,94,215,.35); transition:transform .2s; }
.nav-login:hover{ transform:translateY(-2px); color:#fff; }
.nav-login i{ font-size:24px; } .nav-login small{ display:block; font-size:10.5px; font-weight:300; opacity:.85; }

@media (max-width:1200px){ .nav-search{ width:44px; padding:0 12px; } .nav-search input,.nav-search kbd{ display:none; } }
@media (max-width:991px){ .nav-search,.nav-login{ display:none; } }

/* =========================================================
   RESPONSIVE — Topbar / Navbar / Hamburger / Drawer
   ========================================================= */
/* Hamburger แบบไล่สี */
.hamburger{ width:44px; height:44px; border-radius:12px; border:0; gap:5px; flex-direction:column; justify-content:center;
  background:linear-gradient(135deg,var(--blue-dark),var(--blue)); box-shadow:0 6px 14px rgba(11,94,215,.35); cursor:pointer; }
.hamburger span{ background:#fff; width:20px; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer */
.mobile-drawer{ width:min(86vw,340px); display:flex; flex-direction:column; overflow-y:auto; border-radius:24px 0 0 24px; }
.drawer-head{ padding-bottom:14px; border-bottom:2px solid var(--blue-light); }
.drawer-search{ display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; margin:0 0 10px; background:var(--blue-pale); border:1px solid var(--border); border-radius:999px; }
.drawer-search i{ color:var(--gray-400); }
.drawer-search input{ flex:1; min-width:0; border:0; background:none; outline:0; font:inherit; font-size:14.5px; }
.mobile-menu > li > a{ padding:12px 12px; border-radius:12px; line-height:1.2; }
.mobile-menu > li > a > small{ display:inline; margin-left:8px; font-size:11px; }
.mobile-menu li.active > a{ background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:#fff; }
.mobile-menu li.active > a small, .mobile-menu li.active > a .caret{ color:#cfe1fa; }
.mobile-menu > li{ border-bottom:0; margin-bottom:4px; }
.drawer-login{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px; border-radius:14px; color:#fff; font-weight:500;
  background:linear-gradient(135deg,var(--blue-dark),var(--blue)); box-shadow:0 8px 18px rgba(11,94,215,.35); margin-top:20px; }
.drawer-login small{ font-size:11px; font-weight:300; opacity:.85; }
.drawer-social{ margin-top:16px; display:flex; gap:10px; justify-content:center; }

/* Tablet เล็ก: บีบเมนูไม่ให้ล้น */
@media (max-width:1200px){
  .nav-menu > li > a{ padding:7px 10px; font-size:14px; }
  .nav-login span small{ display:none; }
  .nav-login{ padding:9px 14px; }
}

/* Mobile/Tablet: แสดง topbar แบบกะทัดรัดแทนการซ่อน */
@media (max-width:991px){
  .topbar{ display:block; font-size:12px; }
  .topbar .container{ height:36px; gap:8px; }
  .topbar-left span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; }
  .navbar{ height:68px; }
  .nav-actions{ gap:8px; }
}
@media (max-width:640px){
  .topbar-left span{ display:none; }          /* เหลือแต่โลโก้ */
  .topbar .container{ justify-content:space-between; }
  .topbar-right{ gap:8px; width:100%; justify-content:space-between; }
  #tbDate{ display:none; }
  .topbar-hotline .hl-text{ display:none; }   /* มือถือ: เหลือแค่ไอคอนโทรศัพท์ + เบอร์ 1669 */
  .brand-mark{ width:42px; height:42px; }
  .brand-text strong{ font-size:14px; max-width:46vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .page-hero h1{ font-size:24px; }
}
@media (max-width:380px){
  .fs-ctl button{ padding:2px 5px; }
  .topbar-clock i{ display:none; }
}

/* เมนูย่อย (dropdown) ต้องอยู่เหนือเส้นไล่สีใต้ navbar (.navbar::after) และเนื้อหาด้านล่างเสมอ */
.nav-menu > li:hover{ z-index:20; }
.dropdown{ z-index:30; }
.navbar::after{ z-index:0; pointer-events:none; }