/* (CSS cơ bản giữ nguyên) */
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; font-size: 14px; }
.main-container { display: flex; max-width: 1400px; margin: 0 auto; gap: 20px; }
.form-container { flex: 1; min-width: 500px; }
.list-container { flex: 1; min-width: 500px; }
.card-box { padding: 20px 30px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); height: 100%; box-sizing: border-box; }
h1 { text-align: center; color: #333; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 25px; }
.form-group { display: flex; flex-direction: column; }
.full-width { grid-column: 1 / -1; }
label { font-weight: bold; color: #555; margin-bottom: 6px; }
input[type="text"], input[type="tel"], input[type="number"], textarea, datalist {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 14px;
}
input:focus, textarea:focus { border-color: #007bff; outline: none; box-shadow: 0 0 5px rgba(0,123,255,0.2); }
textarea { resize: vertical; min-height: 40px; }
.button-container { grid-column: 1 / -1; text-align: center; margin-top: 20px; border-top: 2px solid #eee; padding-top: 25px; }
#btnLuu { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; }
#btnUploadBatch { background-color: #007bff; color: white; padding: 12px 25px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; margin-left:15px; }
#btnLuu:disabled { background-color: #aaa; }
#thongBao { text-align: center; font-size: 16px; font-weight: bold; margin-top: 15px; margin-bottom: 15px; display: none; padding: 10px; border-radius: 6px; }
#thongBao.success { color: #155724; background-color: #d4edda; }
#thongBao.error { color: #721c24; background-color: #f8d7da; }

/* CSS cho Danh sách (Cột 2) */
.list-container .card-box {
    display: flex; flex-direction: column; height: 100%;
}
#danhSachHomNayContainer {
    height: 100%; display: flex; flex-direction: column;
}
#tongDonHeader { 
    margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 15px; 
    display: flex; justify-content: space-between; align-items: center; 
}
#tongDonSummary { text-align: right; }
#tongSoDon { 
    font-size: 13px; color: #6c757d; background: none; 
    padding: 0; font-weight: normal;
    display: inline; margin-left: 5px;
}
#tongSoTien {
    font-size: 16px; font-weight: bold; color: #dc3545; display: inline; 
}

#danhSachHomNayContainer #loadingList { text-align: center; padding: 20px; font-size: 18px; color: #888; }

.buu-gui-list-wrapper { /* Thẻ UL ngoài cùng */
    list-style: none; padding: 0; margin: 0; 
    flex-grow: 1; 
    overflow-y: auto; 
}
.khu-vuc-group { /* Thẻ LI cho 1 Ấp */
     margin-bottom: 5px;
}

