/* Spec 2 */

/* Global */
.cursor-pointer {
   cursor: pointer;
}

.v2-bg-f5f5 {
   background-color: #F5F5F5;
}

.v2-bg-blue {
   background-color: #0064A7;
}

.v2-text-8484 {
   color: #848484;
}

.v2-text-bbb {
   color: #BBB;
}

.v2-text-666 {
   color: #666;
}

.v2-text-truncate-tow-line {
   display:-webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
}

.v2-text-truncate-one-line {
   display:-webkit-box;
   -webkit-line-clamp:1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
}

.v2-space-y-60 > * + * {
   margin-top: 60px;
}

.v2-space-y-40 > * + * {
   margin-top: 40px;
}

.v2-space-y-20 > * + * {
   margin-top: 20px !important;
}

.v2-space-x-24 > * {
   margin-right: 24px !important;
}

.v2-space-x-16 > * {
   margin-right: 16px !important;
}

.v2-padding-x-30 {
   padding-right: 30px !important;
   padding-left: 30px !important;
}

.v2-padding-x-40 {
   padding-right: 40px !important;
   padding-left: 40px !important;
}

.v2-padding-x-60 {
   padding-right: 60px !important;
   padding-left: 60px !important;
}

.v2-padding-20 {
   padding: 20px !important;
}

.v2-padding-40 {
   padding: 40px;
}

.v2-mb-80 {
   margin-bottom: 80px;
}

.v2-mb-60 {
   margin-bottom: 60px !important;
}

.v2-mb-40 {
   margin-bottom: 40px !important;
}

.v2-rounded-8 {
   border-radius: 8px;
}

.v2-rounded-4 {
   border-radius: 4px;
}

.v2-h-fit {
   height: fit-content;
}

.overflow-visible {
   overflow: visible !important;
}

.overflow-hidden {
   overflow: hidden !important;
}

/* Custom radio */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    line-height: 24px;
    display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border: 1px solid #BBBBBB;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #0064A7;
    position: absolute;
    top: 7px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
/* End: custom radio */

/* End: global */

/* Style base */
.v2-column-list {
   --column-product: 3;
   display: flex;
   flex-wrap: wrap;
   margin: 0 -10px !important;
   row-gap: 60px;
}

.v2-column-item {
   display: flex;
   flex-direction: column;
   width: calc(100% / var(--column-product));
   overflow: hidden;
   padding: 0 10px;
}

.renovations-content .v2-column-item {
   --column-product: 3;
}

.v2-column-item-img {
   max-width: 420px;
   max-height: 210px;
   height: 210px;
}

.v2-column-item-content {
   height: 40px;
}

.v2-column-item-tag {
   max-height: 65px;
   min-height: 65px;
}

.v2-work-item-tag {
   max-height: 100px !important;
   min-height: 65px !important;
}

.v2-column-detail-img {
   min-width: 370px;
   height: 250px;
   margin-right: 40px;
}

.v2-btn-search-tag {
   background-color: #FFF;
   color: #0064A7;
   padding: 20px 40px !important;
   line-height: 1 !important;
   font-size: 40px !important;
   border: 5px solid #0064A7 !important;
   border-radius: 100px !important;
}

.contact-consultation {
   max-width: 860px !important;
   margin-top: 80px !important;
}

.consultation-title {
   border-top: 4px solid #0064A7;
   border-bottom: 4px solid #0064A7;
   padding: 25px 0;
   font-size: 40px;
}

.modal.show .modal-dialog.success-form {
   max-width: 340px;
}

.consultation-content-step {
   position: relative;
   display: flex;
   justify-content: space-between;
   padding: 60px 100px !important;
   background-color: #FFFFFF;
   margin-bottom: 80px;
   border-radius: 20px;
   margin-left: 40px;
}

.consultation-step-info>img {
   position: absolute;
   width: 95px;
   height: 95px;
   top: -47px;
   left: -40px;
}

.consultation-step-info >.step-4 .main {
   padding: 30px 75px;
   background-color: #0064A7;
   box-shadow: 0 0 0 12px #EAF2F8;
   border-radius: 70px;
   margin-right: 42px;
   margin-left: 12px;
   flex-shrink: 0;
   height: fit-content;
}

.consultation-step-info >.step-4 .factors {
   --column-product: 3;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin: 0 -8px !important;
   row-gap: 20px;
}

.consultation-step-info >.step-4 .factors> * {
   width: calc(100% / var(--column-product) - 16px);
   overflow: hidden;
   padding: 8px !important;
   margin: 0 8px !important;
   background-color: #F6F7FA;
   border: 3px solid #0064A7;
   border-radius: 70px;
   color: #0064A7;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 85px;
}

.step-3-advantage {
   border: 2px solid #0064A7;
   border-radius: 8px;
}

