/* Reset styles for Bootstrap 5 */

/* Remove all margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Reset body styles */
body {
    background-color: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
    overflow-x: hidden;
}

/* Reset headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

}

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h1,
    h1 {
        font-size: 2.5rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

.h2,
h2 {
    font-size: calc(1.325rem + 0.9vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h2,
    h2 {
        font-size: 2rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

.h3,
h3 {
    font-size: calc(1.3rem + 0.6vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h3,
    h3 {
        font-size: 1.75rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

.h4,
h4 {
    font-size: calc(1.275rem + 0.3vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h4,
    h4 {
        font-size: 1.5rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

.h5,
h5 {
    font-size: calc(1.125rem + 0.15vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h5,
    h5 {
        font-size: 1.25rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

.h6,
h6 {
    font-size: calc(1rem + 0.1vw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

@media (min-width: 1200px) {

    .h6,
    h6 {
        font-size: 1.125rem;
        /* 18px */
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
}

/* Reset lists */
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Reset links */
a {
    text-decoration: none;
    color: inherit;
}

/* Reset images */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Reset tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Reset buttons */
button {
    all: unset;
    cursor: pointer;
}

/* Reset forms */
input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
}

/* Reset fieldsets */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Shadow */
.shadow {
    box-shadow: 0 .375rem 1.5rem 0 rgba(140, 152, 164, .125) !important
}

.shadow-sm {
    box-shadow: 0 .375rem .75rem rgba(140, 152, 164, .075) !important
}

.shadow-lg {
    box-shadow: 0 .6125rem 2.5rem .6125rem rgba(140, 152, 164, .175) !important
}

.shadow-xl {
    box-shadow:
        0 1rem 3rem rgba(140, 152, 164, 0.3),
        0 0.5rem 1rem rgba(140, 152, 164, 0.15) !important;
}

.shadow-none {
    box-shadow: none !important
}

.shadow-xl {
    box-shadow: 0 3.75rem 5rem 0 rgba(140, 152, 164, .3) !important
}

/* Spacing */

.pt-120 {
    padding-top: 120px;
}

.pb-120 {
    padding-bottom: 120px;
}

.p-120 {
    padding: 120px 0px;
}

.pt-64 {
    padding-top: 64px;
}

.pb-64 {
    padding-bottom: 64px;
}

.p-64 {
    padding: 64px 0px;
}

.pt-48 {
    padding-top: 48px;
}

.pb-48 {
    padding-bottom: 48px;
}

.p-48 {
    padding: 48px 0px;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .pt-lg-120 {
        padding-top: 120px;
    }

    .pb-lg-120 {
        padding-bottom: 120px;
    }

    .p-lg-120 {
        padding: 120px 0px;
    }

    .pt-lg-100 {
        padding-top: 100px;
    }

    .pt-lg-72 {
        padding-top: 72px;
    }

    .pb-lg-72 {
        padding-bottom: 72px;
    }

    .pt-lg-72 {
        padding-top: 72px;
    }

    .pb-lg-72 {
        padding-bottom: 72px;
    }

    .pb-lg-80 {
        padding-bottom: 80px;
    }

    .pt-lg-64 {
        padding-top: 64px;
    }

    .pb-lg-64 {
        padding-bottom: 64px;
    }

    .p-lg-64 {
        padding: 64px 0px;
    }

    .pt-lg-48 {
        padding-top: 48px;
    }

    .pb-lg-48 {
        padding-bottom: 48px;
    }

    .p-lg-48 {
        padding: 48px 0px;
    }

}

.custom-lh-cta {
    line-height: 1.3 !important;
}

/* Font size */
.fs-xs {
    font-size: 14px !important;

}

.fs-sm {
    font-size: 12px !important;

}

.fs-10 {
    font-size: 10px !important;

}

.fs-16 {
    font-size: 16px !important;

}

.fs-18 {
    font-size: 18px !important;

}

.bg-cta {
    background-image: url(/media/images/bg-cta.png);
    background-size: cover;
    background-size: cover;
}

.bg-dark {
    background-color: #05274d !important;
}

.bg-success {
    background-color: #10B981 !important;
}


.bg-primary-soft {
    background-color: #82c2ff26 !important
}

.bg-secondary-soft {
    background-color: rgba(108, 117, 125, 0.1) !important;
    /* xám */
}

.bg-success-soft {
    background-color: #10b98121 !important;
}

.bg-danger-soft {
    background-color: rgba(220, 53, 69, 0.12) !important;
    /* đỏ */
}

.bg-warning-soft {
    background-color: #fdf39326 !important
}

.bg-info-soft {
    background-color: rgba(51, 74, 192, .1);

}

.bg-teal-soft {
    background-color: oklch(0.943 0.029 294.588)
}

.bg-gradient {
    background-image: linear-gradient(to bottom, #006ccf, #0059aa, #004787, #023565, #052445);
}

.bg-gradient-2 {
    background-image: linear-gradient(to top, #052445, #03315d, #013e76, #004b8f, #0059aa, #0062b9, #016ac8, #0173d8, #0279de, #037ee5, #0484eb, #058af2);
}

.bg-gradient-3 {
    background-image: radial-gradient(circle farthest-side at center bottom, #0258a8, #052445 125%);
}

.bg-gradient-4 {
    background: #ECE9E6;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FFFFFF, #ECE9E6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FFFFFF, #ECE9E6);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-img {

    background: url(/media/images/api-map-vietnam.jpg);
    background-size: cover;
}


/* ================== Content Templates ================== */


body {
    font-family: "Inter", sans-serif;

}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(0 83 255)),
            color-stop(0.72, rgb(0 114 255)),
            color-stop(0.86, rgb(0 120 255)));
}

.card-img-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

/* ===== Button Back Top ===== */

.back-top a {
    position: relative;
    bottom: 70px;
    right: 0;
    border: 2px solid #10b981;
    background-color: #10b981;
    width: 40px;
    height: 40px;
    z-index: 100;
    color: #fff;
    opacity: 0;
    transition: all 0.9s linear 0s;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-decoration: none;
}

.back-top a i {
    font-size: 14px !important;
    line-height: 1;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.back-top a::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: 40px;
    height: 40px;
    animation: ripple 1.6s ease-out infinite;
    opacity: 1;
    background-color: #08e79d;
    border-radius: 10px;
}

@-webkit-keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.back-top {
    position: fixed;
    right: 16px;
    bottom: 0px;
    width: 80px;
    text-align: center;
    margin: auto;
    z-index: 99999;
}

.back-top.active a {
    opacity: 1;
}

.back-top a:hover {
    background-color: #10b981;
    border: 2px solid #10b981;
    color: #fff;
}


/* ================== Components =========================
 =======================================================
*/


.header-dark {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99999;
    background: transparent;
    transition: all 0.4s;
}

.header-dark .languages .dropdown-toggle a {
    color: #fff;
}

.header-dark .navbar-nav .nav-link {
    color: #ffffffbf;
    transition: all 0.4s;
    font-size: 16px;
}

.header-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
    transition: all 0.4s;
}

.header-dark .navbar-nav .nav-link.active {
    color: #ffffff;
}

.header-dark-fix {
    background: #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.header-dark-fix .navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    position: absolute;
    width: 1.375rem;
    height: .125rem;
    background-color: #000000;
    transition-property: transform;
}

.header-dark-fix .navbar-toggler-icon::before,
.header-dark-fix .navbar-toggler-icon::after {
    background-color: #000000;
}


.header-dark.header-dark-fix .navbar-nav .nav-link {
    color: #000000;
    transition: all 0.4s;
}

.header-dark.header-dark-fix .navbar-nav .nav-link:hover {

    color: #006CCF;
    transition: all 0.4s;
}

.header-dark.header-dark-fix .navbar-nav .nav-link.active {

    color: #006CCF;
    transition: all 0.4s;
}


.header-dark.header-dark-fix .languages .dropdown-toggle a {
    color: #000000;
}

@media (max-width: 667px) {
    .header-dark .navbar-nav .nav-link {
        color: #000000;
        transition: all 0.4s;
    }

    .header-dark .navbar-nav .nav-link.active {
        color: #2196F3;
    }

    .header-dark .navbar-nav .nav-link:hover {
        color: #000000;
        transition: all 0.4s;
    }

    .header-dark .languages .dropdown-toggle a {
        color: #000000;
    }
}



@media (min-width: 992px) {

    /* Ẩn header */
    .header-hidden {
        transform: translateY(-100%);
    }

    /* Hiện header */
    .header-visible {
        transform: translateY(0);
    }


    .mega-nav {
        width: 500px;
    }

}

/* ================== Navbar ================== */
.dropdown-toggle::after {
    display: none;
}

