/* ========================================================== */
/* KHẮC PHỤC LỖI TRÀN NGANG MOBILE */
/* ========================================================== */
*, *::before, *::after {
    box-sizing: border-box; /* Đảm bảo padding/border không làm tăng chiều rộng vượt quá 100% */
}

/* ==========================================================================
   PHẦN 1: GIAO DIỆN TRANG QUẢN TRỊ (ADMIN)
   ========================================================================== */
#lvn-pro-packages-wrapper .packages-list-table {
    border: 1px solid #c3c4c7;
    background: #fff;
}
.package-list-header {
    display: flex;
    font-weight: bold;
    background: #f0f0f1;
    border-bottom: 1px solid #c3c4c7;
}
.package-list-header > div, .package-card-header > div {
    padding: 8px 12px;
    box-sizing: border-box;
}
.col-drag { width: 80px; text-align: center; }
.col-name { flex-grow: 1; }
.col-price { width: 150px; }
.col-actions { width: 100px; text-align: right; }

.package-card {
    border-bottom: 1px solid #e0e0e0;
}
.package-card:last-child {
    border-bottom: none;
}
.package-card-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.package-card-header:hover {
    background-color: #f8f8f8;
}
.drag-handle {
    cursor: move;
    color: #999;
}
.delete-package-btn {
    color: #d63638 !important;
}
.package-card-content {
    padding: 15px;
    background-color: #fdfdfd;
    border-top: 1px solid #e0e0e0;
}
.package-card-content .form-row {
    display: flex;
    gap: 20px;
}
.package-card-content .form-group {
    flex: 1;
    margin-bottom: 15px;
}
.package-card-content label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.package-card-content input[type="text"],
.package-card-content input[type="number"],
.package-card-content textarea {
    width: 100%;
}
.package-placeholder {
    height: 45px;
    background-color: #e0e8f0;
    border: 1px dashed #99b3d2;
}


/* ==========================================================================
   PHẦN 2: GIAO DIỆN NGƯỜI DÙNG (FRONT-END)
   ========================================================================== */

/* === A. FORM CHUNG (MIỄN PHÍ & ĐẶT HÀNG) === */
.lvn-pro-form-wrapper {
    width: 700px;
    margin: 30px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    z-index: 2;
}
.lvn-pro-form-wrapper .form-title {
    text-align: center;
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
}
.lvn-pro-form {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.lvn-pro-form .form-section {
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.lvn-pro-form .form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.lvn-pro-form .section-title {
    font-size: 1.25rem;
    color: #007bff;
    margin-bottom: 1.1rem !important;
    font-weight: 600;
}
.lvn-pro-form__group {
    margin-bottom: 1rem;
}
.lvn-pro-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.lvn-pro-form__col {
    flex: 1;
    min-width: 200px;
}
.lvn-pro-form__col .col-title {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}
.lvn-pro-form label {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    color: #161616;
    margin: 0.5rem;
}
.lvn-pro-form__input,
.lvn-pro-form select {
    width: 100%;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}
.lvn-pro-form__input:focus,
.lvn-pro-form select:focus {
    outline: none;
    border-color: #a0a0a0;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 115, 255, 0.1);
}
.lvn-date-input {
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
}
.lvn-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
.lvn-options-col {
    flex: 1;
    min-width: 200px;
    margin: 8px 0px;
}
.lvn-pro-form__checkbox-label {
    display: flex;
    margin: 10px;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
/* Sửa lỗi checkbox bị vô hiệu hóa */
.lvn-pro-feature {
    display: flex;         /* Xếp checkbox và text trên một hàng */
    align-items: center;   /* Căn giữa chúng theo chiều dọc cho đẹp mắt */
    gap: 8px;              /* Tạo khoảng cách nhỏ giữa checkbox và text */
    cursor: pointer;
    opacity: 0.6;
    margin-bottom: 10px;   /* Thêm khoảng cách dưới cho mỗi dòng tùy chọn */
}
.lvn-pro-feature input[type="checkbox"] {
    pointer-events: none; /* Chỉ vô hiệu hóa checkbox có class .lvn-pro-feature */
    width: 22px;
    height: 22px;
}
.lvn-pro-form__checkbox-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-left: 10px;
}
.lvn-pro-form__button {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: #c59d5f;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.lvn-pro-form__button:hover {
    background-color: #b38e54;
}

/* === B. KHU VỰC HIỂN THỊ KẾT QUẢ CHUNG === */
.lvn-result-area-main{
    max-width: 100% !important;
    display: flex;
    justify-content: center;
}
#lvn-free-result-area {
    position: relative;
    z-index: 1;
    width: 70% !important;
    margin-top: 20px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    display: none;
}
.good-days-summary {
    list-style-type: none;
    padding: 0;
}
.good-days-summary li {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: #f0f5ff;
}
.good-days-summary li.is-sunday {
    background: #fff0f0;
}
.good-days-summary li.is-sunday .day-info strong {
    color: #d93025;
}
.good-days-summary .day-score-summary {
    font-weight: bold;
    color: #1a73e8;
}
button.view-day-detail-btn {
    border: none;
    background: #04bdbd;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
/* Lưới thông tin Chồng - Vợ */
.couple-analysis-grid {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
    justify-content: center;
    margin-top: 20px;
}
.person-analysis-card.modern {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}
.person-analysis-card.modern:hover {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.person-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 16px;
    display: block;
}
.detail-group {
    margin-bottom: 20px;
}
.detail-group:last-child {
    margin-bottom: 0;
}
.detail-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 15px 0 8px 0;
}
.detail-value {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.7;
    margin: 0;
}
.detail-value b {
    color: #111827;
}
.menh-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 4px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.menh-tag.color-kim { background-color: #60a5fa; color: #ffffff; }
.menh-tag.color-moc { background-color: #34d399; color: #ffffff; }
.menh-tag.color-thuy { background-color: #93c5fd; color: #1e3a8a; }
.menh-tag.color-hoa { background-color: #f87171; color: #ffffff; }
.menh-tag.color-tho { background-color: #fbbf24; color: #92400e; }


/* ==========================================================================
   PHẦN C: MODAL (POPUP) CHUNG - PHIÊN BẢN SỬA LỖI GIAO DIỆN
   ========================================================================== */

/* 1. Class thêm vào thẻ <body> khi có popup đang mở */
body.lvn-modal-open {
    overflow: hidden; /* Ngăn trang chính bị cuộn khi popup mở */
}

/* 2. Container chính của modal - Trạng thái mặc định (ẩn hoàn toàn) */
.lvn-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.65);
    display: flex; /* Luôn là flex để căn giữa dialog */
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;

    /* --- Kỹ thuật ẨN và tạo HIỆU ỨNG --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* 3. Trạng thái hiển thị (khi JavaScript thêm class 'is-visible') */
.lvn-modal-container.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* 4. Hộp thoại (dialog) bên trong */
.lvn-modal-container .lvn-modal__dialog {
    transform: scale(0.95);
    transition: transform 0.3s ease;
    /* Các thuộc tính khác giữ nguyên */
    position: relative;
    background: #fff;
    z-index: 99999;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 500px;
}

.lvn-modal-container.is-visible .lvn-modal__dialog {
    transform: scale(1); /* Hiệu ứng phóng to nhẹ khi hiện ra */
}

/* Biến thể cho popup chi tiết ngày (rộng hơn) */
#lvn-dong-tho-detail-modal .lvn-modal__dialog,
#lvn-day-detail-modal .lvn-modal__dialog {
    max-width: 750px;
}

/* (Các CSS con cho header, body, footer... bạn có thể giữ nguyên) */
.lvn-modal-container .lvn-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.lvn-modal-container .lvn-modal__header h4 {
    margin: 0;
    font-size: 1.2em;
}
.lvn-modal-container .lvn-modal__btn--close {
    background: none !important;
    border: none;
    font-size: 2em;
    line-height: 1;
    cursor: pointer;
    color: #888 !important;
}
.lvn-modal-container .lvn-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    background: #f4f5f7;
    max-height: 80vh; /* Giới hạn chiều cao để không tràn màn hình */
}
.lvn-modal-container .lvn-modal__footer {
    display: flex;
    gap: 10px;
    padding: 1rem;
    border-top: 1px solid #eee;
}

/* === D. CÁC THÀNH PHẦN RIÊNG === */

/* Shortcode [goi_xem_ngay_cuoi] */
.lvn-wedding-package-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    padding: 1.5rem;
    max-width: 900px;
    margin: 2rem auto;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.lvn-package-content { 
    flex: 1; 
    min-width: 45%; 
}
.lvn-package-slider { 
    flex: 1; 
    min-width: 45%; 
    align-self: center; 
}
.package-header { text-align: center; }
.package-title { 
    font-size: 1.5rem; 
    margin: 0.5rem 0; 
    color: #1e3a8a; 
    text-align: left;
    margin-left: 20px !important;
}
.original-price{
    text-decoration: line-through !important;
    color: #737373;
    font-size: 0.9rem;
}
.discount-badge{
    color: #ffffff;
    background: #C72424;
    font-style: italic;
    font-size: 20px;
    font-weight: bold;
    margin-left: 8px;
    padding: 0 10px;
    display: inline-block;
}
.features-title{
    font-weight: bold;
}
.package-subtitle { color: #555; margin-top: 0; }
.package-pricing { text-align: center; margin: 1.5rem 0; }
.sale-price { 
    font-size: 2.5rem;
    font-weight: bold;
    color: #0056c3;
    display: block;
    margin-top: 0.5rem;
}
.sale-price span { font-size: 1.2rem; font-weight: normal; color: #666; }

.lvn-col-100{
    display: flex;
    width: 100%;
    align-items: center;
}
.lvn-col-15{
    width: 15%;
}
.lvn-col-85{
    width:85% ;
}
.package-cta{
    display: flex;
    justify-content: center;
}
.package-cta .package-button {
    padding: 8px 30px;
    font-weight: 700;
    font-size: 18px;
    border: none;
    transition: .3s;
    background: linear-gradient(90deg, #DEAB44 20%, rgba(238, 235, 122, 1) 51%, #DEAB44 80%);
    color: #1d1d1d;
}
.package-cta .pulse-class {
    animation: pulse 2s ease infinite;
    line-height: 1.25em;
    border-radius: 7px;
}
@keyframes pulse {
    0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
    }

    50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
    }

    100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
    }
}
@-webkit-keyframes pulse {
        from {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1)
        }
        50% {
            -webkit-transform: scale3d(1.12, 1.12, 1.12);
            transform: scale3d(1.12, 1.12, 1.12)
        }
        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1)
        }
    }
