/* (Giữ nguyên CSS Gốc) */
:root {
    --primary-color: #007bff; 
    --success-color: #28a745; 
    --danger-color: #dc3545;  
    --warning-color: #ffc107; 
    --cod-color: #d9534f;     
    --light-gray: #f0f2f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #555;
    --text-color: #222;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-gray);
    /* (Giữ nguyên) */
    padding-top: 160px; 
}

/* (Giữ nguyên) Header Bar */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-color);
    border-bottom: 1px solid var(--medium-gray);
}
.header-controls { display: flex; align-items: center; gap: 10px; }
.btn-reload {
    background: none; border: none; color: var(--dark-gray);
    font-size: 1.3rem; padding: 5px; cursor: pointer;
}

/* (Giữ nguyên) Nút Filter (Thêm màu trạng thái) */
#btnFilter {
    background: none; border: none;
    color: var(--primary-color); /* Mặc định (Chưa phát) */
    font-size: 1.3rem; padding: 5px; cursor: pointer;
    transition: color 0.2s;
}
#btnFilter.filter-da-phat {
    color: var(--success-color); /* (MỚI) Đã phát */
}
#btnFilter.filter-tat-ca {
    color: var(--dark-gray); /* (MỚI) Tất cả */
}

/* (Giữ nguyên) Hiển thị trạng thái filter (Bỏ chữ "Lọc:") */
#filter-display {
    display: none; /* Ẩn mặc định */
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--dark-gray);
    background-color: var(--light-gray);
    padding: 5px 10px;
    border-radius: 15px;
}
#filter-text {
    font-weight: 600;
}
#btnClearFilter {
    cursor: pointer;
    color: #888;
    font-size: 1.1rem;
}
#btnClearFilter:hover {
    color: var(--danger-color);
}


.loading-spinner { /* (Giữ nguyên) */
    display: none; font-size: 1.3rem; color: var(--primary-color);
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

#status-indicator { /* (Giữ nguyên) */
    font-size: 0.9rem; padding: 5px 10px; border-radius: 15px;
    font-weight: 600; display: flex; align-items: center; gap: 6px;
}
#status-indicator.online { background-color: #e0f8e9; color: var(--success-color); }
#status-indicator.offline { background-color: #fde0e0; color: var(--danger-color); }
#status-indicator.syncing { background-color: #fff8e0; color: #b88a00; }
#status-indicator.syncing .icon { animation: spin 1s linear infinite; }

/* (Giữ nguyên) Bộ lọc ngày */

.date-selector label {
    margin: 0;
    font-size: 1rem;
    color: var(--dark-gray);
    font-weight: 600;
}
.date-selector input[type="text"] {
    font-size: 22px;
    font-weight: 600;
    color: #007bff;
    width: 60px;
    text-align: center;
    padding: 0px;
    border: none;
}

/* (Giữ nguyên) Thanh Tổng Cộng */
#grand-total-summary {
    padding: 10px 15px;
    background-color: #fffbe6; /* Vàng nhạt */
    border-bottom: 1px solid #e6dbb9;
}
.total-line {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}
.total-line strong {
    font-weight: 700;
}
.total-line.chua-phat {
    color: var(--cod-color);
}
.total-line.da-xu-ly { /* (Giữ nguyên class, chỉ đổi text) */
    color: var(--dark-gray);
}

