/* ============================================================
   BASE STYLES
   ============================================================ */
.article-item .item .link-more a {
    color: #3A464F;
    font-weight: 600;
    font-size: 16px;
}

.header-action {
    margin-left: 15px;
}

.box-more-than-cart {
    padding: 80px 0;
}

.banner-home .action-btn .item .btn-line {
    background: #DEEFFF;
}

.form-control {
    font-size: 1.6rem;
}

.article-item .item .link-more a span {
    display: inline-block;
    margin-right: 5px;
}

.box-modal-cart .modal-dialog {
    max-width: 1000px;
}

.info-content .search-cart {
    margin-bottom: 20px;
}

.info-content .search-cart .input-group .form-control {
    border: 1px solid #ddd;
    height: 48px;
    border-radius: 8px;
}

.info-content .search-cart {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.info-content .search-cart .input-group {
    flex: 1;
}

.info-content .search-cart .input-group-append {
    margin-left: 0;
}

.info-content .search-cart .clear-search-btn {
    border-radius: 8px;
    height: 48px;
    padding: 0 15px;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-content .search-cart .clear-search-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* Cart Select Container Layout */
.cart-select-container {
    display: flex;
    gap: 20px;
}

.cart-select-main {
    flex: 1;
}

.cart-select-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* Search Cart */
.search-cart {
    margin-bottom: 20px;
}

.search-cart .input-group {
    position: relative;
}

.search-cart .clear-search {
    border-left: none;
    cursor: pointer;
}

.search-cart .clear-search span {
    font-size: 20px;
    line-height: 1;
}

/* Alphabet Filter */
.alphabet-filter {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.alphabet-label {
    font-weight: 600;
    margin-right: 10px;
}

.alphabet-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

.alphabet-item {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all 0.3s;
}

.alphabet-item:hover {
    background: #e9ecef;
    border-color: #007bff;
    color: #007bff;
}

.alphabet-item.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* Popular Carts Section */
.popular-carts-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff3cd;
    border-radius: 8px;
    border: 1px solid #ffc107;
}

.popular-carts-section .section-title {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #856404;
}

.popular-carts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.popular-carts-list .popular-cart-item {
    flex-basis: calc(25% - 8px);
    max-width: calc(25% - 8px);
}

/* Right sidebar styles */
.info-content-right .content {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Popular carts in right sidebar - 2 items per row */
.info-content-right .popular-carts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.info-content-right .popular-carts-list .popular-cart-item {
    flex-basis: calc(50% - 5px);
    max-width: calc(50% - 5px);
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;
}

.info-content-right .popular-carts-list .popular-cart-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-content-right .popular-carts-list .popular-cart-item .info-content {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    height: 100%;
    display: flex;
    align-items: center;
}

.info-content-right .popular-carts-list .popular-cart-item .logo-cart {
    margin-right: 8px;
    flex-shrink: 0;
}

.info-content-right .popular-carts-list .popular-cart-item .logo-cart img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.info-content-right .popular-carts-list .popular-cart-item .name-cart {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
}

.info-content-right .popular-carts-list .popular-cart-item:hover .info-content {
    border-color: #007bff;
    background: #e7f3ff;
}

/* Related Platforms */
.related-carts-list {
    min-height: 200px;
}

.related-carts-empty {
    padding: 40px 20px;
    color: #999;
    font-style: italic;
}

.related-carts-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-cart-item {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-cart-item:hover {
    transform: translateY(-2px);
}

.related-cart-item .info-content {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.related-cart-item:hover .info-content {
    border-color: #007bff;
    background: #e7f3ff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.related-cart-item .logo-cart {
    margin-right: 11px;
    flex-shrink: 0;
}

.related-cart-item .logo-cart img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.related-cart-item .name-cart {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
}

.related-cart-item .no-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 10px;
    color: #999;
}

/* Related Platforms list right - one item per row */
.related-carts-list-right .item-cart:hover .info-content {
    border-color: #A1D1FB;
}

/* Dictionary Format */
.dictionary-format {
    display: block !important;
}

.letter-group {
    margin-bottom: 30px;
}

.letter-header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    color: #007bff;
}

.letter-content {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Cart Item Styles */
.warp-select-cart .select-cart .item-cart.selected .info-content,
.warp-select-cart .select-cart .item-cart:hover .info-content {
    border-color: #A1D1FB;
}

.popular-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #ffc107;
    font-size: 18px;
    z-index: 1;
}

/* Sidebar Styles */
.cart-select-sidebar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: 30px;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.related-carts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-carts-list .related-cart-item {
    flex-basis: 100%;
    max-width: 100%;
    cursor: pointer;
}

.related-carts-list .related-cart-item:hover .info-content {
    border-color: #007bff;
    background: #e7f3ff;
}

/* Modal Footer */
.box-modal-cart .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 15px;
}

.box-modal-cart .confirm-select-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.box-modal-cart button.close {
    position: absolute;
    top: 6px;
    right: 12px;
}

.box-modal-cart .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px;
}

.box-modal-cart .modal-header .title-header .title {
    font-weight: 600;
    font-size: 23px;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    max-width: 1620px;
}

/* btn-header-top-right: layout-specific overrides — base style từ btn.css (.btn-all-outline) */
.btn-header-top-right a {
    min-width: 91px;
    border: 1px solid var(--color-text);
    border-radius: 46px;
    color: var(--color-text);
    padding: 12px 10px;
    text-align: center;
    transition: 0.5s;
}

.header-action .btn-all {
    padding: 12px 15px;
    text-align: center;
}

/* btn-header: layout-specific overrides — base style từ btn.css (.btn-all-gradient) */
.btn-header {
    margin-left: 10px;
}

.btn-header a {
    background: linear-gradient(90deg, #6C54FF 0%, #0972CE 100%);
    height: 48px;
    width: 150px;
    color: #fff;
    border-radius: 80px;
    border-bottom: 1px solid #fff;
}

.banner-home .info-content .dsc-center,
.box-banner-pricing .info .dsc-center {
    font-size: 18px;
    margin-bottom: 40px;
    color: var(--color-text);
}

header {
    position: relative;
    height: 80px;
    background: #deefff;
}

.section-more-than {
    padding: 50px 0 80px;
}

.section-more-than .info-left .title {
    color: #5B5B5B;
    font-size: 24px;
    font-weight: 700;
}

.section-more-than>.row {
    display: flex;
    align-items: center;
}

.list-more-than .item .img img {
    height: 56px;
    width: 100%;
    object-fit: contain;
}

.slogan-section {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-text);
}

.slogan-section span {
    background: var(--bg-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 7px;
}

.dsc-section {
    max-width: 954px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    color: #3A464F;
}

/* .link-more a trong home-key → migrate sang .btn-all.btn-all-text trực tiếp trên <a> */
.home-key-stre .hk-feature-item svg {
    flex-shrink: 0;
    color: var(--color-highlight);
}

.home-key-stre .hk-check-item svg {
    flex-shrink: 0;
    color: var(--color-highlight);
}

.section-home-supported .inter-content-sp .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-home-supported .inter-content-sp .item {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-top: 10px;
}

.section-home-supported .inter-content-sp .item .img {
    box-shadow: 0px 1px 4px 0px #D9D9D9;
    border: 1px solid #EBEBEB;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

.section-home-supported .inter-content-sp .item .img img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.title-section>span {
    background: var(--bg-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-home-supported .inter-content-sp .item .icon {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
}

.inter-content-sp .center-item .item .icon svg path {
    stroke: var(--color-highlight);
}

.section-home-supported .cart-marquee {
    overflow: hidden;
}

.section-home-supported .cart-marquee .cart-marquee-track {
    display: flex;
    width: max-content;
    animation: cartMarquee 180s linear infinite;
}

.section-home-supported .cart-marquee .cart-marquee-group {
    display: flex;
    align-items: flex-start;
    flex: none;
    gap: 40px;
    padding-right: 40px;
}

.section-home-supported .cart-marquee .col-item {
    flex: none;
    width: auto;
}

.section-home-supported .cart-marquee .col-item:nth-child(even) {
    margin-top: 110px;
}

@keyframes cartMarquee {
    to {
        transform: translateX(-50%);
    }
}

.section-case-studies-img .swiper-wrapper {
    align-items: center;
}

.section-case-studies-img .swiper-slide {
    height: auto;
    display: flex;
}

.section-case-studies-img .item .img:hover {
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Fade-in nhẹ khi tab active — dùng animation (không phải transition) vì animation luôn chạy lại
   đúng mỗi lần dù pane vừa từ display:none hiện ra, không cần mẹo reflow/rAF để restart.
   Chỉ nhắm đúng .content-item NGOÀI CÙNG (bọc cả text lẫn ảnh) — tránh khớp luôn .content-item
   lồng bên trong (chỉ bọc phần text) khiến text bị chạy animation 2 lớp còn ảnh chỉ 1 lớp,
   trông như ảnh không trượt lên cùng text. */
@keyframes nhServiceContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.works .tab-content .content-item .item-bottom .left .dsc {
    color: #fff;
    font-size: 18px;
}

.section-home-how-it-workt .banner-top svg {
    width: 1200px;
}

.section-home-how-it-workt .banner-top {
    position: absolute;
    top: -169px;
    z-index: 0;
    pointer-events: none;
}

.section-home-count .top .title-section {
    color: #fff;
    margin-bottom: 10px;
    font-size: 32px;
}

.section-home-count .top .dsc-section-ct {
    color: #fff;
    max-width: 570px;
}

.section-home-count .img:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 50%, rgb(14 123 248 / 19%) 0%, rgb(0 27 54 / 0%) 100%);
    z-index: 0;
    top: 0;
}

.section-home-count .img {
    padding-top: 75%;
}

.section-home-count .top {
    margin-bottom: 40px;
}

.section-home-count .infnter-content .item .top-item {
    display: flex;
    font-size: 42px;
    font-weight: 700;
    background: var(--bg-gradient-text-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-home-count .infnter-content .item .description {
    color: #8D8D8D;
}

.section-home-count .inter-img {
    max-width: 477px;
}

.works .tab-content .content-item .item-bottom .left {
    max-width: 590px;
}

.section-home-highlight-brand {
    box-shadow: 0px 4px 10.7px 0px #00000021;
    border-top-left-radius: 65px;
    border-bottom-right-radius: 64px;
    padding: 50px 50px 0;
    z-index: 10;
    position: relative;
    background: #fff;
}

.section-home-highlight-brand .swiper-pagination {
    bottom: 10px;
}

.section-home-highlight-brand .swiper {
    padding-bottom: 50px;
}

.section-home-highlight-brand .item>.row {
    display: flex;
    align-items: center;
}

.section-home-highlight-brand .item .img img {
    height: 80px;
    object-fit: contain;
}

.section-home-highlight-brand .item .description {
    border-left: 1px solid #000;
    padding-left: 50px;
}

.section-home-highlight-brand .item .img {
    text-align: center;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 8px;
    width: 37px;
    border-radius: 8px;
    background: #003367;
}

.section-home-case-studies {
    padding-bottom: 60px;
    position: relative;
}

.swiper-pagination-bullet {
    width: 13px;
    border-radius: 8px;
}

.box-home-highligh-brand {
    position: relative;
    margin-bottom: 80px;
}

.box-home-highligh-brand:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background: #001a35;
    height: 50%;
}

.section-home-case-studies .article-item {
    border: 1px solid #EEEEEE;
    padding: 15px;
    border-radius: 16px;
    height: 100%;
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: box-shadow;
}

.section-home-case-studies .article-item .item .inner-image {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 25px;
}

.section-home-case-studies .article-item .item .inner-image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.section-home-case-studies .article-item:hover .item .inner-image img {
    /* transform: scale(1.04); */
}

.section-home-case-studies .item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 10px;
}

.section-home-case-studies .item .link-more a:hover {
    background: var(--bg-hover);
}

.section-home-case-studies .item .link-more a {
    padding: 10px 10px;
    border-radius: 50px;
    display: inline-flex;
}

.language-section {
    position: relative;
    margin-left: 15px;
}

.language-section .language-switch .language-picker {
    display: flex;
    align-items: center;
    padding: 10px 0;
    height: 80px;
    cursor: pointer;
}

.language-section .warp-language {
    position: absolute;
    right: 0;
    width: auto;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 0;
    z-index: 999;
    opacity: 0;
    display: none;
    padding: 15px 25px;
    min-width: 200px;
    top: calc(100% + 10px);
    box-shadow: 0 8px 24px rgba(5, 54, 96, 0.12);
}

.language-section .language-switch .language-picker img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 10px;
}

.language-section .language-switch .language-picker span {
    color: #000;
    font-weight: 700;
    font-size: 16px;
}

.language-section .language-switch ul li a,
.language-section .language-switch ul li .language-current-label {
    color: #3A464F;
    font-size: 16px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
}

.language-section .language-switch.open .warp-language {
    display: block;
    opacity: 1;
}

.language-section .language-switch ul li a:hover {
    color: var(--color-highlight);
}

.language-section .language-switch ul li.is-current-language .language-current-label {
    color: var(--color-highlight);
    cursor: default;
    font-weight: 700;
}

.language-section .language-switch ul li:last-child a {
    border: 0;
}

.language-section .language-switch .language-picker span.icon {
    flex: 0 0 24px;
    display: inline-flex;
    justify-content: flex-end;
}

.language-section .language-switch .language-picker span.icon svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.language-section .language-switch.open .language-picker span.icon svg {
    transform: rotate(180deg);
}

/* FAQ Section Styles */
.section-home-faq #accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.section-home-faq .item-title-process:not(.collapsed) .show-dsc svg path {
    stroke: #0C2A4A;
}

/* Card styling */
/* Responsive */
.box-home-article-02 {
    margin-bottom: 60px;
    position: relative;
    z-index: 3;
}

.box-home-section-article-01 {
    padding: 80px 0 90px;
    background: #001A35;
    position: relative;
    overflow: hidden;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-position: top;
}

.box-home-article-02 .title-section {
    color: #fff;
    margin-bottom: 20px;
}

.box-home-article-02 .dsc-section {
    color: #fff;
}

/* .link-book-a-demo a → migrate sang .btn-all.btn-all-gradient trực tiếp trên <a> */
.section-home-lets-move .content-info .img {
    padding-top: 45.25%;
}

footer {
    background: #001A35;
    position: relative;
    padding-bottom: 20px;
    overflow: hidden;
    margin-top: 0;
}

.footer-contact .logo img {
    height: 54px;
}

.footer-contact .logo {
    margin-bottom: 20px;
}

.footer-contact .dsc {
    margin-bottom: 30px;
    max-width: 408px;
    color: #3A464F;
}

.footer-contact form {
    margin-bottom: 30px;
}

.footer-contact form .form-group {
    position: relative;
    max-width: 415px;
}

.footer-contact form .form-group .form-control {
    border-radius: 268px;
    height: 56px;
    padding-left: 50px;
    padding-right: 100px;
    font-size: 16px;
}

.footer-contact form .form-group span.icon {
    position: absolute;
    top: 14px;
    left: 16px;
}

.footer-contact form .form-group .form-control::placeholder {
    color: #000;
}

.footer-contact form .form-group span.btn,
.footer-contact form .form-group span.btn-all {
    position: absolute;
    top: 4px;
    right: 4px;
    height: 48px;
    width: 90px;
    border-radius: 50px;
    font-size: 16px;
}

.box-fanpage .list-fanpage {
    display: flex;
    align-items: center;
    padding-left: 0;
}

.box-fanpage .list-fanpage .item {
    list-style: none;
    margin-right: 30px;
}

.box-fanpage .list-fanpage .item img {
    width: 40px;
    height: 40px;
}

.menu-footer .title-footer {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    color: #3A464F;
}

.menu-footer ul {
    padding-left: 0;
}

.menu-footer ul>li {
    list-style: none;
    margin-bottom: 20px;
}

.menu-footer ul>li>a,
.menu-footer ul>li>.menu-footer-label {
    color: #3A444E;
}

.section-footer-01 {
    position: relative;
    padding-top: 80px;
    max-width: calc(100% - 40px);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 40px;
    background: #fff;
    border-top-right-radius: 40px;
    padding-bottom: 15px;
}

.section-footer-01>.container>.row>div:nth-child(3),
.section-footer-02>.container>.row>div:nth-child(3) {
    flex: 0 0 21%;
    max-width: 21%;
}

.section-footer-01>.container>.row>div:nth-child(2),
.section-footer-02>.container>.row>div:nth-child(2) {
    flex: 0 0 20.66667%;
    max-width: 20.66667%;
}

.footer-contact {
    position: relative;
}

.section-footer-02 {
    position: relative;
    max-width: calc(100% - 40px);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding-bottom: 15px;
}

.section-footer-01 .container {
    position: relative;
    z-index: 2;
}

.footer-section-04>.container>.row>div {
    position: initial;
}

.img-before-top {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 8;
    border-top-left-radius: 40px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.section-footer-03 {
    position: relative;
    max-width: calc(100% - 40px);
    /* overflow: hidden; */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding-bottom: 20px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-top: 20px;
}


.img-footer-right {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 0;
    border-bottom-right-radius: 40px;
    overflow: hidden;
    pointer-events: none;
}

.img-footer-right span.img-footer-01 {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ===== SECTION WRAPPER ===== */
/* ===== LEFT CONTENT ===== */
/* ===== CENTER CUBE ===== */
@keyframes cubeFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ===== RIGHT CONTENT ===== */
/* Right icons animation */
/* ===== SVG LINE ===== */
.section-home-lets-move .migration-wrapper .link-book-a-demo {
    margin-top: 60px;
}

.banner-home .info-content .buy-btn-banner .btn-migration a:hover {
    background: var(--bg-highlight-light);
    color: #fff;
    border-color: var(--bg-hover-main);
}

.section-home-service .content-section ul.nav.nav-tabs>li.nav-item>.nav-link:hover:not(.is-selected) {
    color: #1578dc;
    border-color: transparent !important;
}

.list-more-than {
    position: relative;
    padding-bottom: 30px;
}

.list-more-than .swiper {
    position: static;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
}

.section-home-supported .inter-content-sp .swiper {
    position: static;
}

.section-home-highlight-brand .swiper-pagination-horizontal {
    bottom: 10px;
}

/* // service */
.box-service-choose .content .img-center {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 400px;
    width: 100%;
    object-fit: contain;
}

.box-service-choose .content .img-center img {
    height: 100%;
}

.warp-service-left .dsc-service {
    margin-bottom: 50px;
}

.box-service-compare-features .features .top-features .item-top>span {
    flex: 0 0 20%;
    max-width: 20%;
}

.box-service-compare-features .features .list-bottom .item-bottom .btn-more {
    padding: 0 30px;
}

.box-service-compare-features .features .list-bottom .item-bottom .btn-more a {
    display: flex;
    height: 48px;
    background: var(--bg-gradient-text);
    align-items: center;
    justify-content: center;
    border-radius: 43px;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.box-service-compare-features .features .list-bottom .item-bottom.item-center .btn-more a {
    background: var(--color-text);
}

.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-4 svg:nth-child(5) {
    display: none;
}

.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-3 svg:nth-child(4),
.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-3 svg:nth-child(5) {
    display: none;
}

.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-2 svg:nth-child(3),
.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-2 svg:nth-child(4),
.warp-service-loved-by-customer .list-loved-by-customer .item .note span.star-2 svg:nth-child(5) {
    display: none;
}

.article-item .categorys .article-category a {
    background: #0972CE1A;
    color: #0972CE;
    padding: 0 20px;
    border-radius: 8px;
    align-items: center;
    white-space: nowrap;
    max-width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block !important;
    height: 32px;
    line-height: 32px;
}

.article-item .inner-article-top .inner-content {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

.article-item .inner-article-top .inner-content .left .article-title {
    margin-bottom: 0;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-item .inner-article-top .inner-content .icon-right {
    flex: 0 0 50px;
    text-align: right;
}

.box-service-banner-01 .content-banner .info-left .btn-you-name .btn-gradient {
    margin-right: 30px;
    white-space: nowrap;
}

.box-service-key-features .content .info-right .dsc {
    font-size: 18px;
    color: #3A464F;
    margin-bottom: 40px;
}

.box-service-who-is-for .content .hot,
.box-service-workflow .content .hot,
.box-service-pricing .content-pricing .hot,
.box-about-who-we-are .hot,
.box-what-we-do .top,
.box-about-what-we-heve-done .content .hot,
.box-about-trusted .hot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.box-service-who-is-for .content .hot span,
.box-service-workflow .content .hot span,
.box-service-pricing .content-pricing .hot span,
.box-about-who-we-are .hot span,
.box-what-we-do .top .hot span,
.box-about-what-we-heve-done .content .hot span,
.box-about-trusted .hot span {
    display: inline-flex;
    align-items: center;
    height: 40px;
    background: #0972CE1A;
    padding: 0px 20px;
    border-radius: 25px;
    color: #0972CE;
    gap: 5px;
}

.box-service-pricing .content-pricing .info-inter .info-left .list-key .stkey {
    text-align: center;
}

.box-section-blogs-01 {
    background: linear-gradient(180deg, #DEEFFF 0%, #FFFFFF 104.59%);
    padding-top: 40px;
}

.box-blog-category {
    padding: 45px;
    border-radius: 45px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #EBF5FF 0%, #fff 70%);
    background-repeat: no-repeat;
    background-position: bottom;
}

.box-blog-category .content .breadcrumbs-section {
    justify-content: flex-start;
    margin-bottom: 30px;
}

.breadcrumbs-section a {
    display: flex;
    align-items: center;
}

.breadcrumbs-section a:last-child::after {
    display: none;
}

.box-blog-category .content .info-title {
    margin-bottom: 20px;
}

.box-blog-category .content .info-title .title-section span {
    background: var(--bg-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.box-blog-category .content .info-title .dsc {
    font-size: 18px;
    color: var(--color-text);
    font-weight: 600;
}

.box-blog-category .list-category .item>a:hover {
    background: #419ADA1A;
}

.box-blog-category .content {
    position: relative;
    z-index: 1;
}

.box-blog-category .img-bf img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    height: auto;
    bottom: 0;
    width: 100%;
}

.box-blog-category .list-category .item>a .icon {
    margin-right: 10px;
}

.list-small .article-item {
    display: flex;
    align-content: center;
    border: 1px solid #EEEEEE;
    box-shadow: none;
    border-radius: 16px;
    margin-bottom: 15px;
}

.list-small .article-item:hover {
    border-color: #73BEFF;
}

.list-small .article-item .inner-image {
    flex: 0 0 160px;
    max-width: 160px;
    margin-bottom: 0;
}

.list-small .article-item .inner-content {
    flex-basis: calc(100% - 160px);
    max-width: calc(100% - 160px);
    padding-left: 20px;
}

.list-small .article-item .inner-image .img {
    padding-top: 59%;
}

.box-home-article-page .article-item,
.article-item-page {
    border: 1px solid #EEEEEE;
    box-shadow: none;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

.row>div {
    padding-left: 10px;
    padding-right: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.slider-blog-page .title-section {
    font-size: 32px;
    margin-bottom: 20px;
}

.slider-blog-page {
    position: relative;
    padding-bottom: 30px;
}

.slider-blog-page .swiper {
    position: static;
}

.box-unlock-blogs {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.section-blog-unlock {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 100px;
    border-radius: 40px;
    background-size: cover;
    height: 309px;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.section-blog-unlock .content .title-blog {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.section-blog-unlock .content .dsc-blog {
    max-width: 467px;
    color: #fff;
    margin-bottom: 30px;
}

.copyright {
    color: #3A464F;
}

.article-item-page.swiper-slide {
    height: auto;
}

.category-author .author a {
    display: flex;
    align-items: center;
}

.category-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.category-author .author .icon {
    flex: 0 0 24px;
    max-width: 24px;
    margin-right: 10px;
}

.category-author .author .icon img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
}

.category-author .author .name-by span.name {
    font-weight: 600;
    color: #3A464F;
}

.category-author .author .name-by span.by {
    color: #3A464F;
    display: inline-block;
    margin-right: 5px;
}

.box-section-page-02 {
    padding-top: 60px;
    padding-bottom: 80px;
}

.box-section-search {
    margin-left: 20px;
    position: relative;
}

.box-section-search .icon {
    cursor: pointer;
}

.box-section-search .search-info {
    position: fixed;
    top: 90px;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(5, 54, 96, 0.12);
    padding: 4px;
    width: 640px;
    max-width: calc(100vw - 40px);
    z-index: 1050;
}

.box-section-search.is-open .search-info {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.box-section-search .search-info form {
    margin: 0;
}

.box-section-search .search-info .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border-radius: 999px;
    padding-left: 16px;
}

.box-section-search .search-info .input-group .icon-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.box-section-search .search-info .input-group .icon-left svg {
    width: 20px;
    height: 20px;
}

.box-section-search .search-info .input-group .form-control {
    flex: 1;
    border: 0;
    background: transparent;
    height: 44px;
    box-shadow: none;
    font-size: 16px;
    color: var(--color-text);
    padding: 0 8px;
}

.box-section-search .search-info .input-group .form-control:focus {
    outline: none;
    box-shadow: none;
}

.box-section-search .search-info .input-group-append {
    flex-shrink: 0;
}

.box-section-search .search-info .input-group-append .btn-submit {
    background: var(--bg-highlight-light);
    color: #fff;
    border: 0;
    border-radius: 999px;
    height: 44px;
    padding: 0 24px;
    font-weight: 600;
    font-size: 16px;
}

.box-section-search .search-info .input-group-append .btn-submit:hover {
    background: var(--bg-highlight-light-hover);
}

.box-section-search .icon svg {
    width: 28px;
    height: 28px;
}

.box-blog-category .title-section>span {
    margin-left: 0;
}

.box-blog-category .date-author {
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-blog-category .date-author .author a {
    display: flex;
    align-items: center;
}

.box-blog-category .date-author .author .icon {
    flex: 0 0 32px;
    max-width: 32px;
    margin-right: 10px;
}

.box-blog-category .date-author .author .icon img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.box-blog-category .date-author .author .name-by span.by {
    color: #3A464F;
}

.box-blog-category .date-author .author .name-by span.name {
    font-weight: 600;
    color: #3A464F;
}

.box-blog-category .date-author span.post-date {
    margin-bottom: 0;
    font-size: 16px;
    margin-right: 25px;
    color: #3A464F;
}

.box-article-detail .category-article,
.box-article-detail-new .category-article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.box-article-detail .category-article span.category a,
.box-article-detail-new .category-article span.category a {
    height: 32px;
    display: inline-flex;
    align-items: center;
    background: #0972CE1A;
    padding: 0 15px;
    border-radius: 8px;
    color: #0972CE;
}

/* ===== [Blog - Detail] tile - new layout (view_top_new.tpl) ===== */
.box-article-detail-new .category-article span.category a:hover {
    background: var(--bg-hover);
}

.img-article-right {
    background: #0972CE1A;
    padding: 40px;
    border-radius: 32px;
    margin-bottom: 25px;
}

.box-article-detail-03 {
    padding-top: 80px;
}

.img-article-right .img img {
    object-fit: contain;
}

.img-article-right .img {
    margin-bottom: 25px;
    padding-top: 70%;
}

.img-article-right .btn-bg-text a {
    height: 48px;
    font-size: 16px;
}

.categories {
    background: #0972CE1A;
    padding: 20px;
    border-radius: 32px;
}

.categories .title-section {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.categories .categories-section .has-child>ul>li {
    margin-bottom: 13px;
}

.categories .categories-section .has-child>ul>li>a {
    padding: 13px 15px;
    background: #fff;
    border-radius: 16px;
}

.categories .categories-section .has-child>ul>li:last-child {
    margin-bottom: 0;
}

.box-section-page-02>.container>.row {
    margin-left: -20px;
    margin-right: -20px;
}

.box-section-page-02>.container>.row>div {
    padding-left: 20px;
    padding-right: 20px;
}

.categories .categories-section>li>a>svg {
    margin-right: 10px;
}

.categories-section a.active svg path {
    stroke: #fff;
}

.categories .categories-section .has-child>ul>li>a>svg {
    margin-right: 10px;
}

.categories .categories-section>li:last-child {
    margin-bottom: 0;
}

.article-item:hover {
    border-color: var(--bg-border-hover);
}

.list-small .article-item:Hover {
    background: #fff;
}

.warp-article-detail>.row {
    margin-left: -40px;
    margin-right: -40px;
}

.warp-article-detail>.row>div {
    padding-left: 40px;
    padding-right: 40px;
}

.box-article-content .title-article {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 20px;
}

.list-small .article-item .inner-image .img {
    border-radius: 16px;
    overflow: hidden;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 15px;
    overflow: hidden;
}

.article-content table thead tr {
    background-color: #1a3c5e;
    color: #fff;
}

.article-content table thead th {
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
    border: 1px solid #1a3c5e;
    white-space: nowrap;
}

.article-content table tbody tr {
    border-bottom: 1px solid #dee2e6;
}

.article-content table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.article-content table tbody tr:hover {
    background-color: #eaf3fb;
}

.article-content table tbody td {
    padding: 10px 16px;
    border: 1px solid #dee2e6;
    vertical-align: top;
    line-height: 1.6;
}

.article-content table tbody td:first-child {
    font-weight: 600;
    color: #1a3c5e;
    white-space: nowrap;
}

.article-bottom-author .author>a,
.article-bottom-author .author>.author-info {
    display: flex;
    align-items: center;
}

.article-bottom-author .author .icon {
    flex: 0 0 44px;
    max-width: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.article-bottom-author .author .icon img {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.article-bottom-author .author .name-by {
    font-size: 18px;
    color: var(--color-text);
}

.article-bottom-author .author .name-by span.name {
    font-weight: 600;
}

.article-bottom-author .author .name-by .by {
    margin-right: 7px;
}

.box-article-share .social-share {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.box-article-share .social-share .btn-social img {
    height: 44px;
    width: 44px;
}

.box-article-share .social-share .btn-social .copy-link-button {
    cursor: pointer;
}

/* Sticky sidebar */
.warp-article-detail .row,
.warp-article-detail .col-xl-5 {
    overflow: visible !important;
}

.box-service-compare-features .features .list-bottom .item-bottom .btn-more a:hover {
    background: linear-gradient(104.94deg, #3618FF -9.48%, #1C00D7 50.71%, #0972CE 116.55%);
}

.box-service-compare-features .features .list-bottom .item-bottom.item-center .btn-more a:hover {
    background: #00203B;
}

.footer-section-article-01,
.footer-section-article-02,
.footer-section-article-03,
.footer-section-article-04 {
    z-index: 1;
    background: none;
}

.footer-section-04.footer-section-article-04>.row>div {
    position: initial;
}

.footer-section-article-04 .img-footer-page {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 0;
    background: linear-gradient(93.07deg, #011b44 -16.41%, #032555 99.41%);
    width: calc(100% - 40px);
    height: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: 32px;
}

.footer-section-article-04 .img-footer-page .banner-left {
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0;
}

.footer-section-article-04 .img-footer-page .banner-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.article footer,
.article_detail footer,
.layout-3zi7tkh footer,
.layout-akl50bc footer {
    background: linear-gradient(180deg, #ffffff -16.41%, #f6f9ff 99.41%);
}

.footer-section-article-01 .footer-contact .dsc {
    color: #fff;
}

.footer-section-article-01 .menu-footer .title-footer,
.footer-section-article-02 .menu-footer .title-footer {
    color: #fff;
}

.footer-section-article-01 .menu-footer>ul>li>a,
.footer-section-article-02 .menu-footer>ul>li>a {
    color: #fff;
}

.footer-section-article-03 .copyright {
    color: #fff;
}

.info-modal-cart .cart-top .item.item-search-cart .input .search-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 56px;
    width: 100px;
    background: var(--color-text);
    color: #fff;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.info-modal-cart .cart-top .item.item-search-cart .input .search-btn:hover {
    background: var(--color-text-hover);
}

.info-modal-cart .cart-top .item.item-custom-cart .btn:hover {
    background: var(--color-text);
    color: #fff;
}

.select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li>a {
    background: rgb(243 243 243);
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    font-size: 16px;
}

.select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li {
    margin-bottom: 5px;
}

.select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li:last-child {
    margin-bottom: 0;
}

.select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li.active>a,
.select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li:hover>a {
    background: #e7f1fb;
    color: var(--color-text);
    font-weight: 600;
}

/* body nền trắng, html nền xanh nhạt (#DEEFFF) - khi mở modal, Bootstrap thêm
   padding-right bù thanh cuộn lên body, để lộ dải nền trắng của body ngay trong
   dải padding đó, tạo vệt màu lệch tông giữa lớp backdrop mờ. Đồng màu với html
   ở đúng lúc modal mở để dải padding hoà vào nền chung. */
body.modal-open {
    background-color: #DEEFFF;
}

.button-calculate .btn {
    border-radius: 30px;
    color: #fff;
    height: 45px;
    padding: 0 20px;
    font-size: 16px;
    background: linear-gradient(93.07deg, #6C54FF -16.41%, #0972CE 99.41%);
    border: 0;
}

.button-calculate .btn:hover {
    background: var(--bg-gradient-text-3);
}

@keyframes featureSlideIn {
    from {
        transform: translateY(15px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes featureSlideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(15px);
    }
}

@keyframes featureFadeIn {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 100px;
    }
}

@keyframes featureFadeOut {
    from {
        opacity: 1;
        max-height: 100px;
    }

    to {
        opacity: 0;
        max-height: 0;
    }
}

.feature-cart--item:hover .feature-cart--content {
    animation: featureSlideIn 0.4s ease forwards;
}

.feature-cart--item:hover .feature-cart--desc {
    animation: featureFadeIn 0.4s ease forwards;
}

.toast-body {
    position: relative;
    border-radius: 12px;
    background-position: 18px center !important;
    box-shadow: none;
    color: var(--color-text) !important;
    opacity: 1;
    border: 1px solid #dddddd00;
    min-width: 350px;
    font-weight: 600;
    background-clip: padding-box;
    background-position: 18px center !important;
    box-shadow: none;
    background-repeat: no-repeat;
    padding: 18px 44px 18px 60px !important;
    font-size: 16px;
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text);
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.toast-close svg{
    width: 12px;
    height: 12px;
}


.toast-close:hover {
    opacity: 1;
    background-color: rgba(5, 54, 96, 0.08);
}

.toast-body.bg-error {
    background-color: rgb(255 245 243);
    border-color: #f4b0a1 !important;
}

.toast-body.bg-info {
    background-color: rgb(245 249 255);
    border-color: #9dc0ee !important;
}

.toast-body.bg-success {
    background-color: rgb(246 255 249);
    border-color: #48c1b5 !important;
}

.toast-body.bg-warning {
    background-color: rgb(255 248 236);
    border-color: #f7d9a4 !important;
}

.toast-body.bg-danger {
    background-color: rgb(255 245 243) !important;
    border-color: #f4b0a1 !important;
}

.toast-body.bg-info {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEwMl81MikiLz4KPHBhdGggZD0iTTEyIDE2VjExIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAxMSA5KSIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xMDJfNTIiIHgxPSIxMiIgeTE9Ii00LjUiIHgyPSIxMiIgeTI9IjI4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0RENBRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNEVBM0UwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") !important;
}

.toast-body.bg-danger {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEwMl83KSIvPgo8cGF0aCBkPSJNMTUgOS4wMDAwMkw5IDE1TTguOTk5OTcgOUwxNC45OTk5IDE1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTAyXzciIHgxPSIxMiIgeTE9IjAiIHgyPSIxMiIgeTI9IjI0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFODhCNzYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQ0E1MDQ4Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") !important;
}

.toast-body.bg-success {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEwMl8zNykiLz4KPHBhdGggZD0iTTguNSAxMi41TDEwLjUgMTQuNUwxNS41IDkuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEwMl8zNyIgeDE9IjEyIiB5MT0iMCIgeDI9IjEyIiB5Mj0iMjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ4Q0E5MyIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0OEJBQ0EiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K") !important;
}

.toast-body.bg-warning {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEwMl82NykiLz4KPHBhdGggZD0iTTEyIDlWMTQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxNyIgcj0iMSIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xMDJfNjciIHgxPSIxMiIgeTE9IjAiIHgyPSIxMiIgeTI9IjI0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNEQkE5NDgiLz4KPHN0b3Agb2Zmc2V0PSIwLjAwMDEiIHN0b3AtY29sb3I9IiNGRkM0NkIiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZBMzE4Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") !important;
}

.toast {
    border: 0;
    box-shadow: none !important;
    background: none;
}

.warp-banner-01 .inter-img .img-center-warp {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: calc(100% - 76px);
    top: 50px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    margin-left: -1px;
}

.warp-banner-01 .inter-img .img-center-warp .img {
    padding-top: 44.7%;
}

.warp-banner-01 .inter-img .img-center-warp .img img {
    object-fit: cover;
}

.header-section {
    text-align: center;
    padding: 50px 0 40px;
    gap: 8px;
    display: grid;
}

.header-section--title {
    background: var(--bg-highlight-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 42px;
    line-height: 48px;
    font-weight: 800;
    margin-bottom: 0;
}

.header-section--des {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 0;
    color: #3A464F;
}

.platform-card--arrow {
    flex: 0 0 24px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.platform-item a:hover .platform-card--arrow {
    opacity: 1;
    transform: translateX(0);
}

.platform-card--name-only {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.support-platform--btn-search {
    font-weight: 600;
    line-height: 24px;
    background-color: var(--color-text);
    color: #fff;
    border-radius: 999px;
    padding: 10px 25px;
    height: 56px;
    font-size: 16px;
    transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    border: 0;
}

.support-platform--btn-search:hover {
    background-color: var(--color-text-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(5, 54, 96, 0.45);
}

.platform-card h5 {
    font-weight: 700;
    margin-bottom: 16px;
}

.pm-wrapper-inner {
    display: grid;
    gap: 10px;
}

.pm-top {
    text-align: center;
}

.pm-title {
    text-align: center;
    margin-bottom: 12px;
}

.pm-desc {
    text-align: center;
}

.pm-readmore-wrap {
    text-align: center;
}

.pm-readmore-btn {
    margin-top: 20px;
}

.popular-migration--detail {
    font-size: 16px;
    line-height: 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--color-text);
}

.popular-migration--name {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.popular-migration--detail {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    gap: 2px;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.popular-migration--detail:hover {
    color: var(--color-text);
}

.process-works--name {
    max-width: 300px !important;
    margin-bottom: 4px;
}

.process-works--description {
    line-height: 24px;
    max-width: 290px;
    margin: 0 auto;
}

.box-process-works .content:before {
    content: none;
}

.box-process-works .content-inter {
    position: relative;
}

.box-process-works .content-inter:before {
    content: '';
    position: absolute;
    top: 161px;
    width: 100%;
    height: 3px;
    background: linear-gradient(93.07deg, #6C54FF -16.41%, #0972CE 99.41%);
    z-index: 3;
}

.migration-tool--banner-title {
    background: var(--bg-highlight-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
}

.migration-tool--ware {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
}

.btn--banner {
    padding: 15px 24px;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    color: var(--color-text);
    z-index: 9;
    position: relative;
    gap: 4px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.btn-hover--svg:hover svg {
    transform: translateX(5px);
}

.btn--bg-white-hover:hover {
    background: var(--color-text);
    color: #fff !important;
}

.btn--bg-white-hover,
.btn--bg-white-hover svg {
    transition: all 0.15s ease-in-out !important;
}

.btn--bg-white-hover:hover svg {
    filter: brightness(0) invert(1);
}

.btn--gradient:hover {
    background: var(--bg-highlight-light-hover);
}

.migration-tool--tab-item svg {
    margin-right: 8px;
}

.tooltip {
    position: relative;
    font-size: 12px;
    line-height: 18px;
    max-width: 280px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    z-index: 1000;
}

.tooltip::before,
.tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip[x-placement^="right"] {
    margin-left: 10px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .2);
}

.tooltip[x-placement^="right"]::before {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
}

.tooltip[x-placement^="right"]::after {
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgba(0, 0, 0, 0);
}

.tooltip[x-placement^="left"] {
    margin-right: 10px;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .2);
}

.tooltip[x-placement^="left"]::before {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff;
}

.tooltip[x-placement^="left"]::after {
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(0, 0, 0, 0);
}

.tooltip[x-placement^="top"] {
    margin-bottom: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.tooltip[x-placement^="top"]::before {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

.tooltip[x-placement^="top"]::after {
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0);
}

.tooltip[x-placement^="bottom"] {
    margin-top: 10px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
}

.tooltip[x-placement^="bottom"]::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

.tooltip[x-placement^="bottom"]::after {
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 0, 0, 0);
}

.mapping--tab-link:hover {
    color: var(--color-text);
    background: #0972CE1A;
}

.nav-tabs-swiper-wrap .nav-link:focus,
.nav-tabs-swiper-wrap .nav-link:focus-visible,
.nav-tabs-swiper-wrap .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

.nav-tabs-swiper-wrap .nav-tabs {
    flex-wrap: nowrap;
    border-bottom: none;
    margin-bottom: 0
}

.scroll-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.scroll-container:active {
    cursor: grabbing;
}

.scroll-container::-webkit-scrollbar {
    /* display: none; */
}

.scroll-item {
    flex: 0 0 auto;
    transition: all 0.3s ease;
    user-select: none;
}

.data-supported--item img {
    margin-right: 8px;
    float: left;
}

.toggle-migration:hover svg {
    transform: scale(1.1);
}

.is-open .toggle-migration svg {
    transform: rotate(180deg);
}

.toggle-migration:active svg {
    transform: scale(0.9);
}

.toggle-migration:hover svg path {
    stroke-dashoffset: 10;
}

.toggle-migration:hover {
    color: var(--color-text);
}

.full-features-list.is-open {
    max-height: 9999px;
    transition: max-height 1s ease-in-out, opacity 0.5s ease;
}

.step-title {
    padding: 0 16px;
    margin-top: 18px;
}

.step-item.active .step--content {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
}

.migration-steps--play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.migration-steps--play:hover [fill="white"] {
    filter: drop-shadow(0px 0px .25em #fff);
    transition: filter 0.15s;
}

.migration-steps--video {
    box-shadow:
        inset 0 0 0 1px #FFFFFF,
        0 7.57px 43.26px 7.57px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 18px;
    z-index: 1;
    position: relative;
    padding: 12px;
}

.migration-steps--video>svg {
    margin-bottom: 8px;
}

.migration-steps--yt-video {
    position: relative;
    padding-top: 56.25%;
    background: #BDD6FD;
    border-radius: 12px;
    overflow: hidden;
}

.migration-steps--yt-video iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.migration-steps--yt-video-thumbnail {
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fadeIn {
    animation: fadeIn 0.4s ease forwards;
}

.fadeOut {
    animation: fadeOut 0.4s ease forwards;
}

@media (min-width: 768px) {
    .pm-wrapper-inner {
        gap: 40px;
    }

    .pm-readmore-btn {
        margin-top: 40px;
    }

    .popular-migration--name {
        display: block;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.migration-tool--start-image {
    display: none;
    border-radius: 40px;
}

.featured-cart--nav-link:hover {
    color: var(--color-text);
    background: #0972CE1A;
    border-radius: 50px;
}

.popular-choice:hover .swiper-button-next,
.popular-choice:hover .swiper-button-prev {
    visibility: visible;
    opacity: 1;
}

.popular-choice--item:hover {
    border-color: var(--bg-border-hover);
    color: #3A464F;
}

.form-select .btn-light:not(:disabled):not(.disabled):active,
.form-select.btn-light:not(:disabled):not(.disabled).active,
.form-select.show>.btn-light.dropdown-toggle {
    background: transparent;
    border: 0;
}

.popular-choice--dropdown .bootstrap-select .dropdown-toggle:hover,
.popular-choice--dropdown .bootstrap-select .dropdown-toggle:focus {
    box-shadow: 0 0 0 1px var(--bg-border-hover);
    outline: none;
}

.popular-choice--dropdown .bootstrap-select.show .dropdown-toggle {
    box-shadow: 0 0 0 1px var(--bg-border-hover);
}

.popular-choice--dropdown .bootstrap-select .dropdown-toggle .filter-option img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.popular-choice--dropdown .bootstrap-select>.dropdown-menu .bs-searchbox .form-control:focus {
    border-color: #0972CE;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(9, 114, 206, 0.12);
    outline: none;
}

.popular-choice--btn-go:hover {
    background: var(--color-text);
}

.scroll-bar--container {
    overflow-y: auto;
}


.popular-migration--title {
    position: relative;
    padding: 0 88px;
}

.popular-migration--title::before,
.popular-migration--title::after {
    content: '';
    height: 2px;
    width: 80px;
    position: absolute;
    top: 50%;
    background: linear-gradient(93.07deg, #6C54FF 0, #0972CE 100%);
}

.popular-migration--title::before {
    right: 0;
}

.popular-migration--title::after {
    left: 0;
}

.section-home-faq .item-title-process .show-dsc:hover svg path,
.section-home-faq .item-title-process .hidden-dsc:hover svg path {
    stroke: var(--color-highlight-light);
}

.box-service-who-is-for .content .item:hover {
    border: 2px solid #C3E3FF;
    background: #0972CE1A;
}

.box-service-workflow .content-inter .item:hover .step {
    transform: scale(1.1);
}

.box-service-workflow .content-inter .item:hover .name {
    color: #0972CE;
}

.warp-service-left .content-service-left .item:hover .key {
    transform: scale(1.1);
}

.warp-service-left .content-service-left .item:hover .name {
    color: var(--color-highlight-light);
}

.section-home-faq .item-title-process:hover {
    background: #F5F8FF;
}

.box-service-which-migration .content .item .item-content:hover {
    background: var(--bg-hover);
    border-color: rgba(195, 227, 255, 1);
}

.btn-hover a:hover:before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.btn-hover a:hover span {
    color: #fff;
}

.layout-3zi7tkh .icon-down svg path {
    stroke: #fff;
}

.layout-3zi7tkh .menu-footer ul>li>a {
    color: #fff;
}

.section-learning-overview .learning-overview-card--link {
    display: inline-block;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

/* ===== Section Learning What You'll Learn (Figma node 3206-27139) ===== */
.section-learning-what-youll .item-key:hover {
    opacity: 1;
}

.section-learning-what-youll .item-key:hover .key-line {
    opacity: 1;
}

/* ===== Section Learning Why It (Figma: Key Strengths / Pros-Cons) ===== */
.section-learning-why-it .lisy-pros-cons .item-when img {
    width: 20px;
    height: 20px;
}

.section-learning-start-here .content>.row>div:nth-child(2) .item {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
}

.box-service-workflow.box-process-works .content-inter {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.menu-footer ul>li>a:hover {
    color: var(--color-highlight);
}

/* Author Detail Styles */
/* Breadcrumb */
.breadcrumbs-section .breadcrumbs-home,
.breadcrumbs-section .breadcrumbs-link {
    display: inline-flex;
    align-items: center;
    color: #6B7785;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs-section .breadcrumbs-home:hover,
.breadcrumbs-section .breadcrumbs-link:hover {
    color: var(--color-highlight);
}

.breadcrumbs-section .breadcrumbs-link,
.breadcrumbs-section .breadcrumbs-current {
    font-size: 1.4rem;
    line-height: 2rem;
}

.breadcrumbs-section .breadcrumbs-sep {
    display: inline-flex;
    align-items: center;
    color: #B7C2CE;
}

.breadcrumbs-section .breadcrumbs-current {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
}

/* Body layout: author info (left) + stats (right) */
/* Header: avatar + name + meta + social */
/* Social icons (small, muted) */
.author-detail-social-icon svg {
    width: 13px;
    height: 13px;
}

.author-detail-social-icon:hover {
    background: var(--color-text);
    color: #ffffff;
}

/* Description */
/* Expertise tags */
/* Stats */
.author-detail-stat-icon svg {
    width: 22px;
    height: 22px;
}

/* Author detail - tablet */
/* Author detail - mobile */
/* ===== Author list cards (block author/view) ===== */
.author-card:hover {
    border-color: var(--bg-border-hover);
    box-shadow: 0 8px 28px rgba(5, 54, 96, 0.08);
}

/* Header */
.author-card-name:hover {
    color: var(--color-highlight-light);
}

.author-card-headstats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 5px;
}

.author-card-headstat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
    color: var(--color-text);
}

.author-card-headstat svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.author-card-headstat b {
    font-weight: 700;
    color: var(--color-highlight-light, #0a7abf);
}

/* Body */
/* Stats */
.author-card-stat-ico {
    flex-shrink: 0;
}

/* Keywords */
.author-card-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.author-card-keyword {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-hover-main-50);
    color: #3a464f;
    font-size: 1.2rem;
    line-height: 1.6rem;
}

.author-card-keyword-more {
    color: var(--color-highlight-light);
}

/* Latest article */
.author-card-latest:hover .author-card-latest-label {
    color: var(--color-highlight-light);
}

/* Footer */
.author-card-social:hover {
    background: var(--color-text);
    color: var(--white);
}

.author-card-viewarticles:hover {
    color: var(--color-highlight-light);
}

.author-card-viewarticles:hover svg {
    transform: translateX(3px);
}

/* ===== Topic list cards (block tag/view_tag) ===== */
/* Search bar (giao diện, chưa nối logic tìm kiếm) */
.topics-search-filter:hover {
    background: var(--bg-light-hover);
}

.topics-search-ico {
    position: absolute;
    left: 14px;
    pointer-events: none;
}

.topics-search-input:focus {
    border-color: var(--bg-border-hover);
}

.topics-search-filter.active .za {
    display: none;
}

.topics-search-filter.active .az {
    display: inline-flex;
}

.topics-search-btn:hover {
    background: var(--color-text-hover);
}

/* Grid – cùng gutter với author list */
.topic-card:hover {
    border-color: var(--bg-border-hover);
    box-shadow: 0 8px 28px rgba(5, 54, 96, 0.08);
}

/* Header */
/* Body */
.topic-card-latest-label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3rem;
    line-height: 1.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.topic-card-latest-text {
    display: -webkit-box;
    margin-top: 5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 2rem;
    color: #3a464f;
}

/* Footer */
.topic-card-viewarticles:hover {
    color: var(--color-highlight-light);
}

.topic-card-viewarticles:hover svg {
    transform: translateX(3px);
}

.btn-header-top-right a:hover {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}

.banner-home .info-content .buy-pricing .buy-pricing-content a.inter-content:hover .name {
    color: var(--color-highlight);
}

.footer-contact form .form-group span.btn:hover,
.footer-contact form .form-group span.btn-all:hover::before {
    opacity: 1;
}

.support-platform--ul .support-platform--a:hover {
    background: var(--bg-hover-main-50);
    color: var(--color-text);
}

.support-platform--ul .support-platform--a.active:hover {
    background-color: var(--color-text);
    color: white;
}

.sort-btn.active {
    background: var(--color-text);
}

.sort-btn.active svg path {
    fill: #fff;
}

.platform-item a:hover .platform-card,
.popular-migration--item:hover {
    border-color: var(--bg-border-hover);
}

.why-merchants--item:hover {
    border-color: #C3E3FF;
    /* background: var(--bg-hover-main-50); */
    /* box-shadow: 0 8px 32px rgba(0, 122, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06); */
    transform: translateY(-6px);
}

.looking-futher--item:hover {
    background: var(--bg-hover-main-50);
    border-color: var(--bg-blue-100);
}

.section-cart-01 .info-left .btn-you-name,
.btn-background-empty button {
    font-weight: 600;
    font-size: 18px;
}

.feature-cart--item:hover {
    background: var(--bg-hover-main-50);
}

@keyframes spinOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dashMove {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -40;
    }
}

@keyframes dashMove2 {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 40;
    }
}

/* Dừng marching-ants của đường gạch đứt khi tiến trình đạt 100% (pha Completed) */
.dash-paused {
    animation-play-state: paused !important;
}

@keyframes floatY {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes dashMove {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -30;
    }
}

.home-key-stre .icon-02 .arrow-moving.is-ready,
.home-key-stre .icon-02 .arrow-moving-right.is-ready {
    opacity: 1;
}

ul.best-for-list {
    margin-bottom: 20px;
}

ul.best-for-list li {
    font-size: 18px;
    color: rgba(58, 70, 79, 1);
    margin-bottom: 10px;
}

.title-best-for {
    font-weight: 700;
    color: rgba(58, 70, 79, 1);
    font-size: 18px;
    margin-bottom: 15px;
}

.content-section .content-item .image-item img.img-fluid.img-center {
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: left;
    left: 0;
    top: 0;
}

/* Các testimonial xếp chồng, chỉ cái .active hiện ra và fade mượt khi đổi */
/* Track định vị theo % nên không lệch khi zoom/resize */
/* Mỗi thumb là 1 ô chiếm 1/7 chiều rộng, cao hết cột để vùng click trùm vòng
   tròn (kể cả khi vòng bị đẩy xuống thấp), dịch ngang theo --off (số ô lệch tâm) */
/* Transition chỉ bật sau khi JS đã đặt đúng vị trí (thêm class .wi-ready), để lần
   render đầu lúc load KHÔNG bị trượt từ vị trí template sang → hết giật khi load. */
/* Ẩn = lùi thêm 1 bậc xuống đúng trên đường kéo dài của cánh mũi tên (đúng 1 bước
   rủ = 30px), nên khi hiện ra item trượt VÀO THEO ĐÚNG ĐƯỜNG CHÉO, không bị dựng đứng. */
/* Đang trượt nhiều ô: giữ cái giữa nhỏ (chưa zoom), trượt xong mới phóng to. */
[data-where-innovation].wi-animating .where-innovation-thumb[data-distance="0"] .where-innovation-thumb-inner {
    transform: translateY(0) scale(0.667);
}

.works .content-works .item-bottom {
    margin-bottom: 30px;
}

.works .content-works .item-bottom .left {
    max-width: 600px;
}

.works .content-works .item-bottom .left .name {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

.works .content-works .item-bottom .left .dsc {
    color: #fff;
    line-height: 1.5;
}

.works .content-works .item-bottom .inter-img .img {
    border-radius: 32px;
    overflow: hidden;
}

.article-item:hover .inner-article-top .inner-content .icon-right svg {
    transform: rotate(45deg);
}

.article-item .inner-article-top .inner-content .icon-right svg {
    transition: 0.2s;
}

.box-blog-category:before {
    background: linear-gradient(180deg, #FFFFFF -22.71%, rgba(255, 255, 255, 0.430464) 54.94%, rgba(255, 255, 255, 0.1) 100%);
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 0;
    pointer-events: none;
}

.language-section .warp-language ul.list-unstyled {
    margin-bottom: 0;
}

.language-section .warp-language .title {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 18px;
}

.section-home-how-it-workt .card-content {
    transform: translateY(40px);
    opacity: 0.35;
    transition: 0.5s;
}

.section-home-how-it-workt .card.active .card-content {
    transform: translateY(0);
    opacity: 1;
}

/* ===== Learning Path block ===== */
.block-learning-path .learning-path-header {
    margin-bottom: 30px;
}

.learning-path-titles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.learning-path-title-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 30px;
    background: #FAFAFA;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #9FAEB9;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 0;
}

.learning-path-title-btn.is-active, .learning-path-title-btn:hover {
    color: #053660;
    background: #eef2f8;
}

.learning-path-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    color: #c5d4e3;
}

/* Articles column (right) */
.learning-path-articles-col {
    position: relative;
}

.learning-path-articles-wrap {
    border-radius: 12px;
    padding: 30px;
    background: linear-gradient(119.3deg, rgba(230, 230, 230, 0.2) 23.34%, rgba(217, 217, 217, 0.04) 96.36%);
}

.learning-path-articles-pane {
    display: none;
}

.learning-path-articles-pane.is-active {
    display: block;
}

.learning-path-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.learning-path-articles-bordered {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 14px;
}

.learning-path-article-item {
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.learning-path-article-item.is-hidden {
    display: none;
}

.learning-path-article-item>a {
    display: flex;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.4;
    min-height: 32px;
}

.learning-path-article-icon {
    flex: 0 0 auto;
    margin-right: 14px;
    color: #6e8caf;
    display: inline-flex;
    align-items: center;
}

.learning-path-article-item>a:hover .learning-path-article-icon {
    color: #053660;
}

.learning-path-article-title {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.learning-path-article-arrow {
    flex: 0 0 auto;
    margin-left: 14px;
    color: #053660;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s;
}

.learning-path-article-item>a:hover .learning-path-article-arrow {
    transform: translateX(3px);
}

/* Show more button */
.learning-path-show-more-wrap {
    padding: 14px 0 6px;
}

.learning-path-show-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #6e8caf;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s;
}

.learning-path-show-more:hover {
    color: #053660;
}

.learning-path-show-more.is-expanded svg {
    transform: rotate(180deg);
}

/* Single mode container */
.learning-path-single {
    max-width: 920px;
    margin: 0 auto;
}

.footer-section-article-01 .menu-footer ul>li>a,
.footer-section-article-01 .menu-footer ul>li>.menu-footer-label {
    color: #ffffff;
}

.footer-section-article-02 .menu-footer ul>li>a,
.footer-section-article-02 .menu-footer ul>li>.menu-footer-label {
    color: #ffffff;
}

/* Mobile */
/* ================= Search Result List ================= */
.box-search-article {
    padding-left: 25px;
    width: 100%;
}

.box-search-article .search-result-summary {
    font-size: 14px;
    color: #717182;
    margin-bottom: 16px;
    line-height: 1.6;
}

.box-search-article .search-result-summary strong {
    color: #1F2937;
    font-weight: 600;
}

.box-search-article .search-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.box-search-article .search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    background-color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.box-search-article .search-result-item:hover {
    border-color: #C3E3FF;
    text-decoration: none;
}

.box-search-article .search-result-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #0972CE1A;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.box-search-article .search-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-search-article .search-result-content {
    flex: 1 1 auto;
    min-width: 0;
}

.box-search-article .search-result-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.box-search-article .search-result-description {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-search-article .search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #6B7280;
}

.box-search-article .search-result-meta .meta-label {
    font-weight: 600;
    color: #374151;
}

.box-search-article .search-result-meta .meta-value {
    color: #6B7280;
}

.box-search-article .search-result-meta .meta-sep {
    color: #9CA3AF;
}

.box-search-article .search-result-empty {
    padding: 24px;
    text-align: center;
    color: #6B7280;
    border: 1px dashed #E5E7EB;
    border-radius: 12px;
}

.filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-sidebar .filter-group {
    background: #fff;
    border: 1px solid #0972CE1A;
    border-radius: 16px;
    overflow: hidden;
}

.filter-sidebar .filter-group .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #0972CE08;
    color: #1F4E7A;
    font-weight: 600;
    font-size: 18px;
    user-select: none;
    height: 58px;
}

.filter-sidebar .filter-group .filter-header[nh-toggle] {
    cursor: pointer;
}

.filter-sidebar .filter-group .filter-header .filter-title {
    flex: 1;
}

.filter-sidebar .filter-group .filter-header .filter-arrow {
    display: inline-flex;
    align-items: center;
    color: #1F4E7A;
    transform: rotate(180deg);
    transition: transform 0.25s ease;
    flex: 0 0 16px;
}

.filter-sidebar .filter-group .filter-header.open .filter-arrow {
    transform: rotate(0);
}

.filter-sidebar .filter-group .filter-body {
    padding: 14px 18px 16px;
    background: #fff;
}

.filter-sidebar .filter-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-sidebar .filter-item {
    margin: 0;
}

.filter-sidebar .filter-check {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #3A464F;
    font-weight: 400;
}

.filter-sidebar .filter-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 18px;
    border: 1.5px solid #3A464F;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.filter-sidebar .filter-check input[type="checkbox"]:checked {
    background: #0972CE;
    border-color: #0972CE;
}

.filter-sidebar .filter-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-sidebar .filter-check .filter-name {
    flex: 1;
    color: #3A464F;
    line-height: 1.4;
    font-size: 16px;
}

.filter-sidebar .filter-check .filter-count {
    color: #3A464F;
    font-size: 12px;
    margin-left: 8px;
}

.nc-search-bar-section {
    background: #ffffff73;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    margin-top: 40px;
    padding: 40px;
    position: relative;
}

.nc-search-bar-form {
    max-width: 640px;
    margin: 0 auto;
    z-index: 22;
}

.nc-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 4px 4px 4px 20px;
    box-shadow: 0 4px 16px rgba(20, 64, 168, 0.08);
}

.nc-search-bar__input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nc-search-bar__icon {
    color: #9CA3AF;
    font-size: 16px;
}

.nc-search-bar__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #3A464F;
    font-size: 15px;
    line-height: 24px;
    height: 44px;
    padding: 0;
}

.nc-search-bar__input::placeholder {
    color: #9CA3AF;
}

.nc-search-bar__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bg-highlight-light);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 26px;
    height: 48px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.nc-search-bar__btn:hover {
    filter: brightness(1.05);
}

.nc-search-bar-section .img-before svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.pagination li.page-item:hover .page-link svg path {
    stroke: #fff;
}

.box-search-item-02 {
    padding-bottom: 80px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* .btn-text: base từ btn.css alias (btn-all-text + btn-all--lg) */
.btn-text {
    height: 58px;
    padding: 0 25px;
    border: 1px solid var(--color-text);
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    background: var(--color-text);
    gap: 10px;
    transition: 0.5s;
}

.btn-text:hover {
    background: none;
    color: var(--color-text);
}

.btn-text:hover span.icon svg path {
    stroke: var(--color-text);
}

.box-footer-mobile {
    display: none;
}

/* Mobile (drawer) layout */
/* Modal cart grid layout */
/* Fix: hide SVG foreignObject on iOS/Safari - causes white blur overlay */
.home-key-illustration svg foreignObject {
    display: none;
}

/* popular migration block */
.popular-migration--detail {
    font-weight: 600;
}

.sp-filter-right .sort-btn.active .icon.iconaz {
    display: block;
}

.popular-migration--wrapper a {
    color: var(--color-text);
}

.banner-home .title-new a:hover .icon-right svg,
.box-banner-pricing .info .title-new a:hover .icon-right svg {
    transform: translateX(3px);
}

a.popular-migration--wrapper:hover {
    color: var(--color-text);
}

.additional-option--item span.icon img {
    width: 24px;
    height: 24px;
}

.toggle-migration:hover {
    border-color: var(--bg-border-hover);
}

.box-partner-banner .box-img img {
    max-width: 100%;
    max-height: 460px;
    height: 460px;
}

.section-case-studies-img .item:hover .overlay path {
    stroke: var(--bg-border-hover);
}

.home .header-menu.menu-hidden {
    transform: translate3d(0, -100%, 0);
}

.header-menu {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Title */
.box-author-brc .author-brc-title {
    margin: 0 0 12px;
}

.box-author-brc .author-brc-title span {
    background: var(--bg-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description */
.box-author-brc .author-brc-desc {
    max-width: 560px;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* Highlight tags */
.box-author-brc .author-brc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.box-author-brc .author-brc-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 20px;
    background: var(--light);
    color: var(--color-text);
    transition: background 0.2s, color 0.2s;
}

.box-author-brc .author-brc-tag:hover {
    background: var(--bg-light-hover);
    color: var(--color-highlight);
}

/* ===== Author top-view block (view_top_view.tpl) ===== */
.author-top-item:hover {
    border-color: var(--bg-border-hover);
}

.author-top-item:nth-child(3) .author-top-rank {
    color: #73BEFF;
}

.author-top-name:hover {
    color: var(--color-highlight);
}

.blogs-cap-2-head-left .dsc-section {
    color: #6b7280;
    margin-top: 8px;
}

.blogs-cap-2-sort select {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-size: 14px;
    color: var(--color-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

/* Featured article - layout ngang */
.article-featured {
    display: flex;
    flex-direction: row;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
    gap: 0;
}

.article-featured .featured-image {
    flex: 0 0 50%;
    max-width: 50%;
}

.article-featured .featured-image .img {
    height: 100%;
    border-radius: 0;
}

.article-featured .featured-image .img a,
.article-featured .featured-image .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.article-featured .featured-body {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-featured .featured-content {
    flex: 1;
}

.article-featured .featured-content .post-date {
    font-size: 13px;
    color: #6B7280;
    display: block;
    margin-bottom: 12px;
}

.article-featured .featured-content .article-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
}

.article-featured .featured-content .article-title a {
    color: var(--color-text);
    text-decoration: none;
}

.article-featured .featured-content .article-title a:hover {
    color: var(--color-primary);
}

.article-featured .featured-content .article-description {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
}

.article-featured .featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}

.article-featured .featured-footer .inner-category {
    flex: 1;
}

.article-featured .featured-footer .icon-right {
    flex: 0 0 32px;
    margin-left: 16px;
}

/* Article item trong grid */
.blogs-cap-2-grid .article-item-page {
    height: 100%;
}

.blogs-cap-2-grid .article-item-page .inner-article-top {
    display: flex;
    flex-direction: column;
}

.blogs-cap-2-grid .article-item-page .inner-image {
    width: 100%;
}

.blogs-cap-2-grid .article-item-page .inner-content {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.blogs-cap-2-grid .article-item-page .inner-content .left {
    flex: 1;
}

.blogs-cap-2-grid .article-item-page .inner-category {
    padding: 0 16px 16px;
    border-top: none;
}

.article-hot-top-category .article-item:hover {
    border-color: var(--bg-border-hover);
}

.box-blogs-right-article .list-small .article-item .inner-content .category-author .author .name-by {
    font-size: 14px;
}

.box-blogs-right-article .list-small .article-item:hover {
    border-color: var(--bg-border-hover);
}

.toast-body.bg-success {
    background-color: #ebfff0 !important;
}

/* ===== Block: Lastest Articles (box-blog-author / view_blog_tac_gia) =====
   Neutral grays/borders (#6B7280, #EEEEEE, #F3F4F6, #E5E7EB) match the
   existing blog card design language (.article-featured / .blogs-cap-2). */
.box-blog-author .blog-author-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.box-blog-author .blog-author-head .title-section {
    margin-bottom: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.box-blog-author .ba-sort-toggle {
    border: 1px solid #FAFAFA;
    border-radius: 16px;
    padding: 8px 36px 8px 15px;
    font-size: 14px;
    color: var(--color-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
    outline: none;
    min-width: 160px;
    background-color: #FAFAFA;
    height: 56px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}

.box-blog-author .ba-sort-toggle.dropdown-toggle::after {
    display: none;
}

.box-blog-author .blog-author-sort .dropdown-menu {
    min-width: 170px;
    padding: 6px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(5, 54, 96, 0.08);
}

.box-blog-author .blog-author-sort .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text);
}

.box-blog-author .blog-author-sort .dropdown-item:hover,
.box-blog-author .blog-author-sort .dropdown-item:focus {
    background: var(--bg-light-hover);
    color: var(--color-highlight-light);
}

.box-blog-author .blog-author-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Shared meta (date / title / description) */
.box-blog-author .post-date {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6B7280;
}

.box-blog-author .article-title {
    margin-bottom: 0;
}

.box-blog-author .article-title a {
    color: var(--color-text);
    text-decoration: none;
}

.box-blog-author .article-title a:hover {
    color: var(--color-highlight-light);
}

.box-blog-author .article-description {
    font-size: 14px;
    line-height: 1.6;
    color: #6B7280;
}

/* Category pills */
.box-blog-author .ba-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.box-blog-author .article-category a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    background: var(--bg-light-hover);
    color: var(--color-highlight-light);
    text-decoration: none;
    transition: background .2s;
}

.box-blog-author .article-category a:hover {
    background: var(--bg-blue-100);
}

/* ===== Featured card (layout ngang) ===== */
.box-blog-author .blog-author-featured {
    display: flex;
    flex-direction: row;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
    padding: 16px;
}

.box-blog-author .bf-image {
    flex: 0 0 48%;
    max-width: 48%;
}

.box-blog-author .bf-image a {
    display: block;
    height: 100%;
}

.box-blog-author .bf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.box-blog-author .bf-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 40px;
}

.box-blog-author .bf-content {
    flex: 1;
}

.box-blog-author .bf-content .article-title {
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.box-blog-author .bf-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}

/* ===== Grid card (layout doc) ===== */
.box-blog-author .blog-author-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.box-blog-author .blog-author-card:hover {
    border-color: var(--bg-border-hover);
    box-shadow: 0 8px 24px rgba(5, 54, 96, 0.08);
}

.box-blog-author .bc-image .img {
    border-radius: 0;
}

.box-blog-author .bc-body {
    flex: 1;
    padding: 16px;
}

.box-blog-author .bc-body .article-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-blog-author .bc-body .article-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-blog-author .bc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 16px;
}

.box-blog-author .bc-footer .ba-cats {
    flex: 1;
}

.box-blog-author .ba-arrow {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: transform .2s;
}

.box-blog-author .blog-author-card:hover .ba-arrow {
    transform: translate(2px, -2px);
}

.blog-author-sort .dropdown-toggle span.icon-show,
.blog-author-sort.show .dropdown-toggle span.icon-an {
    display: none;
}

.blog-author-sort.show .dropdown-toggle span.icon-show {
    display: block;
}

/* ===== Trending Topics block ===== */
.box-trending-topics .trending-link:hover {
    transform: translateY(-1px);
}

.blogs-cap-2-grid .article-item:hover {
    border-color: var(--bg-border-hover);
}

.box-section-blogs-00.box-section-detail-blogs-00 .categories-top-bar {
    border-bottom: 1px solid #EEEEEE;
}

.topic-card-latest:hover {
    color: var(--color-text);
}

.page-404-warp {
    background: linear-gradient(180deg, #DEEFFF 0%, #FFFFFF 96.43%);
    overflow-x: hidden;
    padding: 80px 0 10px;
}

.page-404-content .img {
    padding-top: 59%;
}

.page-404-content .img img {
    object-fit: contain;
}

.page-404-content .page-404-message {
    max-width: 700px;
    margin: 24px auto 0;
    padding: 0 20px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.6;
}

.page-404 .img-bf {
    position: relative;
}

.page-404 .img-bf .action-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.page-404 .img-bf img {
    width: 100%;
    height: 7vw;
    object-fit: contain;
}

.section-home-success .container {
    position: relative;
    z-index: 1;
}

/* ===== l546tdg: Reviews Grid with Filter ===== */
/* selectpicker button */
.warp-reviews-grid-filter .filter-select-wrap .bootstrap-select>.dropdown-toggle:focus,
.warp-reviews-grid-filter .filter-select-wrap .bootstrap-select.show>.dropdown-toggle {
    border-color: var(--bg-border-hover) !important;
    background-color: #fff;
    box-shadow: none !important;
}



.warp-reviews-grid-filter .filter-select-wrap .bootstrap-select .dropdown-menu li>a:hover,
.warp-reviews-grid-filter .filter-select-wrap .bootstrap-select .dropdown-menu li.selected>a {
    background: #F3F4F6;
    color: #111827;
}


warp-reviews-grid-filter .img-bf img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

warp-reviews-grid-filter .img-bf img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.warp-reviews-grid-filter .btn--search-review {
    background: #053660;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.warp-reviews-grid-filter .btn--search-review:hover {
    background: #042d50;
}

/* Grid */
.warp-reviews-grid-filter .review-quote-icon {
    margin-bottom: 20px;
}

.warp-reviews-grid-filter .review-stars span.star-4 svg path:nth-child(5) {
    display: none;
}

.warp-reviews-grid-filter .review-stars span.star-3 svg path:nth-child(4),
.warp-reviews-grid-filter .review-stars span.star-3 svg path:nth-child(5) {
    display: none;
}

.warp-reviews-grid-filter .review-stars span.star-2 svg path:nth-child(3),
.warp-reviews-grid-filter .review-stars span.star-2 svg path:nth-child(4),
.warp-reviews-grid-filter .review-stars span.star-2 svg path:nth-child(5) {
    display: none;
}

.warp-reviews-grid-filter .review-stars span.star-1 svg path:nth-child(2),
.warp-reviews-grid-filter .review-stars span.star-1 svg path:nth-child(3),
.warp-reviews-grid-filter .review-stars span.star-1 svg path:nth-child(4),
.warp-reviews-grid-filter .review-stars span.star-1 svg path:nth-child(5) {
    display: none;
}

/* Author */
.warp-reviews-grid-filter .author-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #3A464F;
}

.warp-reviews-grid-filter .author-verified .icon-google {
    display: inline-block;
    vertical-align: middle;
}

/* Pagination */
.warp-reviews-grid-filter .reviews-pagination .pagination {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.warp-reviews-grid-filter .reviews-pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    background: #fff;
    transition: all 0.15s;
}

.warp-reviews-grid-filter .reviews-pagination .page-item.active .page-link {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
    font-weight: 600;
}

.warp-reviews-grid-filter .reviews-pagination .page-item .page-link:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.warp-reviews-grid-filter .reviews-pagination .page-item.active .page-link:hover {
    background: #1E40AF;
    border-color: #1E40AF;
    color: #fff;
}

.warp-reviews-grid-filter .reviews-pagination .page-item.ellipsis .page-link {
    border: none;
    background: transparent;
    cursor: default;
}

.warp-reviews-grid-filter .reviews-pagination .page-prev .page-link,
.warp-reviews-grid-filter .reviews-pagination .page-next .page-link {
    color: #6B7280;
}

.page-404-warp .img-bf {
    position: relative;
}

.page-404-warp .img-bf .action-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.warp-menu-article.show-logo .categories-top-bar .logo {
    width: 44px;
    max-width: 44px;
    margin-right: 25px;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.section-learning-what-youll .content-right-panel .item-when img {
    width: 24px;
    height: 24px;
}

.section-learning-start-here .content .item .dsc ul>li span.icon img {
    width: 24px;
    height: 24px;
}

.box-service-key-features .content .info-right .list-key .key img {
    width: 24px;
    height: 24px;
}

.popular-migration--arrow-separator img {
    width: 32px;
    height: 32px;
}

.box-section-step .info .content-right .item span.icon-right img {
    width: 32px;
    height: 32px;
}

.warp-reviews-grid-filter .review-stars span,
.warp-service-loved-by-customer .list-loved-by-customer .item .note span {
    gap: 8px;
    display: flex;
}

.category-author .categorys span.article-category {
    display: inline-flex;
}

.box-section-detail-ld-01 nav.breadcrumbs-section {
    display: flex;
    justify-content: center !important;
}

.box-blog-unlock-warp {
    position: relative;
    padding: 80px 0;
}

.box-blog-unlock-warp .img-bf {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    z-index: 1;
    pointer-events: none;
}

.box-blog-unlock-warp .img-aft {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.nh-ajax-loading {
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-shell-embedded {
    height: 100vh;
}

.filter-search-btn {
    height: 56px;
    border: 0;
    background: var(--color-text);
    color: #fff;
    width: 105px;
    border-radius: 99px;
    flex: 0 0 105px;
}

.box-service-who-is-for .img-before img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    bottom: 0;
}

.inter-content-sp .img svg [class^="icon-chinh-"],
.inter-img .img svg [class^="icon-chinh-"] {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
/* Firefox */
.dropdown-menu .inner,
.dropdown-menu.inner {
    scrollbar-width: thin;
    scrollbar-color: #b8bec7 transparent;
}

/* Chrome / Edge / Safari */
.dropdown-menu .inner::-webkit-scrollbar,
.dropdown-menu.inner::-webkit-scrollbar {
    width: 4px;
}

.dropdown-menu .inner::-webkit-scrollbar-track,
.dropdown-menu.inner::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-menu .inner::-webkit-scrollbar-thumb,
.dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: #aeb4bc;

    /* Làm phần hiển thị thực tế chỉ ~2px */
    border: 1px solid transparent;
    background-clip: content-box;

    border-radius: 999px;
}

.dropdown-menu .inner::-webkit-scrollbar-thumb:hover,
.dropdown-menu.inner::-webkit-scrollbar-thumb:hover {
    background: #858d98;
    background-clip: content-box;
}

.dropdown-menu .inner::-webkit-scrollbar-button,
.dropdown-menu.inner::-webkit-scrollbar-button {
    display: none;
}

.bootstrap-select .dropdown-menu.inner {
  padding-bottom: 5px;
}
@media (min-width: 992px) {
    /* ============================================================
   RESPONSIVE - 992px TO 1600px (Range)
   ============================================================ */

    .container {
        padding: 0 75px;
    }
}

@media (min-width:1200px){
    .section-footer-03>.container>.row:before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 1px;
        width: calc(100% - 20px);
        background: #ddd;
        top: -15px;
    }
    
    .section-footer-03>.container>.row {
        position: relative;
    }
}
@media (max-width: 1299.98px) {

    /* ============================================================
   RESPONSIVE - MAX-WIDTH: 1200px (Desktop)
   ============================================================ */

    .title-section,
    .banner-home .title-section,
    .box-banner-pricing .title-section,
    .box-migration-tool-banner .title-section {
        font-size: 36px !important;
    }

    .slogan-section {
        font-size: 18px;
    }

    .dsc-section {
        font-size: 16px;
    }

    .article-item .categorys .article-category a {
        height: 25px;
        padding: 0px 10px;
        font-size: 12px;
        line-height: 23px;
        line-height: 25px;
    }
    span.article-category {
        display: inline-flex;
        align-items: center;
    }

    .category-author .author .name-by {
        font-size: 13px;
    }

    .category-author .author .icon {
        flex: 0 0 20px;
        max-width: 20px;
    }

    .category-author .author .icon img {
        width: 20px;
        height: 20px;
    }

    .box-home-section-article-01 .box-content-article-02 .article-item {
        width: 350px;
    }

    .box-content-article-02 .swiper {
        padding-bottom: 50px;
    }

    .box-content-article-02 .swiper span.swiper-pagination-bullet {
        background: #fff;
    }

    .menu-footer ul>li>a {
        font-size: 14px;
    }

    .copyright {
        font-size: 14px;
    }

    .section-footer-01>.container>.row>div:nth-child(2),
    .section-footer-01>.container>.row>div:nth-child(3),
    .section-footer-01>.container>.row>div:nth-child(4) {
        display: none;
    }

    .box-fanpage {
        display: none;
    }

    .logo-section img {
        height: 40px;
    }

    .header-mobile>.container>.row {
        margin-right: 0;
        margin-left: 0;
    }

    .header-mobile>.container>.row>div {
        padding-right: 0;
        padding-left: 0;
        z-index: 9988;
        position: relative;
    }

    .header-mobile {
        background: #DEEFFF;
        padding: 10px 0;
        height: 68px;
        display: flex;
        align-items: center;
    }

    .warp-service-left .dsc-service {
        margin-bottom: 30px;
    }

    .box-service-compare-features .features .list-bottom .item-bottom .btn-more {
        padding: 0 1px;
    }

    .box-service-compare-features .features .list-bottom .item-bottom .btn-more a {
        font-size: 9px;
        height: 30px;
        border-radius: 9px;
        text-align: center;
        padding: 0 5px;
        line-height: 1.3;
    }

    .section-footer-02 {
        max-width: calc(100% - 30px);
    }

    .section-footer-01 {
        max-width: calc(100% - 30px);
        margin-bottom: -2px;
    }

    .language-section .language-switch .language-picker {
        display: flex;
        justify-content: flex-end;
    }

    .section-footer-04 {
        position: relative;
        max-width: calc(100% - 30px);
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        padding-bottom: 15px;
    }

    .section-footer-03 {
        max-width: calc(100% - 30px);
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #efefef;
    }
    .section-footer-03:before {
        display: none;
    }

    body {
        overflow-x: hidden;
    }

    [nh-pagination="load_more"] .page-link {
        color: var(--color-text);
        font-weight: 600;
        display: inline-flex;
        padding: 5px;
    }

    .box-section-search {
        /* display: none; */
        position: static;
    }

    .box-section-search .search-info {
        right: auto;
        left: 50%;
        width: 100%;
        max-width: calc(100% - 30px);
    }

    .logo-section {
        position: relative;
        z-index: 5555;
    }

    .section-learning-start-here .content>.row>div:nth-child(2) .item {
        padding: 15px;
        border-radius: 16px;
    }

    .btn-line,
    .btn-text {
        font-size: 16px;
        padding: 0px 20px;
        height: 50px;
    }

    .action-btn {
        gap: 15px;
    }

    .box-footer-pc {
        display: none;
    }

    .box-footer-mobile {
        display: block;
    }

    .section-footer-01>.container>.row {
        display: flex;
        justify-content: center;
    }

    .section-footer-01>.container>.row>div:nth-child(2),
    .section-footer-01>.container>.row>div:nth-child(3),

    .section-footer-01>.container>.row>div:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .box-fanpage .list-fanpage {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .box-fanpage .list-fanpage .item:last-child {
        margin-right: 0;
    }

    .img-before-top {
        display: none;
    }

    .img-footer-right {
        display: none;
    }

    .section-home-supported .inter-content-sp .item:hover .icon svg path {
        stroke: var(--color-highlight);
    }

    .box-blog-category .content .breadcrumbs-section {
        display: flex;
        justify-content: center;
    }

    .box-blog-unlock-warp {
        padding: 60px 0;
    }

    .warp-menu-article.show-logo .categories-top-bar .logo {
        margin-right: 0;
    }

    .box-blog-unlock-warp .img-aft {
        display: none;
    }

    .section-home-supported .inter-content-sp .swiper {
        padding-bottom: 20px;
    }

    .section-service-banner-01,
    .banner-home,
    .box-banner-migration-tool,
    .section-banner-workflows-01 {
        padding-top: 10px !important;
    }

    .box-section-blogs-01 {
        padding-top: 10px;
    }

    .nc-search-bar-section {
        margin-top: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 15px;
    }

    .box-sarch-01 {
        margin-bottom: 40px;
        padding-top: 10px;
    }

    .box-section-blogs-01.box-section-policy-01 {
        margin-bottom: 30px;
    }

    .footer-section-article-04 .img-footer-page {
        width: calc(100% - 30px);
        left: 15px;
    }

    .box-section-blogs-01.box-section-auth-mb-01 {
        margin-bottom: 50px;
    }

    .box-section-learning-category-01 {
        margin-bottom: 50px;
    }
}

@media (min-width: 576px) and (max-width: 1299.98px) {
    /* ============================================================
   RESPONSIVE - 576px TO 1200px (Range)
   ============================================================ */

    .box-service-compare-features .features .list-bottom .item-bottom .btn-more a {
        font-size: 12px;
        height: 40px;
    }

    .footer-contact {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }

    .footer-contact .dsc {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact form .form-group {
        margin-left: auto;
        margin-right: auto;
    }

    .section-footer-01 {
        padding-top: 30px;
    }

    .article-item .inner-article-top .inner-content .icon-right {
        display: none;
    }

    .article-item .article-title {
        font-size: 16px;
    }

    .box-partner-banner .title-section {
        font-size: 53px;
    }

    .warp-service-left .content-service-left .item .key svg {
        width: 95px;
        height: 95px;
    }

    .menu-footer .title-footer {
        font-size: 15px;
    }

    .footer-contact form .form-group .form-control {
        font-size: 14px;
    }

    .footer-contact form .form-group span.icon {
        top: 18px;
    }

    .banner-home .top .title-center,
    .box-banner-pricing .info .title-center {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .banner-home .info-content .dsc-center,
    .box-banner-pricing .info .dsc-center {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .section-home-how-it-workt .content .warp-tab-nav .nav.nav-tabs .nav-item>a .number {
        font-size: 30px;
    }

    .section-home-how-it-workt .content .warp-tab-nav .nav.nav-tabs .nav-item>a {
        font-size: 16px;
        padding-left: 16px;
        padding-right: 16px;
        height: 80px;
    }

    .works .tab-content .content-item .item-bottom .left .name {
        font-size: 22px;
    }

    .works .tab-content .content-item .item-bottom .left .dsc {
        font-size: 14px;
    }

    .section-home-count .top .title-section {
        font-size: 25px;
    }

    .section-home-count .infnter-content .item .top-item {
        font-size: 22px;
    }

    .menu-footer ul>li {
        margin-bottom: 15px;
    }

    .box-service-key-features .content .info-right .dsc {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .btn-bg-text a {
        height: 45px;
    }

    .box-service-workflow .content-inter .next svg {
        width: 40px;
        height: 40px;
    }

    .container {
        padding: 0 55px;
    }

    .article-item .inner-article-top .inner-content {
        margin-bottom: 10px;
    }

    .category-author {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .category-author .categorys {
        max-width: initial;
    }

    .article-item .inner-image {
        margin-bottom: 15px;
    }

    .box-home-section-article-01 {
        padding: 60px 0 60px;
    }

    .box-blog-category .title-section {
        font-size: 35px;
    }

    .box-blog-category .content .info-title .dsc {
        font-size: 16px;
    }

    .list-small .category-author {
        display: none;
    }

    .list-small .article-item .inner-image {
        flex: 0 0 140px;
        max-width: 140px;
    }

    .list-small .article-item .inner-content {
        flex-basis: calc(100% - 140px);
        max-width: calc(100% - 140px);
        padding-left: 15px;
    }

    .slider-blog-page .title-section {
        font-size: 25px;
    }

    .box-section-blogs-mb-02 {
        margin-bottom: 50px;
    }

    .section-blog-unlock .content .title-blog {
        font-size: 23px;
    }

    .section-blog-unlock {
        background-position: right;
        height: auto;
        padding: 40px 40px;
    }

    .footer-section-article-04 .img-footer-page {
        width: calc(100% - 30px);
        height: calc(100% - 15px);
        left: 15px;
    }

    .box-section-page-02 {
        padding-top: 60px;
        padding-bottom: 0;
    }

    .box-article-detail-03 {
        padding-top: 20px;
    }

    .box-article-share .social-share .btn-social a svg {
        width: 30px;
        height: 30px;
    }

    .box-article-share .social-share {
        gap: 15px;
    }

    .article-bottom-author .author .icon img {
        width: 36px;
        height: 36px;
    }

    .article-bottom-author .author .name-by {
        font-size: 14px;
    }

    .banner-home .info-content .buy-btn-banner .btn-migration a {
        font-size: 14px;
    }

    .support-platform--btn-search {
        padding: 12px 14px;
    }

    .box-process-works .content-inter:before {
        top: 120px;
    }

    .box-process-works .content-inter:before {
        display: none;
    }

    .list-cart-mgr.grid {
        gap: 10px;
    }

    [data-where-innovation].wi-animating .where-innovation-thumb[data-distance="0"] .where-innovation-thumb-inner {
        transform: translateY(0) scale(0.778);
    }
    .box-section-home-faq.box-section-migration-078 {
        padding-top: 0;
        margin-bottom: 60px;
    }
}

@media (min-width: 767px) and (max-width: 1199.98px) {
    /* ============================================================
   RESPONSIVE - 767px TO 1200px (Range)
   ============================================================ */

    .box-home-company .content .item .item-content .img {
        padding-top: 124%;
    }

    .box-search-item-02>.container>.row>div:nth-child(1) {
        flex: 0 0 295px;
        max-width: 295px;
    }

    .box-search-item-02>.container>.row>div:nth-child(2) {
        flex-basis: calc(100% - 295px);
        max-width: calc(100% - 295px);
    }

    .filter-sidebar .filter-group .filter-header {
        font-size: 15px;
        padding: 10px 16px;
        height: 50px;
    }

    .filter-sidebar .filter-check .filter-name {
        font-size: 14px;
    }

    .box-search-article .search-result-item {
        padding: 15px;
    }

    .box-search-article .search-result-icon {
        border-radius: 8px;
    }

    .box-search-article .search-result-item {
        padding: 20px;
    }

    .section-footer-02 .container>.row>div {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* ============================================================
   RESPONSIVE - 992px TO 1200px (Range)
   ============================================================ */

    .btn-bg-text a {
        height: 50px;
        font-size: 15px;
    }

    body {
        font-size: 15px;
    }

    .menu-footer .title-footer {
        font-size: 16px;
    }

    .footer-contact form .form-group .form-control {
        font-size: 14px;
        padding-left: 45px;
    }

    .footer-contact form .form-group span.icon {
        top: 17px;
        left: 15px;
    }

    .footer-contact form .form-group span.icon svg {
        width: 20px;
        height: 20px;
    }

    .footer-contact form .form-group span.btn,
    .footer-contact form .form-group span.btn-all {
        font-size: 14px;
        width: 80px;
    }

    .box-fanpage .list-fanpage .item img {
        width: 36px;
        height: 36px;
    }

    .box-fanpage .list-fanpage .item {
        margin-right: 20px;
    }

    .banner-home .top .title-center,
    .box-banner-pricing .info .title-center {
        font-size: 30px;
    }

    .article-item .article-title {
        font-size: 15px;
    }

    .article-item .inner-article-top .inner-content .left .article-title {
        font-size: 17px;
    }

    .box-blog-category .content .info-title .title-section {
        font-size: 28px;
    }

    .box-article-content .title-article {
        font-size: 20px;
    }

    .breadcrumbs-section a {
        font-size: 15px;
    }

    .box-blog-category .date-author span.post-date {
        font-size: 15px;
    }
}

@media (max-width: 991.98px) {
    .section-home-supported .cart-marquee .cart-marquee-group {
        gap: 20px;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    /* ============================================================
   RESPONSIVE - 576px TO 992px (Range)
   ============================================================ */

    .section-home-lets-move .migration-wrapper .link-book-a-demo {
        margin-top: 30px;
        text-align: center;
    }
}

@media (max-width: 991px) {
    /* Responsive */

    .article-featured {
        flex-direction: column;
    }

    .article-featured .featured-image,
    .article-featured .featured-body {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .article-featured .featured-body {
        padding: 20px;
    }

    /* ===== Responsive ===== */

    .box-blog-author .blog-author-featured {
        flex-direction: column;
    }

    .box-blog-author .bf-image {
        flex: 0 0 100%;
        max-width: 100%;
        height: 220px;
    }

    .box-blog-author .bf-body {
        padding: 24px;
    }
}

@media (max-width: 767.98px) {
    .blog-author-sort .dropdown-toggle {
        width: 120px;
    }

    /* ============================================================
   RESPONSIVE - MAX-WIDTH: 767px (Tablet Small)
   ============================================================ */

    .breadcrumbs--section a span {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        height: 24px;
    }

    .banner-home .info-content .dsc-center {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .banner-home .info-content .buy-btn-banner .btn-migration a {
        font-size: 14px;
        height: 45px;
        padding: 0px 5px 0 10px;
        text-align: center;
    }

    .banner-home .info-content .buy-btn-banner .btn-migration.btn-migration-demo a {
        padding-right: 15px;
    }

    .section-more-than {
        padding: 30px 0 40px;
    }

    .section-more-than .info-left .title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 21px;
    }

    .list-more-than .item .img img {
        height: 35px;
    }

    .section-home-supported .inter-content-sp .item .img {
        width: 60px;
        height: 60px;
    }

    .section-home-supported .inter-content-sp .item .icon svg {
        width: 75px;
        height: 75px;
    }

    .section-home-supported .inter-content-sp .item {
        padding-top: 8px;
        margin-bottom: 20px;
    }

    .section-home-supported .cart-marquee .col-item:nth-child(even) {
        margin-top: 85px;
    }

    .section-home-supported .inter-content-sp .item .img img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .section-home-service ul.best-for-list li,
    .section-home-service .title-best-for {
        font-size: 14px;
    }

    .section-home-service .title-best-for {
        margin-bottom: 10px;
    }

    .works .tab-content .content-item .item-bottom .left .name {
        font-size: 16px;
    }

    .works .tab-content .content-item .item-bottom .inter-img {
        padding-left: 0;
    }

    .works .tab-content .content-item .item-bottom>.row>div:nth-child(1) {
        order: 2;
        margin-top: 20px;
    }

    .section-home-count .inter-img {
        display: none;
    }

    .section-home-count .top {
        margin-bottom: 20px;
    }

    .section-home-highlight-brand {
        padding: 20px 20px 0;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .section-home-highlight-brand .item .description {
        padding-left: 0;
        border: 0;
        font-size: 14px;
    }

    .section-home-highlight-brand .swiper {
        padding-bottom: 40px;
    }

    .box-home-highligh-brand {
        margin-bottom: 40px;
    }

    .box-home-section-article-01 {
        padding: 60px 0 60px;
    }

    .box-home-article-02 {
        margin-bottom: 30px;
    }

    .section-home-lets-move .migration-wrapper .link-book-a-demo {
        margin-top: 20px;
    }

    .box-service-banner-01 .content-banner .btn-you-name .btn-gradient {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .box-service-key-features .content .info-right .dsc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .btn-bg-text a {
        height: 45px;
        font-size: 16px;
    }

    .migration-tool--start-btn-white,
    .migration-tool--start-btn-black {
        font-size: 16px;
        line-height: 20px;
    }

    .feature-cart--item:hover .feature-cart--content {
        animation: none;
    }

    .feature-cart--item:hover .feature-cart--desc {
        animation: none;
    }

    .menu-footer .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .menu-footer .top .icon-down svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .menu-footer .top .icon-down {
        width: 25px;
        text-align: center;
    }

    .menu-footer.open .top .icon-down svg {
        transform: rotate(180deg);
    }

    .menu-footer .content-menu {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.35s ease;
    }

    .menu-footer .content-menu>ul {
        overflow: hidden;
        min-height: 0;
    }

    .menu-footer.open .content-menu {
        grid-template-rows: 1fr;
    }

    .box-section-blogs-mb-02>.container>.row>div {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .btn-background-empty a {
        height: 46px;
    }

    .article-bottom-author .author .more {
        display: none;
    }

    [data-where-innovation].wi-animating .where-innovation-thumb[data-distance="0"] .where-innovation-thumb-inner {
        transform: translateY(0) scale(0.75);
    }

    .section-home-service .content-section .tab-top .nav.nav-tabs span.icon-right svg {
        width: 20px;
    }

    .learning-path-title-btn {
        font-size: 16px;
        padding: 14px 16px;
    }

    .learning-path-titles-col {
        margin-bottom: 40px;
    }

    .section-footer-01 .box-fanpage {
        display: none;
    }

    .section-footer-03>.container>.row>div:nth-child(2) {
        display: none;
    }

    .section-footer-03>.container>.row>div:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .img-footer-right span.img-footer-01 svg {
        width: 100%;
        height: auto;
    }

    span.img-footer-02 svg {
        width: 100%;
    }

    .box-partner-banner .action-btn {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .box-blog-category.box-case-studies .action-btn {
        display: flex;
        flex-wrap: wrap;
    }

    .box-blog-category.box-case-studies .action-btn .item a {
        height: 48px;
    }

    .box-search-item-02>.container>.row>div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .box-search-item-02>.container>.row>div:nth-child(1) {
        order: 2;
        margin-top: 50px;
    }

    .box-search-article {
        padding-left: 0;
    }

    .box-section-learning-category-02 {
        padding: 0 0 30px;
    }

    .box-view-learning-center-highlight .title-section {
        margin-bottom: 30px;
    }

    .box-view-learning-center-highlight .content>.row>div {
        margin-bottom: 20px;
    }

    .learning-path-articles-wrap {
        padding: 20px;
    }

    .learning-path-article-title {
        font-size: 16px;
    }

    .box-section-learning-category-03 {
        margin-bottom: 50px;
    }

    .box-section-learning-category-04 {
        padding: 50px 0;
    }

    .section-find-useful .title-section {
        margin-bottom: 10px;
    }

    .box-section-learning-category-05 {
        padding: 50px 0;
    }

    .section-cart-01 .info-left .btn-you-name,
    .btn-background-empty button {
        font-size: 16px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* ============================================================
   RESPONSIVE - MAX-WIDTH: 768px (Tablet)
   ============================================================ */

    /* ============================================================
   RESPONSIVE - 576px TO 767px (Range)
   ============================================================ */

    /* ====== FOOTER 576–767px ====== */

    footer {
        padding-top: 5px !important;
        padding-bottom: 15px;
        margin-top: -1px;
        overflow: hidden;
    }

    /* Scroll ngang cho 3 article cards */
    .box-home-section-article-01 .box-content-article-02 .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .box-home-section-article-01 .box-content-article-02 .row>div {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
        padding-left: 8px;
        padding-right: 8px;
    }

    .box-home-section-article-01 .box-content-article-02 .row>div:first-child {
        padding-left: 0;
    }

    .box-home-section-article-01 .box-content-article-02 .row>div:last-child {
        padding-right: 0;
    }

    .box-home-section-article-01 .box-content-article-02 .row::-webkit-scrollbar {
        display: none;
    }

    .box-home-section-article-01 .box-content-article-02 .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Wrapper bo góc */
    .section-footer-01 {
        max-width: calc(100% - 24px);
        padding-top: 40px;
        padding-bottom: 10px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        margin-top: 0;
    }

    .section-footer-02 {
        max-width: calc(100% - 24px);
        padding-bottom: 10px;
        margin-top: -1px;
    }

    .section-footer-03 {
        max-width: calc(100% - 24px);
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* Col contact chiếm full width */
    .section-footer-01>.container>.row>div:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 24px;
    }

    /* Ẩn menu trong section-footer-01 (đã có trong box-footer-mobile) */
    .section-footer-01>.container>.row>div:nth-child(2),
    .section-footer-01>.container>.row>div:nth-child(3),
    .section-footer-01>.container>.row>div:nth-child(4) {
        display: none;
    }

    /* Footer contact căn giữa */
    .footer-contact {
        text-align: center;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact .logo {
        text-align: center;
        margin-bottom: 14px;
    }

    .footer-contact .logo img {
        height: 48px;
    }

    .footer-contact .dsc {
        font-size: 15px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact form {
        margin-bottom: 20px;
    }

    .footer-contact form .form-group {
        margin-left: auto;
        margin-right: auto;
        max-width: 420px;
    }

    .footer-contact form .form-group .form-control {
        height: 50px;
        font-size: 15px;
        padding-left: 44px;
    }

    .footer-contact form .form-group span.icon {
        top: 13px;
    }

    .footer-contact form .form-group span.btn,
    .footer-contact form .form-group span.btn-all {
        height: 42px;
        top: 4px;
        width: 82px;
        font-size: 15px;
    }

    /* Fanpage căn giữa */
    .box-fanpage .list-fanpage {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Menu mobile: 2 cột đều */
    .box-footer-mobile .container>.row>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 8px;
    }

    /* Menu footer dropdown */
    .menu-footer .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 0;
        cursor: pointer;
    }

    .menu-footer .title-footer {
        font-size: 15px;
        margin-bottom: 0;
        color: #3A464F;
    }

    .menu-footer .top .icon-down {
        display: none !important;
    }

    .menu-footer .content-menu {
        display: block;
        padding-top: 10px;
    }

    .menu-footer ul>li {
        margin-bottom: 10px;
    }

    .menu-footer ul>li>a {
        font-size: 14px;
        color: #3A444E;
    }

    /* Section footer-02 mobile: 2 cột */
    .section-footer-02 .container>.row>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Copyright và legal links căn giữa */
    .section-footer-03 .row>div {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    /* ===== section-home-lets-move 576–767px ===== */

    /* Thứ tự: cube (2) → Full Support (3) → 2 features (1) */

    /* Cube */

    /* Full Support — giống mobile: không nền */

    /* 2 feature cards — giống mobile: có card nền + border */

    /* Button */
    .section-home-lets-move .migration-wrapper .link-book-a-demo {
        margin-top: 24px;
    }
}

@media (max-width: 767px) {
    /* Stats */

    /* Responsive */

    .box-author-brc .author-brc-title {
        font-size: 2.4rem;
        line-height: 3.2rem;
    }

    .box-author-brc .author-brc-desc {
        max-width: 100%;
    }

    .article-featured .featured-content .article-title {
        font-size: 18px;
    }

    .box-blog-author .blog-author-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .box-blog-author .blog-author-head .title-section {
        font-size: 24px;
    }

    .box-blog-author .bf-content .article-title {
        font-size: 20px;
    }

    .page-404 .img-bf img {
        height: 15vw;
        object-fit: cover;
    }

    .page-404-warp {
        padding: 40px 0 20px;
    }

    .box-blog-category {
        border-radius: 20px;
        padding: 15px 15px 1px 15px;
    }
}

@media (max-width: 575.98px) {
    /* ============================================================
   RESPONSIVE - MAX-WIDTH: 575px (Mobile)
   ============================================================ */

    .box-search-article .search-result-item {
        padding: 14px 14px;
        gap: 12px;
    }

    .box-search-article .search-result-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    /* ============================================================
   RESPONSIVE - MAX-WIDTH: 576px (Mobile)
   ============================================================ */

    .section-footer-01 {
        max-width: calc(100% - 30px);
        padding-top: 30px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        padding-bottom: 0;
    }

    .section-footer-02 {
        max-width: calc(100% - 30px);
        padding-bottom: 10px;
        margin-top: -1px;
    }

    .section-footer-01 .container>.row>div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .section-footer-01 .container>.row>div:nth-child(2),
    .section-footer-01 .container>.row>div:nth-child(3) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .footer-contact .dsc {
        margin-bottom: 15px;
        text-align: center;
        font-size: 16px;
    }

    .section-footer-02>.container>.row>div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .box-fanpage .list-fanpage .item {
        margin-right: 5px;
    }

    .box-fanpage .list-fanpage .item img {
        width: 30px;
        height: 30px;
    }

    footer {
        padding-bottom: 15px;
        padding-top: 10px;
        margin-top: -1px;
    }

    .footer-contact .logo {
        text-align: center;
        margin-bottom: 15px;
    }

    .footer-contact .logo img {
        height: 45px;
    }

    .footer-contact form .form-group .form-control {
        border: 1px solid #e3e3e3;
        font-size: 15px;
        height: 45px;
        padding-left: 35px;
    }

    .migration_tool .breadcrumbs--section a:nth-child(2) span {
        width: 40px;
    }

    .box-blog-category .content .info-title {
        margin-bottom: 15px;
    }

    .box-blog-category .list-category .item>a .icon {
        margin-right: 6px;
    }

    .list-small .article-item .inner-image {
        flex: 0 0 130px;
        max-width: 130px;
    }

    .list-small .article-item .inner-content {
        flex-basis: calc(100% - 130px);
        max-width: calc(100% - 130px);
        padding-left: 10px;
    }

    .list-small .article-item {
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 20px;
    }

    .list-small .article-item .inner-content .article-title {
        font-size: 16px;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-small .article-item .inner-content .category-author {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .box-section-blogs-mb-02 {
        margin-bottom: 20px;
    }

    .box-section-blogs-mb-03 {
        margin-bottom: 40px;
    }

    .pagination {
        margin-top: 20px;
    }

    .section-blog-unlock {
        padding: 30px 20px;
        border-radius: 20px;
        height: auto;
    }

    .section-blog-unlock .content .title-blog {
        font-size: 25px;
        text-align: center !important;
    }

    .section-blog-unlock .content .dsc-blog {
        margin-bottom: 15px;
        text-align: center !important;
    }

    .box-section-page-02 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .breadcrumbs-section a {
        text-align: center;
        font-size: 16px;
        white-space: nowrap;
    }

    .box-blog-category .date-author span.post-date {
        font-size: 13px;
        margin-right: 12px;
    }

    .box-blog-category .date-author .author .icon img {
        width: 25px;
        height: 25px;
    }

    .box-blog-category .date-author .author .name-by {
        font-size: 13px;
    }

    .box-article-detail .category-article,
    .box-article-detail-new .category-article {
        margin-top: 15px;
        gap: 5px;
    }

    .box-article-detail .category-article span.category a,
    .box-article-detail-new .category-article span.category a {
        font-size: 13px;
        height: 28px;
        padding: 0 10px;
    }

    .box-blog-category .date-author .author .icon {
        flex: 0 0 25px;
        max-width: 25px;
    }

    .box-article-detail-03 {
        padding-top: 0;
    }

    .box-article-content .title-article {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .box-article-share .social-share {
        display: flex;
        justify-content: flex-start;
        gap: 5px;
    }

    .box-article-share {
        /* margin-top: 15px; */
        display: flex;
        justify-content: flex-end;
    }

    .article-bottom-author .author .icon {
        flex: 0 0 30px;
        max-width: 30px;
    }

    .article-bottom-author .author .icon img {
        width: 35px;
        height: 35px;
    }

    .box-article-share .social-share .btn-social svg {
        width: 25px;
        height: 25px;
    }

    .box-section-blogs-01.box-section-detail-blog-01 .box-blog-category.box-article-detail {
        margin-bottom: 0;
    }

    .language-section .language-switch .language-picker svg {
        width: 28px;
        height: 28px;
    }

    /* .link-more a home-key → btn-all responsive đã có trong btn.css */

    .section-home-count .infnter-content .item .top-item {
        font-size: 25px;
    }

    .section-home-highlight-brand .item .img img {
        height: 35px;
    }

    .section-home-highlight-brand .item .img {
        margin-bottom: 10px;
    }

    .section-home-case-studies .article-item .item .inner-image {
        margin-bottom: 10px;
    }

    /* .link-book-a-demo a → btn-all responsive đã có trong btn.css */

    .article-item .inner-article-top .inner-content {
        margin-bottom: 15px;
    }

    .article-item .inner-article-top .inner-content .icon-right {
        flex: 0 0 40px;
    }

    .article-item .inner-article-top .inner-content .icon-right svg {
        width: 25px;
        height: 25px;
    }

    .footer-contact form .form-group span.icon {
        top: 10px;
        left: 10px;
    }

    .footer-contact form .form-group span.icon svg {
        width: 18px;
        height: 18px;
    }

    .footer-contact form .form-group span.btn,
    .footer-contact form .form-group span.btn-all {
        top: 4px;
        height: 37px;
        right: 4px;
        width: 75px;
        font-size: 16px;
    }

    .menu-footer .title-footer {
        font-size: 16px;
        margin-bottom: 0;
    }

    .menu-footer ul>li>a {
        font-size: 16px;
    }

    .article-item .item .link-more a {
        font-size: 16px;
    }

    .btn-link-more a {
        height: 40px;
        padding: 0px 20px;
        font-size: 14px;
    }

    .banner-home .info-content .buy-btn-banner {
        gap: 10px;
    }

    .banner-home .info-content .buy-btn-banner .btn-migration {
        flex-basis: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    .section-home-count .top .title-section {
        font-size: 23px;
    }

    .banner-home .info-content .buy-btn-banner .btn-migration span.icon {
        display: none;
    }

    .warp-service-left .content-service-left .item .key svg {
        width: 90px;
        height: 90px;
    }

    .info-modal-cart .cart-top .item.item-search-cart .input .search-btn {
        width: 90px;
        font-size: 13px;
        height: 39px;
    }

    .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        font-size: 13px;
    }

    .button-calculate {
        text-align: center;
    }

    .button-calculate .btn {
        font-size: 13px;
    }

    /* Keep the header + search/sort row pinned at top; only the cart list scrolls. */

    .select .bootstrap-select>.dropdown-menu ul.dropdown-menu>li>a {
        font-size: 14px;
    }

    .btn--banner {
        padding: 9px 20px;
    }

    .warp-banner-01 .inter-img .img-center-warp {
        width: 93.5%;
        top: 7.5%;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .btn-line,
    .btn-text {
        font-size: 14px;
    }

    .menu-footer {
        margin-bottom: 0;
    }

    .section-home-lets-move .migration-wrapper .link-book-a-demo {
        margin-top: 24px;
    }
}

.footer-contact form .form-group span.btn,
.footer-contact form .form-group span.btn-all {
    transform: none;
    background: var(--bg-highlight-light);
}

html,
body {
    overscroll-behavior-y: none;
}

html {
    background-color: #DEEFFF;
}

body {
    background-color: #ffffff;
}

@media (min-width: 1200px) {
    .box-service-choose .dsc-service {
        max-width: 100%;
    }

    .migration-tool--start-image {
        display: block !important;
    }

    .bg--vector {
        position: relative;
    }

    .mapping--sub-link:hover {
        background: #0972CE1A !important;
        color: #3A464F;
    }

    .logo-section img {
        height: 44px;
    }
}

@keyframes cartIconFall {
    0% {
        opacity: 0;
        transform: translateY(-400px);
    }

    60% {
        opacity: 1;
    }

    80% {
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cartIconFloat1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes cartIconFloat2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-home-lets-move .info-center .img-center img,
    .section-home-supported .cart-marquee-track,
    .section-migration-stories .cart-marquee-track,
    .home-key-stre .hk-main-elements,
    .home-key-stre .moving-line,
    .home-key-stre .moving-line2,
    .home-key-stre .anm-top-bottom {
        animation: none !important;
    }
}

.box-section-product-ret {
    background: #f8f9fa;
    padding: 50px 0;
}

.box-page-popular-posts article.article-item:hover,
.box-page-featured-posts .article-item:hover {
    border-color: var(--bg-border-hover);
}

.article-item .categorys .article-category a:hover {
    background: #0972ce29;
}

.box-home-article-page .link-more a:hover svg {
    filter: brightness(0) invert(1);
}

.box-mgr-cart-04.section-cart-05 .warp-service-loved-by-customer .img-before img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.box-mgr-cart-04.section-cart-05 .warp-service-loved-by-customer .after-before img {
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}

.warp-service-loved-by-customer .content {
    position: relative;
    z-index: 2;
}

.box-home-section-article-01 .before img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.bootstrap-select>select.bs-select-hidden, select.bs-select-hidden, select.selectpicker {
    display: none !important;
}

.header-menu.menu-hidden .box-section-search.is-open {
    opacity: 0;
}

.language-current-check{
    color:var(--color-highlight);
    flex:0 0 auto;
    font-size:16px;
    font-weight:700;
    line-height:1;
    margin-left:auto;
}

.language-current-check svg{
    display:block;
    width:16px;
    height:16px;
}

.section-footer-03>.container>.row>div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu-hidden .language-section {
    opacity: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 100%;
    color: #3A464F;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px 20px;
}

.footer-legal-links a,
.footer-cookie-settings {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.footer-cookie-settings {
    justify-content: center;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.footer-legal-links a:hover,
.footer-cookie-settings:hover {
    color: var(--color-highlight);
    text-decoration: underline;
}

.footer-legal-links a:focus-visible,
.footer-cookie-settings:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

.footer-section-article-03 .footer-legal,
.footer-section-article-04 .footer-legal {
    color: #fff;
}

.bootstrap-select .dropdown-menu li a.active {
  background: none ;
}
.bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus {
    background: rgba(9, 114, 206, 0.08) !important;
    color: #0972ce !important;
}
.bootstrap-select .bs-searchbox .form-control {
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
    padding: 8px 12px;
}
.bootstrap-select .dropdown-menu li a {
    border-radius: 10px;
    padding: 8px 12px;
    color: #3a464f;
    display: flex;
    align-items: center;
}
.bootstrap-select>.dropdown-toggle:focus,
.bootstrap-select.show>.dropdown-toggle {
    border-color: #0972ce;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9, 114, 206, 0.18) !important;
}
.bootstrap-select>.dropdown-toggle:hover {
    border-color: rgba(9, 114, 206, 0.28);
}

 .bootstrap-select.error-validation>.dropdown-toggle {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}
@media (max-width: 1299.98px) {
    .section-footer-03>.container>.row {
        row-gap: 12px;
    }

    .section-footer-03>.container>.row>div:nth-child(1),
    .section-footer-03>.container>.row>div:nth-child(2) {
        display: flex;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        justify-content: center;
        text-align: center;
    }

    .section-footer-03 .copyright {
        margin-bottom: 0;
        text-align: center;
    }

    .footer-legal,
    .footer-legal-links {
        justify-content: center;
    }
    .btn-all.btn-all--lg {
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }

    .footer-legal-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        width: 100%;
    }

    .footer-legal-links a {
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
        line-height: 1.4;
        white-space: nowrap;
    }

    .footer-legal-links a,
    .footer-cookie-settings {
        font-size: clamp(14px, 3.8vw, 15px);
    }
}