Untitled

.shopping-cart {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.shopping-cart-title {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #FF385C;
    font-size: 2.5rem;
}

.shopping-cart-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: #f1829a;
    margin-bottom: 2rem;
}

.shopping-cart-table {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 2rem auto;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.shopping-cart-table th,
.shopping-cart-table td {
    text-align: center;
    padding: 1rem;
    vertical-align: middle;
    color: black;
}

.shopping-cart-table button {
    font-weight: bold;
    font-size: 15px;
    background-color: #f5efef;
    color: #4a4545;
}

.shopping-cart-table td span {
    color: black;
}

.shopping-cart-table th {
    background-color: #f5efef;
    color: #4a4545;
}

.shopping-cart-table th:nth-child(2) {
    text-align: left;
}

.shopping-cart-table td {
    border-bottom: 1px solid #ddd;
}
 
.product-info {
    display: flex;
    align-items: center;
}

.product-info-image {
    width: 100px;
    margin-right: 1rem;
}

.product-info-name {
    font-weight: bold;
    color: #1f1f1fde;
    text-align: left;
}

.product-info-size {
    color: #666;
    text-align: left;
}

.product-info-size button {
    border: 1px #353434 solid;
    border-radius: 10px;
    font-style: italic;
    height: 25px;
    margin-top: 0.3rem;
    background-color: #f4f3f3cc;
    display: inline-block; /* Đảm bảo kích thước phù hợp với nội dung */
    padding: 4px 8px; /* Khoảng cách giữa nội dung và viền */
    border: 1px solid #ddd; /* Viền (nếu cần) */
    border-radius: 10px; /* Bo góc (nếu cần) */
    font-size: 14px; /* Cỡ chữ */
    white-space: nowrap; /* Ngăn xuống dòng nếu nội dung dài */
    overflow: hidden; /* Ẩn nội dung tràn (nếu cần) */
    text-overflow: ellipsis; /* Thêm dấu `...` nếu nội dung quá dài */
}

.size-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.size-popup-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    color: #000000be;
    font-size: 23px;
}

.size-popup-content select {
    background: white;
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
}

.size-popup-actions {
    margin-top: 15px;
}

.size-popup-actions button {
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px #666 solid;
    height: 30px;
    width: 70px;
    cursor: pointer;
}

.cancel-button-option{
    padding: 8px 16px;
    background-color: #f5f5f5;
    color: #060606;
    
}

.save-button-option{
    background-color: #FF385C;
    
    color: #ffffff;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-controls:hover {
    border-color: #FF385C !important;
}