.khu-vuc-header {
    background-color: #f0f2f5; font-weight: bold; padding: 10px 5px;
    color: #333; font-size: 16px;
    display: flex; align-items: center; justify-content: space-between; 
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: move; 
}
.khu-vuc-title { display: flex; align-items: center; }
.khu-vuc-title i { margin-right: 8px; color: #007bff; }

.khu-vuc-summary { text-align: right; }
.khu-vuc-count {
    font-size: 13px; font-weight: normal; color: #6c757d; 
    display: inline; background: none; padding: 0;
    margin-left: 5px;
}
.khu-vuc-tien {
    font-size: 16px; font-weight: bold; color: #dc3545; display: inline; 
}

/* ===== BẮT ĐẦU SỬA LỖI (Thêm margin-top) ===== */
.buu-gui-list-inner { 
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0; /* (SỬA LỖI) Thêm 10px margin-top */
    border-left: none; 
    min-height: 10px; 
}

li.item-buu-gui.ui-sortable-handle {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px 0px 0px;
    border-bottom: 1px dotted #000000;
    padding-bottom: 5px;

}

/* CSS CHO CON TRỎ KÉO THẢ */
.ui-sortable-handle {
    cursor: grab; /* Bàn tay mở khi rê chuột vào */
}

/* Khi đang kéo (body có class 'is-dragging'), đổi con trỏ */
body.is-dragging,
body.is-dragging .ui-sortable-helper {
    cursor: grabbing !important; /* Bàn tay nắm khi kéo */
}

/* ===== KẾT THÚC SỬA LỖI ===== */

.buu-gui-list li.item-buu-gui {
    padding: 12px 5px; 
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
     border-bottom: 1px dotted #ccc;
     cursor: grab; 
     background-color: #fff; 
}
.buu-gui-list li.item-buu-gui:active {
    cursor: grabbing; 
    background-color: #fdfdfd;
}
.buu-gui-list-inner li.item-buu-gui:last-child { 
    border-bottom: none; 
}

.group-placeholder {
    height: 50px; background-color: #e0e0e0;
    border: 2px dashed #555; margin: 10px 0;
    visibility: visible !important;
}
.sortable-placeholder {
    height: 50px; background-color: #fffbef; border: 2px dashed #007bff;
    margin: 10px 0; visibility: visible !important;
}

/* ===== BẮT ĐẦU SỬA LỖI (Rớt dòng COD) ===== */
.buu-gui-list .info { 
    font-size: 14px; 
    flex-grow: 1; 
    padding-right: 10px; 
    min-width: 0; /* (SỬA LỖI) Cho phép co lại */
    flex-basis: 0; /* (SỬA LỖI) Cho phép co lại */
}
/* ===== KẾT THÚC SỬA LỖI ===== */

.info-header { 
    display: flex; align-items: center; margin-bottom: 6px; 
    flex-wrap: wrap; 
}
.info-header strong { color: #0056b3; font-size: 15px; }
.info-header .so-hieu {
    font-size: 11px; color: #888; background: #f0f0f0;
    padding: 2px 5px; border-radius: 4px; margin-left: 8px; font-weight: bold;
}

.copy-so-hieu { cursor: copy; }
.copy-so-hieu:hover { color: #0056b3; background-color: #e7f3ff; }
.copy-so-hieu i { margin-left: 4px; color: #007bff; font-size: 0.9em; }
.copy-so-hieu:hover i { color: #0056b3; }

.info-map-link {
    font-size: 13px; color: #007bff; margin-left: 8px; text-decoration: none;
}
.info-map-link:hover, .edit-btn:hover, .delete-btn:hover, .btn-restore:hover, .btn-confirm-return:hover, .permanent-delete-btn:hover {
    text-decoration: underline;
}

.edit-btn {
    font-size: 13px; color: #007bff; margin-left: 8px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}

.edit-btn:hover { color: #0056b3; }


.btn-restore {
    font-size: 13px; color: #007bff; margin-left: 8px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}

.btn-restore:hover { color: #0056b3; }


.btn-confirm-return {
    font-size: 13px; color: #007bff; margin-left: 8px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}

.btn-confirm-return:hover { color: #0056b3; }

.permanent-delete-btn {
    font-size: 13px; color: #dc3545; margin-left: 8px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}

.permanent-delete-btn:hover { color: #a71d2a; }

.delete-btn {
    font-size: 13px; color: #dc3545; margin-left: 8px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}
.delete-btn:hover { color: #a71d2a; }

.btn-view-image {
    font-size: 13px;
    color: #007bff;
    margin-left: 8px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.btn-view-image:hover {
    color: #0056b3; /* Đậm hơn khi hover */
}

.btn-view-confirmation-images {
    font-size: 13px;
    color: #007bff;
    margin-left: 8px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.btn-view-confirmation-images:hover {
    color: #0056b3; /* Đậm hơn khi hover */
}

.info-dia-chi { color: #333; display: block; font-size: 14px; margin-bottom: 6px;line-height: 20px; }
.info-ghi-chu {
    color: #555; display: block; font-size: 13px; font-style: italic;
    margin-top: 4px; padding: 4px 5px; 
    border-left: 3px solid #ffc107; background-color: #fffbef;
    
}
.info-ghi-chu i { margin-right: 4px; }

.tien-block { white-space: nowrap; text-align: right; padding-left: 10px; }
.tien-cod {
    font-weight: bold; color: #dc3545; font-size: 15px;
    display: block; margin-bottom: 5px; 
}
.tien-huy {
    font-weight: bold; color: #6c757d; font-size: 13px; display: block; 
}
.tien-cod i, .tien-huy i { margin-right: 4px; }

/* CSS Modal Sửa */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); z-index: 2000;
    display: none; justify-content: center; align-items: center;
}
.modal-content {
    background-color: white; border-radius: 8px;
    width: 90%; max-width: 900px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
}
.modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; }
.modal-header h3 { margin: 0; font-size: 20px; }
.modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.modal-actions {
    padding: 15px 20px; border-top: 1px solid #eee; text-align: right;
}
.btn-modal {
    padding: 10px 20px; border: none; border-radius: 6px;
    font-size: 16px; font-weight: bold; cursor: pointer; margin-left: 10px;
}
.btn-primary { background-color: #007bff; color: white; }
.btn-secondary { background-color: #6c757d; color: white; }

/* CSS Modal Xác nhận */
.modal-confirm .modal-content { max-width: 450px; }
.modal-confirm .modal-body { font-size: 16px; text-align: center; line-height: 1.5; }
.btn-danger { background-color: #dc3545; color: white; }

/* --- BẮT ĐẦU CODE MỚI (CSS) --- */
.auto-filled {
    background-color: #F0FFF0 !important; /* Màu xanh lá nhạt */
    transition: background-color 0.5s ease;
}
/* --- KẾT THÚC CODE MỚI (CSS) --- */

/* --- BẮT ĐẦU CODE MỚI (CSS Lỗi) --- */
/* Định dạng lỗi cho ô input khi có tiếng Việt */
.input-error {
    background-color: #FFF0F0 !important; /* Màu hồng nhạt */
    border-color: red !important; /* Viền đỏ */
    transition: background-color 0.3s ease;
}
/* --- KẾT THÚC CODE MỚI (CSS Lỗi) --- */

/* --- BẮT ĐẦU CODE MỚI --- */


/* Trạng thái vô hiệu hóa (không có ảnh) */
.btn-view-image.disabled {
    color: #ccc;
    cursor: default;
    opacity: 0.7;
}

/* Trạng thái vô hiệu hóa (không có ảnh) */
.btn-view-confirmation-images.disabled {
    color: #ccc;
    cursor: default;
    opacity: 0.7;
}
.btn-action.btn-view-image .fas {
    margin-right: 3px;
}


/* (MỚI) Yêu Cầu 2: CSS cho Trạng thái "Đã Giao" */
.item-buu-gui.da-giao {
    opacity: 0.65; /* Làm mờ đi */
    background-color: #f9f9f9;
}
/* Gạch ngang tên và địa chỉ */
.item-buu-gui.da-giao .ten-khach-hang,
.item-buu-gui.da-giao .dia-chi {
    text-decoration: line-through;
    color: #888;
}


/* (MỚI) Yêu Cầu 1: CSS cho Modal Slider (Desktop) */
.modal-slider-desktop .modal-container {
    width: 800px; /* Rộng hơn cho desktop */
    max-width: 90%;
    min-height: 500px;
}
.modal-slider-desktop .slider-container {
    position: relative;
    width: 100%;
    height: 500px; /* Chiều cao cố định */
    background-color: #333; /* <-- Cũ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    overflow: hidden;
}

.modal-slider-desktop .slider-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Hiển thị toàn ảnh (không cắt) */
    display: none; /* Ẩn ban đầu */
    animation: fadeIn 0.4s; /* Hiệu ứng mờ */
}
.modal-slider-desktop .slider-image.active {
    display: block;
}

/* --- BẮT ĐẦU CSS NÚT TỚI/LUI MỚI --- */

.modal-slider-desktop .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* (MỚI) Style Nút Tròn Mờ */
    background: rgba(255, 255, 255, 0.1); /* Nền trong suốt nhẹ */
    color: white;
    border: none;
    font-size: 2em; /* Icon to hơn */
    cursor: pointer;
    
    width: 50px; /* Kích thước nút */
    height: 50px;
    line-height: 50px; /* Căn giữa icon */
    text-align: center;
    border-radius: 50%; /* Tròn xoe */
    
    z-index: 20; /* Nằm trên ảnh */
    
    /* (MỚI) Hiệu ứng làm mờ nền (cho đẹp) */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    
    /* (MỚI) Hiệu ứng chuyển động */
    transition: background 0.3s ease, transform 0.3s ease;
}

.modal-slider-desktop .slider-nav:hover {
    background: rgba(255, 255, 255, 0.25); /* Sáng hơn khi hover */
    transform: translateY(-50%) scale(1.05); /* Phóng to nhẹ */
}

.modal-slider-desktop .slider-nav:active {
    background: rgba(255, 255, 255, 0.4); /* Rõ hơn khi nhấn */
    transform: translateY(-50%) scale(0.98); /* Nhấn chìm nhẹ */
}

/* Vị trí */
.modal-slider-desktop .slider-nav.prev { left: 15px; }
.modal-slider-desktop .slider-nav.next { right: 15px; }

/* --- KẾT THÚC CSS NÚT TỚI/LUI MỚI --- */

/* Bộ đếm (1 / 3) */
.modal-slider-desktop .slider-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1em;
    z-index: 10;
}
.modal-slider-desktop .slider-loading {
    color: white;
    text-align: center;
    padding-top: 230px;
    font-size: 1.2em;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    font-weight: 300;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.modal-close-btn:hover {
    color: #333;
}

/* --- BẮT ĐẦU CODE THAY THẾ (CSS Header Mới) --- */
#modalDesktopSlider .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* (SỬA) 1. Đổi nền sang xám rất nhạt (hoặc trắng sữa) */
    background-color: #f8f9fa; 
    
    /* (SỬA) 2. Bỏ viền cũ, thay bằng BÓNG ĐỔ (shadow) nhẹ */
    /* border-bottom: 1px solid #e0e0e0; (Bỏ dòng này) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* <-- Thêm dòng này */

    top: 0;
    z-index: 100;
}
/* --- KẾT THÚC CODE THAY THẾ --- */

/* --- KẾT THÚC CODE MỚI --- */
/* --- (MỚI) CSS CHO THANH LỌC --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 5px;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}
.filter-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Tự co dãn */
  min-width: 80px; /* Độ rộng tối thiểu */
}
.filter-group label {
  font-size: 13px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}
/* Dùng chung style với input của form */
.filter-group input[type="text"] {
    padding: 8px 10px;
    font-size: 14px;
    height: 37px;
    box-sizing: border-box;
    width: 140px;
}
.btn-filter {
  padding: 0 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  height: 37px; /* Bằng với chiều cao ô input */
  line-height: 37px;
}
.btn-filter:hover {
  background-color: #0056b3;
}
.btn-filter i {
  margin-right: 6px;
}
/* --- (HẾT) CSS CHO THANH LỌC --- */

/* (MỚI) CSS cho nút Sắp xếp */
#btnToggleSort {
  align-self: flex-end; 
  padding: 0 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  height: 37px; /* Bằng với chiều cao ô input */
  line-height: 37px;
}

#btnToggleSort i {
  margin-right: 5px;
}

/* (MỚI) CSS cho nút Sắp xếp */
#btnFilter {
  /* Đặt nút này bên phải nút Lọc */
  margin-left: 10px; 
  /* Tự động co giãn chiều cao */
  align-self: flex-end; 
  padding: 0 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  height: 37px; /* Bằng với chiều cao ô input */
  line-height: 37px;
}

#btnFilter i {
  margin-right: 5px;
}

/* (SỬA LẠI HOÀN TOÀN) Layout cho khối lọc (Fix lỗi căn lề) */
.filter-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
  gap: 15px 20px; /* row-gap: 15px, column-gap: 20px */
  margin-bottom: 20px;
  align-items: end; /* Căn các input/label xuống đáy cho đều */
}

.filter-controls > div {
  display: flex;
  flex-direction: column;
}

.filter-controls label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
  font-size: 0.9em; /* Thu nhỏ label cho gọn */
}

/* (SỬA) Hàng nút bấm sẽ kéo dài hết 3 cột */
.filter-controls .filter-buttons {
  grid-column: 1 / -1; /* Kéo dài từ cột 1 đến cột cuối cùng */
  
  /* (SỬA) Căn các nút về bên TRÁI (giống screenshot) */
  display: flex;
  flex-direction: row;
  justify-content: flex-start; 
  
  /* Thêm đường viền, lề trên */
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 5px; 
}

.filter-controls .filter-buttons .btn {
  margin-left: 0; /* Bỏ lề trái */
  margin-right: 10px; /* Chỉ dùng lề phải để tạo khoảng cách */
}

/* (MỚI) Style cho Select Box trong bộ lọc */
.filter-controls select.form-control {
  /* (Quan trọng) Đồng bộ chiều cao với input */
  height: 38px; 
  width: 100%;
  /* Đồng bộ các style khác */
  font-size: 1rem;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
}

/* (MỚI) CSS Cho input SĐT khi đang loading AJAX */
.form-nhap-lieu #so_dien_thoai.input-loading {
  /* (MỚI) Thêm hình spinner (dạng base64) vào bên phải */
  background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZvxvoVViiCKKxECOKSVcm0AQA5A+UkLhRAAyOtlMUNBUD4BQBADs=');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
 
  /* (Quan trọng) Thêm padding để chữ không đè lên spinner */
  /* (Giả sử padding cũ của bạn là 10px) */
  padding-right: 35px !important; 
}

/* --- CSS cho nút Kiểm tra COD --- */
#btnCheckCOD {
  background-color: #28a745;   /* Màu xanh lá (success) */
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin-left: 15px;           /* Cách nút bên cạnh */
  transition: background-color 0.2s ease;
}

#btnCheckCOD:hover {
  background-color: #218838;   /* Xanh đậm hơn khi hover */
}

#btnCheckCOD:disabled {
  background-color: #aaa;      /* Xám khi disabled */
  cursor: not-allowed;
}

/* --- CSS cho dấu tick COD --- */

.cod-check {
  margin-right: 6px;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  position: relative;
  bottom: 3px;
}
.cod-check.valid { color: #28a745; }   /* xanh lá */
.cod-check.invalid { color: #dc3545; } /* đỏ */

/* (Thêm vào cuối file css/style_nhaplieu.css) */

/* CSS cho logo nhà mạng */
.nha-mang-logo {
    height: 10px;         /* Kích thước phù hợp với font-size 14px */
    width: auto;
    vertical-align: middle; /* Căn giữa logo với văn bản */
    margin-right: 3px;
    position: relative;
    bottom: 1px;          /* Tinh chỉnh vị trí cho đẹp mắt */
}

/* (Thêm vào cuối file css/style_nhaplieu.css) */

/* (MỚI) Style cho nút Xuất Danh Bạ */
#btnExportContacts {
    margin-left: 10px; 
    align-self: flex-end; 
    padding: 0 10px;
    background-color: #28a745;  /* Màu xanh lá */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 37px; 
    line-height: 37px;
    transition: background-color 0.2s;
}
#btnExportContacts:hover {
    background-color: #218838; /* Xanh đậm hơn */
}
#btnExportContacts i {
    margin-right: 5px;
}

/* (Thêm vào cuối file css/style_nhaplieu.css) */

/* (MỚI) CSS CHO CHECKBOX HÀNG LOẠT */
.select-all-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    border-top: 1px solid #eee;
    margin-top: 5px;
    flex-direction: row !important;
    justify-content: space-between;
    width: 200px;
}
.select-all-container label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1.1em;
}
.select-all-container input[type="checkbox"] {
    width: auto;
    height: auto;
    margin-right: 10px;
    transform: scale(1.3);
}
#selectedCount {
    font-size: 0.9em;
    font-weight: bold;
    color: #007bff;
}