.package-cta .package-button:hover { background-color: #3a228f; }

.swiper.goi-slider-detail { width: 100%; border-radius: 12px; }
.swiper.goi-slider-detail .swiper-slide img { width: 100%; height: auto; display: block; }
.swiper-pagination-bullet-active { background: #4a2cb3; }

.package-features ul li {
    padding: 0 0 0.5rem 25px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%2328a745" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: left center;
    line-height: 1.5;
    list-style-type: none !important;
}
.package-features ul {
	margin-left:0px;
    padding: 0 0 0 10px !important;
    font-size: 16pt;
}
.package-type{
    text-align: left;
}
/* === E. RESPONSIVE === */
@media (max-width: 782px) {
    .lvn-wedding-package-wrapper {
        flex-direction: column;
        padding: 1rem;
        width: 100%;
    }
    .lvn-package-content { 
        order: 1; 
        min-width: 100%;
    }
    .lvn-package-slider { order: 2; width: 100%; margin-top: 1.5rem; }
}

@media (max-width: 768px) {
    .lvn-options-grid {
        flex-direction: column;
        gap: 0;
        margin: 0px;
    }
    .couple-analysis-grid {
        flex-direction: column;
    }
    .couple-analysis-grid h4{
        text-align: center !important;
    }
    .lvn-result-area h2{
        text-align: center !important;
    }
    .lvn-result-area h3{
        text-align: center !important;
    }
    #lvn-free-result-area {
    width: 100% !important;
    margin-top: 20px;
    padding: 0px !important;
    
    }
    .good-days-summary li {
    padding: 8px;
}
.good-days-summary ul{
    padding-left: 0px !important;
}
}

@media (max-width: 600px) {
    .lvn-pro-form-wrapper {
        width: 100%;
    }
    .lvn-pro-form {
        padding: 1rem;
    }
    .lvn-pro-form__row {
        flex-direction: column;
        gap: 1.25rem;
    }
    .lvn-pro-form__col {
        min-width: 100%;
    }
    .lvn-modal__dialog {
        width: 100%;
        max-width: 95%;
        font-size: 14pt;
    }
}
/* ==========================================================================
   BỔ SUNG CSS SỬA LỖI CHO POPUP CHỌN NGÀY THÁNG
   ========================================================================== */

/* 1. Thiết lập chiều rộng cho Dialog (PC: 500px, Mobile: 100%) */
#lvn-date-picker-modal .lvn-modal__dialog {
    max-width: 500px; /* Chiều rộng tối đa trên PC */
    width: 95%;      /* Chiều rộng mặc định, đẹp hơn trên tablet */
}

@media (max-width: 600px) {
    #lvn-date-picker-modal .lvn-modal__dialog {
        width: 100%; /* Chiều rộng 100% trên Mobile */
        max-width: 100%;
    }
    .good-days-summary{
        padding: 0 !important;
    }
}

/* 2. Cho radio "Dương lịch" và "Âm lịch" nằm trên một hàng */
#lvn-date-picker-modal .lvn-modal__toggle {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 5px 0 20px 0;
}
.lvn-modal__toggle input[type="radio"]{
    width: 22px;
    height: 22px;

}
/* 3. Cho các ô chọn Ngày - Tháng - Năm nằm trên một hàng */
#lvn-date-picker-modal .lvn-modal__datepicker {
    display: flex;
    gap: 10px; /* Thêm khoảng cách giữa các ô chọn */
}

/* Ghi đè lại chiều rộng cho các ô chọn (vì file HTML có !important) */
#lvn-date-picker-modal #lvn-dl-day,
#lvn-date-picker-modal #lvn-al-year {
    width: 30% !important;
}
#lvn-date-picker-modal #lvn-dl-month,
#lvn-date-picker-modal #lvn-al-month {
    width: 40% !important;
}
#lvn-date-picker-modal #lvn-dl-year,
#lvn-date-picker-modal #lvn-al-day {
    width: 30% !important;
}


