/* One navigation level, distinct brand colors, and a complete closing section. */
.skip-link { position:fixed; top:-80px; left:20px; padding:13px 20px; z-index:300; background:#fff; color:#16241a; border:2px solid currentColor; }
.skip-link:focus { top:12px; }
#main-content { outline:none; }
.chrome-header { position:sticky; top:0; z-index:100; background:#f8f7f2f5; border-bottom:1px solid #d8dbd1; backdrop-filter:blur(16px); }
.chrome-header-row { display:flex; align-items:center; justify-content:space-between; gap:32px; height:94px; }
.chrome-brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; color:#1b2922; text-decoration:none; font-size:31px; font-weight:700; letter-spacing:-1.6px; line-height:1; }
.chrome-brand > span:last-child { white-space:nowrap; }
.chrome-brand-suffix { color:var(--chrome-accent); font-size:.76em; letter-spacing:-1.1px; }
.chrome-emblem { width:38px; height:38px; display:grid; place-items:center; background:var(--chrome-accent); border-radius:12px 12px 12px 2px; transform:rotate(-5deg); }
.chrome-emblem img { width:21px; height:21px; filter:brightness(0) invert(1); transform:rotate(5deg); }
.chrome-desktop-nav { display:flex; align-items:center; gap:32px; margin-left:auto; }
.chrome-desktop-nav a { position:relative; padding-block:16px; text-decoration:none; color:#4a554b; font-size:14px; font-weight:600; white-space:nowrap; }
.chrome-desktop-nav a::after { content:''; position:absolute; bottom:10px; left:0; right:0; height:2px; background:var(--chrome-accent); transform:scaleX(0); transform-origin:left; transition:transform .18s; }
.chrome-desktop-nav a:hover { color:var(--chrome-accent); }.chrome-desktop-nav a:hover::after,.chrome-desktop-nav a:focus-visible::after { transform:scaleX(1); }
.chrome-header-actions { display:flex; align-items:center; gap:18px; }
.chrome-cta { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:12px 21px; background:var(--chrome-accent); color:#fff; text-decoration:none; border-radius:7px; font-size:14px; font-weight:600; white-space:nowrap; transition:filter .18s; }
.chrome-cta:hover { filter:brightness(.88); }.chrome-cta > span { font:22px Arial,sans-serif; }
.network-picker { position:relative; }.network-picker summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; list-style:none; border-radius:7px; color:#34473a; }.network-picker summary::-webkit-details-marker { display:none; }.network-picker summary:hover,.network-picker[open] summary { background:#e6eadf; }
.network-grid-icon { display:grid; grid-template-columns:repeat(2,5px); gap:4px; }.network-grid-icon i { width:5px; height:5px; border:1.5px solid currentColor; border-radius:1px; }
.network-popover { position:absolute; right:0; top:calc(100% + 22px); width:340px; padding:19px; border:1px solid #d3dacf; border-radius:14px; background:#fff; box-shadow:0 16px 44px #16261d1a; }
.network-popover > p { font-size:12px; color:#66705e; padding:4px 10px 13px; }.network-link { display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:8px; color:#283a2c; text-decoration:none; }.network-link:hover,.network-current { background:#f2f5ec; }.network-symbol { width:39px; height:39px; display:grid; place-items:center; background:var(--network-color); border-radius:9px; flex-shrink:0; }.network-symbol img { width:20px; height:20px; }.network-link strong { display:block; font-size:15px; font-weight:600; }.network-link small { font-size:12px; color:#636f5b; }.network-arrow { margin-left:auto; font:19px Arial,sans-serif; }
.mobile-menu-toggle,.chrome-mobile-menu { display:none; }
.chrome-footer { background:var(--chrome-dark); color:#f7f5e9; margin-top:0; overflow:hidden; }
.footer-invitation { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:62px 0 48px; border-bottom:1px solid #ffffff30; }
.footer-invitation p { font-size:11px; font-weight:600; letter-spacing:1.5px; color:var(--chrome-soft); margin-bottom:20px; }.footer-invitation h2 { color:#f8f6eb; font-size:clamp(34px,4.3vw,63px); font-weight:600; line-height:1.27; letter-spacing:-1.8px; }
.footer-action { display:flex; align-items:center; gap:22px; color:var(--chrome-soft); font-size:17px; text-decoration:none; font-weight:600; }.footer-action-arrow { width:88px; height:88px; display:grid; place-items:center; border-radius:50%; color:var(--chrome-dark); background:var(--chrome-soft); font:42px Arial,sans-serif; transition:transform .18s; }.footer-action:hover .footer-action-arrow { transform:rotate(10deg); }
.footer-content { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:80px; padding:48px 0 40px; }
.chrome-brand-footer { color:#fff8ec; font-size:28px; gap:10px; }.chrome-brand-footer .chrome-emblem { background:var(--chrome-soft); width:32px; height:32px; border-radius:10px 10px 10px 2px; }.chrome-brand-footer .chrome-emblem img { width:18px; height:18px; filter:none; }.chrome-brand-footer .chrome-brand-suffix { color:var(--chrome-soft); }
.footer-about > p { max-width:330px; margin:22px 0; color:#e2e5d8; font-size:14px; line-height:1.9; }.footer-dashboard { display:inline-flex; gap:18px; align-items:center; color:var(--chrome-soft); font-size:13px; text-decoration:none; border-bottom:1px solid #ffffff50; padding:8px 0; }
.footer-link-column { display:flex; flex-direction:column; align-items:start; gap:11px; }.footer-link-column h3 { margin:4px 0 12px; font-size:13px; font-weight:400; color:#bfcbbd; }.footer-link-column a { color:#f8f6ec; text-decoration:none; font-size:15px; padding:5px 0; min-height:35px; }.footer-link-column a:hover { color:var(--chrome-soft); text-decoration:underline; text-underline-offset:5px; }.footer-network a { display:flex; justify-content:space-between; gap:24px; width:100%; max-width:240px; }.footer-network a span:last-child { color:var(--chrome-soft); font:19px Arial,sans-serif; }
.footer-signoff { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:15px 0 25px; border-bottom:1px solid #ffffff30; }.footer-large-type { font-size:clamp(65px,11vw,160px); line-height:1; letter-spacing:-8px; font-weight:600; color:var(--chrome-soft); white-space:nowrap; }.footer-large-type > span { font-size:.58em; letter-spacing:-5px; opacity:.7; }.back-top { flex-shrink:0; width:44px; height:44px; border:1px solid #ffffff55; border-radius:50%; display:grid; place-items:center; color:#f5f7eb; text-decoration:none; font:24px Arial,sans-serif; margin-bottom:6px; }.back-top:hover { background:#ffffff15; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:22px 0 26px; font-size:11px; color:#c9d0c2; }.footer-bottom > span:last-child { font-size:9px; letter-spacing:1.3px; }
@media (max-width:1200px) { .chrome-header-row { gap:22px; }.chrome-desktop-nav { gap:20px; }.chrome-brand { font-size:27px; }.chrome-header-actions { gap:10px; }.chrome-cta { padding-inline:17px; gap:13px; }.footer-content { gap:45px; } }
@media (max-width:1000px) {
 .chrome-header-row { height:80px; }.chrome-desktop-nav,.network-picker { display:none; }.chrome-header-actions { margin-left:auto; gap:14px; }.mobile-menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:44px; height:44px; border:1px solid #bdc7b7; border-radius:7px; background:none; cursor:pointer; }.mobile-menu-toggle span { display:block; width:17px; height:1.5px; background:#263d2c; transition:transform .18s; }.mobile-menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.75px) rotate(45deg); }.mobile-menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
 .chrome-mobile-menu:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; gap:35px; padding:20px 30px 30px; position:absolute; top:100%; left:0; right:0; background:#f8f7f2; border-bottom:1px solid #b9c5ae; box-shadow:0 15px 25px #1e2a1c12; max-height:calc(100dvh - 80px); overflow:auto; overscroll-behavior:contain; }.chrome-mobile-menu > nav { display:flex; flex-direction:column; }.chrome-mobile-menu > nav > a { display:flex; justify-content:space-between; text-decoration:none; padding:16px 0; font-size:23px; font-weight:600; color:#233c2b; border-bottom:1px solid #d2d9c9; }.chrome-mobile-menu > nav > a:hover { color:var(--chrome-accent); }.mobile-network > p { font-size:12px; color:#647158; margin:9px 10px; }.mobile-network .network-link { padding-block:9px; }
 .footer-invitation { gap:25px; }.footer-action { flex-direction:column-reverse; gap:15px; font-size:15px; }.footer-action-arrow { width:75px; height:75px; }.footer-content { grid-template-columns:1.2fr 1fr 1fr; gap:30px; }.footer-large-type { letter-spacing:-5px; }.footer-large-type > span { letter-spacing:-3px; }
}
@media (max-width:600px) {
 .chrome-header-row { height:76px; gap:12px; padding-inline:20px; }.chrome-brand { gap:7px; font-size:24px; letter-spacing:-1.1px; }.chrome-brand-suffix { font-size:.7em; letter-spacing:-.8px; }.chrome-emblem { width:30px; height:30px; border-radius:9px 9px 9px 2px; }.chrome-emblem img { width:17px; height:17px; }.chrome-header-actions { gap:10px; }.chrome-cta { display:none; }.mobile-menu-toggle { width:44px; height:42px; }.chrome-mobile-menu:not([hidden]) { grid-template-columns:1fr; gap:24px; padding:8px 20px 24px; max-height:calc(100dvh - 76px); }.chrome-mobile-menu > nav > a { font-size:23px; padding-block:14px; }.mobile-network { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.mobile-network > p { grid-column:1/-1; margin:0 0 10px; }.mobile-network .network-link { display:grid; grid-template-columns:30px 1fr; gap:8px; padding:12px 8px; align-items:center; }.mobile-network .network-symbol { width:30px; height:30px; border-radius:7px; }.mobile-network .network-symbol img { width:17px; height:17px; }.mobile-network .network-arrow,.mobile-network .network-link small { display:none; }.mobile-network .network-link strong { font-size:12px; }
 .footer-invitation { display:block; padding:40px 0 32px; }.footer-invitation p { font-size:9px; letter-spacing:1px; margin-bottom:17px; }.footer-invitation h2 { font-size:36px; letter-spacing:-1px; line-height:1.28; }.footer-action { margin-top:25px; flex-direction:row; justify-content:space-between; font-size:15px; }.footer-action-arrow { width:56px; height:56px; font-size:30px; }.footer-content { grid-template-columns:1fr 1fr; gap:30px 22px; padding:32px 0 25px; }.footer-about { grid-column:1/-1; }.chrome-brand-footer { font-size:27px; }.footer-about > p { margin:17px 0 11px; font-size:14px; max-width:300px; }.footer-dashboard { font-size:13px; min-height:44px; }.footer-link-column { gap:3px; }.footer-link-column h3 { font-size:11px; margin-bottom:10px; }.footer-link-column a { font-size:13px; min-height:44px; padding-block:11px; }.footer-network a { gap:8px; }.footer-network a span:last-child { font-size:16px; }
 .footer-signoff { gap:12px; padding:20px 0; align-items:center; }.footer-large-type { font-size:clamp(36px,10.7vw,62px); letter-spacing:-2px; }.footer-large-type > span { letter-spacing:-1px; }.back-top { width:38px; height:38px; margin:0; font-size:21px; }.footer-bottom { font-size:10px; gap:10px; padding-block:19px 24px; }.footer-bottom > span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { .chrome-desktop-nav a::after,.mobile-menu-toggle span,.footer-action-arrow { transition:none; } }

/* Original outlined wordmarks: no font download or generic icon dependency. */
.chrome-brand { min-height:44px; letter-spacing:normal; }
.chrome-brand .brand-lockup { display:block; width:auto; height:56px; max-width:250px; object-fit:contain; }
.chrome-brand-footer .brand-lockup { height:54px; max-width:250px; }
.network-symbol { background:none; border-radius:0; }
.network-symbol img { width:39px; height:39px; }

/* Comfortable common chrome, retaining all four brands and navigation contracts. */
.chrome-header-row { min-height:82px; height:auto; padding-block:12px; }
.chrome-header { background:#fffffffa; border-bottom-color:#dce3df; }
.chrome-desktop-nav a { min-height:44px; display:inline-flex; align-items:center; font-size:.9375rem; }
.network-picker > summary,.mobile-menu-toggle { min-width:44px; min-height:44px; }
.network-popover { max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain; }
.chrome-mobile-menu { max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; }
.chrome-mobile-menu[hidden] { display:none; }
.chrome-header :is(a,button,summary):focus-visible,.chrome-footer :is(a,button):focus-visible { outline:3px solid #174bd2; outline-offset:4px; box-shadow:0 0 0 3px white; }
:is(.suite-thaieater,.suite-thaiez) .chrome-brand .brand-lockup { height:48px; max-width:220px; }
.suite-thaieater { --chrome-accent:#b83b16; --chrome-soft:#fce39a; }
.suite-thaiez { --chrome-accent:#244ad9; --chrome-soft:#e5f5a6; }
:is(.suite-thaieater,.suite-thaiez) .chrome-cta { border-radius:12px; }
:is(.suite-thaieater,.suite-thaiez) .chrome-footer { background:#f0f4df; color:#253a2b; margin-top:0; }
.suite-thaiez .chrome-footer { background:#eae6ff; color:#24315a; }
:is(.suite-thaieater,.suite-thaiez) .footer-invitation { padding-block:48px; border-color:#0002; }
:is(.suite-thaieater,.suite-thaiez) .footer-invitation h2 { font-size:clamp(2rem,3.7vw,3.25rem); line-height:1.5; color:inherit; }
:is(.suite-thaieater,.suite-thaiez) .footer-invitation p { color:inherit; font-size:.75rem; }
:is(.suite-thaieater,.suite-thaiez) .footer-action { background:var(--chrome-accent); color:white; border-color:transparent; border-radius:12px; padding:16px 22px; }
:is(.suite-thaieater,.suite-thaiez) .footer-action-arrow { width:44px; height:44px; background:#ffffff26; color:white; }
:is(.suite-thaieater,.suite-thaiez) .footer-content { padding-block:36px; border-color:#0002; }
:is(.suite-thaieater,.suite-thaiez) .footer-content :is(p,h3,a),:is(.suite-thaieater,.suite-thaiez) .footer-bottom { color:inherit; }
:is(.suite-thaieater,.suite-thaiez) .footer-content a { min-height:44px; display:flex; align-items:center; text-underline-offset:4px; }
:is(.suite-thaieater,.suite-thaiez) .footer-about .brand-lockup { filter:brightness(0) saturate(100%); opacity:.85; }
:is(.suite-thaieater,.suite-thaiez) .footer-signoff { display:none; }
:is(.suite-thaieater,.suite-thaiez) .footer-bottom { border-color:#0002; font-size:.75rem; }
.collection-demo-note { font-size:.75rem; color:#52615b; margin-top:22px; line-height:1.75; }
.collection-demo-note + .cover-ribbon { margin-top:16px; }
@media (max-width:760px) {
 .chrome-header-row { gap:10px; min-height:76px; padding-block:10px; }
 :is(.suite-thaieater,.suite-thaiez) .chrome-brand .brand-lockup { height:38px; max-width:170px; }
 :is(.suite-thaieater,.suite-thaiez) .chrome-header-actions { gap:6px; }
 :is(.suite-thaieater,.suite-thaiez) .chrome-header .chrome-cta { display:none; }
 :is(.suite-thaieater,.suite-thaiez) .footer-invitation { gap:20px; padding-block:36px; }
 :is(.suite-thaieater,.suite-thaiez) .footer-invitation h2 { font-size:2rem; }
 :is(.suite-thaieater,.suite-thaiez) .footer-action { min-height:52px; }
 .collection-demo-note { margin-top:18px; }
}
@media (max-width:1200px) { .chrome-brand .brand-lockup { height:50px; max-width:225px; } }
@media (max-width:600px) {
 .chrome-brand .brand-lockup { height:46px; max-width:205px; }
 .chrome-brand-footer .brand-lockup { height:51px; max-width:230px; }
 .mobile-network .network-symbol img { width:30px; height:30px; }
}

/* text lockup: mark + brand name + sub line */
.chrome-brand { gap:10px; }
.chrome-emblem { display:inline-grid; place-items:center; width:44px; height:44px; flex:none; }
.chrome-emblem img { width:40px; height:40px; display:block; }
.brand-text { display:flex; flex-direction:column; gap:3px; line-height:1; }
.brand-name { display:inline-flex; align-items:center; gap:6px; font-size:28px; font-weight:800; letter-spacing:0; color:var(--chrome-dark); white-space:nowrap; }
.brand-badge { font-size:.55em; font-weight:800; line-height:1; padding:4px 7px; border-radius:8px; background:var(--chrome-accent); color:#fff; }
.brand-sub { font-size:12px; font-weight:600; color:var(--chrome-accent); white-space:nowrap; letter-spacing:0; }
.chrome-brand-footer .chrome-emblem { width:44px; height:44px; background:none; }
.chrome-brand-footer .chrome-emblem img { width:40px; height:40px; }
.chrome-brand-footer .brand-name { color:#fff8ec; }
.chrome-brand-footer .brand-sub { color:var(--chrome-soft); }
@media (max-width:760px) { .chrome-emblem, .chrome-emblem img { width:34px; height:34px; } .brand-name { font-size:22px; } .brand-sub { font-size:11px; } }

/* ---- Header v4: compact row, pill navigation, labelled network menu, tighter call to action ---- */
html body[class] .chrome-header-row { min-height:68px; height:auto; padding-block:10px; gap:20px; }
html body[class] .chrome-header .chrome-emblem { width:40px; height:40px; }
html body[class] .chrome-header .brand-name { font-size:1.5rem; line-height:1.15; }
html body[class] .chrome-header .brand-sub { font-size:.75rem; }
html body[class] .chrome-desktop-nav { gap:4px; }
html body[class] .chrome-desktop-nav a { min-height:40px; padding:0 14px; border-radius:10px; font-size:.9375rem; font-weight:600; color:#1f2430; letter-spacing:0; transition:background-color .15s ease,color .15s ease; }
html body[class] .chrome-desktop-nav a::after { content:none; }
html body[class] .chrome-desktop-nav a:hover,
html body[class] .chrome-desktop-nav a:focus-visible { background:color-mix(in srgb, var(--chrome-accent, var(--accent, #333)) 12%, transparent); color:var(--chrome-accent, var(--accent, #111)); }
html body[class] .chrome-header-actions { gap:10px; }
html body[class] .network-picker > summary { display:inline-flex; align-items:center; gap:8px; width:auto; min-width:44px; height:40px; min-height:40px; padding:0 12px; border:1px solid rgba(20,24,32,.14); border-radius:10px; background:transparent; color:#1f2430; font-size:.875rem; font-weight:600; white-space:nowrap; }
html body[class] .network-picker > summary::after { content:"เว็บในเครือ"; }
html body[class] .network-picker > summary:hover,
html body[class] .network-picker[open] > summary { background:rgba(20,24,32,.06); }
html body[class] .chrome-header .chrome-cta { min-height:44px; padding:0 18px; gap:8px; font-size:.9375rem; font-weight:700; line-height:1; white-space:nowrap; }
html body[class] .chrome-header .chrome-cta > span { font:inherit; font-size:1rem; }
@media (max-width:1180px) {
  html body[class] .network-picker > summary { padding:0; justify-content:center; width:44px; }
  html body[class] .network-picker > summary::after { content:none; }
  html body[class] .chrome-desktop-nav a { padding:0 10px; }
}
@media (max-width:760px) {
  html body[class] .chrome-header-row { min-height:60px; padding-block:8px; gap:10px; }
  html body[class] .chrome-header .chrome-emblem { width:34px; height:34px; }
  html body[class] .chrome-header .brand-name { font-size:1.3125rem; }
}
@media (prefers-reduced-motion:reduce) { html body[class] .chrome-desktop-nav a { transition:none; } }