/* --- General Styles for Accordions (Gift/Deal Default) --- */
.yuki-style-gift-default .yuki-promo-accordion,
.yuki-style-deal-default .yuki-promo-accordion {
    margin: 25px 0;
    border-radius: 8px;
    overflow: hidden;
    font-family: inherit;
    border: 1px solid #ffdde1;
    box-shadow: 0 5px 20px rgba(229, 62, 62, .1)
}

.yuki-style-deal-default .yuki-promo-accordion {
    border-color: #dadae5
}

.yuki-style-deal-default .yuki-promo-accordion .yuki-promo-accordion-header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)
}

.yuki-promo-accordion-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
    color: #fff;
    cursor: pointer;
    transition: background-color .3s ease
}

.yuki-promo-accordion-header:hover {
    filter: brightness(1.1)
}

.yuki-promo-accordion-header .yuki-promo-icon {
    font-size: 1.6em;
    margin-right: 12px;
    animation: yuki-tada 2.5s ease-in-out infinite
}

.yuki-promo-accordion-header strong {
    font-size: 1.15em;
    flex-grow: 1;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .1)
}

.yuki-promo-accordion-header .yuki-promo-toggle-icon {
    font-size: 1em;
    transition: transform .3s ease
}

.yuki-promo-accordion.open .yuki-promo-toggle-icon {
    transform: rotate(180deg)
}

.yuki-promo-accordion-content {
    padding: 20px;
    background: #fff;
    display: none
}

.yuki-promo-accordion-content p {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1em
}

.yuki-promo-details {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-top: 15px;
    border-top: 1px dashed #ddd
}

.yuki-promo-details label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer
}

.yuki-promo-details input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin-right: 15px;
    flex-shrink: 0
}

.yuki-promo-thumb img {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 5px
}

.yuki-promo-info {
    line-height: 1.5
}

.yuki-promo-name-link {
    text-decoration: none
}

.yuki-promo-name {
    font-weight: 600;
    color: #333
}

.yuki-promo-name:hover {
    color: #c0392b
}

.yuki-promo-price del {
    color: #999;
    margin-right: 8px
}

.yuki-promo-price strong {
    color: #d63031;
    font-weight: 700;
    font-size: 1.1em
}

@keyframes yuki-tada {

    from,
    to {
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -5deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 5deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -5deg)
    }
}

/* --- Keyframe Animations for Modern Style --- */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* --- Flash Sale - Default Style --- */
.yuki-style-flashsale-default .yuki-flash-sale-box {
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%);
    color: white;
    padding: 12px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    animation: breathing 2.5s infinite ease-in-out;
    box-shadow: 0 8px 32px -8px rgba(255, 106, 136, 0.8)
}

.yuki-style-flashsale-default .yuki-flash-sale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.yuki-style-flashsale-default .yuki-flash-sale-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 1.4em;
    text-transform: uppercase;
    animation: glow 2s infinite alternate
}

.yuki-style-flashsale-default .yuki-flash-sale-title svg {
    width: 22px;
    height: 22px
}

.yuki-style-flashsale-default .yuki-flash-sale-countdown {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold
}

.yuki-style-flashsale-default .yuki-countdown-item {
    background: rgba(0, 0, 0, 0.15);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1.2em;
    line-height: 1;
    min-width: 32px;
    text-align: center
}

.yuki-style-flashsale-default .yuki-countdown-sep {
    font-size: 1.1em;
    animation: blink-sep 1.2s infinite
}

.yuki-style-flashsale-default .yuki-flash-sale-progress-container {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    position: relative
}

.yuki-style-flashsale-default .yuki-flash-sale-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    height: 100%;
    border-radius: 10px;
    transition: width .5s ease-in-out
}

.yuki-style-flashsale-default .yuki-flash-sale-progress-info {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    height: 100%;
    align-items: center
}

.yuki-style-flashsale-default .yuki-flash-sale-sold-count,
.yuki-style-flashsale-default .yuki-flash-sale-remaining-count {
    font-size: .8rem;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)
}

@keyframes breathing {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #ff7eb3
    }

    to {
        text-shadow: 0 0 8px #fff, 0 0 16px #ff4e50, 0 0 20px #ff7eb3
    }
}

@keyframes blink-sep {
    50% {
        opacity: 0.2
    }
}


