/* css grid */
.e-headertext {
    text-transform: none;
    font-size: 0.8rem;
    font-weight: 550;
    color: black;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    text-transform: none;
    font-size: 0.8rem;
    font-weight: 550;
    color: black;
}
.e-grid .e-rowcell {
    font-size: 14px;
    /* Hiệu ứng border cho checkbox */
    .e-checkbox-wrapper .e-frame {
    border-radius: 0.3rem;
}

/* Loại bỏ border cho e-input-group */
/*.e-input-group:not(.e-float-icon-left),
.e-input-group.e-success:not(.e-float-icon-left),
.e-input-group.e-warning:not(.e-float-icon-left),
.e-input-group.e-error:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    border: none;*/ /* Loại bỏ border */
/*width: 95%;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: #c1c8d1;
}*/
.e-input-group:not(.e-float-icon-left),
.e-input-group.e-success:not(.e-float-icon-left),
.e-input-group.e-warning:not(.e-float-icon-left),
.e-input-group.e-error:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    width: 95%;
}

/* Tùy chỉnh giao diện input trong e-input-group */
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group textarea.e-input,
.e-input-group.e-control-wrapper textarea.e-input {
    margin: auto;
    text-align: center;
    border-radius: 0.5rem;
}
/* Lớp CSS tùy chỉnh cho select-amount */
.select-amount {
    width: 110px;
}

/* Định dạng văn bản với các class text-sm, text-base, text-text-primary, text-text-secondary, text-red */
.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.text-text-primary {
    font-size: 0.875rem;
    color: #4a4f63;
    font-weight: 400;
    line-height: 1.5rem;
}

.text-text-secondary {
    font-size: 1rem;
    color: #4a4f63;
    font-weight: 400;
    line-height: 1.5rem;
}

.text-red {
    color: #cb1c22;
    font-size: 1.125rem;
    font-weight: 600;
}

/* CSS cho chi tiết giỏ hàng */
.cart-detail {
    background-color: white;
    padding: 16px;
    margin-bottom: 15px;
}

/* Hover effect cho nút remove */
.remove:hover {
    background-color: none !important;
}

/* Định dạng tên mục sản phẩm */
.name-item {
    padding: 0px;
}

    .name-item h2 {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 600;
    }

/* Định dạng mục sản phẩm trong giỏ hàng */
.cart-item {
    margin: 0px;
}

/* Định dạng hình ảnh sản phẩm */
.img-item {
    max-width: 100px;
    height: auto;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: #c1c8d1;
    padding: 0.25rem;
    margin-right: 1rem;
}

/* Định dạng đoạn văn bản chung */

/* CSS cho phần css-tgtgl2 */
.css-tgtgl2 {
    background-color: #edf0f3;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
}

/* Định dạng màu văn bản và padding trong các trường hợp cụ thể */

.custom-cbb {
    max-width: 110px;
    border-radius: 10px !important;
}

.e-numeric.select-amount .e-input-group-icon.e-spin-up:before {
    content: "\e805";
    color: rgba(0, 0, 0, 0.54);
}

.e-numeric.select-amount .e-input-group-icon.e-spin-up:hover {
    background-color: transparent;
}

.e-numeric.select-amount .e-input-group-icon.e-spin-down:before {
    content: "\e87f";
    color: rgba(0, 0, 0, 0.54);
}

.e-numeric.select-amount .e-input-group-icon.e-spin-down:hover {
    background-color: transparent;
}

.btn-custom {
    align-items: center;
    height: 45px;
    border-radius: 20px;
    border-color: transparent;
    justify-content: center;
    display: inline-flex;
    background-color: #ad181d;
    color: white
}

    .btn-custom:hover {
        background-color: #e58888;
    }

    .btn-custom:active {
        background-color: #e58888;
    }

    .btn-custom:focus {
        background-color: #e58888;
    }

.button_clear {
    float: right;
}

.select-amount {
    border-radius: 10px !important;
}

.e-link {
    padding: 0px !important;
}

.e-trash {
    color: black;
}


.e-appbar.e-light .e-btn.e-inherit:hover, .e-appbar.e-light .e-btn.e-inherit:focus, .e-appbar.e-light .e-btn.e-inherit:active, .e-appbar.e-light .e-btn.e-inherit.e-active, .e-appbar.e-light .e-css.e-btn.e-inherit:hover, .e-appbar.e-light .e-css.e-btn.e-inherit:focus, .e-appbar.e-light .e-css.e-btn.e-inherit:active, .e-appbar.e-light .e-css.e-btn.e-inherit.e-active, .e-appbar.e-light .e-dropdown-btn.e-inherit:hover, .e-appbar.e-light .e-dropdown-btn.e-inherit:focus, .e-appbar.e-light .e-dropdown-btn.e-inherit:active, .e-appbar.e-light .e-dropdown-btn.e-inherit.e-active, .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:hover, .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus, .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active, .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
    background: rgba(0, 0, 0, .056);
    background-color: var(--bs-blue);
}


/* CSS cho máy tính và màn hình lớn (min-width: 1280px) */
@media screen and (min-width: 1280px) {
    /* Thiết lập kích thước và vị trí cho các phần tử trên màn hình lớn */
    .css-8nvpl0, .cart-price {
        max-width: 810px;
        margin: auto;
    }

    .cart-detail {
        border-radius: 7px;
    }

    .btn-custom {
        height: 40px;
        font-size: 16px;
    }

    .text-text-primary, .text-text-secondary {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
    }
}

@media (min-width: 900px) {


    .text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .name-item h2 {
        font-size: 1.125rem;
        line-height: 1.5rem;
        font-weight: 600;
    }
}

/* CSS cho điện thoại di động (max-width: 599px) */
@media only screen and (max-width: 599px) {
    .title {
        margin: auto;
        line-height: normal;
        font-weight: bold;
    }

    .button_clear {
        float: right;
        font-size: 9px;
    }

    #text_mb {
        color: #cb1c22;
        font-size: 1.125rem;
        font-weight: 600;
        margin: auto;
    }
    /* Điều chỉnh kiểu dáng cho điện thoại di động */
    .css-tgtgl2 {
        background-color: #eaeaea;
        padding: 12px;
    }

    .custom-cbb {
        max-width: 100%;
        margin-bottom: 10px;
    }

    .e-numeric.select-amount .e-input-group-icon.e-spin-up:before,
    .e-numeric.select-amount .e-input-group-icon.e-spin-down:before {
        font-size: 20px;
    }

    .btn-custom {
        height: 40px;
        font-size: 12px;
    }

    .img_ct {
        margin-top: 40%;
    }

    .img-item {
        max-width: 100px;
        height: auto;
        border-style: solid;
        border-width: 1px;
        border-radius: 0.5rem;
        border-color: #c1c8d1;
        padding: 0.25rem;
        margin-right: 1rem;
    }
    /* Điều chỉnh độ dày của border cho các phần tử trên điện thoại */
    .e-input-group:not(.e-float-icon-left),
    .e-input-group.e-success:not(.e-float-icon-left),
    .e-input-group.e-warning:not(.e-float-icon-left),
    .e-input-group.e-error:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
        border-width: 2px;
    }

    p {
        font-size: 14px;
    }

    /* ... (các phần CSS khác cho điện thoại di động) ... */
}