:root {
  --color-base: #FFFFFF;
  --color-hover-base: #af0000;
  --color-bg-base: #141414;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 20px;
}

body {
  font-family: 'Roboto', 'IBM Plex Sans Thai', sans-serif;
  background-color: var(--color-bg-base);
  color: var(--color-base);
}

a {
  color: var(--color-base);
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul>li {
  margin: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font: inherit;
  margin: 0;
}

button:active {
  background-color: var(--color-hover-base);
}

::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: var(--color-base);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-hover-base);
  border-radius: 2px;
  /* border: 1px solid #f1f1f1; */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

@media (min-width:768px) {
  .container {
    width: 98%;
  }
}

@media (min-width:992px) {
  .container {
    width: 970px
  }
}

@media (min-width:1200px) {
  .container {
    width: 1170px
  }
}

.breadcrumb {
  font-size: 10pt;
  font-weight: 300;
}

.breadcrumb li {
  position: relative;
  display: inline-block;
}

.breadcrumb li::after {
  content: '/';
  color: #bdbdbd;
  margin-right: 10px;
}

.breadcrumb li:last-child::after {
  display: none;
}

.breadcrumb li a {
  margin-right: 10px;
}

.breadcrumb li.active {
  color: #bdbdbd;
}

.owl-theme .owl-dots .owl-dot span {
  border-radius: 0 !important;
  margin: 5px 2px !important;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--color-hover-base) !important;
  border-radius: 0 !important;
}

.owl-theme .owl-nav.disabled+.owl-dots {
  text-align: end !important;
}

.owl-theme .owl-dots .owl-dot span {
  width: 20px !important;
  height: 3px !important;
}

.course {
  padding: 60px 0;
}

.course h3 {
  font-size: 18pt;
  font-weight: 400;
  margin-bottom: 30px;
}

.list-items .items-course {
  position: relative;
}

.list-items .items-course img {
  height: 300px;
  object-fit: cover;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  .list-items .items-course img {
    height: 350px;
  }
}

@media screen and (max-width: 440px) {
  .list-items .items-course img {
    height: 250px;
  }
}

.processbar {
  width: 100%;
  height: 4px;
  background-color: var(--color-base);
  position: absolute;
  bottom: 0px;
}

.bar-number {
  height: 4px;
  background-color: var(--color-hover-base);
  position: absolute;
  bottom: 0;
}