@media (min-width: 992px) {
    .navbar-expand-lg .dropdown:hover>.dropdown-menu {
        display: block;
        animation: dropdown-show .25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
}


@keyframes dropdown-show {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.navbar {
    transition: transform 0.3s ease-in-out;

}

.logodark {
    display: none;
}

.logowhite {
    display: block;
}

.navbar-nav .nav-item {
    padding-right: 24px;
}

.navbar-nav .nav-link.show {
    color: #006CCF;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler {
    position: relative;
    width: 1.875rem;
    height: 2.25rem;
    border: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.navbar-toggler-icon {
    top: 50%;
    display: block;
    margin-top: -0.0625rem;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-duration: .075s;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-color: #ffffff;
    background-image: none;
}

.navbar-toggler-icon::before {
    top: -0.4375rem;
    transition: top .075s .12s ease, opacity .075s ease, width .15s ease-in-out;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    display: block;
    width: .9625rem;
    content: "";
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    position: absolute;
    width: 1.375rem;
    height: .125rem;
    background-color: #ffffff;
    transition-property: transform;
}

.navbar-toggler-icon::after {
    right: 0;
    bottom: -0.4375rem;
    transition: bottom .075s .12s ease, transform .075s cubic-bezier(0.55, 0.055, 0.675, 0.19), width .15s ease-in-out;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    display: block;
    width: .9625rem;
    content: "";
    background-color: #ffffff;
}

.btn-close:focus {
    box-shadow: none;
}

.nav-link:focus,
.nav-link:hover {
    color: #006CCF;
}



.theme-dark .nav-link:focus,
.theme-dark .nav-link:hover {
    color: #ffffff;
}

.theme-dark .btn.dropdown-toggle {
    color: #fff;
}


.flag-icon {
    width: 22px;
    height: 22px;
    object-fit: cover;
    margin-right: 6px;
}

.dropdown-item img {
    margin-right: 8px;
}


.dropdown-menu {
    border: 0;


}

.dropdown-menu.show {
    animation: dropdown-show .25s cubic-bezier(.68, -.55, .265, 1.55);

}

.btn.dropdown-toggle.show {
    border-color: #ccc;
}


@keyframes dropdown-show {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/* Switch Dark Mode  */
.form-switch.mode-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
}

.form-switch .form-check-input {
    height: 1.5rem;
    margin-top: unset;
    background-color: #006CCF;
    filter: none;
    border: unset;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");

}

.form-switch .form-check-input {
    width: 2.875em;
    margin-left: -3.375em;
    background-position: left center;
    border-radius: 2.875em;
    transition: background-position .15s ease-in-out;
}

.form-switch.mode-switch .form-check-input {
    order: 2;
    margin-left: 0;

}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}

.form-switch.mode-switch .form-check-label:first-of-type {
    order: 1;
    margin-right: .625rem;
    line-height: 17px;
}

.form-switch.mode-switch .form-check-label:last-of-type {
    order: 3;
    margin-left: .625rem;
    line-height: 17px;
}

/* ================== Buttons ================== */

.btn-icon .fa-arrow-right {
    display: inline-block;
    /* Cho phép transform hoạt động chính xác */
    transition: transform 0.3s ease;
    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-icon:hover .fa-arrow-right {
    transform: translateX(5px);
    /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}




.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;

}

.btn-sm {
    padding: 0.575rem 1.25rem !important;
    font-size: 0.75rem !important;

}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    background-color: transparent;
    outline: 0;
    border: 0;
    margin: 0;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;
    color: inherit;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.25;
    border-radius: 10px;
    min-width: 64px;
    transition: all 120ms ease-in;
}

.btn-primary {
    color: #fff;
    text-shadow: 0 1px 1px hsla(200, 10%, 4%, 0.6);
    background-color: #1976d2 !important;
    border: 1px solid #1565c0 !important;
    box-shadow:
        hsla(210, 100%, 60%, 0.5) 0 1px 0 inset,
        hsla(210, 100%, 30%, 0.4) 0 -1px 0 1px inset,
        hsla(200, 10%, 4%, 0.1) 0 2px 4px 0;
}

.btn-primary:hover {
    background-color: #0777f5 !important;
    box-shadow: hsla(210, 100%, 60%, 0.6) 0 1px 0 inset, hsla(210, 100%, 30%, 0.5) 0 -1px 0 1px inset, hsla(200, 10%, 4%, 0.15) 0 4px 8px 0;
}

.btn-primary:active {
    background-color: #0d47a1;
    box-shadow:
        hsla(210, 100%, 30%, 0.4) 0 1px 0 inset,
        hsla(200, 10%, 4%, 0.2) 0 1px 2px 0;
}

.btn-success {
    color: #fff;
    text-shadow: 0 1px 1px hsla(145, 63%, 22%, 0.6);
    background-color: #10b981 !important;
    border: 1px solid #059669 !important;
    box-shadow:
        hsla(158, 64%, 52%, 0.5) 0 1px 0 inset,
        hsla(158, 64%, 32%, 0.4) 0 -1px 0 1px inset,
        hsla(158, 64%, 22%, 0.1) 0 2px 4px 0;
}

.btn-success:hover {
    background-color: #37d5a1 !important;
    box-shadow:
        hsla(158, 64%, 52%, 0.6) 0 1px 0 inset,
        hsla(158, 64%, 32%, 0.5) 0 -1px 0 1px inset,
        hsla(158, 64%, 22%, 0.15) 0 4px 8px 0;
}

.btn-success:active {
    background-color: #047857;
    box-shadow:
        hsla(158, 64%, 32%, 0.4) 0 1px 0 inset,
        hsla(158, 64%, 22%, 0.2) 0 1px 2px 0;
}

.btn-light {
    color: #212529;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.6);
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    box-shadow:
        hsla(0, 0%, 100%, 0.5) 0 1px 0 inset,
        hsla(0, 0%, 85%, 0.4) 0 -1px 0 1px inset,
        hsla(0, 0%, 0%, 0.1) 0 2px 4px 0;
}

.btn-light:hover {
    background-color: #e9ecef;
    box-shadow:
        hsla(0, 0%, 100%, 0.6) 0 1px 0 inset,
        hsla(0, 0%, 85%, 0.5) 0 -1px 0 1px inset,
        hsla(0, 0%, 0%, 0.15) 0 4px 8px 0;
}

.btn-light:active {
    background-color: #dee2e6;
    box-shadow:
        hsla(0, 0%, 85%, 0.4) 0 1px 0 inset,
        hsla(0, 0%, 0%, 0.2) 0 1px 2px 0;
}

.btn-gradient {
    color: #fff;
    text-shadow: 0 1px 1px hsla(200, 10%, 4%, 0.6);
    background: linear-gradient(to right, #006CE6, #04E5D3);
    border: 1px solid #005bbd;
    box-shadow:
        hsla(210, 100%, 60%, 0.5) 0 1px 0 inset,
        hsla(210, 100%, 30%, 0.4) 0 -1px 0 1px inset,
        hsla(200, 10%, 4%, 0.1) 0 2px 4px 0;
}

.btn-gradient:hover {
    background: linear-gradient(to right, #005bbd, #03c4b1);
    box-shadow:
        hsla(210, 100%, 60%, 0.6) 0 1px 0 inset,
        hsla(210, 100%, 30%, 0.5) 0 -1px 0 1px inset,
        hsla(200, 10%, 4%, 0.15) 0 4px 8px 0;
}

.btn-gradient:active {
    background: linear-gradient(to right, #004a9b, #02a391);
    box-shadow:
        hsla(210, 100%, 30%, 0.4) 0 1px 0 inset,
        hsla(200, 10%, 4%, 0.2) 0 1px 2px 0;
}


.btn:hover i {
    transform: translateX(4px);
}

.btn i {
    transition: transform 0.2s ease;
}


.btn-secondary {
    background-color: #51596C;
    border: 2px solid #51596C;
}

.btn-secondary:hover {
    background-color: #51596C;
    border: 2px solid #51596C;
    box-shadow: 0 6px 12px #51596c6f;

}

.btn-success {
    background-color: #10b981;
    border: 2px solid #10b981;
}





.btn-danger {
    background-color: #692340;
    border: 2px solid #692340;
}

.btn-danger:hover {
    background-color: #692340;
    border: 2px solid #692340;
    box-shadow: 0 6px 12px #69234073;

}

.btn-warning {
    background-color: #eaa81b;
    border: 2px solid #eaa81b;
}

.btn-warning:hover {
    background-color: #eaa81b;
    border: 2px solid #eaa81b;
    box-shadow: 0 6px 12px #eaa81b83;

}

.btn-info {
    color: #fff;
    background-color: #334AC0;
    border: 2px solid #334AC0;
}

.btn-info:hover {
    color: #fff;
    background-color: #334AC0;
    border: 2px solid #334AC0;
    box-shadow: 0 6px 12px #334bc075;

}

.btn-light {
    color: #212121;
    background-color: #F9FAFC;
    border: 2px solid #F9FAFC;
}

.btn-light:hover {
    color: #212121;
    background-color: #F9FAFC;
    border: 2px solid #F9FAFC;
    box-shadow: 0 6px 12px #7e7e7e3b;

}

.btn-dark {
    color: #ffffff;
    background-color: #00221C;
    border: 2px solid #00221C;
}

.btn-dark:hover {
    color: #ffffff;
    background-color: #00221C;
    border: 2px solid #00221C;
    box-shadow: 0 6px 12px #00221c5e;

}


.btn-outline-primary {
    color: #0b7dff;
    background-color: #1976d200;
    border: 1px solid #5fafff38;
    box-shadow: hsla(210, 100%, 90%, 0.4) 0 -1px 0 1px inset, hsla(210, 100%, 90%, 0.5) 0 1px 2px 0;
}

.btn-outline-primary:hover {
    color: #0b7dff;
    background-color: #a2d1ff29;
    border: 1px solid #0281ff85;
    box-shadow: hsl(210deg 100% 90% / 0%) 0 -1px 0 1px inset, hsl(210deg 100% 90% / 0%) 0 1px 2px 0;

}

.btn-outline-primary .fa-arrow-right {
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-outline-primary:hover .fa-arrow-right {
    transform: translateX(5px);
}


.btn-outline-light {
    border: 2px solid #F9FAFC;
    color: #111111;
}

.btn-outline-light:hover {
    background-color: #F9FAFC;
    border: 2px solid #F9FAFC;
    color: #111111;
}

.btn-soft-primary {
    color: #006ccf;
    background-color: #006bcf26;
    border-color: transparent
}

.btn-soft-secondary {
    color: #51596c;
    background-color: rgba(81, 89, 108, .1);
    border-color: transparent
}

.btn-soft-success {
    color: #077c76;
    background-color: rgba(7, 124, 118, .1);
    border-color: transparent
}

.btn-soft-danger {
    color: #692340;
    background-color: rgba(105, 35, 64, .1);
    border-color: transparent
}

.btn-soft-warning {
    color: #f1b980;
    background-color: rgba(241, 185, 128, .1);
    border-color: transparent
}

.btn-soft-info {
    color: #334ac0;
    background-color: rgba(51, 74, 192, .1);
    border-color: transparent;
}

.btn-soft-light {
    color: #0e0e0e;
    background-color: #F9FAFC;
    border-color: transparent;
}

.btn-soft-dark {
    color: #00221c;
    background-color: rgba(0, 34, 28, .1);
    border-color: transparent;
}

/* Card */

/* ---- Base card: full img ---- */
.card-glass {
    position: relative;

    overflow: hidden;

    transition: transform .3s ease, box-shadow .3s ease;
}


/* ---- Glass khi hover: phủ toàn card ---- */
.card-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background .3s ease, backdrop-filter .3s ease;
    height: 85px;
    margin-top: 135px;
}


/* ---- Thanh text ở đáy + shape cong và glass ---- */
.card-frost {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 18px;
    color: #fff;
    z-index: 2;
    /* luôn nằm trên shape */
}

.card-frost h4 {
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Shape cong + glass ở phía dưới */
.card-frost::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    /* độ cao của shape cong */
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    /* bo cong bằng clip-path */
    clip-path: ellipse(120% 70% at 50% 0%);
    z-index: -1;
    /* nằm dưới chữ */
}

/* Optional: hiệu ứng nhấn khi hover */
.card-glass:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}


#articles-container .card-body {

    max-height: 280px;
}

.card {
    transition: 0.4s all !important;
}

.card-hover-primary {
    transition: 0.4s all !important;

}

.card-hover-primary:hover {
    background-color: #DFEEFF !important;
    border-color: #DFEEFF;
    cursor: pointer;
    color: #212121;
    transition: 0.4s all !important;
}

.card-hover-primary:hover .card-title h4 {
    color: #006ccf;
    transition: 0.4s all !important;
}

.card-hover-primary:hover .card-title p {
    color: #05274C;
    transition: all 0.4s;
}

.hover-card-pricing {
    position: relative;
    transition: all 0.4s;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgb(255 255 255 / 26%), rgba(255, 255, 255, 0)) 1;
}

.card-border-gradient {
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) 1;
    cursor: pointer;
    transition: 0.4s all !important;
}

