/**
 * Site theme — e-Gov design system. Minimal images, consistent spacing and components.
 * Shared: .tt-container, .tt-section, .tt-sectionHeader, .tt-card, .tt-listItem, typography (Mitr).
 */

/* ========== Design system variables ========== */
:root {
  /* Container & layout */
  --tt-container-max: 72rem; /* max-w-6xl / 1152px */
  --tt-container-pad: 1rem;   /* px-4 */
  --tt-container-pad-md: 1.5rem; /* sm:px-6 */
  --tt-container-pad-lg: 2rem;   /* lg:px-8 */
  --tt-section-pad: 2.5rem;   /* py-10 */
  --tt-section-pad-md: 3.5rem; /* md:py-14 */
  /* Card */
  --tt-card-radius: 12px;
  --tt-card-border: 1px solid #e2e8f0;
  --tt-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --tt-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Typography (Mitr) */
  --tt-font-sans: 'Mitr', system-ui, -apple-system, sans-serif;
  --tt-text-base: 1rem;
  --tt-text-sm: 0.875rem;
  --tt-text-lg: 1.125rem;
  --tt-heading-size: 1.25rem;
  --tt-heading-weight: 700;
  --tt-line-height: 1.6;
}

@media (min-width: 768px) {
  :root {
    --tt-container-pad: var(--tt-container-pad-md);
    --tt-section-pad: var(--tt-section-pad-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --tt-container-pad: var(--tt-container-pad-lg);
  }
}

/* Global font: Mitr for all public pages (no Sarabun on public layout) */
body {
  font-family: 'Mitr', var(--tt-font-sans), system-ui, sans-serif;
  font-size: var(--tt-text-base);
  line-height: var(--tt-line-height);
}

/* ========== .tt-container — max-width, centered, responsive padding ========== */
.tt-container {
  max-width: var(--tt-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tt-container-pad);
  padding-right: var(--tt-container-pad);
}

/* Homepage: no nested max-w inside tt-container — map/attractions use container width */
.tt-container .map-section__inner,
.tt-container .attractions-otop__inner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ========== .tt-section — standard vertical padding + subtle top divider ========== */
.tt-section {
  position: relative;
  padding-top: var(--tt-section-pad);
  padding-bottom: var(--tt-section-pad);
  border-top: 1px solid #e2e8f0;
}

.tt-section--first {
  border-top: none;
}

.tt-section--default {
  background: #fff;
}

/* Alias for alternating blocks (slate-50-like) */
.tt-section--alt {
  background: #f8fafc;
}

/* E-Gov section divider utility */
.tt-divider {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* .tt-section--soft — light tinted background */
.tt-section--soft {
  background: #f8fafc;
  position: relative;
}

.tt-section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #64748b 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.04;
  pointer-events: none;
}

.tt-section--soft .tt-container {
  position: relative;
  z-index: 1;
}

/* ========== .tt-sectionHeader — title left + optional action right (wrap .tt-sectionTitle) ========== */
.tt-sectionHeader {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .tt-sectionHeader {
    margin-bottom: 1.25rem;
  }
}

/* ========== .tt-card — border, radius, shadow, hover ========== */
.tt-card {
  display: block;
  background: #fff;
  border: var(--tt-card-border);
  border-radius: var(--tt-card-radius);
  box-shadow: var(--tt-card-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tt-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--tt-card-shadow-hover);
}

/* ========== .tt-listItem — dense row list style ========== */
.tt-listItem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: var(--tt-text-sm);
  line-height: 1.4;
}

.tt-listItem:last-child {
  border-bottom: none;
}

.tt-listItem__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: #1e293b;
}

.tt-listItem__meta {
  flex-shrink: 0;
  color: #64748b;
  font-size: 0.8125rem;
}

/* ========== Section surfaces (nh-home scope: keep existing overrides) ========== */
.nh-home .tt-section {
  padding-block: var(--nh-section-pad);
  border-top: 1px solid #e2e8f0; /* slate-200 */
}

.nh-home .tt-section--first {
  border-top: none;
}

.nh-home .tt-section--default {
  background: #fff;
}

/* Soft variant: very light tint for rhythm, no strong colors */
.nh-home .tt-section--soft {
  background: #f8fafc; /* slate-50 */
  position: relative;
}

