/* CSS định hình bố cục Form Bát Tự */
.battu-form-dark {
    max-width: 100%;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 15px;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

.form-section-title {
    font-weight: bold;
    margin: 15px 0 10px 0;
    color: #b08d57;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Áp dụng Flexbox để chia cột */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Khoảng cách giữa các cột */
}

/* Chia 2 cột (Giới tính & Hôn nhân / Giờ & Phút) */
.form-col-2 .form-group {
    flex: 1 1 calc(50% - 15px);
    margin-bottom: 0;
}

/* Chia 3 cột (Năm - Tháng - Ngày) */
.form-col-3 .form-group {
    flex: 1 1 calc(33.333% - 15px);
    margin-bottom: 0;
}

/* Style cho input và select để chúng đồng đều */
.form-group input, 
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Đảm bảo padding không phá vỡ chiều rộng */
    font-size: 15px;
    height: 42px;
}

.select-wrapper {
    width: 100%;
}

/* Nút Submit */
.btn-submit.dark-submit {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit.dark-submit:hover {
    background-color: #c82333;
}

/* Responsive: Thu về 1 cột trên điện thoại nhỏ để tránh chữ bị ép lại */
@media (max-width: 576px) {
    .form-col-2 .form-group,
    .form-col-3 .form-group {
        flex: 0.8 1.2 100%;
        margin-bottom: 10px;
    }
}


/* CSS khắc phục lỗi nhảy dòng form xem ngày - Ngày tốt trong tháng*/
/* =========================================================
   RESET & GLOBAL
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.tool-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 12px;
}

/* tránh phần tử con phá layout */
.site-content,
.site-main,
.entry-content,
.result-section {
    max-width: 100%;
    min-width: 0;
}

/* =========================================================
   FORM
   ========================================================= */
.custom-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end; /* Hóa giải: Giúp nút Xem kết quả luôn canh đáy thẳng hàng với input */

    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
}

/* cột */
.custom-search-form .form-col {
    flex: 1 1 250px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* label */
.custom-search-form label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* group select */
.custom-search-form .select-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* select */
.custom-search-form .form-select {
    flex: 1 1 120px;
    width: 100%;
    height: 42px;
    padding: 0 12px;

    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;

    font-size: 15px;
}

/* button */
.custom-search-form .form-btn {
    flex: 0 0 auto;
}

.custom-search-form .btn-red {
    height: 42px;
    padding: 0 20px;

    background: #dc2626;
    color: #fff;

    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

/* =========================================================
   TABLE
   ========================================================= */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
}

.custom-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.custom-table th,
.custom-table td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

/* cho phép xuống dòng */
.custom-table td {
    word-break: break-word;
}

/* chỉ giữ nowrap cho cột cần */
.col-nowrap {
    white-space: nowrap;
}

/* =========================================================
   BUTTON DETAIL
   ========================================================= */
.btn-detail {
    display: inline-block;
    padding: 6px 12px;

    font-size: 13px;
    font-weight: 600;

    color: #2563eb;
    background: #eff6ff;

    border: 1px solid #bfdbfe;
    border-radius: 5px;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {

    .tool-container {
        padding: 0 10px;
    }

    /* form 1 cột */
    .custom-search-form {
        flex-direction: column;
        gap: 12px;
        align-items: stretch; /* Đưa các phần tử dãn hết chiều ngang trên mobile */
    }

    .custom-search-form .form-col {
        width: 100%;
        flex: none; /* HÓA GIẢI: Tắt flex-basis 250px để nó không biến thành chiều cao trên Mobile */
    }

    /* select dọc */
    .custom-search-form .select-group {
        flex-direction: column;
    }

    /* input + button full */
    .custom-search-form .form-select,
    .custom-search-form .btn-red {
        width: 100%;
        height: 44px;
        font-size: 16px; /* chống zoom iOS */
    }

    /* FIX LỖI PHÌNH TO CHIỀU CAO TRÊN MOBILE (select) */
    .custom-search-form .form-select {
        flex: none; 
    }

    .custom-search-form .form-btn {
        width: 100%;
        margin-top: 10px; /* Cách ra một chút cho nút bấm thoáng hơn */
    }
}

/* BATTU SEO CONTENT STYLES */
.battu-seo-content { margin-top: 30px; line-height: 1.7; color: #444; }
.seo-heading-main { font-size: 1.5em; color: #b08d57; margin-bottom: 15px; }
.seo-heading-sub { font-size: 1.2em; color: #333; margin-top: 25px; margin-bottom: 10px; }
.seo-feature-list, .seo-step-list { margin-bottom: 15px; padding-left: 20px; }
.seo-feature-list li, .seo-step-list li { margin-bottom: 8px; }
.seo-application-grid { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.seo-app-item h4 { font-size: 1.1em; color: #555; margin-bottom: 8px; }
.seo-call-to-action { font-weight: bold; color: #b08d57; font-size: 1.1em; text-align: center; margin-top: 20px; }
.battu-internal-links { margin-top: 30px; padding: 20px; background: #f9f9f9; border-radius: 8px; border-left: 4px solid #b08d57; }
.battu-internal-links ul { list-style: none; padding: 0; }
.battu-internal-links li { margin-bottom: 10px; }
.battu-internal-links a { color: #b08d57; text-decoration: none; font-weight: 500; }
.battu-internal-links a:hover { text-decoration: underline; }
/* Hỗ trợ ẩn label cho người bình thường nhưng Screen Reader vẫn đọc được (Accessibility) */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }