.carousel {
    height: calc(100% * 0.182);
}

.coupon-zone {
    padding: 1rem;
    padding-bottom: 0;
    background-color: rgb(var(--white));
}

.coupon-zone input {
    font-size: var(--text-body);
    font-size: 300;
    text-transform: uppercase;
}

.type-promotion-zone {
    background-color: rgb(var(--white));
    padding-top: .5rem;
    border-radius: 0 0 5px 5px;
}

.tabs-promotion .nav-link {
    border: none;
    color: rgb(var(--text-primary));
    font-size: var(--text-title);
}

.tabs-promotion .nav-link:hover {
    background-color: rgb(var(--default));
}

.tabs-promotion .nav-link.active {
    color: rgb(var(--text-primary));
    background-color: transparent;
    border: none;
    border-bottom: 3px solid rgb(var(--primary));
}

.promotion-wrapper-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    /* background-color: rgb(var(--white)); */
    padding: 0;
    border-radius: 5px;
    margin-bottom: 70px;
}

.promotion-box-grid {
    background-color: rgb(var(--white));
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(var(--lightgray), 0.6);
    cursor: pointer;
}

.promotion-box-grid:hover {
    background-color: rgb(var(--default));
}

.promotion-box-grid img {
    width: 100%;
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    max-height: 280px;
}

.promotion-title-grid {
    color: rgb(var(--text-dark));
    padding: 1rem .5rem;
    font-weight: 500;
    text-align: center;
    font-size: var(--text-title);
}

.promotion-detail-grid {
    border-top: 1px solid rgba(var(--lightgray), 0.6);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
}

.promotion-expired-grid {
    color: rgb(var(--text-dark));
    width: 50%;
}