/* (MỚI) CSS CHO NÚT HẸN LẠI */
#btnBatchReschedule {
    margin-left: 5px; 
    align-self: flex-end; 
    padding: 0 10px;
    background-color: #ffc107; /* Màu vàng */
    color: #212529;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 37px; 
    line-height: 37px;
    transition: background-color 0.2s;
}
#btnBatchReschedule:hover {
    background-color: #e0a800;
}
#btnBatchReschedule:disabled {
    background-color: #aaa;
    color: #666;
}
#btnBatchReschedule i {
    margin-right: 5px;
}


/* (MỚI) CSS CHO CHECKBOX TRÊN TỪNG ITEM */

/* Tìm đến <li> gốc và thêm align-items */
li.item-buu-gui.ui-sortable-handle {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px 0px 0px;
    border-bottom: 1px dotted #000000;
    padding: 5px 10px; /* (SỬA) Thêm padding 2 bên */
    align-items: center; /* (QUAN TRỌNG) Căn giữa checkbox theo chiều dọc */
    border-left: 4px solid #ffffff;
}

.item-checkbox {
    width: auto;
    height: auto;
    min-width: 18px;
    min-height: 18px; 
    margin-right: 10px; /* Giảm margin một chút */
    cursor: pointer;
    flex-shrink: 0; /* Ngăn checkbox bị co lại khi màn hình hẹp */
}
/* (MỚI) Thêm nền khi item được chọn */
li.item-buu-gui.selected {
    background-color: #e7f3ff; /* Nền xanh nhạt */
    border-left: 4px solid #007bff;
}

/* Sửa lại .info để nó co giãn đúng khi có checkbox */
.buu-gui-list .info {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    padding-left: 0; /* (SỬA) Bỏ padding-left cũ */
}

.item-buu-gui .info {
    width: 75%;
}

#modalBatchReschedule label {
    margin-bottom: 10px;
    margin-top: 10px;
}

/* (Thêm vào cuối file css/style_giaohang.css) */

/* Màn hình khóa Fullscreen */
.lock-screen-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #ffffff; /* Nền trắng sạch */
    z-index: 99999; /* Nằm trên tất cả */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.lock-screen-content {
    text-align: center;
    width: 100%;
    max-width: 320px;
    padding: 20px;
}

.lock-icon {
    font-size: 50px;
    color: #007bff;
    margin-bottom: 20px;
}

.lock-screen-content h2 {
    margin: 0 0 10px 0;
    color: #333;
    font-weight: 600;
}

.lock-screen-content p {
    color: #666;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* Ô nhập PIN */
.pin-display input {
    width: 300px;
    height: 50px;
    font-size: 30px;
    text-align: center;
    letter-spacing: 10px;
    border: none;
    border-bottom: 2px solid #ddd;
    background: transparent;
    outline: none;
    margin-bottom: 30px;
    color: #333;
    transition: border-color 0.3s;
}
.pin-display input:focus {
    border-bottom-color: #007bff;
}

/* Nút Mở Khóa */
.btn-unlock {
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 30px; /* Bo tròn như Google */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
    transition: transform 0.1s;
}
.btn-unlock:active {
    transform: scale(0.98);
}

.lock-footer {
    margin-top: 20px;
}

/* --- (DESIGN LẠI) HEADER TRANG CHÍNH: PHONG CÁCH SÁNG (LIGHT THEME) --- */

.main-header {
    /* (THAY ĐỔI) Nền trắng sáng sủa */
    background-color: #ffffff;
    
    /* Viền dưới mỏng để tách biệt nội dung */
    border-bottom: 1px solid #eaecf0;
    
    color: #333; /* Màu chữ mặc định tối */
    padding: 0 24px; /* Tăng padding 2 bên chút cho thoáng */
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Bóng mờ nhẹ nhàng hơn */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo & Info bên trái */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa Logo và Chữ */
}

.header-logo {
    height: 42px;
    width: auto;
    /* Không cần nền trắng/viền nữa vì nền header đã trắng */
    padding: 0;
    border: none;
    object-fit: contain;
}

.header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.header-title {
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    
    /* (QUAN TRỌNG) Dùng màu xanh thương hiệu làm điểm nhấn */
    color: #004b8f; 
}

.header-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    
    /* Màu xám trung tính */
    color: #888; 
}

