.page-webs-1 {
    min-height: 30.9375rem;
    padding: 0;
    margin-top: 5rem;
    z-index: 2
}

.page-webs-1 .row {
}

.page-id-1132 .page-webs-1 {
    padding-bottom: 0;
    display: flex;
    align-items: flex-end
}

.page-id-1132 .page-webs-1 .image-main .image-cover {
    padding-top: 28.125rem
}

.page-webs-1 .col-title {
    padding-top: 4.25rem
}

.page-webs-1 .image-main .image-cover {
    padding-top: 70%
}

.page-webs-1 .image-main .image-cover img {
    object-fit: contain;
    object-position: 100% 50%
}

.page-webs-1 .btn-action {
    display: flex;
    gap: 1.875rem;
    margin-top: 2.4375rem
}

.page-webs-1 .btn-action a {
    margin: 0
}

.page-webs-1 .desc {
    color: var(--black2);
    font-size: 1rem;
    line-height: 1.5rem
}

.page-webs-1 .list-advantages {
    display: flex;
    list-style: none;
    margin-bottom: 1.5rem
}

.page-webs-1 .list-advantages li {
    margin: 0 .9375rem 0 0;
    padding-right: .9375rem;
    position: relative;
    color: var(--black2);
    font-size: 1rem;
    font-family: var(--semi)
}

.page-webs-1 .list-advantages li:last-child {
    margin-right: 0;
    padding-right: 0
}

.page-webs-1 .list-advantages li:not(:last-child):before {
    content: "";
    width: .0625rem;
    height: .875rem;
    background: var(--Xanh-non,#CD171F);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.page-webs-1 .title-home h1 {
    margin-bottom: .625rem
}

.popup-form-webs .tb-box {
    position: relative;
    border-radius: .625rem;
    padding: 3.75rem 2.5rem 0;
    height: 100%
}

.popup-form-webs .title .title-sub {
    
    font-family: var(--bold)!important
}

.popup-custom-full.popup-form-webs .title i {
    
}

.popup-form-webs .title {
    margin-bottom: 0
}

.popup-custom-full.popup-form-webs input {
    margin-bottom: .9375rem;
    border-radius: 62.5rem;
    border: .0625rem solid #E23A41;
    height: 2.25rem;
    background-color: transparent;
    color: #333;
    font-size: .875rem;
    padding: 0 1.0625rem;
    font-weight: normal
}

.popup-custom-full.popup-form-webs input::placeholder,.popup-custom-full.popup-form-webs textarea::placeholder {
    color: #333
}

.popup-custom-full.popup-form-webs textarea {
    background-color: transparent;
    border-radius: .5rem;
    border: .0625rem solid #E23A41;
    /* PHẢI là #333 như các ô input phía trên. Trước để #fff (sót từ thiết kế gốc có nền tối):
       popup của mình nền TRẮNG nên khách gõ lời nhắn xong không nhìn thấy chữ mình vừa gõ —
       chỉ hiện ra khi bôi đen. */
    color: #333;
    font-size: .875rem;
    font-weight: normal;
    min-height: 6.75rem
}

.popup-custom-full.popup-form-webs .form-contact .form-content {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: .5rem var(--25)
}

.popup-custom-full.popup-form-webs .wpcf7 .wpcf7-not-valid-tip {
    color: #fff
}

.popup-custom-full.popup-form-webs .wpcf7-form-control-wrap:last-child {
    grid-column: span 2
}

.popup-custom-full.popup-form-webs .form-submit {
    text-align: center
}

.popup-custom-full.popup-form-webs .form-submit button {
    margin: 1rem 0 0
}

.page-webs-2 {
    padding-top: 3.75rem
}

/* Lề dưới cho tiêu đề khối "Vấn đề".
   Trước để margin:0 nên tiêu đề DÍNH SÁT thẻ "01" (đo được đúng 0px trên cả 6 trang):
   hàng dưới canh đáy (.page-webs-2 .row{align-items:flex-end}), cột thẻ thường cao hơn cột ảnh
   nên thẻ 01 bị đẩy lên chạm đáy tiêu đề. Tách ra cho dễ đọc — cùng nhịp với các khối khác
   (khối "Dịch vụ phù hợp với" cũng dùng 2.5rem). */
.page-webs-2 .title-color h2 {
    margin: 0 0 2.5rem
}

@media screen and (max-width: 767.98px) {
    .page-webs-2 .title-color h2 {
        margin-bottom: 1.75rem
    }
}

.page-webs-2 .col-right {
    padding-left: 5.3125rem
}

.page-webs-2 .list-problem {
    list-style: none
}

.page-webs-2 .list-problem li {
    border-radius: .3125rem;
    background: linear-gradient(270deg,#f5f7fa 0%,#FCE9EA 100%);
    margin-bottom: 1.5rem;
    padding: 1.125rem 2.4375rem 1.125rem 1.875rem;
    display: flex;
    align-items: center;
    gap: 1.375rem;
    cursor: pointer
}

.page-webs-2 .list-problem li.active {
    background: var(--theme-color2)
}

.page-webs-2 .list-problem li.active * {
    color: #fff
}

.page-webs-2 .list-problem li p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.375rem;
    color: #2b2b2b
}

.page-webs-2 .list-problem li span {
    font-size: 2.5rem;
    color: var(--theme-color2);
    font-family: var(--bold);
    line-height: 1
}

/* Ảnh cân giữa theo chiều dọc so với cột thẻ.
   Trước để flex-end: ảnh bị dồn xuống đáy, hở một mảng trống phía trên (đo được lệch 107–217px).
   Kiểu canh đáy chỉ hợp với ảnh CẮT NỀN (người đứng trên "mặt đất"), còn đối tác dùng ảnh chụp
   chữ nhật có nền nên trông lệch hẳn. Canh giữa hợp với cả hai loại ảnh. */
.page-webs-2 .row {
    align-items: center
}

@keyframes shapeMover {
    0%,100% {
        transform: perspective(25rem) translateY(0) rotate(0deg) translateZ(0) translateX(0)
    }

    50% {
        transform: perspective(25rem) rotate(-12deg) translateZ(.625rem) translateY(1.25rem) translateX(1.25rem)
    }
}

#main .page-webs-3 {
    padding-top: .625rem;
    padding-bottom: 5.625rem
}

.page-webs-3 .title-color h2 {
    margin-bottom: 4.0625rem
}

.page-webs-3 .nav {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2.5rem calc(50% + 2.8125rem);
    left: 0;
    z-index: 0;
    top: 1.25rem
}

