/* =============================================================
   dhr-layout.css — เทศบาลเมืองดอนหัวฬ่อ
   ThaiDataTech · dhr.go.th
   ============================================================= */
/*@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");*/

/* Noto Sans Thai เพิ่ม 700 สำหรับ title ของ hero (ตัวหนาจริง)
   @import ต้องอยู่ก่อน @font-face/rule อื่นเสมอ ไม่งั้นเบราว์เซอร์ข้าม */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");

/* "GraphikTH Thai" = ตัวปกติ GraphikTH (มีไฟล์เดียว Regular, weight 400) +
   ตัวหนา (weight 600-900) ใช้ Noto Sans Thai ตัวหนาจริง (variable font, subset ไทย
   self-host ที่ fonts/NotoSansThai-Thai-var.woff2) — ไม่ใช้ faux bold ของเบราว์เซอร์
   เพราะขอบฟุ้ง/เบลอ weight 500 ลงมายังใช้ GraphikTH ตัวปกติ
   unicode-range เฉพาะอักษรไทย — ตัวอังกฤษ/ตัวเลขใช้ Inter
   (ถ้าอยากกลับไปใช้ faux bold: ลบ @font-face ชุดที่สองออก) */
@font-face {
  font-family: "GraphikTH Thai";
  src:
    url("fonts/GraphikTH-Regular.woff2") format("woff2"),
    url("fonts/GraphikTH-Regular.woff") format("woff");
  unicode-range: U+0E00-0E7F;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GraphikTH Thai";
  src: url("fonts/NotoSansThai-Thai-var.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

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

/* sr-only — ซ่อนด้วยสายตาแต่ screen reader/Google อ่านได้ (ไม่ใช้ display:none
   เพราะ Google ไม่นับ h1 ที่ display:none) ใช้กับ h1 หน้าแรก (ตกลงกับ EK!! 2026-10-02) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ลิงก์ "ข้ามไปยังเนื้อหาหลัก" (a.sr-only) — โผล่ตอนผู้ใช้กด Tab มาโฟกัส */
a.sr-only:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  overflow: visible;
  z-index: 10000;
  background: #fff;
  color: var(--p);
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

:root {
  --p: #1a4a8a;
  --pl: #2460b0;
  --a: #b45309;
  --bg: #f5f6fa;
  /* ฟอนต์หลัก: อังกฤษ/ตัวเลข = Inter, ไทย = GraphikTH Thai (ตัวหนา = Noto Sans Thai จริง) */
  --font-main: "Inter", "GraphikTH Thai", sans-serif;
  /* title ของ hero (ตัวหนา) ใช้ Noto Sans Thai ตัวหนาจริง */
  --font-hero-title: "Inter", "Noto Sans Thai", sans-serif;
}

body {
  font-family: var(--font-main);
  font-size: 15px;
  background: #fff;
  color: #222;
}

/* หัวข้อและตัวหนา: weight >= 600 ไทยจะใช้ Noto Sans Thai หนาจริง
   (ตัวอังกฤษ/ตัวเลขเป็น Inter 600 ของจริง) */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
  font-weight: 700;
}

/* form elements ไม่ inherit font จาก body โดยอัตโนมัติ */
input,
select,
textarea,
button {
  font-family: var(--font-main);
}

/* ===== MAINNAV ===== */
.mainnav {
  background: #fff;
  border-bottom: 1px solid #dde3ed;
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 18px;
  cursor: pointer;
  text-decoration: none;
}
.nav-logo-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--p);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
/* ── Logo image จริง (แทนวงกลมตัวอักษร "ดหอ" เมื่อมี logo จริงใน DB) ──
   เพิ่มเข้ามา 2026-08-04 — ไม่แก้ .nav-logo-circle เดิม (ยังใช้เป็น
   fallback ตอนยังไม่มี logo ใน DB) ไฟล์จาก branding_process_logo_upload()
   ถูก resize มาที่ 42×42px แล้ว (LOGO_DISPLAY_SIZE ใน branding-upload.php)
   ตรงกับขนาดนี้พอดี — object-fit: contain กันภาพยืด/บิดถ้าโลโก้ไม่ใช่
   สี่เหลี่ยมจัตุรัสพอดี (รองรับโลโก้วงกลม/สี่เหลี่ยม/สี่เหลี่ยมผืนผ้า) */
.nav-logo .nav-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}
.nav-logo-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
  line-height: 1;
}
.nav-logo-text span {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
}
.nav-items {
  display: flex;
  align-items: center;
  flex: 1;
  height: 64px;
}

/* nav item wrap + dropdown */
.nav-item-wrap {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
}
.ni {
  padding: 0 12px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #444;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s;
  text-decoration: none;
}
.ni:hover,
.nav-item-wrap:hover .ni {
  color: var(--p);
  background: #f0f4ff;
}
.ni.active {
  color: var(--p);
  font-weight: 700;
  /*border-bottom-color: var(--p);*/
  border-bottom-color: #f4cb26;
}
.ni .arr {
  font-size: 11px;
  opacity: 0.45;
  transition: transform 0.2s;
}
.nav-item-wrap:hover .ni .arr {
  transform: rotate(180deg);
  opacity: 1;
}

