@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family: 'UTM Avo';
    src: url('../fonts/UTM-Avo.woff2') format('woff2'), url('../fonts/UTM-Avo.woff') format('woff'), url('../fonts/UTM-Avo.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'UTM Avo';
    src: url('../fonts/UTM-AvoBold.woff2') format('woff2'), url('../fonts/UTM-AvoBold.woff') format('woff'), url('../fonts/UTM-AvoBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

ul {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    line-height: 1.5;
}

a {
    color: #333;
    text-decoration: none;
}

img {
    max-width: 100%;
}

a:hover {
    text-decoration: none;
    cursor: pointer !important;
}

input {
    outline: 0;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

ol.breadcrumb {
    background: #F1F1F1;
    padding-top: 6px;
    padding-bottom: 6px;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/" !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #000;
    font-size: 14px;
   
}

.header-main {
    position: relative;
    z-index: 100;
    width: 100%;
}

.header-main .main-nav .logo {
    margin-right: 10px;
    margin-bottom: 20px;
}

.header-main .main-nav .navbar-nav .nav-item>a.nav-link {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}

.header-main .main-nav .navbar-nav>.nav-item>a.nav-link {
    padding: 10px 0px;
}

.header-main .main-nav .dropdown-toggle::after {
    color: #fff;
}

.header-main .main-nav .logo {
    margin-right: 10px;
    margin-bottom: 20px;
}

.header-main .main-nav .navbar-nav .nav-item {
    margin: 0 20px;
}

.header-main .main-nav .navbar-nav .nav-item:first-child {
    margin-left: 0;
}

.header-main .main-nav .navbar-nav .nav-item:last-child {
    margin-right: 0;
}

.header-main .main-nav .navbar-nav .nav-item a.nav-link {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.header-main .main-nav .navbar-nav .nav-item .sub-menu li a {
    color: #333;
}


/* .header-main .main-nav .navbar-nav .nav-item:hover a {
    color: #145D2F;
} */

.header-main .main-nav .navbar-nav .nav-item {
    position: relative;
    margin-bottom: 0;
}

.header-main #mega-menu ul {
    list-style: none;
}

.header-main .nav-item .sub-menu li {
    position: relative;
}

.header-main .btn-dropmenu i {
    color: #333;
}

.header-main span.btn-dropmenu {
    position: absolute;
    right: 10px;
    color: #084F9D;
    top: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-top {
    position: relative;
    background: #fff;
    z-index: 1000;
}

.size14 {
    font-size: 14px;
}

.size16 {
    font-size: 16px;
}

.size18 {
    font-size: 18px;
}

.size20 {
    font-size: 20px;
}

.size22 {
    font-size: 22px;
}

.size24 {
    font-size: 24px;
}

.size30 {
    font-size: 30px;
}

.size32 {
    font-size: 32px;
}

.size36 {
    font-size: 36px;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.text-primary {
    color: #4BA354 !important;
}

.bg-primary {
    background: #4BA354 !important;
}

.rounded-6 {
    border-radius: 6px !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.btn-login {
    background: #EC1C24;
    padding: 9px 38px;
}

.btn-login:hover,
.btn-join:hover {
    background: #c9040b;
}

.header-search-form {
    /*max-width: 580px;
    width: 100%;*/
    border: 1px solid #707070;
    border-radius: 20px;
    margin-left: 26px;
    position: relative;
}

.header-search-form input {
    flex: 1;
    background: unset;
    padding-left: 45px;
}

.header-search-form input:focus {
    box-shadow: unset;
    background: unset;
}

.header-search-form input::placeholder {
    text-align: left;
}

.header-search-form .btn-submit {
    position: absolute;
    left: 0;
}

.header-top {
    border-top: 10px solid #EC1C24;
}

.mega-menu-wrap {
    max-width: 268px;
    width: 100%;
    position: relative;
}

.mega-menu-title {
    padding: 10px 0px;
    border-radius: 4px 4px 0 0;
}

.mega_menu {
    position: relative;
    background: #fff;
    margin-top: 2px;
    padding: 10px 0px;
    list-style: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.home .mega_menu {
    margin-top: 20px;
}

.mega-menu-wrap .menu-item {
    position: relative;
    width: 100%;
    border-left: 3px solid transparent;
}

.mega-menu-wrap .menu-item:hover {
    border-left: 3px solid #4BA354;
}

.mega_menu li a {
    display: block;
    padding: 3px 10px;
    width: 100%;
}

.mega-menu-wrap .menu-item .icon-cat {
    width: 30px;
    height: 30px;
    border-radius: 100px;
}

.mega-menu-wrap .menu-item .icon-cat img {
    margin: auto;
}

.mega-menu-wrap .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    min-width: 300px;
    background: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.mega-menu-wrap .menu-item:hover>a {
    background: #4ba35466;
}

.mega-menu-wrap .menu-item a {
    color: #000;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mega-menu-wrap .menu-item>.sub-menu>li>a {
    padding: 6px 10px;
}

.main-nav .navbar-collapse>ul>.nav-item>.btn-dropmenu {
    right: -25px;
    top: 10px;
}

.main-nav .navbar-collapse>ul>.nav-item>.btn-dropmenu i {
    color: #fff;
}

.slide-title {
    position: absolute;
    top: 50%;
    left: 9%;
    max-width: 218px;
    font-size: 24px;
    transform: translateY(-50%);
}

.swiper-button-next,
.swiper-button-prev {
    background: unset;
    width: 40px;
    height: 40px;
    background: #ffffff7d;
    border-radius: 100px;
    display: flex;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.swiper-button-next i,
.swiper-button-prev i {
    margin: auto;
}

.slider-home .slide-frame .box-image {
    width: 100%;
    height: 382px;
}

.slider-home .slide-frame .box-image img {
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.image-top {
    width: 100%;
    height: 152px;
}

.image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.slide-title p {
    margin-bottom: 10px;
}

.btn-join {
    background: #EC1C24;
    padding: 8.5px 22px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.box-categories {
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
}

.box-categories.bg-auditions {
    position: relative;
    background: url('../images/bg-thi-thu.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.box-categories.bg-exam {
    position: relative;
    background: url('../images/bg-ky-thi.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.box-categories .categories-title {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.knowledge-tab .nav-item {
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    margin-right: 12px;
}

.knowledge-tab .nav-item .nav-link.active {
    color: #333;
    font-weight: 700;
    background: rgba(75, 163, 84, 0.4);
}

.box-course {
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
}

.box-course:hover {
    background: #f1f1f196;
    box-shadow: unset;
}

.box-course .course-text {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.box-course:hover .course-text {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.box-course .course-image img {
    transition: all 0.5s;
}

.box-course:hover .course-image img {
    transform: scale(1.1);
}

a.btn-practice:hover {
    color: #fff !important;
    background: #4BA354 !important;
}

.box-course .course-image {
    width: 100%;
    height: 152px;
    overflow: hidden;
}

.box-course .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.knowledge-slide-prev {
    left: -5%;
}

.knowledge-slide-next {
    right: -5%;
}

.knowledge-pagination {
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
}

.knowledge-slide .swiper-slide {
    margin-top: 8px;
    margin-bottom: 8px;
}

.knowledge-pagination .swiper-pagination-bullet {
    margin-right: 10px;
    width: 10px;
    height: 10px;
}

.knowledge-pagination .swiper-pagination-bullet-active {
    background: #4BA354;
}

.knowledge-tab .nav-item:hover button {
    background: rgba(75, 163, 84, 0.4);
}

.footer-social .icon-facebook,
.footer-social .icon-youtube {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 1.8px solid #fff;
    display: flex;
}

.icon-global {
    width: 40px;
    height: 40px;
    background: url(../images/global-footer.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.icon-cart {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 1.8px solid #fff;
    background: url(../images/cart-footer.svg);
    background-size: 68%;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-form .input-radius {
    border-radius: 28px;
    padding-left: 20px;
    height: 46px;
    max-width: 284px;
    width: 100%;
}

.footer-form .input-radius::placeholder {
    font-size: 14px;
}

.footer-form .btn-sent {
    width: 46px;
    height: 46px;
}

.cat-menu {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.sub-cat {
    padding-left: 38px;
}

.cat-menu ul li a {
    color: #000;
   
}

.cat-menu>ul>li>a {
    display: block;
    position: relative;
    padding: 4px 12px;
    background: #4ba35473;
    border-left: 3px solid #4BA354;
}

.cat-menu li a .btn-dropmenu {
    position: absolute;
    right: 10px;
}

.sub-cat>li>a {
    display: block;
    padding: 5px 0;
}

.sub-cat>li {
    display: flex;
    width: 100%;
    align-items: center;
}

.sub-cat li:hover a {
    color: #4BA354;
}

.sub-cat>li::before {
    content: "\f111";
    color: #4BA354;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 6px;
    position: absolute;
    left: 33px;
}

.filter-courses .select-filter {
    font-size: 14px;
    height: 31px;
}

.filter-courses span,
.filter-courses .select-filter {
    
    padding-top: 3px;
}

.cat-title .line,
.related-courses .line {
    border-bottom: 1px solid #ccc;
    width: auto;
    flex: 1;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 20px;
}

.pagination .page-item {
    margin-left: 6px;
}

.pagination .page-item a {
    color: #333;
}

.pagination .page-link.active {
    color: #fff;
    background: #4BA354;
}

.nav.course-tab .nav-item {
    margin-right: 12px;
}

.nav.course-tab .nav-item button {
    border-radius: 10px;
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid #666666;
}

.nav.course-tab .nav-item button.active {
    background: #4BA354;
    font-weight: 700;
    border: 1px solid #4BA354;
}

.progress-wrapper .progress-line {
    height: 3px;
}

.timetable table th {
    padding: 12px 10px;
    border-right: 1px solid #fff;
    background: #00610A;
    
}

.timetable table th:last-child {
    border: unset;
}

.timetable table td {
    padding: 30px 10px;
    background: #fff;
    border-bottom: 1px solid #4BA354;
    border-right: 1px solid #4BA354;
    text-align: center;
   
}

.result-board {
    border: 1px solid #53CEFC;
}

.result-board table tr th {
    color: #fff;
    font-weight: 400;
    text-align: center;
    padding: 4px 10px;
    background: #4BA354;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

.result-board table tr th:last-child {
    border-right: unset;
}

.result-board table tr:last-child {
    border-radius: 10px;
}

.result-board table tr td {
    padding: 10px 20px;
    border-right: 1px solid #53CEFC;
    border-bottom: 1px solid #53CEFC;
}

.result-board table tr:last-child td {
    border-bottom: unset;
}

.result-board table tr td:first-child {
    text-align: center;
    border-left: unset !important;
}

.result-board table tr td:last-child {
    border-right: unset;
}

.result-board table tr td:first-child {
    border-left: 1px solid #53CEFC;
}

.document-item {
    border-bottom: 1px solid #E9E9E9;
    padding-top: 20px;
    padding-bottom: 20px;
}

.document-item:first-child {
    padding-top: 0
}

.document-item:last-child {
    border-bottom: unset;
}

.document-item .icon-document {
    display: flex;
    width: 40px;
    margin-right: 20px;
}

.document-item .icon-document i {
    font-size: 50px;
}

.suggested-course .box-img {
    width: 100px;
    height: 80px;
}

.suggested-course .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.search-result {
    display: none;
}

.search-result:after {
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background: #333333b3;
    z-index: -10;
}

.search-result-wrap {
    position: absolute;
    z-index: 100;
    padding: 16px 38px 30px 38px;
    width: 1110px !important;
    margin: auto;
    background: #DEE2E6;
    border-radius: 0px 0px 10px 10px;
    left: 50%;
    transform: translateX(-50%);
}

.suggested-course-item {
    margin-bottom: 10px;
}

.suggested-course-item:last-child {
    margin-bottom: 0;
}

.certificate-item {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #53CEFC;
    margin-bottom: 18px;
}

.course-title:hover a {
    color: #4BA354;
}

.btn-result-close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.bg-ededed {
    background: #EDEDED;
}

.regis-form {
    max-width: 600px;
    margin: auto;
    padding: 30px;
}

.regis-form input,
.regis-form select {
    height: 50px;
    font-size: 14px;
    border-color: #CACEDA;
    font-style: italic;
}

.regis-form textarea {
    font-size: 14px;
    font-style: italic;
}

.regis-form input::placeholder,
.regis-form select {
    color: #666666;
}

.regis-form .btn-submit {
    height: 50px;
    border: 1px solid #53CEFC;
}

.header-button .myAccount-navigation {
    position: absolute;
    min-width: 240px;
    display: none;
    transform-origin: 0 top;
}

.header-button .myAccount-navigation::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 24px;
    border-top: 1px solid #ccc;
    transform: rotate(45deg);
    top: 3px;
    border-left: 1px solid #ccc;
    background: #fff;
}

.header-button .myAccount-navigation-wrap {
    border: 1px solid #CCCCCC;
    margin-top: 10px;
}

.header-button:hover .myAccount-navigation {
    display: block;
    animation: menu-float-show .2s ease-out;
}

.myAccount-navigation .nav-dropdown li a {
    padding: 6px 20px;
    display: block
}

.header-button .myAccount-navigation .nav-dropdown li:hover a {
    color: #333;
    background: #F3F3F3;
}

.myAccount-navigation .nav-dropdown li a i {
    color: #999999;
}

.myAccount-navigation .my-account {
    padding: 20px 20px 10px 20px;
}

.dashboard-menu .nav-dropdown li a {
    color: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dashboard-menu .nav-dropdown li a.active {
    color: #000;
    background: #D7D7D7;
}

.dashboard-menu .nav-dropdown li:hover a {
    color: #4BA354;
}

.dashboard-update {
    padding: 20px 30px;
}

.myAccount-navigation .avatar {
    width: 50px;
    height: 50px;
}

.myAccount-navigation .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-avatar {
    position: relative;
    height: 100%;
}

.change-avatar .btn-upload {
    padding: 8px 32px;
    font-size: 14px;
    border-radius: 10px !important;
}

.change-avatar .btn-upload:hover {
    background: #4BA354;
}

.change-avatar::before {
    content: '';
    width: 1px;
    height: 96%;
    display: block;
    border-left: 1px solid #D9D9D9;
    position: absolute;
    top: 0;
    left: 16px;
}

.dashboard-info {
    padding: 20px 70px 30px 0;
}

.my-result {
    position: relative;
    max-width: 389px;
    margin: auto;
    padding: 36px 45px;
    border: 7px solid #FCD700;
    border-radius: 40px;
    margin-top: 65px;
    margin-bottom: 30px;
}

.my-result .ribon {
    color: #BE1E2D;
    background: url(../images/ribon.svg);
    background-size: 100%;
    max-width: 366px;
    height: 90px;
    width: 100%;
    background-repeat: no-repeat;
    position: absolute;
    background-position: center;
    padding-top: 15px;
    left: 5px;
    top: -44px;
}

.my-result .ratings {
    position: relative;
    margin-top: 50px;
}

.my-result .ratings .number {
    width: 44px;
    height: 44px;
    margin: auto;
    font-size: 25px;
    background: url(../images/icon-button.png);
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}

.my-result .level,
.my-result .accumulated-points {
    color: #BE1E2D;
    background: linear-gradient(180deg, #F27A3A 0%, #FCC847 51.56%, #F27A3A 100%);
    border: 1px solid #FCD700;
    border-radius: 30px;
    padding: 6px 30px;
}

.ratings .star {
    position: absolute;
    font-size: 26px;
    color: #ffca00;
}

.ratings .star-ratings .star:first-child {
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
}

.ratings .star-ratings .star:nth-child(2) {
    left: 32%;
    top: -20px;
}

.ratings .star-ratings .star:nth-child(3) {
    left: 56%;
    top: -20px;
}

.ratings .star-ratings .star:nth-child(4) {
    left: 30%;
    top: 10px;
}

.ratings .star-ratings .star:nth-child(5) {
    left: 58%;
    top: 10px;
}

.tab-course .nav-item {
    margin-right: 10px;
}

.tab-course .nav-item button {
    padding: 8px 30px;
    border: 1px solid #666666;
}

.tab-course .nav-item button.active {
    font-weight: 700;
    background: #4BA354;
    border-color: #4BA354;
}

.my-course-item {
    padding: 6px 30px;
    border-radius: 16px;
}

.my-course-content {
    padding: 30px;
}

.my-course-item .status {
    display: flex;
    align-items: center;
    width: 20%;
}

.my-course-item .status::before {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    background: #4BA354;
}

.my-course-item .status.complete::before {
    content: "\f00c";
    color: #fff;
    font-weight: 400;
    padding-left: 3px;
    padding-right: 3px;
    font-family: "Font Awesome 5 Pro";
}

.box-course .label-hot {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 12px;
    background: #EC1C24;
    padding: 6px 10px;
    z-index: 100;
}

.box-course .label-new {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 12px;
    padding: 6px 10px;
    background: #FFB806;
    z-index: 100;
}

.main-video .icon-video,
.video-box .icon-video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    border-radius: 100px;
    border: 4px solid #ffffffe6;
}

.main-video .icon-video i,
.video-box .icon-video i {
    color: #fff;
    font-size: 20px;
    margin: auto;
}

.main-video .main-video {
    width: 100%;
    height: 763px;
    top: 0;
    left: 0;
    z-index: 100;
}

.main-video .box-image {
    overflow: hidden;
    z-index: 10;
}

.main-video .box-image img {
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.main-video .box-image:hover img {
    transform: scale(1.06);
}

.main-video .video,
.main-video .video .video-youtube {
    height: 100% !important;
}

.course-wrapper {
    border: 1px solid #E5E5E5;
    /*max-height: 685px;*/
    height: 100%;
}

.course-wrapper .note-wrapper {
    max-height: 760px;
    height: 100%;
}

.course-wrapper .tab-pane-wrap {
    max-height: 685px;
    height: 100%;
    overflow-y: auto;
}

.tab-course-content {
    background: #F6F6F6;
    border-bottom: 1px solid #E5E5E5;
}

.tab-course-content li.nav-item {
    border-right: 1px solid #E5E5E5;
}

.tab-course-content li.nav-item:last-child {
    border: unset;
}

.tab-course-content .nav-link {
    position: relative;
}

.course-list button:focus {
    outline: unset;
    box-shadow: unset;
}

.course-list button.btn-link:hover {
    text-decoration: none;
}

.tab-course-content .nav-link i {
    transform: scale(1.3);
}

.tab-course-content .nav-link.active {
    color: #000;
    background: transparent;
}

.tab-course-content .nav-link.active::after {
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #4BA354;
}

.course-list .video-title {
    background: #A0A0A0;
    padding: 6px 10px;
}

.course-list .video-title i {
    transform: scale(1.3);
}

.course-list .faq-item p {
    font-size: 12px;
    margin-bottom: 0;
}

.course-list .accordion-title i.rotate {
    transform: rotate(180deg);
}

.course-wrapper::-webkit-scrollbar {
    width: 5px;
}

.course-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

.course-wrapper::-webkit-scrollbar-thumb {
    background: #F1F1F1;
    border-radius: 10px;
}

.note-item {
    color: #fff;
    border-radius: 16px;
    padding: 6px 30px;
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    background: rgb(0, 132, 255);
}

.result-score {
    background: linear-gradient(180deg, #F27A3A 0%, #FCC847 51.56%, #F27A3A 100%);
    border-radius: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.general-results {
    position: relative;
    border: 5px solid #4BA354;
    border-radius: 40px;
    margin-top: 80px;
    padding-top: 200px;
    padding-bottom: 30px;
}

.achievements .achievements-box {
    position: relative;
    border: 1px solid #4BA354;
    border-radius: 20px;
    padding: 16px;
    margin-top: auto;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.achievements .achievements-img {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: -76px;
    left: 50%;
    transform: translateX(-50%);
}

.achievements .achievements-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.general-results-tittle {
    color: #BE1E2D;
    background: url(../images/ribon.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    max-width: 366px;
    height: 90px;
    position: absolute;
    width: 100%;
    top: -46px;
    left: 50%;
    padding-top: 16px;
    transform: translateX(-50%);
}

.achievements-text .name {
    font-size: 16px;
}

.achievements-text {
    margin-top: auto;
    padding-top: 26px;
}

.achievements-text p {
    font-size: 12px;
    margin-bottom: 10px;
}
.achievements-col:nth-child(2) .achievements-text,.achievements-col:nth-child(3) .achievements-text{
padding-top: 46px;
}
.achievements-col:nth-child(1) .achievements-text{
    padding-top: 76px;
}
.achievements .achievements-col:nth-child(4) .achievements-img,.achievements .achievements-col:nth-child(5) .achievements-img{
 top: -87px;
}
.achievements .achievements-col:nth-child(1) .achievements-img{
 top: -64px;
}
.achievements .achievements-col:nth-child(1) .achievements-text .name {
    font-size: 20px;
}

.achievements .achievements-col:nth-child(3) .achievements-text p {
    font-size: 12px;
}

.achievements .achievements-col:nth-child(4),
.achievements .achievements-col:nth-child(5) {
    height: 140px;
}

.achievements .achievements-col:nth-child(2),
.achievements .achievements-col:nth-child(3) {
    height: 160px;
}

.achievements .achievements-col:nth-child(3) .achievements-img::before {
    content: '';
    display: block;
    background: url('../images/copper.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 102px;
    height: 87px;
    position: absolute;
    top: -70px;
}

.achievements .achievements-col:nth-child(1) .achievements-img::before {
    content: '';
    display: block;
    background: url('../images/gold.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 102px;
    height: 87px;
    position: absolute;
    top: -70px;
}
.achievements .achievements-col:nth-child(2) .achievements-img::before {
    content: '';
    display: block;
    background: url('../images/silver.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 102px;
    height: 87px;
    position: absolute;
    top: -70px;
}

.leaderboard {
    border: 1px solid #4BA354;
    border-radius: 20px;
    padding: 22px 40px;
}

.ranking-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4BA354;
}

.ranking-item:last-child {
    border-bottom: unset;
    margin-bottom: 0;
}

.ranking-item .avatar {
    width: 42px;
    height: 42px;
    border: 5px solid #fff;
    border-radius: 100px;
}

.ranking-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranking-item .name {
    color: #fff;
    background: #4ba354;
    border-radius: 26px 6px 6px 26px;
}

.ranking-item .name span {
    padding-left: 15px;
    padding-right: 20px;
}

.ranking-item .number {
    width: 40px;
    height: 40px;
    padding-top: 5px;
    border-radius: 4px;
}

.ranking-item .branch-name {
    font-size: 12px;
}

.header-main .nav-item>.sub-menu::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 24px;
    transform: rotate(45deg);
    top: -3px;
    background: #fff;
}
.md-form {
    padding-top: 80px;
    background: #807e7bba;
}
.md-form__title {
    font-size: 28px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}
.md-form .modal-content {
    background: 0;
    border: 0;
}
.md-form .modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    border-radius: 0.3rem;
    outline: 0;
}
.md-form .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}
.md-form input.form-control {
    font-size: 16px;
    height: 40px;
    border-radius: 20px;
    border: 0;
    padding-left: 24px;
    padding-right: 24px;
}
.md-form .md-form__btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    opacity: 1;
    float: unset;
    margin-left: 20px;
    background: #fff;
    font-size: 30px;
    line-height: 1;
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    color: #333;
}
.md-form .modal-dialog {
    transform: scale(0.3) !important;
    transition: all 0.3s !important;
    transform-origin: 50% 50%;
    opacity: 0.1;
}
.md-form.modal.show .modal-dialog {
    transform: scale(1) !important;
    opacity: 1;
}