/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1776136834
Updated: 2026-04-14 03:20:34

*/

@font-face {
    font-family: 'Comic Sans';
    src: url('/wp-content/uploads/2026/04/comic-sans-ms-400.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Sans';
    src: url('/wp-content/uploads/2026/04/comic-sans-ms-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Sans';
    src: url('/wp-content/uploads/2026/04/comic-sans-ms-400.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Sans';
    src: url('/wp-content/uploads/2026/04/comic-sans-ms-700.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Sans';
    src: url('/wp-content/uploads/2026/04/comic-sans-ms-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


.style-line-text .elementor-heading-title {
    padding-bottom: 0.4em;
    background: url('/wp-content/uploads/2026/04/line-text.png') bottom / 4em no-repeat;
    position: relative;
}

.style-line-text .elementor-heading-title::before,
.style-line-text .elementor-heading-title::after,
.no-line-text .elementor-heading-title::before,
.no-line-text .elementor-heading-title::after,
.text_flower-details .elementor-heading-title::after {
    content: "";
    position: absolute;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: var(--size);
    height: var(--size);
}

.style-line-text.text_all-flower .elementor-heading-title::before,
.style-line-text.text_about-us .elementor-heading-title::before {
    background-image: url(/wp-content/uploads/2026/04/flower-e1776150886342.png);
    --size: 1.6em;
    left: -1.65em;
    bottom: -0.1em;
}

.style-line-text.text_all-flower .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/Group-1.png);
    --size: 2.6em;
    right: -1.9em;
    bottom: -1em;
}


.no-line-text.text_girls .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/girl-heart.png);
    --size: 1.2em;
    right: -1.6em;
    bottom: -0.2em;
}

.no-line-text.text_boys .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/boy-heart.png);
    --size: 1.2em;
    right: -1.6em;
    bottom: -0.2em;
}




.style-line-text.text_our-purpose .elementor-heading-title::before {
    background-image: url(/wp-content/uploads/2026/04/Group-3.png);
    --size: 1.4em;
    left: -1.65em;
    bottom: 0.6em;
}

.style-line-text.text_our-purpose .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/Group-4-e1776154810212.png);
    --size: 2.1em;
    right: -2.3em;
    bottom: -0.1em;
}




.style-line-text.text_our-goal .elementor-heading-title::before,
.style-line-text.text_shipping-and-delivery .elementor-heading-title::before {
    background-image: url(/wp-content/uploads/2026/04/Vector.png);
    --size: 2.1em;
    left: -1.35em;
    bottom: -0.7em;
}

.style-line-text.text_our-goal .elementor-heading-title::after,
.style-line-text.text_shipping-and-delivery .elementor-heading-title::after,
.text_flower-details .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/smile.png);
    --size: 1.5em;
    right: -1.9em;
    bottom: 0.4em;
    transform: rotate(28deg);
}



.style-line-text.text_how-it-works .elementor-heading-title::after,
.style-line-text.text_about-us .elementor-heading-title::after {
    background-image: url(/wp-content/uploads/2026/04/star.png);
    --size: 1.2em;
    right: -1.5em;
    bottom: 0.9em;
}




.flower-tag {
    display: inline-block;
    padding: 0.333333em 1.33333333em 0.533333em;
    line-height: 1em;
    border-radius: 1000px;
    white-space: nowrap;
    border-style: solid;
    border-width: 0.15em;
}

.tag-open {
    background-color: #FACC15;
    color: #854D0E;
    border-color: #CA8A04;
}

.tag-funded {
    background-color: #DBEAFE;
    color: #1E40AF;
    border-color: #BFDBFE80;
}

.tag-delivered {
    background-color: #D1FAE5;
    color: #065F46;
    border-color: #A7F3D080;
}






.flower-item__media,
.flower-item__media * {
    height: 100% !important;
    object-fit: fill !important;
}

.flower-item__sub-media,
.flower-item__sub-media * {
    height: 30px !important;
    object-fit: fill !important;
}



