:root {
  --c-white: #fff;
  --c-black: #1a1a1a;
  --c-darken: #333333;
  --c-dark: #000000;
  --c-grey: #e2e2e2;
  --c-grey-50: #d6d6d6;
  --c-grey-100: #bcbcbc;
  --c-muted: #666666;

  --c-primary: #78a456;
  --c-second: #009dc8;
  --c-tertiary: #174980;

}

body {
  font-family: "Kanit", sans-serif !important;
  font-size: 16px;
}

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

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

a:hover {
  text-decoration: none;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  max-width: 100%;
}

.navbar-header {
  padding: 0.75rem 0rem;
  border-bottom: 8px solid #2E2A4B;
}

.navbar-header .navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
  color: #A01D32 !important;
}

.navbar-header .navbar-nav .nav-link {
  color: #000000 !important;
}

.navbar-header {
  background-color: #fff !important;
}

.navbar-header .navbar-nav {
  margin-left: 36px;
}

.banner-index {
  position: relative;
}

.banner-index .text-banner {
  position: absolute;
  left: 66px;
  bottom: -134px;
}

.btn-second {
  color: #fff !important;
  border-color: #FFC709 !important;
  background-color: #FFC709 !important;
  padding: .375rem 1.75rem !important;
}

.btn-second:active {
  color: #fff;
  border-color: #FFC709;
  background-color: #FFC709;
}

.btn-second:focus {
  box-shadow: 0 0 0 0.25rem rgb(255 199 9 / 50%);
}

.btn-second:hover {
  opacity: 0.8;
  color: #fff;
  border-color: #FFC709;
  background-color: #FFC709;
}

.btn-primary {
  color: #fff !important;
  border-color: #A01D32 !important;
  background-color: #A01D32 !important;
  padding: .375rem 1.75rem !important;
}

.btn-primary:active {
  color: #fff;
  border-color: #A01D32;
  background-color: #A01D32;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 50%);
}

.btn-primary:hover {
  opacity: 0.8;
  color: #fff;
  border-color: #A01D32;
  background-color: #A01D32;
}

.wrap-intro {
  position: relative;
  margin-bottom: 4rem;
}

.intro {
  margin: 3rem 0rem;
  padding: 0 1rem;
}

.intro-content .title {
  font-size: 28px;
  font-weight: bold;
  color: #2D2A4A;
  margin-bottom: 0;
}

.intro-content .subheading {
  font-size: 24px;
  color: #231F20;
}

.intro-content .detail {
  margin-top: 3rem;
}

.intro .text-line {
  color: #A01D32;
  font-size: 20px;
  font-weight: bold;
  float: right;
  margin-top: 4rem;
}

.intro-img img {
  width: 83%;
  margin-left: 92px;
}

.intro-content {
  margin-top: 5rem;
}

.news-all-header .title {
  font-size: 24px;
  color: #231F20;
  font-weight: bold;
}

