/* styles.css */
#labelTable {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable th, #labelTable td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_cleandata_sale_1 {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_cleandata_sale_1 th, #labelTable_cleandata_sale_1 td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_cleandata_sale_1 th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_cleandata_sale {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_cleandata_sale th, #labelTable_cleandata_sale td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_cleandata_sale th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_bank {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_bank th, #labelTable_bank td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_bank th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_bank1 {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_bank1 th, #labelTable_bank1 td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_bank1 th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_bank2 {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_bank2 th, #labelTable_bank2 td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_bank2 th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_account_status {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_account_status th, #labelTable_account_status td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_account_status th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_bankstatus_packe {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_bankstatus_packe th, #labelTable_bankstatus_packe td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_bankstatus_packe th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_bankstatus {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_bankstatus th, #labelTable_bankstatus td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_bankstatus th {
  background-color: #f2f2f2;
  font-weight: bold;
}
/* styles.css */
#labelTable_package {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_package th, #labelTable_package td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_package th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_stockouthistory {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_stockouthistory th, #labelTable_stockouthistory td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_stockouthistory th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_binlocation {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_binlocation th, #labelTable_binlocation td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_binlocation th {
  background-color: #f2f2f2;
  font-weight: bold;
}


/* styles.css */
#labelTable_saledetail {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_saledetail th, #labelTable_saledetail td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_saledetail th {
  background-color: #f2f2f2;
  font-weight: bold;
}


/* styles.css */
#labelTable_stockout {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_stockout th, #labelTable_stockout td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_stockout th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_stockout-no-plan {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_stockout-no-plan th, #labelTable_stockout-no-plan td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_stockout-no-plan th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_stock-take {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_stock-take th, #labelTable_stock-take td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_stock-take th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_subuser {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_subuser th, #labelTable_subuser td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_subuser th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* styles.css */
#labelTable_qc {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_qc th, #labelTable_qc td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_qc th {
  background-color: #f2f2f2;
  font-weight: bold;
}


/* set label checkbock kich thuoc giong nhau */


button {
  padding: 8px 16px;
  font-size: 14px;
  margin-right: 6px;
  cursor: pointer;
}

#deleteSelectedBtn_binlocation {
  padding: 8px 16px;
  font-size: 14px;
}

.label-checkbox-binlocation-edit {
  transform: scale(1.2); /* phóng to checkbox nếu cần */
  margin-right: 6px;
}

label {
  font-size: 14px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
}

/* chọn file excel */
#excelFile_binlocation {
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

#excelFile {
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}



/** set form login **/
#authForm {
  max-width: 320px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#authForm h3 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 20px;
}

#authForm input {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#authActionBtn {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#authActionBtn:hover {
  background-color: #0056b3;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="date"],
select {
  padding: 8px 12px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 6px;
  box-sizing: border-box;
  background-color: #fff;
  cursor: text;
}
/* QC Inspect                                       ****************************************/
#palletIdInput {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inspectType {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inspectType {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#inspectStatus {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar input,
.search-bar button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar {
    flex-direction: column;
  }

  .search-bar input,
  .search-bar button {
    width: 100%;
  }
}

.search-bar-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-inventory input,
.search-bar-inventory button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-inventory {
    flex-direction: column;
  }

  .search-bar-inventory input,
  .search-bar-inventory button {
    width: 100%;
  }
}

/** Split Pallet                                    ****************************/
.search-bar-split {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-split input,
.search-bar-split button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-split {
    flex-direction: column;
  }

  .search-bar-split input,
  .search-bar-split button {
    width: 100%;
  }
}

#palletIdsplit {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#inventory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#splitQuantity {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  


/* styles.css */
#labelTable_split {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_split th, #labelTable_split td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_split th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/*  Merge Pallet                           *****************************************/
/* styles.css */
#labelTable_merge {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_merge th, #labelTable_merge td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_merge th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.search-bar-merge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-merge input,
.search-bar-merge button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-merge {
    flex-direction: column;
  }

  .search-bar-merge input,
  .search-bar-merge button {
    width: 100%;
  }
}

#palletId-from-merge {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#palletId-to-merge {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#pinventory-to-merge {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#mergeQuantity {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-from-merge {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#inventory-to-merge {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

/* Transfer Bin                         ****************************************/

#labelTable_transfer {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

#labelTable_transfer th, #labelTable_transfer td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#labelTable_transfer th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.search-bar-transfer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-transfer input,
.search-bar-transfer button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-transfer {
    flex-direction: column;
  }

  .search-bar-transfer input,
  .search-bar-transfer button {
    width: 100%;
  }
}

#palletId-transfer-pallet {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-transfer-bin {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#transfer-bin {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-transfer-pallet {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

/*******                                                                                    Sale List  ***/
#searchSaleoder {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#search_Material {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


.search-bar-salelist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-salelist input,
.search-bar-salelist button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-salelist {
    flex-direction: column;
  }

  .search-bar-salelist input,
  .search-bar-salelist button {
    width: 100%;
  }
}

#excelFile_saledetail {
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}


/**/
.search-bar-sale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-salel input,
.search-bar-salel button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-sale {
    flex-direction: column;
  }

  .search-bar-sale input,
  .search-bar-sale button {
    width: 100%;
  }
}

/*                                                     Stock Out */

#saleId {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#material {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#des {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#loterp {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#palletId-stockout {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-stockout {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#location-stockout {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#remainsale {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#stockoutQty {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

/*   Stock Out No Plan   *******************/

#palletId-stockout-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#material-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#des-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-stockout-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#location-stockout-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#stockoutQty-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#loterp-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#lotNumber-no-plan {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}



/****          Kiểm Kê */

#palletId-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#material-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#des-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#location-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#lotNumber-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#loterp-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-stock-take {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#inventory-real-stock {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-differ {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#inventory-differ {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


/**/
.search-bar-take {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-take input,
.search-bar-take button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-take {
    flex-direction: column;
  }

  .search-bar-take input,
  .search-bar-take button {
    width: 100%;
  }
}

/*                             stock out his tory */

/**/
.search-bar-stockouthistory {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-stockouthistory input,
.search-bar-stockouthistory button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-stockouthistory {
    flex-direction: column;
  }

  .search-bar-stockouthistory input,
  .search-bar-stockouthistory button {
    width: 100%;
  }
}


#searchSaleoder_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#searchSaleoder_palletId {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#search_Material_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#search_lotNumber_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#search_loterp_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#searchFrom_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#searchTo_stockouthistory {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

/* Trang Home ***************/


#packageSelector {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#buyLines {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#buyDownload {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#Fee {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#subEmail {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#subPassword {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}



#Home {
  width: 100vw; /* dùng viewport width thay vì 100% */
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("warehouse.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.hidden {
  display: none !important;
}



.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: #f0f0f0;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  padding: 20px;
  z-index: 1000;
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.sidebar.hidden {
  transform: translateX(-100%);
}

#mainNav {
  margin-top: 70px; /* hoặc padding-top: 60px; */
  display: flex;
  flex-direction: column; /* chuyển sang chiều dọc */
  gap: 10px; /* khoảng cách giữa các nút */
}

#mainNav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  text-align: left;
  background-color: transparent;
  border: none; /* xóa viền */
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}
#mainNav button:hover {
  background-color: #f0f0f0; /* hiệu ứng hover nhẹ */
}

header h1 {
  margin-left: 60px; /* hoặc 70px nếu cần rộng hơn */
}

#sidebarWrapper {
  background-color: #ffffff; /* nền trắng */
}


.main-header {
  display: flex;
  align-items: center;       /* Căn giữa theo chiều dọc */
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #007bff;
  border-bottom: 1px solid #ccc;
}

/*.hamburger {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
} */

.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 24px;
  background: none;
  border: none;
  z-index: 1001;
  cursor: pointer;
}                               


* {
  box-sizing: border-box;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#sidebarWrapper::-webkit-scrollbar {
  width: 4px;
}

#sidebarWrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}


/*******************  Director */

#mainEmail {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#satus_bank {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

.search-bar-bank1 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-bank1 input,
.search-bar-bank1 button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-bank1 {
    flex-direction: column;
  }

  .search-bar-bank1 input,
  .search-bar-bank1 button {
    width: 100%;
  }
}

.search-bar-bank2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-bank2 input,
.search-bar-bank2 button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-bank2 {
    flex-direction: column;
  }

  .search-bar-bank2 input,
  .search-bar-bank2 button {
    width: 100%;
  }
}



#mainEmail1 {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#satus_bank1 {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#paperSize {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

#paperSize_bin {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}

.search-bar-bank3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-bank3 input,
.search-bar-bank3 button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-bank3 {
    flex-direction: column;
  }

  .search-bar-bank3 input,
  .search-bar-bank3 button {
    width: 100%;
  }
}

.search-bar-bank4 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-bank4 input,
.search-bar-bank4 button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-bank4 {
    flex-direction: column;
  }

  .search-bar-bank4 input,
  .search-bar-bank4 button {
    width: 100%;
  }
}

.search-bar-bank6 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-bank6 input,
.search-bar-bank6 button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-bank6 {
    flex-direction: column;
  }

  .search-bar-bank6 input,
  .search-bar-bank6 button {
    width: 100%;
  }
}




/*     Search Bar Bin Location   ***********************************************/
.search-bar-binlocation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar-binlocation input,
.search-bar-binlocation button {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Responsive: xuống mobile thì xếp dọc */
@media (max-width: 600px) {
  .search-bar-binlocation {
    flex-direction: column;
  }

  .search-bar-binlocation input,
  .search-bar-binlocation button {
    width: 100%;
  }
}

#searchSaleoder {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#search_Material {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}
#searchStatus {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}


#searchFrom-cleandata {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  
#searchTo-cleandata {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  

#searchFrom-cleandata-sale {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  
#searchTo-cleandata-sale {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  



#searchFrom-cleandata-deleted {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  

#searchTo-cleandata-deleted {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  

#fifo_stockout {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  
#stockout_qcstatus {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}  

#clean_type_pallet {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
} 

#clean_type_sale {
  padding: 10px 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
}