From 953d521209dd9d060add5e4c94f0ae3f13fb7079 Mon Sep 17 00:00:00 2001
From: Victor Phan <basketballcantho@gmail.com>
Date: Thu, 30 Jul 2026 10:20:36 +0700
Subject: [PATCH] refactor: remove CSS styles for charity hero component in
 block_11_charity.html

---
 .../umass/snippets/block_11_charity.html      | 1330 +++++++++--------
 1 file changed, 705 insertions(+), 625 deletions(-)

diff --git a/sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_11_charity.html b/sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_11_charity.html
index a5464c14..e1f6e5e2 100644
--- a/sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_11_charity.html
+++ b/sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_11_charity.html
@@ -1,583 +1,663 @@
 <style>
-.charity-hero {
-  --red: #d7193f;
-  --red-dark: #a90f2d;
-  --red-soft: #fff0f4;
-  --pink: #ffe3ec;
-  --ink: #36363a;
-  --muted: #74747a;
-  --paper: #f7f7f8;
-  --white: #ffffff;
-  --shadow: 0 24px 70px rgba(174, 23, 55, .18);
-  --shadow-strong: 0 32px 90px rgba(100, 10, 30, .28);
-}
+  .charity-hero {
+    --red: #d7193f;
+    --red-dark: #a90f2d;
+    --red-soft: #fff0f4;
+    --pink: #ffe3ec;
+    --ink: #36363a;
+    --muted: #74747a;
+    --paper: #f7f7f8;
+    --white: #ffffff;
+    --shadow: 0 24px 70px rgba(174, 23, 55, 0.18);
+    --shadow-strong: 0 32px 90px rgba(100, 10, 30, 0.28);
+  }
 
-.charity-hero {
-  font-family: "Segoe UI", Arial, sans-serif;
-  color: var(--ink);
-  background: #f1f1f2;
-  position: relative;
-  min-height: 546px;
-  overflow: hidden;
-  isolation: isolate;
-  background:
-    radial-gradient(circle at 72% 22%, rgba(255,255,255,.92), transparent 28%),
-    linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
-}
+  .charity-hero {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--ink);
+    background: #f1f1f2;
+    position: relative;
+    min-height: 546px;
+    overflow: hidden;
+    isolation: isolate;
+    background:
+      radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.92), transparent 28%),
+      linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
+  }
 
-.charity-hero * {
-  box-sizing: border-box;
-}
+  .charity-hero * {
+    box-sizing: border-box;
+  }
 
-.charity-hero a {
-  text-decoration: none;
-  color: inherit;
-}
+  .charity-hero a {
+    text-decoration: none;
+    color: inherit;
+  }
 
-.charity-hero .hero-bg {
-  position: absolute;
-  inset: 0;
-  z-index: -2;
-  overflow: hidden;
-}
+  .charity-hero .hero-bg {
+    position: absolute;
+    inset: 0;
+    z-index: -2;
+    overflow: hidden;
+  }
 
-.charity-hero .blob {
-  position: absolute;
-  border-radius: 999px;
-  filter: blur(3px);
-  opacity: .72;
-  animation: blobFloat 13s ease-in-out infinite alternate;
-}
+  .charity-hero .blob {
+    position: absolute;
+    border-radius: 999px;
+    filter: blur(3px);
+    opacity: 0.72;
+    animation: blobFloat 13s ease-in-out infinite alternate;
+  }
 
-.charity-hero .blob-1 {
-  width: 460px;
-  height: 460px;
-  background: rgba(255,207,221,.75);
-  left: -150px;
-  top: -170px;
-}
+  .charity-hero .blob-1 {
+    width: 460px;
+    height: 460px;
+    background: rgba(255, 207, 221, 0.75);
+    left: -150px;
+    top: -170px;
+  }
 
-.charity-hero .blob-2 {
-  width: 520px;
-  height: 520px;
-  background: rgba(255,236,241,.9);
-  right: -180px;
-  bottom: -220px;
-  animation-delay: -3s;
-}
+  .charity-hero .blob-2 {
+    width: 520px;
+    height: 520px;
+    background: rgba(255, 236, 241, 0.9);
+    right: -180px;
+    bottom: -220px;
+    animation-delay: -3s;
+  }
 