.news-all .course-content {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.news-all-header .title-small {
  font-size: 18px;
  color: #231F20;
}

.news-all-header .detail-header {
  margin-top: 14px;
}

.course-show img {
  width: 100%;
  margin-bottom: 8px;
}

.course-show .course-title {
  font-size: 22px;
  color: #2D2A4A;
  margin: 0;
}

.course-show .name-lacturer {
  font-size: 18px;
  color: #6D6E71;
  margin-bottom: 0;
}

.course-show .course-show-detail {
  margin-top: 8px;
  color: #231F20;
}

.course-show .btn-primary {
  padding: 4px 22px;
  border-radius: 20px;
}

/* .training-course {
  margin-top: 2rem;
} */

.training-course-header .title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

.training-course-header .subtitle {
  color: #fff;
  margin: 10px 0px;
}

.courses-group {
  border-left: 3px solid #fff;
  padding: 1rem 0;
}

.courses-group .card {
  margin-bottom: 40px;
  background-color: transparent;
  border: none;
}

.courses-group .card .card-body {
  padding: 0;
}

.courses-group .wrap-img {
  padding: 0rem 2rem;
}

.courses-group .wrap-img img {
  width: 100%;
}

.courses-group .card p {
  color: #fff;
  margin-bottom: 0;
  margin-top: 6px;
}

.wrap-all-course .all-course {
  padding: 2rem 6rem;
  background-color: #2D2A4A;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}

.wrap-training-cours .card {
  background-color: transparent;
  border: none;
}

.wrap-training-cours .card img {
  width: 100%;
}

.wrap-training-cours .card p {
  color: #fff;
  margin-bottom: 0;
  margin-top: 6px;
}

.free-trial {
  float: right;
  text-align: right;
  font-size: 36px;
  color: #FFC709;
  font-weight: bold;
  margin-right: -36px;
}

.wrap-all-course {
  padding: 3rem 4rem 10rem 4rem;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%);
  background-color: #A01D32;
}

.course-recommended .course-detail .title-course {
  font-size: 22px;
  color: #fff;
  margin: 0;
}

.course-recommended .course-detail .name-lacturer {
  font-size: 14px;
  color: #fff;
  margin-bottom: 0;
}

.course-recommended .course-detail .detail {
  color: #fff;
  margin-top: 2rem;
}

.btn-white {
  color: #A01D32 !important;
  border-color: #fff !important;
  background-color: #fff !important;
  padding: .275rem 2.75rem !important;
  border-radius: 20px !important;
}

.btn-white:active {
  color: #A01D32;
  border-color: #fff;
  background-color: #fff;
}

.btn-white:focus {
  box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 50%);
}

.btn-white:hover {
  box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 50%);
  color: #A01D32;
  border-color: #fff;
  background-color: #fff;
}

.month {
  color: #fff;
  border-color: #A01D32;
  background-color: #A01D32;
  padding: 0.375rem 1.75rem;
  display: inline-block;
  border-radius: 6px;
  font-size: 20px;
}

.index-table {
  margin-top: -10rem;
  position: relative;
}

.wrap-content {
  margin-bottom: 2rem;
}

.index-table .wrap-content {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.index-table .img-table img {
  width: 100%;
  z-index: 3 !important;
  position: relative;
}

.index-table thead tr {
  border-bottom: 3px solid #A01D32;
}

.index-table tbody tr {
  border-bottom: hidden;
}

.br-custom1 {
  border-left: 3px solid #A01D32;
  border-right: 3px solid #A01D32;
}

.table-content {
  margin-bottom: 5rem;
}

.live-training {
  display: flex;
  align-items: end;
  width: 100%;
  height: 100%;
}

.live-training .tltle {
  font-size: 28px;
  font-weight: bold;
  color: #2D2A4A;
  margin-bottom: 0;
}

.live-training .subtltle {
  font-size: 16px;
  color: #8E9093;
  margin-bottom: 0;
}

.btn-link {
  padding: 0 12px;
  background-color: #A01D32;
  color: #fff;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
  color: #fff;
}

.btn-link:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 25%) !important;
}


.img-top {
  position: absolute;
  left: -212px;
  top: -48px;
  z-index: -1;
}

.img-top img {
  width: 100%;
}

