/* ============================================================
   THIỆN NGUYỆN — Design system (template Thiện nguyện 2026)
   Scope: .imm-charity (wrapper <main>) — không đụng style global
   Palette: xanh #1A6A94 / #25ABD1 (nhấn) — vàng #C9922E (eyebrow, số liệu)
   Prefix class: .chy-*
   ============================================================ */
.imm-charity{
	--chy-ink:#0E3B54;            /* màu chữ heading trên nền sáng */
	--chy-blue-800:#134F70;
	--chy-blue-700:#155C80;
	--chy-blue-600:#1A6A94;       /* xanh nền chính */
	--chy-blue-500:#1F87AF;
	--chy-blue-400:#25ABD1;       /* xanh sáng nhấn */
	--chy-blue-300:#7FD3EA;
	--chy-on-blue:#E1F1F8;        /* chữ body trên nền xanh */
	--chy-accent:#25ABD1;         /* nhấn (thay cho đỏ) */
	--chy-accent-dark:#1F87AF;
	--chy-gold-200:#F0DCB2;
	--chy-gold-300:#E7C77B;
	--chy-gold-400:#C9922E;
	--chy-gold-500:#A9781F;
	--chy-cream:#FBF7F1;
	--chy-cream-2:#F4EEE5;
	--chy-line:#E6E1D8;
	--chy-body:#3F4A57;
	--chy-muted:#6B7480;

	--chy-max:1200px;
	--chy-pad-x:clamp(1.25rem,4vw,2.5rem);
	--chy-pad-y:clamp(3.25rem,6vw,5rem);
	--chy-radius:18px;
	--chy-shadow:0 22px 60px rgba(11,27,46,.10);

	font-family:Roboto,ui-sans-serif,system-ui,sans-serif;
	color:var(--chy-body);
	background:#fff;
	overflow-x:hidden;
}
.imm-charity *{box-sizing:border-box;}
.imm-charity > section{scroll-margin-top:100px;}
.imm-charity img{max-width:100%;height:auto;}
.imm-charity p{margin:0 0 1.05rem;}
.imm-charity p:last-child{margin-bottom:0;}
.imm-charity a:not([class]){color:var(--chy-blue-600);}

/* ---------- Bộ phận dùng chung ---------- */
.chy-inner{position:relative;z-index:1;max-width:var(--chy-max);margin:0 auto;padding-left:var(--chy-pad-x);padding-right:var(--chy-pad-x);}

.chy-eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;}
.chy-eyebrow span{height:1px;width:40px;background:var(--chy-gold-400);flex:none;}
.chy-eyebrow p{margin:0;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--chy-gold-500);}
.chy-eyebrow--light p{color:var(--chy-gold-300);}
.chy-eyebrow--center{justify-content:center;}