.card-border-gradient:hover {
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgb(0 126 255 / 48%), rgba(0, 0, 0, 0)) 1 !important;
    cursor: pointer;
    transition: 0.4s all !important;
}

.card-shadow {

    box-shadow: 0 0rem 0rem rgba(140, 152, 164, 0.3),
        0 0rem 0rem rgba(140, 152, 164, 0.15) !important;
}

.card-shadow:hover {
    box-shadow: 0 1rem 3rem rgba(140, 152, 164, 0.3),
        0 0.5rem 1rem rgba(140, 152, 164, 0.15) !important;
}

/* .hover-card-pricing:hover {
  border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgb(0 126 255 / 48%), rgba(0, 0, 0, 0)) 1;
    cursor: pointer;

} */



.line-about {
    height: 100%;
}

.vr {
    width: 2px;
    min-height: 2px;
    background: #56CCF2;
    background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);
    background: linear-gradient(to right, #12151a00, #7daef94f);
    opacity: 1;
}

.border-gradient {

    border-width: 2px;

    border-style: solid;

    border-image: linear-gradient(to bottom, rgb(0 126 255 / 48%), rgba(0, 0, 0, 0)) 1;
}

.border-gradient-1 {
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to top, #74ebd5, #acb6e5) 1;
    cursor: pointer;
    transition: all 0.4s;
}


/* // Flip effect */

.card-flip {
    display: block;
    height: 100%;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    perspective: 1000px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .5s ease-in-out;
    transform-style: preserve-3d;
}

.card-flip-front,
.card-flip-back {
    height: 100%;
    padding: 10px;
    backface-visibility: hidden;
    transform: rotateX(0deg);
}

.card-flip-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;

}

.card-flip-back {
    position: relative;
    background-color: #ccc;
    transform: rotateY(180deg);
}

.card-flip:hover {
    .card-flip-inner {
        transform: rotateY(180deg);
    }
}


/* Accordion */

.accordion {
    box-shadow: 0 .375rem 1.5rem 0 rgba(140, 152, 164, .125)
}

.accordion-item {
    border: none;


}

/* Nút câu hỏi */
.accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #ffffff;
    /* xanh */
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 1rem;
    box-sizing: border-box;
}

/* Khi mở */
.accordion-button:not(.collapsed) {
    background-color: #e6f2ff;
    border-bottom: 1px solid #EDF8FF;
    /* để tách khỏi body */
}

/* Khi đóng thì bo tròn cả khối */
.accordion-button.collapsed {}

/* Nội dung trả lời */
.accordion-body {

    background-color: #EDF8FF;
    /* xám */
    padding: 1rem;
    padding-top: 0px;
    margin: 0;

    border-radius: 0 0 0.5rem 0.5rem;
}


.accordion-item {
    border: none;
    background: #EDF8FF;
}

.accordion-button {
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
    background: #EDF8FF;
    color: #006CCF;
}

/* Alerts */
.alert-primary {
    color: #fff;
    background-color: #006ccf;
    border-color: #006ccf;
}

.alert-secondary {
    color: #fff;
    background-color: #51596c;
    border-color: #51596c
}

.alert-success {
    color: #fff;
    background-color: #077c76;
    border-color: #077c76
}


.alert-info {
    color: #fff;
    background-color: #334ac0;
    border-color: #334ac0
}


.alert-warning {
    color: #000;
    background-color: #f1b980;
    border-color: #f1b980
}



.alert-danger {
    color: #fff;
    background-color: #692340;
    border-color: #692340
}



.alert-light {
    color: #000;
    background-color: #f9fafc;
    border-color: #f9fafc
}


.alert-dark {
    color: #fff;
    background-color: #00221c;
    border-color: #00221c
}


.alert-soft-primary {
    color: #006ccf;
    background-color: #006ccf29;
}

.alert-soft-secondary {
    color: #51596c;
    background-color: rgba(81, 89, 108, .15)
}



.alert-soft-success {
    color: #077c76;
    background-color: rgba(7, 124, 118, .15)
}



.alert-soft-info {
    color: #334ac0;
    background-color: rgba(51, 74, 192, .15)
}


.alert-soft-warning {
    color: #f1b980;
    background-color: rgba(241, 185, 128, .15)
}

.alert-soft-danger {
    color: #692340;
    background-color: rgba(105, 35, 64, .15)
}

.alert-soft-light {
    color: #646464;
    background-color: rgba(249, 250, 252, .15)
}


.alert-soft-dark {
    color: #00221c;
    background-color: rgba(0, 34, 28, .15)
}




.badge {
    padding: 8px 14px;
    box-shadow: none;
    font-weight: 600;
}

.badge-gradient {
    background: #C6FFDD;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f7797d69, #fbd78661, #c6ffdd00) !important;

}

.badge-gradient-2 {
    background: #74ebd5;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #ACB6E5, #74ebd5);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #ACB6E5, #74ebd5);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.text-bg-primary {
    background-color: #006CCF !important;
}


/* Tabs */

.nav-tab-products button.nav-link {
    background-color: #cccccc17;
    padding: 24px 20px;
    color: #212121;
    display: flex;
    align-items: center;

}

.nav-tab-products .nav-link.active {
    background-color: #EFF7FF;
    color: #006ccf;
    padding: 24px 20px;
}

.scroll-wrapper {
    min-height: 100% !important;
}

/* Áp dụng cho màn hình nhỏ (xs) */
@media (max-width: 576px) {

    /* 1. Ẩn scrollbar cho Chrome, Safari, Edge mới */
    .scroll-container::-webkit-scrollbar {
        display: none;
        /* :contentReference[oaicite:0]{index=0} */
    }

    /* 2. Ẩn scrollbar cho Firefox */
    .scroll-container {
        scrollbar-width: none;
        /* :contentReference[oaicite:1]{index=1} */
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* 3. Wrapper để đặt nút mũi tên */
    .scroll-wrapper {
        position: relative;
    }

    .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(255, 255, 255, 0.8);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        line-height: 1;
    }

    .scroll-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .left-btn {
        left: 5px;
        display: flex !important;
    }

    .right-btn {
        right: 5px;
        display: flex !important;
    }

    /* 4. Đảm bảo nav-item không co lại */
    .scroll-container .nav-item {
        flex: 0 0 auto;
        display: inline-block;
        float: none;
    }

    .nav.nav-pills .nav-item {
        width: 100%;
    }

    .overlay-scroll-tabs {
        position: absolute;
        width: 30px;
        height: 100%;
        top: 0;
        right: 0;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 50%);
        display: block !important;
    }

    .heading-custom {
        font-size: 18px;
        line-height: 26px;
    }

}

.left-btn {
    display: none;
}

.right-btn {
    display: none;
}

.overlay-scroll-tabs {
    display: none;
}