.quantity-controls button {
    width: 25px;
    height: 25px;
    background-color: #e94a68;
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.quantity-controls button:disabled {
    background-color: #ccc;
}

.quantity-controls span {
    margin: 0 1rem;
    font-size: 1rem;
}

.quantity-controls button:hover:not(:disabled) {
    background-color: #de2e4f;
}

.quantity-controls button:hover {
    background-color: white !important; /* Nền trắng khi hover */
    color: #FF385C !important; /* Chữ màu đỏ khi hover */
    border: 1px solid #FF385C !important; /* Viền đỏ khi hover */
  }

.remove-btn {
    background: none;
    border: none;
    color: rgb(243, 85, 85);
    cursor: pointer;
    border-radius: 50%;
    padding: 5px;
    border: 1px solid #f3555a;
}

.remove-btn svg {
    vertical-align: middle;
    color: #e94a68;
}

.shopping-cart-confirm {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem;
}

.confirm-information,
.order-summary {
    width: 50%;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 0.75rem 0;
    width: 100%;
    /* Đảm bảo rằng border-bottom kéo dài hết chiều rộng */
}

.confirm-information h3,
.order-summary h3 {
    color: #FF385C;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    background-color: #f5efef;
    border-radius: 40px;
    margin-left: -18px;
}

.confirm-information form {
    padding-top: 1rem;
}

.confirm-information label,
.order-summary label {
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

.confirm-information input,
.confirm-information select,
.confirm-information textarea {
    width: 100%;
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}

.confirm-information textarea {
    resize: vertical;
    height: 100px;
}

.order-summary p {
    font-size: 1rem;
    font-weight: bold;
    color: #4a4a4a;
    margin: 1rem 0;
}

.checkout-btn {
    margin-top: 15px;
    width: 100%;
    padding: 1rem;
    background-color: #FF385C;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}

.checkout-btn:hover {
    background-color: #de2e4f;
}

.quantity-input {
    width: 50px;
    /* Đặt chiều rộng phù hợp */
    text-align: center;
    -moz-appearance: textfield;
    /* Firefox */
    margin: 0 5px;
}

.quantity-input:hover {
    border-color: #FF385C !important; /* Màu viền khi hover */
    outline: none; /* Loại bỏ hiệu ứng outline mặc định (nếu cần) */
  }
  
  .quantity-input:focus {
    border-color: #FF385C !important; /* Màu viền khi focus */
    box-shadow: 0 0 5px rgba(255, 56, 92, 0.5); /* Hiệu ứng focus */
  }
  

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    /* Chrome, Safari */
    margin: 0;
}

.ant-tag-checkable {
    border: 1px solid #d9d9d9; /* Màu viền mặc định */
    color: #333; /* Màu chữ mặc định */
    transition: all 0.3s;
  
    &:hover {
      border-color: #ff4d4f; /* Màu viền khi hover */
      color: #ff4d4f;
    }
  }
  
  .ant-tag-checkable-checked {
    border-color: #ff4d4f !important; /* Viền màu đỏ khi chọn */
    background-color: #fff !important; /* Nền trắng khi chọn */
    color: #ff4d4f !important; /* Chữ màu đỏ khi chọn */
    font-weight: bold; /* Làm chữ đậm */
  }
  
  .shopping-cart-table .ant-table-container {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #eaeaea transparent;
    scrollbar-gutter: stable;
  }
  
  .shopping-cart-table .ant-table-container::-webkit-scrollbar {
    width: 8px;
  }
  
  .shopping-cart-table .ant-table-container::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .shopping-cart-table .ant-table-container::-webkit-scrollbar-thumb {
    background-color: #eaeaea;
    border-radius: 4px;
  }
  
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #FF385C !important; /* Màu nền khi checkbox được chọn */
    border-color: #FF385C !important; /* Màu viền khi checkbox được chọn */
  }
  
  .ant-checkbox-checked::after {
    border-color: #FF385C !important; /* Màu hiệu ứng khi checkbox được chọn */
  }
  
  .ant-checkbox-wrapper:hover .ant-checkbox-inner {
    border-color: #FF385C !important; /* Đổi màu viền khi hover */
  }
  
  .ant-checkbox-checked:hover .ant-checkbox-inner {
    border-color: #FF385C !important; /* Màu viền khi hover nếu đã được chọn */
    background-color: #FF385C !important; /* Giữ màu nền khi hover nếu đã được chọn */
  }

  .product-info-size .ant-btn-link {
    color: black !important; /* Đổi màu chữ thành đen */
  }
  
  .product-info-size .ant-btn-link:hover {
    color: black !important; /* Giữ màu đen khi hover */
  }
  
  .selected-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .empty-cart {
    text-align: center;
    color: #999;
    font-size: 16px;
    margin-top: 20px;
  }
  
  .empty-cart img {
    display: block;
    margin: 0 auto;
  }

.custom-checkbox .ant-checkbox-inner {
    border-color: #ff385c !important; 
  }
  
  .custom-checkbox .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #ff385c !important;
    border-color: #ff385c !important; 
  }
  
  .custom-checkbox .ant-checkbox-checked .ant-checkbox-inner::after {
    border-color: white !important; 
    border-width: 2px; 
  }
  
  .custom-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {
    border-color: #e0314b !important;
  }
  
  .selected-header {
    display: flex;
    align-items: center;
    gap: 10px; 
    padding: 10px 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  
  .selected-text {
    font-size: 16px;
    font-weight: bold;
  }
  
.delete-selected-btn {
    background-color: white; 
    color: #ff385c; 
    border: 1px solid #ff385c; 
    padding: 8px 12px; 
    border-radius: 8px;
    transition: all 0.3s ease; 
  }
  
  /* Hiệu ứng hover */
  .delete-selected-btn:hover {
    background-color: #ff385c; 
    color: white; 
    border-color: #e0314b;
    transform: scale(1.1); 
  }
  
  // .overlay {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-color: rgba(0, 0, 0, 0.5); /* Màu nền tối mờ */
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   z-index: 9999; /* Đảm bảo nằm trên mọi phần tử khác */
  // }
  
  // .overlay p {
  //   color: white;
  //   font-size: 1.5rem;
  //   text-align: center;
  //   background: rgba(0, 0, 0, 0.7);
  //   padding: 20px;
  //   border-radius: 10px;
  // }