/* ============ ROOT & BIẾN MÀU ============ */
:root {
    --pt-bg: #fffbf5; /* Nền kem cổ điển */
    --pt-card-bg: linear-gradient(135deg, #ffffff 0%, #f7f0f0 100%);
    --pt-primary: #8a1c14; /* Đỏ đô */
    --pt-text: #333333;
    --pt-text-light: #666666;
    --pt-good: #27ae60; /* Xanh lá cho điềm cát */
    --pt-bad: #c0392b; /* Đỏ cho điềm hung */
    --pt-border: #e8e0d5;

    /* Nền chung mang sắc thái giấy cổ */
    --bg-main: #FAFAF7; /* Trắng ngà nhẹ nhàng */
    --bg-card: #F2EBE1; /* Giấy dó sẫm hơn một chút để nổi bật card */
    /* Cặp màu Âm - Dương chủ đạo */
    --color-duong-lich: #C0392B; /* Đỏ Chu Sa trầm - Dùng cho nút/badge Dương lịch */
    --color-am-lich: #1B365D; /* Xanh Lapis (Xanh dương sâu) - Dùng cho nút/badge Âm lịch */
    /* Chữ và Điểm nhấn */
    --text-main: #2C231F; /* Nâu đen (không dùng đen tuyền) */
    --text-muted: #7A6F66; /* Nâu xám cho các dòng chú thích */
    --accent-gold: #C29B62; /* Vàng đồng nhạt làm viền card hoặc icon */
    /* Màu chức năng Đổng Công / Phong thủy */
    --color-tot: #27AE60; /* Xanh ngọc lục bảo (Kiết) */
    --color-xau: #C0392B; /* Đỏ chu sa (Hung) */
}

/* ============ KHUNG TRA CỨU NGÀY THÁNG ============ */
.pt-date-search {
    background: rgba(138, 28, 20, 0.03); /* Phủ một lớp nền đỏ đô siêu nhạt */
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.pt-search-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pt-search-label {
    font-weight: bold;
    color: var(--pt-text);
    min-width: 90px;
    font-size: 0.95rem;
}

.pt-search-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
}

.pt-slash {
    color: var(--pt-primary);
    font-weight: 300;
}

.pt-input-date {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 1.15rem;
    outline: none;
    transition: 0.2s;
    color: var(--ink);
}
.pt-input-date::-webkit-outer-spin-button,
.pt-input-date::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*.pt-input[type=number] {
    -moz-appearance: textfield;
}
*/
/* 2. Khi DI CHUỘT VÀO (Hover) thì ép buộc hiện mũi tên lên */
.pt-input-date:hover::-webkit-outer-spin-button,
.pt-input-date:hover::-webkit-inner-spin-button {
    -webkit-appearance: auto !important;
}

/*.pt-input[type=number]:hover {
    -moz-appearance: number-input !important;
}*/
.pt-input, .pt-select {
    padding: 9px 12px;
    border: 1px solid rgba(184,134,11,0.3);
    border-radius: var(--radius-sm);
    background: rgba(253,248,238,0.9);
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    outline: none;
}

.pt-input-year {
    width: 80px;
}

.pt-input-date:focus {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 2px rgba(138, 28, 20, 0.1);
}

/* Ẩn mũi tên lên xuống của input number trên một số trình duyệt */
.pt-input-date::-webkit-outer-spin-button,
.pt-input-date::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pt-btn-action {
    background: var(--pt-primary);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.2s;
    min-width: 120px;
}

    .pt-btn-action:hover {
        background: #6b140e;
    }

.pt-btn-outline {
    background: transparent;
    color: var(--pt-primary);
    border: 1px solid var(--pt-primary);
}

    .pt-btn-outline:hover {
        background: var(--pt-primary);
        color: #fff;
    }

.pt-search-divider {
    border: 0;
    border-top: 1px dashed var(--pt-border);
    margin: 12px 0;
}

/* ============ RESPONSIVE CHO KHUNG TRA CỨU ============ */
@@media (max-width: 576px) {
    .pt-search-group {
        flex-direction: column;
        align-items: stretch;
    }

    .pt-search-label {
        text-align: center;
        margin-bottom: 5px;
    }

    .pt-btn-action {
        width: 100%;
        margin-top: 5px;
    }
}

/* ============ HÀNG NGÀY THÁNG & TỔNG QUAN ============ */
.pt-hero-summary-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia 2 cột bằng nhau */
    gap: 20px;
    margin-bottom: 20px;
}

    /* Ép chiều cao 2 khối bằng nhau và tự căn chỉnh nội dung */
    .pt-hero-summary-row .pt-card {
        margin-bottom: 0; /* Xóa margin thừa vì đã có gap của lưới */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Đẩy Bát Tự và Lưới Tổng quan xuống đáy cho đều nhau */
    }

/* Xử lý riêng phần Đánh giá chung để tràn 2 cột bên trong bảng Tổng quan */
.pt-info-tile.pt-tile-full {
    grid-column: 1 / -1;
    background: #f0fdf4; /* Đổi màu nền nhẹ cho phần đánh giá nổi bật hẳn lên */
    border: 1px solid #bbf7d0;
    text-align: center;
}

    .pt-info-tile.pt-tile-full .lbl {
        color: #166534;
    }

    .pt-info-tile.pt-tile-full .val {
        font-size: 1.1rem;
    }