/* Optional subtle dot pattern — extremely low opacity */
.nh-home .tt-section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #64748b 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.04;
  pointer-events: none;
}

.nh-home .tt-section--soft .tt-container {
  position: relative;
  z-index: 1;
}

/* ========== Section header wrapper ========== */
.tt-sectionHeader {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .tt-sectionHeader {
    margin-bottom: 1.25rem;
  }
}

/* ========== .tt-sectionTitle: flex row, left accent bar, title, optional right action ========== */
.tt-sectionTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1e293b;
}

@media (min-width: 640px) {
  .tt-sectionTitle {
    font-size: 1.25rem;
  }
}

/* Left accent bar (CSS-only) */
.tt-sectionTitle__accent {
  display: inline-block;
  width: 4px;
  height: 1.25em;
  min-height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary-600, #0f4c81) 0%, var(--primary-700, #0c3d6b) 100%);
  flex-shrink: 0;
}

/* Title text (or link inside) */
.tt-sectionTitle__text {
  flex: 1 1 auto;
  min-width: 0;
}

.tt-sectionTitle__text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tt-sectionTitle__text a:hover {
  color: var(--primary-600, #0f4c81);
}

/* Optional right action link (ดูทั้งหมด) with chevron */
.tt-sectionTitle__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-600, #0f4c81);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: rgba(15, 76, 129, 0.08);
  transition: background 0.15s ease, color 0.15s ease;
}

.tt-sectionTitle__action::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 0.125rem;
}

.tt-sectionTitle__action:hover {
  background: rgba(15, 76, 129, 0.14);
  color: var(--primary-700, #0c3d6b);
}

/* ========== .tt-sectionPill: small rounded pill label ========== */
.tt-sectionPill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #334155;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tt-sectionPill img,
.tt-sectionPill .exec-video__icon,
.tt-sectionPill .tt-exec-video__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  object-fit: contain;
}