.page-webs-3 .tab-panels {
    width: calc(50% - 1.25rem);
    margin: 0 auto;
    z-index: 1;
    text-align: center;
    border-radius: 1.25rem;
    border: .0625rem solid #E23A41;
    background: linear-gradient(180deg,#f9fff5 0%,#f2ffea 54%,#f9fff5 100%);
    backdrop-filter: blur(.125rem);
    padding: 2.5rem 3rem 2.8125rem;
    min-height: 29rem
}

.page-webs-3 .tabbed-content {
    position: relative;
    width: 100%
}

.criteria-wrapper .number {
    color: #E23A41;
    font-size: 5rem;
    font-family: var(--bold);
    line-height: 1;
    margin-bottom: .3125rem;
    display: block
}

.criteria-wrapper .criteria-title {
    font-size: 1.75rem;
    font-family: var(--semi);
    margin-bottom: 1rem
}

.criteria-wrapper .desc p {
    color: #2b2b2b;
    line-height: 1.375rem;
    margin: 0
}

.criteria-wrapper .desc {
    margin-bottom: 3.125rem;
    max-height: 8.25rem;
    overflow-y: auto;
    padding-right: .25rem
}

.criteria-wrapper .desc::-webkit-scrollbar {
    width: .1875rem
}

.criteria-wrapper .button.btn-viewall {
    margin: 0
}

.criteria-wrapper .nav .tab {
    margin: 0
}

.criteria-wrapper .nav .tab a {
    display: flex;
    align-items: center;
    color: #2b2b2b;
    font-family: var(--medi);
    font-size: 1.5rem;
    font-weight: normal;
    grid-gap: 1.75rem;
    padding: 0
}

.criteria-wrapper .nav .tab:nth-of-type(2n + 1) a {
    flex-direction: row-reverse
}

.criteria-wrapper .nav .tab a:before {
    display: none
}

.criteria-wrapper .nav .tab .img {
    background-color: #fff;
    border: .0625rem solid #E23A41;
    border-radius: 50%;
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.criteria-wrapper .nav .tab .img img {
    width: 2.3125rem;
    height: 2.3125rem;
    display: block;
    object-fit: contain
}

.criteria-wrapper .nav .tab.active .img {
    background-color: #E23A41
}

.criteria-wrapper .nav .tab.active img {
    filter: brightness(0) invert(1)
}

.criteria-wrapper .nav .tab.active a,.criteria-wrapper .nav .tab:hover a {
    color: #E23A41
}

.criteria-wrapper .panel {
    transition: all .4s
}

#main .page-webs-4 {
    padding-top: 4.875rem;
    padding-bottom: 4.25rem;
    background-color: #fff;
    z-index: 2
}

.page-webs-4 .title-color h2 {
    margin-bottom: 2.6875rem
}

.page-webs-4 .title-color:has(.desc) h2 {
    margin-bottom: 1.25rem
}

.page-webs-4 .title-color h2,.page-webs-4 .title-color p {
    max-width: 48.5rem;
    margin: 0 auto 3.6875rem;
    color: #2b2b2b
}

.project-wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2.8125rem;
    transition: all 1s;
    margin-bottom: 3.4375rem
}

.project-wrapper .scrollmagicfadeUp .project-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(3.125rem);
    transition: all .6s
}

.project-wrapper .scrollmagicfadeUp .box-image img {
    transform: scale(1.2);
    opacity: 0;
    transition: all 1s
}

.project-wrapper .scrollmagicfadeUp .box-image:hover img {
    transform: scale(1.1)
}

.project-wrapper .scrollmagicfadeUp.scroll-css .project-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.project-wrapper .scrollmagicfadeUp .box-image img {
    opacity: 1;
    transform: scale(1)
}

.project-wrapper .image-cover {
    padding-top: 63%
}

.project-wrapper .project-name {
    font-size: 1.125rem;
    color: #2b2b2b;
    margin: 0;
    font-family: var(--semi);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    transition: color 0s;
    line-height: 1.5625rem;
    height: 3.125rem
}

.project-wrapper .project-name:hover {
    color: var(--theme-color)
}

.project-wrapper .box-project .box-text {
    padding: 1.1875rem 0 0
}

.page-webs-4 .box-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.page-webs-4 .box-note i {
    color: #2b2b2b;
    margin-bottom: 1.375rem
}

.page-webs-4 .box-note .btn-viewall {
    margin: 0
}

#main .page-webs-5 {
    padding-top: 3.75rem
}

.page-webs-5 .section-bg {
    height: 130%
}

.page-webs-5 .title-color {
    max-width: 48.625rem;
    margin: 0 auto
}

.page-webs-5 .title-color h2 {
    margin-bottom: 4.375rem
}

.page-webs-5 .col-left {
    flex-basis: 43%;
    max-width: 43%
}

.page-webs-5 .accordion-title {
    background-color: transparent;
    border: 0;
    padding: 0;
    font-size: 1.625rem;
    color: #2b2b2b;
    font-weight: normal;
    font-family: var(--semi);
    line-height: 1.2;
    bottom: 0;
    cursor: pointer
}

.page-webs-5 .accordion-title .toggle-accordion {
    margin: 0;
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    min-height: 1.875rem;
    border-radius: .1875rem;
    border: .03125rem solid #CD171F;
    right: 0;
    color: #CD171F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%)
}

.page-webs-5 .accordion-title .toggle-accordion:before {
    content: "\2b";
    font-family: var(--fa6);
    font-size: .875rem;
    line-height: 1
}

.page-webs-5 .accordion-title.active .toggle-accordion {
    background-color: #CD171F;
    color: #fff
}

.page-webs-5 .accordion-title.active .toggle-accordion:before {
    content: "\f068"
}

.page-webs-5 .accordion-inner {
    padding: 1.5625rem 0 0;
    font-size: 1rem;
    color: #5c5c5c;
    line-height: 1.375rem
}

.page-webs-5 .accordion-item {
    margin-bottom: 1.6875rem;
    padding-bottom: 1.6875rem;
    border-bottom: .0625rem solid #eaeaea
}

.page-webs-5 .accordion-item:last-child {
    margin-bottom: 0
}

.page-webs-5 .col-right {
}

.page-webs-6 .title-color h2 {
    margin-bottom: 3rem
}

.page-webs-6 .news-wrapper .image-cover {
    padding-top: 63%
}

.page-webs-6 .news-wrapper .box-text {
    padding-top: 2.125rem;
    padding-bottom: 1.5625rem
}

.page-webs-6 .news-wrapper .post-title a:hover {
    color: var(--theme-color2)
}

.page-webs-6 .news-wrapper .box-image:hover img {
    transform: scale(1.1)
}

.page-webs-6 .news-wrapper .box-image img {
    transition: all 1s
}

.page-webs-6 .news-wrapper .swiper-pagination-progressbar-fill {
    background-color: var(--theme-color2)
}

.page-webs-6 .news-wrapper .view-more {
    margin: 0;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: var(--semi);
    color: var(--theme-color2);
    position: relative;
    display: flex;
    align-items: center;
    font-size: .9375rem
}

.page-webs-6 .news-wrapper .view-more:after {
    content: "\f061";
    font-family: var(--fa6);
    width: .875rem;
    height: .875rem;
    transition: all .4s;
    display: inline-flex;
    align-items: center;
    transform: translateY(0) rotate(-45deg);
    font-size: .875rem;
    font-weight: 400;
    margin-left: .625rem
}

.page-webs-6 .news-wrapper .view-more:hover:after {
    transform: translateY(0) rotate(0deg)
}

.page-webs-7 {
    padding-top: 3.75rem
}

.page-webs-7 .title-color h2 {
    margin-bottom: 3.4375rem
}

.page-webs-7 .accordion-title {
    background-color: transparent;
    border: 0;
    padding: 0;
    font-size: 1.25rem;
    color: #2b2b2b;
    font-weight: normal;
    font-family: var(--semi);
    line-height: 1;
    bottom: 0;
    cursor: pointer
}

.page-webs-7 .accordion-title.active {
    color: #CD171F
}

.page-webs-7 .accordion-title .toggle-accordion {
    margin: 0;
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    min-height: 1.875rem;
    border-radius: .1875rem;
    border: .03125rem solid #CD171F;
    right: -1.875rem;
    color: #CD171F;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%)
}

.page-webs-7 .accordion-title .toggle-accordion:before {
    content: "\2b";
    font-family: var(--fa6);
    font-size: .875rem;
    line-height: 1
}

.page-webs-7 .accordion-title.active .toggle-accordion {
    background-color: #CD171F;
    color: #fff
}

.page-webs-7 .accordion-title.active .toggle-accordion:before {
    content: "\f068"
}

.page-webs-7 .accordion-item {
    padding: 1.5625rem 3.5rem 1.5625rem 2.6875rem;
    border-radius: .3125rem;
    border: .0625rem solid #dedede;
    margin-bottom: 1.625rem
}

.page-webs-7 .accordion-item:last-child {
    margin-bottom: 0
}

.page-webs-7 .accordion-inner {
    padding: 1.25rem 0 0 0;
    font-size: 1rem;
    color: #5b5b5b;
    line-height: 1.25rem
}

