/* ========================================================= Blog Con Yêu — giao diện v0.2 (theme con GeneratePress) Nhấn HỒNG SAN HÔ trên nền kem (Sếp chốt 04/10/2026). Màu chỉ khai báo ở token :root / [data-theme]. Đổi màu = sửa token. ========================================================= */ :root { --bcy-bg: #FBF7F2; --bcy-surface: #FFFFFF; --bcy-soft: #F5EDE4; --bcy-blush: #FDEBE5; --bcy-text: #3A2E2A; --bcy-muted: #6E625A; --bcy-line: #EADFD4; --bcy-coral: #E8735F; /* trang trí: tim, viền, icon */ --bcy-accent: #C9553F; /* nền nút — chữ trắng đạt tương phản */ --bcy-accent-ink: #FFFFFF; --bcy-link: #B04A36; /* chữ màu nhấn trên nền kem */ --bcy-sage: #5E8C6A; /* chỉ cho "hợp với" */ --bcy-warn: #B5482E; --bcy-radius: 18px; --bcy-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --bcy-script: 'Dancing Script', cursive; --bcy-read: 740px; --bcy-wide: 1160px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bcy-bg: #1D1917; --bcy-surface: #27221F; --bcy-soft: #312A26; --bcy-blush: #3A2925; --bcy-text: #EFE7E0; --bcy-muted: #B6A99F; --bcy-line: #3E3531; --bcy-coral: #F2957F; --bcy-accent: #E0755F; --bcy-accent-ink: #1D1917; --bcy-link: #F4A38F; --bcy-sage: #8FC09B; --bcy-warn: #EE9078; color-scheme: dark; } } :root[data-theme="dark"] { --bcy-bg: #1D1917; --bcy-surface: #27221F; --bcy-soft: #312A26; --bcy-blush: #3A2925; --bcy-text: #EFE7E0; --bcy-muted: #B6A99F; --bcy-line: #3E3531; --bcy-coral: #F2957F; --bcy-accent: #E0755F; --bcy-accent-ink: #1D1917; --bcy-link: #F4A38F; --bcy-sage: #8FC09B; --bcy-warn: #EE9078; color-scheme: dark; } /* ---------- Nền tảng ---------- */ body, .site, .site-content, .separate-containers .inside-article, .one-container .container, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation { background-color: var(--bcy-bg); color: var(--bcy-text); } body { font-family: var(--bcy-font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .entry-title, .main-title { font-family: var(--bcy-font); color: var(--bcy-text); font-weight: 700; line-height: 1.3; } a { color: var(--bcy-link); } a:hover, a:focus { color: var(--bcy-link); } :focus-visible { outline: 3px solid var(--bcy-coral); outline-offset: 2px; border-radius: 6px; } img { border-radius: 14px; } .bcy-ic { flex-shrink: 0; } .bcy-script { font-family: var(--bcy-script); color: var(--bcy-accent); font-weight: 700; font-size: 1.2em; white-space: nowrap; } .bcy-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--bcy-link); text-decoration: none; } .bcy-link:hover { text-decoration: underline; } .bcy-btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; border: 1.5px solid var(--bcy-accent); background: var(--bcy-accent); color: var(--bcy-accent-ink) !important; font-weight: 700; font-size: 15px; text-decoration: none !important; line-height: 1.3; } .bcy-btn-pill:hover { filter: brightness(1.07); } .bcy-btn-pill--ghost { background: transparent; color: var(--bcy-link) !important; border-color: var(--bcy-coral); } .bcy-chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--bcy-blush); color: var(--bcy-link); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .bcy-chip--soft { background: var(--bcy-soft); color: var(--bcy-muted); } .bcy-soon { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 99px; border: 1px dashed var(--bcy-coral); color: var(--bcy-link); font-size: 12px; font-weight: 600; } /* Khung ảnh / tranh nét mảnh thay ảnh */ .bcy-ph { position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--bcy-radius); background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 9%, transparent 9.5%), radial-gradient(circle at 86% 78%, rgba(255,255,255,.45) 0 7%, transparent 7.5%), radial-gradient(rgba(138,90,76,.13) 1.2px, transparent 1.6px) 0 0 / 14px 14px, linear-gradient(140deg, var(--c1, #F9D9CF), var(--c2, #F6E9D9)); color: #9A5E4E; } .bcy-ph::before { content: ""; position: absolute; z-index: -1; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,.35) 62%, transparent 70%); } .bcy-ph:has(img)::before { display: none; } .bcy-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s ease; } .bcy-art { width: 44%; max-width: 160px; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(150,80,60,.18)); } /* Hoạ tiết vẽ tay */ .bcy-doodle { position: absolute; pointer-events: none; color: var(--bcy-coral); } /* Gạch chân lượn sóng dưới chữ nhấn của tiêu đề khối */ .bcy-home h2 em { padding-bottom: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 5c5-4 10-4 15 0s10 4 15 0 7-3 10-1' fill='none' stroke='%23E8735F' stroke-width='1.8' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") left bottom / 40px 8px repeat-x; } /* ---------- Đầu trang ---------- */ .site-header, .main-navigation, .main-navigation ul ul, .has-inline-mobile-toggle #site-navigation.toggled { background-color: var(--bcy-surface); } .site-header { border-bottom: 1px solid var(--bcy-line); position: sticky; top: 0; z-index: 50; } .inside-header { padding: 10px 16px; max-width: var(--bcy-wide); } .main-title { margin: 0; line-height: 0; } .bcy-logo { display: inline-block; background: #fff; border-radius: 10px; padding: 3px 5px; } .bcy-logo img { height: 44px; width: auto; border-radius: 0; display: block; } .main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items { color: var(--bcy-muted); font-weight: 600; font-size: 15px; } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--bcy-link); background: transparent; } .main-navigation .menu-toggle { background: transparent; } .main-navigation.toggled .main-nav > ul { border-top: 1px solid var(--bcy-line); } .main-navigation .menu-bar-items .menu-bar-item > a { color: var(--bcy-text); } .navigation-search input[type="search"], .navigation-search.nav-search-active input[type="search"] { background: var(--bcy-surface); color: var(--bcy-text); } .bcy-theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bcy-line); border-radius: 50%; padding: 0; background: transparent; color: var(--bcy-text); cursor: pointer; } .bcy-theme-toggle:hover { background: var(--bcy-blush); color: var(--bcy-text); } .main-navigation .menu-bar-items .menu-bar-item > .bcy-theme-toggle { padding: 0; } .bcy-theme-item { display: flex; align-items: center; padding-left: 6px; } /* Điện thoại: logo + 3 nút luôn nằm CHUNG 1 hàng (máy 360px từng bị rớt dòng) */ @media (max-width: 767px) { .inside-header { padding: 8px 12px; flex-wrap: wrap; } .site-branding { flex: 1 1 0; min-width: 0; } .bcy-logo { padding: 2px 3px; } .bcy-logo img { height: auto; width: 100%; max-width: 150px; } .mobile-menu-control-wrap { margin-left: auto; flex: 0 0 auto; } .mobile-menu-control-wrap .menu-bar-items .menu-bar-item > a, .mobile-menu-control-wrap .menu-toggle { padding-left: 9px; padding-right: 9px; line-height: 44px; } .bcy-theme-item { padding-left: 0; } .bcy-theme-toggle { width: 36px; height: 36px; } } /* ---------- Bài viết / trang ---------- */ .site-content { padding-top: 0; } .single .inside-article, .page .inside-article, .archive .page-header, .search .page-header { max-width: var(--bcy-read); margin-left: auto; margin-right: auto; } .separate-containers .inside-article { padding: 20px 16px 32px; } .entry-title { font-size: 27px; line-height: 1.25; margin-bottom: 8px; font-weight: 800; } .entry-meta { color: var(--bcy-muted); font-size: 14px; } .entry-meta a { color: var(--bcy-muted); } .entry-content { font-size: 17px; line-height: 1.8; } .entry-content h2 { font-size: 23px; margin: 36px 0 12px; } .entry-content h3 { font-size: 19px; margin: 26px 0 8px; } .entry-content ul, .entry-content ol { margin-left: 1.2em; } .entry-content blockquote { border-left: 4px solid var(--bcy-coral); background: var(--bcy-blush); margin: 22px 0; padding: 14px 18px; border-radius: 0 14px 14px 0; font-style: normal; } .rank-math-breadcrumb { font-size: 13px; color: var(--bcy-muted); margin-bottom: 6px; } .rank-math-breadcrumb a { color: var(--bcy-link); text-decoration: none; } /* Bảng: vuốt ngang trên điện thoại thay vì tràn màn hình */ .entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; border: 1px solid var(--bcy-line); border-radius: 14px; background: var(--bcy-surface); font-size: 15px; line-height: 1.45; } .entry-content th, .entry-content td { border: 0; border-top: 1px solid var(--bcy-line); padding: 10px 12px; text-align: left; vertical-align: top; } .entry-content tr:first-child th, .entry-content thead th { background: var(--bcy-soft); border-top: 0; } .bcy-disclosure { margin: 8px 0 20px; padding: 9px 13px; border-radius: 12px; background: var(--bcy-soft); color: var(--bcy-muted); font-size: 13px; line-height: 1.5; } .bcy-read { white-space: nowrap; } .bcy-author { margin-top: 40px; padding: 20px; border-radius: 22px; background: var(--bcy-blush); display: flex; gap: 16px; align-items: flex-start; } .bcy-author__avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bcy-surface); } .bcy-author__name { margin: 0; font-weight: 700; font-size: 18px; } .bcy-author__bio { margin: 4px 0 8px; font-size: 15px; line-height: 1.6; color: var(--bcy-muted); } /* ---------- Khối dùng trong bài (dán HTML class vào Classic Editor) ---------- */ /* Mẹo nhỏ:

Mẹo nhỏ của mình: …

*/ .bcy-tip { margin: 24px 0; padding: 16px 20px; border-radius: var(--bcy-radius); background: var(--bcy-soft); } .bcy-tip b, .bcy-tip strong { color: var(--bcy-link); } .bcy-tip p { margin: 0; } /* Món nhà mình dùng:

…

…
…

…

*/ .bcy-recap, .bcy-quick { margin: 28px 0; padding: 20px 22px; border-radius: 22px; background: var(--bcy-surface); border: 1.5px solid var(--bcy-line); } .bcy-recap__h, .bcy-quick__head { margin: 0 0 12px; font-weight: 700; font-size: 19px; color: var(--bcy-text); } .bcy-pick { padding: 4px 0 8px; display: flex; flex-direction: column; gap: 4px; } .bcy-pick__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bcy-link); margin: 0; } .bcy-pick__name { font-weight: 700; font-size: 18px; margin: 0; } .bcy-pick__why { font-size: 15px; color: var(--bcy-muted); line-height: 1.55; margin: 0; } .bcy-fit { display: grid; gap: 12px; margin: 8px 0 14px; } .bcy-yes, .bcy-no { margin: 12px 0; padding: 14px 16px; border-radius: 14px; font-size: 16px; line-height: 1.6; } .bcy-fit .bcy-yes, .bcy-fit .bcy-no { margin: 0; } .bcy-yes { background: color-mix(in srgb, var(--bcy-sage) 14%, transparent); } .bcy-no { background: color-mix(in srgb, var(--bcy-warn) 10%, transparent); } .bcy-yes > :first-child, .bcy-no > :first-child { margin: 0 0 4px; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; } .bcy-yes > :first-child { color: var(--bcy-sage); } .bcy-no > :first-child { color: var(--bcy-warn); } .bcy-yes ul, .bcy-no ul { margin: 0 0 0 1.1em; } .bcy-btn, .entry-content a.bcy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin: 6px 6px 0 0; padding: 0 20px; border-radius: 99px; background: var(--bcy-accent); color: var(--bcy-accent-ink); font-weight: 700; font-size: 15px; text-decoration: none; } .bcy-btn:hover { color: var(--bcy-accent-ink); filter: brightness(1.06); text-decoration: none; } .bcy-btn--ghost, .entry-content a.bcy-btn--ghost { background: transparent; color: var(--bcy-link); border: 1.5px solid var(--bcy-coral); } .bcy-btn--ghost:hover { color: var(--bcy-link); background: var(--bcy-blush); } .bcy-avoid { margin: 22px 0; padding: 14px 18px; border-left: 4px solid var(--bcy-warn); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--bcy-warn) 8%, transparent); } .bcy-avoid > :first-child { margin: 0 0 4px; font-weight: 700; color: var(--bcy-warn); } /* Ảnh thật:
…
— nhãn "Ảnh nhà mình" */ .bcy-photo-own { position: relative; padding: 8px; border: 2px dashed var(--bcy-coral); border-radius: var(--bcy-radius); background: var(--bcy-blush); } .bcy-photo-own::before { content: "ẢNH NHÀ MÌNH"; position: absolute; top: 16px; left: 16px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--bcy-accent); color: var(--bcy-accent-ink); font-size: 11.5px; font-weight: 700; } /* Ảnh AI:
…
— nhãn nhỏ "Ảnh minh họa" */ .bcy-photo-ai { position: relative; } .bcy-photo-ai::before { content: "Ảnh minh họa"; position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.88); color: #6E4A40; font-size: 11px; font-weight: 600; } .bcy-photo-ai:has(figcaption)::before { bottom: auto; top: 10px; } /* Khối chào đầu trang Giới thiệu: chữ trái, ảnh phải; điện thoại xếp ảnh lên trên.
…
…
*/ .bcy-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; margin: 8px 0 40px; padding: 28px; border: 1px solid var(--bcy-line); border-radius: calc(var(--bcy-radius) + 6px); background: linear-gradient(135deg, var(--bcy-surface) 0%, var(--bcy-soft) 100%); } .bcy-intro__text > :first-child { margin-top: 0; font-size: 1.4em; font-weight: 600; line-height: 1.35; } .bcy-intro__text > :first-child strong { font-family: var(--bcy-script); font-size: 1.25em; font-weight: 700; color: var(--bcy-link); white-space: nowrap; } .bcy-intro__text > :last-child { margin-bottom: 0; } .bcy-intro .bcy-photo-own { margin: 0; transform: rotate(1.5deg); box-shadow: 0 10px 24px -14px rgba(58, 46, 42, .45); } .bcy-intro .bcy-photo-own img { display: block; width: 100%; height: auto; border-radius: calc(var(--bcy-radius) - 6px); } @media (max-width: 680px) { .bcy-intro { grid-template-columns: 1fr; gap: 22px; padding: 20px; } .bcy-intro__text > :first-child { font-size: 1.25em; } .bcy-intro .bcy-photo-own { order: -1; max-width: 270px; margin: 0 auto; transform: none; } } /* ========================================================= TRANG CHỦ ========================================================= */ .home .site-content { display: block; } .bcy-home { max-width: var(--bcy-wide); margin: 0 auto; padding: 16px 16px 8px; } .bcy-home h2 { font-size: 22px; line-height: 1.3; margin: 0; font-weight: 800; } .bcy-home h2 em { font-style: normal; color: var(--bcy-link); } .bcy-home h3 { margin: 0; } .bcy-home a { text-decoration: none; } .bcy-sec { padding: 30px 0 0; } .bcy-sec__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .bcy-sec__h p { margin: 4px 0 0; color: var(--bcy-muted); font-size: 15.5px; max-width: 42em; } .bcy-more { color: var(--bcy-link); font-weight: 600; font-size: 15px; white-space: nowrap; } /* 1. Lời chào */ .bcy-hero { display: grid; position: relative; overflow: hidden; border-radius: 26px; background: radial-gradient(circle at 92% 12%, rgba(255,255,255,.7) 0 70px, transparent 71px), radial-gradient(ellipse 60% 70% at 78% 60%, color-mix(in srgb, var(--bcy-coral) 16%, transparent), transparent 70%), var(--bcy-blush); } .bcy-hero__photo { order: -1; position: relative; display: grid; place-items: center; padding: 30px 20px 26px; } .bcy-frame { position: relative; isolation: isolate; width: min(250px, 72%); aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; } .bcy-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid var(--bcy-coral); transform: translate(12px, 12px); } .bcy-frame::after { content: ""; position: absolute; z-index: -2; width: 70%; aspect-ratio: 1; left: -18%; bottom: -10%; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--bcy-coral) 30%, transparent) 1.4px, transparent 1.8px) 0 0 / 12px 12px; } .bcy-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; border-radius: inherit; border: 6px solid #fff; box-shadow: 0 22px 40px -22px rgba(140, 60, 40, .55); } .bcy-frame__badge { position: absolute; left: -16px; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 16px; background: var(--bcy-surface); box-shadow: 0 10px 24px -12px rgba(140, 60, 40, .45); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--bcy-text); } .bcy-frame__badge .bcy-ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--bcy-blush); color: var(--bcy-accent); } .bcy-frame__badge small { font-weight: 500; color: var(--bcy-muted); font-size: 12px; } .bcy-doodle--heart { width: 30px; height: 30px; top: 30px; right: 14%; transform: rotate(12deg); } .bcy-doodle--leaf { width: 34px; height: 52px; bottom: 18px; right: 12%; color: var(--bcy-sage); transform: rotate(14deg); } .bcy-hero__txt { padding: 24px 22px 26px; } .bcy-hero__h { font-size: 30px; line-height: 1.2; margin: 0 0 14px; font-weight: 800; } .bcy-hero__lead { font-size: 17px; line-height: 1.75; margin: 0 0 22px; } .bcy-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; } /* 2. Mẹ đang lo gì */ .bcy-worry { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: var(--bcy-surface); border: 1px solid var(--bcy-line); border-radius: 22px; padding: 16px; } .bcy-worry h2 { font-size: 19px; white-space: nowrap; } .bcy-worry__list { display: flex; gap: 10px; width: 100%; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; } .bcy-worry__list::-webkit-scrollbar { display: none; } .bcy-worry__list a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 16px; border-radius: 99px; background: var(--bcy-blush); color: var(--bcy-text); font-weight: 600; font-size: 15px; } .bcy-worry__list a:hover { background: var(--bcy-accent); color: var(--bcy-accent-ink); } .bcy-worry__ico { flex: none; width: 20px; height: 20px; color: var(--bcy-coral); } .bcy-worry__list a:hover .bcy-worry__ico { color: inherit; } /* 3. Chuyện nhà mình */ .bcy-story { margin-top: 30px; display: grid; overflow: hidden; background: var(--bcy-surface); border: 1px solid var(--bcy-line); border-radius: 26px; } .bcy-story__img { position: relative; display: grid; place-items: center; padding: 30px 24px 26px; color: #8A5A4C; background: radial-gradient(color-mix(in srgb, var(--bcy-coral) 22%, transparent) 1.3px, transparent 1.7px) 0 0 / 16px 16px, var(--bcy-blush); } .bcy-polaroid { position: relative; margin: 0; width: min(320px, 88%); padding: 10px 10px 0; background: #fff; border-radius: 6px; transform: rotate(-2.5deg); box-shadow: 0 18px 34px -18px rgba(110, 50, 35, .5), 0 2px 6px rgba(110, 50, 35, .08); } .bcy-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--bcy-coral) 35%, rgba(255,255,255,.6)); opacity: .8; border-radius: 3px; } .bcy-polaroid__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; display: grid; place-items: center; background: #F7EEE6; } .bcy-polaroid__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .bcy-polaroid figcaption { padding: 8px 4px 12px; text-align: center; font-family: var(--bcy-script); font-size: 22px; font-weight: 700; color: #B04A36; } .bcy-story__b { padding: 22px; } .bcy-story__h { margin: 0 0 10px !important; font-size: 22px !important; line-height: 1.35 !important; } .bcy-story__h a { color: var(--bcy-text); } .bcy-story__q { margin: 0 0 16px; color: var(--bcy-muted); font-size: 16.5px; line-height: 1.75; } .bcy-story__q::before { content: "“"; font-family: var(--bcy-script); font-size: 54px; line-height: 0; color: var(--bcy-coral); vertical-align: -22px; margin-right: 4px; } /* 4. Góc cô giáo */ .bcy-teacher { position: relative; margin-top: 30px; border-radius: 26px; padding: 22px 16px; background: radial-gradient(circle at 96% 6%, color-mix(in srgb, var(--bcy-sage) 16%, transparent) 0 90px, transparent 91px), var(--bcy-soft); } .bcy-teacher__h { display: grid; gap: 12px; margin-bottom: 18px; } .bcy-teacher__badge { width: 52px; height: 52px; border-radius: 50%; background: var(--bcy-surface); display: grid; place-items: center; color: var(--bcy-accent); } .bcy-teacher__badge svg { width: 30px; height: 30px; } .bcy-teacher__h p { margin: 4px 0 0; color: var(--bcy-muted); font-size: 15.5px; } .bcy-teacher__grid { display: grid; gap: 16px; } .bcy-tcard { display: flex; flex-direction: column; background: var(--bcy-surface); border-radius: var(--bcy-radius); overflow: hidden; color: var(--bcy-text); box-shadow: 0 12px 28px -22px rgba(120, 55, 40, .5); transition: transform .15s; } a.bcy-tcard:hover { transform: translateY(-3px); color: var(--bcy-text); } .bcy-tcard .bcy-ph { aspect-ratio: 16 / 10; border-radius: 0; } .bcy-tcard__b { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; } .bcy-tcard h3 { font-size: 17.5px; line-height: 1.4; } .bcy-tcard p { margin: 0; font-size: 14.5px; color: var(--bcy-muted); line-height: 1.6; } /* 5. Bài mới */ .bcy-posts { display: grid; gap: 26px; } .bcy-card { display: flex; flex-direction: column; gap: 8px; color: var(--bcy-text); } .bcy-card .bcy-ph { box-shadow: 0 14px 30px -20px rgba(120, 55, 40, .5); } .bcy-card:hover .bcy-ph img, .bcy-tcard:hover .bcy-ph img, .bcy-stage:hover .bcy-ph img { transform: scale(1.04); } .bcy-card .bcy-chip { align-self: flex-start; margin-top: 6px; } .bcy-card__t { font-size: 18px; line-height: 1.4; margin: 0; } .bcy-card:hover .bcy-card__t { color: var(--bcy-link); } .bcy-card__x { margin: 0; font-size: 15px; color: var(--bcy-muted); line-height: 1.6; } .bcy-meta { font-size: 13px; color: var(--bcy-muted); } /* 6. Giai đoạn */ .bcy-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bcy-stage { display: flex; flex-direction: column; overflow: hidden; background: var(--bcy-surface); border: 1px solid var(--bcy-line); border-radius: var(--bcy-radius); color: var(--bcy-text); transition: transform .15s; } .bcy-stage:hover { transform: translateY(-3px); color: var(--bcy-text); } .bcy-stage .bcy-ph { border-radius: 0; } .bcy-stage__b { padding: 12px 14px 14px; } .bcy-stage h3 { font-size: 17px; } .bcy-stage__age { color: var(--bcy-link); font-weight: 600; font-size: 14px; } .bcy-stage ul { display: none; list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; color: var(--bcy-muted); } .bcy-stage li { padding: 5px 0; border-top: 1px dashed var(--bcy-line); } .bcy-stage li::before { content: "›"; color: var(--bcy-coral); font-weight: 800; margin-right: 8px; } /* 7. Tiện ích */ .bcy-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bcy-tool { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--bcy-radius); background: var(--bcy-soft); color: var(--bcy-text); } .bcy-tool__ico { width: 46px; height: 46px; border-radius: 14px; background: var(--bcy-surface); display: grid; place-items: center; color: var(--bcy-accent); margin-bottom: 4px; } .bcy-tool__ico svg { width: 26px; height: 26px; } .bcy-tool h3 { font-size: 16px; line-height: 1.35; } .bcy-tool p { display: none; margin: 0; font-size: 14.5px; color: var(--bcy-muted); line-height: 1.55; flex: 1; } .bcy-tool .bcy-link { margin-top: 4px; font-size: 14.5px; } .bcy-tool--soon { opacity: .85; } /* 8. Đồ đã dùng */ .bcy-gear { margin-top: 30px; background: var(--bcy-surface); border: 1px solid var(--bcy-line); border-radius: 24px; padding: 20px 16px; } .bcy-gear .bcy-sec__h { margin-bottom: 14px; } .bcy-gear__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bcy-gear__item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--bcy-line); color: var(--bcy-text); } .bcy-gear__item:hover { background: var(--bcy-blush); border-color: transparent; color: var(--bcy-text); } .bcy-gear__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--bcy-blush); display: grid; place-items: center; color: var(--bcy-accent); } .bcy-gear__ico svg { width: 24px; height: 24px; } .bcy-gear__item b { display: block; font-size: 15.5px; } .bcy-gear__item small { font-size: 13px; color: var(--bcy-muted); } /* ---------- Dải lời chào cuối trang ---------- */ .bcy-band { margin-top: 48px; background: var(--bcy-blush); } .bcy-band__in { max-width: var(--bcy-wide); margin: 0 auto; padding: 32px 16px 26px; display: flex; align-items: center; justify-content: center; gap: 24px; } .bcy-band__txt { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .bcy-band__s { margin: 0; font-family: var(--bcy-script); font-weight: 700; font-size: 26px; line-height: 1.3; color: var(--bcy-accent); } .bcy-band__art { display: none; width: 220px; height: 170px; flex: 0 0 220px; color: var(--bcy-coral); } /* ---------- Danh sách bài (chuyên mục, tìm kiếm) ---------- */ .archive .inside-article, .search .inside-article, .blog .inside-article { max-width: var(--bcy-read); margin-left: auto; margin-right: auto; border-bottom: 1px solid var(--bcy-line); } .archive .entry-title, .search .entry-title, .blog .entry-title { font-size: 21px; } .archive .entry-title a, .search .entry-title a, .blog .entry-title a { color: var(--bcy-text); } .read-more, .read-more-container a { color: var(--bcy-link); font-weight: 600; } .paging-navigation a, .nav-links .page-numbers { color: var(--bcy-text); } /* ---------- Ô nhập, nút chung ---------- */ input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { background: var(--bcy-surface); color: var(--bcy-text); border-color: var(--bcy-line); border-radius: 12px; font-size: 16px; } button, input[type="submit"], .button, .wp-block-button__link { background: var(--bcy-accent); color: var(--bcy-accent-ink); border-radius: 99px; font-weight: 700; } button:hover, input[type="submit"]:hover, .button:hover { background: var(--bcy-accent); color: var(--bcy-accent-ink); filter: brightness(1.06); } .main-navigation .menu-toggle, .bcy-theme-toggle, .main-navigation .menu-toggle:hover { background: transparent; color: var(--bcy-text); filter: none; } /* ---------- Chân trang ---------- */ .site-footer, .site-info { background: var(--bcy-blush); color: var(--bcy-muted); border-top: 1px solid var(--bcy-line); } .inside-site-info { justify-content: flex-start; padding: 22px 16px 30px; max-width: var(--bcy-wide); } .copyright-bar { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; line-height: 1.6; text-align: left; } .bcy-foot-note { max-width: 600px; } .bcy-foot-nav { display: flex; flex-wrap: wrap; gap: 10px 20px; } .bcy-foot-nav a { color: var(--bcy-muted); text-decoration: none; } .bcy-foot-nav a:hover { color: var(--bcy-link); } /* ---------- Máy tính bảng / PC ---------- */ @media (min-width: 768px) { body { font-size: 18px; } .entry-content { font-size: 18px; } .entry-title { font-size: 36px; } .separate-containers .inside-article { padding: 32px 24px 48px; } .bcy-logo img { height: 54px; } .bcy-home { padding: 32px 24px 8px; } .bcy-home h2 { font-size: 26px; } .bcy-sec { padding-top: 44px; } .bcy-hero { grid-template-columns: 1.15fr .85fr; border-radius: 28px; } .bcy-hero__photo { order: 0; min-height: 460px; padding: 40px 48px 40px 20px; } .bcy-frame { width: min(330px, 86%); } .bcy-frame__badge { left: -40px; bottom: 40px; font-size: 14px; } .bcy-hero__txt { padding: 48px; align-self: center; } .bcy-hero__h { font-size: 42px; } .bcy-hero__lead { font-size: 18.5px; } .bcy-worry { padding: 18px 22px; } .bcy-worry__list { width: auto; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .bcy-story { grid-template-columns: .8fr 1.2fr; margin-top: 44px; } .bcy-story__img { min-height: 320px; } .bcy-story__b { padding: 34px 40px; } .bcy-story__h { font-size: 24px !important; } .bcy-teacher { margin-top: 44px; padding: 34px; } .bcy-teacher__h { grid-template-columns: auto 1fr; align-items: center; gap: 18px; } .bcy-teacher__badge { width: 64px; height: 64px; } .bcy-teacher__badge svg { width: 34px; height: 34px; } .bcy-teacher__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .bcy-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .bcy-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .bcy-stage__b { padding: 16px 18px 18px; } .bcy-stage h3 { font-size: 20px; } .bcy-stage ul { display: block; } .bcy-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .bcy-tool { padding: 20px; } .bcy-tool h3 { font-size: 17.5px; } .bcy-tool p { display: block; } .bcy-gear { margin-top: 44px; padding: 28px 30px; } .bcy-gear__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bcy-gear__item { flex-direction: row; align-items: center; gap: 12px; } .bcy-band { margin-top: 56px; } .bcy-band__in { justify-content: space-between; padding: 34px 24px 26px; } .bcy-band__txt { flex-direction: row; gap: 32px; text-align: left; flex-wrap: wrap; } .bcy-band__s { font-size: 34px; } .bcy-band__art { display: block; } .bcy-fit { grid-template-columns: 1fr 1fr; } .copyright-bar { flex-direction: row; justify-content: space-between; width: 100%; gap: 24px; } } @media (prefers-reduced-motion: reduce) { .bcy-stage, .bcy-tcard, .bcy-ph img { transition: none; } .bcy-stage:hover { transform: none; } }