/* Pill button — green theme (e-Gov header consistency) */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 42px;
  font-size: 0.9rem;
  font-family: 'Mitr', var(--tt-font-sans), system-ui, sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
}
a.pill-btn { color: inherit; }
.pill-btn--green {
  background: linear-gradient(135deg, var(--brand-g1, #0f5b3a) 0%, var(--brand-g2, #0a7a4b) 100%);
  box-shadow: 0 2px 6px rgba(15, 91, 58, 0.35);
}
.pill-btn--green:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(15, 91, 58, 0.4);
}
.pill-btn--orange { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); color: #fff; }
.pill-btn--orange:hover { filter: brightness(1.08); }
.pill-btn--yellow { background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%); color: #fff; }
.pill-btn--yellow:hover { filter: brightness(1.08); }

/* ========== .tt-sectionDivider: subtle line with gradient/accent ========== */
.tt-sectionDivider {
  height: 1px;
  margin: 0 0 1rem;
  border: 0;
  background: linear-gradient(90deg, var(--primary-600, #0f4c81) 0%, transparent 40%, transparent 60%, var(--primary-600, #0f4c81) 100%);
  opacity: 0.25;
}

@media (min-width: 768px) {
  .tt-sectionDivider {
    margin-bottom: 1.25rem;
  }
}

/* ========== Public header/nav (layout-public): container = tt-container, active + hover ========== */
.header__container,
.site-header .tt-container {
  max-width: var(--tt-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tt-container-pad);
  padding-right: var(--tt-container-pad);
}
@media (min-width: 768px) {
  .header__container,
  .site-header .tt-container {
    padding-left: var(--tt-container-pad-md);
    padding-right: var(--tt-container-pad-md);
  }
}
.mainnav__item {
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.mainnav__item:hover {
  color: var(--primary-600);
}
.mainnav__item--active {
  font-weight: 700;
  color: var(--primary-700);
  border-bottom-color: var(--primary-600);
  background: transparent;
}
.mainnav__dropdown-link:hover {
  background: #f1f5f9;
  color: var(--primary-600);
}
.mainnav__dropdown-link--active {
  font-weight: 600;
  background: #eff6ff;
  color: var(--primary-600);
}
.mobile-drawer__link:hover {
  background: #f8fafc;
  color: var(--primary-600);
}
.mobile-drawer__link--active {
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary-600);
}

/* ========== e-Gov public header: green gradient, tt-header, tt-nav, tt-tools ========== */
:root {
  --brand-g1: #0f5b3a;
  --brand-g2: #0a7a4b;
  --tt-header-bg: linear-gradient(90deg, var(--brand-g1) 0%, var(--brand-g2) 60%, var(--brand-g1) 100%);
  --tt-header-nav-bg: linear-gradient(90deg, rgba(15, 91, 58, 0.98) 0%, rgba(10, 122, 75, 0.98) 60%, rgba(15, 91, 58, 0.98) 100%);
  --tt-header-text: #fff;
  --tt-header-text-muted: rgba(255, 255, 255, 0.9);
  --tt-nav-link: rgba(255, 255, 255, 0.92);
  --tt-nav-link-hover: #fff;
  --tt-nav-active-bg: rgba(255, 255, 255, 0.2);
  --tt-nav-active-underline: 2px solid #fff;
}

/* Font size: persisted to localStorage */
html[data-font="sm"] { font-size: 95%; }
html[data-font="md"] { font-size: 100%; }
html[data-font="lg"] { font-size: 110%; }

/* Dark mode: single html[data-theme="dark"] toggle; persisted in localStorage (tt-theme). Script in layout-public sets it on documentElement. */
html[data-theme="dark"] {
  --tt-header-bg: linear-gradient(90deg, #0a4a30 0%, #086338 100%);
  --tt-header-nav-bg: linear-gradient(90deg, #083d26 0%, #06552f 100%);
}
html[data-theme="dark"] body {
  background: #1e293b;
  color: #e2e8f0;
}
html[data-theme="dark"] .frontpage {
  background: #1e293b;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .tt-section {
  background: #1e293b !important;
  color: #e2e8f0;
}
html[data-theme="dark"] .tt-section--soft {
  background: #334155 !important;
}
html[data-theme="dark"] .tt-card,
html[data-theme="dark"] .nh-card,
html[data-theme="dark"] .announcements-two-col__module {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0;
}
html[data-theme="dark"] a {
  color: #93c5fd;
}
html[data-theme="dark"] a:hover {
  color: #bfdbfe;
}
html[data-theme="dark"] .footer.bg-primary-900 {
  background: #0f172a !important;
  color: #cbd5e1;
}

/* Color-blind mode: high-contrast palette (blue/amber) with stronger separation and focus */
html[data-accessibility="cb"] {
  --tt-header-bg: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  --tt-header-nav-bg: linear-gradient(90deg, #111827 0%, #0f172a 100%);
}
html[data-accessibility="cb"] body {
  background: #f8fafc;
  color: #0f172a;
}
html[data-accessibility="cb"] .tt-header__utility-link,
html[data-accessibility="cb"] .tt-nav__link {
  color: #e2e8f0;
}
html[data-accessibility="cb"] .tt-nav__link--active {
  background: #f59e0b;
  color: #111827;
  border-bottom-color: #f8fafc;
  text-decoration: none;
}
html[data-accessibility="cb"] .tt-nav__link:hover {
  background: rgba(245, 158, 11, 0.24);
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
html[data-accessibility="cb"] a {
  color: #0b5bd3;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-accessibility="cb"] a:hover {
  color: #003b8e;
  text-decoration-thickness: 3px;
}
html[data-accessibility="cb"] .bg-primary-600,
html[data-accessibility="cb"] .bg-primary-600:hover,
html[data-accessibility="cb"] button.bg-primary-600,
html[data-accessibility="cb"] button.bg-primary-600:hover {
  background-color: #0b5bd3 !important;
  color: #ffffff !important;
}
html[data-accessibility="cb"] .text-primary-600,
html[data-accessibility="cb"] .text-primary-700 {
  color: #0b5bd3 !important;
}
html[data-accessibility="cb"] .tt-card,
html[data-accessibility="cb"] .nh-card,
html[data-accessibility="cb"] .announcements-two-col__module,
html[data-accessibility="cb"] article {
  border: 2px solid #1e293b !important;
  box-shadow: none !important;
}
html[data-accessibility="cb"] .tt-tools__btn.is-active {
  background: #f59e0b;
  color: #111827;
  border-color: #f8fafc;
}
/* Header wrapper */
.tt-header {
  font-family: 'Mitr', var(--tt-font-sans), system-ui, sans-serif;
  background: var(--tt-header-bg);
  color: var(--tt-header-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Top bar: brand + utility + tools — taller for main branding area */
.tt-header__top {
  min-height: 114px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0;
}

.tt-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--tt-header-text);
  min-height: 44px;
}
.tt-header__brand:hover {
  color: var(--tt-nav-link-hover);
}
.tt-header__logo img {
  height: 4rem;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left;
  display: block;
}

/* Brand: 2 lines — Thai (bold) on top, English/subtitle (smaller) below */
.tt-header__org {
  display: block;
}
.tt-header__org-name {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.tt-header__org-sub {
  display: block;
  font-size: 0.8rem;
  opacity: 0.95;
  margin-top: 0.15rem;
  line-height: 1.2;
}

/* Right cluster: utility links + tools */
.tt-header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.tt-header__utility {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}
.tt-header__utility-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tt-header-text-muted);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.tt-header__utility-link:hover {
  color: var(--tt-nav-link-hover);
  background: rgba(255, 255, 255, 0.12);
}

/* Tools: A+, A-, color-blind, dark, language */
.tt-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.tt-tools__btn {
  font-family: 'Mitr', var(--tt-font-sans), system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  min-width: 40px;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tt-header-text-muted);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-tools__icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.tt-tools__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt-tools__label {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.tt-tools--access {
  padding: 0.28rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tt-tools__btn--lang {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
}
.tt-tools__flag {
  display: inline-flex;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
}
.tt-tools__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html[data-accessibility="cb"] .tt-tools--access {
  border-color: rgba(245, 158, 11, 0.8);
  background: rgba(2, 6, 23, 0.58);
}
html[data-accessibility="cb"] .tt-tools__flag {
  border-color: #f8fafc;
}
.tt-tools__btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--tt-nav-link-hover);
}
.tt-tools__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.tt-tools__btn.is-active {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.tt-tools__sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 0.15rem;
}

/* Nav row: full-width green bar; inner container constrains and centers menu items */
.tt-nav {
  background: var(--tt-header-nav-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.tt-nav__container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.tt-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0;
  width: 100%;
}
.tt-nav__item {
  position: relative;
}
.tt-nav__link {
  font-family: 'Mitr', var(--tt-font-sans), system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tt-nav-link);
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tt-nav__link:hover {
  color: var(--tt-nav-link-hover);
  background: rgba(255, 255, 255, 0.1);
}
.tt-nav__link--active {
  color: var(--tt-nav-link-hover);
  background: var(--tt-nav-active-bg);
  border-bottom-color: #fff;
}

/* Dropdown submenu (desktop only) */
@media (min-width: 1024px) {
  .tt-nav__item--hasSub > .tt-nav__link::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 0.25rem;
  }
  .tt-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    min-width: 220px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 0.35rem 0.25rem 0.4rem;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
  }
  .tt-nav__submenuLink {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
    text-decoration: none;
    border-radius: 0.5rem;
    white-space: nowrap;
  }
  .tt-nav__submenuLink:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  .tt-nav__item--hasSub:hover > .tt-nav__submenu,
  .tt-nav__item--hasSub:focus-within > .tt-nav__submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Desktop: nav bar visible; hide hamburger (drawer only on mobile) */
@media (min-width: 1024px) {
  .tt-nav--desktop { display: block; }
  .tt-nav--mobile { display: none; }
  .tt-header__menu-btn { display: none !important; }
  .tt-nav__inner {
    flex-wrap: nowrap;
    gap: 0.5rem 28px;
    padding: 0.75rem 0;
  }
  .tt-nav__link {
    padding: 0.6rem 1rem;
  }
}
@media (min-width: 1280px) {
  .tt-nav__inner {
    gap: 0.5rem 48px;
  }
}

/* Mobile: hide desktop nav bar; show hamburger (opens drawer) */
.tt-header__menu-btn {
  display: none; /* shown only in @media (max-width: 1023px) */
}

/* Mobile: nav in drawer, show burger */
@media (max-width: 1023px) {
  .tt-nav--desktop { display: none; }
  .tt-header__menu-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
  }
  .tt-header__menu-btn:hover {
    background: rgba(255, 255, 255, 0.25);
  }
  .tt-header__menu-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .tt-header__menu-btn .tt-icon-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .tt-header__menu-btn .tt-icon-bars span {
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
  }
}

/* Mobile drawer: same green tint, nav links */
.tt-drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
}
.tt-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.tt-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.tt-drawer.is-open .tt-drawer__backdrop {
  opacity: 1;
}
.tt-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 100vw);
  max-height: 100vh;
  background: linear-gradient(180deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.tt-drawer.is-open .tt-drawer__panel {
  transform: translateX(0);
}
.tt-drawer__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
.tt-drawer__close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.tt-drawer__tools {
  padding: 1rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.tt-drawer__nav {
  padding: 1rem;
}
.tt-drawer__nav .tt-nav__link {
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.tt-drawer__nav .tt-nav__link + .tt-nav__link {
  margin-top: 0.25rem;
}

/* Hide default Google Translate UI; we use tt-tools EN button */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt {
  display: none !important;
}
body { top: 0 !important; }

/* ========== Shared card: .tt-card, .tt-cardHeader, .tt-cardBody, .tt-cardMeta, .tt-cardAction ========== */
.tt-card {
  display: block;
  background: #fff;
  border: var(--tt-card-border);
  border-radius: var(--tt-card-radius);
  box-shadow: var(--tt-card-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--tt-card-shadow-hover);
}
.tt-cardHeader {
  flex-shrink: 0;
  overflow: hidden;
}
.tt-cardHeader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tt-cardBody {
  padding: 0.75rem 1rem;
}
.tt-cardBody .tt-cardMeta {
  padding: 0;
  padding-top: 0.35rem;
}
.tt-cardMeta {
  padding: 0 1rem 0.75rem;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.35;
}
.tt-cardAction {
  padding: 0.5rem 1rem 0.75rem;
  margin-top: 0.25rem;
}
.tt-card--row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  min-height: 0;
}
.tt-card--row .tt-cardHeader {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.tt-card--row .tt-cardHeader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.tt-card--row .tt-cardBody {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.tt-card--row .tt-cardMeta {
  flex-shrink: 0;
  padding: 0;
  font-size: 0.75rem;
}
.tt-card--row.tt-card--no-thumb .tt-cardBody { flex: 1 1 auto; }
.tt-card--row.tt-card--no-thumb .tt-cardMeta { flex-shrink: 0; }
.tt-card--sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  min-height: 0;
}
.tt-card--sidebar .tt-cardHeader {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.tt-card--sidebar .tt-cardHeader svg { width: 22px; height: 22px; }
.tt-card--sidebar .tt-cardBody { flex: 1 1 auto; min-width: 0; padding: 0; }
.tt-card--sidebar .tt-cardMeta { padding: 0; font-size: 0.75rem; }

/* ========== Exec section: 3-column compact grid + tt-card blocks ========== */
.tt-exec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
  align-items: start;
}
/* Mobile/tablet: explicit order — Video, นายก, ปลัด */
.tt-exec-card--video { order: 1; }
.tt-exec-card--left { order: 2; }
.tt-exec-card--right { order: 3; }
@media (min-width: 768px) {
  .tt-exec-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--tt-gap-md);
  }
  .tt-exec-card--video {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .tt-exec-grid {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--tt-gap-md);
  }
  .tt-exec-card--video {
    grid-column: 2;
    order: unset;
  }
  .tt-exec-card--left { grid-column: 1; order: unset; }
  .tt-exec-card--right { grid-column: 3; order: unset; }
}

/* Exec card: shared lift on hover */
.tt-exec-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-exec-card:hover {
  transform: translateY(-2px);
}

/* Personnel card: avatar left (desktop) / top (mobile) */
.tt-exec-card--personnel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  .tt-exec-card--personnel {
    flex-direction: row;
    align-items: flex-start;
    padding: 1rem;
  }
}
.tt-exec-personnel__photo-link {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}
.tt-exec-personnel__photo {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 120 / 156;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.tt-exec-personnel__photo--placeholder {
  width: 120px;
  height: 156px;
  background: #f1f5f9;
  border-radius: 8px;
}
.tt-exec-personnel__body {
  min-width: 0;
}
.tt-exec-personnel__name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
.tt-exec-personnel__role {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.4;
}
.tt-exec-personnel__hotline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-600, #0f4c81);
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-exec-personnel__hotline:hover {
  color: var(--primary-700, #0c3d6b);
}
.tt-exec-personnel__hotline-icon {
  display: inline-flex;
}
.tt-exec-personnel__hotline-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Video card: title row + 16:9 + max-height */
.tt-exec-card--video {
  padding: 1rem;
}
.tt-exec-video__head {
  margin-bottom: 0.75rem;
}
.tt-exec-video__wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 16 / 9;
  max-height: 320px;
}
.tt-exec-video__wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tt-exec-video__wrap--placeholder {
  aspect-ratio: 16 / 9;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}
.tt-exec-video__placeholder {
  font-size: 0.875rem;
  color: #64748b;
}
.tt-exec-video__actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Homepage: ensure .tt-card is the single source for radius, border, shadow */
.nh-home .tt-card {
  border: var(--tt-card-border);
  border-radius: var(--tt-card-radius);
  box-shadow: var(--tt-card-shadow);
}
.nh-home .tt-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--tt-card-shadow-hover);
}

/* ========== Shared grid: .tt-grid-1 … .tt-grid-4, .tt-grid-two-col, consistent gap ========== */
:root, .nh-home {
  --tt-gap: 1rem;
  --tt-gap-md: 1.5rem;
}

.tt-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 768px) {
  .tt-grid-1 { gap: var(--tt-gap-md); }
}

.tt-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 640px) {
  .tt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tt-grid-2 { gap: var(--tt-gap-md); }
}

.tt-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 640px) {
  .tt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-gap-md); }
}