/* (Giữ nguyên) Danh sách bưu gửi - "Card" */
#danhSachBuuGui {
    padding: 10px;
    list-style: none;
    margin: 0;
}
#sortable {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* (Giữ nguyên) Tiêu đề nhóm "Ấp" */
.ap-header {
    background-color: #e9ecef; 
    padding: 12px 15px; 
    margin: 15px 0 10px 0;
    border-radius: 8px;
    position: sticky; 
    top: var(--sticky-header-top, 173px);
    z-index: 50;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ap-header h3 {
    margin: 0; 
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 700;
}
.ap-summary {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap; 
}
.ap-summary .summary-cod { 
    color: var(--cod-color);
    font-weight: 700;
}
.ap-summary .summary-count { 
    color: var(--dark-gray);
    margin-left: 5px;
}

.buu-gui-item { /* (Giữ nguyên) */
    background-color: white; margin-bottom: 12px;
    border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    display: flex; align-items: stretch; position: relative;
    opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.buu-gui-item.ui-sortable-placeholder {
    background: #eef8ff; border: 2px dashed var(--primary-color);
    visibility: visible !important; height: 100px !important;
}
.buu-gui-item.ui-sortable-helper {
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); transform: scale(1.02);
}
.buu-gui-item.pending-sync {
    opacity: 0.7; background-color: #fffbe6;
}

/* (Giữ nguyên) Style cho bưu gửi "Đã phát" */
.buu-gui-item.da-phat {
    background-color: #f4f4f4; /* Nền xám mờ */
    opacity: 0.7;
}
.buu-gui-item.da-phat .buu-gui-header h3 {
    text-decoration: line-through; /* Gạch ngang tên */
    color: var(--dark-gray);
}
.buu-gui-item.da-phat .cod-amount {
    color: var(--dark-gray);
    text-decoration: line-through;
}

.drag-handle { /* (Giữ nguyên) */
    font-size: 1.5rem; color: #aaa; cursor: grab; padding: 10px;
    display: flex; align-items: center; justify-content: center;
    width: 45px; border-right: 1px solid var(--light-gray);
}
.drag-handle:active { cursor: grabbing; }

.buu-gui-content { /* (Giữ nguyên) */
    flex-grow: 1; overflow: hidden; padding: 15px;
}
.buu-gui-header { /* (Giữ nguyên) */
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 12px;
}
.buu-gui-header h3 { /* (Giữ nguyên) */
    margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--text-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.buu-gui-header .cod-amount { /* (Giữ nguyên) */
    font-size: 1.2rem; font-weight: 700;
    color: var(--cod-color); white-space: nowrap;
}

/* (Giữ nguyên) */
.detail-line { 
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.95rem; color: var(--dark-gray); margin-bottom: 8px;
    justify-content: space-between; 
}
.detail-line i { /* (Giữ nguyên) */
    width: 16px; text-align: center; color: #888; margin-top: 3px;
}

/* (Giữ nguyên) */
.detail-line span { 
    line-height: 1.4;
    white-space: normal; word-break: break-word; 
}

/* (Giữ nguyên) */
.detail-line.address span,
.detail-line.note span {
    flex: 1;
}

.detail-line.note { /* (Giữ nguyên) */
    color: var(--danger-color); font-weight: 600;
    justify-content: flex-start; 
}
.detail-line.note span { font-style: italic; }


/* (Giữ nguyên) */
.phone-group {
    display: flex;
    align-items: center; 
    gap: 10px; 
}

/* (Giữ nguyên) */
.weight-display {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-gray);
    align-self: center; 
    white-space: nowrap;
    height: 35px;
}

/* (Giữ nguyên) */
.detail-line .card-action-link {
    color: var(--primary-color); 
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem; 
}
.detail-line .card-action-link:hover {
    color: #0056b3; 
}
.card-map-link { /* (Giữ nguyên) */
    color: var(--primary-color);
    font-size: 1.3rem;
    padding: 5px;
    margin-left: 10px;
    background-color: #e0f0ff;
    border-radius: 8px;
    line-height: 1;
    transition: all 0.2s;
}
.card-map-link:hover { /* (Giữ nguyên) */
    background-color: var(--primary-color);
    color: white;
}
/* (Giữ nguyên) */
.card-map-link i {
    color: var(--primary-color);
    transition: color 0.2s;
}
.card-map-link:hover i {
    color: white;
}


#empty-message { /* (Giữ nguyên) */
    display: none; text-align: center; padding: 50px 20px;
    color: #888; font-size: 1.1rem;
}
#empty-message i { /* (Giữ nguyên) */
    font-size: 3.5rem; display: block;
    margin-bottom: 15px; color: #ccc;
}

/* (Giữ nguyên) Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content {
    background-color: white; border-radius: 16px;
    width: calc(100% - 20px); max-width: 500px;
    max-height: 90vh; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.25s ease;
    position: relative; /* (MỚI) Thêm để chứa overlay */
    overflow: hidden; /* (MỚI) Thêm để chứa overlay */
}
.modal-overlay.visible .modal-content { transform: scale(1); }

/* (MỚI) Loading Overlay cho Modal (cho Swipe) */
.modal-content .loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: none; /* Ẩn mặc định */
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: var(--primary-color);
}

/* (Giữ nguyên) Modal Header (Thêm nút 'X') */
.modal-header {
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid var(--medium-gray);
    text-align: center;
    position: relative; 
}
.modal-header h2 { 
    margin: 0; font-size: 1.3rem;
    font-weight: 600; color: var(--text-color);
}
/* (Giữ nguyên) Nút 'X' (Close) trên Header */
.btn-close-modal {
    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;
}
.btn-close-modal:hover {
    color: #333;
}

.modal-body { /* (Giữ nguyên) */
    padding: 20px; flex-grow: 1; overflow-y: auto;
}

/* (Giữ nguyên) CSS cho Modal Filter */
#modalFilter .modal-body {
    padding-bottom: 10px;
}
.filter-option {
    display: block;
    font-size: 1.1rem;
    padding: 15px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}
.filter-option input {
    margin-right: 15px;
    transform: scale(1.3);
}