/* START: UPDATE CSS FOR FIGMA DESIGN (FINAL-FINAL TWEAKS) */
/* --- Flash Sale - Modern Style (Figma Design) --- */
body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-box {
    background: linear-gradient(180deg, #010084 41.35%, #403EE3 100%);
    color: #FFFFFF;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    animation: slideUpFadeIn 0.5s ease-out forwards;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    min-height: 94px;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 15px;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-title {
    flex-grow: 1;
    min-width: 0;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-fs-title-img {
    height: clamp(28px, 4vw, 35px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-countdown {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    /* Final size adjustment */
    font-size: clamp(20px, 3.2vw, 26px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    white-space: nowrap;
    flex-shrink: 0;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-countdown .yuki-fs-icon-clock {
    /* Final icon size adjustment */
    width: 0.9em !important;
    height: 0.9em !important;
    margin-right: 0.4em;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-countdown-hours::after,
body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-countdown-minutes::after {
    content: ':';
    padding: 0 0.1em;
    /* Reduced space around colon */
}


body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-countdown-item,
body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-countdown-sep {
    font-size: 1em !important;
    padding: 0 !important;
    background: none !important;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-progress-container {
    background: #FFFFFF;
    box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    height: 18px !important;
    overflow: hidden;
    position: relative;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #F65E00 0%, #FF9D00 65%);
    mix-blend-mode: multiply;
    height: 100%;
    border-radius: 30px;
    transition: width .5s ease-in-out;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-progress-info {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-remaining-count {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #020184 !important;
}

body .yuki-style-wrapper.yuki-style-flashsale-modern .yuki-flash-sale-ended {
    font-weight: bold;
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    color: #FFFFFF;
}

/* END: UPDATE CSS FOR FIGMA DESIGN (FINAL-FINAL TWEAKS) */


/* --- Compact Styles --- */
.yuki-style-flashsale-compact .yuki-flash-sale-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff5f5;
    border-left: 4px solid #ff6b6b;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.95em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
}

.yuki-style-flashsale-compact .yuki-flash-sale-title {
    font-weight: bold;
    color: #c92a2a
}

.yuki-style-flashsale-compact .yuki-flash-sale-countdown {
    display: flex;
    gap: 4px;
    color: #c92a2a
}

.yuki-style-flashsale-compact .yuki-countdown-item {
    font-weight: bold
}

.yuki-style-flashsale-compact .yuki-flash-sale-stock-info {
    margin-left: auto;
    color: #868e96;
    font-style: italic
}

.yuki-style-gift-compact .yuki-compact-box,
.yuki-style-deal-compact .yuki-compact-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f3f5;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.95em;
    border-left: 4px solid #495057
}

.yuki-style-gift-compact .yuki-compact-box {
    border-left-color: #f76707;
    background: #fff9e6;
}

.yuki-style-deal-compact .yuki-compact-box {
    border-left-color: #1c7ed6;
    background: #e7f5ff;
}

.yuki-style-gift-compact .yuki-compact-icon,
.yuki-style-deal-compact .yuki-compact-icon {
    font-size: 1.2em
}

.yuki-style-gift-compact .yuki-compact-text strong,
.yuki-style-deal-compact .yuki-compact-text strong {
    color: #343a40
}

/* --- Modern Styles (Pastel with Animation) --- */
.yuki-style-gift-modern .yuki-modern-box,
.yuki-style-deal-modern .yuki-modern-box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: slideUpFadeIn 0.5s ease-out forwards;
}

.yuki-style-gift-modern .yuki-modern-icon,
.yuki-style-deal-modern .yuki-modern-icon {
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
}

.yuki-style-gift-modern .yuki-modern-box:hover .yuki-modern-icon,
.yuki-style-deal-modern .yuki-modern-box:hover .yuki-modern-icon {
    transform: scale(1.1) rotate(10deg);
}

.yuki-style-gift-modern .yuki-modern-info,
.yuki-style-deal-modern .yuki-modern-info {
    flex-grow: 1;
}

.yuki-style-gift-modern .yuki-modern-info strong,
.yuki-style-deal-modern .yuki-modern-info strong {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 4px;
}

.yuki-style-gift-modern .yuki-modern-info span,
.yuki-style-deal-modern .yuki-modern-info .yuki-deal-description {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
}

.yuki-style-gift-modern .yuki-modern-info span a,
.yuki-style-deal-modern .yuki-modern-info span a {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px dotted;
}

.yuki-style-gift-modern .yuki-modern-thumb,
.yuki-style-deal-modern .yuki-modern-thumb {
    margin-left: auto
}

.yuki-style-gift-modern .yuki-modern-thumb img,
.yuki-style-deal-modern .yuki-modern-thumb img {
    width: 55px;
    height: 55px;
    border-radius: 8px
}

/* Gift Modern Colors */
.yuki-style-gift-modern .yuki-modern-box {
    background: #e6fcf5;
    border: 1px solid #c3fae8;
}

.yuki-style-gift-modern .yuki-modern-icon {
    background-color: #96f2d7;
    color: #20c997;
}

.yuki-style-gift-modern .yuki-modern-info strong {
    color: #087f5b;
}

.yuki-style-gift-modern .yuki-modern-info span a {
    border-color: #087f5b;
}

/* Deal Modern Colors & Flexbox Fix */
.yuki-style-deal-modern .yuki-modern-box {
    background: #edf2ff;
    border: 1px solid #dbe4ff;
}

.yuki-style-deal-modern .yuki-modern-icon {
    background-color: #aac4ff;
    color: #4c6ef5;
}

.yuki-style-deal-modern .yuki-modern-info strong {
    color: #364fc7;
}

.yuki-style-deal-modern .yuki-modern-info .yuki-deal-description {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em;
}

.yuki-style-deal-modern .yuki-modern-info .yuki-deal-price-part {
    color: #364fc7;
    font-size: 1.1em;
    font-weight: bold;
}

.yuki-style-deal-modern .yuki-modern-info span a {
    border-color: #364fc7;
}


/* *** START: CSS for Popup Banner (Optimized Version for Transparent PNG) *** */

/* 1. Wrapper Chung */
.yuki-popup-banner-wrapper {
    position: fixed;
    z-index: 99999;
    display: none;
    /* JS sẽ handle việc hiện */
}

/* 2. Style cho Vị trí */
/* Bottom Right */
.yuki-popup-banner-wrapper.yuki-pos-bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Center */
.yuki-popup-banner-wrapper.yuki-pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

/* Overlay cho Center Popup (chỉ hiện khi pos=center) */
.yuki-popup-overlay {
    position: fixed;
    top: -50vh;
    /* Hack để full màn hình do wrapper bị transform */
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    /* Nằm dưới nội dung popup */
    cursor: pointer;
}

/* 3. Nội dung Popup (Inner) */
.yuki-popup-inner {
    position: relative;
    background: transparent;
    /* Hiệu ứng xuất hiện */
    animation: yukiPopupFadeIn 0.4s ease-out forwards;
}

@keyframes yukiPopupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.yuki-pos-bottom-right .yuki-popup-inner {
    animation: yukiSlideUp 0.4s ease-out forwards;
}

@keyframes yukiSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* 4. Hình ảnh & Link - FIX TRONG SUỐT */
.yuki-popup-banner-content {
    line-height: 0;
    /* Loại bỏ nền trắng và bóng mờ để hỗ trợ PNG trong suốt */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible;
    /* Để nút close không bị cắt nếu lòi ra */
}

.yuki-popup-banner-content img {
    display: block;
    height: auto;

    /* Áp dụng Width từ Admin, mặc định 350px nếu không set */
    width: var(--yuki-popup-width-pc, 350px);

    /* Đảm bảo ảnh không vỡ layout */
    max-width: 100%;
}

/* Center popup có thể to hơn nhưng không quá màn hình */
.yuki-pos-center .yuki-popup-banner-content img {
    max-height: 80vh;
    max-width: 90vw;
    /* An toàn trên mọi màn hình */
}

/* 5. Nút Đóng (Close Button) - CỐ ĐỊNH HÌNH TRÒN */
.yuki-popup-close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    background: rgba(51, 51, 51, 0.9);
    border: 2px solid #fff;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    padding: 0 !important;
    line-height: 1 !important;
    aspect-ratio: 1/1;
}

.yuki-popup-close-btn:hover {
    background: #d63031;
    transform: scale(1.1);
}

.yuki-popup-close-btn svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

/* 6. Đồng hồ đếm ngược */
.yuki-popup-countdown {
    background: #d63031;
    color: #fff;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    font-family: monospace;
    border-radius: 0 0 12px 12px;
    /* Bo góc dưới */
    margin-top: -5px;
    /* Dính liền với ảnh, đè lên một chút để liền mạch nếu ảnh cong */
    position: relative;
    z-index: 5;
    /* Giới hạn chiều rộng countdown theo chiều rộng ảnh */
    width: var(--yuki-popup-width-pc, 350px);
    max-width: 100%;
}

/* 7. Mobile Responsive */
@media (max-width: 768px) {

    /* Center Popup Mobile */
    .yuki-popup-banner-wrapper.yuki-pos-center {
        width: 90%;
        max-width: 90%;
    }

    /* Bottom Right Popup Mobile */
    .yuki-popup-banner-wrapper.yuki-pos-bottom-right {
        right: 10px;
        bottom: 10px;
        left: auto;

        /* Giới hạn max-width trên mobile để không quá to */
        max-width: 90vw;
    }

    /* Áp dụng Width Mobile từ Admin */
    .yuki-popup-banner-content img {
        width: var(--yuki-popup-width-mobile, 300px) !important;
        max-width: 90vw !important;
        /* Không bao giờ vượt quá 90% màn hình */
    }

    .yuki-popup-countdown {
        width: var(--yuki-popup-width-mobile, 300px) !important;
        max-width: 90vw !important;
        font-size: 13px;
        padding: 5px;
    }

    /* Điều chỉnh nút close trên mobile */
    .yuki-popup-close-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        top: -10px;
        right: -10px;
    }
}

/* *** END: CSS for Popup Banner *** */