/* 4. Cho 2 nút "Đóng" và "Chọn" rộng bằng nhau và đổi màu nút "Đóng" */
#lvn-date-picker-modal .lvn-modal__footer {
    display: flex;
    gap: 10px;
}

#lvn-date-picker-modal .lvn-modal__footer .lvn-modal__btn {
    flex: 1; /* Chia chiều rộng đều cho các nút bên trong */
}
#lvn-date-picker-modal .lvn-modal__btn--select{
   color: #ffffff !important;
    /* border-color: #ddd; */
    font-size: 1rem;
    padding: 10px;
    /* width: 150px; */
    cursor: pointer;
    border-radius: 8px;
    border: none;
    background: #00a8dd;
    font-weight: bold;
}
#lvn-date-picker-modal .lvn-modal__btn--close {
    color: #ff0000 !important; /* Chữ màu đỏ nhạt */
    border-color: #ddd;
    font-size: 1rem;
    font-weight: bold;
}
/* Đảm bảo popup chi tiết ngày luôn ẩn theo mặc định */
#lvn-day-detail-modal {
    display: none;
}

/* Chỉ hiển thị popup khi có class is-visible (do JavaScript thêm vào) */
#lvn-day-detail-modal.is-visible {
    display: flex;
}
.lvn-custom-modal__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99998; /* Đảm bảo lớp phủ hiển thị trên cùng */
    display: flex;
    align-items: center;
    justify-content: center;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
    max-width: none !important;
}
#lvn-day-detail-modal-content .section-content ul{
    list-style: disc !important;
    margin-left: 25px !important;
}
.lvn-custom-modal__content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 99999;
    text-align: center;
    position: relative;
}
.lvn-custom-modal__header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.lvn-custom-modal__header h4 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}
.lvn-custom-modal__close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5em;
    line-height: 1;
    cursor: pointer;
    color: #888;
}
.lvn-custom-modal__close:hover {
    color: #000;
}

.lvn-custom-modal__body p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 10px 0;
}

.lvn-custom-modal__footer {
    margin-top: 20px;
}

