/* ==================================================
   แท็บ "กิจกรรมโรงเรียน" (#tabnews1) และ "ปฏิทินวิชาการ" (#tabnews3)
   ธีม Simple & Warm — อบอุ่น เรียบง่าย สบายตา
   ================================================== */

.bs-example-tabs {
  --tw-bg: #fffaf3;
  --tw-card: #fffdf9;
  --tw-ink: #4a3728;
  --tw-ink-soft: #8a7362;
  --tw-accent: #c9793f;
  --tw-accent-soft: #eccba3;
  --tw-border: #ecdcc8;
  --tw-highlight: #fbead2;
}

/* ---------- แถบแท็บด้านบน ---------- */
.bs-example-tabs #myTab.nav-tabs {
  border-bottom: 2px solid var(--tw-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bs-example-tabs #myTab.nav-tabs > li {
  float: none;
}

.bs-example-tabs #myTab.nav-tabs > li > a {
  border: none !important;
  border-radius: 12px 12px 0 0;
  /* ให้แท็บที่ยังไม่ active ก็มีกรอบ/พื้นหลังจางๆ ของตัวเองด้วย
     ไม่งั้นจะเห็นแค่ตัวหนังสือลอยๆ ไม่มีกรอบเทียบกับแท็บที่ active
     (ซึ่งมีพื้นหลังสีส้มชัดเจน) ทำให้ตาเปรียบเทียบแล้วรู้สึกว่าสองแท็บ
     ไม่อยู่ระดับเดียวกัน ทั้งที่ขนาดกล่องจริงๆ เท่ากันแล้ว ใช้ box-shadow
     แทน border เพื่อไม่ให้ไปเพิ่มความสูงของกล่อง (border จริงจะบวกความ
     สูงเพิ่ม ทำให้สองแท็บต่างกัน 1px ได้) */
  background: var(--tw-card);
  box-shadow: inset 0 0 0 1px var(--tw-border);
  /* !important เพราะมีสไตล์เดิม (#myTab li.active #tabnews1-tab และ
     #tabnews3-tab เป็นต้น) ที่ความ specific สูงกว่า คอย fix padding
     ให้แคบเฉพาะตอนแท็บนั้น active อยู่ ทำให้แท็บที่ active กับไม่ active
     สูงไม่เท่ากัน ต้องบังคับให้ padding เท่ากันเสมอไม่ว่าจะ active หรือไม่ */
  padding: 10px 20px 8px !important;
  margin-right: 0;
  transition: background .25s ease, box-shadow .25s ease;
}

.bs-example-tabs #myTab.nav-tabs > li > a h3 {
  margin: 0 !important;
}

.bs-example-tabs #myTab.nav-tabs > li > a h3 strong {
  font-family: "Kanit", "Sarabun", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--tw-ink-soft) !important;
  display: inline-block !important;
  margin: 0 !important;
}

.bs-example-tabs #myTab.nav-tabs > li > a:hover,
.bs-example-tabs #myTab.nav-tabs > li > a:focus {
  background: var(--tw-highlight);
}

.bs-example-tabs #myTab.nav-tabs > li.active > a,
.bs-example-tabs #myTab.nav-tabs > li.active > a:hover,
.bs-example-tabs #myTab.nav-tabs > li.active > a:focus {
  background: var(--tw-highlight) !important;
  border: none !important;
  box-shadow: inset 0 -3px 0 var(--tw-accent);
}

.bs-example-tabs #myTab.nav-tabs > li.active > a h3 strong {
  color: var(--tw-accent) !important;
}

#myTabNewsContent.tab-content {
  background: var(--tw-bg);
  border-radius: 0 16px 16px 16px;
  padding: 22px clamp(14px, 3vw, 28px) 26px;
}

/* ---------- เนื้อหาแท็บ "กิจกรรมโรงเรียน" ---------- */
#tabnews1 {
  font-family: "Sarabun", sans-serif;
  color: var(--tw-ink);
}

#tabnews1 .thumbnail {
  border: 1px solid var(--tw-border);
  border-radius: 14px;
  background: var(--tw-card);
  padding: 6px;
  box-shadow: 0 8px 18px -14px rgba(74, 55, 40, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}

#tabnews1 .thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(201, 121, 63, .35);
}

#tabnews1 .caption h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  margin-top: 12px;
}

#tabnews1 .caption h4 a,
#tabnews1 .caption h4 a strong {
  color: var(--tw-ink) !important;
}

#tabnews1 .caption h4 a:hover {
  color: var(--tw-accent) !important;
}

#tabnews1 .table.table-striped {
  background: var(--tw-card);
  border: 1px solid var(--tw-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px -14px rgba(74, 55, 40, .3);
}

#tabnews1 .table.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fff;
}

#tabnews1 .table.table-striped > tbody > tr:nth-of-type(even) {
  background: #fbf3e8;
}

#tabnews1 .table.table-striped > tbody > tr > td {
  border-top: none;
  border-bottom: 1px solid var(--tw-border);
  padding: 10px 16px;
  transition: background .2s ease;
}

#tabnews1 .table.table-striped > tbody > tr:hover > td {
  background: var(--tw-highlight);
}

#tabnews1 .table.table-striped a {
  color: var(--tw-ink) !important;
  font-size: 14px;
}

#tabnews1 .table.table-striped a:hover {
  color: var(--tw-accent) !important;
}

#tabnews1 .btn.btn-primary {
  background: var(--tw-accent);
  border: none;
  border-radius: 999px;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  padding: 10px 26px;
  box-shadow: 0 10px 20px -12px rgba(201, 121, 63, .5);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

#tabnews1 .btn.btn-primary:hover,
#tabnews1 .btn.btn-primary:focus {
  background: #b56a34;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(201, 121, 63, .6);
  color: #fff;
}

/* ---------- เนื้อหาแท็บ "ปฏิทินวิชาการ" — ปรับเป็นธีมอบอุ่นเรียบง่าย ---------- */
#tabnews3 .acal-gcal-head h3 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--tw-accent) !important;
}

#tabnews3 .acal-gcal-head p {
  color: var(--tw-ink-soft) !important;
}

#tabnews3 .acal-gcal-open {
  background: var(--tw-accent) !important;
  box-shadow: 0 10px 20px -12px rgba(201, 121, 63, .5) !important;
}

#tabnews3 .acal-gcal-open:hover {
  background: #b56a34 !important;
  box-shadow: 0 14px 26px -12px rgba(201, 121, 63, .6) !important;
}

#tabnews3 .acal-gcal-frame {
  border: 1px solid var(--tw-border) !important;
  box-shadow: 0 10px 24px -16px rgba(74, 55, 40, .35) !important;
}

@media (max-width: 600px) {
  .bs-example-tabs #myTab.nav-tabs > li > a h3 strong {
    font-size: 14.5px !important;
  }
  #myTabNewsContent.tab-content {
    padding: 18px 14px 22px;
    border-radius: 0 14px 14px 14px;
  }
}