.img-bottom {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.img-bottom img {
  /*  width: 100%; */
  width: 1600px;
}

.splide-test {
  background-color: red;
}

.slide-recommanded {
  margin-top: 1rem;
}

.footer {
  clear: both;
  position: relative;
  background-color: #FFC709;
  padding: 0.5rem 3rem;
  border-top: 8px solid #2E2A4B;
}

.wrap-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrap-footer p {
  margin-bottom: 0;
  color: #2D2A4A;
  font-size: 14px;
}

.wrap-footer .information {
  margin-bottom: 2px;
  font-size: 18px;
}

.logofoot {
  transform: scale(1.5);
}

.member-profile .wrap-content {
  margin: 2rem 0rem;
}

.member-profile .wrap-content .deteail {
  border-radius: 28px;
  border: 4px solid #A11D32;
  padding: 20px;
}

.member-profile .deteail .last-accessed {
  color: #58595B;
  font-size: 14px;
  margin-bottom: 8px;
  display: inherit;
}

.member-profile .deteail p {
  margin-bottom: 0;
}

.member-profile .deteail .menu {
  color: #58595B;
  font-size: 16px;
  margin-top: 16px;
}

.member-profile .img-profile img {
  max-width: 200px;
  max-height: 200px;
  margin: auto !important;
}

.head-coursedescript {
  background-color: #2D2A4A;
  color: #fff;
  padding: 12px 62px;
}

.head-coursedescript h4 {
  margin: 0;
}

.course-description {
  margin: 20px 0px;
}

.course-description .short-detail .detail .heading {
  color: #A01D32;
  margin-bottom: 0px;
}

.course-description .short-detail .detail .subheading {
  color: #231F20;
  border-bottom: 1px solid #bcbcbc;
  width: 300px;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.course-description .long-detail {
  margin: 20px 0px;
}

.course-description .long-detail .list-detail p:first-child {
  color: #A01D32;
  font-size: 16px;
  margin-bottom: 8px;
}

.course-description .long-detail .list-detail p:nth-child(2) {
  color: #231F20;
  border-bottom: 1px solid #bcbcbc;
  padding-bottom: 20px;
}

.create-account {
  background-image: url(../img/bg-main.gif);
  height: 100%;
  background-size: cover;
}

.create-account .form-account {
  padding-left: 4rem;
  padding-top: 4rem;
  padding-right: 4rem;
}

.create-account .form-account .wrap {
  padding: 3rem;
  background-color: #ffffff96;
}

.create-account .form-account .title {
  color: #A01D32;
  margin-bottom: 16px;
}

.create-account .form-account .heading-colum {
  color: #231F20;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-flex-main {
  display: flex;
  margin-bottom: 8px;
  column-gap: 10px;
  align-items: center;
}

.form-flex-main label {
  margin-bottom: 0px;
  width: 100%;
}

.create-account .form-flex-main label {
  margin-bottom: 0px;
  width: 100px;
}

.form-flex-main .form-control {
  border: 1px solid #A01D32;
  border-radius: 20px;
  background-color: #fff0;
  width: 100%;
}

.create-account .form-flex-main .form-control {
  border: 1px solid #A01D32;
  border-radius: 20px;
  background-color: #fff0;
  width: 50%;
}

.create-account .require p {
  color: #58595B;
  line-height: 17px;
  font-size: 15px;
}

.create-account .more-detail .form-flex-main .form-control {
  width: 100%;
}

.create-account .more-detail .form-flex-main label {
  width: 136px;
}

.filter .form-select {
  border: 1px solid #A01D32;
  border-radius: 20px;
  background-color: #fff0;
  margin-bottom: 8px;
  color: grey;
  text-indent: 94px;
}

.color-pm {
  color: #A01D32;
}

.create-account .term {
  text-align: center;
  margin-top: 2rem;
}

.create-account .term .form-check .form-check-input {
  float: none;
  border: 1px solid #A01D32;
}

.btn-cancle {
  background-color: #58595B;
  color: #fff;
}

.btn-cancle:hover {
  opacity: 0.8;
  color: #fff;
  border-color: #58595B;
  background-color: #58595B;
}

.btn-cancle:focus {
  box-shadow: 0 0 0 0.25rem rgb(143 143 154 / 25%);
}

.create-account .form-account .row .col-lg-6:nth-child(2) {
  border-left: 2px solid #A01D32;
}

.form-account .wrap-submit {
  margin-top: 1rem;
}

.about-us .header h4 {
  color: #2D2A4A;
  text-align: center;
  margin-bottom: 16px;
  font-weight: bold;
}

.about-us .how-to p {
  color: #A01D32;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.about-us .how-to .col-lg-4:nth-child(1) {
  border-right: 2px solid #A01D32;

}

.about-us .how-to .col-lg-4:nth-child(2) {
  border-right: 2px solid #A01D32;

}

.change-password .require p {
  color: #58595B;
  line-height: 17px;
  font-size: 15px;
  margin-top: 16px;
}

.change-password .wrap-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.change-password .wrap-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.change-password .wrap-content .form {
  margin: 2rem 0rem;
}

.change-password .form-flex-main .form-control {
  width: 100%;
}

.header-page {
  margin-bottom: 16px;
  text-align: center;
  color: #A01D32;
}

.change-password .form .user {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

.change-password .form .user p {
  margin-bottom: 6px;
}

.change-password .form-flex-main label {
  margin-bottom: 0px;
  width: 260px;
}

.order-registration .header-page {
  margin-top: 20px;
  margin-bottom: 26px;
  text-align: center;
  color: #A01D32;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 50%);
  background-color: #A01D32;
  border: transparent;
}

.btn-primary:active:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 50%);
}

/* .login-page {
} */

.login-page .form-login {
  background-image: url(../img/bg-main.gif);
  height: 100%;
  display: flex;
  align-items: center;
  background-position: center bottom;
  background-size: cover;
  min-height: calc(100vh);
}

.login-page .form-login .wrap {
  max-width: 380px;
  min-width: 380px;
  margin: auto;
}

.form-login .form-flex-main {
  display: inherit;
  margin-bottom: 8px;
  column-gap: 0;
}

.form-login .form-flex-main {
  display: inherit;
  margin-bottom: 8px;
  column-gap: 0;
}

.login-page .form-flex-main .form-control {
  border: 1px solid #ffffff;
  border-radius: 20px;
  background-color: #fff0;
  width: 100%;
  box-shadow: 1px 1px 5px #4b4b4b;
  margin-bottom: 20px;
}

.forgot-pass a {
  display: inherit;
  text-align: center;
  color: #fff !important;
  margin-top: 12px;
  margin-bottom: 12px;
  text-shadow: 1px 1px 5px #4b4b4b;
}

.forgot-pass p {
  text-align: center;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 1px 1px 5px #4b4b4b;
}

.form-login .wrap-submit {
  display: flex;
  column-gap: 8px;
  margin-top: 24px;
}

.form-login .wrap-submit .btn {
  border-radius: 20px;
  width: 50%;
}

.search-box {
  position: relative;
  width: 70%;
}

.search-box input {
  height: 48px;
  text-indent: 0px;
  border: 2px solid #d6d4d4;
  border-radius: 0;
}


.search-box input:focus {
  box-shadow: none;
  border: 2px solid #d6d4d4;
}

.search-box button {
  position: absolute;
  top: 0;
  right: 12px;
  height: 48px;
  background: #BCBEC0;
  border: none;
  border-radius: 0 0;
}

.header-content {
  text-align: center;
  MARGIN: 2rem 0rem;
}

.header-content h3 {
  color: #2D2A4A;
}

.trainning-course .all-course {}

.sidebar .course-list li {
  list-style: none;
  background-color: #F1F2F2;
  padding: 12px;
}

.sidebar .course-list li:hover {
  background-color: #D1D3D4;
}

.sidebar .course-list a {
  font-size: 18px;
  color: #6D6E71;
  width: 100%;
}

.sidebar .course-list .active {
  list-style: none;
  background-color: #D1D3D4;
}

.fiter-tag {
  display: flex;
  margin: 16px 0px 12px;
}

.fiter-tag {
  display: flex;
  margin: 16px 0px 12px;
  column-gap: 6px;
}

.fiter-tag a {
  padding: 2px 16px;
  background-color: #fff;
  color: #58595B;
  border: 2px solid #f1f2f2;
  border-radius: 26px;
}

.fiter-tag .active {
  background-color: #58595B;
  color: #fff;
}

.show-course .card-course .body .title {
  font-weight: bold;
  margin-bottom: 4px;
}

.show-course .card-course .body .narrator {
  color: #6D6E71;
  margin-bottom: 0px;
}

.show-course .card-course .body .price {
  margin-bottom: 4px;
  color: #A01D32;
}

.login-page .form-flex-main {
  position: relative;
}

.login-page .form-flex-main i {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #f2f2f2;
  text-shadow: 1px 1px 5px #4b4b4b;
}

.login-page .form-flex-main input::-webkit-input-placeholder {
  color: #fff;
  text-shadow: 1px 1px 5px #4b4b4b;
}

.trainning-course .wrap-content {
  margin-left: 3rem;
  margin-right: 3rem;
}

.img-banner-index{
  max-height: 100vh;
  object-fit: cover;
}

.banner-index .img-banner-index {
  max-height: 100vh;
  object-fit: cover;
}

.logo-nav img {
  height: 52px;
}

.logofoot img {
  height: 36px;
}

.login-success {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-success .user {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
}

.login-success .user p {
  margin-bottom: 0;
}

.login-success .user .username {
  color: #A01D32;
}

.navbar-toggler {
  border: 1px solid #A01d32;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(160,29,50, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
  box-shadow: none;
}

.filter-inline {
  display: flex !important;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
}

.filter-inline p {
  margin-bottom: 0;
}

.filter-inline .form-select {
  width: 20%;
}

.form-check-input:checked {
  background-color: #A01d32;
  border-color: #A01d32;
}

.form-check-input:focus {
  background-color: #A01d32;
  border-color: #A01d32;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 25%) !important;
}

.filter-inline .form-select {
  border: 1px solid #A01D32;
  border-radius: 20px;
  background-color: #fff0;
  color: grey;
  margin-bottom: 0;
}

.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgb(160 29 50 / 25%) !important;
}

.form-order .title {
  color: #A01d32;
  font-weight: bold;
}

.form-order .main-input {
  margin-bottom: 10px;
}

.main-input .form-control {
  border: 1px solid #A01D32;
  border-radius: 20px;
  background-color: #fff0;
  width: 100%;
}

.source {
  margin-top: 2rem;
}

.source .title {
  color: #A01d32;
  font-weight: bold;
  margin-bottom: 6px;
}

.source .source-wrap {
  display: flex;
  align-items: center;
  column-gap: 20px;
}

.source .source-wrap .form-check p {
  margin-bottom: 0;
}

.source .source-wrap .main-input input {
  width: 135%;
}

.filter-edit .filter .form-select {
  text-indent: 160px;
}

.edit-profile .header-page {
  margin-top: 20px;
  margin-bottom: 26px;
  text-align: center;
  color: #A01D32;
}

.live-course .live-detail {
  text-align: start;
}

.live-course .wrap-content {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.live-course .live-detail .tltle {
  font-size: 28px;
  font-weight: bold;
  color: #2D2A4A;
  margin-bottom: 0;
}

.live-course .live-detail .subtltle {
  font-size: 16px;
  color: #8E9093;
  margin-bottom: 0;
}

.live-detail .detail p {
  margin-top: 22px;
}

.wrap-table .table>:not(caption)>*>* {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 0px !important;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.payment-detail {
  height: 100%;
}

.payment-detail .box-content {
  padding: 1rem;
  border: 1px solid #dfdfdf;
}

.payment-detail .order-detail p {
  color: #414042;
}

.payment-detail .order-detail .wrap-img {
  width: 100%;
  margin: 0px 10px;
}

.payment-detail .order-cost p {
  color: #000000;
  font-weight: bold;
  margin-bottom: 6px;
}

.payment-detail .order-cost .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-detail .order-cost .wrap {
  display: flex;
  column-gap: 6px;
}


.payment-detail .order-summary .box-content:nth-child(2),
.payment-detail .order-summary .box-content:nth-child(3),
.payment-detail .order-summary .box-content:nth-child(4) {
  border-bottom: 0 !important;
}

.payment-summary .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.payment-summary .registered-information p {
  margin-bottom: 0px;
}

.payment-summary {
  padding: 1rem 1rem 4rem 1rem !important;
  margin-bottom: 1rem;
}

.payment-method .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.payment-method .filter-inline {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  column-gap: 20px;
}

.payment-detail .wrap-content {
  padding: 1rem;
  box-shadow: 0px 2px 7px 4px rgba(168, 168, 168, 0.39);
  margin: 3rem 0rem 4rem;
}

.menu-member .wrap {
  text-align: center;
}

.menu-member .wrap p {
  font-weight: bold;
  margin-top: 6px;
}

.menu-member .wrap a:hover {
  color: #a01d32;
}

.accordion .accordion-button {
  background-color: #F1F2F2;
  color: #6D6E71;
  column-gap: 6px;
}

.accordion [aria-expanded="true"] {
  background-color: #D1D3D4;
}

.accordion .accordion-button p {
  margin-bottom: 0;
}

.accordion .accordion-body p {
  margin-bottom: 0;
}

.accordion-body .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table .btn-paid {
  width: 100%;
  color: #019443;
  border-color: #CCCCCC;
}

table .btn-paid:focus {
  box-shadow: 0 0 0 0.25rem rgb(1 148 67 / 25%);
}

.payment-history {
  margin-top: 1rem;
}

.payment-history-detail .btn-cancle {
  background-color: #fff;
  color: #8F8F9A;
  border-color: #CCCCCC;
  width: 100%;
}

.payment-history-detail .btn-cancle:focus {
  box-shadow: 0 0 0 0.25rem rgb(143 143 154 / 25%);
}

.payment-history-detail .title {
  color: #A01D32;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 4px;
}

.payment-history-detail .nav-tabs {
  border-bottom: none;
  margin-bottom: 1.5rem;
}

.payment-history-detail .nav-link {
  color: #918d8d;
}

.payment-history-detail.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #A01D32;
  background-color: #fff;
  border-color: transparent;
  margin: 0;
}

.payment-history-detail .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: transparent;
}

.payment-history-detail .table-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4F535F;
  padding: 1rem 2rem;
}