.dropdown {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #dde3ed;
  border-top: 3px solid var(--p);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(26, 74, 138, 0.13);
  z-index: 999;
  padding: 5px 0;
}
.nav-item-wrap:hover .dropdown {
  display: block;
}
/* dropdown แนวกว้างของ "ข่าวสารกิจกรรม" (Desktop) — 2 คอลัมน์: เมนูตัวอักษร (ซ้าย) + ข่าวล่าสุดประเภทละ 1 (ขวา)
   ให้ wrap เป็น static เพื่อให้ dropdown อ้างอิง .nav-items (กึ่งกลางหน้าจอ) แล้วจัดกึ่งกลางเอง
   ส่วน Mobile ใช้เมนูสไลด์อีกชุด (.nav-mobile-menu) ไม่เกี่ยวกับ dropdown นี้ */
.nav-item-wrap.nav-mega {
  position: static;
}
.dropdown.dd-mega {
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 64px));
  padding: 5px 0;
}
.nav-item-wrap:hover .dropdown.dd-mega {
  display: grid;
  grid-template-columns: 230px 1fr; /* ซ้าย = เมนูตัวอักษร · ขวา = ข่าวล่าสุด 3 ประเภท */
}
/* ลิงก์ข้อความ (.sec-more) ใน mega menu — ขยับเส้นใต้ตอน hover ให้ห่างตัวอักษรอีกนิด
   ตัวอักษรไทยมีสระล่าง/วรรณยุกต์ เส้นชิดเกินไปจะทับสระ (ใช้กับ e-Services, เกี่ยวกับเรา และลิงก์ "ดูข่าวทั้งหมด") */
.dd-mega .sec-more:hover {
  text-underline-offset: 2px; /* เท่ากับที่อื่นในเว็บ (svc4, doc-list, news-detail, plan-page) */
}

/* ปุ่มทางลัดของ mega menu: "บริการประชาชน" (ร้องทุกข์ / แจ้งทุจริต) และ "ติดต่อเรา" (เบอร์เทศบาล)
   พื้นสีอ่อนตามธีม + ไอคอนวงกลมขาว + ลูกศร — ชี้แล้วลอยขึ้นเล็กน้อย ลูกศรขยับขวา · --q = สีเข้มของธีม */
