/* Shared navigation for the landing page and FAQ. Keep overrides here. */
html{scrollbar-gutter:stable}
.topbar{height:80px;position:sticky;top:0;z-index:40;border-bottom:1px solid #e3e3e3;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);font-family:'IBM Plex Sans Thai',sans-serif;color:#292929}
.topbar .nav.wrap{width:min(1160px,calc(100% - 80px));height:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.topbar .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#292929;flex:none}
.topbar .brand .brand-icon{width:35px;height:35px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.topbar .brand .brand-name{font-size:29px;font-weight:600;line-height:1}
.topbar .brand .brand-sub{display:inline;border-left:1px solid #e3e3e3;padding-left:13px;margin-left:4px;color:#6f6f6f;font-size:12px;white-space:nowrap}
.topbar .nav-links{display:flex;position:static;align-items:center;flex-direction:row;gap:24px;padding:0;border:0;background:none;box-shadow:none;font-size:13px;line-height:1.65}
.topbar .nav-links>a{display:inline-flex;align-items:center;min-height:44px;padding:0;color:#5a5a5a;text-decoration:none;white-space:nowrap;font-weight:400}
.topbar .nav-links>a:hover{color:#222}
.topbar .nav-actions{display:flex;align-items:center;gap:12px;flex:none}
.topbar .nav-actions>.button.small{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:8px 15px;border:1px solid #06c755;border-radius:7px;background:#06c755;color:#063b1b;font-size:12px;font-weight:500;line-height:1.65;text-decoration:none;white-space:nowrap;box-shadow:none}
.topbar .nav-actions>.button.small:hover{background:#05b94e;border-color:#05b94e}
.topbar .nav-actions>.button.small>.icon{width:16px;height:16px;display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.35}
.topbar .nav-add-label{display:inline}.topbar .nav-add-short{display:none}
.topbar .menu-button{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:1px solid #e3e3e3;border-radius:6px;background:#fff;color:#333;cursor:pointer}
.topbar .menu-button .icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35}
.topbar .nav-help{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:1px solid #e1e1e1;border-radius:50%;background:#fff;color:#666;text-decoration:none}
.topbar .nav-help>.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.topbar .nav-help:hover,.topbar .nav-help[aria-current=page]{background:#f2f2f2;border-color:#888;color:#222}
.topbar a:focus-visible,.topbar button:focus-visible{outline:2px solid #555;outline-offset:4px}
@media(max-width:1100px){.topbar .brand .brand-sub{display:none}.topbar .nav-links{gap:18px;font-size:12px}.topbar .nav.wrap{gap:20px}}
@media(max-width:800px){.topbar{height:66px}.topbar .nav.wrap{width:calc(100% - 40px);gap:12px}.topbar .brand{gap:8px}.topbar .brand .brand-icon{width:28px;height:28px}.topbar .brand .brand-name{font-size:25px}.topbar .nav-actions{gap:7px}.topbar .nav-actions>.button.small{min-height:40px;font-size:10px;padding:9px 11px;gap:6px}.topbar .nav-actions>.button.small>.icon{width:14px;height:14px}.topbar .menu-button{display:flex}.topbar .nav-links{display:none;position:absolute;top:65px;left:0;right:0;padding:12px 20px;border-bottom:1px solid #ddd;background:#fff;box-shadow:0 8px 14px #00000005;z-index:50;gap:2px;font-size:13px}.topbar .nav-links.open{display:flex;align-items:stretch;flex-direction:column}.topbar .nav-links>a{min-height:44px;padding:10px 14px;white-space:normal}}
@media(max-width:380px){.topbar .nav.wrap{width:calc(100% - 32px);gap:9px}.topbar .brand .brand-name{font-size:24px}.topbar .nav-actions{gap:6px}.topbar .nav-add-label{display:none}.topbar .nav-add-short{display:inline}.topbar .nav-actions>.button.small{padding:9px 10px;gap:5px}.topbar .nav-actions>.button.small>.icon{display:none}}

/* LINE invitation: a compact, friendly pill with a recognizable chat mark. */
.topbar .nav-actions>.button.small{min-height:44px;gap:9px;padding:6px 16px 6px 7px;border-radius:999px;border-color:#06c755;background:#06c755;color:#073d20;font-size:12px;font-weight:500;box-shadow:0 2px 3px #063b1b08;transition:background .2s,box-shadow .2s,transform .2s}
.topbar .nav-line-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#fff}
.topbar .nav-line-mark svg{width:25px;height:25px;overflow:visible}
.topbar .nav-line-mark path{fill:#06b94f;stroke:none}
.topbar .nav-line-mark text{fill:white;font:bold 6px Arial,sans-serif;letter-spacing:-.2px}
.topbar .nav-actions>.button.small:hover{background:#08d15c;border-color:#08d15c;box-shadow:0 3px 9px #06c75524;transform:translateY(-1px)}
.topbar .nav-actions>.button.small:active{transform:translateY(0);box-shadow:none}
@media(max-width:800px){.topbar .nav-actions>.button.small{min-height:40px;gap:7px;padding:5px 12px 5px 6px;font-size:11px}.topbar .nav-line-mark{width:27px;height:27px;flex-basis:27px}.topbar .nav-line-mark svg{width:23px;height:23px}}
@media(max-width:380px){.topbar .nav-actions>.button.small{gap:5px;padding:5px 10px 5px 5px;font-size:10px}.topbar .nav-line-mark{width:25px;height:25px;flex-basis:25px}.topbar .nav-line-mark svg{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.topbar .nav-actions>.button.small{transition:none}}