:root {
    --font-medium: 14px;
    --font-title: 16px;
    --font-big: 32px;
    --text-align: justify;
}
.text-align-justifyy {
    color: #212529;
    text-align: justify;
}
#webchat .bpWebchat {
    position: unset;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#webchat .bpFab {
    display: none;
}
.recent-post .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.mota {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.price-style1 .price-features {
    min-height: 417px;
}

.price-desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    color: #98a2b3;
    margin-bottom: 30px;
    height: 40px;
}

.blog-details .blog-single .blog-content h1 {
    font-size: 32px;
    font-weight: 700;
}

.blog-details .blog-single .blog-content h2 {
    font-size: 28px;
    font-weight: 600;
}

.blog-details .blog-single .blog-content h3 {
    font-size: 25px;
    font-weight: 600;
}

.blog-details .blog-single .blog-content h4 {
    font-size: 22px;
    font-weight: 600;
}

.blog-details .blog-single .blog-content h5 {
    font-size: 20px;
    font-weight: 600;
}

article h1 {
    font-size: 32px;
    font-weight: 700;
}

article h2 {
    font-size: 28px;
    font-weight: 600;
}

article h3 {
    font-size: 23px;
    font-weight: 600;
}

article h4 {
    font-size: 21px;
    font-weight: 600;
}

article h5 {
    font-size: 18px;
    font-weight: 600;
}

.service-us .service-style6 {
    min-height: 445px;
}

.will-sticky .sticky-active .vs-btn {
    padding: 19px 13.5px;
}

.will-sticky .sticky-active .main-menu > ul > li {
    margin: 0 15px;
}

.will-sticky .sticky-active .main-menu a {
    font-weight: 600;
    font-size: 16px;
}

/*Tài Liệu*/
.w50 {
    width: 50%;
}

/* --------------------- */
.ebook-header-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.banner.banner--header img {
    width: 100%;
}

.ehc-line {
    width: 4px;
    height: 32px;
    border-radius: 4px;
    background-color: #0065ff;
}

.ehc-text {
    /*font-family: Montserrat SemiBold, Arial, sans-serif;*/
    color: #0065ff;
    font-size: var(--font-big);
}

.ehc--cp {
    margin-bottom: 24px;
}

.ehc-more {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*font-family: Montserrat;*/
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}

.cp-header {
    display: flex;
    justify-content: space-between;
}
/* --------------------- */

/* --------------------- */

.search {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
    box-shadow: 3px 10px 20px 0px #0000002e;
    border-radius: 12px;
    background-color: #ffffff;
    margin-top: var(--section-space);
    /* z-index: 2;
    position: relative;*/
}

    .search .is-form-style::after {
        background: url("/Images/icon/16-search.svg") no-repeat center center;
        height: 16px;
        width: 16px;
        top: 24px;
        left: 12px;
        opacity: 1;
    }