.dd-mega a[data-quick] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  box-sizing: border-box;
  min-height: 56px; /* ทุกปุ่มทางลัด (ร้องทุกข์ / แจ้งทุจริต / เบอร์เทศบาล) สูงขั้นต่ำเท่ากัน */
  border: 1px solid;
  border-radius: 10px;
  text-decoration: none;
  transition:
    translate 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.dd-mega a[data-quick="teal"] {
  --q: #0f6e56;
  background: #f1faf6;
  border-color: #cfeadf;
}
.dd-mega a[data-quick="blue"] {
  --q: var(--p);
  background: #f0f4ff;
  border-color: #d6e2fb;
}
.dd-mega a[data-quick="red"] {
  --q: #a32d2d;
  background: #fff5f5;
  border-color: #f4d3d3;
}
.dd-mega a[data-quick]:hover {
  border-color: var(--q);
  translate: 0 -1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* ปุ่มเบอร์ฉุกเฉินใน "ติดต่อเรา" — คงดีไซน์เดิม เพิ่มเฉพาะ hover แบบเดียวกับปุ่มทางลัด
   (--q = สีของแต่ละเบอร์ ตั้งใน inline style) */
.dd-mega a[data-hov] {
  /* กรอบบาง 0.5px สีเทากลาง (ปุ่มพื้นขาว สีอยู่ที่ไอคอนอย่างเดียว — ให้เบอร์ฉุกเฉินไม่เด่นเกินเบอร์เทศบาล)
     [ก่อนหน้านี้: กรอบสีธีมของเบอร์นั้น color-mix(in srgb, var(--q) 35%, transparent)]
     padding ใน inline style ลดลง 0.5px ชดเชยกรอบ ขนาดปุ่มจึงเท่าเดิม */
  border: 0.5px solid #e5e7eb;
  transition:
    translate 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.dd-mega a[data-hov]:hover {
  /* กรอบคงเดิมตอน hover (ไม่เข้ม/หนาขึ้น) — เปลี่ยนแค่ลอยขึ้นกับเงา */
  translate: 0 -1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dd-mega a[data-quick] > i:last-child {
  transition: translate 0.18s;
}
.dd-mega a[data-quick]:hover > i:last-child {
  translate: 3px 0;
}

/* ไฮไลต์คู่เมนู↔การ์ดข่าว: ชี้เมนูซ้าย → การ์ดประเภทเดียวกันเด่นขึ้น (อื่นจางลง)
   ชี้การ์ดข่าว → เมนูซ้ายของประเภทนั้นไฮไลต์ · ใช้ :has() (เบราว์เซอร์ที่ไม่รองรับ = ไม่มีเอฟเฟกต์ แต่ไม่พัง) */
.dd-mega [data-nt-card] {
  transition:
    opacity 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.dd-mega:has([data-nt]:hover) [data-nt-card],
.dd-mega:has([data-nt-card]:hover) [data-nt-card] {
  opacity: 0.5;
}
.dd-mega:has([data-nt="pr"]:hover) [data-nt-card="pr"],
.dd-mega:has([data-nt="mission"]:hover) [data-nt-card="mission"],
.dd-mega:has([data-nt="activity"]:hover) [data-nt-card="activity"],
.dd-mega:has([data-nt-card]:hover) [data-nt-card]:hover {
  opacity: 1;
  border-color: var(--p);
  box-shadow: 0 4px 14px rgba(26, 74, 138, 0.15);
}
.dd-mega:has([data-nt-card="pr"]:hover) [data-nt="pr"],
.dd-mega:has([data-nt-card="mission"]:hover) [data-nt="mission"],
.dd-mega:has([data-nt-card="activity"]:hover) [data-nt="activity"] {
  background: #f0f4ff;
  color: var(--p);
}
.dd-mega:has([data-nt-card="pr"]:hover) [data-nt="pr"] i,
.dd-mega:has([data-nt-card="mission"]:hover) [data-nt="mission"] i,
.dd-mega:has([data-nt-card="activity"]:hover) [data-nt="activity"] i {
  color: var(--p);
}
.dd-item {
  padding: 9px 16px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
}
.dd-item:hover {
  background: #f0f4ff;
  color: var(--p);
}
.dd-item i {
  font-size: 14px;
  color: #bbb;
  flex-shrink: 0;
}
.dd-item:hover i {
  color: var(--p);
}
.dd-sep {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-search-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #dde3ed;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  text-decoration: none;
}
.nav-search-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #185fa5;
}

/* ── Login button ── */
.nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  height: 28px;
  cursor: pointer;
  border: 0.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  text-decoration: none;
  font-family: var(--font-main);
  transition: all 0.18s;
  white-space: nowrap;
}
.nav-login-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #185fa5;
}

/* ── Hide Google Translate widget UI ── */
#google_translate_element,
.goog-te-gadget,
.goog-logo-link,
.goog-te-banner-frame {
  display: none !important;
}
body {
  top: 0 !important;
}
.skiptranslate {
  display: none !important;
}

/* ===== ALERT BANNER ===== */
.alert-banner {
  background: #faece7;
  border-left: 3px solid #d85a30;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-banner .alert-icon {
  color: #993c1d;
  font-size: 15px;
  flex-shrink: 0;
}
.alert-text {
  font-size: 13px;
  color: #4a1b0c;
  flex: 1;
}
.alert-text strong {
  font-weight: 700;
}
.alert-text a {
  color: #993c1d;
  font-weight: 600;
  text-decoration: none;
}
.alert-text a:hover {
  text-decoration: underline;
}
.alert-close {
  background: none;
  border: none;
  color: #993c1d;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.alert-counter {
  font-size: 11px;
  font-weight: 600;
  color: #993c1d;
  background: #f5c4b3;
  padding: 2px 8px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, #1a4a8a 0%, #1b5fa0 60%, #0d7a8a 100%);
  padding: 28px 24px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.hero::after {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.hero-sub {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 7px;
}
.hero-title {
  font-family: var(--font-hero-title);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px;
}
.hero-desc {
  font-size: 13px;
  opacity: 0.8;
}

/* ===== STATS BAR ===== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.stat-item {
  padding: 16px 20px;
  text-align: center;
  border-right: 1px solid #e2e8f0;
}
.stat-item:last-child {
  border-right: none;
}
.stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--p);
  line-height: 1;
}
.stat-unit {
  font-size: 11px;
  color: #888;
}
.stat-label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* ===== QUICK SERVICE CARDS ===== */
.qs-section {
  padding: 22px 24px 0;
}
.qs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
/* desktop: 6 ใบเรียงแถวเดียว — ซ้ายสุด/ขวาสุดโค้งให้ภาพรวมเป็นวงรี */
.qs-card {
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-left-width: 0;
  border-radius: 0;
  padding: 20px 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qs-card:first-child {
  border-left-width: 0.5px;
  border-radius: 14px 0 0 14px;
}
.qs-card:last-child {
  border-radius: 0 14px 14px 0;
}
.qs-card:hover {
  background: #f9fafb;
}
.qs-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qs-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 20px;
  flex-shrink: 0;
  background: #e6f1fb;
  color: var(--p);
}
.qi-teal {
  background: #e1f5ee;
  color: #0f6e56;
}
.qi-red {
  background: #fcebeb;
  color: #a32d2d;
}
.qi-amber {
  background: #faeeda;
  color: #854f0b;
}
.qi-green {
  background: #eaf3de;
  color: #3b6d11;
}
.qi-purple {
  background: #f3e8ff;
  color: #6b21a8;
}
.qs-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* ===== DIVIDER ===== */
.dhr-divider {
  height: 1px;
  background: #eee;
  margin: 20px 24px 0;
}

/* ===== SECTION COMMON ===== */
.sec-cat {
  font-size: 12px;
  color: var(--a);
  font-weight: 600;
  margin-bottom: 3px;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 16px;
}
.sec-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sec-more {
  font-size: 13px;
  color: var(--p);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.sec-more:hover {
  text-decoration: underline;
}

/* ===== TAB SYSTEM ===== */
.tab-section {
  padding: 22px 24px 0;
}
.tab-header {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 18px;
}
.tab-btn {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: #666;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-main);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: all 0.18s;
}
.tab-btn.active {
  color: var(--p);
  border-bottom-color: var(--p);
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
.tab-footer {
  margin-top: 14px;
  text-align: right;
}

/* ===== NEWS LAYOUT ===== */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.news-featured {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.news-featured:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.news-featured-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 28px;
}
/* ใช้เฉพาะหน้าโฮม (home-shared.php) — แยกจาก .news-featured-img เดิม
   เพราะไม่แน่ใจว่า class เดิมถูกใช้ซ้ำที่หน้าอื่นหรือไม่ (2026-07-27) */
.news-featured-img-lg {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 28px;
}
.news-featured-body {
  padding: 14px;
}
.news-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.nt-news {
  background: #f0f4ff;
  color: var(--p);
}
.nt-mission {
  background: #eaf3de;
  color: #3b6d11;
}
.nt-proc {
  background: #faeeda;
  color: #854f0b;
}
.nt-activity {
  background: #e1f5ee;
  color: #0f6e56;
}
.nt-announce {
  background: #e6f1fb;
  color: var(--p);
}
.nt-health {
  background: #f0fff4;
  color: #166534;
}
.news-date {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.news-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.5;
  margin-bottom: 7px;
}
.news-excerpt {
  font-size: 12.5px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 9px;
}
.news-read {
  font-size: 12.5px;
  color: var(--p);
  text-decoration: none;
}
.news-read:hover {
  text-decoration: underline;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-list-item {
  display: flex;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
}
.news-list-item:hover {
  border-color: var(--p);
}
.nli-img {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}
/* ใช้เฉพาะหน้าโฮม (home-shared.php) — คู่กับ .news-featured-img-lg (2026-07-27) */
.nli-img-lg {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}
.nli-body {
  padding: 9px 10px;
  flex: 1;
}
.nli-title {
  font-size: 12.5px;
  font-weight: 400;
  color: #1a1a2e;
  line-height: 1.4;
}
.nli-date {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
}

/* ===== EVENTS + E-SERVICES ===== */
.ev-esvc-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 22px 24px 0;
}
.ev-list {
  display: flex;
  flex-direction: column;
}
.ev-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: flex-start;
}
.ev-item:last-child {
  border-bottom: none;
}
.ev-date {
  width: 46px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-date.blue {
  background: #e6f1fb;
}
.ev-date.blue .ev-day,
.ev-date.blue .ev-month {
  color: var(--p);
}
.ev-date.amber {
  background: #faeeda;
}
.ev-date.amber .ev-day,
.ev-date.amber .ev-month {
  color: #854f0b;
}
.ev-date.teal {
  background: #e1f5ee;
}
.ev-date.teal .ev-day,
.ev-date.teal .ev-month {
  color: #0f6e56;
}
.ev-day {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.ev-month {
  font-size: 10px;
  opacity: 0.8;
}
.ev-info-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 3px;
  line-height: 1.4;
}
.ev-meta {
  font-size: 11.5px;
  color: #888;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ev-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.esvc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.esvc-card {
  padding: 14px;
  background: #f5f6f8;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.esvc-card:hover {
  filter: brightness(0.97);
}
.esvc-icon {
  font-size: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ei-blue {
  color: var(--p);
}
.ei-green {
  color: #3b6d11;
}
.ei-amber {
  color: #854f0b;
}
.ei-red {
  color: #a32d2d;
}
.esvc-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  white-space: nowrap;
  flex: 1;
}
.esvc-arr {
  font-size: 12px;
  color: #aaa;
  margin-left: auto;
}
.esvc-highlight {
  grid-column: 1 / -1;
  background: var(--a);
  border-radius: 10px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}
.esvc-highlight:hover {
  background: #9a3f06;
}
.esvc-highlight i.big {
  font-size: 21px;
  color: #fff;
  opacity: 0.9;
}
.esvc-hi-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.esvc-hi-text span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}
.esvc-hi-arr {
  margin-left: auto;
  color: #fff;
  font-size: 16px;
}

/* ===== PROCUREMENT TAB ===== */
.proc-section {
  padding: 22px 24px 0;
}
.ptab-header {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 15px;
}
.ptab-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #666;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-main);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: all 0.18s;
}
.ptab-btn.active {
  color: var(--p);
  border-bottom-color: var(--p);
}
.ptab-pane {
  display: none;
}
.ptab-pane.active {
  display: block;
}
.pdf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /*background: #f8f9fc;*/
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
}
.pdf-item:hover {
  border-color: var(--p);
  /*background: #eef2fb;*/
  background: #fff;
}
.pdf-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pdf-icon.pdf {
  background: #fcebeb;
}
.pdf-icon.pdf i {
  font-size: 16px;
  color: #a32d2d;
}
.pdf-icon.url {
  background: #e6f1fb;
}
.pdf-icon.url i {
  font-size: 16px;
  color: var(--p);
}
.pdf-name {
  flex: 1;
  font-size: 13px;
  color: #333;
  font-weight: 400;
}
.pdf-meta {
  font-size: 11px;
  color: #999;
}
.pdf-dl {
  font-size: 12px;
  color: var(--p);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.pdf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
}
.pb-new {
  background: #e6f1fb;
  color: var(--p);
}
.pb-yr {
  background: #eaf3de;
  color: #3b6d11;
}

/* ===== MEDIA + SOCIAL ===== */
.media-section {
  padding: 22px 24px 0;
}
.media-social-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.media-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.media-card {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
  text-decoration: none;
}
.media-card:hover {
  translate: 0 -2px; /* ใช้ translate แทน transform — anim-up (animation forwards) ค้างค่า transform ไว้ทับ hover (2026-10-04) */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.media-thumb {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 25%;
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  padding: 7px 10px;
}
.media-tag {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.media-title {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
  color: #1a1a2e;
  line-height: 1.4;
}
.social-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-label {
  font-size: 12px;
  color: #888;
  font-weight: 600;
  margin-bottom: 2px;
}
.social-card {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.social-card:hover {
  border-color: var(--p);
}
.social-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.sc-fb {
  background: #1877f2;
  color: #fff;
}
.sc-line {
  background: #06c755;
  color: #fff;
}
.sc-yt {
  background: #ff0000;
  color: #fff;
}
.social-info {
  padding: 9px 12px;
  flex: 1;
}
.social-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}
.social-stat {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.social-arr {
  padding-right: 12px;
  font-size: 14px;
  color: var(--p);
}
.workhour-box {
  padding: 12px;
  background: #f0f4ff;
  border-radius: 10px;
  border: 1px solid #dde3ed;
}
.wh-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--p);
  margin-bottom: 5px;
}
.wh-text {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
}
.wh-text a {
  color: var(--p);
  font-weight: 600;
  text-decoration: none;
}

/* ===== FOOTER ===== */

/* ===== HERO ===== */
.site-footer {
  background: linear-gradient(135deg, #1a4a8a 0%, #1b5fa0 60%, #0d7a8a 100%);
  color: #fff;
  padding: 30px 24px 16px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.site-footer::after {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.ft-brand strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}
.ft-brand p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
}
.ft-heading {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ft-link {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.ft-link:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ft-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
}

/* ===== INNER PAGE ===== */
.page-banner {
  background: linear-gradient(135deg, #1a4a8a 0%, #1b5fa0 60%, #0d7a8a 100%);
  padding: 20px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.page-banner::after {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.breadcrumb {
  font-size: 12px;
  opacity: 0.72;
  margin-bottom: 7px;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.breadcrumb span {
  opacity: 0.6;
  margin: 0 4px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
}
.inner-body {
  display: flex;
  gap: 0;
  padding: 24px;
  align-items: flex-start;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dde3ed;
  overflow: hidden;
  align-self: flex-start;
  position: sticky;
  top: 16px;
}
.sidebar-head {
  background: var(--p);
  color: #fff;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.15s;
  text-decoration: none;
}
.sidebar-item:last-child {
  border-bottom: none;
}
.sidebar-item:hover {
  background: #f0f4ff;
  color: var(--p);
}
.sidebar-item.active {
  background: #eef2fb;
  color: var(--p);
  font-weight: 600;
  border-left: 3px solid var(--p);
}
.sidebar-item.active .si-icon {
  opacity: 1;
  color: var(--p);
}
.sidebar-sep {
  height: 1px;
  background: #f0f0f0;
  margin: 3px 0;
}
.si-icon {
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}
.inner-content {
  flex: 1;
  margin-left: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dde3ed;
  padding: 24px 28px;
  min-height: 360px;
}
.content-cat {
  font-size: 12px;
  color: var(--a);
  font-weight: 600;
  margin-bottom: 5px;
}
.content-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 14px;
}
.content-body {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
}

/* =============================================================
   เพิ่มเติม v2 — Lang switcher, Topbar, AB Switcher, Design A social
   ============================================================= */

/* LANG SWITCHER (nav) */
.lang-wrap {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dde3ed;
}
.lang-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-main);
  background: #fff;
  color: #666;
  transition: all 0.18s;
}
.lang-btn.active {
  background: var(--p);
  color: #fff;
}
.lang-btn:not(.active):hover {
  background: #f0f4ff;
  color: var(--p);
}

/* =============================================================
   Responsive max-width v2
   - mainnav / topbar / alert-banner : เต็ม 100vw (เหมือน hero)
   - sections อื่น : จำกัด 1320px กึ่งกลาง
   ============================================================= */

/* sections ที่ต้องการจำกัดความกว้าง */
.qs-section,
.tab-section,
.ev-esvc-section,
.proc-section,
.media-section,
.inner-body,
.inner-wrap {
  padding-left: max(24px, calc(50% - 660px));
  padding-right: max(24px, calc(50% - 660px));
}

.dhr-divider {
  margin-left: max(24px, calc(50% - 660px));
  margin-right: max(24px, calc(50% - 660px));
}

/* footer จำกัดความกว้างเหมือนกัน */
.site-footer {
  padding-left: max(32px, calc(50% - 660px));
  padding-right: max(32px, calc(50% - 660px));
}

/* mainnav / topbar / alert-banner — เต็ม 100vw เหมือน hero ไม่ต้อง override */

/* Responsive */
@media (max-width: 1400px) {
  .qs-section,
  .tab-section,
  .ev-esvc-section,
  .proc-section,
  .media-section,
  .inner-body,
  .inner-wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
  .dhr-divider {
    margin-left: 32px;
    margin-right: 32px;
  }
  .site-footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Mobile-only elements — hidden on desktop by default */
.nav-hamburger {
  display: none;
}
.nav-mobile-overlay {
  display: none;
}
.nav-mobile-menu {
  display: none;
}

@media (max-width: 1365px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
  .media-social-grid {
    grid-template-columns: 1fr;
  }
  .qs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* mobile: 2 คอลัมน์ 3 แถว — โค้งที่ 4 มุมนอก (1 ซ้ายบน, 2 ขวาบน, 5 ซ้ายล่าง, 6 ขวาล่าง) */
  .qs-card,
  .qs-card:first-child,
  .qs-card:last-child {
    border-width: 0 0.5px 0.5px 0;
    border-radius: 0;
  }
  .qs-card:nth-child(-n + 2) {
    border-top-width: 0.5px;
  }
  .qs-card:nth-child(odd) {
    border-left-width: 0.5px;
  }
  .qs-card:nth-child(1) {
    border-top-left-radius: 14px;
  }
  .qs-card:nth-child(2) {
    border-top-right-radius: 14px;
  }
  .qs-card:nth-child(5) {
    border-bottom-left-radius: 14px;
  }
  .qs-card:nth-child(6) {
    border-bottom-right-radius: 14px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ev-esvc-section {
    display: block;
  }

  /* === NAV MOBILE === */
  .nav-items {
    display: none;
  }
  .nav-right {
    display: none;
  }
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    margin-left: auto;
  }
  .nav-hamburger i {
    font-size: 20px;
    color: var(--p);
  }

  /* === NAV MOBILE MENU (slide-in from left) === */
  .nav-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 300;
  }
  .nav-mobile-overlay.open {
    display: block;
  }
  .nav-mobile-menu {
    position: fixed;
    top: 0;
    right: -280px;
    left: auto;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 301;
    overflow-y: auto;
    transition: right 0.25s ease;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  }
  .nav-mobile-menu.open {
    right: 0;
  }
  .nav-mobile-head {
    background: var(--p);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav-mobile-head .nav-logo-circle {
    width: 36px;
    height: 36px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
  }
  /* Logo image จริงสำหรับ mobile — ไฟล์ generate มา 42px (desktop) ยังต้อง
     บีบเป็น 36px ที่นี่ (เอาเท่าที่ใช้ก่อน ตกลงกับ EK!! 2026-08-03 — ถ้า
     ต้องการคมชัดเป๊ะเหมือน desktop ต้อง generate ไฟล์ 36×36 แยกเพิ่ม) */
  .nav-mobile-head .nav-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .nav-mobile-head strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
  .nav-mobile-head span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-mobile-close {
    margin-left: auto;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-decoration: none;
  }
  .nav-mobile-item.active {
    color: var(--p);
    font-weight: 600;
    background: #eef2fb;
    border-left: 3px solid var(--p);
  }
  .nav-mobile-item:hover {
    background: #f9fafb;
  }
  .nav-mobile-sub {
    display: none;
    background: #f9fafb;
  }
  .nav-mobile-sub.open {
    display: block;
  }
  .nav-mobile-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 28px;
    font-size: 13px;
    color: #4b5563;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
  }
  .nav-mobile-sub-item:hover {
    color: var(--p);
    background: #eef2fb;
  }
  .nav-mobile-sub-item i {
    font-size: 14px;
    opacity: 0.6;
    flex-shrink: 0;
  }
  .nav-mobile-sep {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
  }
  .nav-mobile-bottom {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .nav-mob-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 0.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .nav-mob-login-btn:hover {
    background: #f0f4ff;
    color: var(--p);
    border-color: var(--p);
  }
  .nav-mob-login-btn i {
    font-size: 15px;
  }

  /* === INNER PAGE MOBILE === */
  .inner-body {
    flex-direction: column;
    padding: 16px;
    gap: 0;
  }
  .sidebar {
    display: none;
  }
  .inner-content {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    border: none;
    border-radius: 0;
    padding: 16px;
    background: transparent;
  }
  .inner-body {
    padding: 12px;
  }
  .content-cat {
    display: none;
  }
  .content-title {
    display: none;
  }
  .content-cat {
    display: none;
  }
  .content-title {
    display: none;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .page-banner {
    padding: 16px;
  }
  .inner-body {
    padding: 12px;
  }
}

/* แถบแท็บ (ข่าว / จัดซื้อจัดจ้าง) บนมือถือ — ปุ่มรวมกว้างกว่าจอ (~418px) เดิมดันทั้งหน้าให้กว้าง 442px
   จนเลื่อนขวาได้แต่ซ้ายชิดขอบ → ให้แถบเลื่อนข้างในกรอบตัวเองแทน
   เส้นเทาย้ายไปเป็น inset shadow เพราะ overflow จะตัดปุ่มที่ margin-bottom ติดลบ (เส้นใต้แท็บ active หาย) */
@media (max-width: 768px) {
  .tab-header,
  .ptab-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #e2e8f0;
  }
  .tab-header::-webkit-scrollbar,
  .ptab-header::-webkit-scrollbar {
    display: none;
  }
  /* ทุกแท็บแบ่งความกว้างเท่ากันให้เห็นครบทันที (ไม่ต้องเลื่อน ผู้ใช้จะได้รู้ว่ามีแท็บที่ 3)
     ไอคอนอยู่บน ข้อความอยู่ล่างและตัดบรรทัดได้ — จอแคบมากยังเลื่อนได้ตาม overflow-x ด้านบน */
  .tab-btn,
  .ptab-btn {
    margin-bottom: 0;
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 4px;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
  }
  .tab-btn i,
  .ptab-btn i {
    margin-right: 0 !important; /* ทับ inline style (margin-right:6px) ที่ใช้ตอนไอคอนอยู่ข้างข้อความ */
  }

  /* ข่าวแรกของแต่ละแท็บ (เฉพาะมือถือ) — เดิมกรอบสูงคงที่ 400px + cover ทำให้รูปแนวกว้าง/โปสเตอร์ถูกตัดซ้าย-ขวา
     ให้ความสูงกรอบตามสัดส่วนจริงของรูป (ไม่ตัด ไม่เติมพื้น) โดยมีขอบเขต:
       - รูปเตี้ยกว่า 2:1 (แบนเนอร์/โปสเตอร์แนวนอนยาว) → ขยายรูปให้เต็มกรอบ (cover) แทนการเติมพื้นหลัง
       - รูปสูงกว่า 3:4 (แนวตั้งมาก) → จำกัดความสูง ตัดส่วนล่างของรูปแทนการยืดการ์ดยาวเกินไป
     .news-featured เป็น container เพื่อใช้ cqw = ความกว้างการ์ด */
  .news-featured {
    container-type: inline-size;
  }
  .news-featured .news-featured-img-lg {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    min-height: 50cqw;
    max-height: 133cqw;
  }
  .news-featured .news-featured-img-lg img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* =============================================================
   Hero Slider
   ============================================================= */
.hero-slider {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #1a4a8a;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
}
.slide.active {
  opacity: 1;
  z-index: 1;
}
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 20, 50, 0.72) 0%,
    rgba(10, 20, 50, 0.35) 60%,
    transparent 100%
  );
}
.slide-content {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  max-width: 620px;
}
.slide-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.slide-title {
  font-family: var(--font-hero-title);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 10px;
}
.slide-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 18px;
}
.slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* ทองสว่างบนพื้นกรมท่า — โทน "navy + gold" ตัวอักษรกรมท่าเข้ม contrast สูง
     เงาเป็นสีเข้มบางๆ (ไม่ใช่แสงเรืองสีทอง) ปุ่มจะได้ไม่เด่นเกินไป
     ลองแบบ cyan ไว้แล้ว: #67e8f9→#22d3ee (hover #a5f3fc→#4ee0f5) */
  background: linear-gradient(135deg, #ffd666 0%, #f5b21a 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  color: #0a1432 !important;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.slide-btn:hover {
  background: linear-gradient(135deg, #ffe08a 0%, #ffc233 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  color: #0a1432 !important;
}
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 0px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.slider-prev {
  left: 16px;
}
.slider-next {
  right: 16px;
}
.slider-prev:hover,
.slider-next:hover {
  background: rgba(255, 255, 255, 0.35);
}
.slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.25s;
  border: none;
}
.dot.active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}
.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  z-index: 10;
}
.slider-progress-bar {
  height: 100%;
  background: #d9a521; /* เหลืองทองทึบ ไม่ไล่สี ไม่ใส่แสงเรือง — เด่นน้อยกว่าปุ่ม (#ffd666→#f5b21a) */
  width: 0%;
}

/* nav-items กึ่งกลาง — logo ซ้าย, right ขวา คงที่ */
.mainnav {
  justify-content: space-between;
}
.nav-items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.mainnav {
  position: relative;
}

/* =============================================================
   Pill Tab — utility class ใช้ร่วมกันทุกหน้าที่มี tab/filter
   ใช้งาน: <div class="dhr-pill-tabs"> <a class="dhr-pill-tab active"> ...
   ============================================================= */
.dhr-pill-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.dhr-pill-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  font-size: 13px;
  font-family: var(--font-main);
  font-weight: 400;
  border: 0.5px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  line-height: 1.6;
}
.dhr-pill-tab:hover:not(.active) {
  background: #f3f4f6;
  color: #374151;
  border-color: #9ca3af;
}
.dhr-pill-tab.active {
  background: #185fa5;
  color: #fff;
  border-color: #185fa5;
  font-weight: 500;
}
.dhr-pill-tab i {
  font-size: 14px;
}
@media (max-width: 1365px) {
  .dhr-pill-tab {
    padding: 4px 12px;
    font-size: 12.5px;
  }
  .dhr-pill-tab i {
    display: none;
  }
}

/* ===== SCROLL TO TOP =====
   หมายเหตุ 2026-07-29: บนหน้าที่มี chatbot widget ฝังอยู่ (body มี class
   .has-chatbot-widget เช่น index.php) ปุ่มนี้ขยับขึ้นไปอยู่เหนือ widget
   แทน (widget แทนที่ตำแหน่งเดิมของปุ่มนี้ bottom:28px right:24px) —
   หน้าอื่นที่ไม่มี widget ยังคงตำแหน่งเดิมปกติ (แก้ตามฟีดแบ็ก EK: เดิม
   ขยับตำแหน่งทุกหน้าทำให้หน้าที่ไม่มี widget ดูแปลกๆ ไม่มีเหตุผลรองรับ) */
#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a4a8a;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 900;
  pointer-events: none;
}
#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scrollTopBtn:hover {
  background: #2460b0;
}

