basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: remove CSS styles for charity hero component in block_11_charity.html

Browse Source
This commit is contained in:
Victor Phan
2026-07-30 10:20:36 +07:00
parent c3b0248df8
commit 953d521209
1 changed files with 705 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_11_charity.html
+198 -118
View File
@@ -8,12 +8,12 @@
--muted: #74747a; --muted: #74747a;
--paper: #f7f7f8; --paper: #f7f7f8;
--white: #ffffff; --white: #ffffff;
--shadow: 0 24px 70px rgba(174, 23, 55, .18); --shadow: 0 24px 70px rgba(174, 23, 55, 0.18);
--shadow-strong: 0 32px 90px rgba(100, 10, 30, .28); --shadow-strong: 0 32px 90px rgba(100, 10, 30, 0.28);
} }
.charity-hero { .charity-hero {
font-family: "Segoe UI", Arial, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--ink); color: var(--ink);
background: #f1f1f2; background: #f1f1f2;
position: relative; position: relative;
@@ -21,7 +21,7 @@
overflow: hidden; overflow: hidden;
isolation: isolate; isolation: isolate;
background: background:
radial-gradient(circle at 72% 22%, rgba(255,255,255,.92), transparent 28%), radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.92), transparent 28%),
linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%); linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
} }
@@ -45,14 +45,14 @@
position: absolute; position: absolute;
border-radius: 999px; border-radius: 999px;
filter: blur(3px); filter: blur(3px);
opacity: .72; opacity: 0.72;
animation: blobFloat 13s ease-in-out infinite alternate; animation: blobFloat 13s ease-in-out infinite alternate;
} }
.charity-hero .blob-1 { .charity-hero .blob-1 {
width: 460px; width: 460px;
height: 460px; height: 460px;
background: rgba(255,207,221,.75); background: rgba(255, 207, 221, 0.75);
left: -150px; left: -150px;
top: -170px; top: -170px;
} }
@@ -60,7 +60,7 @@
.charity-hero .blob-2 { .charity-hero .blob-2 {
width: 520px; width: 520px;
height: 520px; height: 520px;
background: rgba(255,236,241,.9); background: rgba(255, 236, 241, 0.9);
right: -180px; right: -180px;
bottom: -220px; bottom: -220px;
animation-delay: -3s; animation-delay: -3s;
@@ -69,7 +69,7 @@
.charity-hero .blob-3 { .charity-hero .blob-3 {
width: 220px; width: 220px;
height: 220px; height: 220px;
background: rgba(215,25,63,.12); background: rgba(215, 25, 63, 0.12);
left: 48%; left: 48%;
top: 48%; top: 48%;
animation-delay: -6s; animation-delay: -6s;
@@ -78,21 +78,21 @@
.charity-hero .soft-grid { .charity-hero .soft-grid {
position: absolute; position: absolute;
inset: 22px 150px; inset: 22px 150px;
border: 5px solid rgba(255,206,218,.68); border: 5px solid rgba(255, 206, 218, 0.68);
border-radius: 6px; border-radius: 6px;
mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
-webkit-mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); -webkit-mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
opacity: .76; opacity: 0.76;
} }
.charity-hero .soft-grid:before, .charity-hero .soft-grid:before,
.charity-hero .soft-grid:after { .charity-hero .soft-grid:after {
content: ""; content: '';
position: absolute; position: absolute;
background: var(--red); background: var(--red);
border-radius: 50% 50% 48% 48%; border-radius: 50% 50% 48% 48%;
transform: rotate(45deg); transform: rotate(45deg);
opacity: .9; opacity: 0.9;
} }
.charity-hero .soft-grid:before { .charity-hero .soft-grid:before {
@@ -108,8 +108,8 @@
height: 17px; height: 17px;
right: 18px; right: 18px;
top: 285px; top: 285px;
opacity: .55; opacity: 0.55;
box-shadow: 20px 19px 0 rgba(215,25,63,.9); box-shadow: 20px 19px 0 rgba(215, 25, 63, 0.9);
} }
.charity-hero .hero-shell { .charity-hero .hero-shell {
@@ -117,7 +117,7 @@
min-height: 546px; min-height: 546px;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: minmax(640px, 1.1fr) minmax(470px, .9fr); grid-template-columns: minmax(640px, 1.1fr) minmax(470px, 0.9fr);
gap: 42px; gap: 42px;
align-items: center; align-items: center;
padding: 36px 0; padding: 36px 0;
@@ -140,12 +140,12 @@
gap: 4px; gap: 4px;
padding: 10px 16px; padding: 10px 16px;
border-radius: 18px; border-radius: 18px;
background: rgba(255,255,255,.72); background: rgba(255, 255, 255, 0.72);
box-shadow: 0 12px 30px rgba(70,40,50,.08); box-shadow: 0 12px 30px rgba(70, 40, 50, 0.08);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transform: translateY(-12px); transform: translateY(-12px);
opacity: 0; opacity: 0;
animation: fadeDown .7s ease forwards .25s; animation: fadeDown 0.7s ease forwards 0.25s;
} }
.charity-hero .gallery-title .eyebrow { .charity-hero .gallery-title .eyebrow {
@@ -176,9 +176,9 @@
width: 310px; width: 310px;
height: 210px; height: 210px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 66%); background: radial-gradient(circle, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 66%);
pointer-events: none; pointer-events: none;
opacity: .45; opacity: 0.45;
mix-blend-mode: screen; mix-blend-mode: screen;
animation: lightPulse 4s ease-in-out infinite; animation: lightPulse 4s ease-in-out infinite;
} }
@@ -189,12 +189,14 @@
top: 50%; top: 50%;
width: 402px; width: 402px;
height: 238px; height: 238px;
transform: translate(-50%,-50%) scale(.86); transform: translate(-50%, -50%) scale(0.86);
border-radius: 22px; border-radius: 22px;
border: 1px solid rgba(215,25,63,.25); border: 1px solid rgba(215, 25, 63, 0.25);
box-shadow: 0 0 0 10px rgba(255,255,255,.16), inset 0 0 42px rgba(215,25,63,.07); box-shadow:
0 0 0 10px rgba(255, 255, 255, 0.16),
inset 0 0 42px rgba(215, 25, 63, 0.07);
opacity: 0; opacity: 0;
transition: .7s ease; transition: 0.7s ease;
pointer-events: none; pointer-events: none;
z-index: 4; z-index: 4;
} }
@@ -213,44 +215,45 @@
border: 4px solid var(--red); border: 4px solid var(--red);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
box-shadow: 0 14px 36px rgba(61,26,34,.22); box-shadow: 0 14px 36px rgba(61, 26, 34, 0.22);
transform: translate3d(0,0,0) rotate(var(--r)) scale(.92); transform: translate3d(0, 0, 0) rotate(var(--r)) scale(0.92);
opacity: 0; opacity: 0;
z-index: 5; z-index: 5;
will-change: left, top, width, transform, opacity, filter; will-change: transform, opacity;
animation: cardIntro .85s cubic-bezier(.2,.9,.25,1.12) forwards; animation: cardIntro 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.12) forwards;
animation-delay: var(--delay); animation-delay: var(--delay);
aspect-ratio: 4/3;
transition: transition:
opacity 2.5s ease-in-out, opacity 3s ease-in-out,
filter 2.5s ease-in-out, filter 3s ease-in-out,
box-shadow 1.5s cubic-bezier(.2,.8,.2,1), box-shadow 3s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 1.5s cubic-bezier(.2,.8,.2,1), border-color 3s cubic-bezier(0.2, 0.8, 0.2, 1),
left 1.5s cubic-bezier(.2,.8,.2,1), transform 3s cubic-bezier(0.2, 0.8, 0.2, 1);
top 1.5s cubic-bezier(.2,.8,.2,1),
width 1.5s cubic-bezier(.2,.8,.2,1),
transform 1.5s cubic-bezier(.2,.8,.2,1);
} }
.charity-hero .photo-card img { .charity-hero .photo-card img {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: 100%;
object-fit: cover;
transform: scale(1.035); transform: scale(1.035);
transition: transform 1s cubic-bezier(.18,.82,.18,1), filter .8s ease; transition:
transform 1s cubic-bezier(0.18, 0.82, 0.18, 1),
filter 0.8s ease;
} }
.charity-hero .photo-card:before { .charity-hero .photo-card:before {
content: ""; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 45%, transparent 70%); background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.34) 45%, transparent 70%);
transform: translateX(-130%); transform: translateX(-130%);
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
} }
.charity-hero .photo-card.is-active:before { .charity-hero .photo-card.is-active:before {
animation: shine 1.3s ease .25s; animation: shine 1.3s ease 0.25s;
} }
.charity-hero .photo-card.is-active { .charity-hero .photo-card.is-active {
@@ -272,24 +275,22 @@
} }
.charity-hero .photo-card.is-dim { .charity-hero .photo-card.is-dim {
opacity: .28; opacity: 0.28;
filter: grayscale(.08) saturate(.8) blur(.2px); filter: grayscale(0.08) saturate(0.8) blur(0.2px);
transform: translate3d(0,0,0) rotate(var(--r)) scale(.82); transform: translate3d(0, 0, 0) rotate(var(--r)) scale(0.82);
z-index: 2; z-index: 2;
} }
.charity-hero .photo-card.is-next { .charity-hero .photo-card.is-next {
opacity: .74; opacity: 0.74;
box-shadow: 0 17px 45px rgba(92,24,42,.18); box-shadow: 0 17px 45px rgba(92, 24, 42, 0.18);
} }
.charity-hero .photo-card.is-exit { .charity-hero .photo-card.is-exit {
opacity: 0; opacity: 0;
transform: translateY(28px) scale(.74) rotate(var(--r)); transform: translateY(28px) scale(0.74) rotate(var(--r));
} }
.charity-hero .gallery-controls { .charity-hero .gallery-controls {
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -304,15 +305,15 @@
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 999px; border-radius: 999px;
background: rgba(215,25,63,.22); background: rgba(215, 25, 63, 0.22);
transition: .35s ease; transition: 0.35s ease;
cursor: pointer; cursor: pointer;
} }
.charity-hero .dot.is-active { .charity-hero .dot.is-active {
width: 28px; width: 28px;
background: var(--red); background: var(--red);
box-shadow: 0 0 0 6px rgba(215,25,63,.09); box-shadow: 0 0 0 6px rgba(215, 25, 63, 0.09);
} }
.charity-hero .content-panel { .charity-hero .content-panel {
@@ -325,13 +326,13 @@
} }
.charity-hero .content-panel:before { .charity-hero .content-panel:before {
content: ""; content: '';
position: absolute; position: absolute;
inset: 28px 0 18px 0; inset: 28px 0 18px 0;
border-radius: 34px; border-radius: 34px;
background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.08)); background: linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.08));
border: 1px solid rgba(255,255,255,.55); border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 20px 70px rgba(62,45,54,.06); box-shadow: 0 20px 70px rgba(62, 45, 54, 0.06);
z-index: -1; z-index: -1;
} }
@@ -346,7 +347,7 @@
.charity-hero .logo-mark { .charity-hero .logo-mark {
width: 165px; width: 165px;
justify-self: end; justify-self: end;
filter: drop-shadow(0 10px 16px rgba(215,25,63,.15)); filter: drop-shadow(0 10px 16px rgba(215, 25, 63, 0.15));
animation: logoBreath 3.6s ease-in-out infinite; animation: logoBreath 3.6s ease-in-out infinite;
} }
@@ -360,7 +361,7 @@
text-transform: uppercase; text-transform: uppercase;
line-height: 1.18; line-height: 1.18;
font-size: clamp(20px, 1.72vw, 30px); font-size: clamp(20px, 1.72vw, 30px);
letter-spacing: -.3px; letter-spacing: -0.3px;
color: var(--red); color: var(--red);
font-weight: 900; font-weight: 900;
} }
@@ -371,7 +372,7 @@
text-transform: uppercase; text-transform: uppercase;
font-size: clamp(16px, 1.2vw, 22px); font-size: clamp(16px, 1.2vw, 22px);
font-weight: 800; font-weight: 800;
letter-spacing: .3px; letter-spacing: 0.3px;
} }
.charity-hero .slogan-card { .charity-hero .slogan-card {
@@ -383,7 +384,7 @@
} }
.charity-hero .slogan-card:before { .charity-hero .slogan-card:before {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@@ -391,10 +392,10 @@
height: 86%; height: 86%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 38px; border-radius: 38px;
background: linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,237,243,.72),rgba(255,255,255,.12)); background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 237, 243, 0.72), rgba(255, 255, 255, 0.12));
filter: blur(.2px); filter: blur(0.2px);
z-index: -1; z-index: -1;
opacity: .8; opacity: 0.8;
} }
.charity-hero .quote-mark { .charity-hero .quote-mark {
@@ -403,7 +404,7 @@
top: -16px; top: -16px;
font-size: 74px; font-size: 74px;
line-height: 1; line-height: 1;
color: rgba(215,25,63,.18); color: rgba(215, 25, 63, 0.18);
font-family: Georgia, serif; font-family: Georgia, serif;
} }
@@ -412,14 +413,14 @@
color: #e13b5e; color: #e13b5e;
font-size: clamp(29px, 2.2vw, 42px); font-size: clamp(29px, 2.2vw, 42px);
line-height: 1.42; line-height: 1.42;
font-family: "Segoe Script","Brush Script MT",cursive; font-family: 'Segoe Script', 'Brush Script MT', cursive;
font-weight: 600; font-weight: 600;
text-shadow: 0 8px 20px rgba(215,25,63,.12); text-shadow: 0 8px 20px rgba(215, 25, 63, 0.12);
} }
.charity-hero .slogan-card h2 em { .charity-hero .slogan-card h2 em {
font-style: normal; font-style: normal;
font-size: .86em; font-size: 0.86em;
color: #d9284c; color: #d9284c;
} }
@@ -432,7 +433,7 @@
} }
.charity-hero .heart-line:before { .charity-hero .heart-line:before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
right: 34px; right: 34px;
@@ -443,7 +444,7 @@
} }
.charity-hero .heart-line:after { .charity-hero .heart-line:after {
content: "♡"; content: '♡';
position: absolute; position: absolute;
right: 6px; right: 6px;
top: -8px; top: -8px;
@@ -470,9 +471,9 @@
border-radius: 999px; border-radius: 999px;
font-weight: 800; font-weight: 800;
font-size: 14px; font-size: 14px;
letter-spacing: .2px; letter-spacing: 0.2px;
transition: .3s ease; transition: 0.3s ease;
box-shadow: 0 12px 30px rgba(115,21,43,.12); box-shadow: 0 12px 30px rgba(115, 21, 43, 0.12);
} }
.charity-hero .btn.primary { .charity-hero .btn.primary {
@@ -481,62 +482,97 @@
} }
.charity-hero .btn.secondary { .charity-hero .btn.secondary {
background: rgba(255,255,255,.74); background: rgba(255, 255, 255, 0.74);
color: var(--red); color: var(--red);
border: 1px solid rgba(215,25,63,.18); border: 1px solid rgba(215, 25, 63, 0.18);
} }
.charity-hero .reveal-up { .charity-hero .reveal-up {
opacity: 0; opacity: 0;
transform: translateY(24px); transform: translateY(24px);
animation: revealUp .8s ease forwards; animation: revealUp 0.8s ease forwards;
} }
.charity-hero .brand-text.reveal-up { .charity-hero .brand-text.reveal-up {
animation-delay: .2s; animation-delay: 0.2s;
} }
.charity-hero .logo-mark.reveal-up { .charity-hero .logo-mark.reveal-up {
animation-delay: .38s; animation-delay: 0.38s;
} }
.charity-hero .slogan-card.reveal-up { .charity-hero .slogan-card.reveal-up {
animation-delay: .62s; animation-delay: 0.62s;
} }
.charity-hero .action-row.reveal-up { .charity-hero .action-row.reveal-up {
animation-delay: .86s; animation-delay: 0.86s;
} }
@keyframes cardIntro { @keyframes cardIntro {
from { opacity: 0; transform: translate3d(-28px,22px,0) rotate(calc(var(--r) - 7deg)) scale(.78); } from {
to { opacity: 1; transform: translate3d(0,0,0) rotate(var(--r)) scale(.92); } opacity: 0;
transform: translate3d(-28px, 22px, 0) rotate(calc(var(--r) - 7deg)) scale(0.78);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(var(--r)) scale(0.92);
}
} }
/* Removed microFloat because animating margin-top constantly recalculates layout causing major stutter */ /* Removed microFloat because animating margin-top constantly recalculates layout causing major stutter */
@keyframes shine { @keyframes shine {
to { transform: translateX(130%); } to {
transform: translateX(130%);
}
} }
@keyframes revealUp { @keyframes revealUp {
to { opacity: 1; transform: translateY(0); } to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes fadeDown { @keyframes fadeDown {
to { opacity: 1; transform: translateY(0); } to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes logoBreath { @keyframes logoBreath {
0%,100% { transform: translateY(0) scale(1); } 0%,
50% { transform: translateY(-6px) scale(1.025); } 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-6px) scale(1.025);
}
} }
@keyframes heartBeat { @keyframes heartBeat {
0%,100% { transform: rotate(18deg) scale(1); } 0%,
20% { transform: rotate(18deg) scale(1.18); } 100% {
38% { transform: rotate(18deg) scale(1); } transform: rotate(18deg) scale(1);
}
20% {
transform: rotate(18deg) scale(1.18);
}
38% {
transform: rotate(18deg) scale(1);
}
} }
@keyframes blobFloat { @keyframes blobFloat {
to { transform: translate(26px,20px) scale(1.05); } to {
transform: translate(26px, 20px) scale(1.05);
}
} }
@keyframes lightPulse { @keyframes lightPulse {
0%,100% { opacity: .25; transform: scale(.96); } 0%,
50% { opacity: .58; transform: scale(1.08); } 100% {
opacity: 0.25;
transform: scale(0.96);
}
50% {
opacity: 0.58;
transform: scale(1.08);
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@@ -545,37 +581,81 @@
gap: 10px; gap: 10px;
padding: 18px 0 34px; padding: 18px 0 34px;
} }
.charity-hero { min-height: auto; } .charity-hero {
.charity-hero .content-panel { min-height: auto; } min-height: auto;
.charity-hero .gallery-panel { min-height: 470px; } }
.charity-hero .gallery-stage { height: 430px; } .charity-hero .content-panel {
.charity-hero .brand-row { grid-template-columns: 1fr 130px; margin-bottom: 20px; } min-height: auto;
.charity-hero .logo-mark { width: 130px; } }
.charity-hero .gallery-panel {
min-height: 470px;
}
.charity-hero .gallery-stage {
height: 430px;
}
.charity-hero .brand-row {
grid-template-columns: 1fr 130px;
margin-bottom: 20px;
}
.charity-hero .logo-mark {
width: 130px;
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.charity-hero .hero-shell { width: calc(100% - 24px); } .charity-hero .hero-shell {
.charity-hero .soft-grid { inset: 12px; border-width: 3px; } width: calc(100% - 24px);
.charity-hero .gallery-panel { padding: 12px 0; min-height: 390px; } }
.charity-hero .gallery-title { display: none; } .charity-hero .soft-grid {
.charity-hero .gallery-stage { height: 370px; overflow: hidden; } inset: 12px;
.charity-hero .photo-card { width: calc(var(--w) * .72); } border-width: 3px;
.charity-hero .photo-card.is-active { width: min(86vw,380px); } }
.charity-hero .content-panel { padding: 8px; } .charity-hero .gallery-panel {
.charity-hero .brand-row { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; } padding: 12px 0;
.charity-hero .brand-text h1 { text-align: center; } min-height: 390px;
.charity-hero .slogan-card h2 { font-size: 29px; } }
.charity-hero .btn { height: 42px; padding: 0 16px; } .charity-hero .gallery-title {
display: none;
}
.charity-hero .gallery-stage {
height: 370px;
overflow: hidden;
}
.charity-hero .photo-card {
width: calc(var(--w) * 0.72);
}
.charity-hero .photo-card.is-active {
width: min(86vw, 380px);
}
.charity-hero .content-panel {
padding: 8px;
}
.charity-hero .brand-row {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 10px;
}
.charity-hero .brand-text h1 {
text-align: center;
}
.charity-hero .slogan-card h2 {
font-size: 29px;
}
.charity-hero .btn {
height: 42px;
padding: 0 16px;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.charity-hero *, .charity-hero *,
.charity-hero *::before, .charity-hero *::before,
.charity-hero *::after { .charity-hero *::after {
animation-duration: .01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
transition-duration: .01ms !important; transition-duration: 0.01ms !important;
} }
} }
</style> </style>
@@ -596,28 +676,28 @@
</div> </div>
<div class="gallery-stage" id="galleryStage"> <div class="gallery-stage" id="galleryStage">
<article class="photo-card p1" data-index="0" style="--x: -4%; --y: 2%; --r: -2.5deg; --w: 205px; --delay: 0.05s;"> <article class="photo-card p1" data-index="0" style="--x: -4%; --y: 2%; --r: -2.5deg; --w: 205px; --delay: 0.05s">
<img src="/upload/charity_v4/photo-01.jpg" alt="Trao hỗ trợ bệnh nhân 1" /> <img src="/upload/charity_v4/photo-01.jpg" alt="Trao hỗ trợ bệnh nhân 1" />
</article> </article>
<article class="photo-card p2" data-index="1" style="--x: 18%; --y: -2%; --r: 1.6deg; --w: 298px; --delay: 0.16s;"> <article class="photo-card p2" data-index="1" style="--x: 18%; --y: -2%; --r: 1.6deg; --w: 298px; --delay: 0.16s">
<img src="/upload/charity_v4/photo-02.jpg" alt="Trao hỗ trợ bệnh nhân 2" /> <img src="/upload/charity_v4/photo-02.jpg" alt="Trao hỗ trợ bệnh nhân 2" />
</article> </article>
<article class="photo-card p3" data-index="2" style="--x: 63%; --y: 0%; --r: -1.2deg; --w: 410px; --delay: 0.27s;"> <article class="photo-card p3" data-index="2" style="--x: 63%; --y: 0%; --r: -1.2deg; --w: 410px; --delay: 0.27s">
<img src="/upload/charity_v4/photo-05.jpg" alt="Trao hỗ trợ bệnh nhân 3" /> <img src="/upload/charity_v4/photo-05.jpg" alt="Trao hỗ trợ bệnh nhân 3" />
</article> </article>
<article class="photo-card p4" data-index="3" style="--x: 0%; --y: 27%; --r: 2.2deg; --w: 245px; --delay: 0.38s"> <article class="photo-card p4" data-index="3" style="--x: 0%; --y: 27%; --r: 2.2deg; --w: 245px; --delay: 0.38s">
<img src="/upload/charity_v4/photo-03.jpg" alt="Trao hỗ trợ bệnh nhân 4" /> <img src="/upload/charity_v4/photo-03.jpg" alt="Trao hỗ trợ bệnh nhân 4" />
</article> </article>
<article class="photo-card p5" data-index="4" style="--x: 32%; --y: 32%; --r: -1.8deg; --w: 260px; --delay: 0.49s;"> <article class="photo-card p5" data-index="4" style="--x: 32%; --y: 32%; --r: -1.8deg; --w: 260px; --delay: 0.49s">
<img src="/upload/charity_v4/photo-04.jpg" alt="Trao hỗ trợ bệnh nhân 5" /> <img src="/upload/charity_v4/photo-04.jpg" alt="Trao hỗ trợ bệnh nhân 5" />
</article> </article>
<article class="photo-card p6" data-index="5" style="--x: 57%; --y: 35%; --r: 1deg; --w: 195px; --delay: 0.6s"> <article class="photo-card p6" data-index="5" style="--x: 57%; --y: 35%; --r: 1deg; --w: 195px; --delay: 0.6s">
<img src="/upload/charity_v4/photo-06.jpg" alt="Trao hỗ trợ bệnh nhân 6" /> <img src="/upload/charity_v4/photo-06.jpg" alt="Trao hỗ trợ bệnh nhân 6" />
</article> </article>
<article class="photo-card p7" data-index="6" style="--x: 4%; --y: 62%; --r: -1.4deg; --w: 270px; --delay: 0.71s;"> <article class="photo-card p7" data-index="6" style="--x: 4%; --y: 62%; --r: -1.4deg; --w: 270px; --delay: 0.71s">
<img src="/upload/charity_v4/photo-07.jpg" alt="Trao hỗ trợ bệnh nhân 7" /> <img src="/upload/charity_v4/photo-07.jpg" alt="Trao hỗ trợ bệnh nhân 7" />
</article> </article>
<article class="photo-card p8" data-index="7" style="--x: 42%; --y: 73%; --r: 1.2deg; --w: 255px; --delay: 0.82s;"> <article class="photo-card p8" data-index="7" style="--x: 42%; --y: 73%; --r: 1.2deg; --w: 255px; --delay: 0.82s">
<img src="/upload/charity_v4/photo-08.jpg" alt="Trao hỗ trợ bệnh nhân 8" /> <img src="/upload/charity_v4/photo-08.jpg" alt="Trao hỗ trợ bệnh nhân 8" />
</article> </article>
<article class="photo-card p9" data-index="8" style="--x: 77%; --y: 66%; --r: -1deg; --w: 338px; --delay: 0.93s"> <article class="photo-card p9" data-index="8" style="--x: 77%; --y: 66%; --r: -1deg; --w: 338px; --delay: 0.93s">