body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      h1 {
        text-align: center;
      }
      .form-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: flex;
      }
      .form-left {
        flex: 2;
        padding-right: 20px;
      }
      .form-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .form-group {
        margin-bottom: 15px;
        position: relative;
      }
      .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
      }
      .form-group textarea#lyDo {
        height: 50px;
        resize: vertical;
      }
      .form-group .suggestions {
        position: absolute;
        border: 1px solid #ccc;
        background: white;
        max-height: 150px;
        overflow-y: auto;
        width: 100%;
        display: none;
        z-index: 1;
      }
      .form-group .suggestions div {
        padding: 5px;
        cursor: pointer;
      }
      .form-group .suggestions div:hover {
        background-color: #f0f0f0;
      }
      .form-group .add-product-btn {
        padding: 5px 10px;
        background-color: #008cba;
        color: white;
        border: none;
        cursor: pointer;
        margin-top: 5px;
      }
      .form-group .add-product-btn:hover {
        background-color: #007bb5;
      }
      .form-group .selected-products-table {
        margin-top: 10px;
        width: 100%;
        border-collapse: collapse;
      }
      .form-group .selected-products-table th,
      .form-group .selected-products-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      .form-group .selected-products-table th {
        background-color: #f2f2f2;
      }
      .form-group .quantity-controls {
        display: flex;
        align-items: center;
      }
      .form-group .quantity-controls input {
        width: 50px;
        text-align: center;
        margin: 0 5px;
      }
      .form-group .quantity-controls button {
        padding: 5px;
        width: 30px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
      }
      .form-group .quantity-controls button:hover {
        background-color: #45a049;
      }
      .form-group .delete-btn {
        padding: 5px 10px;
        background-color: #ff0000;
        color: white;
        border: none;
        cursor: pointer;
      }
      .form-group button {
        padding: 8px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
        width: 100%;
      }
      .form-group button:hover {
        background-color: #45a049;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        min-width: 50px;
      }
      th {
        background-color: #f2f2f2;
      }
      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
      .action-btn {
        padding: 5px 10px;
        margin: 0 5px;
        cursor: pointer;
      }
      .edit-btn {
        background-color: #2196f3;
        color: white;
        border: none;
      }
      .delete-btn {
        background-color: #f44336;
        color: white;
        border: none;
      }
      .manage-btn,
      .report-btn {
        display: inline-block;
        margin: 10px 5px;
        padding: 10px 20px;
        background-color: #008cba;
        color: white;
        border: none;
        cursor: pointer;
      }
      .manage-btn:hover,
      .report-btn:hover {
        background-color: #007bb5;
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .modal-content {
        background-color: white;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 800px;
        border-radius: 5px;
        max-height: 80vh;
        overflow-y: auto;
      }

      .modal-content .search-bar {
        margin-bottom: 20px;
      }

      body.modal-open {
        overflow: hidden;
      }
      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }
      .close:hover {
        color: black;
      }
      /*  .search-container {
            margin-bottom: 20px;
        } 
        .search-container input {
            padding: 8px;
            width: 200px;
            margin-right: 10px;
        } */
      .pagination {
        margin-top: 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
      }
      .pagination button {
        padding: 8px 12px;
        margin: 0 2px;
        background-color: #008cba;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
      }
      .pagination button:hover:not(:disabled) {
        background-color: #007bb5;
      }
      .pagination button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
      .pagination button.active {
        background-color: #4caf50;
      }
      .report-section {
        margin-top: 20px;
      }
      .report-section h3 {
        margin-bottom: 10px;
      }
      .report-section ul {
        list-style-type: none;
        padding: 0;
      }
      .report-section ul li {
        padding: 5px 0;
      }
      .report-filter {
        margin-bottom: 20px;
      }
      .report-filter button {
        padding: 8px 12px;
        margin: 5px;
        background-color: #008cba;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 4px;
      }
      .report-filter button:hover {
        background-color: #007bb5;
      }
      .report-filter button.time-range-btn {
        padding: 8px 12px;
        margin: 5px;
        background-color: #008cba;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
      }

      .report-filter button.time-range-btn:hover {
        background-color: #007bb5;
      }

      .report-filter button.time-range-btn.active {
        background-color: white;
        color: #008cba;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
      }
      .form-left .form-group:last-child {
        text-align: right;
      }
      .form-left .form-group:last-child button {
        width: auto;
        padding: 8px 20px;
      }
      .import-btn {
        background-color: #2196f3;
        color: white;
        border: none;
        padding: 8px 16px;
        margin-left: 10px;
        cursor: pointer;
        border-radius: 4px;
      }

      .import-btn:hover {
        background-color: #1976d2;
      }

      /* Áp dụng border-radius cho tất cả các button */
      button,
      .form-group button,
      .form-group .add-product-btn,
      .form-group .quantity-controls button,
      .form-group .delete-btn,
      .action-btn,
      .edit-btn,
      .delete-btn,
      .manage-btn,
      .report-btn,
      .import-btn,
      .pagination button {
        border-radius: 4px; /* Bo góc 4px cho tất cả các button */
      }

      /* Đảm bảo các button trong .report-filter đã có border-radius, nhưng thêm lại để rõ ràng */
      .report-filter button,
      .report-filter button.time-range-btn {
        padding: 8px 12px;
        margin: 5px;
        background-color: #008cba;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 4px; /* Đã có nhưng thêm lại để đảm bảo */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
      }

      .search-filter-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 20px 0;
        flex-wrap: wrap;
      }

      .date-btn,
      .search-btn {
        background-color: #4caf50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
      }

      .date-btn:hover,
      .search-btn:hover {
        background-color: #45a049;
      }

      .search-container {
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      #searchInput {
        width: 100%;
        max-width: 300px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s;
      }

      #searchInput:focus {
        outline: none;
        border-color: #4caf50;
      }

      #filterDate {
        display: none;
      }

      @media (max-width: 600px) {
        .search-filter-container {
          flex-direction: column;
          align-items: flex-start;
        }
        .search-container {
          width: 100%;
        }
        #searchInput {
          max-width: 100%;
        }
      }

      #reportModal .modal-content .exportReportToExcel {
        padding: 8px 12px;
        margin: 5px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
      }

      .export-section {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 0;
      }

      #exportTimeRange {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
      }

      #exportSpecificDate {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
      }

      .export-section button {
        background-color: #4caf50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
      }

      .export-section button:hover {
        background-color: #45a049;
      }

      #returnTable td:nth-child(4) div {
        margin-bottom: 5px; /* Khoảng cách giữa các dòng sản phẩm */
        white-space: normal; /* Cho phép xuống dòng nếu tên sản phẩm dài */
        word-break: break-word; /* Ngắt từ nếu quá dài */
        min-width: 200px;
      }

      #returnTable td:nth-child(4) {
        vertical-align: top; /* Căn đỉnh cho cột Sản phẩm */
      }

      #returnTable td:nth-child(6) {
        max-width: 250px; /* Giới hạn chiều rộng */
        white-space: normal; /* Cho phép xuống dòng */
      }
      #returnTable td:nth-child(7) {
        color: #0044cc;
      }

      /* Làm đẹp phần chọn khoảng ngày */
      #returnRangeInput {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
      }

      #returnRangeInput label {
        font-weight: bold;
        color: #333;
      }

      #returnRangeInput input {
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #returnRangeInput input:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
      }

      #returnRangeInput button {
        background-color: #4caf50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s, transform 0.2s;
      }

      #returnRangeInput button:hover {
        background-color: #45a049;
        transform: scale(1.05);
      }

      /* Làm đẹp phần chọn ngày và chọn khoảng ngày trong modal báo cáo */
      #specificDayInput,
      #customRangeInput {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        justify-content: center;
      }

      #specificDayInput label,
      #customRangeInput label {
        font-weight: bold;
        color: #333;
      }

      #specificDayInput input,
      #customRangeInput input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #specificDayInput input:focus,
      #customRangeInput input:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
      }

      #customRangeInput button {
        background-color: #4caf50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s, transform 0.2s;
      }

      #customRangeInput button:hover {
        background-color: #45a049;
        transform: scale(1.05);
      }

      /* Làm đẹp các nút chọn thời gian */
      .report-filter button {
        padding: 10px 15px;
        background-color: #008cba;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s, transform 0.2s;
      }

      .report-filter button:hover {
        background-color: #007bb5;
        transform: scale(1.05);
      }

      .report-filter button.active {
        background-color: #4caf50;
        color: white;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
      }
      /* Làm đẹp phần chọn khoảng ngày trong phần xuất báo cáo */
      #exportCustomRange {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
      }

      #exportCustomRange label {
        font-weight: bold;
        color: #333;
      }

      #exportCustomRange input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #exportCustomRange input:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
      }

      #exportCustomRange button {
        background-color: #4caf50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
      }

      #exportCustomRange button:hover {
        background-color: #45a049;
      }