/*
Template Css: VPS NVMe
 */

/*css footer*/


@font-face {
    src: url("../fonts/Pattaya-Regular.ttf");
    font-family: "Pattaya";
}

@font-face {
    src: url("../fonts/Inter/Inter-Bold.ttf");
    font-family: "Inter";
    font-weight: 700;
}

@font-face {
    src: url("../fonts/Inter/Inter-Regular.ttf");
    font-family: "Inter";
    font-weight: 300;
}
.price-item-bodys p strong {
    font-weight: 900 !important;
}
body {
    font-family: "Inter" !important;
    font-weight: 300;
}

#footer .footer-top p, #footer .footer-top a {
    color: #ffffff !important;
}
#footer .footer-top .footer-address p img {
    filter: brightness(100%) grayscale(100%) !important;
}
#footer .footer-top .footer-title h3 {
    color: #ffffff !important;
}
#footer .footerBorder:not(:last-child) {
    border-bottom: 0;
    margin: 0px !important;
    padding: 0px !important;
}
#footer .footer-top p.company-name {

    border-bottom: 0px solid rgba(255, 255, 255, 0.05) !important;

}
.home-title h3 {
    text-transform: uppercase;
    color: #F44336 !important;
}

.home-title h2 {
    text-transform: uppercase;
    color: #F44336 !important;
}
.home-title > .description {
    font-weight: 500;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 22px;
    color: #000000;
}
footer#footer {
    background: -webkit-linear-gradient(90deg, #012e95, #0153bfeb 32%);
}


.accordion_son_ten_min a button.toggle {
    position: absolute;
    right: 0px;
    left: unset;
    margin: 0px !important;
    top: 20%;

}
.accordion_son_ten_mins a button.toggle {
    position: absolute;
    right: 0px;
    left: unset;
    margin: 0px !important;
    top: 15%;

}
article.bk-table-price.hosting_g .price-item .price-item-footer a {

    background: #2450e0 !important;

}
.bk-tab ul li.active a, .bk-tab ul li a:hover {
    background: #2450e0 !important;
    color: #fff;
    border: 0px !important;
}
.accordion_son_ten_min .accordion-title {
    border-top: 0px solid #ddd !important;
}
.accordion_son_ten_min .accordion .accordion-item:nth-child(2n + 1) {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%)
}
.accordion_son_ten_min .accordion .accordion-item:nth-child(2n + 1) a span {
    color: #ffffff !important;
}
.accordion_son_ten_min .accordion .accordion-item:nth-child(2n + 1) i.icon-angle-down {
    color: white;
}
.accordion_son_ten_min .accordion .accordion-item:nth-child(2n) {
    border: 1px solid #2cb4ff;
}
.accordion_son_ten_min .accordion .accordion-item {
    border-radius: 10px;
    margin: 15px 0px 15px 0px;
}

.accordion_son_ten_min .accordion .accordion-item .accordion-inner {
    background: white;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
    border-radius: 4px;
    width: 100%;
    margin-bottom: 25px !important;
    border: 0px !important;
    position: relative;
    background: #F8F8F8;
}

.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n + 1) {
    background: white;
    border: 1px solid #2cb4ff;
}
.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n + 1) a span {
    color: #000000 !important;
}
.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n) i.icon-angle-down {
    color: white;
}
.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n) {

    border: 0px solid #2cb4ff;
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%)
}
.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n) a span {
    color: #ffffff !important;
}
.accordion_son_ten_min.s .accordion .accordion-item:nth-child(2n + 1) i.icon-angle-down  {
    color: #000000 !important;
}


.accordion_son_ten_min .accordion .accordion-item:hover {
    transition: .3s ease-in-out;
    transform: translateY(-5px);

}


div#bk-form-register h3 {
    display: none;
}
div#bk-form-register .form-group label {
    display: none;
}
form#bk-register-form .medium-6 {
    max-width: 100% !important;
    flex-basis: 100% !important;
}

div#bk-form-register .input-register {
    border: 1px solid #3daaff !important;
}

.section-content div#bk-form-register .register-select {
    border: 1px solid #3daaff !important;
}

.section-content div#bk-form-register button.btnRegister {
    background: #2450e0;
}
.dich_vu_lien_q .box-text-inner p {
    font-weight: 600;
    font-size: 20px;
}
/*.dat_may_chu_vn .home-title > .description {*/
/*    font-weight: 600;*/
/*    width: 100%;*/
/*    text-align: center;*/

/*    font-size: 19px;*/
/*    color: #000000;*/
/*}*/
.title_tai_sao_bkns_home img {
    padding-top: 20px;

}


.title_tai_sao_bkns_home .col-inner:hover {
    transition: .3s ease-in-out;
    transform: translateY(-10px);
}
.title_tai_sao_bkns_home .col-inner {
    border-radius: 20px;
    margin-top: 20px;
    padding: 10px 30px 10px 30px;
    background: white;
}


.taiso_con_ct .home-title h3 {
    text-transform: uppercase;
    color: #ffffff !important;
}
.taiso_con_ct .home-title h2 {
    text-transform: uppercase;
    color: #ffffff !important;
}
.taiso_con_ct .home-title .description {

    color: #ffffff !important;
}
.bang_gia_my_chu_ss .bk-tab ul li.active a {
    background: #2450e0 !important;
    color: #fff;
    border: 0px !important;
}
.bang_gia_my_chu_ss .bk-tab ul li  a, .bk-tab ul li a {
    padding: 15px 60px 15px 60px;
}

.bang_gia_my_chu_ss li.tab.has-icon.active a:after {
    position: absolute;
    right: 0px;
    top: 15px;
    /* left: 0; */
    width: 41px;
    content: url(http://www.bkns.vn/wp-content/uploads/2024/08/Group.png);
}


.dich_vu_bs_row {

}
.dich_vu_bs_row .col-inner {
    text-align: center;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #CA57FE;
}

.dich_vu_bs_row .dich_vu_bs:nth-child(1) .col-inner {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%);
}
.dich_vu_bs_row .dich_vu_bs:nth-child(3) .col-inner {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%);
}
.dich_vu_bs_row .dich_vu_bs:nth-child(6) .col-inner {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%);
}
.dich_vu_bs_row .dich_vu_bs:nth-child(8) .col-inner {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%);
}


