/*BEGIN TABLE FIX*/
.bcorn-fix-title-table-container {
    max-height: 600px;
    overflow-x: auto;
}

.bcorn-fix-title-table {
    width: auto;
    border-collapse: collapse;
    font-size: 12px;
}

    .bcorn-fix-title-table th,
    .bcorn-fix-title-table td {
        border: 1px solid #ddd;
        padding: 5px 8px;
        text-align: center; /* Căn giữa theo chiều ngang */
        vertical-align: middle; /* Căn giữa theo chiều dọc */
    }

    .bcorn-fix-title-table th { /*cố định tiêu đề ngang*/
        position: sticky;
        top: -1px;
        z-index: 1 !important;
        font-weight: 600;
        background-color: #ae4800;
        color: white !important;
    }

        /*cố định cột đầu tiên k có dấu phẩy ở cuối bcorn-fix-title-table td:nth-child(3)*/
        .bcorn-fix-title-table th:nth-child(1),
        .bcorn-fix-title-table td:nth-child(1) {
            position: sticky;
            left: 0;
            z-index: 2 !important;
            background-color: #ae4800;
            color: white;
        }
    /*cố định cột thứ 2*/
    /*.bcorn-fix-title-table th:nth-child(1),
        .bcorn-fix-title-table td:nth-child(1),
        .bcorn-fix-title-table th:nth-child(2),
        .bcorn-fix-title-table td:nth-child(2) {
            position: sticky;
            left: 0;
            z-index: 3 !important;
            background-color: #006100;
            color: white;
        }*/

    .bcorn-fix-title-table tbody {
        overflow: auto;
        height: auto; /* Điều chỉnh chiều cao của tbody theo nhu cầu của bạn */
    }

        /* Phân biệt màu cho các dòng */
        .bcorn-fix-title-table tbody tr:nth-child(odd) { /*dòng lẻ*/
            background-color: #ffffff;
        }

        .bcorn-fix-title-table tbody tr:nth-child(even) { /*dòng chẵn*/
            background-color: #f9f9f9;
        }

        /* Hiệu ứng khi rê chuột vào dòng */
        .bcorn-fix-title-table tbody tr:hover {
            background-color: #e8f8fd; /* Thay đổi màu nền khi rê chuột vào dòng */
        }

/* Hiệu ứng khi rê chuột vào ô (cell) */
/*.bcorn-fix-title-table tbody td:hover {
            background-color: #cff4ff;*/ /* Thay đổi màu nền khi rê chuột vào ô (cell) */
/*}*/
/*END TABLE FIX*/



/*scrollbar*/
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: #222d32 !important;
}

::-webkit-scrollbar-thumb {
    background: #ffba00 !important; /*edit*/
}

    ::-webkit-scrollbar-thumb:hover {
        background: #ffba00 !important; /*edit*/
    }

.navview .navview-menu li.active::before { /*edit*/
    background-color: #ffba00 !important;
}

/*index*/


.font-44-home-bc {
    font-size: 44px
}

.font-22-home-bc {
    font-size: 22px
}

.text-style-vuottroi {
    font-size: 23px;
    font-weight: 500
}

.color-home-bc {
    color: #8b0000;
}

.but-login-style {
    background-color: #ffd200 !important
}

    .but-login-style:hover {
        background-color: #ffe257 !important
    }

.but-tuvan {
    background-color: #ffd200;
    color: black
}

    .but-tuvan:hover {
        background-color: #ffe257;
    }

.phienban-button-left {
    background-color: #d4d4d4;
    color: #1c1c1c;
    padding: 8px 20px;
    border-radius: 20px;
}

    .phienban-button-left:hover {
        background-color: #b9b9b9;
    }

.phienban-button-right {
    background-color: #24285b;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
}

    .phienban-button-right:hover {
        background-color: #32377e;
    }



.title-sub-home-bc {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
    padding-top: 16px;
}

.new-hero .button {
    border-radius: 50px;
}

    .new-hero .button.get-started-button {
        color: white;
        background: #8b0000;
    }

        .new-hero .button.get-started-button:hover {
            background: #ce352c;
        }

    .new-hero .button.download-source-button {
        color: black;
        background: #ffd200;
    }

        .new-hero .button.download-source-button:hover {
            background: #ffe257;
        }