/* (Giữ nguyên) CSS Modal Chi Tiết */
.modal-body .detail-row {
    display: grid; grid-template-columns: 35px 1fr; gap: 10px;
    font-size: 1rem; margin-bottom: 12px; padding: 12px;
    background: var(--light-gray); border-radius: 8px;
}
.modal-body .detail-row i {
    font-size: 1.3rem; color: var(--primary-color); text-align: center;
    margin-top: 4px; 
}
.modal-body .detail-row strong {
    display: block; font-weight: 600; color: #333; line-height: 1.4;
}
.modal-body .detail-row span {
    font-weight: 400; color: var(--dark-gray); word-break: break-word;
}
.modal-body .detail-row a {
    color: var(--primary-color); text-decoration: none; font-weight: 600;
    font-size: 0.9rem; padding: 5px 10px;
    background: #e0f0ff; border-radius: 5px;
}

/* (Giữ nguyên) Link SĐT trong Modal */
.modal-phone-link {
    font-size: 1.3rem !important; 
    font-weight: 700 !important; 
    color: var(--primary-color) !important; 
    text-decoration: none !important;
    background: none !important; 
    padding: 0 !important;
}
.modal-phone-link:hover {
    color: #0056b3 !important;
}

#historyForm textarea { /* (Giữ nguyên) */
    width: 100%; height: 70px; padding: 10px;
    border: 1px solid var(--medium-gray); border-radius: 8px;
    font-size: 1rem; margin-bottom: 10px;
    font-family: Arial, sans-serif; background: var(--light-gray);
}
#historyForm { /* (Giữ nguyên) */
    margin-top: 20px; border-top: 1px dashed var(--medium-gray); padding-top: 15px;
}

/* (Giữ nguyên) Nút Gợi Ý Nhanh (Cuộn ngang) */
.quick-notes {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    overflow-x: auto; /* (MỚI) Thêm cuộn ngang */
    white-space: nowrap; /* (MỚI) Giữ trên 1 hàng */
    padding-bottom: 5px; /* (MỚI) Thêm khoảng đệm cho thanh cuộn */
}
.btn-quick-note {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 15px; 
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
}
.btn-quick-note:hover {
    background-color: #d6dbe0;
}

/* (Giữ nguyên) Modal Actions (1 Hàng, 3 Cột) */
.modal-actions { 
    padding: 15px 20px; background-color: #fcfcfc;
    border-top: 1px solid var(--medium-gray);
    display: grid; gap: 10px;
}
#modalChiTiet .modal-actions { grid-template-columns: repeat(3, 1fr); }
#modalThongBao .modal-actions { grid-template-columns: repeat(2, 1fr); }

/* (SỬA) Nút Modal (Trở về bản gốc - to) */
.btn-modal { 
    padding: 14px; /* (SỬA) Trả lại padding 14px */
    font-size: 1rem; /* (SỬA) Trả lại font-size 1rem */
    font-weight: 700; border: none;
    border-radius: 10px; cursor: pointer; transition: all 0.2s;
    text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-modal:active { /* (Giữ nguyên) */
    transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* (MỚI) CSS riêng cho 3 nút hành động */
#btnHuyDon, #btnHenGiaoLai, #btnGiaoThanhCong {
    padding: 15px 8px; /* (MỚI) Padding T/B 15px, L/R 8px */
    font-size: 14px; /* (MỚI) Font-size 14px */
}

.btn-primary { background-color: var(--primary-color); color: white; }
.btn-success { background-color: var(--success-color); color: white; }
.btn-danger { background-color: var(--danger-color); color: white; }
.btn-warning { background-color: var(--warning-color); color: #333; }
.btn-secondary { background-color: var(--medium-gray); color: var(--dark-gray); box-shadow: none; }


/* --- BẮT ĐẦU CODE CSS THAY THẾ --- */

/* (SỬA) 1. Thùng chứa các icon */
.item-actions-icons {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #f0f0f0;
    text-align: right; /* Giữ các nút ở bên phải */
    
    /* (MỚI) Thêm đệm cho container để các nút 
       không bị dính sát vào cạnh phải màn hình */
    padding-right: 5px;
}

/* (SỬA) 2. Nút Icon (Làm to, dễ bấm) */
.card-icon-button {
    /* (SỬA) Tăng kích thước icon lên một chút */
    font-size: 1.5em; /* 1.25em -> 1.5em */
    color: #007bff;
    
    /* (MỚI) Biến nó thành block để thêm padding */
    display: inline-block; 
    vertical-align: middle; /* Căn cho các icon thẳng hàng */
    
    /* (QUAN TRỌNG) Đây là "Vùng Bấm" 
       Thêm 10px đệm xung quanh icon */
    padding: 10px;
    
    /* (SỬA) Bỏ margin-left, thay bằng margin chung */
    margin: 0 2px; /* Thêm 2px cách nhau */
    
    cursor: pointer;
    text-decoration: none;
    
    /* (MỚI) Bo góc nhẹ cho "Vùng Bấm" (trông đẹp hơn khi tap) */
    border-radius: 8px;
    
    /* (MỚI) Cần thiết cho iOS để nhận diện là vùng bấm */
    -webkit-tap-highlight-color: transparent;
}

/* (MỚI) Thêm hiệu ứng khi chạm (tap) trên mobile */
.card-icon-button:active {
     background-color: #f0f0f0; /* Màu xám nhạt khi nhấn */
}

/* (SỬA) Thêm hiệu ứng hover cho desktop (và nền) */
.card-icon-button:hover {
    color: #0056b3;
    background-color: #f8f8f8; /* Thêm nền mờ khi hover */
}

/* --- KẾT THÚC CODE CSS THAY THẾ --- */

/* (MỚI) 5. Thiết kế từng dòng Lịch sử (History Item) */
#giaoHistoryModalContent .history-item,
#callHistoryModalContent .history-item {
    background: #ffffff; /* Nền trắng */
    border: 1px solid #eee;
    border-radius: 10px; /* Bo góc item */
    padding: 14px 16px;
    margin-top: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.history-item .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.history-item .item-header strong {
    font-size: 1.05em;
    color: #0056b3; /* Màu trạng thái */
}
.history-item .item-header .time {
    font-size: 0.9em;
    font-weight: 500;
    color: #666; /* Màu thời gian */
}

.history-item .item-note {
    font-size: 0.95em;
    color: #444;
    font-style: italic;
    padding-top: 5px;
    border-top: 1px dashed #f0f0f0;
    margin-top: 8px;
}

/* --- BẮT ĐẦU CODE MỚI (CSS Tìm Kiếm) --- */

.search-container {
    position: relative;
    margin: 15px 10px 10px 10px; /* Căn lề */
    display: flex;
    align-items: center;
}

#searchInput {
    width: 100%;
    padding: 12px 40px 12px 40px; /* Đệm 2 bên cho 2 icon */
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 25px; /* Bo tròn */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    -webkit-appearance: none; /* Tắt style mặc định của iOS */
}
#searchInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
}

