* {
  font-family: 'Kanit' !important;
}

html {
  scroll-behavior: smooth;
}

.navbar-light .navbar-nav .nav-link {
  color: #333 !important;
  font-family: 'Kanit' !important;
  font-weight: 500 !important;
  /* font-size: 16px !important; */
  line-height: 16px;
  transition: color 0.5s;
}

.navbar-light .navbar-nav:hover .nav-link:hover {
  color: #ff8200 !important;
  text-decoration: none;
  background-position: 0 100%;
  transition: color 0.5s;
}

.navbar-brand img[src="../GHBWebAsset/images/logo_w.png"] {
  padding: 10px 0;
}

.navbar-nav {
  /* bottom: 15px;
  left: 240px;
  position: absolute; */
}

.nav-item {
  position: relative;
}

/* .nav-item svg{
  color: #ff8200;
  font-size: 26px;
  margin: 0 12px;
} */
.custom_right li a svg {
  color: #ff8200;
  font-size: 26px;
  margin: 0 12px;
  /* transition: color 1s; */
}

.custom_right li:hover a svg {
  /* transition: color 1s; */
  transform: scale(1.5);
}

.nav-item strong {
  color: black;
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  z-index: 1;
  /* background-color: #ffffffc2; */
  background-color: #ffffff;
  border-radius: 50%;
  padding: 1px 7px;
  text-align: center;
}

.table {
  background-color: #fff;
  margin-bottom: 0;
}

.table td,
.table th {
  padding: 1.5rem .75rem !important;
  vertical-align: middle !important;
}

.table .thead-dark th {
  background-color: #333;
  font-weight: 300;
}

.table_footer,
.table_footer:hover {
  background-color: #333 !important;
  font-weight: 300 !important;
  color: #fff !important;
}

.table_footer:hover td,
.table_footer td {
  border-color: #333 !important;
}

.table .small_icon {
  padding: 10px 0px 0px 0px !important;
}

.table .small_icon svg {
  font-size: 1.4rem;
}

.table .small_icon p {
  font-size: 0.8rem;
}

.table .small_icon a {
  color: #079c9c;
  text-decoration: none;
}

.table .small_icon:hover svg,
.table .small_icon:hover a {
  color: #ff8200;
  text-decoration: none;
}

.redream {
  left: 24px;
  top: 14px;
}

.messagebox {
  left: 30px;
  top: 14px;
}

.livealert {
  left: 30px;
  top: 14px;
}

.userprofile {
  left: 30px;
  top: 14px;
}

.btn-search {
  color: #fff;
  background-color: #296162;
  border-color: #296162;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: 10px;
}

.btn-search:hover {
  color: #fff;
  background-color: #ff8200;
  border-color: #ff8200;
}

/******************** section_search **************************/
.search {
  background-color: #f8f8fa;
}

/******************** shourtcut_icon **************************/
/*
.shourtcut_icon {
  border-top-right-radius: 30px;
  box-shadow: 0px -7px 0px #ededed inset;
  padding-left: 8px;
  overflow: hidden;
  background: linear-gradient(to right, #ff8200, #ff8200 50%, #f5f5f5 50%);
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position, box-shadow 275ms ease;
}

.shourtcut_icon a {
  color: #656565;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 58px;
  height: 67px;
  padding-left: 75px;
  vertical-align: middle;
  display: table-cell;
}

.shourtcut_icon:hover {
  background-position: 0 100%;
  box-shadow: 0px -7px 0px #f46c01 inset;
}

.shourtcut_icon:hover a {
  color: #fff;
}

*/