.commit-wrapper {
    border-radius: .9375rem;
    background: linear-gradient(96deg,#CD171F .38%,#A01219 100.3%);
    box-shadow: 0 .25rem 2.5rem 0 rgba(0,74,61,.1);
    padding: 3.75rem 4.375rem 0;
    display: flex;
    width: 100%
}

.commit-wrapper .col-title {
    width: 35%;
    flex-shrink: 0;
    max-width: 21.875rem;
    padding-bottom: 4.375rem
}

.commit-wrapper .col-title h3 {
    font-size: 1.25rem;
    line-height: 1.2;
    color: #FCE9EA;
    font-family: var(--semi);
    margin-bottom: .875rem
}

.commit-wrapper .col-title h2 {
    font-size: 2.25rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 3.125rem
}

.commit-wrapper .col-content {
    width: 65%;
    padding-left: 1.875rem;
    flex: 1;
    position: relative
}

.commit-wrapper .commit-desc {
    color: #fff;
    margin-bottom: 3.375rem
}

#main .commit-wrapper .button.btn-viewall-white {
    background-color: #fff;
    margin: 0
}

#main .commit-wrapper .button.btn-viewall-white:hover {
    background-color: var(--theme-color2)
}

.commit-wrapper .commit-slider {
    margin-bottom: -4.375rem;
    width: calc(100% + 9.375rem)
}

.commit-wrapper .commit-slider .icon-box {
    border-radius: .625rem;
    border: .0625rem solid #FCE9EA;
    background: linear-gradient(335deg,#f7fff2 12.69%,#fff 62.41%);
    backdrop-filter: blur(.3125rem);
    padding: 2.0625rem 1.875rem 2.5rem;
    text-align: center;
    height: 100%
}

.commit-wrapper .commit-slider .icon {
    width: 3.75rem;
    height: 3.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #E23A41;
    border-radius: 50%
}

.commit-wrapper .commit-slider .icon img {
    filter: brightness(0) invert(1);
    width: 2.1875rem;
    height: 2.1875rem;
    object-fit: contain;
    display: block
}

.commit-wrapper .commit-slider .box-text {
    padding: 1.0625rem 0 0
}

.commit-wrapper .commit-slider h3 {
    font-size: 1.125rem;
    font-family: var(--semi);
    margin: 0 0 1.125rem
}

.commit-wrapper .commit-slider .box-text p {
    margin: 0;
    font-size: 1rem;
    color: #5c5c5c;
    line-height: 1.25rem
}

.commit-wrapper .swiper-navigation {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: 1.5625rem;
    left: -6.25rem;
    bottom: -3.125rem
}

.commit-wrapper .swiper-button {
    font-size: 1.5rem;
    color: #CD171F;
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.commit-wrapper .swiper-button:hover {
    color: var(--theme-color)
}

#main .page-webs-9 {
    padding-top: 1.875rem
}

.page-webs-9 .title-color h2 {
    margin-bottom: .9375rem
}

.page-webs-9 .title-color p {
    max-width: 41.875rem;
    margin: 0 auto 3.125rem;
    color: #5c5c5c;
    line-height: 1.375rem
}

.page-webs-9 .col-left {
    width: 60%
}

.page-webs-9 .list-combo {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2.1875rem
}

.page-webs-9 .list-combo .item-combo {
    padding: 4.1875rem 1.75rem 2.0625rem 2.375rem;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column
}

.page-webs-9 .list-combo .sticky-combo {
    color: #fff;
    font-size: .6875rem;
    font-family: var(--semi);
    line-height: .8125rem;
    padding: .375rem 1.375rem;
    border-radius: 6.1875rem;
    top: .875rem;
    right: 1.0625rem;
    position: absolute;
    z-index: 1
}

.page-webs-9 .list-combo .item-combo:before {
    content: "";
    width: 100%;
    height: 3.125rem;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../../images/bg-combo.webp) no-repeat top;
    background-size: cover;
    z-index: 0
}

.page-webs-9 .list-combo .item-combo:after {
    content: "";
    width: 100%;
    height: calc(100% - 1.875rem);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-radius: 0 0 .625rem .625rem;
    border: .0625rem solid #dbdbdb;
    border-top: 0;
    background-color: #fff
}

.list-combo .item-combo .box-top {
    position: relative;
    z-index: 2
}

.list-combo .item-combo .combo-name {
    color: #CD171F;
    font-family: var(--semi);
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: .625rem
}

.list-combo .item-combo .combo-desc {
    font-size: 1rem;
    font-style: italic;
    color: #2b2b2b;
    line-height: 1.25rem;
    font-family: var(--medi);
    margin-bottom: 1.25rem
}

.list-combo .item-combo .box-info {
    position: relative;
    z-index: 2;
    margin-bottom: 1.25rem
}

.list-combo .item-combo .box-info ul {
    list-style: none;
    margin: 0
}

.list-combo .item-combo .box-info ul li {
    margin-left: 0;
    padding-left: 2.8125rem;
    color: #2b2b2b;
    position: relative;
    margin-bottom: .5rem
}

.list-combo .item-combo .box-info ul li:before {
    content: "";
    width: .6875rem;
    height: .75rem;
    position: absolute;
    left: .75rem;
    background: url(../../../images/line-logo.svg) no-repeat center;
    top: .3125rem;
    background-size: contain
}

.list-combo .item-combo .box-info ul li strong {
    font-family: var(--semi)
}

.list-combo .item-combo .btn-viewall {
    margin: auto 0 0
}

.list-combo .item-combo:nth-child(2) .combo-name {
    color: var(--theme-color)
}

.page-webs-9 .col-right {
    width: 40%;
    padding-left: 1.875rem
}

.page-webs-9 .form-quote {
    position: relative;
    border-radius: .625rem;
    background: #CD171F;
    padding: 3.75rem 2.5rem 0;
    height: 100%
}

.page-webs-9.no-table .col-left {
    width: 100%
}

.page-webs-9.no-table .list-combo {
    grid-template-columns: repeat(3,1fr)
}

.form-quote .form-title {
    font-size: 1.75rem;
    color: #fff;
    font-family: var(--semi);
    text-transform: uppercase;
    margin-bottom: .75rem;
    line-height: 1.2
}

.form-quote i {
    font-size: 1.125rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .875rem;
    display: block
}

.form_baogia .form-item>label {
    font-size: 1.125rem;
    color: #fff;
    font-weight: normal;
    font-family: var(--semi);
    line-height: 1.2;
    margin-bottom: 1.5rem
}

.form_baogia .box-thongtin,.form_baogia .form-item.bottom {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 0 .625rem
}

.form_baogia .box-thongtin {
    margin-bottom: 1.75rem
}

.form_baogia .box-thongtin .wpcf7-form-control-wrap:first-child,.form_baogia .form-item.bottom .wpcf7-form-control-wrap:last-child {
    grid-column: span 2
}

.form_baogia .box-thongtin input,.form_baogia .form-item.bottom input {
    margin-bottom: .9375rem;
    border-radius: 62.5rem;
    border: .0625rem solid #E23A41;
    height: 2.25rem;
    background-color: transparent;
    color: #fff;
    font-size: .875rem;
    padding: 0 1.0625rem;
    font-weight: normal
}

.form_baogia .form-item.bottom textarea {
    background-color: transparent;
    border-radius: .5rem;
    border: .0625rem solid #E23A41;
    color: #fff;
    font-size: .875rem;
    font-weight: normal;
    min-height: 6.75rem
}

.form_baogia .box-thongtin input::placeholder,.form_baogia .form-item.bottom input::placeholder,.form_baogia .form-item.bottom textarea::placeholder {
    color: #fff
}

.form_baogia #fakeFile {
    margin: 0 0 .9375rem;
    min-height: 2.25rem;
    height: 2.25rem;
    color: #fff;
    border: .0625rem solid #E23A41;
    border-radius: 6.1875rem;
    font-weight: normal;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    justify-content: center;
    cursor: pointer
}

.form_baogia #fakeFile:before {
    content: "";
    width: 1.375rem;
    height: 1.125rem;
    display: inline-flex;
    background: url(../../../images/icon-upload.svg) no-repeat center;
    background-size: contain
}

.form_baogia #fakeFile+.wpcf7-form-control-wrap {
    display: none
}

.wpcf7 .form_baogia .wpcf7-not-valid-tip {
    right: 0;
    left: unset;
    color: #fff
}

