body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-family: "Bai Jamjuree", sans-serif;
    /*font-family: "Athiti", sans-serif;*/
    background-color: #ffffff;
}

main{
    flex:1;
}

/* ส่วนหัวบนสุด และ เมนู */
.top-header{
    background:#012178;
    color:white;
    padding:5px 0;
}

.navbar-brand img{
    height:50px;
    margin-right:10px;
}

.navbar-nav{
     background-color: #0d6efd;
}

.navbar{
    height:50px;
}

/* ข้อความวิ่ง */
.marquee-container{
    display: flex;
    background-color: #0d6efd;
    color: #ffffff;
}

.m-col-1{
    width: 130px;
}

.m-col-2{
    flex-grow: 1;
}

/* content */
.content-bg1{
    background-color: #FFF6FA;
}

.content-bg2{
    background-color: #FED6BC;
}

.content-bg3{
    background-color: #EFF1EA;
}

/* ส่วนหัวข่าวประชาสัมพันธ์ */
.top-news{
    background:#FA9552;
    color:#000000;
}

/* ส่วนหัวแกลลอรี่ */
.top-gallery{
    background:#D3DED1;
    color:#000000;
}

/* ข้อความส่วนล่าง */
.text-head-footer{
    font-size: 18px;
}

.text-footer{
    font-size: 14px;
}

.text-li-footer{
    font-size: 14px;
}

/* ข้อความ link */
a{
    text-decoration: none;
}

a.article{
    color:#0d6efd;
}

/* สไตล์ปุ่ม Tab */
.tab-container {
  display: flex;
  background-color: #ddd;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

.tab-link {
  background-color: #f0f0f0;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  font-size: 14px;
  color:#0d6efd;
  transition: 0.3s;
}

.tab-link:hover {
  background-color: inherit;
}

.tab-link.active {
  background-color: inherit;
  border-bottom: 3px solid #0d6efd;
}

/* สไตล์เนื้อหา */
.tab-content-head {
    color:#000080;
    font-size: 18px;
    font-weight: bold;
}

.tab-content {
  display: none;
  padding: 20px;
  background-color: #fff;
  border: 0px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
  font-size: 16px;
  font-weight: normal;
}

.tab-content.active {
  display: block;
}

.text-content {
    padding: 0px 0px 0px 40px;
    font-weight: normal;
    font-size: 16px;
    color:#000000;
}

.indent-first-line {
    text-indent: 40px;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

.hanging-paragraph {
    padding-left: 40px;
    text-indent: -40px;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

.hanging-paragraph-lv2 {
    padding-left: 80px;
    text-indent: -40px;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

.indent-line-1 {
    text-indent: 0;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

.indent-line-2 {
    text-indent: 40px;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

.indent-line-3 {
    text-indent: 80px;
    font-size: 16px;
    color:#000000;
    font-weight: normal;
}

/* จัดกึ่งกลาง */
.center-container {
  display: flex;
  justify-content: center; /* จัดกึ่งกลางแนวนอน */
  align-items: center;      /* จัดกึ่งกลางแนวตั้ง */
  font-size: 16px;
  color: #000000;
  font-weight: normal;
}

/* tab table */
.tab-table {
  width: 100%;
  border-collapse: collapse; /* Collapses double borders into single lines */
  margin: 0px 0;
}

/* Header style specifications */
.tab-table th {
  background-color: #0d6efd;
  color: white;
  text-align: center;
  padding: 12px;
}

/* Row cells styling */
.tab-table td {
  padding: 0px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  font-size: 14px;
}

/* Zebra striping (targets even rows) */
.tab-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Hover dynamic visual indicator 
.tab-table tbody tr:hover {
  background-color: #f1f1f1;
}*/

.img-center{
    text-align: center;
    padding: 10px 0;
}