/* Trường Tiểu Học Ánh Dương (school) — trang trong đợt 10 (sci- trang, scp- bài). Đỏ #b3202a, nâu đậm #6b2417, kem #fbf3ea */
:root { --r: #b3202a; --rd: #8f1820; --ink: #6b2417; --tx: #5f4a42; --mu2: #7a5f55; --cr: #fbf3ea; --cr2: #fdf8f3; --ln: #f0e4da; --bl: #eef2fa; }
.sci, .scp { font-family: var(--bf); color: var(--tx); font-size: 17px; line-height: 1.65; }
.sci-w, .scp-w { max-width: 1320px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.sci h1, .sci h2, .sci h3, .scp h1, .scp h2, .scp h3 { font-family: var(--hf); color: var(--ink); font-weight: 700; line-height: 1.22; text-transform: none; letter-spacing: 0; }
.sci p, .scp p { margin: 0 0 14px; }
.sci img, .scp img { max-width: 100%; }
/* dải đầu trang */
.sci-band, .scp-band { background: var(--cr); padding: 30px 0 44px; }
.sci-bc, .scp-bc { font-size: 15px; color: var(--mu2); margin-bottom: 14px; } .sci-bc a, .scp-bc a { color: var(--mu2) !important; } .sci-bc .on, .scp-bc .on { color: var(--r); font-weight: 600; }
.sci-h1 { font-size: 54px; font-weight: 600 !important; margin: 0 0 10px; }
.sci-sub { font-size: 20px; color: var(--tx); margin: 0 !important; }
.sci-wide { display: block; width: 100%; aspect-ratio: 3.1 / 1; object-fit: cover; border-radius: 10px; margin-top: 30px; }
.sci-kk { display: block; color: var(--r); font: 600 15px var(--bf); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.sci-h2 { font-size: 40px; margin: 0 0 10px; }
.sci-mu { color: var(--mu2); font-size: 18px; margin: 0 0 26px !important; }
.sci-c { text-align: center; }
.sci-sec { padding: 64px 0; } .sci-cream { background: var(--cr); } .sci-cream2 { background: var(--cr2); }
a.sci-lk { color: var(--r) !important; font-weight: 600; font-size: 16px; display: inline-flex; gap: 10px; align-items: center; } a.sci-lk img { width: 16px; }
.sci-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--r); color: #fff !important; border: 0; border-radius: 8px; min-height: 52px; padding: 0 30px; font: 600 16.5px/1 var(--bf); cursor: pointer; text-transform: none; }
.sci-btn img { width: 16px; }
/* giới thiệu */
.sci-story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sci-story p { font-size: 17px; }
.sci-si { width: 100%; aspect-ratio: 1.38 / 1; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 4px 18px rgba(107,36,23,.08); }
.sci-vm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.sci-vm > div { background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 36px 34px; text-align: center; }
.sci-vm img { width: 64px; height: 64px; object-fit: contain; }
.sci-vm b { display: block; color: var(--ink); font: 700 23px var(--hf); margin: 14px 0 10px; }
.sci-vm p { font-size: 16px; color: var(--mu2); margin: 0 !important; }
.sci-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; } .sci-hd .sci-mu { margin: 0 !important; }
.sci-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sci-g3 img { width: 100%; aspect-ratio: 1.48 / 1; object-fit: cover; border-radius: 8px; display: block; }
.sci-g3 b { display: block; text-align: center; color: #3b2a22; font: 700 19px var(--hf); margin-top: 16px; }
.sci-g3 p { text-align: center; font-size: 15.5px; color: var(--mu2); margin: 6px 0 0 !important; }
.sci-care { display: grid; grid-template-columns: .9fr 1.3fr; gap: 50px; align-items: center; }
.sci-cm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sci-cm > div { display: flex; gap: 18px; background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 24px 24px; }
.sci-cm img { width: 34px; height: 34px; flex: none; }
.sci-cm b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
.sci-cm p { font-size: 15px; color: var(--mu2); margin: 0 !important; line-height: 1.55; }
/* dải kêu gọi đỏ */
.sci-cta { background: var(--r); color: #fff; padding: 40px 0; }
.sci-cta .sci-w { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sci-cta h2 { color: #fff !important; font-size: 40px !important; margin: 0 0 6px !important; font-weight: 600 !important; }
.sci-cta p { margin: 0 !important; font-size: 19px; color: #fbe9e6; }
.sci-cta-r { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
a.sci-wbtn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--r) !important; border-radius: 8px; min-height: 54px; padding: 0 30px; font: 700 18px/1 var(--bf); }
a.sci-wbtn img { width: 17px; }
a.sci-hl { color: #fff !important; font-size: 22px; display: inline-flex; gap: 10px; align-items: center; } a.sci-hl b { font-weight: 700; } a.sci-hl img { width: 22px; }
/* liên hệ */
.sci-ct { display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; padding: 50px 20px 30px; }
.sci-h2s { font-size: 38px; margin: 0 0 6px; }
.sci-fbox { background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 26px 30px 22px; margin-top: 18px; }
.sci-form label { display: block; font-size: 15.5px; font-weight: 600; color: #3b2a22; margin: 0 0 18px; } .sci-form label i { color: var(--r); font-style: normal; }
.sci-form input, .sci-form select, .sci-form textarea { display: block; width: 100%; height: 50px; border: 1px solid #e6d9cd; border-radius: 6px; margin: 8px 0 0; padding: 0 14px; background: #fff; box-shadow: none; font-size: 15.5px; font-weight: 400; }
.sci-form textarea { height: 110px; padding: 12px 14px; }
.sci-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sci-fnote { font-size: 14px; color: var(--mu2); margin: 12px 0 0 !important; }
.sci-ic { display: flex; gap: 24px; align-items: center; background: var(--cr); border: 1px solid var(--ln); border-radius: 10px; padding: 22px 26px; margin-top: 18px; }
.sci-ic > span { width: 66px; height: 66px; border-radius: 50%; background: var(--bl); display: grid; place-items: center; flex: none; } .sci-ic > span img { width: 34px; height: 34px; }
.sci-ic small { display: block; font-size: 17px; color: #3b2a22; } .sci-ic .sci-big { color: var(--r) !important; font: 700 26px/1.3 var(--hf); } .sci-ic .sci-em { font-size: 20px; } .sci-ic .sci-ad { color: #3b2a22; font: 400 18px/1.55 var(--bf); display: block; }
.sci-ic.sci-icor { background: none; border: 0; padding: 12px 26px; } .sci-ic.sci-icor small { color: var(--r); font-weight: 600; }
.sci-map { padding: 30px 20px 64px; } .sci-map .sci-hd { margin-bottom: 20px; } .sci-map iframe { border-radius: 10px; display: block; width: 100%; border: 0; }
.sci-faq { max-width: 1320px; margin: 0 auto; }
.sci-faq details { background: #fff; border: 1px solid var(--ln); border-radius: 8px; margin: 0 0 10px; }
.sci-faq summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; position: relative; font: 600 18px var(--hf); color: #3b2a22; } .sci-faq summary::-webkit-details-marker { display: none; }
.sci-faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--r); font: 400 28px/1 var(--bf); } .sci-faq details[open] summary::after { content: "−"; }
.sci-faq details p { padding: 0 24px 20px; margin: 0 !important; font-size: 16.5px; color: var(--tx); }
/* danh sách bài */
.sci-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; } .sci-chips button { border: 1px solid #e6d9cd; background: #fff; color: #3b2a22; border-radius: 30px; padding: 0 22px; height: 44px; font: 600 15.5px var(--bf); cursor: pointer; margin: 0; text-transform: none; } .sci-chips button.on { background: var(--r); border-color: var(--r); color: #fff; }
.sci-pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sci-pg > a { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; color: #3b2a22 !important; }
.sci-pg > a > img { width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; display: block; }
.sci-pg > a > div { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.sci-pg em { font-style: normal; color: var(--r); font-size: 15px; font-weight: 600; }
.sci-pg b { font: 700 20px/1.35 var(--hf); color: #3b2a22; margin: 6px 0 10px; display: block; }
.sci-pg p { font-size: 15.5px; color: var(--mu2); margin: 0 0 14px !important; }
.sci-pg u { text-decoration: none; color: var(--r); font-weight: 600; font-size: 15.5px; margin-top: auto; display: inline-flex; gap: 8px; align-items: center; } .sci-pg u img { width: 14px; }
.sci-pg small { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--tx); margin: 0 0 6px; } .sci-pg small img { width: 18px; height: 18px; } .sci-pg small strong { color: var(--r); }
/* chương trình / tuyển sinh / thư viện */
.sci-alt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; margin: 0 0 60px; } .sci-alt:last-child { margin-bottom: 0; }
.sci-alt.rev > img { order: 2; }
.sci-alt > img { width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; border-radius: 10px; display: block; }
.sci-alt h2 { font-size: 34px; margin: 0 0 14px; }
.sci-ck { list-style: none; margin: 14px 0 20px !important; padding: 0; } .sci-ck li { display: flex; gap: 16px; align-items: center; margin: 0 0 14px; font-size: 17px; } .sci-ck li img { width: 28px; flex: none; }
.sci-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: st; margin-top: 30px; }
.sci-steps > div { background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 30px 26px; }
.sci-steps > div::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--r); color: #fff; font: 700 21px var(--hf); margin-bottom: 16px; }
.sci-steps b { display: block; color: var(--ink); font: 700 20px var(--hf); margin-bottom: 8px; } .sci-steps p { font-size: 15.5px; color: var(--mu2); margin: 0 !important; }
.sci-ad { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.sci-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sci-gal figure { margin: 0; } .sci-gal img { width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; border-radius: 8px; display: block; }
.sci-gal figcaption { font-size: 16px; color: #3b2a22; font-weight: 600; margin-top: 10px; }
/* bài viết */
.scp-band { padding: 26px 0 40px; }
.scp-kick { display: block; color: var(--r); font: 700 15px var(--bf); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.scp-t { font-size: 46px !important; margin: 0 0 16px !important; max-width: 920px; }
.scp-m { display: flex; flex-wrap: wrap; gap: 30px; font-size: 15.5px; color: var(--tx); } .scp-m span { display: inline-flex; gap: 8px; align-items: center; } .scp-m img { width: 19px; height: 19px; }
.scp-hero { display: block; width: 100%; aspect-ratio: 3.25 / 1; object-fit: cover; border-radius: 10px; margin-top: 26px; }
.scp-g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; padding: 34px 20px 50px; }
.scp-toc { background: var(--cr); border-radius: 10px; padding: 22px 28px; margin-bottom: 30px; }
.scp-toc h3 { font-size: 22px !important; margin: 0 0 12px !important; display: flex; gap: 12px; align-items: center; } .scp-toc h3 img { width: 26px; }
.scp-toc ol { list-style: none; counter-reset: t; margin: 0 !important; padding: 0; } .scp-toc li { counter-increment: t; margin: 0 0 8px; font-size: 16.5px; display: flex; gap: 22px; } .scp-toc li::before { content: counter(t, decimal-leading-zero); color: var(--r); font-weight: 600; } .scp-toc a { color: #2f4f9e !important; text-decoration: underline; }
.scp-b h2 { font-size: 30px !important; margin: 30px 0 12px !important; } .scp-b h3 { font-size: 21px !important; margin: 22px 0 8px !important; }
.scp-b p { font-size: 17px; } .scp-b ul { margin: 0 0 18px 4px !important; padding: 0; list-style: none; } .scp-b ul li { position: relative; padding-left: 24px; margin: 0 0 8px; font-size: 17px; } .scp-b ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--r); }
.scp-b a { color: var(--r) !important; }
.scp-note { display: flex; gap: 18px; background: #fdf1ee; border-left: 4px solid var(--r); border-radius: 8px; padding: 20px 24px; margin: 22px 0 !important; } .scp-note img { width: 30px; height: 30px; flex: none; } .scp-note b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; } .scp-note span { font-size: 15.5px; color: var(--tx); }
.scp-fig { margin: 22px 0; } .scp-fig img { width: 100%; aspect-ratio: 2.3 / 1; object-fit: cover; border-radius: 10px; display: block; } .scp-fig figcaption { font-size: 14.5px; color: var(--mu2); margin-top: 8px; }
.scp-share { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--ln); padding-top: 22px; margin-top: 30px; font-size: 15.5px; color: #3b2a22; } .scp-share a { width: 40px; height: 40px; border-radius: 50%; background: var(--r); display: grid; place-items: center; } .scp-share a img { width: 20px; height: 20px; }
.scp-bx { background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 26px 26px; margin-bottom: 24px; }
.scp-promo { background: var(--cr2); text-align: center; } .scp-promo > img { width: 62px; height: 62px; } .scp-promo h3 { font-size: 22px !important; margin: 12px 0 8px !important; } .scp-promo p { font-size: 15.5px; color: var(--mu2); }
.scp-promo .scp-pl { border-top: 1px solid var(--ln); padding-top: 14px; font-size: 15.5px; text-align: left; color: #3b2a22; }
.scp-promo .sci-btn { width: 100%; } a.scp-tel { display: flex; justify-content: center; gap: 12px; align-items: center; color: var(--r) !important; font: 700 22px var(--hf); margin-top: 14px; } a.scp-tel img { width: 34px; height: 34px; }
.scp-bx h3 { font-size: 21px !important; margin: 0 0 16px !important; }
a.scp-pp { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ln); color: #3b2a22 !important; } a.scp-pp:first-of-type { border-top: 0; padding-top: 0; }
a.scp-pp img { width: 110px; height: 80px; object-fit: cover; border-radius: 6px; flex: none; } a.scp-pp b { display: block; font-size: 15.5px; line-height: 1.4; } a.scp-pp small { font-size: 14px; color: var(--mu2); }
.scp-cat a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--ln); color: #3b2a22 !important; font-size: 16px; } .scp-cat a:first-of-type { border-top: 0; } .scp-cat a img { width: 13px; opacity: .7; }
.scp-relbg { background: var(--cr); padding: 50px 0 60px; }
.scp-rh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .scp-rh h2 { font-size: 34px !important; margin: 0 !important; }
/* mobile */
@media (max-width: 849px) {
 .sci, .scp { font-size: 16px; }
 .sci-band, .scp-band { padding: 20px 0 28px; }
 .sci-h1 { font-size: 32px; } .sci-sub { font-size: 17px; } .sci-h2, .sci-h2s { font-size: 28px; } .scp-t { font-size: 30px !important; }
 .sci-sec { padding: 40px 0; } .sci-wide { aspect-ratio: 1.8 / 1; margin-top: 20px; } .scp-hero { aspect-ratio: 1.7 / 1; }
 .sci-story, .sci-care, .sci-ct, .sci-alt, .sci-ad, .scp-g { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .sci-alt.rev > img { order: 0; } .sci-alt { margin-bottom: 40px; } .sci-alt h2 { font-size: 26px; }
 .sci-vm, .sci-g3, .sci-pg, .sci-cm, .sci-r2, .sci-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
 .sci-gal { grid-template-columns: 1fr 1fr; gap: 10px; } .sci-gal figcaption { font-size: 14px; }
 .sci-hd, .scp-rh { flex-direction: column; align-items: flex-start; gap: 10px; }
 .sci-cta .sci-w { flex-direction: column; align-items: flex-start; } .sci-cta h2 { font-size: 28px !important; } .sci-cta-r { align-items: flex-start; }
 .sci-ct { padding: 30px 20px 10px; } .sci-ic { padding: 16px; gap: 16px; } .sci-ic > span { width: 54px; height: 54px; } .sci-ic .sci-big { font-size: 22px; } .sci-ic .sci-em { font-size: 16px; word-break: break-all; }
 .sci-fbox { padding: 20px 18px; }
 .scp-g { padding: 24px 20px 36px; } .scp-b h2 { font-size: 24px !important; } .scp-m { gap: 14px; }
 .sci-faq summary { font-size: 16px; }
}
.scp-rh .sci-lk, .sci-hd .sci-lk { white-space: nowrap; }

.sci-pg > a > img { aspect-ratio: 1.45 / 1; object-position: 50% 28%; } a.scp-pp img { object-position: 50% 25%; }
.scp-fig img { aspect-ratio: 1.8 / 1; object-position: 50% 35%; } .scp-hero { object-position: 50% 30%; }
.sci-pg > a > img { aspect-ratio: 1.25 / 1; object-position: 50% 10%; } .scp-hero { aspect-ratio: 2.7 / 1; object-position: 50% 42%; }
/* ruler:manual (11-01, đo mockup trang trong) */
@media (min-width: 850px) {
 .sci-cm img { width: 42px; height: 42px; } .sci-vm img { width: 74px; height: 74px; } .sci-c .sci-h2 { font-size: 46px; }
 .sci-ic > span img { width: 40px; height: 40px; } .sci-ic.sci-icor > span img { width: 46px; height: 46px; }
 a.scp-tel img { width: 48px; height: 48px; } a.sci-lk img { width: 20px; }
}