/* ==========================================================================
   VDA MINDFUL SPACE - MAIN STYLES (FULL & FINAL)
   ========================================================================== */

/* 1. ÉP NỀN ĐEN TOÀN TRANG & XÓA KHOẢNG TRỐNG THỪA CỦA THEME / BEAVER BUILDER */
body, html, #wrapper, #main, #content, .page-wrapper, .fl-builder-content, .fl-page {
    background-color: #000000 !important;
    background: #000000 !important;
}

.site-content, 
.fl-builder-content, 
.fl-page-content, 
.page-wrapper,
#content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ép Beaver Builder xóa khoảng đệm mặc định của Row/Module */
.fl-builder-content .fl-row-content-wrap, 
.fl-builder-content .fl-module-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. MAIN CONTAINER (DÀNH CHO DESKTOP) */
.vda-mindful-container {
    max-width: 1200px;
    margin: -80px auto 0 auto !important; /* Kéo lên 80px đè qua khoảng trống trên PC */
    padding: 40px 20px 50px 20px !important; 
    background: #000000;
    color: #e2e2e2;
    font-family: 'Segoe UI', serif;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,1);
    position: relative;
    z-index: 10;
}

/* 3. HEADER AREA */
.mindful-header { 
    text-align: center; 
    margin-bottom: 40px; 
}

.mindful-header h2 {
    color: #e8c872; 
    font-size: 2.5rem; 
    margin-bottom: 10px;
    text-shadow: 1px 2px 0px #5a4511, 2px 4px 10px rgba(232, 200, 114, 0.4); 
}

.mindful-header p { 
    color: #dddddd !important; 
    font-size: 18px !important; /* Kích thước 18px dễ đọc */
    line-height: 1.6 !important;
    margin-top: 15px !important;
}

/* Cây Bồ Đề */
.bodhi-tree-container {
    position: relative; 
    width: 100%; 
    max-width: 520px;
    margin: 0 auto; 
}

/* Ép file SVG của anh vươn tràn viền và đổ bóng */
.bodhi-tree-container > svg:first-child {
    width: 100%; 
    height: auto; 
    display: block;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.2));
}

/* Lớp bọc lá */
.bodhi-leaves-layer {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none;
}

/* Khung chứa từng chiếc lá riêng lẻ */
.leaf-wrapper {
    position: absolute;
    width: 25px; /* Điều chỉnh size lá to nhỏ ở đây */
    pointer-events: none;
}

/* Chiếc lá bên trong khung đung đưa */
.leaf-node {
    width: 100%;
    height: auto;
    fill: #66bb6a;
    transform-origin: 50% 0%; /* Xoay đúng cuống lá */
    animation: leafSway 4s infinite alternate ease-in-out;
}

