/**
 * Content: Schat Main Style for Landing Page
 * Author: HaiLex
 * Create date: 06-Feb-2025
 * Font-family: "Quicksand", serif;
 * Update:
 * - 06-Feb-2025: Create new version
 * */
/* XX-Large devices (larger desktops, 1400px and up)*/
@media (max-width: 1399px) {

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (max-width: 1199px) {
	#sec-1 .left-block .blg-title h3 {
	    font-size: 36px;
	    line-height: 33px;
	}
	#sec-1 .left-block .blg-description {
	    font-size: 18px;
	}
	#sec-1 .left-block .group-btn .btn-book {
    	font-size: 18px;
    	padding: 10px 20px;
	}
	#sec-1 .left-block .group-btn .btn-trial {
        font-size: 14px;
        height: 50px;
	}
	#sec-1 .left-block .group-btn .btn-trial .border-effect:before {
		width: 40px;
	}
	#sec-1 .left-block .group-btn .btn-trial .icon {
	    width: 35px;
	    height: 35px;
	    margin-left: 10px;
	    border-radius: 20px;
	    margin-top: -7px;
	}
	.sub-head {
    	font-size: 28px;
	}
	.list-solution .left-blog img {
		width: 100%;
	}
	.list-solution .bl-title {
	    font-size: 24px;
        line-height: 32px;
        margin-bottom: 20px;
	}
	.list-solution .list-sol ul li b {
    	font-size: 20px;
	}
	.list-solution .list-sol ul li p {
	    font-size: 16px;
	    line-height: 24px;
	}
	.list-solution .view-more {
    	margin-top: 0;
	}
	.list-solution .view-more a {
	    font-size: 15px;
	}
	.list-solution {
    	margin-top: 50px;
	}
	.list-solution .thirt-item .list-sol ul li b {
    	font-size: 16px;
	}
	#sec-4 .desc-blog, .desc-blog {
    	font-size: 16px;
	}
	.list-business .bus-item .title-item {
    	font-size: 16px;
	}
	.list-business .bus-item .item-des {
	    font-size: 16px;
	    margin-bottom: 30px;
	}
	.list-stories .story-item .story-left .title-item {
		font-size: 24px;
	}
	.list-stories .story-item .story-left .item-des .des-detail {
		font-size: 18px;
		padding-right: 20px;
	}
	.list-stories .story-item .story-left .read-more a {
		font-size: 16px;
	}
	.link-foot .schat-store a img {
    	max-width: 100px;
	}
	.detail-btn.ben-button {
    	width: 190px;
    	height: 46px;
    	font-size: 18px;
	}
	#sec-1 .right-block .text-note {
    	top: 40px;
    	font-size: 14px;
	}
	#sec-1 .right-block .text-note:before {
	    bottom: -160%;
	    right: 10px;
	    width: 93px;
	    height: 130px;
	    z-index: 9;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (max-width: 991px) {
	.col-mb-12 {
    	width: 100% !important;
    }
	#sec-1 > .row {
		flex-direction: column;
	}
	#sec-1 .right-block {
    	margin-top: 30px;
	}
	.list-solution .left-blog {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.list-business .slick-track {
		gap: 13px;
	}
	.list-stories .story-item .story-right img {
	    width: auto;
	    height: 100%;
	    float: left;
	}
	.list-stories .story-item .story-right img {
    	overflow: hidden;
	}
	.price-list .price-item-1 {
		margin-bottom: 30px;
	}
	.link-foot {
    	margin-top: 30px;
	}
	.link-foot .row .col-4 {
		margin-bottom: 20px;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
	.lang-block .btn-txt {
		font-size: 14px;
		padding-top: 5px;

	}
	.list-solution .left-blog img {
  		width: 100%;
	}
	#sec-1 .right-block .text-note {
		left: 3%;
	}
	.bg-right-img .circle-3 {
	    width: 70px;
	    height: 70px;
    	padding: 0;
	}
	#sec-1 .right-block .bg-right-img {
		width: 85%;
	}
	.bg-right-img .circle-1 {
		width: 255px;
		height: 255px;
	}
	.bg-right-img .circle-2 {
		width: 170px;
		height: 170px;
	}
	.bg-right-img .ic-span {
    	width: 45px;
    	height: 45px;
    	border-width: 5px 5px;
	}
	.mb-nav {
  		display: block;
	}
	.main-header ul.main-nav {
		display: none;
	}
	.main-header ul.main-nav.show {
		display: flex;
        position: absolute;
        flex-direction: column;
        background: #fff;
        left: 0;
        padding-bottom: 50px;
        margin-top: 6px;
        padding-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
        gap: 15px;
	}
	.main-header ul.main-nav li a.nav-link {
		display: inline-block;
		font-weight: bold;
	}
	.main-header ul.main-nav li a.nav-link:hover {
		text-decoration: none;
		color: #105ce2;
	}
	header.main-header {
		position: fixed;
	    left: 0;
	    top: 0;
	    border-radius: 0;
	    margin: 0;
	    box-shadow: 0 0 5px #ccc;
	    display: block !important;
	}
	#sec-2 .desc-blog {
	    font-size: 16px;
	    padding: 0 20px;
	}
	#sec-1 .left-block .group-btn {
    	flex-direction: column;
	}
	#sec-1 .left-block .group-btn .btn-book {
		width: 100%;
		font-size: 14px;
	}
	#sec-1 .left-block .group-btn .btn-trial {
        font-size: 18px;
        width: 100%;
        justify-content: center;
        font-size: 14px;
    }
    #sec-1 .left-block .group-btn .btn-trial .icon {
    	width: 30px;
    	height: 30px;
    	margin-top: -5px;
	}

	#sec-1 {
    	margin-top: 20px;
	}
	#sec-1 .left-block .blg-title h3 {
        font-size: 24px;
        line-height: 20px;
    }
    #sec-1 .left-block .blg-description {
        font-size: 14px;
    }
    #sec-1 .right-block .img {
	    width: 100%;
	    max-width: 280px;
	    margin-top: 50px;
	}
	#sec-1 .right-block .text-note {
        font-size: 12px;
        max-width: 85px;
    }
    #sec-1 .right-block .text-note:before {
        background-size: 50px;
        bottom: -110%;
        right: -27px;
    }
	.list-solution > .row {
    	flex-direction: column;
    	border-bottom: 1px solid #cdcdcd;
        padding-bottom: 30px;
        margin-bottom: 40px;
	}
	.list-solution > .row > div {
		width: 100% !important;
	}
	.list-solution .bl-title {
        font-size: 18px;
        line-height: 26px;
        margin-top: 40px;
    }
    .list-solution .list-sol ul li b {
    	font-size: 16px;
    }
    .list-solution .list-sol ul li p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
    }
    .list-solution .list-sol ul {
    	gap: 5px;
	}
	.list-solution .left-blog {
		text-align: center;
	}
	.list-solution .left-blog img {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    .sub-head {
        font-size: 18px;
        padding-right: 30px;
    }
    .list-business .slick-track {
    	gap: 0;
    }
    .list-business .slick-arrow.slick-next:before {
    	left: -40px;
    }
    .list-stories .story-item .story-left {
    	padding: 30px 15px;
	}
	.list-stories .story-item {
		margin: 0 10px;
	}
    .list-sol-2 > .row > .sol-item-1 {
    	margin-bottom: 30px;
    }
    .list-solution .thirt-item .list-sol ul li b {
        font-size: 14px;
    }
    .price-list .col-6 .price-detail {
    	padding: 15px;
    	gap: 8px;
	}
    .price-list .col-6 .price-detail h3 {
    	font-size: 16px;
	}
	.price-list .col-6 {
		margin-bottom: 20px;
	}
	.price-list .col-6 .price-detail p {
    	font-size: 14px;
    	line-height: 22px;
    	margin-top: 10px;
	}
	.price-list .col-6 .price-detail .price-title {
    	font-size: 22px;
	}
	.sec-wrap {
    	margin-top: 50px;
	}
	.btn-more a {
	    display: inline-block;
	    font-size: 14px;
	    border: 1px solid #105ce2;
	    border-radius: 30px;
	    padding: 10px 30px;
	    font-weight: 600;
	    color: #105ce2;
	    width: 100%;
	    max-width: 475px;
	}
	#sec-7 {
    	padding: 30px 15px;
	}
	#sec-7 p {
		font-size: 14px;
		margin: 5px auto 0;
	}
	#sec-7 h3 {
    	font-size: 20px;
	}
	#sec-7 .list-benefit {
	    gap: 10px;
	    margin: 30px auto;
	}
	.ben-item span {
    	font-size: 36px;
	}
	.detail-btn.ben-button {
        width: 100%;
        height: 46px;
        font-size: 14px;
    }
    .link-foot > .row > .col-sm-12 {
    	margin-bottom: 20px;
    }
    .infor-foot {
    	margin-bottom: 30px;
    }
    .link-foot .row .col-4 {
    	margin-bottom: 30px;
    }
    .link-foot {
    	padding-bottom: 30px;
	}
	footer {
    	padding: 40px 20px;
    	gap: 48px;
	}
	.link-foot .schat-store a {
    	border-radius: 6px;
	}
	.main-header .logo-site {
    	display: inline-block;
	}
	.main-header .lang-block {
		float: right;
	}
	.main-header .lang-block .btn-regist {
	    padding: 0 20px !important;
        border-radius: 20px;
        background: #fff;
        font-size: 14px;
        margin-right: 10px;
        border-color: white;
        color: #105ce2;
        font-weight: 700;
        height: 40px;
        margin-top: 5px;
	}
	.main-header .lang-block .btn-regist:hover {
    	background: #e2f2ff;
    	cursor: pointer
	}
	.btn-nav.nav-list {
		margin-top: 10px;
	    border-radius: 5px;
	    background: #fff;
	    border: none;
	}
	.mb-nav-default .bi-list {
		display: block;
		width: 25px;
        height: 25px;
	}
	.mb-nav-default .bi-x {
		display: none;
		width: 25px;
        height: 25px;
	}
	.mb-nav-default.show .bi-list {
		display: none;
	}
	.mb-nav-default.show .bi-x {
		display: block;
	}
	.main-header .logo-site img {
    	max-width: 50px;
    	margin-top: 5px;
	}
	.list-stories .story-item {
		flex-direction: column;
	}
	.list-stories .story-item .story-left,
	.list-stories .story-item .story-right {
		width: 100%;
	}
	.list-stories .story-item .story-right {
		max-height: 250px;
	}
	.list-stories .story-item .story-right img {
		width: 100%;
	}
	.list-stories .story-item .story-left .title-item {
        font-size: 18px;
        font-weight: bold;
    }
    .list-stories .story-item .story-left .tag-list span {
    	font-size: 12px;
    }
    .list-stories .story-item .story-left .item-des .des-detail {
    	font-size: 14px;
    	padding-right: 0;
    }
    .list-stories .story-item .story-left .item-des .percen-item {
    	font-size: 46px;
    }
    .list-stories .story-item .story-left .read-more a {
    	font-size: 14px;
    }
    .list-stories .story-item .story-left .item-des {
    	margin-bottom: 20px;
    	flex-direction: column;
    }
    .col-mb-12 {
    	width: 100% !important;
    }
    #sec-4 .desc-blog, .desc-blog {
        font-size: 14px;
    }

    .main-popup .form-container {
	    width: 90vw;
	    height: 90vh;
	    gap: 20px;
	    border-radius: 20px;
	    overflow: scroll;
	    align-items: baseline;
	    position: relative;
        display: inline-block;
	}
	.main-popup .form-container > .row {
    	padding: 32px 15px;
	}
	.main-popup .form-container .col-left {
    	gap: 10px;
	}
	.main-popup .form-container .col-left .form-title {
    	font-size: 16px;
	}
	.main-popup .form-container .col-left p,
	.short-bene-item .title-bene-item {
    	font-size: 14px;
	}
	.short-bene-item .sub-title-bene {
    	font-size: 12px;
	}
	.short-bene-item .number-bene-item {
    	font-size: 24px;
	}
	.main-popup .form-container .col-right {
		margin-left: 0;
		margin-top: 30px;
	}
	form.post-form-regist .btn-submit button {
	    font-size: 14px;
	    padding: 10px;
	    margin-top: 20px;
	}
	form.post-form-regist .group-item {
    	flex-direction: column;
	}
	form.post-form-regist .group-item > div {
    	width: 100%;
	}
	.post-form-regist,
	.post-form-regist .form-control,
	.post-form-regist .form-select {
		font-size: 14px;
	}
	.main-content {
		margin-top: 100px;
	}
	#sec-1 .left-block .group-btn .btn-trial .border-effect:before {
		width: 40px;
	}
	.list-solution .view-more {
        margin-top: 20px;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
	.link-foot .row .col-4 {
        margin-bottom: 30px;
        width: 100%;
    }
}