.payment-history-detail .table-search p {
  margin: 0;
  color: #fff;
}

.payment-history-detail table tr th {
  text-align: center;
}

.payment-history-detail table tr td:first-child {
  text-indent: 10px;
}


.payment-history-detail .search {
  position: relative;
  box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.payment-history-detail .search input {
  height: 60px;
  text-indent: 25px;
}

.payment-history-detail .search .fa-search {
  position: absolute;
  top: 20px;
  left: 16px;
}

.payment-history-detail .page-item.active .page-link {
  background-color: #4F535F;
  border-color: #4F535F;
}

.payment-history-detail .page-link {
  color: #4F535F;
}

.payment-history-detail .page-link:focus {
  box-shadow: none;
}

.pervious-course {
  /*min-height: calc(45vh);*/
}

.pervious-course .wrap-content {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.pervious-course .header {
  text-align: center;
  color: #A01D32;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 16px;
}

.pervious-course .title {
  font-size: 18px;
  margin-bottom: 2px;
  font-weight: bold;
}

.pervious-course .card {
  border: 3px solid #A01D32;
  padding: 8px 14px;
}

.pervious-course .card p {
  margin-bottom: 4px;
}

.pervious-course .card .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pervious-course .card a {
  color: #A01D32;
  text-decoration: underline;
}

.content-manage {
  margin-top: 2rem;
}

.content-manage .sidebar {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.content-manage .sidebar .list-group-item {
  background-color: #949599;
  color: #fff;
  border-radius: 6px;
  width: 70%;
  text-align: center;
}

.content-manage .sidebar .list-group-item.active {
  border-color: #A01D32;
  background-color: #A01D32 !important;
  color: #fff;
}

.btn-manage-cancle {
  background-color: #F84D60;
  color: #fff;
}

.btn-manage-cancle:hover {
  color: #fff;
  opacity: 0.9;
}

.btn-manage-cancle:focus {
  box-shadow: 0 0 0 0.25rem rgb(248 77 96 / 25%);
}

.btn-save {
  background-color: #1BC4BD;
  color: #fff;
}

.btn-save:hover {
  color: #fff;
  opacity: 0.9;
}

.btn-save:focus {
  box-shadow: 0 0 0 0.25rem rgb(27 196 189 / 25%);
}

.btn i {
  margin-right: 6px;
}

.btn-add {
  background-color: #3699FF;
  color: #fff;
}

.btn-add:hover {
  color: #fff;
  opacity: 0.9;
}

.btn-add:focus {
  box-shadow: 0 0 0 0.25rem rgb(54 153 255 / 25%);
}

.content-manage .detail-manage {
  margin-top: 20px;
  border-top: 2px solid #dddddd;
  /* border-left: 2px solid #ededed; */
  padding: 24px 0px;
}

.content-manage .detail-manage .row {
  margin-bottom: 16px;
}

.content-manage .detail-manage .row .form-check {
  margin-top: 8px;
}

.manage-tool {
  display: flex;
  justify-content: space-between;
}

.manage-tool .search {
  position: relative;
  box-shadow: 0 0 40px rgba(51, 51, 51, .1);
  width: 50%;
}

.manage-tool .search input {
  height: auto;
  text-indent: 0px;
  border: 2px solid #d6d4d4;
}


.manage-tool .search input:focus {
  box-shadow: none;
  border: 2px solid #3699FF;
}

.manage-tool .search button {
  position: absolute;
  top: 0;
  right: 0px;
  height: 100%;
  width: 56px;
  background: #3699FF;
  border: none;
  border-radius: 0px 6px 6px 0px;
}

.manage-tool .search button i {
  color: #fff;
}

.footer-table {
  display: flex;
  justify-content: space-between;
}

.table-admin {
  margin-top: 16px;
}

.table-admin thead {
  border-bottom: 2px solid #a9a8a8;
}

.table-admin th {
  color: #8b8b8b;
  font-weight: inherit;
}

.btn-edit {
  background-color: #FFA800;
  color: #fff;
}

.btn-edit:hover {
  color: #fff;
  opacity: 0.9;
}

.btn-edit:focus {
  box-shadow: 0 0 0 0.25rem rgb(255 168 0 / 25%);
}

.count-table {
  color: #818181;
}

.manage-assign-role .wrap-table {
  padding: 1.5rem;
  border-top: 1px solid #adabab;
  margin-top: 1rem;
}

.manage-assign-role .wrap-table .row-detail :nth-child(1) {
  text-indent: 52px;
}

.row-detail .form-check {
  display: flex;
  justify-content: center;
}

.news-all .course-recommanded .row {
  margin-bottom: 12px;
}

.news-all .course-recommanded .title {
  font-size: 20px;
  margin-bottom: 2px;
}

.news-all .course-recommanded .lacturer {
  color: #6D6E71;
  margin-bottom: 12px;
}

.news-all .course-recommanded .date {
  color: #6D6E71;
  margin-bottom: 0px;
}

.activity-log .select-log-group .row-select {
  display: flex;
}

.activity-log .select-log-group .row-select .select:first-child {
  width: 70%;
}

.activity-log .select-log-group .row-select .select:nth-child(2) {
  width: 30%;
}

.activity-log .select-log-group .row-select .select:nth-child(2) {
  display: flex;
  column-gap: 6px;
  align-items: center;
}

.activity-log .select-log-group .row-select .select:nth-child(2) a {
  width: 100%;
}

.activity-log .select-log-group .row-select:nth-child(2) {
  display: flex;
}

.activity-log .select-log-group .row-select:nth-child(2) .select:first-child {
  width: 30%;
}

.activity-log .select-log-group .row-select:nth-child(2) .select {
  width: 20%;
  display: flex;
  align-items: center;
}

.btn-csv {
  background-color: #CFD4DA;
  color: rgb(0, 0, 0);
}

.btn-csv:hover {
  color: rgb(0, 0, 0);
  opacity: 0.9;
}

.btn-csv:focus {
  box-shadow: 0 0 0 0.25rem rgba(168, 166, 168, 0.25);
}

.select-csv i {
  color: #018297;
}

.more-log span {
  color: #0d6efd;
}

.text-sc {
  color: #009dc8 !important;
}

.activity-log .panigation nav {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.wrap-table-admin {
  border-top: 1px solid #dddddd;
}

.user-admin {
  min-height: calc(45vh);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0 !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: transparent !important;
  margin: 0 !important;
  background: none !important;
}

.accordion-button:focus {
  box-shadow: none !important;
}

.breadcrumb-item.active {
  color: #A01D32;
}

.breadcrumb-item a:hover {
  color: #A01D32;
}

.payment-history .breadcrumb {
  margin-bottom: 2rem;
}

.table tr:hover {
  background-color: #f6f6f6;
}

.hide {
  display: none;
}

.dataTables_paginate .pagination {
  justify-content: end;
}

.accordion-body{
  border-bottom: 1px solid #ddd;
}

.accordion-button:not(.collapsed)::after{
  filter: grayscale(1);
}

.manage-assign-role .wrap-table{
  box-shadow: -1px 5px 10px rgb(0 0 0 / 20%);
}

.detail-side{
  margin-bottom: 2rem;
}