@import url("https://haylamday.com/css/font.css");
body{font-family:vuonghiep;margin:0 auto;max-width:800px;border:4px solid #d2f307;border-radius:5px;font-size:14px}
table{width:100%;border-collapse:collapse}
th{background-color:#d2f307;font-weight:600; margin-top: 6px;}
th, td {
    border: solid 1px #d2f307;
    font-size: 14px;
    color: blue;
    font-family: vuonghiep;
}
td:nth-child(5){width:10%;/* Đảm bảo cột "Xóa" có chiều rộng cố định */}


input,textarea{width:100%;box-sizing:border-box;border:none;border-radius:5px;font-family:vuonghiep;text-align: center;height:40px;}


input:hover,textarea:hover{background-color:#f0f0f0;/* Màu nền sáng khi hover */
    border:1px solid #007BFF;/* Viền xanh khi hover */
    box-shadow:0 0 5px rgba(0,123,255,0.5);/* Đổ bóng nhẹ khi hover */}
input:focus,textarea:focus{border:1px solid #007BFF;/* Viền xanh khi đang focus */
    outline:none;/* Loại bỏ outline mặc định của trình duyệt */
    box-shadow:0 0 5px rgba(0,123,255,0.5);/* Đổ bóng nhẹ khi focus */}
tfoot tr.total{font-weight:bold;background-color:#f7f7f7;color:#333;/* Chỉnh sửa để tổng tiền chiếm toàn bộ chiều rộng */}
    td{text-align:right;}
 #notes {
    overflow: hidden;
    resize: none; /* Ngăn người dùng kéo thủ công nếu muốn */
}   
#grandTotal{font-size:15px;font-weight:bold;color:#e53935;width:100%;/* Chiếm toàn bộ chiều rộng */
    text-align:center;/* Canh phải để hiển thị đẹp hơn */
    padding-right:15px;/* Đảm bảo có khoảng cách bên phải */}
/* Nút thêm sản phẩm,lưu hóa đơn,xóa tất cả */
.button-group{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.button-group button{padding:12px 25px;border-radius:5px;font-size:16px;cursor:pointer;transition:all 0.3s ease;border:none}
.add-product-btn{background-color:#4CAF50;color:white}
.save-invoice-btn{background-color:#007BFF;color:white}
.delete-all-btn{background-color:#f44336;color:white}
.button-group button:hover{opacity:0.8}
.add-product-btn:hover{background-color:#45a049}
.save-invoice-btn:hover{background-color:#0056b3}
.delete-all-btn:hover{background-color:#d32f2f}
button{color:#fff;border:none;border-radius:5px;padding:10px;font-size:15px;font-family:vuonghiep}
/* Tối ưu hóa giao diện cho các trường nhập liệu */
.form-input{margin:10px auto;width:80%;display:flex;justify-content:space-between;align-items:center}
.form-input label{font-size:14px;color:#333;width:25%}
.form-input input,.form-input textarea{width:70%;padding:3px;font-size:14px;border:1px solid #ddd;border-radius:5px}
.form-input textarea{resize:vertical;height:120px}
/* Nút xóa sản phẩm */
.delete-btn{border:none;border-radius:5px;cursor:pointer;font-size:14px;text-align:center}
.delete-btn:hover{background-color:#d32f2f}
.vietnam{padding:6px 0 6px 0;border:solid 1px #ccc}
/* Adjust buttons */
  .vietnam button{width:100%;/* margin:5px 0;*/
        color:#fff;border:none;border-radius:8px;font-size:16px;font-family:vuonghiep}
        
  .menu {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.menu-item {
  flex: 1;
  color: white;
  text-decoration: none;
  padding: 12px 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

/* Màu nền cho Trang Chủ */
.menu-item.home {
  background-color: #0d6efd;  /* Xanh dương */
}

.menu-item.home:hover {
  background-color: #084298;  /* Xanh đậm khi hover */
}

/* Màu nền cho Danh Sách */
.menu-item.list {
  background-color: #198754;  /* Xanh lá */
}

.menu-item.list:hover {
  background-color: #146c43;  /* Xanh lá đậm khi hover */
}

    .menu a{text-decoration: none;color: #fff;} 
    
    
    .list1 {
        font-weight: bold;
    padding: 8px;
    /* border-radius: 5px; */
    border-bottom: 1px solid #727f77;
    box-shadow: 0 0 20px #d5d4d4 inset;
}
    .list1 a{text-decoration: none;color: #1e3d6f;} 
    
input[name="product_name[]"] {
    text-align: left !important;
    padding-left: 3px; /* Tuỳ chọn: thêm khoảng trắng bên trái cho đẹp */
}  

/* Cải tiến giao diện cho các input và label */
input,textarea{font-size:14px;color:#333}
tfoot tr.total{font-weight:bold;background-color:#f7f7f7;color:#333}
tfoot tr.total td{text-align:center;/* Canh phải để số tiền nhìn dễ dàng hơn */}

tfoot tr.total td:nth-child(5){display:none;/* Ẩn cột "Xóa" trong footer */}

.footer {
    background-color: #333;
    padding: 10px 0px 10px 0px;
    border-radius: 5px;
    text-align: center;
    margin-top: 5px;
    border-top: 3px solid #e50c0c;
    color: #fff;
    font-weight: bold;
}

.fas.fa-heart {
  color: red; /* Đổi màu trái tim thành đỏ */
  font-size: 20px; /* Cỡ chữ cho trái tim */
}

/* Tạo hiệu ứng nhấp nháy */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.blinking {
  animation: blink 2s infinite; /* 1s là thời gian nhấp nháy, infinite nghĩa là lặp lại vô hạn */
}