@font-face {
    src: url("../fonts/Inter-Bold.ttf");
    font-family: "Inter";
    font-weight: 700;
}

@font-face {
    src: url("../fonts/Inter-Regular.ttf");
    font-family: "Inter";
    font-weight: 300;
}

@font-face {
    src: url("../fonts/Inter-Light.ttf");
    font-family: "Inter";
    font-weight: 100;
}


body {
    overflow-x: hidden !important;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: inset 0 -1px 0 #ddd;
}

:root {
    --main-bg-gray: #D3D3D3;
    --main-bg-white: #fff;
    --main-color: #187A48;
    --main-black: #252525;
    --main-bule: #0093ed;
    --main-hover: #ee3523;
    --main-color-hover: #2AF4F4;
    --main-fonts: "Inter";
    --main-fonts-normal: 300;
    --main-fonts-bold: 700;
    --fsize-extra-small: 10px;
    --fsize-small: 13px;
    --bshadow: 0 0 1px 1px rgba(20, 23, 28, .1), 0 3px 1px 0 rgba(20, 23, 28, .1);
    --sec-color: #17a2b8;
    --sec-color-hover: #00576b;
    --light-gray: #bcbcbc;
    --shadow-1: rgba(0, 0, 0, 0.1);
    --shadow-2: rgba(0, 0, 0, 0.2);
    --shadow-5: rgba(0, 0, 0, 0.5);
    --shadow-8: rgba(0, 0, 0, 0.8);
    --shadow-inset: rgba(255, 255, 255, 0.5);
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

a {
    text-decoration: none !important;
}

body {
    font-family: var(--main-fonts);
    font-weight: var(--main-fonts-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

b, strong {
    font-weight: 700;
}

.row-5 {
    padding: 0px 10px !important;
}

.pd-5 {
    padding: 0px 5px 10px 5px !important;
}

.pd-product {
    padding-bottom: 30px;
}

.row-10 {
    padding: 0px 5px !important;
}

.pd-10 {
    padding: 0px 10px 15px 10px !important;
}

/**header**/
.col-logo {
    -ms-flex: 0 0 12%;
    flex: 0 0 12%;
    max-width: 12%;
}

.col-menu {
    -ms-flex: 0 0 68%;
    flex: 0 0 68%;
    max-width: 68%;
}

.col-account {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

#header {
    width: 100%;
    height: 90px;
    position: relative;
    padding: 8px 0;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
}

#header div#logo img {
    max-width: 90px;
    object-fit: contain;
}

#header .header-search form {
    width: 200px;
    position: relative;
}

#header .header-search form input {
    border-radius: 50px !important;
    width: 100%;
    font-size: 15px;
    height: 32px !important;
    border: 1px solid var(--main-color)
}

#header button#button-s {
    background: transparent;
    color: var(--main-color);
    border: 0px;
    padding: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

#header .header-center {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: end;
    flex-flow: wrap;
    gap: 20px;
}


/**menu**/
#header .header-menu ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: wrap;
    justify-content: end;
    width: 100%;
}

#header .header-menu ul li {
    list-style: none;
    position: relative;
    height: 45px;
}

#header .header-menu ul li a {
    font-family: var(--main-fonts);
    font-weight: 700;
    display: block;
    font-size: 15px;
    padding: 0 15px;
    color: var(--main-color);
    height: 45px;
    line-height: 45px;
}

#header .header-menu ul li:first-child a {
    padding-left: 0px !important;
}

#header .header-menu ul li > ul.sub-menu {
    position: absolute;
    top: 45px;
    background: #fff;
    z-index: 99;
    min-width: 300px;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
    display: none;
    border: 1px solid var(--main-color);
    border-top: 0px !important;
}

#header .header-menu ul li > ul.sub-menu li {
    padding: 0px 10px;
    height: unset !important;
    width: 100% !important;
    position: relative;
}

#header .header-menu ul li > ul.sub-menu li:not(:last-child) {
    border-bottom: 1px solid #f2f2f2 !important;
}

#header .header-menu ul li > ul.sub-menu > li a {
    color: #333;
    line-height: unset !important;
    padding: 8px 8px !important;
    font-weight: normal;
}

#header .header-menu ul li > ul.sub-menu li > ul.sub-menu > li a {
    color: #333;
}

#header .header-menu ul li > ul.sub-menu li:hover {
    background: var(--main-color) !important;
}

#header .header-menu ul li > ul.sub-menu li:hover a,
#header .header-menu ul li > ul.sub-menu li > ul.sub-menu > li:hover a {
    color: #fff;
}

#header .header-menu ul li > ul.sub-menu li > ul.sub-menu {
    top: 0px;
    left: 100%;
}

#header .header-menu ul li:hover > ul.sub-menu {
    display: block;
}

/**top sale**/
section#top-sale {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
}

section#top-sale .sale-body {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF0202;
    font-size: 15px;
}

section#top-sale .sale-body img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain;
}

/**footer**/
footer#footer {
    width: 100%;
    display: inline-block;
    background: #F3F5F7;
    padding: 30px 0 15px 0;
}

footer#footer .d-flex {
    display: flex !important;
    align-items: center;
}

footer#footer .footer-logo img {
    width: 180px;
}

footer#footer .footer-company {
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    padding-left: 20px;
    font-size: 22px;
    line-height: 24px;
}

footer#footer .footer-register {
    width: 100%;
    display: flex;
}

footer#footer .footer-register .register-item {
    width: 30%;
    margin-right: 10px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 20px;
}

footer#footer .footer-register .register-item a {
    font-size: 13px;
    line-height: 20px;
}

footer#footer .footer-register .register-item img {
    width: 70px;
    display: block;
    margin: 0 auto 10px;
}

footer#footer a, footer#footer p {
    color: #333;
    font-size: 14px;
}

footer#footer .footer-address-my {
    margin: 25px 0 0 0;
}

footer#footer p i {
    color: var(--main-color)
}

footer#footer p {
    margin-bottom: 5px;
}

footer#footer .footer-top, footer#footer .footer-top .footer-title {
    width: 100%;
    display: inline-block;
}

.col-cus-6 {
    flex-basis: 20% !important;
    max-width: 20% !important;
}

.col-cus-5 {
    flex-basis: calc(100% / 4) !important;
    max-width: calc(100% / 4) !important;
    padding: 0px 0px 15px 10px !important
}

footer#footer .footer-top .footer-title {
    margin-bottom: 10px;
}

footer#footer .footer-top .footer-title h3 {
    margin: 0px;
    color: var(--main-color);
    font-size: 15px;
    text-transform: uppercase;
}

footer#footer .footer-top .footer-title h3 i {
    margin-right: 2px;
}

footer#footer .footer-top .footer-menu ul li {
    border: 0px;
}


footer#footer .footer-top .footer-menu ul li a {
    padding: 0px 0 5px 15px !important;
    position: relative;
}

footer#footer .footer-top .footer-menu ul li a:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 40%;
    transform: translateY(-50%);
}

.mt-2 {
    margin-top: 20px;
}

footer#footer .footer-top > .footer-social a {
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    line-height: 35px;
    text-align: center;
}

footer#footer .footer-top > .footer-social a:last-child {
    margin: 0px;
}

footer#footer .copyright {
    margin-top: 17px;
    padding: 20px 0 0 0;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.footer-menu-container {
    width: 100%;
    display: inline-block;
    padding: 30px 0;
    background: #fff !important;
}

.footer-menu-container .footer-title:after {
    content: '';
    width: 50%;
    left: 0px;
    border: 0;
    height: 1px;
    background: var(--main-color);
    display: block;
    position: absolute;
    bottom: 0px;
}

.footer-menu-container .footer-title {
    border-bottom: 1px solid #f2f2f2;
    padding: 0 0 5px 0;
    position: relative;
    margin: 0 0 10px 0;
}

.footer-menu-container .footer-title h3 {
    margin: 0px;
    color: var(--main-color);
    font-size: 15px;
    text-transform: uppercase;
}

.footer-menu-container .footer-menu ul li {
    border: 0 !important;
    margin: 0 0 5px 0 !important;
}

.footer-menu-container .footer-menu ul li a {
    color: #333;
    font-size: 14px;
    padding: 0px;
    position: relative;
}

.footer-menu-container .footer-menu ul li a:hover {
    color: var(--main-color)
}

.footer-menu-container .footer-menu ul li a:before {
    content: '\f054';
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    font-size: 12px;
    margin-right: 4px;
}

.footer-social {
    background: #F3F5F7;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    padding: 15px;
}

.footer-absolute {
    text-align: center;
    background: linear-gradient(to bottom, #00AD4E, #069A4B);
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
}

.footer-social h3 {
    text-align: center;
    text-transform: uppercase;
    color: #333;
    margin: 0 0 10px 0;
    font-size: 15px;
}

.footer-social .social-body a img {
    width: 100%;
}

.footer-social .social-body {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.footer-social .social-body a {
    width: calc(100% / 5);
    padding: 5px;
}

footer#footer .footer-bct {
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    padding: 10px 0px;
    display: flex;
}

footer#footer .footer-bct .bct-item a p {
    color: var(--main-color) !important;
    margin: 5px 0;
    font-size: 11px !important;
    text-transform: uppercase;
}

footer#footer .footer-bct .bct-item a span {
    font-size: 12px !important;
    line-height: 15px !important;
    display: block;
}

footer#footer .footer-bct .bct-item {
    width: calc(100% / 3) !important;
    text-align: center;
    padding: 0 5px;
}

/**banner sale**/
section#sec-banner-sale {
    width: 100%;
    display: inline-block;
    padding: 25px 0;
}

