/* CSS trong t?p mycss.css */
.body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
	 width: 100%;
}

  

.submit{
	width: 119px;
    height: 50px;
    font-size: 15px;
    font-weight: 700;
    background: red;
    color: white;
    float: right;
    margin-top: 50px;
    border-color: white;
    border-radius: 10px;
}
.submitaction{
	height: 25px;
    font-size: 14px;
    border-radius: 5px;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex: 80%;
	max-width: 100%;
	margin-left: auto;
    margin-right: auto;
}

.logo {
    flex: 20%; /* Ph?n div chi?m 20% chi?u r?ng c?a header */
}
.logo img {
    max-width: 150px;
    height: auto;
}

.search-form {
    flex: 60%; /* Ph?n div chi?m 60% chi?u r?ng c?a header */
	float: left;
    color: red;
    font-weight: bold;
}

.user-info {
    flex: 20%; /* Ph?n div chi?m 20% chi?u r?ng c?a header */
    text-align: right;
}

/* CSS cho menu g?c */
.header-menu {
  align-items: center;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #2fa0ca;
  color: #333;
}

.menu-toggle{
	display:none;
}

/* M?c d?nh cho menu */
.header-menu .menu {
  align-items: center;
}

.header-menu .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 900;
}

.header-menu .menu ul li {
  position: relative;
}

.header-menu .menu ul li:last-child {
  margin-right: 0;
}

.header-menu .menu ul li a {
  text-decoration: none;
  color: #fff;
  padding: 15px 25px;
  display: block;
  transition: background-color 0.3s ease;
}

.header-menu .menu ul li:hover a {
  background-color: darkcyan;
}

/* Menu con */
.header-menu .menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-menu .menu ul li:hover > ul {
  display: block;
}

.header-menu .menu ul ul li {
  border-top: 1px solid #555;
}

.header-menu .menu ul ul li:first-child {
  border-top: none;
}

.header-menu .menu ul ul li a {
  padding: 10px 20px;
  color: #fff;
}

.header-menu .menu ul ul li:hover a {
  color: #ff6600; /* Thay d?i m�u ch? khi hover */
}

/* Hi?n th? mui t�n ch? xu?ng cho m?c menu c� submenu */
.header-menu .menu ul li:has(ul) > a:after {
  content: "\25BC"; /* Mui t�n ch? xu?ng */
  margin-left: 5px;
  display: inline-block;
  float:right;
}

/* ----------------------------------------------------------- */

/* CSS cho class page-title */
.content, .footer{
	display: block;
    justify-content: space-between;
    align-items: center;
	max-width: 100%;
	margin-left: auto;
    margin-right: auto;
}

.page-title {
    font-size: 24px;
    margin-top: 20px;
    text-align: center;
}

/* CSS cho class order-table */
.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.order-table th, .order-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}



/* CSS cho class employee-info */
.employee-info {
    font-weight: bold;
}

/* CSS cho class order-status */
.order-status {
    font-weight: bold;
}

/* CSS cho class order-request */
.order-request {
    font-style: italic;
}

/* CSS cho class customer-address */
.customer-address {
    font-size: 14px;
}

/* CSS cho class not-received-time */
.not-received-time {
    font-weight: bold;
    color: red;
}

/* CSS cho class expected-commission */
.expected-commission {
    font-weight: bold;
    color: green;
}

/* CSS cho class action-buttons */
.action-buttons {
    display: block;
    justify-content: center;
    gap: 10px;
}
.action-buttons form {
	margin-bottom:10px;
}

.action-buttons button {
    padding: 5px 10px;
    background-color: #0074d9;
    color: white;
    border: none;
    cursor: pointer;
	width: 90px;
}

.action-buttons button:hover {
    background-color: #0056b3;
}

/* CSS cho class no-orders-message */
.no-orders-message {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    color: #888;
}
/* CSS cho class order-table */
.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.order-table th, .order-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    position: relative; /* Th�m d�ng n�y */
}

.order-table th {
    background-color: sienna;
    color: white;
}

/* CSS cho class order-row (m?i h�ng) */
.order-row:nth-child(odd) {
    background-color: #f9f9f9; /* M�u n?n nh?t hon cho h�ng l? */
}

.order-row:nth-child(even) {
    background-color: #e0e0e0; /* M�u n?n nh?t hon cho h�ng ch?n */
}

.order-row::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; /* �u?ng vi?n du?i ch�n */
    border-bottom: 1px solid #ddd;
}

