/*
Theme Name: OAE THEME V2
Theme URI: https://oae.go.th
Author: Athiwat-Poaek
Author URI: https://www.facebook.com/atiwat.poaek
Description: OAE theme WordPress v1.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oae_theme_v2
*/

/* =========================================================
   OAE THEME — DESIGN SYSTEM (โทนฟ้า–น้ำเงิน ทางการ น่าเชื่อถือ)
   ========================================================= */
:root {
  --oae-navy: #0a2358;      /* น้ำเงินเข้ม (header/footer) */
  --oae-navy-dark: #061638; /* น้ำเงินเข้มสุด (gradient end) */
  --oae-blue: #0b63e6;      /* น้ำเงินหลัก (ปุ่ม/ลิงก์) */
  --oae-blue-light: #2f86ff;
  --oae-sky: #8fd3ff;       /* ฟ้าสว่าง (accent/hover) */
  --oae-surface: #eef5ff;   /* พื้นหลังเว็บ (ฟ้าอ่อนเกือบขาว) */
  --oae-surface-card: #ffffff;
  --oae-border: #dce6f7;
  --oae-text: #101a33;
  --oae-text-muted: #5b6b8c;
  --oae-radius-lg: 22px;
  --oae-radius-md: 14px;
  --oae-shadow-sm: 0 2px 10px rgba(10, 35, 88, 0.08);
  --oae-shadow-md: 0 16px 32px -14px rgba(10, 35, 88, 0.24);
  --oae-shadow-lg: 0 30px 60px -20px rgba(10, 35, 88, 0.32);
}

* { scroll-behavior: smooth; }

::selection { background: var(--oae-sky); color: #fff; }

/* Scrollbar โทนน้ำเงิน */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--oae-surface); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--oae-blue-light), var(--oae-navy));
  border-radius: 10px;
  border: 2px solid var(--oae-surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--oae-blue); }

a { color: var(--oae-blue); }

/* =========================================================
   SITE LOGO — บังคับขนาดโลโก้ (กัน inline width/height ของ WP ทับ)
   ========================================================= */
.site-logo,
.site-logo a {
  display: inline-flex;
  align-items: center;
}
.site-logo img,
.custom-logo-link img,
.site-logo .custom-logo {
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
}
@media (max-width: 767px) {
  .site-logo img,
  .custom-logo-link img,
  .site-logo .custom-logo {
    max-height: 30px !important;
  }
}

/* หัวข้อ Section แบบมาตรฐาน ใช้คู่กับ heading เดิมของแต่ละ template
   (ไม่บังคับ ใส่ class เพิ่มได้โดยไม่กระทบของเดิม) */
.oae-section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--oae-navy);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.oae-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--oae-blue), var(--oae-sky));
}

/* การ์ดข่าวมาตรฐาน (ใช้เสริม class เดิมของ card ได้) */
.oae-card {
  background: var(--oae-surface-card);
  border: 1px solid var(--oae-border);
  border-radius: var(--oae-radius-md);
  box-shadow: var(--oae-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.oae-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--oae-shadow-md);
  border-color: var(--oae-blue-light);
}

.oae-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--oae-blue);
  background: #eaf1ff;
  border: 1px solid #d6e4ff;
  padding: 4px 10px;
  border-radius: 999px;
}