/* เฉพาะหน้าที่มี chatbot widget (body.has-chatbot-widget) — ขยับขึ้นเหนือ
   widget (widget สูง 40px เริ่มที่ bottom:28px → ขอบบน 68px + เว้น 8px = 76px) */
body.has-chatbot-widget #scrollTopBtn {
  bottom: 76px;
}

@media (max-width: 768px) {
  #scrollTopBtn {
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* widget mobile สูง 36px เริ่มที่ bottom:16px → ขอบบน 52px + เว้น 6px = 58px */
  body.has-chatbot-widget #scrollTopBtn {
    bottom: 58px;
  }

  /* esvc-label mobile: ยอมตัดบรรทัดได้ (ต่างจาก desktop ที่บังคับ
     nowrap) กันข้อความยาวล้นกรอบการ์ดจนดันทั้งหน้าล้นขอบจอ
     (บั๊กที่เจอจริง 2026-07-28 — พื้นที่ mobile แคบกว่า desktop มาก) */
  .esvc-label {
    white-space: normal;
    font-size: 12px;
  }
  .esvc-icon {
    font-size: 22px;
  }

  /* alert-text link mobile: เคาะขึ้นบรรทัดใหม่แยกจากข้อความหลัก
     กันลิงก์ไปอยู่ท้ายบรรทัดที่แน่นเกินไปบนจอแคบ (desktop คงเดิม
     อยู่บรรทัดเดียวกับข้อความ — ตกลงกับ EK 2026-07-29) */
  .alert-text a {
    display: block;
    margin-top: 2px;
  }
}

