/* Giữ nguyên các style CSS tùy chỉnh khác */
body { font-family: 'Roboto', sans-serif; font-size: 13px; }
button[role="tab"][aria-selected="true"] { color: #234B3F; border-color: #234B3F; }
button[role="tab"][aria-selected="false"] { border-color: transparent; }
button[role="tab"][aria-selected="false"]:hover { color: #4b5563; border-color: #d1d5db; }
.quote-panel-container { position: relative; background-color: white; padding-bottom: 1rem; }
#quote-output { position: relative; z-index: 10; padding: 1.5rem; }

/* ----- CẬP NHẬT STYLE CHO OTHER COST ITEM ----- */
.other-cost-item { display: flex; align-items: center; margin-bottom: 8px; gap: 6px; /* Giảm gap một chút */ flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */ }
.other-cost-item .cost-description { flex: 1 1 250px; /* Linh hoạt nhưng có độ rộng tối thiểu */ }
.other-cost-item .cost-amount { width: 120px; flex-shrink: 0; }
.other-cost-item .cost-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; /* Đẩy controls sang phải */ }
.other-cost-item .checkbox-group { display: flex; align-items: center; gap: 3px; }
.other-cost-item .checkbox-group label { font-size: 0.7rem; color: #6b7280; cursor: pointer; white-space: nowrap; }
.other-cost-item .checkbox-group input[type="checkbox"] { width: 0.75rem; height: 0.75rem; text-primary focus:ring-primary border-gray-300 rounded cursor-pointer; }
.remove-cost-btn { background-color: #ef4444; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; transition: background-color 0.2s; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* Centered icon */
.remove-cost-btn:hover { background-color: #dc2626; }
.remove-cost-btn i { font-size: 0.7rem; } /* Adjust icon size */
/* ----- KẾT THÚC CẬP NHẬT STYLE ----- */

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; }
table td, table th { padding: 0.5rem; }
tbody td { vertical-align: middle; }
tfoot td { vertical-align: middle; }
.notes-cell { vertical-align: bottom !important; }
tbody tr:nth-child(even) { background-color: #f9fafb; }
tbody tr:nth-child(odd) { background-color: white; }
@media (max-width: 768px) { .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.watermark-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; padding: inherit; }
.watermark-bg img { opacity: 0.2; width: 300px; height: auto; }
#quote-panel { padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.grid-col-full { grid-column: 1 / -1; }
.input-group { display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 0.375rem; padding-left: 0.75rem; background-color: white; transition: box-shadow 0.2s; }
.input-group:focus-within { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(35, 75, 63, 0.5); border-color: #234B3F; }
.input-group .input-icon { color: #9ca3af; flex-shrink: 0; margin-right: 0.5rem; width: 1rem; height: 1rem; text-align: center; } /* FA icon style */
.input-group input, .input-group textarea, .input-group select { border: none !important; outline: none !important; box-shadow: none !important; padding: 0.5rem 0.75rem 0.5rem 0; flex-grow: 1; background-color: transparent; }
.input-group input::placeholder, .input-group textarea::placeholder { color: #6b7280; }
.input-group input[readonly] { background-color: #f9fafb; cursor: default; }
.input-group textarea { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.info-icon { display: inline-block; vertical-align: middle; width: 0.875rem; height: 0.875rem; margin-right: 0.375rem; color: #6b7280; text-align: center; }
.company-name-large { font-size: 1.1rem; line-height: 1.4; }
#live-total-section { border: 1px dashed #d1d5db; border-radius: 0.375rem; background-color: #f9fafb; }

/* Add loading state style */
.loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50; /* Ensure it's above content but below modals if any */
    pointer-events: none; /* Allow clicks through */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.loading-overlay.active {
    opacity: 1;
    pointer-events: auto; /* Block interactions when loading */
}
.loading-spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #234B3F; /* Primary color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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