@font-face {
      font-family: 'FC Iconic';
      src: url('../../assets/fonts/FC Iconic Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  * {
      font-family: 'FC Iconic', sans-serif;
      font-size: 24px;
  }


  .highcharts-figure,
  .highcharts-data-table table {
      min-width: 320px;
      max-width: 1200px;
      margin: 1em auto;
  }

  .highcharts-data-table table {
      font-family: Verdana, sans-serif;
      border-collapse: collapse;
      border: 1px solid #ebebeb;
      margin: 10px auto;
      text-align: center;
      width: 100%;
      max-width: 500px;
  }

  .highcharts-data-table caption {
      padding: 1em 0;
      font-size: 1.2em;
      color: #555;
  }

  .highcharts-data-table th {
      font-weight: 600;
      padding: 0.5em;
  }

  .highcharts-data-table td,
  .highcharts-data-table th,
  .highcharts-data-table caption {
      padding: 0.5em;
  }

  .highcharts-data-table thead tr,
  .highcharts-data-table tr:nth-child(even) {
      background: #f8f8f8;
  }

  .highcharts-data-table tr:hover {
      background: #f1f7ff;
  }

  .highcharts-description {
      margin: 0.3rem 10px;
  }

  .modal-dialog {
      max-width: 90%;
      /* ปรับความกว้างของ modal เป็น 90% ของหน้าจอ */
      height: 90vh;
      /* ปรับความสูงให้เต็ม 90% ของ viewport */
  }

  .modal-content {
      height: 100%;
      /* ให้ modal-content ขยายเต็ม modal */
  }

  .modal-xl {
      max-width: 95%;
      /* ปรับความกว้างของ modal เป็น 90% ของหน้าจอ */
      height: 95vh;
      /* ปรับความสูงให้เต็ม 90% ของ viewport */
  }

  .modal-md {
      max-width: 85%;
      /* ปรับความกว้างของ modal เป็น 90% ของหน้าจอ */
      height: 85vh;
      /* ปรับความสูงให้เต็ม 90% ของ viewport */
  }

  #faculty-barchart {
      width: 100%;
      min-height: 600px;
      /* ความสูงจริงคุม JS (chart.height) เพื่อให้ขยายได้ตามจำนวนคณะ ไม่ตรึงไว้ที่ 600px */
  }

  #faculty-chart-main {
      width: 100%;
      height: 600px;
      /* หรือ auto ถ้าคุณให้ JS ควบคุม */
      color: #555555 !important;
      fill: #555555 !important;

  }

  h2 {
      text-align: center;
      color: #001B54;
  }

  .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      width: 90%;
      margin: auto;
  }

  .chart-box {
      background: #EAFBFB;
      padding: 10px;
  }

  .title {
      text-align: center;
      font-weight: bold;
      color: #001B54;
      margin-bottom: 10px;
  }

  .card,
  .card-body {
      height: 100%;
      min-height: 100%;
  }

  .modal-bg-two {
      border: 1px solid #cddc39;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
      background-color: #ffffff;
  }


  #obligation-chart-faculty,
  #typefacet-chart-faculty {
      height: 100%;
      min-height: 400px;
      /* หรือกำหนดความสูงคงที่ */
  }

  .active-kpi {
      background-color: #d9edf7;
      color: #31708f;
      border-radius: 4px;
      padding: 5px 10px;
      display: inline-block;
  }

  .active-kpi:hover {
      background-color: #c4e3f3;
  }

  /* KPI list item สีตามสถานะ */
  .kpi-list-item {
      padding: 4px 8px;
      margin-bottom: 3px;
      border-radius: 4px;
      font-size: 11px;
      border-left: 4px solid transparent;
  }

  .kpi-list-item a {
      text-decoration: none !important;
      color: inherit !important;
  }

  .kpi-pass {
      background-color: #71C8C2;
      border-left-color: #5ea9a4;
      color: #616161 !important;
  }

  .kpi-pass a {
      color: #616161 !important;
  }

  .kpi-fail {
      background-color: #F5F5F5;
      border-left-color: #9E9E9E;
      color: #616161 !important;
  }

  .kpi-fail a {
      color: #616161 !important;
  }

  .kpi-na {
      background-color: #F5F5F5;
      border-left-color: #9E9E9E;
      color: #757575 !important;
  }

  .kpi-na a {
      color: #757575 !important;
  }

  /* Remove underscores from Highcharts and set dark grey color */
  .highcharts-root text,
  .highcharts-root tspan,
  .highcharts-axis-labels text,
  .highcharts-axis-labels tspan,
  .highcharts-data-labels text,
  .highcharts-data-labels tspan,
  .highcharts-data-label text,
  .highcharts-data-label tspan,
  .highcharts-drilldown-axis-label,
  .highcharts-drilldown-axis-label span,
  .highcharts-link {
      text-decoration: none !important;
      border-bottom: none !important;
      /* color: #555555 !important;
      fill: #555555 !important; */
  }

  /* Modal Fullscreen (Bootstrap 4 compatible) */
  .modal:has(.modal-fullscreen) {
      padding: 0 !important;
  }

  .modal-fullscreen {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      top: 0 !important;
      left: 0 !important;
  }

  .modal-fullscreen .modal-content {
      width: 100vw !important;
      height: 100vh !important;
      border: 0 !important;
      border-radius: 0 !important;
      overflow-y: auto;
  }

  .modal-fullscreen .modal-body {
      flex: 1 1 auto;
      overflow-y: auto;
      min-height: 0;
      /* จำเป็นสำหรับ flexbox: ถ้าไม่ตั้ง min-height:0 กล่องนี้จะขยายตามเนื้อหาแทนที่จะ scroll ทำให้เนื้อหาส่วนล่าง (เช่นกราฟที่สูงขึ้นตามจำนวนคณะ) โดนบังไม่แสดง */
  }