/* ============ RESPONSIVE CHO HÀNG NÀY ============ */
/* Trên màn hình iPad dọc hoặc Desktop nhỏ (Dưới 992px) */
@@media (max-width: 991.98px) {
    .pt-hero-summary-row {
        grid-template-columns: 1fr; /* Trả về xếp dọc trên màn hình nhỏ để không bị ép chữ */
    }
}

/* Trên màn hình Mobile (Dưới 768px) */
@@media (max-width: 767.98px) {
    .pt-hero-summary-row {
        gap: 15px;
    }
}
/* ============ KHUNG BAO ============ */
.pt-date-viewer {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--pt-text);
    font-size: 15px;
}

.pt-daicat {
    font-weight: bold;
    color:red;
}
.pt-thucat{
    color:red;
}
.pt-daihung {
    font-weight: bold;
    color:black;
}
.pt-thuhung{
    color:black;
}

/* ============ KHỐI CARD CHUNG ============ */
pt-card {
    background: --bg-card;
}

.pt-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--pt-primary);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--pt-border);
    padding-bottom: 10px;
    text-transform: uppercase;
}

/* ============ HERO SECTION (Ngày tháng) ============ */
.pt-hero-card {
    text-align: center;
    border: 1px solid #f1ddb9;
}

.pt-date-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
/*    margin-bottom: 20px;*/
}

.pt-date-primary h2 {
    font-size: 1.8rem;
    color: var(--pt-primary);
    margin: 0 0 5px 0;
}

.pt-lunar-date {
    font-size: 1.1rem;
    color: var(--pt-text-light);
    margin: 0;
}

.pt-btn-nav {
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid var(--pt-border);
    background: #fff;
    cursor: pointer;
    transition: 0.2s;
    background: var(--pt-primary);
    color: #fff;
    font-size: 16px;
}

    .pt-btn-nav:hover {
        background: #6b140e;
    }

/* Lưới Can Chi (Bát Tự) */
.pt-bazi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 8px;
}

.pt-bazi-item {
    display: flex;
    flex-direction: column;
}

    .pt-bazi-item .label {
        font-size: 0.85rem;
        color: var(--pt-text-light);
        margin-bottom: 4px;
    }

    .pt-bazi-item .value {
        font-weight: bold;
        font-size: 1.1rem;
    }

    .pt-bazi-item.highlight .value {
        color: var(--pt-primary);
    }
/* Đỏ ngày chủ */

/* ============ LƯỚI TỔNG QUAN ============ */
.pt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pt-info-tile {
    padding: 10px;
    background: var(--pt-bg);
    border-radius: 6px;
}

    .pt-info-tile .lbl {
        color: var(--pt-text-light);
        font-size: 0.9rem;
    }

    .pt-info-tile .val {
        font-weight: bold;
        margin-left: 5px;
    }

/* ============ CÁC TIỆN ÍCH HIỂN THỊ ============ */
.pt-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.text-good {
    color: var(--pt-good) !important;
    font-weight: bold;
}

.text-red {
    color: var(--pt-bad) !important;
}

.text-green {
    color: var(--pt-good) !important;
}

.border-red {
    border-top: 3px solid var(--pt-bad);
}

.border-green {
    border-top: 3px solid var(--pt-good);
}

.pt-list {
    padding-left: 20px;
    margin: 0;
    line-height: 1.6;
}

/* ============ GIỜ HOÀNG ĐẠO (Tags) ============ */
.pt-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.pt-hour-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.95rem;
    border: 1px solid var(--pt-border);
}

    .pt-hour-tag.good {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
        font-weight: bold;
    }

    .pt-hour-tag span {
        font-size: 0.8rem;
        font-weight: normal;
        color: var(--pt-text-light);
        margin-bottom: 2px;
    }

/* ============ RESPONSIVE (MOBILE) ============ */
@@media (max-width: 768px) {
    .pt-bazi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .pt-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pt-summary-grid {
        grid-template-columns: 1fr;
    }

    .pt-date-switch h2 {
        font-size: 1.4rem;
    }
}


/* ============ CẬP NHẬT CONTAINER CHÍNH ĐỂ TRÀN FULL BÊN PHẢI ============ */
.pt-date-viewer, .pt-full-width-container {
    width: 100%;
    max-width: 100%; /* Bỏ giới hạn 900px cũ để layout tràn viền */
    box-sizing: border-box;

}

/* ============ CẤU TRÚC GRID ĐA DỤNG ============ */
/* Lưới 4 cột */
.pt-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}
.pt-grid-1{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:14px;
    margin-bottom:15px;
}
/* Lưới 2 cột (Dành cho Đổng Công & Trạng Trình) */
.pt-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

