a {text-decoration: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var { font-size: 92%; font-family: monaco, "Lucida Console", courier, monospace; }
del { text-decoration: none; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; }
figure { margin: 0; }

#columns { background: #fff;  clear: both; margin: 0 auto; position: relative; padding-bottom: 0; z-index: 1 }
div.clr { clear: both; height: 1px; line-height: 1px; font-size: 1px; }
.accessible { position: absolute; top: -9999px; left: -9999px }
#columns a:link, #columns a:visited { color: #bfdefb; text-decoration: none; }
#columns a:hover, #columns a:focus, #columns a:active { color: #bfdefb; text-decoration: none; }
#columns a.noclick:hover, #columns a.noclick:focus, #columns a.noclick:active { text-decoration: none; }
#columns ul, #columns ul li { list-style: none; margin: 0; padding: 0; }
section { padding: 20px 20px 20px 20px; clear: both; }
section h2 { font-size: 24px; font-weight: bold; padding-bottom: 15px; }

/* Current weather */
#today { background: #076004 url() repeat-x 0 top; color: #fff; padding-right: 0;background-size:11.11% 100%; }
#today h2 { color: #fff; width: 100%; float: left; padding-bottom: 30px; }
.city { float: right; padding-right: 20px; }
.city ul > li { float: left; margin-left: 8px; }
.city ul > li > a { display: block; height: 31px; line-height: 31px; padding: 0 10px;  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#today li a:link, #today li a:visited { color: #fff; }
#today li a:hover, #today li a:focus, #today li a:active { color: #fff; }
#today > div > ul > li.locations, #today > div > ul > li.help { padding-left: 15px; background: #1a63a9 url(../img/today.bullet.html) no-repeat 9px center; }
.city li { width: 170px; cursor: pointer; position: relative; text-align: left; }
.city li.closed { background: #1a63a9 url(../img/today-city-arrow-down.html) no-repeat 135px center; }
.city li.open { background: #1a63a9 url(../img/today-city-arrow-up.html) no-repeat 135px center; }
.city li ul { width: 170px; background-color: #fff; z-index: 999; position: absolute; top: 31px; display: none; }
.city ul li:hover ul, .city ul li:focus ul, .city ul li:hover a:focus+ul { display: block; visibility: visible; }
.city li ul > li a { display: block; width: 170px; height: 30px; line-height: 30px; border-top: 1px solid #c3d8ec; padding-left: 10px;  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.city ul li ul li a:link, .city ul li ul li a:visited, .city ul li ul li a:hover, .city ul li ul li a:focus, .city ul li ul li a:active { color: #195b9b !important; }
.capitals { clear: both; }
.capital { width: 150px; margin-right: 7px; padding-right: 5px; float: left; background: url(../../files/tv/tilebg.png) no-repeat right center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.last { margin-right: 0; padding-right: 0; background-image: none; }
.capital a:hover, .capital a:focus, .capital a:active { text-decoration: none !important; }
.capital h3 { color: #fff; font-size: 16px; font-weight: bold; margin: 0; padding: 0 0 6px 0; }
.capital h3:hover { text-decoration: none; }
.now { margin: 0; font-size: 13px;  color: #fff; line-height: 16px;}
.val { display: block; padding-top: 3px; font-size: 36px; line-height: 42px; font-weight: bold; color: #fff;}
.minmax { margin: 0; padding-top: 3px; font-size: 24px; line-height: 24px; font-weight: bold; }
.minmax .max { color: #fddd71; }
.minmax .wrd { font-size: 14px; }
.precis {  margin: 4px 0 0 0; color: #bfdefb; font-size: 13px; line-height: 16px; }
.wind { margin: 0; padding-top: 3px; font-size: 13px; line-height: 16px; color:  #fff; }
.wind:hover, .wind:focus { text-decoration: none; }
.rain { margin: 0; padding-top: 3px; font-size: 13px; line-height: 16px; color:  #bfdefb; }
.rain a:hover, .rain a:focus, .rain a:active { text-decoration: none ; }

/* Clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; margin-left: auto;
    margin-right: auto;}
.clearfix:after { clear: both; }


  #sas {display:none;}
  .bigmonitor {display:inline;}
  #content.left-menuu {display:inline;}
  
  @media screen and (max-width: 768px) {
  #content.left-menuu {display:none;}
  #sas {display:inline;}
  .bigmonitor {display:none;}
  }



div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
div.descs {
  padding: 15px;
  text-align: center;
}

div.center {
  padding: 15px;
  text-align: center;
}

.org-chartsss {

  font-family: "Kanit", sans-serif;
  background: #f5f7fa;
  margin: 0;
  padding: 0px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  line-height: normal;
}

/* การ์ดบุคลากร */
.cardsss {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  padding: 15px;
  width: 200px;
  transition: transform 0.2s;
}
.cardsss:hover {
  transform: translateY(-5px);
}
.cardsss img {
  width: 100%;
  height: 250px;
  border-radius: 12px;   /* ✅ เปลี่ยนเป็นสี่เหลี่ยมขอบมน */
  object-fit: cover;
  margin-bottom: 10px;
}
.cardsss .namesss {
  font-weight: 600;
  font-size: 1.85rem;
  color: #333;
}
.cardsss .rolesss {
  font-size: 1.2rem;
  color: #666;
}

/* ผอ. อยู่บนสุด */
.directorsss {
  display: flex;
  justify-content: center;
}

.directorsss .cardsss img{
  width: 100%;
  height: 273px;
  border-radius: 12px;   /* ✅ เปลี่ยนเป็นสี่เหลี่ยมขอบมน */
  object-fit: cover;
  margin-bottom: 10px;
}

/* ทีมงาน: ใช้ Grid ปรับอัตโนมัติ */
.teamsss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}