.form_baogia .wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 1rem
}

.form_baogia .wpcf7-checkbox .wpcf7-list-item-label {
    color: #fff;
    font-size: .875rem;
    font-weight: normal;
    padding-left: 1.875rem;
    position: relative;
    line-height: 1.2
}

.form_baogia .wpcf7-list-item-label:before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: var(--theme-color);
    position: absolute;
    left: .1875rem;
    border-radius: 50%;
    top: .0625rem;
    border: .0625rem solid #fff
}

.form_baogia input[type="checkbox"] {
    display: none
}

.wpcf7 .form_baogia span.wpcf7-list-item {
    margin: 0
}

.wpcf7 .form_baogia span.wpcf7-list-item label {
    margin-bottom: .9375rem
}

.form_baogia input[type="checkbox"]:checked+.wpcf7-list-item-label::before {
    border: .09375rem solid #fff;
    background-color: var(--theme-color)
}

.form_baogia input[type="checkbox"]:checked+.wpcf7-list-item-label::after {
    position: absolute;
    width: .375rem;
    height: .375rem;
    background-color: #fff;
    border-radius: 6.1875rem;
    top: .375rem;
    left: .5rem
}

#main .form_baogia .button.btn-viewall {
    margin: 1.875rem 0 0;
    width: 100%;
    border-radius: 62.5rem;
    border: .0625rem solid rgb(255 255 255 / 32%);
    background: var(--ruot-kinh,linear-gradient(46deg,rgba(255,255,255,.2) -12.56%,rgba(255,255,255,.5) 100%));
    backdrop-filter: blur(.125rem)
}

#main .form_baogia .button.btn-viewall:hover {
    background: var(--theme-color2)
}

.form-quote .img-bottom {
    max-width: 17.8125rem;
    margin: 0 auto;
    transform: translateY(.625rem)
}

.form-quote .img-bottom img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

.page-webs-10 {
    padding-top: 3.75rem;
    padding-bottom: 4.375rem
}

.page-webs-10 .title-color p {
    max-width: 44.375rem;
    margin: 0 auto 2.6875rem
}

.page-webs-10 .image-main {
    width: 50%;
    max-width: 28.125rem;
    margin-left: 4.0625rem
}

.page-webs-10 .steps-wrapper {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 8rem 2.8125rem;
    margin-top: -15.625rem;
    position: relative;
    padding: 0 2.375rem
}

.page-webs-10 .steps-wrapper svg {
    position: absolute;
    top: 3.3125rem;
    z-index: -1;
    width: 100%;
    left: 0
}

.page-webs-10 .steps-wrapper .item-step {
    width: calc(25% - 2.125rem)
}

.page-webs-10 .steps-wrapper:before {
    content: "";
    width: calc(50% - 1.4375rem)
}

.page-webs-10 .col-steps {
    position: relative
}

.page-webs-10 .col-steps .item-step {
    text-align: center
}

.page-webs-10 .col-steps .item-step:hover .step-title {
    color: #CD171F
}

.page-webs-10 .item-step .number {
    color: #CD171F;
    font-size: 1.75rem;
    font-family: var(--bold);
    padding-bottom: 1.5625rem;
    margin-bottom: 2.1875rem;
    display: block;
    line-height: 1;
    position: relative
}

.page-webs-10 .item-step .number:before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-block;
    background-color: #E23A41;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    bottom: -.875rem;
    border: .4375rem solid #FCE9EA
}

.page-webs-10 .item-step .step-title {
    font-size: 1.125rem;
    font-family: var(--semi);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: .9375rem
}

.page-webs-10 .item-step p {
    line-height: 1.25rem;
    color: #5c5c5c;
    margin: 0
}

.page-webs-10 .section-bg {
    bottom: 0;
    top: unset;
    height: 180%;
    background-position: bottom
}

#animated-path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 4s ease
}

.page-webs-procedure {
    padding-top: 3.75rem
}

.page-webs-procedure .section-bg {
    top: unset;
    bottom: 0;
    height: calc(100% + 3.125rem)
}

.page-webs-procedure .title-color h2 {
    margin-bottom: 2.875rem
}

.page-webs-procedure .col-right {
    padding-left: 2.8125rem;
    padding-top: .9375rem
}

.page-webs-procedure .col-left .image-cover {
    padding-top: 112%
}

.page-webs-procedure .accordion-title {
    background-color: transparent;
    border: 0;
    padding: 0;
    font-size: 1.5rem;
    color: #2b2b2b;
    font-weight: normal;
    font-family: var(--semi);
    line-height: 1.2;
    bottom: 0;
    cursor: pointer;
    padding-left: 5.9375rem;
    z-index: 2
}

