/*
Theme Name: ngaydem
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.commitment { background: rgb(242, 242, 242); }
.commitment .cont .cmit { display: grid; grid-template-columns: 30% 40% 30%; padding: 100px 0px; }
.cmit .tit-h3 h3 { font-size: 21px; text-transform: uppercase; border-bottom: 3px solid rgb(255, 165, 0); padding-bottom: 10px; }
.cmit .item .tit-h3 p { margin-bottom: 0px; padding-top: 10px; font-size: 16px; text-align: justify; line-height: 24px; max-height: 58px;  }
.cmit .item:nth-child(2) { transform: translate(65px, -33px); display: initial; }
.cmit .item:nth-child(3) { display: initial; transform: translate(-58px, -33px); }
.cmit .item:nth-child(6) { display: initial; transform: translate(66px, 80px); }
.cmit .item:nth-child(7) { display: initial; transform: translate(-66px, 80px); }
.cmit .item:nth-child(1) { grid-area: 1 / 2 / 4 / 3; place-self: center; aspect-ratio: 409 / 474; }
.cmit .item ._img { text-align: center; display: flex; justify-content: center; align-items: center; height: auto; position: relative; }
.cmit .item ._img img { width: 100%; min-height: 100%; object-fit: cover; }
.cmit .item ._img .txt { position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%);}
.cmit .item ._img .txt p { text-transform: uppercase; font-size: 33px; font-weight: 700; margin-bottom: 0px; line-height: 34px; }
.cmit .item ._img .txt p:last-child { color: rgb(0, 167, 90); }
.cmit .item { display: flex; justify-content: center; align-items: center; }
.cmit .item:nth-child(3) .tit-h3 h3 { border-bottom: 3px solid rgb(111, 190, 68); }
.cmit .item:nth-child(4) .tit-h3 h3 { border-bottom: 3px solid rgb(62, 86, 185); }
.cmit .item:nth-child(5) .tit-h3 h3 { border-bottom: 3px solid rgb(222, 63, 80); }
.cmit .item:nth-child(6) .tit-h3 h3 { border-bottom: 3px solid rgb(106, 62, 175); font-size:19px }
.cmit .item:nth-child(7) .tit-h3 h3 { border-bottom: 3px solid rgb(166, 78, 177); }
img { max-width: 100%; }
@media (max-width: 1200px){
.cmit .tit-h3 h3 { font-size: 17px; }
}
@media (max-width: 991px){
.cmit .tit-h3 h3 { font-size: 15px; }
.commitment .cont .cmit { grid-template-columns: 50% 50%; margin: 0px -10px; }
.cmit .item { display: block; padding: 0px 10px; transform: initial !important; }
.cmit .item .tit-h3 p { max-height: initial; }
}
@media (max-width: 767px){
.commitment .cont .cmit { display: block; padding: 15px 0px; margin: 0px; }
.cmit .item { transform: initial !important; padding: 10px 0px !important; }
.cmit .item .tit-h3 p { font-size: 13px; }
.cmit .item:nth-child(1) { display: block; padding-top: 0px; aspect-ratio: initial; }
.cmit .item ._img img { display: none; }
.cmit .item ._img .txt { position: relative; transform: initial; top: 0px; left: 0px; }
.cmit .item:nth-child(1) ._img .txt p { display: inline-block; font-size: 24px; }
}
@media (max-width: 767px){
.cmit .item:nth-child(1) { display: block; padding-top: 0px; }
}

@media (min-width:1024px) { .customer-care .process-cnt { display: flex; align-items: start; gap: 35px } .customer-care .process-cnt .left, .customer-care .process-cnt .right { width: calc((100% - 35px)/ 2); display: flex; align-items: center; justify-content: start } .customer-care .process-cnt .left .tit, .customer-care .process-cnt .right .tit { height: 200px; width: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center;background: radial-gradient(#106a03, #048c4d); padding: 0 30px } .customer-care .process-cnt .left .tit h3, .customer-care .process-cnt .right .tit h3 {  font-size: 18px; color: #fff; text-transform: uppercase; text-align: center } .customer-care .process-cnt .left .img-quytrinh-1, .customer-care .process-cnt .right .img-quytrinh-1 { margin-left: -130px; position: relative } .customer-care .process-cnt .left .img-quytrinh-1 .txt, .customer-care .process-cnt .right .img-quytrinh-1 .txt { position: absolute; display: flex; align-items: center; width: 100% } .customer-care .process-cnt .left .img-quytrinh-1 .txt span, .customer-care .process-cnt .right .img-quytrinh-1 .txt span {  font-size: 36px; color: #108740; line-height: 1 } .customer-care .process-cnt .left .img-quytrinh-1 .txt p, .customer-care .process-cnt .right .img-quytrinh-1 .txt p {  font-size: 16px; color: #333; text-align: start } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt1, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt1 { top: 0; left: 100px } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt2, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt2 { top: 80px; left: 190px } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt3, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt3 { top: 175px; left: 245px } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt4, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt4 { top: 285px; left: 245px } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt5, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt5 { top: 385px; left: 190px } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt6, .customer-care .process-cnt .right .img-quytrinh-1 .txt.txt6 { top: 465px; left: 100px } .customer-care .process-cnt .left { flex-direction: row-reverse; justify-content: end } .customer-care .process-cnt .left .img-quytrinh-1 { margin-left: 0; margin-right: -130px } .customer-care .process-cnt .left .img-quytrinh-1 .txt { flex-direction: row-reverse } .customer-care .process-cnt .left .img-quytrinh-1 .txt span { margin-left: 10px; padding-left: 10px; border-left: 1px solid #bbb } .customer-care .process-cnt .left .img-quytrinh-1 .txt p { text-align: end } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt1 { right: 100px; left: initial } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt2 { right: 190px; left: initial } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt3, .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt4 { right: 245px; left: initial } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt5 { right: 190px; left: initial } .customer-care .process-cnt .left .img-quytrinh-1 .txt.txt6 { right: 100px; left: initial } .customer-care .process-cnt .right .tit { background: radial-gradient(#19955c, #097c2b); } .customer-care .process-cnt .right .img-quytrinh-1 .txt span { padding-right: 10px; margin-right: 10px; border-right: 1px solid #bbb; color:#108740 } } @media (max-width:1023px) { .customer-care .process-cnt { display: flex; align-items: start; gap: 20px; padding: 0 30px } .customer-care .process-cnt .left, .customer-care .process-cnt .right { width: calc((100% - 20px)/ 2) } .customer-care .process-cnt .left .tit h3, .customer-care .process-cnt .right .tit h3 {  font-size: 18px; color: #002d72; text-transform: uppercase; text-align: center; margin-bottom: 20px } .customer-care .process-cnt .left .img-quytrinh-1 img, .customer-care .process-cnt .right .img-quytrinh-1 img { display: none } .customer-care .process-cnt .left .img-quytrinh-1 .txt, .customer-care .process-cnt .right .img-quytrinh-1 .txt { display: flex; align-items: start; margin-bottom: 15px } .customer-care .process-cnt .left .img-quytrinh-1 .txt span, .customer-care .process-cnt .right .img-quytrinh-1 .txt span {  font-size: 36px; color: #067dca; line-height: 1; display: block; padding-right: 10px; margin-right: 10px; border-right: 1px solid #067dca } .customer-care .process-cnt .left .img-quytrinh-1 .txt p, .customer-care .process-cnt .right .img-quytrinh-1 .txt p {  font-size: 16px; color: #333; text-align: start } } @media (max-width:767px) { .customer-care .process-cnt { flex-wrap: wrap; gap: 15px } .customer-care .process-cnt .left, .customer-care .process-cnt .right { width: 100% } .customer-care .process-cnt .left .img-quytrinh-1 .txt p { font-size: 15px } }








.quytrinh3 {
  counter-reset: step; 
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.quytrinh3 li {
  counter-increment: step;
  position: relative;
  width: 7rem;
  height: 7rem;
  text-align: center;
  border-radius: 50%; 
  background: #888;
  color: #888;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 1.25rem 1.5rem 1.5rem;
  overflow: visible;
}

.quytrinh3 li:nth-child(1) {
  background: #00AFC0;
  color: #00AFC0;
}

.quytrinh3 li:nth-child(2) {
  background: #00A3E1;
  color: #00A3E1;
}

.quytrinh3 li:nth-child(3) {
  background: #27579C;
  color: #27579C;
}

.quytrinh3 li:nth-child(4) {
  background: #934FC0;
  color: #934FC0;
}

.quytrinh3 li:nth-child(5) {
  background: #C04F8E;
  color: #C04F8E;
}

.quytrinh3 li:nth-child(6) {
  background: #C04F5D;
  color: #C04F5D;
}

.quytrinh3 li:nth-child(7) {
  background: #C07E4F;
  color: #C07E4F;
}

.quytrinh3 li:nth-child(8) {
  background: #C0B54F;
  color: #C0B54F;
}

.quytrinh3 li span {
  color: #FFF;
  display: block;
  font-weight: bold;
  font-size: 0.8rem;
  max-width: 5rem;
  margin-left: auto;
  margin-right: auto;
}


.quytrinh3 li span::before {
  content: counter(step);
  display: block;
  font-size: 1.65rem;
  margin-bottom: 0.1rem;
  font-weight: 800;
  
}


.quytrinh3 li .pointer {
  position: absolute;
  right: -1.6rem;
  width: 1rem;
  height: 1rem;
}


.quytrinh3 li .pointer path {
 fill: none;
 stroke-linejoin: round;
 stroke-width: 3px;
 stroke: currentcolor; 
}


.quytrinh3 li:nth-child(even) .pointer {
  bottom: 20%;
  transform: rotate(22.5deg);
}

.quytrinh3 li:nth-child(odd) .pointer {
  top: 20%;
  transform: rotate(22.5deg);
}

.quytrinh3 li::before,
.quytrinh3 li::after {
  content: '';  
  position: absolute;
  border: 0.25rem solid;
  left: -1.5rem; 
  right: -1.5rem;
}


.quytrinh3 li:nth-child(even)::before {
  border-top-style: dotted;
  border-left-style: dotted;
  border-radius: 50%/100% 100% 0 0;
  border-bottom-color: transparent;
  top: -1.5rem;
  bottom: 50%;
}

.quytrinh3 li:nth-child(odd)::before {
  border-bottom-style: dotted;
  border-right-style: dotted;
  border-top-color: transparent;
  border-radius: 50%/0 0 100% 100%;
  bottom: -1.5rem;
  top: 50%;
}


.quytrinh3 li:nth-child(odd)::after {
  transform-origin: bottom center;
  transform: rotate(22.5deg);
  border-width: 0.2rem;
  border-style: solid;
  border-color: transparent;
  border-top-color: inherit;
  border-left-color: inherit;
  border-radius: 50%/100% 100% 0 0;
  border-bottom-color: transparent;
  top: -1.5rem;
  bottom: 50%;
}

.quytrinh3 li:nth-child(even)::after {
  transform-origin: top center;
  transform: rotate(22.5deg);
  border-style: solid;
  border-width: 0.2rem;
  border-color: transparent;
  border-bottom-color: inherit;
  border-right-color: inherit;
  border-radius: 50%/0 0 100% 100%;
  bottom: -1.5rem;
  top: 50%;
}
@media (max-width: 550px) {
    .quytrinh3 li {
        counter-increment: step;
        position: relative;
        width: 7rem;
        height: 7rem;
        text-align: center;
        border-radius: 50%;
        background: #888;
        color: #888;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1.5rem 1.25rem 1.5rem 1.5rem;
        overflow: visible;
    }
	
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}