.oae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--oae-blue), var(--oae-navy));
  color: #fff !important;
  box-shadow: var(--oae-shadow-sm);
  transition: all .25s ease;
  text-decoration: none !important;
}
.oae-btn:hover {
  box-shadow: var(--oae-shadow-md);
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.oae-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 22px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--oae-blue) !important;
  background: #fff;
  border: 1.5px solid var(--oae-blue-light);
  transition: all .25s ease;
  text-decoration: none !important;
}
.oae-btn-outline:hover {
  background: var(--oae-blue);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ✅ กล่องรวม Widget */
.widget-box {
  background-color: #fff;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ✅ หัวข้อของ Widget (เช่น "หมวดหมู่", "โพสต์ล่าสุด") */
.widget-box h2,
.widget-box h3,
.sidebar-widget-title {
  position: relative;
  padding-left: 24px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
  color: #111827;
}

.widget-box h2::before,
.widget-box h3::before,
.sidebar-widget-title::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  font-weight: bold;
  font-size: 1.25rem;
}

/* ✅ หมวดหมู่ (Categories) */
.widget-box ul li.cat-item {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 8px;
  font-size: 15px;
  color: #1f2937;
}

.widget-box ul li.cat-item::before {
  content: "📁";
  position: absolute;
  left: 0;
  top: 0;
  color: #3b82f6;
  font-size: 0.9rem;
}

/* ✅ รายการโพสต์ล่าสุด */
.wp-block-latest-posts__list,
.widget_recent_entries ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-latest-posts__list li,
.widget_recent_entries li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 10px;
  font-size: 15px;
  color: #1f2937;
}

.wp-block-latest-posts__list li::before,
.widget_recent_entries li::before {
  content: "📰";
  position: absolute;
  left: 0;
  top: 0;
  color: #3b82f6;
  font-size: 0.85rem;
}

/* ✅ ลิงก์ในรายการ */
.wp-block-latest-posts__list li a,
.widget_recent_entries li a {
  color: #1d4ed8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wp-block-latest-posts__list li a:hover,
.widget_recent_entries li a:hover {
  text-decoration: underline;
  color: #1e40af;
}

/* ✅ ย่อหน้าใน Widget */
.widget-box p {
  font-style: italic;
  color: #555;
  margin-bottom: 12px;
}

.container2 {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.tab-menu {
  width: 100%;
  border-radius: 0;
}

  body {
      font-family: 'Sarabun', 'Kanit', sans-serif;
      background: var(--oae-surface);
      margin: 0;
      padding: 0;
      color: var(--oae-text);
    }
.container2 {
  display: flex;
  justify-content: center; /* แนวนอน */
  align-items: center;     /* แนวตั้ง */
  height: 10vh;           /* เต็มหน้าจอ */
}

.tab-menu {
  display: flex;
  justify-content: center;     /* จัดเนื้อหาแนวนอนให้อยู่ตรงกลาง */
  align-items: flex-start;
  width: 100%;                 /* กำหนดให้กว้างเต็มพื้นที่ */
  background: linear-gradient(120deg, var(--oae-navy), var(--oae-blue) 60%, var(--oae-blue-light));
  padding: 12px 20px;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--oae-shadow-sm);
}

    .main-tab {
      background-color: #2a4ea0;
      color: white;
      font-weight: bold;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      margin-right: 20px;
      cursor: pointer;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }

    .tabs {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .tab a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 10px 16px;
      display: block;
      border-radius: 999px;
      transition: 0.25s ease;
    }

    .tab a:hover {
      background-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-1px);
    }

    .tab.active a {
      background-color: #fff;
      color: var(--oae-navy);
      box-shadow: var(--oae-shadow-sm);
    }

    .tab.active a::after {
      content: none;
    }

    footer {
    font-family: 'Noto Sans Thai', sans-serif;
    }

    .before-footer  {
  min-height: 300px; /* หรือความสูงที่ต้องการ */
  position: relative;
  }
  .before-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,28,71,.55), rgba(11,42,99,.75));
  }
  .before-footer > * { position: relative; z-index: 1; }

.pagination ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    list-style: none;
    margin: 32px 0 0;
}
.pagination li {
    display: inline-flex;
}
.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    color: var(--oae-blue);
    border: 1px solid var(--oae-border);
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}
.pagination li a:hover {
    background: var(--oae-blue);
    color: #fff;
    border-color: var(--oae-blue);
    transform: translateY(-2px);
}
.pagination .current span,
.pagination .current {
    background: linear-gradient(135deg, var(--oae-blue), var(--oae-navy));
    color: #fff !important;
    border-color: transparent;
    font-weight: 700;
}

