.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,var(--brand));
    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 var(--brand-hover);
    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 var(--brand-hover);
    /* 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%,var(--brand-light) 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(--brand-text);
    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 var(--brand-hover);
    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: var(--brand-hover);
    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 var(--brand-hover);
    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: var(--brand-hover)
}

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

.criteria-wrapper .nav .tab.active a,.criteria-wrapper .nav .tab:hover a {
    color: var(--brand-hover)
}

.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(--brand-text)
}

.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 var(--brand);
    right: 0;
    color:var(--brand-text);
    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: var(--brand);
    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(--brand-text)
}

.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(--brand-text);
    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:var(--brand-text)
}

.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 var(--brand);
    right: -1.875rem;
    color:var(--brand-text);
    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: var(--brand);
    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,var(--brand) .38%,var(--brand-dark) 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: var(--brand-light);
    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 var(--brand-light);
    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: var(--brand-hover);
    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:var(--brand-text);
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

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

#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:var(--brand-text);
    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(--brand-text)
}

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

.page-webs-9 .form-quote {
    position: relative;
    border-radius: .625rem;
    background: var(--brand);
    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 var(--brand-hover);
    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 var(--brand-hover);
    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 var(--brand-hover);
    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:var(--brand-text)
}

.page-webs-10 .item-step .number {
    color:var(--brand-text);
    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: var(--brand-hover);
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    bottom: -.875rem;
    border: .4375rem solid var(--brand-light)
}

.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 var(--brand);
    border-radius: 50%;
    background: linear-gradient(180deg,#fffce9 0%,#FFE9EA 75.5%);
    font-size: 1.5rem;
    font-weight: normal;
    font-family: var(--bold);
    color:var(--brand-text)
}

.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 var(--brand);
    right: 0;
    color:var(--brand-text);
    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: var(--brand);
    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 var(--brand)
}

.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%,var(--brand-light) 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: var(--brand-hover)
    }

    .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 var(--brand-hover);
        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(--brand-text);
        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;
        /* Banner có hai nút (trang Hội thảo – hội nghị) thì trên điện thoại hai nút nằm
           cạnh nhau không đủ chỗ, nút thứ hai bị cắt mất chữ. Cho phép xuống dòng. */
        flex-wrap: wrap
    }

    .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 var(--brand-light)
    }

    .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;
}

/* Nền khối: XANH NAVY đều cả dải, khúc giữa nhạt hơn một chút cho có chiều sâu.
   Bản trước lấy màu thương hiệu (--brand #CDC204, vàng ô-liu) làm chặng giữa. Kiểu
   gradient đó vốn viết cho một bộ nhận diện ĐỎ, chữ trắng trên đỏ vẫn đọc được; nhưng
   thương hiệu nay là vàng — chữ trắng trên #CDC204 chỉ đạt tỉ lệ tương phản ~1,8:1
   (chuẩn WCAG đòi 4,5:1), nên cả tiêu đề lẫn các gạch đầu dòng ở giữa khối đều chìm.
   Trên #142A60 con số đó là ~13:1, trên #2E4E9E là ~6,5:1 — đọc thoải mái.
   Màu vàng không mất đi mà chuyển xuống các số 01–04 ngay bên dưới, nơi nó chỉ làm
   nhiệm vụ trang trí chứ không phải chở chữ. */
.page-webs-cate .section-bg-overlay {
    background: linear-gradient(135deg,
        rgba(var(--brand-dark-rgb), .97) 0%,
        rgba(46, 78, 158, .93) 45%,
        rgba(var(--brand-dark-rgb), .97) 100%);
}

/* Số thứ tự to đùng — chỗ hợp lý để giữ màu vàng thương hiệu. */
.page-webs-cate .cate-wrapper .number {
    color: var(--brand);
}

/* ── 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);
}

/* Lưới cứng 3 cột biến đúng 4 thẻ thành hàng "3 + 1 lẻ loi" (trang Viết sách có 4 lợi ích).
   Đúng 4 thẻ thì chia 2×2 cho cân; 3 hay 6 thẻ vẫn y như cũ.

   Phải bọc trong media query min-width: bộ chọn :has(...) có độ ưu tiên CAO HƠN hai khối
   responsive ở cuối file, để trần thì máy tính bảng và điện thoại không hạ cột được nữa. */