section#sec-banner-sale .banner-sale {
    width: 100%;
    height: 350px;
    border-radius: 5px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

section#sec-banner-sale .banner-sale img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

section#sec-banner-sale .banner-sale:hover img {
    transition: 0.3s ease-in-out;
    transform: scale3d(1.1, 1.1, 1.1) rotate(1deg);
}

/**home-title**/
.home-title {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-title h3 {
    margin: 0px;
    color: var(--main-color);
    font-weight: var(--main-fonts-bold);
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-title a {
    color: #000;
    font-size: 15px;
    font-weight: 700;
}

/**source**/
section.sec-course {
    width: 100%;
    display: inline-block;
    padding: 40px 0;
    position: relative;
    background: #F3F5F7;
    background-size: cover;
}

.course-swiper .swiper-wrapper {
    padding: 10px;
}

.course-item {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 1px 1px rgb(20 23 28 / 10%), 0 3px 1px 0 rgb(20 23 28 / 10%);
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
}

.course-item .course-thumbnail {
    width: 100%;
    height: 200px;
    border-radius: 15px 15px 0 0;
}

.course-item .course-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 15px 15px 0 0;
}

.course-item .course-content {
    width: 100%;
    padding: 10px;
}

.course-item .course-category {
    font-size: 13px;
    font-weight: var(--main-fonts-bold);
    color: #4DB2FF;
    margin-bottom: 5px;
}

.course-item .course-category span:last-child {
    display: none;
}

.course-item .course-content h3 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 20px;
    height: 40px;
    font-weight: var(--main-fonts-bold);
    color: var(--main-color);
    margin: 0px 0 5px 0;
}

.course-item .course-content h3 a {
    color: var(--main-color)
}

.course-item .course-content .course-teacher {
    font-size: 14px;
    margin-bottom: 5px;
    color: #000;
}

.course-item .course-content .course-teacher span:last-child {
    display: none;
}

.course-item .course-content .course-teacher b {
    font-weight: 700;
}

.course-item .course-content .course-mt {
    font-size: 14px;
    margin-bottom: 5px;
    color: #000;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.course-item .course-content .course-info p {
    font-size: 14px;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
}

.course-item .course-content .course-icon {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0px;
    top: 3px;
    display: inline-block;
    object-fit: contain;
}

.course-item .course-content .course-icon.hover {
    display: none;
}

.course-item:hover {
    transition: 0.3s ease-in-out;
    transform: translateY(-5px);
}

.course-item:hover .course-mt {
    transition: 0.3s ease-in-out;
    color: #fff;
}

.course-item:hover .course-icon.on {
    display: none;
}

.course-item:hover .course-icon.hover {
    display: block;
}

.course-item .course-video {
    width: auto;
    display: inline-block;
    background: linear-gradient(to bottom, #00AD4E, #069A4B);
    padding: 5px 15px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    margin: 10px 0;
}

/**breadcumbs**/
section#breadcrumbs {
    background: #eaf2f7;
}

section#breadcrumbs .breadcrumb a {
    line-height: 25px;
    color: #333;
}

section#breadcrumbs .breadcrumb i {
    margin: 0px 10px;
    line-height: 25px;
}

section#breadcrumbs .breadcrumb {
    margin: 0px;
    background: transparent !important;
    padding: 10px 0;
}

section#breadcrumbs .breadcrumb a.current {
    color: var(--main-color);
    font-weight: 700;
}

#category-page {
    margin: 30px 0;
    width: 100%;
    display: inline-block;
}

header.header-single {
    width: 100%;
    display: inline-block;
    margin-bottom: 25px;
}

header.header-single h1 {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
}

/**product related**/
.product-footer {
    width: 100%;
    display: inline-block;
    margin: 30px 0 0 0;
}

.category-title h3 {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
}

/**widget**/
.widget {
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
}

.widget-title h3 {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.widget-title h3:after {
    content: '';
    height: 3px;
    width: 50px;
    background: var(--main-color);
    display: block;
    position: absolute;
    bottom: -10px;
}

.widget-product-item {
    width: 100%;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
    transition: 0.3s ease-in-out
}

.widget-product-item:not(:last-child) {
    margin-bottom: 10px;
}

.widget-product-item .widget-product-thumbnail {
    width: 100px;
    padding: 10px;
    height: 80px;
    float: left;
}

.widget-product-item .widget-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.widget-product-item .widget-product-content {
    width: calc(100% - 100px);
    float: left;
    padding: 10px;
}

.widget-product-item .widget-product-content h3 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 20px;
    height: 40px;
    font-weight: var(--main-fonts-bold);
    color: var(--main-color)
}

.widget-product-item .widget-product-content .product-price del {
    font-size: 12px;
    color: gray;
    margin-left: 3px;
}

.widget-product-item .widget-product-content .product-price ins {
    text-decoration: unset !important;
    color: var(--main-hover);
    font-weight: var(--main-fonts-bold);
    font-size: 13px;
}

.widget-product-item:hover {
    transition: 0.3s ease-in-out;
    box-shadow: unset !important;
    background: var(--main-color);
    transform: translateY(-5px);
}

.widget-product-item:hover h3 {
    color: #fff;
}

#header .header-right {
    display: flex;
    justify-content: end;
    height: 70px;
    align-items: center;
}

#header .header-right .header-support a img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    margin-right: 5px;
}

#header .header-right .header-support a {
    color: var(--main-color);
    font-family: var(--main-fonts);
    font-weight: var(--main-fonts-normal);
    font-size: 16px;
}

#header .header-right .header-support a:hover {
    color: var(--main-hover);
}

#header .header-login a {
    border: 1px solid #FF9700;
    background: #FF9700;
    padding: 6px 15px;
    border-radius: 5px;
    margin-left: 15px;
    color: #fff;
    font-size: 15px;
    transition: 0.3s ease-in-out;
}

#header .header-login a:first-child {
    margin-left: 0 !important;
}

#header .header-account a {
    border: 0px !important;
    margin: 0px !important;
}

#header .header-login a.hd-login {
    background: var(--main-color);
    color: var(--main-bg-white);
    border-color: var(--main-color)
}

#header .header-login a:hover {
    transition: 0.3s ease-in-out;
    background: var(--main-color);
    color: var(--main-bg-white)
}

#header .header-login a.hd-login:hover {
    background: #fff;
    color: var(--main-color)
}

#header .header-account a:hover {
    background: transparent !important;
}

#header .header-account a:hover h3 {
    color: var(--main-color) !important;
}

/**header account**/
.header-account {
    background: #fff;
    position: relative;
}

.header-account a {
    border: 1px solid var(--main-color);
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 10px !important;
    padding: 10px !important;
    margin-left: 15px;
}

.header-account img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid;
    background: #fff;
    object-position: top;
}

.header-account h3 {
    margin: 0 0 0 10px;
    font-size: 15px;
    color: var(--main-color);
}

.header-account a:hover h3 {
    color: #fff;
}

.header-account-list {
    position: absolute;
    top: 45px;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 28px 0 var(--shadow-2), 0 2px 4px 0 var(--shadow-1), inset 0 0 0 1px var(--shadow-inset);
    border-radius: 10px !important;
    width: 200px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

.header-account-list.is_focus {
    z-index: 99999;
}

.header-account-list.is_focus {
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
    opacity: 1;
    top: 55px;
    visibility: visible;
}

.header-account-list ul {
    padding: 0px !important;
    margin: 0px !important;
}

.header-account-list ul li {
    list-style: none;
}

.header-account-list ul li:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}

.header-account-list ul li a {
    font-weight: 700;
    height: unset;
    padding: 10px !important;
}

.header-account-list ul li a:hover {
    color: var(--main-color-hover) !important;
}

/**dashboard**/
section.account-info {
    width: 100%;
    display: inline-block;
    margin: 40px 0 0 0;
}

a.btnShowInfo {
    background: transparent !important;
    padding: 0px !important;
    font-size: 14px;
}

section.account-info .account-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

section.account-info .account-banner {
    width: 100%;
    height: 400px;
    position: relative;
}

.file-banner {
    display: none !important;
}

button.changeBanner {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 0 10px !important;
    width: 29px;
    height: 29px;
    border-radius: 0px;
    background: url(../images/sua-tt-ca-nhan.svg) center center no-repeat;
    background-color: rgba(0, 0, 0, 0.8);
    background-size: auto;
    border: 0px !important;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 7%);
    z-index: 999;
    color: #fff;
    font-size: 14px;
}

section.account-info .account-panel {
    position: relative;
    width: 100%;
    background: #fff;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
}

section.account-info .account-panel .account-avatar {
    display: flex;
    align-items: end;
}

section.account-info .account-panel .account-avatar .account-img {
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    border: 2px solid var(--main-color);
}

section.account-info .account-panel .account-avatar .account-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

section.account-info .account-panel .account-avatar .account-avatar-info {
    margin-left: 15px;
}

section.account-info .account-panel .account-avatar-info p {
    font-size: 15px;
    margin: 0px;
}

section.account-info .account-panel .account-avatar-info h3 {
    color: var(--main-color);
    font-size: 25px;
    margin-bottom: 5px;
}

section.account-info .account-panel .account-action {
    margin-top: 30px;
}

section.account-info .account-panel .account-action a {
    padding: 6px 15px;
    border-radius: 5px;
    border: 1px solid var(--main-color);
    margin-left: 13px;
    color: var(--main-color);
    display: inline-block;
}

section.account-info .account-panel .account-action a:nth-child(2) {
    background: var(--main-color);
    color: #fff;
}

section.account-info .account-panel .account-action a:hover {
    background: var(--main-color);
    color: #fff;
}

