:root {
  --site-ink: #282724;
  --site-teal: #2f7d70;
  --site-mint: #e8f4ef;
  --site-coral: #ee765b;
  --site-line: rgba(40, 39, 36, 0.12);
  --site-shadow: 0 24px 70px rgba(46, 54, 49, 0.12);
  --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[hidden] { display: none !important; }
.site-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-nav-icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header-shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; border-radius: 10px; color: #fff; background: var(--site-ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.announcement { position: relative; z-index: 30; overflow: hidden; margin-bottom: 10px; border-radius: 30px; color: var(--site-ink); background: linear-gradient(108deg, #fff3e6 0%, #edf6f1 25%, #dcefe8 52%, #e8f4ef 74%, #ffede7 100%); font-size: 14.5px; }
.announcement::before { position: absolute; top: -130px; left: 37%; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.44); filter: blur(14px); content: ""; }
.announcement::after { position: absolute; right: 7%; bottom: -120px; width: 250px; height: 250px; border-radius: 50%; background: rgba(238,118,91,.09); filter: blur(18px); content: ""; }
.announcement-inner { position: relative; z-index: 1; display: flex; min-height: 64px; align-items: center; gap: 14px; }
.announcement-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; color: var(--site-coral); background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(73,66,60,.08); }
.announcement-icon .site-nav-icon { width: 16px; height: 16px; stroke-width: 2; }
.announcement-copy { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.announcement-copy strong { font-weight: 800; }
.announcement-copy > span { color: rgba(40,39,36,.78); font-weight: 500; }
.announcement a { display: flex; min-height: 42px; align-items: center; margin-left: auto; padding: 0; white-space: nowrap; }
.announcement-line-badge { width: auto; height: 36px; }
.announcement-arrow { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; transition: transform 180ms var(--site-ease), background 180ms ease; }
.announcement a:hover .announcement-arrow { background: rgba(255,255,255,.65); transform: translateX(3px); }

.site-header { position: sticky; z-index: 40; top: 0; height: 86px; border-bottom: 1px solid transparent; background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); transition: box-shadow 180ms ease, border 180ms ease; }
.site-header.is-scrolled { border-color: var(--site-line); box-shadow: 0 10px 30px rgba(40,39,36,.05); }
.nav-inner { display: grid; height: 86px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand strong { font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.desktop-nav { display: flex; align-items: center; gap: 30px; }
.desktop-nav a { position: relative; padding: 10px 0; font-size: 13px; font-weight: 700; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; border-radius: 2px; background: var(--site-teal); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.language-picker { position: relative; }
.language-toggle { display: flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--site-line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.language-options { position: absolute; top: calc(100% + 10px); right: 0; width: 190px; padding: 8px; border: 1px solid var(--site-line); border-radius: 16px; background: #fff; box-shadow: var(--site-shadow); }
.language-option { display: grid; width: 100%; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.language-option:hover,
.language-option.is-active { background: var(--site-mint); }
.language-option b { font-size: 10px; letter-spacing: .08em; }
.language-option span { font-size: 13px; }
.language-option i { color: var(--site-teal); font-style: normal; opacity: 0; }
.language-option.is-active i { opacity: 1; }
.nav-download.official-app-store-badge,
.nav-download.official-app-store-badge:hover { display: inline-flex; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.app-store-badge-art,
.app-store-badge-art img { display: block; width: auto; height: 40px; }
html[lang="th"] .app-store-badge-en,
html[lang="en"] .app-store-badge-th { display: none; }
.menu-toggle { position: relative; display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--site-line); border-radius: 13px; background: #fff; cursor: pointer; }
.menu-toggle span { position: absolute; width: 20px; height: 1.5px; background: var(--site-ink); transition: transform 180ms ease; }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: rotate(-45deg); }
.mobile-menu { display: none; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }
}

@media (max-width: 900px) {
  .site-header-shell { width: min(100% - 36px, 720px); }
  .announcement-copy > span,
  .desktop-nav,
  .nav-download,
  .nav-download.official-app-store-badge { display: none; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .menu-toggle { display: grid; }
  .mobile-menu { position: absolute; top: 100%; right: 18px; left: 18px; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--site-line); border-radius: 18px; background: #fff; box-shadow: var(--site-shadow); }
  .mobile-menu:not([hidden]) { display: flex; }
  .mobile-menu a { padding: 13px 14px; border-radius: 10px; font-size: 13px; font-weight: 750; }
  .mobile-menu a:hover { background: var(--site-mint); }
}

@media (max-width: 600px) {
  .site-header-shell { width: min(100% - 24px, 520px); }
  .announcement { margin-bottom: 6px; border-radius: 18px; }
  .announcement-inner { width: calc(100% - 20px); min-height: 44px; gap: 8px; font-size: 9px; }
  .announcement-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .announcement-icon .site-nav-icon { width: 12px; height: 12px; }
  .announcement a { min-height: 32px; margin-left: auto; padding: 0; }
  .announcement-line-badge { height: 28px; }
  .announcement-arrow { width: 22px; height: 22px; }
  .site-header,
  .nav-inner { height: 70px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 18px; }
  .language-toggle { min-height: 40px; padding-inline: 11px; }
  .language-toggle [data-language-label] { display: none; }
}