@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: "IBM Plex Sans Thai", sans-serif;
}	
:root {
 /* --header-h: 21px;*/    /* สูงของ .main-header จริง */
  --toolbar-h: 140px;  /* ความสูงรวมของ custom-toolbar-wrapper */
  --sidebar-w: 230px;  /* กว้างของ .main-sidebar */
}

.custom-toolbar-tabs-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  height: 32px;
}

/* ตัว wrapper toolbar */
.custom-toolbar-wrapper {
  position: relative;
  display: block;
  /*height: var(--toolbar-h);*/
  background: #ffffff;
  border-bottom: 1px solid #ddd;
  font-family: "IBM Plex Sans Thai", sans-serif;
}
.toolbar-header {
    display: block;
    height: 130px;
}

/* แท็บบนสุด */
.custom-toolbar-tabs {
  display: inline-flex;           /* inline-flex แทน flex ปกติ เพื่อ scroll ได้ */
  overflow-x: auto;              /* เพิ่ม scrollbar แนวนอน */
  white-space: nowrap;          /* ไม่ให้บรรทัดตก */
  -webkit-overflow-scrolling: touch; /* เลื่อนได้ลื่นบนมือถือ */
  scrollbar-width: thin;        /* (สำหรับ Firefox) */
  scrollbar-color: #ccc transparent;
  padding: 0 10px;              /* เพิ่ม padding ซ้ายขวาเล็กน้อย */
  list-style: none;
  font-size: 10px;
}

.custom-toolbar-tabs li {
  flex: 0 0 auto;               /* ไม่ยืด/ไม่หด */
  margin-right: 5px;
}
.custom-toolbar-tabs li a {
  display: block;
  padding: 3px 20px;
  color: #333;
  text-decoration: none;
  border-right: 1px solid #ddd;
  
}
.custom-toolbar-tabs li.active a {
  background: #fff;
  color: #00a65a;
  border-bottom: 2px solid #00a65a;
  
}

/* พื้นที่ไอคอน */
.custom-toolbar-content {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

/* แต่ละกลุ่ม */
.toolbar-group {
  display: inline-block;
  vertical-align: top;
  /*margin-right: 40px;*/
  border: 1px solid #CCC;
  border-radius: 10px;
  padding-left:  5px;
  padding-right:  5px;
}

.group-title {
  font-weight: bold;
  margin-bottom: 6px;
  text-align: center;
  font-size: 14px;
}
.group-icons {
  /* จัดไอคอนเป็น float เพื่อให้ wrap ได้ */
}
.group-icons a {
  display: block;
  float: left;
  width: 80px;
  text-align: center;
  margin: 0 8px 1px;
  color: #333;
  text-decoration: none;
  font-size: 11px;
}
.group-icons a img {
  display: block;
  margin: 0 auto 2px;
  width: 35px;
  height: 35px;
}

/* เคลียร์ float */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.toolbar-panel {
  display: inline-block; /* เปลี่ยนจาก block เป็น inline-block เพื่อให้ scroll แนวนอนได้ */
  min-width: max-content; /* เพื่อให้ขนาดพอดีกับเนื้อหา */
  vertical-align: top;
  display: none;
}

.toolbar-panel-none {
  display: none;
}
  .toolbar-panel.active {
    display: block;
  }

/* เลื่อน sidebar & content ลงมาไม่ให้โดน toolbar */
body.fixed .main-sidebar {
  top: calc(var(--header-h) + var(--toolbar-h)) !important;
}
body.fixed .content-wrapper,
body.fixed .main-footer,
body.fixed .control-sidebar-bg {
  margin-top: calc(var(--header-h) + var(--toolbar-h)) !important;
}