.tt-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 480px) {
  .tt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tt-grid-4 { gap: var(--tt-gap-md); }
}
@media (min-width: 1024px) {
  .tt-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .tt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two-column: main + sidebar, stable ratio on desktop, stack on mobile */
.tt-grid-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap-md);
  align-items: start;
}
@media (min-width: 1024px) {
  .tt-grid-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }
}

/* Consistent gap for flex containers (e.g. carousel) */
.tt-gap {
  gap: var(--tt-gap);
}
@media (min-width: 768px) {
  .tt-gap { gap: var(--tt-gap-md); }
}

/* Homepage: tt-grid overrides so shared columns/gap win */
.nh-home .activities__grid.tt-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 480px) {
  .nh-home .activities__grid.tt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .nh-home .activities__grid.tt-grid-4 { gap: var(--tt-gap-md); }
}
@media (min-width: 1024px) {
  .nh-home .activities__grid.tt-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .nh-home .activities__grid.tt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nh-home .announcements-two-col__grid.tt-grid-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap-md);
  align-items: start;
}
@media (min-width: 1024px) {
  .nh-home .announcements-two-col__grid.tt-grid-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }
}

.nh-home .nh-eservice-hotfix__grid.tt-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-gap);
}
@media (min-width: 640px) {
  .nh-home .nh-eservice-hotfix__grid.tt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .nh-home .nh-eservice-hotfix__grid.tt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-gap-md); }
}

