.vinapo-affi-box {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
border: 1px solid #eee;
border-radius: 14px;
padding: 14px;
margin: 20px 0;
position: relative;
background: #fffafc;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.vinapo-affi-box a:focus {
outline: none;
box-shadow: 0 0 0 0 transparent;
}
.vinapo-affi-img-wrap {
position: relative;
}
.vinapo-affi-img {
position: relative;
z-index: 1;
} .sparkleDiamond {
width: 1px;
height: 2px;
position: absolute;
border-radius: 50%;
z-index: 9999;
opacity: 0;
animation: sparkle 1.8s infinite ease-in-out;
pointer-events: none;
filter: blur(1px);
backface-visibility: hidden;
will-change: transform, opacity;
} .sparkleDiamond.light {
background: white;
box-shadow: 0 0 14px 8px rgba(255,255,255,0.8);
} .sparkleDiamond.sparkle-sharp {
background-image: url(https://venus-y.com/wp-content/uploads/2025/07/sparkle_sharp_vinapo.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 33px;
height: 33px;
box-shadow: none;
filter: none; 
} .sparkleDiamond.sparkle-glow {
background-image: url(https://venus-y.com/wp-content/uploads/2025/07/sparkle_glow_vinapo.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 70px;
height: 70px;
box-shadow: none;
filter: none;
}
@keyframes sparkle {
0%   { transform: scale(0.4); opacity: 0; }
10%  { transform: scale(1.6); opacity: 1; }
30%  { transform: scale(1);   opacity: 0.6; }
100% { transform: scale(0.4); opacity: 0; }
}
.vinapo-affi-img-wrap {
flex: 0 0 auto;
max-width: 180px;
margin-right: 16px;
}
.vinapo-affi-img {
max-width: 180px;
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
aspect-ratio: 4 / 3;
display: block;
}
.vinapo-affi-img-wrap.vertical {
flex: 0 0 auto;
max-width: 140px; 
margin-right: 16px;
}
.vinapo-affi-img.vertical {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
display: block;
margin: 0 auto;
object-fit: cover;
border-radius: 8px;
}
.vinapo-affi-text {
flex: 2 1 220px;
text-align: left;
min-width: 0;
}
.vinapo-affi-title {
font-size: 16px;
font-weight: bold;
color: #444;
margin-bottom: 8px;
}
.vinapo-affi-comment {
font-size: 14px;
color: #666;
margin-bottom: 12px;
line-height: 1.6;
}
.vinapo-affi-comment strong {
color: #d06c86;
font-weight: bold;
}
.vinapo-affi-point {
font-size: 13px;
font-weight: bold;
color: #b56978 !important;
margin-top: -8px;
margin-bottom: 12px;
}
.vinapo-affi-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.vinapo-affi-buttons a {
padding: 8px 14px;
border-radius: 30px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 13px;
transition: 0.3s ease;
display: inline-block;
min-width: 80px;
}
.vinapo-affi-buttons a:hover {
opacity: 0.8;
transform: scale(1.03);
} @media (max-width: 480px) {
.vinapo-affi-box {
flex-direction: column;
align-items: center;
text-align: center;
}
.vinapo-affi-img-wrap {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-bottom: 12px;
text-align: center;
}
.vinapo-affi-img {
width: 100%;
max-width: 100% !important; 
height: auto;
display: block;
margin: 0 auto;
aspect-ratio: unset;
object-fit: contain;
}
.vinapo-affi-img.vertical {
max-width: 100%;
height: auto;
aspect-ratio: unset;
}
.vinapo-affi-text {
text-align: center;
}
@media (max-width: 768px) {
.vinapo-affi-buttons {
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
.vinapo-affi-buttons a {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
} .amazon-btn {
background-color: #D8A27C;
}
.rakuten-btn {
background-color: #D78888;
}
.yahoo-btn {
background-color: #A06767;
} .vinapo-affi-box {
position: relative;
background-image: url(https://venus-y.com/wp-content/uploads/2025/07/vinapo-affi-bg-flower-soft-1080x1920-1-2.png);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
opacity: 0.95; 
z-index: 0;
overflow: hidden;
} .vinapo-butterfly {
position: absolute;
width: 49px;
animation: floatY 6s ease-in-out infinite;
z-index: 1;
pointer-events: none;
opacity: 0.9;
} .vinapo-butterfly-01 { top: 1%; left: 0.1%; animation-delay: 0s; }
.vinapo-butterfly-02 { top: 41%; right: 5%; animation-delay: 1s; }
.vinapo-butterfly-03 { top: 35%; right: 0.1%; animation-delay: 2s; }
.vinapo-butterfly-04 { bottom: 22%; right: 0.1%; animation-delay: 3s; }
.vinapo-fairy-gold { bottom: 31%; left: 0.1%; animation-delay: 2s; opacity: 1; transform: scale(1.1); } @keyframes floatY {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.vinapo-butterfly-03 {
width: 38px;
animation: floatYsmol 6s ease-in-out infinite;
}
@keyframes floatYsmol {
0%   { transform: translateY(0px) rotate(0deg); }
50%  { transform: translateY(-10px) rotate(1deg); }
100% { transform: translateY(0px) rotate(0deg); }
}