section.account-info .account-panel .account-action a:nth-child(2):hover {
    background: transparent;
    color: var(--main-color);
}

section.account-info .account-panel .changeImg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    padding: 0;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: url(../images/sua-tt-ca-nhan.svg) center center no-repeat;
    background-color: var(--main-color);
    background-size: auto;
    border: 0px !important;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 7%);
}

section.account-info .account-panel .file-upload {
    display: none;
}

/**sec-dashboard**/

#sec-dashboard {
    width: 100%;
    display: inline-block;
    padding: 30px 0;
    background: #f5f8fa;
}

#sec-dashboard .account-menu h3 {
    text-align: center;
    padding: 8px 0;
    color: #fff;
    background: var(--main-color);
    font-size: 20px;
    margin: 0px;
    text-transform: uppercase;
}

#sec-dashboard .account-menu {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 2px solid var(--main-color);
}

#sec-dashboard .account-menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#sec-dashboard .account-menu ul li {
    padding: 8px 15px;
}

#sec-dashboard .account-menu ul li:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}

#sec-dashboard .account-menu ul li a {
    color: #333;
}

#sec-dashboard .account-menu ul li:hover {
    background: var(--main-color);
}

#sec-dashboard .account-menu ul li:hover a {
    color: #fff;
}

#sec-dashboard .account-body {
    width: 100%;
    display: inline-block;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #e9eef1;
}

#sec-dashboard .account-body .account-pd {
    width: 100%;
    display: inline-block;
    padding: 15px;
}

#sec-dashboard .account-body .account-title h3 {
    margin: 0px !important;
    background: var(--main-color);
    border-radius: 5px 5px 0 0;
    padding: 10px 15px;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}

#sec-dashboard .account-body .form-group b {
    color: #ff3333;
}

.account-header-menu {
    height: 45px;
}

.account-header-menu ul {
    display: flex;
    margin: 0px !important;
    padding: 0px !important;
}

.account-header-menu ul li {
    list-style: none;
    height: 45px;
    position: relative;
    transition: 0.3s ease-in-out;
    padding: 0px 15px !important;
}

.account-header-menu ul li a {
    font-weight: 700;
    color: #65676B;
    height: 45px;
    text-align: center;
    line-height: 45px;
    display: block;
}

.account-header-menu ul li.active a {
    color: var(--main-color) !important;
}

.account-header-menu ul li a:hover {
    color: var(--main-color) !important;
}

.account-header-menu ul li:after {
    content: '';
    height: 3px;
    background: var(--main-color);
    width: 0;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transition: 0.3s ease-in-out;
}

.account-header-menu ul li.active:after, .account-header-menu ul li:hover:after {
    transition: 0.3s ease-in-out;
    width: 100%;
}

/**cart**/
.cc_block_intro_shop_cart {
    padding: 30px 0;
    background-color: #505763;
}

.cc_intro_shop_cart_hook h1 {
    font-weight: 500;
}

.form-promotion .css-apply {
    border: 1px solid #948a8acc !important;
    background: #948a8acc;
    border: 0;
}

.form-promotion .css_input_apply_code {
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-in-out;
}

.css_active_code {
    background: #ec5252 !important;
}

.cc_block_list_shop_cart {
    display: flex;
    align-items: center;
    min-height: 150px;
    padding: 30px 0;
    background-color: var(--white);
}

.cc_list_shop_cart_layout {
    border: 1px solid #dedfe0;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 15px;
    position: relative;
}

.cc_list_shop_cart_img {
    width: 18%;
}

.cc_list_shop_cart_img img {
    width: 130px;
    height: 73px;
    object-fit: contain;
}

.cc_list_shop_cart_title {
    margin-right: 15px;
}

.cc_list_shop_cart_title a {
    color: var(--dark);
}

.cc_list_shop_cart_title p {
    margin-bottom: 0;
    color: var(--gray);
    font-size: var(--fsize-small);
}

.cc_list_shop_cart_money p {
    color: var(--main-color);
    margin-bottom: 0;
}

.cc_list_shop_cart_money s {
    color: var(--gray);
}

.cc_list_shop_cart_money {
    margin: 0 15px;
    flex: 1;
}

.cc_list_shop_cart_img,
.cc_list_shop_cart_remove,
.cc_list_shop_cart_money,
.cc_list_shop_cart_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc_list_shop_cart_remove .btn {
    background-color: transparent;
    color: var(--gray);
}

.cc_list_shop_cart_remove .btn:hover {
    background-color: var(--main-color);
    color: var(--white);
}

.cc_list_shop_cart_payment > .btn {
    width: 100%;
    margin: 15px 0;
}

.cc_list_shop_cart_payment form {
    display: flex;
}

.cc_list_shop_cart_payment_child p,
.cc_list_shop_cart_payment_child s {
    margin-bottom: 0;
    color: var(--gray);
}

.cc_list_shop_cart_payment_child p:first-child {
    font-size: 20px;
    color: var(--gray);
}

.cc_list_shop_cart_payment_child p:nth-child(2) {
    font-size: 32px;
    color: var(--dark);
}

.cc_list_shop_cart_payment_child {
    display: block;
}

.cc_list_shop_cart_payment_child > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc_list_shop_cart_content {
    width: 65%;
    font-size: var(--fsize-small);
    color: var(--dark);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc_list_shop_cart_content:hover {
    color: var(--dark);
    text-decoration: none;
}

.cc_list_shop_cart_content > div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc_list_shop_cart_payment .cc_comp_btn_main_color {
    padding: 13px 0px;
}

.cc_list_shop_cart_payment form input {
    width: calc(100% - 100px);
    padding-left: 10px;
    font-size: 12px;
}

.cc_list_shop_cart_payment form button {
    font-size: 15px;
}

.cart-empty h4 {
    font-size: 20px;
}

.cart-empty img {
    height: 200px;
    margin-bottom: 30px;
}

.cart-empty {
    text-align: center;
}

.cc_list_shop_cart_money .font-weight-bold {
    color: var(--main-color)
}

.go_cart {
    width: 100% !important;
    background-color: #fff !important;
    border: 1px solid var(--gray) !important;
    border-radius: 2px !important;
    color: var(--dark) !important;
}

.go_cart:hover {
    background-color: #f2f3f5 !important;
    border: 1px solid var(--gray) !important;
    color: var(--dark) !important;
}

/**checkout**/
.cc_block_payment_nav {
    background: #f2f3f5;
}

.cc_payment_total_pay .cc_payment_cart {
    border: 1px solid #cdcdcd;
}

.select2-selection__clear {
    display: none;
}

.cc_payment_2_form .form-inline .form-group {
    align-items: flex-start;
}

.cc_payment_2_form .form-inline .form-group label.col-sm-4 {
    padding-top: 9px;
}

.cc_payment_item_child {
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    flex-direction: row;
}

.cc_payment_item_child span {
    color: var(--dark);
    font-weight: 600;
    white-space: nowrap;
}

.cc_payment_item_step {
    border: 2px solid;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.cc_payment_item_step_hide {
    display: none;
}

.form-promotion {
    display: none;
    margin-top: 15px;
}

.form-promotion .css-apply {
    border: 1px solid #948a8acc !important;
    background: #948a8acc;
    border: 0;
    margin-left: 8px;
}

.css_active_code {
    background: #ec5252 !important;
    border: 1px solid #ec5252 !important;
}

.cc_payment_item_step_done {
    font-size: 24px;
    margin-right: 10px;
    color: #60A222 !important;
    display: none;
}

.cc_payment_item_step_done_show {
    display: block;
}

.cc_payment_item.active span {
    color: var(--white);
}

.cc_payment_item_step_done i {
    background: #fff;
    border-radius: 50%;
}

.cc_payment_item:not(.third_color):nth-child(2)::after {
    border-left: 11px solid #dedfe2;
}

.cc_payment_item:not(.third_color).active::after {
    border-left: 11px solid var(--main-color);
}

.cc_payment_item:not(.third_color)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 11px solid #f1f1f1;
}

.cc_payment_item.sec_color {
    background-color: #dedfe2;
}

.cc_payment_item.third_color::after {
    border-left: 12px solid transparent;
}

.cc_block_payment_success {
    display: none;
}

.cc_block_payment, .cc_block_payment_done, .cc_block_payment_table {
    background-color: var(--white);
    padding: 18px 0 30px;
}

.cc_block_payment .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.cc_block_payment .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--main-color);
}

.cc_payment_1_or {
    position: relative;
}

.cc_payment_1_or span {
    position: absolute;
    background-color: #fff;
    left: 50%;
    top: -10px;
    padding: 0 20px;
    transform: translate(-50%);
    color: var(--gray);
    white-space: nowrap;
}

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

.cc_payment_1_form {
    border: 1px solid var(--light-gray);
    padding: 20px;
    border-radius: 3px;
}

.cc_payment_1_form_child {
    margin-left: auto;
    margin-right: auto;
}

.cc_payment_1_login_diffrent > div {
    width: 100%;
}

.cc_payment_1_login_diffrent a {
    justify-content: center;
    padding: 5px 20px;
    font-size: 14px;
}

.cc_payment_1_login_diffrent a span {
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 5px;
    white-space: nowrap;
}

.cc_payment_1_login_diffrent a img {
    vertical-align: middle;
}

.cc_payment_number {
    padding: 0 10px;
    border-left: 2px solid var(--main-color);
    display: flex;
    justify-content: space-between;
}