.sleft {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sright {
    display: flex;
    align-items: flex-end;
}

.search ul {
    list-style: none;
}

    .search ul li {
        margin: 0;
    }

.category-dropdown,
.date-dropdown {
    position: relative;
    cursor: pointer;
}

    .category-dropdown .options {
        z-index: 2;
        width: 100%;
        border-radius: 9px;
        cursor: pointer;
        border: none;
        outline: none;
        box-shadow: 0 10px 25px rgba(124, 130, 141, 0.2);
        overflow: hidden;
        position: absolute;
        top: 44px;
        transition: all 0.7s ease;
        background-color: white;
        backdrop-filter: blur(4.5px);
        opacity: 0;
        transform: translateY(-20px);
        visibility: hidden;
        /*font-family: Montserrat;*/
        font-size: var(--font-medium);
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        padding: 0px;
    }

        .category-dropdown .options .option {
            padding: 16px;
            border-radius: 9px;
            transition: all 0.2s ease;
            color: #292d34;
        }

    .category-dropdown.opened .options {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .category-dropdown::before {
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: 14px;
        width: 16px;
        height: 16px;
        background: url(/Images/icon/16-dropdown.svg) no-repeat;
        pointer-events: none;
        transition: all 0.2s ease-out;
        cursor: pointer;
    }

    .date-dropdown::before {
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: 14px;
        width: 16px;
        height: 16px;
        background: url(/Images/icon/16-calendar.svg) no-repeat;
        pointer-events: none;
        cursor: pointer;
    }

    .category-dropdown.opened::before {
        transform: rotate(-180deg);
    }

    .category-dropdown .options .option {
        padding: 8px 12px;
    }

        .category-dropdown .options .option:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

.search .srow {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.search .is-search-form {
    max-width: 3000px;
    border-radius: 6px;
    border: 1px solid #dfe1e6;
}

.search .ic-cancel-input {
    display: none;
}

.fg1 {
    flex-grow: 1;
}

.search .custom-input,
.search .is-form-style input.is-search-input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 28px !important;
    cursor: pointer;
    height: 44px;
    /*font-family: Montserrat;*/
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    border-radius: 6px;
}

.search .custom-input {
    padding: 10px 16px;
}

.btn--search {
    border-radius: 6px;
    background-color: #0065ff;
    position: relative;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn--search:hover {
        cursor: pointer;
    }

    .btn--search .icon-search {
        background: url(/Images/icon/ic-search-white.png) no-repeat center;
        width: 16px;
        height: 16px;
    }

.btn__text {
    color: #fff;
    font-weight: 500;
    font-size: var(--font-title);
    line-height: 20px;
}

/* --------------------- */

.explore {
    margin: 80px 0;
    display: block;
}

.explore-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.explore-tag {
    position: relative;
    flex: 1;
}

    .explore-tag a:hover {
        opacity: 0.9;
    }

    .explore-tag img {
        width: 100%;
        border-radius: 6px;
    }

.explore-header {
    margin-bottom: 24px;
}

.et-content .et__title {
    font-weight: 500;
    margin-bottom: 8px;
}

.et__expand {
    display: flex;
    gap: 8px;
    font-size: var(--font-medium);
}

    .et__expand img {
        width: 16px;
        height: 16px;
    }

.et-content {
    position: absolute;
    bottom: 0px;
    padding: 12px;
    font-size: var(--font-title);
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    color: white;
    font-weight: 400;
}

    .et-content .et__title {
        font-weight: 500;
        margin-bottom: 8px;
    }

.banner.banner--bottom img {
    width: 100%;
    margin-top: 80px;
}

.chc-line {
    width: 4px;
    height: 32px;
    border-radius: 4px;
    background-color: #0065ff;
}

.chc-text {
    color: #0065ff;
    font-size: var(--font-big);
}

.chc-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}

a.np-more {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0065ff;
    margin-bottom: 24px;
}

.cp-container {
    width: 970px;
    padding: 0 35px;
}

.cp__title {
    font-size: var(--font-title);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    color: #172b4d;
    margin-top: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.cp__tag {
    background: #deebff;
    width: fit-content;
    padding: 2px 8px;
    color: #0065ff;
    border-radius: 20px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.cp__ulti {
    display: flex;
    gap: 8px;
    align-items: center;
    line-height: 21px;
    font-size: var(--font-medium);
}

.cp__ulti {
    color: #0065ff;
}

.cp__title a {
    color: #172b4d;
}

.cp__ulti img {
    width: 16px;
    height: 16px;
}

.ebook-header-content {
    margin-bottom: 24px;
}

.category-post-container {
    margin-top: 80px;
}

    .category-post-container:first-child {
        margin-top: 52px;
    }


    .category-post-container:nth-child(odd) .cp-wrapper {
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 32px;
        row-gap: 32px;
    }

    .category-post-container:nth-child(odd) .cp {
        flex-grow: 1;
    }

    .category-post-container:nth-child(odd) .cp__title {
        margin-top: 4px;
        margin-bottom: 12px;
    }

    .category-post-container:nth-child(odd) .cp__img img {
        width: 200px;
        min-width: 200px;
        height: 112px;
    }

    .category-post-container:nth-child(odd) .cp {
        display: flex;
        gap: 32px;
    }

    .category-post-container:nth-child(even) .cp-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 46px;
        justify-content: center;
        align-items: center;
    }

    .category-post-container:nth-child(even) .cp__img img {
        width: 270px;
        height: 151px;
        border-radius: 6px;
    }

    .category-post-container:nth-child(even) .cp {
        box-shadow: 0px 0px 8px 0px #00000029;
        border-radius: 6px;
        max-width: 270px;
        width: 270px;
    }

    .category-post-container:nth-child(even) .cp__title {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .category-post-container:nth-child(even) .cp-content {
        padding: 16px;
    }

.paging-wrapper {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.search .custom-input:focus,
.search .is-form-style input.is-search-input:focus {
    border: 1px solid #0065ff;
}

/* ---------------- */

@media (min-width: 1366px) {
    .ebook-container .container {
        width: 1200px;
    }
}

@media (max-width: 968px) {
    .explore-tag {
        width: 170px;
        flex: unset;
    }

    .category-post-container:nth-child(even) .cp-wrapper {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 768px) {
    .category-post-container:nth-child(odd) .cp-wrapper {
        grid-template-columns: auto;
    }

    .banner.banner--bottom img {
        margin-top: 40px;
    }

    .explore {
        margin: 40px 0;
    }

    .ebook-container {
        --font-medium: 12px;
        --font-title: 14px;
        --font-big: 24px;
    }
}

@media (max-width: 567px) {
    .category-post-container {
        margin-top: 40px;
    }

    .search {
        margin-top: -25px;
        padding: 12px;
        justify-content: center;
    }

        .search .srow {
            gap: 16px;
        }

    .chc-text {
        font-size: 20px;
    }

    .category-post-container:nth-child(odd) .cp__img img,
    .category-post-container:nth-child(even) .cp__img img {
        width: 100%;
        height: auto;
    }

    .category-post-container:nth-child(odd) .cp__img img {
        max-height: 207px;
    }

    .category-post-container:nth-child(even) .cp__img img {
        max-height: 190px;
    }

    .et-content {
        padding: 24px;
    }

    .category-post-container:nth-child(odd) .cp {
        flex-direction: column;
    }

    .category-post-container:nth-child(even) .cp-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        display: flex;
    }

    .category-post-container:nth-child(odd) .cp-wrapper {
        row-gap: 24px;
    }

    .category-post-container:nth-child(even) .cp {
        max-width: unset;
        width: 100%;
    }

    .category-post-container:nth-child(odd) .cp {
        box-shadow: 0px 0px 8px 0px #00000029;
        border-radius: 6px;
        overflow: hidden;
    }

    .category-post-container:nth-child(odd) .cp-content {
        padding: 0 16px 16px;
    }

    .explore-content {
        gap: 5px;
    }
}

.is-screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}

.is-form-style label {
    display: inline-block !important;
    padding: 0;
    vertical-align: middle;
    margin: 0;
    width: 100%;
    line-height: 1;
}

.is-form-style {
    line-height: 1;
    position: relative;
    padding: 0 !important;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

    .is-form-style::after {
        position: absolute;
        display: block;
        content: '';
        background: url(/Images/icon/search.svg) no-repeat center center;
        background-size: 20px;
        height: 20px;
        width: 20px;
        top: 50%;
        left: 15px;
        margin-top: -10px;
        opacity: .7;
    }

    .is-form-style:active {
        outline: none;
    }

    .is-form-style:focus {
        outline: none;
    }

    .is-form-style input.is-search-input {
        -webkit-border-radius: 99px;
        -moz-border-radius: 99px;
        -ms-border-radius: 99px;
        border-radius: 99px;
        display: block;
        width: 100%;
        padding: 18px 20px 18px 45px;
        border: 0;
        outline: none;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15);
    }

        .is-form-style input.is-search-input:focus {
            outline: none;
        }

    .is-form-style.is-form-style-3 input.is-search-input {
        font-weight: normal;
        font-size: 16px;
    }

    .is-form-style button.is-search-submit {
        display: none;
        background: 0 0;
        border: 0;
        box-shadow: none !important;
        opacity: 1;
        padding: 0 !important;
        margin: 0;
        line-height: 0;
        outline: 0;
        vertical-align: middle;
        width: 36px;
        height: 36px;
    }

    .is-form-style .is-search-submit path {
        fill: #555;
    }

.is-search-icon {
    width: 36px;
    padding-top: 6px !important;
}

    .is-search-icon svg {
        width: 22px;
        display: inline;
    }

.is-search-icon {
    display: inline-block !important;
    color: #666;
    background: #ededed;
    box-shadow: none !important;
    outline: 0;
    margin: 0;
    font-size: 14px !important;
    border: 1px solid #ccc;
    border-radius: 0;
    line-height: 1;
    height: 36px;
    text-transform: capitalize;
    vertical-align: middle;
    -webkit-transition: background-color 0.1s ease-in-out;
    -moz-transition: background-color 0.1s ease-in-out;
    -o-transition: background-color 0.1s ease-in-out;
    transition: background-color 0.1s ease-in-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .is-search-icon:hover {
        background: #dcdcdc;
    }

.header-logo {
    max-height: 105px;
    width: auto;
    max-width: 200px;
}

    .header-logo img {
        object-fit: cover;
        object-position: center;
    }

.main-menu .sub-menu .group-parent {
    display: flex;
    align-items: center;
}

    .main-menu .sub-menu .group-parent img {
        width: 15px;
        height: auto;
    }

.bpFab {
    bottom: 0.5rem !important;
    right: 3.3rem !important;
}
.widget_tag_cloud, .pricequote {
    display: none;
}
.hide {
    display: none;
}
.zalo-chat-widget {
    right: auto;
    left: 0;
}
.header-img {
    text-align: center;
    margin-bottom: 20px;
}

    .header-img img {
        max-width: 100%;
        height: auto;
    }

.dowload-container h2 {
    text-align: center;
    color: #333;
}

.dowload-container {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.dowload-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

    .dowload-container table {
        width: 90%;
        margin: 20px auto;
        border-collapse: collapse;
    }


    .dowload-container th, td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    .dowload-container td {
        color: #1c1b1b;
    }

    .dowload-container th {
        background: #0473aa;
        color: white;
    }

    .dowload-container .critical {
        color: red;
        font-weight: bold;
    }

.toggle-arrow {
    cursor: pointer;
}

.driver-content {
    display: none;
    text-align: left !important;
}

.dowload-container .download-btn {
    margin-top: 20px;
    padding: 10px;
    background: blue;
    color: white;
    border: none;
    cursor: pointer;
    display: none;
}

tbody tr:hover {
    background-color: #f0f0f0;
}

.video-thumb {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    max-width: 587px;
}

    .video-thumb img {
        display: block;
        width: 100%;
        height: auto;
    }

    .video-thumb .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70px;
        height: 70px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .video-thumb .play-button::before {
            content: "";
            display: inline-block;
            border-style: solid;
            border-width: 12px 0 12px 20px;
            border-color: transparent transparent transparent white;
            margin-left: 5px;
        }

.youtobe-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 73px;
    height: 52px;
    background-color: red;
    border-radius: 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);

}
.text-erp {
   font-size: 40px!important;
}
/* ===== BREADCRUMB WRAPPER ===== */
.breadcrumb-wrapper-erp {
    background: #f4f7fa;
    border-bottom: 1px solid #eef1f4;
    padding: 12px 0;
}


.breadcrumb-erp {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}


.breadcrumb-link-erp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00984a;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s ease;
}

    .breadcrumb-link-erp i {
        font-size: 13px;
    }
.breadcrumb-sep-erp {
    color: #adb5bd;
    font-size: 14px;
}

.breadcrumb-current-erp {
    
    color: #212529;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 18px;
}

/* ================= Trang gioi thieu ================= */
.text-muted-gt {
    color: #212529;
    text-align: justify;
}
.breadcrumb-wrapper-gt {
    background: #f4f7fa;
    border-bottom: 1px solid #eef1f4;
    padding: 12px 0;
}
.breadcrumb-container-gt{
    margin-left: 245px;
}
.breadcrumb-gt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}
.breadcrumb-link-gt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00984a;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s ease;
}

    .breadcrumb-link-gt i {
        font-size: 13px;
    }
.breadcrumb-sep-gt {
    color: #adb5bd;
    font-size: 14px;
}
.breadcrumb-current-gt {
   
    color: #212529;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 18px;
}

.bg-success-gt {
    background: #f0fef9;
}
.py-20-gt {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mb-20-gt {
    margin-bottom: 5rem;
}

.gap-4-gt {
    gap: 1rem;
}

.gap-6-gt {
    gap: 1.5rem;
}

.text-success-about {
    color: #00984a;
}

.truncate-clamp-2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
    cursor: pointer;
}

    .truncate-clamp-2:hover {
        white-space: normal;
    }
.reveal-gt {
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

    .reveal-gt.active {
        opacity: 1;
        transform: translateY(0);
    }

.delay-100-gt {
    transition-delay: 0.1s;
}

.delay-200-gt {
    transition-delay: 0.2s;
}

.delay-300-gt {
    transition-delay: 0.3s;
}



.animate-bounce-gt {
    animation: bounce-gt 3s infinite;
}

/* --- ABOUT & VIDEO (-gt) --- */
.section-relative-gt {
    position: relative;
}

.blob-blue-gt {
    position: absolute;
    top: 0;
    right: -5rem;
    margin-top: -5rem;
    width: 24rem;
    height: 24rem;
    background-color: #e4faf3;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.7;
    z-index: 0;
    mix-blend-mode: multiply;
}

.blob-gray-gt {
    position: absolute;
    bottom: 0;
    left: -5rem;
    margin-bottom: -5rem;
    width: 24rem;
    height: 24rem;
    background-color: #e1f9f1;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.7;
    z-index: 0;
    mix-blend-mode: multiply;
}

.stats-box-gt {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-number-gt {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--primary-blue);
}

.stat-label-gt {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.stat-divider-gt {
    width: 1px;
    background-color: #d1d5db;
    height: 3rem;
}

.video-border-gt {
    border: 4px solid white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: black;
}

.video-container-gt {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

    .video-container-gt iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* --- CARDS (Mission/Vision) (-gt) --- */
.card-mv-gt {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .card-mv-gt:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

.border-t-blue-gt {
    border-top: 4px solid #3b82f6;
}

.border-t-green-gt {
    border-top: 4px solid #22c55e;
}

.border-t-orange-gt {
    border-top: 4px solid #f97316;
}

.card-blob-gt {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    opacity: 0.5;
    transition: transform 0.5s;
}

.bg-blob-blue-gt {
    background-color: #d1dff1;
}

.bg-blob-green-gt {
    background-color: #d5eedd;
}

.bg-blob-orange-gt {
    background-color: #eee2d3;
}

.card-mv-gt:hover .card-blob-gt {
    transform: scale(1.5);
}

.icon-sq-gt {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

.icon-sq-blue-gt {
    background-color: #dbeafe;
    color: #2563eb;
}

.icon-sq-green-gt {
    background-color: #dcfce7;
    color: #16a34a;
}

.icon-sq-orange-gt {
    background-color: #ffedd5;
    color: #ea580c;
}

.card-title-gt {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 10;
}

.card-desc-gt {
    color: #212529;
    line-height: 1.625;
    position: relative;
    z-index: 10;
    text-align: justify;
}

 /* ===== HỆ SINH THÁI DOFA ERP ===== */
.py-20-gt {
    padding: 5rem 0;
}

/* ===== GRID 5 CỘT ===== */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ===== BOX ===== */
.feature-box-gt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    transition: all .35s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .feature-box-gt:hover {
        transform: translateY(-6px);
    }

    /* Shine effect */
    .feature-box-gt::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.45), transparent );
        transform: translateX(-100%);
        transition: .6s;
    }

    .feature-box-gt:hover::after {
        transform: translateX(100%);
    }

/* ===== ICON ===== */
.icon-circle-gt {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: all .35s ease;
}

.feature-box-gt:hover .icon-circle-gt {
    transform: scale(1.1) rotate(4deg);
}

/* ===== CONTENT ===== */
.feature-content-gt h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #212529;
}

.feature-content-gt p {
    font-size: 14px;
    margin: 0;
    color: #6c757d;
}

/* ===== ICON COLORS ===== */
.ic-blue-gt {
    background: #0d6efd;
}

.ic-green-gt {
    background: #198754;
}

.ic-orange-gt {
    background: #fd7e14;
}

.ic-purple-gt {
    background: #6f42c1;
}

.ic-red-gt {
    background: #dc3545;
}

.ic-yellow-gt {
    background: #ffc107;
    color: #000;
}

.ic-teal-gt {
    background: #20c997;
}

.ic-gray-gt {
    background: #6c757d;
}

/* ===== HOVER SHADOW ===== */
.hover-blue-gt:hover {
    box-shadow: 0 14px 36px rgba(13,110,253,.28);
}

.hover-green-gt:hover {
    box-shadow: 0 14px 36px rgba(25,135,84,.28);
}

.hover-orange-gt:hover {
    box-shadow: 0 14px 36px rgba(253,126,20,.28);
}

.hover-purple-gt:hover {
    box-shadow: 0 14px 36px rgba(111,66,193,.28);
}

.hover-red-gt:hover {
    box-shadow: 0 14px 36px rgba(220,53,69,.28);
}

.hover-yellow-gt:hover {
    box-shadow: 0 14px 36px rgba(255,193,7,.28);
}

.hover-teal-gt:hover {
    box-shadow: 0 14px 36px rgba(32,201,151,.28);
}

.hover-gray-gt:hover {
    box-shadow: 0 14px 36px rgba(108,117,125,.28);
}

/* --- BENEFITS (-gt) --- */
.benefit-icon-gt {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.benefit-group-gt:hover .bg-green-soft-gt {
    background: #16a34a;
    color: white;
}
.bg-green-soft-gt {
    background: #dcfce7;
    color: #16a34a;
}

.img-shadow-gt {
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: 0.5s;
    width: 100%;
    height: auto;
}

    .img-shadow-gt:hover {
        transform: scale(1.05);
    }

/* --- CUSTOMERS (-gt) --- */
.customer-section-gt {
    background-color: #1e3a8a; 
    color: white;
    position: relative;
    overflow: hidden;
}

.overlay-blob-gt {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    filter: blur(64px);
    mix-blend-mode: overlay;
}

.blob-1-gt {
    top: 0;
    right: 0;
    background: white;
}

.blob-2-gt {
    bottom: 0;
    left: 0;
    background: #60a5fa;
}

.glass-box-gt {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
    cursor: pointer;
}

    .glass-box-gt:hover {
        background: rgba(255, 255, 255, 0.2);
    }

.glass-text-gt {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
}
.social-btn-gt {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .social-btn-gt:hover {
        background: #2563eb;
        color: white;
    }

/*đối tác trang giới thiệu*/
.section-khach-hang-gt {
    padding: 60px 0;
    overflow: hidden; 
}
.section-title-gt {
    font-weight: 700;
    font-size: 28px;
    color: #000;
    margin-bottom: 50px;
}

/* Container chứa dải chạy */
.marquee-wrapper-gt {
    display: flex;
    overflow: hidden;
    width: 100%;
    margin-bottom: 24px;
    position: relative;
}

.marquee-track-gt {
    display: flex;
    width: max-content;
    animation: scroll-left-gt 60s linear infinite;
}
.marquee-track-reverse-gt {
    display: flex;
    width: max-content;

    animation: scroll-right-gt 70s linear infinite;
}

.marquee-wrapper-gt:hover .marquee-track-gt,
.marquee-wrapper-gt:hover .marquee-track-reverse-gt {
    animation-play-state: paused;
}

@keyframes scroll-left-gt {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%); 
    }
}

@keyframes scroll-right-gt {
    0% {
        transform: translateX(-50%);
    }

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

/* Style cho từng Box (Card) - GIỮ NGUYÊN */
.testimonial-card-gt {
    width: 450px; 
    min-height: 240px;
    background-color: #F3F4F6; 
    border-radius: 12px;
    padding: 24px;
    margin-right: 24px; 
    flex-shrink: 0; 
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .testimonial-card-gt:hover {
        background-color: #e9ecef;
    }

/* Phần Header của Card (Ảnh + Tên) */
.card-header-gt {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.client-avatar-gt {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Làm tròn ảnh */
    object-fit: cover;
    margin-right: 15px;
}

.client-info-gt {
    display: flex;
    flex-direction: column;
}

.client-name-gt {
    font-weight: 700;
    font-size: 16px;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.client-role-gt {
    font-size: 13px;
    color: #6c757d; /* Màu xám chữ chức vụ */
    margin-top: 4px;
}

/* Phần nội dung trích dẫn */
.card-content-gt {
    font-size: 16px;
    line-height: 1.6;
    color: #212529;
    text-align: justify;
}


/* ================= Bang giá price ================= */
.title-bg {
    text-align: center;
    color: #c42127;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}

    .title-bg::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background: #c42127;
        margin: 10px auto;
    }

/* Header Row Styling */
.header-row-bg {
    display: flex;
    width: 100%;
    margin-bottom: -4px;
    position: relative;
    z-index: 2;
}

.header-empty-bg {
    flex: 0 0 25%;
    min-width: 25%;
}

.header-column-bg {
    flex: 1;
    min-width: 0;
    padding: 0 1px;
}

.price-header-bg {
    padding: 15px 5px;
    text-align: center;
    font-weight: 700;
    border-radius: 10px 10px 0 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}

.price-basic-bg {
    background: #ffb703;
    color: #5b3b00;
}

.price-standard-bg {
    background: #4dabf7;
    color: #fff;
}

.price-danger-bg {
    background: #ee3a3a;
    color: #fff;
}

.price-premium-bg {
    background: #2fbf71;
    color: #fff;
}

.price-value-bg {
    font-size: 20px;
    font-weight: 800;
    margin-top: 3px;
}

.price-header-bg small {
    font-size: 16px;
    margin-top: 3px;
}

/* Container Table */
.price-table-container-bg {
    display: flex;
    position: relative;
}

/* Sidebar Red Label - FIXED */

.sidebar-promo-bg-CH {
    position: absolute;
    left: 0;
    top: 111px;
    background-color: #198754;
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 5px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
    height: 388px;
    z-index: 1;
}

.sidebar-promo-bg-dnnho {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #198754;
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 5px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
    height: 167px;
    z-index: 1;
}

.sidebar-promo-bg-dnlon {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #198754;
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 5px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
    height: 252px;
    z-index: 1;
}
/* Fixed equal width and height for all content cells */
.feature-title-bg-table, .text-muted-bg, td:not(.feature-title-bg-table):not([colspan]) {
    height: 83px;
    min-height: 83px;
    max-height: 83px;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

/* Header Style */
.th-label-bg {
    background-color: #f2f2f2;
    font-size: 17px;
    font-weight: bold;
    width: 22%;
    border-radius: 0;
    padding: 16px 5px;
}

.th-coban-bg, .th-tieuchuan-bg, .th-caocap-bg, .th-yeucau-bg {
    color: #fff;
    width: 19.5%;
    border: none;
    padding: 12px 5px;
}

.th-coban-bg {
    background-color: #fdbd5d;
}

.th-tieuchuan-bg {
    background-color: #79c3f2;
}

.th-caocap-bg {
    background-color: #55a357;
}

.th-yeucau-bg {
    background-color: #f55555;
}

/* Price Row */
.price-box-bg {
    background-color: #fdfdfd;
    padding: 10px 5px;
    height: 60px;
}

.price-num-bg {
    font-size: 24px;
    font-weight: bold;
    display: block;
}

.price-unit-bg {
    font-weight: bold;
    font-size: 12px;
    display: block;
    margin-top: 3px;
}

/* Rows content - FIXED */
.feature-title-bg-table {
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    background-color: #fff;
    padding: 0 10px;
    width: 22%;
    /* border-left: 10px solid #198754; */
    white-space: normal;
    word-wrap: break-word;
}

.text-muted-bg {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px;
    white-space: normal;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== FOOTER CTA ===== */
.price-footer-cta-gt {
    padding: 2px 0!important;
    background: #ffffff;
}

.footer-cta-box-gt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-left: 16px;
}

/* BUTTON CHUNG */
.cta-btn-gt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cta-orange-gt {
    background: linear-gradient(135deg, #ff7a18, #ff4d00);
    color: #fff;
}

    .cta-orange-gt:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(255, 77, 0, 0.35);
    }

.cta-cursor-gt {
    position: absolute;
    right: -37px;
    bottom: -8px;
    width: 54px;
    height: 39px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='orange'%3E%3Cpath d='M3 2l7 20 2-7 7-2L3 2z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    animation: cursor-bounce-gt 1.4s infinite
}

@keyframes cursor-bounce-gt {
    0%,100% {
        transform: translateY(0);
    }

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

.cta-outline-gt {
    background: #fff;
    color: #2563eb;
    border: 2px solid #2563eb;
}

    .cta-outline-gt:hover {
        background: #2563eb;
        color: #fff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .footer-cta-box-gt {
        flex-wrap: wrap;
        gap: 12px;
    }
}

.commit-section-pice {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0fee7 100%);
    padding: 70px 0;
}

.commit-title-pice {
    font-weight: 700;
    font-size: 28px;
    color: #00984a;
}

.commit-list-pice li {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 16px;
}

.commit-list-pice i {
    color: #00984a;
    font-style: normal;
    font-weight: bold;
}

.btn-warranty-pice {
    background: #00984a;
    color: #fff;
    padding: 10px 26px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

    .btn-warranty-pice:hover {
        background: #e68500;
        color: #fff;
    }
.commit-image img {
    max-width: 100%;
}

.video-thumb {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    max-width: 587px
}

    .video-thumb img {
        display: block;
        width: 100%;
        height: auto
    }

    .video-thumb .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70px;
        height: 70px;
        background: rgba(0,0,0,.6);
        border-radius: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .video-thumb .play-button::before {
            content: "";
            display: inline-block;
            border-style: solid;
            border-width: 12px 0 12px 20px;
            border-color: transparent transparent transparent #fff;
            margin-left: 5px
        }

.youtobe-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 73px;
    height: 52px;
    background-color: #f00;
    border-radius: 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0,0,0,.5)
}
.erp-section-bg {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    background-color: #ffffff;
 
}
.section-desc-bg {
    color: #212529;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1rem;
    text-align: center;
}

.erp-tabs-bg {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn-bg {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .tab-btn-bg:hover {
        border-color: #28a745;
        color: #28a745;
    }

    .tab-btn-bg.active-bg {
        background-color: #28a745;
        color: #ffffff;
        border-color: #28a745;
        box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
    }

/* Slider Content Area */
.slider-container-bg {
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    min-height: 600px;
    margin-bottom: 30px;
}

.slide-item-bg {
    display: none;
    animation: fadeIn-gt 0.8s;
}
    .slide-item-bg.active-bg {
        display: block;
    }

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

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

.slide-image-bg {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa;
}

.package-info-bg {
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}
.package-name-bg {
    font-size: 1.8rem;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.package-desc-bg {
    color: #555;
    font-style: italic;
    margin-bottom: 15px;
    text-align: center;
}

.feature-section-bg {
    padding: 25px 30px 40px;
    text-align: left;
}
.feature-title-bg {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f2e5a;
    margin-bottom: 20px;
    border-left: 4px solid #198754;
    padding-left: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.feature-grid-bg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.feature-item-bg {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.feature-icon-bg {
    background-color: #e9f7ef;
    color: #28a745;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-content-bg h4 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
}

.feature-content-bg p {
    font-size: 16px;
    color: #212529;
    margin: 0;
    text-align: justify;
}

.dots-container-bg {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot-bg {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

    .dot-bg.active-bg {
        background-color: #28a745;
        transform: scale(1.2);
    }
@media (max-width: 768px) {
    .feature-grid-bg {
        grid-template-columns: 1fr;
    }

    .erp-tabs-bg {
        gap: 10px;
    }

    .tab-btn-bg {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .slide-image-bg {
        height: 180px;
    }
}
@media (max-width: 480px) {
    .erp-section-bg {
        padding: 100px 15px;
    }

    .package-name-bg {
        font-size: 1.5rem;
    }

    .feature-section-bg {
        padding: 20px 15px 30px;
    }
}
question-bg-Secondary-qes {
    background: #f7f8f9;
}

.main-title-qes {
    color: #1a1a1a;
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 30px;
}

.btn-try-qes {
    background-color: #00984a;
    color: white;
    border-radius: 50px;
    padding: 12px 40px;
    font-weight: 600;
    border: none;
    margin-bottom: 50px;
    transition: 0.3s;
}

    .btn-try-qes:hover {
        background-color: #e68500;
        color: white;
        box-shadow: 0 4px 15px rgba(0,123,255,0.3);
    }

.support-card-qes {
    background: white;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

    .support-card-qes:hover {
        transform: translateY(-5px);
    }

.card-icon-qes {
    font-size: 24px;
    color: #00984a;
}

.card-title-qes {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-text-qes {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.custom-gutter-qes {
    --bs-gutter-x: 1.5rem;
}
/* trang tuyen dung*/
.section-title-td {
    text-align: center;
    margin-bottom: 3rem;
}

    .section-title-td h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #1a1a1a;
        font-weight: 700;
    }

    .section-title-td p {
        color: #212529!important;
        max-width: 600px;
        margin: 0 auto;
    }
.text-clamp-2-td {
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    max-height: calc(1.6em * 2); 
    text-align: justify;
}

    .text-clamp-2-td:hover::after {
        content: attr(data-full);
        position: absolute;
        left: 0;
        top: 100%;
        background: #111;
        color: #fff;
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 6px;
        white-space: normal;
        width: 260px;
        z-index: 10;
    }
.why-dofa-section-td {
    padding: 60px 0;
    background: #ffffff;
}

.value-card-td {
    background: #ffffff;
    border-radius: 15px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

    .value-card-td:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-color: #fdba74;
    }

.value-icon-td {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #00984a;
}

.value-card-td:hover .value-icon-td {
    background: linear-gradient(135deg, #00984a 0%, #7bf1ac 100%);
    color: white;
}

.jobs-section-td {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0fee7 100%);
}

.job-filter-td {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.job-card-td {
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #00984a;
    transition: all 0.3s ease;
    position: relative;
}

    .job-card-td:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        border-left-color: #f97316;
    }

/* Status Badge Styles */
.jobs-section-td {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0fee7 100%);
}

.job-filter-td {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.job-card-td {
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #00984a;
    transition: all 0.3s ease;
    position: relative;
}

    .job-card-td:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        border-left-color: #f97316;
    }

/* Status Badge Styles - Đã di chuyển xuống dưới */
.job-status-badge-td {
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active-td {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-expired-td {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.job-type-badge-td {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-fulltime-td {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-remote-td {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.job-tag-td {
    display: inline-block;
    background: #f8fafc;
    color: #00984a;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Thêm style cho nút disabled */
.btn-secondary-custom-td {
    background-color: #e5e7eb;
    color: #6b7280;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Đảm bảo flex container hoạt động tốt */
.d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Layout 3: Process Section (Horizontal) */
.process-section-td {
    padding: 100px 0;
    background: #ffffff;
}
.process-timeline-horizontal-td {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 3rem;
}
    .process-timeline-horizontal-td::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 50px;
        right: 50px;
        height: 2px;
        background: #13b70c;
        z-index: 1;
        transform: scaleX(0);
        transform-origin: left;
        animation: drawLineTD 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
.process-step-horizontal-td {
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 0 15px;
    opacity: 0;
    transform: translateY(15px);
    animation: fadeStepTD 0.6s ease forwards;
}
    .process-step-horizontal-td:nth-child(1) {
        animation-delay: .2s;
    }

    .process-step-horizontal-td:nth-child(2) {
        animation-delay: .4s;
    }

    .process-step-horizontal-td:nth-child(3) {
        animation-delay: .6s;
    }

    .process-step-horizontal-td:nth-child(4) {
        animation-delay: .8s;
    }

    .process-step-horizontal-td:nth-child(5) {
        animation-delay: 1s;
    }
.step-number-horizontal-td {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #00984a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #00984a;
    margin: 0 auto 1.5rem;
    transition: all 0.4s ease;
    box-shadow: 0 0 0 6px #ffffff;
}
.step-content-horizontal-td {
    padding: 0 1rem;
   
}

    .step-content-horizontal-td h4 {
        font-size: 20px;
        margin-bottom: 0.5rem;
        color: #1a1a1a;
    }

    .step-content-horizontal-td p {
        color: #212529;
        font-size: 16px;
        text-align: justify;
    }
.process-step-horizontal-td:hover .step-number-horizontal-td {
    background: #00984a;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 0 25px rgba(0, 152, 74, 0.5);
    cursor: pointer;
}

.process-step-horizontal-td:hover{
    transform: translateY(-6px);
}
@keyframes drawLineTD {
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeStepTD {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .process-timeline-horizontal-td {
        flex-direction: column;
    }

        .process-timeline-horizontal-td::before {
            display: none;
        }

    .process-step-horizontal-td {
        margin-bottom: 40px;
    }
}
/* Layout 4: Benefits Section */
.benefits-section-td {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0fee7 100%);
}

.benefit-item-td {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,.03);
    transition: all 0.3s ease;
}

    .benefit-item-td:hover {
        transform: translateX(5px);
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
    }

.benefit-icon-td {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 1.2rem;
}

.benefit-content-td h5 {
    margin-bottom: 0.5rem;
    color: #00984a;
}

.benefit-content-td p {
    color: #212529;
    margin-bottom: 0;
    text-align:justify;
}
/* Layout 4.1: Tin tuc tuyen dung  */
.section-header-gt {
    max-width: 800px;
    margin: 0 auto;
}

.section-title-gt {
    font-size: 32px;
    font-weight: 700;
    color: #1a365d;
    position: relative;
    display: inline-block;
}

    .section-title-gt::after {
        content: "";
        width: 70px;
        height: 4px;
        background: linear-gradient(90deg,#0066cc,#0099ff);
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
    }

.section-subtitle-gt {
    font-size: 18px;
    color: #666;
    margin-top: 20px;
}

/* SLIDER */
.news-slider-container-gt {
    overflow: hidden;
    margin: 0 50px;
}

.news-slider-gt {
    display: flex;
    gap: 30px;
    transition: transform .5s ease;
}

/* CARD */
.news-card-gt {
    flex: 0 0 calc(33.333% - 20px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    transition: .3s;
}

    .news-card-gt:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,102,204,.15);
    }

.news-image-gt {
    height: 220px;
}

    .news-image-gt img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s;
    }

.news-card-gt:hover img {
    transform: scale(1.05);
}

.news-content-gt {
    padding: 25px;
}

.news-category-gt {
    background: linear-gradient(90deg,#0066cc,#0099ff);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.news-title-gt {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0;
}

.news-excerpt-gt {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta-gt {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.news-date-gt {
    font-size: 14px;
    color: #888;
}

    .news-date-gt i {
        color: #0066cc;
    }

.read-more-gt {
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    gap: 5px;
    transition: .3s;
}

    .read-more-gt:hover {
        gap: 10px;
        color: #0099ff;
    }

/* NAV */
.nav-btn-gt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #eaeaea;
    background: #fff;
    color: #0066cc;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
    z-index: 20;
}

.prev-btn-gt {
    left: 10px;
}

.next-btn-gt {
    right: 10px;
}

/* Layout 5: Stories Section */
.stories-section {
    padding: 100px 0;
    background: #ffffff;
}

.story-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

    .story-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    }

.story-image {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.story-content {
    padding: 2rem;
}

.story-role {
    color: #f97316;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
}

#applicationModalTd .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0;
}

    #applicationModalTd .modal-dialog.modal-lg {
        max-width: 720px;
        width: calc(100% - 32px);
    }

/* Nội dung tuyen dung modal */
#applicationModalTd .modal-content {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    animation: none !important;
    margin-top: 74px;
}

#applicationModalTd .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.modal-header-td {
    background: linear-gradient(135deg, #00984a 0%, #7bf1ac 100%);
    color: white;
    border-bottom: none;
}

.modal-title-td {
    font-weight: 700;
}

.btn-close-td {
    filter: brightness(0) invert(1);
}

.file-upload-area-td {
    border: 2px dashed #c8e6c9;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    background-color: #f1f8e9;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
}

    .file-upload-area-td:hover {
        border-color: #00984a;
        background-color: #e8f5e9;
    }

    .file-upload-area-td i {
        font-size: 3rem;
        color: #00984a;
        margin-bottom: 15px;
    }

.btn-orange-td {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-orange-td:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
        color: white;
    }

.btn-primary-custom-td {
    background: linear-gradient(135deg, #00984a 0%, #7bf1ac 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-primary-custom-td:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 152, 74, 0.3);
        color: white;
    }

.btn-outline-primary-td {
    border: 2px solid #00984a;
    color: #00984a;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 10px;
    transition: all 0.3s;
}

    .btn-outline-primary-td:hover {
        background: linear-gradient(135deg, #00984a 0%, #7bf1ac 100%);
        color: white;
        border-color: transparent;
    }
/* Bộ giải pháp đào tạo */
.solutions-grid-section-dt {
    padding: 60px 0;
    background: #f8fafc;
    position: relative;
}

    .solutions-grid-section-dt::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(#10B981 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.1;
        pointer-events: none;
    }

.section-title-dt {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

    .section-title-dt h2 {
        font-size: 40px;
        /*background: linear-gradient(135deg, #04893C 0%, #10B981 100%);*/
        background: #1a1a1a;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
    }

    .section-title-dt p {
        color: #212529;
        font-size: 16px;
        max-width: 700px;
        margin: 0 auto;
    }

.solution-card-dt {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

    .solution-card-dt:hover {
        transform: translateY(-15px) scale(1.02);
        box-shadow: 0 30px 60px rgba(4, 137, 60, 0.15);
    }

    .solution-card-dt::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #D1FAE5 0%, #ECFDF5 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .solution-card-dt:hover::before {
        opacity: 1;
    }

.solution-icon-wrapper-dt {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.solution-card-dt:hover .solution-icon-wrapper-dt {
    transform: scale(1.1) rotate(5deg);
}

.solution-icon-wrapper-dt.green {
    background: linear-gradient(135deg, #04893C 0%, #10B981 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(4, 137, 60, 0.2);
}

.solution-icon-wrapper-dt.orange {
    background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2);
}

.solution-icon-wrapper-dt.blue {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}

.solution-icon-wrapper-dt.purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.solution-icon {
    font-size: 2.5rem;
    z-index: 2;
}

.solution-content-dt {
    padding: 0 2rem 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

    .solution-content-dt h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: #1a1a1a;
    }

    .solution-content-dt p {
        color: #212529;
        margin-bottom: 1.5rem;
        font-size: 16px;
        text-align:justify;
    }

.solution-features-dt {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
    text-align: left;
}

    .solution-features-dt li {
        padding: 0.5rem 0;
        display: flex;
        align-items: flex-start;
        font-size: 16px;
        text-align:justify;
    }

        .solution-features-dt li i {
            color: #F97316;
            margin-right: 0.75rem;
            margin-top: 0.25rem;
            flex-shrink: 0;
            font-size: 0.9rem;
        }

.solution-cta-dt {
    display: inline-block;
    color: #04893C;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

    .solution-cta-dt::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #F97316;
        transition: width 0.3s ease;
    }

    .solution-cta-dt:hover::after {
        width: 100%;
    }

    .solution-cta-dt:hover {
        color: #F97316;
    }

/* trang Đao tao */
.news-section-dt {
    padding: 100px 0;
    background: #f8fafc;
}
    .news-section-dt .container {
        position: relative;
    }
.section-header-skdt {
    text-align: center;
   
}
.section-title-skdt {
    font-size: 48px;
    margin-bottom: 1rem;
    color: #00984a;
    font-weight: 700;
    margin-bottom: 15px;

    position: relative;
    display: inline-block;
}
.section-subtitle-dt {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}
.news-slider-container-dt {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.news-slider-dt {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.news-card-dt {
    flex: 0 0 calc(33.333% - 20px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    animation: fadeIn-dt 0.5s ease forwards;
}

    .news-card-dt:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,102,204,0.15);
    }
.news-image-dt {
    height: 220px;
    width: 100%;
    overflow: hidden;
}

    .news-image-dt img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
.news-card-dt:hover .news-image-dt img {
    transform: scale(1.05);
}

.news-content-dt {
    padding: 25px;
}

.news-category-dt {
    display: inline-block;
    background: linear-gradient(90deg, #00984a, #10b981);
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.news-title-dt {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.news-excerpt-dt {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-meta-dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.news-date-dt {
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .news-date-dt i {
        color: #00984a;
    }

.read-more-dt {
    color: #00984a;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all .3s ease;
}

    .read-more-dt:hover {
        color: #f97316;
        gap: 10px;
    }

.nav-btn-dt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #00984a;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
    transition: all .3s ease;
    z-index: 20;
}


    .nav-btn-dt:hover {
        background: #f97316;
        color: #fff;
    }

.prev-btn-dt {
    position: absolute;
    left: -70px; 
}

.next-btn-dt {
    position: absolute;
    right: -70px; 
}

@keyframes fadeIn-dt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*trang tin tuc*/
.view-all {
    text-decoration: none;
    color: #00984a; /* Màu Dofa Tech */
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

    .view-all:hover {
        text-decoration: underline;
    }

/* LAYOUT GRID */
.news-grid {
    display: flex;
    gap: 40px;
}

.main-news {
    flex: 1.8; /* Cột trái to hơn */
}

.sub-news {
    flex: 1; /* Cột phải nhỏ hơn */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* MAIN NEWS (Bên trái) - Giữ nguyên ảnh và nội dung bên dưới */
.big-card {
    text-decoration: none;
    display: block;
}

    .big-card .image-wrapper {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .big-card img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .big-card:hover img {
        transform: scale(1.03);
    }

    .big-card h3 {
        font-size: 24px;
        color: #333;
        line-height: 1.3;
        margin-bottom: 12px;
        transition: color 0.3s;
    }

    .big-card:hover h3 {
        color: #00984a;
    }

    .big-card p {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* SUB NEWS (Bên phải) - Ẩn ảnh, Hover hiện tooltip */
.news-item-tooltip {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.news-title {
    text-decoration: none;
    color: #444;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    transition: color 0.3s;
}

/* Tooltip ảnh */
.tooltip-image {
    position: absolute;
    z-index: 100;
    width: 220px;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    /* Vị trí mặc định: Ẩn */
    top: 50%;
    left: -240px; /* Hiện sang bên trái tiêu đề để không che chữ */
    transform: translateY(-50%) scale(0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

    .tooltip-image img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        display: block;
    }

/* Hover hiệu ứng */
.news-item-tooltip:hover .news-title {
    color: #00984a;
}

.news-item-tooltip:hover .tooltip-image {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .news-grid {
        flex-direction: column;
    }

    .tooltip-image {
        left: 0;
        top: -150px; /* Trên mobile hiện lên trên đầu tiêu đề */
    }
}

.section-title-new {
    font-size: 28px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

    .section-title-new::after {
        content: "";
        width: 40px;
        height: 3px;
        background: #00984a;
        position: absolute;
        left: 0;
        bottom: 0;
    }

/* CARD */
.featured-card-new {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    height: 100%;
    transition: .35s ease;
    display: flex;
    flex-direction: column;
}

    .featured-card-new:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,.15);
    }

.featured-card-img-new {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.featured-card-body-new {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.featured-card-category-new {
    color: #00984a;
    font-weight: 600;
    font-size: 14px;
}

.featured-card-title-new {
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0;
    line-height: 1.3;
}

.featured-card-excerpt-new {
    color: #6b7280;
    font-size: 14px;
    flex: 1;
}

.featured-card-author-new {
    display: flex;
    align-items: center;
    margin-top: 15px;
    font-size: 14px;
    color: #6b7280;
}

.featured-card-author-img-new {
    width: 36px!important;
    height: 36px!important;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.carousel-item .row {
    align-items: stretch;
}
.clamp-2-new {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Sidebar */
.sidebar-new {
    position: sticky;
    top: 100px;
}

.sidebar-section-new {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
}

.sidebar-title-new {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1f2937;
}

/* Sidebar Search */
.sidebar-search-new {
    position: relative;
    margin-bottom: 1rem;
}

    .sidebar-search-new input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        font-size: 0.9375rem;
    }

    .sidebar-search-new i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
    }

/* Popular Posts & Latest Posts */
.post-item-new {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

    .post-item-new:last-child {
        border-bottom: none;
    }

.post-item-img-new {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.post-item-content-new {
    flex: 1;
}

.post-item-title-new {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item-date-new {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Categories List */
.sidebar-list-new {
    list-style: none;
    padding: 0;
}

.sidebar-list-item-new {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

    .sidebar-list-item-new:last-child {
        border-bottom: none;
    }

    .sidebar-list-item-new a {
        display: flex;
        align-items: center;
        font-weight: 500;
        color: #1f2937;
    }

        .sidebar-list-item-new a:hover {
            color: #00984a;
        }

    .sidebar-list-item-new i {
        margin-right: 0.75rem;
        color: #00984a;
        width: 20px;
        text-align: center;
    }