/* Phần bên phải */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-right: 10px;
    color: #444; /* Màu chữ user tối */
}
.user-info i { 
    font-size: 1.6rem; 
    color: #ccc; /* Icon user màu nhạt */
}

.header-divider {
    width: 1px; 
    height: 24px; 
    background-color: #e0e0e0; /* Vạch ngăn cách mờ */
    margin: 0 5px;
}

/* Nút bấm trên Header (Style Mới) */
.btn-header {
    width: 42px; 
    height: 42px;
    border-radius: 10px; /* Bo góc mềm mại hơn */
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    
    /* (THAY ĐỔI) Nền xám nhạt, icon xám đậm */
    background-color: #f3f4f6;
    color: #555;
}

.btn-header:hover {
    background-color: #e9ecef;
    color: #007bff; /* Hover chuyển xanh */
    transform: translateY(-2px);
}

/* Riêng nút Khóa (Danger) */
.btn-header-danger {
    /* Nền đỏ rất nhạt */
    background-color: #fff1f2;
    color: #e11d48;
}

.btn-header-danger:hover {
    background-color: #ffe4e6;
    color: #be123c;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.15);
}

/* Container */
body { margin: 0; background-color: #f4f6f9; }
/* (SỬA LẠI) Căn chỉnh khung chính (Container) cho đẹp hơn */
.main-container {
    /* 1. Tạo khoảng cách thoáng đãng với Header */
    margin-top: 20px;     /* Tăng từ 20px lên 40px */
    margin-bottom: 50px;  /* Khoảng cách dưới cùng */

    /* 2. Căn giữa nội dung trên màn hình máy tính */
    max-width: 1200px;    /* Giới hạn chiều rộng tối đa (chuẩn HD) */
    margin-left: auto;    /* Tự động căn trái */
    margin-right: auto;   /* Tự động căn phải */

    /* 3. Đệm 2 bên để không bị dính mép trên điện thoại */
    padding-left: 20px;
    padding-right: 20px;

    /* (Tùy chọn) Hiệu ứng xuất hiện nhẹ nhàng */
    animation: fadeIn 0.5s ease-out;
}

/* Hiệu ứng mờ dần khi tải trang */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* (MỚI) Tinh chỉnh lại hàng chứa 2 Card thống kê (nếu chưa có) */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Khoảng cách giữa 2 card */
    margin-bottom: 30px; /* Khoảng cách từ Card xuống bộ lọc */
}

/* --- (MỚI) CSS BẢO MẬT CHO TRANG NHẬP LIỆU --- */