-.charity-hero .blob-3 {
-  width: 220px;
-  height: 220px;
-  background: rgba(215,25,63,.12);
-  left: 48%;
-  top: 48%;
-  animation-delay: -6s;
-}
+  .charity-hero .blob-3 {
+    width: 220px;
+    height: 220px;
+    background: rgba(215, 25, 63, 0.12);
+    left: 48%;
+    top: 48%;
+    animation-delay: -6s;
+  }
 
-.charity-hero .soft-grid {
-  position: absolute;
-  inset: 22px 150px;
-  border: 5px solid rgba(255,206,218,.68);
-  border-radius: 6px;
-  mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
-  -webkit-mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
-  opacity: .76;
-}
+  .charity-hero .soft-grid {
+    position: absolute;
+    inset: 22px 150px;
+    border: 5px solid rgba(255, 206, 218, 0.68);
+    border-radius: 6px;
+    mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
+    -webkit-mask: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
+    opacity: 0.76;
+  }
 
-.charity-hero .soft-grid:before, 
-.charity-hero .soft-grid:after {
-  content: "";
-  position: absolute;
-  background: var(--red);
-  border-radius: 50% 50% 48% 48%;
-  transform: rotate(45deg);
-  opacity: .9;
-}
+  .charity-hero .soft-grid:before,
+  .charity-hero .soft-grid:after {
+    content: '';
+    position: absolute;
+    background: var(--red);
+    border-radius: 50% 50% 48% 48%;
+    transform: rotate(45deg);
+    opacity: 0.9;
+  }
 
-.charity-hero .soft-grid:before {
-  width: 36px;
-  height: 36px;
-  left: 22px;
-  bottom: -13px;
-  box-shadow: 34px -1px 0 var(--red);
-}
+  .charity-hero .soft-grid:before {
+    width: 36px;
+    height: 36px;
+    left: 22px;
+    bottom: -13px;
+    box-shadow: 34px -1px 0 var(--red);
+  }
 
-.charity-hero .soft-grid:after {
-  width: 17px;
-  height: 17px;
-  right: 18px;
-  top: 285px;
-  opacity: .55;
-  box-shadow: 20px 19px 0 rgba(215,25,63,.9);
-}
+  .charity-hero .soft-grid:after {
+    width: 17px;
+    height: 17px;
+    right: 18px;
+    top: 285px;
+    opacity: 0.55;
+    box-shadow: 20px 19px 0 rgba(215, 25, 63, 0.9);
+  }
 