/* รองรับ markup มาตรฐานจาก the_posts_pagination() ของ WordPress */
.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: #fff;
    color: var(--oae-blue);
    border: 1px solid var(--oae-border);
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}
.navigation.pagination .page-numbers:hover {
    background: var(--oae-blue);
    color: #fff;
    border-color: var(--oae-blue);
    transform: translateY(-2px);
}
.navigation.pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--oae-blue), var(--oae-navy));
    color: #fff;
    border-color: transparent;
}
.navigation.pagination .page-numbers.dots {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Fade-in เมื่อ scroll เข้ามาในจอ (ใช้ร่วมกับ main.js ที่ toggle class is-visible) */
.aos-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.aos-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   QUICK ACCESS DOCK — แถบไอคอนลอยใต้ Hero/Slider
   ========================================================= */
.oae-dock-wrap{
  position: relative;
  z-index: 30;
  margin-top: -46px;
  padding: 0 16px;
}
.oae-dock{
  max-width: 1050px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--oae-shadow-lg);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
}
.oae-dock a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 22px 10px;
  text-align: center;
  border-right: 1px solid var(--oae-border);
  transition: background .2s ease;
  text-decoration: none !important;
}
.oae-dock a:last-child{ border-right: none; }
.oae-dock a:hover{ background: var(--oae-surface); }
.oae-dock .ic{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oae-surface);
  color: var(--oae-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all .2s ease;
}
.oae-dock a:hover .ic{ background: var(--oae-blue); color: #fff; transform: translateY(-2px); }
.oae-dock .lbl{ font-size: 12.5px; font-weight: 600; color: var(--oae-navy); }
@media (max-width: 900px){
  .oae-dock{ grid-template-columns: repeat(3, 1fr); }
  .oae-dock a:nth-child(3){ border-right: none; }
}

/* =========================================================
   PRICE TICKER — แถบราคาสินค้าเกษตรวิ่งแบบตลาดหุ้น (Signature)
   ========================================================= */
.oae-ticker-wrap{
  background: var(--oae-navy);
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.oae-ticker-wrap .fade{ position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.oae-ticker-wrap .fade.l{ left: 0; background: linear-gradient(90deg, var(--oae-navy), transparent); }
.oae-ticker-wrap .fade.r{ right: 0; background: linear-gradient(270deg, var(--oae-navy), transparent); }
.oae-ticker-track{
  display: flex;
  width: max-content;
  animation: oaeScrollTicker 32s linear infinite;
  padding: 12px 0;
}
.oae-ticker-wrap:hover .oae-ticker-track{ animation-play-state: paused; }
@keyframes oaeScrollTicker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.oae-tick{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  border-right: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.oae-tick .name{ color: rgba(255,255,255,.65); font-size: 12.5px; }
.oae-tick .price{ font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: #fff; }
.oae-tick .delta{ font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.oae-tick .up{ color: #5be08a; }
.oae-tick .down{ color: #ff8a80; }

/* =========================================================
   PRICE PANEL — การ์ดราคาสินค้าเกษตรแบบ dashboard
   ========================================================= */
.oae-price-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.oae-stat-chip{
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  min-width: 110px;
}
.oae-stat-chip .l{ font-size: 11px; opacity: .75; margin-bottom: 3px; }
.oae-stat-chip .v{ font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; }
.oae-stat-chip.max{ background: #e7f7ee; color: #1c8a4a; }
.oae-stat-chip.avg{ background: var(--oae-surface); color: var(--oae-navy); }
.oae-stat-chip.min{ background: #fdeceb; color: #c23b32; }

.oae-bar-row{
  display: grid;
  grid-template-columns: 170px 1fr 100px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--oae-border);
}
.oae-bar-row:last-child{ border-bottom: none; }
.oae-bar-row .prov{ font-size: 13px; font-weight: 600; color: var(--oae-navy); }
.oae-bar-track{ background: var(--oae-surface); border-radius: 999px; height: 10px; overflow: hidden; }
.oae-bar-fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oae-blue-light), var(--oae-blue)); }
.oae-bar-row .val{ font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--oae-navy); text-align: right; }
@media (max-width: 640px){
  .oae-bar-row{ grid-template-columns: 100px 1fr 80px; font-size: 12px; }
}

/* จัดสไตล์ตาราง/ตัวเลือกจาก shortcode [farmgateprice_selector] และ [farmgateprice_table]
   ให้เข้ากับดีไซน์ dashboard ใหม่ (แบบ scoped ไม่กระทบตารางอื่นในเว็บ) */
.oae-price-panel select,
.oae-price-panel input[type="text"] {
    border: 1px solid var(--oae-border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Sarabun', sans-serif !important;
    font-weight: 600 !important;
    color: var(--oae-navy) !important;
    background: var(--oae-surface) !important;
    min-width: 260px;
}
.oae-price-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    font-size: 13.5px;
}
.oae-price-panel table thead th {
    background: linear-gradient(90deg, var(--oae-navy), var(--oae-blue));
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
}
.oae-price-panel table thead th:first-child { border-radius: 10px 0 0 0; }
.oae-price-panel table thead th:last-child { border-radius: 0 10px 0 0; }
.oae-price-panel table tbody td {
    padding: 11px 14px;
    border-bottom: 1px dashed var(--oae-border);
    color: var(--oae-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.oae-price-panel table tbody td:first-child {
    font-family: 'Sarabun', sans-serif;
    font-weight: 600;
    color: var(--oae-navy);
}
.oae-price-panel table tbody tr:nth-child(even) { background: var(--oae-surface); }
.oae-price-panel table tbody tr:hover { background: #eaf1ff; }
.oae-price-panel table tbody tr:last-child td { border-bottom: none; }

/* =========================================================
   KPI RIBBON — แถบสรุปตัวเลขสำคัญ ใต้ Quick Access Dock
   ========================================================= */
.oae-kpi-ribbon{
  margin-top: 34px;
  background: var(--oae-surface);
  border-top: 1px solid var(--oae-border);
  border-bottom: 1px solid var(--oae-border);
}
.oae-kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1240px;
  margin: 0 auto;
}
.oae-kpi{ padding: 22px 26px; border-right: 1px solid var(--oae-border); }
.oae-kpi:last-child{ border-right: none; }
.oae-kpi .ic{
  width: 32px; height: 32px; border-radius: 9px;
  background: #fff; color: var(--oae-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-bottom: 10px; box-shadow: var(--oae-shadow-sm);
}
.oae-kpi .v{ font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 21px; color: var(--oae-navy); }
.oae-kpi .v .unit{ font-size: 11px; font-weight: 500; color: var(--oae-text-muted); margin-left: 4px; }
.oae-kpi .l{ font-size: 11.5px; color: var(--oae-text-muted); margin-top: 2px; }
.oae-kpi .delta{ font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.oae-kpi .delta.up{ color: #1c9a5b; }
.oae-kpi .delta.down{ color: #e2483a; }
@media (max-width: 900px){
  .oae-kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .oae-kpi:nth-child(2){ border-right: none; }
}

/* =========================================================
   PRESS EDITORIAL ROWS — รายการข่าวประชาสัมพันธ์แบบแถวนิตยสาร
   ========================================================= */
.oae-press-panel{ background: #fff; border: 1px solid var(--oae-border); border-radius: 20px; padding: 6px 24px; }
.oae-press-row{ display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--oae-border); }
.oae-press-row:last-child{ border-bottom: none; }
.oae-press-row .ph{
  width: 110px; height: 76px; flex-shrink: 0; border-radius: 12px; font-size: 17px;
  background: linear-gradient(135deg, #dbeaff, #9fc3f4); color: #5b84c4;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oae-press-row .ph img{ width: 100%; height: 100%; object-fit: cover; }
.oae-press-row .txt h4{ font-size: 14px; font-weight: 600; color: var(--oae-navy); margin: 0 0 6px; line-height: 1.5; }
.oae-press-row .txt .date{ font-size: 11px; color: var(--oae-text-muted); }
.oae-press-row .arrow{
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--oae-border); display: flex; align-items: center; justify-content: center;
  color: var(--oae-blue); flex-shrink: 0; transition: .2s;
}
.oae-press-row:hover .arrow{ background: var(--oae-blue); color: #fff; border-color: var(--oae-blue); }

/* =========================================================
   PRICE RADAR — วงแหวนเปอร์เซ็นต์เทียบราคาสูงสุด (ส่วนเสริมของ Ticker)
   ========================================================= */
.oae-price-dash{
  background: var(--oae-surface); border-radius: 24px; padding: 32px;
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center;
}
.oae-radar-wrap{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.oae-radar-ring{
  width: 200px; height: 200px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.oae-radar-ring::before{ content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.oae-radar-inner{ position: relative; z-index: 1; }
.oae-radar-inner .v{ font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 24px; color: var(--oae-navy); }
.oae-radar-inner .l{ font-size: 11px; color: var(--oae-text-muted); }
.oae-radar-caption{ margin-top: 14px; font-size: 12.5px; color: var(--oae-text-muted); max-width: 230px; }
.oae-price-list{ background: #fff; border-radius: 18px; padding: 8px; }
.oae-price-item{ display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 12px; }
.oae-price-item:nth-child(odd){ background: var(--oae-surface); }
.oae-price-item .prov{ font-size: 13px; font-weight: 600; color: var(--oae-navy); }
.oae-price-item .v{ font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13.5px; color: var(--oae-navy); }
.oae-price-item .chg{ font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.oae-price-item .chg.up{ background: #e6f7ee; color: #1c9a5b; }
.oae-price-item .chg.down{ background: #fbeae8; color: #e2483a; }
@media (max-width: 900px){ .oae-price-dash{ grid-template-columns: 1fr; } }

/* =========================================================
   NEWSLETTER CTA BAND — แถบสมัครรับข่าวสารก่อน Footer
   ========================================================= */
.oae-cta-band{
  background: linear-gradient(120deg, var(--oae-navy), var(--oae-blue));
  border-radius: 26px; padding: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  color: #fff; flex-wrap: wrap;
}
.oae-cta-band h3{ font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.oae-cta-band p{ margin: 0; font-size: 13px; color: rgba(255,255,255,.75); }
.oae-cta-form{ display: flex; gap: 10px; flex-wrap: wrap; }
.oae-cta-form input{ border: none; border-radius: 999px; padding: 12px 18px; font-family: 'Sarabun', sans-serif; font-size: 13px; width: 220px; }
.oae-cta-form button{ background: #fff; color: var(--oae-navy); border: none; border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 13px; cursor: pointer; transition: .2s; }
.oae-cta-form button:hover{ background: var(--oae-sky); }

/* =========================================================
   HERO — navy gradient hero fallback (เมื่อไม่มี Slider)
   ========================================================= */
.oae-hero{
  position: relative;
  background:
    radial-gradient(1100px 480px at 15% -10%, rgba(143,211,255,.32), transparent 60%),
    linear-gradient(120deg, var(--oae-navy) 0%, var(--oae-navy-dark) 55%, var(--oae-blue) 100%);
  color: #fff;
  padding: 60px 24px;
  overflow: hidden;
}
.oae-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  pointer-events: none;
}
.oae-hero-inner{
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.oae-hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.oae-hero-eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #5be08a;
  box-shadow: 0 0 0 4px rgba(91,224,138,.25);
}
.oae-hero h1{
  font-family: 'Kanit', sans-serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 16px;
}
.oae-hero p{
  font-size: 15.5px;
  color: rgba(255,255,255,.8);
  line-height: 1.75;
  max-width: 500px;
  margin: 0 0 28px;
}
.oae-hero-cta-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.oae-hero-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: all .25s ease; text-decoration: none !important;
}
.oae-hero-btn-primary{ background: #fff; color: var(--oae-navy); box-shadow: var(--oae-shadow-sm); }
.oae-hero-btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--oae-shadow-md); color: var(--oae-navy); }
.oae-hero-btn-ghost{ border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.oae-hero-btn-ghost:hover{ background: rgba(255,255,255,.12); color: #fff; }

.oae-hero-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--oae-radius-lg);
  padding: 24px;
  backdrop-filter: blur(6px);
  position: relative;
}
.oae-hero-card-ph{
  width: 100%; aspect-ratio: 4/3; border-radius: 14px;
  background: linear-gradient(135deg, #dbeaff, #a8c9f7);
  display: flex; align-items: center; justify-content: center;
  color: #5b84c4; font-size: 32px; margin-bottom: 14px;
  overflow: hidden;
}
.oae-hero-card-ph img{ width: 100%; height: 100%; object-fit: cover; }
.oae-hero-card-tag{ font-size: 11px; color: var(--oae-sky); font-weight: 700; letter-spacing: .06em; margin-bottom: 4px; }
.oae-hero-card h4{ margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.oae-hero-card p{ font-size: 12.5px; color: rgba(255,255,255,.75); margin: 0; max-width: none; }

@media (max-width: 900px){
  .oae-hero-inner{ grid-template-columns: 1fr; }
  .oae-hero h1{ font-size: 30px; }
}

/* =========================================================
   SECTION HEAD — eyebrow + title (ตรงกับ .sec-head/.sec-title ต้นแบบ)
   ========================================================= */
.oae-sec-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 26px; flex-wrap: wrap; gap: 12px;
}
.oae-sec-title{ position: relative; padding-left: 16px; }
.oae-sec-title .eyebrow{
  font-size: 11.5px; font-weight: 700; color: var(--oae-blue);
  text-transform: uppercase; letter-spacing: .06em;
}
.oae-sec-title h2{ font-size: 23px; font-weight: 700; color: var(--oae-navy); margin: 4px 0 0; font-family:'Kanit', sans-serif; }
.oae-sec-title::before{
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  border-radius: 4px; background: linear-gradient(180deg, var(--oae-blue-light), var(--oae-navy));
}
.oae-link-more{ font-size: 13px; font-weight: 700; color: var(--oae-blue); display: flex; align-items: center; gap: 6px; }

/* =========================================================
   NEWS FEATURE — ข่าวเด่น 1 ข่าว พื้นสีน้ำเงิน (แสดงด้านบนสุดของกลุ่มข่าว)
   ========================================================= */
.oae-news-feature-section{ padding: 40px 0 16px; }
.oae-news-feature{
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 0;
  background:
    radial-gradient(900px 380px at 10% -20%, rgba(143,211,255,.28), transparent 60%),
    linear-gradient(120deg, var(--oae-navy) 0%, var(--oae-navy-dark) 55%, var(--oae-blue) 100%);
  border-radius: var(--oae-radius-lg);
  overflow: hidden;
  box-shadow: var(--oae-shadow-md);
}
.oae-news-feature-media{
  position: relative; min-height: 220px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  display: flex; align-items: center; justify-content: center;
}
.oae-news-feature-media img{ width: 100%; height: 100%; object-fit: cover; }
.oae-news-feature-media i{ font-size: 44px; color: rgba(255,255,255,.55); }
.oae-news-feature-body{ padding: 32px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.oae-news-feature-tag{
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--oae-sky); letter-spacing: .05em; margin-bottom: 10px; width: fit-content;
}
.oae-news-feature-body h3{ font-size: 21px; font-weight: 700; line-height: 1.45; margin: 0 0 12px; font-family:'Kanit', sans-serif; }
.oae-news-feature-body h3 a{ color: #fff; }
.oae-news-feature-body h3 a:hover{ color: var(--oae-sky); }
.oae-news-feature-body p{ font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.75; margin: 0 0 18px; max-width: 520px; }
.oae-btn-light{
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  background: #fff; color: var(--oae-navy) !important; padding: 10px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 700; transition: .2s; text-decoration: none !important;
}
.oae-btn-light:hover{ transform: translateY(-2px); box-shadow: var(--oae-shadow-sm); }
@media (max-width: 900px){
  .oae-news-feature{ grid-template-columns: 1fr; }
  .oae-news-feature-media{ min-height: 180px; }
}

/* =========================================================
   SERVICES — บริการประชาชน / บริการเจ้าหน้าที่ (svc-grid gradient cards)
   ========================================================= */
.oae-svc-section{ padding: 56px 0; }
.oae-svc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.oae-svc-card{ border-radius: 22px; padding: 28px; position: relative; overflow: hidden; color: #fff; }
.oae-svc-card.citizen{ background: linear-gradient(150deg, var(--oae-blue-light), var(--oae-blue) 70%); }
.oae-svc-card.staff{ background: linear-gradient(150deg, var(--oae-navy2, #123a86), var(--oae-navy) 70%); }
.oae-svc-card::after{
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.oae-svc-card h3{
  font-size: 17px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
  position: relative; font-family:'Kanit', sans-serif;
}
.oae-svc-list{ position: relative; }
.oae-svc-list ul{
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
}
.oae-svc-list li{ list-style: none; }
.oae-svc-list a{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.9); }
.oae-svc-list a i{
  width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0;
}
.oae-svc-list a:hover{ color: #fff; text-decoration: underline; }
@media (max-width: 900px){ .oae-svc-grid{ grid-template-columns: 1fr; } .oae-svc-list ul{ grid-template-columns: 1fr; } }

/* =========================================================
   PROCUREMENT TABS — navy tabbar + white tabpanel (3 คอลัมน์)
   ========================================================= */
.oae-tabs-section{ padding: 56px 0; }
.oae-tabbar{ display: flex; background: var(--oae-navy); border-radius: 16px 16px 0 0; overflow-x: auto; }
.oae-tabbar .oae-tab-btn{
  background: transparent; border: none; color: rgba(255,255,255,.75);
  font-family: 'Sarabun', sans-serif; font-weight: 600; font-size: 13px;
  padding: 15px 20px; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent;
  transition: .2s;
}
.oae-tabbar .oae-tab-btn.on,
.oae-tabbar .oae-tab-btn:hover{ color: #fff; border-bottom-color: var(--oae-sky); background: rgba(255,255,255,.06); }
.oae-tabpanel{
  background: #fff; border: 1px solid var(--oae-border); border-top: none;
  border-radius: 0 0 16px 16px; padding: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.oae-tabpanel .tab-col h5{
  font-size: 13px; font-weight: 700; color: var(--oae-navy); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px; font-family:'Kanit', sans-serif;
}
.oae-tabpanel .tab-col h5 i{ color: var(--oae-blue); }
.oae-tabpanel .tab-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.oae-tabpanel .tab-col a{ font-size: 12.5px; color: var(--oae-text-muted); display: flex; align-items: center; gap: 8px; }
.oae-tabpanel .tab-col a:hover{ color: var(--oae-blue); }
.oae-tabpanel .tab-col a::before{ content: "\203A"; color: var(--oae-blue-light); font-weight: 700; }
@media (max-width: 900px){ .oae-tabpanel{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .oae-tabpanel{ grid-template-columns: 1fr; } }

/* เปลี่ยนจาก grid 2 คอลัมน์ (ใหญ่ซ้าย-ย่อยขวา) เป็นแนวตั้ง (ใหญ่บน-ย่อยล่าง) */
.oae-news-feature-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oae-news-sub-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.oae-news-sub-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oae-news-sub-media img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
}
.oae-news-sub-body h4 {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}
.oae-news-sub-date {
  font-size: 0.8rem;
  color: #888;
}
@media (max-width: 768px) {
  .oae-news-feature-grid {
    grid-template-columns: 1fr;
  }
  .oae-news-sub-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   ✨ VISUAL ENHANCEMENTS — Reading Progress Bar
   ========================================================= */
#oae-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--oae-blue-light), var(--oae-sky), var(--oae-blue));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(47, 134, 255, 0.6);
}

/* =========================================================
   ✨ VISUAL ENHANCEMENTS — Enhanced Card Hover (shimmer + glow)
   ========================================================= */
.oae-card {
  position: relative;
  overflow: hidden;
}
.oae-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(143, 211, 255, 0.12) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.oae-card:hover::before {
  left: 140%;
}
.oae-card:hover {
  border-color: rgba(47, 134, 255, 0.4);
  box-shadow: 0 16px 40px -12px rgba(10, 35, 88, 0.22),
              0 0 0 1px rgba(47, 134, 255, 0.15);
}

/* =========================================================
   ✨ VISUAL ENHANCEMENTS — Fade-In-Up Animation
   ========================================================= */
@keyframes oaeFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.oae-fade-in-up {
  animation: oaeFadeInUp 0.5s ease both;
}
.oae-fade-in-up:nth-child(2) { animation-delay: 0.08s; }
.oae-fade-in-up:nth-child(3) { animation-delay: 0.16s; }
.oae-fade-in-up:nth-child(4) { animation-delay: 0.24s; }
.oae-fade-in-up:nth-child(5) { animation-delay: 0.32s; }

/* =========================================================
   ✨ VISUAL ENHANCEMENTS — Fluid Typography (Responsive headings)
   ========================================================= */
.oae-fluid-h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  color: var(--oae-navy);
}
.oae-fluid-h2 {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  color: var(--oae-navy);
}
.oae-fluid-h3 {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
  font-family: 'Kanit', 'Sarabun', sans-serif;
}

/* =========================================================
   ✨ VISUAL ENHANCEMENTS — Share Buttons (Social Sharing)
   ========================================================= */
.oae-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0;
  padding: 20px;
  background: var(--oae-surface);
  border: 1px solid var(--oae-border);
  border-radius: var(--oae-radius-md);
}
.oae-share-bar .share-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--oae-text-muted);
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.oae-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.22s ease;
  border: none;
  cursor: pointer;
  font-family: 'Sarabun', sans-serif;
}
.oae-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.2);
}
.oae-share-btn.fb  { background: #1877f2; color: #fff !important; }
.oae-share-btn.fb:hover  { background: #1465d4; }
.oae-share-btn.line { background: #00b900; color: #fff !important; }
.oae-share-btn.line:hover { background: #009c00; }
.oae-share-btn.copy { background: var(--oae-surface-card); color: var(--oae-navy) !important; border: 1.5px solid var(--oae-border); }
.oae-share-btn.copy:hover { background: var(--oae-blue); color: #fff !important; border-color: var(--oae-blue); }
.oae-share-btn.copy.copied { background: #1c9a5b; color: #fff !important; border-color: #1c9a5b; }

/* Reading time badge */
.oae-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--oae-text-muted);
  background: var(--oae-surface);
  border: 1px solid var(--oae-border);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Archive card animation stagger */
.archive-card-grid article {
  animation: oaeFadeInUp 0.45s ease both;
}
.archive-card-grid article:nth-child(2) { animation-delay: 0.06s; }
.archive-card-grid article:nth-child(3) { animation-delay: 0.12s; }
.archive-card-grid article:nth-child(4) { animation-delay: 0.18s; }
.archive-card-grid article:nth-child(5) { animation-delay: 0.24s; }
.archive-card-grid article:nth-child(6) { animation-delay: 0.30s; }
.archive-card-grid article:nth-child(7) { animation-delay: 0.36s; }
.archive-card-grid article:nth-child(8) { animation-delay: 0.42s; }

/* =========================================================
   🖨️ PRINT CSS — ซ่อน nav/header/footer แสดงแค่ content
   ========================================================= */
@media print {
  /* ซ่อนส่วนที่ไม่จำเป็นเมื่อพิมพ์ */
  .oae-topbar,
  #masthead,
  #oae-reading-progress,
  .quick-access-dock,
  .oae-share-bar,
  footer,
  #scrollToTopBtn,
  .mobile-menu-panel,
  nav,
  aside,
  .no-print {
    display: none !important;
  }

  /* ปรับ content ให้เหมาะกับกระดาษ */
  body {
    font-size: 12pt;
    color: #000 !important;
    background: #fff !important;
  }
  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .oae-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  h1, h2, h3, h4 {
    color: #000 !important;
    page-break-after: avoid;
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  /* แสดง URL ของลิงก์ตอนพิมพ์ */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: '';
  }
  /* ป้องกันการแบ่งหน้ากลางย่อหน้า */
  p, blockquote, ul, ol {
    orphans: 3;
    widows: 3;
  }
}