:root { --primary: #3364db; --primary-2: #3874ff; --primary-soft: #f3f6ff; --text-dark: #222222; --text-heading: #444444; --text-muted: #6f8ba4; --gray-bg: #f4f9fc; --white: #ffffff; --radius: 12px; --shadow-card: 0 0 30px rgba(0, 42, 106, 0.1); --font-heading: "Be Vietnam Pro", sans-serif; --font-body: "Inter", sans-serif; /* ---- Thang cỡ chữ ---------------------------------------------------- Mọi cỡ chữ trong file này phải lấy từ 9 bậc dưới đây — không viết thẳng số rem vào từng rule nữa. Trước đây site có 26 cỡ chữ khác nhau, trong đó 5 cỡ chen nhau trong khoảng 13.6–15.2px mà mắt không phân biệt được; gom về một thang giúp các trang nhất quán và sửa một chỗ là đổi toàn site. Quy tắc dựng thang: mọi bậc đều chia hết cho 4, riêng 14px là ngoại lệ vì cần một bậc nằm giữa 12 và 16. Sàn là 12px (--fs-xs) và CHỈ dùng cho chú thích — chú thích ảnh, nguồn trích dẫn, số chú thích trong bài, dòng bản quyền. Chữ để đọc không bao giờ nhỏ hơn 14px, vì người xem site này phần nhiều là bệnh nhân lớn tuổi dùng điện thoại. Gốc 1rem = 16px, nên px ghi ở mỗi dòng là cỡ thật khi hiển thị. */ --fs-xs: 0.75rem; /* 12px — CHỈ chú thích, không dùng cho chữ đọc */ --fs-sm: 0.875rem; /* 14px — chữ nền mobile, nhãn, menu, nút, chân trang */ --fs-base: 1rem; /* 16px — chữ nền desktop, chữ trong bài viết */ --fs-lg: 1.25rem; /* 20px — h3, tiêu đề thẻ, đoạn dẫn */ --fs-xl: 1.5rem; /* 24px — tiêu đề thẻ nổi bật */ --fs-2xl: 1.75rem; /* 28px — h1 mobile, h2 tablet/mobile */ --fs-3xl: 2rem; /* 32px — h1 tablet */ --fs-4xl: 2.25rem; /* 36px — h2 desktop */ --fs-5xl: 2.5rem; /* 40px — h1 desktop */ /* Khoảng cách dọc của các trang phụ (blog, bài viết, dịch vụ). Sửa 4 số này là đổi nhịp cho toàn bộ trang phụ; số cho mobile nằm trong @media (max-width: 720px) ở cuối file. Trang chủ không dùng bộ này nên giữ nguyên nhịp cũ. */ --sub-section-y: 64px; /* đệm trên và dưới mỗi section */ --sub-hero-top: 140px; /* chừa chỗ cho header cố định phía trên */ --sub-hero-bottom: 40px; /* hở giữa phần mở đầu và nội dung đầu tiên */ --sub-title-gap: 44px; /* hở dưới cụm tiêu đề của section */ /* Hover phóng ảnh — xem phần "Component: hover phóng ảnh" bên dưới */ --img-zoom: 1.1; --img-zoom-speed: .45s; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ---- Hiệu ứng chuyển trang ------------------------------------------ Bấm từ trang này sang trang kia thì mờ dần thay vì nhảy giật một cái. Dùng View Transitions của trình duyệt nên không cần thư viện; trình duyệt nào chưa hỗ trợ thì trang vẫn chuyển bình thường như cũ. Mỗi loại trang vào một kiểu, đánh dấu bằng data-page trên thẻ : trang chủ mờ dần cho êm, trang dịch vụ phóng nhẹ cho có nhấn, bài viết trôi lên như lật sang trang đọc. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: chuyen-trang-ra .18s ease both; } ::view-transition-new(root) { animation: chuyen-trang-vao .28s ease both; } @keyframes chuyen-trang-ra { to { opacity: 0; } } @keyframes chuyen-trang-vao { from { opacity: 0; } } html[data-page="service"]::view-transition-new(root) { animation: chuyen-trang-phong .3s ease both; } @keyframes chuyen-trang-phong { from { opacity: 0; transform: scale(.985); } } html[data-page="article"]::view-transition-new(root) { animation: chuyen-trang-len .3s ease both; } @keyframes chuyen-trang-len { from { opacity: 0; transform: translateY(14px); } } /* Người bật giảm chuyển động trong hệ điều hành thì bỏ hết hiệu ứng. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Cỡ chữ nền của cả site khai báo DUY NHẤT ở đây: 16px trên desktop, 14px trên mobile (override trong @media (max-width: 720px) cuối file). Mọi đoạn chữ xám thường — mô tả trong thẻ, đoạn dẫn .lead, mô tả sự kiện — KHÔNG tự khai báo font-size mà để kế thừa từ body, nhờ vậy chỉ sửa một chỗ là đổi đồng thời mọi trang và không chỗ nào lệch nhau. Chỉ khai báo font-size khi cỡ chữ thật sự phải khác chữ nền: tiêu đề, nhãn, nút, menu, chân trang, chú thích ảnh. */ body { font-family: var(--font-body); color: var(--text-muted); background: var(--white); font-size: var(--fs-base); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* ─── Component: hover phóng ảnh ────────────────────────────────────── Rê chuột vào ảnh thì ảnh phóng to nhẹ. Đây là NƠI DUY NHẤT định nghĩa hiệu ứng này — đừng viết thêm "transform: scale" cho ảnh ở chỗ khác, nếu không mỗi chỗ sẽ trôi đi một kiểu. · Đổi mức phóng / tốc độ → sửa --img-zoom, --img-zoom-speed ở :root. · Thêm một chỗ ảnh mới → thêm tên class bọc ảnh vào 1 trong 2 danh sách dưới đây, không copy đoạn code này. Ảnh hero, logo và ảnh trong bài viết cố ý KHÔNG có trong danh sách nên không phóng: .hero-media, .article-hero-img, .article-inline-img, .brand, .lightbox-content. */ /* Nhóm 1 — ảnh nằm trong khung cắt sẵn: phóng bên trong khung, không tràn ra. */ :is(.offer-img, .event-img, .award-img, .shot-thumb) { overflow: hidden; & img { transition: transform var(--img-zoom-speed) ease; } &:hover img { transform: scale(var(--img-zoom)); } } /* Nhóm 2 — ảnh đứng riêng, tự có bo góc + đổ bóng: phóng cả tấm ảnh. */ :is(.cv-photo, .runner-media-featured, .runner-media-strip, .case-study, .content-media-single) { & img { transition: transform var(--img-zoom-speed) ease; } & img:hover { transform: scale(var(--img-zoom)); } } a { color: inherit; text-decoration: none; transition: color .2s ease; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-heading); font-weight: 700; line-height: 1.25; } h1 { font-size: var(--fs-5xl); letter-spacing: -0.5px; } h2 { font-size: var(--fs-4xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-base); } .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .section { padding: 40px 0; } .section-alt { background: var(--gray-bg); } .section-label { color: var(--primary); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .section-title { margin-bottom: 40px; } .text-center { text-align: center; } /* ---- Breadcrumb đầu trang phụ ---- site-header.js biến

đầu tiên trong .cv-hero thành thanh điều hướng này: icon nhà › Blog › mục hiện tại. Giữ đúng cỡ chữ và nhịp của .section-label để không xô lệch phần mở đầu trang. */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--primary); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .breadcrumb a { color: var(--text-muted); display: inline-flex; align-items: center; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { color: var(--text-muted); } .divider { width: 40px; height: 4px; background: var(--primary-2); border-radius: 2px; margin-top: 16px; } .mx-auto { margin-left: auto; margin-right: auto; } /* Đoạn dẫn xám mở đầu section — theo cỡ chữ nền, xem chú thích ở body. */ .lead { margin: 16px 0; } .lead-light { color: rgba(255,255,255,0.85); } .icon { width: 1.4em; height: 1.4em; } .icon-sm { width: 1em; height: 1em; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); padding: 14px 30px; border-radius: 50px; border: 2px solid transparent; cursor: pointer; transition: all .25s ease; } .btn-primary { background: var(--primary-2); color: #fff; } .btn-primary:hover { background: var(--primary); color: #fff; } .btn-outline { border-color: #d8e2ec; color: var(--text-heading); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-main { background: var(--primary); color: #fff; } .btn-main:hover { background: var(--primary-2); color: #fff; } .btn-sm { padding: 10px 20px; font-size: var(--fs-sm); } .btn-icon .icon { transition: transform .2s ease; } .btn-icon:hover .icon { transform: translateX(3px); } /* Header */ .site-header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(0,0,0,0.06); z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .brand-text { font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); font-size: var(--fs-base); } .site-nav { display: flex; align-items: center; gap: 8px; } .site-nav a { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--text-heading); padding: 10px 14px; border-radius: 8px; } .site-nav a:hover { color: var(--primary); } .nav-cta { background: var(--primary-2); color: #fff !important; border-radius: 50px !important; padding: 10px 22px !important; } .nav-cta:hover { background: var(--primary) !important; color: #fff !important; } .nav-dropdown { position: relative; } .nav-dropdown > a { display: flex; align-items: center; gap: 4px; } .nav-dropdown-arrow { transition: transform .15s ease; } .nav-dropdown:hover .nav-dropdown-arrow, .nav-dropdown:focus-within .nav-dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 8px; display: flex; flex-direction: column; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 20; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { padding: 10px 14px; border-radius: 8px; white-space: nowrap; } .nav-dropdown-menu a:hover { background: var(--primary-soft); color: var(--primary); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--text-heading); border-radius: 2px; } /* Hero */ .hero { padding: 160px 0 0; background: linear-gradient(180deg, var(--primary-soft) 0%, #ffffff 65%); overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-bottom: 64px; } .eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .mini-divider { width: 32px; height: 4px; background: var(--primary-2); border-radius: 2px; } .eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); } .hero-lead { margin: 20px 0 28px; max-width: 46ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-media { position: relative; display: flex; justify-content: center; } .hero-media img { border-radius: 24px; box-shadow: var(--shadow-card); position: relative; z-index: 1; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; object-fit: cover; } .hero-media-blob { position: absolute; width: 340px; height: 340px; background: var(--primary-2); opacity: 0.12; border-radius: 50%; top: 10%; right: 10%; filter: blur(10px); } .hero-media-overlay { display: none; } .feature-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } /* Services grid */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-item { background: #fff; border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow-card); } .service-item h4 { margin-bottom: 10px; } /* Offerings (3 services, right under hero) */ .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .offer-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; padding-bottom: 24px; display: flex; flex-direction: column; } .offer-img { aspect-ratio: 4 / 3; overflow: hidden; } .offer-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .offer-card h3 { padding: 0 22px; margin-top: 18px; font-size: var(--fs-lg); } .offer-card p { padding: 0 22px; margin-top: 8px; flex: 1; } /* Thẻ dịch vụ do service-cards.js dựng — dùng chung cho trang chủ và khối "Xem thêm" trong trang dịch vụ, nên hiệu ứng hover cũng chỉ khai báo ở đây. Phần ảnh phóng to do "Component: hover phóng ảnh" ở đầu file lo. */ .service-card { transition: box-shadow .25s ease; } .service-card:hover { box-shadow: 0 12px 34px rgba(0, 42, 106, 0.18); } /* Placeholder rỗng thì ẩn hẳn, đừng để chừa một dải trắng cao 192px giữa trang khi service-cards.js chưa chạy hoặc không nạp được. */ .service-related:empty { display: none; } /* Khối "Xem thêm" chỉ còn 2 thẻ nên thu lưới lại và căn giữa cho cân, thẻ vẫn rộng xấp xỉ ngoài trang chủ. */ .service-cards-related { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; } .offer-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px; margin-top: 16px; } /* Trong hero của trang dịch vụ thì không có padding thẻ để bù, nên bỏ padding đi cho nút thẳng hàng với h1 và đoạn mở đầu. */ .cv-hero .offer-actions { padding-left: 0; padding-right: 0; } /* Đoạn tiểu sử mở đầu trang hồ sơ. Giới hạn bề rộng dòng cho dễ đọc — chữ chạy hết chiều ngang container thì mắt khó bắt được đầu dòng sau. */ .cv-bio { max-width: 760px; margin-top: 20px; } .cv-bio p { color: var(--text-muted); line-height: 1.85; margin-bottom: 16px; } .cv-bio p.lead { font-size: var(--fs-lg); color: var(--text-heading); } .cv-bio p:last-child { margin-bottom: 0; } /* Event gallery (sub-pages) */ .events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .event-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; padding-bottom: 20px; position: relative; } /* Card dạng link — bấm được cả card, hover thì phóng ảnh. Dùng chung cho card bài viết ở blog và card "Bài viết khác". */ .event-card-link { display: flex; flex-direction: column; transition: box-shadow .25s ease; } .event-card-link p { flex: 1; } .event-card-link:hover { box-shadow: 0 12px 34px rgba(0, 42, 106, 0.18); } .event-card-link:hover .event-img img { transform: scale(1.1); } .event-card-link:hover .related-more { color: var(--primary-2); } .event-card-link:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .event-card-link:hover .event-img img { transform: none; } } .event-card-featured { border: 2px solid var(--primary-2); box-shadow: 0 12px 34px rgba(0, 42, 106, 0.2); } .event-badge { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--primary-2); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 42, 106, 0.25); } .event-img { aspect-ratio: 4 / 3; overflow: hidden; } .event-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; } .event-img-pending { display: flex; align-items: center; justify-content: center; background: var(--gray-bg); color: var(--text-muted); font-size: var(--fs-xs); border-bottom: 1px dashed #cdd8e6; } .event-card h4 { padding: 16px 18px 0; font-size: var(--fs-base); } .event-card p { padding: 8px 18px 0; } .content-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } .content-media-single img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: top; border-radius: var(--radius); box-shadow: var(--shadow-card); } @media (max-width: 720px) { .content-media-grid { grid-template-columns: 1fr; } } .events-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 24px; } .events-featured-grid .event-img { aspect-ratio: 16 / 10; } .events-featured-grid .event-badge { font-size: var(--fs-xs); padding: 6px 16px; } .events-featured-grid h4 { font-size: var(--fs-xl); padding: 22px 24px 0; } .events-featured-grid p { padding: 10px 24px 4px; } @media (max-width: 960px) { .events-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .events-featured-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .events-grid { grid-template-columns: 1fr; } } /* Experience cards */ .cards-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .cards-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 960px) { .cards-3col { grid-template-columns: 1fr; } } .info-card { background: #fff; border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-card); } .info-card h3 { color: var(--primary); margin-bottom: 20px; } .info-card h3 .icon { vertical-align: -0.15em; margin-right: 6px; } .cv-photo { max-width: 640px; margin: 0 auto 40px; text-align: center; } .cv-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); } .list-check { display: flex; flex-direction: column; gap: 12px; } .list-check li { position: relative; padding-left: 26px; font-size: var(--fs-base); color: var(--text-heading); } .list-check li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-soft); border: 2px solid var(--primary-2); } /* Runner */ .runner-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; } .runner-media-featured img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius); box-shadow: var(--shadow-card); } #runner .runner-media-featured img { aspect-ratio: 4 / 3; object-position: center 65%; } /* Ảnh bấm được để mở lightbox. Chỉ đổi con trỏ chuột — phần hover phóng ảnh do "Component: hover phóng ảnh" ở đầu file lo, đừng thêm transition ở đây nữa vì nó sẽ đè mất transition của component. */ main img.zoomable { cursor: zoom-in; } .runner-media-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .runner-media-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: var(--shadow-card); } /* Testimonials (original screenshots) — auto-scrolling marquee to avoid a dense wall of mismatched screenshots */ .shots-marquee { overflow: hidden; margin-bottom: 36px; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } /* Ở #stories marquee đứng cuối container, margin cộng vào padding section làm khoảng hở rộng hơn các section khác. Ở dieu-tri.html còn nội dung phía sau nên vẫn cần 36px — chỉ bỏ khi nó là phần tử cuối. */ .shots-marquee:last-child { margin-bottom: 0; } .shots-track { display: flex; width: max-content; animation: shots-marquee 45s linear infinite; } .shots-track:hover { animation-play-state: paused; } /* margin-right = gap giữa các thẻ, để chỗ nối giữa 2 bản sao rộng đúng bằng khoảng cách thường — vòng lặp liền mạch, không bị khựng một nhịp. Track gồm 2 bản sao + 2 margin nên translateX(-50%) vẫn khớp chính xác. */ .shots-grid { display: flex; gap: 20px; padding: 4px 0 20px; margin-right: 20px; } .shots-grid[aria-hidden="true"] { pointer-events: none; } @keyframes shots-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Chủ site muốn dải ảnh luôn chạy, kể cả khi hệ điều hành bật giảm chuyển động — nên cố ý KHÔNG tắt animation này trong prefers-reduced-motion. Ai muốn dừng để xem kỹ thì rê chuột vào (hover pause ở .shots-track). */ .shot-card { flex: 0 0 320px; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; cursor: zoom-in; transition: box-shadow .25s ease; } .shot-card:hover { box-shadow: 0 12px 34px rgba(0, 42, 106, 0.2); } .shot-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray-bg); } .shot-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } /* Hover phóng ảnh: xem "Component: hover phóng ảnh" ở đầu file. */ @media (max-width: 640px) { .shot-card { flex-basis: 240px; } /* margin-right theo gap — xem chú thích ở .shots-grid phía trên */ .shots-grid { gap: 14px; margin-right: 14px; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(8, 16, 30, 0.92); display: flex; align-items: center; justify-content: center; padding: 60px 90px; z-index: 200; opacity: 0; visibility: hidden; transition: opacity .25s ease; } .lightbox.open { opacity: 1; visibility: visible; } .lightbox-content { display: flex; flex-direction: column; align-items: center; max-width: 100%; } .lightbox-content img { max-width: min(820px, 84vw); max-height: 74vh; width: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); background: #fff; } .lightbox-content figcaption { color: rgba(255,255,255,0.9); margin-top: 18px; font-size: var(--fs-xs); text-align: center; max-width: 600px; } .lightbox-close, .lightbox-nav { position: absolute; background: rgba(255,255,255,0.1); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); } .lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } @media (max-width: 720px) { .lightbox { padding: 90px 16px 40px; } .lightbox-nav { width: 42px; height: 42px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-close { top: 14px; right: 14px; } } .case-study { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; background: var(--gray-bg); border-radius: 20px; padding: 32px; } .case-study img { border-radius: var(--radius); box-shadow: var(--shadow-card); } .case-study h3 { margin: 8px 0 12px; } /* Awards */ .awards-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 24px; } .award-featured { border: none; } .award-featured .award-img { height: 340px; } .award-featured figcaption { font-size: var(--fs-base); font-weight: 700; color: var(--primary); } .awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 560px; margin-left: auto; margin-right: auto; } /* ---- Nhịp dọc của trang phụ ---- Áp cho mọi trang có : blog, 3 bài viết và các trang dịch vụ. Trang chủ dài và nhiều ảnh lớn nên vẫn dùng nhịp cũ của .section; trang phụ ngắn, dày chữ hơn nên khoảng cách gọn lại. */ .subpage .section { padding: var(--sub-section-y) 0; } .subpage .section-title { margin-bottom: var(--sub-title-gap); } /* Phần mở đầu (nhãn + H1 + lead) thuộc về nội dung ngay dưới nó, nên hở xuống section kế tiếp hẹp hơn khoảng cách giữa 2 section thường. .cv-hero luôn đi cùng body.subpage — bỏ một trong hai thì phần đầu trang sẽ chui xuống dưới header cố định. */ .subpage .cv-hero { padding-top: var(--sub-hero-top); padding-bottom: var(--sub-hero-bottom); } /* Trang bài viết: ảnh mở đầu đi liền ngay dưới H1, không cần đệm trên */ .subpage .section-article { padding-top: 0; } /* Full CV sub-page */ .cv-awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } @media (max-width: 720px) { .cv-awards-grid { grid-template-columns: repeat(2, 1fr); } } .award-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .award-img { height: 110px; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .award-img img { height: 100%; width: 100%; object-fit: cover; } .cv-awards-grid .award-img { height: auto; aspect-ratio: 4 / 3; padding: 10px; } .cv-awards-grid .award-img img { object-fit: contain; } .award-card figcaption { padding: 14px 16px; font-size: var(--fs-xs); color: var(--text-heading); font-weight: 500; line-height: 1.5; } /* Blog article */ .article-hero-img { max-width: 780px; margin: 0 auto 40px; } .article-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); } /* Dòng tác giả đầu bài viết — blog-byline.js dựng ra từ data-ngay-dang trên thẻ . Bài về y tế thì người đọc cần biết ai viết và họ có chuyên môn gì, nên khối này nằm ngay dưới tiêu đề chứ không giấu ở cuối bài. */ .article-byline { display: flex; align-items: center; gap: 14px; margin-top: 24px; } .article-byline p { margin: 0; } .article-byline-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .article-byline-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-base); color: var(--text-heading); } .article-byline-name a { color: inherit; } .article-byline-name a:hover { color: var(--primary); } .article-byline-meta { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; } .article-body { max-width: 720px; margin: 0 auto; } .article-body p { font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted); margin-bottom: 22px; } .article-body p.lead { font-size: var(--fs-lg); color: var(--text-heading); } .article-body h3 { margin: 40px 0 16px; font-size: var(--fs-lg); } /* Danh sách trong bài viết cần khoảng cách dưới bằng đoạn văn, nếu không đoạn văn kế tiếp sẽ dính sát vào mục cuối cùng của danh sách. */ .article-body ul, .article-body ol { margin-bottom: 22px; } .article-body sup { font-size: var(--fs-xs); color: var(--primary-2); } .article-inline-img { margin: 36px 0; } .article-inline-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); } .article-inline-img figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; } .article-refs { max-width: 720px; margin: 44px auto 0; padding-top: 24px; border-top: 1px solid #e3ebf3; } .article-refs h4 { font-size: var(--fs-sm); color: var(--text-heading); margin-bottom: 12px; } .article-refs ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .article-refs li { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; } /* "Bài viết khác" cuối mỗi bài. Desktop dàn lưới 3 cột cho thấy hết; mobile (@media 720px cuối file) chuyển thành dải lướt ngang. Kiểu hover của thẻ nằm ở .event-card-link. */ .related-scroller { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 8px 0 14px; } /* Hiện tối đa 6 bài — từ bài thứ 7 trở đi ẩn, khỏi phải nhớ đếm khi thêm thẻ mới vào danh sách. */ .related-scroller > :nth-child(n + 7) { display: none; } .related-more { display: flex; align-items: center; gap: 6px; padding: 14px 18px 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--primary); } /* Press */ .press-list { display: flex; flex-direction: column; gap: 16px; } .press-list-spaced { margin-top: 32px; } /* CV link (points to the full sub-page) */ .cv-link-wrap { text-align: center; margin-top: 28px; } .cv-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--primary); } .cv-link:hover { color: var(--primary-2); } .cv-link .icon { transition: transform .2s ease; } .cv-link:hover .icon { transform: translateX(3px); } .press-item { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px 28px; } .press-item:hover { box-shadow: 0 8px 30px rgba(0, 42, 106, 0.18); } .press-source { font-family: var(--font-heading); font-weight: 700; color: var(--primary); font-size: var(--fs-sm); flex-shrink: 0; width: 170px; } .press-title { flex: 1; color: var(--text-heading); font-weight: 500; } .press-arrow { color: var(--primary-2); flex-shrink: 0; } /* Contact */ /* Footer. Nền đậm hơn --gray-bg một chút để tách hẳn khỏi các section xen kẽ dùng cùng màu nền xám. */ .site-footer { background: #e8f0f8; padding: 64px 0 0; } /* Footer trải hết chiều ngang màn hình thay vì gò theo bề rộng 1160px của .container — các cột rộng rãi hơn và còn chỗ thêm cột sau này. Trên mobile trả về lề 16px trong @media cuối file. */ .site-footer .container { max-width: none; padding: 0 48px; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-inner p { font-size: var(--fs-sm); } .footer-meta { color: var(--text-muted); } /* 6 cột: Thương hiệu · Địa chỉ · Giờ làm việc · Liên hệ · Dịch vụ · Đọc thêm. Hai cột cuối dựng từ SO_DO_TRANG trong site-footer.js — thêm cột ở đó thì sửa số cột tại đây. Cột thương hiệu và địa chỉ rộng hơn vì có logo và bản đồ. */ .footer-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand p { font-size: var(--fs-sm); margin-bottom: 20px; } .footer-col h4 { font-size: var(--fs-sm); color: var(--text-heading); margin-bottom: 16px; } .footer-col p { font-size: var(--fs-sm); display: flex; gap: 8px; } .footer-col p .icon { flex-shrink: 0; margin-top: 3px; color: var(--primary-2); } /* Bản đồ nhỏ dưới dòng địa chỉ — src dựng từ DIA_CHI trong site-footer.js */ .footer-map { margin-top: 14px; } .footer-map iframe { display: block; width: 100%; height: 140px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-card); } /* Danh sách liên kết trong hai cột Dịch vụ / Đọc thêm của .footer-grid */ .footer-sitemap-list { display: flex; flex-direction: column; gap: 8px; } .footer-sitemap-list a { font-size: var(--fs-sm); } .footer-sitemap-list a:hover { color: var(--primary); } .footer-hours { display: flex; flex-direction: column; gap: 10px; } /* Giờ nằm ngay dưới thứ, xếp dọc trong từng dòng */ .footer-hours li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); } .footer-hours li span:first-child { color: var(--text-heading); } .footer-link { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 12px; } .footer-link:hover { color: var(--primary); } .footer-link .icon { color: var(--primary-2); } .footer-bottom { border-top: 1px solid #e3ebf3; padding: 20px 0; text-align: center; } .footer-bottom p { font-size: var(--fs-xs); } /* 6 cột chỉ vừa trên màn rộng; hẹp dần thì giảm số cột để chữ không bị bó. */ @media (max-width: 1180px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; } } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* Sticky CTA (trang dịch vụ) — chỉ dùng trên mobile, xem @media bên dưới */ .sticky-cta { display: none; } /* Floating action stack: Zalo / Facebook / back-to-top */ /* The whole stack fades in together once the page has scrolled. */ .floating-actions { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 90; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; } .floating-actions.visible { opacity: 1; visibility: visible; transform: translateY(0); } .fab { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--text-dark); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 42, 106, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform .2s ease, box-shadow .2s ease, color .2s ease; } .fab:hover { color: var(--primary-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 42, 106, 0.24), 0 1px 3px rgba(0, 0, 0, 0.08); } /* Contact buttons carry the brand colour; back-to-top stays neutral white */ .fab-brand { background: var(--primary-2); color: #fff; } .fab-brand:hover { background: var(--primary); color: #fff; } /* Responsive */ @media (max-width: 960px) { h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } /* Desktop đã xuống 40px, chỉ còn cách mobile 8px nên không cần bậc trung gian cho .section nữa — chỉ hạ khoảng cách dưới tiêu đề */ .section-title { margin-bottom: 32px; } .hero { padding-top: 84px; } .hero-inner, .runner-grid { grid-template-columns: 1fr; } /* Hero collapses to a single stacking cell: image below, text on top */ .hero-inner { gap: 0; padding-bottom: 0; } .hero-media { grid-area: 1 / 1; margin: 0 -24px; width: calc(100% + 48px); } .hero-media img { border-radius: 0; max-width: none; } .hero-media-blob { display: none; } .hero-media-overlay { display: block; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 28%, rgba(0,0,0,0.3) 52%, transparent 72%); z-index: 2; } .hero-text { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; padding-bottom: 30px; } .eyebrow-row, .hero-lead { display: none; } .hero h1 { color: #fff; margin: 0 0 20px; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; } .hero .btn-outline { border-color: rgba(255,255,255,0.6); color: #fff; } .services-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); } .related-scroller { grid-template-columns: repeat(2, 1fr); } .cards-2col, .quotes-grid { grid-template-columns: 1fr; } .runner-media-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; } } @media (max-width: 720px) { /* Chữ nền trên điện thoại nhỏ hơn desktop một bậc: 16px -> 14px. Chỉ đổi ở đây là mọi chữ không tự khai font-size đều theo. Chữ trong bài viết (.article-body p) vẫn giữ 16px vì đó là chữ để đọc dài. */ body { font-size: var(--fs-sm); } h1 { font-size: var(--fs-2xl); } .header-inner { height: 58px; gap: 12px; } .brand { gap: 9px; min-width: 0; } .brand-mark { width: 34px; height: 34px; } .brand-text { font-size: var(--fs-sm); white-space: nowrap; } .header-inner .btn-sm { padding: 8px 14px; font-size: var(--fs-sm); white-space: nowrap; } .nav-toggle { display: flex; } .site-nav { position: absolute; top: 58px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 24px 24px; box-shadow: 0 12px 20px rgba(0,0,0,0.08); display: none; } .site-nav.open { display: flex; } .site-nav a { padding: 12px 0; } .nav-cta { text-align: center; margin-top: 8px; } .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 0 16px; min-width: 0; } .nav-dropdown-menu a { padding: 10px 0; } .hero { padding-top: 58px; } /* Stack: source + arrow share the top row, title gets a full row below. DOM order is source, title, arrow — so reorder to pull the arrow up. */ .press-item { flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 18px 20px; } .press-source { flex: 1; width: auto; order: 1; } .press-arrow { order: 2; } .press-title { flex: 0 0 100%; order: 3; min-width: 0; } /* "Bài viết khác" trên mobile: dải lướt ngang thay cho lưới desktop. Bleed to the screen edges so the next card peeks in, hinting the swipe. scroll-padding keeps the snap point inside the padding, so the resting card lines up with the heading instead of hugging the screen edge. */ .related-scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -24px; padding: 8px 24px 14px; scroll-padding-left: 24px; } .related-scroller::-webkit-scrollbar { height: 6px; } .related-scroller::-webkit-scrollbar-thumb { background: #cdd8e6; border-radius: 3px; } .related-scroller::-webkit-scrollbar-track { background: transparent; } .related-card { flex: 0 0 78%; scroll-snap-align: start; } .services-grid, .offer-grid { grid-template-columns: 1fr; } .awards-featured { grid-template-columns: 1fr; } .award-featured .award-img { height: 220px; } .awards-grid { grid-template-columns: repeat(2, 1fr); } /* Xếp dọc: ảnh trước/sau lên trên, chữ xuống dưới. Để 2 cột trên màn hình hẹp thì ảnh bị bóp còn một nửa, nhìn không ra mặt bệnh nhân. */ .case-study { grid-template-columns: 1fr; gap: 20px; padding: 20px; } } /* Mobile spacing — lề 2 bên cố định 16px, khoảng cách dọc gọn lại */ @media (max-width: 720px) { /* Nhịp dọc trang phụ trên mobile — xem chú thích ở :root đầu file */ :root { --sub-section-y: 32px; --sub-hero-top: 88px; --sub-hero-bottom: 20px; --sub-title-gap: 28px; } /* Lề 2 bên: mọi thứ cách mép màn hình đúng 16px */ .container { padding: 0 16px; } /* Footer full-width trên desktop dùng lề 48px — mobile về lại 16px */ .site-footer .container { padding: 0 16px; } .site-nav { padding: 12px 16px 24px; } .floating-actions { right: 16px; bottom: 16px; } /* Khoảng cách dọc giữa các section — 32px mỗi đầu, khoảng hở 64px */ .section { padding: 32px 0; } .section-title { margin-bottom: 28px; } /* Hero full-bleed: bleed phải khớp gutter 16px, không thì tràn ngang 8px/bên */ .hero-media { margin: 0 -16px; width: calc(100% + 32px); } /* h1 phủ trên ảnh: bleed ra sát mép rồi padding 16px, nếu chỉ để padding thì cộng dồn với 16px của .container thành 32px */ .hero h1 { margin: 0 -16px; padding: 0 16px 28px; } .hero-inner { gap: 0; padding-bottom: 0; } .hero-lead { margin: 16px 0 22px; } .lead { margin: 12px 0; } .cv-photo { margin-bottom: 24px; } /* Gap trong các lưới thẻ */ .services-grid, .offer-grid, .events-grid, .cards-2col, .cards-3col { gap: 16px; } .runner-grid { gap: 28px; } .events-featured-grid, .awards-featured { gap: 16px; margin-bottom: 16px; } .awards-grid, .cv-awards-grid { gap: 14px; } .cv-awards-grid { margin-top: 20px; } .press-list-spaced { margin-top: 20px; } /* Carousel tràn sát 2 mép, bỏ mask fade trắng mờ ở rìa */ .shots-marquee { margin: 0 -16px 24px; width: calc(100% + 32px); -webkit-mask-image: none; mask-image: none; } /* marquee đứng cuối #stories — margin thừa làm khoảng hở thành 88px */ .shots-marquee:last-child { margin-bottom: 0; } /* Padding trong thẻ — thẻ đã cách lề 16px nên ruột không cần dày */ .info-card { padding: 24px 20px; } .service-item { padding: 26px 20px; } .press-item { padding: 18px 20px; } .offer-card h3, .offer-card p, .offer-actions { padding-left: 18px; padding-right: 18px; } /* Footer */ .site-footer { padding-top: 44px; } .footer-grid { gap: 28px; padding-bottom: 28px; } /* Thanh CTA dính đáy màn hình */ .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); box-shadow: 0 -2px 16px rgba(0, 42, 106, 0.12); transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } body.sticky-cta-on .sticky-cta { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; } .sticky-cta .btn { display: flex; width: 100%; justify-content: center; } /* Stack FAB nổi ở góc phải phải nhường chỗ khi thanh CTA bật lên */ body.sticky-cta-on .floating-actions { bottom: calc(16px + 76px); } /* Chừa chỗ sẵn để thanh không đè lên footer khi nó hiện ở cuối trang */ body.has-sticky-cta .site-footer { padding-bottom: 76px; } }