/* 1. Màn hình khóa (Copy từ giaohang) */
.lock-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #ffffff; z-index: 99999;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.lock-screen-content { text-align: center; width: 100%; max-width: 350px; padding: 20px; }
.lock-icon { font-size: 60px; color: #007bff; margin-bottom: 20px; }
.lock-screen-content h2 { margin: 0 0 10px 0; color: #333; }
.lock-screen-content p { color: #666; margin-bottom: 30px; }

/* Ô nhập PIN (Style đẹp) */
.pin-display input {
    width: 300px; height: 60px;
    font-size: 30px; text-align: center; letter-spacing: 15px;
    border: none; border-bottom: 3px solid #ddd;
    background: transparent; outline: none; margin-bottom: 30px;
    color: #333; transition: border-color 0.3s;
}
.pin-display input:focus { border-bottom-color: #007bff; }

/* Nút Mở Khóa */
.btn-unlock {
    width: 100%; padding: 15px;
    background-color: #007bff; color: white;
    border: none; border-radius: 30px;
    font-size: 18px; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}

/* 2. Modal Đổi PIN (Style đẹp - Copy từ giaohang) */
#modalChangePin .modal-content { border-radius: 16px; overflow: hidden; border: none; }

#modalChangePin .modal-body { background-color: #f8f9fa; padding: 25px 20px; }

#modalChangePin input.form-control {
    width: 100%; height: 50px;
    border: 2px solid #e9ecef; border-radius: 10px;
    font-size: 24px; font-weight: bold; text-align: center; letter-spacing: 8px;
    color: #333;
}
#modalChangePin input.form-control:focus {
    border-color: #007bff; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15); outline: none;
}
#modalChangePin .modal-actions { padding: 20px; background-color: white; display: flex; gap: 15px; }
#modalChangePin .btn-modal { flex: 1; padding: 12px; border-radius: 8px; font-size: 1rem; }


/* --- (SỬA LỖI) HEADER THẲNG HÀNG & NÚT TRÒN --- */


/* 3. Nút Close: Tròn & Cố định vị trí */
#modalChangePin .btn-close-modal {
    /* Kích thước cố định */
    width: 40px;
    height: 40px;
    
    /* (QUAN TRỌNG) Ngăn không cho nút bị ép nhỏ lại hoặc đẩy xuống */
    flex-shrink: 0; 
    
    /* Reset padding để hình tròn chuẩn */
    padding: 0;
    margin: 0;
    
    /* Tạo hình tròn */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    
    /* Căn giữa chữ X */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Font chữ */
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    
    cursor: pointer;
    transition: all 0.2s ease;
}

#modalChangePin .btn-close-modal:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

/* Hiệu ứng khi bấm giữ */
#modalChangePin .btn-close-modal:active {
    transform: scale(0.9);
}

#modalChangePin label {
    margin-top: 10px;
}

/* --- (DESIGN LẠI) HEADER MODAL: PHONG CÁCH HIỆN ĐẠI --- */

/* 1. Khung Header: Nền trắng, sạch sẽ */
#modalChangePin .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* Cấm xuống dòng */
    
    padding: 15px 24px; /* Tăng padding ngang chút cho thoáng */
    
    /* (THAY ĐỔI) Nền trắng + Viền mỏng bên dưới */
    background-color: #ffffff; 
    border-bottom: 1px solid #f0f0f0; 
    
    /* Bo góc trên cùng để khớp với modal */
    border-radius: 16px 16px 0 0; 
}

/* 2. Tiêu đề: Màu tối hoặc Xanh thương hiệu */
#modalChangePin .modal-header h3 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
    
    font-size: 1.15rem; 
    font-weight: 700;
    text-transform: uppercase; /* Chữ hoa cho sang trọng */
    letter-spacing: 0.5px;
    
    /* Màu chữ: Dùng màu xám đậm (hoặc #004b8f nếu muốn xanh) */
    color: #333; 
    
    /* Mẹo căn giữa: Đẩy lùi vào 32px để bù cho nút X bên phải */
    padding-left: 32px; 
    white-space: nowrap;
}

/* 3. Nút Close: Phong cách phẳng (Flat), tinh tế */
#modalChangePin .btn-close-modal {
    width: 32px;  /* Nhỏ gọn, thanh thoát */
    height: 32px;
    flex-shrink: 0; /* Không bị méo */
    
    padding: 0; margin: 0;
    border-radius: 50%;
    border: none;
    
    /* Nền xám rất nhạt (như nút header chính) */
    background-color: #f3f4f6;
    color: #666;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 18px; /* Icon vừa phải */
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hiệu ứng Hover: Nổi bật & Xoay nhẹ */
#modalChangePin .btn-close-modal:hover {
    background-color: #ffebee; /* Chuyển nền đỏ nhạt */
    color: #d32f2f;
}

/* CSS cho ô nhập Captcha */
#captchaInput {
    width: 300px; /* Nhỏ hơn ô PIN */
    height: 45px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
    
    /* Căn giữa ô nhập */
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    text-transform: uppercase; /* Tự động viết hoa khi nhập */
}

#captchaInput:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* Badge cho Báo Phát (AR) */
.badge-ar, .tag-ar {
    background-color: #007bff;
    color: white;
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 800;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
}

