/* Nghệ Thuật Tuổi Thơ Sắc Màu (art) — trang trong đợt 10. Tiền tố ati- (trang), atp- (bài viết). Cam #f58a2e, nâu mực #222, kem #fdf6ee */
:root { --ato: #f58a2e; --atd: #dc741c; --ati: #222; --atc: #fdf6ee; --atl: #eee3d8; }
.ati, .atp { font-family: var(--bf); color: #444; font-size: 16px; line-height: 1.7; }
.ati-w, .atp-w { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ati h1, .ati h2, .ati h3, .atp h1, .atp h2, .atp h3 { font-family: var(--hf); color: var(--ati); font-weight: 700; line-height: 1.25; }
.ati-hero { background: var(--atc) right center / cover no-repeat; min-height: 340px; display: flex; align-items: center; position: relative; }
.ati-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253,246,238,.96) 0%, rgba(253,246,238,.8) 42%, rgba(253,246,238,0) 68%); }
.ati-hero .ati-w { position: relative; padding-top: 34px; padding-bottom: 34px; width: 100%; }
.ati-bc { font-size: 13px; color: #777; margin-bottom: 14px; } .ati-bc a { color: #777; } .ati-bc span { color: var(--atd); }
.ati-pill { display: inline-block; background: var(--ato); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; }
.ati-h1 { font-size: 42px; margin: 0 0 12px; } .ati-lead { max-width: 460px; margin: 0 0 20px; color: #555; }
.ati-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ato); color: #fff !important; font-weight: 700; padding: 12px 24px; border-radius: 8px; text-decoration: none; border: 0; cursor: pointer; font-size: 15px; }
.ati-btn:hover { background: var(--atd); } .ati-btn img { width: 18px; height: 18px; object-fit: contain; }
.ati-bar { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--ato); margin: 10px 0 18px; } .ati-bar.ati-bc2 { margin-top: 0; }
.ati-bar2 { display: block; width: 44px; height: 4px; background: var(--ato); border-radius: 2px; margin: 8px 0 12px; }
.ati-h2 { font-size: 30px; margin: 0 0 12px; } .ati-h2s { font-size: 26px; margin: 0; } .ati-c { text-align: center; } .ati-c + .ati-g3, .ati-vals .ati-bar { margin-left: auto; margin-right: auto; }
.ati-story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.ati-st-i img { width: 100%; height: auto; border-radius: 16px; display: block; }
.ati-vals { background: var(--atc); padding: 52px 0; }
.ati-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px; }
.ati-g3 > div { background: #fff; border: 1px solid var(--atl); border-radius: 14px; padding: 26px 22px; text-align: center; }
.ati-g3 img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 12px; } .ati-g3 h3 { font-size: 19px; margin: 0 0 8px; } .ati-g3 p { margin: 0; font-size: 15px; }
.ati-sp { padding-top: 52px; padding-bottom: 52px; } .ati-sph, .ati-mh, .ati-bh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ati-all { color: var(--atd) !important; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ati-all img, .ati-more img { width: 16px; height: 16px; object-fit: contain; }
.ati-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 18px; }
.ati-g4 > div { border: 1px solid var(--atl); border-radius: 14px; overflow: hidden; background: #fff; } .ati-g4 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ati-g4 b { display: block; color: var(--ati); padding: 12px 16px 2px; font-size: 16px; } .ati-g4 span { display: block; padding: 0 16px 16px; font-size: 14px; color: #666; }
.ati-cta { background: #f6c58a center / cover no-repeat; padding: 44px 0; position: relative; } .ati-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ati-cta h2 { color: var(--ati); font-size: 30px; margin: 0 0 6px; } .ati-cta p { margin: 0; color: var(--ati); } .ati-btn2 { background: var(--ati); } .ati-btn2:hover { background: #000; }
.ati-hero2, .ati-hero3 { min-height: 300px; } .ati-dk { color: var(--ati); } .ati-ld { max-width: 520px; }
.ati-ct { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding-top: 52px; padding-bottom: 36px; }
.ati-fs { color: #666; margin: 0 0 18px; } .ati-form label { display: block; font-weight: 600; font-size: 14px; color: var(--ati); margin-bottom: 14px; } .ati-form label i { color: #d33; font-style: normal; }
.ati-form input, .ati-form select, .ati-form textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; border: 1px solid #ddd; border-radius: 8px; padding: 11px 14px; font: inherit; font-weight: 400; background: #fff; box-shadow: none; }
.ati-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ati-fb { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ati-bs { margin: 0; } 
.ati-lk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #777; } .ati-lk img { width: 16px; height: 16px; object-fit: contain; }
.ati-ic { display: flex; gap: 16px; align-items: center; background: var(--atc); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.ati-ci { flex: 0 0 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } .ati-ci img, .ati-clk { width: 30px; height: 30px; object-fit: contain; }
.ati-ic b { display: block; color: var(--ati); font-size: 14px; } .ati-big { font-size: 20px; font-weight: 700; color: var(--ati) !important; word-break: break-all; } .ati-tx { color: #555; font-size: 15px; }
.ati-mh { padding-top: 20px; padding-bottom: 10px; } .ati-faq { background: var(--atc); margin-top: 40px; padding: 52px 0; } .ati-fq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.ati-fr details { background: #fff; border: 1px solid var(--atl); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; } .ati-fr summary { font-weight: 600; color: var(--ati); cursor: pointer; } .ati-fr p { margin: 8px 0 0; font-size: 15px; }
.ati-bar0 { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; padding-bottom: 20px; flex-wrap: wrap; }
.ati-chips { display: flex; gap: 10px; flex-wrap: wrap; } .ati-chips button { border: 1px solid var(--atl); background: #fff; color: var(--ati); border-radius: 22px; padding: 8px 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .ati-chips button.on { background: var(--ato); color: #fff; border-color: var(--ato); }
.ati-bs input { border: 1px solid var(--atl); border-radius: 22px; padding: 9px 18px; min-width: 240px; font: inherit; box-shadow: none; margin: 0; }
.ati-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; background: var(--atc); border-radius: 16px; overflow: hidden; } .ati-fi img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; } .ati-ft { padding: 24px 30px 24px 0; }
.ati-tag { display: inline-block; background: #fde3c4; color: var(--atd); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 14px; margin-bottom: 10px; } .ati-ft h2 { font-size: 26px; margin: 0 0 10px; } .ati-ft h2 a { color: var(--ati); }
.ati-more { color: var(--atd) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ati-bl { padding-top: 44px; padding-bottom: 36px; } .ati-gn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.ati-pgn { display: flex; justify-content: center; gap: 8px; margin-top: 30px; } .ati-pgn b, .ati-pgn i, .ati-pgn span { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--atl); display: flex; align-items: center; justify-content: center; font-style: normal; } .ati-pgn b { background: var(--ato); color: #fff; border-color: var(--ato); }
.ati-band { background: var(--atc); padding: 40px 0; } .ati-bi { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .ati-bi h2 { font-size: 24px; margin: 0 0 4px; } .ati-bi p { margin: 0; } .ati-btn3 { background: var(--ato); color: #fff !important; font-weight: 700; padding: 12px 26px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
/* bài viết */
body.single-post { background: #fff; }
.atp-top { background: var(--atc); padding: 14px 0; font-size: 13px; color: #777; } .atp-top a { color: #777; } .atp-top span { color: var(--atd); }
.atp-g { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding: 36px 0 48px; }
.atp-pill { display: inline-block; background: var(--ato); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 12px; }
.atp-t { font-size: 36px; margin: 0 0 12px; } .atp-m { display: flex; gap: 18px; font-size: 14px; color: #777; margin-bottom: 18px; flex-wrap: wrap; }
.atp-hero { width: 100%; height: auto; border-radius: 14px; display: block; margin-bottom: 22px; } .atp-lead { font-size: 18px; color: #333; }
.atp-b h2 { font-size: 24px; margin: 28px 0 12px; } .atp-b ul { padding-left: 20px; } .atp-b li { margin-bottom: 6px; }
.atp-fl { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; } .atp-fl img { width: 100%; border-radius: 12px; display: block; }
.atp-b blockquote { background: var(--atc); border-left: 4px solid var(--ato); padding: 18px 24px; margin: 24px 0; font-size: 18px; font-weight: 600; color: var(--ati); border-radius: 0 10px 10px 0; }
.atp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0; } .atp-pn a { display: flex; align-items: center; gap: 12px; border: 1px solid var(--atl); border-radius: 10px; padding: 14px 16px; color: var(--ati); font-weight: 600; font-size: 14px; text-decoration: none; } .atp-pn a em { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: #888; } .atp-pn b { font-size: 24px; color: var(--ato); } .atp-nx { justify-content: space-between; text-align: right; }
.atp-ch { font-size: 22px; margin: 0 0 6px; } .atp-cp { font-size: 14px; color: #777; } .atp-cf label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 12px; } .atp-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.atp-cf input, .atp-cf textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; border: 1px solid #ddd; border-radius: 8px; padding: 11px 14px; font: inherit; box-shadow: none; } .atp-cf button { background: var(--ato); color: #fff; border: 0; border-radius: 8px; padding: 12px 26px; font-weight: 700; cursor: pointer; }
.atp-bx { border: 1px solid var(--atl); border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; } .atp-bx h3 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .atp-bx h3 img { width: 24px; height: 24px; object-fit: contain; }
.atp-toc ul { list-style: none; margin: 0; padding: 0; } .atp-toc li { margin: 0 0 8px; font-size: 14px; } .atp-toc a { color: #555; }
.atp-promo { border-radius: 14px; padding: 26px 22px; margin-bottom: 22px; background: #f6c58a center / cover no-repeat; } .atp-promo h3 { font-size: 20px; margin: 0 0 8px; } .atp-promo p { margin: 0 0 14px; color: var(--ati); font-size: 14px; } .atp-btn { display: inline-block; background: var(--ati); color: #fff !important; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; }
.atp-pp-h { font-weight: 700; font-size: 17px; color: var(--ati); margin-bottom: 12px; } .atp-pp { display: flex; gap: 12px; margin-bottom: 14px; color: var(--ati); font-size: 14px; font-weight: 600; text-decoration: none; } .atp-pp img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 84px; } .atp-pp em { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--atd); }
.atp-cat a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--atl); color: var(--ati); font-size: 14px; text-decoration: none; } .atp-cat a img { width: 22px; height: 22px; object-fit: contain; } .atp-cat a b { margin-left: auto; color: var(--ato); }
.atp-rel { background: var(--atc); padding: 44px 0; } .atp-rh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .atp-rh h2 { font-size: 26px; margin: 0; } .atp-rh a { color: var(--atd); font-weight: 600; }
.atp-rg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .atp-rg a { background: #fff; border-radius: 12px; overflow: hidden; color: #555; text-decoration: none; display: block; padding-bottom: 14px; font-size: 14px; } .atp-rg img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .atp-rg i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--atd); display: block; margin: 12px 16px 4px; } .atp-rg b { display: block; margin: 0 16px 4px; color: var(--ati); font-size: 16px; } .atp-rg span { display: block; margin: 0 16px 6px; } .atp-rg u { margin: 0 16px; color: var(--atd); text-decoration: none; font-weight: 600; }
@media (max-width: 849px) {
 .ati-h1 { font-size: 30px; } .ati-story, .ati-ct, .ati-fq, .ati-feat, .atp-g, .atp-fl { grid-template-columns: 1fr; } .ati-g3, .ati-gn, .atp-rg { grid-template-columns: 1fr; } .ati-g4 { grid-template-columns: 1fr 1fr; }
 .ati-hero::before { background: rgba(253,246,238,.9); } .ati-cta-in, .ati-bi, .ati-sph, .ati-mh, .ati-bh { flex-direction: column; align-items: flex-start; } .ati-r2, .atp-r2, .atp-pn { grid-template-columns: 1fr; } .ati-ft { padding: 0 20px 24px; } .atp-t { font-size: 28px; } .ati-bs input { min-width: 0; width: 100%; }
}

.ati-bs { position: relative; display: block; } .ati-bs img { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; object-fit: contain; pointer-events: none; } .ati-bs input { padding-right: 42px; }
.ati-hero { background-position: 70% 22%; } .ati-cta { background-position: 50% 20%; } .ati-cta::before { content: ""; position: absolute; inset: 0; background: rgba(250,214,170,.86); } .ati-cta .ati-w { position: relative; }
.atp-promo { position: relative; isolation: isolate; background-position: 50% 20%; } .atp-promo::before { content: ""; position: absolute; inset: 0; background: rgba(250,214,170,.86); z-index: -1; border-radius: inherit; }
.ati-cta { background-image: linear-gradient(90deg, #f6c58a, #fadca8) !important; } .ati-cta::before { display: none; }
.atp-promo { background-image: linear-gradient(160deg, #f6c58a, #fadca8) !important; } .atp-promo::before { display: none; }
.ati-hero3 { background-position: 72% 30%; }
.ati-hero3 { background-position: 72% 11%; }
/* mockup: hero tối chữ trắng, ảnh kể chuyện tỉ lệ ngang, CTA cam, tiêu đề mục căn giữa */
.ati-hero::before { background: linear-gradient(90deg, rgba(20,16,14,.9) 0%, rgba(20,16,14,.62) 42%, rgba(20,16,14,0) 72%); }
.ati-hero .ati-h1, .ati-hero .ati-lead { color: #fff; } .ati-hero .ati-bc, .ati-hero .ati-bc a { color: #ddd; } .ati-hero .ati-bc span { color: #fff; } .ati-hero2 .ati-dk, .ati-hero3 .ati-dk { color: #fff; } .ati-hero2 .ati-ld, .ati-hero3 .ati-ld { color: #eee; } .ati-hero2 .ati-bcd, .ati-hero2 .ati-bcd a, .ati-hero3 .ati-bcd, .ati-hero3 .ati-bcd a { color: #ddd; }
.ati-st-i img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.ati-cta { background-image: linear-gradient(90deg, #f58a2e 0%, #f7a04e 55%, #fbd2a1 100%) !important; } .ati-cta h2, .ati-cta p { color: #fff; } .ati-cta p b { color: #fff; }
.ati-sph { justify-content: center; position: relative; } .ati-sph .ati-all { position: absolute; right: 0; bottom: 6px; } .ati-sp .ati-bar { margin-left: auto; margin-right: auto; } .ati-sph .ati-h2 { text-align: center; }
@media (max-width: 849px) { .ati-sph .ati-all { position: static; } .ati-sph { flex-direction: column; align-items: center; } }
@media (max-width: 849px) { .ati-cta { background-image: none !important; background-color: #f58a2e !important; } .ati-hero::before { background: rgba(20,16,14,.72); } }
.atp-promo { background-image: none !important; background-color: #222 !important; } .atp-promo h3, .atp-promo p { color: #fff !important; } .atp-promo .atp-btn { background: #f58a2e; }