.cc_payment_number span:last-child {
    color: var(--sec-color);
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

.cc_payment_number i {
    font-size: 8px;
    border: 1px solid var(--sec-color);
    border-radius: 50%;
    padding: 3px;
    color: var(--sec-color);
}

.cc_payment_cart {
    border-radius: 3px;
}

.cc_navbar_shop_cart_total hr {
    border-top: 1px dashed #ddd;
    margin-top: 16px;
    margin-bottom: 16px;
}

.cc_payment_cart .cc_navbar_shop_cart_total p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cc_payment_cart .cc_navbar_shop_cart_total p span {
    font-size: 14px;
    color: var(--main-color);
}

.cc_payment_cart .cc_navbar_shop_cart_total p span:first-child {
    font-size: 14px !important;
    color: var(--gray);
}

.cc_payment_cart .cc_navbar_shop_cart_total p:nth-child(2) span:last-child {
    color: var(--sec-color);
}

.cc_payment_step2 {
    display: none;
}

.cc_payment_2_title {
    padding: 0 10px;
    border-left: 2px solid var(--main-color);
    display: flex;
    justify-content: space-between;
}

.cc_payment_2_note {
    padding: 10px;
    border: 1px solid var(--sec-color);
    border-radius: 3px;
    color: var(--sec-color);
}

.cc_payment_2_sub_title i {
    color: var(--main-color);
}

.cc_payment_2_form .form-inline .form-group .form-control {
    width: 100% !important;
}

.cc_payment_2_form .form-inline .form-group .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #cdcdcd;
}

.cc_payment_2_form .form-inline .form-group .form-control::-moz-placeholder { /* Firefox 19+ */
    color: #cdcdcd;
}

.cc_payment_2_form .form-inline .form-group .form-control:-ms-input-placeholder { /* IE 10+ */
    color: #cdcdcd;
}

.cc_payment_2_form .form-inline .form-group .form-control:-moz-placeholder { /* Firefox 18- */
    color: #cdcdcd;
}

.cc_payment_2_form_note {
    font-size: 13px;
    color: var(--gray);
    font-style: italic;
}

.cc_payment_2_form .form-group {
    width: 100%;
    margin-bottom: 10px;
}

.cc_payment_2_form .form-group label {
    justify-content: flex-start;
}

.cc_payment_2_form .form-group label span {
    color: var(--main-color);
}

.cc_payment_2_form .form-control:focus {
    border: 1px solid var(--dark);
    box-shadow: none;
}

.cc_payment_2_time_step {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.cc_payment_2_time_step > span:last-child {
    color: var(--sec-color);
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.cc_payment_2_time_step i {
    font-size: 8px;
    border: 1px solid var(--sec-color);
    border-radius: 50%;
    padding: 3px;
    color: var(--sec-color);
}

.cc_payment_2_time_course p {
    font-size: var(--fsize-small);
    color: var(--gray);
}

.cc_payment_step3 {
    display: none;
}

.cc_payment_3 .custom-control-label {
    display: flex;
    align-items: center;
}

.cc_payment_3 .custom-control-label img {
    width: 64px;
}

.cc_payment_3_noty {
    font-size: 13px;
}

.cc_payment_3 .custom-control-label::before,
.cc_payment_3 .custom-control-label::after {
    top: 50%;
    transform: translate(0, -50%);
}

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

.cc_payment_3_term_edit_info span:last-child {
    color: var(--sec-color);
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

.cc_payment_3_term_edit_info i {
    font-size: 8px;
    border: 1px solid var(--sec-color);
    border-radius: 50%;
    padding: 3px;
    color: var(--sec-color);
}

.cc_payment_3_term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.cc_payment_3_term .custom-control {
    line-height: 1.5rem;
}

.cc_payment_3_term_check .custom-control-label {
    font-size: var(--fsize-small);
}

.cc_payment_3_term_check .custom-control-label a {
    color: var(--sec-color);
}

.show {
    display: block;
}

.cc_payment_item.active {
    background-color: var(--main-color);
}

.cc_payment_done_content p:first-child {
    color: #60a222;
    font-size: 20px;
}

.cc_payment_done_content p:last-child {
    padding: 10px 20px;
    border-radius: 40px;
    background-color: #60a222;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    color: var(--white);
}

.cc_payment_done_details {
    margin-top: 6em;
}

.cc_payment_done_details p {
    color: var(--dark);
}

.cc_payment_done_details_2 {
    background-color: #efefef;
    padding: 10px;
    border-radius: 3px;
}

.cc_payment_table_name p {
    margin-bottom: 0;
    font-size: var(--fsize-small);
}

.cc_payment_table_thead tr th {
    border-bottom: none;
    border-top: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cc_payment_table_thead {
    background-color: #f5f5f5;
}

.cc_payment_table_tbody tr td {
    border-top: none;
    border-bottom: 1px solid var(--light-gray);
}

.cc_payment_table_layout tr th,
.cc_payment_table_layout tr td {
    vertical-align: middle;
}

.cc_payment_table_img {
    display: flex;
    align-items: center;
}

.cc_payment_done_accordion_layout .card {
    border: none;
}

.cc_payment_done_accordion_layout .card-header {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
    cursor: pointer;
}

.cc_payment_done_accordion_layout .card-header span {
    display: flex;
    align-items: center;
}

.cc_payment_ship_default {
    color: #60a222;
}

.cc_payment_done_accordion_layout .card-body {
    padding-left: 0;
    padding-right: 0;
}

.cc_payment_done_accordion_layout .card-header.collapsed .cc_payment_arrow[data-type="up"],
.cc_payment_done_accordion_layout .card-header .cc_payment_arrow[data-type="down"] {
    display: none;
}

.cc_payment_done_accordion_layout .card-header .cc_payment_arrow[data-type="up"],
.cc_payment_done_accordion_layout .card-header.collapsed .cc_payment_arrow[data-type="down"] {
    display: block;
}

#js-form-info-receiver {
    display: none;
}

.cc_payment_1_form .help-block {
    color: #737373;
}

#js-form-export-bill {
    margin-top: 10px;
    display: none;
}

#js-form-export-bill .custom-checkbox {
    margin-bottom: 8px;
}

#js-form-export-bill .help-block {
    font-size: 13px;
}

.select2-container--default {
    width: 100% !important;
}

.select2-selection--single {
    height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 66% !important;
}

.input-group-addon {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 0;
    color: #555555;
    text-align: center;
    background-color: #eeeeee;
    border: 1px solid #ccc;
}

.info_user_pay {
    margin: 0 0 10px 0;
}

.input-group-addon input {
    padding: 19px;
}

.purchase_method_box {
    margin: 20px 0;
    background: #f2f3f5;
    padding: 20px;
}

#section-payment, .hide_info_order_online {
    display: none;
}

.css_disable_img {
    opacity: 0.5;
}

.css_disable_img img {
    filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
    z-index: 3;
    mix-blend-mode: overlay;
    box-shadow: 0 0 200px black inset;
}

.cc_block_payment_type_info .cc_payment_number a {
    color: var(--sec-color);
}

.cc_block_payment_nav {
    background: #f2f3f5;
}

.cc_payment_total_pay .cc_payment_cart {
    border: 1px solid #cdcdcd;
}

.select2-selection__clear {
    display: none;
}

.cc_payment_2_form .form-inline .form-group {
    align-items: flex-start;
}

.cc_payment_2_form .form-inline .form-group label.col-sm-4 {
    padding-top: 9px;
}

.orderBody .th-head td {
    padding: 10px 10px !important;
}

.orderBody .th-head {
    background: var(--main-color);
    color: #fff;
}

.orderBody tr:nth-child(even) {
    background: #f2f2f2f2;
    font-size: 15px;
}

.orderBody tr td {
    padding: 10px;
}

.orderBody tr td:nth-child(1) {
    width: 30%;
}

.orderBody {
    margin-bottom: 20px;
}

.cc_comp_icon_noty {
    margin: 0 10px;
    padding: 14px 0;
    position: relative;
}

.cc_comp_icon_noty > .btn {
    border-radius: 50%;
    height: 100%;
    width: 38px;
    color: var(--gray);
    cursor: pointer;
    position: relative;
}

.cc_comp_icon_noty i {
    margin-left: -3px;
    font-size: 20px;
}

.cc_comp_icon_noty_num {
    position: absolute;
    top: 0px;
    right: -3px;
    background-color: var(--main-color);
    border-radius: 50%;
    font-size: var(--fsize-extra-small);
    color: var(--white);
    padding: 0 5px;
    font-weight: 900;
}

.cc_comp_dropdown {
    position: absolute;
    padding: 0px;
    width: 300px;
    box-shadow: 4px 4px 16px rgb(20 23 28 / 25%);
    display: none;
    background-color: var(--white);
    top: 65px;
    right: 0;
    border-radius: 3px;
}

.cc_comp_shop_cat_empty {
    padding: 31px;
}

.cc_comp_dropdown a {
    color: var(--sec-color);
}

.cc_comp_icon_noty i {
    margin-left: -3px;
    font-size: 20px;
}

.cc_comp_dropdown p {
    font-size: var(--fsize-small);
    color: var(--gray);
}

.cc_comp_search .btn:hover, .cc_comp_search input:focus ~ .input-group-append .btn:hover {
    background-color: var(--main-color);
    color: var(--white);
}


.cc_block_navbar {
    height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--bshadow);
    background-color: var(--white);
    position: fixed;
    width: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
}

.cc_navbar_child {
    display: flex;
    justify-content: space-between;
    background: inherit;
    box-sizing: border-box;
    height: 65px;
    position: relative;
    z-index: 1011;
}