.promotion-expired-grid small {
    font-size: var(--text-small);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.button-dark {
    font-size: var(--text-small);
    height: fit-content;
    padding: .3rem 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.grid-list-view {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.grid-list-view>.fa-list:hover,
.grid-list-view>.fa-grid:hover {
    filter: contrast(60%) invert(100%);
    cursor: pointer;
}

.promotion-wrapper-list {
    display: flex;
    margin-top: 10px;
    padding: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 70px;
}

.promotion-box-list {
    background-color: rgb(var(--white));
    border-radius: 5px;
    display: grid;
    grid-template-columns: 70% 30%;
    width: 100%;
    cursor: pointer;
    min-height: 120px;
}

.promotion-box-list:hover {
    background-color: rgb(var(--default));
}

.promotion-box-list img {
    border-radius: 5px 0 0 5px;
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.promotion-title-list {
    width: 100%;
    color: rgb(var(--text-dark));
    padding: 1rem;
    font-weight: 500;
    text-align: center;
    font-size: var(--text-title);
    align-items: center;
    position: relative;
}

.promotion-title-list span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.promotion-detail-list {
    display: grid;
    grid-template-rows: 80% 20%;
}

.promotion-expired-list {
    display: flex;
    justify-content: space-between;
    padding: .7rem;
    align-items: center;
    border-top: 1px solid rgba(var(--lightgray), 0.6);
}

.promotion-expired-list .button-dark {
    white-space: nowrap;
}

.expired-date {
    color: rgb(var(--text-dark));
}

.expired-date small {
    display: inline-block;
}

section {
    margin-bottom: 150px;
}

.error-img {
    background-image: url(/assets/image/icon-error.png);
    height: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.trapezoid {
    border-bottom: 50px solid rgb(var(--primary));
    border-right: 25px solid transparent;
    height: 0;
    width: 35%;
    display: flex;
    padding-left: 1rem;
    box-shadow: 0 2px 0 0 rgba(var(--dark), 0.2);
}

.trapezoid h3 {
    margin-top: 12px;
    margin-bottom: 0;
}

.received-my-promotion {
    padding: 0;
    margin-top: 15px;
}

.my-promotion-box {
    background-color: rgb(var(--white));
    border-radius: 5px;
    display: grid;
    grid-template-columns: 70% 30%;
    width: 100%;
    cursor: pointer;
    min-height: 120px;
    margin-top: 10px;
    position: relative;
}

.my-promotion-box:hover {
    background-color: rgb(var(--default));
}

.my-promotion-box img {
    border-radius: 5px 0 0 5px;
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
}

.my-promotion-box .promotion-detail-myList {
    display: grid;
    grid-template-rows: 80% 20%;
    color: rgb(var(--text-dark));
    text-align: center;
    align-items: center;
    padding: .5rem;
    font-weight: 500;
    font-size: var(--text-title);
    position: relative;
}

.my-promotion-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-image: url(/assets/image/icon-my-bonus.png); */
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center right;
    opacity: .1;
    z-index: 0;
}

.my-promotion-box .promotion-expired-myList {
    justify-self: flex-end;
    z-index: 2;
}

.my-promotion-box .promotion-title-myList {
    display: -webkit-box;
    font-size: var(--text-title);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: .1rem;
}

/**************************************************** RESPONSIVE ZONE **************************************************/
/* TABLET */
@media (max-width:1024px) {
    .promotion-title {
        display: -webkit-box;
        font-size: var(--text-body);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: .5rem;
        padding-bottom: .1rem;
    }

    .trapezoid {
        width: 50%;
    }
}

/* LARGE MOBILE */
@media (max-width:767px) {
    .carousel {
        height: calc(100vw * 0.625);
    }

    .tabs-promotion .nav-link {
        font-size: var(--text-body);
    }

    .type-promotion-zone {
        border-radius: 0;
    }

    .promotion-wrapper-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        border-radius: 0;
        margin-top: 10px;
        padding: 0 12px;
        margin-bottom: 220px;
    }

    .promotion-title-grid {
        display: -webkit-box;
        font-size: var(--text-body);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: .5rem;
        padding-bottom: .1rem;
    }

    .button-dark {
        padding: 0.3rem;
    }

    .promotion-wrapper-list {
        padding: 0 12px;
        margin-bottom: 220px;
    }

    .promotion-detail-list {
        display: flex;
        flex-direction: column;
    }

    .promotion-box-list {
        display: flex;
        flex-direction: column;
    }

    .promotion-box-list>.promotion-title-list {
        padding: 1rem;
    }

    .promotion-box-list img {
        border-radius: 5px 5px 0 0;
    }

    .promotion-title-list {
        font-size: var(--text-body);
    }

    .promotion-detail-grid {
        padding: 1rem .5rem;
    }

    .trapezoid {
        margin-top: 10px;
        width: 75%;
    }

    .received-my-promotion {
        padding: 0 12px;
    }

    .my-promotion-box {
        grid-template-columns: 60% 40%;
    }

    .my-promotion-box .promotion-title-myList {
        font-size: var(--text-body);
        padding-bottom: 0;
    }
}

@media (max-width:320px) {
    .promotion-expired-grid {
        width: 45%;
    }
}

.text-modal {
    color: rgb(var(--text-dark));
}

.text-modal-primary {
    color: rgb(var(--text-primary));
}

.btn-close-modal {
    color: rgb(var(--text-dark));
    background: rgb(var(--lightgray));
    border-color: rgb(var(--lightgray));
}

.btn-close-modal:hover {
    color: rgb(var(--text-dark)) !important;
    background: rgb(var(--white)) !important;
    border-color: rgb(var(--dark)) !important;
}

.btn-close-modal:focus {
    color: rgb(var(--text-dark)) !important;
    background: rgb(var(--lightgray)) !important;
    border-color: rgb(var(--lightgray)) !important;
}

.btn-submit-modal {
    color: rgb(var(--text-white));
    background: rgb(var(--primary));
    border-color: rgb(var(--primary));
}

.btn-submit-modal:hover {
    color: rgb(var(--text-primary)) !important;
    background: rgb(var(--white)) !important;
    border-color: rgb(var(--primary)) !important;
}

.btn-submit-modal:focus {
    color: rgb(var(--text-white)) !important;
    background: rgb(var(--primary)) !important;
    border-color: rgb(var(--primary)) !important;
}