.page-webs-procedure .accordion-title .number {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    border: .0625rem solid #CD171F;
    border-radius: 50%;
    background: linear-gradient(180deg,#fffce9 0%,#FFE9EA 75.5%);
    font-size: 1.5rem;
    font-weight: normal;
    font-family: var(--bold);
    color: #CD171F
}

.page-webs-procedure .accordion-title .toggle-accordion {
    margin: 0;
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    min-height: 1.875rem;
    border-radius: .1875rem;
    border: .03125rem solid #CD171F;
    right: 0;
    color: #CD171F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%)
}

.page-webs-procedure .accordion-title .toggle-accordion:before {
    content: "\2b";
    font-family: var(--fa6);
    font-size: .875rem;
    line-height: 1
}

.page-webs-procedure .accordion-title.active .toggle-accordion {
    background-color: #CD171F;
    color: #fff
}

.page-webs-procedure .accordion-title.active .toggle-accordion:before {
    content: "\f068"
}

.page-webs-procedure .accordion-inner {
    padding: 1.5625rem 0 0 5.9375rem;
    font-size: 1rem;
    color: var(--black2);
    line-height: 1.375rem
}

.page-webs-procedure .accordion-item {
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 0;
    position: relative
}

.page-webs-procedure .accordion-item:before {
    content: "";
    width: calc(100% - 5.9375rem);
    right: 0;
    height: .0625rem;
    background-color: #eaeaea;
    bottom: 0;
    position: absolute
}

.page-webs-procedure .accordion-item:last-child {
    margin-bottom: 0
}

.page-webs-procedure .accordion-item:last-child .progress-line2,.page-webs-procedure .accordion-item:last-child .progress-line {
    display: none
}

.page-webs-procedure .accordion-item:has(.active) .progress-line2,.page-webs-procedure .accordion-item:has(.active) .progress-line {
    display: block
}

.page-webs-procedure .progress-line {
    height: 0;
    background-color: var(--theme-color2);
    position: absolute;
    top: 2.5625rem;
    left: 1.75rem;
    width: .125rem;
    opacity: 0;
    z-index: 1
}

.page-webs-procedure .accordion-item:has(.active) .progress-line {
    animation: progressAnimation 5s linear forwards;
    opacity: 1
}

.page-webs-procedure .accordion-item .progress-line2 {
    height: calc(100% - 2rem);
    background-color: #eaeaea;
    position: absolute;
    top: 2.875rem;
    left: 1.75rem;
    width: .125rem
}

@keyframes progressAnimation {
    0% {
        height: 0
    }

    100% {
        height: calc(100% - 1.375rem)
    }
}

.page-webs-logo .section-bg {
    top: unset;
    bottom: 0;
    background-position: bottom center;
    height: calc(100% + 5rem)
}

.page-webs-logo {
    padding-top: 3.75rem
}

.page-webs-logo .title-color h2 {
    margin-bottom: 3.4375rem
}

.page-webs-logo .col-left {
    flex-basis: 27%;
    max-width: 27%
}

.page-webs-logo .col-right {
    padding-left: 3.125rem;
    flex-basis: 73%;
    max-width: 73%
}

.page-webs-logo .item-logo {
    display: flex
}

.page-webs-logo .item-logo:not(:last-child) {
    margin-bottom: 1.5625rem;
    padding-bottom: 1.5625rem;
    border-bottom: .0625rem solid #CD171F
}

.page-webs-logo .item-logo h3 {
    margin: 0;
    width: 30%;
    flex-shrink: 0;
    margin-right: 4.6875rem;
    color: var(--black2);
    font-size: 1.25rem;
    text-transform: uppercase
}

.page-webs-logo .item-logo .desc {
    margin: 0;
    color: #2b2b2b;
    text-align: justify;
    line-height: 1.375rem
}

.page-webs-cate {
    padding: 3.75rem 0 0
}

.page-webs-cate .title-color {
    margin-bottom: 3.3125rem
}

.page-webs-cate .title-color h2 {
    color: #fff;
    margin-bottom: 1.125rem
}

.page-webs-cate .title-color .desc {
    color: #fff;
    max-width: 49.8125rem;
    margin: 0 auto
}

.page-webs-cate .cate-wrapper {
    display: flex;
    grid-gap: var(--30)
}

.page-webs-cate .cate-wrapper .number {
    color: #fff;
    font-size: 4.6875rem;
    font-style: normal;
    font-family: var(--bold);
    line-height: 120%
}

.page-webs-cate .cate-item {
    padding-bottom: 3.75rem;
    position: relative;
    flex: 1
}

.page-webs-cate .cate-item:before {
    content: "";
    width: .0625rem;
    height: 100%;
    background: linear-gradient(180deg,rgba(231,255,223,0) 0%,#FFE9EA 100%);
    position: absolute;
    right: -.625rem;
    opacity: .6
}

.page-webs-cate .cate-item:last-child:before {
    display: none
}

.page-webs-cate .cate-wrapper h3 {
    color: #fff;
    font-size: 1.5rem;
    font-style: normal;
    font-family: var(--semi);
    line-height: 120%;
    margin-bottom: 1.1875rem
}

.page-webs-cate .cate-wrapper ul {
    margin-bottom: 0;
    list-style: none
}

.page-webs-cate .cate-wrapper ul li {
    margin-left: 0;
    padding-left: 1.875rem;
    color: #fff;
    position: relative;
    margin-bottom: .5rem;
    font-size: 1rem
}

.page-webs-cate .cate-wrapper ul li:before {
    content: "";
    width: .6875rem;
    height: .75rem;
    position: absolute;
    left: 0;
    background: url(../../../images/line-logo.svg) no-repeat center;
    top: .3125rem;
    background-size: contain;
    filter: brightness(0) invert(1)
}

@media screen and (min-width: 768px) {
    .list-combo .item-combo .viewall,.list-combo .item-combo .hiddenall {
        display:none
    }

    .accordion-mobile {
        display: none
    }
}

@media screen and (max-width: 767.98px) {
    .popup-custom-full.popup-form-webs .form-contact .form-content {
        grid-template-columns:1fr
    }

    .popup-custom-full.popup-form-webs .wpcf7-form-control-wrap:last-child {
        grid-column: unset
    }

    .popup-custom-full.popup-form-webs form {
        margin-bottom: 0
    }

    .page-webs-3 .tabbed-content {
        display: none
    }

    .page-webs-2 .title-color h2 {
        margin-bottom: 1.875rem;
        font-size: var(--22)
    }

    .page-webs-2 .col-right {
        padding-left: .9375rem;
        flex-basis: 100%;
        max-width: 100%;
        padding-bottom: 0
    }

    .page-webs-2 .row,.page-webs-5 .row {
        justify-content: center
    }

    .page-webs-2 .col-left {
        order: 1;
        flex-basis: 80%;
        max-width: 80%;
        padding-bottom: 0
    }

    .page-webs-2 .list-problem {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 0 1.875rem;
        margin-bottom: 0
    }

    .criteria-wrapper .nav .tab .img {
        width: 3.125rem;
        height: 3.125rem
    }

    .criteria-wrapper .nav .tab a {
        font-size: 1rem;
        grid-gap: .625rem
    }

    .page-webs-3 .tab-panels {
        padding: 1.875rem 1.25rem
    }

    .criteria-wrapper .number {
        font-size: 3.75rem
    }

    .criteria-wrapper .criteria-title {
        font-size: 1.5rem;
        margin-bottom: .375rem
    }

    .criteria-wrapper .desc {
        margin-bottom: 1.875rem
    }

    .title-color h1,.title-color h2 {
        font-size: 2.125rem
    }

    .criteria-wrapper .nav .tab .img img {
        width: 1.5625rem;
        height: 1.5625rem
    }

    .project-wrapper {
        grid-gap: 1.875rem;
        margin-bottom: 2.1875rem
    }

    .page-webs-5 .col-left {
        padding-right: .9375rem;
        flex-basis: 80%;
        max-width: 80%
    }

    .page-webs-5 .col-right {
        flex-basis: 100%;
        max-width: 100%
    }

    .commit-wrapper {
        padding: 1.875rem 2.1875rem 0
    }

    .commit-wrapper .col-title h2 {
        font-size: 1.5rem
    }

    .commit-wrapper .commit-desc {
        margin-bottom: 1.875rem
    }

    .page-webs-9 .col-left {
        width: 100%
    }

    .page-webs-9 .col-right {
        padding-left: .9375rem;
        width: 100%
    }

    .form-quote .img-bottom {
        max-width: 25rem
    }

    .page-webs-10 .steps-wrapper {
        padding: 0 .9375rem;
        grid-gap: 3.75rem 1.25rem;
        margin-top: 0;
        flex-direction: column
    }

    .page-webs-10 .steps-wrapper:after {
        content: "";
        width: .0625rem;
        height: 0;
        background-color: var(--theme-color);
        position: absolute;
        left: 10.3125rem;
        z-index: -1;
        transition: all 2s
    }

    .page-webs-10 .steps-wrapper.active:after {
        height: 100%
    }

    .page-webs-10 .image-main {
        margin-left: 0;
        max-width: 40%;
        display: none
    }

    .page-webs-10 .steps-wrapper:before {
        display: none
    }

    .page-webs-10 .steps-wrapper svg {
        display: none
    }

    .page-webs-10 .steps-wrapper .item-step {
        width: 100%;
        text-align: left;
        position: relative;
        display: flex
    }

    .page-webs-10 .item-step .number {
        flex-shrink: 0;
        width: 9.375rem;
        margin: 0;
        padding: 0;
        padding-right: 1.5625rem;
        margin-right: 3.4375rem
    }

    .page-webs-10 .item-step .number:before {
        top: 0;
        right: -.875rem;
        left: unset;
        transform: unset;
        bottom: unset
    }

    .page-webs-3 .accordion-title {
        border: 0;
        display: flex;
        padding: .5rem;
        background: linear-gradient(270deg,#f5f7fa 0%,#FCE9EA 100%);
        align-items: center;
        border-radius: 6.1875rem;
        gap: 1rem;
        color: #2b2b2b;
        font-family: var(--medi);
        font-size: 1.25rem;
        font-weight: normal
    }

    .page-webs-3 .accordion-title.active {
        background-color: transparent;
        border: 0
    }

    .page-webs-3 .accordion-title.active .img {
        background: #E23A41
    }

    .page-webs-3 .accordion-title.active .img img {
        filter: brightness(0) invert(1)
    }

    .page-webs-3 .accordion-item {
        margin-bottom: 1.25rem
    }

    .page-webs-3 .accordion-item .img {
        background-color: #fff;
        border: .0625rem solid #E23A41;
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .page-webs-3 .accordion-item img {
        width: 1.875rem;
        height: 1.875rem;
        display: block;
        object-fit: contain
    }

    .page-webs-3 .accordion-item .toggle-accordion {
        position: absolute;
        right: 0
    }

    .page-webs-3 .accordion-inner {
        padding: 1.25rem 0 0 1.25rem;
        border-left: .0625rem solid var(--theme-color);
        margin-left: .3125rem
    }

    .criteria-wrapper .desc {
        max-height: unset
    }

    .list-combo .viewall,.list-combo .hiddenall,.list-combo.show .hiddenall {
        color: var(--theme-color2);
        padding: 0;
        min-height: unset;
        height: auto;
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.0625rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 1.875rem;
        z-index: 2
    }

    .list-combo .hiddenall,.list-combo.show .viewall {
        display: none
    }

    .list-combo .item-combo .box-info {
        margin-bottom: .9375rem;
        height: 15.3125rem;
        overflow: hidden
    }

    .list-combo.show .item-combo .box-info {
        height: auto
    }

    .list-combo .viewall i {
        animation: moveUpDown 1.3s infinite
    }

    .list-combo .hiddenall i {
        animation: moveUpDown2 1.3s infinite
    }

    .page-webs-1 {
        margin-top: 0;
        text-align: center;
        padding-bottom: 1.875rem;
        padding-top: 5rem
    }

    .page-webs-1 .image-main .image-cover img {
        object-position: 50% 50%
    }

    .page-webs-1 .col-title {
        padding-top: 3.125rem
    }

    .page-webs-1 .list-advantages {
        justify-content: center
    }

    .page-webs-1 .btn-action {
        justify-content: center;
        margin-bottom: 1.875rem;
        gap: 1.25rem
    }

    .page-webs-logo .col-left {
        display: none
    }

    .page-webs-logo .col-right {
        padding-left: .9375rem;
        flex-basis: 100%;
        max-width: 100%
    }

    .page-webs-logo .item-logo h3 {
        font-size: 1.1875rem;
        width: 100%;
        margin: 0 0 1rem
    }

    .page-webs-9.no-table .list-combo {
        grid-template-rows: 1fr;
        overflow-x: auto;
        justify-content: start;
        grid-template-columns: repeat(3,42%);
        grid-gap: 1.25rem;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-bottom: 1.5625rem;
        margin-bottom: -1.5625rem
    }

    .page-webs-9.no-table .list-combo .item-combo .box-info {
        height: auto
    }

    .page-webs-9.no-table .list-combo .item-combo .viewall {
        display: none
    }

    .page-webs-cate .cate-wrapper {
        grid-gap: 1.875rem
    }

    .page-webs-cate .cate-item:before {
        right: -.9375rem
    }

    .page-webs-cate .cate-item {
        padding-bottom: 1.875rem
    }

    .page-webs-cate .title-color {
        margin-bottom: 0
    }

    .page-webs-cate .cate-wrapper .number {
        font-size: 3.75rem
    }

    .page-webs-cate .cate-item {
        padding-top: 1.875rem
    }
}

@media screen and (min-width: 768px) {
    .project-wrapper .box-project:nth-of-type(3),.project-wrapper .box-project:nth-of-type(4),.project-wrapper .box-project:nth-of-type(9),.project-wrapper .box-project:nth-of-type(10) {
        grid-column:span 2
    }

    .project-wrapper .box-project:nth-of-type(4),.project-wrapper .box-project:nth-of-type(10) {
        margin-top: -34%
    }
}

@media screen and (max-width: 767.98px) {
    .page-webs-1 .title-home h1 {
        font-size:var(--22)
    }

    .page-webs-procedure {
        padding-top: var(--50)
    }

    .page-id-1132 .page-webs-1 .image-main .image-cover {
        padding-top: 92%
    }

    .page-webs-4 .title-color:has(.desc) h2 {
        font-size: var(--22)
    }

    .page-webs-1 .list-advantages li {
        margin-right: .625rem;
        padding-right: .625rem;
        font-size: var(--15)
    }

    .title-color h1,.title-color h2 {
        font-size: 1.5rem
    }

    .title-color h2 br {
        display: none
    }

    .page-webs-2 .list-problem {
        grid-template-columns: repeat(1,1fr)
    }

    .page-webs-2 .list-problem li {
        padding: 1rem 1.25rem 1rem 1.25rem
    }

    .page-webs-2 .col-left {
        flex-basis: 100%;
        max-width: 100%
    }

    #main .page-webs-3 {
        padding-top: 2.5rem;
        padding-bottom: 1.875rem
    }

    .page-webs-3 .title-color h2 {
        margin-bottom: 1.875rem;
        font-size: var(--22)
    }

    #main .page-webs-4 {
        padding-top: 3.125rem;
        padding-bottom: 3.125rem
    }

    .project-wrapper {
        display: block;
        margin-bottom: .9375rem
    }

    .project-wrapper .box-project .box-text {
        padding-bottom: 1.875rem
    }

    .project-wrapper .project-name {
        height: auto
    }

    .page-webs-4 .box-note i {
        margin-bottom: 1rem
    }

    .page-webs-5 .col-left {
        flex-basis: 100%;
        max-width: 100%
    }

    .page-webs-5 .title-color h2 {
        margin-bottom: 1.875rem
    }

    .page-webs-5 .accordion-title {
        font-size: 1.375rem;
        padding-right: 2.5rem
    }

    .page-webs-5 .accordion-title br {
        display: none
    }

    .page-webs-5 .accordion-item {
        margin-bottom: 1.375rem;
        padding-bottom: 1.375rem
    }

    #main .page-webs-5 {
        padding-top: 3.125rem;
        padding-bottom: 0
    }

    .commit-wrapper {
        flex-wrap: wrap;
        padding: 1.875rem 1.25rem
    }

    .commit-wrapper .col-title {
        width: 100%;
        padding-bottom: 0
    }

    .commit-wrapper .col-title h2 br {
        display: none
    }

    .commit-wrapper .col-title h2 {
        margin-bottom: 1.5625rem
    }

    #main .commit-wrapper .button.btn-viewall-white {
        display: none
    }

    .commit-wrapper .col-content {
        width: 100%;
        padding-left: 0
    }

    .commit-wrapper .commit-slider {
        width: calc(100% - 2.5rem);
        margin-bottom: -8.125rem;
        margin-right: 0
    }

    .commit-wrapper .commit-slider .icon-box {
        padding: 1.75rem 1.25rem 1.5625rem
    }

    .commit-wrapper .swiper-navigation {
        left: -.75rem;
        bottom: -4.375rem;
        flex-direction: column
    }

    .commit-wrapper .swiper-button.swiper-prev {
        color: #fff!important
    }

    .page-webs-9 .list-combo {
        grid-template-rows: 1fr;
        overflow-x: auto;
        justify-content: start;
        grid-template-columns: repeat(2,80%);
        grid-gap: 1.25rem;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .page-webs-9 .list-combo::-webkit-scrollbar {
        display: none
    }

    .page-webs-9 .list-combo .item-combo {
        padding: 3.4375rem 1.375rem 2.1875rem
    }

    .list-combo .item-combo .combo-name {
        font-size: 1.5rem
    }

    .list-combo .item-combo .box-info ul li {
        padding-left: 1.875rem;
        font-size: .90625rem
    }

    .list-combo .item-combo .box-info ul li:before {
        left: .1875rem
    }

    .list-combo .item-combo .box-info {
        height: 14.0625rem
    }

    .page-webs-9 .form-quote {
        padding: 1.875rem 1.25rem 0
    }

    .form-quote .form-title {
        font-size: 1.5rem
    }

    .form-quote i {
        font-size: 1rem
    }

    .form_baogia .box-thongtin,.form_baogia .form-item.bottom {
        display: block
    }

    .form_baogia .wpcf7-checkbox {
        grid-template-columns: repeat(1,1fr)
    }

    .form_baogia #fakeFile {
        width: 100%;
        justify-content: flex-start;
        padding: 0 1.0625rem
    }

    .page-webs-10 {
        padding-top: .625rem;
        padding-bottom: 1.875rem
    }

    .page-webs-10 .steps-wrapper {
        padding: 0;
        grid-gap: 2.8125rem 1.25rem
    }

    .page-webs-10 .item-step .number {
        font-size: .875rem;
        width: 4.375rem;
        padding-right: 0;
        padding-top: .25rem;
        margin-right: 2.5rem
    }

    .page-webs-10 .item-step .number:before {
        width: 1.25rem;
        height: 1.25rem;
        border: .3125rem solid #FCE9EA
    }

    .page-webs-10 .steps-wrapper:after {
        left: 4.5625rem
    }

    .page-webs-7 {
        padding-top: 3.125rem;
        padding-bottom: 0
    }

    .page-webs-7 .title-color h2 {
        margin-bottom: 1.875rem
    }

    .page-webs-7 .accordion-item {
        padding: 1.25rem 2.8125rem 1.25rem 1.25rem
    }

    .page-webs-7 .accordion-title {
        line-height: 1.2;
        font-size: 1.125rem
    }

    .page-webs-7 .accordion-title .toggle-accordion {
        right: -2.1875rem
    }

    .page-webs-6 .title-color h2 {
        margin-bottom: 1.875rem;
        font-size: var(--27)
    }

    .page-webs-6 .news-wrapper .col.post-item {
        padding: 0 .9375rem 1.875rem
    }

    .page-webs-6 .news-wrapper .box-text {
        padding-top: 1.125rem;
        padding-bottom: 1.25rem
    }

    .page-webs-procedure .title-color h2 {
        margin-bottom: 1.5625rem
    }

    .page-webs-procedure .col-right {
        padding-left: .9375rem
    }

    .page-webs-procedure .accordion-title {
        font-size: 1.25rem
    }

    .page-webs-procedure .accordion-title {
        padding-left: 4.0625rem;
        padding-right: 2.1875rem
    }

    .page-webs-procedure .accordion-title .number {
        width: 2.875rem;
        height: 2.875rem;
        font-size: 1.25rem
    }

    .page-webs-procedure .accordion-item .progress-line {
        left: 1.4375rem;
        top: 2.375rem
    }

    .page-webs-procedure .accordion-item .progress-line2 {
        left: 1.4375rem;
        top: 2.375rem
    }

    .page-webs-procedure .accordion-item {
        margin-bottom: 1.375rem;
        padding-bottom: 1.375rem
    }

    .page-webs-procedure .accordion-inner {
        padding-left: 4.0625rem
    }

    .page-webs-procedure .accordion-item:before {
        width: calc(100% - 4.0625rem)
    }

    .page-webs-9.no-table .list-combo {
        grid-template-columns: repeat(3,80%)
    }

    .page-webs-cate .cate-wrapper {
        grid-gap: 0;
        flex-direction: column
    }

    .page-webs-cate .cate-item:before {
        left: -.9375rem;
        right: unset;
        width: 100%;
        height: .0625rem;
        background: linear-gradient(270deg,rgba(231,255,223,0) 0%,#FFE9EA 100%);
        bottom: 0
    }

    .page-webs-logo .item-logo {
        flex-direction: column
    }

    .page-webs-logo .title-color h2 {
        margin-bottom: 2rem
    }
}

@keyframes moveUpDown {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-.3125rem)
    }
}