.cc_navbar_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cc_navbar_center {
    flex: 1;
    min-width: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cc_navbar_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cc_navbar_right .btn {
    height: calc(2.25rem + 6px);
}

.cc_navbar_logo {
    width: 110px;
    height: 100%;
    object-fit: contain;
}

.cc_navbar_child .cc_navbar_logo .navbar-brand {
    height: 100%;
}

.cc_navbar_cat {
    min-width: 106px;
    /*margin: 0 10px;*/
    position: relative;
    padding: 22px 0;
    cursor: pointer;
}

.cc_navbar_cat_title, .cc_navbar_cat_icon {
    color: var(--gray);
}

.cc_navbar_cat_title {
    margin-left: px;
    text-transform: uppercase;
    font-size: var(--fsize-small);
}

.cc_navbar_mobi_humbuger, .cc_navbar_mobi_search {
    background-color: var(--white);
    color: var(--gray);
}

.cc_navbar_mobi_search {
    display: none;
    margin-right: 10px;
}

.cc_navbar_log button:first-child {
    margin-right: 10px;
}

/* css navbar dropdown */
.cc_navbar_cat_dropdown {
    background-color: var(--white);
    top: 65px;
    left: 0;
    position: relative;
    box-shadow: 4px 4px 16px rgb(20 23 28 / 25%) !important;
    border: 1px solid #f2f2f2 !important;
}

a.btnClick {
    position: absolute !important;
    top: 0px;
    right: 10px;
    z-index: 999;
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

a.btnClick i {
    margin: 0px !important;
}

.cat-name {
    font-size: 15px;
    display: inline-block;
    width: calc(100% - 70px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc_navbar_cat_dropdown::before,
.cc_navbar_cat_dropdown::after {
    border-style: solid;
    border-width: 0 10px 13px;
    content: "";
    height: 0;
    position: absolute;
    left: 14px;
    width: 0;
}

.cc_navbar_cat_dropdown::before {
    border-color: transparent transparent #e8e9eb;
    top: -14px;
}

.cc_navbar_cat_dropdown::after {
    border-color: transparent transparent #fff;
    top: -12px;
}

.cc_navbar_cat_dropdown_sec, .cc_navbar_cat_dropdown_third {
    background-color: #f9f9f9;
    top: 0;
    left: 100%;
}

.cc_navbar_cat_dropdown,
.cc_navbar_cat_dropdown_sec,
.cc_navbar_cat_dropdown_third {
    position: absolute;
    padding: 10px 0;
    width: 324px;
    box-shadow: 4px 4px 16px rgba(20, 23, 28, .25);
    display: none;
    border-bottom-left-radius: 3px;
}

.cc_navbar_cat_dropdown ul {
    padding-left: 0;
}

.cc_navbar_cat_dropdown li {
    list-style-type: none;
    padding: 5px 15px;
}

.cc_navbar_cat_dropdown li > .submenu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top: 0px;
    left: 100%;
    width: 100%;
    min-height: 100%;
    text-align: left;
    margin-top: 30px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f2f2f2;
}


.cc_navbar_cat_dropdown li > .submenu ul {
    width: 100%;
    float: left;
    color: white;
    margin: 0 0 0 1%;
}

.cc_navbar_cat_dropdown li > .submenu ul li {
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.cc_navbar_cat_dropdown li > .submenu ul li a {
    display: block;
    padding: 8px 0px 7px 10px;
}

.cc_navbar_cat_dropdown ul li:hover > .submenu {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
}

.cc_navbar_cat_dropdown li a:hover {
    color: #007791;
}

.cc_navbar_cat_dropdown li .cc_navbar_cat_dropdown_title {
    line-height: 1;
    vertical-align: middle;
}

.cc_navbar_cat_dropdown li i {
    vertical-align: middle;
    color: #a1a7b3;
    margin-right: 6px;
}

.cc_navbar_cat_dropdown_third_title {
    cursor: text;
}

.cc_navbar_cat_dropdown li a {
    text-decoration: none;
    color: #29303b;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    position: relative;
    display: block;
}

.cc_navbar_acount {
    /*display: none;*/
}

.cc_navbar_acount > a {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    border-radius: 50px;
    color: var(--gray);
    white-space: nowrap;
    /*border: 1px solid var(--light-gray);*/
    background-color: var(--white);
    text-align: center;
    padding: 8px;
}

.cc_navbar_acount li:hover {
    background-color: var(--light);
}

.cc_navbar_acount_icons {
    color: var(--gray);
    font-size: 15px;
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    max-width: 100%;
    line-height: 40px;
}

.cc_navbar_acount_icons i {
    display: inline-block;
    vertical-align: middle;
}

.profile .cc_navbar_acount_icons {
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border-style: solid;
    border-width: 0px;
    color: var(--gray);
    font-size: 15px;
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    max-width: 100%;
    line-height: 40px;
}

.cc_comp_shop_cat_empty {
    padding: 31px;
}

.cc_navbar_acount_dropdown a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--gray);
    font-size: 15px;
    font-weight: 400;
    padding: 0px 22px;
    width: 100%;
    position: relative;
}

.cc_navbar_acount_dropdown li.profile a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--gray);
    font-size: 15px;
    font-weight: 400;
    padding: 10px 22px;
    width: 100%;
    position: relative;
}

.cc_navbar_acount_dropdown a:hover {
    text-decoration: none;
}

.cc_navbar_acount_dropdown ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.cc_navbar_acount_options {
    flex: 1;
    min-width: 1px;
    display: inline-block;
}

.cc_navbar_acount_options span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray);
}

.cc_navbar_mobile_search {
    position: absolute;
    top: 65px;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--white);
    display: none;
}

.cc_navbar_mobile_search.active {
    display: block;
}

.cc_navbar_shop_cart {
    /*display: none;*/
}

.cc_navbar_shop_cart_child {
    padding: 10px 0 0;
    max-height: 230px;
    overflow-y: auto;
}

.cc_navbar_shop_cart_child > a {
    display: flex;
    padding: 10px 20px;
}

.cc_navbar_shop_cart_child > a:hover {
    text-decoration: none;
    background-color: var(--light);
}

.cc_navbar_shop_cart_content {
    font-size: var(--fsize-small);
    color: var(--gray);
    overflow: hidden;
    white-space: nowrap;
}

.cc_navbar_shop_cart_content > div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc_navbar_shop_cart_money > span:first-child {
    color: var(--main-color);
}

.cc_navbar_shop_cart_img {
    width: 70px;
    height: 50px;
    min-width: 70px;
}

.cc_navbar_shop_cart_img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.cc_navbar_shop_cart_total {
    padding: 10px 20px;
    background: #f2f3f5;
}

.cc_navbar_shop_cart_total p span:first-child,
.cc_navbar_shop_cart_total p s {
    font-size: 18px !important;
}

.cc_navbar_shop_cart_total p span.package-price {
    font-size: 18px;
    color: #29303b;
    font-weight: 600 !important;
}

.cc_navbar_shop_cart_total p s {
    display: block;
    font-size: 15px !important;
    margin-left: 100px;
}

.cc_navbar_shop_cart_total .btn {
    width: 100%;
    border-radius: 2px;
    background-color: #007791;
}

/**search**/
.cc_comp_search {
    width: 100%;
}

.cc_comp_search .form-inline {
    width: 100%;
}

.cc_comp_search form {
    flex-flow: row;
}

.form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}

.cc_comp_search .input-group {
    background-color: #f2f3f5;
    width: 100%;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}

.cc_comp_search input {
    font-size: var(--fsize-small);
    border: 1px solid transparent;
    background-color: transparent;
    height: calc(2.25rem + 6px);
}

.cc_comp_btn_noty a {
    height: auto !important;
}

.cc_comp_btn_active_cod {
    background-color: var(--white);
    color: var(--gray);
    border-radius: 2px;
    color: var(--gray);
    font-size: var(--fsize-small);
    padding: 7px 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.cc_navbar_log button:first-child {
    margin-right: 10px;
}

.cc_navbar_right .btn {
    height: calc(2.25rem + 6px);
}

.cc_comp_btn_outline_color {
    background-color: var(--white);
    color: var(--gray);
    border: 1px solid var(--gray);
    border-radius: 2px;
}

.cc_comp_btn_main_color {
    background: linear-gradient(to bottom, #00AD4E, #069A4B);
    border-radius: 2px;
    color: #fff;
    border: 1px solid var(--main-color);
}

button.btn.cc_comp_btn_outline_color.js_comp_item_buy_now {
    width: 100%;
}

.cc_comp_btn_second_color:hover, .cc_comp_btn_main_color:hover {
    color: var(--white);
}


.cc_comp_btn_outline_color:hover {
    background-color: #f2f3f5;
}

.cc_comp_icon_noty {
    margin: 0 10px;
    padding: 14px 0;
    position: relative;
}

.cc_comp_icon_noty > .btn {
    border-radius: 50%;
    height: 100%;
    width: 38px;
    color: var(--gray);
    cursor: pointer;
    position: relative;
}

.cc_comp_icon_noty_num {
    position: absolute;
    top: 3px;
    right: -5px;
    background-color: var(--main-color);
    border-radius: 10px;
    font-size: var(--fsize-extra-small);
    color: var(--white);
    padding: 0 5px;
    font-weight: 900;
}

.cc_comp_dropdown {
    position: absolute;
    padding: 0px;
    width: 300px;
    box-shadow: 4px 4px 16px rgb(20 23 28 / 25%);
    display: none;
    background-color: var(--white);
    top: 65px;
    right: 0;
    border-radius: 3px;
}

.cc_comp_shop_cat_empty {
    padding: 31px;
}

.cc_comp_dropdown a {
    color: var(--sec-color);
}

.cc_comp_icon_noty i {
    margin-left: -3px;
    font-size: 20px;
}

.cc_comp_dropdown p {
    font-size: var(--fsize-small);
    color: var(--gray);
}

.cc_comp_search .btn:hover, .cc_comp_search input:focus ~ .input-group-append .btn:hover {
    background-color: var(--main-color);
    color: var(--white);
}

.cc_comp_search .btn {
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--main-color);
    transition: unset;
    border-radius: 0px !important;
}

.cc_comp_btn_active_cod i {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 3px;
}

.cc_navbar_mobile_search {
    position: absolute;
    top: 65px;
    width: 100%;
    z-index: 9900;
    padding: 10px 15px;
    background-color: var(--white);
    display: none;
}

.cc_navbar_mobile_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 48, 59, .55);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    z-index: 999999;
    cursor: pointer;
}