@keyframes leafSway {
    0% { transform: scale(1) rotate(0deg); fill: #66bb6a; filter: drop-shadow(0 0 2px rgba(102,187,106,0.5)); }
    100% { transform: scale(1.15) rotate(12deg); fill: #81c784; filter: drop-shadow(0 0 8px rgba(129,199,132,0.8)); }
}

/* 5. TICKER (THANH CUỘN THÔNG ĐIỆP) */
.mindful-ticker-container {
    margin-top: 30px; 
    height: 120px; 
    overflow: hidden; 
    position: relative;
    border-top: 1px dashed rgba(212, 175, 55, 0.3);
    border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
    background: #000000;
}

.ticker-track { 
    position: absolute; 
    width: 100%; 
    animation: scrollTicker 16s linear infinite; 
}

.mindful-ticker-container:hover .ticker-track {
    animation-play-state: paused; /* Dừng khi rê chuột */
}

.ticker-item { 
    font-size: 16px !important; /* Font thông điệp 18px */
    color: #ffffff; 
    font-style: italic; 
    padding: 15px 15px; 
    text-align: center; 
    text-shadow: 1px 1px 0px #555555, 2px 2px 0px #333333, 3px 4px 6px rgba(0,0,0,0.9); /* Hiệu ứng 2.5D */
}

.ticker-item span { 
    color: #e8c872; 
    font-style: normal; 
    font-weight: 600;
    font-size: 16px !important; 
    margin-left: 15px; 
    text-shadow: 1px 1px 0px #6b5514, 2px 2px 0px #362905, 3px 4px 6px rgba(0,0,0,0.9);
}

@keyframes scrollTicker {
    0% { transform: translateY(80px); } 
    100% { transform: translateY(-100%); } 
}

/* 6. ACTION BAR & BUTTONS */
.mindful-action-bar { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 35px; 
}

.mindful-btn {
    background: #111111; 
    color: #e8c872; 
    border: 1px solid rgba(232, 200, 114, 0.4);
    padding: 14px 32px; 
    border-radius: 30px; 
    cursor: pointer; 
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
}

.mindful-btn:hover { 
    background: #e8c872; 
    color: #000000; 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(232, 200, 114, 0.2);
}

.mindful-btn.primary-glow { 
    background: #e8c872; 
    color: #000000; 
}

/* 7. MODAL POPUP TÙY TÂM */
.mindful-modal {
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.9); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.mindful-modal-content {
    background: #0a0a0a; 
    padding: 35px; 
    border-radius: 16px; 
    width: 90%; 
    max-width: 450px;
    border: 1px solid #e8c872; 
    text-align: center; 
    position: relative;
    box-shadow: 0 0 30px rgba(232, 200, 114, 0.15);
}

.close-modal { 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    font-size: 28px; 
    color: #aaaaaa; 
    cursor: pointer; 
}

.close-modal:hover { color: #ffffff; }

/* Đã ép cỡ chữ 14px và thêm line-height cho dễ đọc */
.modal-sub { 
    font-size: 14px !important; 
    color: #aaaaaa; 
    margin-bottom: 20px;
    line-height: 1.5; 
}

/* QR Code & Banking Details */
.qr-container { 
    background: #ffffff; 
    padding: 15px; 
    border-radius: 12px; 
    display: inline-block; 
    margin-bottom: 15px; 
}
.sepay-qr-img { 
    width: 180px; 
    height: 180px; 
    display: block; 
}

/* Toàn bộ thông tin chuyển khoản đều đưa về 14px */
.bank-details-box {
    background: #000000; 
    border: 1px dashed rgba(232, 200, 114, 0.4); 
    border-radius: 8px;
    padding: 18px 15px; 
    text-align: left; 
    font-size: 14px !important; 
    color: #dddddd;
}
.bank-details-box p { 
    margin: 8px 0; 
    font-size: 14px !important; 
}
.bank-details-box code { 
    color: #000000; 
    background: #e8c872; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 14px !important; 
}

/* 8. RESPONSIVE MOBILE (ĐIỀU CHỈNH RIÊNG CHO ĐIỆN THOẠI) */
@media screen and (max-width: 768px) {
    .vda-mindful-container {
        margin-top: -40px !important; /* Kéo lên 40px trên Mobile để không bị đè vào Menu */
        padding-top: 30px !important;
    }

    .mindful-action-bar {
        flex-direction: column; /* Xếp dọc 2 nút */
        align-items: center;
        gap: 15px;
    }
    
    .mindful-btn {
        width: 100%; /* Tràn viền nút trên mobile */
        max-width: 320px;
    }
    
    .mindful-header h2 { 
        font-size: 1.8rem; 
    }

    .mindful-header p {
        font-size: 16px !important; /* Thu nhỏ chữ một chút để đỡ tràn dòng trên đt */
    }
}

/* =========================================
   THỐNG KÊ SỐ LÁ LÀNH
   ========================================= */
.leaf-stats {
    position: absolute;
    top: 100px;
    right: 20px;
    background: rgba(20, 15, 5, 0.8);
    border: 1px solid rgba(232, 200, 114, 0.4);
    padding: 8px 18px;
    border-radius: 30px;
    color: #dddddd;
    font-size: 15px;
    z-index: 20;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}

.leaf-stats strong {
    color: #e8c872;
    font-size: 18px;
    margin: 0 3px;
}

@media screen and (max-width: 768px) {
    .leaf-stats {
        top: 500px;
        right: 15px;
        font-size: 13px;
        padding: 6px 14px;
    }
    .leaf-stats strong {
        font-size: 16px;
    }
}