.chy-title{
	margin:0;
	font-family:"Noto Serif",Georgia,serif;
	font-weight:600;
	font-size:clamp(1.5rem,2.8vw,2.15rem);
	line-height:1.35;
	letter-spacing:-.01em;
	color:var(--chy-ink);
}
.chy-title--light{color:#fff;}

.chy-lead{font-size:1.02rem;line-height:1.9;color:var(--chy-body);}
.chy-lead--light{color:#CBD5E1;}

/* Nút — luôn qualify bằng .imm-charity để thắng style link global của theme */
.imm-charity .chy-btn{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.85rem 1.6rem;border-radius:999px;
	font-size:.92rem;font-weight:600;letter-spacing:.02em;
	text-decoration:none;border:1px solid transparent;
	transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
}
.imm-charity .chy-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
/* Primary chỉ dùng trên nền xanh (hero, credo) → nền trắng, chữ xanh cho bật hẳn */
.imm-charity .chy-btn--primary{background:#fff;color:var(--chy-blue-700);box-shadow:0 14px 30px rgba(6,40,60,.28);}
.imm-charity .chy-btn--primary:hover,.imm-charity .chy-btn--primary:focus{background:var(--chy-accent);color:#08314A;text-decoration:none;transform:translateY(-2px);box-shadow:0 18px 36px rgba(6,40,60,.34);}
.imm-charity .chy-btn--ghost{background:transparent;color:#fff;border-color:rgba(231,199,123,.5);}
.imm-charity .chy-btn--ghost:hover,.imm-charity .chy-btn--ghost:focus{color:var(--chy-ink);background:var(--chy-gold-300);border-color:var(--chy-gold-300);text-decoration:none;transform:translateY(-2px);}
.imm-charity .chy-btn--dark{background:var(--chy-blue-600);color:#fff;box-shadow:0 12px 28px rgba(26,106,148,.28);}
.imm-charity .chy-btn--dark:hover,.imm-charity .chy-btn--dark:focus{background:var(--chy-blue-700);color:#fff;text-decoration:none;transform:translateY(-2px);}
.imm-charity .chy-btn:focus-visible{outline:2px solid var(--chy-gold-300);outline-offset:3px;}

/* ============================================================
   1. HERO
   ============================================================ */
.chy-hero{position:relative;overflow:hidden;background:var(--chy-blue-600);padding:clamp(2.75rem,5vw,4.5rem) 0 0;}
.chy-hero__bg{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(circle at 82% 8%, rgba(37,171,209,.75), transparent 48%),
		radial-gradient(circle at 4% 92%, rgba(37,171,209,.35), transparent 45%),
		linear-gradient(160deg,#1A6A94 0%,#1F87AF 55%,#155C80 100%);
}
.chy-hero__ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.24);z-index:0;pointer-events:none;}
.chy-hero__ring--1{right:-160px;top:-140px;width:460px;height:460px;}
.chy-hero__ring--2{right:-80px;top:-60px;width:300px;height:300px;border-color:rgba(255,255,255,.14);}

.chy-hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.25rem);align-items:center;}
@media(min-width:992px){.chy-hero__grid{grid-template-columns:1.1fr .9fr;}}

.chy-hero__title{
	margin:0 0 .65rem;
	font-family:"Noto Serif",Georgia,serif;
	font-weight:700;
	font-size:clamp(2rem,4.6vw,3.15rem);
	line-height:1.2;
	letter-spacing:-.015em;
	color:#fff;
	text-transform:uppercase;
}
.imm-charity .chy-hero__sub{
	margin:0 0 1.35rem;padding-left:1.1rem;
	border-left:2px solid var(--chy-gold-300);
	font-family:"Noto Serif",Georgia,serif;
	font-size:clamp(1rem,1.9vw,1.22rem);
	line-height:1.6;color:var(--chy-gold-200);font-style:italic;
}
.chy-hero__lead{max-width:36rem;font-size:1rem;line-height:1.95;color:var(--chy-on-blue);}
.imm-charity .chy-hero__lead a{color:var(--chy-gold-300);text-decoration:none;border-bottom:1px solid rgba(231,199,123,.45);}
.imm-charity .chy-hero__lead a:hover{color:#fff;border-color:#fff;}
.chy-hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem;}

/* Ảnh + badge */
.chy-hero__media{position:relative;}
.chy-hero__frame{
	position:relative;border-radius:var(--chy-radius);overflow:hidden;
	box-shadow:0 30px 70px rgba(8,52,74,.38);
	border:1px solid rgba(255,255,255,.35);
}
.chy-hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,59,84,0) 45%,rgba(14,59,84,.45) 100%);}
.chy-hero__frame img{display:block;width:100%;height:clamp(300px,42vw,470px);object-fit:cover;object-position:center 35%;}
.chy-hero__badge{
	position:absolute;left:-.75rem;bottom:-1.25rem;z-index:2;
	display:flex;align-items:center;gap:.9rem;
	padding:.95rem 1.25rem;border-radius:14px;
	background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.28);
	max-width:19rem;
}
.chy-hero__badge-ic{
	width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
	background:linear-gradient(140deg,var(--chy-gold-300),var(--chy-gold-500));color:#fff;
}
.chy-hero__badge-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.chy-hero__badge-txt{display:block;}
.chy-hero__badge b{display:block;font-family:"Noto Serif",Georgia,serif;font-size:1rem;font-weight:600;line-height:1.35;color:var(--chy-ink);margin-bottom:.15rem;}
.chy-hero__badge-txt span{display:block;font-size:.78rem;line-height:1.45;color:var(--chy-muted);}
@media(max-width:991px){
	.chy-hero__badge{left:auto;right:1rem;bottom:-1.5rem;}
}

/* Dải số liệu */
.chy-stats{
	display:grid;grid-template-columns:1fr;gap:1px;
	margin:clamp(2.75rem,5vw,4rem) 0 0;
	background:rgba(255,255,255,.20);
	border:1px solid rgba(255,255,255,.20);
	border-radius:var(--chy-radius);overflow:hidden;
}
@media(min-width:768px){.chy-stats{grid-template-columns:repeat(3,1fr);}}
.chy-stat{background:rgba(255,255,255,.08);padding:clamp(1.4rem,2.5vw,1.9rem) clamp(1.25rem,2.5vw,2rem);}
.chy-stat b{
	display:block;font-family:"Noto Serif",Georgia,serif;font-weight:600;
	font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.15;color:var(--chy-gold-200);margin-bottom:.35rem;
}
.chy-stat span{display:block;font-size:.88rem;line-height:1.6;color:var(--chy-on-blue);}
.chy-hero__shelf{padding-bottom:clamp(2.5rem,5vw,4rem);}

