/* ============================================================ PAGES - Component cho các trang con (multi-page) Dùng chung token màu/font khai báo ở css/style.css ============================================================ */ /* ============================================================ NAV - 2 mục trái · tên ở giữa · 2 mục phải Ghi đè phần nav trong style.css ============================================================ */ .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; position: relative; } /* Hai nhóm dàn đều trong nửa khung của mình, logo nằm chính giữa */ .nav__group { display: flex; align-items: center; justify-content: space-around; flex: 1; } .nav__right { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 16px; margin-left: 0; } .nav__link { font-size: 1rem; padding: 8px 14px; color: var(--text); font-weight: 500; border-radius: 8px; background: transparent; } /* Trang đang mở: gạch chân màu accent để người dùng nhận diện trang hiện tại */ .nav__link.is-active { background: transparent; color: var(--accent); } .nav__link.is-active::after { transform: scaleX(1); background: var(--accent); } /* Chỉ khi rê chuột mới hiện đồng thời nền xanh và gạch chân */ .nav__link:hover { background: var(--accent-soft); } .nav__link:hover::after, .nav__link.is-active:hover::after { transform: scaleX(1); } .nav__link::after { left: 14px; right: 14px; bottom: 4px; } /* Logo ở giữa: biểu tượng PTS + tên */ .nav__brand { display: flex; align-items: center; } .nav__logo { height: 50px; width: auto; display: block; transition: transform 0.3s var(--ease), filter 0.3s; } .nav__brand:hover .nav__logo { transform: scale(1.06); filter: brightness(1.12); } .nav__brand-text { font-family: var(--font-display); text-transform: uppercase; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.22em; color: var(--text); transition: color 0.25s; } .nav__brand:hover .nav__brand-text { color: var(--accent-2); } .btn--nav { padding: 8px 18px; font-size: 0.85rem; border: 1px solid var(--accent); color: var(--accent-2); border-radius: 999px; } .btn--nav:hover { background: var(--accent-soft); } /* Menu điện thoại: đầy đủ mọi trang */ .nav__mobile { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 90; display: flex; flex-direction: column; gap: 2px; padding: 14px; background: rgba(10, 11, 16, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-120%); visibility: hidden; transition: transform 0.35s var(--ease), visibility 0.35s; } .nav__mobile.is-open { transform: translateY(0); visibility: visible; } .nav__mobile .nav__link { padding: 13px 14px; border-radius: 10px; font-size: 0.95rem; } .nav__mobile .nav__link::after { display: none; } .nav__mobile .btn--nav { margin-top: 10px; align-self: flex-start; } @media (min-width: 861px) { .nav__mobile { display: none; } } @media (max-width: 860px) { .nav__group { display: none; } /* Ẩn 2 nhóm link thì lưới 3 cột bị dồn - chuyển sang flex: tên trái, nút phải */ .nav__inner { display: flex; justify-content: space-between; gap: 12px; } .nav__right { gap: 12px; } .nav__right .btn--nav { display: none; } .nav__logo { height: 34px; } } /* ---------- Footer 4 cột ---------- */ .footer { padding: 54px 0 26px; } .footer__grid { /* Cột thương hiệu lấy thêm phần của cột điều hướng: ở dải 862-900px nó chỉ còn 196px trong khi dòng "PHẠM MINH THẮNG" rộng 200px nên bị vỡ hai dòng, còn cột điều hướng thì thừa tới 36px */ display: grid; grid-template-columns: 1.6fr 0.9fr 1.3fr 1.4fr; gap: 40px; padding-bottom: 34px; } .footer__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-2); } .footer__role { color: var(--text); font-size: 0.88rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; } .footer__sub { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.01em; margin-top: 6px; } .footer__socials { display: flex; gap: 16px; margin-top: 16px; } .footer__socials a { color: var(--text); font-size: 0.88rem; transition: color 0.2s; } .footer__socials a:hover { color: var(--accent); } /* Tiêu đề cột chân trang - cùng quy tắc với tiêu đề khối: màu xanh */ .footer__h { font-family: var(--font-display); text-transform: uppercase; /* To gần bằng dòng tên (1.15rem). Phải co lại ở màn hẹp: để cứng 1.05rem thì "CASE STUDY NỔI BẬT" rộng 194px trong khi cột của nó chỉ còn 174px ở khổ 900px, vỡ thành hai dòng lệch hẳn với ba cột kia. */ font-size: clamp(0.86rem, 1.3vw, 1.05rem); letter-spacing: 0.06em; color: var(--accent-2); font-weight: 700; margin-bottom: 16px; } /* Riêng dải 862-1120px cột case study hẹp nhất so với chữ của nó - chỉ riêng co chữ vẫn vỡ hai dòng ở 862px, nên siết luôn độ giãn chữ */ @media (max-width: 1120px) { .footer__h { letter-spacing: 0.02em; } } .footer__col ul { display: grid; gap: 9px; } /* Cột case study: tên thương hiệu viết hoa cho dễ nhận ra */ .footer__col--work a { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; } .footer__col li, .footer__col a { color: var(--text); font-size: 0.9rem; transition: color 0.2s; } .footer__col a:hover { color: var(--accent); } .footer__bottom { border-top: 1px solid var(--border); padding-top: 20px; color: var(--text-muted); font-size: 0.85rem; text-align: center; } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } } /* ============================================================ PAGE HERO - đầu trang con ============================================================ */ .page-hero { padding: calc(var(--nav-h) + 62px) 0 46px; position: relative; z-index: 1; } .page-hero__title { font-family: var(--font-display); font-weight: 700; line-height: 1.1; font-size: clamp(2rem, 5vw, 3.05rem); margin: 10px 0 16px; /* Đè balance của h1,h2,h3 ở style.css: balance chia đều nên tiêu đề hai dòng bị bỏ dở giữa khung (675/619 ở trang Giới thiệu). pretty cho chạy gần kín rồi mới xuống dòng: 1028/266. Chỉ ảnh hưởng ba trang có tiêu đề hai dòng, bốn trang còn lại vốn đã một dòng. */ text-wrap: pretty; } .page-hero__lead { color: var(--text-muted); max-width: 68ch; font-size: 1.05rem; text-wrap: pretty; } /* Đoạn mô tả trang case study dài 190 ký tự, khung 68ch chỉ chứa nổi ~68 ký tự một dòng nên luôn tràn sang dòng thứ ba. Nới khung cho vế dài nhất (98 ký tự) nằm trọn một dòng, rồi tự ngắt ở giữa câu. */ .page-hero__lead--rong { max-width: none; } /* Nhiều đoạn lead liền nhau: .page-hero__lead không có margin nên để nguyên thì ba đoạn dính thành một khối. Không dùng balance ở đây: nó chia đều các dòng nên dòng đầu chỉ chạy nửa khung rồi xuống dòng. Để pretty (kế từ .page-hero__lead) cho chữ chạy hết bề ngang. */ .page-hero__lead--doan + .page-hero__lead--doan { margin-top: 13px; } /* Từ 1100px trở xuống mới cân dòng. Trên mức đó phải để chữ chạy hết bề ngang (1099px) theo đúng ý định; balance sẽ rút xuống còn 944px. Nhưng ở khổ hẹp hơn thì chạy hết lại bỏ đuôi cụt 78px và 97px. */ @media (max-width: 1100px) { .page-hero__lead--doan { text-wrap: balance; } } /* Ngắt ép chỉ đúng khi vế dài nhất (756px) còn nằm trọn một dòng. Hẹp hơn ~880px thì cả hai vế đều tràn, ra 4 dòng với hai cái đuôi lủn củn 50-58px. Dưới ngưỡng đó bỏ ngắt ép, để chữ tự xuống dòng. */ @media (max-width: 880px) { .page-hero__lead--rong br { display: none; } } /* Câu định vị ngay dưới tiêu đề - to và sáng hơn đoạn dẫn thường */ .page-hero__tagline { font-family: var(--font-display); color: var(--text); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.4; margin-bottom: 18px; max-width: 42ch; text-wrap: pretty; } .hl-growth { text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; color: var(--accent); } @supports (-webkit-background-clip: text) or (background-clip: text) { .hl-growth { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } } .page-hero--center { text-align: center; } .page-hero--center .page-hero__lead { margin-inline: auto; } .crumbs { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--text); } .crumbs a:hover { color: var(--accent); } .crumbs span { opacity: 0.5; } /* ============================================================ Ô CHỜ DỮ LIỆU - hai loại placeholder .ph = chỗ trống chờ ẢNH .tbd = chỗ trống chờ SỐ LIỆU ============================================================ */ .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 26px 18px; border: 2px dashed var(--border); border-radius: var(--radius); background: repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 12px, transparent 12px 24px); color: var(--text-muted); min-height: 190px; } .ph::before { content: "🖼"; font-size: 1.5rem; opacity: 0.55; } .ph__label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .ph__hint { font-size: 0.76rem; opacity: 0.75; max-width: 34ch; line-height: 1.45; } .ph--wide { aspect-ratio: 21/9; min-height: 220px; } .ph--thumb { aspect-ratio: 16/9; min-height: 0; border-radius: 0; border-width: 0 0 2px 0; } .ph--avatar { aspect-ratio: 1; border-radius: var(--radius); } .ph--16x9 { aspect-ratio: 16/9; min-height: 0; } .tbd { display: inline-block; padding: 1px 9px; border-radius: 6px; background: rgba(232, 200, 116, 0.12); border: 1px dashed rgba(232, 200, 116, 0.55); color: #e8c874; font-size: 0.82em; font-weight: 600; white-space: nowrap; } .tbd::before { content: "⌛ "; opacity: 0.8; } /* Bảng liệt kê dữ liệu còn thiếu ở cuối trang case study */ .datagap { border: 1px dashed rgba(232, 200, 116, 0.45); border-radius: var(--radius); background: rgba(232, 200, 116, 0.05); padding: 22px 24px; margin-top: 12px; } .datagap h3 { font-family: var(--font-display); font-size: 1rem; color: #e8c874; margin-bottom: 10px; } .datagap ul { display: grid; gap: 7px; } .datagap li { color: var(--text-muted); font-size: 0.9rem; padding-left: 18px; position: relative; } .datagap li::before { content: "▢"; position: absolute; left: 0; color: #e8c874; opacity: 0.7; } /* ============================================================ LƯỚI & THẺ CHUNG ============================================================ */ /* Đúng hai cột, không phải auto-fit: auto-fit với đáy 300px sẽ nhét được 3 cột ở bề ngang 1077px, khiến bốn thẻ xếp 3+1 lệch hàng */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } /* Chốt cứng 3 cột: auto-fit nhét được 4 cột trong khung 1120px nên sáu thẻ xếp thành 4+2 thay vì 3+3. Sáu thẻ chia hết cho cả 3, 2 và 1 nên chặng nào cũng đầy hàng. */ .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } @media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } } /* 4 -> 2 -> 1, không bao giờ 3: auto-fit với đáy 200px cho ra 3 cột ở khoảng 620-850px, bốn thẻ xếp 3+1 lệch hàng */ .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .card__title { font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 10px; } .card__text { color: var(--text-muted); font-size: 0.93rem; } /* Bỏ chặn 68ch: cột nội dung rộng 866px mà chữ chỉ chiếm 686px, thừa 180px bên phải nên nhìn như dồn về một góc. */ .prose { max-width: none; } .prose p { color: var(--text-muted); margin-bottom: 16px; } /* style.css chỉ bật pretty cho thẻ p, không cho li - nên gạch đầu dòng vẫn bỏ lại chữ lẻ ở dòng cuối (đo được 19px, đúng một chữ "họ"). */ .prose li { text-wrap: pretty; } /* Chỉ cân dòng khi màn hẹp. Ở khổ rộng phải để chữ chạy hết bề ngang cột (851-955px); balance chia đều nên rút dòng xuống còn 592-881px, trông lại như chữ bị dồn về một góc. Đổi lại là còn ba đoạn đuôi cụt 65-121px. */ @media (max-width: 1100px) { .prose p, .prose li { text-wrap: balance; } } /* Ô bảng hẹp nên dòng cuối hay chỉ còn một chữ: đo ở khổ 1000px ra đuôi 40px và 9px. balance chia đều thì hết. */ .ba td, .ba th { text-wrap: balance; } .prose h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 30px 0 12px; color: var(--text); } .prose ul { display: grid; gap: 10px; margin-bottom: 18px; } .prose li { color: var(--text-muted); padding-left: 20px; position: relative; } .prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* Danh sách các bước: số thứ tự 01, 02... thay cho chấm tròn */ .prose ol { list-style: none; display: grid; gap: 10px; margin-bottom: 18px; counter-reset: buoc; } .prose ol > li { counter-increment: buoc; padding-left: 36px; } .prose ol > li::before { content: counter(buoc, decimal-leading-zero); top: 1px; left: 0; width: auto; height: auto; background: none; border-radius: 0; color: var(--accent-2); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* Link đổi ngôn ngữ CV: nằm cạnh nút chính, nhỏ và nhạt để không tranh chú ý */ .cv-lang { align-self: center; font-size: 0.88rem; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .cv-lang:hover { color: var(--accent-2); border-color: var(--accent); } /* Khối tải CV nối liền ngay dưới phần Kinh nghiệm nên bỏ vạch ngăn giữa hai khối */ #cv.section::before { content: none; } /* Nhãn phụ trong tên vai trò trên dòng thời gian (ví dụ Part-time) */ .timeline__phu { font-weight: 500; font-size: 0.86em; color: var(--text-muted); } /* Ô chỉ số lẻ cuối lưới thì trải hết hàng cho khỏi trống một nửa */ .metrics > .metric:last-child:nth-child(odd) { grid-column: 1 / -1; } .prose strong { color: var(--text); font-weight: 600; } /* Ảnh minh họa có chú thích bên dưới */ .hinh { margin: 24px 0; } .hinh img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); } .hinh figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--text-muted); text-wrap: pretty; } .hinh a { display: block; } .hinh a img { transition: border-color 0.25s var(--ease); } .hinh a:hover img { border-color: var(--accent); } /* Hình dọc (sơ đồ khối): giữ đúng cỡ gốc, canh giữa cột cho khỏi bị kéo giãn */ .hinh--doc { max-width: 560px; margin-inline: auto; } .lead-lg { font-size: 1.15rem; color: var(--text); line-height: 1.7; max-width: 60ch; } /* ============================================================ /work/ - bộ lọc + lưới case ============================================================ */ .filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .chip { padding: 8px 18px; border-radius: 999px; font-size: 0.86rem; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all 0.25s var(--ease); } .chip:hover { border-color: var(--accent); color: var(--accent-2); } .chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); } .is-hidden { display: none !important; } .work-card { display: flex; flex-direction: column; position: relative; } .work-card .project__body { flex: 1; display: flex; flex-direction: column; } .work-card__metric { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .work-card__metric-l { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 14px; } .work-card__more { margin-top: auto; color: var(--text); font-weight: 600; font-size: 0.9rem; transition: color 0.2s; } .work-card__more::after { content: ""; position: absolute; inset: 0; z-index: 1; } .work-card a:not(.work-card__more), .work-card button { position: relative; z-index: 2; } .work-card:hover .work-card__more { color: var(--accent-2); } /* ============================================================ TRANG CASE STUDY ============================================================ */ /* Trang case study có 5 ô, trang AI Lab có 4. auto-fit cũ tự chia theo bề ngang nên hay rơi vào thế 4 cột cho 5 ô, bỏ ô cuối đứng lẻ loái một mình ở hàng dưới - đo được ở khổ 700 và 780px. Chốt số cột theo từng chặng thay vì để trình duyệt tự quyết. */ .summary-bar { /* auto chứ không phải 1fr: cột chia đều thì ô "Kênh" (liệt kê 5 sàn, dài 334px) chỉ được 183px nên luôn gãy hai dòng, kéo nhãn của nó lệch hẳn với bốn nhãn còn lại. auto cho mỗi cột lấy đủ bề ngang nội dung rồi mới chia đều chỗ thừa - tự điều chỉnh theo từng trang, không phải đặt cứng. */ display: grid; grid-template-columns: repeat(5, auto); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 34px 0 0; } .summary-bar:has(> :first-child:nth-last-child(4)) { grid-template-columns: repeat(4, auto); } /* Ô "Kênh" dài gấp đôi các ô kia nên luôn ăn hai dòng, kéo cả hàng cao lên 114px trong khi chữ ở bốn ô còn lại dính lên đỉnh, chừa 30px trống dưới đáy. Canh giữa theo chiều dọc thì chỗ trống chia đều trên dưới. */ .summary-bar__cell { background: var(--bg-alt); padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 1179px) { /* 5 ô xếp 3 cột: hàng hai là ô thứ 4 cộng ô thứ 5 trải rộng hai cột, không hở chỗ nào */ .summary-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .summary-bar > :first-child:nth-last-child(5) ~ :last-child { grid-column: span 2; } /* 4 ô thì 2 cột là đủ đầy hai hàng */ .summary-bar:has(> :first-child:nth-last-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .summary-bar, .summary-bar:has(> :first-child:nth-last-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary-bar > :first-child:nth-last-child(5) ~ :last-child { grid-column: 1 / -1; } } @media (max-width: 480px) { .summary-bar, .summary-bar:has(> :first-child:nth-last-child(4)) { grid-template-columns: 1fr; } } .summary-bar__k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 6px; } .summary-bar__v { font-weight: 600; font-size: 0.96rem; } .cs-layout { display: grid; grid-template-columns: 200px 1fr; gap: 54px; align-items: start; } .cs-toc { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 4px; } .cs-toc a { font-size: 0.85rem; color: var(--text); padding: 7px 12px; border-left: 2px solid var(--border); transition: all 0.2s; } .cs-toc a:hover { color: var(--accent-2); } .cs-toc a.is-active { color: var(--accent-2); border-left-color: var(--accent); background: var(--accent-soft); } .cs-block { padding-bottom: 46px; scroll-margin-top: calc(var(--nav-h) + 20px); } .cs-block__n { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); display: block; margin-bottom: 8px; } .cs-block__h { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 18px; } /* Bảng trước / sau */ .ba { width: 100%; border-collapse: collapse; margin: 6px 0 18px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ba th, .ba td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .ba thead th { background: var(--surface-2); font-family: var(--font-display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } .ba tbody tr:last-child td { border-bottom: none; } .ba td:first-child { color: var(--text); font-weight: 500; } .ba td { color: var(--text-muted); } .ba .is-after { color: var(--accent-2); font-weight: 700; } .ba-wrap { overflow-x: auto; } /* 3 số kết quả lớn */ .result-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 8px 0 22px; } /* Lưới kéo mọi ô cao bằng nhau, mà chữ lại dính lên đỉnh: ô nhãn ngắn chừa tới 85px trống dưới đáy trong khi ô nhãn dài chỉ còn 25px. Canh giữa theo chiều dọc thì chỗ trống chia đều trên dưới ở cả ba ô. */ .result-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; text-align: center; display: flex; flex-direction: column; justify-content: center; } /* 2.1rem cứng thì "50,6% → 20,1%" cần 246px trong ô chỉ rộng 233px, gãy thành hai dòng trong khi hai ô bên cạnh một dòng. Cho cỡ chữ co theo bề ngang để chuỗi dài nhất vẫn nằm trọn một dòng. */ .result-card__v { font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 700; line-height: 1.15; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* balance để nhãn không bỏ lại đuôi cụt - đo được 222/21 và 215/16 */ .result-card__l { color: var(--text-muted); font-size: 0.86rem; margin-top: 8px; text-wrap: balance; } /* Điều hướng sang case tiếp theo */ .next-case { display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 26px 30px; margin-top: 10px; transition: border-color 0.25s, transform 0.25s var(--ease); } .next-case:hover { border-color: var(--accent); transform: translateY(-3px); } .next-case__k { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); } .next-case__t { font-family: var(--font-display); font-size: 1.2rem; margin-top: 5px; } .next-case__arrow { color: var(--accent); font-size: 1.5rem; } @media (max-width: 900px) { .cs-layout { grid-template-columns: 1fr; gap: 26px; } .cs-toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .cs-toc a { border-left: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; } } /* ============================================================ /services/ ============================================================ */ .svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: border-color 0.3s, transform 0.3s var(--ease); /* Lưới kéo mọi thẻ cao bằng nhau, nhưng số chip mỗi thẻ khác nhau nên khối chip cao 74px ở thẻ này, 115px ở thẻ kia, đứng lệch hẳn nhau. Đẩy chúng xuống sát đáy thì mép dưới luôn thẳng hàng. */ display: flex; flex-direction: column; } .svc-card:hover { border-color: var(--accent); transform: translateY(-5px); } .svc-card__n { font-family: var(--font-display); font-size: 0.8rem; color: var(--text); letter-spacing: 0.1em; } .svc-card__t { font-family: var(--font-display); font-size: 1.2rem; margin: 8px 0 12px; } .svc-card__d { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 16px; } .svc-card ul { display: grid; gap: 8px; } /* Mỗi nhóm kỹ năng phải chỉ được sang chỗ chứng minh nó, giống bảng năng lực ở /kinh-nghiem/ và bốn khối ở trang chủ */ .svc-card__tags { display: flex; flex-wrap: wrap; gap: 8px; /* auto để đẩy chip xuống đáy thẻ; dùng padding thay margin 16px cũ vì để cả hai cùng là margin-top thì khai báo sau đè mất auto */ margin-top: auto; padding-top: 16px; } .svc-card__proof { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text); transition: color 0.2s var(--ease); } .svc-card__proof:hover { color: var(--accent-2); } .svc-card li { color: var(--text-muted); font-size: 0.88rem; padding-left: 18px; position: relative; } .svc-card li::before { content: "→"; position: absolute; left: 0; color: var(--accent); } .process { /* 4 -> 2 -> 1 như .grid-4, tránh 3+1 ở khoảng 760-970px */ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; } @media (max-width: 980px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .process { grid-template-columns: 1fr; } } .process__item { position: relative; padding-top: 46px; } .process__item::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--accent); opacity: 0.5; } .process__t { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; } .process__d { color: var(--text-muted); font-size: 0.9rem; } .fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .fit__col { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--surface); } .fit__col--yes { border-color: rgba(22, 194, 132, 0.4); } .fit__h { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 14px; } .fit__col--yes .fit__h { color: var(--text); } .fit__col ul { display: grid; gap: 10px; } .fit__col li { color: var(--text-muted); font-size: 0.91rem; padding-left: 22px; position: relative; } .fit__col--yes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .fit__col--no li::before { content: "✕"; position: absolute; left: 0; color: var(--text-muted); } /* ============================================================ /experience/ ============================================================ */ .skill-matrix { display: grid; gap: 14px; } .skill-row { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; } .skill-row__t { font-family: var(--font-display); font-size: 1.02rem; } .skill-row__proof { font-size: 0.8rem; color: var(--text); margin-top: 6px; display: block; transition: color 0.2s; } .skill-row__proof:hover { color: var(--accent-2); } .skill-row__tags { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 700px) { .skill-row { grid-template-columns: 1fr; gap: 12px; } } .cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .cv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.3s, transform 0.3s var(--ease); display: block; } .cv-card:hover { border-color: var(--accent); transform: translateY(-4px); } .cv-card__k { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text); } .cv-card__t { font-family: var(--font-display); font-size: 1.05rem; margin: 7px 0 8px; } .cv-card__d { color: var(--text-muted); font-size: 0.85rem; } /* ============================================================ /brands/ ============================================================ */ .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 20px; } .brand-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; text-align: center; transition: border-color 0.3s, transform 0.3s var(--ease); } .brand-card:hover { border-color: var(--accent); transform: translateY(-4px); } .brand-card__img { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #fff; margin: 0 auto 14px; border: 1px solid var(--border); } .brand-card__img img { width: 100%; height: 100%; object-fit: cover; } /* Thương hiệu chưa có logo: hiện chữ viết tắt trong vòng tròn viền đứt */ .brand-card__img--ph { background: var(--surface-2); border: 2px dashed var(--border); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; } .brand-card__t { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; color: var(--text); line-height: 1.25; letter-spacing: -0.01em; } .brand-card__c { color: var(--text-muted); font-size: 0.85rem; margin-top: 7px; } /* ============================================================ /contact/ ============================================================ */ .contact-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; gap: 34px; } } .form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } .field input, .field textarea, .field select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; color: var(--text); font-family: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color 0.2s; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 0.65; } .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field textarea { min-height: 130px; resize: vertical; } .form__note { font-size: 0.82rem; color: var(--text-muted); } /* Ô bẫy bot: đẩy ra ngoài màn hình thay vì display:none, vì một số bot bỏ qua ô bị ẩn hẳn nhưng vẫn điền ô nằm ngoài tầm nhìn */ .field-bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__trang-thai { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--text); border: 1px solid var(--border); } .form__trang-thai.is-ok { border-color: var(--accent); background: var(--accent-soft); } .form__trang-thai.is-loi { border-color: #d9534f; background: rgba(217, 83, 79, 0.1); } .form button[type="submit"][disabled] { opacity: 0.6; transform: none; } .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .contact-list { display: grid; gap: 16px; margin-top: 6px; } .contact-list a, .contact-list span { display: block; } .contact-list__k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .contact-list__v { font-weight: 600; margin-top: 3px; } /* Danh sách vị trí trong thẻ Định hướng: nhiều dòng nên nhẹ chữ lại cho dễ đọc */ .contact-list__v--vaitro { font-weight: 500; font-size: 0.94rem; line-height: 1.55; } .contact-list a:hover .contact-list__v { color: var(--accent); } .faq { display: grid; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; } .faq summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.2rem; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq p { color: var(--text-muted); font-size: 0.9rem; margin-top: 12px; } /* ============================================================ CTA cuối trang ============================================================ */ .cta-band { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, rgba(22,194,132,0.09), transparent 65%), var(--surface); padding: 48px 40px; text-align: center; } @media (max-width: 600px) { .cta-band { padding: 36px 20px; } } /* Biến thể hai cột: chữ trái, ảnh phải. Cột chữ chặn bề ngang ở 680px - đủ cho vế dài nhất (636px) - rồi dồn cả cụm vào giữa. Để cột là 1fr thì nó nớ ra 747px trong khi chữ chỉ chiếm 636px, phần thừa dồn hết thành khoảng trống giữa hai cột. */ .cta-band--doi { display: grid; grid-template-columns: minmax(0, 680px) auto; justify-content: center; gap: clamp(20px, 2.2vw, 34px); align-items: center; text-align: left; } .cta-band--doi .cta-band__d, .cta-band--doi .cta-band__roles { margin-left: 0; margin-right: 0; } .cta-band__anh { display: block; width: 240px; height: auto; } .cta-band__t { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 12px; } .cta-band__t--caps { text-transform: uppercase; letter-spacing: 0.02em; } .cta-band__d { color: var(--text-muted); max-width: 80ch; margin: 0 auto 26px; text-wrap: pretty; } /* Ngắt ép ở chỗ hết câu, không thì chữ tự xuống dòng giữa câu thứ hai cho ra 713/392 lệch hẳn. Vế dài nhất đo được 636px, mà cột chữ chỉ còn 553px ở màn 990px - lúc đó ngắt ép đẩy thành 3 dòng với đuôi cụt 105px. Cột chỉ còn đủ rộng từ khoảng 1080px trở lên, lấy 1140px cho dư một nhịp rồi bỏ ngắt, để chữ tự xuống dòng. */ @media (max-width: 1139px) { .cta-band__d--2dong br { display: none; } } /* Dưới 860px xếp dọc, ảnh xuống dưới và thu nhỏ - cột chữ lúc đó đã chiếm hết bề ngang, để ảnh bên cạnh thì chữ chỉ còn hơn trăm pixel */ @media (max-width: 860px) { .cta-band--doi { grid-template-columns: 1fr; text-align: center; } .cta-band--doi .cta-band__d, .cta-band--doi .cta-band__roles { margin-left: auto; margin-right: auto; } .cta-band__anh { width: 170px; margin: 18px auto 0; order: 2; } } /* Dãy vị trí đang mở, viết liền một dòng ngăn bằng dấu chấm giữa - giống dòng "Performance · E-commerce · Growth" ở đầu trang */ .cta-band__roles { /* Không giới hạn bề ngang: năm chức danh nối liền cần 963px, khung trong khối rộng 1040px. Để 96ch (833px) là ép xuống hai dòng. Cỡ 0,8rem lấy đúng cỡ thẻ tag của site, ở 0,86rem chỉ dư 2px */ margin: 0 auto 26px; font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.01em; } .cta-band__roles span { opacity: 0.45; margin: 0 1px; } /* Dòng dài nhất cần 431px, lòng khối bằng bề ngang màn hình trừ 140px. Hẹp hơn ~620px thì dòng ép tự tràn tiếp, ra 4 dòng với mẩu cụt 95px - đo ở 500px. Dưới ngưỡng đó bỏ ngắt ép cho chữ tự chia. */ @media (max-width: 620px) { .cta-band__roles br { display: none; } } /* Ngắt dòng chủ động trong câu chữ - tự tắt trên màn hình hẹp để câu không bị gãy giữa chừng */ @media (max-width: 700px) { br.br-wide { display: none; } } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .nowrap { white-space: nowrap; } /* ============================================================ NÚT LÊN ĐẦU TRANG z-index cao hơn lớp hạt phim và lớp tối góc, nếu không nút sẽ bị hai lớp đó phủ mờ đúng ở góc phải dưới ============================================================ */ .to-top { position: fixed; right: 28px; bottom: 28px; z-index: 9999; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, border-color 0.25s, background 0.25s, color 0.25s; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); transform: translateY(-3px); } .to-top svg { width: 18px; height: 18px; fill: currentColor; display: block; } @media (max-width: 520px) { .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } } /* ============================================================ BANNER ĐỒNG Ý COOKIE (Google Analytics) Góc trái dưới để không đè nút lên đầu trang ở góc phải. z-index cao hơn lớp hạt phim (9998), nếu không banner bị phủ mờ. ============================================================ */ .dong-y { position: fixed; left: 24px; bottom: 24px; z-index: 10000; width: min(420px, calc(100% - 48px)); padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(14px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .dong-y.is-hien { opacity: 1; transform: none; } .dong-y__chu { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); } /* Hai nút ngang nhau, không nút nào bị làm mờ đi để dụ bấm "Đồng ý" */ .dong-y__nut { display: flex; gap: 10px; justify-content: flex-end; } .dong-y__nut .btn { padding: 9px 20px; font-size: 0.88rem; } .dong-y__nut .btn:hover { transform: none; } /* Đang hỏi thì cất nút lên đầu trang, trên điện thoại hai thứ sẽ chồng nhau */ .dang-hoi-cookie .to-top { opacity: 0; visibility: hidden; } @media (max-width: 520px) { .dong-y { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; } .dong-y__nut .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .dong-y { transition: none; } } /* Nút "Cài đặt cookie" dưới chân trang: trông như chữ thường */ .footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .footer__cookie:hover { color: var(--accent); } /* ============================================================ GROWTH ENGINE - bốn mắt xích, mỗi mắt xích một biểu đồ riêng ============================================================ */ /* Bố cục hai cột: ảnh chỉ tay bên trái, bốn khối xếp 2x2 bên phải */ .skills { display: grid; /* Tỉ lệ cột lấy theo đúng khung người trong ảnh (553x566, gần vuông) chứ không chia đều - chia đều thì ảnh bị hụt hoặc thừa hai bên */ grid-template-columns: minmax(0, 0.97fr) minmax(0, 1.3fr); gap: clamp(24px, 3.4vw, 52px); /* Bốn khối kéo cao bằng ảnh chứ không thu ảnh lại: bỏ biểu đồ xong khối chỉ còn 364px trong khi ảnh cao 471px, để căn giữa thì ảnh lấn át hẳn cột bên phải */ align-items: stretch; position: relative; /* mốc neo cho lớp phủ mũi tên */ } .skills__photo { margin: 0; display: flex; align-items: center; } /* ---------- Mũi tên nét đứt vẽ tay, từ tay chỉ vòng sang bốn khối ---------- Nét đứt mà lại phải hiện dần thì không dùng được cách kéo dashoffset thông thường, vì dashoffset đang phải giữ hình nét đứt. Cách làm: một đường liền vô hình quét dọc theo đúng lộ trình, dùng làm mặt nạ cho đường nét đứt bên dưới - nét nào mặt nạ quét tới thì nét đó hiện ra. */ .skills__ve { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Lớp phủ không được trượt lên như các khối khác, chỉ mượn .reveal để biết lúc nào vào tầm nhìn */ .skills__ve.reveal { opacity: 1; transform: none; transition: none; } /* Mỗi nét đứt là một thẻ path riêng, hiện lần lượt theo thứ tự dọc đường. Trước đây dùng một đường liền làm mặt nạ quét cho cả hình, nhưng vệt quét dày 30px nên khi đi qua chỗ hai nhánh cắt nhau nó phủ luôn sang nhánh kia, làm nhánh chưa tới lượt hiện sớm ra hai phía. */ .ve__net, .ve__mui { opacity: 0; } .skills__ve.is-visible .ve__net, .skills__ve.is-visible .ve__mui { animation: netHien 8s linear infinite; } /* Mỗi nét tự tắt trong chu kỳ của chính nó, không nhờ cả hình mờ đi. Trước đây để cả hình lo phần xoá thì vòng lặp hỏng: animation-delay dời cả chu kỳ của từng nét, nên nét thứ i chỉ tắt ở i×0,11 + chu kỳ. Lúc hình sáng lại thì 22/23 nét vẫn bật từ vòng trước - mũi tên hiện ra đã vẽ sẵn rồi nhấp nháy từng nét thay vì vẽ lại từ đầu. Mốc tắt 66% phải nhỏ hơn (1 - 2,53s/8s) = 68%, để nét cuối cùng - nét trễ nhất - vẫn kịp tắt trước khi vòng mới bắt đầu. */ @keyframes netHien { 0% { opacity: 0; } 1.5% { opacity: 1; } 62% { opacity: 1; } 66%, 100% { opacity: 0; } } /* Xếp dọc thì không còn khoảng giữa tay và khối để mũi tên đi qua */ @media (max-width: 1120px) { .skills__ve { display: none; } } @media (prefers-reduced-motion: reduce) { .skills__ve .ve__net, .skills__ve .ve__hinh, .skills__ve .ve__mui { animation: none; opacity: 1; } } .skills__img { display: block; width: 100%; height: auto; } .engine { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; gap: 18px; position: relative; } /* Khung lưới mang lớp reveal chỉ để biết lúc nào vào tầm nhìn, không tự mờ hay trượt - việc đó để từng thẻ con lo */ .engine.reveal { opacity: 1; transform: none; transition: none; } .engine__step { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px 24px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.5s var(--ease); } .engine__step:hover { border-color: var(--accent); transform: translateY(-4px); } .engine__step.reveal:nth-child(1) { transition-delay: 0ms; } .engine__step.reveal:nth-child(2) { transition-delay: 100ms; } .engine__step.reveal:nth-child(3) { transition-delay: 200ms; } .engine__step.reveal:nth-child(4) { transition-delay: 300ms; } .engine__step.is-visible { transition-delay: 0ms !important; } /* ---------- Viền sáng chạy quanh cả bốn khối ---------- */ .engine__step { overflow: hidden; } .engine__step::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(transparent 0 80%, rgba(79, 224, 166, 0.85) 90%, transparent 97%); animation: quayVien 6s linear infinite; } /* Lớp nền che phần giữa, chỉ chừa lại viền mảnh 1px */ .engine__step::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: calc(var(--radius) - 1px); background: var(--surface); } .engine__step > * { position: relative; z-index: 1; } @keyframes quayVien { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .engine__step::before { animation: none; opacity: 0.3; } } .engine__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .engine__name { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin: 0; } /* Huy hiệu thành tựu ở góc trên phải, để mờ cho khỏi tranh chỗ với con số */ .engine__icon { flex: none; width: 34px; height: 34px; margin: -3px -2px 0 0; color: #fff; opacity: 0.45; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .engine__step:hover .engine__icon { opacity: 1; transform: scale(1.08) rotate(-4deg); } /* Nhãn nằm trên một dòng riêng, con số nằm dưới. Trước đây nhãn và số cùng một dòng và khoá white-space: nowrap, nên thẻ Scale có nhãn dài "Marketing Cost / Revenue" bị tràn khỏi khối và cắt cụt mất chữ. Tách hai dòng thì nhãn dài mấy cũng đủ chỗ, đồng thời con số được đứng một mình nên bật hẳn lên. */ .engine__stat { font-family: var(--font-display); font-weight: 700; line-height: 1.15; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -0.01em; color: var(--accent-2); /* Lề trên tự động: chỗ trống dôi ra chia đều cho khoảng trên và dưới, khối không bị hẫng một mảng ở giữa */ margin: auto 0 22px; } .engine__k { display: block; margin-bottom: 5px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); white-space: normal; text-wrap: balance; } .engine__proof { margin-top: auto; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); transition: color 0.2s; } .engine__proof:hover { color: var(--accent-2); } /* Xếp dọc sớm hơn (1120px thay vì 900px): hẹp hơn mức đó thì khối chỉ còn ~174px lòng trong, không đủ chỗ cho "Doanh thu / tháng: 400tr" trên một dòng. Xếp dọc thì khối rộng gấp đôi nên thoải mái. */ @media (max-width: 1120px) { .skills { grid-template-columns: 1fr; gap: 28px; } .skills__photo { max-width: 400px; margin: 0 auto; } .engine { gap: 16px; } } @media (max-width: 560px) { .engine { grid-template-columns: 1fr; grid-template-rows: auto; } } /* ============================================================ MỤC LỤC DẤU CHẤM BÊN PHẢI ============================================================ */ .dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; } .dots__item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0; } .dots__mark { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid var(--text-muted); opacity: 0.55; flex: 0 0 auto; transition: all 0.28s var(--ease); } .dots__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text); white-space: nowrap; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; opacity: 0; transform: translateX(6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; } .dots__item:hover .dots__label, .dots__item:focus-visible .dots__label { opacity: 1; transform: none; } .dots__item:hover .dots__mark { opacity: 1; border-color: var(--accent); transform: scale(1.25); } .dots__item.is-active .dots__mark { opacity: 1; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(22, 194, 132, 0.16); } /* Màn hình hẹp không đủ chỗ, ẩn đi cho khỏi che nội dung */ @media (max-width: 1100px) { .dots { display: none; } } @media (prefers-reduced-motion: reduce) { .dots__mark, .dots__label { transition: none; } } /* ============================================================ ẢNH HERO DẠNG CẮT NỀN - đứng tự do, không khung ============================================================ */ .hero__photo--cutout { position: relative; display: grid; place-items: end center; } .hero__cutout { position: relative; z-index: 1; height: min(62vh, 520px); width: auto; display: block; } /* Vầng sáng sau lưng, giữ lại từ bản cũ nhưng đặt thấp và rộng hơn */ .hero__photo--cutout .hero__blob { position: absolute; z-index: 0; left: 50%; bottom: 4%; translate: -50% 0; width: min(78%, 400px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22, 194, 132, 0.30), transparent 68%); filter: blur(46px); } @media (max-width: 860px) { .hero__cutout { height: min(42vh, 340px); } } /* ---------- Chỉ số tỏa ra từ nhân vật ở hero ---------- Khung giới hạn đúng trong cột ảnh và cắt phần tràn, nên chip không bao giờ lấn sang cột chữ bên trái */ /* ---------- Bóng thoại truyện tranh cạnh đầu ---------- 12 bóng xếp chồng cùng một điểm neo, mỗi bóng sáng 1,5s trong chu kỳ 18s. Thuần CSS - không cần setInterval chạy nền suốt thời gian mở trang. */ .hero__bubble { /* Đo khoảng cách đuôi bóng tới bóng người ở từng mốc: 68% ra 78px, 64% ra 60px, 59% ra khoảng 40px. Lấy 59% cho sát đầu. Chỉ nâng tới -1%: ở -4% còn 14px hở dưới thanh menu, mà bóng lúc bung ra to thêm 1,12 lần là đụng. */ position: absolute; left: 59%; top: -1%; width: 0; height: 0; /* chỉ là điểm neo, không chiếm chỗ */ z-index: 3; pointer-events: none; } .hero__bubble b { position: absolute; left: 0; bottom: 0; /* neo góc dưới-trái = chân bóng đứng yên, nên bóng dài ngắn khác nhau vẫn chỉ đúng vào một chỗ */ white-space: nowrap; font-family: "Bangers", var(--font-display), cursive; font-size: clamp(1.05rem, 1.5vw, 1.45rem); font-weight: 400; letter-spacing: 0.07em; color: #14201a; background: #fff; border: 3px solid #0c1512; border-radius: 20px; padding: 7px 18px 5px; box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.55); transform-origin: 18px 100%; /* bung ra từ chân bóng */ opacity: 0; animation: bongThoai 18s linear infinite; } /* Đuôi bóng chỉa xuống-trái về phía mặt: tam giác sẫm làm viền, tam giác trắng nhỏ hơn đè lên để hở đúng nét viền */ .hero__bubble b::before, .hero__bubble b::after { content: ""; position: absolute; } .hero__bubble b::before { left: 15px; top: 100%; border-top: 21px solid #0c1512; border-right: 17px solid transparent; } .hero__bubble b::after { left: 19px; top: calc(100% - 4px); border-top: 16px solid #fff; border-right: 12px solid transparent; } @keyframes bongThoai { 0% { opacity: 0; scale: 0.5; rotate: -9deg; } 1.11% { opacity: 1; scale: 1.12; rotate: 3deg; } /* 0,20s - bật ra */ 1.94% { scale: 1; rotate: -2deg; } /* 0,35s - nảy lại */ 6.94% { opacity: 1; scale: 1; rotate: -2deg; } /* 1,25s - giữ */ 8.33% { opacity: 0; scale: 0.92; rotate: -2deg; } /* 1,50s - tắt */ 100% { opacity: 0; scale: 0.92; } } @media (max-width: 980px) { .hero__bubble { display: none; } } /* Tắt hiệu ứng: giữ lại một bóng đứng yên thay vì bỏ trống */ @media (prefers-reduced-motion: reduce) { .hero__bubble b { animation: none; } .hero__bubble b:first-child { opacity: 1; } } /* ---------- Tiện ích ---------- */ .mt-0 { margin-top: 0; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .center { text-align: center; } /* ============================================================ CON TRỬe CHUỘT Mũi tên trọc đầu, không có đuôi; chỗ bấm được thì là bàn tay trắng. Viền đen mờ 45% để còn thấy được khi đi qua mảng sáng (ảnh dự án, nút xanh). Chỉ bật trên máy có chuột thật. Đặt cuối pages.css vì đây là file nạp sau cùng - mấy chỗ đang khai cursor: pointer (button, .faq summary, .to-top, .dots__item) phải thua nó thì con trỏ mới ăn toàn site. ============================================================ */ @media (hover: hover) and (pointer: fine) { :root { --tro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 3 20 7.3 15.7 14.2 14.9Z' fill='%23ffffff' stroke='%23000' stroke-opacity='.45' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2; --tro-nhan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 2.2a1.5 1.5 0 0 1 3 0v7.6a1.4 1.4 0 0 1 2.5.85v.6a1.4 1.4 0 0 1 2.5.85v.6a1.4 1.4 0 0 1 2.4.9v2.9c0 3.3-2.4 5.7-5.8 5.7h-1.4c-2 0-3.4-.8-4.5-2.3l-3.5-4.8a1.45 1.45 0 0 1 2.25-1.8l1.55 1.75Z' fill='%23fff' stroke='%23000' stroke-opacity='.45' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2; } html, body, main, [tabindex="-1"] { cursor: var(--tro), default; } a, button, summary, label, select, [role="button"], [tabindex="0"], .btn, .faq summary, .to-top, .dots__item, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] { cursor: var(--tro-nhan), pointer; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea { cursor: text; } [disabled] { cursor: var(--tro), not-allowed; } } /* ============================================================ HÀNG CỘT - sáu năng lực dựng thành sáu cột đỡ một mái nhà Một đền La Mã sáu cột: mái tam giác ở trên, thân cột có rãnh dọc, đầu và chân cột loè ra hai bên, dưới cùng là nền. ============================================================ */ /* Chặn bề ngang 1000px thay vì 1120px của khung: sáu cột dàn hết khung thì ngôi đền bị bệt, ngang quá so với chiều cao. */ .hang-cot { position: relative; max-width: 1000px; margin-inline: auto; } .hang-cot__mai { color: var(--accent-2); line-height: 0; } .hang-cot__mai svg { width: 100%; height: clamp(78px, 9.5vw, 150px); display: block; } .hang-cot__day { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .tru { display: flex; flex-direction: column; } /* Đầu và chân cột loè rộng hơn thân, đúng lối cột cổ điển */ .tru__dau, .tru__chan { display: block; height: 12px; margin-inline: -6px; background: var(--surface-2); border: 1px solid var(--border); } .tru__dau { border-radius: 4px 4px 0 0; border-bottom: none; } .tru__chan { border-radius: 0 0 4px 4px; border-top: none; } .tru__than { flex: 1; display: flex; flex-direction: column; padding: 20px 14px; border: 1px solid var(--border); /* Rãnh dọc thân cột */ background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,0.028) 13px 14px), var(--surface); transition: border-color 0.3s, background-color 0.3s; } .tru:hover .tru__than { border-color: var(--accent); } .tru:hover .tru__dau, .tru:hover .tru__chan { border-color: var(--accent); } .tru__so { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-2); } .tru__ten { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; margin: 8px 0 14px; color: var(--text); } /* margin trên dưới cùng auto thì cụm chip nằm giữa khoảng trống còn lại, thay vì dính xuống đáy */ .tru__chip { display: flex; flex-wrap: wrap; gap: 6px; margin-block: auto; padding-block: 14px; } .tru__chip .tag { font-size: 0.66rem; padding: 3px 7px; } .tru__dan { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--accent-2); } .tru__dan:hover { color: var(--accent); } /* Nền đền */ .hang-cot__nen { height: 10px; margin: 0 -10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0 0 6px 6px; } .hang-cot__nen::after { content: ""; display: block; height: 8px; margin: 12px 14px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0 0 6px 6px; } @media (max-width: 1040px) { .hang-cot__day { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .hang-cot__day { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 440px) { .hang-cot__day { grid-template-columns: 1fr; } .hang-cot__mai svg { height: 56px; } } /* ============================================================ BĂNG ẢNH - mỗi lần một ảnh, chấm tròn báo số lượng Xếp hết ra thì năm ảnh chiếm hơn 1100px chiều dọc. Chồng lên nhau trong một khung 16/9, đổi ảnh bằng độ mờ nên không giật layout. ============================================================ */ .bang-anh { margin: 24px 0; } .bang-anh__khung { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--surface); } .bang-anh__khung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); } .bang-anh__khung img.is-hien { opacity: 1; } /* Biến thể cho bộ ảnh nhiều ảnh dọc: tỉ lệ nguồn trải từ 0,56 đến 1,50, cắt theo khung 16/9 thì ảnh dọc chỉ còn thấy 31% chiều cao, mất cả đầu người. Khung 4/3 và contain thì không cắt ảnh nào. */ .bang-anh--doc .bang-anh__khung { aspect-ratio: 4 / 3; background: var(--bg-alt); } .bang-anh--doc .bang-anh__khung img { object-fit: contain; } .bang-anh__cham { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .bang-anh__cham button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--border); border: none; transition: background-color 0.3s, transform 0.3s var(--ease); } .bang-anh__cham button:hover { background: var(--text-muted); } .bang-anh__cham button.is-hien { background: var(--accent); transform: scale(1.35); } @media (prefers-reduced-motion: reduce) { .bang-anh__khung img { transition: none; } } /* ============================================================ LINK BỎ QUA - dành cho người dùng bàn phím và trình đọc màn hình Ẩn ngoài màn hình, chỉ nhảy vào khi bấm Tab lần đầu để nhảy thẳng xuống nội dung chính, khỏi phải Tab qua cả thanh menu ở mọi trang. ============================================================ */ .bo-qua { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); padding: 11px 18px; border-radius: 8px; background: var(--accent); color: #06120d; font-size: 0.9rem; font-weight: 700; transition: transform 0.2s var(--ease); } .bo-qua:focus { transform: translateY(0); outline: 2px solid var(--text); outline-offset: 2px; } :root[data-theme="light"] .bo-qua { color: #ffffff; } #noi-dung:focus { outline: none; } /* ============================================================ CHẾ ĐỘ SÁNG Mặc định toàn site là nền tối (bảng màu ở :root trong style.css). Khối này chỉ chạy khi . Chia hai phần: 1. Đổi bảng màu - phần lớn giao diện tự ăn theo 2. Vá riêng những chỗ ghi cứng màu tối trong CSS Muốn bỏ chế độ sáng thì xoá nguyên khối này. ============================================================ */ /* Bảng màu viết theo lối nền tối trước, nhưng trang mặc định mở ra nền sáng: thẻ luôn mang sẵn data-theme nên nhánh dưới đây mới là nhánh chạy thật. Dòng này chỉ còn là chốt chặn cuối. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --bg-alt: #eef1f6; --surface: #ffffff; --surface-2: #f1f4f8; --border: #dde3ec; --text: #12151b; --text-muted: #4b5563; /* Xanh thương hiệu #16c284 trên nền trắng chỉ đạt tương phản 2.9:1, dưới chuẩn WCAG AA. Nền sáng dùng hai sắc đậm hơn: 5.3:1 và 7.1:1. */ --accent: #0d7a53; --accent-2: #0a6444; --accent-soft: rgba(13, 122, 83, 0.10); --gradient: linear-gradient(135deg, #0d7a53 0%, #16a06d 100%); } /* ---- 1. Nền trang và thanh nav ---- */ :root[data-theme="light"] body { background: var(--bg); } :root[data-theme="light"] .nav.is-scrolled { background: rgba(255, 255, 255, 0.82); box-shadow: 0 1px 0 0 rgba(16, 24, 40, 0.06); } :root[data-theme="light"] .nav__mobile { background: rgba(255, 255, 255, 0.97); } /* Logo trên nav là ảnh trắng nền trong suốt - đảo màu thành đen */ :root[data-theme="light"] .nav__logo { filter: invert(1); } :root[data-theme="light"] .nav__brand:hover .nav__logo { filter: invert(1) brightness(0.85); } /* ---- 2. Chữ trên nút màu nhấn: nền tối dùng chữ đen, nền sáng dùng chữ trắng ---- */ :root[data-theme="light"] .btn--primary { color: #ffffff; background: linear-gradient(135deg, #0a6444 0%, #0d7a53 100%); box-shadow: 0 8px 24px -8px rgba(10, 100, 68, 0.45); } :root[data-theme="light"] .btn--primary:hover { box-shadow: 0 12px 28px -8px rgba(10, 100, 68, 0.6); } /* ---- 2b. Tiêu đề H1 trên Light mode: độ tương phản cao đạt chuẩn WCAG AA ---- */ :root[data-theme="light"] .hero__name { background: linear-gradient(100deg, #0a6444 10%, #0d7a53 50%, #064e3b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ô chờ dữ liệu trên Light mode: màu hổ phách đậm để đọc rõ trên nền trắng */ :root[data-theme="light"] .tbd, :root[data-theme="light"] .datagap { color: #b45309; border-color: rgba(180, 83, 9, 0.55); } /* ---- 3. Hai lớp phủ điện ảnh: nền sáng thì hạt nhiễu trông bẩn, quầng tối góc trở thành vệt xám. Giảm mạnh cả hai. ---- */ :root[data-theme="light"] html::after, html[data-theme="light"]::after { opacity: 0.035; } :root[data-theme="light"] body::after { background: radial-gradient(135% 130% at 50% 42%, transparent 58%, rgba(16, 24, 40, 0.07) 100%); } /* ---- 4. Bóng đổ: nền tối dùng đen đậm, nền sáng phải rất nhẹ ---- */ :root[data-theme="light"] .hero__photo-wrap { box-shadow: 0 24px 48px -22px rgba(16, 24, 40, 0.28); } :root[data-theme="light"] .project:hover { box-shadow: 0 20px 38px -20px rgba(16, 24, 40, 0.28); } :root[data-theme="light"] .to-top { box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.3); } /* ---- 5. Quầng sáng sau ảnh chân dung: nền sáng thì dịu lại ---- */ :root[data-theme="light"] .hero__blob { opacity: 0.16; filter: blur(70px); } /* ---- 6. Rãnh cột ở sáu trụ khắc bằng vệt trắng mờ - nền sáng phải đổi sang vệt tối ---- */ :root[data-theme="light"] .tru__than { background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(16, 24, 40, 0.045) 13px 14px); } /* ---- 7b. Section Năng lực: icon huy hiệu ghi cứng màu trắng nên nền sáng mất hút hoàn toàn. Đổi sang màu nhấn, và mũi tên ở link dẫn case cũng ăn màu xanh cho thống nhất. ---- */ :root[data-theme="light"] .engine__icon { color: var(--accent); opacity: 0.55; } :root[data-theme="light"] .engine__step:hover .engine__icon { opacity: 1; } :root[data-theme="light"] .engine__proof span { color: var(--accent); } /* ---- 7c. Mũi tên vẽ tay chạy từ ngón tay sang các chỉ số: nét vẽ ghi cứng stroke="#fff" ngay trong thẻ SVG nên nền sáng mất hút. Luật CSS đè được thuộc tính trình bày, không phải sửa HTML. ---- */ .ve__hinh { stroke: #ffffff; } :root[data-theme="light"] .ve__hinh { stroke: var(--accent); } /* ---- 8. Con trỏ tự vẽ đang là mũi tên trắng, nền sáng thì mất hút. Đổi sang mũi tên đậm viền trắng. ---- */ @media (hover: hover) and (pointer: fine) { :root[data-theme="light"] { --tro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 3 20 7.3 15.7 14.2 14.9Z' fill='%23000' stroke='%23fff' stroke-opacity='.95' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2; --tro-nhan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 2.2a1.5 1.5 0 0 1 3 0v7.6a1.4 1.4 0 0 1 2.5.85v.6a1.4 1.4 0 0 1 2.5.85v.6a1.4 1.4 0 0 1 2.4.9v2.9c0 3.3-2.4 5.7-5.8 5.7h-1.4c-2 0-3.4-.8-4.5-2.3l-3.5-4.8a1.45 1.45 0 0 1 2.25-1.8l1.55 1.75Z' fill='%23000' stroke='%23fff' stroke-opacity='.95' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2; } } /* ============================================================ CÔNG TẮC ĐỔI NỀN SÁNG / TỐI Dạng trượt hai bên: hai icon đứng yên, viên màu trượt sang bên đang bật. Là