.dich_vu_bs_row .dich_vu_bs:nth-child(1) .col-inner  p strong {
    color: #FFE659 !important;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(1) .col-inner   p {
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(1) .col-inner h4 {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
}

.dich_vu_bs_row .dich_vu_bs:nth-child(3) .col-inner  p strong {
    color: #FFE659 !important;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(3) .col-inner   p {
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(3) .col-inner h4 {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(6) .col-inner  p strong {
    color: #FFE659 !important;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(6) .col-inner   p {
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(6) .col-inner h4 {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(8) .col-inner  p strong {
    color: #FFE659 !important;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(8) .col-inner   p {
    color: #ffffff;
}
.dich_vu_bs_row .dich_vu_bs:nth-child(8) .col-inner h4 {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
}
.dich_vu_bs p strong {
    font-size: 20px;
    color: red;
    font-weight: 600;
}
.dich_vu_bs p , h4 {

    color: #000000;

}
.dich_vu_bs_row .col-inner:hover {
    transition: .3s ease-in-out;
    transform: translateY(-10px);
}

.dich_vu_secion .bk-tab ul li.active a {
    background: #2450e0 !important;
    color: #fff;
    border: 0px !important;
}







.buton_thue_may_chu .col, .gallery-item, .columns {
    padding: 0px;

}
.buton_thue_may_chu {
    padding: 0px !important;

}
.gioi_thieu_dịch_vu a.button.secondary.is-shade.box-shadow-3.box-shadow-5-hover.expand {
    padding: 2px;
    background-color: #2450e0;
    border-radius: 30px !important;
}
.gioi_thieu_dịch_vu_tex {
    font-weight: 400;
    width: 100%;
    margin: 0;
    font-size: 17px;
    color: #000000;
}
.page-template table tr:nth-child(even), .content-entry table tr:nth-child(even) {
    background: #f2f2f2;
}
.table-mmo tr:nth-child(1) td {
    background: #fff;
    color: #000;
}
.price-item-footer-title h4 {
    color: rgba(27, 127, 204, .8);
}
.price-item-footer-hosting {
    text-align: center;
    width: 70%;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid rgba(27, 127, 204, .8);
    margin: auto;
}
.price-item-footer-title b {
    color: #f49e4f;
}
.tab-panels-noidung-img {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    display: grid;
    gap: 20px;
    margin-top: 0px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 0px;
}
.img_dich_vu_s {
    position: relative;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}
.tieu_de_dicf_vu_s h3 {
    text-align: center;
    font-size: 18px;
    color: white;
}
.tieu_de_dicf_vu_s {
    top: 22%;
    width: 74%;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    margin: 10% 0;
}
.tieu_de_dicf_vu_s p {
    font-size: 16px;
    color: white;
}
.tab-panels-noidun-nc {
    position: relative;
}
.tab-panels-noidung-img  .tab-panels-noidun-nc:nth-child(2n) {
    margin-top: -40px;

}

.dat_may_chu_vn .home-title h3 {
    padding-bottom: 20px;
    padding-top: 20px;
}


.title_tai_sao_bkns_home .col-inner {
    width: 100%;
    display: inline-block;
    padding: 30px !important;
    height: 100% !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .1) !important;
    cursor: pointer;
    transition: .3s ease-in-out;
}


article.bk-table-price.hosting_g .price-item .price-item-bodys {
    padding: 0px 15px;
    max-height: 350px !important;
}

article.bk-table-price.hosting_g .price-item .price-item-bodys:after {
    content: "";
    background-image: url(/wp-content/themes/bkns/assets/images/arrow-overlay.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
article.bk-table-price.hosting_g .price-item .price-item-bodys.tp-open {
    max-height: 100% !important;
}
.price-item .price-item-body.tp-close {
    margin-bottom: 20px;
}

.buton_thue_may_chu p {
    background-color: rgb(36, 80, 224);
    margin: auto;
    width: 36%;
    display: block;
    padding: 8px;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    height: unset !important;
    line-height: unset !important;
}

.buton_thue_may_chus p {
    background-color: rgb(36, 80, 224);
    margin: auto;
    width: 60%;
    display: block;
    padding: 8px;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    height: unset !important;
    line-height: unset !important;
}

article.bk-table-price.hosting_g .price-item .price-item-bodys.tp-open:after {
    display: none;
}
.title_tai_sao_bkns h3 {
    font-size: 25px;
}
.title_tai_sao_bkns li {
    font-size: 18px;
    color: black;
}

.dich_vu_lien_q .col-inner:hover {
    transition: .3s ease-in-out;
    transform: translateY(-10px);
}

.dich_vu_lien_q .col-inner:hover p {
    color: #2450e0;;
}
/* mobile style*/
@media only screen and (max-width: 767px) {


    .phu_hop_bkns_hosting .col-inner {
        display: flex;
        height: 250px;
        position: relative;
        background: #fff;
        border: 2px solid var(--primary-color);
        border-radius: 15px;
        padding: 10px;
        box-shadow: 0 0 5px #0000004d;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
    .phu_hop_bkns_hosting .col-inner img {
        width: 70%;
    }

    .bang_gia_my_chu {
        display: none !important;
    }

    .phu_hop_bkns_hosting .col-inner {

        height: auto !important;

    }
    .home-title h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .home-title > .description {
        font-size: 12px;

    }
    .dich_vu_lien_q .box-text-inner p {
        font-weight: 600;
        font-size: 11px;
    }.tab-panels-noidung-img .tab-panels-noidun-nc:nth-child(2n) {
         margin-top: 0px;
     }
    .tieu_de_dicf_vu_s p {
        font-size: 12px;
        color: white;
    }
    .tab-panels-noidung-img {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
        gap: 10px;
        margin-top: 0px;
        border-bottom: 1px solid #efefef;
        padding-bottom: 0px;
        justify-items: stretch;
        justify-content: space-around;
    }
    .dich_vu_bs p strong {
        font-size: 11px;
        color: red;
        font-weight: 600;
    }
    .dich_vu_bs_row .dich_vu_bs:nth-child(6) .col-inner h4 {
        font-weight: 500;
        font-size: 15px;
        color: #ffffff;
    }

    .dich_vu_bs_row .col-inner {
        height: 225px;
        text-align: center;
        padding: 25px;
        border-radius: 10px;
        border: 2px solid #CA57FE;
    }

    .dich_vu_bs_row {
        display: flex;
        align-items: center;
        align-content: stretch;
        justify-content: center;
    }

    .gioi_thieu_dịch_vu a.button.secondary.is-shade.box-shadow-3.box-shadow-5-hover.expand {
        font-size: 10px;
        padding: 2px;
        background-color: #2450e0;
        border-radius: 30px !important;
    }
    .gioi_thieu_dịch_vu a.button.secondary.is-shade.box-shadow-3.box-shadow-5-hover.expand {
        margin: auto;
        width: 85% !important;
        font-size: 9px;
        padding: 6px;
        background-color: #2450e0;
        border-radius: 30px !important;
    }

    table.table-mmo {
        width: 100%;
        overflow: scroll !important;
        overflow: auto;
        display: block;
        overflow-x: auto;
    }

    .buton_thue_may_chu p {

        width: 90%;

    }
    .buton_thue_may_chus p {
        width: 100%;
        padding: 10px;
    }

    .bang_gia_my_chu_ss .bk-tab ul li a, .bk-tab ul li a {
        padding: 10px 20px 10px 20px;
    }
}







table.table-mmo td {
    background: #ffffff;
}
table.table-mmo th, td {
    padding: 0.5em;
    text-align: left;
    border-bottom: 1px solid rgb(27 127 204 / 38%) !important;
    line-height: 1.3;
    font-size: .9em;
    border-right: 1px solid rgb(27 127 204 / 38%) !important;
}



table.table-mmo.sl tr:nth-child(1) td {
    border: 1px solid rgb(27 127 204 / 38%);
    font-size: 20px;
    background: #fff;
    color: rgba(27,127,204,.8);
    font-weight: 600;
}
tbody {

    border: 1px solid rgb(27 127 204 / 38%) !important;
}


/*css Tích Hợp Nhiều Tính Năng Công Nghệ Hiện Đại*/

article.bk-review-home .review-avatar {
    width: 100%;
    height: 100px;
    border-radius: 6px 6px 0 0;
}
article.bk-review-home .review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
article.bk-review-home .slide-items {
    margin: 15px;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px !important;
    min-height: 35px !important;
    height: 35px !important;
    background: #fff !important;
    border-radius: 50% !important;
    margin: 0px !important;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 10%) !important;
}
article.bk-review-home .owl-dots {
    display: none;
}
article.bk-review-home .owl-nav.disabled {
    display: block !important;
}


/*css video*/
.video_home_s h3 {
    color: var(--primary-color);
    font-size: 40px;
    text-align: center;
    line-height: 50px;
    margin: 0px !important;
    text-transform: capitalize;
}

.video_home_s .overlay-icon {
    background-color: rgb(255 0 0) !important;
    width: 70px;
    color: #fff;
    height: 45px;
    line-height: 2.8em;
    border-radius: 8px;

}
.video_home_s a.button.primary {
    background-color: red !important;
}

.phu_hop_bkns_hosting .col-inner {
    display: flex;
    height: 250px;
    position: relative;
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 5px #0000004d;
    align-items: center;
}

.phu_hop_bkns_hosting .col-inner:hover {
    transition: .3s ease-in-out;
    transform: translateY(-10px);
}
.phu_hop_noi_dung h4 span {
    background: #c0e5ff;
    width: 50%;
    display: block;
    padding: 8px;
    text-align: center;
    border-radius: 50px;
    color: #0062ff;
    font-weight: 100;
    font-size: 16px;
    height: unset !important;
    line-height: unset !important;
}
.phu_hop_noi_dung h3 {
    position: relative;
    margin-bottom: 20px;
}
.phu_hop_noi_dung h3::before {
    content: "";
    color: var(--primary-color);
    position: absolute;
    top: 35px;
    left: 0%;
    width: 50%;
    height: 2px;
    background: red;
}
.phu_hop_noi_dung p {
    font-size: 18px;
    color: black;
}


/*css Những lưu ý khi Mua Hosting giá rẻ*/

.luu_y_khI_mua_hosting {
}
.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left {
    display: flex;
    align-items: center;
    margin: 15px;
}
.luu_y_khI_mua_hosting .icon-box-text.last-reset h3 {
    margin: 0px;
}

.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left:nth-child(1) .icon-box-text.last-reset h3 {
    color: #1CC2B6;
}
.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left:nth-child(2) .icon-box-text.last-reset h3 {
    color: #9E00C6;
}
.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left:nth-child(3) .icon-box-text.last-reset h3 {
    color: #FF9D00;
}
.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left:nth-child(4) .icon-box-text.last-reset h3 {
    color: #2450E0;
}
.luu_y_khI_mua_hosting .icon-box.featured-box.icon-box-left.text-left:nth-child(5) .icon-box-text.last-reset h3 {
    color: #FF1285;
}





/*css ly do chon bkns*/

.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(1) .col-inner,
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(3) .col-inner {

    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%);
}

.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(1) .col-inner h4 ,
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(3) .col-inner h4 {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
}
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(1) .col-inner p ,
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(3) .col-inner p {

    color: #ffffff;
}
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(1) .col-inner p strong ,
.chi_phi_hop_ly_s .ly_do_bkns_k_tex:nth-child(3) .col-inner p  strong {

    color: #FFE659 !important;
}


.chi_phi_hop_ly_s .ly_do_bkns_k_tex p strong {
    font-size: 20px;
    color: red;
    font-weight: 600;
}

.chi_phi_hop_ly_s .ly_do_bkns_k_tex h4 {
    font-weight: 500;
    font-size: 20px;
}

.chi_phi_hop_ly_s .ly_do_bkns_k_tex .col-inner {
    text-align: center;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #CA57FE;
}


.chi_phi_hop_ly_s .ly_do_bkns_k_tex .col-inner:hover {
    transition: .3s ease-in-out;
    transform: translateY(-10px);
}

.review-home-item .review-star {
    display: flex;
    justify-content: center;
}

/*css tin tuc*/

.slide-item.post img {
    height: 250px;
}
.post-high-content span:hover {
    background: red;
    color: #fffffc;
    border: 2px solid red;
}
.post-high img {
    border-radius: 20px;
    height: 235px;
}
.post-high-content {
    text-align: center;
}
.owl-carousel.slide-review-home-hosting.owl-loaded.owl-drag .slide-item.post {
    position: relative;
    background: #fff;
    border-radius: 8px;
    border: 0px solid rgba(27, 127, 204, .8);
    padding: 10px;
    box-shadow: 0 0 5px #0000004d;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    margin: 10px;
}
.post-high-content p {
    font-size: 17px;
    font-weight: 700;
    color: #0b0b0b;
    color: black;
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    min-height: 23px;
}
.post-high-content span {
    border: 2px solid #2450E0;
    border-radius: 40px;
    padding: 10px;
}
.review-home-item {
    position: relative;
    background: #fff;
    border: 0px solid #f2f2f2;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 0 5px #7b525200;
}
.post-high-content p {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    color: black;
}





/**review**/
article.bk-review-home .review-home-item {
    position: relative;
    background: #fff;
    border: 0px solid #f2f2f2 !important;
    border-radius: 8px;
    margin: 15px !important;
    padding: 25px;
    box-shadow: 0 0 5px #00000000 !important;
}
article.bk-review-home .review-home-item .review-avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    margin: auto;
}
article.bk-review-home  p.text_evaluate{
    overflow-y: hidden;
    height: 100px;
}

.review-home-item .review-avatar::before {
    content: "“";
    font-size: 116px;
    color: var(--primary-color);
    opacity: 0.3;
    line-height: 1;
    position: absolute;
    top: 70px;
}






.bang_gia_my_chu ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-left {
    display: flex;
    height: 80px;
    background: #2450e0;
    justify-content: center;
}
.bang_gia_my_chu ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-left li {
    margin: 10px;
}

.bang_gia_my_chu ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-left li span {
    font-size: 20px;
    color: #FFFFFF;
}

.row_butom_m {
    font-size: 20px;
    color: #FFE659;
}
.bang_gia_my_chu .tab-panels {
    max-width: 1230px !important;
    margin: auto;
}
.row_butom_m {
    display: flex;
    height: 70px;
    background: #2450e0;
    justify-content: center;
    align-items: center;
}
.row_butom_m a.button.alert.is-link {
    margin: 0px;
}
.row_butom_m .button span {
    font-weight: 600;
    display: inline-block;
    line-height: 1.6;
    font-size: 20px;
    color: #FFFFFF;
}
.row_butom_m a.button.alert.is-link {
    padding-left: 10px;
    margin: 0px;
    padding-right: 10px;
}
.row_butom_m a.button.alert.is-link span:hover {
    color: #FFE659;
}
.row_butom_m a.button.alert.box-shadow-2.box-shadow-1-hover {
    margin: 0px;
}
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(1) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(4) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(5) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(8) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(9) .accordion-item a.accordion-title.plain {
    background: -webkit-linear-gradient(123deg, #b862fe, #2450e0 32%) !important;
    border-radius: 10px;
}


.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(1) .accordion-item a.accordion-title.plain ,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(4) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(5) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(8) .accordion-item a.accordion-title.plain,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(9) .accordion-item a.accordion-title.plain {
    color: #ffffff !important;
}


.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(1) .accordion-item a.accordion-title.plain i.icon-angle-down,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(4) .accordion-item a.accordion-title.plain i.icon-angle-down,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(5) .accordion-item a.accordion-title.plain i.icon-angle-down,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(8) .accordion-item a.accordion-title.plain i.icon-angle-down,
.faq-lists.s2 .accordion.nv-accordion.nv-faq .row .noPadding:nth-child(9) .accordion-item a.accordion-title.plain i.icon-angle-down {
    color: #ffffff !important;
}



.faq-lists.s2  .accordion.nv-accordion.nv-faq .row .noPadding .accordion-item {
    border-radius: 10px !important;
    border: 1px solid #2cb4ff !important;
}


.faq-lists.s2   .nv-accordion a:before {
    display: none !important;
}



.banner_home_amd.vpsn8n .title_banner h1 {
    margin: 0px;
    font-size: 35px;
    color: red;
}
.banner_home_amd.vpsn8n .title_banner h2 {
    line-height: 33px;
    font-size: 22px;
}
.bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs li.tab.active.has-icon {
    border: 1px solid #2cb4ff !important;
}


.tabbed-content.bkns_table_s_sp.giuseart_tabs
{

}

.bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs li.tab.has-icon.active a:after {
    position: absolute;
    right: 0px !important;
    top: -8px !important;
    left: 160px !important;
    width: 41px;
    content: url(http://www.bkns.vn/wp-content/uploads/2025/04/commerce_15481697-1.png);
}

.bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs li.tab.has-icon {
    border-radius: 10px;
    margin: 10px;
    width: 18%;
    text-align: center;
    padding: 10px 10px 10px 10px;
    box-shadow: 0 2px 16px rgb(200 186 186 / 38%) !important;
    cursor: pointer;
    transition: .3s ease-in-out;
    border: 1px solid #C7C7C7;
    text-align: center;
}


.bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .nav-divided li.tab.has-icon h4 {
    font-weight: 600;
    font-size: 18px;
    margin-left: 10px;
}
.tabbed-content.bkns_table_s_sp.giuseart_tabs {
    margin-top: 30px;
}

.taiso_con_ct.s .home-title h2 {
    text-transform: uppercase;
    color: #1A66FF !important;
}
.taiso_con_ct.s .home-title .description {
    color: #0c0c0c !important;
}
.bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .title_table_son_bkns {
    color: #1A66FF;
    font-size: 40px;
    text-align: center;
    line-height: 50px;
    text-transform: capitalize;
}
.home-title_vps8n .home-title h2 {
    text-transform: uppercase;
    color: #1A66FF !important;
}
.tabbed-content.bkns_table_s_sp.giuseart_tabs .img_tab_home_giuseart_tabs img {
    height: 50px;
}

.owl-carousel.slide-table-price.owl-loaded.owl-drag .price-item-header .price-wrapper-sale p {
    margin: 0px !important;
    font-size: 22px;

}

@media only screen and (max-width: 767px) {
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .nav-divided li.tab.has-icon {
        width: 44% !important;
    }
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .nav-divided li.tab.has-icon h4 {
        font-weight: 600;
        font-size: 10px;
        margin-left: 10px;
    }
    .tabbed-content.bkns_table_s_sp.giuseart_tabs .img_tab_home_giuseart_tabs img {
        height: 40px;
    }
    .banner_home_amd.vpsn8n p {
        font-size: 12px;
    }
    .banner_home_amd.vpsn8n .title_banner h2 {
        line-height: 32px;
        font-size: 18px;
    }
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .title_table_son_bkns {
        color: #1A66FF;
        font-size: 27px;
        text-align: center;
        line-height: 37px;
        text-transform: capitalize;
    }
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs li.tab.has-icon.active a:after {
        position: absolute;
        right: 0px !important;
        top: -20px !important;
        left: 109px !important;
        width: 39px;
        content: url(/wp-content/uploads/2025/04/commerce_15481697-1.png);
    }
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .nav-divided li.tab.has-icon {
        width: 44%;

    }
    .bang_gia_my_chu_ss .tabbed-content.bkns_table_s_sp.giuseart_tabs .nav-divided li.tab.has-icon h4 {

        font-size: 11px;
    }
    .tabbed-content.bkns_table_s_sp.giuseart_tabs .img_tab_home_giuseart_tabs img {
        height: 40px;
    }
}


/* ==========================================================================
   BẢNG GIÁ VPS NVMe — shortcode [bk_bang_gia_vps_nvme]
   Bám theo ảnh mẫu bảng giá Cloud VM. Mọi selector nằm trong .bk-table-price-nvme
   nên không ảnh hưởng các bảng giá khác của theme.
   ========================================================================== */

.bk-table-price-nvme {
    /* Neo cua nut "Xem Bang Gia" o khoi hero (shortcode in id="bang-gia").
       Chua san khoang tren de header dinh cua theme khong che mat tieu de. */
    scroll-margin-top: 90px;

    --xanh: #1a73e8;
    --xanh-dam: #2b4bd8;
    --xanh-the: #0d6efd;
    --vang: #ffd400;
    --do: #f5432c;
    --do-nhat: #ffe8e3;
    --gia-cu: #8b98a6;
    --navy: #0d2a63;
    --muc: #1b2733;
    --xam: #6b7a89;
    --xam-nhat: #9aa7b4;
    --vien: #e5e9ef;
}

/* --- Tiêu đề ------------------------------------------------------------- */

/* !important o day la bat buoc: theme co .home-title h2 { color:#F44336 !important }
   o dau file, khong co !important thi tieu de ra mau do chu khong phai xanh. */
.bk-table-price-nvme .home-title h2 {
    color: var(--xanh) !important;
    font-weight: 800;
    text-transform: uppercase;
}

.bk-table-price-nvme .home-title .description {
    color: var(--muc);
    font-size: 14px;
    font-weight: 500;
}

/* Cho phep to do vai chu trong mo ta, vd "Tiet kiem den <b>35%</b>" */
.bk-table-price-nvme .home-title .description b,
.bk-table-price-nvme .home-title .description strong {
    color: var(--do);
    font-weight: 700;
}

/* --- Tab chu kỳ ---------------------------------------------------------- */

.bk-table-price-nvme .nvme-cycle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    max-width: max-content;
    margin: 0 auto 30px;
    padding: 10px 30px;
    border-radius: 999px;
    background: #e8f2fd;
}

.bk-table-price-nvme .nvme-cycle__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3f4a56;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    /* Flatsome viet hoa moi <button>; anh mau la chu thuong. */
    text-transform: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.bk-table-price-nvme .nvme-cycle__tab:hover {
    background: rgba(43, 75, 216, .1);
}

.bk-table-price-nvme .nvme-cycle__tab.is-active {
    background: var(--xanh-dam);
    color: #fff;
    /* Bong nhe cho vien thuoc dang chon noi len khoi nen, de doc dang o dau */
    box-shadow: 0 3px 10px rgba(43, 75, 216, .34);
}

.bk-table-price-nvme .nvme-cycle__tab:focus-visible {
    outline: 3px solid var(--xanh-dam);
    outline-offset: 2px;
}

.bk-table-price-nvme .nvme-cycle__off {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--do-nhat);
    color: var(--do);
    font-size: 11px;
    font-weight: 700;
}

/* Tren tab dang chon, nen hong chat voi nen xanh dam -> doi sang trang mo */
.bk-table-price-nvme .nvme-cycle__tab.is-active .nvme-cycle__off {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* --- Thẻ giá ------------------------------------------------------------- */

.bk-table-price-nvme .price-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vien);
    border-radius: 9px;
    background: #fff;
    transition: box-shadow .25s ease, transform .25s ease,
    background-color .2s ease, border-color .2s ease;
}

.bk-table-price-nvme .price-item:hover {
    box-shadow: 0 14px 34px rgba(11, 61, 103, .13);
    transform: translateY(-3px);
}

/* Hover vao the nao thi the do khoac luon bo mau cua the noi bat (xem khoi
   "The noi bat" ben duoi, cac rule do dung `:is(.is-hot, :hover)`).
   Transition mau chu dat o trang thai THUONG chu khong dat trong rule hover:
   dat trong hover thi luc ro chuot ra rule het khop, transition bien mat, chu
   giat cai ve mau cu. */
.bk-table-price-nvme .price-item .price-head,
.bk-table-price-nvme .price-item .price-unit,
.bk-table-price-nvme .price-item .price-old,
.bk-table-price-nvme .price-item .price-now,
.bk-table-price-nvme .price-item .price-item-header > p,
.bk-table-price-nvme .price-item .price-item-body li,
.bk-table-price-nvme .price-item .price-ico,
.bk-table-price-nvme .price-item .price-tam-tinh,
.bk-table-price-nvme .price-item .price-item-body ul,
.bk-table-price-nvme .price-item .price-item-footer .button_style {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* JS gan .vua-doi-gia moi lan bam tab chu ky (xem vps-nvme.js). Chi mot cu hien
   dan cho con so moi — day la thao tac chinh cua bang gia, dang duoc danh dau;
   khong rac hieu ung cho nhung cho khac. */
@keyframes bk-nvme-hien-gia {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

.bk-table-price-nvme.vua-doi-gia .price-now,
.bk-table-price-nvme.vua-doi-gia .price-old,
.bk-table-price-nvme.vua-doi-gia .price-tooltip__tong {
    animation: bk-nvme-hien-gia .3s ease-out both;
}

.bk-table-price-nvme .price-item-header {
    padding: 20px 20px 0;
    background: transparent;
}

.bk-table-price-nvme .price-head {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
}

/* `gap: 0` theo chieu ngang la co y: mau viet "306.000/th" dinh lien, khong ho
   khoang nao. Khoang cach giua gia cu / gia moi / icon dat bang margin rieng o
   duoi, khoi phai an theo mot con so gap chung. Row-gap 4px de phong khi hep
   qua phai xuong dong. */
.bk-table-price-nvme .price-wrapper {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 0;
    color: var(--muc);
}

/* Gach gia cu ve bang ::after chu KHONG dung `text-decoration: line-through`:
   mau la mot VACH NGHIENG cat qua con so, text-decoration khong nghieng duoc.
   `<del>` mac dinh da co line-through nen phai tat tay, khong thi hai vach.
   `position: relative` la bat buoc — thieu no vach se neo theo the cha va
   chay het sang trai. */
.bk-table-price-nvme .price-old {
    position: relative;
    margin-right: 10px;
    color: var(--gia-cu);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.bk-table-price-nvme .price-old::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    /* translateY(-50%) truoc roi moi rotate: khong co no thi `top: 50%` chi dat
       MEP TREN cua vach vao giua, vach tut xuong 1px. */
    transform: translateY(-50%) rotate(-8deg);
    background: #757885;
}

/* Gia dung gradient 2 mau nhu con so o khoi hero. Mau dac khai TRUOC lam du
   phong cho trinh duyet khong ho tro background-clip: text. */
.bk-table-price-nvme .price-now {
    color: var(--xanh);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(96deg, #3a8bff 0%, var(--xanh-dam) 78%);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bk-table-price-nvme .price-now {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.bk-table-price-nvme .price-unit {
    margin-left: 2px;
    color: var(--xam);
    font-size: 14px;
    font-weight: 500;
}

.bk-table-price-nvme .price-item-header > p {
    margin: 6px 0 0;
    color: var(--xam);
    font-size: 13px;
}

/* --- Tạm tính: tooltip nằm DƯỚI icon, có mũi tên chỉ lên -------------------- */

/* `font-size` o day KHONG lam icon to len: <svg> da co width/height 17px co
   dinh ben duoi, font-size chi an voi icon font (<i class="fa">). Muon doi co
   thi sua o `.price-ico-tt`.
   Nen tron nhat: cai icon nay la nut mo tooltip "Tam tinh" ma truoc gio tron
   lom, khong ai biet la ro chuot vao duoc. Boc nen cho no thanh mot nut that. */
.bk-table-price-nvme .price-tam-tinh {
    position: relative;
    display: inline-flex;
    align-self: center;
    margin-left: 10px;
    padding: 5px;
    border-radius: 50%;
    background: #e8f1fd;
    color: var(--xanh);
    cursor: help;
    transition: background-color .2s ease, transform .2s ease;
}

.bk-table-price-nvme .price-tam-tinh:hover,
.bk-table-price-nvme .price-tam-tinh:focus-visible {
    background: #d5e6fa;
    transform: translateY(-1px);
}

.bk-table-price-nvme .price-tam-tinh:focus-visible {
    outline: 3px solid var(--xanh-dam);
    outline-offset: 2px;
}

.bk-table-price-nvme .price-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    z-index: 6;
    display: grid;
    gap: 4px;
    min-width: 186px;
    padding: 12px 14px;
    transform: translateX(-50%) translateY(-4px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 61, 103, .2);
    color: var(--muc);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.bk-table-price-nvme .price-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, 50%) rotate(45deg);
    background: #fff;
}

.bk-table-price-nvme .price-tam-tinh:hover .price-tooltip,
.bk-table-price-nvme .price-tam-tinh:focus-visible .price-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.bk-table-price-nvme .price-tooltip b {
    color: var(--muc);
    font-weight: 700;
}

.bk-table-price-nvme .price-tooltip__hang {
    display: grid;
    grid-template-columns: 58px auto;
    gap: 10px;
}

.bk-table-price-nvme .price-tooltip__hang i {
    color: var(--xam);
    font-style: normal;
}

.bk-table-price-nvme .price-tooltip__tong {
    color: var(--xanh);
    font-weight: 700;
}

/* --- Hàng mã giảm giá ----------------------------------------------------- */

.bk-table-price-nvme .price-coupon {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0px 20px 0;
    padding: 0px 12px;
    text-align: center;
    border-radius: 6px;
    background: var(--do);
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
}

.bk-table-price-nvme .price-coupon b {
    font-weight: 800;
}

/* File copy-white.png da ve san CA nen mo bo goc lan glyph trang, nen nut chi
   con lam vo trong suot — de nguyen `background` cu se thanh hai lop nen chong
   nhau, trong day cop va lech. Hieu ung hover chuyen sang opacity cua anh. */
.bk-table-price-nvme .price-copy {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    line-height: 0;
    /* Flatsome viet hoa moi <button>; tooltip la <span> BEN TRONG nut nen an
       theo, ra "SAO CHEP MA". Chan tu chinh nut cho ca cum. */
    text-transform: none;
}

.bk-table-price-nvme .price-copy__ico {
    display: block;
    margin-top: 10px;
    width: 24px;
    height: auto;
    transition: opacity .2s ease;
}

.bk-table-price-nvme .price-copy:hover .price-copy__ico {
    opacity: .78;
}

.bk-table-price-nvme .price-copy:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 1px;
}

/* Da chep xong: nut khong con nen rieng de doi mau, danh dau bang khung xanh la. */
.bk-table-price-nvme .price-copy.da-chep {
    background: #1f9d55;
    box-shadow: 0 0 0 2px #1f9d55;
}

/* Tooltip "Sao chép mã" dưới nút copy */
/* Neo theo mep PHAI cua nut, khong can giua: nut nam sat mep phai the do
   (`justify-content: space-between`), can giua thi tooltip thoi han ra ngoai
   the. Neo phai thi kieu nao cung nam gon trong the. */
.bk-table-price-nvme .price-copy__tip {
    position: absolute;
    right: -6px;
    top: calc(100% + 8px);
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 61, 103, .18);
    color: var(--muc);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
}

.bk-table-price-nvme .price-copy:hover .price-copy__tip,
.bk-table-price-nvme .price-copy:focus-visible .price-copy__tip {
    opacity: 1;
    visibility: visible;
}

.bk-table-price-nvme .price-copy.da-chep .price-copy__tip {
    opacity: 0;
    visibility: hidden;
}

/* --- Danh sách thông số --------------------------------------------------- */

.bk-table-price-nvme .price-item-body ul {
    margin: 16px 20px 0;
    padding: 15px 0 4px;
    border-top: 1px solid #eef2f6;
    list-style: none;
}

.bk-table-price-nvme .price-item-body li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    color: #3b4a59;
    font-size: 14px;
    line-height: 1.5;
}

/* .price-ico phuc vu CA HAI dang: <svg> noi tuyen tu assets/images (bon loai
   thong so chinh) va <i> Font Awesome (cac lua chon khac). Nen co ca width/height
   cho svg lan font-size cho icon font. `fill: currentColor` la mau chot: bo SVG
   khong co thuoc tinh fill nen no an theo `color`, the noi bat doi color sang
   trang la icon trang theo. */
.bk-table-price-nvme .price-ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--xanh);
    fill: currentColor;
    font-size: 17px;
    line-height: 1;
    text-align: center;
}

/* Cung mau xanh la voi khoi hero (--hv-la) — ca trang chi nen co MOT mau xanh
   la, khong phai hai sac gan giong nhau. */
.bk-table-price-nvme .price-ico--check {
    color: #3ac91f;
}