.cc_navbar_mobile_overlay.active {
    visibility: visible;
    opacity: 1;
}

.cc_navbar_mobile_layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 285px;
    max-width: 80%;
    height: 100%;
    z-index: 999999;
    background-color: var(--white);
    padding: 0 15px;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: -moz-transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: -o-transform .6s cubic-bezier(.785, .135, .15, .86);
    transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    overflow-y: auto;
}

.cc_navbar_mobile_layout.active {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.cc_comp_search {
    margin: 0 auto;
}

.cc_navbar_mobile_layout ul li:first-child,
.cc_navbar_mobile_layout:not(.cc_navbar_mobile_categories) ul li:nth-child(2) {
    border-bottom: 1px solid var(--light-gray);
}

.cc_navbar_mobile_layout:not(.cc_navbar_mobile_categories) ul li:nth-child(2) {
    border-bottom: 0;
}

.cc_navbar_mobile_layout li:first-child {
    padding: 1px 0;
}

.cc_navbar_mobile_categories li:first-child {
    padding: 8px 3px;
}

.cc_navbar_mobile_categories li {
    padding: 7px 3px;
}

.cc_navbar_acount > a {
    display: flex;
    border-radius: 50px;
    color: var(--gray);
    white-space: nowrap;
    /*border: 1px solid var(--light-gray);*/
    background-color: var(--white);
    text-align: center;
    padding: 8px;
}

.cc_navbar_mobile_layout a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--gray);
    font-size: 15px;
    font-weight: 400;
    padding: 5px 0;
    width: 100%;
    position: relative;
}

.cc_navbar_mobile_layout a.cc_comp_btn_outline_color {
    display: block;
    text-align: center;
}

.cc_navbar_mobile_layout li.profile a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--gray);
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    position: relative;
}

.cc_navbar_mobile_layout a:hover {
    text-decoration: none;
}

.cc_navbar_mobile_layout ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.cc_navbar_mobile_log_regis {
    margin-top: 12px;
}

.js_navbar_open_categories {
    padding: 9px 1px;
}

.js_navbar_mobile_layout li {
    padding: 7px 5px !important;
}

.cc_navbar_mobile_log_regis .btn {
    width: 100%;
    margin-bottom: 15px;
}

.cc_block_navbar_mobile .cc_navbar_acount_icons {
    width: 20px;
    min-width: 20px;
    height: unset;
    text-align: center;
    line-height: normal;
}

.cc_navbar_acount_icons.border_outline {
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border-style: solid;
    border-width: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.cc_main_menu {
    width: 1000px;
}

.cc_main_menu ul li {
    float: left;
}

.cc_main_menu ul li a {
    color: var(--gray);
    padding: 0px 10px;
    font-size: 14px;
    text-transform: uppercase;
}

.cc_main_menu ul li a:hover {
    color: var(--main-color) !important;
}

@media only screen and (max-width: 768px) {
    .cc_main_menu {
        display: none !important;
    }

    .cc_navbar_mobi_search {
        display: block;
        margin-right: 10px;
    }

    a.btnClick {
        position: absolute !important;
        top: 0px;
        right: 10px;
        z-index: 999;
        display: block;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50%;
        background: #f2f2f2;
        text-align: center;
        line-height: 25px;
    }

    a.btnClick i {
        margin: 0px !important;
    }

    .MenuSub li {
        border: 0px !important;
    }

    .MenuSub {
        background: #f2f2f2;
        padding: 10px 0 10px 20px !important;
    }
}

.course-student .course-thumbnail {
    height: 180px;
}

.course-student .course-action {
    margin-top: 10px;
}

.student-title {
    margin-bottom: 20px;
}

section#checkout {
    width: 100%;
    display: inline-block;
    padding: 30px 0;
    background: #f5f8fa;
}

section#checkout .checkout-images {
    margin-bottom: 30px;
}

section#checkout .checkout-images img {
    margin: 0 auto 15px;
}

section#checkout .checkout-images {
    text-align: center;
}

section#checkout .checkout-images h1 {
    font-size: 25px;
}

.account-img form {
    width: 100%;
    height: 100%;
}

/**page**/
section.page-banner img {
    width: 100%;
}

section#page-content {
    width: 100%;
    display: inline-block;
    padding: 35px 0;
}

.formSearch {
    width: 300px;
    float: right;
    position: relative;
}

.formSearch input.form-control.inputSearch {
    width: 100%;
    border-radius: 4px !important;
    border: 1px solid var(--main-color);
    box-shadow: unset !important;
    height: 40px !important;
}

.formSearch button.btn.btnSearch2 {
    width: 35px;
    height: 35px;
    position: absolute;
    background: var(--main-color);
    top: 2.5px;
    right: 2.5px;
    text-align: center;
    line-height: 35px;
    padding: 0px !important;
    color: #fff;
}

.c-select.c-form > .c_input {
    padding: 0;
    color: #fff;
}

.c-select.c-form > .c_input {
    background: var(--main-color);
    width: 100%;
    display: inline-block;
    height: 40px;
    border-radius: 4px;
    padding: 0 10px !important;
    line-height: 40px;
}