.flower-item__button-details>a {

    display: inline-flex;
    background: url(/wp-content/uploads/2026/04/Group-e1776240889150.png) center / contain no-repeat;
    width: 14em !important;
    height: 6.9em !important;
    align-items: center;
    padding-left: 1.6em;
    padding-bottom: 0.2em;

}






.style-button .elementor-button {
    background: url('/wp-content/uploads/2026/04/bg-btn.png') center / 100% 100% no-repeat;
    background-color: transparent !Important;
}


.flower-container-top {
    container-type: inline-size;
}

.flower-image-top {
    height: 12.5cqw;
    container-type: inline-size;
}

.flower-image-top img {
    height: 100cqw;
}


.flower-container-bottom {
    container-type: inline-size;
}

.flower-image-bottom {
    height: 12.5cqw;
    container-type: inline-size;
    display: flex;
    align-items: end !important;
}

.flower-image-bottom img {
    height: 100cqw !important;
}



/* Flower item */
.flower-item__media {
    width: 100%;
    height: 100%;
}






.flower-container-top__about-us,
.flower-container-bottom__about-us {
    container-type: inline-size;
}

.flower-container-top__about-us .flower-image,
.flower-container-bottom__about-us .flower-image {
    container-type: inline-size;
    height: calc(100cqw / (7 * 2));
    display: flex;
}

.flower-container-top__about-us .flower-image {
    align-items: end;
}

.flower-container-bottom__about-us .flower-image {
    align-items: start;
}

.flower-container-top__about-us .flower-image img,
.flower-container-bottom__about-us .flower-image img {
    height: 100cqw;
    object-fit: contain;
}





.thank-you-text .elementor-heading-title {
    padding-bottom: 0.2em;
    background: url(/wp-content/uploads/2026/04/line-text-thank-you.png) bottom center / 10em no-repeat;
    position: relative;
}

.thank-you-text .elementor-heading-title::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background: url(/wp-content/uploads/2026/04/smile-heart-e1776314657528.png) center / contain no-repeat;
    top: -0.6em;
    right: -1.05em;
}


.thank-you__flower-wrapper {
    container-type: inline-size;
}

.thank-you__flower-item {
    height: 5cqw;
    container-type: inline-size;
    display: flex;
    align-items: end !important;
}

.thank-you__flower-item img {
    width: 100cqw;
    height: 100cqw !important;
    object-fit: contain;
}



@media (min-width: 769px) {
    .background-popup {
        background-size: 100% 100% !Important;
    }
}




/* Chèn tiếp đoạn css sau khi đã lọc từ functions.php*/
/* TỔNG THỂ POPUP */
#homenest-donation-container {
    margin: auto;
    text-align: center;
    font-family: 'Comic Sans', sans-serif;
}

.donation-step:not(.active) {
    display: none;
}

.donation-step.active {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.doodle-title {
    font-size: 40px;
    color: #4A3F35;
    font-weight: 700;
}

.item-list,
.method-list {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

/* STYLE CHO CÁC HÀNG (ROW) */
.doodle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF9E9;
    border-radius: 1.5em;
    padding: 1em 1.5em;
    font-size: 20px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}

.doodle-row~.doodle-row {
    margin-top: 0.75em;
}

.doodle-row:has(input:checked) {
    background: #FFECB3;
}

.doodle-row.out-of-stock {
    opacity: 0.6;
    cursor: not-allowed;
    background: #EFEFEF;
    border-color: transparent;
}

.doodle-row.out-of-stock input {
    cursor: not-allowed;
    pointer-events: none;
}

.row-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.item-price {
    color: #5DA08B;
    font-weight: bold;
}

/* NÚT BẤM NEXT/DONE */
.doodle-btn {
    color: #fff;
    border: none;
    padding: 1em;
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
    max-width: 560px;
    width: 100%;
}


/* CÁC THÔNG TIN PHỤ */
.method-note {
    font-size: 11px;
    color: #888;
    margin-top: 15px;
    line-height: 1.4;
}

.qr-box img {
    width: 100%;
    max-width: 200px;
    border-radius: 15px;
    border: 5px solid #FFF9E9;
}

.shipping-info {
    text-align: left;
    font-size: 20px;
    line-height: 1.6em;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flower-progress-container {
    font-family: 'Comic Sans', sans-serif;
}

.flower-total-needed {
    font-size: 24px;
    color: #8FAD71;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.flower-progress-box {
    background: #FFFFFF;
    border: 2px dashed #D3E0C1;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    align-items: flex-end;
}

.progress-left {
    color: #729658;
    font-size: 14px;
    line-height: 1.4;
}

.progress-left span {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
}

.progress-right {
    color: #4A3F35;
    font-size: 15px;
}

.progress-bar-bg {
    height: 12px;
    background: #F4F8F0;
    border-radius: 10px;
    position: relative;
    margin-bottom: 15px;
    border: 1px solid #E4EBE0;
}

.progress-bar-fill {
    height: 100%;
    background: #8FAD71;
    border-radius: 10px;
    position: relative;
    transition: width 1s ease;
    min-width: 0%;
    max-width: 100%;
}

.progress-icon {
    position: absolute;
    right: -12px;
    top: -7px;
    background: white;
    border: 2px solid #8FAD71;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-footer {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin: 0;
}

.flower-garden-wrapper {
    margin: 0 auto;
    text-align: center;
    font-family: 'Comic Sans', sans-serif;
    width: 100%;
}

.flower-garden-field {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.garden-bg {
    width: 100%;
    height: auto;
    display: block;
    /* Giúp field bao trọn height của cái ảnh */
}

.flowers-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 6% 8%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.flower-item {
    position: relative;
    /* Chiều cao và chiều rộng giờ điều khiển inline từ PHP */
    transition: all 0.3s ease;
    z-index: 0;
    transform: scale(1);
}

.flowers-grid-container .flower-item:hover {
    z-index: 1;
    transform: scale(1.05);
}

.flower-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    /*     filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)); */
    transition: all 0.3s ease;
}

/* .flower-item img:hover {
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.5));
} */

/* CSS giao diện gốc cho Tooltip (Đồng bộ cho cả Desktop và Mobile Modal) */
.flower-tooltip {
    background: #fff;
    padding: 1em 1em 3em 1em;
    border-radius: 0.75em;
    width: max-content;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 0.75em solid #f6ab81;
    text-align: left;
    font-size: 18px;
}

/* Định vị Tooltip khi ở chế độ hover (Desktop - trong cụm .flower-item) */
.flower-item .flower-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    max-width: 280px;
}

.flower-item .flower-tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 50px;
    background: transparent;
}

/* .flower-item .flower-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #f6ab81 transparent transparent transparent;
} */

.flower-item:hover .flower-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.flower-info {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 12px 0;
    font-size: 1em;
    color: #333;
    font-family: 'Comic Sans' !important;
}

.flower-info li {
    padding: 3px 0;
}


.choose-wishes-btn {
    display: inline-flex;
    background: url(/wp-content/uploads/2026/04/Group-e1776240889150.png) center / contain no-repeat;
    color: #fff !important;
    width: 14em;
    height: 6.9em;
    font-size: calc(1em + 0px);
    align-items: center;
    font-family: 'Comic Sans' !important;
    padding-left: 1.6em;
    padding-bottom: 0.2em;
    position: absolute;
    right: -2em;
    bottom: -3.6em;
}

.flower-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.flower-pagination a,
.flower-pagination span {
    padding: 0.444em 1em;
    border: 2px solid #4A3F35;
    background: #fff;
    color: #4A3F35;
    border-radius: 0.444em;
    text-decoration: none;
    font-size: 18px;
    transition: 0.2s;
}

.flower-pagination .current {
    background: #4A3F35;
    color: #fff;
}

.flower-pagination a:hover {
    background: #FFECB3;
}

	.donor-info-form,
.shipping-info,
.item-list,
.method-list {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 5px;
}


	.donor-info-form::-webkit-scrollbar,
.shipping-info::-webkit-scrollbar,
.item-list::-webkit-scrollbar,
.method-list::-webkit-scrollbar {
    width: 12px;
    background-color: #fff6cc;
}

	.donor-info-form::-webkit-scrollbar-track,