.step-3-advantage .pseudo-triangle {
   position: absolute;
   top: -12px;
   left: 10px;
}

.step-3-advantage .content-advantage {
   position: relative;
   background-color: #F6F7FA;
   padding: 20px 40px;
   border-radius: inherit;
   z-index: 1;
}

.pseudo-circle {
   height: 44px;
   margin: 10px 0 10px 50px ;
}

.line-circle-step-3 {
   margin: 30px 0;
}

.v2-service-special {
   padding: 0 !important;
   max-width: 1300px !important;
   width: 100%;
   text-align: inherit !important;
}

.mx-n10.product-list {
   margin: 0 -10px;
}

.bg-title-width {
   width: 207px;
   height: 30px;
}

.bg-title-event {
   height: 720px;
}

.v2-service .bg-title-renovations {
   left: 12px;
}

.v2-service-sales {
   padding-bottom: 80px !important;
}

.v2-service-sales .v2-sales-img {
   max-width: 860px;
   height: 520px;
   margin: 0 auto 20px;
}

.v2-service-sales .v2-sales-title {
   position: absolute;
   top: 80px;
   left: -110px;
   font-size: 30px;
   color: #454545;
}

.v2-service-sales .v2-sales-title > p {
   background-color: #FFF;
   padding: 6px 16px !important;
   width: fit-content;
}

/* Modal custom */
.modal.show .modal-dialog.search-location {
   max-width: 1260px;
}