@media (max-width: 400px) {
  /* จอแคบมาก (เช่น iPhone SE) — 2 คอลัมน์ยังแน่นเกินไปแม้ตัดบรรทัดแล้ว
     ยุบเหลือ 1 คอลัมน์เพื่อให้ icon+ข้อความ+ลูกศรมีที่หายใจพอ */
  .esvc-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== EMPTY STATE ===== */
.dhr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  gap: 14px;
}
.dhr-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #9ca3af;
}
.dhr-empty-title {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
}
.dhr-empty-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
}
.dhr-empty-code {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  color: #6b7280;
}

/* ===== IMAGE SHIMMER PLACEHOLDER ===== */
@keyframes dhrShimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.news-card-img,
.news-hero-img,
.news-side-img,
.pc-img-wrap img,
.pc-img-placeholder {
  background-color: #f3f4f6;
  background-image: linear-gradient(
    90deg,
    #f3f4f6 25%,
    #e9ecef 50%,
    #f3f4f6 75%
  );
  background-size: 800px 100%;
  animation: dhrShimmer 1.4s infinite linear;
}

/* หยุด shimmer เมื่อรูปโหลดแล้ว */
.news-card-img[src],
.news-hero-img[src],
.news-side-img[src] {
  background-image: none;
  animation: none;
}

