/* line_opdc — public site (extends the mockup-1-official.html visual language;
   mobile layout matches the mockup, desktop gets a real two-column reflow
   instead of just framing the phone layout in a wider viewport). */

:root, [data-bs-theme="light"] {
  --navy:#0e2f5a;
  --navy-dark:#081d3d;
  --gold:#c9a35c;
  --gold-light:#f3e6c9;
  --bg:#f4f6f9;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e2e6ec;
}
[data-bs-theme="dark"] {
  /* --navy:#13407a; */
  --navy:#0e2f5a;
  --navy-dark:#081d3d;
  --gold:#d9b876;
  --gold-light:#3a2f19;
  --bg:#0b1420;
  --text:#e7ebf1;
  --muted:#94a1b3;
  --card:#121d2c;
  --border:#22303f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Noto Sans Thai','Sarabun',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit;}

/* ============ Shared top header ============ */
.site-header{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
  padding:18px 16px 16px;
  position:sticky; top:0; z-index:30;
}
.site-header-inner{ max-width:1180px; margin:0 auto; }
.header-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.badge-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:20px; flex-shrink:0;
  border:1px solid rgba(201,163,92,0.5);
}
.header-title{font-size:calc(21px * var(--font-scale, 1));font-weight:700;line-height:1.3;}
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.theme-toggle-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer;
}
.home-link{
  display:flex; align-items:center; justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#fff; flex-shrink:0; font-size:14px;
}
/* Font-size buttons reuse the theme-toggle/FAB button's size, shape, and
   navy/translucent-white background as-is — just the "ก-"/"ก+" label needs
   its own fixed size (it's a UI control, not scaled body text, so it stays
   legible and stable regardless of --font-scale). */
