/* Container Tổng thể */
.chem-container {
    max-width: 800px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* Header & Toggle Switches */
.chem-header {
    background: #f8fafc;
    padding: 25px 30px;
    border-bottom: 1px solid #e2e8f0;
}
.chem-title { margin: 0 0 20px 0; font-size: 20px; color: #0f172a; }

.purpose-toggle {
    display: flex;
    background: #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}
.toggle-btn {
    flex: 1; text-align: center; cursor: pointer; position: relative;
}
.toggle-btn input { display: none; }
.toggle-btn span {
    display: block; padding: 12px; font-weight: 600; color: #64748b;
    border-radius: 6px; transition: all 0.3s ease;
}
.toggle-btn.active span { background: #ffffff; color: #0ea5e9; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.purpose-desc { font-size: 13px; color: #64748b; margin: 15px 0 0 0; font-style: italic; }

/* Body & Inputs */
.chem-body { padding: 30px; }
.input-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 25px; }
.input-group { flex: 1; min-width: 250px; }
.input-group label, .param-box label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #334155; }

.input-with-suffix, .input-with-indicator { display: flex; position: relative; }
.input-with-suffix input, .input-with-indicator input, select {
    width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 16px; transition: 0.3s;
}
.input-with-suffix input { border-radius: 6px 0 0 6px; border-right: none; }
.input-with-suffix .suffix {
    padding: 12px 20px; background: #f1f5f9; border: 1px solid #cbd5e1;
    border-radius: 0 6px 6px 0; color: #475569; font-weight: bold;
}

select { cursor: pointer; appearance: none; background: url('data:image/svg+xml;utf8,<svg fill="%23475569" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center; }

/* Cảnh báo Màu sắc (Color Indicators) */
.params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.param-box.full-width { grid-column: 1 / -1; }
.color-indicator {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; transition: 0.3s;
}
.status-safe { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.4); } /* Xanh lá */
.status-warn { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.4); } /* Vàng */
.status-danger { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.4); } /* Đỏ */

.lsi-banner {
    background: #fef2f2; border-left: 4px solid #ef4444; padding: 15px;
    border-radius: 4px; color: #991b1b; font-size: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 25px;
}

/* Nút Tính toán */
.calc-action-btn {
    width: 100%; padding: 16px; background: #0ea5e9; color: #fff;
    border: none; border-radius: 8px; font-size: 16px; font-weight: bold;
    cursor: pointer; transition: 0.3s;
}
.calc-action-btn:hover { background: #0284c7; }

/* Khối Kết quả Bin-packing (JS sẽ render) */
.chem-result { border-top: 1px solid #e2e8f0; padding: 30px; background: #f8fafc; }
.dosage-highlight { text-align: center; margin-bottom: 25px; }
.dosage-value { font-size: 32px; font-weight: 900; color: #0ea5e9; display: block; }
.dosage-note { color: #64748b; font-size: 14px; }

.bin-packing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.sku-card {
    background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 15px; text-align: center; position: relative;
}
.sku-badge { position: absolute; top: -10px; right: -10px; background: #ef4444; color: #fff; width: 24px; height: 24px; border-radius: 50%; font-weight: bold; line-height: 24px; }
.sku-card strong { display: block; font-size: 18px; margin-bottom: 5px; }