/* ============================================================
   2. NIỀM TIN — vì sao chọn giáo dục
   ============================================================ */
.chy-belief{position:relative;background:var(--chy-cream);padding:var(--chy-pad-y) 0;}
.chy-belief__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);}
@media(min-width:992px){.chy-belief__grid{grid-template-columns:.85fr 1.15fr;align-items:start;}}
@media(min-width:992px){.chy-belief__aside{position:sticky;top:110px;}}

.chy-belief__quote{
	margin:1.5rem 0 0;padding:1.5rem 1.6rem;
	background:#fff;border-radius:var(--chy-radius);
	border:1px solid var(--chy-line);border-left:4px solid var(--chy-accent);
	box-shadow:var(--chy-shadow);
}
.imm-charity .chy-belief__quote p{
	margin:0;font-family:"Noto Serif",Georgia,serif;font-style:italic;
	font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.75;color:var(--chy-ink);
}
.chy-belief__body p{font-size:1.02rem;line-height:2;color:var(--chy-body);}
@media(min-width:768px){.chy-belief__body p{text-align:justify;}}
.chy-belief__body strong{color:var(--chy-ink);font-weight:600;}

/* Vòng lặp tốt lành */
.chy-loop{
	display:grid;grid-template-columns:1fr;gap:.9rem;
	margin-top:clamp(1.75rem,3vw,2.5rem);
}
@media(min-width:768px){.chy-loop{grid-template-columns:repeat(3,1fr);gap:1rem;}}
.chy-loop__item{
	position:relative;display:flex;align-items:flex-start;gap:.95rem;
	background:#fff;border:1px solid var(--chy-line);border-radius:14px;
	padding:1.35rem 1.4rem;
	transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.chy-loop__item:hover{transform:translateY(-3px);box-shadow:var(--chy-shadow);border-color:var(--chy-gold-300);}
.chy-loop__ic{
	width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
	background:var(--chy-cream-2);color:var(--chy-gold-500);
}
.chy-loop__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.chy-loop__txt{display:block;}
.chy-loop__txt b{display:block;font-size:1rem;color:var(--chy-ink);margin-bottom:.25rem;font-weight:600;}
.chy-loop__txt span{display:block;font-size:.9rem;line-height:1.7;color:var(--chy-muted);}
/* mũi tên nối giữa các bước (desktop) */
@media(min-width:768px){
	.chy-loop__item:not(:last-child)::after{
		content:"";position:absolute;right:-.72rem;top:50%;width:.55rem;height:.55rem;
		border-top:1px solid var(--chy-gold-400);border-right:1px solid var(--chy-gold-400);
		transform:translateY(-50%) rotate(45deg);
	}
}

/* ============================================================
   3. BA TRỤ CỘT
   ============================================================ */
.chy-pillars{position:relative;background:#fff;padding:var(--chy-pad-y) 0;}
.chy-pillars__head{max-width:52rem;margin:0 auto clamp(2rem,4vw,3rem);text-align:center;}
.chy-pillars__head .chy-lead{margin-top:1rem;}
.imm-charity .chy-pillars__mission{
	display:inline-block;margin:1.25rem 0 0;padding:.7rem 1.35rem;border-radius:999px;
	background:var(--chy-cream-2);color:var(--chy-ink);
	font-size:.92rem;font-weight:600;line-height:1.6;
}
.chy-pillars__grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media(min-width:768px){.chy-pillars__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.chy-pillars__grid{grid-template-columns:repeat(3,1fr);}}

.chy-pillar{
	position:relative;display:flex;flex-direction:column;
	padding:clamp(1.6rem,3vw,2.1rem);
	background:#fff;border:1px solid var(--chy-line);border-radius:var(--chy-radius);
	overflow:hidden;
	transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.chy-pillar::before{
	content:"";position:absolute;left:0;right:0;top:0;height:3px;
	background:linear-gradient(90deg,var(--chy-accent),var(--chy-blue-600));
	transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.chy-pillar:hover{transform:translateY(-6px);box-shadow:var(--chy-shadow);border-color:transparent;}
.chy-pillar:hover::before{transform:scaleX(1);}
.chy-pillar__num{
	position:absolute;right:1.15rem;top:.75rem;
	font-family:"Noto Serif",Georgia,serif;font-size:2.75rem;font-weight:700;
	color:var(--chy-cream-2);line-height:1;pointer-events:none;
}
.chy-pillar__ic{
	width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem;
	background:linear-gradient(140deg,var(--chy-blue-400),var(--chy-blue-600));color:#fff;
}
.chy-pillar__ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.chy-pillar__title{
	margin:0 0 .75rem;font-family:"Noto Serif",Georgia,serif;font-weight:600;
	font-size:1.15rem;line-height:1.45;color:var(--chy-ink);
}
.imm-charity .chy-pillar__text{margin:0;font-size:.95rem;line-height:1.85;color:var(--chy-body);}
.imm-charity .chy-pillar__text + .chy-pillar__text{margin-top:.75rem;}

/* ============================================================
   4. QUOTE BANNER (ảnh collage 2026)
   ============================================================ */
.chy-quote{
	position:relative;isolation:isolate;
	padding:clamp(3rem,6vw,5.5rem) 0;
	background-color:var(--chy-cream);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:78% center;
}
.chy-quote::before{
	content:"";position:absolute;inset:0;z-index:0;
	background:linear-gradient(180deg,rgba(251,247,241,.95) 0%,rgba(251,247,241,.88) 100%);
}
@media(min-width:992px){
	.chy-quote{background-position:right center;}
	.chy-quote::before{
		background:linear-gradient(90deg,rgba(251,247,241,.98) 0%,rgba(251,247,241,.95) 34%,rgba(251,247,241,.72) 50%,rgba(251,247,241,0) 68%);
	}
}
.chy-quote__box{max-width:38rem;margin:0;}
/* Mobile/tablet: đưa nội dung vào thẻ nền mờ để tách khỏi ảnh collage phía sau */
@media(max-width:991px){
	.chy-quote__box{
		background:rgba(255,255,255,.92);
		border:1px solid rgba(201,146,46,.28);
		border-radius:var(--chy-radius);
		padding:clamp(1.5rem,5vw,2rem);
		box-shadow:0 18px 45px rgba(11,27,46,.12);
		backdrop-filter:blur(3px);
	}
}
.chy-quote__mark{display:block;width:44px;height:44px;color:var(--chy-gold-400);margin-bottom:1rem;}
.chy-quote__mark svg{width:100%;height:100%;fill:currentColor;}
.imm-charity .chy-quote__text{
	margin:0 0 1.75rem;
	font-family:"Noto Serif",Georgia,serif;font-style:italic;font-weight:500;
	font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.65;color:var(--chy-ink);
}
.chy-quote__author{display:flex;align-items:center;gap:1rem;padding-top:1.15rem;border-top:1px solid rgba(201,146,46,.4);}
.chy-quote__author-line{width:36px;height:2px;background:var(--chy-blue-600);flex:none;}
.imm-charity .chy-quote__name{margin:0;font-family:"Noto Serif",Georgia,serif;font-size:1.05rem;font-weight:600;color:var(--chy-ink);}
.imm-charity .chy-quote__role{margin:.15rem 0 0;font-size:.86rem;color:var(--chy-muted);}
.chy-quote__actions{margin-top:1.85rem;}

/* ============================================================
   5. CREDO — khép lại + CTA
   ============================================================ */
.chy-credo{position:relative;overflow:hidden;background:var(--chy-blue-600);padding:var(--chy-pad-y) 0;}
.chy-credo__bg{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(circle at 15% 15%, rgba(37,171,209,.75), transparent 48%),
		radial-gradient(circle at 88% 88%, rgba(37,171,209,.45), transparent 48%),
		linear-gradient(160deg,#1A6A94 0%,#1F87AF 55%,#155C80 100%);
}
.imm-charity .chy-credo__box{max-width:56rem;margin:0 auto;text-align:center;}
.chy-credo__text{font-size:clamp(1rem,1.6vw,1.08rem);line-height:2;color:var(--chy-on-blue);}
.imm-charity .chy-credo__slogan{
	display:block;margin:1.5rem auto;max-width:52rem;text-wrap:balance;
	font-family:"Noto Serif",Georgia,serif;font-style:italic;
	font-size:clamp(1.25rem,2.8vw,1.85rem);line-height:1.5;color:#fff;
}
.chy-credo__slogan em{font-style:italic;color:var(--chy-gold-300);}
.chy-credo__rule{width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--chy-blue-300),var(--chy-accent));margin:0 auto 1.75rem;}
.chy-credo__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:2.25rem;}

/* ============================================================
   Animation guards (AOS / no-JS / reduce motion)
   ============================================================ */
html:not(.imm-js) .imm-charity [data-aos]{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
	.imm-charity [data-aos]{opacity:1 !important;transform:none !important;transition:none !important;}
	.imm-charity *{transition:none !important;}
}