/* Shared public navigation: home, catalogue, articles and not-found page. */
.top,.nav{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","Leelawadee UI","Noto Sans Thai",sans-serif;box-sizing:border-box}
.nav *{box-sizing:border-box}
.top{background:#041b3b;color:#cde4ff}
.top>.wrap,.nav>.wrap{width:min(1220px,calc(100% - 56px));margin:auto;box-sizing:border-box}
.top>.wrap{display:flex;justify-content:space-between;gap:20px;padding:10px 0;font-size:11px;line-height:1.4;letter-spacing:.1em}
.nav{position:sticky;top:0;z-index:20;background:#fff!important;border-bottom:0!important;box-shadow:0 8px 24px rgba(5,37,82,.08);backdrop-filter:blur(12px)}
.nav>.wrap{display:flex;align-items:center;gap:32px;height:82px;padding:0}
.nav .brand{display:flex;align-items:center;gap:16px;min-width:0;color:#092f65;text-decoration:none}
.nav .brand-logo{display:block;flex:none;width:104px;height:74px;padding:2px;object-fit:contain;border-radius:0;background:transparent}
.nav .brand-name{display:inline;max-width:none;color:#092f65;font-family:"Noto Sans Thai",Tahoma,sans-serif;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:0;white-space:nowrap}
.nav .navlinks{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:14px;font-weight:600;line-height:1.4;color:#092f65}
.nav .navlinks a{color:#092f65;text-decoration:none}
.nav .navlinks>a,.nav .nav-product>a{display:inline-flex;align-items:center;line-height:1.4}
.nav .navlinks a:hover,.nav .navlinks a:focus-visible{color:#1264b7}
.nav .nav-product{position:relative;display:flex;align-items:center;gap:0;line-height:1.4}
.nav .nav-dropdown-toggle,.nav .mobile-menu-toggle{border:0;background:transparent;color:#092f65;cursor:pointer;font:inherit}
.nav .nav-dropdown-toggle{display:none;padding:5px 7px;font-weight:800}
.nav .mobile-menu-toggle{display:none;margin-left:auto;font-size:24px}
.nav .nav-dropdown{position:absolute;top:100%;left:0;z-index:30;min-width:270px;padding:10px;background:#fff;border:1px solid #c8dbed;border-radius:16px;box-shadow:0 18px 45px rgba(2,23,56,.24);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .22s,transform .22s,visibility .22s}
.nav .nav-download .nav-dropdown{left:auto;right:0}
.nav .nav-product:hover .nav-dropdown,.nav .nav-product:focus-within .nav-dropdown,.nav .nav-product.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav .nav-dropdown a{display:block;padding:11px 13px;border-radius:5px;transition:background .2s,transform .2s}
.nav .nav-dropdown a:hover,.nav .nav-dropdown a:focus-visible{background:#e4f1ff;color:#074b94;transform:translateX(5px)}
.nav .navlinks .nav-download>.nav-dropdown-toggle{display:inline-flex;align-items:center;position:static;padding:0;font-size:inherit;font-weight:inherit;line-height:1.4;text-decoration:none;transform:none!important}
@media(min-width:851px) and (max-width:1050px){.nav .brand-name{font-size:15px}.nav>.wrap{gap:10px}.nav .navlinks{gap:11px}}
@media(max-width:850px){
  .nav>.wrap{position:relative;height:68px}
  .nav .brand-name{display:none}
  .nav .brand-logo{width:84px;height:60px}
  .nav .mobile-menu-toggle{display:block}
  .nav .navlinks{display:none;position:absolute;top:100%;left:0;right:0;align-items:stretch;flex-direction:column;gap:0;padding:12px 18px 20px;background:#fff;border:1px solid #d6e5f3;box-shadow:0 15px 22px rgba(2,25,56,.2);margin-left:0}
  .nav .navlinks.open{display:flex}
  .nav .navlinks>a,.nav .nav-product>a{display:block;padding:11px 0}
  .nav .nav-product{display:block}
  .nav .nav-dropdown-toggle{display:block;position:absolute;right:0;top:7px;font-size:12px;text-decoration:underline;text-underline-offset:3px;transform:none!important}
  .nav .nav-dropdown{position:static;min-width:0;max-height:0;overflow:hidden;padding:0;border:0;box-shadow:none;transform:none;transition:max-height .25s,opacity .25s}
  .nav .nav-product.open .nav-dropdown{max-height:280px;padding:8px;visibility:visible;opacity:1}
  .nav .nav-product:not(.open) .nav-dropdown{visibility:hidden;opacity:0;max-height:0}
  .nav .navlinks .nav-download>.nav-dropdown-toggle{display:block;width:100%;padding:11px 0;text-align:left}
}
@media(max-width:560px){.top{display:none}.nav>.wrap{height:60px}.nav .brand-logo{width:74px;height:52px}}
@media(prefers-reduced-motion:reduce){.nav .nav-dropdown,.nav .nav-dropdown a{transition:none}}