/* Icon kính lúp (bên trái) */
.search-container .search-icon {
    position: absolute;
    left: 15px;
    color: #aaa;
    font-size: 1.1em;
}

/* Nút X (bên phải) */
.search-container .search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 1.2em;
    color: #bbb;
    line-height: 1;
}
.search-container .search-clear-btn:hover {
    color: #888;
}

/* --- KẾT THÚC CODE MỚI (CSS Tìm Kiếm) --- */

/* --- BẮT ĐẦU CODE MỚI (CSS Slider) --- */

/* (MỚI) Tăng chiều rộng modal cho slider */
.modal-slider-container {
    width: 600px;
    max-width: 95%;
}
.modal-slider-container .modal-content {
    padding: 15px; /* Giảm padding cho vừa */
}

/* (MỚI) 1. Khung Slider */
.slider-container {
    width: 100%;
    overflow: hidden; /* (Quan trọng) Ẩn các slide khác */
    position: relative;
    border-radius: 8px;
    background: #eee;
}

/* (MỚI) 2. Vỏ bọc (cho phép kéo/trượt) */
.slider-wrapper {
    display: flex; /* Xếp các ảnh nằm ngang */
    transition: transform 0.4s ease; /* Hiệu ứng trượt */
    
    /* (MỚI) Cho phép kéo thả (kéo) trên desktop */
    cursor: grab; 
}
.slider-wrapper:active {
    cursor: grabbing; /* Đang kéo */
}

/* (MỚI) 3. Từng Slide (ảnh) */
.slider-slide {
    flex: 0 0 100%; /* (Quan trọng) Mỗi slide chiếm 100% */
    width: 100%;
    min-height: 300px; /* Chiều cao tối thiểu */
    max-height: 70vh; /* Chiều cao tối đa */
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-slide img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain; /* (Quan trọng) Hiển thị vừa vặn, không cắt */
}


/* (MỚI) 5. Dấu chấm (Dots) */
.slider-dots {
    text-align: center;
    padding: 15px 0 0 0;
}
.slider-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}
.slider-dot.active {
    background: #007bff; /* Màu active */
}
/* --- KẾT THÚC CODE MỚI --- */

/* --- BẮT ĐẦU CODE MỚI (CSS Vô Hiệu Hóa) --- */

/* (MỚI) Định dạng cho icon khi bị vô hiệu hóa (không có ảnh) */
.card-icon-button.disabled {
    color: #cccccc !important;      /* (MỚI) Màu xám nhạt */
    cursor: default !important;   /* (MỚI) Con trỏ chuột bình thường */
}
/* (MỚI) Tắt hiệu ứng hover khi bị vô hiệu hóa */
.card-icon-button.disabled:hover {
    background-color: transparent !important;
}
/* --- KẾT THÚC CODE MỚI --- */