.lvn-custom-modal__button {
    background-color: #0073aa; /* Màu nút mặc định của WordPress */
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.lvn-custom-modal__button:hover {
    background-color: #005a87;
}
.input-error {
    outline: 2px solid red;
    outline-offset: 0;
    background-color: #ffe6e6;
    text-align: center;
    margin: 20px;
    line-height: 1.6;
    padding: 10px;
}
.input-error2 {
    border: 2px solid red;
    background-color: #ffe6e6;
    border-radius: 4px;
}
/* --- CSS CHO LOADING OVERLAY --- */
#lvn-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99998;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lvn-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- CSS CHO POPUP KẾT QUẢ ĐẶT HÀNG MỚI--- */
.lvn-order-result {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lvn-order-result__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.lvn-order-result__dialog {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    margin: 30px auto;
    width: 90%;
    max-width: 700px;
    z-index: 100000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.lvn-order-result__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid #e9ecef;
}
.lvn-order-result__header h4 {
    margin: 0;
    font-size: 20px;
}

.lvn-order-result__btn--close {
    background: none;
    border: none;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    color: red;
}
.lvn-order-result__btn--close:hover {
    opacity: 1;
}

.lvn-order-result__body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

.lvn-order-result__footer {
    padding: 15px 25px;
    border-top: 1px solid #e9ecef;
}
.lvn-pro-analysis-popup .analysis-final-score {
    text-align: center; font-size: 1.5em; font-weight: bold;
    color: #c59d5f; margin-bottom: 1rem; padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}
.lvn-pro-analysis-popup .section-title { 
    font-size: 1.1em; 
    color: #333; 
    margin-top: 15px; 
    border-bottom: 1px solid #eee; 
    padding: 0px;
}
.lvn-pro-analysis-popup ul { list-style: none; padding-left: 0; margin-bottom: 0;}
.lvn-pro-analysis-popup li { padding: 5px 0; line-height: 1.6; border-bottom: 1px dotted #f0f0f0; }
.lvn-pro-analysis-popup li:last-child { border-bottom: none; }
.lvn-pro-analysis-popup strong { font-weight: bold;}

/* CSS MỚI CHO LOGIC TÔ MÀU */
strong.lvn-text-good {
    color: #dc3545 !important; /* Màu đỏ cho chữ Tốt */
}
strong.lvn-text-bad {
    color: #007bff !important; /* Màu xanh cho chữ Xấu */
}
/*
CHỨC NĂNG ĐỘNG THỔ
*/
/* ==========================================================================
   CSS AN TOÀN CHO CHỨC NĂNG XEM NGÀY ĐỘNG THỔ
   ========================================================================== */

/* Ẩn các div chứa nội dung chi tiết trong danh sách kết quả */

.lvn-result-area .hidden-day-detail,
.dong-tho-feature-wrapper .hidden-day-detail {
    display: none !important;
}
.lvn-good-days-list.hidden-day-detail {
    display: none;
}
/* Giao diện nút "Xem chi tiết" */
.dong-tho-feature-wrapper .view-day-detail-btn {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dong-tho-feature-wrapper .view-day-detail-btn:hover {
    background-color: #e0e0e0;
}

/* Giao diện danh sách kết quả */
.dong-tho-feature-wrapper .lvn-good-days-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.dong-tho-feature-wrapper .good-day-item {
    border: 1px solid #e5e5e5;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fafafa;
}

.dong-tho-feature-wrapper .day-info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dong-tho-feature-wrapper .day-info .date {
    font-size: 1.1em;
}

.dong-tho-feature-wrapper .day-info .score {
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.dong-tho-feature-wrapper .day-summary {
    margin-top: 10px;
    font-style: italic;
    color: #555;
    font-size: 14px;
}

/* Định dạng cho nội dung trong popup chi tiết */
#lvn-dong-tho-detail-modal-content .detail-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}
#lvn-dong-tho-detail-modal-content .detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
#lvn-dong-tho-detail-modal-content h5 {
    font-size: 16px;
    color: #333;
    margin-top: 0;
}
.dong-tho-feature-wrapper .is-good { color: #28a745; }
.dong-tho-feature-wrapper .is-bad { color: #dc3545; font-weight: bold; }

/* CSS cho khối Upsell PRO */
.dong-tho-feature-wrapper .lvn-pro-upsell {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    background-color: #fff8e1;
    border: 1px solid #ffecb3;
    border-radius: 8px;
}

.dong-tho-feature-wrapper .lvn-pro-upsell p {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    line-height: 1.6;
}
.lvn-pro-form__radio-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}
.lvn-pro-form__radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
}
.lvn-pro-form__radio-group input[type="radio"] {
    width: 18px;
    height: 18px;
}
/* Làm cho các ngày trong kết quả có thể click được */
.dong-tho-feature-wrapper .clickable-day {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dong-tho-feature-wrapper .clickable-day:hover {
    background-color: #f0f5ff; /* Đổi màu nền khi di chuột qua */
    transform: translateY(-2px); /* Hiệu ứng nhấc lên nhẹ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
/* CSS cho bố cục chi tiết trong popup */
.lvn-modal-container .detail-section ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}



/* CSS cho cột Sao Tốt / Sao Xấu */
.lvn-modal-container .sao-section {
    display: grid;
    grid-template-columns: 1fr; /* Mặc định 1 cột cho mobile */
    gap: 20px;
}

.lvn-modal-container .sao-col h5 {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.lvn-modal-container .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.lvn-modal-container .dot.tot { background-color: #28a745; } /* Xanh lá */
.lvn-modal-container .dot.xau { background-color: #dc3545; } /* Đỏ */

.lvn-modal-container .sao-list strong {
    color: #333;
}

/* Bố cục 2 cột cho màn hình lớn hơn */
@media (min-width: 600px) {
    .lvn-modal-container .sao-section {
        grid-template-columns: 1fr 1fr;
    }
}
/* pro-styles.css */

/* === BỔ SUNG CSS CHO LƯỚI HIỂN THỊ NHIỀU GÓI SẢN PHẨM === */
.lvn-packages-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Responsive: tự động chia cột */
    gap: 20px; /* Khoảng cách giữa các gói */
    max-width: 1400px !important;
}

/* Điều chỉnh lại một chút cho card bên trong lưới */
.lvn-packages-grid-wrapper .lvn-wedding-package-wrapper {
    margin-bottom: 0; /* Bỏ margin cũ khi nằm trong lưới */
    width: 100%;      /* De card tu gian theo cot */
}
/* ==========================================================================
   BỔ SUNG CSS CHO MODAL CẢNH BÁO TUỔI ĐỘNG THỔ
   ========================================================================== */

/* * Kế thừa và áp dụng style của lớp phủ modal đã có cho modal cảnh báo.
 * Đoạn mã này đảm bảo #lvn-age-check-modal hoạt động như một popup che phủ.
*/
.lvn-modal__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    /* Hiệu ứng mờ dần */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Kích hoạt hiển thị modal */
.lvn-modal__backdrop.is-visible,
#lvn-age-check-modal:not([style*="display:none"]) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* * Định dạng cho hộp thoại nội dung bên trong modal cảnh báo.
 * Lấy cảm hứng từ class .lvn-modal__dialog đã có.
*/
#lvn-age-check-modal .lvn-modal__content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 500px; /* Chiều rộng tối đa */
    text-align: center;
    padding: 25px 30px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#lvn-age-check-modal.is-visible .lvn-modal__content,
#lvn-age-check-modal:not([style*="display:none"]) .lvn-modal__content {
     transform: scale(1); /* Hiệu ứng phóng to nhẹ khi hiện ra */
}


/* Định dạng cho tiêu đề cảnh báo */
#lvn-age-check-modal .lvn-modal__title {
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: #d9534f; /* Màu đỏ cảnh báo */
}

/* * Định dạng cho phần chân modal để các nút nằm cạnh nhau và căn giữa.
 * Tận dụng class .lvn-modal__footer đã có trong HTML.
*/
#lvn-age-check-modal .lvn-modal__footer {
    display: flex;
    justify-content: center; /* Đặt các nút ra giữa */
    gap: 15px; /* Khoảng cách giữa các nút */
    margin-top: 25px;
    flex-wrap: wrap; /* Cho phép xuống dòng trên thiết bị di động */
}

/* * Định dạng cho nút phụ (Không, vẫn xem...) 
 * để phân biệt với nút chính.
*/
.lvn-modal-button--secondary {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #555;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lvn-modal-button--secondary:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* Nút đóng (X) - Tận dụng class đã có trong file CSS của bạn */
#lvn-age-check-modal .lvn-modal__btn--close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none !important;
    border: none;
    font-size: 2em;
    line-height: 1;
    cursor: pointer;
    color: #888 !important;
    padding: 0;
}
#lvn-age-check-modal .lvn-modal__btn--close:hover {
    color: #333 !important;
}
/* ==========================================================================
   BỔ SUNG CSS CHO MODAL GỢI Ý MƯỢN TUỔI (BẢN PRO)
   ========================================================================== */
#lvn-compatible-age-results-pro {
    margin: 20px 0;
    padding: 15px;
    border: 1px dashed #c59d5f;
    background-color: #fdfaf5;
    border-radius: 5px;
    text-align: left;
}

#lvn-compatible-age-results-pro p {
    margin-top: 0;
}

#lvn-compatible-age-results-pro ul {
    list-style-type: decimal;
    padding-left: 25px;
    margin-bottom: 0;
}
/* CSS CHO KHUNG GỢI Ý TUỔI RÚT GỌN */
.lvn-suggestion-box {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 5px;
    padding: 12px 15px;
    margin-bottom: 1.25rem;
    font-size: 0.95em;
    line-height: 1.6;
    color: #8a6d3b;
}
.lvn-suggestion-box strong {
    color: #664d1c;
}
/* CSS cho Giờ Xuất Hành (Lý Thuần Phong) */
.gio-xuat-hanh-grid .gio-tot .gio-ten strong {
    color: #d32f2f !important; /* Màu đỏ cho giờ tốt */
}

.gio-xuat-hanh-grid .gio-xau .gio-ten strong {
    color: #0078d4 !important; /* Màu xanh cho giờ xấu */
}

/* Đảm bảo tất cả các giờ đều được in đậm */
.gio-xuat-hanh-grid .gio-ten strong {
    font-weight: bold !important;
}
/* ================================================= */
/* === CODE LÀM LẠI BỐ CỤC CHO POPUP CHI TIẾT NGÀY === */
/* ================================================= */

/* --- BỐ CỤC CHUNG & FONT CHỮ NHỎ HƠN --- */
.hidden-day-detail .detail-section {
    font-size: 14px; /* Giảm kích thước chữ chung */
    line-height: 1.6;
}

.hidden-day-detail h5 {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* --- 1. SỬA BỐ CỤC GIỜ HOÀNG ĐẠO / HẮC ĐẠO --- */
/* (Giả định file gio-hoang-hac-dao.php có cấu trúc p > strong) */
.detail-section p > strong {
    display: block;
    margin-bottom: 5px;
}

/* --- 2. SỬA BỐ CỤC GIỜ XUẤT HÀNH (LÝ THUẦN PHONG) --- */
.gio-xuat-hanh-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.gio-xuat-hanh-grid td {
    border: 1px solid #e9e9e9;
    padding: 8px;
    text-align: center;
    vertical-align: top;
    width: 33.33%;
}

.gio-xuat-hanh-grid .gio-chi {
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
}

.gio-xuat-hanh-grid .gio-ten strong {
    font-size: 14px;
    font-weight: bold !important;
}

/* Tô màu cho các giờ Tốt / Xấu */
.gio-xuat-hanh-grid .gio-tot {
    background-color: #fff9f9;
}
.gio-xuat-hanh-grid .gio-tot .gio-ten strong {
    color: #d32f2f !important; /* Màu đỏ */
}

.gio-xuat-hanh-grid .gio-xau {
    background-color: #f7faff;
}
.gio-xuat-hanh-grid .gio-xau .gio-ten strong {
    color: #0078d4 !important; /* Màu xanh */
}
/* ======================================== */
/* === CSS CHO GIỜ HOÀNG ĐẠO / HẮC ĐẠO === */
/* ======================================== */

/* Vùng chứa chung cho mỗi bảng */
.gio-grid-wrapper {
    margin-bottom: 20px; /* Khoảng cách giữa 2 bảng Tốt và Xấu */
}

/* Tiêu đề (Giờ Hoàng Đạo, Giờ Hắc Đạo) */
.gio-grid-wrapper strong {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
}

/* Màu chữ cho tiêu đề Tốt/Xấu */
.gio-grid-wrapper .text-good {
    color: #28a745; /* Màu xanh lá cho chữ Tốt */
}
.gio-grid-wrapper .text-bad {
    color: #dc3545; /* Màu đỏ cho chữ Xấu */
}

/* Bảng lưới 3x2 */
.gio-grid-table-3x2 {
    width: 100%;
    border-collapse: separate; /* Chế độ để tạo khoảng cách giữa các ô */
    border-spacing: 6px;   /* Khoảng cách giữa các ô */
}

/* Các ô chứa giờ */
.gio-grid-table-3x2 td {
    background-color: #f1f3f5; /* Màu nền xám nhạt */
    padding: 8px 5px;
    border-radius: 5px;      /* Bo góc */
    text-align: center;
    font-size: 13px;         /* Chữ nhỏ hơn */
    width: 33.33%;
}
.title-order-dongtho {
            text-align: center;
            color: red !important;
            }
@media (max-width: 767px) {
            .title-order-dongtho {
                font-size: 1.2rem !important;
            }
            .section-title{
                 font-size: 1rem !important;
            }
            }
                /* ========================================================== */
/* == CSS NÂNG CẤP TOÀN DIỆN - BẮT MẮT & THUYẾT PHỤC HƠN == */
/* ========================================================== */
:root {
      --dt-brand: #A98450; /* Vàng Đồng Sậm - Sang trọng, cổ điển */
      --dt-brand-dark: #8C6D42;
      --dt-text: #343a40; /* Xám Đen - Chữ rõ nét, tinh tế */
      --dt-muted: #6c757d;
      --dt-bg: #f8f9fa; /* Xám rất nhạt - Nền sạch sẽ */
      --dt-card: #ffffff;
      --dt-border: #e0e0e0; /* Viền mềm mại hơn */
      --dt-success: #28a745; /* Xanh lá cây - Mạnh mẽ, tích cực */
      --dt-danger: #dc3545; /* Đỏ - Mạnh mẽ, cảnh báo */
      --dt-gradient-start: #fdfbfb; /* Gradient cho card */
      --dt-gradient-end: #ebedee;
  }
  #lk-dongtho-landing { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--dt-text); line-height: 1.7; background-color: var(--dt-bg); }
  #lk-dongtho-landing * { box-sizing: border-box; }
  #lk-dongtho-landing .container { max-width: 980px; margin: 0 auto; padding: 20px; }
  #lk-dongtho-landing h1, #lk-dongtho-landing h2, #lk-dongtho-landing h3 { line-height: 1.3; margin: 0 0 15px; font-weight: 700; color: var(--dt-text); }
  #lk-dongtho-landing h1 { font-size: clamp(28px, 4.5vw, 42px); }
  #lk-dongtho-landing h2 { 
    font-size: clamp(24px, 3.5vw, 32px); 
    margin:0 0 40px 0 !important;
    text-align: center; 
    position: relative; 
    padding-bottom: 15px; 
  }
  #lk-dongtho-landing h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background-color: var(--dt-brand); border-radius: 2px; }
  #lk-dongtho-landing p { margin: 0 0 15px; }
  #lk-dongtho-landing .lead { font-size: 1.1rem; color: var(--dt-muted); text-align: center; max-width: 700px; margin: 0 auto 25px; }
  #lk-dongtho-landing .section { margin-top: 30px; padding-top: 20px; }
  /* --- Components --- */
  #lk-dongtho-landing .btn { border-radius: 8px; padding: 14px 24px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; border: 2px solid transparent; letter-spacing: 0.5px; }
  #lk-dongtho-landing .btn-primary { 
    background-color: var(--dt-brand); 
    color: #ff0000; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
}
  #lk-dongtho-landing .btn-primary:hover { background-color: var(--dt-brand-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
  #lk-dongtho-landing .btn-ghost { background-color: transparent; border-color: var(--dt-brand); color: var(--dt-brand); } /* Màu ghost đồng bộ với brand */
  #lk-dongtho-landing .hero .btn-ghost { color: #fff; border-color: #fff; }
  #lk-dongtho-landing .hero .btn-ghost:hover { background-color: #fff; color: var(--dt-brand); }
  #lk-dongtho-landing .card { background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

  /* --- Check/Uncheck List --- */
  #lk-dongtho-landing .feature-list, #lk-dongtho-landing .feature-list li { list-style: none !important; }
  #lk-dongtho-landing .feature-list { margin: 0; padding: 0; }
  #lk-dongtho-landing .feature-list li { padding-left: 30px; position: relative; margin-bottom: 12px; font-size: 0.95rem; }
  #lk-dongtho-landing .feature-list li.checked::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--dt-success); font-weight: 900; font-size: 1.1rem; }
  #lk-dongtho-landing .feature-list li.unchecked::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--dt-danger); font-weight: 900; font-size: 1.1rem; }

  /* --- Hero Section --- */
  #lk-dongtho-landing .hero { 
      background: url('https://images.adsttc.com/media/images/623c/4681/3e4b/3170/2500/000f/large_jpg/02-view-from-the-street.jpg?1648117361') no-repeat center center; 
      background-size: cover; 
      color: white; 
      border-radius: 16px; 
      padding: 40px 25px; 
      text-align: center; 
      position: relative; 
      overflow: hidden; 
  }
  #lk-dongtho-landing .hero::before { 
      content: ''; 
      position: absolute; 
      top: 0; left: 0; right: 0; bottom: 0; 
      background: rgb(175 123 0 / 78%);
  }
  #lk-dongtho-landing .hero > * { position: relative; z-index: 2; }
  #lk-dongtho-landing .hero h1 { color: #fff; text-shadow: 1px 1px 6px rgba(0,0,0,0.7); }
  #lk-dongtho-landing .hero .lead {     
    color: #000000;
    font-weight: 400; }

  /* --- Benefits Section --- */
  #lk-dongtho-landing .benefits { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 15px; 
    text-align: center; 
  }
  #lk-dongtho-landing .benefit-card .icon { font-size: 45px; color: var(--dt-brand); margin-bottom: 10px; }
  #lk-dongtho-landing .benefit-card h3 { color: var(--dt-text); font-size: 1.3rem; }

  /* --- Comparison Section --- */
  #lk-dongtho-landing .compare { display: grid; grid-template-columns: 1fr; gap: 25px; align-items: stretch; margin-top: 30px; } /* Align items stretch để chiều cao bằng nhau */
  #lk-dongtho-landing .compare .col { 
      background: var(--dt-card); 
      border: 1px solid var(--dt-border); 
      border-radius: 15px; 
      padding: 25px; 
      transition: all 0.3s ease; 
      display: flex; 
      flex-direction: column; 
      justify-content: space-between; /* Đẩy nội dung và nút xuống dưới */
  }
  #lk-dongtho-landing .compare .col-pro { 
      border: 3px solid var(--dt-brand); /* Viền đậm hơn */
      background: linear-gradient(145deg, var(--dt-gradient-start), var(--dt-gradient-end)); /* Gradient nhẹ */
      transform: scale(1.05); 
      box-shadow: 0 12px 30px rgba(0,0,0,0.15); 
      position: relative; 
  }
  #lk-dongtho-landing .compare .col-pro:hover {
      transform: translateY(-5px) scale(1.06);
      box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  }
  #lk-dongtho-landing .badge-pro { 
      position: absolute; 
      top: -18px; 
      left: 50%; 
      transform: translateX(-50%); 
      background: var(--dt-brand); 
      color: #fff; 
      padding: 6px 18px; 
      border-radius: 25px; 
      font-weight: 700; 
      font-size: 15px; 
      letter-spacing: 0.5px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  #lk-dongtho-landing .compare h3 { 
      font-size: 1.5rem; 
      color: var(--dt-text); 
      margin-bottom: 20px; 
      text-align: center; 
  }
  #lk-dongtho-landing .compare .cta-row { 
    margin-top: auto; 
    padding-top: 20px; 
    display: flex;
    justify-content: center;
} /* Đẩy nút xuống cuối */


  /* --- Testimonials & Swiper --- */
  #lk-dongtho-landing .testimonial-card { 
      text-align: left; 
      background: #fff; 
      box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
      border-radius: 12px; 
      padding: 25px; 
      display: flex; 
      flex-direction: column; 
      gap: 15px; 
      height: 100%;
  }
  #lk-dongtho-landing .testimonial-header { display: flex; align-items: center; gap: 15px; }
  #lk-dongtho-landing .testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dt-brand); }
  #lk-dongtho-landing .testimonial-author p { margin: 0; line-height: 1.4; }
  #lk-dongtho-landing .testimonial-name { font-weight: 700; color: var(--dt-text); font-size: 1.1rem; }
  #lk-dongtho-landing .testimonial-body p { margin: 0; font-style: italic; color: var(--dt-muted); position: relative; padding-left: 20px; font-size: 0.95rem; }
  #lk-dongtho-landing .testimonial-body p::before { content: '“'; position: absolute; left: 0; top: -5px; font-size: 24px; color: var(--dt-brand); }
  #lk-dongtho-landing .swiper { width: 100%; padding-bottom: 50px; }
  #lk-dongtho-landing .swiper-slide { height: auto; display: flex; align-items: stretch; } /* Đảm bảo slide có chiều cao bằng nhau */
  #lk-dongtho-landing .swiper-pagination-bullet-active { background-color: var(--dt-brand) !important; }

  /* --- FAQ --- */
  #lk-dongtho-landing .faq details { background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: 12px; padding: 15px 20px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
  #lk-dongtho-landing .faq summary { cursor: pointer; font-weight: 700; color: var(--dt-text); outline: none; }
  #lk-dongtho-landing .faq summary:hover { color: var(--dt-brand); }
  #lk-dongtho-landing .faq p { padding-top: 10px; margin-bottom: 0; color: var(--dt-muted); }

  /* --- Final CTA Section --- */
  #lk-dongtho-landing .final-cta-section { 
    background: linear-gradient(135deg, #ab8249, #754e00);
    color: #fff; 
    padding: 40px; 
    border-radius: 15px; 
    text-align: center;
     box-shadow: 0 10px 30px rgba(0,0,0,0.15);
     }
  #lk-dongtho-landing .final-cta-section h2 { color: #fff; margin-bottom: 20px; }
  #lk-dongtho-landing .final-cta-section p { color: #e0e0e0; max-width: 600px; margin: 0 auto 30px; }
  #lk-dongtho-landing .final-cta-section .btn-primary { background-color: var(--dt-brand); } /* Sử dụng màu brand chính */
  #lk-dongtho-landing .final-cta-section .btn-primary:hover { background-color: var(--dt-brand-dark); }

  /* --- Sticky CTA Bar --- */
  #lk-dongtho-landing .foot-cta { 
      position: fixed; 
      bottom: 15px; /* Nâng lên một chút */
      z-index: 10; 
      margin-top: 30px; 
      transition: transform 0.4s ease, opacity 0.4s ease; 
  }
  #lk-dongtho-landing .foot-cta.is-hidden { opacity: 0; transform: translateY(150%); pointer-events: none; }
  #lk-dongtho-landing .foot-cta .bar { 
      background: #212529; /* Nền đen đậm */
      color: #fff; 
      border-radius: 18px; /* Bo góc nhiều hơn */
      padding: 12px 20px; 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      gap: 15px; 
      box-shadow: 0 10px 25px rgba(0,0,0,.25); 
  }
  #lk-dongtho-landing .foot-cta .bar .btn { padding: 5px 18px; font-size: 0.95rem; border-radius: 10px; }
  #lk-dongtho-landing .foot-cta .bar .btn-primary { background-color: var(--dt-brand); color: #fff; }
  #lk-dongtho-landing .foot-cta .bar .btn-primary:hover { background-color: var(--dt-brand-dark); }
  #lk-dongtho-landing .foot-cta .bar .san-sang { font-weight: 600; font-size: 1.1rem; }
  #lk-dongtho-landing .text-mobile { display: none; }
  @media (min-width:768px) {
      #lk-dongtho-landing .compare { 
        grid-template-columns: 1fr 1.2fr; 
        margin-top:50px;
      }
  }
  @media (max-width: 767px) {
      #lk-dongtho-landing .text-desktop { display: none; }
      #lk-dongtho-landing .text-mobile { display: inline; }
      #lk-dongtho-landing .foot-cta .bar { 
        padding: 5px 15px; 
        display: flex;
        justify-content: center;
        }
      #lk-dongtho-landing .foot-cta .btn { padding: 8px 12px; font-size: 0.85rem; }
      #lk-dongtho-landing .foot-cta .san-sang { display: none; }
      #lk-dongtho-landing .card{
            margin-top: 30px;
      }
  }
  /* ========================================================== */