.font-btn{
  font-size:13px; font-weight:800; letter-spacing:-0.5px;
}
.font-btn:disabled{ opacity:.45; cursor:not-allowed; }
.search-wrap{position:relative;}
.search-input{
  width:100%;
  padding:11px 14px 11px 38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff; font-family:inherit; font-size:calc(13.5px * var(--font-scale, 1)); outline:none;
}
.search-input::placeholder{color:#a9b8d1;}
.search-input:focus{background:rgba(255,255,255,0.14);border-color:var(--gold);}
.search-icon{ position:absolute;left:12px;top:50%;transform:translateY(-50%); color:#a9b8d1;font-size:14px; }
.result-count{ font-size:calc(11.5px * var(--font-scale, 1));color:#cfd9ea;margin-top:8px;padding-left:2px; display:none; }

/* ============ Home / landing page ============ */
.home-main{ max-width:1180px; margin:0 auto; padding:28px 16px 60px; }
.home-lede{ max-width:640px; margin:0 auto 28px; text-align:center; }
.home-lede h1{ font-size:calc(20px * var(--font-scale, 1)); color:var(--navy); font-weight:700; margin:0 0 8px; }
[data-bs-theme="dark"] .home-lede h1{ color:var(--gold); }
.home-lede p{ font-size:calc(13.5px * var(--font-scale, 1)); color:var(--muted); line-height:1.6; margin:0; }

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}
.menu-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:22px 20px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.menu-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(8,29,61,0.12); border-color:var(--gold); }
.menu-card .icon{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; display:flex;align-items:center;justify-content:center;font-size:20px;
  border:1px solid rgba(201,163,92,0.5);
}
.menu-card .name{ font-weight:700; font-size:calc(14.5px * var(--font-scale, 1)); color:var(--navy); }
[data-bs-theme="dark"] .menu-card .name{ color:var(--gold); }
.menu-card .desc{ font-size:calc(12.5px * var(--font-scale, 1)); color:var(--muted); line-height:1.6; flex:1; }
.menu-card .go{ font-size:calc(12px * var(--font-scale, 1)); font-weight:700; color:var(--gold-dark,#8a6a1f); display:flex; align-items:center; gap:6px; }
[data-bs-theme="dark"] .menu-card .go{ color:var(--gold); }

/* ============ Menu (FAQ-style) page ============ */
.menu-layout{ max-width:1180px; margin:0 auto; padding:0 16px; }
.menu-crumb{ max-width:1180px; margin:0 auto; padding:10px 16px 0; font-size:calc(12px * var(--font-scale, 1)); color:var(--muted); }
.menu-crumb a{ text-decoration:none; color:var(--muted); }
.menu-crumb a:hover{ color:var(--navy); }

/* ---- OLD mobile category nav: pinned single-line chip strip nested inside
   the sticky header (matches the original mockup). Replaced below by
   .cat-fullscreen (a normal-flow, full-height section, not sticky) per
   2026-07-24 request — kept here, commented out, rules only (surrounding
   prose left as plain text since it's now inside this outer comment), in
   case we want the pinned strip back.

Mobile: horizontal category chip strip (matches the original mockup).
Nested inside .site-header (itself position:sticky) instead of being its
own separately-stickied sibling with a guessed pixel offset — that offset
drifted out of sync whenever the header's real height changed (e.g. a
longer menu name/description wrapping to an extra line), leaving a gap.
Being a literal child of the sticky header means it can never separate.
.cat-nav-wrap{
  position:relative;
  margin:12px -16px -16px;
  background:var(--bg); border-bottom:1px solid var(--border);
}
Default (collapsed): a single-line horizontally-scrollable chip strip,
with edge chevrons hinting there's more to scroll (toggled by public.js).
Expanding (.cat-nav-wrap.expanded, via the ยืด/หุบ toggle button below)
switches it to wrap onto as many lines as needed instead, so every
category is visible at once.
.cat-nav{
  display:flex; overflow-x:auto; gap:8px; padding:10px 20px;
  scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-nav-wrap.expanded .cat-nav{
  flex-wrap:wrap; overflow-x:visible; padding:10px 10px 14px;
}
.cat-nav-row{ position:relative; }
.cat-nav-arrow{
  position:absolute; top:0; bottom:0; width:40px;
  display:flex; align-items:center;
  pointer-events:none; opacity:1; transition:opacity .15s ease;
}
.cat-nav-arrow i{
  width:20px;height:20px;border-radius:50%;
  background:var(--card); border:1px solid var(--border); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:9px;
  box-shadow:0 2px 6px rgba(8,29,61,0.15);
}
.cat-nav-arrow-right{ right:0; justify-content:flex-end; background:linear-gradient(to right, transparent, var(--bg) 60%); }
.cat-nav-arrow-left{ left:0; justify-content:flex-start; background:linear-gradient(to left, transparent, var(--bg) 60%); }
.cat-nav-wrap.at-end .cat-nav-arrow-right{ opacity:0; }
.cat-nav-wrap.at-start .cat-nav-arrow-left{ opacity:0; }
.cat-nav-wrap.expanded .cat-nav-arrow{ display:none; }
Search matched no categories at all — every chip is display:none, so
there's nothing to scroll to; force both edge arrows off (see public.js).
.cat-nav-wrap.no-chips .cat-nav-arrow{ display:none; }

ยืด/หุบ toggle — sits under the chip strip, always visible so a collapsed
scrollable row can still be expanded to show every category at once.
.cat-nav-toggle{
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:100%; padding:6px 0 9px; margin-top:-2px;
  background:none; border:none; cursor:pointer;
  font-size:calc(11px * var(--font-scale, 1)); font-weight:600; color:var(--muted);
}
.cat-nav-toggle i{ font-size:9px; transition:transform .2s ease; }
.cat-nav-wrap.expanded .cat-nav-toggle i{ transform:rotate(180deg); }
.cat-chip{
  flex-shrink:0; padding:7px 13px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  font-size:calc(12px * var(--font-scale, 1)); font-weight:600; color:var(--navy);
  white-space:nowrap; cursor:pointer;
}
[data-bs-theme="dark"] .cat-chip{ color:var(--gold); }
.cat-chip i{ color:var(--gold); }
.cat-chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.cat-chip.active i{ color:var(--gold); }
---- end OLD mobile category nav ---- */

/* ============ NEW mobile category picker: full-screen section ============
   Added 2026-07-24, replacing the pinned-in-header chip strip above. Renders
   as its own section right after the header, in normal document flow (never
   sticky/pinned), sized to roughly fill the remaining viewport height so it
   reads as its own "screen" — tapping a card jump-scrolls down to that
   category's heading in the list below (same scrollToCat() the old chips
   used). Hidden ≥992px, where the desktop sidebar nav (.cat-sidebar) is used
   instead — see that breakpoint further down. --header-h is kept in sync
   with the sticky header's real rendered height by public.js. */
.cat-fullscreen{
  min-height:calc(100vh - var(--header-h, 130px));
  display:flex; flex-direction:column; justify-content:center;
  max-width:1180px; margin:0 auto; padding:28px 16px 44px;
  transition:min-height .15s ease;
}
/* A search is active (public.js toggles this on #catFullscreen) — full-height
   centering leaves a huge empty gap above/below the handful of matching cards,
   so drop the forced height and hug the top instead. */
.cat-fullscreen.filtering{
  min-height:0; justify-content:flex-start; padding:16px 16px 20px;
}
.cat-fullscreen.filtering .cat-fullscreen-hint{ display:none; }
.cat-fullscreen-title{
  font-size:calc(12.5px * var(--font-scale, 1)); font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin:0 2px 14px;
}
.cat-fullscreen-grid{ display:flex; flex-direction:column; gap:10px; }
.cat-fullscreen-card{
  display:flex; align-items:center; gap:14px; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:15px 16px; cursor:pointer; text-align:left; font-family:inherit;
  transition:transform .15s ease, border-color .15s ease;
}
.cat-fullscreen-card:active{ transform:scale(0.98); border-color:var(--gold); }
.cat-fullscreen-card .icon{
  width:44px;height:44px;border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; display:flex;align-items:center;justify-content:center;font-size:18px;
  border:1px solid rgba(201,163,92,0.5);
}
.cat-fullscreen-card .name{ flex:1; font-weight:700; font-size:calc(14px * var(--font-scale, 1)); color:var(--navy); }
[data-bs-theme="dark"] .cat-fullscreen-card .name{ color:var(--gold); }
.cat-fullscreen-card .count{ font-size:calc(11.5px * var(--font-scale, 1)); color:var(--muted); flex-shrink:0; }
.cat-fullscreen-card .arrow{ color:var(--gold); font-size:13px; flex-shrink:0; }
.cat-fullscreen-hint{
  text-align:center; margin-top:22px; color:var(--muted); font-size:15px;
  animation:cat-fullscreen-bounce 1.6s ease-in-out infinite;
}
@keyframes cat-fullscreen-bounce{
  0%, 100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(6px); opacity:1; }
}

/* Desktop sidebar nav is JS-populated but must stay hidden until the ≥992px
   layout below turns it on — otherwise it renders as a bare list of links
   stacked under the mobile chip strip. */
.cat-sidebar{ display:none; }

.menu-body{ padding:14px 0 40px; }
.section-title{
  display:flex; align-items:center; gap:8px;
  font-size:calc(14.5px * var(--font-scale, 1)); font-weight:700; color:var(--navy);
  margin:22px 2px 10px; scroll-margin-top:160px;
}
[data-bs-theme="dark"] .section-title{ color:var(--gold); }
.section-title .num-pill{ background:var(--gold-light); color:#8a6a1f; border-radius:6px; padding:2px 8px; font-size:calc(11px * var(--font-scale, 1)); }
[data-bs-theme="dark"] .section-title .num-pill{ color:var(--gold); }

.faq-card{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  margin-bottom:8px; overflow:hidden;
}
.faq-q{ display:flex; align-items:flex-start; gap:10px; padding:13px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.q-index{
  flex-shrink:0; width:22px;height:22px;border-radius:6px;
  background:var(--navy); color:#fff; font-size:11px; font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.q-text{ flex:1; font-size:calc(13.5px * var(--font-scale, 1)); font-weight:600; line-height:1.5; color:var(--text); }
.chevron{ flex-shrink:0; color:var(--gold); font-size:13px; transition:transform 0.2s ease; margin-top:3px; }
.faq-card.open .chevron{transform:rotate(180deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; background:rgba(0,0,0,0.015); }
[data-bs-theme="dark"] .faq-a{ background:rgba(255,255,255,0.02); }
.faq-card.open .faq-a{max-height:4000px;}
.faq-a-inner{
  padding:2px 14px 15px 44px; font-size:calc(13px * var(--font-scale, 1)); line-height:1.75; color:var(--muted);
  border-top:1px dashed var(--border); padding-top:11px;
}
.faq-a-inner p{ margin:0 0 10px; }
.faq-a-inner p:last-child{ margin-bottom:0; }
.faq-a-inner a{ color:var(--navy); text-decoration:underline; }
[data-bs-theme="dark"] .faq-a-inner a{ color:var(--gold); }
mark{background:var(--gold-light);color:#5c451a;border-radius:2px;padding:0 1px;}
[data-bs-theme="dark"] mark{ color:#1a1305; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); font-size:calc(13px * var(--font-scale, 1)); display:none; }
.empty-state .emoji{font-size:34px;display:block;margin-bottom:10px;}

.site-footer{ text-align:center; padding:22px 16px 30px; font-size:calc(11px * var(--font-scale, 1)); color:var(--muted); }

/* ============ Bottom-right floating controls: scroll-to-top + home/dark-mode FAB ============
   One fixed, flex-column anchor holding both — the scroll-to-top arrow is the
   last (bottom-most) child, so when it's hidden (not scrolled yet) the ⋯ button
   naturally drops down to take its place instead of leaving a dead gap, and
   when both are present they sit tight against each other with a fixed 10px
   gap regardless of whether the FAB submenu is open. */
.floating-controls{
  position:fixed; right:16px; bottom:20px; z-index:41;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.top-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--navy); color:#fff; border:none; box-shadow:0 4px 14px rgba(14,47,90,0.4);
  display:none; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
}
.fab-stack{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fab-menu{
  display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.fab-stack.open .fab-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fab-btn, .fab-toggle{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--navy); color:#fff; border:1px solid rgba(201,163,92,0.5);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 4px 14px rgba(14,47,90,0.4); cursor:pointer;
}
.fab-toggle i{ transition:transform .15s ease; }
.fab-stack.open .fab-toggle i{ transform:rotate(90deg); }

/* ============ Desktop reflow (≥ 992px): sidebar category nav + wide content column ============ */
@media (min-width:992px){
  .site-header{ padding:22px 24px 20px; }
  .header-title{ font-size:calc(26px * var(--font-scale, 1)); }
  .search-input{ font-size:calc(14px * var(--font-scale, 1)); padding:12px 16px 12px 42px; }

  .cat-nav-wrap{ display:none; } /* OLD nav — element no longer rendered, rule kept harmless */
  .cat-fullscreen{ display:none; }

  .menu-layout{
    display:grid;
    grid-template-columns:250px minmax(0,760px);
    gap:32px;
    justify-content:center;
    padding-top:22px;
  }
  .cat-sidebar{
    display:block;
    /* top was a guessed fixed 110px — didn't account for the header growing
       taller when a search is active (the "พบ N คำถาม..." result-count line
       appears above), so a search would let the sticky header ride up over
       this card while scrolled. --header-h (kept in sync by public.js, same
       var .cat-fullscreen already relies on) tracks the header's real height
       instead, so this always clears it exactly, search or not. */
    position:sticky; top:calc(var(--header-h, 110px) + 14px); align-self:start;
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:14px; max-height:calc(100vh - var(--header-h, 110px) - 34px); overflow-y:auto;
  }
  .cat-sidebar .cat-sidebar-title{ font-size:calc(11px * var(--font-scale, 1)); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 10px 10px; }
  .cat-sidebar .cat-link{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
    font-size:calc(13px * var(--font-scale, 1)); font-weight:600; color:var(--text); text-decoration:none; margin-bottom:2px;
  }
  .cat-sidebar .cat-link i{ width:16px; text-align:center; color:var(--gold); }
  .cat-sidebar .cat-link:hover{ background:var(--bg); }
  .cat-sidebar .cat-link.active{ background:var(--navy); color:#fff; }
  .cat-sidebar .cat-link.active i{ color:var(--gold); }
  .cat-sidebar .cat-link .count{ margin-left:auto; font-size:calc(11px * var(--font-scale, 1)); color:var(--muted); }
  .cat-sidebar .cat-link.active .count{ color:#cfd9ea; }

  .menu-body{ padding-top:0; }
  /* .site-header is position:sticky at every breakpoint and is taller here
     (bigger padding, no cat-nav strip to share the offset with) — this must
     clear its actual rendered height or headings land partly hidden under it. */
  .section-title{ scroll-margin-top:150px; }

  .floating-controls{ right:calc(50% - 590px - 60px); }
}
@media (min-width:1240px){
  .menu-layout{ grid-template-columns:270px minmax(0,820px); }
}

/* ============ Ask-question submission form (menus.type = 'question_form') ============ */
.ask-form-wrap{ max-width:640px; margin:18px auto 60px; padding:0 16px; }
.ask-form{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:22px 20px; display:flex; flex-direction:column; gap:16px;
}
.ask-field{ display:flex; flex-direction:column; gap:6px; }
.ask-field-row{ display:flex; flex-direction:column; gap:16px; }
.ask-field label{ font-size:calc(13px * var(--font-scale, 1)); font-weight:600; color:var(--navy); }
[data-bs-theme="dark"] .ask-field label{ color:var(--gold); }
.ask-field .req{ color:#c0392b; }
.ask-field input, .ask-field textarea{
  width:100%; font-family:inherit; font-size:calc(13.5px * var(--font-scale, 1)); color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  padding:10px 12px; outline:none; resize:vertical;
}
.ask-field input:focus, .ask-field textarea:focus{ border-color:var(--gold); background:var(--card); }
.ask-hint{ font-size:calc(11.5px * var(--font-scale, 1)); color:var(--muted); line-height:1.5; }
.ask-submit{
  align-self:flex-end;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%); color:#fff;
  border:1px solid rgba(201,163,92,0.5); border-radius:10px;
  padding:11px 22px; font-family:inherit; font-size:calc(13.5px * var(--font-scale, 1)); font-weight:700;
  cursor:pointer;
}
.ask-submit:hover{ filter:brightness(1.08); }

@media (min-width:600px){
  .ask-field-row{ flex-direction:row; }
  .ask-field-row .ask-field{ flex:1; }
}