@charset "utf-8";
/* CSS Document */

body{ display:none; }
body img{ height:auto; max-width:100%; }
.clear {clear: both;}
a:link, a:visited, a:active{ text-decoration: none; cursor: pointer; }
a:hover {text-decoration: none; cursor: pointer; }
.pagination span, .pagination span a:hover{cursor: pointer;}
h1,h2,h3{ }
p { margin-bottom:0px; }
.flag { padding-right:5px;}
strong{ font-weight:bold !important; }
.camera_caption{ width: auto !important; padding:13% 5% !important; }
.camera_caption > div{ background:none !important;}
.camera_caption_title{ font-size:1.75em ;text-shadow: 2px 2px 0px #000; padding-bottom:15px;}
.camera_caption_desc{ font-size:2em;text-shadow: 1px 1px 0px #000; padding-bottom:15px;}
.jt-title{ font-weight:bold !important;}
.jtcs_more_cat{ font-weight:bold !important;}
.jtcs_more_cat a:link{ font-weight:normal !important;}
dl{ clear:both !important;}
.fixed-action-btn.direction-left ul{right: 45px !important;}
.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li { margin: 5.5px 5px 0 0 !important;}
.article-info dd{ float:left !important; padding:5px 7px !important; clear:both !important; }
.article-info-term{ display:none;}
.com-content-article{ padding-top:20px; padding-bottom:20px;}
.filter-branch .control-group{ float:left;padding:5px 7px !important;}
#yendif-video-share-category, #yendif-video-share-video{ padding:20px;}
#gdpr-overlay{ color:#fff !important;}
.btn-success{ color:#fff !important;}
.phocadownloadfilelist{ border:none !important; padding:15px !important;}
.imageck figure.imageeffectck{ margin:0px !important;}
figure.effectck-apollo , figure[class*="effectck"]{ background:none !important;}
figure.effectck-apollo img{ padding:0px !important; transform:none !important; opacity:1 !important;  }
.phocadownloadfilelist32{ border-bottom:1px dashed #ccc;}
.pd-float{ font-size:18px !important; font-weight:bold !important; line-height:140%;}
.pd-button-box-bt a.btn{color:#fff !important;}
.mfp_default_item div{ background:#fff !important;}
.mfp_default_skin_default .mfp_default_item .mfp_default_title, .mfp_date { padding-left:0px !important; padding-right:0px;}
.mfp_default_item div p { padding-left:0px; padding-right:0px; padding-bottom:10px;}
.phocadownloadfilelist{box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%);}
.ph-top a:link{ color:#fff;}
.awesomplete > ul{ z-index:999 !important;}
.com-finder { padding-top:20px; padding-bottom:20px;}
#component-right .mfp_default_item div{ padding:10px; background:none !important; box-shadow:none !important;}

.search-img, .result__item{ clear:both !important;}
.search-img img { width:20%; float:left; margin-right:20px; margin-bottom:20px;}
.awesomplete{ width:70% !important;}

.mfp-col-md-12{ border-bottom:1px dashed #ccc; padding-bottom:7px;}



#component-right li .accordeonck .ishover { font-weight:bold !important;}
#component-right li .accordeonck .isactive { font-weight:bold !important;}
.accordeonck li{ padding:7px 5px;}
.food_menu td {}

:focus {
  outline: none !important;
}

::-moz-focus-inner {
  border: 0 !important;
}
.btn-floating.btn-large {
    width: 45px !important;
    height: 45px !important;
    padding: 0;
}
.btn-floating.btn-large i{ line-height: 45px !important;}
.btn-floating i{ font-size:1.2em !important;}
/*** head-slide  ***/
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26);  }


/*** promote ***/
#promote{ padding:0px;}

#top{ padding:0px; overflow:hidden !important;}
#lang html5 { display:block !important;}
.switcher{ position:absolute !important;}

#slide{ overflow:hidden !important;}
#slide, #slide-body{ overflow:hidden !important;}

/*** menu ***/
#main-menu{box-shadow: 0px 2px 6px #505050; z-index:999; position:relative;}
#menu-body{ padding:0px;}
.camera_wrap .camera_pag .camera_pag_ul{ text-align:center !important;}

/*** content ***/
#content-1, #content-1-body{}
#content-2, #content-2-body{ overflow:hidden !important;}
#content-3, #content-3-body{ overflow:hidden !important;}
#content-4, #content-4-body{ overflow:hidden !important;}
#content-5, #content-5-body{ overflow:hidden !important;}



#footer, #footer-body{ overflow:hidden !important;}
#footer img a:link, #footer img a:visited, #footer img a:active{ text-decoration: none; border:none !important; }
#footer img a:hover {text-decoration: none; border:none !important; }


.jt-cs .hover-icons a:link { color:#fff !important;}
.jt-cs .hover-icons a.icon-url{ color:#fff !important;}
.jt-cs p.readmore{ margin-top:10px !important; }
.fa-file-text-o:before{ display:none !important;}
.jdscf-submit-btn{ margin-top:15px !important;}

.mod_userstat_main{ border:none !important; margin:0px !important; border-radius:0px !important ;  }

/*** copyright ***/
#copyright{ text-align:center; }
.footer2{ font-size:12px;}
#copyright a:link, #copyright a:visited, #copyright a:active{text-decoration: none;}
#copyright a:hover {text-decoration: none;}


.breadcrumb{ margin-bottom:0px !important;}

.input-group{ padding-bottom:3px;}

.category-list table th, .category-list .table-bordered>:not(caption)>*>*{ border:none !important;}

.category-list{ padding-top:20px !important; padding-bottom:20px !important;}

.card{ background:none !important;}
li.level1 > span a{ border-bottom:1px solid #f3f3f3 !important;}


#component-left{ }
.controls{ margin-bottom:10px !important; }
.form-select{ margin-bottom:15px;}


th{ font-weight:normal !important;}

.mfp_block_title{ display:none !important;}

.title-head{width:100%; max-width:85%; float:left; font-weight:500;}
.list-items{padding:15px 5px; border-bottom:1px dashed #bbb;}
.mod-articles-category-date{background:#ca0606; padding:5px 15px; color:#fff; font-size:14px; }
.mod-articlescategory li{ list-style-type:none;}

figure[class*="effectck"] figcaption [class*="title"]{ font-family: 'Noto Sans Thai', sans-serif; font-weight:400; }
figure.effectck-julia figcaption{ margin-left:5%;}
figure.effectck-julia figcaption [class*="desc"]{ margin:0px !important; font-size:16px !important;}
figure[class*="effectck"] figcaption [class*="desc"]{ font-size:100% !important;}


.djslider-loader-default{ overflow:visible !important;}
.md-modal{ width:100% !important; max-width:55% !important; background:none !important; display:block !important;}
.md-content{ background:none !important; padding:0px !important; }
.md-content img{ border:3px solid #fff;}
.table>:not(caption)>*>* { background-color: transparent;}
.com-users-login, .com-users-registration{ padding: 20px 0 ;}
.blog{ padding:20px 0;}
.eb_privacypolicy .button_cookie + .button_cookie{ margin: 10px 0 0 0 !important;}
.djslider-loader-default{ overflow:visible !important;}
.card{ border:none !important;}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.breadcrumb {
  display: flex !important;
  flex-wrap: wrap ;
  padding: 0 0 !important;
  list-style: none !important;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left !important;
  padding-right: 0.5rem !important;
  color: #6d757e !important;
  content: var(--breadcrumb-divider, "/") !important/* rtl: var(--breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: #484f56;
}
.form-control{ padding:10px  15px !important; border-radius:0px !important;  }
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}



figure {
  margin: 0 0 2em;
}
figure.float-start {
  margin-right: 1em;
}
figure.float-end {
  margin-left: 1em;
}
[dir=rtl] figure.float-start {
  margin-right: 0;
  margin-left: 1em;
}
[dir=rtl] figure.float-end {
  margin-right: 1em;
  margin-left: 0;
}

figcaption {
  font-size: 0.9em;
  color: #6d757e;
}

.mod-menu {
  flex-direction: column;
}

meter {
  width: 100%;
}




.error_site .page-header {
  margin-top: 1em;
}

[class^=container-] .span-col-2,
[class*=" container-"] .span-col-2 {
  flex: 0 0 50%;
  max-width: calc(50% - 1em);
}
[class^=container-] .span-col-3,
[class*=" container-"] .span-col-3 {
  flex: 0 0 33.333%;
  max-width: calc(33.333% - 1em);
}
[class^=container-] .span-col-4,
[class*=" container-"] .span-col-4 {
  flex: 0 0 25%;
  max-width: calc(25% - 1em);
}
[class^=container-] .span-col-5,
[class*=" container-"] .span-col-5 {
  flex: 0 0 20%;
  max-width: calc(20% - 1em);
}

@supports (display: grid) {
  [class^=span-],
[class*=" span-"] {
    grid-column-end: auto;
    grid-row-end: auto;
  }

  @media (min-width: 576px) {
    [class^=span-col],
[class*=" span-col"] {
      grid-column-end: span 2;
    }
  }

  @media (min-width: 768px) {
    .span-col-2 {
      grid-column-end: span 2;
    }

    .span-col-3 {
      grid-column-end: span 3;
    }

    .span-col-4 {
      grid-column-end: span 4;
    }

    .span-row-2 {
      grid-row-end: span 2;
    }

    .span-row-3 {
      grid-row-end: span 3;
    }

    .span-row-4 {
      grid-row-end: span 4;
    }
  }
  [class^=container-] [class^=span-],
[class^=container-] [class*=" span-"],
[class*=" container-"] [class^=span-],
[class*=" container-"] [class*=" span-"] {
    flex: 0 1 auto;
    max-width: none;
  }
}
.blog-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin-right: -0.5em;
  margin-bottom: 1em;
  margin-left: -0.5em;
}
@media (min-width: 768px) {
  .blog-items.columns-2 > div {
    width: 50%;
  }
  .blog-items.columns-3 > div {
    width: 33.33333%;
  }
  .blog-items.columns-4 > div {
    width: 25%;
  }
}

.blog-item {
  display: flex;
  flex-direction: column;
  padding: 0 0.5em 1em;
  margin-bottom:30px;
  
}
.boxed .blog-item {
  background-color: white;
  box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--cassiopeia-color-primary);
}
.boxed .blog-item .item-content {
  padding: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: row;
}
.image-left .blog-item .item-image, .image-right .blog-item .item-image {
  flex: 1 0 40%;
}
.blog-item .item-image {
  margin-top: 3px;
  margin-bottom: 15px;
  
}
.boxed .blog-item .item-image {
  margin-bottom: 0;
}
.image-right .blog-item .item-image {
  order: 1;
}
.image-bottom .blog-item .item-image {
  margin-top: -15px;
  order: 1;
}
.image-left .blog-item .item-content {
  padding-left: 25px;
}
.image-right .blog-item .item-content {
  padding-right: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: column;
}
@media (min-width: 768px) {
  .image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
  }
}

.article-info dd {
  padding: 0;
}

@supports (display: grid) {
  .blog-items {
    display: grid;
    margin: 0 0 1em;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: 1em;
	
	padding-bottom:5%;
  }
  .blog-items .blog-item {
    padding: 0;
  }
  .blog-items[class^=columns-] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  @media (min-width: 768px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }
    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}
.blog-items[class^=masonry-], .blog-items[class*=" masonry-"] {
  display: block;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.blog-items[class^=masonry-] .blog-item, .blog-items[class*=" masonry-"] .blog-item {
  display: inline-flex;
  margin-bottom: 1em;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
}



/**********************
/*PAGINATION GENERAL
**********************/
.pagenav {
text-align: center; 

line-height: 2.1em; 
text-decoration: none;
border: 1px solid #dadada !important;
display: inline-block;
margin-left:5px;
}

.pagenav ul {
display: inline-block;
*display: inline;
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
text-align: center;  
}

.pagenav li {
display: inline;
padding:  10px;
}

.pagenav a,span.pagenav {

}

.pagination {
float:none;
text-align:center;
width:100%;
margin-top:30px;
margin-bottom:40px;	
}

.pagination ul {
padding: 0;
text-align:center;
width:100%;
margin-bottom:40px;
}

.pagination li {
display: inline;
float:left; 


}
body{ display:none; }
.pagination li a {

text-decoration: none;
display: inline-block;

}

.pagination .active  {

 
 
} 

.pagination span,.pagination span  a:hover {

margin-left:5px;



}

.pagination p.pull-right {
float: none;
text-align: center;
margin-bottom:15px;
}

ul.pager.pagenav  {
border:none !important;
text-align:center;
width:100%;
margin-bottom:25px;
}

 ul.pager.pagenav > li.next > a ,ul.pager.pagenav > li.previous > a {
background:#262626;
color:#fff !important;
margin:10px 12px 20px 0 ;

}
.pager li>a{ border-radius:0px !important; }
 
ul.pager.pagenav > li.next > a:hover ,ul.pager.pagenav > li.previous > a:hover {
border:none;
background:#262626;
color:#fff;
}

div.gk-article > ul.pager.pagenav ul li a:before {
content:"";
}

ul.pagination-list {
padding-bottom:40px;
}


/* ==========================================================
   บุคลากรสายสนับสนุน | Joomla 6
   โทนสี: น้ำเงินกรม + ส้ม + ขาว
   ========================================================== */


/* ==========================================================
   1. โครงสร้างหลัก
   ========================================================== */

.staff-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
    overflow: hidden;
}


/* ==========================================================
   2. TAB ด้านซ้าย
   ========================================================== */

.staff-menu,
#staffTabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}


/* Tab ปกติ */
.staff-menu .nav-link,
#staffTabs .nav-link {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 66px;

    margin: 0;
    padding: 14px 18px;

    border: 0 !important;
    border-radius: 14px !important;

    background: #f3f6fa !important;
    color: #44515a !important;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    box-shadow: none !important;

    transition:
        background-color .20s ease,
        color .20s ease,
        box-shadow .20s ease,
        transform .20s ease;
}


/* Icon Tab */
.staff-menu .nav-link i,
#staffTabs .nav-link i {
    flex: 0 0 27px;

    width: 27px;

    margin-right: 8px;

    color: #526069 !important;

    font-size: 16px;
    text-align: center;

    transition: color .20s ease;
}


/* Hover */
.staff-menu .nav-link:hover,
#staffTabs .nav-link:hover {
    background: #e9eef4 !important;
    color: #2f557e !important;

    transform: translateY(-1px);
}


.staff-menu .nav-link:hover i,
#staffTabs .nav-link:hover i {
    color: #2f557e !important;
}


/* ==========================================================
   ACTIVE TAB
   โทนน้ำเงินเก่า
   ========================================================== */

.staff-menu .nav-link.active,
.staff-menu .nav-link.active:hover,
.staff-menu .nav-link[aria-selected="true"],
#staffTabs .nav-link.active,
#staffTabs .nav-link.active:hover,
#staffTabs .nav-link[aria-selected="true"] {

    background: #2f557e !important;
    background-color: #2f557e !important;

    color: #ffffff !important;

    border: 0 !important;

    box-shadow:
        0 7px 18px rgba(47, 85, 126, .18) !important;

    transform: none;
}


/* Icon Active */
.staff-menu .nav-link.active i,
.staff-menu .nav-link.active:hover i,
.staff-menu .nav-link[aria-selected="true"] i,
#staffTabs .nav-link.active i,
#staffTabs .nav-link.active:hover i,
#staffTabs .nav-link[aria-selected="true"] i {

    color: #ffffff !important;
}


/* ==========================================================
   3. พื้นที่เนื้อหาด้านขวา
   ========================================================== */

.staff-content {
    min-width: 0;

    padding-left: 28px;

    border-left: 1px solid #eeeeee;
}


/* ==========================================================
   4. หัวข้อหมวด
   ========================================================== */

.staff-title {
    display: flex;
    align-items: center;

    width: 100%;

    margin: 0 0 20px 0;
    padding: 0 0 12px 0;

    border-bottom: 2px solid #ff9b24;

    color: #ff9b24 !important;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;

    white-space: nowrap;
}


/* Icon หัวข้อ */
.staff-title i {
    flex: 0 0 auto;

    margin-right: 9px;

    color: #ff9b24 !important;

    font-size: 22px;
}


/* ==========================================================
   5. การ์ดบุคลากร
   ========================================================== */

.staff-card {
    width: 100%;
    max-width: 420px;
    height: 100%;

    margin: 0 auto;

    border: 0 !important;
    border-radius: 18px !important;

    background: #ffffff;

    box-shadow:
        0 3px 16px rgba(0, 0, 0, .055);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.staff-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 9px 25px rgba(0, 0, 0, .085);
}


.staff-card .card-body {
    padding: 28px 10px 30px;

    text-align: center;

    overflow: hidden;
}


/* ==========================================================
   6. รูปบุคลากร
   ========================================================== */

.staff-photo {
    display: block;

    width: 100%;
    max-width: 230px;
    height: 260px;

    margin: 0 auto 10px;

    object-fit: contain;
    object-position: center bottom;
}


/* ==========================================================
   7. ชื่อบุคลากร
   ========================================================== */

.staff-name {
    display: block;

    margin: 0 0 6px 0;

    color: #ff9b24 !important;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.staff-name i {
    margin-right: 6px;

    color: #ff9b24 !important;

    font-size: 16px;
}


/* ==========================================================
   8. ตำแหน่ง
   ========================================================== */

.staff-position {
    margin-bottom: 12px;

    color: #737b82 !important;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.staff-position i {
    margin-right: 6px;

    color: #7d858b !important;

    font-size: 14px;
}


/* ==========================================================
   9. งานรับผิดชอบ
   ========================================================== */

.staff-duty {
    margin-bottom: 12px;

    color: #333333 !important;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.staff-duty i {
    margin-right: 4px;

    color: #333333 !important;

    font-size: 11px;
}


.staff-duty strong {
    color: #222222 !important;

    font-weight: 600;
}


/* ==========================================================
   10. Email + UC
   ========================================================== */

.staff-contact {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    font-size: 11px;
    line-height: 1.4;

    white-space: nowrap;
}


/* Icon Email */
.staff-contact > .fa-envelope {
    flex: 0 0 auto;

    margin-right: 5px;

    color: #ff9b24 !important;

    font-size: 12px;
}


/* Email */
.staff-contact a {
    display: inline-block;

    min-width: 0;

    color: #ff9b24 !important;

    font-size: 11px;
    font-weight: 400;

    text-decoration: none !important;

    overflow: hidden;
    text-overflow: ellipsis;

    transition: color .20s ease;
}


.staff-contact a:hover {
    color: #df7d0b !important;

    text-decoration: underline !important;
}


/* ==========================================================
   11. UC
   ทำให้เป็นข้อมูลรอง ไม่เด่น
   ========================================================== */

.staff-uc {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;

    margin-left: 8px;

    color: #a4a9ae !important;

    font-size: 10px;
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;
}


/* Icon โทรศัพท์ */
.staff-uc i,
.staff-uc .fa-phone {
    margin-right: 3px;

    color: #b6babd !important;

    font-size: 9px;
}


/* ==========================================================
   12. Bootstrap ROW
   ========================================================== */

.staff-content .row {
    align-items: stretch;
}


.staff-content [class*="col-"] {
    min-width: 0;
}


/* ==========================================================
   13. TABLET
   ========================================================== */

@media (max-width: 1199.98px) {

    .staff-page {
        padding-left: 12px;
        padding-right: 12px;
    }


    /* Tab ย้ายขึ้นด้านบน */
    .staff-menu,
    #staffTabs {
        gap: 10px;

        margin-bottom: 18px;
    }


    .staff-menu .nav-link,
    #staffTabs .nav-link {
        min-height: 60px;

        padding: 13px 16px;

        font-size: 13px;
    }


    /* เนื้อหา */
    .staff-content {
        margin-top: 5px;

        padding-left: 0;

        border-left: 0;
    }


    /* หัวข้อ */
    .staff-title {
        font-size: 20px;
    }


    /* รูป */
    .staff-photo {
        max-width: 220px;
        height: 250px;
    }
}


/* ==========================================================
   14. MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .staff-page {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* Tab */
    .staff-menu,
    #staffTabs {
        gap: 9px;

        margin-bottom: 18px;
    }


    .staff-menu .nav-link,
    #staffTabs .nav-link {
        min-height: 56px;

        padding: 11px 13px;

        border-radius: 12px !important;

        font-size: 12px;
    }


    .staff-menu .nav-link i,
    #staffTabs .nav-link i {
        flex: 0 0 24px;

        width: 24px;

        margin-right: 6px;

        font-size: 14px;
    }


    /* หัวข้อ */
    .staff-title {
        margin-bottom: 18px;

        padding-bottom: 10px;

        font-size: 17px;

        white-space: normal;
    }


    .staff-title i {
        margin-right: 7px;

        font-size: 18px;
    }


    /* Card */
    .staff-card {
        max-width: 430px;

        border-radius: 17px !important;
    }


    .staff-card .card-body {
        padding: 24px 9px 26px;
    }


    /* รูป */
    .staff-photo {
        max-width: 215px;
        height: 245px;

        margin-bottom: 10px;
    }


    /* ชื่อ */
    .staff-name {
        font-size: 15px;
    }


    /* ตำแหน่ง */
    .staff-position {
        margin-bottom: 11px;

        font-size: 13px;
    }


    /* งานรับผิดชอบ */
    .staff-duty {
        margin-bottom: 11px;

        font-size: 11px;
    }


    /* Contact */
    .staff-contact {
        font-size: 11px;
    }
}