@media screen and (min-width: 1024.02px) {
    .service-deliverables .deliverable-wrapper:has(> :last-child:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.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;
}

/* Biến thể "đánh số": vạch đỏ đổi thành số thứ tự trong ô tròn, để khối kể được một trình
   tự các bước (trang Xây nhãn hiệu mượn khối này cho "Quá trình thực hiện dịch vụ").
   Chỉ ăn khi có class is-numbered, nên các trang đang dùng khối này không đổi gì. */
.service-deliverables.is-numbered .deliverable-wrapper {
    counter-reset: so-thu-tu;
}

.service-deliverables.is-numbered .deliverable-item {
    counter-increment: so-thu-tu;
}

.service-deliverables.is-numbered .deliverable-item h3 {
    padding-top: 0;
    padding-left: 3.5rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.service-deliverables.is-numbered .deliverable-item h3:before {
    content: counter(so-thu-tu);
    top: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: #fff;
    font-family: var(--semi);
    font-size: 1.25rem;
    line-height: 2.75rem;
    text-align: center;
}

/* ── 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-text);
}

.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-text);
}

/* ── 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: var(--brand-hover);
}

.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 var(--brand-hover);
    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 đỏ.

   Cũng vì tấm ảnh đó mà mẫu đặt height:100% — ô màu kéo dài bằng cột gói dịch vụ
   bên trái cho ảnh có chỗ đứng. Template của mình KHÔNG dựng tấm ảnh ấy, nên cái
   còn lại chỉ là một mảng màu trống hơn 200px dưới nút "Gửi yêu cầu". Cho ô cao
   đúng bằng nội dung của nó. */
.page-webs-9 .form-quote {
    height: auto;
    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;
}

/* ══ KHỐI DỰNG LẠI THEO TRANG BOOKING BÁO CHÍ CỦA MẪU ═══════════════════════════
   Năm khối dưới đây chỉ hiện khi được BẬT trong Admin → Trang dịch vụ, nên sáu
   trang dịch vụ còn lại không bị ảnh hưởng. */

/* ── Hero dạng banner ngang: chữ căn giữa, không có cột ảnh ───────────────────── */
/* Banner này đặt chữ MÀU ĐẬM lên ảnh nền. Với ảnh gần trắng thì đọc tốt, nhưng hai
   trang dùng ảnh chụp thật (booking: độ sáng trung bình 102/255, xử lý khủng hoảng:
   96/255) thì chữ chìm hẳn vào nền — nhìn vào chỉ thấy một mảng ảnh rối.

   Phủ một lớp trắng mờ lên ảnh: đậm ở dải giữa nơi có chữ, nhạt dần ra mép trên và
   mép dưới để ảnh vẫn còn thấy được. Ba trang có ảnh nền sẵn gần trắng (246/255) thì
   lớp phủ này gần như không đổi gì, nên một luật dùng chung cho cả bảy trang. */
.page-webs-1.hero-banner .section-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .35) 0%,
        rgba(255, 255, 255, .90) 26%,
        rgba(255, 255, 255, .90) 80%,
        rgba(255, 255, 255, .40) 100%);
}

.page-webs-1.hero-banner .section-content {
    padding: var(--80) 0;
    /* Lớp phủ trên là phần tử được định vị nên sẽ đè lên chữ nếu khối chữ không
       được định vị theo. */
    position: relative;
    z-index: 2;
}

/* Quầng trắng rất nhẹ sau chữ — lưới an toàn cho trường hợp chủ website thay ảnh nền
   tối hơn nữa; trên nền sáng thì không nhìn ra.

   KHÔNG áp cho h1: tiêu đề đó tô bằng gradient qua background-clip:text, chữ thật sự
   trong suốt (-webkit-text-fill-color:transparent). Đổ bóng vào đó thì bóng trắng hiện
   xuyên qua ruột chữ, tiêu đề bạc hẳn đi. Muốn viền cho h1 thì phải dùng drop-shadow. */
.page-webs-1.hero-banner .desc,
.page-webs-1.hero-banner .list-advantages li {
    text-shadow: 0 .0625rem .25rem rgba(255, 255, 255, .85);
}

.page-webs-1.hero-banner .col-title {
    text-align: center;
}

.page-webs-1.hero-banner .title-home h1 {
    margin-left: auto;
    margin-right: auto;
}

.page-webs-1.hero-banner .desc {
    max-width: 56.25rem;
    margin-left: auto;
    margin-right: auto;
}

.page-webs-1.hero-banner .btn-action {
    justify-content: center;
}

.page-webs-1.hero-banner .list-advantages {
    display: inline-block;
    text-align: left;
}

/* ── Khối giới thiệu: ảnh trái – chữ phải ─────────────────────────────────────── */
.service-intro {
    padding: var(--80) 0 var(--60);
}

.service-intro .img .image-cover {
    border-radius: .75rem;
    overflow: hidden;
}