/* --- (MỚI) CSS CHO VUỐT ĐỂ GIAO HÀNG --- */

/* Lớp này sẽ được JS thêm vào khi đang vuốt */
.buu-gui-item.is-swiping {
  /* (Quan trọng) Tắt hiệu ứng transition mặc định
   để nó di chuyển mượt mà theo ngón tay */
  transition: none !important;
}

/* (MModal) Lớp này để tạo hiệu ứng "trả về"
  khi vuốt không đủ hoặc khi vuốt xong */
.buu-gui-item.is-returning {
  transition: transform 0.3s ease-out;
}

/* (MỚI) Lớp nền màu xanh lá cây
  sẽ xuất hiện BÊN DƯỚI khi vuốt */
.swipe-action-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--success-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Icon "Đã giao" bên trái */
  padding: 0 25px;
  z-index: 1; /* Nằm dưới item */
}
.swipe-action-background i {
  color: white;
  font-size: 1.8rem;
  opacity: 0; /* Ẩn ban đầu */
  transition: opacity 0.2s ease;
}

/* (MỚI) Khi vuốt qua một ngưỡng, icon sẽ hiện ra */
.swipe-action-background i.visible {
  opacity: 1;
}

/* (Quan trọng) Đảm bảo nội dung bưu gửi
 (thẻ trắng) luôn nằm TRÊN lớp nền màu xanh */
.buu-gui-item .drag-handle,
.buu-gui-item .buu-gui-content {
  position: relative;
  z-index: 2;
  background-color: white; /* Phải có nền trắng */
}
/* (MỚI) Bo góc cho khớp khi vuốt */
.buu-gui-item.is-swiping .drag-handle,
.buu-gui-item.is-swiping .buu-gui-content {
  border-radius: 12px;
}

/* --- (MỚI) CSS CHO MODAL CHỤP ẢNH XÁC NHẬN --- */
#modalChupAnhXacNhan .modal-content {
  max-width: 450px;
}
.chup-anh-lead {
  font-size: 1.1rem;
  color: #333;
  text-align: center;
  margin-top: 0;
}
.chup-anh-lead strong {
  color: var(--primary-color);
}
.chup-anh-info {
  font-size: 0.95rem;
  text-align: center;
  color: #555;
  margin-bottom: 20px;
}
.btn-chup-anh {
  display: block;
  padding: 15px;
  background-color: var(--primary-color);
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-chup-anh:hover {
  background-color: #0056b3;
}
.btn-chup-anh i {
  margin-right: 10px;
}
#xacNhanPreviewContainer {
  margin-top: 20px;
  text-align: center;
  border: 2px dashed var(--medium-gray);
  border-radius: 10px;
  padding: 10px;
}
#xacNhanPreview {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}
#modalChupAnhXacNhan .modal-actions {
  grid-template-columns: 1fr; /* Nút Lưu sẽ chiếm 1 cột */
}

/* --- (MỚI) CSS CHO NÚT XÓA ẢNH (CHỤP LẠI) --- */

/* Sửa lại container để định vị nút xóa */
#xacNhanPreviewContainer {
  position: relative; /* (SỬA) Thêm position relative */
  margin-top: 20px;
  text-align: center;
  border: 2px dashed var(--medium-gray);
  border-radius: 10px;
  padding: 10px;
}

/* (MỚI) Style cho nút Xóa/Chụp lại */
.btn-xoa-anh {
  position: absolute;
  top: 15px; /* Cách lề 5px (vì padding 10px) */
  right: 15px; /* Cách lề 5px */
 
  background-color: rgba(220, 53, 69, 0.9); /* Màu đỏ (danger) */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10; /* Nằm trên ảnh */
  transition: background-color 0.2s;
}
.btn-xoa-anh:hover {
  background-color: #dc3545; /* Đỏ đậm khi hover */
}
.btn-xoa-anh i {
  margin-right: 5px;
}

/* (MỚI) CSS cho nút xem ảnh xác nhận */

.btn-view-confirmation-images.disabled {
  color: #cccccc !important;
  cursor: default !important;
}
.btn-view-confirmation-images.disabled:hover {
  background-color: transparent !important;
}

/* (MỚI) CSS Cho Khung Debug Mobile */
#mobile-debug-log {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 150px;
  overflow-y: scroll;
  background: rgba(0, 0, 0, 0.8);
  color: #0f0; /* Màu xanh lá */
  z-index: 99999;
  font-size: 10px;
  white-space: pre-wrap;
  border-top: 2px solid #0f0;
}