/* ===== Lazy load ===== */
.lazy-img-box {
  overflow: clip;
  position: relative;
}
.lazy-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* modifier: ใช้เมื่อไม่อยากครอปเนื้อหาสำคัญในรูป (เช่น คนถูกครอปหัวขาด)
   ต้องกำหนด background-color เพิ่มเองเป็น inline หรือ class ของ container
   เพราะพื้นที่ว่างซ้าย-ขวา/บน-ล่างจะโผล่ตามสัดส่วนรูปจริง */
.lazy-img-box.contain img {
  object-fit: contain;
  background: #f3f4f6;
}
/* modifier: เต็มกรอบเหมือน cover เดิม แต่ครอปดันขอบล่างออกแทนขอบบน
   (เดาว่าจุดสำคัญ เช่น ใบหน้าคน มักอยู่ค่อนบนของภาพข่าว) —
   ไม่ต้องเปลี่ยน height ของ container เลย ปลอดภัยกับหน้าอื่นที่ใช้
   .lazy-img-box ร่วมกัน เพราะเป็น class ใหม่แยกต่างหาก */
.lazy-img-box.top img {
  object-position: center 20%;
}

/* =============================================================
   Preloader + Top Progress Bar — ย้ายมาจาก <style> กลาง nav.php เดิม
   (2026-08-04) เพราะ CSS ที่อยู่กลาง body ทำให้เกิด FOUC (Flash of
   Unstyled Content) — browser render element ก่อน CSS จะถูก parse
   ย้ายมารวมกับ CSS หลักที่นี่ให้โหลดพร้อมกันตั้งแต่ <head> เสมอ
   ไม่กระทบ logic ใดๆ เพราะเป็นแค่ CSS ล้วนๆ HTML/JS ยังอยู่ที่ nav.php
   เหมือนเดิม (#dhrPreloader, #dhrTopBar, #dhrTopBarFill)
   ============================================================= */