@keyframes moveUpDown2 {
    0%,100% {
        transform: translateY(0) rotate(180deg)
    }

    50% {
        transform: translateY(-.3125rem) rotate(180deg)
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   PHẢN HỒI KHÁCH — ba lỗi ở cuối trang dịch vụ.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. NỀN KHỐI "GIẢI PHÁP" ──────────────────────────────────────────────────────
   Ảnh nền bg-cachangmuc.webp còn sót từ theme gốc là ảnh thành phố XANH LÁ, chọi hẳn
   với màu đỏ thương hiệu. Lớp phủ (.section-bg-overlay) đã có sẵn trong HTML nhưng
   chưa được tô gì. Nay: rút màu ảnh về xám rồi phủ gradient đỏ — khối thành màu
   thương hiệu mà vẫn giữ vân kiến trúc của ảnh. Đổi sang ảnh khác vẫn ra đỏ, nên
   khách cứ thay ảnh thoải mái ở Admin → Trang dịch vụ → "Ảnh nền khối giải pháp". */
/* Nhuộm đỏ bằng background-blend-mode chứ KHÔNG dùng filter: lớp phủ đỏ nằm BÊN TRONG
   .section-bg, mà filter của cha thì ăn xuống cả con — grayscale sẽ nuốt luôn màu đỏ,
   cả khối thành một mảng đen. blend-mode chỉ trộn ảnh với màu nền của chính nó. */
.page-webs-cate .section-bg {
    background-color: var(--brand-dark);
    background-blend-mode: luminosity;
}

/* Đỏ ĐỀU cả khối, chỉ đậm hơn ở hai góc cho có chiều sâu. (Đừng dùng góc 251deg như
   khối hero trang chủ: khối này thấp và rộng nên phần đỏ bị đẩy hẳn ra ngoài khung,
   nhìn vào chỉ thấy một mảng gần đen.) */
.page-webs-cate .section-bg-overlay {
    background: linear-gradient(135deg, rgba(var(--brand-dark-rgb), .95) 0%, rgba(var(--brand-rgb), .9) 45%, rgba(var(--brand-dark-rgb), .96) 100%);
}

/* ── 2. KHỐI "DOANH NGHIỆP SẼ NHẬN ĐƯỢC GÌ" ───────────────────────────────────────
   Trước đây khối này mượn class .page-webs-cate — vốn thiết kế cho NỀN TỐI nên ép
   h2/h3 màu trắng. Đặt trên nền trắng thành chữ trắng trên nền trắng: khách nhìn vào
   chỉ thấy mấy cột chữ trôi nổi và tưởng "thiếu tiêu đề". Nay khối có kiểu riêng. */
.service-deliverables {
    padding: var(--80) 0 var(--60);
    background: linear-gradient(180deg, #fff 0%, #fdf6f6 100%);
}

.service-deliverables .title-color {
    margin-bottom: 3rem;
}

.service-deliverables .title-color h2 {
    color: #2b2b2b;
    margin-bottom: 1rem;
}

.service-deliverables .title-color .desc {
    color: #5b5b5b;
    max-width: 49.8125rem;
    margin: 0 auto;
}

.service-deliverables .deliverable-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--30);
}

.service-deliverables .deliverable-item {
    background: #fff;
    border: .0625rem solid #f2dede;
    border-radius: .75rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 .25rem 1.25rem rgba(var(--brand-rgb), .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.service-deliverables .deliverable-item:hover {
    transform: translateY(-.25rem);
    border-color: rgba(var(--brand-rgb), .35);
    box-shadow: 0 .75rem 1.75rem rgba(var(--brand-rgb), .14);
}

/* Vạch đỏ ngắn trên mỗi thẻ — dấu hiệu thương hiệu, thay cho gạch dọc mờ của khối cũ. */
.service-deliverables .deliverable-item h3 {
    color: #2b2b2b;
    font-size: 1.25rem;
    font-family: var(--semi);
    line-height: 1.35;
    margin: 0 0 .875rem;
    padding-top: .875rem;
    position: relative;
}

.service-deliverables .deliverable-item h3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: .1875rem;
    border-radius: .1875rem;
    background: var(--brand);
}

.service-deliverables .deliverable-item .text,
.service-deliverables .deliverable-item .text p {
    color: #5b5b5b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ── 3. KHỐI "DỊCH VỤ PHÙ HỢP VỚI" ─────────────────────────────────────────────── */
.service-audience {
    padding: var(--60) 0 var(--80);
}

.service-audience .title-color {
    margin-bottom: 2.5rem;
}

.service-audience .title-color h2 {
    color: #2b2b2b;
}

.service-audience .list-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
}

/* Phải là "> li": nếu viết ".list-audience li" thì luật này ăn xuống cả gạch đầu dòng nằm
   trong ô, biến từng gạch đầu dòng thành một ô hồng có viền — vỡ hẳn bố cục. */
.service-audience .list-audience > li {
    margin: 0;
    padding: 1.125rem 1.25rem 1.125rem 1.5rem;
    background: var(--brand-light);
    border-left: .1875rem solid var(--brand);
    border-radius: .5rem;
    color: #2b2b2b;
    font-size: 1rem;
    line-height: 1.5;
    list-style: none;
}

/* Lưới cứng 3 cột khiến 4 ô thành hàng "3 + 1 lẻ loi". Khi các ô là dạng thẻ (có ý chi tiết)
   thì để lưới tự chia cho vừa số ô. Lưới 3 cột của kiểu ô một dòng vẫn giữ nguyên. */
.service-audience .list-audience:has(> li.co-y-chi-tiet) {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* Ô chỉ có một dòng chữ: giữ nguyên như cũ, không đổi gì. */
.service-audience .list-audience .audience-title {
    display: block;
}

/* Ô có "ý chi tiết": dòng chữ trở thành tiêu đề của ô. */
.service-audience .list-audience > li.co-y-chi-tiet .audience-title {
    font-family: var(--semi);
    font-size: 1.125rem;
    line-height: 1.35;
    color: #2b2b2b;
    margin-bottom: .625rem;
}

.service-audience .audience-bullets {
    list-style: none;
    margin: 0;
}

.service-audience .audience-bullets li {
    position: relative;
    margin: 0 0 .375rem;
    padding-left: 1.125rem;
    font-size: .9375rem;
    line-height: 1.45;
    color: #5c5c5c;
    list-style: none;
}

.service-audience .audience-bullets li:last-child {
    margin-bottom: 0;
}

.service-audience .audience-bullets li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--brand);
}

/* ── 4. KHỐI TIN TỨC CUỐI TRANG ────────────────────────────────────────────────────
   Khối này dùng lại class .sec-home-7/.home-news/.box-blog, nhưng CSS của chúng nằm
   trong page-home/style.css — mà trang dịch vụ KHÔNG nạp file đó. Hệ quả đo được:
   ô ảnh 340×340 (vuông chằn chặn nên cắt cụt ảnh), bo góc 0, ngày tháng và tiêu đề
   rơi tách rời nhau. Nay khối có CSS riêng, bám đúng mẫu. */
.service-related-posts {
    padding: var(--60) 0 var(--85);
}

.service-related-posts .col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 2.125rem;
}