/* Badge cho Sàn TMĐT (Trang Nhập Liệu) */
.badge-san {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    margin-left: 5px;
    text-transform: uppercase;
}
.badge-san.shopee { background-color: #ee4d2d; } /* Cam Shopee */
.badge-san.tiktok { background-color: #000000; } /* Đen TikTok */
.badge-san.lazada { background-color: #0f146d; } /* Xanh Lazada */

/* Tinh chỉnh icon trên trang Giao hàng */
.buu-gui-header h3 i {
    font-size: 1.1em;
    vertical-align: middle;
}

/* (MỚI) Class cảnh báo đỏ cho ô Select trạng thái */
#filter_trang_thai.has-cod-error {
    border: 2px solid #dc3545 !important; /* Viền đỏ đậm */
    background-color: #fff5f5; /* Nền đỏ nhạt */
    color: #dc3545; /* Chữ đỏ */
    font-weight: bold;
    animation: pulse-red 2s infinite; /* Hiệu ứng nhấp nháy nhẹ */
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    70% { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* (MỚI) Style cho bưu gửi CHƯA SẮP XẾP */
.item-buu-gui.unsorted {
    background-color: #fff8e1 !important; /* Nền vàng nhạt */
    border-left: 4px solid #ff9800 !important; /* Viền trái màu cam */
}

/* Tinh chỉnh để khi hover hoặc chọn vẫn đẹp */
.item-buu-gui.unsorted:hover {
    background-color: #ffecb3 !important;
}
.item-buu-gui.unsorted.selected {
    background-color: #ffe0b2 !important; /* Màu đậm hơn khi được chọn */
    border-left: 4px solid #e65100 !important;
}

/* Style riêng cho nút Xem tất cả */
/* Hiệu ứng khi di chuột vào */
#btnXemTatCa:hover {
    background-color: #138496; /* Màu đậm hơn khi hover */
    border-color: #117a8b;
    cursor: pointer;
    transform: translateY(-1px); /* Nhích lên nhẹ 1 chút */
}

/* Hiệu ứng khi bấm vào */
#btnXemTatCa:active {
    background-color: #117a8b;
    transform: translateY(0);
}

#btnXemTatCa {
    margin-left: 10px;
    align-self: flex-end;
    padding: 0 10px;
    background-color: #17a2b8;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 37px;
    line-height: 37px;
}

.filter-buttons {
    display: flex;              /* Kích hoạt chế độ dàn ngang */
    align-items: center;        /* Căn giữa theo chiều dọc */
    justify-content: flex-start;/* Căn lề trái (hoặc dùng space-between nếu muốn giãn đều) */
    gap: 10px;                  /* Khoảng cách đều giữa tất cả các nút */
    flex-wrap: wrap;            /* Tự động xuống dòng nếu màn hình quá nhỏ (Mobile) để không vỡ giao diện */
    margin-bottom: 15px;        /* Khoảng cách với phần bên dưới */
}

/* Đảm bảo nội dung trong nút không bị ngắt dòng lung tung */
.filter-buttons .btn {
    white-space: nowrap;
    display: inline-flex;       /* Để icon và chữ căn giữa đẹp hơn */
    align-items: center;
    gap: 5px;                   /* Khoảng cách giữa icon và chữ bên trong nút */
}

#btnFilter:hover, #btnToggleSort:hover, #btnExportContacts:hover, #btnBatchReschedule:not(:disabled):hover {
  transform: translateY(-1px); /* Nhích lên nhẹ 1 chút */
}

#btnFilter:active, #btnToggleSort:active, #btnExportContacts:active, #btnBatchReschedule:not(:disabled):active {
  transform: translateY(0);
}

.filter-buttons button {
  min-width: 120px;
}

/* Style cho ô input khi bị disable */
input[type="text"]:disabled, 
input[type="date"]:disabled,
.form-control:disabled {
    background-color: #f0f2f5; /* Màu nền xám nhạt hiện đại */
    color: #adb5bd; /* Màu chữ nhạt đi */
    cursor: not-allowed; /* Con trỏ chuột hình cấm */
    border-color: #e9ecef; /* Viền nhạt đi */
    box-shadow: none; /* Bỏ đổ bóng nếu có */
    opacity: 1; /* Fix lỗi mờ trên iOS */
}

/* Hiệu ứng tương tác cho nút copy số điện thoại */
.btn-copy-phone {
    cursor: pointer; /* Biến chuột thành bàn tay */
    transition: transform 0.2s ease, filter 0.2s;
    display: inline-block;
}

.btn-copy-phone:hover {
    transform: translateY(-1px); /* Phóng to nhẹ khi rê chuột */
    filter: brightness(1.1); /* Sáng lên một chút */
}

.btn-copy-phone:active {
    transform: translateY(0px); /* Nhún xuống khi bấm */
}

/* 1. Biến con trỏ chuột thành hình kính lúp khi rê vào ảnh trong modal */
#modalDesktopSlider img {
    cursor: zoom-in; 
    transition: opacity 0.2s;
}

#modalDesktopSlider img:hover {
    opacity: 0.9;
}

/* 2. Giao diện lớp phủ khi xem Fullscreen */
.custom-fullscreen-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95); /* Nền đen mờ 95% */
    z-index: 99999; /* Số cực lớn để đè lên cả Modal Bootstrap */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out; /* Con trỏ hình thu nhỏ */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* CẬP NHẬT CSS CHO ẢNH TRONG LỚP PHỦ */
.custom-fullscreen-viewer img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    border-radius: 4px;
    
    /* --- THAY ĐỔI MỚI --- */
    /* 1. BẮT BUỘC: Bỏ transition để kéo thả mượt mà tức thì */
    transition: none; 
    
    /* 2. Đổi con trỏ thành hình bàn tay mở (thể hiện có thể nắm được) */
    cursor: grab; 

    /* Đảm bảo tâm biến đổi nằm giữa để tính toán dễ hơn */
    transform-origin: center center;
    /* Sẽ được JS cập nhật: transform: translate(X, Y) scale(Z) */
}