.shourtcut_icon {
  border-top-right-radius: 30px;
  box-shadow: 0px -7px 0px #ededed inset;
  padding-left: 8px;
  overflow: hidden;
  background: linear-gradient(to right, #ff8200, #ff8200 50%, #f5f5f5 50%);
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position, box-shadow 275ms ease;
  display: block;
  text-decoration: none;
}

.shourtcut_icon div {
  color: #656565;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 58px;
  height: 67px;
  width: 100%;
  padding-left: 75px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* color: #656565;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 58px;
  height: 67px;
  padding-left: 75px;
  vertical-align: middle;
  display: table-cell; */
}

.shourtcut_icon:hover {
  background-position: 0 100%;
  box-shadow: 0px -7px 0px #f46c01 inset;
  text-decoration: none;
}

.shourtcut_icon:hover div {
  color: #fff;
}

/******************** footer **************************/
.footer {
  background-image: url(../../GHBWebAsset/images/bg_footer_orange.png);
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.footer .logo {
  max-width: 225px;
  width: 100%;
  margin-top: 0px;
  /* margin-left: auto;
  margin-right: auto;
  display: block; */
}

.footer h3 {
  color: #fff;
}

.footer h6 {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 0.9rem;
}

.footer ul {
  margin-bottom: 0;
}

.footer ul li,
.footer ul li a {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
}

.footer ul li a {
  text-decoration: none;
  transition: color 0.5s;
}

.footer ul li a:hover {
  color: #333;
}

.footer a svg {
  color: #fff;
  font-size: 1.7rem;
  text-decoration: none;
  transition: color 0.5s;
  margin: 0 5px;
}

.footer a:hover svg {
  color: #333;
  transition: color 0.5s;
}

.license {
  background-image: url(../../GHBWebAsset/images/bg_footer_black.png);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  padding: 10px;
}

.gotop {
  position: fixed;
  z-index: 10;
  bottom: 60px;
  right: 13px;
}

.gotop svg {
  font-size: 3rem;
  color:#dadada;
}
.gotop:hover svg {
  font-size: 3rem;
  color: #333;
}

/******************** text_header **************************/
.text_header_left_green_border_bottom {
  color: #079c9c;
  border-bottom: 2px solid #ededed;
}

.text_header_left_orange {
  color: #ff8200;
}

.text_header_center_orange {
  color: #ff8200;
  text-align: center;
}

.text_header_left_green {
  color: #079c9c;
}

.text_header_left_white {
  color: #fff;
}

/******************** pic_animate **************************/
.pic_animate {
  overflow: hidden;
}

.pic_animate img {
  width: 100%;
}

@keyframes zoom1 {
  0% {
    transform: scale(1);
  }

  /* 50% {
    transform: scale(1.4);
  } */

  100% {
    transform: scale(1.5);
  }
}

@keyframes zoom2 {
  0% {
    transform: translate(0, 0);
  }

  30% {
    transform: translate(0px, -5px);
  }

  60% {
    transform: translate(0px, 5px);
  }
}

@keyframes rotate1 {
  0% {
    transform: rotateZ(0);
  }

  40% {
    transform: rotateZ(3deg);
  }

  /* 60% {
    transform: rotateZ(-3deg);
  } */
}


@keyframes opacity1 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: .7;
  }
}

/******************** my class **************************/
.myclass {
  background-color: #f7f7f7;
  width: 100%;
}

.card_myclass img {
  max-width: 312px;
}

.card_myclass:hover .pic_animate img {
  animation: zoom1 0.5s infinite;
  animation-direction: alternate;
}

.card_myclass img {
  max-width: 312px;
}

.myclass h4 {
  color: #079c9c;
}

.card_myclass:hover h4 {
  color: #ff8200;
}

.myclass ul {
  margin-left: 0;
  padding-left: 0;
}

.myclass li {
  list-style: none;
}

.myclass li a {
  list-style: none;
  color: #333;
}

.myclass li a:hover {
  color: #079c9c;
  text-decoration: none;
}

.myclass li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7rem;
  content: "\f45c";
  color: #079c9c;
  padding-right: 10px;
}

/******************** small_banner **************************/

.small_banner a:hover .pic_animate img {
  animation: opacity1 0.5s infinite;
  animation-direction: alternate;
}

