/**
zozo
**/
body { font-size: 15px; scroll-behavior: smooth; }
h1, h2, h3, h4, h5, .heading-section, .heading-wrap, .heading-font { font-family: "ColourSans" !important; line-height: 1.2; }
.font-weight-800 { font-weight: bold; }
.heading-wrap div { line-height: 40px; }
.row { margin-right: -10px; margin-left: -10px; }
.btn-sm, .btn-group-sm > .btn { font-size: 15px; }
.font-30 { font-size: 30px; line-height: 1.2; }
.navbar-brand { width: 100px; height: 100px; padding: 0;}
.navbar-toggler { margin-top: -12px; margin-left: -3px; padding: 0.25rem 1.6rem  0.25rem 0; }
.navbar .nav-item { width: 227px; }
.navbar .nav-item .nav-link { font-size: 15px; column-gap: 10px; }
.navbar .nav-item img {  width: 30px; height: auto; transform: scale(0.8);}
.sidebar-mini .navbar .nav-item {  }
.f-left { float: left; }
.f-right, .f-right1 { float: right; }
.top-navbar .f-left { width: 38%; }
.top-navbar .f-right { width: 40%; padding: 12px 0; text-align: right; }
.top-navbar .f-right1 { width: 350px; padding: 12px 0; text-align: right; }
.top-navbar .f-right a:hover { color: var(--green) !important; }
.top-navbar .f-right a.text-blue:hover { color: #FFF !important; }
.navbar-auth-user-dropdown .custom-dropdown-body { top: 70px; }
.form-control { font-size: 15px; }
.top-navbar { position: fixed; z-index: 999; width: 100%; background: #FFF; height: 130px; }
.main-sidebar { position: fixed; max-height: 80vh; width: 265px; max-height: 100vh; overflow: hidden; z-index: 111; padding-top: 140px; top: 0; }
.main-sidebar:hover { overflow-y: scroll; }
/* .top-navbar { position: fixed; z-index: 9991; width: 100%; background: #FFF; height: 130px; } */
.main-content { padding-top: 155px; padding-left: 280px; padding-bottom: 0; }
.navbar { display: block; height: 840px;}
.main-content { z-index: 1; }
/* .feature-slider-container .img-inner img { border-radius: 0 30px 0 30px; } */
.faq-section { margin-top: 30px; }
.faq-section .accordion { padding-left: 20px; padding-right: 20px; }
.course-category-sections .course-category-item .cat-description { opacity: 0; bottom: 0; height: 100%; }
.course-category-sections .course-category-item:hover .cat-description { opacity: 1; }
.webinar-card { transition: all 0.2s linear; height: 100%; }
.webinar-card:hover { transform: scale(1.06); }
.webinar-card .enrolment-btn { padding-left: 10px; padding-right: 10px; }
.webinar-card .webinar-card-body { padding: 5px 0px 20px 0px; }
.webinar-card .enrolment-btn:hover { background-color: #C62C2D; border-color: #C62C2D; color: #FFF; }
.webinar-card .enrolment-btn:hover svg path { fill: #FFF; }
.section-title { color: #012169; }
.webinar-card .image-box { height: 194px; }
.webinar-card .image-box a { display: block; }
.blog-grid-card .blog-grid-detail .blog-grid-title { font-family: "Open Sans", sans-serif !important; line-height: 1.5; font-weight: 500; }
/* .testimonials-content h4 { font-family: "Open Sans", sans-serif !important; } */
.faq-section .accordion .accordion-item-body { font-size: 16px; }
.testimonials-content p { font-size: 16px; }
.w-80 { width: 80%; }
.btn-sm, .btn-group-sm > .btn { padding: 10px 15px; height: auto; }
.navbar .nav-item a svg { width: 30px; min-width: 30px; }
.nav-item.help { margin-top: 20px; }
.nav-item.help, .nav-item.contact { padding-left: 5px; padding-bottom: 5px; }
.nav-item.help a, .nav-item.contact a { font-size: 12px; color: gray; }
.nav-item.help a:hover, .nav-item.contact a:hover { color: #2FC48D; background: transparent; }
.nav-item.copyright { padding-left: 15px; padding-top: 5px; line-height: 15px; }
.nav-item.copyright span { font-size: 10px; color: #B4B4B4; margin-top: 20px; line-height: 12px; }
.btn-light, .btn-dark { font-family: "Open Sans", sans-serif !important; }
.button .btn-light:hover { background-color: #012169 !important; color: #FFF !important; border-color: #012169 }
.nav-item.button .btn-blue, .nav-item.button .btn-light { padding: 10px 10px !important; height: auto; width: 200px; }
.nav-item.button { padding-left: 14px; margin-top: 5px; }
.nav-item.button.register { margin-top: 10px; }
.navbar .collapse .nav-item .nav-link, .navbar .collapsing .nav-item .nav-link { padding-left: 15px; }
.navbar .collapse .nav-item .nav-link.active, .navbar .collapse .nav-item .nav-link:hover { font-weight: 400; color: #2FC48D; }
.bg-blue-100 { background-color: #039fdc; }
.feature-slider-container .features-swiper-pagination { margin-left: 20px; }
/**.course-category-sections .mt-10.position-relative, .course-sections .inner { width: 102%; margin-left: -10px; }**/
.col-md-3 .blog-grid-card .blog-grid-image { height: auto; }
.col-md-3 .blog-grid-card:hover .blog-grid-image a::before {  content: 'Xem bài viết'; position: absolute; z-index: 3; width: auto; height: auto; display: inline-block; top: 50%; left: 50%;
background: #2FC48D; padding: 5px 20px; border-radius: 20px; font-size: 12px; text-align: center; font-weight: 600; color: #FFF; transform: translateX(-50%) translateY(-50%); }
.col-md-3 .blog-grid-card:hover .blog-grid-image a::after { background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; display: block; content: ''; top: 0; left: 0; z-index: 2; }
.blog-grid-card .blog-grid-image { height: auto; width: auto; }
.post-detail .main-content { padding: 0; }
.js-share-blog svg { transform: scale(0.7);}
.breadcrumb-item.font-16 { font-size: 14px; }
.breadcrumb-item a:hover { color: #012169; }
.breadcrumb .breadcrumb-item:first-child img { transform: scale(0.75); }
.testimonials-container .testimonials-content { width: 55%; height: 60%; padding-top: 10px !important; }
.position-absolute.position-md-relative.testimonials-navigation { bottom: 30px; }
/**.swiper-slide { width: 100% !important; }**/
.swiper-slide1 .row{margin-left: 0px !important; margin-right: 0px !important;}
.top-navbar .navbar-search { min-width: 100%; margin-left: 95px; }
.nav-about { padding-bottom: 9px !important; }
.sidebar-mini .contact, .sidebar-mini .copyright , .sidebar-mini .help { display: none; }
.explore-section .img-inner { width: 45%; }
.explore-section .img-inner img { max-width: 500px; }
.explore-section .content-inner { width: 55%; padding: 0; }
.custom-col-md-4 { width: 38%; }
.custom-col-md-8 { width: 62%; }
body.sidebar-mini .main-sidebar { position: fixed; !important; }
/* body.sidebar-mini .navbar .nav-item a { padding: 5px 10px; } */
/* .footer .footer-logo { width: 140px; } */
.footer .footer-logo { width: 190px; }
footer.footer { margin-top: 50px; padding-left: 280px; padding-top: 40px; }
.footer-list a:hover, .footer-social a:hover .title { text-decoration: underline; color: #343434; }
.footer .footer-copyright-card { margin-top: 20px; padding: 50px 50px 20px; }
/* body.sidebar-mini footer.footer { padding-left: 80px; } */
.footer .header { font-size: 18px; font-family: "ColourSans", sans-serif !important; }
.course-category-sections .course-category-name { font-family: "ColourSans", sans-serif !important; }
.header-col-right { width: 100%; }
.img-faq { padding-left: 20px; padding-right: 10px; }
#back { display: none; }
.mobile { display: none; }
.home-sections { margin-top: 80px; }
.home-sections:first-child { margin-top: 80px; }
.login-container { width: 85%; position: relative; left: 50%; transform: translateX(-50%);}
.table-cell { display: table-cell; vertical-align:middle; }
.table { display: table;  }
.dashboard .col-12, .history .col-12 { padding-left: 10px; padding-right: 10px; }
.dashboard .col-12 .col-12, .history .col-12 .col-12 { padding: 0; }
.panel-page .dashboard .chart-container { height: 355px; }
.panel-page .stat-side .stat-card { min-height: 155px !important; }
.panel-page .stat-side .stat-card:last-child { min-height: auto !important; padding-bottom: 40px !important; }
.panel-page .stat-side .stat-card .icon-list { display: block; width: 100%; }
.panel-page .stat-side .stat-card .icon-list span, .panel-page .stat-side .stat-card .icon-list span a { display: block;}
.panel-page .stat-side .stat-card .icon-list span a { background: url(/assets/default/icons/ArrowLink.svg) center right no-repeat; background-size: auto 80%; }
.panel-page .stat-side .stat-card .icon-list a:hover { color: #FFF !important; opacity: 0.8; }
.stat-card .font-18 { margin-top: 10px; }
.panel-page .dashboard .chart-container .apexcharts-legend-series { margin: 12px 0 !important; }
.apexcharts-legend { right: 5% !important; }
.apexcharts-legend-text { font-family: "Open Sans", sans-serif !important; }
.select-dark.select-dark-custom { height: 50px; margin-bottom: 0; }
.footer-list a:hover { color: #012169; }
.expert-content { padding-right: 5% !important; }
.learning-qr { width:180px; height: auto }
.post-listing .explore-section .content-inner { width: 100%; max-width: 480px; }
.history h3 { font-family: "Open Sans", sans-serif !important; }
.member-panel-page h3 { display: none; }
.member-panel-page .history h3 { display: block; }
.panel-page .dashboard .statistics-section .statistic-key .statistic-value { line-height: 1.1; }
.panel-page .dashboard .statistics-section .statistic-key:last-child { color: #ffff03; }
.heading-wrap p { font-family: "Open Sans", sans-serif !important; }
.faq-section .accordion .accordion-item-header button { font-weight: 700; height: auto; }
.faq-section .accordion .accordion-item-header button:hover, .faq-section .accordion .accordion-item-header button:active, .faq-section .accordion .accordion-item-header button:focus { text-decoration: none !important; }
.blog-grid-card:hover { transform: none; transition: none; }
.blog-grid-card .blog-grid-title { transition: all 0.15s ease; }
.blog-grid-card:hover .blog-grid-title { color: #30c48d; }
.contact-flex { max-width: 300px; }
.post-show { min-height: calc(100vh - 500px); }
.post-show h1, .post-show h2, .post-show h3 { margin-bottom: 10px; }
/* .allcourse { display: none; } */
a.allcourse { display: block; margin-left: auto; color: var(--secondary); font-size: 15px; font-weight: 600; display: flex; gap: 5px; justify-content: space-between; vertical-align: middle; }
a.allcourse:hover, a.allcourse:focus { text-decoration: underline; }
a.allcourse::after {
  margin-top: 2px;
  color: var(--secondary);
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4MTg4OTQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tcmlnaHQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPg==");
}
.faq-section .accordion [data-toggle=collapse] .up, .faq-section .accordion [data-toggle=collapse] .down { fill: #012169; }
.post-show h3 { color: #656565; }
.panel-page .welcome-panel-section { padding: 10px 40px !important; }
.panel-page .welcome-panel-section .section-container { background-position: right center !important; background-size: auto 100%; }
.panel-page .welcome-panel-section .section-container.member { background-image: url(/assets/default/icons/rulo-dashboard.svg) !important; }
.learning-page .category-description { max-width: 620px; margin: 0 auto; text-align: justify; }
.learning-page .category-points { width: 60%; }
.learning-page .category-point { padding: 0px !important; }
.learning-page .category-point .c-label { font-size: 12px; margin-top: 5px; }
.course-level-btn { font-weight: 700 !important; margin-bottom: 5px !important; padding: 10px 15px !important; height: auto; }
.course-level-btn:last-child { margin-bottom: 10px !important; }
.course-level-btn.btn-primary:hover, .course-level-btn.btn-primary:focus, .course-level-btn.btn-primary:active { opacity: 0.7; background-color: var(--primary) !important; color: #FFF !important; }
.course-level-btn.level-locked:hover, .course-level-btn.level-locked:focus, .course-level-btn.level-locked:active { background-color: #656565 !important; }
.course-level-process { padding-right: 50px; }
.learning-page-content { padding-left: 50px; }
.learning-page-tabs .category-badge { font-size: 15px; }
.learning-page .learning-content-iframe iframe, .learning-page .learning-content-iframe .h_iframe-aparat_embed_frame { border-radius: 10px; height: 500px !important; }
.learning-page .main-section { margin-top: 60px; }
.course-category-sections .course-category-item:hover:after { transition: all 0.5s linear; }
.course-category-sections .course-category-item .cat-description { transition: all 0.2s linear; }
.category-page .category-top-banner .categories-info { padding: 50px 50px; }
.category-page .category-top-banner .category-points span { width: 80%; }
.category-page .category-top-banner .categories-info .font-40 { font-size: 38px; }
.quiz-card { margin-top: 5px; }
.progress { height: 15px; margin-bottom: 6px; }
.quiz-form .question-multi-answers .answer-item .answer-label, .text-black { color: #000; }
.quiz-form .question-multi-answers .answer-item .answer-label:hover { background-color: #DFDFDF; }
.question-answer-result .container { max-width: 75vw; }
.quiz-photo { padding-left: 10px; padding-right: 0; }
.quiz-photo .img-demo { background: #F1F1F1; border-radius: 20px; height: 100%; min-height: 278px; max-height: 330px; width: 100%; }
.countbar svg { fill: #012169; color: #012169 }
.countbar { gap: 20px; align-items: center; margin-bottom: 0; }
.editprofile { display: none; }
.panel-page .input-label { color: #000; }
.swiper-pagination { display: none !important; }
.mobile-avatar { display: none; }
.course-row { display: flex; width: 100%; }

.webinar-card .image-box {
    position: relative;
}

.webinar-card .new-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    width: 55px;
    height: 38px;
    z-index: 2;
    animation: newBadgeBlink 1.2s ease-in-out infinite;
}

@keyframes newBadgeBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.06);
    }
}

.about-container { width: 56%; position: relative; left: 50%; transform: translateX(-50%); font-size: 16px; margin-top: 40px; }
.faqs-page .faq-section .accordion-item { padding: 30px 0; }
.faqs-page .faq-section .accordion .accordion-item-body { margin-bottom: 10px; margin-top: 10px; }
.panel-page .user-profile-form .form-group .input-label { font-weight: 400; flex-basis: 180px; }
.panel-page .user-profile-form .form-group .form-control { width: 70% !important; }
.panel-page .user-profile-form .form-group span { padding: 0.5rem 1rem; font-size: 16px; color: #5D0CC7; }
.panel-page .user-profile-form .form-group span.member { color: #656565; }
.mobile-avatar .img-cover { border: 2px solid #5D0CC7; border-radius: 50%; }
.board-avatar { width: 90px; height: 90px; border-radius: 50%; }
.top-navbar-inner .navbar-user .user-avatar .user-avatar-image {
  border: 2px solid #5D0CC7;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.navbar-auth-user-dropdown .dropdown-user-avatar {
  max-width: 350px;
}
.top-navbar-inner .navbar-user .member, .top-navbar-inner .navbar-user img.member, .mobile-avatar .img-cover.member, .member-panel-page .user-avatar .avatar-inner.member { border-color: #F1C82A; }
.panel-page .welcome-panel-section .section-container { min-height: 220px !important; }
.timelinemobile { display: none; }
.contact-page .form-container a { color: var(--primary); }
.contact-page .form-container  a:hover, .contact-page .form-container a:focus { color: #656565 !important; }
.contact-page .form-container .btn-primary:hover, .contact-page .form-container .btn-primary:focus { background-color: #DFDFDF !important; }
.heading-wrap { padding-right: 50px; }
.login-card { padding: 0 0 0 30px; }
.login-container { padding: 50px 60px; }
.form-check-input { transform: scale(1.5); margin-left: -1.7rem; }
.form-check { padding-left: 2rem; }
.learning-export-container { padding: 0; }
.learning-export-container .btn { padding-left: 5px; padding-right: 5px; }
.faq-section .accordion .accordion-item-body { margin-bottom: 0; }
.faq-section.faq-section-home .accordion-item .accordion-item-header { margin-bottom: 0; }
.expert-mobile { display: none; }
.post-show a { color: #00a78e}
.post-show a:hover, .post-show a:focus { text-decoration: underline; }
.zalologin { padding-top: 20px; border-top: 1px solid #CECECE; margin-top: 25px; }
.morelogin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.morelogin .text {
  display: inline-flex;
  border-top: 1px solid #CECECE;
  padding-top: 20px; margin-top: 25px;
}
.morelogin .text  a, .zalologin .text a { color: #012169 !important; margin-left: 10px; }
.morelogin .text  a:hover, .zalologin .text a:hover { color: #3F3F3F; }
.morelogin .text a { color: }
.quiz-title { text-align: left; }
.quiz-title h3 { font-size: 22px; line-height: 25px; }
.learning-page .learning-content .learning-content-video-player { aspect-ratio:3/1.687; height: 100% !important; }
/* #videoPlayer123_youtube_api { z-index: 9999; } */
/* #videoPlayer123 {  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999; } */
.my-pdf_viewer #navigation_controls button { background: rgba(245,245,245,0.7) !important; padding: 6px 13px 10px; border-radius: 100px; }
.my-pdf_viewer #navigation_controls button img { width: 12px; height: auto; }
.my-pdf_viewer #navigation_controls button:hover { background: var(--primary) !important; }

.login-container select { padding: 8px 16px !important; }

.btn-blue { background-color: #012169; color: #FFF; border-color: #012169 }
.btn-blue:hover, .button .btn-blue:hover, .btn-blue:active, .button .btn-blue:hover { background-color: #FFF !important; color: #012169 !important; border-color: #012169 }
.btn-light:focus, .webinar-card .enrolment-btn:focus, .btn-blue:focus { opacity: 0.6; }

.swal2-popup { border-radius: 20px; padding: 2em 1.25em; }
.swal2-icon.swal2-warning { color: #EF5525; border-color: #EF5525; }
.swal2-icon { width: 2.5em; height: 2.5em; border: 0.18em solid transparent; margin: 1.25em auto 1.25em; }
.swal2-icon .swal2-icon-content { font-size: 2em; }
.swal2-popup button { border-radius: 10px; font-size: 0.875rem !important; width: 150px; border: 1px solid #012169 !important; color: #012169 !important; outline: none !important; }
.swal2-popup button.swal2-styled.swal2-cancel { color: #FFF !important; border: 1px solid #2fc48d !important; }
.swal2-popup button:hover { opacity: 0.6 }

.quiz-result-wrap h2 { width: 60%; }
.quiz-card .font-18 { font-weight: 600; }
.quiz-card img { width: 60px; height: 60px; margin: 8px 0; }
.quiz-result-wrap.result-page .quiz-card { padding: 27px 10px; }
.webinar-card .course-levels .badge { padding: 4px 8px; }

.kk { position: relative; z-index: 100; }

a.bg-primary:hover { color: #FFF; }
a.btn-yellow:hover { color: #FFF; background-color: #d0ac23; }
a.primary { color: var(--primary); }
a.primary:hover { color: #656565; }
a.bg-danger:hover { background-color: rgba(198,44,45,0.7); color: #FFF; }

#showlabel { color: #656565; font-size: 11px; font-weight: 700; top: 38%; left: 35%; position: absolute; z-index: 99; }

.font-25 { font-weight: 600; }

select {
  background-image:
    linear-gradient(45deg, transparent 50%, #949494 50%),
    linear-gradient(135deg, #949494 50%, transparent 50%),
    linear-gradient(to right, white, white);
  background-position:
    calc(100% - 20px) calc(1em + 5px),
    calc(100% - 15px) calc(1em + 5px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 3em;
  background-repeat: no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
}
select.select-dark {
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, #012169, #012169) !important;
  background-position:
    calc(100% - 20px) calc(1em + 5px),
    calc(100% - 15px) calc(1em + 5px),
    100% 0 !important;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 3em !important;
    background-repeat: no-repeat !important;
}

.heading-wrap span { font-size: 36px; }

.my-pdf_viewer{
	position: relative;
}
.my-pdf_viewer #navigation_controls{
	   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.my-pdf_viewer #navigation_controls button {
	border: none;
	background: transparent;
}
.my-pdf_viewer #navigation_controls .pdf-go-next {
	right: 0;
}
.my-pdf_viewer #navigation_controls .pdf-go-previous {
	left: 0;
}

.webinar-card .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  justify-content: space-between;
  vertical-align: middle;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top-right-radius: 35px;
  border-bottom-left-radius: 35px;
  transition: all 0.25s linear;
  z-index: 10;
}
.course-4 .webinar-card:hover {
  transform: scale(1) !important;
  /* border: none !important;
  box-shadow: none !important; */
}
.course-more:hover {
  background-color: #D9D9D9 !important;
}
.webinar-card .overlay a {
  width: 100%;
  padding: 100px 0;
  color: #FFF;
  transition: all 0.25s linear;
}
.course-4 .webinar-card:hover a {
  color: #000;
}
.panel-page .stat-side .stat-icon {
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.board-page .col-md-8 {
  padding-left: 10px;
    padding-right: 10px;
}
.board-page .board-tab-link {
  gap:50px;
}
.rank-member, .rank-point {
  color: #656565;
}
.board-page .avatar-inner div { width: 60px; height: 60px; display: block; border-radius: 50%; }
.board-page .raking-item { grid-template-columns: 10% 12% auto 20%; }

@media only screen and (max-width: 1478px) {
  .heading-wrap div { font-size: 28px; line-height: 35px; }
  .heading-wrap span { font-size: 38px; }
  .learning-qr { width:150px; height: auto }
}
@media only screen and (max-width: 1430px) {
    .heading-wrap div { font-size: 26px; line-height: 35px; }
    .heading-wrap span { font-size: 32px; }
    .heading-wrap { padding-right: 30px; }
    .expert-content { padding-right: 0% !important; }
    .expert-content .mb-3 { margin-bottom: 10px !important; }
    .category-page .category-top-banner .categories-info .font-40 { font-size: 32px; }
    .category-page .category-top-banner .categories-info { padding: 50px 30px; }
    .category-point img { width: 40px; height: auto; }
    .webinar-card .image-box { height: 150px; }
}
@media only screen and (max-width: 1320px) {
    .login-container { padding: 50px 40px; }
    .top-navbar .f-left { width: 40%; }
    .top-navbar .f-right { width: 50%; }
    .explore-section .content-inner .heading-section, .heading-wrap div, .faq-section .section-title, .course-category-sections .section-title { font-size: 26px; }
    .explore-section .content-inner { padding: 0 40px 0 40px; }
    .explore-section .img-inner img { max-width: 400px; }
    .course-category-sections .course-category-name { font-size: 22px; line-height: 22px; }
    .home-sections { margin-top: 50px; }
    .home-sections:first-child { margin-top: 50px; }
    .testimonials-container .testimonials-card { height: 400px; margin-top: 40px; }
    .testimonials-container .testimonials-content { height: 70%; padding: 0 30px 30px !important; }
    .position-absolute.position-md-relative.testimonials-navigation { bottom: 70px; }
    .testimonials-container .testimonials-user-avatar { width: 70%; }
    .expert-content { padding-right: 0 !important; padding-left: 0 !important; }
    .webinar-card .enrolment-btn { gap: 10px; }
    /* .course-row { display: flex; width: 100%;  } */
    .course-sections { margin-bottom: 30px; padding-bottom: 0 !important; padding-top: 0 !important; }
    .course-sections .inner { overflow-x: scroll; margin-top: 20px; }
    .course-sections .row { display: table; }
    .course-sections .row .col-12 { display: table-cell; padding-left: 0; padding-right: 20px; width: 280px; }
    .course-sections .row .col-12:last-child { padding-right: 0; }
    .course-sections .webinar-card { width: 260px; }
    /* .course-sections .row .col-12:last-child .webinar-card, .course-sections .row .col-12:last-child .webinar-card .overlay { height: 100% } */
    .learning-qr { width:120px; height: auto }
    .expert-content .fs-25 { font-size: 20px; }
}
@media only screen and (max-width: 1280px) {
    /* .heading-wrap div { font-size: 24px; } */
    .learning-export-container .col-md-6 { width: 100%; display: block !important; max-width: 100%; flex: 0 0 100%}
    .expert-mobile { display: block; }
    .expert-desktop { display: none; }
    .expert-content .fs-25 { font-size: 25px; text-align: center; }
    .learning-export-container .pr-30 { padding-right: 0 !important; }
    .expert-content { margin-top: 40px; width: 80%; max-width: 80%;flex: 0 0 80%; position: relative; left: 50%; transform: translateX(-50%); text-align: center; }
    .expert-content .mb-3 { margin-bottom: 20px !important; }
    .learning-qr { width:200px; height: auto }
    .custom-col-md-4 { width: 44%; }
    .custom-col-md-8 { width: 56%; }
    .learning-page-content { padding-left: 0;}
    .learning-page .learning-page-tabs.show { width: }
    .course-level-process { padding-right: 0; }
    .learning-page .learning-page-tabs.show { width: 280px !important; min-width: 280px !important; }
}
@media only screen and (max-width: 1150px) {
  .category-page .category-top-banner .categories-info .font-40 { font-size: 28px; }
  .category-page .category-top-banner .categories-info { padding: 50px 20px; }
  .webinar-card .image-box { height: 110px; }
}
@media only screen and (max-width: 1138px) {
  .heading-wrap div { font-size: 24px; line-height: 34px; }
  .heading-wrap span { font-size: 34px; }
}
@media only screen and (max-width: 1200px) {
  .knowledge-section .pl-20 { padding-left: 0 !important; }
  .heading-wrap { padding-right: 30px; }
  .faq-section .accordion { padding: 0; }
  .faq-section .col-md-5 { padding: 0 10px; }
  .login-container { width: 100%; }
}
@media only screen and (max-width: 1130px) {
  .heading-wrap span { font-size: 30px; }
}
@media only screen and (max-width: 1082px) {
  .heading-wrap div { font-size: 20px; line-height: 30px; }
  .heading-wrap span { font-size: 28px; }
}
@media only screen and (max-width: 1080px) {
    .custom-col-md-8 { width: 58%; }
    .custom-col-md-4 { width: 42%; }
    .top-navbar .f-left { width: 35%; }
    .top-navbar .f-right { width: 55%; margin-left: 0 !important; }
    .category-page .category-top-banner .categories-info .font-40 { font-size: 24px; }
    .learning-page .learning-page-tabs.show { width: 280px !important; min-width: 280px !important; }
    .webinar-card .image-box { height: auto; }
}
@media only screen and (max-width: 991px) {
    .main-sidebar { width: auto; }
    .navbar-toggler { padding: 0.25rem 0.75rem  0.25rem 0; }
    .top-navbar .navbar-search { margin-left: 30px; }
    footer.footer { padding-left: 70px; }
    /* body.sidebar-mini .main-sidebar { display: none; } */
    body.sidebar-mini .main-content { padding-left: 70px; }
    .navbar .navbar-nav > li { padding: 2px 0; }
    body.sidebar-mini .main-sidebar .sidebar-menu li.menu-header { display: block; }
    body.menuopen::after { position: absolute; width: 100%; height: 1000vh; display: block; content: ''; background: rgba(0,0,0,0.5); top: 0; left: 0; z-index: 99;}
    #navbarClose svg { width: 26px; height: 26px; margin-left: 10px; fill: #012169 !important;  }
    #navbarClose svg line { fill: #012169 !important; }
    .main-sidebar { z-index: 999; height: auto; width: 30% !important;  opacity: 0; top: 110%; transition: top 0.4s cubic-bezier(0.43, 0.83, 0.54, 1.02), opacity 0.4s linear; position: absolute; display: none; }
    .main-sidebar.show { left: 0; top: 0; opacity: 1; display: block; }
    .navbar .nav-item .nav-link { font-size: 14px; }
    body.sidebar-mini .navbar .nav-item a { padding: 2px 10px; }
    .navbar-toggler { margin-left: -5px; position: relative; z-index: 9999 !important; }
    .navbar-brand img { width: 80px; height: auto; }
    .navbar-brand { width: 80px; height: 80px; padding: 0;}
    .top-navbar { height: 100px; position: fixed !important; z-index: 10 !important; padding-top: 10px; }
    .nav-item.button .btn-blue, .nav-item.button .btn-light { width: 100%; }
    .nav-item.button.register, .nav-item.button.login { padding-top: 0; padding-bottom: 0; padding-left: 15px; padding-right: 10px; }
    .navbar .navbar-nav .nav-item.help, .navbar .navbar-nav .nav-item.contact { padding-left: 8px; }
    .navbar .navbar-nav .nav-item.copyright { padding-left: 18px; }
    .navbar .navbar-toggle-content { height: auto; padding: 10px 10px 30px; width: 30% !important;  top: 0; }
    .main-sidebar .sidebar-menu { height: auto; }
    body.sidebar-mini .main-sidebar { z-index: 999; }
    .quiz-result-wrap h2 { width: 80%; }
    .category-page .category-top-banner .categories-info .font-40 { font-size: 30px; }
    .learning-page .learning-page-tabs { width: 100% !important; margin-top: 20px; }
    .learning-page .learning-content-iframe iframe, .learning-page .learning-content-iframe .h_iframe-aparat_embed_frame { height: auto !important; }
    .learning-page .learning-content { height: auto !important; min-height: auto !important; }
    .learning-page .main-section { display: block !important; }
    .learning-page .category-points { display: none !important; }
}
@media only screen and (max-width: 750px) {
    body.sidebar-mini .main-sidebar, .navbar { height: auto; }
    body { font-size: 14px; }
    .row { margin-left: 0; margin-right: 0; }
    hr { margin-top: 10px; margin-bottom: 10px; }
    .main-sidebar { width: 80% !important; }
    .navbar .navbar-toggle-content { width: 80% !important; height: 100%; padding: 5px 5px 0 5px;}
    .navbar .navbar-nav .nav-item.help { margin-top: 8px; }
    .navbar .navbar-nav .nav-item.contact { margin-top: 0px; }
    .navbar .navbar-nav .nav-item.copyright { line-height: 12px; margin-top: 3px; }
    .main-sidebar { padding-top: 0; max-height: 100%; }
    .nav-item.button.register { margin-top: 8px; }
    .mobile-avatar { display: block; }
    .mobile-navigation .navigation-inner a { gap: 2px; }
    .mobile-navigation .navigation-inner a:hover, .mobile-navigation .navigation-inner a:focus, .mobile-navigation .navigation-inner a:active { color: #30c48d; }
    .mobile-navigation .navigation-inner a:hover img, .mobile-navigation .navigation-inner a:focus img, .mobile-navigation .navigation-inner a:active img { fill: #30c48d; filter: invert(0.5) sepia(1) saturate(2) hue-rotate(100deg); }
    .mobile-navigation { height: 55px; }
    .navbar .mobile-avatar { margin-bottom: 5px !important; }
    body .main-content { padding-top: 110px !important; padding-bottom: 40px !important; }
    footer.footer { margin-top: 0; }
    .faq-section { margin-top: 10px; margin-bottom: 0; padding-bottom: 0 !important; }
    .faq-section .accordion { padding-left: 0; padding-right: 0; }
    .faq-section .section-title { margin-bottom: 20px !important; }
    .course-category-sections .section-title { margin-bottom: 10px !important; }
    .post-section .col-6 { padding: 5px; }
    .post-section .mt-20, .my-20 { margin-top: 10px !important; }
    .post-section.home-sections .section-title { font-size: 20px; }
    .footer .footer-logo { width: 120px; }
    .footer .footer-social img { width: 30px; min-width: 30px; max-width: 30px; height: 30px; }
    .footer .footer-social { gap: 0px !important; }
    footer.footer .footer-copyright-card { margin-top: 50px; }
    footer.footer { margin-bottom: 55px; }
    .footer-list { gap: 10px !important; font-size: 14px; margin-top: 10px !important; }
    .navbar .nav-item .nav-link { column-gap: 10px; }
    .navbar .nav-item a { padding: 0; }
    .category-page.pl-4 { padding-left: 0 !important; }
    .course-category-sections.p-4 { padding: 0 !important; }
    .section-title.mb-50 { margin-bottom: 30px !important; }
    .category-page .category-top-banner .categories-info { padding: 20px 20px; text-align: center; }
    .category-page .category-top-banner .category-points .category-point .inner img { width: 30px; height: auto; }
    .category-page .category-top-banner .category-point { padding-left: 10px !important; padding-right: 10px !important; }
    .category-page .category-top-banner .category-points span { width: 100%; font-size: 11px; line-height: 15px; }
    .category-page .category-top-banner .category-description { font-size: 12px; }
    .categories-info .d-flex.study-number { display: block !important; margin-bottom: 20px; }
    .categories-info .font-40 { font-size: 25px; font-weight: 600; line-height: 26px; margin: 5px 0 !important; }
    .categories-info .small-text { font-size: 12px; }
    .category-page .category-top-banner .col-left { background-size: cover !important; background-position: center !important; height: 220px; margin-bottom: 0; }
    /* .feature-slider-container .img-inner img { border-radius: 0 20px 0 20px; } */
    #breadcrumb { display: none; }
    #back { display: block; }
    #back a { color: #012169; font-weight: 600; }
    #back::before {
    font-size: 19px;
    margin: 0 10px 0 0;
    float: left;
    padding-right: 0;
    color: #012169;
    transform: scaleX(-1) scale(1.4);
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4MTg4OTQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tcmlnaHQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPg==');
    }
    .login-container { padding: 0; width: 100%; text-align: center; }
    .login-container img { margin-bottom: 30px; }
    #zalobutton img { margin-bottom: 0; }
    .zalologin { padding-top: 10px; margin-top: 20px; }
    .login-container .btn { font-size: 15px !important; font-weight: bold; }
    .login-container .col-12 { padding: 0; }
    .login-container .fs-25 { font-size: 20px; }
    .login-card { padding: 50px 0 80px ; }
    .post-detail { padding: 0 !important; }
    .post-detail .main-content { padding-top: 0 !important; }
    .post-detail #breadcrumb { display: none; }
    .post-meta { display: table !important; width: 100% }
    .post-meta .post-date, .post-meta .js-share-blog { display: table-cell !important; font-size: 14px; }
    .post-meta .post-date .font-16, .post-meta .js-share-blog .font-16 { font-size: 14px; }
    .post-meta .js-share-blog .icon-box, .post-meta .js-share-blog .font-16 { display: inline-table; }
    .post-meta .js-share-blog svg { transform: scale(0.8); }
    .post-meta .js-share-blog { text-align: right; }
    .post-detail .post-title { font-size: 18px; margin-bottom: 10px !important; }
    .post-detail .post-img { padding-bottom: 20px !important; }
    .related-post { margin-top: 60px; margin-bottom: 30px; }
    .related-post .px-20 { padding: 0 0 20px 0 !important; overflow-y: scroll; }
    .popular-posts { display: table !important; }
    .popular-posts .blog-grid-card { display: table-cell; padding-right: 20px; padding-bottom: 20px; }
    .popular-posts .blog-grid-card .blog-grid-image { width: 260px; height: auto; }
    .blog-grid-card .blog-grid-detail .blog-grid-title { font-size: 12px; font-weight: 500; }
    .post-show h1, .post-show h2, .post-show h3 { font-size: 18px; line-height: 28px !important; margin-top: 30px; }
    .post-show p, .post-show span { font-size: 14px; }
    .post-listing { padding: 0 !important ; }
    .post-listing .explore-section .content-inner { width: 100%; padding: 20px 0 20px; }
    .blog-grid-card .blog-grid-image { height: auto; }
    .explore-section .content-inner .heading-section { font-size: 22px; line-height: 26px; margin-bottom: 10px; }
    .explore-section .content-inner { font-size: 14px; }
    .heading-wrap span { font-size: 30px; line-height: 30px; }
    .btn { font-size: 15px; }
    .faq-section .section-title, .course-category-sections .section-title { font-size: 22px; }
    .faq-section .accordion .accordion-item-body { font-size: 15px; width: 85%; }
    .faq-section .accordion .btn { font-size: 16px !important; }
    .faq-section .accordion { margin-top: 10px; }
    .faq-section.faq-section-home .accordion-item { margin-bottom: 20px; }
    .course-category-sections .course-category-item .cat-description { font-size: 14px; }
    .course-category-sections { font-size: 14px; padding-top: 10px !important; }
    .course-category-sections .course-category-name { font-size: 20px; font-weight: 600; }
    .course-sections .section-title { font-size: 18px; }
    .webinar-card .webinar-card-body .webinar-title { font-size: 16px; }
    .btn { font-size: 12px !important; }
    .explore-section .btn { font-size: 15px !important; width: 100%; }
    .course-category-sections .course-category-item { height: 150px; }
    /* a.allcourse { display: block; margin-left: auto; color: #A8A8A8; font-size: 11px; font-weight: 600; }
    a.allcourse:hover, a.allcourse:focus { color: #012169; } */
    a.allcourse { font-size: 11px; }
    .course-sections { font-size: 12px; }
    .webinar-card .duration, .webinar-card .date-published { font-weight: 400; }
    .testimonials-content p { font-size: 15px; }
    .home-sections .blog-grid-card .blog-grid-image { height: 100px !important; }
    .footer .header { font-size: 15px; }
    .mobile, .sidebar-mini .contact, .sidebar-mini .copyright, .sidebar-mini .help { display: block; }
    .img-faq { padding-left: 0px; padding-right: 0; }
    .knowledge-section .pl-20 { padding-left: 0 !important; }
    .knowledge-section .pb-4 { padding-bottom: 15px !important; }
    .custom-col-md-4 { width: 100%; }
    .custom-col-md-8 { width: 100%; }
    .explore-section { margin-top: 20px; }
    .explore-section .img-inner { width: 100%; }
    .explore-section .content-inner { width: 100%; padding: 18px; }
    .faq-section .col-12, .testimonials-container .col-12 { padding-left: 0; padding-right: 0; }
    .course-category-sections .col-md-4 { padding-left: 0; padding-right: 0; }
    .course-category-sections .course-category-item { margin-bottom: 10px; }
    .position-absolute.position-md-relative.testimonials-navigation { bottom: auto; }
    .testimonials-container .testimonials-content { width: 100%; top: 220px; }
    .post-section.home-sections { margin-top: 50px; }
    .footer-copyright { padding: 10px 0; border-top: 1px solid gray; border-bottom: 1px solid gray; }
    footer.footer .footer-copyright-card { width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 20px; padding-top: 0px; }
    .testimonials-container .testimonials-card { height: 500px; margin-top: 20px; }
    .testimonials-container .testimonials-user-avatar { width: 100%; }
    .webinar-card-body .gap-10 { gap: 5px; }
    .panel-page .dashboard .statistics-section { border-radius: 0 !important; margin-right: -20px; margin-left: -20px; }
    .statistics-section .d-flex.justify-content-between { display: block !important; }
    .panel-page .dashboard .statistics-section .statistic-key { width: 100%; flex-direction: row !important; justify-content: inherit !important; border-bottom: #FFF 1px solid; }
    .panel-page .dashboard .statistics-section .statistic-key:last-child { border-bottom: none;}
    .panel-page .dashboard .statistics-section .statistic-key .statistic-value { font-size: 30px !important; }
    .panel-page .dashboard .statistics-section .statistic-key .statistic-label { width: inherit; }
    .statistic-image img { transform: scale(0.8); }
    .panel-page .stat-side { margin-top: 40px !important; }
    .panel-page .welcome-panel-section { padding: 0 !important; border-radius: 0; margin-right: -20px; margin-left: -20px; position: relative; margin-bottom: 60px; }
    .panel-page .welcome-panel-section .section-container { padding: 30px 40px 60px 20px; min-height: auto !important; background-size: 140px 140px; background-position: top 0px right 0px !important; }
    .panel-page .welcome-panel-section .d-flexblock { display: block !important; }
    .panel-page .welcome-panel-section img.avatar { margin-bottom: 20px; }
    .welcome-panel-section h2 { font-size: 15px; width: 80%; margin-top: 20px;}
    .panel-page .welcome-panel-section .text-address { font-size: 12px; }
    .panel-page .welcome-panel-section .section-container .contact { width: 70% !important; }
    #my-course-chart, .apexcharts-canvas, #SvgjsSvg1001, foreignObject { height: 100% !important; }
    .apexcharts-legend { display: block !important; width: 100%; right: auto !important; padding: 0 !important; height: 100px; top: 250px !important; }
    .panel-page .dashboard .chart-container .apexcharts-legend-series { display: inline-flex !important; width: 50%; margin: 5px 0 !important; }
    body .panel-page .dashboard .chart-container .apexcharts-legend-text { font-size: 12px !important; }
    body .panel-page .dashboard .chart-container .apexcharts-legend-marker { width: 12px !important; height: 12px !important; margin-right: 8px !important; }
    .dashboard .bg-gray-500 { background-color: #FFF; padding: 0 !important; }
    .dashboard .col-12, .history .col-12 { padding: 0; }
    .user-timeline-section .timeline .title { font-size: 14px; }
    .panel-page .user-timeline-section { border: none !important; padding-left: 0 !important; padding-right: 0 !important; }
    .stat-card .font-18 { font-size: 16px !important; margin-top: 10px; }
    .stat-card a.text-white { font-size: 16px; color: #FFF !important; }
    .text-white a { color: #FFF !important; }
    .panel-page .stat-side .stat-card { padding: 20px !important; }
    .row .col-12 { padding-left: 0; padding-right: 0; margin-bottom: 10px; }
    .page .font-30 { font-size: 22px; line-height: 26px; margin-bottom: 10px; }
    .faqs-wrap .heading-font { font-size: 22px; line-height: 26px; margin-bottom: 10px !important; }
    .faqs-page .faq-section .accordion-item { padding: 15px 0; }
    .faqs-page .faq-section .accordion .accordion-item-body { margin-bottom: 0; }
    .crumb { display: none; }
    .contact-page .form-container { padding: 15px; }
    .contact-page .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .form-group { margin-bottom: 0; }
    .about .heading-font { font-size: 22px; line-height: 26px; margin-bottom: 10px !important; }
    .site-top-banner, .search-top-banner img, .site-top-banner:after { border-top-right-radius: 35px; border-bottom-left-radius: 35px; }
    .course-category-sections .course-category-item:hover .cat-description { display: none; }
    .site-top-banner h1 { font-size: 25px; line-height: 30px; }
    .site-top-banner .font-16 { font-size: 14px; }
    .site-top-banner { text-align: center; padding: 10px 20px; }
    .learning-export-container { margin-bottom: 0; margin-top: 20px !important; }
    .learning-export-container .btn { font-size: 13px !important; padding-left: 10px; padding-right: 10px; }
    .login-container .d-flex .gap-30 { gap: 0px; padding-left: 5px !important; padding-right: 5px !important; }
    .post-detail .main-content { padding: 0 !important; }
    .font-25 { font-size: 22px; line-height: 26px; }
    .related-post { margin-top: 40px; }
    .related-post .inner { overflow-x: scroll; }
    .popular-posts .blog-grid-card:last-child { padding-right: 0; }
    .course-category-sections .course-category-item:hover:after { display: none; }
    .swiper-wrapper .heading-wrap, .swiper-wrapper .heading-wrap div { font-size: 22px; line-height: 30px; }
    .category-page .row-offset .col-12 { margin-top: 5px !important; }
    .learning-page .category-points { width: 100%; }
    .learning-page .course-top-banner .category-point { flex: 0 0 50%; margin-bottom: 0; }
    .learning-page .course-top-banner .category-point .inner { padding: 10px 10px 20px; }
    .learning-page .category-point .c-label { font-size: 10px; margin-top: 0; }
    .learning-page .category-point .c-value { font-size: 12px; }
    .learning-page .category-point img { transform: scale(0.7); }
    .categories-info .font-30 { font-size: 22px; line-height: 26px; }
    .categories-info .p-1 { padding: 15px 20px 10px !important; }
    .learning-page-content { padding-left: 0; }
    .learning-page .learning-page-tabs { width: 100% !important; margin-top: 20px; }
    .course-level-process { padding-right: 0; }
    .learning-page .main-section { margin-top: 25px; }
    .learning-page .learning-content-iframe iframe, .learning-page .learning-content-iframe .h_iframe-aparat_embed_frame { height: auto !important; }
    .learning-page .learning-content { height: auto !important; min-height: auto !important; }
    .quiz-start-page .quiz-start-inner { max-width: 100%; height: auto; padding-left: 0; padding-right: 0; }
    .quizz-logo { left: 22px !important; }
    .quiz-title h3 { font-size: 18px; line-height: 20px; }
    .answer-title { font-size: 15px; }
    .quiz-photo { width: 100%; height: 250px; margin-bottom: 15px !important; padding-left: 0; padding-right: 0;}
    .question-answer-result { position: fixed; bottom: 0; background: #FFF; }
    .quiz-start-page .question-answer-result { border-top: 3px solid #989898; }
    .quiz-start-page { height: 100%; padding-bottom: 100px; }
    .question-answer-result .container { width: 100%; max-width: 100%; }
    .question-answer-result .text-result { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
    .action, .action button { width: 100%; }
    .action button { font-size: 16px !important; }
    .quiz-start-page .question-answer-result { padding: 10px 0px 20px; }
    .countbar { margin-bottom: 0; }
    .question-step .py-25 { padding-top: 15px !important; }
    .quiz-form .hint-text { font-weight: normal !important; }
    .quiz-start-page .question-answer-result { color: #656565; }
    .quiz-start-page .question-answer-result.answer-failed { color: var(--danger); }
    .quiz-start-page .question-answer-result.answer-correct { color: var(--blue); }
    .quiz-start-page .question-answer-result img { width: 35px; height: auto; }
    .quiz-form .hint-text { text-align: left; }
    .col-md-3 .blog-grid-card:hover .blog-grid-image a::before { width: 70%; }
    .login-card { padding: 20px 0px 20px 0px !important; }
    .editprofile { position: absolute; display: block; width: 90%; border-radius: 10px; padding: 15px 20px; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
      left: 50%; transform: translateX(-50%); bottom: -25px; background: #FFF; }
    .editprofile::after { color: #000; right: 10px; top: 17px; position: absolute; transform: scale(1.4); fill: #000; content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4MTg4OTQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tcmlnaHQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPg==); }
    .editprofile:hover, .editprofile:focus { background: var(--blue); color: #FFF; }
    .setting .editprofile { display: none; }
    .setting .welcome-panel-section { display: none; }
    .setting .row .mt-35 { margin-top: 20px; }
    .f-blog { padding-left: 0; padding-right: 0; }
    .about-container { width: 90%; font-size: 14px; margin-top: 10px; }
    .about { margin-top: 0 !important; }
    .member-panel-page .user-avatar .avatar-container { width: 120px; height: 120px; }
    .member-panel-page .user-avatar .avatar-inner .select-image-btn img { height: 15px; }
    .member-panel-page .user-avatar .avatar-inner .select-image-btn { height: 30px; }
    .user-info { margin-bottom: 20px; }
    .panel-page .user-profile-form .form-group .form-control { width: 90% !important; }
    #userSettingForm .form-control { padding: 0; font-size: 15px; height: 1.8rem; }
    .panel-page .user-profile-form .form-group .input-label { font-size: 12px !important; margin-bottom: 0; display: block; }
    .panel-page .user-profile-form .form-group.form-group-editable { background: url(/assets/default/icons/pencil-icon.svg) no-repeat bottom 22px right; background-size: 12px 12px !important; }
    .panel-page .user-profile-form .form-group span { display: block; font-size: 15px; padding: 5px 0; }
    .panel-page .user-profile-form .form-group:last-child { border: none; }
    .timelinemobile { display: block;  }
    .timeline { display: none; }
    .timelinemobile .timelinecat { overflow-x: scroll;  margin-bottom: 5px; }
    .timelinemobile .cattable { display: table; width: 940px; padding: 20px 0 10px;}
    .timelinemobile .button { display: inline-flex; margin-right: 5px; border-radius: 20px; padding: 2px; }
    .timelinemobile .button:last-child { margin-right: 0px; }
    .timelinemobile .button.active { border: #2FC48D 1px solid; }
    .timelinemobile button { padding: 8px 20px; border: 0; border-radius: 20px; outline: none; color: #FFF; font-size: 12px; }
    .timelinemobile .timelineitem { font-size: 12px; border-bottom: 1px solid #A8A8A8; padding: 10px 0; }
    .timelinemobile .timelineitem .timespan { width: 150px; text-align: right; }
    #userSettingForm .col-md-4, #userSettingForm .col-md-8 { padding: 0; }
    .learning-export-container.mt-4 { margin-top: 0 !important }
    .expert-content { width: 100%; max-width: 100%; flex: 0 0 100%; margin-top: 10px; }
    .expert-content .fs-25 { font-size: 22px; line-height: 26px; }
    .learning-qr { width: 140px; height: auto; }
    .learning-export-container .fs-15 { font-size: 13px; }
    .expert-content .d-flex { display: block !important; }
    .expert-content .d-flex a:first-child { margin-bottom: 10px; }
    .quiz-result-wrap .container { padding-right: 0; padding-left: 0; }
    .quiz-result-wrap.result-page .quiz-card { padding: 10px 10px; }
    .quiz-result-wrap .quiz-card-container { gap: 5px; }
    .quiz-card.blue-bg { margin-bottom: 40px !important; }
    .quiz-result-wrap.result-page .font-25 { font-size: 18px;}
    .quiz-result-wrap.result-page .font-18 { font-size: 14px; }
    .quiz-result-wrap .btn { font-size: 14px !important; }
    .quiz-result-wrap .course-remaining-section .col-12 { flex: 0; }
    .quiz-result-wrap .course-remaining-section .col-12 .w-100.d-flex { display: block !important }
    .quiz-result-wrap .course-remaining-section .col-12 img { width: 100%; height: auto; }
    .quiz-result-wrap section.course-remaining-section { background-image: url(/assets/default/images/firework-mobile.png); background-size: 100% auto; background-position: top center; }
    .d-flex.d-flex-block { display: block !important; }
    .contact-page .form-container h1 { margin-top: 40px; }
    .quiz-result-wrap.result-page .quiz-card { width: 100%; }
    .quiz-photo .img-demo { min-height: auto; }
    .video-js .vjs-fullscreen-control { display: none; }
    .board-page .board-tab-link { gap: 0; }
    .board-page .col-md-8 { padding: 0; }
    .board-page .avatar-inner div { width: 40px; height: 40px; }
    .board-page .raking-item { grid-template-columns: 10% 12% auto 25%; }
    .rank-member .fs-16 { font-size: 14px; margin-bottom: 0 !important; }
    .rank-member img { width: 22px; height: auto; }
    .rank-member .ml-2 { margin-left: 5px !important; font-size: 12px; }
    .board-page .board-tab-link { margin-top: 15px !important; margin-bottom: 10px !important; }
    .board-page .raking-item { padding-top: 15px !important; padding-bottom: 15px !important; }
    .rank-point { font-size: 12px; }
    .rank-point img { width: 22px; height: auto; }
    .board-page .raking-item:hover { background-color: transparent; }
}
@media only screen and (max-width: 600px) {
    .mobile-header-search-form { height: auto; }
    .mobile-header-search-form .header-search-mobile-btn { margin-top: 1px; }
    .mobile-header-search-form.show .header-search-mobile-btn { background: #fff url('/assets/default/icons/MagnifyingGlassBlue.svg') no-repeat center; border-color: white; color: #012169;}
    .mobile-header-search-form.show { border-right: 1px solid #012169; height: 34px; }
    footer.footer .footer-logo-inner { margin-bottom: 40px; }
    .mobile-header-search-form.show .search-control  { width: 180px; height: 32px;}
    .contact-page iframe { height: 500px !important; }
    .contact-page .form-container h1 { margin-top: 20px; }
   .blog-page .blog-grid-card .blog-grid-image {
       width: 163px;
       min-width: 163px;
   }
}

@media only screen and (min-width: 480px) and (max-width: 950px) {
   .top-navbar {
     position: absolute !important;
   }
   body.sidebar-mini .main-content {
     padding-left: 30px;
   }
   .top-navbar .f-right {
     width: 60%;
   }
   .top-navbar .f-right a {
     margin-right: 0 !important;
     font-size: 12px;
   }
   footer.footer {
     padding-left: 30px;
   }
}