/* ลิงก์ภายใน: หน้าบริการ หน้าแรก และหน้าเกี่ยวกับเรา (9 พ.ย. 2569, ใช้คู่กับ _site_links.php)
   สีและฟอนต์ตามธีมเดิม: กรมท่า #272c40 ทอง #b98e44 / #c0b596 ฟอนต์ Prompt
   ห้ามตั้งชื่อคลาสที่มีคำว่า bi- ti- col- feather line-icon (ธีมมีตัวเลือกแบบ [class*=...]) */
.tt-sl {
  --tt-sl-navy: #272c40;
  --tt-sl-ink: #1d2433;
  --tt-sl-muted: #5a6172;
  --tt-sl-gold: #b98e44;
  --tt-sl-gold-ink: #7d5f27;
  --tt-sl-paper: #f6f3ef;
  --tt-sl-line: #e4ded3;
  font-family: Prompt, sans-serif;
  color: var(--tt-sl-ink);
}
.tt-sl h2, .tt-sl h3 { letter-spacing: 0; color: var(--tt-sl-navy); }
.tt-sl ul { list-style: none; margin: 0; padding: 0; }
.tt-sl li { margin: 0; padding: 0; list-style: none; }
.tt-sl a:focus-visible { outline: 2px solid var(--tt-sl-gold); outline-offset: 3px; border-radius: 4px; }
.tt-sl-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-sl-tag { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--tt-sl-gold-ink); }
.tt-sl-title { display: block; font-weight: 600; color: var(--tt-sl-navy); }
.tt-sl-more { margin: 18px 0 0; font-size: 15px; line-height: 1.5; }
.tt-sl-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--tt-sl-gold-ink); font-weight: 500; text-decoration: none; }
.tt-sl-more a:hover { color: var(--tt-sl-gold-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- หน้าบริการ */
.tt-sl-guides { margin: 56px 0 0; padding: 32px 0 0; border-top: 1px solid var(--tt-sl-line); }
.tt-sl-guides h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.4; font-weight: 600; }
.tt-sl-guides .tt-sl-sub { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--tt-sl-muted); }
.tt-sl-feature { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--tt-sl-line); border-radius: 10px; background: var(--tt-sl-paper); text-decoration: none; transition: border-color .2s; }
.tt-sl-feature:hover { border-color: var(--tt-sl-gold); }
.tt-sl-feature img { display: block; width: 144px; height: 108px; object-fit: cover; border-radius: 6px; background: #e9e4da; }
.tt-sl-feature .tt-sl-title { font-size: 18px; line-height: 1.5; }
.tt-sl-feature:hover .tt-sl-title { text-decoration: underline; text-underline-offset: 4px; }
.tt-sl-list { margin-top: 8px !important; }
.tt-sl-list li { padding: 13px 0; border-bottom: 1px solid var(--tt-sl-line); font-size: 16.5px; line-height: 1.55; }
.tt-sl-list a { color: var(--tt-sl-navy); font-weight: 500; text-decoration: none; }
.tt-sl-list a:hover { color: var(--tt-sl-gold-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- หน้าแรกและหน้าเกี่ยวกับเรา: หัวส่วน */
section.tt-sl-home, section.tt-sl-about { display: block; width: 100%; padding: 88px 0; }
section.tt-sl-home { background: #fff; }
section.tt-sl-about { background: #f2f2f0; }
.tt-sl-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.tt-sl-head h2 { margin: 0 0 10px; font-size: 36px; line-height: 1.35; font-weight: 600; }
.tt-sl-head p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--tt-sl-muted); }
.tt-sl-home .tt-sl-more, .tt-sl-about .tt-sl-head + .tt-sl-more { text-align: center; margin-top: 28px; }

/* ---------------------------------------------------------------- หน้าแรก: การ์ดคู่มือ 5 หัวข้อ */
.tt-sl-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.tt-sl-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tt-sl-line); border-radius: 10px; background: #fff; overflow: hidden; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.tt-sl-card:hover { border-color: var(--tt-sl-gold); box-shadow: 0 8px 24px rgba(39, 44, 64, .08); }
.tt-sl-card img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: #e9e4da; }
.tt-sl-card-b { display: block; padding: 16px 18px 20px; }
.tt-sl-card .tt-sl-title { font-size: 16.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tt-sl-card:hover .tt-sl-title { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- หน้าเกี่ยวกับเรา: บริการและคู่มือ */
.tt-sl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: 0 auto; }
.tt-sl-cols > div { padding: 28px 30px; border-radius: 10px; background: #fff; border: 1px solid var(--tt-sl-line); }
.tt-sl-cols h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.45; font-weight: 600; }
.tt-sl-svc li, .tt-sl-guide-list li { border-bottom: 1px solid var(--tt-sl-line); }
.tt-sl-svc a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 16.5px; line-height: 1.5; font-weight: 500; color: var(--tt-sl-navy); text-decoration: none; }
.tt-sl-svc a .tt-sl-ic { color: var(--tt-sl-gold-ink); }
.tt-sl-svc a:hover { color: var(--tt-sl-gold-ink); }
.tt-sl-svc a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tt-sl-guide-list a { display: block; padding: 12px 0; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--tt-sl-navy); text-decoration: none; }
.tt-sl-guide-list a .tt-sl-tag { margin-bottom: 2px; font-size: 13.5px; }
.tt-sl-guide-list a:hover span:last-child { color: var(--tt-sl-gold-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- หน้าเกี่ยวกับเรา: ลิงก์ประวัติทนายในการ์ดทีม */
a.tt-sl-team-name { color: inherit; text-decoration: none; }
a.tt-sl-team-name:hover { color: #7d5f27; text-decoration: underline; text-underline-offset: 4px; }
.tt-sl-team-more { margin: -4px 0 14px; font: 500 15px/1.5 Prompt, sans-serif; }
.tt-sl-team-more a { display: inline-flex; align-items: center; gap: 6px; color: #7d5f27; text-decoration: none; }
.tt-sl-team-more a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- จอเล็ก */
@media (max-width: 1199px) {
  .tt-sl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tt-sl-card { flex-direction: row; align-items: center; }
  .tt-sl-card img { width: 120px; height: 90px; aspect-ratio: auto; flex: none; margin: 12px 0 12px 12px; border-radius: 6px; }
  .tt-sl-card-b { padding: 12px 16px; }
  .tt-sl-card .tt-sl-title { -webkit-line-clamp: 3; }
}
@media (max-width: 767px) {
  section.tt-sl-home, section.tt-sl-about { padding: 56px 0; }
  .tt-sl-head { margin-bottom: 24px; }
  .tt-sl-head h2 { font-size: 26px; }
  .tt-sl-head p { font-size: 16px; }
  .tt-sl-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tt-sl-card img { width: 88px; height: 66px; }
  .tt-sl-card .tt-sl-title { font-size: 16px; }
  .tt-sl-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tt-sl-cols > div { padding: 22px 20px; }
  .tt-sl-guides { margin-top: 40px; padding-top: 28px; }
  .tt-sl-guides h2 { font-size: 21px; }
  .tt-sl-feature { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .tt-sl-feature img { width: 88px; height: 66px; }
  .tt-sl-feature .tt-sl-title { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-sl-feature, .tt-sl-card { transition: none; }
}