@media (max-width: 767.98px) {
    .cards-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 1rem;
        scroll-padding-left: 1rem;
        position: relative;
    }

    .cards-wrapper::-webkit-scrollbar {
        display: none;
        /* Ẩn scrollbar trên Chrome, Safari */
    }

    .cards-wrapper {
        -ms-overflow-style: none;
        /* IE và Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .cards-wrapper .card {
        flex: 0 0 80%;
        min-width: 300px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .overlay-card-blog {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #ffffffc7 50%);
        height: 100%;
        display: block !important;

    }

    /* Style cho nút mũi tên */
    .scroll-button {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        border: none;
        padding: 8px 10px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    .scroll-button.left {
        left: -10px;
    }

    .scroll-button.right {
        right: -10px;
    }
}


.overlay-card-blog {
    display: none;
}

/* ================== Pages ============================
 =======================================================
*/
.bg-hero-img-contact {
    background: url(/media/images/bg-img-contact.png);
    background-attachment: fixed;
}

.bg-hero-img-tracktms {
    background: url(/media/images/bg-img-tms.png);
    background-size: cover;
    background-position: center;
}

.bg-hero-map-api-new {
    background: url(/media/images/hero-map-api.png);
    background-attachment: fixed;

}

.bg-hero-tms {
    background: url(/media/images/bg-hero-track-tms.png);

}


.bg-hero-track-tms {
    background: url(/media/images/bg-hero-track-tms1.jpg);
}

.bg-hero-map-api {
    background-image: url(/media/images/bg-hero-map-api.jpg);
}

.bg-hero-news {
    background: url(/media/images/bg-hero-news.png);
}

.bg-services {
    background: url(/media/images/bg-hero-dichvu.png);
}


.bg-hero-contact {
    background: url(/media/images/bg-hero-contact.png);
}

.text-slide {
    position: relative;
    z-index: 1;
}

.bg-hero-company {
    background: url(/media/images/bg-hero-company.png);
    background-repeat: no-repeat;
    background-position: center;


}

.bg-hero-bang-gia {
    background: url(/media/images/bg-hero-bang-gia.png);
    background-repeat: no-repeat;
    background-position: center;


}



.bg-hero-affiliate {
    background: url(/media/images/bg-hero-lien-ket.png);
    background-repeat: no-repeat;
    background-position: center;


}

.bg-hero-support-center {
    background-color: #000000;


}

.bg-hero-content-update {
    background: url(/media/images/bg-hero-content-update.png);
    background-repeat: no-repeat;
    background-position: center;


}

.img-bg-company {
    background: url(/media/images/img-about-us.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 500px;
    background-attachment: fixed;
}

.cta-trackasia-tms {
    background: url(/media/images/bg-cta-trackasia-tms.png);
    background-repeat: no-repeat;

    background-position: top;
    min-height: 400px;
    background-attachment: fixed;
}

.download-app {
    background: url(/media/images/bg-down-app.png);
    background-repeat: no-repeat;

    background-position: center;
    min-height: 400px;
    background-attachment: fixed;
}

/* Hero  */
.hero-page {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.hero {
    position: relative;
    background: url("/media/images/bg-hero-07.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;

}

@media (max-width: 576px) {
    .hero {
        background: url("/media/images/bg-phone1.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 667px;

    }
}


.hero-sing {
    background: url(/media/images/img-hero-sing.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 900px;
    background-attachment: fixed;
}

.hero-thai {
    background: url(/media/images/img-hero-thai.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 900px;
    background-attachment: fixed;
}

.badge-hero {
    background-color: #cccccc00;
    display: inline-block;
    border-radius: 8px;
}

.badge-hero::before {
    content: "";
    position: absolute;
    top: 70%;
    left: 0;
    height: 100%;
    width: 100%;
    background: #00c2cb;
    transform: perspective(10px) rotateX(10deg) scale(1, 0.2);
    filter: blur(1.5em);
    opacity: 0.5;
}

.btn-hero {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    background-color: #10b981;
    border: 1px solid #10b981;
}

.btn-hero .fa-arrow-right {
    display: inline-block;
    /* Cho phép transform hoạt động chính xác */
    transition: transform 0.3s ease;
    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-hero:hover .fa-arrow-right {
    transform: translateX(5px);
    /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}

.btn-hero:hover {
    background-color: #34d399;
    box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
    border: 1px solid #34d399;
}

.btn-hero:active {
    background-color: #34d399 !important;
    box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
}

.btn-hero:focus-visible {
    background-color: #34d399 !important;
    box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
}

.btn-hero-new {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

.btn-hero-new .fa-arrow-right {
    display: inline-block;
    /* Cho phép transform hoạt động chính xác */
    transition: transform 0.3s ease;
    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-hero-new:hover .fa-arrow-right {
    transform: translateX(5px);
    /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}

.btn-hero-new:hover {
    background-color: #e6e6e6;
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.91);
    border: 1px solid #e6e6e6;
}

.btn-hero-new:active {
    background-color: #e6e6e6 !important;
    box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
}

.btn-hero-new:focus-visible {
    background-color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.91);
}


.effect-glass-gradient {
    background-image: linear-gradient(to top, #ffffff00, #001fff73, #17274445);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

/* Option 1 - Xanh lam lạnh */
.effect-glass-gradient.opt-1 {
    background-image: linear-gradient(to top, #ffffff00, #001fff73, #17274445);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

/* Option 2 - Tím + Hồng mờ */
.effect-glass-gradient.opt-2 {
    background-image: linear-gradient(to top, #ffffff00, #55f7ea73, #ec489945);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
}

/* Option 3 - Xanh lá + Vàng nhạt */
.effect-glass-gradient.opt-3 {
    background-image: linear-gradient(to top, #ffffff00, #22a5c573, #eab30845);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
}

/* Option 4 - Cam + Đỏ năng lượng */
.effect-glass-gradient.opt-4 {
    background-image: linear-gradient(to top, #ffffff00, #f9731673, #dc262645);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
}

/* Option 5 - Xanh ngọc + Aqua */
.effect-glass-gradient.opt-5 {
    background-image: linear-gradient(to top, #ffffff00, #06b6d473, #3b82f645);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}






.effect-glass {
    background: #6ea6f914;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}


.effect-glass1 {
    background-image: linear-gradient(to top, #ffffff00, #001fffc2, #172744);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

.effect-glass2 {
    background: #ffffff14;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

.effect-glass3 {
    background: #012d6b7c;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

/* About Us  */

.text-gradient {
    background: #56CCF2;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2F80ED, #56CCF2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient2 {
    background: #ECE9E6;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFFFFF, #ECE9E6);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient3 {
    background: #7F7FD5;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.text-gradient-cta {
    background: #c0c0aa;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1cefff, #c0c0aa);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1cefff, #c0c0aa);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow {
    position: absolute;
    /* top: 500px; */

    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
    z-index: 9999;
}

/* Desktop: nút nằm giữa đáy cách 30px */
@media (min-width: 992px) {
    .arrow {
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}





.arrow span {
    display: block;
    width: 24px;
    height: 24px;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate1 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate1 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}

.why-icon {}

@media (max-width: 576px) {

    /* Đảm bảo khung icon ở Why Choose luôn hình vuông trên phone */
    .why-icon {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        overflow: hidden;
    }

    /* Thu nhỏ nút scroll xuống phần #news trên màn hình phone */
    a[href="#news"] .arrow span {
        width: 16px;
        height: 16px;
        border-bottom: 3px solid white;
        border-right: 3px solid white;
        margin: -6px;
    }

    /* Giảm khoảng cách đáy một chút cho gọn trên phone */
    a[href="#news"].position-absolute {
        bottom: 12px;
    }

    /* Đảm bảo .arrow luôn nằm ở đáy, căn giữa trên phone */
    .arrow {
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.map-solution {

    position: relative;
    /* Để giới hạn sticky trong phạm vi phần tử cha */
}

.img-map {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    /* Khoảng cách từ trên cùng của trang */
}


.bg-featured-api-map {
    background: url(/media/images/bg-api-services-2.png) no-repeat center center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 100%;
}

.pricing-api-map {
    background-color: #061f46;
}

.bg-pricing-api-map {
    background: url(/media/images/bg-pricing-api-map1.png) no-repeat center center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 100%;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: #dee2e670;
    /* Màu viền bảng */
    background-color: #ffffff00;
    /* Màu nền bảng */
    color: #212529;
    /* Màu chữ */
}

.table> :not(caption)>*>* {
    padding: 0.5rem 0.5rem;
    color: #212529;
    /* Màu chữ bên trong bảng */
    background-color: #ffffff00;
    /* Màu nền các ô */
    border-bottom: 1px solid #83bcf51a;
    /* Đường viền giữa các ô */
    box-shadow: inset 0 0 0 9999px transparent;
    /* Không dùng hiệu ứng */
}

.table-responsive-api-page {


    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 10px;
}

.ui-light-table {
    width: 100%;


    background-color: #fff;
}

.ui-light-table th {
    background-color: #ffffff;
    font-weight: 600;
    color: #374151;
    padding: 14px 16px;
    border-bottom: 2px solid #e5e7eb;
}

.ui-light-table td {
    padding: 14px 16px;
    color: #4b5563;
    border-bottom: 1px solid #f1f3f5;
}

.ui-light-table tbody tr:hover {
    background-color: #fdfdfd;
    transition: background 0.2s ease-in-out;
}

.card {
    border-radius: 12px;
}




.border-gradient-full {
    border: 2px solid #0852a6;
    border-radius: 10px;
}


.footer {
    background: #05274d;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.shape-container {
    position: relative;
}

.shape-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.shape {
    position: absolute;
    z-index: -1;
}


/*===== Preloader =====*/

.spinner-wrapper {
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
}

.spinner {
    display: block;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner>div {
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
    background: #006CCF;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {

    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {

    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


.water-round-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 0px solid #c0c0c000;
    text-align: center;
    line-height: 50px;
    animation: water-waves linear infinite;
    top: 0;
    left: 0;
    opacity: 1;
}

.water-wave1 {
    position: absolute;
    top: 40%;
    left: -25%;
    background: #006ccf3d;
    opacity: 0.7;
    width: 200%;
    height: 200%;
    border-radius: 40%;
    animation: inherit;
    animation-duration: 5s;
}

.water-wave2 {
    position: absolute;
    top: 45%;
    left: -35%;
    background: #e9f8ff;
    opacity: 0.5;
    width: 200%;
    height: 200%;
    border-radius: 35%;
    animation: inherit;
    animation-duration: 7s;
}

.water-wave3 {
    position: absolute;
    top: 50%;
    left: -35%;
    background: #f0f6fc;
    opacity: 0.3;
    width: 200%;
    height: 200%;
    border-radius: 33%;
    animation: inherit;
    animation-duration: 11s;
}

@keyframes water-waves {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Glitch style */
.glitch {
    position: relative;
    padding: 0px 3px;
    outline: 0px;
    overflow: hidden;
    cursor: pointer;
    z-index: 0;
}

.glitch::before,
.glitch::after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-text);
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    animation-duration: 1000ms;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    z-index: 1;
}

.glitch::before {
    padding-right: 2px;
    text-shadow: -2px 0 red;
    animation-name: glitch-animation-red;
    height: 150%;
}

.glitch::after {
    padding-left: 2px;
    text-shadow: 2px 0 #2000ff;
    animation-name: glitch-animation-blue;
}

.glitch:hover::before {
    animation-name: glitch-animation-red;
}

.glitch:hover::after {
    animation-name: glitch-animation-blue;
}

@keyframes glitch-animation-blue {
    0% {
        opacity: 1;
        clip-path: inset(20% 0% 50% 0%);
    }

    20% {
        opacity: 1;
        clip-path: inset(10% 0% 60% 0%);
    }

    40% {
        opacity: 1;
        clip-path: inset(30% 0% 40% 0%);
    }

    60% {
        opacity: 1;
        clip-path: inset(25% 0% 55% 0%);
    }

    80% {
        opacity: 1;
        clip-path: inset(15% 0% 45% 0%);
    }

    100% {
        opacity: 1;
        clip-path: inset(20% 0% 50% 0%);
    }
}

@keyframes glitch-animation-red {
    0% {
        opacity: 1;
        clip-path: inset(25% 0% 45% 0%);
    }

    20% {
        opacity: 1;
        clip-path: inset(15% 0% 55% 0%);
    }

    40% {
        opacity: 1;
        clip-path: inset(35% 0% 35% 0%);
    }

    60% {
        opacity: 1;
        clip-path: inset(30% 0% 50% 0%);
    }

    80% {
        opacity: 1;
        clip-path: inset(20% 0% 40% 0%);
    }

    100% {
        opacity: 1;
        clip-path: inset(25% 0% 45% 0%);
    }
}




/* Parallax */
/* -------------------------------------------------- */

/* Background image / video parallax based on https://github.com/nk-o/jarallax */

.jarallax {
    position: relative;
    z-index: 0;
}

.jarallax .jarallax-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* Disable element parallax on different breakpoints */

[data-disable-parallax-down="xs"] {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 575.98px) {
    [data-disable-parallax-down="xs"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    [data-disable-parallax-down="sm"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    [data-disable-parallax-down="md"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 1199.98px) {
    [data-disable-parallax-down="lg"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 576px) {
    [data-disable-parallax-up="sm"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 768px) {
    [data-disable-parallax-up="md"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 992px) {
    [data-disable-parallax-up="lg"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 1200px) {
    [data-disable-parallax-up="xl"] {
        opacity: 1 !important;
        transform: none !important;
    }
}


.dropdown-item.active,
.dropdown-item:active {
    background-color: #ffffff00;
    color: #006ccf;
}

.bg-hero-solution {
    display: inline;
}

@media screen and (min-width: 992px) {
    .connections-section-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .orbit-container {
        min-height: 516px;
    }

    .ring-1 {
        height: 205px;
        width: 205px;
    }

    .ring-2 {
        height: 315px;
        width: 315px;
    }

    .ring-3 {
        height: 425px;
        width: 425px;
    }
}

.connections-section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.orbit-container {
    min-height: 516px;
}

.ring-1 {
    height: 205px;
    width: 205px;
}

.ring-2 {
    height: 315px;
    width: 315px;
}

.ring-3 {
    height: 425px;
    width: 425px;
}

.middle-icon {
    display: flex;
    text-align: center;
    width: 64px;
    height: 64px;
    background: #fff;
    border: 1px solid #93cff4;
    box-shadow: 0 100px 80px rgba(139, 197, 255, .07), 0 64.8148px 46.8519px rgba(139, 197, 255, .053), 0 38.5185px 25.4815px rgba(139, 197, 255, .043), 0 20px 13px rgba(139, 197, 255, .035), 0 8.14815px 6.51852px rgba(139, 197, 255, .027), 0 3px 11px rgba(139, 197, 255, .29);
    /* padding: 12px 16px; */
    position: absolute;
    z-index: 4;
}

.middle-icon img {
    text-align: center;
    margin: auto;
    width: 48px;
}

.ring-1 {
    box-shadow: 0 4px 37px rgba(73, 175, 239, .36);
    height: 150px;
    width: 150px;
    z-index: 3;
}

.ring-1,
.ring-2 {
    background: #e9f7ff;
    position: absolute;
}

.ring-2 {
    box-shadow: 0 0 50px rgba(147, 207, 244, .66);
    height: 230px;
    width: 230px;
    z-index: 2;
}

.ring-3 {
    background: #f4fbff;
    box-shadow: 0 0 75px rgba(73, 175, 239, .19);
    height: 300px;
    position: absolute;
    width: 300px;
    z-index: 1;
}

.middle-icon,
.ring-1,
.ring-2,
.ring-3 {
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.icon-container-1 {
    height: 190px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: -15px;
    width: 40px;
}

.icon-content {
    align-items: center;
    background: #fff;
    border: 1px solid #93cff4;
    border-radius: 50%;
    box-shadow: 0 100px 80px rgba(139, 197, 255, .07), 0 64.8148px 46.8519px rgba(139, 197, 255, .053), 0 38.5185px 25.4815px rgba(139, 197, 255, .043), 0 20px 13px rgba(139, 197, 255, .035), 0 8.14815px 6.51852px rgba(139, 197, 255, .027), 0 3px 11px rgba(139, 197, 255, .29);
    display: flex;
    height: 55px;
    justify-content: center;
    padding: 12px;
    width: 55px;
}

.icon-content img {
    height: 24px;
    width: 24px;
}

.icon-container-2 {
    height: 270px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: -25px;
    width: 40px;
}

.icon-container-2:before {
    background: #fff;
    border: 1px solid #93cff4;
    border-radius: 50%;
    box-shadow: 0 100px 80px rgba(139, 197, 255, .07), 0 64.8148px 46.8519px rgba(139, 197, 255, .053), 0 38.5185px 25.4815px rgba(139, 197, 255, .043), 0 20px 13px rgba(139, 197, 255, .035), 0 8.14815px 6.51852px rgba(139, 197, 255, .027), 0 3px 11px rgba(139, 197, 255, .29);
    display: block;
    height: 64px;
    width: 64px;
}

.orbit-container {
    align-items: center;
    display: flex;
    ;
    flex: 1;
    justify-content: center;
    position: relative;
}

.icon--1 {
    animation: rotateCounterClockwise 25s linear infinite;
}

.icon--1-counter-rotate {
    animation: rotateClockwise 25s linear infinite;
}

.icon--2 {
    animation: rotateClockwise 20s linear infinite;
}

.icon--2-counter-rotate {
    animation: rotateCounterClockwise 20s linear infinite;
}

.icon--3 {
    animation: rotateCounterClockwise 21s linear infinite;
}

.icon--3-counter-rotate {
    animation: rotateClockwise 21s linear infinite;
}

@keyframes rotateClockwise {
    to {
        transform: rotate(1turn);
    }
}

@keyframes rotateCounterClockwise {
    to {
        transform: rotate(-1turn);
    }
}

@keyframes fadeIn {
    to {
        transform: rotate(1turn);
    }
}

@keyframes fadeOut {
    to {
        opacity: rotate(1turn);
    }
}

.custom-submit-link {
    box-sizing: border-box;
}

.custom-submit-link:hover {
    background-color: #006ccf;
    border-color: #006ccf;
    border: 2px solid #006ccf;
}

.custom-submit-link:active {
    background-color: #0a58ca;
    border-color: #0a53be;
}

/* apply trong bài viết: "Hướng dẫn đăng ký và tích hợp TrackAsia Map vào website hay ứng dụng của bạn"  */
.article-hight-light {
    font-weight: bold;
}

.article-underline {
    text-decoration: underline;
}

/* end  */
.scroll-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Ẩn scrollbar trên Firefox */
}

@media (max-width: 991px) {
    .scroll-menu {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Ẩn scrollbar trên Firefox */
    }

    .scroll-menu::-webkit-scrollbar {
        display: none;
        /* Ẩn scrollbar trên Chrome, Safari */
    }
}


.chat-center {
    position: fixed;
    right: 16px;
    bottom: 30px;
    width: 80px;
    text-align: center;
    z-index: 9999;
}

.chat-center img {
    background: hsla(0, 0%, 100%, .2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-radius: 100px;
}



.chat-center a:hover {
    cursor: pointer;
}

.track-ai {

    position: relative;

    width: 100%;

    margin: auto;

    text-align: center;

    background: hsla(0, 0%, 100%, .2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);


    border-radius: 12px;
    height: 100%;
}

.track-ai video {
    width: 42px;
    height: 42px;
}

.spinner-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    margin: auto;
}

.spinner-item {
    /* background: red; */
    /* Uncomment nếu cần */
    border: 1px solid rgb(0, 17, 255);
    border-radius: 50%;
    height: 48px;
    width: 48px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: zoom 2s linear 0.75s infinite;
}

.spinner-item--2 {
    animation-delay: 1.25s;
}

.spinner-item--3 {
    animation-delay: 1.75s;
}

@keyframes zoom {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}




/* Chatbot */
.botIcon {
    bottom: 190px;
    right: 16px;
    position: fixed;
    z-index: 9999;
}

.iconInner {
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    background: #a54bf400;
    background: -webkit-linear-gradient(to left, #00dade00, #fb00ff00, #00dade00, #fb00ff00);
    background: -o-linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: -moz-linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: linear-gradient(to left, #00dbde, #fc00ff00, #00dbde00, #fc00ff);
    background-position: 50%;
    background-size: 300%;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 80px;
    justify-content: center;
    width: 80px;
}

.botSubject,
.messages,
.showBotSubject .botIconContainer,
.showMessenger .botIconContainer {
    display: none;
}

.botIcon .Messages,
.botIcon .Messages_list {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.chat_close_icon {
    color: #000000;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 12px;
    z-index: 9;
}

.chat_on {
    background-color: #8a57cf;
    bottom: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    color: #fff;
    cursor: pointer;
    display: block;
    height: 45px;
    padding: 9px;
    position: fixed;
    right: 15px;
    text-align: center;
    width: 45px;
    z-index: 10;
}

.chat_on_icon {
    color: #fff;
    font-size: 25px;
    text-align: center;
}

.botIcon .Layout {
    -webkit-animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);
    -ms-animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);
    animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background-color: rgb(255 255 255);
    bottom: 20px;
    right: 0px;
    box-shadow: 5px 0 20px 5px rgba(0, 0, 0, .1);
    box-sizing: content-box !important;
    color: rgb(255, 255, 255);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    max-height: 30px;
    max-width: 300px;
    min-width: 50px;
    opacity: 0;
    pointer-events: auto;
    position: fixed;
    -webkit-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;
    -ms-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;
    transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;
    z-index: 999999999;
}

.botIcon .Layout-open {
    border-radius: 10px;
    color: #fff;
    height: 500px;
    max-height: 500px;
    max-width: 300px;
    overflow: hidden;
    -webkit-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);
    -ms-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);
    transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);
    width: 100%;
}

.botIcon .Layout-expand {
    display: none;
    height: 400px;
    max-height: 100vh;
    min-height: 300px;
}

.showBotSubject.botIcon .Layout-expand {
    display: block;
}

.botIcon .Layout-mobile {
    bottom: 10px
}

.botIcon .Layout-mobile.Layout-open {
    min-width: calc(100% - 20px);
    width: calc(100% - 20px);
}

.botIcon .Layout-mobile.Layout-expand {
    border-radius: 0 !important;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
}

.botIcon .Messenger_messenger {
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.botIcon .Messenger_header,
.botIcon .Messenger_messenger {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.botIcon .Messenger_header {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgb(22 46 98 / 0%);
    color: rgb(0 0 0);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 40px;
    padding-left: 10px;
    padding-right: 40px;
}

.botIcon .Messenger_header h4 {
    -webkit-animation: slidein .15s .3s;
    -ms-animation: slidein .15s .3s;
    animation: slidein .15s .3s;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

.botIcon .Messenger_prompt {
    font-weight: 400;
    line-height: 18px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botIcon .Messenger_content {
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 80px;
}

.botIcon .Messages {
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.botIcon .Input {
    background-color: #fff;
    border-top: 1px solid #e6ebea;
    color: #96aab4;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-bottom: 15px;
    padding-top: 17px;
    position: relative;
    width: 100%;
}

.botIcon .Input-blank .Input_field {
    max-height: 20px;
}

.botIcon .Input_field {
    background-color: transparent;
    border: none;
    outline: none;
    padding-left: 20px;
    padding-right: 45px;
    resize: none;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    min-height: 20px !important;
}

.botIcon .Input_button-emoji {
    right: 45px;
}

.botIcon .Input_button {
    background-color: transparent;
    border: none;
    bottom: 15px;
    cursor: pointer;
    height: 20px;
    outline: none;
    padding: 0;
    position: absolute;
    width: 20px;
}

.botIcon .Input_button-send {
    right: 15px;
}

.botIcon .Input-emoji .Input_button-emoji .Icon,
.botIcon .Input_button:hover .Icon {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.botIcon .Input-emoji .Input_button-emoji .Icon path,
.botIcon .Input_button:hover .Icon path {
    fill: #2c2c46;
}

.Icon svg {
    height: auto;
    width: 100%;
}

.msg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-self: center;
    align-items: center;
}

.msg.user {
    -webkit-box-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.msg+.msg {
    margin-top: 15px;
}

span.responsText {
    color: #000;
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    max-width: calc(100% - 50px);
}

.msg.user span.responsText {
    margin-left: 0;
    margin-right: 10px;
}

span.avtr {
    display: flex;
    width: 32px;
    align-self: center;
    align-items: center;
}

span.avtr figure {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    display: block;
    margin: 0;
    padding-bottom: 100%;
}

@-webkit-keyframes appear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-ms-keyframes appear {
    0% {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }

    100% {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes slidein {
    0% {
        opacity: 0;
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-ms-keyframes slidein {
    0% {
        opacity: 0;
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slidein {
    0% {
        opacity: 0;
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@media only screen and (max-width: 412px) {
    .botIcon .Layout-open {
        width: 250px;
    }
}

.icon-support-center {
    position: relative;

}

.parallax {
    position: relative;
}

@media (max-width: 768px) {
    .offcanvas-body {
        overflow-y: visible;
        background: #fff;
        min-height: 1000%;
    }

}


.table-responsive::-webkit-scrollbar {
    height: 8px;
}


.table-responsive::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}


.table-responsive::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 2px solid #f0f0f0;
}


.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

@media (max-width: 991.98px) {
    .pricing-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;

        /* Ẩn scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE10+ */
    }

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

    /* Thiết lập thứ tự rõ ràng: M1 (0), M2 (1), M3 (2) */
    .pricing-col-m1 {
        order: 0;
    }

    .pricing-col-m2 {
        order: 1;
    }

    .pricing-col-m3 {
        order: 2;
    }

    /* Kích thước và khoảng cách mỗi card */
    .pricing-scroll .col-lg-4 {
        flex: 0 0 auto;
        width: 80%;
        margin-right: 1rem;
    }

    .pricing-scroll .col-lg-4:last-child {
        margin-right: 0;
    }
}

.nav-pills.tab-component {

    position: relative;
    background-color: #f8fafd;
    padding: .25rem .25rem;
    border-radius: .3125rem;
}

.tab-component .nav-link {
    color: #51596c;
    font-size: .8125rem;
    padding: .5rem .875rem;
    border-radius: .3125rem;

}

.tab-component .nav-link.active {
    color: #00221c;
    background-color: #fff;
    box-shadow: 0 .1875rem .375rem 0 rgba(140, 152, 164, .25);
}

/* === Custom Horizontal Scrollbar for WebKit === */
.code-toolbar {
    position: relative;
    overflow-x: auto;
    /* bật cuộn ngang */
}

.code-toolbar::-webkit-scrollbar {
    height: 8px;
    /* Ä‘á»™ cao scrollbar ngang :contentReference[oaicite:0]{index=0} */
}

.code-toolbar::-webkit-scrollbar-track:horizontal {
    background-color: #f0f0f0;
    border-radius: 4px;
}

.code-toolbar::-webkit-scrollbar-thumb:horizontal {
    background-color: #007bff;
    border-radius: 4px;
    border: 2px solid #f0f0f0;
}

/* === Scrollbar cho Firefox === */
.code-toolbar {
    scrollbar-width: thin;
    scrollbar-color: #007bff #f0f0f0;
    /* thumb màu xanh, track màu xám nhạt :contentReference[oaicite:1]{index=1} */
}

/* === Styles cho nút Copy === */
.copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #007bff;
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.copy-btn:hover {
    opacity: 1;
}









/*------------------------------------
  Documentation
------------------------------------*/

:focus,
a:focus,
button:focus {
    outline: 0;
}

code {
    font-size: 100%;
}



.tab-content :not(pre)>code[class*="language-"],
.tab-content pre[class*="language-"] {
    border-bottom-right-radius: .3125rem;
    border-bottom-left-radius: .3125rem;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #fff;
    font-size: .9375em;
    margin: 0;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
    text-shadow: none;
    background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
    text-shadow: none;
    background: #b3d4fc;
}

@media print {

    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none;
    }
}

/* Code blocks */
pre[class*="language-"] {
    padding: 1.5rem;
    overflow: auto;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: #142140;
}

/* Light Theme */
.prism-light:not(pre)>.prism-light code[class*="language-"],
pre.prism-light[class*="language-"] {
    background: #f9fafc;
}

.prism-light code[class*="language-"],
pre.prism-light[class*="language-"] {
    color: #142140;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray;
}

.token.punctuation {
    color: #2f6f9f;
}

.token.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #2f6f9f;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #26a5b5;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #d09a5c;
    background: transparent;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #d44950;
}

.token.function,
.token.class-name {
    color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
    color: #e90;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

div.code-toolbar {
    position: relative;
}

div.code-toolbar>.toolbar {
    position: absolute;
    top: 1.0625rem;
    right: .75rem;
    transition: opacity 0.3s ease-in-out;
}


div.code-toolbar:hover>.toolbar {
    opacity: 1;
}

div.code-toolbar>.toolbar .toolbar-item {
    display: inline-block;
}

div.code-toolbar>.toolbar a {
    cursor: pointer;
}

div.code-toolbar>.toolbar button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-user-select: none;
    /* for button */
    -moz-user-select: none;
    -ms-user-select: none;
}

div.code-toolbar>.toolbar a,
div.code-toolbar>.toolbar button,
div.code-toolbar>.toolbar span {
    color: #fff;
    padding: .5rem 1rem;
    background-color: rgba(255, 255, 255, .1);
    border-radius: .3125em;
    transition: all .2s ease-in-out;
    font-size: 14px;
    font-weight: bold;
}

div.code-toolbar>.toolbar a:hover,
div.code-toolbar>.toolbar a:focus,
div.code-toolbar>.toolbar button:hover,
div.code-toolbar>.toolbar button:focus,
div.code-toolbar>.toolbar span:hover,
div.code-toolbar>.toolbar span:focus {
    color: #fff;
    background-color: #0d6efd;
}

/* Light Theme  */
div.code-toolbar>.prism-light+.toolbar a,
div.code-toolbar>.prism-light+.toolbar button,
div.code-toolbar>.prism-light+.toolbar span {
    color: #E7EAF3;
    background-color: transparent;
}

div.code-toolbar>.prism-light+.toolbar a:hover,
div.code-toolbar>.prism-light+.toolbar a:focus,
div.code-toolbar>.prism-light+.toolbar button:hover,
div.code-toolbar>.prism-light+.toolbar button:focus,
div.code-toolbar>.prism-light+.toolbar span:hover,
div.code-toolbar>.prism-light+.toolbar span:focus {
    color: #00221C;
    background-color: #006ccf;
}

/* AnchorJS Link */
.hs-docs-heading {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.hs-docs-heading~p {
    margin-top: -.5rem;
}

.hs-docs-heading::before {
    display: block;
    height: 6rem;
    margin-top: -6rem;
    content: "";
}

[data-anchorjs-icon]::after {
    content: attr(data-anchorjs-icon);
}

.anchorjs-link {
    padding-left: .5rem;
    font-size: 90%;
    color: rgba(0, 128, 96, .5) !important;
    transition: color .16s linear;
    opacity: 0;
}

.anchorjs-link:hover {
    color: rgba(0, 128, 96, 1) !important;
}

.hs-docs-heading:hover .anchorjs-link {
    opacity: 1;
}

/* Copy to clipboard style */
.hs-docs-copy-to-clipboard-text {
    font-size: 80%;
    color: #77838f;
}

.hs-docs-copy-to-clipboard:hover .hs-docs-copy-to-clipboard-text {
    color: #fff;
    background-color: #008060;
}

/* Content Divider */
.content-divider {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.content-divider:last-child {
    padding-bottom: 0;
    border-bottom-width: 0;
}


/* Scrollspy */
.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}


/* Card */
.card-header {
    border-width: 1px;
}


/* Page Header */
.docs-page-header {
    border-bottom: 0.0625rem solid #e7eaf3;
    padding-bottom: 1.75rem;
    margin-bottom: 2.25rem;
}

.docs-page-header-title {
    margin-bottom: 0.5rem;
}

.docs-page-header-text {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.docs-page-header-text:last-child {
    margin-bottom: 0;
}

/* Navbar */
.docs-navbar {
    z-index: auto;
}



@media (min-width: 991px) {
    .w-md-75 {
        width: 75% !important;
    }
}

/* Navbar Sidebar */
@media (min-width: 991px) {
    .docs-navbar-sidebar-container {
        max-width: 17rem;
    }
}

@media (min-width: 767.98px) {
    .docs-navbar-sidebar-aside-body {
        padding-top: 8.5rem !important;
    }
}

/* Text Highlight */
[class*=text-highlight-] {
    background: left 1em/1em 0.2em;
    background-repeat: repeat-x;
}

.text-highlight-warning {
    background-image: linear-gradient(to bottom, rgba(241, 185, 128, 0.5), rgba(241, 185, 128, 0.5));
}

.sidebar-components .nav-link.active {

    background: #cccccc00;

    color: #0d6efd;
    font-weight: 700;
}

.sidebar-components .nav-link {

    color: #242424;
}

@media (min-width: 1280px) {
    .problem-tms {
        padding-top: 0px;
    }

}

.btn-dang-ky {
    position: relative;
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    background: #6ea6f914;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
}

.btn-dang-ky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    background: linear-gradient(90deg,
            rgb(211, 77, 244) 0%,
            rgb(30, 241, 198) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}


.btn-dang-ky .fa-arrow-right {
    display: inline-block;
    /* Cho phép transform hoạt động chính xác */
    transition: transform 0.3s ease;
    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-dang-ky:hover .fa-arrow-right {
    transform: translateX(5px);
    /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}


.container .content-with-bullets .language-plaintext {
    background: #1e1e1e;
    color: #ccc;
    border-radius: 8px;
    padding: 12px;
    font-family: monospace;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 4px solid #666;
}

.container .content-with-bullets pre {
    overflow: inherit;
}

.custom-img {
    max-height: 192px;
    align-items: center;
    overflow: hidden;
}

.custom-h-52 {
    max-height: 52px;
    display: flex;
    align-items: center;
    min-height: 60px;
    overflow: hidden;
}

.custom-img-370 {
    height: 420px;
    width: 100%;
    overflow: hidden;
    display: block;
}

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

@media (max-width: 767.98px) {
    .custom-img-370 {
        height: 260px;
    }
}

.f-heading {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;

}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    /* width: 300px !important; */
    /* height: 600px!important; */
    /* box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); */
    filter: blur(4px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    align-items: self-start;
}

.swiper-slide-active {
    filter: blur(0px);
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
    background: #fff;
}




.swiper-slide h2 {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.4;
    margin-bottom: 15px;
    padding: 25px 45px 0 25px;
}

.swiper-slide p {
    display: flex;
    align-items: center;

}

.swiper-slide svg {
    color: #fff;
    width: 22px;
    height: 22px;
    margin-right: 7px;
}






.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
    background-image: none;
}

.swiper-slide-active {
    filter: blur(0px);
    background-image: linear-gradient(to top, #ffffff00, #001fffc2, #172744);
}

.news-card {
    /* border-radius: 1rem; */
    /* overflow: hidden; */
    background: #fff;
    transition: all 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.badge-custom {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50rem;
}

.myNewsSwiper .swiper-slide {
    filter: blur(0px);
}

.myNewsSwiper .swiper-slide-active {
    filter: blur(0px);
    background-image: none;
}

.swiper.myNewsSwiper {
    overflow: visible;

}

.myNewsSwiper .swiper-pagination {
    bottom: -48px !important;
    left: 0;
    width: 100%;
}

.mySwiper1 .swiper-slide {
    width: 350px !important;
}



.table-responsive {
    padding: 18px 18px;
    border: 1px solid #cccccc38;
    background: #6ea6f914;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 10px;
}



.hover-card-pricing .btn.btn-primary.effect-glass {
    opacity: 0;
    transition: all 0.4s;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
}

.hover-card-pricing:hover .btn.btn-primary.effect-glass {
    opacity: 1;
}

.hover-card-pricing:hover .docs {
    display: block;
}

.docs {
    display: none;
}

@media (max-width: 576px) {
    .nav.nav-pills .nav-item {
        width: auto;
    }
}

@media (max-width: 576px) {
    .text-slide h5 {
        font-size: 16px;
    }

    .card-glass:hover::after {
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px) saturate(120%);
    }
}

.pricing-table .row {
    border-bottom: 1px solid #dee2e6;
    padding: 6px 0;
    align-items: center;
}

.pricing-table .row:first-child {
    border-top: 2px solid #000;
    background: #f8f9fa;
}

.pricing-table .row:nth-child(even) {
    background-color: #fdfdfd;
}



.pricing-table p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.pricing-table .fw-bold {
    font-weight: 600;
    color: #212529;
}

.pricing-table .service-group {
    background: #e9f3ff;
    font-weight: 700;
    padding: 6px 10px;
    border-left: 4px solid #0d6efd;
    margin-top: 12px;
    font-size: 14px;
}

.pricing-table .row:hover {
    background-color: #eef6ff;
    transition: 0.2s;
}

.pricing-table-api-featured .row {
    border-bottom: 1px solid #dee2e6;
    padding: 6px 0;
    align-items: center;
}

.pricing-table-api-featured .row:first-child {
    border-top: 2px solid #002eac;
    background: #f8f9fa;
}

.service-badge {

    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    text-align: right;

}

/* Trackasia */
.service-badge.trackasia {
    background: #e7f1ff;
    color: #0d6efd;

}

.service-badge.local {
    background: #eafaf1;
    color: #198754;
}

.service-badge.global {
    background: #fdecec;
    color: #dc3545;

}

.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.news-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}



/* Mobile (bỏ grid, trả về mặc định flex của Swiper) */
@media (max-width: 767px) {
    .mySwiper1 .swiper-wrapper {
        display: flex;
        /* Swiper mặc định dùng flex */
        grid-template-columns: unset;
        gap: 0;
    }
}

.stats-section {
    background: linear-gradient(135deg, #044153, #032c4d00);

    color: #fff;
    padding: 24px 0;
}

.stat-box h3 {
    font-size: 2rem;
    font-weight: 700;
}

.stat-box p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.85;
}

.api-card {
    border: none;
    border-radius: 12px;
    padding: 24px;

}

.api-card:hover {


    box-shadow: 0 .375rem .75rem rgba(140, 152, 164, .075) !important;
    cursor: pointer;
}


.logistics-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logistics-card:hover {

    box-shadow: 0 .6125rem 2.5rem .6125rem rgba(140, 152, 164, .175) !important;

    cursor: pointer;
}

.input-group .form-control {
    padding: 14px;
}

.placeholder-box {
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    min-height: 180px;
}

.lang-icons img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.scroll-down-btn {
    display: inline-block;
    text-decoration: none;
    position: absolute;

    z-index: 9;
}

/* Desktop: nút nằm giữa đáy cách 30px */
@media (min-width: 992px) {
    .scroll-down-btn {
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.mouse {
    background: #2c333e linear-gradient(transparent 0%, transparent 50%, white 50%, white 100%);
    position: relative;
    box-shadow: 0 0 50px 15px #15aaf9ba;
    width: 38px;
    height: 65px;
    margin: 0 auto;
    border-radius: 6rem;
    background-size: 100% 200%;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}

.mouse:before,
.mouse:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.mouse:before {
    width: 34px;
    height: 61px;
    background-color: #121519;
    border-radius: 6rem;
}

.mouse:after {
    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    width: .375rem;
    height: .375rem;
    border-radius: 100%;
    animation: trackBallSlide 5s linear infinite;
}

@keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }

    20% {
        background-position: 0% 0%;
    }

    21% {
        background-color: #2c333e;
    }

    29.99% {
        background-color: white;
        background-position: 0% 0%;
    }

    30% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }

    50% {
        background-position: 0% 0%;
    }

    51% {
        background-color: #2c333e;
    }

    59% {
        background-color: white;
        background-position: 0% 0%;
    }

    60% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }

    80% {
        background-position: 0% 0%;
    }

    81% {
        background-color: #2c333e;
    }

    90%,
    100% {
        background-color: white;
    }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }

    6% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }

    14% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }

    15%,
    19% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }

    28%,
    29.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }

    30% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }

    36% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }

    44% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }

    45%,
    49% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }

    58%,
    59.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }

    60% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }

    66% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }

    74% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }

    75%,
    79% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }

    88%,
    100% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
}

@keyframes nudgeMouse {

    0%,
    30%,
    60%,
    90% {
        transform: translateY(0);
    }

    20%,
    50%,
    80% {
        transform: translateY(8px);
    }
}

@keyframes nudgeText {

    0%,
    30%,
    60%,
    90% {
        transform: translateY(0);
    }

    20%,
    50%,
    80% {
        transform: translateY(2px);
    }
}

@keyframes colorText {

    21%,
    51%,
    81% {
        color: #2c333e;
    }

    30%,
    60%,
    90% {
        color: white;
    }
}

#resultBox {
    animation: fadeIn 0.4s ease-in-out;
}

#jsonOutput {
    font-family: "Fira Code", monospace;
    font-size: 14px;
    color: #1f2937;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.status-success {
    color: #16a34a;
    /* xanh thành công */
    font-weight: bold;
}

.response-time {
    font-size: 0.875rem;
    color: #6b7280;
}



.card-taller {
    min-height: 110%;
    /* cao hơn 10% so với card bình thường */
}


.area {
    background: #fff;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -99px;
    z-index: -1;


}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cubes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cubes li {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    bottom: -150px;
    animation: floatUp 20s linear infinite;
    perspective: 600px;
}

.cubes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cubes li {
    position: absolute;
    bottom: -150px;
    animation: floatUp 25s linear infinite;
    perspective: 800px;
}

/* Size variants */
.cubes li.small {
    width: 30px;
    height: 30px;
}

.cubes li.medium {
    width: 60px;
    height: 60px;
}

.cubes li.large {
    width: 80px;
    height: 80px;
}

/* Cube base */
.cube {

    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 15s infinite linear;
}

.cube span {
    opacity: 0.5 !important;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ECE9E6;
    background: -webkit-linear-gradient(to top, #FFFFFF, #ECE9E6);
    background: linear-gradient(to top, #FFFFFF, #ECE9E6);
    border: 1px solid #ddd;
    box-shadow: inset 0 0 10px rgb(6 35 59 / 8%);
}

/* 6 faces */
.front {
    transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2));
}

.back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));
}

.right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
}

.left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
}

.bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.cubes li.small {
    --cube-size: 30px;
}

.cubes li.medium {
    --cube-size: 60px;
}

.cubes li.large {
    --cube-size: 80px;
}



/* Animation */
@keyframes spin {
    0% {
        transform: rotateX(0) rotateY(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }

    100% {
        transform: translateY(-1200px) scale(1.5);
        opacity: 0;
    }
}

/* Random positions & delays */
.cubes li:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.cubes li:nth-child(2) {
    left: 20%;
    animation-delay: 2s;
}

.cubes li:nth-child(3) {
    left: 35%;
    animation-delay: 4s;
}

.cubes li:nth-child(4) {
    left: 50%;
    animation-delay: 6s;
}

.cubes li:nth-child(5) {
    left: 65%;
    animation-delay: 8s;
}

.cubes li:nth-child(6) {
    left: 80%;
    animation-delay: 10s;
}

.cubes li:nth-child(7) {
    left: 90%;
    animation-delay: 12s;
}



.circles li {
    opacity: 0.3 !important;
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #ECE9E6;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FFFFFF, #ECE9E6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FFFFFF, #ece9e68c);
    animation: animate 25s linear infinite;
    bottom: -150px;
    /* hiệu ứng khối */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        inset -3px -3px 6px rgba(0, 0, 0, 0.2),
        inset 3px 3px 6px rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    /* tùy chỉnh */

}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 20px;
    height: 20px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 30px;
    height: 30px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.map-container {
    position: relative;
    width: 100%;
    height: 450px;

    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 500px;

    z-index: 2;
    text-align: center;
}


.map-card img {
    width: 48px;

}

.map-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.map-card p,
.map-card span {
    font-size: 15px;
    margin-bottom: 6px;
    color: #333;
}

.bg-form-contact {
    background: url(/media/images/bg-form-1.png);
    background-size: cover;
    background-attachment: fixed;

}

.floating-area {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    left: 0;
    z-index: 9;
    top: 0;
}

.float-box {
    position: absolute;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatUp 100s linear infinite;
}

/* Nhiều delay khác nhau để icon luôn nối tiếp */
.float-box:nth-child(1) {
    top: 100%;
    left: 10%;
    animation-delay: 0s;
}

.float-box:nth-child(2) {
    top: 100%;
    left: 30%;
    animation-delay: 3s;
}

.float-box:nth-child(3) {
    top: 100%;
    left: 50%;
    animation-delay: 6s;
}

.float-box:nth-child(4) {
    top: 100%;
    left: 70%;
    animation-delay: 9s;
}

.float-box:nth-child(5) {
    top: 100%;
    left: 85%;
    animation-delay: 12s;
}

.float-box:nth-child(6) {
    top: 100%;
    left: 95%;
    animation-delay: 14s;
}

.float-box img {

    width: 160px;
    animation: floatIcon 30s linear infinite;
}

/* Bay lên + từ lớn dần nhỏ lại + mờ đi */
@keyframes floatIcon {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    /* Bắt đầu ẩn, to hơn */
    25% {
        transform: translateY(-30vh);
        opacity: 0.1;
    }

    /* Hiện mờ */
    50% {
        transform: translateY(-60vh);
        opacity: 0;
    }

    /* Rõ nhất */
    100% {
        transform: translateY(-120vh);
        opacity: 0;
    }

    /* Nhỏ dần và biến mất */
}

@media screen and (width: 1280px) and (height: 1024px) {
    .img-parallax {
        margin-top: 180px !important;
    }
}

.bg-cta {
    background: url(/media/images/img-footer-top.png);
    background-size: cover;
    background-position: center;
}

.apple-liquid-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    /* nền bán trong suốt */
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.apple-liquid-glass::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 180deg at 50% 50%, #5ddcff00, #3c67e38c, #00a9c233, #5ddcff00);
    animation: rotateBorder 6s linear infinite;
    filter: blur(40px);
    opacity: 0.6;
    z-index: -1;
}

.apple-liquid-glass:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Article detail card image sizing */
.article-card-img-wrap {
    height: 360px;
    overflow: hidden;
}

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

@media (max-width: 767.98px) {
    .article-card-img-wrap {
        height: 220px;
    }
}

/* News card title font */
.font-inter {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Sidebar titles: short primary underline */
.sidebar-title {
    position: relative;
}

.sidebar-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--bs-primary);
    border-radius: 4px;
    margin-top: 6px;
}

/* Sidebar category active state */
.sidebar-cat-active>a {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    border-radius: 0.75rem;
    /* match .rounded-3 */
}

/* Sticky latest news box in sidebar */
.sticky-latest {
    position: sticky;
    top: 100px;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .sticky-latest {
        position: static;
    }
}

#articles-container .card-body {
    /* max-height: 280px; */
}

/* Disable max-height on phones */
@media (max-width: 576px) {
    #articles-container .card-body {
        max-height: none !important;
    }
}

/* Mobile: stack hero buttons full width in two rows */
@media (max-width: 576px) {

    .btn-hero,
    .btn-hero-new {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .btn-hero+.btn-hero-new,
    .btn-hero-new+.btn-hero {
        margin-top: 0.75rem;
    }
}

/* ===== Accordion tweaks (mobile) ===== */
@media (max-width: 576px) {

    /* Bỏ padding utility p-4/py-4/px-4 ở container accordion trên mobile */
    .accordion.p-4 {
        padding: 0 !important;
    }

    .accordion.py-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .accordion.px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Bỏ padding .p-4 bên trong accordion trên mobile (nếu có) */
    .accordion .p-4 {
        padding: 0 !important;
    }

    .footer .accordion .accordion-button {
        font-size: 18px !important;
        line-height: 1.3;
    }

    /* Thu nhỏ font tiêu đề accordion */
    .accordion .accordion-button {
        font-size: 16px !important;
        line-height: 1.3;
    }

    .accordion-button:focus {
        z-index: 3;
        outline: 0;
        box-shadow: none !important;
    }
}

/* Footer accordion white chevron on dark background */
@media (max-width: 991.98px) {
    .footer-dark .accordion-button {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
        color: #fff;
        background-color: transparent;
    }

    .footer-dark .accordion-button::after {
        background-image: var(--bs-accordion-btn-icon);
        filter: none;
        opacity: 1;
    }
}

.why-icon img {
    width: 64px;
    height: 64px;
}

.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

@media (max-width: 667px) {
    .swiper-wrapper {
        gap: 0;
    }
}