/*
Theme Name: Hueman GT Navy (น้ำเงิน-กรมท่า)
Description: โทนน้ำเงินกรมท่า ทางการ — child theme ของ Hueman สำหรับ it.gongtham.net [S256W] · หน้าแรกแบ่งโซนตามหมวดหมู่ + แบนเนอร์ประจำเดือน · โครง 3 คอลัมน์และหน้าอื่น ๆ คงเดิมทั้งหมด · ถอนกลับโดย activate ธีม Hueman
Template: hueman
Version: 2.1.0
Author: กองเทคโนโลยีสารสนเทศ สำนักงานแม่กองธรรมสนามหลวง
Text Domain: hueman-gt-navy
*/

/* ============================================================
   [S256W] กฎเหล็ก: ทุก selector ต้องอยู่ใต้ .gt-front หรือ body.gt-home
   ห้ามแตะ selector ของธีมแม่ (.content .sidebar article.post .widget ฯลฯ)
   → หน้าอื่นและโครง 3 คอลัมน์ไม่ได้รับผลกระทบใด ๆ
   ============================================================ */

.gt-front {
  --gt-primary: #1E3A6E;
  --gt-primary-dark: #142A52;
  --gt-primary-soft: #EEF2F9;
  --gt-accent: #C9A227;
  --gt-ink: #2b2b2b;
  --gt-muted: #8a8a8a;
  --gt-line: #e7e4de;
  --gt-surface: #ffffff;
  --gt-font: 'Sarabun', Tahoma, sans-serif;
  --gt-font-head: 'Prompt', Tahoma, sans-serif;

  font-family: var(--gt-font);
}

/* ---------- หัวโซน ---------- */
.gt-front .gt-sec { margin: 0 0 30px; }
.gt-front .gt-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 0 7px;
  border-bottom: 2px solid var(--gt-line);
}
.gt-front .gt-sec-title {
  margin: 0;
  padding: 0 0 0 11px;
  border-left: 4px solid var(--gt-primary);
  font-family: var(--gt-font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gt-ink);
}
.gt-front .gt-sec-more {
  flex: none;
  font-family: var(--gt-font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--gt-primary);
  text-decoration: none;
  white-space: nowrap;
}
.gt-front .gt-sec-more::after { content: ' →'; }
.gt-front .gt-sec-more:hover { color: var(--gt-primary-dark); }

/* ---------- โครงรายการ ---------- */
.gt-front .gt-items { display: grid; gap: 16px; }
.gt-front .gt-grid2 .gt-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-front .gt-grid1 .gt-items { grid-template-columns: minmax(0, 1fr); }
.gt-front .gt-list .gt-items,
.gt-front .gt-compact .gt-items { grid-template-columns: minmax(0, 1fr); gap: 0; }

.gt-front .gt-item {
  min-width: 0;
  margin: 0;
  background: var(--gt-surface);
  border: 1px solid var(--gt-line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.gt-front .gt-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
  transform: translateY(-2px);
}

.gt-front .gt-thumb {
  display: block;
  overflow: hidden;
  background: var(--gt-primary-soft);
  line-height: 0;
}
.gt-front .gt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .3s ease;
}
.gt-front .gt-item:hover .gt-thumb img { transform: scale(1.04); }

.gt-front .gt-body {
  padding: 11px 13px 13px;
  min-width: 0;
}
.gt-front .gt-title {
  margin: 0 0 5px;
  font-family: var(--gt-font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
}
.gt-front .gt-title a {
  color: var(--gt-ink);
  text-decoration: none;
  box-shadow: none;
}
.gt-front .gt-title a:hover { color: var(--gt-primary); }
.gt-front .gt-excerpt {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #6b6b6b;
}
.gt-front .gt-date {
  display: block;
  font-size: 12px;
  color: var(--gt-muted);
}

/* ---------- grid2 / grid1 (มีรูปด้านบน) ---------- */
.gt-front .gt-grid2 .gt-thumb { aspect-ratio: 16 / 10; }
.gt-front .gt-grid1 .gt-thumb { aspect-ratio: 2 / 1; }
.gt-front .gt-grid1 .gt-title { font-size: 17px; }

/* ---------- list (รูปเล็กซ้าย) ---------- */
.gt-front .gt-list .gt-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 0;
  border-width: 0 0 1px;
  background: transparent;
}
.gt-front .gt-list .gt-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--gt-primary-soft);
}
.gt-front .gt-list .gt-item:last-child { border-bottom: 0; }
.gt-front .gt-list .gt-thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 62px;
  margin: 10px 0 10px 4px;
  border-radius: 8px;
  background: var(--gt-line);
}
.gt-front .gt-list .gt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
}
.gt-front .gt-list .gt-title { margin: 0 0 3px; font-size: 14.5px; }

