:root {
    --main-color: #01a5ea;
    --gray-color: #b0b0b0;
    --highlight-color: #e5890d;
}

.mt-8 {
    margin-top: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

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

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

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

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

.w-fit {
    width: fit-content !important;
}

.text-ellipsis {
    white-space: nowrap; /* Hiển thị trên một dòng */
    overflow: hidden; /* Ẩn phần văn bản vượt quá */
    text-overflow: ellipsis; /* Hiển thị dấu ba chấm */
}

.text-multiline-ellipsis {
    display: -webkit-box; /* Yêu cầu để sử dụng cho ellipsis */
    -webkit-line-clamp: 3; /* Số dòng muốn giới hạn */
    -webkit-box-orient: vertical; /* Hướng của các dòng */
    overflow: hidden; /* Ẩn phần văn bản vượt quá */
}

.d-flex-center {
    display: flex;
    justify-content: center;
    /* align-items: center; */
}

a {
    text-decoration: none !important;
}
p {
    margin: 0 !important;
    padding: 0 !important;
}

.bg-none {
    background: transparent !important;
    box-shadow: none !important;
}

.bg-gray-blur {
    background: #00000044;
}

.bottom-0 {
    bottom: 0;
}

.bottom-16 {
    bottom: 16px;
}

.bottom-24 {
    bottom: 24px;
}

.bottom-32 {
    bottom: 32px;
}

.btn-default {
    background: var(--main-color) !important;
    color: #fff !important;
    padding: 8px 24px !important;
    border: none;
    outline: none;
}

.font-bold {
    font-weight: 600;
}

.text-main {
    color: var(--main-color);
}

.text-highlight {
    color: var(--highlight-color);
}