.c-select > .c_input {
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-select > .c-icons {
    height: 100%;
    width: 30px;
    cursor: pointer;
    font-size: 15px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.c-select .c_list {
    width: 100%;
    max-height: 217px;
    line-height: 20px;
    padding: 5px;
    background-color: #fff;
    overflow: auto;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
    z-index: 10000;
    position: absolute;
    top: 35px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

.c-radio {
    padding: 0px 3px;
}

.c-radio a {
    border-bottom: solid 1px rgba(238, 238, 238, .5);
    display: block;
    color: var(--main-color);
    font-size: 15px;
    padding: 10px 0;
}


.c-select.c-form.is_focus .c_list {
    opacity: 1;
    visibility: visible;
    top: 40px;
}

.c-select > .c-icons i {
    color: #fff;
}

.js-student-noty span.cc_comp_icon_noty_num {
    right: 2px;
    top: 3px;
}

.js-student-noty {
    position: relative;
}

.js-student-noty .student-noty-header span {
    font-weight: 700;
    font-size: 20px;
}

.js-student-noty .student-noty-header {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 10px 0 10px !important;
}

.js-student-noty .student-noty-body {
    position: absolute;
    top: 55px;
    left: -130px;
    background: #fff;
    box-shadow: 0 12px 28px 0 var(--shadow-2), 0 2px 4px 0 var(--shadow-1), inset 0 0 0 1px var(--shadow-inset);
    border-radius: 10px !important;
    width: 300px;
    z-index: -1;
}

.js-student-noty .student-noty-body {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

.js-student-noty .student-noty-body .student-noty-list {
    width: 100%;
    display: inline-block;
    height: 450px;
    overflow: hidden;
    overflow-y: scroll;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item {
    display: flex;
    width: 100%;
    padding: 0px 10px 0 10px !important;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item a h4 {
    color: #000;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item a {
    color: #333;
}

.js-student-noty .student-noty-body .student-noty-header a {
    color: #000;
    font-size: 15px;
    float: right;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item .student-noty-content a.download i {
    font-size: 12px;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item .student-noty-content a.download {
    font-size: 14px !important;
    color: var(--main-color);
    margin-top: 3px;
    display: block;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item:not(:last-child) {
    margin-bottom: 15px;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.js-student-noty .student-noty-body .student-noty-list .student-noty-item .student-noty-content {
    padding-left: 15px;
    font-size: 14px;
}

.js-student-noty .is_focus {
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
    opacity: 1;
    top: 65px;
    visibility: visible;
}

.js-student-noty .is_focus {
    z-index: 99;
}

.cc_what_learn_content img {
    width: 100%;
}

/**page**/
.page-body {
    margin: 20px 0;
    width: 100%;
    display: inline-block;
}

.home-title2 {
    position: relative;
    -js-display: flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

.home-title2 b {
    display: block;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    opacity: 0.8;
    background-color: var(--main-color);
}

.home-title2 h3 {
    margin: 0 15px;
    color: var(--main-color);
    font-size: 25px;
}

/**list teacher**/
@media only screen and (min-width: 768px) {
    .w-\[1616px\] {
        max-width: 1616px !important;
        margin: auto;
    }
}

.bg-\[\#D7D6FF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(215 214 255 / var(--tw-bg-opacity));
}

.teacher-swiper .swiper-wrapper {
    padding: 0 15px 15px 15px;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.teacher-item {
    display: flex;
    width: 100%;
    transition: 0.3s ease-in-out;
    align-items: center;
}

.teacher-item .teacher-thumbnail {
    height: 500px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}

.w-\[190px\] {
    width: 190px;
}

.w-\[440px\] {
    width: 440px;
}

.teacher-item .teacher-thumbnail img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.teacher-item .teacher-content {
    width: 320px;
    padding: 10px;
}

.teacher-item .teacher-content p {
    margin: 0;
    text-align: left;
    font-size: 15px;
}

.teacher-item .teacher-content h3 {
    font-size: 32px;
    line-height: 42px;
    font-weight: var(--main-fonts-bold);
    color: #000;
    margin: 0px 0 5px 0;
    text-transform: uppercase;
}

.teacher-item .teacher-content .teacher-txt {
    margin: 10px 0;
}

.teacher-item .teacher-content .teacher-view {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    height: 92px;
    -webkit-box-orient: vertical;
}

.teacher-item .teacher-content .teacher-link {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
}

.teacher-item .teacher-content .teacher-link span {
    background: var(--main-color);
    display: inline-block;
    margin: auto;
    text-align: center;
    padding: 5px 25px;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}

.teacher-item:hover img {
    transition: 0.3s ease-in-out;
    transform: scale(1.1);
}

.teacher-item .teacher-social a {
    margin: 0 3px;
    color: #fff;
    font-size: 15px;
}

.teacher-item .teacher-social {
    width: auto;
    display: inline-block;
    margin: auto;
    background: linear-gradient(to bottom, #00AD4E, #069A4B);
    padding: 5px 15px;
    border-radius: 50px;
}

.teacher-item .teacher-center {
    text-align: left;
    margin-top: 15px;
}

.teacher-flex {
    gap: 15px;
}

.transition-all {
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
}

.teacher-item .teacher-button {
    position: relative;
}

.teacher-item .teacher-button a {
    --tw-bg-opacity: 1;
    background-color: rgb(236 110 35 / var(--tw-bg-opacity));
    display: block;
    padding: 16px 40px;
    margin: 15px -60px 0 0 !important;
    border-radius: 9px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    text-transform: uppercase;
}

.teacher-item .teacher-button a:after {
    --tw-rotate: 45deg;
    content: '';
    width: 18px;
    height: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(236 110 35 / var(--tw-bg-opacity));
    display: block;
    position: absolute;
    right: -8px;
    top: 25px;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/**user**/
.avatar-user {
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 50%;
}

.avatar-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/**page category**/
.home-title3 {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--main-color);
}

.home-title3 h3 {
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 25px;
    margin-bottom: 0px;
}

.home-title3 a {
    color: var(--main-color);
    position: absolute;
    right: 0px;
    top: 0px;
}

.boxShadow {
    box-shadow: 0 0 1px 1px rgb(20 23 28 / 10%), 0 3px 1px 0 rgb(20 23 28 / 10%) !important;
}

.slide-product.owl-carousel .owl-item-inner {
    padding: 10px;
    border-radius: 15px;
}

.slide-product .slide-item {
    margin: 8px !important;
}


/**exam**/
.exam-title {
    width: 100%;
    margin-bottom: 20px;
}

.exam-title h3 {
    color: #24489C;
    font-size: 25px;
    margin: 0px !important;
}

.exam-item {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 10px 60px rgb(0 0 0 / 10%);
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
}

.exam-item .exam-thumbnail {
    width: 100%;
    height: 200px;
    border-radius: 15px 15px 0 0;
}

.exam-item .exam-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 15px 15px 0 0;
}

.exam-item .exam-content {
    width: 100%;
    padding: 10px;
}

.exam-item .exam-content h3 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 20px;
    height: 40px;
    font-weight: var(--main-fonts-bold);
    color: var(--main-color);
    margin: 0px 0 5px 0;
}

.exam-item .exam-content h3 a {
    color: var(--main-color);
}

.exam-item .exam-star {
    font-size: 14px;
    color: gray;
}

.exam-item .exam-star b {
    color: var(--main-color);
    font-weight: 700;
    margin-right: 5px;
}

.exam-item .exam-star {
    width: 100%;
    display: flex;
    margin: 5px 0 8px 0;
    align-items: center;
}

.exam-item .exam-star img {
    width: 15px;
    height: 15px;
    margin-top: -4px;
    object-fit: contain;
    margin-right: 5px;
}

.exam-item .exam-star .hover {
    display: none;
}

.exam-item .exam-content .exam-button i {
    color: #FFB800;
}

.exam-item .exam-content .exam-button {
    font-size: 12px;
    background: var(--main-color);
    border-radius: 8px;
    color: #fff;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.exam-item .exam-content .exam-header {
    max-width: 100%;
    margin-bottom: 10px;
}

.exam-item .exam-content .exam-header h3 {
    line-height: 35px;
    height: 35px;
    display: block;
    color: #4DB2FF;
    margin: 0px !important;
}

.exam-item .exam-content .exam-footer {
    width: 100%;
    display: inline-block;
}

.exam-item .exam-content .exam-price del {
    font-size: 14px;
    color: gray;
}

.exam-item .exam-content .exam-price ins {
    text-decoration: unset !important;
    color: var(--main-hover);
    font-weight: var(--main-fonts-bold);
    font-size: 16px;
    margin-bottom: -5px;
    display: block;
}

.exam-item .exam-content .exam-link .hover {
    display: none;
}

.exam-item .exam-content .exam-link a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: end;
}

.exam-item .exam-content .exam-link a {
    color: var(--main-color);
    font-size: 15px;
}

.exam-item .exam-content .exam-link a img {
    width: 25px;
    margin-right: 5px;
}

.exam-item:hover {
    transition: 0.3s ease-in-out;
    transform: translateY(-5px);
    background: var(--main-color);
}

.exam-item:hover h3 a {
    transition: 0.3s ease-in-out;
    color: #fff;
}

.exam-item:hover .exam-button {
    background: #fff;
    color: var(--main-color);
}

.exam-item:hover .exam-star .hover, .exam-item:hover .exam-link .hover {
    display: block;
}

.exam-item:hover .exam-star .in, .exam-item:hover .exam-link .in {
    display: none;
}

.exam-item:hover .exam-star b, .exam-item:hover .exam-star, .exam-item:hover .exam-link a {
    color: #fff;
}

.slide-view img {
    width: 100%;
    height: 500px;
    border-radius: 30px !important;
    object-fit: cover;
}

.cc_time_point {
    width: 100%;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.cc_time_point #countdown {
    margin-left: 10px;
    font-weight: 700;
    color: #ff3333 !important;
    font-size: 25px;
}

/**widget**/
aside.product-widget {
    width: 100%;
    border: 1px solid #F1F1F1;
    border-radius: 15px !important;
}

aside.product-widget .main-category-title {
    text-align: center;
    padding: 10px 0;
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid #f2f2f2;
}

aside.product-widget .widget-category-list ul li a {
    color: var(--main-color);
    font-size: 15px;
    font-weight: 700;
}

aside.product-widget .widget-category-list ul li a:hover {
    color: var(--main-color-hover)
}

aside.product-widget .widget-category-list ul li {
    padding: 5px 10px;
    position: relative;
    transition: 0.3s ease-in-out;
    list-style: none;
}

aside.product-widget .widget-category-list ul {
    padding-left: 0px !important;
}

aside.product-widget .widget-category-list {
    width: 100%;
    padding: 15px 0;
}

ul.widget-contaienr-menu li > .sub-menu {
    opacity: 0;
    visibility: hidden;
    min-width: 250px;
    position: absolute;
    left: 100%;
    top: 10px;
    background: #ffff;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
    border: 1px solid #f2f2f2;
    transition: 0.3s ease-in-out;
}

ul.widget-contaienr-menu li:hover > .sub-menu {
    transition: 0.3s ease-in-out;
    top: 0px;
    visibility: visible;
    opacity: 1;
    z-index: 99;
}

/**question program**/
@media only screen and (max-width: 768px) {
    #showPdf {
        width: 100%;
        height: 400px;
    }
}

.question-content {
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
}

.question-content h3 {
    font-size: 25px;
}

.question-item.question-pdf {
    height: 92vh;
}

.question-content .question-group {
    width: 100%;
    display: inline-block;
}

.question-content .question-time {
    width: 100%;
    display: flex;
    margin: 15px 0 15px 0;
}

.question-content .question-time b {
    margin-right: 15px;
}

.question-content .question-group b, .question-content .question-form b {
    color: var(--main-color);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    display: -webkit-box;
}

.formQuestion b {
    color: var(--main-color);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    display: -webkit-box;
}

.question-content .question-group ul {
    padding: 0px;
    display: flex;
    justify-content: left;
    flex-flow: wrap;
    margin: 0px -5px;
}

.question-content .question-group ul li {
    list-style: none;
    width: calc(100% / 4);
    padding: 0px 5px 10px 5px;
}

.question-content .question-group ul li a {
    background: #f5f8fa;
    width: 100%;
    display: block;
    padding: 6px;
    border-radius: 4px;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.question-content .question-group ul li a:hover, .question-content .question-group ul li.active a {
    background: var(--main-color);
    color: #fff;
}

div#question-point {
    width: 100%;
    margin-top: 20px;
}

div#question-point input {
    margin-bottom: 10px;
}

.question-section {
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
}

.question-section label {
    font-weight: 700;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.question-group {
    height: 490px;
    overflow-y: scroll;
}

.custom-control.custom-radio.rightMar {
    float: left;
    margin-right: 20px;
}

/**header exxam**/
header#exam-header {
    width: 100%;
    display: inline-block;
    background: var(--main-color);
    padding: 10px 0;
}

header#exam-header .header-back a {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

header#exam-header .header-back {
    height: 40px;
    line-height: 40px;
}

header#exam-header .header-account a h3 {
    color: #fff !important;
    font-size: 15px;
}

header#exam-header .header-account a {
    background: transparent !important;
    border: 0px !important;
    float: right;
    color: #fff;
    height: unset;
    padding: 0px !important;
}

section#top-sale ul {
    padding: 0;
    list-style: none;
    width: max-content;
    margin: 0;
}

section#top-sale marquee ul li {
    float: left;
    list-style: none;
    padding: 0 20px;
}

aside.widget.product-widget {
    border: 0px !important;
}

.main-widget-course {
    width: 100%;
    padding: 15px 10px;
}

.main-widget-course ul {
    padding: 0px !important;
    margin: 0px !important;
}

.main-widget-course ul li {
    list-style: none;
}

.main-widget-course ul li:not(:last-child) {
    margin-bottom: 10px;
}

.main-widget-course ul li a img {
    width: 15px;
    margin: 3px 5px 0 0;
}

.main-widget-course ul li a {
    color: var(--main-color);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: start;
}

.main-widget-course ul li a:hover {
    color: var(--main-color-hover)
}


.main-widget-course ul li .course-view b {
    display: block;
    font-weight: normal;
    font-size: 11px;
    color: #FF0000;
}

section#sec-banner {
    position: relative;
}

.page-gt-title h3 {
    color: var(--main-color);
    font-size: 30px;
    margin-bottom: 15px;
}

.page-entry ul {
    margin: 0px;
    padding: 0px;
}

.page-entry ul li {
    list-style: inside disc;
}

.page-entry p, .page-entry ul li {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 25px;
}

/**banner page**/
section.banner-p {
    width: 100%;
    margin: 15px 0;
}

.banner-p-item {
    width: 100%;
    height: 350px;
    border-radius: 10px;
}

.banner-p-item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.slide-exam .slide-item {
    margin: 8px !important;
}

.bk-slide .owl-nav button i {
    color: var(--main-color);
}

.bk-slide .owl-nav button {
    background: #fff !important;
    border: 1px solid #f2f2f2 !important;
}

.exam-item .exam-question p {
    font-size: 15px;
}

.exam-item .exam-question p:not(:last-child) {
    margin-bottom: 10px !important;
}

.exam-item:hover .exam-question p {
    color: #fff;
}

.student-noty-content h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.slide-banner {
    z-index: 0;
}

.cc_what_learn_content .exam-item .exam-thumbnail {
    width: 100%;
    height: 180px;
    border-radius: 15px 15px 0 0;
}

.cc_what_learn_content .exam-item {
    box-shadow: 0 0 1px 1px rgb(20 23 28 / 10%), 0 3px 1px 0 rgb(20 23 28 / 10%);
    margin: 1px 5px 15px;
}

h2#swal2-title {
    font-size: 20px;
}

.page-entry img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
}