/* ---------- compact (หัวข้ออย่างเดียว) ---------- */
.gt-front .gt-compact .gt-item {
  display: block;
  border-radius: 0;
  border-width: 0 0 1px;
  background: transparent;
}
.gt-front .gt-compact .gt-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--gt-primary-soft);
}
.gt-front .gt-compact .gt-item:last-child { border-bottom: 0; }
.gt-front .gt-compact .gt-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
}
.gt-front .gt-compact .gt-title {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
}
.gt-front .gt-compact .gt-title::before {
  content: '•';
  margin-right: 7px;
  color: var(--gt-primary);
}
.gt-front .gt-compact .gt-date { flex: none; white-space: nowrap; }

/* ---------- แบนเนอร์ประจำเดือน ---------- */
.gt-front .gt-banner .gt-banner-inner {
  padding: 14px;
  background: var(--gt-surface);
  border: 1px solid var(--gt-line);
  border-top: 3px solid var(--gt-accent);
  border-radius: 10px;
}
.gt-front .gt-banner-images { display: grid; gap: 12px; }
.gt-front .gt-banner-wide .gt-banner-images { grid-template-columns: minmax(0, 1fr); }
.gt-front .gt-banner-split .gt-banner-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-front .gt-banner-split.gt-banner-n1 .gt-banner-images { grid-template-columns: minmax(0, 1fr); }
.gt-front .gt-banner-figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.gt-front .gt-banner-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform .3s ease;
}
.gt-front .gt-banner-figure a:hover img { transform: scale(1.02); }
.gt-front .gt-banner-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6b6b6b;
  text-align: center;
}
.gt-front .gt-banner-text p { margin: 0 0 6px; }
.gt-front .gt-banner-text p:last-child { margin-bottom: 0; }

/* ---------- ปรับโพสต์เด่นของธีมแม่เฉพาะหน้าแรกโซน (เบา ๆ) ---------- */
body.gt-home .gt-front .featured { margin-bottom: 26px; }

/* ---------- responsive ---------- */
@media only screen and (max-width: 1200px) {
  .gt-front .gt-grid2 .gt-items { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 719px) {
  .gt-front .gt-banner-split .gt-banner-images { grid-template-columns: minmax(0, 1fr); }
  .gt-front .gt-list .gt-thumb { flex: 0 0 72px; width: 72px; height: 54px; }
  .gt-front .gt-compact .gt-body { flex-direction: column; gap: 2px; }
  .gt-front .gt-sec-title { font-size: 15.5px; }
}

/* ============================================================
   [S256W_LINKS] โซนลิงก์ — การ์ดสารบัญ + ปุ่มลัด
   ============================================================ */

/* ---------- หัวโซนแบบมีไอคอน ---------- */
.gt-front .gt-links-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
}
.gt-front .gt-links-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--gt-accent);
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.gt-front .gt-links-head-text { flex: none; min-width: 0; }
.gt-front .gt-links-kicker {
  display: block;
  font-family: var(--gt-font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gt-muted);
  margin: 0 0 1px;
}
.gt-front .gt-links-title {
  margin: 0;
  font-family: var(--gt-font-head);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gt-primary-dark);
}
.gt-front .gt-links-rule {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gt-accent), rgba(0, 0, 0, 0));
}
.gt-front .gt-links-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #6b6b6b;
}

/* ---------- การ์ดสารบัญ ---------- */
.gt-front .gt-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gt-front .gt-cols-1 .gt-cards { grid-template-columns: minmax(0, 1fr); }
.gt-front .gt-cols-3 .gt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gt-front .gt-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--gt-surface);
  border: 1px solid var(--gt-line);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gt-front .gt-card-link:hover {
  transform: translateY(-2px);
  border-color: var(--gt-primary-soft);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}
.gt-front .gt-card-ico {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--gt-primary);
  color: #ffffff;
  font-size: 18px;
  transition: transform .2s ease;
}
.gt-front .gt-card-link.gt-alt .gt-card-ico {
  background: var(--gt-accent);
  color: #ffffff;
}
.gt-front .gt-card-link:hover .gt-card-ico { transform: scale(1.06); }
.gt-front .gt-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gt-front .gt-card-kicker {
  font-family: var(--gt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gt-accent);
  letter-spacing: .02em;
}
.gt-front .gt-card-link.gt-alt .gt-card-kicker { color: var(--gt-primary); }
.gt-front .gt-card-label {
  font-family: var(--gt-font-head);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--gt-ink);
  word-break: break-word;
}
.gt-front .gt-card-link:hover .gt-card-label { color: var(--gt-primary); }
.gt-front .gt-card-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gt-primary-soft);
  color: var(--gt-primary);
  font-size: 11px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.gt-front .gt-card-link:hover .gt-card-arrow {
  background: var(--gt-primary);
  color: #ffffff;
  transform: translateX(2px);
}

