/* 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; }

/* ==== Chatbot Bát Tự — dạng POPUP nổi ==== */
.batbot-pop{position:fixed;bottom:24px;z-index:99999;font-size:15px;line-height:1.6}
.batbot-pop.batbot-phai{right:24px}
.batbot-pop.batbot-trai{left:24px}

/* Nút tròn nổi */
.batbot-toggle{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#8a6d3b,#b8924e);color:#fff;font-size:30px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .18s,box-shadow .18s;
  display:flex;align-items:center;justify-content:center}
.batbot-toggle:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(0,0,0,.34)}
.batbot-toggle-icon{line-height:1}

/* Panel popup */
.batbot-panel{position:absolute;bottom:74px;width:370px;max-width:calc(100vw - 40px);
  height:520px;max-height:calc(100vh - 130px);background:#fffdf7;border:1px solid #d8c9a8;
  border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;
  overflow:hidden;animation:batbotIn .2s ease}
.batbot-pop.batbot-phai .batbot-panel{right:0}
.batbot-pop.batbot-trai .batbot-panel{left:0}
@keyframes batbotIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.batbot-header{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:linear-gradient(135deg,#8a6d3b,#b8924e);color:#fff}
.batbot-title{font-weight:600;font-size:15px}
.batbot-close{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;
  cursor:pointer;padding:0 4px;opacity:.9}
.batbot-close:hover{opacity:1}

/* QUAN TRỌNG: các luật dưới đây CHỈ dành cho kiểu popup.
   Phải khóa trong .batbot-pop, nếu để selector toàn cục thì màu nền cố định
   (#fffdf7, #fff, #f4ece0…) sẽ rò sang chế độ kieu="trang" của theme và
   làm hỏng nền tối. */
.batbot-pop .batbot-log{flex:1;overflow-y:auto;padding:12px 10px;background:#fffdf7}
.batbot-pop .batbot-msg{margin:8px 0;padding:9px 12px;border-radius:10px;white-space:pre-wrap;word-wrap:break-word;font-size:14.5px}
.batbot-pop .batbot-user{background:#e8f0e0;margin-left:16%}
.batbot-pop .batbot-bot{background:#f4ece0;margin-right:8%}
.batbot-pop .batbot-cancu{background:#efe6d2;border-left:3px solid #b89b5e;font-size:13px;color:#5c4d2e}

.batbot-pop .batbot-input{display:flex;gap:7px;padding:10px;border-top:1px solid #ece2cc;background:#fff}
.batbot-pop .batbot-input #batbot-q{flex:1;padding:9px 11px;border:1px solid #c9b990;border-radius:8px;font-size:14.5px}
.batbot-pop .batbot-input #batbot-send{padding:9px 16px;background:#8a6d3b;color:#fff;border:0;border-radius:8px;cursor:pointer;white-space:nowrap}
.batbot-pop .batbot-input #batbot-send:disabled{opacity:.6}
.batbot-pop .batbot-note{font-size:11px;color:#a99;margin:0;padding:6px 10px 8px;text-align:center;background:#fff}

/* Mobile: panel gần như toàn màn hình */
@media(max-width:480px){
  .batbot-pop{bottom:16px}
  .batbot-pop.batbot-phai{right:16px}
  .batbot-pop.batbot-trai{left:16px}
  .batbot-panel{width:calc(100vw - 32px);height:calc(100vh - 110px)}
}

/* =====================================================================
   CHẾ ĐỘ APP — dùng khi shortcode chạy [xem_bat_tu giao_dien="app"]
   Form lá số nằm ở sidebar của theme, nên form gốc bị ẩn khỏi tầm nhìn
   nhưng VẪN nằm trong DOM để luồng tính toán cũ chạy nguyên vẹn.
   ===================================================================== */
.battu-form-an {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Cổng chặn trước khi có lá số */
.battu-gate {
	max-width: 620px;
	margin: 40px auto;
	text-align: center;
}
.battu-gate[hidden] { display: none; }
.battu-gate-box {
	border: 1px solid var(--bz-line, #e5e5e5);
	border-radius: 16px;
	padding: 36px 28px 30px;
	background: var(--bz-bg, #fff);
}
.battu-gate-box[hidden] { display: none; }
.battu-gate-ico {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--bz-bg-soft, #f4f4f4);
	font-size: 22px;
	color: var(--bz-accent, #8f4b1e);
}
.battu-gate-box h2 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
	color: var(--bz-text, #0d0d0d);
	font-family: var(--bz-font, inherit);
}
.battu-gate-box p {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bz-text-2, #5d5d5d);
}
.battu-gate-btn,
.battu-gate-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	margin: 0 4px;
}
.battu-gate-btn {
	border: 0;
	background: var(--bz-btn, #0d0d0d);
	color: var(--bz-btn-text, #fff);
}
.battu-gate-btn:hover { opacity: .86; }
.battu-gate-btn-ghost {
	border: 1px solid var(--bz-line, #e5e5e5);
	background: transparent;
	color: var(--bz-text-2, #5d5d5d);
}
.battu-gate-btn-ghost:hover {
	background: var(--bz-bg-hover, #ececec);
	color: var(--bz-text, #0d0d0d);
}