/* SỬA LỖI CĂN CHỈNH VÀ CHIỀU CAO CHO SLIDER DEMO */
/* ========================================================== */

/* 1. Giới hạn chiều cao của toàn bộ khu vực slider là 600px */
#lk-dongtho-landing .preview-slider {
    max-height: 600px;
}

/* 2. Căn giữa ảnh bên trong mỗi slide (quan trọng nhất) */
#lk-dongtho-landing .preview-slider .swiper-slide {
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center;   /* Căn giữa theo chiều dọc */
}

/* 3. Đảm bảo ảnh co giãn đúng tỷ lệ và không vượt quá slide */
#lk-dongtho-landing .preview-slider .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Đảm bảo ảnh luôn vừa vặn, không bị cắt xén */
}
    /* ====== Scoped styles for this landing only ====== */
    #lk-wedding-landing{--brand:#f6c646;--brand-dark:#d7aa2d;--text:#222;--muted:#666;--bg:#fff;--card:#fff;--border:#eee;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);line-height:1.6}
    #lk-wedding-landing *{box-sizing:border-box}
    #lk-wedding-landing .container{max-width:980px;margin:0 auto;padding:24px}
    #lk-wedding-landing h1,#lk-wedding-landing h2,#lk-wedding-landing h3{line-height:1.25;margin:0 0 12px}
    #lk-wedding-landing h1{font-size:clamp(26px,4.2vw,38px)}
    #lk-wedding-landing h2{font-size:clamp(20px,3.2vw,26px);margin-top:24px}
    #lk-wedding-landing p{margin:10px 0}
    #lk-wedding-landing .lead{font-size:18px;color:var(--muted)}
    #lk-wedding-landing .hero{background:linear-gradient(180deg,#fff, #fff7e0);border:1px solid var(--border);border-radius:16px;padding:24px;display:grid;gap:16px}
    #lk-wedding-landing .badge{
      display:inline-block;
      background:var(--brand);
      color:#000;
      font-weight:600;
      padding:6px 10px;
      border-radius:10px;
      margin-bottom:8px
    }
    #lk-wedding-landing .cta-row,  #lk-wedding-landing .cta-row-footer,#lk-dongtho-landing .cta-row-footer{
      display:flex;
      flex-wrap:wrap;
      gap:30px;
      margin-top:8px;
      align-items: center;
      justify-content: center;
    }
    
    #lk-wedding-landing .btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    #lk-wedding-landing .btn-primary{background:var(--brand);color:#000;box-shadow:0 8px 18px rgba(0,0,0,.06)}
    #lk-wedding-landing .btn-primary:hover{background:var(--brand-dark)}
    #lk-wedding-landing .btn-ghost{background:#000;color:#fff}
    #lk-wedding-landing .grid{display:grid;gap:14px}
    #lk-wedding-landing .grid.two{grid-template-columns:1fr}
    #lk-wedding-landing .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
    #lk-wedding-landing ul{margin:8px 0 0 20px}
  /* Áp dụng lệnh loại bỏ dấu chấm cho cả danh sách và từng mục con */
    #lk-wedding-landing .tick,
    #lk-wedding-landing .tick li {
      list-style: none !important;
    }

    /* Giữ nguyên lệnh reset margin/padding cho danh sách */
    #lk-wedding-landing .tick {
      margin: 0;
      padding: 0;
    }
    #lk-wedding-landing .tick li{padding-left:28px;position:relative;margin:8px 0}
    #lk-wedding-landing .tick li:before{content:"✔";position:absolute;left:0;top:0;color:#118a00;font-weight:700}
    #lk-wedding-landing .benefits{display:grid;grid-template-columns:1fr;gap:12px}
    #lk-wedding-landing .benefit{border:1px dashed var(--border);border-radius:12px;padding:12px;background:#fffdf6}
    #lk-wedding-landing .compare{display:grid;grid-template-columns:1fr;gap:12px}
    #lk-wedding-landing .compare .col{border:1px solid var(--border);border-radius:12px;padding:12px}
    #lk-wedding-landing .compare .col h3{margin-bottom:6px}
    #lk-wedding-landing .preview{display:grid;grid-template-columns:1fr;gap:12px}
    #lk-wedding-landing .preview img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
    #lk-wedding-landing .quote{font-style:italic;background:#fafafa;border-left:4px solid var(--brand);padding:12px;border-radius:8px}
    #lk-wedding-landing .stat{display:flex;align-items:center;gap:8px;font-weight:700}
    #lk-wedding-landing .faq details{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
    #lk-wedding-landing .faq details+details{margin-top:10px}
    #lk-wedding-landing .faq summary{cursor:pointer;font-weight:700}
    #lk-wedding-landing .muted{color:var(--muted)}
    #lk-wedding-landing .section{margin-top:22px}
    #lk-wedding-landing .hr{height:1px;background:var(--border);margin:18px 0}
    #lk-wedding-landing .foot-cta{
      position:fixed;
      bottom:10px;
      z-index:5;
      margin-top:14px
    }
    #lk-wedding-landing .foot-cta .bar{background:#68006f;color:#fff;border-radius:14px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
    #lk-wedding-landing .foot-cta .bar .btn-primary{background:var(--brand);color:#ffffff}
    /* ========================================================== */
    /* CSS ĐỂ ẨN/HIỆN VĂN BẢN TRÊN NÚT BẤM THEO MÀN HÌNH */
    /* ========================================================== */

    /* Mặc định trên máy tính: hiện text-desktop, ẩn text-mobile */
    #lk-wedding-landing .text-mobile {
      display: none;
    }

    /* Trên di động (dưới 768px): ẩn text-desktop, hiện text-mobile */
    @media (max-width: 767px) {
      #lk-wedding-landing .text-desktop {
        display: none;
      }
      #lk-wedding-landing .text-mobile {
        display: inline; /* Hoặc 'block' tùy theo cấu trúc của bạn */
      }
    }
    /* Responsive */
    @media (min-width:769px){
      #lk-wedding-landing .grid.two{grid-template-columns:1.2fr .8fr}
      #lk-wedding-landing .benefits{grid-template-columns:repeat(2,1fr)}
      #lk-wedding-landing .compare{grid-template-columns:1fr 1fr}
      #lk-wedding-landing .preview{grid-template-columns:1fr 1fr}
      #lk-wedding-landing .testimonial-grid{grid-template-columns:1fr 1fr}
    }
    /* ====== CSS for New Testimonials ====== */
    #lk-wedding-landing .testimonial-grid{display:grid;grid-template-columns:1fr;gap:14px}
    #lk-wedding-landing .testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
    #lk-wedding-landing .testimonial-header{display:flex;align-items:center;gap:12px}
    #lk-wedding-landing .testimonial-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}
    #lk-wedding-landing .testimonial-author{flex-grow:1}
    #lk-wedding-landing .testimonial-author p{margin:0;line-height:1.4}
    #lk-wedding-landing .testimonial-name{font-weight:700;color:var(--text)}
    #lk-wedding-landing .testimonial-location{font-size:14px;color:var(--muted)}
    #lk-wedding-landing .testimonial-rating{font-size:18px;color:#ffb900}
    #lk-wedding-landing .testimonial-body p{margin:0;font-style:italic;color:var(--muted)}
    /* ====== CSS for Swiper Sliders ====== */
    #lk-wedding-landing .swiper {
      width: 100%;
      padding: 10px 0 40px 0; /* Thêm padding dưới để chứa pagination */
      max-height: 600px;
    }
    #lk-wedding-landing .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #lk-wedding-landing .swiper-slide .card {
      width: 100%; /* Đảm bảo card chiếm hết chiều rộng của slide */
    }
    #lk-wedding-landing .swiper-pagination-bullet-active {
      background-color: var(--brand) !important;
    }
    #lk-wedding-landing .swiper-button-next,
    #lk-wedding-landing .swiper-button-prev {
      color: var(--brand-dark) !important;
      transform: translateY(-15px); /* Nâng nút lên một chút */
    }
    /* ========================================================== */
