/*
Theme Name: Flatsome Child
Theme URI: https://flatsomechild.local
Description: Child theme for Flatsome
Author: Your Name
Author URI: https://yourwebsite.local
Template: flatsome
Version: 1.0.0
*/





/* --- Base Classes (Desktop) --- */
.w-5 { flex-basis: 5% !important; max-width: 5% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-10 { flex-basis: 10% !important; max-width: 10% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-20 { flex-basis: 20% !important; max-width: 20% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-22 { flex-basis: 22% !important; max-width: 22% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-25 { flex-basis: 25% !important; max-width: 25% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-30 { flex-basis: 30% !important; max-width: 30% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-33 { flex-basis: 33% !important; max-width: 33% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-40 { flex-basis: 40% !important; max-width: 40% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-50 { flex-basis: 50% !important; max-width: 50% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-66 { flex-basis: 66% !important; max-width: 66% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-75 { flex-basis: 75% !important; max-width: 75% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-85 { flex-basis: 85% !important; max-width: 85% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }
.w-100 { flex-basis: 100% !important; max-width: 100% !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; }

/* --- Tablet (768px - 1024px) --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .w-5, .w-10, .w-20, .w-22, .w-25, .w-30, .w-33, .w-40, .w-50, .w-66, .w-75, .w-85, .w-100 {
    flex-basis: 40% !important;
    max-width: 40% !important;
  }
}

/* --- Mobile (Dưới 768px) --- */
@media only screen and (max-width: 768px) {
  .w-5, .w-10, .w-20, .w-22, .w-25, .w-30, .w-33, .w-40, .w-50, .w-66, .w-75, .w-85, .w-100 {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}


.border2 {
    border-radius: 0.5rem;
    overflow: hidden;
}

.border4 {
    border-radius: 1rem;
    overflow: hidden;
}





.slider-btn .slider .flickity-button {
    top: 35%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
    color: var(--primary-color);
    opacity: 1 !important;
}

.slider-btn .slider .flickity-button svg {
    fill: var(--primary-color) !important;
    color: var(--primary-color) !important;
    width: 40px;
    height: 40px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.slider-btn .slider .flickity-button svg path {
    fill: var(--primary-color) !important;
}


/* slider-commit */

.slider-commit {
    height: 85px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slider-commit .img {
    height: 85px;
    flex-shrink: 0;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-commit .img img {
    max-height: 100%;
    width: auto;
}

.slider-commit.slider-even .img {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}





/* slider-mb */

@media only screen and (max-width: 768px) {
    .slider-mb .w-85 {
        flex-basis: 85% !important;
        max-width: 85% !important;
    }
}



/* Home Banner */
.home-banner .row-banner {
  /* Media query cho row-banner */
}

@media only screen and (max-width: 768px) {
  .home-banner .row-banner {
    max-width: 100% !important;
  }
}

.home-banner .list-member .img {
  width: auto !important;
}

.home-banner .list-member .img:nth-child(n+2) {
  margin-left: -15px !important;
}

.home-banner .list-member .img img {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  border: 2px solid var(--primary-color);
  overflow: hidden;
  object-fit: cover;
}

.home-banner .list-number {
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.home-banner .list-number > * {
  --stack-gap: 0 !important;
}

.home-banner .list-number .txt-number {
  gap: 10px;
}

/* Home Stori */
.home-stori .list-stori .stori-item > .col-inner {
  border: 1px solid #EAA2A0;
}

.home-stori .list-stori .stori-item .box-stori {
  position: relative; /* Thêm để pseudo-element ::before hoạt động đúng */
}


.home-stori .box-stori .icon-box-text {
	display: block !important;
}

.home-stori .list-stori .stori-item .box-stori::before {
  content: '';
  position: absolute;
  top: 0;
  right: 30px;
  width: 50px;
  height: 50px;
  background-image: url(/khoahoc630/wp-content/uploads/2026/03/story.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.home-stori .list-stori .stori-item .box-stori .icon-box-img {
  height: 70px;
  border-radius: 100%;
  overflow: hidden;
}

.home-stori .list-stori .stori-item .box-stori .icon-box-img .icon {
  height: 100%;
}

.home-stori .list-stori .stori-item .box-stori .icon-box-img .icon .icon-inner {
  height: 100%;
}

.home-stori .list-stori .stori-item .box-stori .icon-box-img .icon .icon-inner img {
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-stori .list-stori .stori-item .desc {
  font-size: 15px;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
}

.home-stori .list-stori .stori-item .video {
  margin-top: 20px;
}

/* Home Course */
.home-course .slider-btn .slider .flickity-button {
  top: auto;
  bottom: -12%;
}

@media only screen and (max-width: 768px) {
  .home-course .slider-btn .slider .flickity-button {
    display: block;
  }
}

.home-course .slider-btn .slider .flickity-button.previous {
  left: 45%;
}

@media only screen and (max-width: 768px) {
  .home-course .slider-btn .slider .flickity-button.previous {
    left: 35%;
  }
}

.home-course .slider-btn .slider .flickity-button.next {
  right: 45%;
}

@media only screen and (max-width: 768px) {
  .home-course .slider-btn .slider .flickity-button.next {
    right: 35%;
  }
}

.home-course .box-course {
  background-color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  overflow: hidden;
}

.home-course .box-course .box-image {
  border-radius: 10px;
}

.home-course .box-course .box-text {
  padding: 20px 0 0;
  position: relative; /* Thêm để tag tuyệt đối hoạt động */
}

.home-course .box-course .box-text .tag {
  position: absolute;
  top: -85%;
  right: 3%;
}

.home-course .box-course .box-text .tag .tag-txt {
  font-size: 12px;
  background: var(--primary-color);
  padding: 3px 10px;
  border-radius: 100px;
}

.home-course .box-course .box-text .feedback svg {
  width: 16px;
  height: 16px;
}

.home-course .box-course .box-text .feedback span {
  color: #364153;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 7px;
}

/* Home Teacher */
.home-teacher {
  position: relative; /* Thêm cho pseudo-element */
}

.home-teacher::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 3%;
  width: 92px;
  height: 96px;
  background-image: url(../images/story.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.home-teacher .box-policy {
  border: 1px solid #FF6A58;
  border-radius: 10px;
  padding: 12px 16px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}


.home-teacher .box-policy .icon-box-text {
	display: block !important;
}

.home-teacher .box-policy:hover {
  cursor: pointer;
  transform: scale(1.09);
  transition: all 0.2s ease-in-out;
  background: linear-gradient(
	90deg,
	#ff4a3f 0%,
	#ea3b34 40%,
	#c62828 70%,
	#8e1f1f 100%
);
  box-shadow: 0 0 6.301px 0 rgba(148, 16, 0, 0.20), 0 0 22.054px 0 rgba(255, 106, 88, 0.30);
}

@media only screen and (max-width: 768px) {
  .home-teacher .box-policy:hover {
    transform: scale(1.025);
  }
}

.home-teacher .box-policy .icon-box-img {
  height: 55px;
  background: var(--primary-color);
  border-radius: 100%;
  padding: 15px;
}

.home-teacher .box-policy .icon-box-img img {
  padding: 0;
}

/* Home Learn */
.home-learn .box-learn {
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  padding: 12px 16px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.home-learn .box-learn:hover {
  cursor: pointer;
}

.home-learn .box-learn .icon-box-img {
  height: 55px;
  background: var(--primary-color);
  border-radius: 100%;
  padding: 15px;
}

.home-learn .box-learn .icon-box-img img {
  padding: 0;
}

.home-learn .img-learn {
  position: absolute;
  bottom: 0;
  right: 3%;
}

.home-learn .img-learn img {
  object-fit: cover;
}

/* Home Blog */
.home-blog .box {
  padding: 4px;
  border-radius: 20px;
  border: 1px solid #E4E4E4;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
}

.home-blog .box .box-image {
  border-radius: 16px;
  border: 1px solid #E4E4E4;
}

.home-blog .box .box-text {
  padding: 12px;
}

.home-blog .box .box-text .box-text-inner .cat-label {
  font-size: 12px;
  color: #141219;
  text-transform: none;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
}

.home-blog .box .box-text .box-text-inner .post-title a {
  height: 43px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
}

@media only screen and (max-width: 768px) {
  .home-blog .box .box-text .box-text-inner .post-title a {
    font-size: 22px;
    height: auto;
  }
}

.home-blog .box .box-text .box-text-inner .post-meta {
  font-size: 14px;
  color: #141219;
}

.home-blog .box .box-text .box-text-inner .is-divider {
  display: none;
}



/* Gốc của class .button */
.button {
  box-shadow: none !important;
}

/* --- .button.btn-link --- */
.button.btn-link span {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  text-transform: capitalize;
}

.button.btn-link i {
  color: var(--primary-color);
  background: #fff;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 8px;
}

/* --- .button.btn-course --- */
.button.btn-course {
  background: #fff;
  border: 1px solid var(--primary-color);
}

.button.btn-course span {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: var(--primary-color);
  text-transform: capitalize;
}

.button.btn-course i {
  color: #fff;
  background: var(--primary-color);
  padding: 5px 10px;
  border-radius: 8px;
}

@media only screen and (max-width: 768px) {
  .button.btn-course {
    width: 100%;
  }
}

/* --- .button.btn-about --- */
.button.btn-about {
  background: var(--primary-color);
}

.button.btn-about span {
  font-size: 16px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: -0.15px;
  color: #fff;
  text-transform: capitalize;
}

.button.btn-about i {
  color: #fff;
  background: var(--primary-color);
  padding: 5px 10px;
  border-radius: 99px;
}

@media only screen and (max-width: 768px) {
  .button.btn-about {
    width: 100%;
  }
}

/* --- .button.btn-dis --- */
.button.btn-dis {
  background: #fff;
}

.button.btn-dis span {
  font-weight: 400;
  color: var(--primary-color);
}

.button.btn-dis i {
  color: var(--primary-color);
}

/* --- .button.btn-blog --- */
.button.btn-blog span {
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
  color: #000D29;
  letter-spacing: 0;
  border-bottom: 2px solid #000D29;
}

/* --- .btn-submit --- */
.btn-submit p input {
  font-weight: 600;
  line-height: 18px;
  text-transform: capitalize;
  border-radius: 10px;
  background: #D54541;
  color: #fff;
  height: 48px;
  width: 100%;
}

/* --- Slider Button --- */
.slider-btn .slider .flickity-button {
  top: 35%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  justify-content: center;
  color: var(--primary-color);
  opacity: 1 !important;
}

.slider-btn .slider .flickity-button svg {
  fill: var(--primary-color) !important;
  color: var(--primary-color) !important;
  width: 40px;
  height: 40px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.slider-btn .slider .flickity-button svg path {
  fill: var(--primary-color) !important;
}

/* --- Slider Commit --- */
.slider-commit {
  height: 85px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slider-commit .img {
  height: 85px;
  flex-shrink: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-commit .img img {
  max-height: 100%;
  width: auto;
}

/* Trường hợp .slider-commit có thêm class .slider-even */
.slider-commit.slider-even .img {
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Slider Mobile --- */
/* Media query cho class .w-85 nằm trong .slider-mb */
@media only screen and (max-width: 768px) {
  .slider-mb .w-85 {
    flex-basis: 85% !important;
    max-width: 85% !important;
  }
}




/* --- Title None & Noun --- */
.title-none.noun .section-title .section-title-main {
  text-transform: none;
}

.title-none .section-title {
  border: none;
}

.title-none .section-title.section-title-center {
  justify-content: center;
}

.title-none .section-title b {
  display: none;
}

.title-none .section-title .section-title-main {
  border: none;
  margin: 0;
}

/* --- Text Left --- */
.txt-left .section-title {
  text-align: left;
}

/* --- Title BR (Mobile) --- */
@media only screen and (max-width: 768px) {
  .titlebr br {
    display: none;
  }
}

/* --- Title Text --- */
.title-txt .section-title .section-title-main {
  font-size: 38px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.36px;
}

/* --- Title Banner --- */
.title-banner .section-title .section-title-main {
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.36px;
}

@media only screen and (max-width: 768px) {
  .title-banner .section-title .section-title-main {
    font-size: 20px;
  }
}

/* --- Title Page --- */
.title-page .section-title .section-title-main {
  font-size: 32px;
  font-weight: 700;
  line-height: 140%;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 768px) {
  .title-page .section-title .section-title-main {
    font-size: 28px;
  }
}

/* --- Title Head --- */
.title-head .section-title .section-title-main {
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  margin: 0;
  padding: 0;
}

/* --- Title Form --- */
.title-form .section-title .section-title-main {
  font-size: 28px;
  font-weight: 700;
  line-height: 130%;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 768px) {
  .title-form .section-title .section-title-main {
    font-size: 20px;
  }
}

/* --- Title Footer --- */
.title-ft .section-title .section-title-main {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
}

/* --- Section Title General --- */

.sec-title {
	padding: 0;
}

.sec-title .section-title .section-title-main {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  margin: 0;
  padding: 0;
}

/* --- Title Course --- */
.title-course .section-title .section-title-main {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* --- Title Mission --- */
.title-mission .section-title .section-title-main {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}

/* --- Title Mentor --- */
.title-mentor .section-title .section-title-main {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}




/*Animation*/
@keyframes floatUpDown {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
    100% {
      transform: translateY(0);
    }
  }





.slider-mentor .w-22:nth-child(even) .box-mentor {
    margin-top: 30px
}

.slider-mentor .w-22:nth-child(even) .box-mentor .box-image {
    background: #e2a9a3;
    overflow: hidden;
    -webkit-clip-path: path("M0,0 Q130, 46 274, 0 L277, 265 Q137, 300 0, 265 Z");
    clip-path: path("M0,0 Q130, 46 274, 0 L277, 265 Q137, 300 0, 265 Z")
}

@media only screen and (max-width: 768px) {
    .slider-mentor .w-22:nth-child(even) .box-mentor .box-image {
        -webkit-clip-path:path("M0,0 Q130, 37 345, 0 L345, 345 Q137, 377 0, 345 Z");
        clip-path: path("M0,0 Q130, 37 345, 0 L345, 345 Q137, 377 0, 345 Z")
    }
}

.slider-mentor .w-22:nth-child(odd) .box-mentor .box-image {
    background: #d2e6f5;
    -webkit-clip-path: path("M0,30 Q130, -26 274, 30 L277, 295 Q130, 245 0, 295 Z");
    clip-path: path("M0,30 Q130, -26 274, 30 L277, 295 Q130, 245 0, 295 Z")
}

@media only screen and (max-width: 768px) {
    .slider-mentor .w-22:nth-child(odd) .box-mentor .box-image {
        -webkit-clip-path:path("M0,30 Q130, -26 330, 30 L330, 368 Q130, 310 0, 368 Z");
        clip-path: path("M0,30 Q130, -26 330, 30 L330, 368 Q130, 310 0, 368 Z")
    }
}









@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .slider-mb .slider .flickity-button {
        display: block;
        top: auto;
        bottom: -15%;
    }

    .slider-mb .slider .flickity-button.previous {
        left: 35%;
    }

    .slider-mb .slider .flickity-button.next {
        right: 35%;
    }


    .slider-mentor .flickity-button.previous {
        left: 35%;
    }

    .slider-mentor .flickity-button.next {
        right: 35%;
    }


    .program-why .slider-mb .slider .flickity-button {
        bottom: -10%;
    }

    .slider-route .slider .flickity-button {
        bottom: -15%;
        display: block;
        top: auto;
    }

    .slider-route .flickity-button.previous {
        left: 35%;
    }
    
    .slider-route .flickity-button.next {
        right: 35%;
    }

    .list-menu-mb {
        display: grid !important;
        grid-template-columns: 2fr 2fr;
    }

}