/* ============================================================
   Bát Tự (Tứ Trụ) — Option D Layout
   Font: Roboto (toàn bộ trang) — match phong cách Tử Vi.
   Palette: #fdf6e3 (parchment) · #c8a865 (gold) · #8b0000 (đỏ son)
   ============================================================ */

/* Roboto override cho TOÀN BỘ Bát Tự — ưu tiên cao hơn theme */
.battu-result,
.battu-result *,
.battu-form-wrap,
.battu-form-wrap * {
    font-family: var(--tvq-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* ===== Result container ===== */
.battu-result {
    max-width: 1100px;
    margin: 10px auto;
    color: #2c1810;
    line-height: 1.45;
    background-color: #fdf6e3;
    padding: 10px;
    border: 2px solid #8b0000;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(139, 105, 20, 0.15);
    position: relative;
    overflow: hidden;
}

/* ===== BREAK-OUT khỏi theme content wrapper =====
 * Một số theme (Flatsome blank/full-width) vẫn có inner container giới hạn max-width
 * (vd .entry-content, .col-inner, .section-content ~850-1080px) dù body đã full.
 * Khi viewport >= 1140px, force element rộng 1100px và shift left bù parent narrow.
 *
 * Công thức margin-left = (parent_width - 1100) / 2:
 *   - Parent = 1450: margin-left = 175 (push right để center trong parent)
 *   - Parent = 634:  margin-left = -233 (pull left để break out + center viewport)
 */
@media (min-width: 1140px) {
    .battu-result,
    .battu-cmp-result {
        width: 1100px;
        max-width: 1100px;
        margin-left: calc((100% - 1100px) / 2);
        margin-right: 0;
        box-sizing: border-box;
    }
}

/* Bát Quái watermark — <img> element (html2canvas render natively).
 * Position TOP area (sau title bar) để user thấy ngay không cần scroll
 * + opacity 0.15 đủ mờ để chữ dễ đọc nhưng vẫn nhận ra bagua. */
.battu-bagua-bg {
    position: absolute;
    top: 240px;          /* sau header + đầu bảng compact */
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Force tất cả content NẰM TRÊN watermark */
.battu-result > *:not(.battu-bagua-bg) {
    position: relative;
    z-index: 1;
}

/* ===== Toolbar (compact, dưới bảng) ===== */
.battu-toolbar {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin: 6px 0;
    padding: 6px 8px;
    background: rgba(253, 246, 227, 0.82);
    border: 1px solid #c8a865;
    border-radius: 4px;
    flex-wrap: wrap;
}
.battu-tool-btn {
    background: #fff;
    border: 1px solid #c8a865;
    color: #8b0000;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.battu-tool-btn:hover {
    background: #8b0000;
    border-color: #8b0000;
    color: #fff;
}
.battu-toast {
    background: #2c5e2c;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ===== Brand text (admin-configurable) ===== */
.battu-brand {
    text-align: center;
    margin: 2px 0 4px;
    line-height: 1.25;
}
.battu-brand-text {
    margin: 0;
    color: #8b0000;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.battu-brand-text a {
    color: #8b0000;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color .15s;
}
.battu-brand-text a:hover { border-bottom-color: #8b0000; }
.battu-brand-subtitle {
    margin: 2px 0 0;
    color: #8b6914;
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

/* ===== Title bar (cuộn giấy đỏ son giống Tử Vi form title) ===== */
.battu-title-bar {
    position: relative;
    margin: 0 auto;
    padding: 6px 32px;
    width: fit-content;
    text-align: center;
    background: linear-gradient(180deg, #a52020 0%, #7b1414 100%);
    color: #f5deb3;
    border: 1.5px solid #b8860b;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.battu-title-bar::before,
.battu-title-bar::after {
    content: "✦";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #d4a017;
    font-size: 12px;
}
.battu-title-bar::before { left: 8px; }
.battu-title-bar::after  { right: 8px; }
.battu-title-main {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    color: #f5deb3;
}

/* ===== Header info block (ultra-compact, semi-transparent để bagua xuyên qua) ===== */
.battu-header-block {
    border: 1px solid #c8a865;
    border-radius: 4px;
    background: rgba(253, 246, 227, 0.82);
    padding: 6px 12px;
    margin: 8px 0 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.battu-header-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #c8a865;
    margin-bottom: 4px;
}
.battu-header-name h2 {
    margin: 0;
    color: #8b0000;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    display: inline-block;
}
.battu-can-tao {
    color: #8b6914;
    font-weight: 500;
    font-size: 11px;
    margin-left: 6px;
}
.battu-header-dm {
    text-align: center;
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 3px 10px;
    line-height: 1.15;
    min-width: 130px;
}
.battu-header-dm-label {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    color: #8b6914;
    font-weight: 600;
}
.battu-header-dm-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #8b0000;
}
.battu-header-dm-value small {
    font-weight: 400;
    font-size: 10px;
    color: #5a0e0e;
    margin-left: 3px;
}
.battu-header-info-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #2c1810;
}
.battu-header-info-compact span {
    white-space: nowrap;
}
.battu-header-info-compact strong {
    color: #8b0000;
    margin-right: 2px;
    font-weight: 700;
}
.battu-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #c8a865;
    padding-bottom: 12px;
    margin-bottom: 12px;
    gap: 20px;
    flex-wrap: wrap;
}
.battu-header-name h2 {
    margin: 0;
    color: #8b0000;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.battu-can-tao {
    margin: 4px 0 0;
    color: #8b6914;
    font-weight: 500;
    font-size: 13px;
}
/* Nhật Chủ card phải header — nổi bật */
.battu-header-dm {
    text-align: center;
    background: #fff;
    border: 1.5px solid #c8a865;
    border-radius: 6px;
    padding: 6px 16px;
    min-width: 160px;
}
.battu-header-dm-label {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8b6914;
    font-weight: 600;
}
.battu-header-dm-value {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #8b0000;
    line-height: 1.2;
}
.battu-header-dm-value span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #5a0e0e;
    margin-top: 2px;
}

/* Header info grid — auto-fit, balanced */
.battu-header-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px 20px;
    font-size: 14.5px;
    line-height: 1.6;
}
.battu-header-info-grid > div {
    padding: 2px 0;
}
.battu-header-info-grid strong {
    color: #8b0000;
    margin-right: 4px;
    font-weight: 700;
}
/* Row span 2-col cho item dài (Mệnh Quái) */
.battu-header-row-wide {
    grid-column: 1 / -1;
    border-top: 1px dotted #c8a865;
    padding-top: 6px !important;
    margin-top: 2px;
}

/* ===== Bảng Compact (giấy cổ — semi-transparent bagua xuyên qua) ===== */
.battu-compact-wrap {
    margin: 6px 0;
    overflow-x: auto;
    padding: 0;
    background: rgba(253, 246, 227, 0.82);
    border: 1px solid #c8a865;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.battu-compact-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 12px;
}
.battu-compact-table th,
.battu-compact-table td {
    border: 1px solid #c8a865;
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
    color: #2c1810;
}
.battu-compact-table thead th {
    background: linear-gradient(180deg, #a52020 0%, #7b1414 100%);
    color: #f5deb3;
    font-weight: 700;
    padding: 6px 6px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    border-color: #8b6914;
    font-size: 12px;
    letter-spacing: 0.3px;
}
.battu-compact-table thead th small {
    display: block;
    font-weight: 400;
    opacity: 0.85;
    font-size: 0.82em;
}
.battu-compact-table tbody th {
    background: #f9efd3;
    color: #8b0000;
    font-weight: 700;
    text-align: left;
    width: 95px;
    font-size: 11px;
    border-right: 2px solid #c8a865;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding-left: 10px;
}
.battu-th-label {
    background: transparent !important;
    border: none !important;
}
.battu-col-label {
    width: 110px;
}

/* Row-specific styling (compact) */
.battu-row-can td,
.battu-row-chi td {
    font-size: 1.2em;
    font-weight: 700;
    padding: 4px 4px;
}
.battu-row-bt td.battu-bt-cell {
    padding: 2px 4px;
}
.battu-bt-stem,
.battu-bt-branch {
    display: block;
    font-size: 1.35em;
    font-weight: 700;
    padding: 1px 0;
    line-height: 1.1;
}
.battu-row-na td { font-size: 0.92em; padding: 3px 6px; }
.battu-row-tt td { font-size: 0.95em; padding: 3px 6px; }
.battu-dm-mark {
    color: #b8860b;
    font-size: 1.05em;
}

/* Tàng can cell (compact 3 dòng) */
.battu-tc-cell {
    text-align: left;
    padding: 2px 5px;
}
.battu-tc-line {
    display: grid;
    grid-template-columns: 42px 62px 1fr;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 0;
    line-height: 1.3;
}
.battu-tc-stem {
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    overflow: visible;
}
.battu-tc-tt {
    color: #7b1414;
    font-weight: 600;
}
.battu-tc-tnt {
    color: #666;
    font-style: italic;
    font-size: 11px;
}

/* Ý nghĩa Thập Thần cell (compact 1-line inline) */
.battu-tt-y-cell {
    font-size: 0.83em;
    color: #555;
    line-height: 1.35;
    text-align: left;
    padding: 4px 8px;
    font-style: italic;
}

/* Phụ Tinh row (compact list các Can ẩn) */
.battu-pt-cell {
    font-size: 12px;
    color: #5a0e0e;
    font-weight: 500;
    padding: 5px 6px;
    letter-spacing: 0.3px;
}

/* ===== Sub-table Đại Vận / Lưu Niên (10 cột — ultra-compact) ===== */
.battu-dv-table,
.battu-ln-table {
    margin-top: 4px;
    table-layout: fixed;
}
.battu-dv-table th.battu-dv-row-th,
.battu-ln-table th.battu-dv-row-th {
    background: #f9efd3;
    color: #8b0000;
    font-weight: 700;
    text-align: left;
    width: 95px;
    font-size: 11px;
    border-right: 2px solid #c8a865;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding-left: 10px;
    vertical-align: middle;
}
.battu-dv-cell, .battu-ln-cell {
    padding: 3px 2px;
    text-align: center;
    line-height: 1.2;
    background: #fffdf6;
}
.battu-dv-cell span,
.battu-ln-cell span {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: #2c1810;
}
.battu-dv-tt-tag,
.battu-ln-tt-tag {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #8b6914 !important;
    margin-top: 0 !important;
    font-style: italic;
}
.battu-dv-row-age td,
.battu-dv-row-year td,
.battu-ln-row-age td,
.battu-ln-row-year td {
    padding: 2px 2px;
    font-size: 10px;
    color: #5a0e0e;
    background: #fdf6e3;
    text-align: center;
    border-top: 1px dotted #c8a865;
}
.battu-dv-row-year td,
.battu-ln-row-year td {
    background: #f9efd3;
    font-weight: 600;
}
.battu-ln-pillar {
    padding: 2px 5px;
    border-radius: 3px;
}
.battu-ln-pillar.battu-el-kim  { background: rgba(150,150,150,0.18); color: #555 !important; }
.battu-ln-pillar.battu-el-moc  { background: rgba(74,139,58,0.18); color: #3a7029 !important; }
.battu-ln-pillar.battu-el-thuy { background: rgba(44,94,158,0.18); color: #2c5e9e !important; }
.battu-ln-pillar.battu-el-hoa  { background: rgba(204,51,51,0.18); color: #b02020 !important; }
.battu-ln-pillar.battu-el-tho  { background: rgba(184,134,11,0.2); color: #8c6915 !important; }

/* Highlight đại vận / lưu niên ĐANG HOẠT ĐỘNG (currentYear) */
.battu-dv-cell.is-active,
.battu-ln-cell.is-active,
.battu-dv-row-age td.is-active,
.battu-dv-row-year td.is-active,
.battu-ln-row-age td.is-active,
.battu-ln-row-year td.is-active {
    background: linear-gradient(180deg, #fff4d6 0%, #fde8a8 100%);
    box-shadow: inset 0 0 0 1px #d4a017;
}
.battu-dv-cell.is-active span:first-child,
.battu-ln-cell.is-active .battu-ln-pillar {
    text-shadow: 0 0 1px rgba(139,0,0,0.3);
}

/* Mệnh row (cuối bảng — compact) */
.battu-row-menh td.battu-menh-cell {
    background: #f9efd3;
    padding: 4px 6px;
    text-align: center;
    border-top: 2px solid #c8a865;
    line-height: 1.2;
}
.battu-menh-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8b6914;
    font-weight: 600;
    margin-bottom: 1px;
}
.battu-menh-value {
    color: #8b0000;
    font-weight: 700;
    font-size: 12px;
}
.battu-menh-kv {
    color: #c33;
    font-size: 11px;
}

/* Thần Sát cell */
.battu-ts-cell {
    text-align: left;
    padding: 4px 6px;
    line-height: 1.4;
}
.battu-ts-star {
    display: inline-block;
    margin: 2px 3px 2px 0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    color: #fff;
}
.battu-ts-star.battu-good { background: #4a8b3a; }
.battu-ts-star.battu-bad  { background: #c33; }

/* ===== Ngũ Hành Colors ===== */
.battu-el-kim  { color: #6b6b6b; }
.battu-el-moc  { color: #4a8b3a; }
.battu-el-thuy { color: #2c5e9e; }
.battu-el-hoa  { color: #c33; }
.battu-el-tho  { color: #b8860b; }

td.battu-el-kim,  span.battu-el-kim,  div.battu-el-kim  { background-color: rgba(150,150,150,0.12); }
td.battu-el-moc,  span.battu-el-moc,  div.battu-el-moc  { background-color: rgba(74,139,58,0.13); }
td.battu-el-thuy, span.battu-el-thuy, div.battu-el-thuy { background-color: rgba(44,94,158,0.13); }
td.battu-el-hoa,  span.battu-el-hoa,  div.battu-el-hoa  { background-color: rgba(204,51,51,0.13); }
td.battu-el-tho,  span.battu-el-tho,  div.battu-el-tho  { background-color: rgba(184,134,11,0.15); }

/* Bát tự stem/branch — màu nền đậm */
.battu-bt-stem.battu-el-kim, .battu-bt-branch.battu-el-kim,
.battu-tc-stem.battu-el-kim {
    background: linear-gradient(135deg, #c8c8c8, #888); color: #fff;
}
.battu-bt-stem.battu-el-moc, .battu-bt-branch.battu-el-moc,
.battu-tc-stem.battu-el-moc {
    background: linear-gradient(135deg, #6ab84d, #3a7029); color: #fff;
}
.battu-bt-stem.battu-el-thuy, .battu-bt-branch.battu-el-thuy,
.battu-tc-stem.battu-el-thuy {
    background: linear-gradient(135deg, #4a90d9, #2c5e9e); color: #fff;
}
.battu-bt-stem.battu-el-hoa, .battu-bt-branch.battu-el-hoa,
.battu-tc-stem.battu-el-hoa {
    background: linear-gradient(135deg, #e25a5a, #b02020); color: #fff;
}
.battu-bt-stem.battu-el-tho, .battu-bt-branch.battu-el-tho,
.battu-tc-stem.battu-el-tho {
    background: linear-gradient(135deg, #d4ac3a, #8c6915); color: #fff;
}

/* Element bar */
.battu-element-bar.battu-el-kim  { background: linear-gradient(135deg, #c8c8c8, #888); }
.battu-element-bar.battu-el-moc  { background: linear-gradient(135deg, #6ab84d, #3a7029); }
.battu-element-bar.battu-el-thuy { background: linear-gradient(135deg, #4a90d9, #2c5e9e); }
.battu-element-bar.battu-el-hoa  { background: linear-gradient(135deg, #e25a5a, #b02020); }
.battu-element-bar.battu-el-tho  { background: linear-gradient(135deg, #d4ac3a, #8c6915); }

/* Lưu niên/đại vận badges */
.battu-ln-p.battu-el-kim  { background: rgba(150,150,150,0.2); color: #555; }
.battu-ln-p.battu-el-moc  { background: rgba(74,139,58,0.2); color: #3a7029; }
.battu-ln-p.battu-el-thuy { background: rgba(44,94,158,0.2); color: #2c5e9e; }
.battu-ln-p.battu-el-hoa  { background: rgba(204,51,51,0.2); color: #b02020; }
.battu-ln-p.battu-el-tho  { background: rgba(184,134,11,0.2); color: #8c6915; }

/* ===== Legend (compact) ===== */
.battu-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 3px 10px;
    background: #fffdf6;
    border: 1px solid #e6d4a8;
    border-radius: 3px;
    font-size: 11px;
    flex-wrap: wrap;
}
.battu-legend-h { font-weight: 700; color: #8b0000; }
.battu-legend-item { padding: 1px 4px; border-radius: 2px; font-weight: 500; }

/* Footer phương pháp (italic dòng cuối — giống tuvi.vn) */
.battu-method-footer {
    margin: 4px 4px 0;
    font-size: 11px;
    color: #5a0e0e;
    text-align: right;
    line-height: 1.4;
}
.battu-method-footer em { font-style: italic; }
.battu-method-footer strong { color: #8b0000; }

/* ===== Note warn ===== */
.battu-note-warn {
    background: #fff8e0;
    border: 1px solid #d4af37;
    padding: 10px 14px;
    border-radius: 6px;
    color: #7a5400;
    margin: 14px 0;
}

/* ===== Section common (semi-transparent — bagua nhìn xuyên qua) ===== */
.battu-section {
    background: rgba(253, 246, 227, 0.82);
    border: 1px solid #c8a865;
    border-left: 4px solid #8b0000;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 16px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.battu-section-title {
    color: #8b0000;
    font-size: 16px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-weight: 700;
    border-bottom: 1px solid #c8a865;
    letter-spacing: 0.3px;
}
.battu-section-title::before {
    content: '◆ ';
    color: #d4a017;
    font-size: 12px;
}
.battu-section h4 {
    color: #5a0e0e;
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 600;
}

/* ===== Ngũ Hành Chart ===== */
.battu-element-chart { margin: 12px 0; }
.battu-element-row {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.battu-element-name {
    font-weight: 700;
    text-align: center;
    padding: 4px 0;
    border-radius: 4px;
    background: #f5f5f5;
}
.battu-element-bar-wrap {
    height: 22px;
    background: #f0f0f0;
    border-radius: 11px;
    overflow: hidden;
}
.battu-element-bar {
    height: 100%;
    transition: width 0.5s ease;
    min-width: 2px;
}
.battu-element-pct {
    text-align: right;
    color: #555;
    font-weight: 600;
}
.battu-element-summary {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fffdf6;
    border-radius: 6px;
    border: 1px dashed #d4af37;
}
.battu-element-summary p { margin: 5px 0; }

/* ===== Luận giải ===== */
.battu-luan p {
    margin: 8px 0;
    text-align: justify;
}
.battu-seasonal-note {
    background: #f9f5e8;
    padding: 10px 14px;
    border-left: 3px solid #b8860b;
    border-radius: 4px;
    margin: 14px 0;
}
.battu-vuong-suy {
    background: #fdf8f8;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px dashed #c08080;
    margin-top: 14px;
}

/* ===== Dụng Thần ===== */
.battu-dung-than-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.battu-dt-card {
    flex: 1;
    min-width: 130px;
    padding: 14px 12px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.battu-dt-label {
    font-size: 0.85em;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.battu-dt-value {
    font-size: 1.6em;
    font-weight: 700;
    margin-top: 4px;
}
.battu-dt-ky { opacity: 0.7; filter: grayscale(0.3); }
.battu-dt-reason {
    background: #fffdf6;
    padding: 12px 16px;
    border-left: 3px solid #b8860b;
    border-radius: 4px;
    font-style: italic;
}
.battu-dt-dung.battu-el-kim  { background: linear-gradient(135deg, #c8c8c8, #888); }
.battu-dt-dung.battu-el-moc  { background: linear-gradient(135deg, #6ab84d, #3a7029); }
.battu-dt-dung.battu-el-thuy { background: linear-gradient(135deg, #4a90d9, #2c5e9e); }
.battu-dt-dung.battu-el-hoa  { background: linear-gradient(135deg, #e25a5a, #b02020); }
.battu-dt-dung.battu-el-tho  { background: linear-gradient(135deg, #d4ac3a, #8c6915); }
.battu-dt-hy.battu-el-kim   { background: linear-gradient(135deg, #d6d6d6, #aaa); }
.battu-dt-hy.battu-el-moc   { background: linear-gradient(135deg, #7dc063, #4a8b3a); }
.battu-dt-hy.battu-el-thuy  { background: linear-gradient(135deg, #5fa0e0, #3d70b2); }
.battu-dt-hy.battu-el-hoa   { background: linear-gradient(135deg, #e87878, #c33); }
.battu-dt-hy.battu-el-tho   { background: linear-gradient(135deg, #dcbc4f, #b8860b); }
.battu-dt-ky.battu-el-kim   { background: linear-gradient(135deg, #c8c8c8, #888); }
.battu-dt-ky.battu-el-moc   { background: linear-gradient(135deg, #6ab84d, #3a7029); }
.battu-dt-ky.battu-el-thuy  { background: linear-gradient(135deg, #4a90d9, #2c5e9e); }
.battu-dt-ky.battu-el-hoa   { background: linear-gradient(135deg, #e25a5a, #b02020); }
.battu-dt-ky.battu-el-tho   { background: linear-gradient(135deg, #d4ac3a, #8c6915); }

.battu-advice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.battu-advice-card {
    background: #fdf8e8;
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 10px 14px;
}
.battu-advice-h {
    color: #7b1414;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ===== Phân tích Ngũ Hành sâu ===== */
.battu-nh-sau {
    background: #fff;
    border-left: 3px solid #b8860b;
    padding: 10px 14px;
    margin: 8px 0;
    border-radius: 4px;
}
.battu-nh-sau-thua { border-left-color: #c33; background: #fdf6f6; }
.battu-nh-sau-thieu { border-left-color: #3d70b2; background: #f6f9fd; }
.battu-nh-sau h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
}
.battu-nh-sau h4 small {
    font-size: 10px;
    background: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    color: #8b0000;
    font-weight: 700;
}
.battu-nh-sau p {
    margin: 4px 0;
    font-size: 14.5px;
    line-height: 1.5;
}
.battu-nh-sau-hoa-giai {
    background: #f9efd3;
    padding: 6px 10px;
    border-radius: 3px;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #5a0e0e;
}

/* ===== Khuyến nghị 6 mặt ===== */
.battu-kn-intro {
    background: #fdf6e3;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #d4a017;
    font-size: 13px;
    margin-bottom: 10px;
}
.battu-kn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.battu-kn-card {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px 14px;
}
.battu-kn-card h4 {
    margin: 0 0 6px;
    color: #8b0000;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px dashed #c8a865;
    padding-bottom: 4px;
}
.battu-kn-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    color: #2c1810;
}

/* ===== Luận Mệnh Cung ===== */
.battu-mc-note {
    margin-top: 10px !important;
    font-size: 11px;
    color: #888;
    border-top: 1px dotted #c8a865;
    padding-top: 6px;
}

/* ===== Option D — Extended sections ===== */
.battu-luan-list {
    margin: 6px 0;
    padding-left: 20px;
}
.battu-luan-list li { margin: 4px 0; font-size: 14.5px; line-height: 1.5; }
.battu-luan-tip {
    background: #f9efd3;
    padding: 6px 12px;
    border-left: 3px solid #d4a017;
    border-radius: 3px;
    font-size: 12px;
    margin: 8px 0;
}
.battu-section h5 {
    color: #b8860b;
    margin: 6px 0 4px;
    font-size: 13px;
}

/* Đại Vận chi tiết */
.battu-dv-detail {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 10px 0;
}
.battu-dv-detail h4 {
    margin: 0 0 8px;
    color: #8b0000;
    font-size: 14px;
    border-bottom: 1px dashed #c8a865;
    padding-bottom: 4px;
}
.battu-dv-detail h4 small { font-weight: 400; color: #888; font-size: 11px; }
.battu-dv-tt-label { background: #f9efd3; padding: 1px 6px; border-radius: 3px; color: #8b0000; }
.battu-dv-detail-grid {
    display: grid; grid-template-columns: 1fr; gap: 4px;
    margin-top: 8px; font-size: 12px;
}
.battu-dv-detail-grid > div {
    padding: 4px 0;
    border-top: 1px dotted #eee;
}

/* Lưu Niên chi tiết */
.battu-ln-tongquan {
    background: #fdf6e3;
    padding: 10px 14px;
    border-left: 3px solid #b8860b;
    border-radius: 4px;
    font-size: 13px;
}
.battu-ln-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-top: 10px;
    font-size: 12px;
}
.battu-ln-action {
    grid-column: 1 / -1;
    background: #f0f8ed;
    padding: 6px 10px;
    border-radius: 3px;
}

/* Tam Tai table */
.battu-tt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 12px;
}
.battu-tt-table th {
    background: #8b0000;
    color: #f5deb3;
    padding: 6px 8px;
    text-align: center;
    border: 1px solid #5a0e0e;
}
.battu-tt-table td {
    padding: 5px 8px;
    border: 1px solid #c8a865;
    text-align: center;
    background: #fff;
}
.battu-tt-table .battu-tt-good { background: #f0f8ed; color: #2c5e2c; font-weight: 600; }
.battu-tt-table .battu-tt-bad  { background: #fdf2f2; color: #c33;    font-weight: 600; }

/* Phong thủy grid */
.battu-pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.battu-pt-card {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px 12px;
}
.battu-pt-card h4 {
    margin: 0 0 6px;
    color: #8b0000;
    font-size: 13px;
    border-bottom: 1px dashed #c8a865;
    padding-bottom: 3px;
}
.battu-pt-card p { font-size: 12px; line-height: 1.5; margin: 0; }

/* Thần Sát detail */
.battu-ts-detail {
    background: #fff;
    border-left: 3px solid #b8860b;
    padding: 8px 14px;
    margin: 8px 0;
    border-radius: 4px;
}
.battu-ts-detail h4 {
    margin: 0 0 4px;
    color: #8b0000;
    font-size: 13px;
}
.battu-ts-detail p { font-size: 12.5px; margin: 4px 0; }

/* Timeline 100 năm SVG */
.battu-timeline-wrap {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 8px 10px;
    overflow-x: auto;
}
.battu-timeline-svg {
    display: block;
    width: 100%;
    min-width: 800px;
    height: 80px;
}

/* Trích dẫn cổ thư */
.battu-trich-dan-section { background: rgba(249, 239, 211, 0.85); }
.battu-quote {
    border-left: 4px solid #8b0000;
    padding: 10px 16px;
    margin: 10px 0;
    background: #fff;
    border-radius: 0 4px 4px 0;
}
.battu-quote-text {
    font-size: 16px;
    font-style: italic;
    color: #8b0000;
    margin: 0 0 4px;
    font-weight: 600;
}
.battu-quote footer {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}
.battu-quote-explain {
    font-size: 12.5px;
    margin: 6px 0 0;
    color: #2c1810;
    border-top: 1px dotted #c8a865;
    padding-top: 6px;
}

/* So sánh Bát Tự — đồng bộ width với .battu-result */
.battu-cmp-result {
    max-width: 1100px;
    margin: 16px auto;
    background: #fdf6e3;
    padding: 16px;
    border: 2px solid #8b0000;
    border-radius: 6px;
    font-family: var(--tvq-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.battu-cmp-header h2 {
    text-align: center;
    color: #8b0000;
    margin: 0 0 12px;
    font-size: 20px;
}
.battu-cmp-verdict {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    margin-bottom: 14px;
}
.battu-cmp-verdict.verdict-excellent { border-color: #d4a017; background: linear-gradient(135deg, #fff8e0, #ffe9a8); }
.battu-cmp-verdict.verdict-good      { border-color: #4a8b3a; background: #f0f8ed; }
.battu-cmp-verdict.verdict-ok        { border-color: #2c5e9e; background: #f0f4f8; }
.battu-cmp-verdict.verdict-caution   { border-color: #b8860b; background: #fdf6e3; }
.battu-cmp-verdict.verdict-difficult { border-color: #c33;    background: #fdf2f2; }
.battu-cmp-score-num {
    font-size: 36px;
    font-weight: 700;
    color: #8b0000;
}
.battu-cmp-score-label {
    font-size: 16px;
    color: #5a0e0e;
    margin-top: 4px;
}
.battu-cmp-advice {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #2c1810;
}
.battu-cmp-aspects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.battu-cmp-aspect {
    background: #fff;
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px 14px;
}
.battu-cmp-aspect h4 {
    margin: 0 0 6px;
    color: #8b0000;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.battu-cmp-aspect-score {
    background: #f9efd3;
    color: #8b0000;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
}
.battu-cmp-aspect p { font-size: 14px; margin: 4px 0; line-height: 1.5; }
.battu-cmp-pillars { color: #888; font-size: 11.5px !important; }

.battu-cmp-fieldset {
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 12px;
}
.battu-cmp-fieldset legend {
    color: #8b0000;
    font-weight: 700;
    padding: 0 8px;
}

/* Mobile so sánh */
@media (max-width: 720px) {
    .battu-cmp-aspects { grid-template-columns: 1fr; }
    .battu-ln-detail-grid { grid-template-columns: 1fr; }
    .battu-dv-detail-grid { font-size: 11.5px; }
    .battu-timeline-svg { min-width: 600px; height: 70px; }
}

/* ===== Cách Cục ===== */
.battu-cach-cuc {
    background: #fffdf6;
    border-left: 3px solid #b8860b;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}
.battu-cach-cuc-label {
    color: #888;
    font-size: 0.9em;
    margin: 2px 0 8px;
}

/* ===== Trụ luận ===== */
.battu-tru-luan {
    border-bottom: 1px dashed #ddd;
    padding: 12px 0;
}
.battu-tru-luan:last-child { border-bottom: none; }
.battu-tru-luan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.battu-tru-luan-pos {
    background: #7b1414;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9em;
}
.battu-tru-luan-pillar {
    background: #fdf8e8;
    color: #7b1414;
    padding: 3px 8px;
    border: 1px solid #b8860b;
    border-radius: 4px;
    font-weight: 700;
}
.battu-tru-luan-tt {
    background: #f0f0f0;
    color: #444;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.88em;
}
.battu-tru-luan-age { color: #999; font-size: 0.88em; }
.battu-tru-aspect { color: #5a0e0e; margin: 4px 0; }

/* ===== Hợp Xung ===== */
.battu-hop-xung-list {
    list-style: none;
    padding: 0;
}
.battu-hx-item {
    background: #f9f9f9;
    margin: 6px 0;
    padding: 8px 14px;
    border-radius: 4px;
    border-left: 3px solid #b8860b;
}
.battu-hx-item.battu-hx-luc_xung,
.battu-hx-item.battu-hx-luc_hai,
.battu-hx-item.battu-hx-hinh,
.battu-hx-item.battu-hx-tu_hinh {
    border-left-color: #c33;
    background: #fdf2f2;
}
.battu-hx-item.battu-hx-luc_hop,
.battu-hx-item.battu-hx-tam_hop,
.battu-hx-item.battu-hx-ban_hop {
    border-left-color: #6ab84d;
    background: #f0f8ed;
}
.battu-hx-icon { margin-right: 6px; }

/* ===== Đại Vận NESTED (TLDQ-style, Tử Vi palette) ===== */
.battu-dv-direction {
    background: #f9efd3;
    padding: 8px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    border-left: 3px solid #8b0000;
    font-size: 13px;
}
.battu-dv-nested {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0;
    border: 1px solid #c8a865;
    background: #fdf6e3;
}
.battu-dv-box {
    background: #fdf6e3;
    border-right: 1px solid #c8a865;
    display: flex;
    flex-direction: column;
}
.battu-dv-box:last-child { border-right: none; }
.battu-dv-head {
    background: linear-gradient(180deg, #a52020 0%, #7b1414 100%);
    color: #f5deb3;
    padding: 8px 4px;
    text-align: center;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    border-bottom: 1px solid #c8a865;
    font-size: 12px;
}
.battu-dv-period {
    font-size: 0.85em;
    opacity: 0.92;
}
.battu-dv-pillar {
    font-size: 1.1em;
    font-weight: 700;
}
.battu-dv-pillar span {
    padding: 0 2px;
}
.battu-dv-pillar span.battu-el-kim,
.battu-dv-pillar span.battu-el-moc,
.battu-dv-pillar span.battu-el-thuy,
.battu-dv-pillar span.battu-el-hoa,
.battu-dv-pillar span.battu-el-tho {
    background: transparent;
    color: #fff;
}
.battu-dv-tt {
    font-size: 0.78em;
    opacity: 0.85;
    font-weight: 400;
    display: block;
}
.battu-dv-ln {
    list-style: none;
    padding: 4px 6px;
    margin: 0;
    font-size: 0.78em;
    flex: 1;
}
.battu-dv-ln li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 4px;
    padding: 2px 0;
    align-items: center;
    border-bottom: 1px dotted #eee;
    line-height: 1.3;
}
.battu-dv-ln li:last-child { border-bottom: none; }
.battu-ln-y {
    color: #888;
    font-weight: 600;
}
.battu-ln-p {
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.92em;
    text-align: center;
}
.battu-ln-t {
    display: none; /* hide ở compact view, hover hiện qua title */
}

/* ===== Lưu Niên zoom grid (như cũ) ===== */
.battu-ln-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.battu-ln-card {
    background: #fffdf6;
    border: 1px solid #b8860b;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}
.battu-ln-year {
    font-weight: 700;
    color: #7b1414;
    font-size: 1.05em;
}
.battu-ln-pillar {
    font-size: 1.3em;
    font-weight: 700;
    color: #b8860b;
    margin: 4px 0;
}
.battu-ln-tt {
    background: #f5f5f5;
    color: #444;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.88em;
}
.battu-ln-napam {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    margin: 6px auto;
    display: inline-block;
}
.battu-ln-note {
    font-size: 0.86em;
    text-align: left;
    color: #555;
    margin-top: 6px;
}

/* ===== Kết luận + cross-link ===== */
.battu-conclusion-section { background: linear-gradient(135deg, #fffdf6, #fdf8e8); }
.battu-conclusion { font-size: 1.05em; color: #5a0e0e; }
.battu-crosslink-section { text-align: center; background: #fdf8e8; }
.battu-crosslink-btn {
    display: inline-block;
    margin-left: 8px;
    background: #7b1414;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.battu-crosslink-btn:hover { background: #5a0e0e; color: #fff; }

/* ===== Form wrap (Roboto + Tử Vi palette) ===== */
.battu-form-wrap {
    max-width: 560px;
    margin: 30px auto;
}

/* Person block (cho cả người 1 + người 2 collapsible) */
.battu-person-block {
    border: 1px solid #c8a865;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fffdf6;
}
.battu-person-1 { border-left: 3px solid #8b0000; }
.battu-person-2 { border-left: 3px solid #4a8b3a; background: #f9fdf6; }
.battu-person-header {
    margin: 0 0 8px;
    color: #8b0000;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px dashed #c8a865;
    padding-bottom: 5px;
}
.battu-person-2 .battu-person-header { color: #3a7029; }

/* Button toggle Person 2 */
.battu-add-p2-wrap { text-align: center; margin: 14px 0; }
.battu-add-p2-btn {
    background: #fff;
    border: 1.5px dashed #4a8b3a;
    color: #3a7029;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--tvq-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.battu-add-p2-btn:hover {
    background: #f0f8ed;
    border-style: solid;
}
.battu-add-p2-btn[aria-expanded="true"] {
    background: #fdf6e3;
    border-color: #8b6914;
    color: #8b6914;
}

/* Spacer cho hour row (giữ layout 3 cột với 2 select + 1 spacer) */
.battu-hour-spacer { display: inline-block; }

/* CTA cuối lá số đơn — mời so sánh */
.battu-cta-compare {
    background: linear-gradient(135deg, #f0f8ed, #fdf6e3) !important;
    border-left-color: #4a8b3a !important;
    text-align: center;
}
.battu-cta-compare-btn {
    display: inline-block;
    background: #4a8b3a;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(74,139,58,0.3);
    transition: all 0.15s;
}
.battu-cta-compare-btn:hover {
    background: #3a7029;
    box-shadow: 0 3px 8px rgba(74,139,58,0.5);
    transform: translateY(-1px);
}

/* Compare card ĐẦU TRANG (khi đang ở compare mode) */
.battu-cmp-top {
    margin-bottom: 20px;
    border: 3px solid #8b0000;
    box-shadow: 0 4px 16px rgba(139, 0, 0, 0.2);
}
.battu-cmp-note {
    text-align: center;
    color: #8b6914;
    font-size: 13px;
    margin: 14px 0 4px;
    padding-top: 10px;
    border-top: 1px dashed #c8a865;
}
.battu-cmp-score-num small { font-size: 14px; font-weight: 400; color: #8b6914; }
/* Trong form Bát Tự dùng class .tuvi-form-scroll → inherit style từ tuvi.css.
   Force Roboto cho mọi element bên trong form */
.battu-form-wrap .tuvi-form-scroll,
.battu-form-wrap .tuvi-form-scroll * {
    font-family: var(--tvq-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* ===== Sidebar cross-link (in Tử Vi sidebar) ===== */
.tuvi-side-battu-btn {
    display: inline-block;
    background: #7b1414;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88em;
}
.tuvi-side-battu-btn:hover { background: #5a0e0e; color: #fff !important; }
.tuvi-side-battu-link p { color: #2c1810; line-height: 1.5; }

/* ===== Fullscreen mode ===== */
.battu-result.is-fullscreen {
    max-width: none;
    background: #fdf6e3;
    padding: 30px;
    overflow-y: auto;
    height: 100vh;
}

/* ===== Mobile tablet (≤900px) ===== */
@media (max-width: 900px) {
    .battu-result { padding: 6px; margin: 6px auto; }
    .battu-bagua-watermark { opacity: 0.04; }
    .battu-trigram, .battu-taiji { font-size: 40px; }
    .battu-taiji { font-size: 56px; }

    .battu-compact-table { font-size: 11px; }
    .battu-compact-table tbody th {
        width: 72px;
        font-size: 10px;
        padding: 3px 6px;
        letter-spacing: 0;
    }
    .battu-compact-table th,
    .battu-compact-table td {
        padding: 2px 3px;
    }
    .battu-row-can td,
    .battu-row-chi td { font-size: 1.05em; padding: 3px 2px; }
    .battu-bt-stem,
    .battu-bt-branch { font-size: 1.2em; }
    .battu-tc-line {
        grid-template-columns: 36px 50px 1fr;
        font-size: 9.5px;
        gap: 3px;
    }
    .battu-tc-stem { font-size: 9.5px; padding: 0 4px; }

    /* Header stack vertical */
    .battu-header-row1 { flex-direction: column; gap: 4px; align-items: stretch; }
    .battu-header-dm { text-align: center; min-width: 0; }
    .battu-header-name h2 { font-size: 16px; }
    .battu-header-info-compact { gap: 2px 8px; font-size: 11px; }

    .battu-toolbar { gap: 4px; padding: 4px; }
    .battu-tool-btn { padding: 4px 8px; font-size: 11px; }

    /* Đại Vận nested → 4 → 2 cols */
    .battu-dv-nested { grid-template-columns: repeat(2, 1fr); }
    .battu-section { padding: 10px 12px; margin: 10px 0; }
    .battu-section-title { font-size: 14px; }
    .battu-dt-card { min-width: 90px; padding: 8px 6px; }
    .battu-dt-value { font-size: 1.3em; }
}

/* ===== Mobile phone (≤640px) — aggressive shrink ===== */
@media (max-width: 640px) {
    .battu-result { padding: 4px; border-width: 1px; }
    .battu-title-bar { padding: 4px 18px; }
    .battu-title-main { font-size: 13px; }

    /* Sticky first column trên bảng compact + sub-tables để scroll horizontal đỡ mất context */
    .battu-compact-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .battu-compact-table { font-size: 10.5px; min-width: 600px; }
    .battu-compact-table tbody th,
    .battu-dv-table th.battu-dv-row-th,
    .battu-ln-table th.battu-dv-row-th {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #f9efd3;
        box-shadow: 2px 0 4px rgba(0,0,0,0.08);
        width: 64px !important;
        min-width: 64px;
        font-size: 9.5px;
        padding-left: 6px;
    }
    .battu-compact-table thead th { font-size: 10px; padding: 4px 3px; }
    .battu-row-can td, .battu-row-chi td { font-size: 1em; }
    .battu-bt-stem, .battu-bt-branch { font-size: 1.1em; }
    .battu-tc-cell { padding: 2px 4px; }
    .battu-tc-line { grid-template-columns: 32px 44px 1fr; font-size: 9px; }
    .battu-tc-stem { font-size: 9px; padding: 0 3px; }

    /* Sub-tables: min-width để giữ proportion + scroll */
    .battu-dv-table, .battu-ln-table { min-width: 600px; }
    .battu-dv-cell, .battu-ln-cell { padding: 2px 1px; }
    .battu-dv-cell span, .battu-ln-cell span { font-size: 10px; }
    .battu-dv-tt-tag, .battu-ln-tt-tag { font-size: 9px !important; }
    .battu-dv-row-age td, .battu-dv-row-year td,
    .battu-ln-row-age td, .battu-ln-row-year td { font-size: 9px; padding: 1px; }

    /* Mệnh row text smaller */
    .battu-menh-label { font-size: 9px; }
    .battu-menh-value { font-size: 11px; }
    .battu-menh-kv { font-size: 10px; }

    /* Đại Vận nested → 1 col mobile */
    .battu-dv-nested { grid-template-columns: 1fr; }
    .battu-dv-box { border-right: none; border-bottom: 1px solid #c8a865; }

    /* Lưu Niên zoom grid → 2 col mobile */
    .battu-ln-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .battu-ln-card { padding: 8px; }

    /* Hợp Xung + Thần Sát stacks */
    .battu-than-sat-grid, .battu-advice-grid {
        grid-template-columns: 1fr;
    }

    /* Dung Than cards stack */
    .battu-dung-than-summary { gap: 6px; }
    .battu-dt-card { flex-basis: calc(50% - 3px); }

    /* Toolbar: split 2 rows neatly */
    .battu-toolbar { gap: 3px; padding: 4px 2px; }
    .battu-tool-btn { padding: 4px 6px; font-size: 10.5px; flex: 1 1 calc(33.33% - 3px); min-width: 0; }

    /* Method footer center on mobile */
    .battu-method-footer { text-align: center; font-size: 10px; }

    /* Header info: less items per row */
    .battu-header-info-compact span { flex-basis: 100%; }
}

/* ===== Very small (≤380px) ===== */
@media (max-width: 380px) {
    .battu-bagua-watermark { display: none; } /* hide watermark on tiny screens */
    .battu-title-main { font-size: 12px; }
    .battu-header-name h2 { font-size: 14px; }
    .battu-dt-card { flex-basis: 100%; }
}

/* ===== Print (giữ MÀU GỐC + show full chart) =====
 * Bug cũ: strip all colors → ảnh in xám xịt mất design
 * Fix: dùng print-color-adjust: exact để FORCE browser in cả màu nền
 */
@media print {
    @page { size: A4 portrait; margin: 6mm; }

    /* Force browser in cả màu background (Chrome/Safari/Firefox) */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ẩn UI không thuộc lá số (site chrome + toolbar) */
    .battu-toolbar,
    .battu-toast,
    .battu-crosslink-section,
    nav, header, footer,
    #wpadminbar,
    .site-header, .site-footer, .sidebar, .widget-area,
    #masthead, #colophon, #secondary {
        display: none !important;
    }

    /* Lá số: giữ nguyên màu gốc, chỉ tinh chỉnh layout cho A4 */
    .battu-result {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6mm !important;
        box-shadow: none !important;
        position: static !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    .battu-result * { visibility: visible !important; }

    /* Section page-break friendly */
    .battu-section,
    .battu-compact-table,
    .battu-compact-wrap,
    .battu-header-block,
    .battu-kn-card,
    .battu-nh-sau,
    .battu-cach-cuc,
    .battu-tru-luan {
        page-break-inside: avoid;
        box-shadow: none !important;
    }
    .battu-compact-table tr,
    .battu-dv-table tr,
    .battu-ln-table tr { page-break-inside: avoid; }

    /* Bagua watermark — giảm opacity in (đỡ tốn mực) */
    .battu-result .battu-bagua-watermark { opacity: 0.05 !important; }

    /* Đại vận nested: trải 4 cột thay vì 2 trên giấy (rộng hơn) */
    .battu-dv-nested { grid-template-columns: repeat(4, 1fr) !important; }
}