/* ----------------------------------------------------------- */

/* �?nh d?ng b?ng ch�nh */
.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-table th,
.custom-table td {
    padding: 10px;
    border: 1px solid #ccc;
	vertical-align: top;
}

/* �?nh d?ng c?t Ch? th? */
.subject-column {
    width: 25%;
}

.subject-list {
    list-style: none;
    padding: 0;
}

.subject-list li {
    margin-bottom: 10px;
}

.subject-list a {
    text-decoration: none;
    color: #0066cc;
}

.subject-list a:hover {
    text-decoration: underline;
}

/* �?nh d?ng c?t Thi?t b? */
.device-column {
    width: 60%;
}

.device-table {
    width: 100%;
}

.device-table th,
.device-table td {
    padding: 8px;
	border:none;
}

/* �?nh d?ng c?t H�nh d?ng */
.action-column {
    width: 15%;
	text-align: center;
}

.action-list {
    list-style: none;
    padding: 0;
	margin: 0;
}

.action-list li {
    margin-bottom: 5px;
}

.action-list a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #0066cc;
    color: #fff;
    text-decoration: none;
	width: 85px;
    text-align: center;
}

.action-list a:hover {
    background-color: #0050a1;
}

.device-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* M�u n?n cho c�c h�ng l? */
}

.device-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* M�u n?n cho c�c h�ng ch?n */
}

/* danh sách goi y */
.product_list, .supplier_list, .employee_list{
	z-index: 999;
    position: absolute;
    background-color: antiquewhite;
}
.product_list li.selected, .supplier_list li.selected, .employee_list li.selected  {
    background-color: cornflowerblue;
}

.product_list ul, .supplier_list ul, .employee_list ul  {
    border: 1px solid #ccc;
    list-style: none;
	margin: 0;
    padding: 0;
    z-index: 10;
    max-height: 200px; /* Chỉnh chiều cao tối đa v� bật thanh cuộn nếu cần */
    overflow-y: auto;
}
.product_list ul li, .supplier_list ul li, .employee_list ul li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.product_list ul li:hover, .supplier_list ul li:hover, .employee_list ul li:hover {
    background: #f5f5f5;
}

/* xem hình phong to */

#image-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
#image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#popup-image {
  max-width: 90%;
  max-height: 90%;
}


/* giá sản phẩm nhập ỏ bảng thêm đơn hàng */
.supplier_info { 
    width: 230px;
}

.product_supplier_price {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.product_supplier_price li {
    padding: 5px;
    font-size: 14px;
    color: #333;
}

.product_supplier_price li:first-child {
    cursor: pointer;
}

.product_supplier_price li + li {
    display: none;
}

.product_supplier_price li.show {
    display: list-item;
}

.product_supplier_price li:last-child {
    border-bottom: none;
}







/* Responsive cho menu di d?ng */
@media (max-width: 768px) {
.content, .footer, .header{
	
	max-width: 100%;

}


	
.header-top {
	flex: 100%;
	max-width: 100%;
	
}

.logo {
   display:none;
}
.logo img {
    max-width: 100px;
}

.search-form {
    flex: 50%; /* Ph?n div chi?m 60% chi?u r?ng c?a header */
	float: left;
    color: red;
    font-weight: bold;
}
#search-type{
	display:none;
}

.user-info {
      flex: 30%;
}

/* CSS cho menu g?c */
.header-menu {
  max-width: 100%;
}
	
	
	/* N�t ?n/hi?n menu (menu-toggle) */
.menu-toggle {
  font-size: 24px;
  cursor: pointer;
  background: #2fa0ca; /* M�u n?n gi?ng menu g?c */
  color: #fff; /* M�u ch? tr?ng */
  text-align: right; /* �?t ch? v? ph�a ph?i */
  display:block;
  padding-right:10px;
  margin: 10px 0;
}
  /* ?n menu ch�nh tr�n m�n h�nh nh? */
  .header-menu .menu ul {
	      display: none;
   
  }

  /* Hi?n th? menu ch�nh khi n�t du?c b?m */
  .header-menu .menu.active ul {
   display:block;
   position: relative;
}


  .header-menu .menu ul li {
  
  }

  .header-menu .menu ul ul {
 
  }

  .header-menu .menu ul li:hover > ul {
   
  }
  
  .custom-table th, .custom-table td{
	  padding: 5px;
	  
  }
  
  .mobihide{
	  display:none;
  }
  
  
  
}