.form-search {
    width: 100%;
    display: inline-block;
    margin: 0 0 20px 0;
}

.header-account-list ul li a {
    background: transparent !important;
    color: #333 !important;
}

.header-account-list ul li a:hover {
    color: var(--main-color) !important;
}

/**banner**/
section.sec-banner {
    padding: 30px 0;
    position: relative;
}

.banner_top_total {
    margin: 30px 0 0 0;
}

.banner_top_images img {
    width: 100%;
}

.banner_top h3 {
    color: var(--main-color);
    font-size: 28px;
    line-height: 35px;
}

.banner_top h1 {
    color: var(--main-color);
    font-size: 40px;
    line-height: 50px;
    margin: 0 0 5px 0;
}

.banner_top .banner_top_link {
    margin: 20px 0 0 0;
}

.banner_top .banner_top_link a {
    background: linear-gradient(to bottom, #00AD4E, #069A4B);
    display: inline-block;
    padding: 7px 25px;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.banner_top_item {
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

.banner_top_item .banner_top_item_icon i {
    color: var(--main-color);
    font-size: 50px;
}

.banner_top_item .banner_top_item_content {
    padding-left: 20px;
}

.banner_top_item .banner_top_item_content p {
    margin: 0;
    color: #333;
    font-size: 15px;
}

.banner_top_item .banner_top_item_content h4 {
    margin: 0;
    color: var(--main-color);
    font-size: 22px;
}

.banner_top_total {
    display: flex;
}

.banner_top_total .banner_top_item:last-child {
    margin-left: 40px;
}

.sec-course {

}

/**abouts**/
section.sec-abouts {
    padding: 50px 0;
    width: 100%;
    display: inline-block;
}

.abouts_images img {
    width: 100%;
}

.abouts-item {
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.abouts-item:not(:last-child) {
    margin-bottom: 20px;
}

.abouts-item .abouts-icon {
    width: 40px;
    height: 40px;
    background: var(--main-color);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.abouts-item .abouts-content b {
    color: yellow;
}

.abouts-item .abouts-content {
    width: calc(100% - 70px);
    margin-left: 20px;
    background: var(--main-color);
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    font-size: 18px;
}

/**slide**/
body .swiper-button-next, body .swiper-button-prev {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 0.125rem;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.3;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

body .swiper-button-next:hover, body .swiper-button-prev:hover {
    --tw-bg-opacity: 0.6;
}

body .swiper-button-next::after, body .swiper-button-prev::after {
    font-size: 1.5rem;
    line-height: 2rem;
}

/**video**/
.video-big {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
}

.video-big h3 {
    margin: 10px 0 0 0;
    color: #333;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: 69px;
}

.video-item {
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    cursor: pointer;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
}

.video-item:not(:last-child) {
    margin-bottom: 20px;
}

.video-item .video-thumbnail {
    width: 180px;
    height: 120px;
    position: relative;
}

.video-big iframe {
    border-radius: 10px !important;
}

.video-item .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.video-item .video-content {
    width: calc(100% - 180px);
    padding-left: 15px;
}

.video-item .video-content h4 {
    color: #333;
    font-size: 18px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0px;
}

.video-item .video-content h4:hover {
    color: var(--main-color)
}

.box-video {
    width: 100%;
    height: 460px;
    overflow-y: scroll;
    padding-right: 15px;
}

.box-video::-webkit-scrollbar {
    width: 4px;
}

.video-item .video-thumbnail a:hover, .video-play a:hover {
    border-color: var(--main-color);
    color: var(--main-color)
}

.video-play a {
    color: #fff;
    font-size: 30px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-play {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
}

.video-item .video-content a {
    color: #000;
}

/**exam**/
.exam-section {
    margin: 30px 0;
}

.boxExam {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    width: 100%;
}

p#nmtime {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

p#nmtime span {
    background: transparent;
    padding: 6px 2px;
    color: #000;
}

p#nmtime .timeitem {
    background: var(--main-color);
    margin: 0px 2px;
    border-radius: 5px;
    color: #fff;
    padding: 6px 8px;
}

.boxExam .exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    padding: 15px;
    text-align: center;
    border-radius: 0.375rem 0.375rem 0 0;
}

.boxExam .exam-header h1 {
    font-size: 25px;
    line-height: 35px;
    margin: 0;
}


.cauhoi {
    margin-top: 10px;
}

.cauhoi span label {
    margin-left: 10px !important;
}

.cauhoi span {
    width: 100%;
    display: flex;
    margin: 0 0 10px 0;
}

.cauhoi span input[type='radio'], .cauhoi span input[type='checkbox'] {
    outline: none !important
}

.cauhoi span input[type=radio] {
    border-radius: 50%;
}

.cauhoi span input[type=checkbox], .cauhoi span input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 3px solid #39414d;
    background: #fff;
}

.cauhoi label {
    width: calc(100% - 26px);
    font-size: 14px !important;
    color: #000;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .cauhoi span input[type=radio]:after {
        content: "";
        opacity: 0;
        display: block;
        left: 3px;
        top: 3px;
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #28303d;
    }

    .cauhoi span input[type=checkbox]:after {
        content: "";
        opacity: 0;
        display: block;
        left: 3px;
        top: 3px;
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #28303d;
    }
}

.cauhoi span input[type=radio]:after {
    left: 2px;
    top: 0px;
    border-radius: 0;
    background: none;
    border: solid #fff;
    width: 8px;
    height: 10px;
    border-width: 0 4px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cauhoi span input[type=checkbox]:after {
    left: 2px;
    top: 0px;
    border-radius: 0;
    background: none;
    border: solid #fff;
    width: 8px;
    height: 10px;
    border-width: 0 4px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cauhoi span input[type=radio]:checked {
    border: 4px solid var(--main-color);
    background: var(--main-color);
}

.cauhoi span input[type=checkbox]:checked {
    border: 4px solid var(--main-color);
    background: transparent;
}

label.form-label {
    width: 100%;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .cauhoi span input[type=radio]:checked:after {
        opacity: 1;
    }

    .cauhoi span input[type=checkbox]:checked:after {
        opacity: 1;
        border-color: var(--main-color);
    }
}

.exam-body {
    padding: 20px;
}

.exam-footer {
    background: #f2f2f2;
    padding: 15px;
    text-align: center;
    border-radius: 0 0.375rem 0.375rem 0;
}

.exam-footer button {
    width: 200px;
}


.cauhoi span.success label {
    color: var(--main-color);
    font-weight: 700;
}

.cauhoi span.error label {
    color: #ff3333;
    font-weight: 700;
    text-decoration: line-through;
}

.cauhoi span.error input[type=radio]:checked {
    background: #ff3333 !important;
    border-color: #ff3333 !important;
}

section.sec-zns {
    padding: 50PX 0;
}

.tiktok-item {
    width: 100%;
    height: 420px;
    border-radius: 15px;
    position: relative;
}

.tiktok-item img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.text-center {
    text-align: center;
    justify-content: center;
}

.text-center h3 {
    text-align: center;
}

.tiktok-item .tiktok-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50px;
}

.tiktok-item .tiktok-icon {
    background: #fff;
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    z-index: 9;
    padding: 10px;
}