h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
}

span,
p {
    color: #a1a1aa;
}

@media (min-width: 1024px) {
    .container-custom {
        max-width: 1550px;
        margin: auto;
    }

    .container-custom {
        max-width: 1440px;
        padding: 0 8px;
        margin: auto;
    }
}

@media (min-width: 1536px) {
    .container-custom-main {
        max-width: 1440px;
        padding: 0 8px;
        margin: auto;
    }
}

.page-header {
    background-color: #15151b;
    border: 1px solid #1f232880;
    border-right: none;
    border-left: none;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.btn-page-header {
    border: none;
    outline: none;
    padding: 16px;
    background: transparent;
    color: #a1a1aa;
    /* gap: ; */
    /* margin: 8px; */
}

.btn-page-header:focus {
    border: none !important;
    outline: none !important;
}

.text-title-page-header {
    letter-spacing: -0.5px;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #fafafa;
}

.btn-page-header-l {
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: #ebebeb;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.btn-page-header-l.discord {
    background-color: #5865f2 !important;
}

.btn-page-header-l.support {
    background-color: #202228 !important;
}

.btn-page-header span {
    margin: 0 8px;
}

.btn-page-header.active span {
    color: #fafafa;
}

.btn-page-header.active i {
    color: #5386ef;
}

.btn-page-header:hover {
    color: #fafafa;
    background-image: linear-gradient(
        to top,
        hsl(220 10% 17%),
        hsl(220 10% 17% / 0)
    );
}

.bg-border-bottom-item-page-header {
    display: none;
    background: linear-gradient(
        198deg,
        #5386ef 6.61%,
        rgb(71, 120, 235) 48.47%,
        rgb(69, 116, 234) 92.12%
    );
    position: absolute;
    width: 80px;
    height: 24px;
    opacity: 0.3;
    left: 50%;
    bottom: -8px;
    transform: translate(-50%, 0) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
    filter: blur(8px);
    z-index: 3;
}

.border-bottom-item-page-header {
    display: none;
    position: absolute;
    width: 50px;
    height: 3px;
    left: 50%;
    bottom: 0;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    background: linear-gradient(
        110deg,
        rgb(83, 134, 239) 6.61%,
        rgb(69, 116, 234) 92.12%
    );
    transform: translate(-50%, 0) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
    z-index: 2;
}

.nav-item-page-header {
    overflow: hidden;
    position: relative;
}

.nav-item-page-header .btn-page-header.active ~ .border-bottom-item-page-header,
.nav-item-page-header
    .btn-page-header.active
    ~ .bg-border-bottom-item-page-header {
    display: block;
}

.page-main-title-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #1f232880;
}

.page-main-title-icon i {
    color: #a1a1aa;
    font-size: 24px;
}

.page-main-title h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.page-main-title p {
    font-size: 14px;
    line-height: 20px;
}

.input-group-text {
    background: transparent;
    border: none;
    color: #fff;
}

.input-group-text i {
    color: #a1a1aa;
    font-size: 16px;
}

.form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

.form-control:focus {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
}

.input-group-search-list-page {
    font-size: 14px;
    line-height: 20px;
    border-radius: 6px;
    border: 1px solid #1f2328;
}

.btn-drop-filter-list {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #1f2328;
    box-shadow: none;
    color: #fff;
    border-radius: 6px;
    padding-top: 0;
    padding-bottom: 0;
    height: 40px;
}

#nav-tabContent{
    background-color: unset !important;
}

.btn-drop-filter-list:hover {
    background: transparent;
    color: #fff;
}

.btn-drop-filter-list:focus {
    background: transparent;
    box-shadow: 0 0 0 0.2rem #1f2328;
}

.form-select-variant-list-page {
    color: #a1a1aa;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    align-items: center;
}

.form-select-variant-list-page button {
    color: #a1a1aa;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    background: #9ca3af1a;
    border: none;
}

.form-select-variant-list-page button:hover {
    color: #a1a1aa;
    background: #9ca3af33;
}

.form-select-variant-list-page button:focus {
    box-shadow: none;
}

.select-type-page-list {
    background: transparent;
    border: 1px solid #1f2328;
    border-radius: 6px;
    /* height: 40px; */
    padding: 5px;
}

.select-type-page-list .nav-link {
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 15px;
    border-radius: 6px;
    border: none;
}

.select-type-page-list .nav-link:hover {
    border: none;
}

.select-type-page-list .nav-link.active {
    color: #fff;
    background: #36383f;
    border: none;
}

.btn-search-list-offer{
    border: 1px solid #1f2328;
    height: 40px;
    border-radius: 6px;
}

.item-type .card {
    border-radius: 12px;
    background: #12151c;
    border: 1px solid #1f2328;
}

.item-type .card:hover {
    border: 1px solid #484b51;
}

.item-type .card p {
    color: #a1a1aa;
    font-size: 14px;
    line-height: 16px;
}

.item-type img {
    border-radius: 12px;
}

.item-type.menu img {
    object-fit: cover;
    border-radius: 12px 0 0 12px;
}

.item-type-menu img {
    border-radius: 12px 0 12px 0;
}

.item-type .card-footer {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #1f2328;

    background: transparent;
}

.icon-sele-card-list {
    top: 10px;
    right: 0;
}

.icon-sele-card-list .badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-sele-card-list .start {
    color: #eab308;
    background-color: #facc151a;
    border-radius: 8px;
    border: 0.1px solid #eab308;
}

.list-variant-list .badge {
    background: #9ca3af33;
}

.hr-hr-hr {
    height: 1px;
    background: linear-gradient(to right, transparent, #1f2328, transparent);
    border: none;
}

.btn-buy-now-list {
    border-radius: 9999px;
    height: 36px;
}

.span-sold-like {
    border-right: 1px solid #1f2328;
    padding: 0 8px;
    margin: 0 8px;
}

.title-item-list {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination-page-list {
    gap: 5px;
}

.pagination-page-item {
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 6px;
    background: transparent;
    color: #fff;
}

.pagination-page-item a {
    text-align: center;
    padding: 0;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #484b51 !important;
}

.pagination-page-item.active a {
    background: var(--primary) !important;
    border: none !important;
}

.pagination-page-item.active a:hover {
    background: #225bd5 !important;
}

.pagination-page-item a:hover {
    background: #272a30 !important;
}

.pagination-page-item.show-more {
    border: none !important;
}

.pagination-page-item.show-more a {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
}

@media only screen and (max-width: 576px) {
    .nav-item-page-header .btn-page-header {
        display: none;
    }
    .nav-item-page-header .btn-page-header.active {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .item-type.menu img {
        border-radius: 12px 12px 0 0;
    }
}


.dropdown-menu-price {
    min-width: 18em;
    background: #13151b;
    border: 1px solid #484b51 !important;
}

.btn-range-price {
    background: #212329;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 40px;
    text-align: left;
    color: #fff;
    border-bottom: 1px solid #484b51 !important;
}
.btn-range-price:hover {
    color: #fff;
}