/* 
  ********** Add on CSS **********
*/

/* Embed Thai Font */
@import url('/fonts/db-heavent/db-heavent-stylesheet.css');
/* Embed English Font */
@import url('/fonts/galatea/galatea-stylesheet.css');

/* Variable */
:root {
  --primary-ci-font: 'DB Heavent','Galatea', 'Helvetica Neue', Arial, sans-serif;
  --secondary-ci-font: 'Galatea', 'DB Heavent','Helvetica Neue', Arial, sans-serif;

  --primary-ci-color-120: #C47C11;            /* Primary Value Up         */
  --primary-ci-color-110: #D99114;            /* Primary Value Up         */
  --primary-ci-color-100: #E3A622;            /* Primary                  */
  --primary-ci-color-rgb-120: 196, 124, 17;     /* Primary RGB Value Up     */
  --primary-ci-color-rgb-110: 217, 145, 20;     /* Primary RGB Value Up     */
  --primary-ci-color-rgb-100: 227, 166, 34;     /* Primary RGB              */

  --secondary-ci-color-100: #1B1E2C;          /* Secondary                */
  --secondary-ci-color-rgb-100: 27, 30, 44;     /* Secondary RGB            */
}

/* 
  ********** Thai Font **********
*/
.db-heavent-font {
  font-family: var(--primary-ci-font);
  font-size: 1.6rem;
  line-height: 0.9;
  color: var(--secondary-ci-color-100);

  p {
    line-height: normal;
  }

  .nav_primary {
    li {
      a {
        font-size: 24px;
      }
    }
  }

  .nav_secondary {
    li,
    li a {
      font-size: 22px;
    }
  }

  .controler.lock {
    .nav_secondary {
      li,
      li a {
        font-size: 22px;
      }
    }
  }
}

/* 
  ********** English Font **********
*/
.galatea-font {
  font-family: var(--secondary-ci-font);

  .nav_primary {
    li {
      @media (min-width: 1080px) {
        margin-left: 25px;
      }
    }
  }
}

/* 
  ********** Both Font **********
*/
.galatea-font,
.db-heavent-font {
  h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
  }

  a {
    color: var(--primary-ci-color-100);
  }

  .sidenav {
    .sub_category {
      a {
        color: var(--secondary-ci-color-100);

        &:hover,
        &.active {
          color: var(--primary-ci-color-100);
        }
      }
    }
  }

  .nav_primary {
    li {
      a {
        color: var(--secondary-ci-color-100);

        &.lv_1:after {
          background: var(--primary-ci-color-100);
          color: var(--secondary-ci-color-100);
        }

        &:hover {
          color: var(--primary-ci-color-100);
        }

        h6 {
          font-weight: 500;
        }
      }
    }
  }

  .list_card {
    h3 {
      border-bottom: 3px solid var(--primary-ci-color-100);
    }
  }

  .random_square {
    .permalink {
      span {
        color: var(--primary-ci-color-100);
      }
    }
  }

  .page_footer {
    a {
      color: var(--secondary-ci-color-100);
    }
  }

  .footer_title {
    h3 {
      background: var(--primary-ci-color-100);
    }
  }

  .bg_yellow {
    background: var(--primary-ci-color-100);
  }

  .t_yellow {
    color: var(--primary-ci-color-100);
  }

  .f_yellow {
    color: var(--primary-ci-color-100);
  }

  .paging {
    a {
      &:hover,
      &.active {
        background: var(--primary-ci-color-100);
      }
    }
  }

  ::selection {
    background: var(--primary-ci-color-100);
    color: var(--secondary-ci-color-100);
  }

  *[class^=btn] {
    background: var(--secondary-ci-color-100);
    color: var(--primary-ci-color-100);
  }

  *[class^=title_line]:after {
    background: var(--primary-ci-color-100);
  }
}