/* * MSHP Master Component CSS * mesuahanhphuc.com * Nhúng 1 lần vào – dùng cho tất cả bài viết * * COLOR TOKENS (đồng bộ brand): * --mshp-orange: #E8834A (primary CTA) * --mshp-orange-dk: #C0552A (headings, hover) * --mshp-orange-lt: #FFF8F0 (backgrounds) * --mshp-orange-mid: #FFE8D0 (borders, dividers) * --mshp-blue-lt: #F0F7FF (info boxes) * --mshp-red-lt: #FFF0F0 (warning boxes) * --mshp-green-lt: #F0FFF4 (success boxes) * --mshp-text: #333333 * --mshp-text-muted: #666666 * --mshp-text-small: #888888 */ /* ============================================================ 1. TL;DR SPEAKABLE BOX Dùng cho: AIO anchor + SpeakableSpecification ============================================================ */ .tldr-speakable { background: #FFF8F0; border-left: 4px solid #E8834A; border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 24px 0 32px; font-size: 16px; line-height: 1.7; color: #333; } .tldr-speakable strong:first-child { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #E8834A; margin-bottom: 8px; } /* ============================================================ 2. INFO / CALLOUT BOXES ============================================================ */ /* Box xanh – thông tin bổ sung, tip */ .box-info { background: #F0F7FF; border-radius: 8px; padding: 16px 20px; margin: 20px 0; border-left: 3px solid #4A90E8; } /* Box cam – cảnh báo nhẹ, lưu ý quan trọng */ .box-warning { background: #FFF8F0; border-radius: 8px; padding: 16px 20px; margin: 20px 0; border-left: 3px solid #E8834A; } /* Box đỏ – red flag, nguy hiểm, cần bác sĩ */ .box-danger { background: #FFF0F0; border-left: 4px solid #E85A5A; border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; } .box-danger ul { margin: 8px 0 0; padding-left: 20px; } /* Box xanh lá – reassurance, good news */ .box-success { background: #F0FFF4; border-left: 4px solid #38A169; border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; } /* ============================================================ 3. COMPARISON TABLE ============================================================ */ .mshp-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; } .mshp-table th { background: #FFF8F0; padding: 12px 14px; border: 1px solid #E8D5C0; text-align: left; font-weight: 600; color: #C0552A; } .mshp-table td { padding: 10px 14px; border: 1px solid #E8D5C0; vertical-align: top; } .mshp-table tr:nth-child(even) td { background: #FAFAFA; } /* ============================================================ 4. STEP / HOW-TO LIST ============================================================ */ .mshp-steps { list-style: none; padding: 0; margin: 20px 0; counter-reset: step-counter; } .mshp-steps li { counter-increment: step-counter; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding: 16px; background: #FAFAFA; border-radius: 8px; border: 1px solid #F0E0D0; } .mshp-steps li::before { content: counter(step-counter); display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; background: #E8834A; color: white; border-radius: 50%; font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 2px; } /* ============================================================ 5. EMAIL CAPTURE BOX ============================================================ */ .mshp-email-capture { background: #FFF8F0; border: 2px solid #E8834A; border-radius: 12px; padding: 28px 32px; margin: 40px 0; text-align: center; } .mshp-email-capture h3 { color: #C0552A; margin-top: 0; font-size: 20px; } .mshp-email-capture p { color: #555; margin-bottom: 20px; } .mshp-email-capture form { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; } .mshp-email-capture input[type="email"], .mshp-email-capture input[type="date"], .mshp-email-capture input[type="text"] { width: 100%; padding: 12px 16px; border: 1px solid #E8D5C0; border-radius: 8px; font-size: 15px; color: #333; box-sizing: border-box; } .mshp-email-capture input:focus { outline: none; border-color: #E8834A; box-shadow: 0 0 0 3px rgba(232,131,74,0.1); } .mshp-email-capture button { background: #E8834A; color: white; border: none; border-radius: 8px; padding: 14px 24px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s; } .mshp-email-capture button:hover { background: #C0552A; } .mshp-email-capture .disclaimer { font-size: 12px; color: #AAA; margin-top: 8px; } /* ============================================================ 6. NEXT STEP / CTA BOX ============================================================ */ .mshp-next-step { background: linear-gradient(135deg, #FFF8F0, #FFE8D0); border-radius: 12px; padding: 32px; text-align: center; margin: 40px 0; } .mshp-next-step h3 { color: #C0552A; margin-top: 0; font-size: 20px; } .mshp-next-step .cta-button { display: inline-block; background: #E8834A; color: white; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px; margin-top: 12px; transition: background 0.2s, transform 0.1s; } .mshp-next-step .cta-button:hover { background: #C0552A; transform: translateY(-1px); } .mshp-next-step .secondary-link { display: block; font-size: 13px; color: #888; margin-top: 12px; } .mshp-next-step .secondary-link a { color: #E8834A; } /* ============================================================ 7. RELATED ARTICLES GRID ============================================================ */ .mshp-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; } .mshp-related a { display: block; padding: 16px; background: #FFF8F0; border-radius: 8px; border: 1px solid #E8D5C0; text-decoration: none; color: #333; transition: border-color 0.2s, box-shadow 0.2s; } .mshp-related a:hover { border-color: #E8834A; box-shadow: 0 2px 8px rgba(232,131,74,0.15); } .mshp-related a strong { display: block; margin-bottom: 4px; color: #C0552A; } .mshp-related a p { margin: 0; font-size: 13px; color: #666; } @media (max-width: 600px) { .mshp-related { grid-template-columns: 1fr; } } /* ============================================================ 8. FAQ ACCORDION ============================================================ */ .mshp-faq { margin: 24px 0; } .mshp-faq details { border-bottom: 1px solid #F0E0D0; margin-bottom: 0; } .mshp-faq details:first-child { border-top: 1px solid #F0E0D0; } .mshp-faq summary { font-weight: 600; cursor: pointer; padding: 14px 8px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: #333; } .mshp-faq summary::-webkit-details-marker { display: none; } .mshp-faq summary::after { content: '+'; font-size: 20px; color: #E8834A; font-weight: 300; flex-shrink: 0; margin-left: 12px; } .mshp-faq details[open] summary::after { content: '−'; } .mshp-faq details p { padding: 0 8px 16px; color: #555; line-height: 1.7; margin: 0; } /* ============================================================ 9. AUTHOR BIO ============================================================ */ .mshp-author { display: flex; align-items: flex-start; gap: 16px; background: #FAFAFA; border-radius: 10px; padding: 20px; margin: 32px 0; border: 1px solid #F0E0D0; } .mshp-author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .mshp-author .author-name { font-weight: 700; color: #333; display: block; margin-bottom: 2px; } .mshp-author .author-title { font-size: 13px; color: #E8834A; display: block; margin-bottom: 6px; } .mshp-author .author-bio { font-size: 14px; color: #666; line-height: 1.6; margin: 0; } /* ============================================================ 10. SECTION DIVIDER ============================================================ */ .mshp-divider { border: none; border-top: 2px solid #F5E6D3; margin: 36px 0; } /* ============================================================ 11. TIMELINE (dùng cho ngày/giờ sau sinh) ============================================================ */ .mshp-timeline { list-style: none; padding: 0; margin: 20px 0; position: relative; } .mshp-timeline::before { content: ''; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: #E8D5C0; } .mshp-timeline li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; position: relative; } .mshp-timeline .timeline-dot { width: 30px; height: 30px; background: #E8834A; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700; flex-shrink: 0; z-index: 1; position: relative; } .mshp-timeline .timeline-content { padding-top: 4px; flex: 1; } .mshp-timeline .timeline-content strong { display: block; color: #C0552A; margin-bottom: 4px; } /* ============================================================ 12. BADGE / TAG ============================================================ */ .mshp-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .mshp-badge-crisis { background: #FFF0F0; color: #E85A5A; } .mshp-badge-learning { background: #F0F7FF; color: #2B6CB0; } .mshp-badge-identity { background: #F0FFF4; color: #276749; }