@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --pink:#eda0a4;
  --pink-light:#f9dfe0;
  --pink-pale:#fff6f5;
  --rose:#b84c69;
  --dark:#321b20;
  --cream:#fffaf7;
  --line:rgba(50,27,32,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,Arial,sans-serif;color:var(--dark);background:var(--cream);line-height:1.7}
a{text-decoration:none;color:inherit}
button{font:inherit}

.site-header{
  height:92px;background:#eda0a4;display:flex;align-items:center;
  justify-content:center;gap:70px;padding:0 5%;position:sticky;top:0;z-index:20;
  border-bottom:1px solid rgba(50,27,32,.18)
}
.brand{position:absolute;left:5%;display:flex;align-items:center;justify-content:center;width:150px;height:78px}
.brand img{display:block;width:138px;height:auto;max-height:78px;object-fit:contain}
.brand-mark{font-size:28px}
.nav{display:flex;gap:40px;align-items:center}
.nav a{font:700 14px "Cormorant Garamond",serif;transition:.25s}
.nav a:hover{color:white}
.menu-toggle{display:none;background:none;border:0;font-size:25px}

.hero{
  min-height:735px;position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.65), transparent 22%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 25%),
    linear-gradient(135deg,#f9d6d8,#f5b9be 48%,#ef9fa8);
}
.hero:before{
  content:"";position:absolute;width:420px;height:650px;border:34px solid rgba(184,76,105,.35);
  border-radius:50%;transform:rotate(38deg);right:4%;top:7%;filter:blur(.2px)
}
.hero:after{
  content:"";position:absolute;width:270px;height:270px;border-radius:50%;
  background:rgba(255,255,255,.22);left:-70px;top:90px
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.hero-content{position:relative;z-index:2;max-width:900px;padding:90px 20px 70px}
.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;margin-bottom:14px}
.hero h1{font:700 clamp(55px,8vw,112px)/.9 "Cormorant Garamond",serif;letter-spacing:2px;text-shadow:3px 4px 0 #ef7793;margin:25px 0}
.hero-text{font-size:15px;margin:0 auto 30px;max-width:650px}
.hero-buttons,.contact-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:1px;transition:.25s}
.btn-primary{background:#ed7893;box-shadow:4px 4px 0 var(--dark)}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark)}
.btn-outline{border:1px solid var(--dark);background:rgba(255,255,255,.2)}
.btn-outline:hover{background:var(--dark);color:white}

.checker{height:42px;background-size:32px 32px;background-image:linear-gradient(45deg,#ee8588 25%,transparent 25%,transparent 75%,#ee8588 75%),linear-gradient(45deg,#ee8588 25%,transparent 25%,transparent 75%,#ee8588 75%);background-position:0 0,16px 16px;background-color:#fff8ed}

.section{padding:105px 8%;position:relative}
.section-label{font-size:10px;letter-spacing:2px;font-weight:700;margin-bottom:60px;color:var(--rose)}
.two-column,.about-box{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
h2{font:600 clamp(45px,6vw,82px)/.95 "Cormorant Garamond",serif;letter-spacing:-1px}
h2 em{font-style:italic;color:var(--rose)}
.copy{font-size:15px;max-width:580px}
.copy p+p{margin-top:20px}
.text-link{display:inline-block;margin-top:28px;font-size:11px;font-weight:700;letter-spacing:1px;border-bottom:1px solid var(--dark);padding-bottom:5px}
.text-link span{margin-left:12px}
.awareness{background:#f8dfe0}
.section-heading{max-width:750px;margin-bottom:55px}
.section-heading>p:last-child{margin-top:20px;max-width:650px}
.centered{text-align:center;margin-left:auto;margin-right:auto}
.centered>p:last-child{margin-left:auto;margin-right:auto}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:var(--cream);padding:35px;min-height:300px;border-top:3px solid var(--rose);transition:.3s}
.info-card:hover{transform:translateY(-6px)}
.info-card span,.story-body span,.action-card span{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--rose)}
.info-card h3{font:700 30px "Cormorant Garamond",serif;margin:45px 0 12px}
.info-card p{font-size:13px}
.learn-more{border:0;background:none;border-bottom:1px solid var(--dark);font-size:10px;font-weight:700;margin-top:25px;padding-bottom:4px;cursor:pointer}
.stories{background:var(--cream)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.story-card{background:white}
.story-image{height:270px;display:flex;align-items:flex-end;padding:20px;font:700 70px "Cormorant Garamond",serif;color:rgba(255,255,255,.8)}
.story-one{background:linear-gradient(135deg,#efb1b4,#b84c69)}
.story-two{background:linear-gradient(135deg,#f8dfe0,#df7f9b)}
.story-three{background:linear-gradient(135deg,#d98a9d,#704050)}
.story-body{padding:25px}
.story-body h3{font:600 30px/1 "Cormorant Garamond",serif;margin:12px 0}
.story-body p{font-size:13px}
.support{background:#f2b0b3}
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.action-card{min-height:190px;background:var(--cream);padding:25px;display:flex;flex-direction:column;position:relative;transition:.25s}
.action-card:hover{background:var(--dark);color:white;transform:translateY(-5px)}
.action-card strong{font:700 36px "Cormorant Garamond",serif;margin-top:auto}
.action-card small{font-size:11px}
.action-card b{position:absolute;right:22px;bottom:22px}
.about{background:#fff8f3}
.about-box{background:#f7d7d6;padding:70px}
.contact{background:var(--dark);color:white;text-align:center;padding:120px 8%}
.contact h2 em{color:#f49aaa}
.contact p:not(.eyebrow){margin:25px auto;max-width:600px}
.btn-dark{background:#ed7893;color:var(--dark)}
.btn-light{border:1px solid rgba(255,255,255,.6)}
footer{background:#241419;color:#eac7ca;padding:22px 8%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}

.modal{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:25px}
.modal.active{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(35,16,22,.7)}
.modal-box{position:relative;background:var(--cream);max-width:560px;padding:55px;z-index:1}
.modal-box h2{font-size:55px;margin-bottom:20px}
.modal-close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:30px;cursor:pointer}

@media(max-width:900px){
  .site-header{height:75px;justify-content:flex-end;padding-right:25px}
  .brand{left:25px}
  .nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--pink);padding:20px;flex-direction:column;gap:18px}
  .nav.open{display:flex}
  .brand{left:18px;width:105px;height:62px}.brand img{width:100px;max-height:60px}.menu-toggle{display:block}
  .info-grid,.story-grid{grid-template-columns:1fr}
  .action-grid{grid-template-columns:1fr 1fr}
  .two-column,.about-box{grid-template-columns:1fr;gap:45px}
  .hero{min-height:680px}
}
@media(max-width:600px){
  .section{padding:75px 6%}
  .hero h1{font-size:58px}
  .hero-text{font-size:13px}
  .action-grid{grid-template-columns:1fr}
  .about-box{padding:35px 25px}
  footer{flex-direction:column;gap:8px}
}

/* Version 2: use the group's supplied hero artwork */
.hero-design{
  min-height:0;
  height:min(72vw, 733px);
  padding:0;
  background:#f5b7bd;
  position:relative;
  overflow:hidden;
}
.hero-design-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero-donate-hotspot{
  position:absolute;
  left:50%;
  top:86%;
  transform:translate(-50%,-50%);
  width:105px;
  height:48px;
  border-radius:12px;
  z-index:5;
  cursor:pointer;
  background:transparent;
}
.hero-donate-hotspot:focus-visible{
  outline:3px solid #321b20;
  outline-offset:4px;
}
@media(max-width:900px){
  .hero-design{height:68vw;min-height:420px}
  .hero-donate-hotspot{top:86%;width:100px;height:44px}
}
@media(max-width:600px){
  .hero-design{height:72vw;min-height:300px}
}

/* ---------- V3 polish: logo + navigation + editorial campaign ---------- */
.site-header{
  height:92px;
  background:rgba(255,247,245,.97);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,76,105,.16);
  justify-content:center;
  gap:58px;
}
.brand{
  position:absolute;
  left:7%;
  width:132px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.brand img{
  width:128px;
  height:78px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 5px 8px rgba(184,76,105,.10));
}
.nav{gap:38px}
.nav a{
  position:relative;
  font-size:13px;
  letter-spacing:.2px;
  padding:34px 0 29px;
}
.nav a:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:20px;
  height:1.5px;
  background:#e86f8d;
  transform:scaleX(0);
  transition:transform .25s ease;
}
.nav a:hover:after,.nav a.active:after{transform:scaleX(1)}
.socials{
  position:absolute;
  right:7%;
  display:flex;
  align-items:center;
  gap:19px;
}
.socials a{
  width:20px;height:20px;
  display:grid;place-items:center;
  color:#a53d5c;
  font-weight:700;
  font-family:Arial,sans-serif;
  font-size:15px;
}
.hero-design{
  height:min(71vw,733px);
  min-height:560px;
}
.hero-design-image{
  object-fit:cover;
  object-position:center center;
}
.hero-donate-hotspot{
  /* The original artwork's DONATE button is near the lower center. */
  left:50%;
  top:91%;
  width:110px;
  height:52px;
  border-radius:12px;
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#a83f5d;
  z-index:6;
  opacity:.85;
}
.scroll-cue span{
  width:16px;height:27px;
  border:1.5px solid #a83f5d;
  border-radius:10px;
  position:relative;
}
.scroll-cue span:before{
  content:"";
  position:absolute;
  width:3px;height:6px;
  border-radius:3px;
  background:#a83f5d;
  left:50%;top:5px;
  transform:translateX(-50%);
}
.scroll-cue b{font-size:17px;line-height:1}
.checker{height:0;overflow:hidden}
.campaign{
  background:#fffaf7;
  padding-bottom:90px;
}
.campaign-intro{position:relative;z-index:2}
.campaign .section-label{margin-bottom:55px}
.campaign .copy{padding-top:9px}
.campaign-visual{
  min-height:270px;
  margin-top:65px;
  border-radius:0 0 4px 4px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), transparent 27%),
    linear-gradient(110deg,#fff8f5,#f7dfe0 55%,#f2c0c5);
  position:relative;
  overflow:hidden;
}
.campaign-visual:before{
  content:"";
  position:absolute;
  width:390px;height:390px;
  border:20px solid rgba(232,111,141,.18);
  border-radius:50%;
  right:11%;top:-180px;
}
.campaign-visual:after{
  content:"";
  position:absolute;
  width:560px;height:140px;
  left:-70px;bottom:-75px;
  background:rgba(232,111,141,.13);
  border-radius:50%;
  transform:rotate(-7deg);
}
.visual-ribbon{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:90px;
  filter:drop-shadow(0 10px 16px rgba(184,76,105,.14));
}
.visual-note{
  position:absolute;
  right:13%;top:50%;
  transform:translateY(-50%) rotate(-3deg);
  font:500 25px/1.05 "Cormorant Garamond",serif;
  color:#c45470;
  text-align:center;
}
.visual-note em{font-style:italic}
@media(max-width:1100px){
  .brand{left:4%}.socials{right:4%}.nav{gap:22px}
}
@media(max-width:900px){
  .site-header{height:75px;justify-content:flex-end}
  .brand{left:20px;width:110px;height:62px}
  .brand img{width:108px;height:60px}
  .socials{display:none}
  .nav{top:75px;background:rgba(255,247,245,.98);padding:20px}
  .nav a{padding:10px 0}
  .nav a:after{bottom:4px}
  .hero-design{height:68vw;min-height:430px}
  .scroll-cue{display:none}
  .campaign-visual{min-height:230px}
}
@media(max-width:600px){
  .hero-design{height:72vw;min-height:330px}
  .campaign-visual{min-height:190px}
  .visual-ribbon{font-size:62px}
  .visual-note{font-size:18px;right:7%}
}

/* V4 additions — original V3 visual retained; contact/social functionality only */
.brand-fallback{font-family:"Cormorant Garamond",serif;text-decoration:none;color:#3b2227;line-height:.82;font-size:14px;letter-spacing:1.2px;text-align:center}
.brand-fallback span{display:block}
.contact-note{margin-top:18px;font-size:11px;letter-spacing:1.2px;opacity:.72}
@media (max-width: 900px){.brand-fallback{font-size:12px}.contact-note{font-size:10px}}
/* Center the single story card */
#stories .story-grid {
grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

#stories .story-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

#stories .story-card-link:hover .story-image {
  transform: scale(1.01);
  transition: transform 0.25s ease;
}
```css

```css
/* ARTICLE IMAGES: consistent size and no overflow */
.info-card,
.story-card {
  min-width: 0;
}

.info-card .card-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  margin: 0 0 18px;
  box-sizing: border-box;
}

.story-card .card-image,
.story-card img.story-card-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  margin: 0 0 18px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .info-card .card-image {
    height: 130px;
  }

  .story-card .card-image,
  .story-card img.story-card-image {
    height: 190px;
  }
}

/* =========================================
   THÁNG NƠ HỒNG - FOOTER
   ========================================= */

footer.tnh-footer {
  --footer-bg: #260f15;
  --footer-text: #f9e5e8;
  --footer-pink: #ee86a1;

  display: block;
  width: 100%;
  margin: 0;
  padding: 48px 5% 22px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: normal;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

footer.tnh-footer *,
footer.tnh-footer *::before,
footer.tnh-footer *::after {
  box-sizing: border-box;
}

footer.tnh-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer.tnh-footer a:hover {
  color: var(--footer-pink);
}

/* Four main columns */
footer.tnh-footer .tnh-footer-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.9fr)
    minmax(0, 1.05fr)
    minmax(0, 1.25fr);
  gap: 30px;
  align-items: start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(249, 229, 232, 0.25);
}

footer.tnh-footer .tnh-footer-brand,
footer.tnh-footer .tnh-footer-nav,
footer.tnh-footer .tnh-footer-social,
footer.tnh-footer .tnh-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Logo: controlled size, no excessive height */
footer.tnh-footer .tnh-footer-brand > a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 14px;
}

footer.tnh-footer .tnh-footer-brand img {
  display: block;
  width: 115px;
  max-width: 100%;
  height: auto;
  max-height: 75px;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}

footer.tnh-footer .tnh-footer-brand p {
  max-width: 280px;
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
}

/* Column headings */
footer.tnh-footer h3 {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

footer.tnh-footer .tnh-footer-underline {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 2px;
  margin: 0 0 16px;
  background: var(--footer-pink);
}

/* Navigation */
footer.tnh-footer .tnh-footer-nav a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.8;
}

/* Social media */
footer.tnh-footer .tnh-social-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

footer.tnh-footer .tnh-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #e99aae;
  border-radius: 50%;
  color: var(--footer-text);
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
}

footer.tnh-footer .tnh-social-icon:hover {
  border-color: var(--footer-pink);
}

/* Contact details */
footer.tnh-footer .tnh-footer-contact > a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  margin: 0 0 11px;
  font-size: 12px;
  line-height: 1.7;
}

footer.tnh-footer .tnh-contact-icon {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  color: var(--footer-pink);
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
}

/* Centered campaign message */
footer.tnh-footer .tnh-footer-message {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 32px 10px 30px;
  border-bottom: 1px solid rgba(249, 229, 232, 0.25);
  text-align: center;
}

footer.tnh-footer .tnh-footer-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.2;
}

footer.tnh-footer .tnh-footer-ribbon {
  font-family: Arial, sans-serif;
  font-size: 0.65em;
}

footer.tnh-footer .tnh-footer-message > p {
  margin: 4px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 3vw, 37px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
}

footer.tnh-footer .tnh-footer-message .tnh-footer-highlight {
  color: var(--footer-pink);
}

footer.tnh-footer .tnh-footer-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 17px;
  color: var(--footer-pink);
}

footer.tnh-footer .tnh-footer-decoration span {
  display: block;
  width: 65px;
  height: 1px;
  background: var(--footer-pink);
}

footer.tnh-footer .tnh-footer-decoration b {
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

/* Bottom copyright row */
footer.tnh-footer .tnh-footer-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  width: 100%;
  padding: 18px 0 0;
  font-size: 10px;
  line-height: 1.7;
}

footer.tnh-footer .tnh-footer-bottom > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

footer.tnh-footer .tnh-footer-bottom i {
  font-style: normal;
  opacity: 0.6;
}

/* Tablet */
@media (max-width: 900px) {
  footer.tnh-footer {
    padding-right: 5%;
    padding-left: 5%;
  }

  footer.tnh-footer .tnh-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 35px;
  }

  footer.tnh-footer .tnh-footer-brand img {
    width: 110px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  footer.tnh-footer {
    padding: 35px 6% 20px;
  }

  footer.tnh-footer .tnh-footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-bottom: 25px;
  }

  footer.tnh-footer .tnh-footer-brand img {
    width: 105px;
    max-height: 70px;
  }

  footer.tnh-footer .tnh-footer-message {
    padding: 26px 0;
  }

  footer.tnh-footer .tnh-footer-title {
    font-size: 32px;
  }

  footer.tnh-footer .tnh-footer-message > p {
    font-size: 28px;
  }

  footer.tnh-footer .tnh-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}