.presenta {
    background: transparent url("/uploads/images/index/a.svg") top right no-repeat;
    background-size: contain;
}

    .presenta .button,
    .top-themes .button {
        border-radius: 20px;
        color: white;
        background: #8b0000;
    }



.features {
    background: transparent url("/uploads/images/index/b.svg") top left no-repeat;
    background-size: cover;
}

.in-action-wrapper {
    background: transparent url("/uploads/images/index/e.svg") top right no-repeat;
    background-size: contain;
}

.sponsor-wrapper,
.in-action-wrapper2 {
    background: transparent url("/uploads/images/index/d.svg") bottom left no-repeat;
    background-size: contain;
}

.shadowed {
    -webkit-box-shadow: 2px 2px 20px #ffd2d2;
    box-shadow: 2px 2px 20px #ffd2d2;
}

.presenta-box {
    -webkit-box-shadow: 2px 2px 10px #ffd2d2;
    box-shadow: 2px 2px 10px #ffd2d2;
}


.work-box {
    max-height: 260px;
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 10px #a9a4a4;
    box-shadow: 2px 2px 10px #a9a4a4;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: -webkit-transform 0.1s linear;
    -o-transition: transform 0.1s linear;
    transition: transform 0.1s linear;
    transition: transform 0.1s linear, -webkit-transform 0.1s linear;
    z-index: 0;
}

    .work-box:hover {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        z-index: 1;
    }

.buy-me-coffee > div {
    -webkit-box-shadow: inset 2px 2px 20px #ffd2d2;
    box-shadow: inset 2px 2px 20px #ffd2d2;
    background: #faf5f5;
}


/*end index*/
@media (max-width: 575px) { /*sm*/
}

@media (max-width: 767px) { /*md*/

}

.fs-bc-34-28 {
    font-size: 34px;
    line-height: 1;
}

.fs-bc-27-23 {
    font-size: 26px;
}

@media (max-width: 991px) { /*lg*/
    .fs-bc-34-28 {
        font-size: 28px;
    }

    .fs-bc-27-23 {
        font-size: 21px;
    }

    .text-style-vuottroi {
        font-size: 21px;
        font-weight: 600
    }



    .title-sub-home-bc {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.2;
        padding-top: 12px;
    }

    .font-44-home-bc {
        font-size: 34px
    }

    .font-22-home-bc {
        font-size: 17px
    }
}

@media (max-width: 1199px) { /*xl*/

}

@media (max-width: 1451px) { /*xxl*/
}



/*BEGIN CSS AHA SALE*/
/* Container chính */
.danhmuc-container {
    display: flex;
    flex-wrap: nowrap; /* Các ô nằm trên một hàng, không xuống dòng */
    gap: 10px;
    overflow-x: auto; /* Hiển thị cuộn ngang nếu vượt quá chiều rộng */
    max-width: 100%;
}

/* Mỗi ô danh mục */
.danhmuc-item {
    flex: 0 0 80px; /* Chiều rộng cố định là 130px */
    display: flex;
    flex-direction: column; /* Sắp xếp nội dung theo cột */
    align-items: center; /* Căn giữa theo chiều ngang */

    background-color: transparent; /* Nền trong suốt */
    /*border: 1px solid #1e2329;*/ /* Màu viền */


    text-align: center;
    color: #eaecef; /* Màu chữ mặc định */
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
    overflow: hidden;
}

    /* Tên danh mục */
    .danhmuc-item div {
        font-size: 11px;
        font-weight: 600;
    }

    /* Hiệu ứng cho ảnh bên trong khi hover */
    .danhmuc-item img {
        border-radius: 20%; /* Bo tròn ảnh */
        transition: transform 0.3s ease; /* Hiệu ứng mượt */
        margin-bottom: 6px; /* Khoảng cách giữa ảnh và tên */
    }


    .danhmuc-item:hover {
        /*background-color: #1e2329;*/ /* Nền đổi sang màu #1e2329 */
        color: #f0b90e; /* Màu chữ đổi sang màu #f0b90e */
    }



/*END CSS AHA SALE*/