/******************** tab_green **************************/
.tab_green {
  background-image: url(../../GHBWebAsset/images/bg_menu_green.jpg);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.tab_green a {
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
  text-decoration: none;
  transition: color .5s ease;
}

.tab_green a:hover,
.tab_green .active {
  color: #ff8200;
}

/******************** tab_black **************************/
.tab_black {
  background-image: url(../../GHBWebAsset/images/bg_menu_black.jpg);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.tab_black p,
.tab_black a {
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
  text-decoration: none;
  transition: color .5s ease;
  margin: 0;
}

.tab_black a:hover,
.tab_black .active {
  color: #ff8200;
}

/******************** all button **************************/
.readmore {
  color: #fff;
  text-decoration: none;
  transition: color 0.5s ease;
  padding: 3px 10px;
  background-color: #ff8200;
  transition: color, background-color .5s ease;
}

.readmore:hover {
  color: #fff;
  text-decoration: none;
  background-color: #333;
}

.readmore_text {
  color: #ff8200;
  text-decoration: none;
  transition: color 0.5s ease;
  /* padding: 3px 10px; */
  /* background-color: #ff8200; */
  transition: color, background-color .5s ease;
}

.readmore_text:hover {
  color: #333;
  text-decoration: none;
  /* background-color: #333; */
}

.signincourse {
  text-align: center;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  font-size: 1.5rem;
  transition: color, background-color .5s ease;
}

.signincourse:hover {
  color: #fff;
  text-decoration: none;
  background-color: #079c9c;
}

.signintest {
  text-align: center;
  background-color: #005f5f;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  font-size: 1.5rem;
  transition: color, background-color .5s ease;
}

.signintest:hover {
  color: #fff;
  text-decoration: none;
  background-color: #333;
}

.readmore_coursepage {
  background-color: #333;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 4px 35px;
  font-size: 1.5rem;
  transition: color, background-color .5s ease;
}

.readmore_coursepage:hover {
  color: #fff;
  text-decoration: none;
  background-color: #005f5f;

}

/******************** section courses **************************/
.courses {
  background-color: #f7f7f7;
  width: 100%;
}

.card_courses {
  background-color: #fff;
  padding-bottom: 3px;
  box-shadow: 10px 10px 0px #e7e7e7;
  border: 1px solid #e7e7e7;
}

.card_courses h5 {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  color: #296162;
  overflow: hidden;
  overflow-wrap: break-word;
  height: 70px;
}

.card_courses p {
  overflow: hidden;
  height: 125px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #333;
}

.card_courses:hover .pic_animate img {
  animation: zoom1 0.5s infinite;
  animation-direction: alternate;
}

/******************** section blog **************************/
.blog {
  background-color: #f3f3f3;
  width: 100%;
}

.card_blog:hover .pic_animate img {
  animation: zoom1 0.5s infinite;
  animation-direction: alternate;
}

/******************** page current class **************************/
.current_course h4 {
  color: #079c9c;
  text-align: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 0;
  background-color: #ffffff;
}

.card_current_course {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 10px 10px 0px #ddd;
}

.bg_row:nth-child(odd) {
  background-color: #f7f7f7;
}

.bg_row:nth-child(even) {
  background-color: #fff;
}

.block:hover .card_current_course .pic_animate img {
  animation: zoom1 0.5s infinite;
  animation-direction: alternate;
}

.myperformance {
  background-color: #dbe2e2;
}

.myperformance .table .fa-circle {
  font-size: 0.8rem;
}

/******************** page my test **************************/
.mytest {
  background-color: #f7f7f7;
  width: 100%;
}

.card_mytest {
  background-color: #fff;
  box-shadow: 10px 10px 0px #e7e7e7;
  border: 1px solid #e7e7e7;
}

.card_mytest h5 {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  color: #296162;
  overflow: hidden;
  overflow-wrap: break-word;
  height: 120px;
}

.card_mytest p {
  overflow: hidden;
  height: 125px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #333;
}

.card_mytest:hover .pic_animate img {
  animation: opacity1 0.5s infinite;
  animation-direction: alternate;
}

.bg_card_gray {
  background-color: #f7f7f7;
}