/* BỔ SUNG HOẶC CẬP NHẬT CÁC THUỘC TÍNH CSS NÀY TRONG THẺ <style> */
/* ========================================================== */

/* Các biến màu (Color Variables) - Đảm bảo bạn đã có các biến này, nếu chưa thì thêm vào */
:root {
    --brand: #6a0dad; /* Màu tím chủ đạo (ví dụ: Tím Lavender) */
    --brand-dark: #4b0a7a; /* Tím đậm hơn */
    --brand-light: #e6e6fa; /* Tím nhạt */
    --text: #333; /* Màu chữ chính */
    --muted: #666; /* Màu chữ phụ, mờ hơn */
    --card: #ffffff; /* Màu nền card */
    --border: #f0f0f0; /* Màu viền */
    --success: #28a745; /* Màu xanh lá cho thành công */
    --error: #dc3545; /* Màu đỏ cho lỗi */
    --button-primary-bg: #E91E63; /* Hồng Fuchsia - màu nổi bật cho nút chính */
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: #C2185B; /* Hồng đậm hơn khi hover */
    --button-ghost-bg: #FFC0CB; /* Hồng Pastel - màu nhạt cho nút phụ */
    --button-ghost-text: #E91E63; /* Chữ màu hồng Fuchsia */
    --button-ghost-hover-bg: #FFB6C1; /* Hồng nhạt hơn khi hover */
    --button-ghost-border: #E91E63; /* Viền màu hồng Fuchsia */
}