/* ============ ĐỊNH DẠNG LIST & NỘI DUNG ============ */
/* List Flex: Căn đều 2 bên (ví dụ: Dần --- Kim Quỹ) */
.pt-list-flex {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pt-list-flex li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px dashed var(--pt-border);
        font-size: 0.95rem;
    }

        .pt-list-flex li:last-child {
            border-bottom: none;
        }

/* Cấu hình cho thẻ UL để chia làm 2 cột */
.pt-list-lucnham-flex {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia thành 2 cột bằng nhau (50% - 50%) */
    column-gap: 30px; /* Khoảng cách giữa cột bên trái và cột bên phải */
    row-gap: 12px; /* Khoảng cách hàng giữa các giờ */
    list-style: none; /* Bỏ dấu chấm tròn mặc định của thẻ ul */
    padding: 15px; /* Khoảng cách đệm bên trong thẻ card */
    margin: 0;
}

    /* Cấu hình cho mỗi dòng (thẻ LI) bên trong */
    .pt-list-lucnham-flex li {
        display: flex;
        justify-content: space-between; /* Đẩy chữ "Dần" sang trái kịch đường, "Xích Khẩu" sang phải kịch đường */
        align-items: center;
        border-bottom: 1px dashed #eee; /* Thêm đường gạch đứt nhẹ bên dưới cho sang xịn mịn (tùy chọn) */
        padding-bottom: 4px;
    }
.pt-list-nuoclon-flex {
/*    display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/ /* Chia thành 2 cột bằng nhau (50% - 50%) */
    column-gap: 30px; /* Khoảng cách giữa cột bên trái và cột bên phải */
    row-gap: 12px; /* Khoảng cách hàng giữa các giờ */
    list-style: none; /* Bỏ dấu chấm tròn mặc định của thẻ ul */
    padding: 15px; /* Khoảng cách đệm bên trong thẻ card */
    margin: 0;
}

    /* Cấu hình cho mỗi dòng (thẻ LI) bên trong */
    .pt-list-nuoclon-flex li {
        display: flex;
        justify-content: space-between; /* Đẩy chữ "Dần" sang trái kịch đường, "Xích Khẩu" sang phải kịch đường */
        align-items: center;
        border-bottom: 1px dashed #eee; /* Thêm đường gạch đứt nhẹ bên dưới cho sang xịn mịn (tùy chọn) */
        padding-bottom: 4px;
    }
.pt-list-hoangdao-flex {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia thành 2 cột bằng nhau (50% - 50%) */
    column-gap: 30px; /* Khoảng cách giữa cột bên trái và cột bên phải */
    row-gap: 12px; /* Khoảng cách hàng giữa các giờ */
    list-style: none; /* Bỏ dấu chấm tròn mặc định của thẻ ul */
    padding: 15px; /* Khoảng cách đệm bên trong thẻ card */
    margin: 0;
}

    /* Cấu hình cho mỗi dòng (thẻ LI) bên trong */
    .pt-list-hoangdao-flex li {
        display: flex;
        justify-content: space-between; /* Đẩy chữ "Dần" sang trái kịch đường, "Xích Khẩu" sang phải kịch đường */
        align-items: center;
        border-bottom: 1px dashed #eee; /* Thêm đường gạch đứt nhẹ bên dưới cho sang xịn mịn (tùy chọn) */
        padding-bottom: 4px;
    }

/* Thêm màu đỏ cho các cung tốt nếu bạn chưa có class này */
.text-red {
    color: red !important;
}


/* List lưới 2 cột bên trong Card (Cho phần Trạng Trình) */
.pt-list-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
}

    .pt-list-grid-2 li strong {
        color: var(--pt-primary);
    }

/* List đơn giản */
.pt-list-simple {
    list-style: square inside;
    padding: 0;
    margin: 0;
    line-height: 1.8;
}

/* Card cỡ nhỏ (Cho phần Tam Sát) */
.pt-card-sm {
    padding: 12px 15px;
    text-align: center;
}

.pt-card-title-sm {
    font-size: 0.95rem;
    color: var(--pt-primary);
    margin: 0 0 8px 0;
    font-weight: bold;
    text-transform: uppercase;
}

/* Khu vực thông tin Thủy Triều */
.pt-tide-info ul {
    list-style: none;
    padding-left: 10px;
    margin: 5px 0 10px 0;
    border-left: 2px solid var(--pt-border);
}

.pt-divider {
    border: 0;
    border-top: 1px dashed var(--pt-border);
    margin: 10px 0;
}

/* ============ RESPONSIVE CHO CÁC MÀN HÌNH NHỎ ============ */
/* Màn hình Tablet (Dưới 1200px) */
@@media (max-width: 1199px) {
    .pt-grid-4 {
        grid-template-columns: repeat(2, 1fr); /* Ép 4 cột thành 2 cột */
    }
}

/* Màn hình Mobile (Dưới 768px) */
@@media (max-width: 767.98px) {
    .pt-grid-4, .pt-grid-2 {
        grid-template-columns: 1fr; /* Mọi thứ đều xuống 1 cột trên điện thoại */
    }

    .pt-list-grid-2 {
        grid-template-columns: 1fr; /* Thơ Trạng Trình cũng xuống 1 cột */
    }
}