/* ---------- ปุ่มลัดไอคอน ---------- */
.gt-front .gt-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gt-front .gt-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
  padding: 18px 10px 16px;
  background: var(--gt-surface);
  border: 1px solid var(--gt-line);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gt-front .gt-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}
.gt-front .gt-tile-ico {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gt-primary-soft);
  color: var(--gt-primary);
  font-size: 21px;
  transition: transform .2s ease;
}
.gt-front .gt-tile.gt-alt .gt-tile-ico {
  background: #FBF3E0;
  color: #A67C0A;
}
.gt-front .gt-tile:hover .gt-tile-ico { transform: scale(1.08); }
.gt-front .gt-tile-label {
  font-family: var(--gt-font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink);
  line-height: 1.4;
  word-break: break-word;
}
.gt-front .gt-tile:hover .gt-tile-label { color: var(--gt-primary); }
.gt-front .gt-tile-desc {
  font-size: 12px;
  color: var(--gt-muted);
  line-height: 1.5;
}

/* ---------- responsive ---------- */
@media only screen and (max-width: 1200px) {
  .gt-front .gt-cards,
  .gt-front .gt-cols-3 .gt-cards { grid-template-columns: minmax(0, 1fr); }
  .gt-front .gt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 719px) {
  .gt-front .gt-links-title { font-size: 18px; }
  .gt-front .gt-links-icon { width: 40px; height: 40px; font-size: 17px; }
  .gt-front .gt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   [S256W_LEGACY_MVP] ของเดิมจาก Additional CSS (post 9388)
   ย้ายมาฝังในธีมลูก เพราะ Additional CSS ผูกกับธีม hueman เดิม
   ============================================================ */
/* === Most Viewed Posts: รูปเล็ก ข้อความเล็ก ไม่เยื้องเกินไป === */

/* รีเซ็ต ul/ol ไม่ให้มีระยะย่อหน้าจากธีม */
body .s2 .widget ul:has(li img),
body #right .widget ul:has(li img),
body #secondary .widget ul:has(li img),
body .right-sidebar .widget ul:has(li img),
body .sidebar-right .widget ul:has(li img),
body .s2 .widget ol:has(li img),
body #right .widget ol:has(li img),
body #secondary .widget ol:has(li img),
body .right-sidebar .widget ol:has(li img),
body .sidebar-right .widget ol:has(li img) {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* รีเซ็ตรายการ ไม่ให้เยื้องซ้าย */
body .s2 .widget li:has(img),
body #right .widget li:has(img),
body #secondary .widget li:has(img),
body .right-sidebar .widget li:has(img),
body .sidebar-right .widget li:has(img) {
  position: static !important;
  display: block !important;
  clear: both !important;
  overflow: hidden !important;
  min-height: 54px !important;

  margin: 0 0 12px 0 !important;
  padding: 0 0 12px 0 !important;

  border-bottom: 1px solid #eeeeee !important;
  list-style: none !important;

  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #777777 !important;
}

/* ลบขีด/สัญลักษณ์หน้ารายการ ถ้าธีมใส่มา */
body .s2 .widget li:has(img)::before,
body #right .widget li:has(img)::before,
body #secondary .widget li:has(img)::before,
body .right-sidebar .widget li:has(img)::before,
body .sidebar-right .widget li:has(img)::before {
  display: none !important;
  content: none !important;
}

/* ลิงก์ที่ครอบรูป */
body .s2 .widget li:has(img) a:has(img),
body #right .widget li:has(img) a:has(img),
body #secondary .widget li:has(img) a:has(img),
body .right-sidebar .widget li:has(img) a:has(img),
body .sidebar-right .widget li:has(img) a:has(img) {
  float: left !important;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 8px 4px 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* รูป thumbnail */
body .s2 .widget li:has(img) img,
body #right .widget li:has(img) img,
body #secondary .widget li:has(img) img,
body .right-sidebar .widget li:has(img) img,
body .sidebar-right .widget li:has(img) img {
  position: static !important;
  float: none !important;
  display: block !important;

  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  min-width: 54px !important;

  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ชื่อบทความ */
body .s2 .widget li:has(img) a:not(:has(img)),
body #right .widget li:has(img) a:not(:has(img)),
body #secondary .widget li:has(img) a:not(:has(img)),
body .right-sidebar .widget li:has(img) a:not(:has(img)),
body .sidebar-right .widget li:has(img) a:not(:has(img)) {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

/* จำนวนวิว เช่น (24,447) */
body .s2 .widget li:has(img),
body #right .widget li:has(img),
body #secondary .widget li:has(img),
body .right-sidebar .widget li:has(img),
body .sidebar-right .widget li:has(img) {
  text-indent: 0 !important;
}