/* Base styles for buttons (general styles) */
#lk-wedding-landing .btn {
    display: inline-flex; /* Để icon và text căn giữa */
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px; /* Bo tròn vừa phải */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent; /* Viền trong suốt mặc định */
    cursor: pointer;
    font-size: 16px; /* Kích thước chữ cơ bản */
}

/* Primary Button - Nút chính (Xem ngày ngay / Xem Ngày Cưới Miễn Phí Ngay) */
#lk-wedding-landing .btn-primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}
#lk-wedding-landing .btn-primary:hover {
    background-color: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-bg);
    transform: translateY(-2px); /* Hiệu ứng nhấc nhẹ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Thêm bóng nhẹ */
}

/* Ghost Button - Nút phụ (Mua Gói Pro Chỉ 100K / Mua Pro 100K) */
#lk-wedding-landing .btn-ghost {
    background-color: var(--button-ghost-bg);
    color: var(--button-ghost-text);
    border: 1px solid var(--button-ghost-border);
}
#lk-wedding-landing .btn-ghost:hover {
    background-color: var(--button-ghost-hover-bg);
    border-color: var(--button-primary-hover-bg); /* Viền đậm hơn khi hover */
    transform: translateY(-2px); /* Hiệu ứng nhấc nhẹ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Cân chỉnh khoảng cách icon trong nút */