.shipping-info::-webkit-scrollbar-track,
.item-list::-webkit-scrollbar-track,
.method-list::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: transparent;
}

	.donor-info-form::-webkit-scrollbar-thumb,
.shipping-info::-webkit-scrollbar-thumb,
.item-list::-webkit-scrollbar-thumb,
.method-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ffc600;
    border: 2px solid #eff1f5;
}


@media (max-width: 1600px) {
    .doodle-title {
        font-size: 32px;
    }

    .doodle-row {
        font-size: 17px;
    }

    .shipping-info {
        font-size: 18px;
    }


    .flower-total-needed {
        font-size: 22px;
    }
}




@media (max-width: 1400px) {
    .doodle-title {
        font-size: 30px;
    }

    .doodle-row {
        font-size: 16px;
    }


    .flower-total-needed {
        font-size: 20px;
    }
}


@media (max-width: 1200px) {
    .doodle-title {
        font-size: 24px;
    }

    .flower-total-needed {
        font-size: 20px;
    }
}


@media (max-width: 996px) {
    .flower-total-needed {
        font-size: 18px;
    }


    .flower-progress-box {
        border-radius: 15px;
        padding: 16px;
    }
}


@media (max-width: 768px) {
    .doodle-title {
        font-size: 22px;
    }

    .doodle-row {
        font-size: 14px;
        border-radius: 10px;
    }

    .method-note {
        margin: 0;
    }

    .shipping-info {
        font-size: 15px;
    }

    .flower-pagination a,
    .flower-pagination span {
        font-size: 14px;
    }
    
    .donation-step.active {
        gap: 15px; /* Giảm khoảng cách giữa tiêu đề, content và nút bấm trên mobile */
    }
	
	.donor-info-form,
.shipping-info,
.item-list,
.method-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
}
}

/* Áp dụng thanh cuộn cho toàn bộ thiết bị (Mobile + Desktop) */


/* Styling cho Global Modal Popup trên Mobile */
.flower-global-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.flower-global-modal.show {
    opacity: 1;
    visibility: visible;
}

.flower-global-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* Định dạng cấu trúc Tooltip khi nó được đem vào trong Modal Mobile */
.flower-global-modal .flower-tooltip {
	font-family: 'Comic Sans';
    position: relative;
    /* Không dùng absolute như desktop */
    width: 85vw;
    max-width: 350px;
    /*     padding: 30px 20px 25px; */
    /*     text-align: center; */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flower-global-modal.show .flower-tooltip {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Ẩn hình tam giác khi là Modal */
.flower-global-modal .flower-tooltip::before,
.flower-global-modal .flower-tooltip::after {
    display: none;
}

.flower-global-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

/* Tuỳ chỉnh cách căn lề cho thông tin trong Modal */
/* .flower-global-modal .flower-info {
    list-style: none; 
    padding: 0;
    margin-bottom: 20px;
}

.flower-global-modal .flower-info li {
    font-size: 16px;
}

.flower-global-modal .flower-info li strong {
    font-size: 22px;
    display: block;
    margin-bottom: 10px;
    color: #4a3f35;
}

.flower-global-modal .choose-wishes-btn {
    margin-left: 0;
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
} */

/* Ẩn tooltip mặc định bên trong hoa trên môi trường màn hình nhỏ */
@media (max-width: 996px) {
    .flower-item:hover .flower-tooltip {
        display: none !important;
    }

    .flower-item:hover {
        transform: none !important;
    }
}






.checkout_custom * {
   font-family: "Comic Sans";
}

.checkout_custom table.shop_table {
    font-size: 1.1rem;
}
@media (max-width: 1200px) {
	.checkout_custom table.shop_table {
    font-size: 1rem;
}
}
@media (max-width: 768px) {
	.checkout_custom table.shop_table {
    font-size: 0.9rem;
}
}



.ppc-button-wrapper {
    display: none;
}
input#payment_method_ppcp-gateway + label {
    width: 100%;
    text-align: center;
    padding: 1em;
    background: #697ED9;
    border-radius: 0.5em;
	cursor: pointer;
	transition: background .3s ease;
	color: #fff;
}
input#payment_method_ppcp-gateway + label:hover {
	background: #33417c;
}