/* Class này sẽ được JS thêm vào khi đang giữ chuột kéo */
.custom-fullscreen-viewer img.is-dragging {
    cursor: grabbing; /* Hình bàn tay nắm lại */
}

/* 1. Hiệu ứng nền vàng cho dòng đang theo dõi */
/* Lưu ý: 'li.item-buu-gui' là class bao quanh mỗi dòng bưu gửi của bạn */
/* Màu nền HỒNG NHẠT cho dòng đang theo dõi */
li.item-buu-gui.tracking-active {
    background-color: #ffebee !important; /* Màu hồng nhạt */
    border-left: 5px solid #f44336 !important; /* Viền trái đỏ */
    transition: background-color 0.3s ease;
}

/* 2. Style cho nút ngôi sao */
.btn-toggle-tracking {
    cursor: pointer;
    font-size: 18px; 
    margin: 0 8px;    /* Cách lề một chút cho thoáng */
    color: #ccc;      /* Màu xám nhạt mặc định (chưa active) */
    transition: all 0.2s;
}

/* 3. Khi Active: Ngôi sao màu vàng cam */
.btn-toggle-tracking.active {
    color: #fbc02d; 
    text-shadow: 0 0 5px rgba(251, 192, 45, 0.5); /* Hiệu ứng phát sáng nhẹ */
}



/* Hiệu ứng khi di chuột vào ngôi sao */
.btn-toggle-tracking:hover {
    transform: scale(1.2); 
}

/* 1. Thiết lập vị trí tương đối cho thẻ cha (dòng bưu gửi) */
li.item-buu-gui {
    position: relative; /* Bắt buộc phải có để giữ ngôi sao ở trong khung này */
    /* ... các thuộc tính cũ giữ nguyên ... */
}

/* 2. Đưa ngôi sao lên góc TRÊN - PHẢI */
.btn-toggle-tracking {
    position: absolute; /* Cho phép bay tự do trong khung cha */
    top: 5px;           /* Cách mép trên 5px */
    right: 5px;         /* Cách mép phải 5px */
    
    font-size: 20px;    /* Kích thước to hơn chút cho dễ bấm */
    cursor: pointer;
    z-index: 100;       /* Đảm bảo luôn nằm trên cùng, bấm được */
    
    padding: 5px;       /* Tăng vùng bấm cho dễ click */
    color: #e0e0e0;     /* Màu xám nhạt khi chưa active (để không rối mắt với giá tiền) */
    transition: all 0.2s;
}

/* Khi active thì màu vàng và to hơn xíu */
.btn-toggle-tracking.active {
    color: #fbc02d;
    transform: scale(1.1);
}

.btn-toggle-tracking:hover {
    color: #fbc02d;     /* Di chuột vào thì sáng lên */
}

/* Spinner Loading đơn giản */
.loader {
    display: none; /* Mặc định ẩn */
    border: 3px solid #f3f3f3; /* Màu nền xám nhạt */
    border-top: 3px solid #3498db; /* Màu xoay xanh dương */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-left: 10px;
    display: inline-block;
}

/* 1. Tạo cái vỏ bao bọc để định vị tương đối */
.input-wrapper {
    position: relative; /* Quan trọng để con (spinner) định vị theo cha */
    width: 100%;
    max-width: 400px; /* Giới hạn chiều rộng cho đẹp */
}

/* 2. Style cho ô Input nhìn hiện đại hơn */
.modern-input {
    width: 100%;
    padding: 12px 40px 12px 15px; /* Padding phải 40px để chừa chỗ cho spinner xoay */
    border: 1px solid #ccc;
    border-radius: 8px; /* Bo tròn nhẹ */
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box; /* Đảm bảo padding không làm vỡ layout */
}

/* Hiệu ứng khi bấm vào ô input */
.modern-input:focus {
    border-color: #2196F3; /* Màu xanh dương hiện đại */
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2); /* Tạo hào quang nhẹ */
}

/* Hiệu ứng khi đang loading (input xám đi chút) */
.modern-input.input-loading {
    background-color: #f9f9f9;
    color: #999;
}

/* 3. Spinner nhỏ gọn, tinh tế nằm góc phải */
.spinner-mini {
    display: none; /* Mặc định ẩn */
    position: absolute;
    right: 12px; /* Cách mép phải 12px */
    top: 50%;   /* Nằm giữa chiều cao */
    margin-top: -10px; /* Kéo lên 1/2 chiều cao để chính giữa hẳn (vì top 50%) */
    
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0; /* Viền mờ */
    border-top: 2px solid #2196F3; /* Viền màu xoay */
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    z-index: 10;
}

/* Animation xoay */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Đồng bộ kiểu đăng nhập / đổi mật khẩu với trang Giao hàng (2026-10-22). */
#appLockScreen .lock-screen-content {
    max-width: 410px !important;
    box-sizing: border-box;
}
#modalChangePin input.form-control {
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    font-size: 16px;
    font-weight: normal;
    height: 48px;
    padding: 10px 14px;
    box-sizing: border-box;
}
#modalChangePin .modal-body .form-group { margin-bottom: 15px; }
#modalChangePin .modal-body .form-group label {
    display: block;
    text-align: left;
    letter-spacing: normal;
    margin-bottom: 8px;
}
#modalChangePin .modal-content { width: min(94vw, 390px); }