/* ==========================================================
   15. MOBILE <= 480px
   ========================================================== */

@media (max-width: 480px) {

    /* Tab */
    .staff-menu .nav-link,
    #staffTabs .nav-link {
        min-height: 52px;

        padding: 10px;

        border-radius: 11px !important;

        font-size: 11px;
    }


    .staff-menu .nav-link i,
    #staffTabs .nav-link i {
        flex: 0 0 22px;

        width: 22px;

        margin-right: 5px;

        font-size: 13px;
    }


    /* หัวข้อ */
    .staff-title {
        font-size: 16px;
    }


    /* Card */
    .staff-card .card-body {
        padding: 22px 8px 25px;
    }


    /* รูป */
    .staff-photo {
        max-width: 200px;
        height: 230px;
    }


    /* ชื่อ */
    .staff-name {
        font-size: 15px;
    }


    /* ตำแหน่ง */
    .staff-position {
        font-size: 13px;
    }


    /* งานรับผิดชอบ */
    .staff-duty {
        font-size: 10.5px;
    }


    /* Email */
    .staff-contact {
        font-size: 10.5px;
    }


    .staff-contact a {
        font-size: 10.5px;
    }


    /* UC */
    .staff-uc {
        margin-left: 6px;

        color: #a9adb1 !important;

        font-size: 9px;
    }


    .staff-uc i,
    .staff-uc .fa-phone {
        margin-right: 3px;

        color: #b9bdc0 !important;

        font-size: 8px;
    }
}