/* --- (MỚI) CSS CHO 2 NÚT CHỤP/CHỌN ẢNH --- */
.chup-anh-options {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Chia 2 cột 50/50 */
  gap: 10px; /* Khoảng cách giữa 2 nút */
  margin-bottom: 20px;
}

/* Đảm bảo font chữ vừa vặn */
.btn-chup-anh {
  font-size: 1.0rem; 
}

/* (MỚI) Style cho từng nút */
.btn-chup-anh.btn-camera {
  background-color: var(--primary-color); /* Màu xanh dương */
}
.btn-chup-anh.btn-camera:hover {
  background-color: #0056b3;
}

.btn-chup-anh.btn-library {
  background-color: #6c757d; /* Màu xám (secondary) */
}
.btn-chup-anh.btn-library:hover {
  background-color: #5a6268;
}

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

/* CSS cho logo nhà mạng (trên Card danh sách) */
.nha-mang-logo {
    height: 10px;
    width: auto;
    vertical-align: middle;
    margin-top: 4px;
    display: block;
}

/* CSS cho logo nhà mạng (trong Modal Chi Tiết) */
.nha-mang-logo-modal {
    height: 18px;         /* Kích thước lớn hơn cho modal */
    width: auto;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    bottom: 2px;          /* Căn chỉnh với text SĐT (1.3rem) */
}

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

/* (MỚI) Màn hình xem ảnh Fullscreen */
.fullscreen-overlay {
    display: none; /* Ẩn mặc định */
    position: fixed;
    z-index: 10000; /* Nằm trên tất cả mọi thứ */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Nền đen đậm */
    overflow: hidden; /* Ngăn cuộn trang web bên dưới */
    justify-content: center;
    align-items: center;
    touch-action: none; /* Quan trọng: Ngăn trình duyệt can thiệp cử chỉ chạm */
}

/* Ảnh bên trong fullscreen */
.fullscreen-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out; /* Hiệu ứng zoom mượt */
    cursor: grab;
    will-change: transform; /* Tối ưu hiệu năng render */
}

/* Nút đóng (X) */
.close-fullscreen {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10001;
    cursor: pointer;
    padding: 10px; /* Tăng vùng bấm */
    line-height: 1;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
}
.close-fullscreen:hover,
.close-fullscreen:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

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

/* (MỚI) Grid hiển thị nhiều ảnh preview */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.preview-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Tạo hình vuông */
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.preview-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Nút xóa từng ảnh nhỏ (tùy chọn, nhưng ở đây ta dùng nút Xóa Tất Cả cho đơn giản) */

/* (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;
}

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

/* Nút Khóa Nhanh (Nổi) */
.floating-lock-btn {
    position: fixed;
    bottom: 20px;       /* Cách đáy 20px */
    right: 20px;         /* Cách trái 20px (Góc dưới trái) */
    width: 50px;
    height: 50px;
    background-color: #dc3545; /* Màu đỏ để dễ nhận diện (cảnh báo/khóa) */
    color: white;
    border-radius: 50%; /* Hình tròn */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    cursor: pointer;
    z-index: 9900;      /* Nằm trên nội dung, nhưng dưới màn hình khóa */
    transition: transform 0.2s, background-color 0.2s;
    
    /* Ngăn chọn văn bản khi nhấn giữ */
    -webkit-user-select: none; 
    user-select: none;
}

/* Hiệu ứng khi nhấn */
.floating-lock-btn:active {
    transform: scale(0.9);
    background-color: #b02a37;
}

/* (Tùy chọn) Ẩn nút này khi màn hình khóa đang hiện */
.lock-screen-overlay[style*="display: flex"] ~ .floating-lock-btn {
    display: none;
}

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

/* --- CSS CHO MODAL (Copy từ bên Nhập liệu sang) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Nền đen mờ */
    display: none; /* Ẩn mặc định */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Nằm trên tất cả */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Class này được JS thêm vào để hiện modal */
.modal-overlay.visible {
    opacity: 1;
    display: flex; /* Bắt buộc dùng flex để căn giữa */
}

.modal-content {
    background-color: white;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { margin: 0; font-size: 18px; }

.btn-close-modal {
    background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa;
}

.modal-body { padding: 20px; }

.modal-actions {
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-modal {
    padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.btn-secondary { background-color: #6c757d; color: white; }
.btn-primary { background-color: #007bff; color: white; }

/* --- (MỚI) CSS LÀM ĐẸP FORM ĐỔI PIN --- */

/* 1. Làm đẹp khung Modal riêng cho ChangePin */
#modalChangePin .modal-content {
    border-radius: 16px; /* Bo góc tròn hơn */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: none;
}

/* 2. Header màu xanh nổi bật */
#modalChangePin .modal-header {
    background: linear-gradient(135deg, #007bff, #0056b3); /* Màu xanh Gradient */
    padding: 20px;
    border-bottom: none;
}
#modalChangePin .modal-header h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    margin: 0;
}
#modalChangePin .btn-close-modal {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s;
}
#modalChangePin .btn-close-modal:hover {
    color: white;
}

/* 3. Phần thân (Body) */
#modalChangePin .modal-body {
    background-color: #f8f9fa; /* Nền xám nhẹ */
    padding: 25px 20px;
}