#lk-wedding-landing .btn-primary::before,
#lk-wedding-landing .btn-ghost::before {
    margin-right: 8px; /* Khoảng cách giữa icon và chữ */
}

/* ========================================================== */
/* THIẾT KẾ RIÊNG CHO MOBILE (Dưới 768px) */
/* ========================================================== */


/* Style cho sticky CTA ở cuối trang */
#lk-wedding-landing .sticky-cta-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Nền trắng hơi trong suốt */
    padding: 10px 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Căn đều 2 nút */
    align-items: center;
    gap: 10px; /* Khoảng cách giữa các nút trong sticky bar */
    box-sizing: border-box;
}

#lk-wedding-landing .sticky-cta-footer .btn {
    flex-grow: 1; /* Nút tự động giãn nở để lấp đầy */
    padding: 12px 15px;
    font-size: 15px;
    white-space: nowrap; /* Đảm bảo chữ không bị xuống dòng */
}
/* ========================================================== */
/* CSS CHO HIỆU ỨNG ẨN STICKY CTA KHI CUỘN GẦN FOOTER */
/* ========================================================== */

/* Thêm hiệu ứng chuyển động cho thanh CTA */
#lk-wedding-landing .foot-cta {
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Trạng thái bị ẩn của thanh CTA */
#lk-wedding-landing .foot-cta.is-hidden {
    opacity: 0;
    transform: translateY(150%); /* Trượt xuống dưới và biến mất */
    pointer-events: none; /* Vô hiệu hóa click khi bị ẩn */
}
/* ========================================================== */
/* Tối ưu thanh CTA dính ở chân trang (Sticky Footer) trên Mobile */
/* ========================================================== */
#lk-wedding-landing .foot-cta .bar {
    padding: 8px 12px; /* Giảm padding của cả thanh sticky */
    gap: 10px;
}

#lk-wedding-landing .foot-cta .btn {
    padding: 10px 20px; /* Giảm padding của nút trong thanh sticky */
    font-size: 13px; /* Giảm cỡ chữ để vừa trong một hàng */
    flex: 1; 
    white-space: nowrap; /* Giữ chữ trên 1 dòng cho gọn */
}
@media (max-width: 767px) {

    /* ================================================= */
    /* 1. CẤU HÌNH CƠ BẢN (HERO & CONTAINER)             */
    /* ================================================= */
    #lk-wedding-landing .container {
        padding: 0px;
    }
    
    #lk-wedding-landing .hero {
        background: none;
        border: none;
        border-radius: 0px;
        padding: 0px;
    }
    
    /* ================================================= */
    /* 2. LOGIC CHO CÁC NÚT TRONG NỘI DUNG CHÍNH (BODY)  */
    /* (Phần này quan trọng bị thiếu ở lần trước)        */
    /* ================================================= */
    
    /* Các hàng chứa nút trong bài viết -> Xếp dọc */
    #lk-wedding-landing .cta-row {
        gap: 10px; 
        flex-direction: column;
    }

    /* Nút trong bài viết -> To full màn hình cho dễ bấm */
    #lk-wedding-landing .btn {
        width: 100%; 
        padding: 15px 20px;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 10px; /* Thêm khoảng cách dưới nếu các nút xếp chồng */
    }
    
    /* Riêng nút Hero cho phép xuống dòng */
    #lk-wedding-landing .hero .btn {
        white-space: normal; 
    }

    /* ================================================= */
    /* 3. LOGIC RIÊNG CHO THANH CTA DÍNH (FOOTER FIXED)  */
    /* (Phần ghi đè để Footer không bị ảnh hưởng bởi mục 2) */
    /* ================================================= */
    
    #lk-wedding-landing .foot-cta ,#lk-dongtho-landing .foot-cta{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 999999;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    #lk-wedding-landing .foot-cta .san-sang {
        display: none;
    }

    #lk-wedding-landing .foot-cta .bar {
        width: 100%;
        padding: 8px 10px;
        margin: 0;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Bắt buộc hàng trong footer phải nằm NGANG (ghi đè mục 2) */
    #lk-wedding-landing .cta-row-footer {
        display: flex;
        flex-direction: row !important; 
        width: 100%;
        gap: 10px;
        margin: 0;
    }

    /* Nút trong footer: Chia đôi không gian (ghi đè mục 2) */
    #lk-wedding-landing .foot-cta .btn {
        flex: 1;
        width: auto !important; /* Ghi đè cái width 100% ở trên */
        min-width: 0;
        padding: 10px 5px;
        font-size: 13px;
        height: 42px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        margin: 0 !important;
        border-radius: 4px;
    }
}
/* ==========================================================================
   FIX LỖI KHUNG GÓI CƯỚI BỊ TO QUÁ KHỔ (GRID WRAPPER)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. Sửa lỗi khung bao ngoài (Grid) */
    .lvn-packages-grid-wrapper {
        /* Thay đổi cách chia cột: Từ 450px xuống còn 1 cột duy nhất vừa màn hình */
        grid-template-columns: 1fr !important; 
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Sửa lỗi thẻ con bên trong (Card gói cước) */
    .lvn-wedding-package-wrapper {
        width: 100% !important;
        min-width: 0 !important; /* Quan trọng: Cho phép co nhỏ dưới 450px */
        margin: 0 auto 20px auto !important; /* Căn giữa */
        box-sizing: border-box !important;
    }

    /* Đảm bảo ảnh bên trong không bị tràn */
    .lvn-wedding-package-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }
    .lvn-pro-form__submit{
        display: block !important;
    }
}
.lvn-pro-form__submit{
    display: flex;
    gap: 20px;
}