.service-intro .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-intro .intro-title {
    color: #2b2b2b;
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.service-intro .is-divider {
    width: 2.25rem;
    height: .1875rem;
    border-radius: .1875rem;
    background: var(--brand);
    margin: 0 0 1.25rem;
}

.service-intro .intro-desc,
.service-intro .intro-desc p {
    color: #5b5b5b;
    font-size: 1rem;
    line-height: 1.7;
}

/* Vài trang (Xử lý khủng hoảng) giữ nguyên danh sách gạch đầu dòng trong phần mô tả
   như mẫu, thay vì tách sang lưới ô "ý ngắn" bên dưới. */
.service-intro .intro-desc ul {
    margin: 1rem 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.service-intro .intro-desc li {
    color: #5b5b5b;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: .5rem;
}

.service-intro .intro-desc li::marker {
    color: var(--brand);
}

.service-intro .intro-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem var(--30);
    margin: 1.75rem 0 2rem;
}

.service-intro .intro-point h3 {
    color: #2b2b2b;
    font-size: 1.125rem;
    font-family: var(--semi);
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.service-intro .intro-point .text,
.service-intro .intro-point .text p {
    color: #5b5b5b;
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ── Khối "Thành tựu": nền ảnh tối, các con số chạy ───────────────────────────── */
.service-achievements {
    padding: var(--80) 0;
    position: relative;
}

.service-achievements .section-bg-overlay {
    background: rgba(0, 0, 0, .7);
}

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

.service-achievements .title-color h2,
.service-achievements .title-color .desc,
.service-achievements .title-color .desc p {
    color: #fff;
}

.service-achievements .title-color .desc {
    max-width: 56.25rem;
    margin: 1rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.service-achievements .achievement-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--30);
}

.service-achievements .achievement-item {
    text-align: center;
    color: #fff;
}

.service-achievements .achievement-item .number-run {
    color: var(--brand);
    font-size: 3rem;
    font-family: var(--semi);
    line-height: 1.1;
    margin: .5rem 0;
}

.service-achievements .achievement-above,
.service-achievements .achievement-below {
    color: #fff;
    font-size: .9375rem;
    line-height: 1.5;
    margin-bottom: 0;
    opacity: .9;
}

/* ── Khối kêu gọi cuối trang khi có ảnh nền ───────────────────────────────────── */
.service-cta.has-bg {
    background: none;
    position: relative;
}

.service-cta.has-bg .section-bg-overlay {
    background: rgba(0, 0, 0, .55);
}

.service-cta.has-bg h2,
.service-cta.has-bg .cta-body,
.service-cta.has-bg .cta-body p {
    color: #fff;
}

.service-cta.has-bg .btn-outline-cta {
    border-color: #fff;
    color: #fff;
}

/* ── Dải logo "Đối tác – Khách hàng" ──────────────────────────────────────────── */
.service-partners {
    padding: var(--60) 0;
    background: #f3f3f3;
}

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

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

.service-partners .partner-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--30);
    align-items: center;
}

/* Logo khách hàng có nền và tỉ lệ khác nhau — đặt trên ô trắng đồng đều và
   dùng object-fit: contain để không cắt mất chữ trong logo. */
.service-partners .partner-item {
    background: #fff;
    border-radius: .5rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7.5rem;
}

.service-partners .partner-item img {
    max-width: 100%;
    max-height: 5rem;
    width: auto;
    object-fit: contain;
}

/* ── Form tư vấn đặt thẳng trong trang ────────────────────────────────────────── */
.service-inline-form {
    padding: var(--60) 0 var(--80);
}

.service-inline-form .inline-form-box {
    max-width: 34.375rem;
    margin: 0 auto;
}

.service-inline-form .inline-form-head h3 {
    color: #2b2b2b;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.service-inline-form .inline-form-desc,
.service-inline-form .inline-form-desc p {
    color: #5b5b5b;
    margin-bottom: 1.75rem;
}

.service-inline-form .form-content span {
    display: block;
    margin-bottom: .75rem;
}

.service-inline-form .form-content input,
.service-inline-form .form-content textarea {
    width: 100%;
    padding: .625rem .9375rem;
    border: .0625rem solid #ddd;
    border-radius: .25rem;
    font-size: .9375rem;
    outline: none;
    background: #fff;
}

.service-inline-form .form-content input:focus,
.service-inline-form .form-content textarea:focus {
    border-color: var(--brand);
}

@media screen and (max-width: 1024px) {
    .service-achievements .achievement-wrapper,
    .service-partners .partner-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767.98px) {
    .service-intro .intro-points {
        grid-template-columns: 1fr;
    }

    .service-intro .intro-title {
        font-size: 1.5rem;
    }

    .service-achievements .achievement-item .number-run {
        font-size: 2.25rem;
    }
}