.modal-content {
   border-radius: 10px !important;
   box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.modal-header {
   border: none !important;
}

.modal-header .close{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: #BBBBBB;
   margin: -35px -35px auto auto !important;
   opacity: 1 !important;
   padding: 0 !important;
   line-height: 67px;
}

.modal-header .close:focus {
   outline: none !important;
}

.modal-header .close span {
   color: #333333 !important;
   font-weight: 700;
   text-shadow: none;
   font-size: 30px;
   line-height: 0;
}

.v2-modal-search-tag .title-model {
   font-size: 32px;
   color: #0064A7;
   margin-top: -25px;
   margin-bottom: 24px;
}

.v2-modal-search-tag button{
   width: 240px;
   height: 56px;
}

.v2-modal-search-tag button.btn-modal-close {
   background-color: #BBBBBB !important;
   color: #333333 !important;
   box-shadow: none !important;
   border: none !important;
   border-radius: 36px !important;
}

.modal-backdrop.show {
   background-color: #FFF !important;
   opacity: 0 !important;
}
.modal-open .modal {
   padding: 0 40px 0 30px !important;
   /* top: 50px; */
}
/* End: modal custom */

@media screen and (max-width: 62.5em) {
   .rps-pr1 {
      margin-right: 15px !important;
   }
   .v2-pt-10-rps {
      padding-top: 10px !important;
   }
   .v2-bg-f5f5-rps {
      background-color: #F5F5F5;
   }
   .v2-rps-padding-x-24 {
      padding-right: 24px !important;
      padding-left: 24px !important;
   }
   .v2-rps-padding-20 {
      padding: 20px;
   }
   .v2-column-list {
      --column-product: 2;
   }
   .v2-service-special {
      padding: 0 16px !important;
   }
   .renovations-content .v2-column-item {
      --column-product: 1;
      padding: 0 !important;
   }
   .v2-column-item-img {
      max-width: 100%;
      height: 200px;
      max-height: 200px;
   }
   .v2-service-special .v2-column-item-img,
   .renovations-info .v2-column-item-img {
      max-height: 350px;
      height: 350px;
   }
   .v2-flex-direction.d-flex {
      flex-direction: column-reverse !important;
   }
   .v2-column-detail-img {
      height: 270px;
      margin-right: 0;
   }
   .v2-btn-search-tag {
      padding: 8px 40px !important;
      font-size: 20px !important;
      border: 2px solid #0064A7 !important;
   }
   .v2-btn-search-tag >svg {
      width: 18px;
      height: 18px;
   }
   .contact-consultation {
      margin-top: 30px !important;
   }
   .consultation-title {
      padding: 15px 0;
   }
   .consultation-content-step {
      padding: 40px 20px !important;
      margin-left: 0;
      margin-bottom: 40px;
   }
   .consultation-step-info>img {
      width: 83px;
      height: 83px;
      top: -20px;
      left: 4px;
   }
   .consultation-step-info >.step-4 .main {
      margin-right: 0;
      margin: 0 12px 28px;
      padding: 25px 0;
   }
   .consultation-step-info >.step-4 .factors {
      --column-product: 2;
      row-gap: 20px;
   }
   .consultation-step-info >.step-4 .factors> * {
      height: 72px;
      font-size: 14px;
      border: 2px solid #0064A7;
   }
   /* .modal-open .modal {
      top: 50px;
   } */
   .mx-n10.product-list {
      margin: 0;
   }
   .v2-service .title-intro {
      font-size: 30px;
   }
   .v2-service .bg-title-renovations {
      width: 135px;
      height: 25px;
      left: 30px;
   }
   .v2-service .title-renovations {
      margin: 0 40px 0 40px;
   }
   .v2-service .renovations-content {
      margin-top: 40px;
      margin-bottom: 44px;
   }
   .v2-service .service-info::after {
      bottom: -58px;
   }
   .v2-service .service-info::before {
      top: 0;
   }
   .v2-service-sales {
      padding-bottom: 60px !important;
   }
   .v2-service-sales .v2-sales-img {
      max-width: 100%;
      height: 450px;
      margin: 0 auto 60px;
   }
   .v2-service-sales .v2-sales-img> img {
      margin-left: 100px;
   }
   .v2-service-sales .v2-sales-title {
      top: 50px;
      left: 0;
      font-size: 20px;
   }
   .v2-service-sales .v2-sales-title > p {
      padding: 6px 12px !important;
   }
   .pseudo-circle {
      height: 25px;
      margin: 8px 0 8px 27px;
   }
   .step-3-advantage .content-advantage {
      padding: 24px 15px;
   }
   .line-circle-step-3 {
      margin: 12px 0;
   }
   .line-circle-step-3 > svg > line {
      stroke-width: 4;
      stroke-dasharray: 0 15;
   }
}

@media screen and (max-width: 28.125em) {
   .v2-column-list {
      --column-product: 1;
      row-gap: 40px;
   }

    .cus-mr-container {
        margin-left: unset !important;
        margin-right: unset !important;
    }

   .property-list.v2-mb-80 {
      margin-bottom: 60px;
   }

   .v2-column-detail-img {
      height: 230px;
      min-width: 100%;
   }
   .v2-btn-search-tag {
      padding: 12px 40px !important;
      font-size: 18px !important;
      border: 2px solid #0064A7 !important;
      width: 100%;
   }
   .v2-btn-search-tag >svg {
      width: 16px;
      height: 16px;
   }

   .v2-modal-search-tag .title-model {
      font-size: 22px;
      margin-bottom: 20px;
   }

   .v2-modal-search-tag button{
      width: 100%;
      height: 48px;
   }

   .v2-modal-search-tag .modal-body .v2-space-y-60 > * + * {
      margin-top: 40px;
   }

   .modal-header .close{
      width: 40px;
      height: 40px;
      margin: -22px -22px auto auto !important;
      line-height: 43px;
   }

   .modal-header .close span {
      font-size: 25px;
   }

   #search-tag.modal {
      /* top: 255px; */
      right: 8px;
      left: 8px;
      padding: 0 !important;
   }
   .consultation-content-step {
      padding: 40px 10px !important;
   }
   .consultation-step-info >.step-4 .factors {
      row-gap: 10px;
   }
   .v2-column-item-img {
      max-height: 170px;
      height: 170px;
   }
   .v2-column-item-content {
      height: auto;
   }
   .v2-service-special .v2-column-item-img,
   .renovations-info .v2-column-item-img {
      height: 170px;
   }
   .v2-service .service-info::after {
      bottom: -48px;
   }
   .v2-service-sales .v2-sales-img {
      height: 300px;
   }
   .v2-service-sales .v2-sales-img> img {
      margin-left: 60px;
   }
   .v2-service-sales .v2-sales-title {
      top: 30px;
      font-size: 16px;
   }
   .consultation-step-info >.step-4 .main {
      margin: 0 36px 28px;
   }
}

.border-none {
    border: none !important;
}

.bg-color-f5f5f5 {
    background-color: #f5f5f5 !important;
}

.cus-mr-container {
    margin-left: 6vw;
    margin-right: 6vw;
}

/* CUSTOM CKEDITOR5 */
.ck.ck-editor {
    width: 100% !important;
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    border: 0 !important;
}

.ck.ck-toolbar {
    border: 0 !important;
}

.ck-content li {
    list-style-type: unset !important;
}

.ck.ck-editor__editable_inline {
    padding: 0 !important;
}

.v2-radio-btn-disabled {
    color: #bbbbbb;
    cursor: no-drop !important;
}

@media screen and (max-width: 26.5625em) {
    .ck-content .table {
        display: table !important;
        margin: 0.9em auto !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 48em) {
    .ck-content .image {
        width: 100% !important;
    }
    .ck-content .image-style-side {
        max-width: 100% !important;
    }
    .ck.ck-editor__editable .image-inline {
        width: 100% !important;
    }
}
/* END CUSTOM CKEDITOR5 */
