@charset "UTF-8";
/* This file is served with an explicit charset in the Content-Type header, and an
   HTTP charset outranks both @charset and the referring document's encoding. When
   that header says windows-874/TIS-620 every non-ASCII byte here is mis-decoded, so
   the generated text in the content: rules below came out as mojibake ("โ€ข" for "•").
   It looked Safari-only because those rules live in the max-width:992px block and
   never render on a desktop viewport.
   Every *rendered* non-ASCII string below is therefore written as an ASCII \XXXXXX
   escape, which decodes identically under any charset. Comments may safely stay in
   Thai — they are never rendered. Keep @charset on line 1 (ahead of @import) as the
   fallback for when no HTTP charset is sent. */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Safari: pinch-zoom out then back in pans past the layout viewport and shows the
   canvas beside the page as a white strip on the right. Clamp the document width and
   give <html> the page background so nothing bare can show through. */
html { background: #fff; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }

body, html {
  color: #333;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

ol, ul { padding-left: 0 !important; }

/* ── Navbar ── */
.site-navbar {
  background: #399c5b;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 110px;
  padding: 24px 92px;
  width: 100%;
}

.navbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4e8;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 26px;
  overflow: hidden;
  width: 64px;
  height: 64px;
}
.navbar-logo img { width: 56px; height: 56px; object-fit: contain; }

.navbar-text h1 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.navbar-text p  { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500; margin: 0; }

.navbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-logout {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 15px; font-weight: 500;
  padding: 8px 16px;
  text-decoration: none;
  transition: background .15s;
}
.btn-logout:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ── Hero Banner ── */
.hero-wrap { padding: 32px 92px 0; }

.hero-banner {
  border-radius: 16px;
  height: 180px;
  overflow: hidden;
  position: relative;
}
.hero-banner .hero-overlay {
  background: linear-gradient(90deg, #237541, #399c5b 40%, rgba(255,255,255,0));
  inset: 0;
  position: absolute;
  z-index: 1;
}
.hero-banner img.banner-bg {
  position: absolute;
  inset: 0;
  left: auto; right: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 40%;
  z-index: 0;
}
.banner-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 28px 36px;
  position: relative;
  z-index: 2;
}
.banner-greeting { color: #fff; font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.banner-name     { color: #fff; font-size: 28px; font-weight: 600; line-height: 36px; margin-bottom: 4px; }
.banner-sub      { color: #fff; font-size: 18px; font-weight: 500; }

/* ── Page Body ── */
.page-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 92px 40px;
}

/* SSV-70: standalone QR-scan evaluation — no sidebar, centered single column */
.page-body--standalone { justify-content: center; }
.page-body--standalone .main-content { max-width: 860px; }

/* ── Sidebar ── */
.sidebar { flex-shrink: 0; width: 320px; max-width: 100%; }

.sidebar-label { color: #292929; font-size: 20px; font-weight: 700; margin-bottom: 16px; }

.sidebar-menu { display: flex; flex-direction: column; gap: 24px; list-style: none; }

.sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 16px;
  color: #333;
  font-size: 18px; font-weight: 500;
  height: 68px;
  padding: 16px 24px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.sidebar-menu li a:hover { border: 2px solid #f0b105; font-weight: 600; }
.sidebar-menu li a:hover .menu-icon { color: #f0b105; transition: color .15s; }

.sidebar-menu li.active a { border: 2px solid #f0b105; font-weight: 600; }
.sidebar-menu li.active a .menu-icon { color: #f0b105; }

.menu-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: #399c5b;
  flex-shrink: 0;
  font-size: 24px;
  width: 32px; height: 32px;
}
.menu-icon.green  { color: #399c5b; }
.menu-icon.blue   { color: #1565c0; }
.menu-icon.yellow { color: #f0b105; }
.menu-icon.teal   { color: #00796b; }

/* ── Main Content ── */
.main-content { flex: 1; min-width: 0; padding: 46px 0; width: 100%; }

.content-tabs {
  background: #f7f7f7;
  border: 1px solid #d6d6d6;
  border-radius: 10px 10px 0 0;
  display: flex;
  overflow: hidden;
  padding: 10px;
}
.tab-btn {
  background: transparent;
  border: none;
  color: #8a8a8a;
  cursor: pointer;
  flex: 1;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 20px; font-weight: 500;
  padding: 8px 16px;
  transition: background .15s, color .15s;
}
.tab-btn.active {
  background: #399c5b;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
}
#tabsDropdown { display: none; }

/* ── Section Cards ── */
.section-card {
  background: #fff;
  border: 1px solid #d6d6d6;
  border-top: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  padding: 24px;
}
.section-title { color: #292929; font-size: 20px; font-weight: 600; margin-bottom: 8px; }

/* ── Data Rows ── */
.data-row {
  display: grid;
  grid-template-columns: 240px 1fr; /* SSV-149: fixed label column so all values align in one vertical line */
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  font-size: 16px;
}
.data-label {
  color: #8a8a8a;
  flex-shrink: 0;
  font-size: 16px; font-weight: 500;
  margin-right: 10px;
}
.data-label.debt { font-size: 18px; font-weight: 500; }
.data-value      { color: #292929; font-size: 18px; font-weight: 500; text-align: left; min-width: 0; } /* SSV-149 */

/* ── SSV-21: แก้ไขที่อยู่ปัจจุบัน button ── */
.address-edit-row { display: flex; justify-content: flex-end; padding-top: 6px; }
.btn-edit-address {
  align-items: center;
  background: #fff;
  border: 1px solid #3b7a1e;
  border-radius: 8px;
  color: #3b7a1e;
  cursor: pointer;
  display: inline-flex;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  padding: 8px 16px;
  transition: background .15s, color .15s;
}
.btn-edit-address:hover { background: #3b7a1e; color: #fff; }

.address-block { display: flex; flex-direction: column; gap: 8px; width: 75%; }
.address-block .form-control,
.address-block .form-select {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  color: #292929;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 18px;
  padding: 10px 14px;
}
.address-block .form-control::placeholder { color: #8a8a8a; opacity: 1; }
.address-block .form-select              { color: #8a8a8a; }
.address-block .form-control[readonly]   { background-color: #eaeaea; color: #8a8a8a; }

/* ── Debt Cards ── */
.debt-group { border-bottom: 1px solid #d6d6d6; margin-bottom: 20px; padding-bottom: 20px; }
.debt-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.bank-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.bank-group .data-label { margin-right: 0; }

.creditor-bank {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  font-size: 14px; font-weight: 600;
  gap: 6px;
  padding: 4px 14px;
}
.creditor-bank img { width: 24px; }
.creditor-bank.baac   { background: rgba(16,10,115,.1); border: 1px solid #100a73; color: #100a73; }
.creditor-bank.aomsin { background: rgba(229,18,138,.1); border: 1px solid #e5128a; color: #e5128a; }

.debt-card { border-top: 1px solid #d6d6d6; margin-bottom: 12px; overflow: hidden; }

.debt-card-header {
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border-bottom: 1px solid #d6d6d6;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 20px;
}
.wrap-debt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.wrap-status { margin-left: auto; }

.debt-id   { color: #292929; font-size: 24px; font-weight: 600; }
.debt-date { display: flex; align-items: center; color: #292929; font-size: 18px; gap: 10px; min-width: 0; word-break: break-word; }
.debt-date i { color: #8a8a8a; height: 15px; width: 14px; }
.vertical-line { align-self: center; background-color: #8a8a8a; height: 20px; width: 1px; }

.badge-status { border-radius: 20px; font-size: 14px; font-weight: 600; margin-left: auto; padding: 8px 16px; }
.badge-danger  { background: #e03b3b; color: #fff; }
.badge-warning { background: #f0b105; color: #000; }
.badge-success { background: green;   color: #fff; }

.debt-card-body { padding: 10px 20px; }
.debt-row {
  display: grid;
  grid-template-columns: 240px 1fr; /* SSV-149: fixed label column so all values align in one vertical line */
  align-items: baseline;
  font-size: 13px;
  gap: 16px;
  padding: 10px 0;
}
.debt-row:last-child { border-bottom: none; }
.debt-label { color: #888; font-size: 16px; font-weight: 500; }
.debt-value { color: #333; font-size: 18px; font-weight: 500; text-align: left; min-width: 0; } /* SSV-149 */

.wrap-bank { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══════════════════════════════════════════════════════
   LOGIN PAGES  (body.login)
   ══════════════════════════════════════════════════════ */

body.login {
  display: flex;
  font-family: 'Sarabun', Arial, sans-serif;
  min-height: 100vh;
  overflow: hidden;
}

/* ── Image panel ── */
.bg-panel {
  flex: 1;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.bg-panel img.main-image {
  background: #f4f6eb;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

/* ── Form panel ── */
.form-panel {
  background: #f4f6eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
  min-height: 100vh;
  padding: 72px 40px 56px;
  width: 625px;
}

/* ── Logo block ── */
.logo-block {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.logo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4e8;
  border-radius: 50%;
  height: 80px;
  overflow: hidden;
  width: 80px;
  flex-shrink: 0;
}
.logo-circle img { width: 100%; height: 100%; object-fit: contain; }

.logo-text { text-align: left; }
.logo-text h1 { color: #292929; font-size: 24px; font-weight: 600; line-height: 36px; margin: 0 0 2px; }
.logo-text p  { color: #292929; font-size: 20px; font-weight: 500; line-height: 36px; margin: 0; }

/* ── Login card ── */
.login-card {
  background: rgba(255,255,255,.9);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  margin: 10px;
  padding: 24px;
  width: 100%;
}
.login-card h2 {
  color: #292929;
  font-size: 24px; font-weight: 700;
  line-height: 36px;
  margin-bottom: 6px;
  text-align: center;
}
.login-card .subtitle {
  color: #8a8a8a;
  font-size: 16px; font-weight: 500;
  line-height: 36px;
  margin-bottom: 16px;
  text-align: center;
}

/* ── Form controls ── */
.login-card .form-label {
  color: #212529;
  display: block;
  font-size: 16px; font-weight: 500;
  margin-bottom: 6px;
}
.login-card .form-control {
  background: #fafafa;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 16px;
  height: 44px;
  padding: 10px 14px;
  width: 100%;
}
.login-card .form-control:focus {
  border-color: #5a7a2e;
  box-shadow: 0 0 0 3px rgba(90,122,46,.15);
  outline: none;
}

/* ── Buttons ── */
.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #399c5b;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 18px; font-weight: 600;
  height: 48px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  width: 100%;
}
.btn-login:hover  { background: #2e5c18; color: #fff; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

.btn-thaid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f0b105;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 18px; font-weight: 600;
  height: 48px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  width: 100%;
}
.btn-thaid:hover  { background: #cf9400; color: #fff; transform: translateY(-1px); }
.btn-thaid:active { transform: translateY(0); }

.thaid-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  flex-shrink: 0;
  height: 36px;
  overflow: hidden;
  width: 36px;
}
.thaid-badge img { height: 100%; object-fit: contain; }

/* ── Divider ── */
.divider {
  display: flex;
  align-items: center;
  color: #292929;
  font-size: 18px; font-weight: 600;
  gap: 12px;
  margin: 16px 0;
}
.divider::before,
.divider::after { background: #8a8a8a; content: ""; flex: 1; height: 1px; }

/* ── Footer ── */
.site-footer { text-align: center; width: 100%; }
.site-footer .org-name  { color: #399c5b; font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.site-footer .address   { color: #292929; font-size: 20px; font-weight: 500; line-height: 36px; }

/* ── Login responsive ── */
@media (max-width: 992px) {
  body.login { overflow: auto; }

  .bg-panel { height: 100%; inset: 0; position: fixed; width: 100%; z-index: 0; }
  .bg-panel::after { content: ""; inset: 0; position: absolute; background: rgba(0,0,0,.25); }
  .bg-panel img.main-image { left: -100px; width: calc(100% + 100px); }

  .form-panel {
    background: rgba(244,246,235,.92);
    justify-content: space-between;
    min-height: 100svh;
    padding: 52px 24px 36px;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .logo-block { display: flex; justify-content: center; }
  .logo-text { text-align: center; }
  .logo-text h1 { font-size: 20px; }
  .logo-text p  { font-size: 16px; }
  .login-card { margin: 32px 0; }
}

/* ══════════════════════════════════════════════════════
   END LOGIN
   ══════════════════════════════════════════════════════ */

/* ── Tab panels (show/hide) ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Responsive ── */
@media (max-width: 992px) {
  .hero-wrap      { padding: 20px 16px 0; }
  .site-navbar    { height: 114px; padding: 24px; }
  .page-body      { flex-direction: column; padding: 24px; }
  .sidebar        { width: 100%; }
  .main-content   { padding: 0; }

  /* Hero banner on phones: the desktop card is a fixed 180px with a left-to-right
     gradient that fades out — on a narrow screen the Thai copy wraps to twice the
     lines, overflows that height, and the tail of it sits on the bare photo where
     the gradient has gone transparent. Let the card grow with its text and tint the
     whole thing green so the copy stays legible. */
  .hero-banner { height: auto; min-height: 150px; border-radius: 14px; }
  .hero-banner .hero-overlay {
    background: linear-gradient(180deg, rgba(35,117,65,.94), rgba(57,156,91,.86));
  }
  .banner-content  { padding: 20px; }
  .banner-greeting { font-size: 15px; margin-bottom: 4px; }
  .banner-name     { font-size: 20px; line-height: 28px; }
  .banner-sub      { font-size: 14px; }

  .data-row, .debt-row { grid-template-columns: 1fr; } /* stack label above value on mobile */
  .data-value, .debt-value { text-align: left; }
  .address-block { width: 100%; }

  .sidebar-menu {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
  }
  .sidebar-menu li a {
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
    height: auto;
    justify-content: center;
    padding: 14px 8px;
    text-align: center;
    border-radius: 12px;
  }
  .menu-icon { font-size: 20px; height: 40px; width: 40px; }

  .content-tabs {
    background: transparent;
    border: 1px solid #d6d6d6;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    flex-direction: column;
    overflow: visible;
    padding: 10px;
    position: relative;
  }
  .tab-btn { display: none; }
  .tab-btn.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #399c5b;
    border-radius: 12px;
    color: #fff;
    font-size: 20px; font-weight: 600;
    padding: 14px 20px;
    position: relative;
  }
  .tab-btn.active::before {
    content: "\000E41\000E15\000E30\000E40\000E1E\000E37\000E48\000E2D\000E40\000E1B\000E25\000E35\000E48\000E22\000E19\000E2B\000E31\000E27\000E02\000E49\000E2D"; /* แตะเพื่อเปลี่ยนหัวข้อ */
    font-size: 13px; font-weight: 400;
    margin-top: 2px; opacity: .85; order: 1;
  }
  .tab-btn.active::after {
    content: "\0025BC"; /* ▼ */
    font-size: 14px;
    position: absolute; right: 20px; bottom: 20px;
    transform: translateY(-50%);
  }

  #tabsDropdown.open { display: flex; }
  .tabs-dropdown {
    background: #fff;
    border: 1px solid #d6d6d6;
    display: none;
    flex-direction: column;
    margin-top: -4px;
    overflow: hidden;
  }
  .tabs-dropdown.open { display: flex; }
  .tabs-dropdown .tab-option {
    display: flex;
    align-items: center;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eee;
    color: #444;
    cursor: pointer;
    font-size: 16px;
    gap: 8px;
    padding: 14px 20px;
    text-align: left;
    width: 100%;
  }
  .tabs-dropdown .tab-option::before { content: "\002022"; color: #399c5b; font-size: 18px; } /* • */
  .tabs-dropdown .tab-option:last-child { border-bottom: none; }
  .tabs-dropdown .tab-option:hover { background: #f4fae8; }

  .wrap-bank, .wrap-status { margin-left: 0; width: 100%; }
  .debt-card-header { padding-bottom: 20px; }
}

@media (min-width: 992px) {
  .tab-btn.active::before,
  .tab-btn.active::after { content: none; }
}

/* ══════════════════════════════════════════════════════
   NEWS (FrontOffice ข่าวประชาสัมพันธ์)
   ══════════════════════════════════════════════════════ */

/* tab bar rendered as links on the detail page */
.content-tabs a.tab-btn {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}

.news-list { display: flex; flex-direction: column; }

.news-card {
  display: flex; gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid #ececec;
  color: inherit; text-decoration: none;
  transition: background .15s;
}
.news-card:last-child { border-bottom: none; }
.news-card:hover { background: #fafafa; }

.news-thumb {
  flex-shrink: 0;
  width: 200px; height: 130px;
  border-radius: 10px; overflow: hidden;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-thumb-placeholder { color: #bdbdbd; font-size: 40px; }

.news-body { flex: 1; min-width: 0; }
.news-title { font-size: 20px; font-weight: 600; color: #1f3d2b; margin: 0 0 8px; }
.news-excerpt {
  color: #555; font-size: 16px; line-height: 1.7; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* SSV-186: date / view count / province must stay readable when the row is narrower than
   the three items put together - each item wraps as a whole instead of breaking mid-text. */
.news-meta {
  color: #8a8a8a; font-size: 14px;
  display: flex; flex-wrap: wrap;
  column-gap: 18px; row-gap: 6px;
}
.news-meta span { white-space: nowrap; }
.news-meta i { margin-right: 4px; }

.news-empty { text-align: center; color: #9aa0a6; padding: 48px 0; }
.news-empty i { font-size: 48px; display: block; margin-bottom: 12px; }
.news-empty p { margin: 0; font-size: 16px; }

/* ── News detail ── */
.news-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: #555; text-decoration: none; font-size: 16px; margin-bottom: 20px;
}
.news-back:hover { color: #399c5b; }

.news-detail-img { border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.news-detail-img img { width: 100%; height: auto; display: block; }

.news-detail-title { font-size: 24px; font-weight: 700; color: #1f3d2b; margin: 0 0 16px; }
.news-detail-content {
  color: #333; font-size: 17px; line-height: 1.9;
  white-space: pre-line; margin-bottom: 20px;
}
/* SSV-186: same wrapping rule on the detail page - the three items keep their right
   alignment on a wide screen and stack neatly once the column gets narrow. */
.news-detail-meta {
  color: #8a8a8a; font-size: 14px;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  column-gap: 18px; row-gap: 6px;
  border-top: 1px solid #ececec; padding-top: 16px;
}
.news-detail-meta span { white-space: nowrap; }
.news-detail-meta i { margin-right: 4px; }

@media (max-width: 992px) {
  .news-card { flex-direction: column; gap: 12px; }
  .news-thumb { width: 100%; height: 200px; }
  .news-title { font-size: 18px; }
  /* SSV-186: on a phone the three meta items no longer fit on one line - give them a
     tighter gap and let them flow, and start the detail meta from the left like the rest
     of the page instead of hugging the right edge. */
  .news-meta { column-gap: 14px; font-size: 13px; }
  .news-detail-meta { column-gap: 14px; font-size: 13px; justify-content: flex-start; }
}

/* ── KM / document list (เอกสาร/องค์ความรู้) ── */
.km-list { display: flex; flex-direction: column; }

.km-item {
  padding: 24px 4px;
  border-bottom: 1px solid #ececec;
}
.km-item:last-child { border-bottom: none; }

.km-item-title {
  font-size: 20px; font-weight: 700; color: #1f3d2b;
  margin: 0 0 16px;
}

.km-row {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 8px 0;
}
.km-row-label {
  flex-shrink: 0; width: 150px;
  color: #8a8a8a; font-size: 15px; padding-top: 2px;
}
.km-row-value {
  flex: 1; min-width: 0;
  color: #333; font-size: 16px; line-height: 1.7;
  text-align: left; word-break: break-word; /* SSV-149: value near the label, not right-aligned */
}
/* pre-line เฉพาะช่องรายละเอียด (คงบรรทัดที่ผู้ใช้พิมพ์) — ห้ามใส่กับช่องปุ่มดาวน์โหลด
   เพราะ newline จาก JSP indent จะกลายเป็นบรรทัดว่างดันปุ่มลงล่าง (SSV-103) */
.km-row-value.km-detail { white-space: pre-line; }

.km-dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border: 1px solid #399c5b; border-radius: 8px;
  color: #399c5b; background: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
}
.km-dl-btn:hover { background: #399c5b; color: #fff; }

@media (max-width: 992px) {
  .km-row { flex-direction: column; gap: 4px; padding: 6px 0; }
  .km-row-label { width: auto; }
  .km-row-value { text-align: left; }
  .km-item-title { font-size: 18px; }
}

/* ── Contact channels (SSV-25) ── */
.menu-icon.gold { color: #c98f00; }

.section-card.contact-card { border-top: 1px solid #d6d6d6; border-radius: 10px; }

.contact-rows .contact-row { align-items: flex-start; }
.contact-ico { color: #399c5b; margin-right: 8px; }
.contact-address { max-width: 65%; }
.contact-link { color: #1a73e8; font-weight: 600; text-decoration: underline; }
.contact-link:hover { color: #0f5bd7; }

.contact-empty { color: #8a8a8a; padding: 28px 10px; text-align: center; }
.contact-empty i { display: block; font-size: 40px; margin-bottom: 10px; }
.contact-empty p { font-size: 16px; margin: 0; }

.contact-modal .modal-content { border-radius: 14px; }
.contact-modal .modal-title { font-size: 20px; font-weight: 700; }
.contact-modal .modal-footer { border-top: 1px solid #e5e5e5; }
.btn-contact-ok {
  background: #399c5b;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: 'Sarabun', Arial, sans-serif;
  font-size: 16px; font-weight: 600;
  padding: 10px 36px;
  transition: background .2s;
}
.btn-contact-ok:hover { background: #2e5c18; }

@media (max-width: 992px) {
  .contact-address { max-width: 100%; }
}

/* ── News popup after login (SSV-99) ── */
.news-popup-modal .modal-content { background: transparent; border: none; }
.news-popup-modal .modal-body { padding: 0; }
.news-popup-modal .modal-body img {
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: block;
  height: auto;
  width: 100%;
}
.news-popup-close {
  position: absolute; top: -14px; right: -14px; z-index: 5;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  height: 32px; width: 32px;
  opacity: 1;
  padding: 8px;
}
.news-popup-close:hover { opacity: 1; }

/* SSV-186: Pop Up with more than one image renders as a swipeable/clickable slider.
   A single-image Pop Up keeps the plain <img> markup above. */
.news-popup-carousel {
  background: #000;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  overflow: hidden;
}
.news-popup-modal .news-popup-carousel .carousel-item img {
  border-radius: 0;
  box-shadow: none;
  display: block;
  height: 480px;
  object-fit: contain;
  width: 100%;
}
.news-popup-carousel .carousel-control-prev-icon,
.news-popup-carousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,.45); border-radius: 50%;
  background-size: 45% 45%; padding: 14px;
}
.news-popup-carousel .carousel-indicators [data-bs-target] {
  border: 0; border-radius: 50%; height: 10px; width: 10px;
}
@media (max-width: 992px) {
  .news-popup-modal .news-popup-carousel .carousel-item img { height: 340px; }
}

/* ── Responsive fixes (SSV-101) ── */
@media (max-width: 992px) {
  /* 2. navbar: keep the logout button text complete on mobile */
  .site-navbar { gap: 12px; height: auto; min-height: 90px; padding: 16px; }
  .navbar-text { flex: 1; min-width: 0; }
  .navbar-text h1 { font-size: 15px; }
  .navbar-text p  { font-size: 12px; }
  .navbar-actions { flex-shrink: 0; }
  .btn-logout { font-size: 14px; padding: 8px 12px; white-space: nowrap; }

  /* 3. menu cards: uniform size and height */
  .sidebar-menu { grid-auto-rows: 1fr; }
  .sidebar-menu li a { height: 100%; }

  /* news popup: the desktop close button hangs off the corner at -14px, which on a
     phone lands outside the viewport and gets clipped by the modal. Tuck it inside. */
  .news-popup-close { top: 6px; right: 6px; }

  /* 1. news detail: tabs are links — show only the active one on mobile
        (the base .content-tabs a.tab-btn rule above re-enabled both, stacking them) */
  .content-tabs a.tab-btn { display: none; }
  .content-tabs a.tab-btn.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   SSV (2569-09): จังหวัด / ปักหมุด / carousel / วิดีโอ /
   ลิงก์-เบอร์โทรในเนื้อหา / ปุ่มอ่านเพิ่มเติม
   ══════════════════════════════════════════════════════════════ */

/* ── แถบกรองรายการ จังหวัด + หัวข้อ (news01 / km01) — วางเหนือแท็บ เพราะ .content-tabs กับ
     .section-card ถูกออกแบบให้ขอบต่อกันสนิท (card เป็น border-top:none) ห้ามมีอะไรคั่นกลาง ── */
.front-filterbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 24px;
  margin: 4px 0 18px;
}
.front-filterbar-field { display: flex; align-items: center; gap: 12px; }
.front-filterbar-label {
  color: #555; font-size: 15px; font-weight: 600;
  white-space: nowrap; margin: 0;
}
.front-filterbar-label i { color: #399c5b; margin-right: 4px; }

/* SSV-190: หน้าตาของ <select> จังหวัด "ก่อน" select2 จะ init
   jquery + select2.full ถูกโหลดท้ายหน้า เบราว์เซอร์จึงวาด <select> แบบ native ให้เห็น
   ก่อนหนึ่งจังหวะทุกครั้งที่เปลี่ยนหน้า (รวมถึงตอนกดแท็บในหน้ารายละเอียดข่าวที่โหลดหน้าใหม่)
   จึงจัดกล่อง native ให้เท่ากล่องของ select2 ทุกมิติ การสลับจะได้ไม่กระพริบ
   — ยังเป็น <select> ปกติ ใช้งานได้ตามเดิมถ้า select2 โหลดไม่สำเร็จ */
.front-filterbar .province-filter {
  min-width: 220px; max-width: 320px;
  height: 38px; margin: 0;
  padding: 0 28px 0 .75rem;
  border: 1px solid #d6d6d6; border-radius: 8px;
  background-color: #fff;
  /* สามเหลี่ยมชี้ลงตำแหน่ง/ขนาดเดียวกับลูกศรของ select2 (ต้องเป็น ASCII ล้วนตามข้อจำกัด charset ของไฟล์นี้) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23888' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  color: #444; font-family: inherit; font-size: 15px;
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.front-filterbar .province-filter:focus {
  border-color: #399c5b;
  box-shadow: 0 0 0 3px rgba(57, 156, 91, .15);
  outline: 0;
}
.front-filterbar .select2-container { min-width: 220px; max-width: 320px; }
.front-filterbar .select2-container--default .select2-selection--single {
  height: 38px; border-color: #d6d6d6; border-radius: 8px;
}
.front-filterbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px; padding-left: .75rem;
}
.front-filterbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ช่องค้นหาหัวข้อ — สูงและมุมโค้งเท่ากล่องจังหวัด เพื่อให้แถบกรองดูเป็นชุดเดียวกัน */
.front-filterbar .topic-filter {
  height: 38px; min-width: 240px; max-width: 340px;
  padding: 0 12px;
  border: 1px solid #d6d6d6; border-radius: 8px;
  background: #fff; color: #333;
  font-family: inherit; font-size: 15px;
}
.front-filterbar .topic-filter::placeholder { color: #a5a5a5; }
.front-filterbar .topic-filter:focus {
  border-color: #399c5b;
  box-shadow: 0 0 0 3px rgba(57, 156, 91, .15);
  outline: 0;
}

@media (max-width: 992px) {
  .front-filterbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .front-filterbar-field { flex-direction: column; align-items: stretch; gap: 4px; }
  .front-filterbar .province-filter,
  .front-filterbar .topic-filter,
  .front-filterbar .select2-container { max-width: none; min-width: 0; width: 100% !important; }
}

/* ── ป้ายข่าวปักหมุด ── */
.news-pin {
  display: inline-block; vertical-align: middle;
  background: #fff3cd; color: #8a6100;
  border: 1px solid #ffe08a; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  padding: 2px 8px; margin-right: 8px;
}
.news-pin i { margin-right: 4px; }

/* ── carousel รูปข่าว (หน้ารายละเอียด) ── */
.news-detail-carousel {
  border-radius: 12px; overflow: hidden; margin-bottom: 20px;
  background: #f0f0f0;
}
.news-detail-carousel .carousel-item img {
  width: 100%; height: 420px; object-fit: cover; display: block;
}
.news-detail-carousel .carousel-control-prev-icon,
.news-detail-carousel .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, .45); border-radius: 50%;
  padding: 14px; background-size: 45% 45%;
}
.news-detail-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%; border: 0;
}
@media (max-width: 992px) {
  .news-detail-carousel .carousel-item img { height: 240px; }
}

/* ── วิดีโอ YouTube (หน้ารายละเอียดข่าว) — 16:9 เต็มความกว้าง ── */
.news-detail-video {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 12px; overflow: hidden; background: #000;
  margin: 0 0 20px;
}
.news-detail-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ── ลิงก์ที่แปลงจากข้อความในเนื้อหาข่าว/KM (RichTextUtil) ── */
.rt-link { color: #1a73e8; text-decoration: underline; word-break: break-all; }
.rt-link:hover { color: #0f5bd7; }

/* เบอร์โทรบนการ์ดช่องทางการติดต่อ — กดโทรออกจากมือถือได้ (SSV: ข้อ 7) */
.contact-tel { color: #333; text-decoration: none; }
.contact-tel:hover { color: #399c5b; text-decoration: underline; }

/* ── รายละเอียด KM + ปุ่มอ่านเพิ่มเติม ──
   .km-detail ย้ายมาเป็น span ซ้อนใน .km-detail-wrap จึงต้องประกาศ pre-line ที่นี่แทนกฎเดิม */
.km-row-value.km-detail-wrap { display: block; }
.km-detail {
  display: block; white-space: pre-line;
}
.km-detail.js-clamp {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.km-detail.js-clamp.expanded {
  display: block; -webkit-line-clamp: none; overflow: visible;
}
.km-readmore {
  background: none; border: 0; padding: 0; margin-top: 4px;
  color: #399c5b; font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.km-readmore:hover { text-decoration: underline; }