/* 4. Các nhóm Form */
#modalChangePin .form-group {
    margin-bottom: 20px;
}
#modalChangePin label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase; /* Chữ hoa tiêu đề */
    letter-spacing: 0.5px;
}

/* 5. Ô NHẬP PIN (QUAN TRỌNG NHẤT) */
#modalChangePin input.form-control {
    width: 100%;
    height: 50px;            /* Ô cao hơn */
    border: 2px solid #e9ecef;
    border-radius: 10px;
    background-color: white;
    
    /* Style cho chữ bên trong */
    font-size: 24px;         /* Chữ to */
    font-weight: bold;
    text-align: center;      /* Căn giữa */
    letter-spacing: 8px;     /* Các dấu sao cách xa nhau */
    color: #333;
    
    transition: all 0.2s ease;
}

/* Hiệu ứng khi bấm vào ô nhập */
#modalChangePin input.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15); /* Viền sáng xanh */
    outline: none;
}

/* Placeholder (khi chưa nhập) */
#modalChangePin input::placeholder {
    color: #ccc;
    letter-spacing: 4px;
    font-size: 16px;
    font-weight: normal;
}

/* 6. Khu vực nút bấm */
#modalChangePin .modal-actions {
    padding: 20px;
    background-color: white;
    display: flex;
    gap: 15px; /* Khoảng cách giữa 2 nút */
}

#modalChangePin .btn-modal {
    flex: 1; /* 2 nút dài bằng nhau */
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.1s;
}
#modalChangePin .btn-modal:active {
    transform: scale(0.98); /* Nhún nhẹ khi bấm */
}
#modalChangePin .btn-secondary {
    background-color: #f1f3f5;
    color: #495057;
}
#modalChangePin .btn-primary {
    background-color: #007bff;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

/* 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);
}

/* (MỚI) Style cho Mã bưu gửi */
.tracking-number {
    font-size: 0.8rem;
    color: #565555;
    font-weight: 600;
    margin-bottom: 5px;
    font-style: italic;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

.tracking-number i {
    margin-right: 5px;
    opacity: 0.7;
}

/* (MỚI) Định dạng cho nút Quét mã */
#floatingScanBtn {
    /* Các thuộc tính cơ bản kế thừa từ .floating-lock-btn */
    z-index: 9901; /* Cao hơn nút search một chút */
}

/* Tùy chỉnh giao diện khung quét trong Modal */
#reader video {
    object-fit: cover;
    border-radius: 0 0 12px 12px;
}

#reader {
    width: 100%;
    height: 350px; /* Tăng chiều cao lên chút để dễ nhìn */
    background: #000;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}
#reader video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Quan trọng: Lấp đầy khung hình */
}
/* Một cái khung ảo ở giữa để người dùng nhắm vào (cho cảm giác chuyên nghiệp) */
.scan-region-highlight {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 100px;
    border: 2px solid rgba(255, 0, 0, 0.7);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* Làm tối vùng xung quanh */
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
}
.scan-region-text {
    position: absolute;
    top: -25px; left: 0; width: 100%;
    text-align: center; color: white; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1px;
}

/* (MỚI) Style cho nút xem Barcode */

/* Định dạng SVG barcode để không bị tràn màn hình */
#barcodeSVG {
    max-width: 100%;
    height: auto;
}

/* --- CSS RIÊNG CHO MODAL HIỂN THỊ BARCODE --- */


/* 2. Style cho Modal Barcode (Giống hình bạn gửi) */
#modalBarcodeDisplay .modal-content {
    width: auto;
    min-width: 300px;
    max-width: 90%;
    background-color: white;
    padding: 20px;
    border-radius: 10px; /* Bo góc nhẹ */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Đổ bóng nổi */
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ẩn header mặc định đi cho gọn, hoặc chỉnh lại nút đóng */
#modalBarcodeDisplay .modal-header {
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    padding: 0;
    background: transparent;
    z-index: 10;
}

/* Nút đóng (X) nhỏ gọn góc phải */
#modalBarcodeDisplay .btn-close-modal {
    position: static; /* Reset vị trí absolute của class chung */
    color: #999;
    font-size: 35px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
}
#modalBarcodeDisplay .btn-close-modal:hover {
    color: #333;
    background-color: #f1f1f1;
    border-radius: 50%;
}

/* SVG Barcode */
#barcodeSVG {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto 0 auto; /* Căn giữa */
}

