:root,
[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bs-text-gray-100: #F9F9F9;
    --bs-text-gray-200: #F1F1F4;
    --bs-text-gray-300: #DBDFE9;
    --bs-text-gray-400: #C4CADA;
    --bs-text-gray-500: #99A1B7;
    --bs-text-gray-600: #78829D;
    --bs-text-gray-700: #4B5675;
    --bs-text-gray-800: #252F4A;
    --bs-text-gray-900: #071437;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
}
a{
    text-decoration: none;
}
.fs-1 {
    font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-2 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-3 {
    font-size: calc(1.26rem + 0.12vw) !important;
}

.fs-4 {
    font-size: 1.25rem !important;
}

.fs-5 {
    font-size: 1.15rem !important;
}

.fs-6 {
    font-size: 1.075rem !important;
}

.fs-7 {
    font-size: 0.95rem !important;
}

.fs-8 {
    font-size: 0.85rem !important;
}

.fs-9 {
    font-size: 0.75rem !important;
}

.fs-10 {
    font-size: 0.5rem !important;
}
.text-gray-100{
    color: var(--bs-text-gray-100);
}
.text-gray-200{
    color: var(--bs-text-gray-200);
}
.text-gray-300{
    color: var(--bs-text-gray-300);
}
.text-gray-400{
    color: var(--bs-text-gray-400);
}
.text-gray-500{
    color: var(--bs-text-gray-500);
}
.text-gray-600{
    color: var(--bs-text-gray-600);
}
.text-gray-700{
    color: var(--bs-text-gray-600);
}
.text-gray-800{
    color: var(--bs-text-gray-800);
}
.text-gray-900{
    color: var(--bs-text-gray-900);
}
.w-60px{
    width: 60px;
}
.h-40px{
    height: 40px;
}
body, html{
    width: 100%;
    height: 100%;
}
.card{
    background-color: #292c31;
    color: #ffffff;
}
.container{
    max-width: 1820px !important;
}
.card-header{
    padding: 2rem 2.25rem;
    background-color: unset;
}
.card-body{
    padding: 2rem 2.25rem;
}
.h-200px{
    height: 200px;
}

.header{
    color: white;
    /*position: sticky;*/
    top: 0;
    z-index: 1040;
    margin-top: 24px;
}
.register{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    max-width: 250px;
    line-height: 32px;
}
.register:hover{
    background-color: #424549;
    border-radius: 50vh;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    /*padding: 10px 20px;*/
}
.sign-in-btn{
    font-size: 14px;
    color: #ffffff;
}
.login-btn{
    font-size: 14px;
    color: #ffffff;

}
.app-container{
    width: 100%;
    height: 100%;
    /*max-width: 1920px;*/
    /*margin: 0 auto;*/
}
.wrap{
    max-width: 1920px;
    margin: 0 auto;
}
.menu-item .menu-link{
    padding: 12px 16px;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}
.section-card{
    display: flex;
    height: 50px;
    min-height: 50px;
    min-width: 250px;
    padding: 2px 6px;
    gap: 8px;
    background-color: #292c31;
    border-radius: 8px;
    border: 2px solid #424549;
}
.form-control{
    background-color: unset;
    border: unset;
}
.form-control::placeholder{
    color: #99A1B7;
    font-size: 14px;
}
.form-control:focus{
    color: #ffffff;
    background-color: unset;
    border-color: unset;
    box-shadow: unset;
}
.upload-img::-webkit-file-upload-button {
    visibility: hidden;
}
.file-img{
    position: relative;
    left: 12px;
    right: 10px;
    top: 10px;
}
.amount{
    background: rgba(0,0,0,.1);
    border: 2px solid #424549;
}
.amount:hover{
    color: #99A1B7;
    background-color: unset;
    border-color: #424549;
}
.amount:first-child:active{
    color: #99A1B7;
    background-color: unset;
    border-color: #424549;
}
.dropdown-menu{
    background-color: #383a3e;
}
.dropdown-menu-item{
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    min-width: 25%;
    border-radius: 8px;
    border: 1px solid #99A1B7;
}
.dropdown-menu-item:hover{
    background-color: #292c31;
}
.main-content{
    background: rgba(0,0,0,.1);
    border: 2px solid #424549;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    margin-bottom: 30px;
}
.type-container {
    position: relative;
    display: inline-block;
}

.type-button {
    padding: 10px 20px;
    background-color: #2c2f33;
    /*color: white;*/
    cursor: pointer;
    border: 1px solid #424549;
    border-radius: 50vh;
    font-size: 14px;
    font-weight: 700;
}

.type-content {
    padding: 10px;
    display: none;
    position: absolute;
    flex-direction: column;
    top: 80%;
    left: 0;
    background-color: #2c2f33;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top: 8px;
    z-index: 99;
}

.type-container:hover .type-content {
    display: block;
}

.item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 4px;
}

.item:hover {
    background-color: #40444b;
    border-radius: 8px;
}
.wide{
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    min-width: 440px
}
.file-upload {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #424549;
    border-radius: 50%;
    background-color: #2c2f33;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.file-upload:hover {
    background-color: #3a3d41;
    cursor: pointer;
}

.file-upload input[type="file"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload img {
    width: 20px;
    height: 20px;
    pointer-events: none; /* icon không bị ảnh hưởng khi click */
}
.masonry {
    column-count: 4; /* 4 cột cố định */
    column-gap: 1rem; /* Khoảng cách giữa các cột */
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
}
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}