/* ── Dots bounce preloader ── */
@keyframes dhr-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }
}

.se-pre-con {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.se-pre-con.dhr-pre-out {
  opacity: 0;
  pointer-events: none;
}

.se-pre-con span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: dhr-bounce 1.2s ease-in-out infinite;
}

.se-pre-con span:nth-child(1) {
  background: #378add;
  animation-delay: 0s;
}

.se-pre-con span:nth-child(2) {
  background: #7f77dd;
  animation-delay: 0.15s;
}

.se-pre-con span:nth-child(3) {
  background: #d4537e;
  animation-delay: 0.3s;
}

/* ── Top progress bar ── */
#dhrTopBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 999999;
  pointer-events: none;
}

#dhrTopBarFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1a4a8a, #7f77dd, #0d7a8a);
  background-size: 200% 100%;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(26, 74, 138, 0.4);
  transition: width 0.3s ease;
  animation: dhr-glow 1.5s ease infinite;
}

@keyframes dhr-glow {
  0%,
  100% {
    background-position: 0% 0;
    box-shadow: 0 0 8px rgba(26, 74, 138, 0.4);
  }

  50% {
    background-position: 100% 0;
    box-shadow: 0 0 14px rgba(127, 119, 221, 0.6);
  }
}

/* ── Dashboard button (nav, member zone shortcut) ── */
/* คัดลอก property จาก .nav-search-btn เป๊ะ เพื่อให้ขนาด/หน้าตาเหมือนกัน
   แยก class ต่างหากเพราะ .nav-search-btn ถูก JS ใน search-modal.php
   เลือกด้วย querySelectorAll('.nav-search-btn') ไปเปิด search modal โดยไม่สนใจ href
   ถ้าใช้ class เดิมซ้ำ ปุ่มนี้จะโดนดักไปเปิด modal แทนที่จะลิงก์ไป dashboard.php */
.nav-dashboard-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #dde3ed;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.nav-dashboard-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #185fa5;
}