/* ==========================================================
   16. จอเล็กมาก
   ป้องกัน Email ล้น Card
   ========================================================== */

@media (max-width: 360px) {

    .staff-contact a {
        max-width: 180px;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    .staff-uc {
        margin-left: 5px;
    }
}
/* ===== Joomla Category Blog : Equal Image Size ===== */

.blog .item-image,
.blog-items .item-image {
    width: 100%;
    overflow: hidden;
}

.blog .item-image img,
.blog-items .item-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Tablet */
@media (max-width: 991px) {
    .blog .item-image img,
    .blog-items .item-image img {
        height: 220px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .blog .item-image img,
    .blog-items .item-image img {
        height: 200px;
    }
}

/* =====================================================
   KANIT สำหรับบทความ Joomla ทั้งเก่าและใหม่
   ยกเว้นหน้าบุคลากรสายสนับสนุน
   ===================================================== */

.item-page:not(:has(#support-staff)),
.com-content-article:not(:has(#support-staff)) {
    font-family: "Kanit", sans-serif !important;
}

.item-page:not(:has(#support-staff)) h1,
.item-page:not(:has(#support-staff)) h2,
.item-page:not(:has(#support-staff)) h3,
.item-page:not(:has(#support-staff)) h4,
.item-page:not(:has(#support-staff)) h5,
.item-page:not(:has(#support-staff)) h6,
.item-page:not(:has(#support-staff)) p,
.item-page:not(:has(#support-staff)) li,
.item-page:not(:has(#support-staff)) a,
.item-page:not(:has(#support-staff)) span,
.item-page:not(:has(#support-staff)) strong,

.com-content-article:not(:has(#support-staff)) h1,
.com-content-article:not(:has(#support-staff)) h2,
.com-content-article:not(:has(#support-staff)) h3,
.com-content-article:not(:has(#support-staff)) h4,
.com-content-article:not(:has(#support-staff)) h5,
.com-content-article:not(:has(#support-staff)) h6,
.com-content-article:not(:has(#support-staff)) p,
.com-content-article:not(:has(#support-staff)) li,
.com-content-article:not(:has(#support-staff)) a,
.com-content-article:not(:has(#support-staff)) span,
.com-content-article:not(:has(#support-staff)) strong {
    font-family: "Kanit", sans-serif !important;
}