/* SECTION 1 */
.qual-s2-right{padding-right: 100px !important;}
.qual-s1-title{position: relative;}
.qual-s1-title:before{content:'';position: absolute;left:0;bottom:10px;width:60%;border-top:1px solid #666;}
.qual-s1-title .section-title-main{font-size: 55px !important; font-family: 'DancingScript' !important; color: var(--color);font-weight: 500;text-transform: unset;line-height: 120%;}
.qual-s1-title.section-title-container{margin-bottom:0 !important}
.qual-s1-des *{line-height: 180%;}
.about2-qual-left{padding-left: 100px !important;}


/* SECTION 2 */
.qual-s2-container{min-height: 400px;padding: 40px 0;overflow: hidden;background-size: contain !important;}
.qual-s2-title{font-size: 122px !important; font-family: 'DancingScript' !important; color: #fff; font-weight: 500; text-align: center; text-transform: unset; width: 100%; margin-bottom: 30px !important;margin-top: -20px;}
.qual-s2-wrapper{display: flex;max-width: 1050px;margin: auto;gap:40px;position: relative; z-index: 1;/*align-items: start;*/}
.qual-s2-box-left{width: 50%;display: flex;flex-direction: column;gap:20px;}
.qual-s2-box{text-align: center;text-transform: uppercase;color:#070707;font-weight: 600;background: #DEE5EF;min-height: 111px; display: inline-flex; align-items: center; justify-content: center;font-size: 24px;cursor: pointer;position: relative;width: 100%;}
.qual-s2-box:before{content: ''; position: absolute; left: 10px; bottom: -10px; background-image: linear-gradient(#6989b1, #0a3c7d); width: 100%; height: 100%; z-index: -1;opacity: 0;transition: all ease 0.5s;}
.qual-s2-box--active:before{opacity: 1;}
.qual-s2-box--des { display: none; padding-top: 20px;}
.qual-s2-box--des div{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

.qual-s2-box-right{width: 50%;overflow: hidden;}
.qual-s2-box-right img{width: 100%;height: 100%;transition: all ease 0.5s;object-fit: cover;}
.qual-s2-box-right img:hover{transform: scale(1.05);}


/* SECITON 3 */
.qual-s3{padding: 60px 0 !important;margin-top: -150px !important;}
.qual-s3-background{padding-bottom: 120px !important;}
.qual-s3-title.section-title-container{margin-bottom: 0px !important;}
.qual-s3-title .section-title-main{font-size: 90px !important; font-family: 'DancingScript' !important; color: #fff; font-weight: 500; text-align: center; text-transform: unset; width: 100%; margin-bottom: 0 !important;}
.qual-s3-wrapper{background: #fff; border-radius: 20px 20px 0 0; padding: 40px 30px;}
.qual-s3-box{text-align: center;position: relative;max-width: 20% !important; flex-basis: 20% !important; padding: 0 20px !important;}

.qual-s3-img{width: 140px !important; margin: auto !important;height: 140px;border-radius: 16px;overflow: hidden;display: inline-flex; align-items: center; justify-content: center;}
.qual-s3-img img{object-fit: contain;}
.qual-s3-box .img ~p{margin-bottom: 0 !important;color:#333 !important;text-align: center;font-weight: 400;margin: auto;line-height: 140%;font-size: 15px;}
.qual-s3-arrow { position: absolute; top: 50%; right: -35px; /* = width svg / 2 */ transform: translateY(-180%); z-index: 2; }
.qual-s3-arrow svg {
    width: 70px;
    height: auto; /* giữ tỷ lệ */
}
.quan-s3-smalltitle p{margin:0;margin-top:8px;color:#333;font-family: 'DancingScript' !important;font-size:26px;}
.qual-s3-smalldes *{color:#fff;}

.commitment-container{display: flex;}
.commitment-box{flex-basis: 25%;overflow: hidden;transition: all ease 0.5s;position: relative;padding-top: 53.2%;}
.commitment-box img{width: 100%;height: 100%;object-fit: cover;position: absolute;top:0;left:0;}
.commitment-box-active{flex-basis: 50%;}
.commitment-box:before{content:'';position: absolute;top:0;left:0;width: 100%;height: 100%;background: linear-gradient(to right, black, transparent);z-index: 1;}
.commitment-info{position: absolute;bottom:-50%;left:0;width: 100%;height: 100%;display: flex;align-items: end;padding-left: 12%;transform: rotate(-90deg); transform-origin: 0px center;z-index: 2;transition: all ease 0.5s;}
.commitment-info--sub{width: 100%;display: flex;flex-direction: column; opacity: 0;}

.commitment-box-active .commitment-info{bottom:0;align-items: center;transform: rotate(0deg);width: 63%;}
.commitment-box-active .commitment-info--sub{opacity: 1;}
.commitment-title{color:#fff;margin-bottom: 30px;position: relative;font-size: 30px;text-transform: uppercase;}
.commitment-title:before{content: '';position: absolute;width: 20%;border-top:1px solid #fff;left: 0;bottom: -15px;}
.commitment-des{color: rgba(255,255,255,0.8);}

.s3-commitmen-title *{color: var(--color); font-size: 37px;font-family: 'DancingScript' !important;font-weight: 500;}
.s3-commitmen-des *{font-size: 18px;color: #333;}
.s3-commitmen-des p:last-child{margin-bottom: 0;}


@media screen and (max-width: 1440px){
	.qual-s2-title{font-size: 106px !important;}
}

@media screen and (max-width: 1024px){
	.qual-s3-title .section-title-main{font-size: 60px !important;}
	.qual-s3{padding: 40px 3% !important}
	.qual-s2-container{padding: 40px 3%;}
	.qual-s2-title { font-size: 80px !important; }

	.commitment-title{font-size:20px;}
	.commitment-des{font-size: 14px;}

	.qual-s3-wrapper{gap:40px;}
	.qual-s3-box{max-width: calc(100% / 3 - 27px) !important; flex-basis: calc(100% / 3 - 27px) !important;}
	/*.qual-s3-img{width:auto !important;height:auto !important;}*/

	.s3-commitmen-title *{text-align: center;}
	.s3-commitmen-des *{text-align: center;}
}

@media screen and (max-width: 849px){
	.qual-s2-right { padding-right: 15px !important; }
	.about2-qual-left { padding-left: 15px !important; }
	.qual-s1-title .section-title-main { font-size: 45px !important;}
	.qual-s2-wrapper{flex-direction: column;}
	.qual-s2-box-left { width: 100%;}
	.qual-s2-box-right{width: 100%;}	
	.qual-s2-title { font-size: 60px !important; }
	.qual-s2-container{background-size: auto !important;}
	.commitment-box-active .commitment-info{width:100%;}
	.commitment-info{padding-left: 7%;padding-right: 7%;}
	.qual-s3-arrow { right: -25px; /* = width svg / 2 */ display: none !important;}
	.qual-s3-arrow svg { width: 50px; height: auto; /* giữ tỷ lệ */ }
}

@media screen and (max-width: 768px){
	.qual-s3-title .section-title-main{font-size: 50px !important;}
	.qual-s2-box{min-height: 70px;font-size: 20px;}
	.qual-s2-box-left{gap: 10px;}
	.qual-s2-box:before{left: 5px; bottom: -5px;}
	.qual-s2-wrapper{gap:20px;}
	.commitment-title { font-size: 16px; }
}

@media screen and (max-width: 600px){
	.qual-s3-wrapper{gap:40px;}
	.qual-s3-box{max-width: calc(100% / 2 - 25px) !important; flex-basis: calc(100% / 2 - 25px) !important;padding: 0 !important;}
	/*.qual-s3-img{width:auto !important;height:auto !important;}*/
}

@media screen and (max-width: 549px){
	.qual-s1-des * { line-height: 180%; font-size: 15px; text-align: justify; }
	.qual-s1-title .section-title-main { font-size: 34px !important;}
	.qual-s1-title:before{display: none;}
	.qual-s3-title .section-title-main{font-size: 45px !important;}
	.qual-s3-box .img ~p{font-weight: 500;font-size: 15px;}
	.qual-s2-title { font-size: 40px !important; }
	.commitment-title { font-size: 14px; }
	.commitment-des { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
	.qual-s2-box{font-size: 16px;}
	.qual-s2-box--des{font-size: 15px;}

	.s3-commitmen-title *{font-size:32px;}
}

@media screen and (max-width: 400px){
	.commitment-title {font-size: 12px;}
	.commitment-des { font-size: 12px;}
	.qual-s3-box .img ~p{font-size:13px;}
	.quan-s3-smalltitle p{font-size:22px;}
}