.service-related-posts .col-title .title-home h2 {
    margin: 0;
}

/* Viết là .row.blog-grid chứ không phải .blog-grid: theme có luật
   ".row .row:not(.row-collapse) { margin-left: -15px }" mạnh hơn (3 lớp so với 2), nên
   .blog-grid trơn thua và cả khối bị lệch trái 15px, tràn mép phải trên điện thoại.
   Lề âm đó vốn để bù padding của cột con — mà padding đó đã bỏ ở .post-item. */
.service-related-posts .row.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--30);
    margin-left: 0;
    margin-right: 0;
    /* .row của theme còn bị max-width chặn (vốn để canh giữa) — bỏ nốt, không thì lưới
       hụt hẳn một khoảng trống bên phải. */
    max-width: none;
    width: 100%;
}

.service-related-posts .post-item {
    padding: 0;
    max-width: none;
    flex: none;
}

/* Ảnh NGANG tỉ lệ 63% như mẫu — không để thành hình vuông. */
.service-related-posts .box-image .image-cover {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 63%;
    overflow: hidden;
    border-radius: .5rem;
}

.service-related-posts .box-image .image-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s;
}

.service-related-posts .box-image:hover img {
    transform: scale(1.1);
}

.service-related-posts .box-text {
    padding: 1.1875rem 0 0;
}

