.otp-input {
    width: 52px;
    font-size: 1.5rem;
}
.result-ready {
    color: #00a86b;
}

@media (max-width: 400px) {
    .otp-input {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}
.test-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.test-name {
    font-weight: 600;
}

.mini-chart {
    width: 100%;
    height: 80px;
}


/* ResultBar / status styles */
.result-item .result-name {
    font-size: 0.95rem;
}

/* range */
.range-wrap {
    background: transparent;
}

.range-bar {
    background-color: #198754; /* xanh chủ đạo mờ */
    opacity: 0.18;
    height: 18px;
}

/* marker (mũi tên + value) - màu tuỳ theo class */
.value-normal {
    color: #198754;
}
/* xanh */
.value-warning {
    color: #d97706;
}
/* cam (tailwind amber-600) */
.value-danger {
    color: #dc3545;
}
/* đỏ (bootstrap danger) */

/* status badge cho text results */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* negative / âm tính */
.badge-negative {
    background-color: rgba(25,135,84,0.12);
    color: #198754;
    border: 1px solid rgba(25,135,84,0.18);
}

/* positive / dương tính */
.badge-positive {
    background-color: rgba(220,53,69,0.12);
    color: #dc3545;
    border: 1px solid rgba(220,53,69,0.18);
}

/* neutral / other */
.badge-neutral {
    background-color: rgba(108,117,125,0.08);
    color: #6c757d;
    border: 1px solid rgba(108,117,125,0.1);
}

/* responsive: giảm size trên mobile */
@media (max-width: 576px) {
    .status-badge {
        font-size: 0.85rem;
        padding: 5px 10px;
    }

    .result-item .result-name {
        font-size: 0.9rem;
    }
}