-.charity-hero .hero-shell {
-  width: min(1580px, calc(100% - 44px));
-  min-height: 546px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: minmax(640px, 1.1fr) minmax(470px, .9fr);
-  gap: 42px;
-  align-items: center;
-  padding: 36px 0;
-}
-
-.charity-hero .gallery-panel {
-  position: relative;
-  min-height: 500px;
-  padding: 18px 12px 0;
-  height: 100%;
-}
-
-.charity-hero .gallery-title {
-  position: absolute;
-  left: 22px;
-  top: 10px;
-  z-index: 22;
-  display: inline-flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 10px 16px;
-  border-radius: 18px;
-  background: rgba(255,255,255,.72);
-  box-shadow: 0 12px 30px rgba(70,40,50,.08);
-  backdrop-filter: blur(10px);
-  transform: translateY(-12px);
-  opacity: 0;
-  animation: fadeDown .7s ease forwards .25s;
-}
-
-.charity-hero .gallery-title .eyebrow {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  color: var(--red);
-  font-weight: 800;
-}
-
-.charity-hero .gallery-title strong {
-  font-size: 16px;
-  color: #313136;
-}
-
-.charity-hero .gallery-stage {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  perspective: 1200px;
-}
-
-.charity-hero .gallery-light {
-  position: absolute;
-  left: 34%;
-  top: 35%;
-  width: 310px;
-  height: 210px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 66%);
-  pointer-events: none;
-  opacity: .45;
-  mix-blend-mode: screen;
-  animation: lightPulse 4s ease-in-out infinite;
-}
-
-.charity-hero .focus-frame {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 402px;
-  height: 238px;
-  transform: translate(-50%,-50%) scale(.86);
-  border-radius: 22px;
-  border: 1px solid rgba(215,25,63,.25);
-  box-shadow: 0 0 0 10px rgba(255,255,255,.16), inset 0 0 42px rgba(215,25,63,.07);
-  opacity: 0;
-  transition: .7s ease;
-  pointer-events: none;
-  z-index: 4;
-}
-
-.charity-hero .gallery-stage.is-playing .focus-frame {
-  opacity: 1;
-  transform: translate(-50%,-50%) scale(1);
-}
-
-.charity-hero .photo-card {
-  position: absolute;
-  left: var(--x);
-  top: var(--y);
-  width: var(--w);
-  background: #fff;
-  border: 4px solid var(--red);
-  border-radius: 3px;
-  overflow: hidden;
-  box-shadow: 0 14px 36px rgba(61,26,34,.22);
-  transform: translate3d(0,0,0) rotate(var(--r)) scale(.92);
-  opacity: 0;
-  z-index: 5;
-  will-change: left, top, width, transform, opacity, filter;
-  animation: cardIntro .85s cubic-bezier(.2,.9,.25,1.12) forwards;
-  animation-delay: var(--delay);
-  transition:
-    opacity 2.5s ease-in-out,
-    filter 2.5s ease-in-out,
-    box-shadow 1.5s cubic-bezier(.2,.8,.2,1),
-    border-color 1.5s cubic-bezier(.2,.8,.2,1),
-    left 1.5s cubic-bezier(.2,.8,.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 {
-  display: block;
-  width: 100%;
-  height: auto;
-  transform: scale(1.035);
-  transition: transform 1s cubic-bezier(.18,.82,.18,1), filter .8s ease;
-}
-
-.charity-hero .photo-card:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 45%, transparent 70%);
-  transform: translateX(-130%);
-  z-index: 2;
-  pointer-events: none;
-}
-
-.charity-hero .photo-card.is-active:before {
-  animation: shine 1.3s ease .25s;
-}
-
-.charity-hero .photo-card.is-active {
-  left: 50%;
-  top: 50%;
-  width: min(480px, 58vw);
-  transform: translate(-50%,-50%) rotate(0deg) scale(1.06) !important;
-  opacity: 1;
-  z-index: 30;
-  border-color: #fff;
-  border-width: 8px;
-  border-radius: 18px;
-  box-shadow: var(--shadow-strong);
-  filter: saturate(1.08) contrast(1.03);
-}
-
-.charity-hero .photo-card.is-active img {
-  transform: scale(1.08);
-}
-
-.charity-hero .photo-card.is-dim {
-  opacity: .28;
-  filter: grayscale(.08) saturate(.8) blur(.2px);
-  transform: translate3d(0,0,0) rotate(var(--r)) scale(.82);
-  z-index: 2;
-}
-
-.charity-hero .photo-card.is-next {
-  opacity: .74;
-  box-shadow: 0 17px 45px rgba(92,24,42,.18);
-}
-
-.charity-hero .photo-card.is-exit {
-  opacity: 0;
-  transform: translateY(28px) scale(.74) rotate(var(--r));
-}
-
-
-
-.charity-hero .gallery-controls {
-  position: absolute;
-  left: 50%;
-  bottom: 2px;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  z-index: 40;
-}
-
-.charity-hero .dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: rgba(215,25,63,.22);
-  transition: .35s ease;
-  cursor: pointer;
-}
-
-.charity-hero .dot.is-active {
-  width: 28px;
-  background: var(--red);
-  box-shadow: 0 0 0 6px rgba(215,25,63,.09);
-}
-
-.charity-hero .content-panel {
-  position: relative;
-  min-height: 430px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 26px 24px 26px 8px;
-}
-
-.charity-hero .content-panel:before {
-  content: "";
-  position: absolute;
-  inset: 28px 0 18px 0;
-  border-radius: 34px;
-  background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.08));
-  border: 1px solid rgba(255,255,255,.55);
-  box-shadow: 0 20px 70px rgba(62,45,54,.06);
-  z-index: -1;
-}
-
-.charity-hero .brand-row {
-  display: grid;
-  grid-template-columns: 1fr 170px;
-  gap: 24px;
-  align-items: start;
-  margin-bottom: 54px;
-}
-
-.charity-hero .logo-mark {
-  width: 165px;
-  justify-self: end;
-  filter: drop-shadow(0 10px 16px rgba(215,25,63,.15));
-  animation: logoBreath 3.6s ease-in-out infinite;
-}
-
-.charity-hero .brand-text {
-  text-align: center;
-  align-self: center;
-}
-
-.charity-hero .brand-text h1 {
-  margin: 0 0 8px;
-  text-transform: uppercase;
-  line-height: 1.18;
-  font-size: clamp(20px,1.72vw,30px);
-  letter-spacing: -.3px;
-  color: var(--red);
-  font-weight: 900;
-}
-
-.charity-hero .brand-text p {
-  margin: 0;
-  color: #67676c;
-  text-transform: uppercase;
-  font-size: clamp(16px,1.2vw,22px);
-  font-weight: 800;
-  letter-spacing: .3px;
-}
-
-.charity-hero .slogan-card {
-  width: min(560px,100%);
-  margin: 0 auto;
-  position: relative;
-  text-align: center;
-  padding: 20px 18px 28px;
-}
-
-.charity-hero .slogan-card:before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 86%;
-  height: 86%;
-  transform: translate(-50%,-50%);
-  border-radius: 38px;
-  background: linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,237,243,.72),rgba(255,255,255,.12));
-  filter: blur(.2px);
-  z-index: -1;
-  opacity: .8;
-}
-
-.charity-hero .quote-mark {
-  position: absolute;
-  left: 12px;
-  top: -16px;
-  font-size: 74px;
-  line-height: 1;
-  color: rgba(215,25,63,.18);
-  font-family: Georgia,serif;
-}
-
-.charity-hero .slogan-card h2 {
-  margin: 0;
-  color: #e13b5e;
-  font-size: clamp(29px,2.2vw,42px);
-  line-height: 1.42;
-  font-family: "Segoe Script","Brush Script MT",cursive;
-  font-weight: 600;
-  text-shadow: 0 8px 20px rgba(215,25,63,.12);
-}
-
-.charity-hero .slogan-card h2 em {
-  font-style: normal;
-  font-size: .86em;
-  color: #d9284c;
-}
-
-.charity-hero .heart-line {
-  display: block;
-  width: 160px;
-  height: 22px;
-  margin: 12px auto 0;
-  position: relative;
-}
-
-.charity-hero .heart-line:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 34px;
-  top: 11px;
-  height: 2px;
-  background: linear-gradient(90deg,transparent,var(--red));
-  border-radius: 999px;
-}
-
-.charity-hero .heart-line:after {
-  content: "♡";
-  position: absolute;
-  right: 6px;
-  top: -8px;
-  color: var(--red);
-  font-size: 32px;
-  transform: rotate(18deg);
-  animation: heartBeat 1.7s ease-in-out infinite;
-}
-
-.charity-hero .action-row {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  margin-top: 26px;
-  flex-wrap: wrap;
-}
-
-.charity-hero .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 44px;
-  padding: 0 20px;
-  border-radius: 999px;
-  font-weight: 800;
-  font-size: 14px;
-  letter-spacing: .2px;
-  transition: .3s ease;
-  box-shadow: 0 12px 30px rgba(115,21,43,.12);
-}
-
-.charity-hero .btn.primary {
-  background: linear-gradient(135deg,var(--red),#ef4769);
-  color: white;
-}
-
-.charity-hero .btn.secondary {
-  background: rgba(255,255,255,.74);
-  color: var(--red);
-  border: 1px solid rgba(215,25,63,.18);
-}
-
-.charity-hero .reveal-up {
-  opacity: 0;
-  transform: translateY(24px);
-  animation: revealUp .8s ease forwards;
-}
-
-.charity-hero .brand-text.reveal-up {
-  animation-delay: .2s;
-}
-
-.charity-hero .logo-mark.reveal-up {
-  animation-delay: .38s;
-}
-
-.charity-hero .slogan-card.reveal-up {
-  animation-delay: .62s;
-}
-
-.charity-hero .action-row.reveal-up {
-  animation-delay: .86s;
-}
-
-@keyframes cardIntro {
-  from { opacity: 0; transform: translate3d(-28px,22px,0) rotate(calc(var(--r) - 7deg)) scale(.78); }
-  to { opacity: 1; transform: translate3d(0,0,0) rotate(var(--r)) scale(.92); }
-}
-/* Removed microFloat because animating margin-top constantly recalculates layout causing major stutter */
-@keyframes shine {
-  to { transform: translateX(130%); }
-}
-@keyframes revealUp {
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes fadeDown {
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes logoBreath {
-  0%,100% { transform: translateY(0) scale(1); }
-  50% { transform: translateY(-6px) scale(1.025); }
-}
-@keyframes heartBeat {
-  0%,100% { transform: rotate(18deg) scale(1); }
-  20% { transform: rotate(18deg) scale(1.18); }
-  38% { transform: rotate(18deg) scale(1); }
-}
-@keyframes blobFloat {
-  to { transform: translate(26px,20px) scale(1.05); }
-}
-@keyframes lightPulse {
-  0%,100% { opacity: .25; transform: scale(.96); }
-  50% { opacity: .58; transform: scale(1.08); }
-}
-
-@media (max-width:1200px) {
   .charity-hero .hero-shell {
-    grid-template-columns: 1fr;
-    gap: 10px;
-    padding: 18px 0 34px;
+    width: min(1580px, calc(100% - 44px));
+    min-height: 546px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: minmax(640px, 1.1fr) minmax(470px, 0.9fr);
+    gap: 42px;
+    align-items: center;
+    padding: 36px 0;
   }
-  .charity-hero { min-height: auto; }
-  .charity-hero .content-panel { min-height: auto; }
-  .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) {
-  .charity-hero .hero-shell { width: calc(100% - 24px); }
-  .charity-hero .soft-grid { inset: 12px; border-width: 3px; }
-  .charity-hero .gallery-panel { padding: 12px 0; min-height: 390px; }
-  .charity-hero .gallery-title { display: none; }
-  .charity-hero .gallery-stage { height: 370px; overflow: hidden; }
-  .charity-hero .photo-card { width: calc(var(--w) * .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) {
-  .charity-hero *, 
-  .charity-hero *::before, 
-  .charity-hero *::after {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: .01ms !important;
+  .charity-hero .gallery-panel {
+    position: relative;
+    min-height: 500px;
+    padding: 18px 12px 0;
+    height: 100%;
+  }
+
+  .charity-hero .gallery-title {
+    position: absolute;
+    left: 22px;
+    top: 10px;
+    z-index: 22;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 10px 16px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow: 0 12px 30px rgba(70, 40, 50, 0.08);
+    backdrop-filter: blur(10px);
+    transform: translateY(-12px);
+    opacity: 0;
+    animation: fadeDown 0.7s ease forwards 0.25s;
+  }
+
+  .charity-hero .gallery-title .eyebrow {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--red);
+    font-weight: 800;
+  }
+
+  .charity-hero .gallery-title strong {
+    font-size: 16px;
+    color: #313136;
+  }
+
+  .charity-hero .gallery-stage {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    perspective: 1200px;
+  }
+
+  .charity-hero .gallery-light {
+    position: absolute;
+    left: 34%;
+    top: 35%;
+    width: 310px;
+    height: 210px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 66%);
+    pointer-events: none;
+    opacity: 0.45;
+    mix-blend-mode: screen;
+    animation: lightPulse 4s ease-in-out infinite;
+  }
+
+  .charity-hero .focus-frame {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 402px;
+    height: 238px;
+    transform: translate(-50%, -50%) scale(0.86);
+    border-radius: 22px;
+    border: 1px solid rgba(215, 25, 63, 0.25);
+    box-shadow:
+      0 0 0 10px rgba(255, 255, 255, 0.16),
+      inset 0 0 42px rgba(215, 25, 63, 0.07);
+    opacity: 0;
+    transition: 0.7s ease;
+    pointer-events: none;
+    z-index: 4;
+  }
+
+  .charity-hero .gallery-stage.is-playing .focus-frame {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  .charity-hero .photo-card {
+    position: absolute;
+    left: var(--x);
+    top: var(--y);
+    width: var(--w);
+    background: #fff;
+    border: 4px solid var(--red);
+    border-radius: 3px;
+    overflow: hidden;
+    box-shadow: 0 14px 36px rgba(61, 26, 34, 0.22);
+    transform: translate3d(0, 0, 0) rotate(var(--r)) scale(0.92);
+    opacity: 0;
+    z-index: 5;
+    will-change: transform, opacity;
+    animation: cardIntro 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.12) forwards;
+    animation-delay: var(--delay);
+    aspect-ratio: 4/3;
+    transition:
+      opacity 3s ease-in-out,
+      filter 3s ease-in-out,
+      box-shadow 3s cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-color 3s cubic-bezier(0.2, 0.8, 0.2, 1),
+      transform 3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .charity-hero .photo-card img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1.035);
+    transition:
+      transform 1s cubic-bezier(0.18, 0.82, 0.18, 1),
+      filter 0.8s ease;
+  }
+
+  .charity-hero .photo-card:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.34) 45%, transparent 70%);
+    transform: translateX(-130%);
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .charity-hero .photo-card.is-active:before {
+    animation: shine 1.3s ease 0.25s;
+  }
+
+  .charity-hero .photo-card.is-active {
+    left: 50%;
+    top: 50%;
+    width: min(480px, 58vw);
+    transform: translate(-50%, -50%) rotate(0deg) scale(1.06) !important;
+    opacity: 1;
+    z-index: 30;
+    border-color: #fff;
+    border-width: 8px;
+    border-radius: 18px;
+    box-shadow: var(--shadow-strong);
+    filter: saturate(1.08) contrast(1.03);
+  }
+
+  .charity-hero .photo-card.is-active img {
+    transform: scale(1.08);
+  }
+
+  .charity-hero .photo-card.is-dim {
+    opacity: 0.28;
+    filter: grayscale(0.08) saturate(0.8) blur(0.2px);
+    transform: translate3d(0, 0, 0) rotate(var(--r)) scale(0.82);
+    z-index: 2;
+  }
+
+  .charity-hero .photo-card.is-next {
+    opacity: 0.74;
+    box-shadow: 0 17px 45px rgba(92, 24, 42, 0.18);
+  }
+
+  .charity-hero .photo-card.is-exit {
+    opacity: 0;
+    transform: translateY(28px) scale(0.74) rotate(var(--r));
+  }
+
+  .charity-hero .gallery-controls {
+    position: absolute;
+    left: 50%;
+    bottom: 2px;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 40;
+  }
+
+  .charity-hero .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: rgba(215, 25, 63, 0.22);
+    transition: 0.35s ease;
+    cursor: pointer;
+  }
+
+  .charity-hero .dot.is-active {
+    width: 28px;
+    background: var(--red);
+    box-shadow: 0 0 0 6px rgba(215, 25, 63, 0.09);
+  }
+
+  .charity-hero .content-panel {
+    position: relative;
+    min-height: 430px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 26px 24px 26px 8px;
+  }
+
+  .charity-hero .content-panel:before {
+    content: '';
+    position: absolute;
+    inset: 28px 0 18px 0;
+    border-radius: 34px;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.08));
+    border: 1px solid rgba(255, 255, 255, 0.55);
+    box-shadow: 0 20px 70px rgba(62, 45, 54, 0.06);
+    z-index: -1;
+  }
+
+  .charity-hero .brand-row {
+    display: grid;
+    grid-template-columns: 1fr 170px;
+    gap: 24px;
+    align-items: start;
+    margin-bottom: 54px;
+  }
+
+  .charity-hero .logo-mark {
+    width: 165px;
+    justify-self: end;
+    filter: drop-shadow(0 10px 16px rgba(215, 25, 63, 0.15));
+    animation: logoBreath 3.6s ease-in-out infinite;
+  }
+
+  .charity-hero .brand-text {
+    text-align: center;
+    align-self: center;
+  }
+
+  .charity-hero .brand-text h1 {
+    margin: 0 0 8px;
+    text-transform: uppercase;
+    line-height: 1.18;
+    font-size: clamp(20px, 1.72vw, 30px);
+    letter-spacing: -0.3px;
+    color: var(--red);
+    font-weight: 900;
+  }
+
+  .charity-hero .brand-text p {
+    margin: 0;
+    color: #67676c;
+    text-transform: uppercase;
+    font-size: clamp(16px, 1.2vw, 22px);
+    font-weight: 800;
+    letter-spacing: 0.3px;
+  }
+
+  .charity-hero .slogan-card {
+    width: min(560px, 100%);
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+    padding: 20px 18px 28px;
+  }
+
+  .charity-hero .slogan-card:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 86%;
+    height: 86%;
+    transform: translate(-50%, -50%);
+    border-radius: 38px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 237, 243, 0.72), rgba(255, 255, 255, 0.12));
+    filter: blur(0.2px);
+    z-index: -1;
+    opacity: 0.8;
+  }
+
+  .charity-hero .quote-mark {
+    position: absolute;
+    left: 12px;
+    top: -16px;
+    font-size: 74px;
+    line-height: 1;
+    color: rgba(215, 25, 63, 0.18);
+    font-family: Georgia, serif;
+  }
+
+  .charity-hero .slogan-card h2 {
+    margin: 0;
+    color: #e13b5e;
+    font-size: clamp(29px, 2.2vw, 42px);
+    line-height: 1.42;
+    font-family: 'Segoe Script', 'Brush Script MT', cursive;
+    font-weight: 600;
+    text-shadow: 0 8px 20px rgba(215, 25, 63, 0.12);
+  }
+
+  .charity-hero .slogan-card h2 em {
+    font-style: normal;
+    font-size: 0.86em;
+    color: #d9284c;
+  }
+
+  .charity-hero .heart-line {
+    display: block;
+    width: 160px;
+    height: 22px;
+    margin: 12px auto 0;
+    position: relative;
+  }
+
+  .charity-hero .heart-line:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 34px;
+    top: 11px;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--red));
+    border-radius: 999px;
+  }
+
+  .charity-hero .heart-line:after {
+    content: '♡';
+    position: absolute;
+    right: 6px;
+    top: -8px;
+    color: var(--red);
+    font-size: 32px;
+    transform: rotate(18deg);
+    animation: heartBeat 1.7s ease-in-out infinite;
+  }
+
+  .charity-hero .action-row {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 26px;
+    flex-wrap: wrap;
+  }
+
+  .charity-hero .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding: 0 20px;
+    border-radius: 999px;
+    font-weight: 800;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    transition: 0.3s ease;
+    box-shadow: 0 12px 30px rgba(115, 21, 43, 0.12);
+  }
+
+  .charity-hero .btn.primary {
+    background: linear-gradient(135deg, var(--red), #ef4769);
+    color: white;
+  }
+
+  .charity-hero .btn.secondary {
+    background: rgba(255, 255, 255, 0.74);
+    color: var(--red);
+    border: 1px solid rgba(215, 25, 63, 0.18);
+  }
+
+  .charity-hero .reveal-up {
+    opacity: 0;
+    transform: translateY(24px);
+    animation: revealUp 0.8s ease forwards;
+  }
+
+  .charity-hero .brand-text.reveal-up {
+    animation-delay: 0.2s;
+  }
+
+  .charity-hero .logo-mark.reveal-up {
+    animation-delay: 0.38s;
+  }
+
+  .charity-hero .slogan-card.reveal-up {
+    animation-delay: 0.62s;
+  }
+
+  .charity-hero .action-row.reveal-up {
+    animation-delay: 0.86s;
+  }
+
+  @keyframes cardIntro {
+    from {
+      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 */
+  @keyframes shine {
+    to {
+      transform: translateX(130%);
+    }
+  }
+  @keyframes revealUp {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes fadeDown {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes logoBreath {
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(-6px) scale(1.025);
+    }
+  }
+  @keyframes heartBeat {
+    0%,
+    100% {
+      transform: rotate(18deg) scale(1);
+    }
+    20% {
+      transform: rotate(18deg) scale(1.18);
+    }
+    38% {
+      transform: rotate(18deg) scale(1);
+    }
+  }
+  @keyframes blobFloat {
+    to {
+      transform: translate(26px, 20px) scale(1.05);
+    }
+  }
+  @keyframes lightPulse {
+    0%,
+    100% {
+      opacity: 0.25;
+      transform: scale(0.96);
+    }
+    50% {
+      opacity: 0.58;
+      transform: scale(1.08);
+    }
+  }
+
+  @media (max-width: 1200px) {
+    .charity-hero .hero-shell {
+      grid-template-columns: 1fr;
+      gap: 10px;
+      padding: 18px 0 34px;
+    }
+    .charity-hero {
+      min-height: auto;
+    }
+    .charity-hero .content-panel {
+      min-height: auto;
+    }
+    .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) {
+    .charity-hero .hero-shell {
+      width: calc(100% - 24px);
+    }
+    .charity-hero .soft-grid {
+      inset: 12px;
+      border-width: 3px;
+    }
+    .charity-hero .gallery-panel {
+      padding: 12px 0;
+      min-height: 390px;
+    }
+    .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) {
+    .charity-hero *,
+    .charity-hero *::before,
+    .charity-hero *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
   }
-}
 </style>
 
 <div class="charity-hero" aria-label="Quỹ từ thiện bệnh nhân nghèo bị đột quỵ">
@@ -596,28 +676,28 @@
       </div>
 
       <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" />
         </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" />
         </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" />
         </article>
         <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" />
         </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" />
         </article>
         <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" />
         </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" />
         </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" />
         </article>
         <article class="photo-card p9" data-index="8" style="--x: 77%; --y: 66%; --r: -1deg; --w: 338px; --delay: 0.93s">
@@ -663,65 +743,65 @@
 </div>
 
 <script>
-(function(){
-  const container = document.querySelector('.charity-hero');
-  if(!container) return;
-  const stage = container.querySelector('.gallery-stage');
-  const cards = Array.from(container.querySelectorAll('.photo-card'));
-  const dots = Array.from(container.querySelectorAll('.dot'));
-  if(!stage || cards.length === 0) return;
-  
-  let active = 0;
-  let timer = null;
-  const duration = 4500; /* Tăng thời gian chờ (autoplay) từ 2.8 giây lên 4.5 giây để nhìn rõ ảnh hơn */
+  (function () {
+    const container = document.querySelector('.charity-hero');
+    if (!container) return;
+    const stage = container.querySelector('.gallery-stage');
+    const cards = Array.from(container.querySelectorAll('.photo-card'));
+    const dots = Array.from(container.querySelectorAll('.dot'));
+    if (!stage || cards.length === 0) return;
 
-  function setActive(index){
-    active = index % cards.length;
-    stage.classList.add('is-playing');
+    let active = 0;
+    let timer = null;
+    const duration = 4500; /* Tăng thời gian chờ (autoplay) từ 2.8 giây lên 4.5 giây để nhìn rõ ảnh hơn */
 
-    cards.forEach((card, i) => {
-      card.classList.remove('is-active','is-dim','is-next','is-exit');
-      const diff = (i - active + cards.length) % cards.length;
-      if(i === active){
-        card.classList.add('is-active');
-      }else if(diff === 1 || diff === 2){
-        card.classList.add('is-next');
-      }else if(diff === cards.length - 1){
-        card.classList.add('is-exit');
-      }else{
-        card.classList.add('is-dim');
-      }
+    function setActive(index) {
+      active = index % cards.length;
+      stage.classList.add('is-playing');
+
+      cards.forEach((card, i) => {
+        card.classList.remove('is-active', 'is-dim', 'is-next', 'is-exit');
+        const diff = (i - active + cards.length) % cards.length;
+        if (i === active) {
+          card.classList.add('is-active');
+        } else if (diff === 1 || diff === 2) {
+          card.classList.add('is-next');
+        } else if (diff === cards.length - 1) {
+          card.classList.add('is-exit');
+        } else {
+          card.classList.add('is-dim');
+        }
+      });
+
+      dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
+    }
+
+    function next() {
+      setActive(active + 1);
+    }
+
+    function start() {
+      stop();
+      timer = setInterval(next, duration);
+    }
+
+    function stop() {
+      if (timer) clearInterval(timer);
+    }
+
+    // Hệ thống sẽ chạy tự động 100%
+
+    dots.forEach((dot, i) => {
+      dot.addEventListener('click', () => {
+        setActive(i);
+        start();
+      });
     });
 
-    dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
-  }
-
-  function next(){
-    setActive(active + 1);
-  }
-
-  function start(){
-    stop();
-    timer = setInterval(next, duration);
-  }
-
-  function stop(){
-    if(timer) clearInterval(timer);
-  }
-
-  // Hệ thống sẽ chạy tự động 100%
-
-  dots.forEach((dot, i) => {
-    dot.addEventListener('click', () => {
-      setActive(i);
+    // Start immediately or on load if part of a bigger page
+    setTimeout(() => {
+      setActive(0);
       start();
-    });
-  });
-
-  // Start immediately or on load if part of a bigger page
-  setTimeout(() => {
-    setActive(0);
-    start();
-  }, 900);
-})();
-</script>
\ No newline at end of file
+    }, 900);
+  })();
+</script>