.service-related-posts .category-author {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.service-related-posts .category-author li {
    margin: 0;
    list-style: none;
    font-size: .9375rem;
}

.service-related-posts .category-author li:first-child {
    color: var(--brand);
}

.service-related-posts .category-author li:nth-child(2) {
    color: #5b5b5b;
}

/* Ngày tháng nằm CẠNH tiêu đề, có vạch ngăn — đúng như mẫu. */
.service-related-posts .box-group {
    display: flex;
    align-items: center;
    column-gap: 2.19rem;
}

.service-related-posts .box-group .post-date {
    position: relative;
    display: block;
    flex: 0 0 auto;
}

.service-related-posts .box-group .post-date:before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(0% - 1.1rem);
    height: 3.1875rem;
    width: .0625rem;
    background: #dadada;
    transform: translateY(-50%);
}

.service-related-posts .badge .badge-inner {
    background: transparent;
    border: 0;
    border-radius: .3125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #2b2b2b;
    padding: 0;
    min-height: 0;
}

.service-related-posts .badge .post-date-day {
    display: block;
    color: #2b2b2b;
    text-align: center;
    font-size: 2.8125rem;
    line-height: 1;
    margin: 0;
    font-family: var(--semi);
}

.service-related-posts .badge .post-date-month {
    color: #2b2b2b;
    font-size: .875rem;
    line-height: normal;
}

.service-related-posts .post-title {
    margin: 0;
}

.service-related-posts .post-title a {
    color: #2b2b2b;
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-family: var(--semi);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-related-posts .post-title a:hover {
    color: var(--brand);
}

/* ── Máy tính bảng ── */
@media screen and (max-width: 1024px) {

    .service-deliverables .deliverable-wrapper,
    .service-audience .list-audience,
    .service-related-posts .row.blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Điện thoại ── */
@media screen and (max-width: 767.98px) {

    .service-deliverables .deliverable-wrapper,
    .service-audience .list-audience,
    .service-related-posts .row.blog-grid {
        grid-template-columns: 1fr;
    }

    .service-deliverables {
        padding: var(--50) 0 var(--40);
    }

    .service-audience {
        padding: var(--40) 0 var(--50);
    }

    .service-related-posts .box-group {
        column-gap: 1.75rem;
    }

    .service-related-posts .badge .post-date-day {
        font-size: 2.25rem;
    }
}

/* ── GÓI DỊCH VỤ (page-webs-9) — phần bổ sung của bản DH ─────────────────────
   Khối này mượn CSS sẵn có ở dòng ~822–1130. Nhưng CSS đó viết cho markup của
   WordPress: mỗi ô nhập được bọc trong <span class="wpcf7-form-control-wrap">,
   còn form của mình đặt <input> trực tiếp. Vì vậy phải nhắm thẳng vào input.
   Nhãn gói (.sticky-combo) ở mẫu tô màu bằng style nội tuyến từng thẻ — mình
   không cho admin gõ mã màu, nên tô sẵn bằng CSS: gói thường đỏ nhạt,
   gói được đánh dấu "Nổi bật" đỏ đậm. */
.page-webs-9 .list-combo .sticky-combo {
    background-color: #E23A41;
}

.page-webs-9 .list-combo .item-combo.is-highlight .sticky-combo {
    background-color: #A5121A;
}

/* Ô "Tên khách hàng" chiếm trọn hàng, giống mẫu (mẫu làm bằng :first-child của
   lớp bọc wpcf7 — mình không có lớp bọc đó). */
.page-webs-9 .form_baogia .box-thongtin input:first-child {
    grid-column: span 2;
}

/* Mẫu chỉ tạo kiểu cho textarea nằm trong .form-item.bottom, mà .form-item.bottom
   lại là lưới 2 cột — dùng nguyên sẽ đẩy nhãn và ô nhập nằm cạnh nhau. Nên tạo
   kiểu thẳng cho textarea của mình. */
.page-webs-9 .form_baogia textarea {
    width: 100%;
    min-height: 6.75rem;
    padding: .625rem 1.0625rem;
    border: .0625rem solid #E23A41;
    border-radius: .5rem;
    background-color: transparent;
    color: #fff;
    font-size: .875rem;
    font-weight: normal;
}

.page-webs-9 .form_baogia textarea::placeholder {
    color: #fff;
    opacity: .85;
}

.page-webs-9 .form_baogia .form-item + .form-item {
    margin-bottom: 1.5rem;
}

/* Mẫu để padding dưới = 0 vì dưới form còn một tấm ảnh trang trí; form của mình
   kết thúc bằng nút bấm nên cần khoảng thở, không thì nút dính sát mép đỏ. */
.page-webs-9 .form-quote {
    padding-bottom: 2.5rem;
}

/* Admin nhập đúng 1 gói thì lưới 2 cột sẽ để trống một nửa — cho gói đó rộng hết. */
.page-webs-9 .list-combo:has(> .item-combo:only-child) {
    grid-template-columns: 1fr;
}