/* --- (MỚI) CSS CHO MODAL THỐNG KÊ --- */

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột */
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.stat-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
    display: block;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    display: block;
}

/* Màu sắc cho từng loại thẻ */
.stat-card.blue .stat-icon, .stat-card.blue .stat-value { color: #007bff; }
.stat-card.blue { background-color: #ebf5ff; border-color: #cce5ff; }

.stat-card.green .stat-icon, .stat-card.green .stat-value { color: #28a745; }
.stat-card.green { background-color: #eafbf0; border-color: #c3e6cb; }

.stat-card.red .stat-icon, .stat-card.red .stat-value { color: #dc3545; }
.stat-card.red { background-color: #fdeaea; border-color: #f5c6cb; }

.stat-card.orange .stat-icon, .stat-card.orange .stat-value { color: #ffc107; }
.stat-card.orange { background-color: #fff8e1; border-color: #ffeeba; }

/* Thẻ Tổng tiền */
.money-card {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}
.money-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.money-value {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 5px;
}
.money-sub {
    font-size: 0.8rem;
    opacity: 0.8;
    font-style: italic;
}

/* (MỚI) CSS Cho Modal Chuyển Ấp */
.hamlet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột đều nhau */
    gap: 15px;
    padding: 10px 0;
}

.btn-hamlet {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px 5px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-hamlet:hover, .btn-hamlet:active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.2);
}

/* Style cho nút icon chuyển ấp trên Card */
.btn-move-hamlet {
    color: #007bff; /* Màu tím khác biệt chút */
}


/* --- BỔ SUNG: Style cho nhãn AR và Sàn TMĐT --- */

/* 1. Nhãn Báo Phát (AR) - Màu hồng đậm nổi bật */
.tag-ar {
    color: #d50404;
    font-size: 11px;
    padding: 3px 6px;
    border: 2px solid #d50404;
    font-weight: 800;
    margin-right: 6px;
    vertical-align: middle;
    display: inline-block;
}

/* 2. Icon Sàn Thương Mại (Shopee, TikTok...) */
/* Chỉnh lại icon FontAwesome nằm cạnh tên khách */
.buu-gui-header h3 i.fab { 
    font-size: 1.2rem; /* Kích thước icon */
    vertical-align: middle; 
    margin-left: 6px; /* Cách tên khách một chút */
    position: relative;
    top: -2px; /* Tinh chỉnh vị trí cho cân với chữ */
}

/* Màu sắc đặc trưng cho từng sàn (nếu dùng class riêng) */
.icon-shopee { color: #ee4d2d; }
.icon-tiktok { color: #000000; }
.icon-lazada { color: #0f146d; }

/* 3. Badge Sàn (Dùng cho trang Nhập Liệu nếu cần) */
.badge-san {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    margin-left: 5px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
}
.badge-san.shopee { background-color: #ee4d2d; }
.badge-san.tiktok { background-color: #000000; }
.badge-san.lazada { background-color: #0f146d; }

/* --- CẬP NHẬT: Drag Handle chứa Icon Badge --- */

.buu-gui-item .drag-handle {
    width: 45px; /* Độ rộng cố định */
    background-color: #f8f9fa;
    border-right: 1px solid #eee;
    
    /* Flexbox để căn giữa icon Grip */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Quan trọng: Để định vị các icon badge ở góc trên */
    position: relative; 
    
    /* Đổi con trỏ */
    cursor: grab;
    flex-shrink: 0; /* Không bị co lại */
}

.buu-gui-item .drag-handle:active {
    cursor: grabbing;
}

/* Icon Grip (Dấu chấm bi) nằm giữa */
.buu-gui-item .drag-handle .fa-grip-vertical {
    color: #ccc;
    font-size: 1.4rem;
}

/* Container chứa AR và Icon Sàn (Nằm góc trên) */
.handle-badges {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

/* Tinh chỉnh Badge AR cho vừa khung hẹp */
.handle-badges .tag-ar {
    font-size: 9px; /* Nhỏ lại chút cho vừa */
    padding: 2px 4px;
    margin: 0;
    width: 30px; /* Cố định chiều rộng cho đẹp */
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Tinh chỉnh Icon Sàn cho vừa khung hẹp */
.handle-badges i.fab {
    font-size: 1.5rem;
    margin: 0;
    background: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Style cho nhãn Thư/Tài liệu */
.badge-letter {
    display: inline-flex;
    align-items: center;
    background-color: #e3f2fd; /* Màu xanh dương nhạt */
    color: #0d47a1; /* Chữ xanh đậm */
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 6px; /* Khoảng cách với tag-area bên dưới */
    width: fit-content;
    border: 1px solid #bbdefb;
}

.badge-letter i {
    margin-right: 5px;
}