.bk-table-price-nvme .price-ico-tt {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.bk-table-price-nvme .price-copy .fa {
    font-size: 13px;
}

.bk-table-price-nvme .price-item-body strong {
    color: var(--muc);
    font-weight: 700;
}

/* --- Nút đăng ký ---------------------------------------------------------- */

.bk-table-price-nvme .price-item-footer {
    margin-top: auto;
    padding: 14px 20px 20px;
}

.bk-table-price-nvme .price-item-footer .button_style {
    display: block;
    width: 100%;
    /* main.css:178 ep height:35px va line-height:35px !important -> nut bi det
       va chu lech tam; mo lai cho padding tu quyet dinh chieu cao. */
    height: auto !important;
    padding: 12px 16px;
    border: 1px solid var(--xanh);
    border-radius: 5px;
    background: var(--xanh);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4 !important;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bk-table-price-nvme .price-item-footer .button_style:hover {
    background: #1560c9;
    border-color: #1560c9;
    box-shadow: 0 6px 16px rgba(26, 115, 232, .28);
}

.bk-table-price-nvme .price-item-footer .button_style:focus-visible {
    outline: 3px solid var(--xanh-dam);
    outline-offset: 2px;
}

/* --- Thẻ nổi bật: nền xanh, giá và nút vàng ------------------------------- */

.bk-table-price-nvme .price-item:is(.is-hot, :hover) {
    background: var(--xanh-the);
    border-color: var(--xanh-the);
}

.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-head,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-unit,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-header > p,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-body li,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-body strong,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-ico,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tam-tinh {
    color: #fff;
}

/* Chu y: o day doi `background-image` chu KHONG phai `color` — rule @supports
   ben tren da dat `-webkit-text-fill-color: transparent`, con so an theo nen
   chu khong an theo `color` nua. Giu ca `color` lam duong lui. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-now {
    color: var(--vang);
    background-image: linear-gradient(96deg, #ffe870 0%, var(--vang) 70%);
}

/* Gia cu la mau xam trung tinh, dat len nen xanh cua the noi bat thi chim han.
   Tren the do doi sang trang mo — van lui ve sau nhung con doc duoc. */
/* Tren nen xanh dam, net chu mong 15px/500 bi hoa vao nen gan het. Day len
   600 + trang gan dac thi doc duoc, ma van nho hon gia moi nen khong tranh. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-old {
    color: rgba(255, 255, 255, .95);
    font-weight: 600;
}

/* Vach #757885 la mau xam dam — de nguyen tren nen xanh thi mat hut. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-old::after {
    background: rgba(255, 255, 255, .9);
}

/* Nen xanh nhat cua nut tam tinh chim tit tren the xanh — doi sang trang mo. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tam-tinh {
    background: rgba(255, 255, 255, .2);
}

.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tam-tinh:hover {
    background: rgba(255, 255, 255, .32);
}


.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-body ul {
    border-top-color: rgba(255, 255, 255, .25);
}

/* main.css:178 co `.button_style { color: #fff !important }` -> nut vang cua the
   noi bat bi chu TRANG tren nen vang, gan nhu khong doc duoc. Phai !important. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-footer .button_style {
    border-color: var(--vang);
    background: var(--vang);
    color: #10305c !important;
}

.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-footer .button_style:hover {
    background: #ffc400;
    border-color: #ffc400;
    box-shadow: 0 6px 16px rgba(16, 48, 92, .25);
}

/* Tooltip luôn nền trắng chữ tối, kể cả trong thẻ xanh */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tooltip,
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tooltip b {
    color: var(--muc);
}

.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-tooltip__hang i {
    color: var(--xam);
}

/* Link "So sánh các gói…" nhảy xuống bảng ở cuối trang; nhảy phát một mất
   phương hướng. File CSS này chỉ nạp ở trang chọn Template Css "VPS NVMe" nên
   đặt trên html ở đây không lan sang trang khác. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- Hai dòng dưới lưới thẻ: link so sánh + ghi chú VAT -------------------- */

.bk-table-price-nvme .nvme-so-sanh {
    margin: 2px 0 0 !important;
    color: var(--xam);
    font-size: 13px;
    text-align: center;
}

.bk-table-price-nvme .nvme-so-sanh a {
    color: var(--xanh);
    text-decoration: none;
    /* Gạch chân dựng sẵn trong suốt: hover chỉ đổi màu nên chữ không nhảy 1px. */
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.bk-table-price-nvme .nvme-so-sanh a:hover,
.bk-table-price-nvme .nvme-so-sanh a:focus-visible {
    border-bottom-color: currentColor;
}

.bk-table-price-nvme .nvme-vat {
    margin: 14px 0 0 !important;
    padding: 12px 10px;
    border-top: 1px solid var(--vien);
    border-bottom: 1px solid var(--vien);
    color: var(--muc);
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

.bk-table-price-nvme .nvme-vat b {
    color: var(--do);
    font-style: normal;
    font-weight: 700;
}

/* --- Giáp chống main.css của theme ----------------------------------------
   main.css co nguyen cum rule `.price-item ...` o (0,2,x)-(0,3,x), CAO HON moi
   selector `.bk-table-price-nvme .xxx` (0,2,0) o tren. Cach vier duoi day: chep
   dung HINH DANG selector cua theme roi them `.bk-table-price-nvme` vao dau —
   nhu vay luon hon theme dung 1 class, khoi phai dem tay tung cai.
   Nhung rule nay KHONG nap luc xem Live Preview local nen chi lo ra khi len live.
   -------------------------------------------------------------------------- */

.bk-table-price-nvme .price-item {
    /* theme dat cursor:pointer cho ca the, gay hieu nham la bam dau cung duoc */
    cursor: default;
}

.bk-table-price-nvme .price-item .price-item-header {
    padding: 20px 20px 0;
}

/* main.css:1517 — color: var(--primary-color); font-size: 28px; margin: 0 !important */
.bk-table-price-nvme .price-item .price-item-header .price-head {
    margin: 0 0 8px !important;
    color: #000000;
    font-size: 24px;
    font-weight: 500;
}



/* Rule ngay tren dat mau den cho .price-head voi do dac hieu (0,4,0), bang
   dung rule cua the noi bat o khoi tren nen NO thang (dung sau). Phai keo len
   (0,5,0) o day thi tieu de the noi bat / dang hover moi ra trang.
   Truoc day rule nay khoa cung `.price-3` — the khac lam noi bat la chu den
   tren nen xanh. */
.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-header .price-head {
    color: #ffffff;
}

/* main.css:1531 — ghi chu duoi gia bi ep 17px mau #8d9298 */
.bk-table-price-nvme .price-item .price-item-header > p {
    margin: 6px 0 0 !important;
    color: var(--xam);
    font-size: 13px;
}

/* main.css:1537 — `max-height: 250px; overflow: hidden` CAT CUT danh sach thong so
   khi gói co nhieu dong, va padding 0 13px lam le voi thanh ma giam gia. */
.bk-table-price-nvme .price-item .price-item-body {
    padding: 0;
    max-height: none;
    overflow: visible;
}

/* main.css:1573 — `border: 0 !important; padding: 0 !important` xoa luon duong
   ke ngan giua ma giam gia va danh sach thong so. */
.bk-table-price-nvme .price-item .price-item-body ul {
    margin: 16px 20px 0;
    padding: 15px 0 4px !important;
    border-top: 1px solid #eef2f6 !important;
}

/* main.css:1585 — `flex-flow: wrap` la thu pham lam ICON VA CHU TACH THANH HAI
   DONG o cac dong chu dai (vd "Bang thong trong nuoc: 200Mbps"). nowrap giu icon
   va chu cung hang, chu dai thi tu xuong dong ben trong khoi chu. */
.bk-table-price-nvme .price-item .price-item-body ul li {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 6px 0;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
}

/* main.css:1579 — ep MOI svg trong li ve 25x25, icon phinh to va lech hang. */
.bk-table-price-nvme .price-item .price-item-body ul li svg {
    width: 18px;
    height: 18px;
    margin-right: 0;
}

/* Dau check chi la mot net cheo, khong lap day o vuong nhu icon CPU/RAM/o cung
   nen cung 18px van nhin be han han. Noi ra cho can hang voi bon dong tren.
   Chuoi selector phai bam theo rule ngay tren (0,3,3) roi cong them 1 class,
   khong thi cai 18px do thang. */
.bk-table-price-nvme .price-item .price-item-body ul li svg.price-ico--check {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin-top: 0;
}

.bk-table-price-nvme .price-item:is(.is-hot, :hover) .price-item-body ul {
    border-top-color: rgba(255, 255, 255, .25) !important;
}

/* --- Màn hình nhỏ --------------------------------------------------------- */

@media (max-width: 767px) {
    .bk-table-price-nvme .nvme-cycle {
        max-width: 100%;
        border-radius: 16px;
    }

    .bk-table-price-nvme .nvme-cycle__tab {
        padding: 8px 13px;
        font-size: 13px;
    }

    .bk-table-price-nvme .price-now { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-table-price-nvme .price-item,
    .bk-table-price-nvme .price-item:hover,
    .bk-table-price-nvme .price-item .price-head,
    .bk-table-price-nvme .price-item .price-now,
    .bk-table-price-nvme .price-item .price-item-body li,
    .bk-table-price-nvme .price-item .price-item-footer .button_style,
    .bk-table-price-nvme .nvme-cycle__tab,
    .bk-table-price-nvme .price-tooltip,
    .bk-table-price-nvme .price-copy {
        transition: none;
        transform: none;
    }

    /* Tip dung translateX(-50%) de can giua nut, KHONG duoc reset transform o day. */
    .bk-table-price-nvme .price-copy__tip {
        transition: none;
    }

    .bk-table-price-nvme .price-tam-tinh:hover .price-tooltip {
        transform: translateX(-50%);
    }

    .bk-table-price-nvme.vua-doi-gia .price-now,
    .bk-table-price-nvme.vua-doi-gia .price-old,
    .bk-table-price-nvme.vua-doi-gia .price-tooltip__tong {
        animation: none;
    }
}

/* ==========================================================================
   BẢNG SO SÁNH THÔNG SỐ CÁC GÓI CLOUD VM
   HTML dán sẵn: template_assets/html/bang-so-sanh-cloud-vm.html
   Mọi selector nằm trong .bk-sosanh nên không đụng bảng giá phía trên.
   ========================================================================== */

.bk-sosanh {
    /* Neo cua link "So sanh cac goi..." — chua san khoang tren de header dinh
       cua theme khong che mat tieu de khi nhay xuong. */
    scroll-margin-top: 90px;

    --ss-xanh: #1877e6;
    --ss-xanh-dam: #0f5fc2;
    --ss-nhan: #e6eef8;
    --ss-soc: #f2f7fd;
    --ss-vien: #e0eaf6;
    --ss-vien-nhat: #eef4fb;
    --ss-do: #f5432c;
    --ss-muc: #1b2733;

    /* Phai khop be rong voi bang gia phia tren: shortcode bang gia tu in
       <div class="container"> cua theme (1200px), con khoi nay dat 1140px nen
       tren live nhin HEP HON HAN, lech han so voi anh mau. Dat bang 1200 cho
       ba khoi thang hang; parent hep hon thi tu co lai, khong tran. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    color: var(--ss-muc);
}

/* Theme có .home-title h2 { color:#F44336 !important } nên tiêu đề trong đây
   dùng class riêng, không mượn .home-title, khỏi phải chạy đua !important. */
.bk-sosanh__tieude {
    margin: 0 0 26px;
    color: var(--ss-xanh);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

/* --- Khối có thanh tiêu đề xanh ------------------------------------------- */

.bk-sosanh__khoi {
    margin-bottom: 34px;
    border: 1px solid var(--ss-vien);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 61, 122, .08);
    overflow: hidden;
}

.bk-sosanh__dau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(90deg, var(--ss-xanh), var(--ss-xanh-dam));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Hai icon nay nhung bang <img> nen CSS cua trang khong voi vao trong file SVG
   de doi fill duoc -> ep den thanh trang bang filter cho hop thanh nen xanh. */
.bk-sosanh__ico {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* --- Vùng cuộn ngang ------------------------------------------------------ */

.bk-sosanh__cuon {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bk-sosanh__cuon:focus-visible {
    outline: 3px solid var(--ss-xanh);
    outline-offset: -3px;
}

/* --- Bảng ----------------------------------------------------------------- */

/* border-collapse PHAI la separate: voi collapse thi vien do CHINH BANG ve,
   khong phai o -> o position:sticky mat vien va ho ~1px cho cot dang cuon
   loi ra ben trai. Doi sang separate + vien tung o thi vien di theo o dinh. */
.bk-sosanh__bang {
    width: 100%;
    min-width: 880px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* !important o cum vien la BAT BUOC, khong phai cho chac an: dong 644 cua chinh
   file nay co `table.table-mmo th, td { border-bottom/right: ... !important }` —
   ve `td` la selector TRAN nen do len MOI td toan trang. Va dong 662 co
   `tbody { border: ... !important }`. Khong dau bang !important thi bang nay an
   vien xanh cua theme, con 2 rule bo vien mep ben duoi im lang vo tac dung. */
.bk-sosanh__bang th,
.bk-sosanh__bang td {
    padding: 14px 12px;
    border-right: 1px solid var(--ss-vien-nhat) !important;
    border-bottom: 1px solid var(--ss-vien) !important;
    text-align: center;
    vertical-align: middle;
}

.bk-sosanh__bang tbody {
    border: 0 !important;
}

/* --- Giap chong CSS theme doi vao ----------------------------------------
   assets/css/main.css:2212 co
     `.page-template table thead tr:nth-child(1) th {
        background: var(--primary-color) !important; color:#fff;
        font-size:15px; padding:10px !important; text-align:center; }`
   (specificity 0,2,4 — cao hon moi selector cua khoi nay), con Flatsome dat
   `th { text-transform: uppercase }`. Hai thu do KHONG nap luc xem Live Preview
   local, nen local dep ma len live thi: ca hang dau ra nen xanh -> ten goi mau
   xanh CHIM MAT, o goc bi can giua, va moi nhan hang bi viet hoa.
   ------------------------------------------------------------------------- */

.bk-sosanh__bang th {
    text-transform: none !important;
    letter-spacing: normal;
}

.bk-sosanh__bang th[scope="row"] {
    background: var(--ss-nhan) !important;
    color: var(--ss-muc);
    font-size: 13.5px;
    font-weight: 700;
}

/* Vien ngoai cung da co san tu khung .bk-sosanh__khoi, bo di cho khoi chong hai lop. */
.bk-sosanh__bang tr > *:last-child {
    border-right: 0 !important;
}

.bk-sosanh__bang tbody tr:last-child > * {
    border-bottom: 0 !important;
}

/* Cột nhãn dính lại khi cuộn ngang — 8 gói thì không dính là lạc ngay. */
.bk-sosanh__bang th[scope="row"],
.bk-sosanh__nhan-dau {
    line-height: 20px;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 132px;
    background: var(--ss-nhan);
    border-right: 1px solid var(--ss-vien) !important;
    font-weight: 500;
}
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang tbody tr td {
    font-size: 13px;
}

.bk-sosanh__nhan-dau {
    z-index: 3;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

/* --- Đầu cột: tên gói + giá + nút đăng ký --------------------------------- */

/* Chuoi 3 class o dau KHONG phai thua: rule theme cung dung !important, ma khi
   ca hai deu !important thi SPECIFICITY CAO HON thang. Selector theme
   `.page-template table thead tr:nth-child(1) th` = (0,2,4) — `:nth-child` tinh
   nhu mot class. Viet `.bk-sosanh__bang thead th` chi duoc (0,1,2) nen thua,
   du co !important. Chuoi duoi day = 3 class + 2 element = (0,3,2) moi thang. */
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang thead th {
    background: #fff !important;
    padding: 16px 12px !important;
    border-bottom: 2px solid var(--ss-vien) !important;
    color: var(--ss-muc) !important;
    font-size: 14px;
    text-align: center;
}

/* Phai viet kem thead th, khong thi rule tren (specificity cao hon) do trang
   len o goc trai — anh mau la o xam. Nen o ghim BAT BUOC duc, khong thi cot
   dang cuon loi qua. */
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang thead th.bk-sosanh__nhan-dau {
    background: var(--ss-nhan) !important;
    color: var(--ss-muc) !important;

}

.bk-sosanh__goi {
    display: block;
    color: var(--ss-xanh);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.bk-sosanh__gia {
    display: block;
    margin: 5px 0 10px;
    color: var(--ss-do);
    font-size: 13px;
    font-weight: 700;
}

.bk-sosanh__gia i {
    color: var(--ss-muc);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.bk-sosanh__dangky {
    display: inline-block;
    padding: 7px 18px;
    border: 1px solid var(--ss-xanh);
    border-radius: 999px;
    background: var(--ss-xanh);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.bk-sosanh__dangky:hover,
.bk-sosanh__dangky:focus-visible {
    background: var(--ss-xanh-dam);
    border-color: var(--ss-xanh-dam);
    box-shadow: 0 5px 14px rgba(24, 119, 230, .32);
    color: #fff;
}

.bk-sosanh__dangky:focus-visible {
    outline: 3px solid var(--ss-xanh-dam);
    outline-offset: 2px;
}

/* --- Nền các ô: khoá cứng, không để theme cha quyết định -------------------
   Trên live cả bảng Phần cứng ra XANH MỘT MÀU, mất hết tương phản giữa cột nhãn
   và ô giá trị — mà harness mô phỏng live (main.css + responsive.css) KHÔNG tái
   hiện được, nghĩa là nền đó do Flatsome (theme cha, không nằm trong repo này)
   đổ vào. Không soi được thủ phạm thì khoá cứng nền ở đây, kèm chuỗi 3 class
   cho đủ specificity, là cách chắc chắn nhất.
   -------------------------------------------------------------------------- */

.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang tbody tr:nth-child(odd) td {
    background: var(--ss-soc) !important;
}

.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang tbody tr:nth-child(even) td {
    background: #fff !important;
}

/* Phải đặt SAU hai rule trên và cùng specificity (0,4,3) mới thắng: bảng phần
   cứng chỉ 2 hàng, sọc xen kẽ chẳng giúp dò hàng mà chỉ làm rối nền. */
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang--pc tbody tr:nth-child(odd) td,
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang--pc tbody tr:nth-child(even) td {
    background: #fff !important;
}

.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang th[scope="row"] {
    background: var(--ss-nhan) !important;
}

/* Hover cũng phải !important, không thì bị chính mấy rule trên chặn mất. */
.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang tbody tr:hover td {
    background: #eaf3ff !important;
}

.bk-sosanh .bk-sosanh__khoi .bk-sosanh__bang tbody tr:hover th[scope="row"] {
    background: #dbe9fb !important;
}

/* --- Bảng phần cứng: ít cột nên cho hàng cao và chữ to hơn ---------------- */

/* Bang phan cung chi con 2 cot (mot o gia tri dung chung cho moi goi) nen
   khong can min-width de ep cuon ngang nua. */
.bk-sosanh__bang--pc {
    min-width: 0;
    font-size: 14px;
}

/* Bang chi con 2 cot: khong khai `width` thi trinh duyet chia doi 50/50, cot
   nhan phinh ra nua bang trong khi chi co hai chu. */
.bk-sosanh__bang--pc th[scope="row"] {
    width: 220px;
    min-width: 168px;
    padding: 19px 18px;
    color: var(--ss-muc);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: left;
}

/* O gia tri gio chiem tron be ngang con lai; can giua thi chu troi lo lung
   giua mot khoang trong, can trai moi bam duoc vao nhan ben canh. */
.bk-sosanh__bang--pc td {
    padding: 19px 20px;
    color: #3b4a59;
    text-align: left;
}

/* --- Màn hình nhỏ --------------------------------------------------------- */

@media (max-width: 767px) {
    .bk-sosanh__tieude { font-size: 22px; }
    .bk-sosanh__dau { font-size: 15px; padding: 12px 14px; }

    /* Cot nhan an mat 132px tren man 320-390px thi phan du chi con lo mot mau
       cot du lieu. Bop lai cho lo duoc tron mot goi. */
    .bk-sosanh__bang th[scope="row"],
    .bk-sosanh__nhan-dau {
        min-width: 104px;
    }

    .bk-sosanh__bang th,
    .bk-sosanh__bang td {
        padding: 8px 6px;
    }

    .bk-sosanh__nhan-dau { font-size: 13px; }
    .bk-sosanh__bang { font-size: 12px; }

    /* Bang phan cung cung phai go, khong thi rule (0,2,1) cua no de len rule
       tren (cung do dac hieu, viet sau) va cot nhan van 168px. */
    .bk-sosanh__bang--pc {
        font-size: 12.5px;
    }

    .bk-sosanh__bang--pc th[scope="row"] {
        min-width: 112px;
        padding: 14px 10px;
        font-size: 12.5px;
    }

    .bk-sosanh__bang--pc td {
        padding: 14px 8px;
    }

    /* ::after cua .bk-sosanh__khoi CHAY SAU vung cuon (no la con cuoi cua khoi,
       khong phai cua vung cuon) nen dong nhac nay dung yen, khong truot theo
       bang. Chi hien o man nho — man rong thi bang vua du, khong can nhac. */
    .bk-sosanh__khoi:has(.bk-sosanh__bang--pc)::after {
        content: none;
    }

    .bk-sosanh__khoi::after {
        content: "Vuốt ngang để xem đầy đủ →";
        display: block;
        padding: 9px 12px;
        border-top: 1px solid var(--ss-vien);
        background: #f4f9ff;
        color: var(--ss-xanh);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-sosanh__dangky { transition: none; }
}

/* ==========================================================================
   BANNER KHUYẾN MÃI 10%
   HTML dán sẵn: template_assets/html/bang-so-sanh-cloud-vm.html (khối đầu tiên)
   Ảnh nền: assets/images/10.png (1300x257, 4 góc trong suốt).
   ========================================================================== */

.bk-khuyen-mai {
    --km-xanh: #1a73e8;
    --km-xanh-dam: #1560c9;

    /* Bang be rong voi .container (1200px) cua bang gia — xem chu thich o
       khoi .bk-sosanh. */
    max-width: 1200px;
    margin: 0 auto 34px;
    padding: 0 15px;
}

/* Dùng <img> chứ không phải background-image: ảnh tự giữ tỉ lệ 1300x257 nên
   khung luôn cao đúng, khỏi phải khai aspect-ratio và khỏi lệch khi đổi ảnh.

   `container-type: inline-size` mở đơn vị `cqw` cho khối chữ bên trong (1cqw =
   1% BỀ RỘNG CỦA CHÍNH BANNER). Nhờ vậy chữ giãn/co CÙNG TỈ LỆ với ảnh nền ở
   mọi bề rộng — đúng như bản thiết kế. Để px cố định thì banner rộng bao nhiêu
   chữ vẫn bấy nhiêu, nhìn bé tí khi khung to ra. Cách này cũng thay luôn cho
   nắm breakpoint 768-1023 chắp vá trước đó. */
.bk-khuyen-mai__the {
    position: relative;
    container-type: inline-size;
}

.bk-khuyen-mai__anh {
    display: block;
    width: 100%;
    height: auto;
}

/* Mảng cam trong ảnh bắt đầu ở 39,5% chiều ngang (đo pixel trên chính file),
   nên chữ đặt từ 43% là chắc chắn nằm gọn trong đó ở mọi bề rộng. */
.bk-khuyen-mai__noi-dung {
    position: absolute;
    left: 43%;
    right: 5.5%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.bk-khuyen-mai__tieude {
    margin: 0 0 .6cqw !important;
    color: #fff;
    font-size: 21px;
    font-size: clamp(15px, 2.15cqw, 32px);
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.bk-khuyen-mai__mo-ta {
    margin: 0 0 1.15cqw !important;
    color: rgba(255, 255, 255, .95);
    font-size: 13.5px;
    font-size: clamp(11px, 1.38cqw, 20px);
    line-height: 1.45;
}

/* Ô mã: nền trắng bọc cả chữ lẫn nút, giống ảnh mẫu. */
.bk-khuyen-mai__hang {
    display: inline-flex;
    align-items: center;
    gap: .55cqw;
    padding: .38cqw;
    border-radius: 5px;
    background: #fff;
}

.bk-khuyen-mai__ma {
    padding: .5cqw 1cqw;
    border: 1px solid rgba(16, 48, 92, .35);
    border-radius: 4px;
    background: none;
    color: #10305c;
    font-family: inherit;
    font-size: 15px;
    font-size: clamp(12px, 1.55cqw, 23px);
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Reset thẳng tay vì Flatsome style mọi <button>: viết hoa, bo góc, đổ bóng. */
.bk-khuyen-mai__chep {
    margin: 0;
    padding: .62cqw 1.15cqw;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 4px;
    background: var(--km-xanh);
    box-shadow: none;
    color: #fff;
    font-size: 13.5px;
    font-size: clamp(11px, 1.4cqw, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease;
}

.bk-khuyen-mai__chep:hover {
    background: var(--km-xanh-dam);
}

.bk-khuyen-mai__chep:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* JS gắn .da-chep trong 1,6s sau khi sao chép (xem vps-nvme.js). */
.bk-khuyen-mai__chep.da-chep {
    background: #1f9d55;
}

.bk-khuyen-mai__luu-y {
    margin: 1cqw 0 0 !important;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-size: clamp(9.5px, 1.12cqw, 16px);
    font-style: italic;
}

/* --- Màn hình nhỏ ---------------------------------------------------------
   Tỉ lệ 5:1 mà thu về 390px thì banner chỉ cao 77px, chữ đè lên không đọc nổi.
   Nên xếp dọc: cắt lấy NỬA TRÁI của ảnh (phần graphic 10%) làm dải trên bằng
   object-fit, nửa phải vốn là mảng cam trống nên bỏ đi không mất gì — thay bằng
   gradient CSS lấy đúng 3 mã màu trong ảnh (#eb590f / #d33a07 / #b11800). */

@media (max-width: 767px) {
    .bk-khuyen-mai__the {
        border-radius: 10px;
        background: linear-gradient(180deg, #eb590f, #d33a07 55%, #b11800);
        overflow: hidden;
    }

    .bk-khuyen-mai__anh {
        height: 92px;
        object-fit: cover;
        object-position: left center;
    }

    /* Xep doc thi khoi chu rong bang ca man hinh, tinh theo cqw se ra chu BE TI
       (390px x 2,15% = 8px) -> tra het ve px co dinh. */
    .bk-khuyen-mai__noi-dung {
        position: static;
        transform: none;
        padding: 14px 16px 18px;
    }

    .bk-khuyen-mai__tieude { margin-bottom: 5px !important; font-size: 17px; }
    .bk-khuyen-mai__mo-ta { margin-bottom: 11px !important; font-size: 12.5px; }
    /* Man 320px: ma + nut cong lai vua qua be ngang, nut bi cat mat mot nua.
       Cho xuong dong va moi cai chiem tron mot hang. */
    .bk-khuyen-mai__hang {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 8px;
        padding: 4px;
    }

    .bk-khuyen-mai__ma,
    .bk-khuyen-mai__chep { flex: 1 1 auto; text-align: center; }
    .bk-khuyen-mai__ma { padding: 6px 10px; font-size: 13.5px; }
    .bk-khuyen-mai__chep { padding: 8px 13px; font-size: 12.5px; }
    .bk-khuyen-mai__luu-y { margin-top: 9px !important; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-khuyen-mai__chep { transition: none; }
}

/* ==========================================================================
   HERO CLOUD VM — khối mở đầu trang
   HTML dán sẵn: template_assets/html/hero-cloud-vm.html
   Ảnh minh hoạ: assets/images/cloud-vm-hero.png (820x792, nền trong suốt).
   Mọi selector nằm trong .bk-hero-vm nên không đụng ba khối phía dưới.
   ========================================================================== */

.bk-hero-vm {
    --hv-cam: #ff7a18;
    --hv-do: #ff3d2e;
    --hv-xanh: #1a73e8;
    --hv-xanh-dam: #1c34c9;
    --hv-la: #3ac91f;
    --hv-muc: #1b2733;
    --hv-navy: #12306b;
    --hv-vien: #cfe0ff;

    /* Bang be rong voi .container (1200px) cua bang gia — xem chu thich o
       khoi .bk-sosanh. */
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 15px;
    color: var(--hv-muc);
}

.bk-hero-vm__khoi {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px 40px;
}

/* Bo khoi anh ra khoi HTML (dat anh o mot cot rieng cua UX Builder) thi cot
   phai con trong, chu bi bop lai 56% vo co. Truong hop do tra ve mot cot. */
.bk-hero-vm__khoi:has(> .bk-hero-vm__chu:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* --- Tiêu đề -------------------------------------------------------------- */

/* Mau dac khai TRUOC, gradient de sau: trinh duyet khong ho tro
   background-clip:text van doc duoc chu thay vi ra khoang trang. */
.bk-hero-vm .bk-hero-vm__tieude {
    margin: 0 0 14px;
    color: var(--hv-do);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(96deg, var(--hv-cam) 0%, var(--hv-do) 68%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Giu nguyen do dac hieu (0,2,0) nhu rule tren, khong thi theme co
   `.page-template h1` (0,1,1) la thang, chu ra den luon. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bk-hero-vm .bk-hero-vm__tieude {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.bk-hero-vm .bk-hero-vm__mo-ta {
    margin: 0 0 18px;
    max-width: 560px;
    color: var(--hv-muc);
    font-size: 16px;
    line-height: 1.7;
}

/* --- Danh sách lợi ích ---------------------------------------------------- */

/* `list-style: none` + `padding: 0` giu lai de ban markup ul/li cu dan vao van
   khong loi ra dau cham va thut le. */
.bk-hero-vm .bk-hero-vm__loi-ich {
    margin: 0 0 5px;
    padding: 0;
    list-style: none;
}

/* Nhan CA `p` lan `li`: markup gio dung <p> cho moi dong (theme nhoi rule vao
   `li` o main.css:1579/1585, tranh han cho khoe), nhung ai dan lai ban ul/li cu
   thi van chay dung. `:is(p, li)` lay do dac hieu cao nhat trong ngoac — hai
   cai deu (0,0,1) nen khong doi gi so voi truoc.
   `flex-wrap: nowrap` van phai giu: `main.css:1585` cho `li` flex-flow:wrap,
   con `p` cua theme co margin-bottom rieng — deu bi de o day. */
.bk-hero-vm .bk-hero-vm__loi-ich :is(p, li) {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 5px 0;
    color: var(--hv-muc);
    font-size: 15px;
    line-height: 1.55;
}

/* Bat theo `svg` chu KHONG theo ten class. Icon trong khoi nay hay bi thay bang
   icon dan tu bang gia (`.price-ico`), ma `.price-ico` chi co kich thuoc BEN
   TRONG `.bk-table-price-nvme`; dan ra ngoai la SVG bung het co khung — dung
   cai loi icon check to bang nua man hinh. */
.bk-hero-vm .bk-hero-vm__loi-ich svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--hv-xanh);
    fill: currentColor;
}

/* `[class*="--check"]` an ca hai kieu ten: `bk-hero-vm__ico--check` lan
   `price-ico--check`, doi icon khong phai sua CSS. */
.bk-hero-vm .bk-hero-vm__loi-ich svg[class*="--check"] {
    color: var(--hv-la);
}

/* Dong co icon check la loi cam ket, mau in dam han so voi bon dong tinh nang
   phia tren — de dam theo icon, khoi phai them class rieng vao HTML. */
.bk-hero-vm .bk-hero-vm__loi-ich :is(p, li):has(svg[class*="--check"]) {
    font-weight: 700;
}

/* --- Giá ------------------------------------------------------------------ */

.bk-hero-vm .bk-hero-vm__gia {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 20px;
    color: var(--hv-muc);
}

.bk-hero-vm .bk-hero-vm__tu {
    font-size: 17px;
    font-weight: 700;
}

/* Con so tien lay dung bo gradient cam -> do cua tieu de, thanh cap voi nhau va
   noi han len so voi chu den xung quanh. Mau dac khai TRUOC lam du phong — xem
   chu thich day du o .bk-hero-vm__tieude. */
.bk-hero-vm .bk-hero-vm__so {
    color: var(--hv-do);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(96deg, var(--hv-cam) 0%, var(--hv-do) 68%);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bk-hero-vm .bk-hero-vm__so {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.bk-hero-vm .bk-hero-vm__ky {
    font-size: 18px;
    font-weight: 700;
}

/* --- Hai nút -------------------------------------------------------------- */

.bk-hero-vm__nut {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* `text-transform: none` chan Flatsome viet hoa moi nut — mau de chu thuong. */
.bk-hero-vm .bk-hero-vm__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bk-hero-vm .bk-hero-vm__cta--chinh {
    border: 1px solid transparent;
    background: linear-gradient(97deg, #2f6bff 0%, var(--hv-xanh-dam) 100%);
    box-shadow: 0 8px 20px rgba(36, 80, 224, .28);
    color: #fff;
}

.bk-hero-vm .bk-hero-vm__cta--phu {
    border: 1px solid var(--hv-vien);
    background: #fff;
    color: var(--hv-navy);
}

.bk-hero-vm .bk-hero-vm__cta:hover {
    transform: translateY(-2px);
}

.bk-hero-vm .bk-hero-vm__cta--chinh:hover {
    box-shadow: 0 12px 26px rgba(36, 80, 224, .36);
    color: #fff;
}

.bk-hero-vm .bk-hero-vm__cta--phu:hover {
    border-color: var(--hv-xanh);
    background: #f3f8ff;
    color: var(--hv-navy);
}

.bk-hero-vm .bk-hero-vm__cta:focus-visible {
    outline: 3px solid var(--hv-xanh);
    outline-offset: 2px;
}

/* --- Ảnh minh hoạ --------------------------------------------------------- */

.bk-hero-vm__anh {
    justify-self: center;
}

.bk-hero-vm .bk-hero-vm__anh img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 849px) {
    .bk-hero-vm__khoi {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .bk-hero-vm .bk-hero-vm__mo-ta {
        max-width: none;
    }

    .bk-hero-vm .bk-hero-vm__anh img {
        max-width: 340px;
    }
}

@media (max-width: 549px) {
    /* Hai nut nam ngang o may hep se bi bop chu xuong 2 dong; cho moi nut mot
       hang tron cho de bam. */
    .bk-hero-vm .bk-hero-vm__cta {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-hero-vm .bk-hero-vm__cta {
        transition: none;
    }

    .bk-hero-vm .bk-hero-vm__cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   HERO CLOUD — khối chữ trên banner (mockup "CLOUD AMD")
   HTML dán sẵn: template_assets/html/hero-cloud-vm.html (gốc .bk-hero-vm-md)
   Markup dùng lại class của trang Cloud AMD (banner_home_amd / title_banner /
   noi_dung_banner_s) nhưng rule gốc của chúng nằm ở Amd_Cloud.css — trang này
   không nạp file đó, nên toàn bộ style viết lại ở đây, bám theo mockup
   (căn trái, có giá + 2 nút) chứ KHÔNG theo trang Cloud AMD đang chạy
   (căn giữa, danh sách thụt 20%).
   Nền (ảnh chip AMD) do banner Flatsome của trang lo — khối này KHÔNG tự vẽ
   nền, không padding/margin, để nằm gọn trong text box của banner.
   Mọi selector nằm trong .bk-hero-vm-md; khối .bk-hero-vm phía trên là bản
   nền sáng cũ, không đụng nhau.
   ========================================================================== */

.bk-hero-vm-md {
    --hn-vang: #ffd400;
    --hn-xanh: #1f6bff;
    --hn-navy: #0b1d55;
    --hn-chu: #ffffff;
    --hn-chu-phu: rgba(255, 255, 255, .86);

    /* Banner Flatsome co chieu cao co dinh theo anh nen: moi px padding/margin
       o day la them chieu cao, khoi chu tran qua mep duoi banner va de len
       khoi bang gia ngay ben duoi. */
    margin: 0;
    padding: 0;
    background: none;
    color: var(--hn-chu);
}

/* Noi dung chiem nua trai nhu mockup, dong chu khong keo qua dai tren man rong */
.bk-hero-vm-md > * {
    max-width: 620px;
}

/* --- Tiêu đề + mô tả ------------------------------------------------------ */

/* Tieu de hero la <h1> cua trang (ca trang khong con h1 nao khac). Nhan them
   h3 de ai dan lai markup cu chep tu trang Cloud AMD van ra dung kieu.
   :is() lay do dac hieu cua phan tu lon nhat trong ngoac -> van (0,2,1). */
.bk-hero-vm-md .title_banner :is(h1, h3) {
    margin: 0 0 12px;
    color: var(--hn-vang);
    font-size: clamp(30px, 3.6vw, 36px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .01em;
    text-align: left;
    text-transform: uppercase;
    /* Chia deu hai dong: khong co thi tieu de gay thanh "...VOI CLOUD / AMD",
       chu "AMD" dung mo coi mot dong. Trinh duyet chua ho tro thi bo qua. */
    text-wrap: balance;
}

/* <br> cung chep tu trang Cloud AMD (khung rong hon) — o day no ngat giua cum
   "Cloud AMD" thanh mot dong chi co chu "AMD". De chu tu xuong dong nhu mockup. */
.bk-hero-vm-md .title_banner p br {
    display: none;
}

.bk-hero-vm-md .title_banner p {
    margin: 0 0 16px;
    color: var(--hn-chu);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
}

/* --- Danh sách lợi ích ---------------------------------------------------- */

/* Mockup co HAI loai icon, deu ve bang ::before (HTML khong can <img>):
   - dong tinh nang: vong tron + mui ten ›
   - dong cam ket (noi dung boc <strong>): vong tron + dau tich, net sang hon
   Doi icon khong can sua HTML. */
.bk-hero-vm-md .noi_dung_banner_s {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    /* 2px chu khong phai 4px: 7 dong, moi dong bot 4px la vua bu cho dong cam
       ket moi them — banner Flatsome cao co dinh, du ra la tran xuong bang gia. */
    padding: 2px 0;
    color: var(--hn-chu-phu);
    font-size: 14.5px;
    line-height: 1.5;
}

.bk-hero-vm-md .noi_dung_banner_s img {
    display: none;
}

/* Dan <svg> icon vao dong (vd icon lay tu bang gia, class price-ico) thi:
   - SVG phai co kich thuoc o day: `.price-ico` chi co width/height BEN TRONG
     .bk-table-price-nvme, dem ra ngoai la bung het be ngang;
   - tat icon ::before, khong thi dong do hien HAI icon. */
.bk-hero-vm-md .noi_dung_banner_s > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: currentColor;
    color: var(--hn-chu);
}

.bk-hero-vm-md .noi_dung_banner_s:has(> svg)::before {
    content: none;
}

.bk-hero-vm-md .noi_dung_banner_s::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.6' stroke='white' stroke-opacity='.7' stroke-width='1.3'/%3E%3Cpath d='M8.7 6.6L12.1 10l-3.4 3.4' stroke='white' stroke-opacity='.85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dong cam ket (vd "Cam ket hoan tien 30 ngay") trong mockup dam va trang han:
   boc noi dung trong <strong> la tu nhan kieu nay, khong can class rieng. */
.bk-hero-vm-md .noi_dung_banner_s:has(> strong),
.bk-hero-vm-md .noi_dung_banner_s strong {
    color: var(--hn-chu);
    font-weight: 700;
}

/* Trinh duyet chua ho tro :has() thi dong nay giu icon mui ten — van doc duoc. */
.bk-hero-vm-md .noi_dung_banner_s:has(> strong)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.6' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M6.4 10.3l2.4 2.4 4.9-5' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bk-hero-vm-md .banner_home_amd {
    margin-bottom: 5px;
}

/* Dich cua nut "Dung thu mien phi": form Mautic nhung tu UX Block (xem
   template_assets/html/form-tu-van-vps-nvme.html). Chua san khoang tren cho
   header dinh cua theme khong che mat dau form khi nhay toi. */
#mauticform_wrapper_vpslandingcloudvpsamd {
    scroll-margin-top: 90px;
}

/* --- Giá ------------------------------------------------------------------ */

.bk-hero-vm-md .bk-hero-vm__gia {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 10px;
    color: var(--hn-chu);
}

.bk-hero-vm-md .bk-hero-vm__tu {
    font-size: 24px;
    font-weight: 700;
}

.bk-hero-vm-md .bk-hero-vm__so {
    color: var(--hn-vang);
    font-size: clamp(38px, 4.2vw, 44px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.bk-hero-vm-md .bk-hero-vm__ky {
    font-size: 24px;
    font-weight: 500;
}

/* --- Hai nút -------------------------------------------------------------- */

.bk-hero-vm-md .bk-hero-vm__nut {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* `text-transform: none` chan Flatsome viet hoa nut — mockup de chu thuong. */
.bk-hero-vm-md .bk-hero-vm__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bk-hero-vm-md .bk-hero-vm__cta--chinh {
    border: 1.5px solid rgba(255, 255, 255, .9);
    background: var(--hn-xanh);
    color: #fff;
}

.bk-hero-vm-md .bk-hero-vm__cta--phu {
    border: 1.5px solid #fff;
    background: #fff;
    color: var(--hn-navy);
}

.bk-hero-vm-md .bk-hero-vm__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.bk-hero-vm-md .bk-hero-vm__cta--chinh:hover {
    background: #3a7dff;
    color: #fff;
}

.bk-hero-vm-md .bk-hero-vm__cta--phu:hover {
    background: #eef3ff;
    color: var(--hn-navy);
}

/* Nen toi -> vien vang moi thay duoc, vien xanh mac dinh chim mat. */
.bk-hero-vm-md .bk-hero-vm__cta:focus-visible {
    outline: 3px solid var(--hn-vang);
    outline-offset: 3px;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 849px) {
    .bk-hero-vm-md > * {
        max-width: none;
    }

}

@media (max-width: 549px) {
    .bk-hero-vm-md .bk-hero-vm__tu,
    .bk-hero-vm-md .bk-hero-vm__ky {
        font-size: 19px;
    }

    .bk-hero-vm-md .bk-hero-vm__cta {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-hero-vm-md .bk-hero-vm__cta {
        transition: none;
    }

    .bk-hero-vm-md .bk-hero-vm__cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   GIỚI THIỆU + ƯU ĐIỂM CLOUD AMD EPYC
   Khối dựng thẳng trong UX Builder (không có file HTML dán sẵn):
     section.bang_gia_my_chu_ss
       .row.video_home_s   ← giới thiệu: chữ bên trái + video bên phải
       .row                ← .home-title "Ưu điểm…" + hàng 5 cột ưu điểm
   Flatsome sinh id NGẪU NHIÊN cho row/col (row-1787991762…) mỗi lần lưu nên
   KHÔNG bám id. Bám class nhà `.video_home_s` (chỉ khối video này có) và
   hàng đứng ngay sau nó (`.video_home_s + .row`).
   ========================================================================== */

.video_home_s,
.video_home_s + .row {
    --ud-xanh: #1a73e8;
    --ud-xanh-dam: #1560c9;
    --ud-navy: #0d2a63;
    --ud-chu: #4a5a6a;
    --ud-vien: #e5e9ef;
}

/* --- Giới thiệu ----------------------------------------------------------- */

/* Markup dang de <h1>, nhung hero dau trang da la h1 cua trang -> nen doi
   thanh <h2> trong UX Builder. Nhan ca hai de doi xong khong vo kieu. */
.video_home_s .text :is(h1, h2) {
    margin: 0 0 14px;
    color: var(--ud-xanh);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    text-wrap: balance;
}

.video_home_s .text p {
    margin: 0 0 12px;
    color: var(--ud-chu);
    font-size: 16px;
    line-height: 1.7;
}

.video_home_s .text p :is(b, strong) {
    color: var(--ud-navy);
    font-weight: 700;
}

/* Dau file co `.video_home_s a.button.primary { background-color: red !important }`
   (chep tu trang Cloud) -> nut do lech tong voi moi nut xanh con lai cua trang.
   Hai ben deu !important thi do dac hieu cao hon thang: rule do (0,3,1), day (0,4,1). */
.video_home_s .col-inner a.button.primary {
    margin: 6px 0 0;
    padding: 0 28px;
    border-color: var(--ud-xanh);
    background-color: var(--ud-xanh) !important;
    box-shadow: 0 8px 20px rgba(26, 115, 232, .28);
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.video_home_s .col-inner a.button.primary:hover {
    background-color: var(--ud-xanh-dam) !important;
    box-shadow: 0 12px 26px rgba(26, 115, 232, .36);
    transform: translateY(-2px);
}

.video_home_s .col-inner a.button.primary:focus-visible {
    outline: 3px solid var(--ud-navy);
    outline-offset: 3px;
}

/* Khung video: bo goc + do bong cho tach khoi nen trang. Nut play do giu
   nguyen (rule `.video_home_s .overlay-icon` o dau file) — do la ma nhan dien
   YouTube, nguoi xem nhin la biet bam duoc. */
.video_home_s .img .img-inner {
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(13, 42, 99, .18);
    overflow: hidden;
}

/* --- Tiêu đề khối ưu điểm ------------------------------------------------- */

/* Tieu de "Uu diem..." mo mot phan moi: phai cach nut "Trai nghiem ngay" XA
   HON khoang tu no toi 5 the ben duoi, khong thi mat doc no thanh duoi cua
   khoi gioi thieu. */
.video_home_s + .row {
    margin-top: 56px;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file -> phai
   !important kem do dac hieu cao hon (0,3,1) moi ra xanh nhu tieu de bang gia. */
.video_home_s + .row .home-title h2 {
    color: var(--ud-xanh) !important;
}

/* `.home-title > .description` o dau file ep 22px mau den — to ngang tieu de. */
.video_home_s + .row .home-title > .description {
    max-width: 860px;
    margin: 10px auto 0;
    color: var(--ud-chu);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

/* --- Lưới 5 thẻ ưu điểm --------------------------------------------------- */

/* UX Builder chia cot 2-3-2-3-2: o hep chi con ~160px, tieu de gay 3 dong,
   o rong lai thua cho. Ep thanh luoi 5 cot deu nhau.
   Flatsome dat `.large-2 { max-width/flex-basis: 16.66% }` va padding cho .col
   -> reset o day, do dac hieu (0,4,0) cao hon (0,1,0) cua Flatsome. */
.video_home_s + .row .home-title + .row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    width: auto;
    max-width: none;
    margin: 30px 0 0;
}

.video_home_s + .row .home-title + .row > .col {
    width: auto;
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

.video_home_s + .row .home-title + .row > .col > .col-inner {
    position: relative;
    height: 100%;
    padding: 26px 20px 22px;
    border: 1px solid var(--ud-vien);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(13, 42, 99, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Vach xanh mong o mep tren: danh dau 5 o la mot nhom the dong hang, khong
   phai 5 cot chu troi noi tren nen trang. */
.video_home_s + .row .home-title + .row > .col > .col-inner::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #3a8bff, var(--ud-xanh));
}

.video_home_s + .row .home-title + .row > .col > .col-inner:hover {
    border-color: #cfe0ff;
    box-shadow: 0 16px 34px rgba(13, 42, 99, .12);
    transform: translateY(-4px);
}

.video_home_s + .row .home-title + .row h3 {
    margin: 0 0 10px;
    color: var(--ud-navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}

/* Mot tieu de boc san <strong> trong UX Builder -> dam hon 4 cai con lai. */
.video_home_s + .row .home-title + .row h3 strong {
    font-weight: inherit;
}

.video_home_s + .row .home-title + .row p {
    margin: 0;
    color: var(--ud-chu);
    font-size: 14.5px;
    line-height: 1.65;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 1099px) {
    .video_home_s + .row .home-title + .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 849px) {
    .video_home_s + .row .home-title + .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .video_home_s + .row .home-title > .description {
        font-size: 15px;
    }
}

@media (max-width: 549px) {
    .video_home_s + .row .home-title + .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .video_home_s .col-inner a.button.primary,
    .video_home_s + .row .home-title + .row > .col > .col-inner {
        transition: none;
    }

    .video_home_s .col-inner a.button.primary:hover,
    .video_home_s + .row .home-title + .row > .col > .col-inner:hover {
        transform: none;
    }
}

/* ==========================================================================
   TÍNH NĂNG NỔI BẬT CLOUD AMD — 3 tính năng | logo BKNS×AMD | 3 tính năng
   Khối dựng thẳng trong UX Builder, markup chép từ trang Cloud AMD:
     section.tinh_nang_home
       .row
         .col                        ← tiêu đề .home-title
         .col.tinh_nang_icon_box_l   ← 3 .icon-box, icon bên phải
         .col                        ← ảnh logo .bkns_img_noi_bat
         .col.tinh_nang_icon_box_r   ← 3 .icon-box, icon bên trái
   Rule gốc của các class này nằm ở Amd_Cloud.css — trang này không nạp file
   đó, nên viết lại toàn bộ ở đây. id section/row/col do Flatsome sinh ngẫu
   nhiên mỗi lần lưu -> chỉ bám class.
   ========================================================================== */

.tinh_nang_home {
    --tn-xanh: #1a73e8;
    --tn-navy: #0d2a63;
    --tn-chu: #4a5a6a;
    --tn-vien: #d6e4f7;
    --tn-vong: #b9d3f5;
    --tn-dia: 240px;
    --tn-vong-trong: 22px;
    --tn-vong-ngoai: 44px;
    --tn-sang: 50% 56%;
}

/* UX Builder in `<style>#section_… { padding: 30px }` theo id ngau nhien ->
   khong bam id duoc, phai !important. */
.section.tinh_nang_home {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* Quang sang trang mo dat dung sau dia logo; mau nen xanh nhat cua section
   (chon trong UX Builder) giu nguyen ben duoi. */
.tinh_nang_home > .section-bg {
    background: radial-gradient(circle 420px at var(--tn-sang), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}

/* --- Tiêu đề -------------------------------------------------------------- */

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file -> phai
   !important kem do dac hieu cao hon (0,2,1) moi ra xanh nhu tieu de "Uu diem". */
.tinh_nang_home .home-title h2 {
    color: var(--tn-xanh) !important;
    text-wrap: balance;
}

/* --- Lưới: 2 cột tính năng kẹp đĩa logo ------------------------------------ */

/* Hai cot tinh nang dung chung 3 hang qua subgrid: the "Hieu nang" cao bang
   the "Bang thong", "Bao mat" bang "Khoi tao"... hai ben luon thang hang du
   doan chu dai ngan khac nhau. Flex cua Flatsome khong lam duoc viec nay. */
.tinh_nang_home > .section-content > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr) minmax(0, 1fr);
    grid-template-rows: auto repeat(3, auto);
    gap: 18px 32px;
    align-items: stretch;
    padding-inline: 16px;
}

/* Flatsome dat max-width/flex-basis 33% + padding 0 15px 30px cho moi .col.
   Trong grid, max-width % tinh theo o luoi -> the bi bop con 1/3. Reset het. */
.tinh_nang_home > .section-content > .row > .col {
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

.tinh_nang_home > .section-content > .row > .col:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
}

.tinh_nang_home .tinh_nang_icon_box_l,
.tinh_nang_home .tinh_nang_icon_box_r {
    display: grid;
    grid-row: 2 / span 3;
    grid-template-rows: subgrid;
    align-self: stretch;
}

.tinh_nang_home .tinh_nang_icon_box_l {
    grid-column: 1;
}

.tinh_nang_home .tinh_nang_icon_box_r {
    grid-column: 3;
}

/* .col-inner chi la lop boc: bo hop cua no di de 3 .icon-box thanh o luoi
   cua subgrid. */
.tinh_nang_home .tinh_nang_icon_box_l > .col-inner,
.tinh_nang_home .tinh_nang_icon_box_r > .col-inner {
    display: contents;
}

/* Cot logo khong co class rieng — la cot dung ngay sau cot trai. */
.tinh_nang_home .tinh_nang_icon_box_l + .col {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: center;
}

/* --- Thẻ tính năng -------------------------------------------------------- */

/* Flatsome: `.icon-box { padding-left/right: 3% !important }` va
   `.icon-box-left/right { flex-flow: row wrap }` (chu roi xuong duoi icon khi
   hep). Padding phai !important; con lai do dac hieu (0,3,0) la du. */
.tinh_nang_home .icon-box.featured-box {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 22px !important;
    border: 1px solid var(--tn-vien);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(13, 42, 99, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tinh_nang_home .icon-box.featured-box:hover {
    border-color: var(--tn-vong);
    box-shadow: 0 16px 34px rgba(13, 42, 99, .12);
    transform: translateY(-3px);
}

/* O icon co `style="width: 80px"` viet thang tren the -> phai !important. */
.tinh_nang_home .icon-box.featured-box .icon-box-img {
    flex: 0 0 56px;
    width: 56px !important;
    margin: 0;
}

/* Icon la PNG tron to mau san. Vien trang mo quanh icon lap lai vong quanh
   dia logo o giua — 6 icon doc nhu 6 ve tinh cua cung mot tam. */
.tinh_nang_home .icon-box.featured-box .icon-box-img img {
    display: block;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #edf4ff;
}

/* Khoang icon-chu da co `gap`; bo padding 1em Flatsome dat cho khoi chu. */
.tinh_nang_home .icon-box.featured-box .icon-box-text {
    min-width: 0;
    padding: 0;
}

.tinh_nang_home .icon-box-text h3 {
    margin: 2px 0 6px;
    color: var(--tn-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.tinh_nang_home .icon-box-text p {
    margin: 0;
    color: var(--tn-chu);
    font-size: 15px;
    line-height: 1.65;
    text-wrap: pretty;
}

.tinh_nang_home .icon-box-text p a {
    color: var(--tn-xanh);
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, .35);
    text-underline-offset: 3px;
}

.tinh_nang_home .icon-box-text p a:hover {
    text-decoration-color: currentColor;
}

.tinh_nang_home .icon-box-text p a:focus-visible {
    outline: 2px solid var(--tn-xanh);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Đĩa logo ở giữa ------------------------------------------------------ */

/* `#image_… { width: 100% }` in kem id ngau nhien -> width phai !important. */
.tinh_nang_home .bkns_img_noi_bat {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tn-dia) !important;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 24px 60px rgba(13, 42, 99, .14), 0 2px 6px rgba(13, 42, 99, .06);
}

/* Hai vong quanh dia: vong lien sat, vong net dut xa hon. Deu nam ngoai dia
   nen khong de len logo. */
.tinh_nang_home .bkns_img_noi_bat::before,
.tinh_nang_home .bkns_img_noi_bat::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tinh_nang_home .bkns_img_noi_bat::before {
    inset: calc(var(--tn-vong-trong) * -1);
    border: 1px solid var(--tn-vong);
}

.tinh_nang_home .bkns_img_noi_bat::after {
    inset: calc(var(--tn-vong-ngoai) * -1);
    border: 1.5px dashed var(--tn-vong);
}

.tinh_nang_home .bkns_img_noi_bat .img-inner {
    width: 74%;
    height: auto;
    padding: 0;
    background: none;
    overflow: visible;
}

.tinh_nang_home .bkns_img_noi_bat .img-inner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vong net dut quay rat cham — chuyen dong nen duy nhat cua khoi. */
@media (prefers-reduced-motion: no-preference) {
    .tinh_nang_home .bkns_img_noi_bat::after {
        animation: tn-vong-quay 80s linear infinite;
    }
}

@keyframes tn-vong-quay {
    to {
        transform: rotate(360deg);
    }
}

/* --- Thu nhỏ -------------------------------------------------------------- */

/* Duoi 1100px cot giua khong du cho dia + 2 vong: logo len tren, 2 cot tinh
   nang xep canh nhau ben duoi, van subgrid de the hai ben thang hang. */

@media (max-width: 1099px) {
    .tinh_nang_home {
        --tn-dia: 200px;
        --tn-vong-trong: 18px;
        --tn-vong-ngoai: 36px;
        --tn-sang: 50% 24%;
    }

    .tinh_nang_home > .section-content > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto repeat(3, auto);
        gap: 16px 24px;
    }

    /* margin chua cho vong ngoai (36px) tran ra tren/duoi dia. */
    .tinh_nang_home .tinh_nang_icon_box_l + .col {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 24px 0 56px;
    }

    .tinh_nang_home .tinh_nang_icon_box_l,
    .tinh_nang_home .tinh_nang_icon_box_r {
        grid-row: 3 / span 3;
    }

    .tinh_nang_home .tinh_nang_icon_box_r {
        grid-column: 2;
    }
}

/* Mot cot: het doi xung qua logo -> ca 6 the icon trai, chu can trai. */
@media (max-width: 699px) {
    .section.tinh_nang_home {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .tinh_nang_home {
        --tn-dia: 168px;
        --tn-vong-trong: 14px;
        --tn-vong-ngoai: 28px;
        --tn-sang: 50% 14%;
    }

    .tinh_nang_home > .section-content > .row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 14px;
    }

    .tinh_nang_home .tinh_nang_icon_box_l + .col {
        grid-column: 1;
        grid-row: 2;
        margin: 16px 0 44px;
    }

    .tinh_nang_home .tinh_nang_icon_box_l,
    .tinh_nang_home .tinh_nang_icon_box_r {
        grid-column: 1;
        grid-template-rows: none;
        row-gap: 14px;
    }

    .tinh_nang_home .tinh_nang_icon_box_l {
        grid-row: 3;
    }

    .tinh_nang_home .tinh_nang_icon_box_r {
        grid-row: 4;
    }

    /* `.icon-box-right .icon-box-text { order: -1 }` cua Flatsome dua chu len
       truoc icon; tra ve thu tu DOM la icon truoc. */
    .tinh_nang_home .icon-box.featured-box .icon-box-text {
        order: 0;
        text-align: left;
    }

    .tinh_nang_home .icon-box.featured-box {
        gap: 14px;
        padding: 18px !important;
    }

    .tinh_nang_home .icon-box.featured-box .icon-box-img {
        flex-basis: 48px;
        width: 48px !important;
    }

    .tinh_nang_home .icon-box-text h3 {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tinh_nang_home .icon-box.featured-box {
        transition: none;
    }

    .tinh_nang_home .icon-box.featured-box:hover {
        transform: none;
    }
}

/* ==========================================================================
   BẢNG ĐIỀU KHIỂN — CONTROL PANEL (tab dọc Flatsome, mỗi tab một ảnh chụp)
   Khối dựng thẳng trong UX Builder, markup chép từ trang Cloud AMD:
     section.bkns_spec
       .col.tab_bang_dieu_kien
         .home-title (h2 + .description)
         .tabbed-content
           ul.nav.nav-pills.nav-vertical.active-on-hover   ← 8 tab
           .tab-panels > .panel (.active)                  ← ảnh chụp panel
   Rule gốc `.tab_bang_dieu_kien` nằm ở Amd_Cloud.css — trang này không nạp.
   Tab chuyển ngay khi rê chuột (active-on-hover) nên khung ảnh giữ CỐ ĐỊNH
   tỉ lệ: 8 ảnh cao thấp khác hẳn nhau (1280x286 tới 917x872), để tự co thì
   rê chuột dọc danh sách tab là cả phần trang bên dưới nhảy lên nhảy xuống.
   Mọi rule nav viết từ 3 class trở lên: Flatsome dùng (0,1,2)–(0,2,2) và trên
   live flatsome.css nạp SAU file này, bằng điểm là thua.
   ========================================================================== */

.bkns_spec {
    --cp-xanh: #1a73e8;
    --cp-navy: #0d2a63;
    --cp-chu-phu: rgba(255, 255, 255, .82);
    --cp-khung: #f3f7fc;
    --cp-khung-vien: #e2e9f3;
}

/* UX Builder in `<style>#section_… { padding: 30px }` theo id ngau nhien. */
.section.bkns_spec {
    padding-top: 72px !important;
    padding-bottom: 80px !important;
}

/* Nen #00a1ff chon trong UX Builder qua choi, chu do/trang tren do deu kem
   tuong phan. Ve de len bang .section-bg (lop phu kin section) nen khong can
   dung toi mau inline cua section. */
.bkns_spec > .section-bg {
    background:
            radial-gradient(60% 70% at 88% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
            linear-gradient(135deg, #0b3a9e 0%, #1560c9 55%, var(--cp-xanh) 100%);
}

/* --- Tiêu đề -------------------------------------------------------------- */

.bkns_spec .home-title {
    margin-bottom: 44px;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file. */
.bkns_spec .home-title h2 {
    color: #fff !important;
    text-wrap: balance;
}

/* `.home-title > .description` o dau file ep 22px mau den. */
.bkns_spec .home-title > .description {
    margin: 10px auto 0;
    color: var(--cp-chu-phu);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

/* --- Bố cục: cột tab | cửa sổ ảnh -------------------------------------------- */

.bkns_spec .tabbed-content {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* --- Danh sách tab -------------------------------------------------------- */

/* Flatsome: `.tabbed-content .nav-vertical { width: 25% }`. */
.bkns_spec .tabbed-content .nav-vertical {
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 0;
}

/* `.nav-vertical>li+li { border-top }` la may vach trang giua cac tab. */
.bkns_spec .tabbed-content .nav-vertical > li {
    width: 100%;
    margin: 0;
    border: 0;
}

/* Flatsome viet hoa (nav-uppercase) — bo di: "noVNC" viet hoa thanh "NOVNC". */
.bkns_spec .tabbed-content .nav-vertical > li > a {
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: var(--cp-chu-phu);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bkns_spec .tabbed-content .nav-vertical > li > a:hover {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.bkns_spec .tabbed-content .nav-vertical > li > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tab dang chon: vien trang dac + mui ten chi sang cua so ben phai.
   Flatsome to nen `--fs-color-primary` cho `.nav-pills>li.active>a` (0,2,2). */
.bkns_spec .tabbed-content .nav-vertical > li.active > a {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 10px 24px rgba(4, 22, 70, .28);
    color: var(--cp-navy);
}

.bkns_spec .tabbed-content .nav-vertical > li > a::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity .2s ease;
}

.bkns_spec .tabbed-content .nav-vertical > li.active > a::after {
    color: var(--cp-xanh);
    opacity: 1;
}

/* --- Cửa sổ ảnh ----------------------------------------------------------- */

/* Flatsome: `.nav-vertical+.tab-panels { border-left; padding: 0 30px 30px }`
   — vach doc trang canh anh la cai border-left nay. */
.bkns_spec .tabbed-content .nav-vertical + .tab-panels {
    position: relative;
    padding: 46px 16px 16px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(3, 17, 56, .38);
}

/* Thanh tieu de cua so: anh chup la giao dien panel, dong khung nhu mot ung
   dung dang mo thi doc ngay la "day la man hinh that". */
.bkns_spec .tabbed-content .nav-vertical + .tab-panels::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    border-bottom: 1px solid var(--cp-khung-vien);
    border-radius: 16px 16px 0 0;
    background:
            radial-gradient(circle at 20px 50%, #c5d3e6 5px, transparent 5.5px),
            radial-gradient(circle at 38px 50%, #c5d3e6 5px, transparent 5.5px),
            radial-gradient(circle at 56px 50%, #c5d3e6 5px, transparent 5.5px),
            var(--cp-khung);
}

/* Khung co dinh theo ti le anh tab dau (1043x766). Flatsome ep
   `.tab-panels .panel.active { display:block !important }` -> (0,4,0) !important.
   Panel "Hieu nang" co HAI anh: flex cot chia doi chieu cao cho ca hai. */
.bkns_spec .tabbed-content .tab-panels .panel.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 1043 / 766;
}

.bkns_spec .tabbed-content .tab-panels .panel.active > .img {
    flex: 1 1 0;
    min-height: 0;
}

.bkns_spec .tabbed-content .tab-panels .panel .img-inner {
    height: 100%;
}

/* contain chu khong cover: anh chup giao dien ma cat mat mep la mat chu.
   Bam mep TREN nhu cua so dang mo mot trang — anh det (Firewall 1280x286)
   can giua thi treo lo lung giua khoang trang. */
.bkns_spec .tabbed-content .tab-panels .panel .img-inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

/* Flatsome `.col { padding-bottom: 30px }` cong don vao padding section ->
   duoi cua so day hon han tren tieu de. */
.bkns_spec .tab_bang_dieu_kien {
    padding-bottom: 0;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

/* Duoi 850px khong con cho cho cot tab ben trai: tab thanh mot hang chip cuon
   ngang tren cua so, keo tran sat hai mep man hinh. */
@media (max-width: 849px) {
    .bkns_spec .tabbed-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .bkns_spec .tabbed-content .nav-vertical {
        flex-flow: row nowrap;
        gap: 8px;
        margin: 0 -15px;
        padding: 0 15px 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 15px;
        scrollbar-width: none;
    }

    .bkns_spec .tabbed-content .nav-vertical::-webkit-scrollbar {
        display: none;
    }

    .bkns_spec .tabbed-content .nav-vertical > li {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
    }

    .bkns_spec .tabbed-content .nav-vertical > li > a {
        padding: 9px 15px;
        border-radius: 999px;
        font-size: 14px;
        white-space: nowrap;
    }

    .bkns_spec .tabbed-content .nav-vertical > li > a::after {
        content: none;
    }

    .bkns_spec .tabbed-content .nav-vertical + .tab-panels {
        padding: 34px 10px 10px;
        border-radius: 12px;
    }

    .bkns_spec .tabbed-content .nav-vertical + .tab-panels::before {
        height: 24px;
        border-radius: 12px 12px 0 0;
        background:
                radial-gradient(circle at 14px 50%, #c5d3e6 3.5px, transparent 4px),
                radial-gradient(circle at 26px 50%, #c5d3e6 3.5px, transparent 4px),
                radial-gradient(circle at 38px 50%, #c5d3e6 3.5px, transparent 4px),
                var(--cp-khung);
    }
}

@media (max-width: 699px) {
    .section.bkns_spec {
        padding-top: 48px !important;
        padding-bottom: 56px !important;
    }

    .bkns_spec .home-title {
        margin-bottom: 28px;
    }

    /* responsive.css cho h2 22px nhung line-height 40px — 3 dong thua ho. */

    .bkns_spec .home-title h2 {
        line-height: 1.35;
    }

    .bkns_spec .home-title > .description {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bkns_spec .tabbed-content .nav-vertical > li > a,
    .bkns_spec .tabbed-content .nav-vertical > li > a::after {
        transition: none;
    }
}

/* ==========================================================================
   THANH "BKNS LUÔN TỰ TIN" + 3 THẺ LÝ DO (Multihoming / HA / Ceph)
   Hai section dựng trong UX Builder, KHÔNG có class riêng (chỉ id ngẫu
   nhiên) nên bám class của row:
     .row.ao_hoa_toan_phan   ← .hang_chuc + 3 icon-box (Ảo hóa, Sao lưu, Tăng tốc)
     .row.chi_phi_hop_ly_s   ← 3 .col.ly_do_bkns_k_tex > .box (icon + h4 + p)
   Khối "css ly do chon bkns" phía trên (tô tím thẻ 1 và 3, chữ vàng
   !important) giữ nguyên, đè bằng chuỗi 5 class (0,5,x) ở dưới — rule cũ
   dùng tới (0,4,2), bằng điểm thì phụ thuộc thứ tự viết.
   ========================================================================== */

.ao_hoa_toan_phan,
.chi_phi_hop_ly_s {
    --ld-xanh: #1a73e8;
    --ld-xanh-dam: #1560c9;
    --ld-navy: #0d2a63;
    --ld-chu: #4a5a6a;
    --ld-vien: #e5e9ef;
    --ld-nen-nhat: #f0f6ff;
}

/* --- Thanh "BKNS luôn tự tin" --------------------------------------------- */

/* responsive.css ep `.row { max-width: 1230px !important }`; thanh nay co
   vien nen phai rong DUNG 1200 nhu mep 3 the ben duoi, khong thi lech 15px
   moi ben. */
.row.ao_hoa_toan_phan {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    width: calc(100% - 30px);
    max-width: 1200px !important;
    margin-inline: auto;
    padding: 26px 32px;
    border: 1px solid var(--ld-vien);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(13, 42, 99, .08);
}

.row.ao_hoa_toan_phan > .col {
    width: auto;
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

/* Vach doc ngan 3 tinh nang voi nhau va voi cau khang dinh. */
.row.ao_hoa_toan_phan > .col + .col {
    border-left: 1px solid var(--ld-vien);
}

/* Dong 2 "Chuyen nghiep – Uy tin – Chat luong" moi la thong diep -> chu lon;
   dong <strong> dau chi la cau dan. <br> bo di: <strong> da xuong dong bang
   display:block, de <br> thi ra them mot dong trong. */
.ao_hoa_toan_phan .hang_chuc {
    margin: 0;
    padding-right: 28px;
    color: var(--ld-navy);
    font-size: clamp(20px, 1.9vw, 25px);
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
}

.ao_hoa_toan_phan .hang_chuc strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ld-chu);
    font-size: 15px;
    font-weight: 600;
}

.ao_hoa_toan_phan .hang_chuc br {
    display: none;
}

/* Flatsome: `.icon-box { padding-left/right: 3% !important }`. */
.row.ao_hoa_toan_phan .icon-box.featured-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 12px !important;
}

/* O icon co `style="width: 60px"` inline; Flatsome them margin-bottom 1em. */
.row.ao_hoa_toan_phan .icon-box.featured-box .icon-box-img {
    width: 52px !important;
    margin: 0;
}

.row.ao_hoa_toan_phan .icon-box.featured-box .icon-box-img img {
    display: block;
    padding: 0;
}

.row.ao_hoa_toan_phan .icon-box.featured-box .icon-box-text p {
    margin: 0;
    color: var(--ld-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* --- 3 thẻ lý do ---------------------------------------------------------- */

/* Tien to chung (0,5,0) cho moi rule the — thang (0,4,x) cua khoi cu. */
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner {
    height: 100%;
    padding: 28px 26px;
    border: 1px solid var(--ld-vien);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(13, 42, 99, .06);
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner:hover {
    border-color: #cfe0ff;
    box-shadow: 0 18px 38px rgba(13, 42, 99, .12);
    transform: translateY(-4px);
}

/* Icon goc la net ve mau vang (the 1, 3) va xanh (the 2) tren nen trong suot:
   ep het ve trang bang filter roi dat vao o gradient xanh — ba the cung mot
   bo mau. `width: 23%` inline tren .box-image -> !important. */
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-image {
    display: grid;
    place-items: center;
    width: 56px !important;
    height: 56px;
    margin: 0 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3a8bff, var(--ld-xanh-dam));
    box-shadow: 0 10px 22px rgba(26, 115, 232, .28);
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-image > div {
    line-height: 0;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-image img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-text {
    padding: 0;
    font-size: 15px;
    text-align: left;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner h4 {
    margin: 0 0 12px;
    color: var(--ld-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-wrap: balance;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner h4 strong {
    font-weight: inherit;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p {
    margin: 0 0 10px;
    color: var(--ld-chu);
    font-size: 15px;
    line-height: 1.65;
}

/* Cac dong "– ..." o giua (khong phai cau dau, khong phai dong ket): gom
   thanh mot nhom bang vach trai lien mach, dau "–" trong chu lam dau dong. */
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p:not(:first-of-type):not(:last-of-type) {
    margin: 0;
    padding: 3px 0 3px 14px;
    border-left: 2px solid #d6e4f7;
}

/* Dong ket "⟶ ..." thanh o nhan nen xanh nhat. The 1 chi co MOT <p> (vua
   dau vua cuoi) -> :not(:first-of-type) de khoi boc ca doan van. */
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p:last-of-type:not(:first-of-type) {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ld-nen-nhat);
    color: var(--ld-navy);
    font-size: 14.5px;
    font-weight: 600;
}

/* Khoi cu: `p strong { color: #FFE659 !important }` (0,4,2) + `font-size: 20px;
   color: red`. Link "XEM NGAY" con to vang #ffff00 bang style inline tren ca
   <span> lan <a> — tren the trang la bien mat, nen !important o ca cum nay. */
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p strong {
    color: var(--ld-navy) !important;
    font-size: inherit;
    font-weight: 700;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p span[style] {
    color: inherit !important;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p a,
.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p a strong {
    color: var(--ld-xanh) !important;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p a {
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, .35);
    text-underline-offset: 3px;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p a:hover {
    text-decoration-color: currentColor;
}

.row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner p a:focus-visible {
    outline: 2px solid var(--ld-xanh);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

/* Duoi 850px: 3 cot 33% chi con ~190px chu moi the (768px) -> xep mot cot,
   the rong toi da 680px, icon dat ben trai cho do ton chieu cao. */
@media (max-width: 849px) {
    /* 650 = be ngang the ly do ben duoi (680 tru padding cot) — hai khoi
       thang mep nhau. */
    .row.ao_hoa_toan_phan {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 18px;
        max-width: 650px !important;
        padding: 22px 16px;
    }

    .row.ao_hoa_toan_phan > .col:first-child {
        grid-column: 1 / -1;
    }

    /* Cau khang dinh dung rieng mot hang -> icon dau tien khong can vach trai. */
    .row.ao_hoa_toan_phan > .col:nth-child(2) {
        border-left: 0;
    }

    .ao_hoa_toan_phan .hang_chuc {
        padding-right: 0;
        text-align: center;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex {
        flex-basis: 100%;
        max-width: 680px;
        margin-inline: auto;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 18px;
        align-items: start;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-image {
        margin: 0;
    }
}

@media (max-width: 549px) {
    .row.ao_hoa_toan_phan .icon-box.featured-box {
        padding: 0 6px !important;
    }

    .row.ao_hoa_toan_phan .icon-box.featured-box .icon-box-img {
        width: 44px !important;
    }

    .row.ao_hoa_toan_phan .icon-box.featured-box .icon-box-text p {
        font-size: 13.5px;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner {
        padding: 22px 20px;
    }

    /* Man dien thoai: icon tro lai nam tren tieu de, chu duoc tron be ngang. */
    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box {
        display: block;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner .box-image {
        width: 48px !important;
        height: 48px;
        margin: 0 0 14px;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner h4 {
        font-size: 17.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner {
        transition: none;
    }

    .row.chi_phi_hop_ly_s > .col.ly_do_bkns_k_tex > .col-inner:hover {
        transform: none;
    }
}

/* ==========================================================================
   BÁO CHÍ NÓI GÌ VỀ BKNS VÀ CLOUD AMD — 4 thẻ bài báo (logo + tiêu đề + trích)
   Khối UX Builder: section.dang_ky_footer > .home-title + .row > 4 .col > .box
   ⚠ `.dang_ky_footer` DÙNG CHUNG: trên trang Cloud AMD (trang này chép từ đó)
   section form "ĐĂNG KÝ CLOUD AMD" cũng mang class này. Mọi rule ở đây gốc tại
   `.section.dang_ky_footer:has(.box-image)` — chỉ khối báo chí có ảnh logo,
   khối form không có — để không rò sang form.
   Nội dung dán từ trình soạn thảo mang style inline (color #282828/#000,
   font-size 140%) trên span/a -> cụm màu/cỡ chữ phải !important.
   ========================================================================== */

.section.dang_ky_footer:has(.box-image) {
    --bc-xanh: #1a73e8;
    --bc-navy: #0d2a63;
    --bc-chu: #4a5a6a;
    --bc-vien: #e5e9ef;
    --bc-vach: #d6e4f7;
    --bc-khung: #f5f8fc;

    /* UX Builder in `#section_… { padding: 0 }` theo id ngau nhien. */
    padding-top: 56px !important;
    padding-bottom: 64px !important;
}

/* --- Tiêu đề -------------------------------------------------------------- */

/* .home-title nam thang trong .section-content, KHONG trong .row -> khong co
   le hai ben, tieu de dai cham mep man hinh dien thoai. */
.section.dang_ky_footer:has(.box-image) > .section-content > .home-title {
    margin-bottom: 36px;
    padding-inline: 16px;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file.
   line-height: responsive.css cho 22px/40px o dien thoai — 2 dong thua ho. */
.section.dang_ky_footer:has(.box-image) .home-title h2 {
    color: var(--bc-xanh) !important;
    line-height: 1.3;
    text-wrap: balance;
}

/* --- Lưới 4 thẻ ----------------------------------------------------------- */

/* `.align-middle { align-items: center !important }` tren row -> moi the cao
   mot kieu; dat align-self tung cot de 4 the cao bang nhau. */
.section.dang_ky_footer:has(.box-image) > .section-content > .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: calc(100% - 30px);
    max-width: 1200px !important;
    margin-inline: auto;
}

.section.dang_ky_footer:has(.box-image) > .section-content > .row > .col {
    width: auto;
    max-width: none;
    flex-basis: auto;
    align-self: stretch;
    padding: 0;
}

.section.dang_ky_footer:has(.box-image) > .section-content > .row > .col > .col-inner {
    height: 100%;
}

/* --- Thẻ ------------------------------------------------------------------ */

.section.dang_ky_footer:has(.box-image) .box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--bc-vien);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(13, 42, 99, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.section.dang_ky_footer:has(.box-image) .box:hover {
    border-color: #cfe0ff;
    box-shadow: 0 18px 38px rgba(13, 42, 99, .12);
    transform: translateY(-4px);
}

/* Dai "manh bao" chua logo: cao co dinh de 4 logo nam cung mot duong ngang
   du anh goc moi cai mot co (UX Builder dat width inline 50% / 100% / 35% /
   55% -> !important). */
.section.dang_ky_footer:has(.box-image) .box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 92px;
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--bc-vien);
    background: var(--bc-khung);
}

.section.dang_ky_footer:has(.box-image) .box-image a,
.section.dang_ky_footer:has(.box-image) .box-image a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Logo VNNIC (avif) va 24h (jpg) co nen TRANG DAC: multiply cho nen trang hoa
   vao mau dai logo, khong lo ra mot o chu nhat trang.
   Tran 190px: chu VnExpress det 5,4:1, chi chan chieu cao thi o luoi 2 cot no
   phinh toi 279px trong khi 3 logo con lai ~100-160px. */
.section.dang_ky_footer:has(.box-image) .box-image img {
    width: auto;
    max-width: min(78%, 190px);
    height: auto;
    max-height: 52px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* --- Tiêu đề bài + trích dẫn ---------------------------------------------- */

/* position: static de link keo gian ben duoi phu kin CA the (.box lam moc),
   khong chi phan chu — Flatsome dat .box-text position: relative. */
.section.dang_ky_footer:has(.box-image) .box-text {
    position: static;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
    font-size: 15px;
    text-align: left;
}

.section.dang_ky_footer:has(.box-image) .box-text-inner > p {
    margin: 0;
}

.section.dang_ky_footer:has(.box-image) .box-text-inner > p:first-child {
    color: var(--bc-navy);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    transition: color .2s ease;
}

.section.dang_ky_footer:has(.box-image) .box:hover .box-text-inner > p:first-child {
    color: var(--bc-xanh);
}

/* Style inline tren span/a: color #282828 / #000, font-size 140%. */
.section.dang_ky_footer:has(.box-image) .box-text-inner > p :is(span, a, strong, em) {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    font-style: normal;
    text-decoration: none;
}

/* Link tieu de keo gian phu kin the: bam dau cung mo bai bao (logo va doan
   trich von tro cung mot URL). */
.section.dang_ky_footer:has(.box-image) .box-text-inner > p:first-child a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Mui ten bao link mo trang bao (target=_blank). Dong content thu hai giau ky
   tu voi trinh doc man hinh; trinh duyet chua ho tro thi dung dong dau. */
.section.dang_ky_footer:has(.box-image) .box-text-inner > p:first-child a::after {
    content: "↗";
    content: "↗" / "";
    margin-left: 4px;
    color: var(--bc-xanh);
    font-weight: 600;
}

.section.dang_ky_footer:has(.box-image) .box-text-inner > p:first-child a:focus-visible {
    outline: none;
}

.section.dang_ky_footer:has(.box-image) .box:has(.box-text-inner > p:first-child a:focus-visible) {
    outline: 3px solid var(--bc-xanh);
    outline-offset: 3px;
}

/* Doan trich: vach trai nhu mot trich dan. Bo nghieng — trang chi nap Inter
   dung, khong co ban nghieng, trinh duyet nghieng gia nen chu nhoe. Cat o 4
   dong cho 4 the deu nhau. */
.section.dang_ky_footer:has(.box-image) .box-text-inner > p:last-child {
    display: -webkit-box;
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--bc-vach);
    color: var(--bc-chu);
    font-size: 14.5px;
    line-height: 1.6;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 1099px) {
    .section.dang_ky_footer:has(.box-image) > .section-content > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 549px) {
    .section.dang_ky_footer:has(.box-image) {
        padding-top: 44px !important;
        padding-bottom: 48px !important;
    }

    .section.dang_ky_footer:has(.box-image) > .section-content > .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .section.dang_ky_footer:has(.box-image) .box-image {
        height: 80px;
    }

    .section.dang_ky_footer:has(.box-image) .box-image img {
        max-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section.dang_ky_footer:has(.box-image) .box,
    .section.dang_ky_footer:has(.box-image) .box-text-inner > p:first-child {
        transition: none;
    }

    .section.dang_ky_footer:has(.box-image) .box:hover {
        transform: none;
    }
}

/* ==========================================================================
   ĐĂNG KÝ CLOUD AMD — form Mautic "Nhận tư vấn" (khối cuối trang)
   Khối UX Builder: section.dang_ky_footer
     .row > .col (tiêu đề .home-title)  +  .col.from_dang_nhap_s (form)
   - `.dang_ky_footer` dùng chung với khối "Báo chí" phía trên -> gốc ở
     `.section.dang_ky_footer:has(.mautic-form)`, loại trừ nhau với
     `:has(.box-image)` của khối báo chí.
   - Markup form + <style> "Mautic Custom CSS" nằm trong UX Block DÙNG CHUNG
     nhiều trang (bản gốc: template_assets/html/form-tu-van-vps-nvme.html) ->
     KHÔNG sửa block; đè ở đây vì file này chỉ nạp ở trang VPS NVMe.
   - <style> Mautic nằm trong body nên nạp SAU file này: rule trong form gốc ở
     id `#mauticform_wrapper_vpslandingcloudvpsamd` (1,0,0) để thắng bằng độ
     đặc hiệu; riêng `.captcha-input` Mautic dùng !important -> đè cũng !important.
   ========================================================================== */

.section.dang_ky_footer:has(.mautic-form) {
    --dk-xanh: #1a73e8;
    --dk-xanh-dam: #1560c9;
    --dk-navy: #0d2a63;
    --dk-chu: #4a5a6a;
    --dk-vien: #d6e0ec;
    --dk-nen-o: #f8fafd;

    /* UX Builder in `#section_… { padding: 0 }` theo id ngau nhien. Khoi cuoi
       truoc footer xanh -> chua khoang tho ben duoi. */
    padding-top: 24px !important;
    padding-bottom: 88px !important;
}

/* Form nay con duoc nhung o section KHAC (vd khoi "Khoi dong du an cua ban voi
   Cloud VM…" co anh minh hoa ben phai). Ngoai .dang_ky_footer thi moi
   `var(--dk-*)` rong: nut gui mat gradient -> chu trang tren nen trang, o nhap
   mat vien. Khai lai bo token ngay tren wrapper de form tu du dung o dau cung. */
#mauticform_wrapper_vpslandingcloudvpsamd {
    --dk-xanh: #1a73e8;
    --dk-xanh-dam: #1560c9;
    --dk-navy: #0d2a63;
    --dk-chu: #4a5a6a;
    --dk-vien: #d6e0ec;
    --dk-nen-o: #f8fafd;
}

/* --- Khung: panel xanh | form trắng ---------------------------------------- */

/* Hai cot ghep thanh MOT the: trai panel xanh (tieu de + mo ta), phai form —
   khoi hai tieu de "Dang ky…" / "Nhan tu van" dung chong len nhau.
   `.align-middle { align-items: center !important }` tren row -> align-self
   tung cot de hai nua cao bang nhau. */
.section.dang_ky_footer:has(.mautic-form) > .section-content > .row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    width: calc(100% - 30px);
    max-width: 1100px !important;
    margin-inline: auto;
    border: 1px solid #e5e9ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(13, 42, 99, .14);
    overflow: hidden;
}

.section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col {
    width: auto;
    max-width: none;
    flex-basis: auto;
    align-self: stretch;
    padding: 0;
}

/* --- Panel trái: tiêu đề + mô tả ------------------------------------------ */

.section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
            radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
            linear-gradient(150deg, #0b3a9e 0%, #1560c9 60%, var(--dk-xanh) 100%);
}

/* Hai vong tron o goc duoi — lap lai vong quanh dia logo cua khoi "Tinh nang
   noi bat": vong lien (border) + vong net dut (outline-offset). */
.section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -110px;
    width: 300px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    outline: 1.5px dashed rgba(255, 255, 255, .18);
    outline-offset: 34px;
    pointer-events: none;
}

.section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child > .col-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 56px 48px;
}

.section.dang_ky_footer:has(.mautic-form) .home-title {
    margin: 0;
    text-align: left;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file. */
.section.dang_ky_footer:has(.mautic-form) .home-title h2 {
    color: #fff !important;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.2;
    text-align: left;
    text-wrap: balance;
}

/* `.home-title > .description` o dau file ep 22px mau den can giua (12px o
   dien thoai). */
.section.dang_ky_footer:has(.mautic-form) .home-title > .description {
    width: auto;
    max-width: 420px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

/* --- Form ----------------------------------------------------------------- */

.section.dang_ky_footer:has(.mautic-form) .from_dang_nhap_s > .col-inner {
    padding: 44px 48px;
}

/* Cot form co data-animate="fadeInLeft" (Flatsome dich -70px roi truot vao).
   Gio no la nua phai cua mot the ghep -> truot la noi dung form luot de qua
   panel xanh. Giu hieu ung mo dan (opacity), bo phan truot. */
.section.dang_ky_footer:has(.mautic-form) .from_dang_nhap_s[data-animate] {
    transform: none !important;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-title {
    margin-bottom: 22px;
    text-align: left;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-title h3 {
    margin: 0 0 6px;
    color: var(--dk-navy);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

/* Trang chi nap Inter dung, khong co ban nghieng -> <i> nghieng gia, chu nhoe. */
#mauticform_wrapper_vpslandingcloudvpsamd .mautic-title i {
    color: var(--dk-chu);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-row {
    gap: 8px;
    margin-bottom: 16px;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-row:last-child {
    margin-bottom: 0;
}

#mauticform_wrapper_vpslandingcloudvpsamd label {
    margin: 0;
    color: var(--dk-navy);
    font-size: 14.5px;
    font-weight: 600;
}

/* O nhap: Flatsome (goc vuong, bong trong) + Mautic (vien xam nhat) chong nhau
   -> khoa lai o day. 16px: duoi muc nay iPhone tu phong to trang khi bam vao o.
   Mautic dat `outline: none` -> vong focus ve bang box-shadow. */
#mauticform_wrapper_vpslandingcloudvpsamd input:is([type="text"], [type="tel"]) {
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--dk-vien);
    border-radius: 12px;
    background: var(--dk-nen-o);
    box-shadow: none;
    color: var(--dk-navy);
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#mauticform_wrapper_vpslandingcloudvpsamd input:is([type="text"], [type="tel"])::placeholder {
    color: #9aa7b4;
}

#mauticform_wrapper_vpslandingcloudvpsamd input:is([type="text"], [type="tel"]):hover {
    border-color: #b9d3f5;
}

#mauticform_wrapper_vpslandingcloudvpsamd input:is([type="text"], [type="tel"]):focus {
    border-color: var(--dk-xanh);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, .15);
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-err {
    min-height: 0;
    font-size: 13.5px;
}

/* --- Xác thực (khối do JS toàn site chèn vào) ----------------------------- */

#mauticform_wrapper_vpslandingcloudvpsamd .captcha-label {
    gap: 8px;
    margin: 0 0 8px;
    color: var(--dk-navy);
    font-size: 14.5px;
    font-weight: 600;
}

/* SVG khien khong co width/height -> tu dat kich thuoc. */
#mauticform_wrapper_vpslandingcloudvpsamd .captcha-icon {
    display: inline-flex;
    font-size: 0;
}

#mauticform_wrapper_vpslandingcloudvpsamd .captcha-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--dk-xanh);
}

/* Mautic to cau hoi vang #ffd700 tren nen trang — tuong phan ~1,4:1, gan nhu
   khong doc duoc. Doi thanh chip xanh. */
#mauticform_wrapper_vpslandingcloudvpsamd .captcha-question {
    padding: 3px 10px;
    border-radius: 8px;
    background: #eaf2ff;
    color: var(--dk-xanh);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

#mauticform_wrapper_vpslandingcloudvpsamd .captcha-input-row {
    gap: 10px;
}

/* Mautic: `.captcha-input { padding / font-size / border-radius ... !important }`. */
#mauticform_wrapper_vpslandingcloudvpsamd .captcha-input {
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    letter-spacing: .08em;
}

/* Mautic ve nut doi cau hoi vien/nen trang mo (danh cho nen toi) -> tren form
   trang no tang hinh, chi con cai ky tu ⟳. */
#mauticform_wrapper_vpslandingcloudvpsamd .captcha-refresh {
    width: 48px;
    height: 48px;
    min-height: 0;
    flex: 0 0 48px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dk-vien);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: var(--dk-navy);
    font-size: 20px;
    line-height: 1;
}

#mauticform_wrapper_vpslandingcloudvpsamd .captcha-refresh:hover {
    border-color: #b9d3f5;
    background: #eaf2ff;
}

#mauticform_wrapper_vpslandingcloudvpsamd .captcha-refresh:focus-visible {
    outline: 3px solid var(--dk-xanh);
    outline-offset: 2px;
}

/* --- Nút gửi + thông báo -------------------------------------------------- */

/* Flatsome style moi <button> (margin-right 1em, line-height 2.4em…). */
#mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 6px 0 0;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(97deg, #3a8bff 0%, var(--dk-xanh-dam) 100%);
    box-shadow: 0 12px 26px rgba(26, 115, 232, .3);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 52px;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn:hover {
    box-shadow: 0 16px 32px rgba(26, 115, 232, .38);
    transform: translateY(-2px);
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn:focus-visible {
    outline: 3px solid var(--dk-navy);
    outline-offset: 3px;
}

#mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn:disabled {
    box-shadow: none;
    cursor: progress;
    opacity: .6;
    transform: none;
}

/* JS bat .form-notice (display inline) sau khi gui. Mau Mautic (#e46962,
   xanh la neon trong suot) chu toi doc kho — doi sang cap nen nhat / chu dam. */
#mauticform_wrapper_vpslandingcloudvpsamd .form-notice {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
}

#mauticform_wrapper_vpslandingcloudvpsamd .form-notice.is-error {
    background: #fdecea;
    color: #b42318;
}

#mauticform_wrapper_vpslandingcloudvpsamd .form-notice.is-success {
    background: #e7f7ee;
    color: #146c2e;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

/* Duoi 850px: panel xanh chong len tren form, the hep lai cho o nhap khong
   keo dai qua muc. */
@media (max-width: 849px) {
    .section.dang_ky_footer:has(.mautic-form) > .section-content > .row {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px !important;
        border-radius: 20px;
    }

    .section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child > .col-inner {
        padding: 36px 28px;
    }

    .section.dang_ky_footer:has(.mautic-form) .from_dang_nhap_s > .col-inner {
        padding: 32px 28px;
    }

    .section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child::after {
        right: -80px;
        bottom: -90px;
        width: 200px;
        outline-offset: 24px;
    }
}

@media (max-width: 549px) {
    .section.dang_ky_footer:has(.mautic-form) {
        padding-bottom: 56px !important;
    }

    .section.dang_ky_footer:has(.mautic-form) > .section-content > .row > .col:first-child > .col-inner {
        padding: 30px 22px;
    }

    .section.dang_ky_footer:has(.mautic-form) .from_dang_nhap_s > .col-inner {
        padding: 26px 20px;
    }

    .section.dang_ky_footer:has(.mautic-form) .home-title > .description {
        font-size: 15.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn,
    #mauticform_wrapper_vpslandingcloudvpsamd input:is([type="text"], [type="tel"]) {
        transition: none;
    }

    #mauticform_wrapper_vpslandingcloudvpsamd .mautic-btn:hover,
    #mauticform_wrapper_vpslandingcloudvpsamd .captcha-refresh:hover span {
        transform: none;
    }
}

/* ==========================================================================
   CLOUD VPS LÀ GÌ? — đoạn định nghĩa + nút bên trái, video YouTube bên phải
   Khối UX Builder: section.cloud_vps > .row.row-collapse > .col
     .home-title + .row.video_home_s (chữ 7 cột | video 5 cột)
   ⚠ Row trong mang class `.video_home_s` — CÙNG class với khối "Giới thiệu
   Cloud AMD EPYC": rule `.video_home_s .col-inner a.button.primary` (nút xanh)
   của khối đó ăn sang đây, cố ý giữ. Mọi rule mới gốc tại `.section.cloud_vps`.
   ========================================================================== */

.section.cloud_vps {
    --cv-xanh: #1a73e8;
    --cv-chu: #3b4a59;

    /* UX Builder in `#section_… { padding: 30px }` theo id ngau nhien. */
    padding-top: 64px !important;
    padding-bottom: 72px !important;
}

.section.cloud_vps .home-title {
    margin-bottom: 40px;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file. */
.section.cloud_vps .home-title h2 {
    color: var(--cv-xanh) !important;
    text-wrap: balance;
}

/* Row trong nam trong cot cua row-collapse (padding 0) ma van an le am -15px
   cua Flatsome (`.row .row:not(.row-collapse)`) -> tran 15px moi ben: tren may
   tinh rong hon cac khoi khac 30px, tren dien thoai chu dinh sat mep man hinh. */
.section.cloud_vps .row.video_home_s {
    width: auto;
    margin-inline: 0;
}

/* Doan dinh nghia: vach xanh ben trai — cung kieu vach trai o the ly do va
   doan trich bao chi phia duoi. */
.section.cloud_vps .video_home_s > .col:first-child p {
    max-width: 60ch;
    margin: 0 0 24px;
    padding-left: 20px;
    border-left: 3px solid var(--cv-xanh);
    color: var(--cv-chu);
    font-size: 17px;
    line-height: 1.75;
}

/* Gap-element 50px dat san tren video de "can" voi chu — row da align-middle,
   no chi con day video (va mang nen xanh sau lung) lech xuong. Flatsome in
   `style="display:block"` thang tren the -> phai !important. */
.section.cloud_vps .video_home_s .gap-element {
    display: none !important;
}

/* Iframe khai san 560x315: bi bop theo be ngang cot nhung van cao 315 -> sai
   ti le. Ep 16:9, bo goc + do bong nhu khung video khoi gioi thieu Cloud AMD;
   mang xanh nhat lech ra sau lung video cho co chieu sau. */
.section.cloud_vps .video_home_s > .col:last-child .col-inner {
    position: relative;
}

.section.cloud_vps .video_home_s > .col:last-child .col-inner::before {
    content: "";
    position: absolute;
    inset: 18px -12px -12px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #cfe2ff, #eef5ff);
}

.section.cloud_vps .video_home_s p:has(> iframe) {
    position: relative;
    margin: 0;
}

.section.cloud_vps .video_home_s iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(13, 42, 99, .2);
}

/* Duoi 850px: chia 7|5 cot chi con 418|290px o 768 — video be ti. Xep chong,
   video rong het khung. */
@media (max-width: 849px) {
    .section.cloud_vps .video_home_s > .col {
        flex-basis: 100%;
        max-width: 100%;
    }

    .section.cloud_vps .video_home_s > .col:first-child p {
        max-width: none;
        font-size: 16px;
    }
}

@media (max-width: 549px) {
    .section.cloud_vps {
        padding-top: 44px !important;
        padding-bottom: 52px !important;
    }

    .section.cloud_vps .home-title {
        margin-bottom: 28px;
    }

    .section.cloud_vps .video_home_s > .col:last-child .col-inner::before {
        inset: 12px -8px -8px 12px;
    }
}

/* ==========================================================================
   NHỮNG ƯU ĐIỂM VƯỢT TRỘI CỦA CLOUD VM — 4 thẻ (ảnh minh hoạ + tiêu đề + chữ)
   Khối UX Builder: section.bang_gia_my_chu_ss > .row
     .col (tiêu đề + neo #lydosudung) + 4 .col.phu_hop_bkns_hosting > .icon-box
   - `.bang_gia_my_chu_ss` dùng chung với khối "Giới thiệu + Ưu điểm Cloud AMD"
     -> bám row có con `.col.phu_hop_bkns_hosting`.
   - Khối cũ `.phu_hop_bkns_hosting .col-inner` (viền xanh 2px, cao cứng 250px,
     điện thoại `height: auto !important` + `img { width: 70% }`) giữ nguyên,
     đè bằng tiền tố `.row > .col.phu_hop_bkns_hosting > .col-inner` (0,4,0).
   - Mỗi `.text` có `#text-… { line-height: 1.2 }` theo id -> đặt line-height
     thẳng lên h3/p (khai báo ở con thắng giá trị kế thừa, khỏi !important).
   ========================================================================== */

.row:has(> .col.phu_hop_bkns_hosting) {
    --vm-xanh: #1a73e8;
    --vm-navy: #0d2a63;
    --vm-chu: #4a5a6a;
    --vm-vien: #e5e9ef;
    --vm-o: #f0f6ff;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file. */
.row:has(> .col.phu_hop_bkns_hosting) .home-title h2 {
    color: var(--vm-xanh) !important;
    text-wrap: balance;
}

/* Cot tieu de: bot padding-bottom 30px cua Flatsome cho the gan tieu de hon. */
.row:has(> .col.phu_hop_bkns_hosting) > .col:first-child {
    padding-bottom: 8px;
}

/* --- Thẻ ------------------------------------------------------------------ */

.row > .col.phu_hop_bkns_hosting > .col-inner {
    display: block;
    height: 100% !important;
    padding: 26px 28px;
    border: 1px solid var(--vm-vien);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(13, 42, 99, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.row > .col.phu_hop_bkns_hosting > .col-inner:hover {
    border-color: #cfe0ff;
    box-shadow: 0 18px 38px rgba(13, 42, 99, .12);
    transform: translateY(-4px);
}

/* Flatsome: `.icon-box { padding-left/right: 3% !important }`, `flex-flow: row wrap`. */
.row > .col.phu_hop_bkns_hosting .icon-box.featured-box {
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    padding: 0 !important;
}

/* O anh: `style="width: 600px"` inline + Flatsome `max-width: 200px`. 4 anh
   minh hoa moi cai mot phong cach (3D, phang, net) -> dat chung vao o nen xanh
   nhat cung co cho dong bo; multiply de anh nao co nen trang cung hoa vao o. */
.row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-img {
    flex: 0 0 128px;
    width: 128px !important;
    max-width: none;
    aspect-ratio: 1;
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: var(--vm-o);
}

.row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-img :is(.icon, .icon-inner) {
    width: 100%;
    height: 100%;
}

.row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-img img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-text {
    min-width: 0;
    padding: 0;
}

.row > .col.phu_hop_bkns_hosting .icon-box-text h3 {
    margin: 0 0 8px;
    color: var(--vm-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.row > .col.phu_hop_bkns_hosting .icon-box-text p {
    margin: 0;
    color: var(--vm-chu);
    font-size: 15px;
    line-height: 1.65;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 1099px) {
    .row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-img {
        flex-basis: 104px;
        width: 104px !important;
        padding: 12px;
    }
}

/* Duoi 850px: 2 cot 50% (ca `small-6` tren dien thoai) chi con ~130px chu ->
   moi the mot hang, rong toi da 680px. */
@media (max-width: 849px) {
    .row > .col.phu_hop_bkns_hosting {
        flex-basis: 100%;
        max-width: 680px;
        margin-inline: auto;
    }
}

@media (max-width: 549px) {
    .row > .col.phu_hop_bkns_hosting {
        padding-bottom: 16px;
    }

    .row > .col.phu_hop_bkns_hosting > .col-inner {
        padding: 20px;
    }

    .row > .col.phu_hop_bkns_hosting .icon-box.featured-box {
        align-items: flex-start;
        gap: 16px;
    }

    .row > .col.phu_hop_bkns_hosting .icon-box.featured-box .icon-box-img {
        flex-basis: 76px;
        width: 76px !important;
        padding: 8px;
        border-radius: 14px;
    }

    .row > .col.phu_hop_bkns_hosting .icon-box-text h3 {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .row > .col.phu_hop_bkns_hosting > .col-inner {
        transition: none;
    }

    .row > .col.phu_hop_bkns_hosting > .col-inner:hover {
        transform: none;
    }

}

/* ==========================================================================
   ĐÁNH GIÁ CỦA KHÁCH HÀNG — carousel Owl `article.bk-review-home`
   Khối UX Builder: section.dang_ky_footer (class dùng chung — lần thứ 3) >
     .home-title + article.bk-review-home > .owl-carousel.slide-review-home
   Owl khởi tạo ở assets/js/main.js: ≥1000px 3 thẻ, dưới đó 1 thẻ; loop;
   nav:false (nút vẫn bấm được, khối "review" cũ ở trên ép hiện).
   Gốc section: `.section:has(article.bk-review-home)`; thẻ: `.section
   article.bk-review-home …` (0,4,x) — khối cũ có `border / margin /
   box-shadow … !important` ở (0,2,1) nên cụm đó phải !important.
   ========================================================================== */

.section:has(article.bk-review-home) {
    --rv-xanh: #1a73e8;
    --rv-navy: #0d2a63;
    --rv-chu: #3b4a59;
    --rv-phu: #6b7a89;
    --rv-vien: #e5e9ef;

    /* UX Builder in `#section_… { padding: 30px }` theo id ngau nhien. */
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.section:has(article.bk-review-home) > .section-bg {
    background: linear-gradient(180deg, #f5f9ff 0%, #fff 100%);
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file. */
.section:has(article.bk-review-home) .home-title h2 {
    color: var(--rv-xanh) !important;
    text-wrap: balance;
}

/* main.css: `article.bk-review-home { width: 1000px }` — hep hon moi khoi
   1200px khac cua trang. Owl tu chia lai be ngang the theo khung luc khoi tao. */
.section article.bk-review-home {
    width: 100%;
    max-width: 1100px;
}

/* .owl-stage-outer co overflow: hidden -> chua cho bong the khoi bi cat. */
.section article.bk-review-home .owl-stage-outer {
    padding: 6px 0 22px;
}

/* 3 the cao bang nhau: stage/item thanh flex (Owl van dat width + transform
   inline, float bi flex bo qua). ::after clearfix cua Owl thanh item thua. */
.section article.bk-review-home .owl-stage {
    display: flex;
}

.section article.bk-review-home .owl-stage::after {
    display: none;
}

.section article.bk-review-home .owl-item,
.section article.bk-review-home .slide-item {
    display: flex;
}

.section article.bk-review-home .slide-item {
    width: 100%;
}

/* --- Thẻ ------------------------------------------------------------------ */

/* Bong gon, nam duoi the (spread am): .owl-stage-outer overflow hidden cat
   moi thu tran qua mep no — bong rong 30px cu bi cat thanh mot dai xam mep
   thang duoi 3 the. */
.section article.bk-review-home .owl-item .review-home-item {
    flex: 1 1 auto;
    margin: 10px !important;
    padding: 26px 26px 24px;
    border: 1px solid var(--rv-vien) !important;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px -10px rgba(13, 42, 99, .16) !important;
}

/* Row long trong the an le am -15px cua Flatsome (`.row .row`). */
.section article.bk-review-home .review-home-item .row {
    height: 100%;
    margin: 0;
}

/* Xep lai the bang grid tren .col (markup: anh, ten, noi dung): sao + loi
   nhan xet o tren, vach ngan, anh + ten o duoi — vach cua 3 the thang hang
   nho hang tren an 1fr. */
.section article.bk-review-home .review-home-item .col {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "noi noi"
        "anh ten";
    column-gap: 14px;
    row-gap: 18px;
    align-items: center;
    padding: 0 !important;
    text-align: left;
}

.section article.bk-review-home .review-home-item .review-contents {
    grid-area: noi;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef2f6;
    text-align: left;
}

/* Sao dung truoc loi nhan xet. */
.section article.bk-review-home .review-home-item .review-star {
    order: -1;
    justify-content: flex-start;
    gap: 3px;
}

.section article.bk-review-home .review-home-item .review-star img {
    width: 17px !important;
    margin: 0;
}

/* main.css `p.text_evaluate { height: 255px }` + khoi cu `height: 100px`,
   deu overflow hidden — cat chu cung. Bo chieu cao co dinh. */
.section article.bk-review-home .review-home-item p.text_evaluate {
    height: auto;
    margin: 0;
    overflow: visible;
    color: var(--rv-chu);
    font-size: 16px;
    line-height: 1.6;
}

.section article.bk-review-home .review-home-item .review-avatar {
    grid-area: anh;
    position: static;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rv-vien);
}

.section article.bk-review-home .review-home-item .review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Dau ngoac kep lon (main.css ve bang ::before o top 100px, de len chu):
   dua len goc phai tren cua the (neo theo .col cua Flatsome), xanh nhat. */
.section article.bk-review-home .review-home-item .review-avatar::before {
    top: -6px;
    right: 0;
    left: auto;
    color: #d6e4f7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    opacity: 1;
}

.section article.bk-review-home .review-home-item .review-author {
    grid-area: ten;
    width: auto;
    margin: 0;
    text-align: left;
}

/* main.css `.review-author p { font-style: oblique }` — trang chi nap Inter
   dung, khong co ban nghieng, trinh duyet nghieng gia nen chu nhoe. */
.section article.bk-review-home .review-home-item .review-author p {
    margin: 0;
    font-style: normal;
    line-height: 1.4;
}

.section article.bk-review-home .review-home-item .review-author p.name_kh {
    color: var(--rv-navy);
    font-size: 15.5px;
    font-weight: 700;
}

.section article.bk-review-home .review-home-item .review-author p.name_kh span {
    color: var(--rv-phu);
    font-weight: 500;
}

.section article.bk-review-home .review-home-item .review-author p.cty_kh {
    color: var(--rv-phu);
    font-size: 13.5px;
}

/* --- Nút chuyển ------------------------------------------------------------- */

/* Hai nut tron o HAI BEN carousel. main.css dat -45px ra NGOAI khung: man
   1000-1290px nut troi ra ngoai man hinh, dien thoai lot han ra ngoai. O day
   chua san le hai ben ngay TRONG .owl-carousel (padding-inline) cho nut dung:
   Owl do be ngang bang `$element.width()` (khong tinh padding) nen tu chia
   the/logo theo phan con lai.
   Carousel logo he dieu hanh (.slide-review-home-lienket) cung khung article
   nay nen an chung bo nut. Cham chi co 1 khi 3 the vua khung -> an. */
.section article.bk-review-home .owl-carousel {
    --rv-nut: 44px;
    padding-inline: calc(var(--rv-nut) + 14px);
}

/* Owl gan `.disabled` cho nav (main.js de nav:false) -> owl.carousel.css an. */
.section article.bk-review-home .owl-carousel .owl-nav {
    display: block !important;
    margin: 0;
}

/* `- 8px`: .owl-stage-outer co padding 6px tren / 22px duoi (cho bong the)
   nen giua khung nam lech 8px xuong duoi giua the. */
.section article.bk-review-home .owl-nav button {
    position: absolute;
    top: calc(50% - 8px);
    display: grid;
    place-items: center;
    width: var(--rv-nut) !important;
    height: var(--rv-nut) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--rv-vien) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(13, 42, 99, .1) !important;
    color: var(--rv-navy);
    transform: translateY(-50%);
    touch-action: manipulation;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.section article.bk-review-home .owl-nav button.owl-prev {
    left: 0;
}

.section article.bk-review-home .owl-nav button.owl-next {
    right: 0;
}

.section article.bk-review-home .owl-nav button:hover {
    border-color: var(--rv-xanh) !important;
    background: var(--rv-xanh) !important;
    color: #fff;
}

.section article.bk-review-home .owl-nav button:focus-visible {
    outline: 3px solid var(--rv-xanh);
    outline-offset: 2px;
}

.section article.bk-review-home .owl-carousel .owl-dots {
    display: none !important;
}

/* --- Logo hệ điều hành (.slide-review-home-lienket) ------------------------ */

/* Duoi 1000px Owl chi con 1 logo/khung: khung 640px thi logo AlmaLinux phinh
   toi ~470px, dien thoai thi logo cham vao nut. Tran 180px, can giua o. */
.section article.bk-review-home .slide-items {
    flex: 1 1 auto;
    min-width: 0;
}

.section article.bk-review-home .slide-items .review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section article.bk-review-home .slide-items .review-avatar img {
    max-width: 180px;
}

/* Duoi 1000px Owl chi hien 1 the — de khung 1100px thi mot the keo dai toi
   ~950px, loi nhan xet chay mot dong dai. Thu khung lai, Owl chia theo khung. */
@media (max-width: 999px) {
    .section article.bk-review-home {
        max-width: 640px;
    }
}

@media (max-width: 549px) {
    .section:has(article.bk-review-home) {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .section article.bk-review-home .owl-item .review-home-item {
        margin: 8px 4px !important;
        padding: 22px 20px 20px;
    }

    /* Chua du le 58px moi ben thi the chi con ~260px. Cho nut de len mep the
       (nam tren vung padding 20px cua the, khong cham chu), chi chua 22px. */
    .section article.bk-review-home .owl-carousel {
        --rv-nut: 38px;
        padding-inline: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section article.bk-review-home .owl-nav button {
        transition: none;
    }
}

/* ==========================================================================
   TẠI SAO LẠI CHỌN CLOUD VM TẠI BKNS — 5 thẻ trên dải nền xanh (3 + 2)
   Khối UX Builder (chép từ trang Cloud VPS): section.taiso_con_ct
     .row (tiêu đề + neo #tinhnang)
     .row.title_tai_sao_bkns_home_row > 3 .col.title_tai_sao_bkns_home
       + 1 .col medium-2 TRỐNG (đệm hàng 2 ra giữa) + 2 .col.title_tai_sao_bkns_home
   Gốc: `.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row)` — file có sẵn
   biến thể `.taiso_con_ct.s` (tiêu đề xanh trên nền trắng) cho khối khác.
   Khối cũ `.title_tai_sao_bkns_home .col-inner { padding / height /
   border-radius / box-shadow … !important }` (0,2,0) -> đè cũng !important
   ở tiền tố (0,4,0).
   ========================================================================== */

.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) {
    --ts-xanh: #1a73e8;
    --ts-xanh-dam: #1560c9;
    --ts-navy: #0d2a63;
    --ts-chu: #4a5a6a;

    /* UX Builder in `#section_… { padding: 30px }` theo id ngau nhien. */
    padding-top: 72px !important;
    padding-bottom: 80px !important;
}

/* Nen rgba(36,80,224,.92) chon trong UX Builder -> cung bo gradient voi khoi
   Control Panel cho cac dai xanh cua trang mot giong. */
.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) > .section-bg {
    background:
            radial-gradient(60% 70% at 12% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%),
            linear-gradient(135deg, #0b3a9e 0%, #1560c9 55%, var(--ts-xanh) 100%);
}

.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) .home-title {
    margin-bottom: 44px;
}

/* Mau trang da co o khoi cu `.taiso_con_ct .home-title h2`. line-height:
   responsive.css cho 22px/40px o dien thoai — 2 dong thua ho. */
.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) .home-title h2 {
    line-height: 1.3;
    text-wrap: balance;
}

/* `.home-title > .description` o dau file ep 22px (12px o dien thoai). */
.section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) .home-title > .description {
    max-width: 820px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, .86) !important;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
}

/* --- Lưới 3 + 2 ----------------------------------------------------------- */

/* Luoi 6 cot, moi the chiem 2 -> hang 1 ba the. Cot medium-2 trong la mieng
   dem kieu Flatsome cho hang 2 ra giua: an no, the ngay sau no bat dau tu cot
   2 thi hai the hang 2 tu dung giua. The cung hang cao bang nhau. */
.row.title_tai_sao_bkns_home_row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
    width: calc(100% - 30px);
    max-width: 1200px !important;
    margin-inline: auto;
}

.row.title_tai_sao_bkns_home_row > .col {
    grid-column: span 2;
    width: auto;
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

.row.title_tai_sao_bkns_home_row > .col:not(.title_tai_sao_bkns_home) {
    display: none;
}

.row.title_tai_sao_bkns_home_row > .col:not(.title_tai_sao_bkns_home) + .col {
    grid-column: 2 / span 2;
}

/* --- Thẻ ------------------------------------------------------------------ */

/* Khoi cu dat `cursor: pointer` cho ca the — the khong bam duoc, bo di. */
.row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home > .col-inner {
    display: block;
    height: 100% !important;
    margin: 0;
    padding: 28px 26px !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 18px 40px rgba(3, 17, 56, .22) !important;
    text-align: left;
    cursor: default;
    transition: transform .25s ease, box-shadow .25s ease;
}

.row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home > .col-inner:hover {
    box-shadow: 0 26px 52px rgba(3, 17, 56, .3) !important;
    transform: translateY(-4px);
}

/* Icon net do tren nen trong suot -> ep trang, dat trong o gradient xanh —
   cung kieu icon o 3 the ly do. `width: 30%` inline -> !important. */
.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-image {
    display: grid;
    place-items: center;
    width: 56px !important;
    height: 56px;
    margin: 0 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3a8bff, var(--ts-xanh-dam));
    box-shadow: 0 10px 22px rgba(26, 115, 232, .28);
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-image > div {
    line-height: 0;
}

/* Khoi cu `.title_tai_sao_bkns_home img { padding-top: 20px }`. */
.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-image img {
    width: 32px;
    height: 32px;
    padding: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text {
    padding: 0;
    font-size: 15px;
    text-align: left;
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text h3 {
    margin: 0 0 10px;
    color: var(--ts-navy);
    font-size: 18.5px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text p {
    margin: 0;
    color: var(--ts-chu);
    font-size: 15px;
    line-height: 1.65;
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text p a {
    color: var(--ts-xanh);
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, .35);
    text-underline-offset: 3px;
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text p a:hover {
    text-decoration-color: currentColor;
}

.row.title_tai_sao_bkns_home_row .title_tai_sao_bkns_home .box-text p a:focus-visible {
    outline: 2px solid var(--ts-xanh);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 1099px) {
    .row.title_tai_sao_bkns_home_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .row.title_tai_sao_bkns_home_row > .col,
    .row.title_tai_sao_bkns_home_row > .col:not(.title_tai_sao_bkns_home) + .col {
        grid-column: auto;
    }

    /* 5 the / 2 cot: the le cuoi dung giua thay vi lech trai. */
    .row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 9px);
    }
}

@media (max-width: 699px) {
    .section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) {
        padding-top: 48px !important;
        padding-bottom: 56px !important;
    }

    .section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) .home-title {
        margin-bottom: 28px;
    }

    .section.taiso_con_ct:has(.title_tai_sao_bkns_home_row) .home-title > .description {
        font-size: 15px;
    }

    .row.title_tai_sao_bkns_home_row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }

    .row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home > .col-inner {
        padding: 22px 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home > .col-inner {
        transition: none;
    }

    .row.title_tai_sao_bkns_home_row > .col.title_tai_sao_bkns_home > .col-inner:hover {
        transform: none;
    }
}

/* ==========================================================================
   DỊCH VỤ LIÊN QUAN — 4 thẻ link (icon tròn + tên dịch vụ)
   Khối UX Builder: section (không class) > .row > .col > .home-title
     + .row > 4 .col.dich_vu_lien_q > .box (a > img  |  .box-text > p)
   Khối cũ ở đầu file: `.dich_vu_lien_q .box-text-inner p { 20px / 600 }`,
   hover nhấc 10px + chữ #2450e0, điện thoại 11px — (0,2,1)–(0,3,1) -> đè
   bằng tiền tố `.row > .col.dich_vu_lien_q` (0,3,0) trở lên.
   Icon là PNG VẼ SẴN vòng tròn gradient + bóng xám. Cả 4 ảnh cùng bố cục:
   vòng bắt đầu ở bán kính 44,3% bề ngang ảnh, nét icon xa nhất 37,6%. Ảnh
   đặt trong khung tròn overflow hidden rồi phóng 1,19 lần -> khung chỉ lộ
   tới bán kính 42%: vòng + bóng rơi ra ngoài, còn icon trên nền xanh nhạt.
   Thay ảnh khác bố cục thì phải đo lại hệ số 1,19.
   ========================================================================== */

.section:has(.col.dich_vu_lien_q),
.row:has(> .col.dich_vu_lien_q) {
    --dv-xanh: #1a73e8;
    --dv-navy: #0d2a63;
    --dv-vien: #e5e9ef;
    --dv-o: #eaf3ff;
}

/* UX Builder in `#section_… { padding: 30px }` theo id ngau nhien. */
.section:has(.col.dich_vu_lien_q) {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
}

/* Flatsome `.col { padding-bottom: 30px }` cong don vao padding section. */
.section:has(.col.dich_vu_lien_q) > .section-content > .row > .col {
    padding-bottom: 0;
}

.section:has(.col.dich_vu_lien_q) .home-title {
    margin-bottom: 36px;
}

/* Theme co `.home-title h2 { color:#F44336 !important }` o dau file.
   line-height: responsive.css cho 22px/40px o dien thoai. */
.section:has(.col.dich_vu_lien_q) .home-title h2 {
    color: var(--dv-xanh) !important;
    line-height: 1.3;
    text-wrap: balance;
}

/* --- Lưới 4 thẻ ----------------------------------------------------------- */

/* Flatsome `.row .row:not(.row-collapse)` (0,3,0) an le am -15px va nap SAU
   file nay tren live -> can (0,4,0) moi thang mep voi tieu de. */
.row .row:has(> .col.dich_vu_lien_q) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: auto;
    margin-inline: 0;
}

.row > .col.dich_vu_lien_q {
    width: auto;
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

/* --- Thẻ ------------------------------------------------------------------ */

.row > .col.dich_vu_lien_q > .col-inner {
    position: relative;
    height: 100%;
    padding: 30px 20px 26px;
    border: 1px solid var(--dv-vien);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(13, 42, 99, .06);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.row > .col.dich_vu_lien_q > .col-inner:hover {
    border-color: #cfe0ff;
    box-shadow: 0 18px 38px rgba(13, 42, 99, .12);
    transform: translateY(-4px);
}

/* Link chi boc anh, ten dich vu khong bam duoc. Keo gian link phu kin ca the:
   `.box` / `.box-image` cua Flatsome position relative -> ha ve static de
   ::before cua link neo theo .col-inner (va khong bi overflow cua o anh cat). */
.row > .col.dich_vu_lien_q .box {
    position: static;
}

/* `width: 70%` inline tren .box-image -> !important. */
.row > .col.dich_vu_lien_q .box-image {
    position: static;
    width: 96px !important;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--dv-o);
    overflow: hidden;
    transform: none;
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Long vong la trang dac -> multiply cho nen xanh nhat cua khung hien qua. */
.row > .col.dich_vu_lien_q .box-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    transform: scale(1.19);
    mix-blend-mode: multiply;
}

.row > .col.dich_vu_lien_q > .col-inner:hover .box-image {
    background: #dcebff;
    box-shadow: 0 0 0 6px #f1f7ff;
}

.row > .col.dich_vu_lien_q .box-image a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.row > .col.dich_vu_lien_q .box-image a:focus-visible {
    outline: none;
}

.row > .col.dich_vu_lien_q > .col-inner:has(.box-image a:focus-visible) {
    outline: 3px solid var(--dv-xanh);
    outline-offset: 3px;
}

.row > .col.dich_vu_lien_q .box-text {
    padding: 0;
    font-size: 15px;
}

.row > .col.dich_vu_lien_q .box-text-inner p {
    margin: 0;
    color: var(--dv-navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: balance;
    transition: color .2s ease;
}

/* Mui ten bao link mo trang moi (target=_blank) — cung kieu the bao chi.
   Khoang trang khong ngat (\00a0) giu mui ten dinh voi chu cuoi, khong roi
   xuong dong mot minh. */
.row > .col.dich_vu_lien_q .box-text-inner p::after {
    content: "\00a0↗";
    content: "\00a0↗" / "";
    color: var(--dv-xanh);
    font-weight: 600;
}

.row > .col.dich_vu_lien_q > .col-inner:hover .box-text-inner p {
    color: var(--dv-xanh);
}

/* --- Thu nhỏ -------------------------------------------------------------- */

@media (max-width: 849px) {
    .row .row:has(> .col.dich_vu_lien_q) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 549px) {
    .section:has(.col.dich_vu_lien_q) {
        padding-top: 44px !important;
        padding-bottom: 52px !important;
    }

    .section:has(.col.dich_vu_lien_q) .home-title {
        margin-bottom: 24px;
    }

    .row .row:has(> .col.dich_vu_lien_q) {
        gap: 12px;
    }

    .row > .col.dich_vu_lien_q > .col-inner {
        padding: 22px 12px 18px;
        border-radius: 16px;
    }

    .row > .col.dich_vu_lien_q .box-image {
        width: 72px !important;
        height: 72px;
        margin-bottom: 14px;
    }

    .row > .col.dich_vu_lien_q .box-text-inner p {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .row > .col.dich_vu_lien_q > .col-inner,
    .row > .col.dich_vu_lien_q .box-image {
        transition: none;
    }

    .row > .col.dich_vu_lien_q > .col-inner:hover {
        transform: none;
    }
}