/* =====================================================
   So Ket Qua - Custom Styles (Form Lọc & Tiện ích)
   ===================================================== */

/* Layout & Typography */
.xs-title-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 20px;
    text-align: left;
}

.xs-title-section h1 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
}

.xs-title-section p {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    font-family: Arial, Helvetica, sans-serif;
}

/* Form Lọc Khoảng Ngày & Nút chọn nhanh */
#so-ket-qua-form input[type="date"] {
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#so-ket-qua-form input[type="date"]:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25);
}

.btn-outline-danger {
    color: #dc2626;
    border-color: #dc2626;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.description-placeholder {
    background-color: #fcfcfc;
    border: 1px dashed #cccccc;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 24px;
    color: #666666;
    font-style: italic;
}

/* Responsive adjustment for form */
@media (max-width: 768px) {
    #so-ket-qua-form .col-md-4 {
        margin-bottom: 8px;
    }
}