/* Outside links: align with section width, consistent gap, no overflow */
.nh-home .outside-links__inner {
  min-width: 0;
}
.nh-home .outside-links__carousel.tt-gap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Personnel/executive phone links: prevent card overflow from long tel values */
.org-node a[href^="tel:"],
.org-tier a[href^="tel:"],
.executive-phone,
.executive-phone a[href^="tel:"] {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.org-node a[href^="tel:"],
.org-tier a[href^="tel:"],
.executive-phone a[href^="tel:"],
.personnel-phone {
  word-break: break-all;
}

.executive-phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2px;
}

.personnel-card__body {
  min-width: 0;
}

.personnel-card__body > * {
  max-width: 100%;
}

.personnel-phone {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35;
}

/* Legacy page-body tel links (e.g. /page/executives): force wrapping even when inline styles exist */
.prose-custom a[href^="tel:"] {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  vertical-align: top;
}

/* Assume /page/executives renders legacy HTML body: harden nowrap/table/flex behavior */
.prose-custom table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

.prose-custom th,
.prose-custom td {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

.prose-custom [nowrap],
.prose-custom [style*="white-space:nowrap"],
.prose-custom [style*="white-space: nowrap"] {
  white-space: normal !important;
}

.prose-custom .executive-phone,
.prose-custom .executive-phone a[href^="tel:"],
.prose-custom a[href^="tel:"] {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
}

.prose-custom .executive-phone > * {
  min-width: 0;
}