/* ========================================================================== naominhtam.com — blog cá nhân Hệ màu và chữ dùng chung ngôn ngữ với alfamedia.vn để hai site đứng cạnh nhau thấy là một người làm. Biến đặt tên tiếng Việt cho dễ sửa. ========================================================================== */ /* --- 1. Biến ------------------------------------------------------------- */ :root { /* Nền và giấy */ --nen: #EDF0F1; /* nền trang */ --giay: #FFFFFF; /* thẻ, khối nổi */ --chim: #E2E7E9; /* khối chìm, nền phụ */ --vien: #D2DADD; /* đường kẻ mảnh */ --vien-dam: #AEBBC0; /* đường kẻ khi hover */ /* Chữ */ --muc: #121A20; /* chữ chính */ --nhat: #42525A; /* chữ phụ */ --mo: #5A6A71; /* chú thích, nhãn */ /* Màu hiệu — teal thương hiệu */ --hieu: #019A7B; /* Teal thương hiệu #019A7B chỉ đạt 3.10:1 trên nền trang và 3.55:1 trên thẻ trắng — dưới ngưỡng 4.5:1 của WCAG AA cho chữ cỡ thường. Nên có một sắc đậm hơn dành riêng cho CHỮ, còn --hieu giữ nguyên cho nền, viền, gradient và biểu tượng (những thứ chỉ cần 3:1). Giao diện tối không cần: #2FBF9C trên nền tối đã đạt 8.24:1. */ --hieu-chu: #017860; --hieu-dau: #004F3B; --hieu-cuoi: #016D57; --hieu-nen: #DFEFE7; /* Màu trạng thái */ --troi: #1B4B5A; --troi-nen: #E0EAED; --luu: #8A5A00; --luu-nen: #F7EEDD; /* Chữ */ --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --disp: "Archivo", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Chữ ký. Đổi font ở đúng một dòng này — nhớ đổi cả thẻ Google Fonts trong của cả 5 file HTML. Các lựa chọn khác có đủ dấu tiếng Việt: "Style Script", "Pacifico", "Charm", "Merienda", "Ephesis", "Allura". TRÁNH: Splash, Water Brush, Puppies Play, Kolker Brush — làm hỏng dấu. */ --ky: "Sriracha", "Segoe Script", cursive; /* Khung */ --khung: 1080px; --hep: 720px; /* bề ngang đọc bài viết */ --le: clamp(1.25rem, 5vw, 3rem); --bo: 3px; /* bo góc — sắc, không tròn */ --bo-to: 14px; /* riêng banner mở đầu, mảng lớn cần bo mềm hơn */ --nhip: cubic-bezier(.22, .61, .36, 1); /* Hai vệt sáng trong nền banner mở đầu */ --nen-hieu-1: #DCEFE8; --nen-hieu-2: #E2EBEE; color-scheme: light; } /* Tối theo hệ thống, trừ khi người đọc đã chọn sáng */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nen: #0B1014; --giay: #131C21; --chim: #18232A; --vien: #243138; --vien-dam: #3A4A52; --muc: #DFE7EA; --nhat: #93A5AC; --mo: #7A8B93; --hieu: #2FBF9C; --hieu-dau: #016D57; --hieu-cuoi: #37D6AE; --hieu-nen: #0F2620; --hieu-chu: #2FBF9C; --troi: #6FB2C4; --troi-nen: #122B33; --luu: #D9A441; --luu-nen: #2A2113; --nen-hieu-1: #10322A; --nen-hieu-2: #10222B; color-scheme: dark; } } /* Tối do người đọc tự chọn */ :root[data-theme="dark"] { --nen: #0B1014; --giay: #131C21; --chim: #18232A; --vien: #243138; --vien-dam: #3A4A52; --muc: #DFE7EA; --nhat: #93A5AC; --mo: #7A8B93; --hieu: #2FBF9C; --hieu-dau: #016D57; --hieu-cuoi: #37D6AE; --hieu-nen: #0F2620; --hieu-chu: #2FBF9C; --troi: #6FB2C4; --troi-nen: #122B33; --luu: #D9A441; --luu-nen: #2A2113; --nen-hieu-1: #10322A; --nen-hieu-2: #10222B; color-scheme: dark; } /* --- 2. Nền tảng --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--nen); color: var(--muc); font-family: var(--sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ::selection { background: var(--hieu); color: #fff; } :focus-visible { outline: 2px solid var(--hieu); outline-offset: 3px; border-radius: 2px; } .bo-qua { position: absolute; left: var(--le); top: -100px; z-index: 100; background: var(--muc); color: var(--nen); padding: .6rem 1rem; border-radius: var(--bo); font-size: .875rem; text-decoration: none; transition: top .2s var(--nhip); } .bo-qua:focus { top: .75rem; } /* --- 3. Khung và tiết tấu ------------------------------------------------ */ .khung { width: 100%; max-width: var(--khung); margin-inline: auto; padding-inline: var(--le); } .hep { max-width: var(--hep); } .muc { /* một section */ padding-block: clamp(3.5rem, 9vw, 6.5rem); border-top: 1px solid var(--vien); } .muc:first-of-type { border-top: 0; } /* Nhãn nhỏ chạy trên mỗi tiêu đề section */ .nhan { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hieu-chu); margin-bottom: .875rem; } .nhan::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; flex: none; } .tieu-de-muc { font-size: clamp(1.5rem, 3.4vw, 2.125rem); /* Chặn bề ngang bằng rem chứ KHÔNG bằng ch. Đơn vị ch co theo cỡ chữ, mà cỡ chữ lại co theo bề ngang màn hình — nên trên điện thoại mức chặn co nhanh hơn cột chứa nó và cắt cụt tiêu đề giữa chừng. Số rem dưới đây bằng đúng số px mà ch cho ra ở cỡ chữ desktop, nên bố cục máy tính không đổi; trên điện thoại thì cột luôn hẹp hơn mức chặn nên nó tự vô hiệu. */ max-width: 27rem; /* 22ch ở cỡ chữ 34px = 430px */ } .dan { /* đoạn dẫn dưới tiêu đề */ margin-top: 1rem; max-width: 62ch; color: var(--nhat); font-size: 1.0625rem; } /* --- 4. Nút -------------------------------------------------------------- */ .nut { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.375rem; border: 1px solid var(--vien-dam); border-radius: var(--bo); background: transparent; color: var(--muc); font-family: var(--sans); font-size: .9375rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .18s var(--nhip), border-color .18s var(--nhip), color .18s var(--nhip), transform .18s var(--nhip); } .nut:hover { border-color: var(--muc); transform: translateY(-1px); } .nut-chinh { background: linear-gradient(100deg, var(--hieu-dau) 0%, var(--hieu) 60%, var(--hieu-cuoi) 100%); border-color: transparent; color: #fff; } .nut-chinh:hover { border-color: transparent; filter: brightness(1.08); } :root[data-theme="dark"] .nut-chinh, :root:not([data-theme="light"]) .nut-chinh { color: #04120E; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nut-chinh { color: #fff; } } .nut svg { flex: none; } /* Liên kết dạng "Xem thêm →" */ .lien { display: inline-flex; align-items: center; gap: .4rem; color: var(--hieu-chu); font-weight: 500; font-size: .9375rem; text-decoration: none; border-bottom: 1px solid transparent; transition: gap .18s var(--nhip), border-color .18s var(--nhip); } .lien:hover { gap: .65rem; border-bottom-color: currentColor; } /* --- 5. Thanh điều hướng ------------------------------------------------- */ .dieu-huong { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--nen) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s var(--nhip); } .dieu-huong[data-cuon="roi"] { border-bottom-color: var(--vien); } .dieu-huong .khung { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; } /* Chữ ký viết tay, dựng bằng chữ chứ không phải ảnh — nên nó tự đổi màu theo giao diện sáng tối và nét vẫn sắc ở mọi độ phân giải. */ .chu-ky { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .125rem; text-decoration: none; flex: none; color: var(--muc); padding-block: .25rem; } .chu-ky-ten { font-family: var(--ky); font-size: 1.875rem; line-height: .95; font-weight: 400; letter-spacing: .01em; white-space: nowrap; /* Script font có phần chữ tràn dưới đường cơ sở, chừa chỗ cho nó */ padding-bottom: .12em; } /* Nét gạch dưới chữ ký, lấy đúng dải màu gradient của logo ALFA */ .chu-ky-gach { display: block; width: 100%; height: 1.5px; border-radius: 2px; background: linear-gradient(100deg, var(--hieu-dau) 0%, var(--hieu) 55%, var(--hieu-cuoi) 100%); transform-origin: left center; transform: scaleX(1); transition: transform .3s var(--nhip), opacity .3s var(--nhip); opacity: .85; } .chu-ky:hover .chu-ky-gach { opacity: 1; transform: scaleX(1.04); } /* Trong chân trang chữ ký to hơn một chút, cho ra dáng ký tên cuối thư */ .chan .chu-ky-ten { font-size: 2.125rem; } .menu { display: flex; align-items: center; gap: .25rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; } .menu a { display: block; padding: .5rem .75rem; border-radius: var(--bo); color: var(--nhat); font-size: .9375rem; text-decoration: none; transition: color .16s var(--nhip), background .16s var(--nhip); } .menu a:hover { color: var(--muc); background: var(--chim); } .menu a[aria-current] { color: var(--muc); font-weight: 500; } .cong-cu-nav { display: flex; align-items: center; gap: .5rem; flex: none; } /* Nút đổi sáng/tối */ .nut-giao-dien { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--bo); color: var(--nhat); cursor: pointer; transition: color .16s var(--nhip), border-color .16s var(--nhip); } .nut-giao-dien:hover { color: var(--muc); border-color: var(--vien-dam); } .nut-giao-dien svg { display: block; } /* Ba trạng thái: mặc định sáng thì hiện mặt trăng. Phải viết .nut-giao-dien .bt-troi chứ không phải .bt-troi. Luật ngay trên là `.nut-giao-dien svg` có độ ưu tiên (0,1,1), cao hơn `.bt-troi` (0,1,0) — nên display:block ở đó sẽ thắng và hiện CẢ hai biểu tượng. Lỗi này chỉ lộ ra khi người đọc chưa từng bấm chọn giao diện VÀ máy đang để nền sáng, vì khi có data-theme thì các luật bên dưới (0,3,0) mới đủ mạnh để che nó đi. */ .nut-giao-dien .bt-troi { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bt-trang { display: none; } :root:not([data-theme="light"]) .bt-troi { display: block; } } :root[data-theme="dark"] .bt-trang { display: none; } :root[data-theme="dark"] .bt-troi { display: block; } :root[data-theme="light"] .bt-trang { display: block; } :root[data-theme="light"] .bt-troi { display: none; } /* Nút đổi ngôn ngữ — hai nửa VI / EN, nửa đang bật thì nổi lên */ .doi-tieng { display: inline-flex; align-items: center; border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; flex: none; } .doi-tieng button { appearance: none; /* min-height 34px + 1px viền mỗi bên = cụm cao đúng 36px, bằng nút giao diện và nút menu bên cạnh. Trước đây nút chỉ cao 24px nên cụm cao 26px, vừa lệch hàng 10px vừa sát ngưỡng vùng bấm tối thiểu của WCAG 2.5.8. */ display: inline-flex; align-items: center; justify-content: center; min-height: 2.125rem; padding: 0 .5rem; min-width: 2.125rem; background: none; border: 0; color: var(--mo); font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; cursor: pointer; transition: background .16s var(--nhip), color .16s var(--nhip); } .doi-tieng button:hover { color: var(--muc); } .doi-tieng button[aria-pressed="true"] { background: var(--chim); color: var(--muc); } /* Nút mở menu trên điện thoại */ .nut-menu { display: none; } @media (max-width: 820px) { .menu { position: fixed; inset: 4.25rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nen); border-bottom: 1px solid var(--vien); padding: .5rem var(--le) 1.25rem; margin: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s var(--nhip), transform .2s var(--nhip), visibility .2s; } .menu[data-mo="1"] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; } .menu a { padding: .875rem .25rem; font-size: 1rem; border-bottom: 1px solid var(--vien); border-radius: 0; } .menu a:hover { background: none; } .menu li:last-child a { border-bottom: 0; } .nut-menu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--bo); color: var(--nhat); cursor: pointer; } .nut-menu:hover { color: var(--muc); border-color: var(--vien-dam); } /* Dưới 820px, .menu chuyển sang position:fixed nên rơi khỏi dòng — và mang theo luôn margin-left:auto của nó, thứ vẫn đẩy cụm nút sang phải trên máy tính. Không còn gì giữ chỗ, cụm nút dồn về sát chữ ký và bỏ trống 49px bên phải ở màn 430px. Trả lề tự động cho chính cụm nút. Chỉ đặt trong media query này: trên máy tính .menu vẫn nằm trong dòng, nếu cả hai cùng có margin-left:auto thì khoảng trống bị chia đôi và menu sẽ tụt vào giữa. */ .cong-cu-nav { margin-left: auto; } } /* --- 6. Banner mở đầu ---------------------------------------------------- Chữ lớn có ảnh tròn chèn ngay giữa dòng, các chip kỹ năng nổi quanh. Trên máy tính chip được đặt tuyệt đối ở bốn góc; màn hình hẹp thì chúng rơi xuống thành một hàng bọc, vì đặt tuyệt đối trên điện thoại là chồng chữ. */ .bang-hieu { position: relative; overflow: hidden; border: 1px solid var(--vien); border-radius: var(--bo-to); background: radial-gradient(80% 120% at 15% 0%, var(--nen-hieu-1) 0%, transparent 60%), radial-gradient(70% 110% at 88% 100%, var(--nen-hieu-2) 0%, transparent 62%), var(--giay); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); min-height: clamp(18rem, 34vw, 25rem); display: flex; align-items: center; justify-content: center; } /* Lưới mờ phía sau, cùng mô-típ với phần còn lại của trang */ .bang-hieu::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--vien) 1px, transparent 1px), linear-gradient(to bottom, var(--vien) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 5%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 5%, transparent 70%); opacity: .5; pointer-events: none; } /* Nét cong lớn ở đáy, gợi chuyển động mà không cần ảnh */ .bang-hieu::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -55%; height: 90%; border-radius: 50%; background: linear-gradient(100deg, var(--hieu-dau), var(--hieu) 55%, var(--hieu-cuoi)); opacity: .10; pointer-events: none; } /* Xếp dọc ba dòng ở MỌI bề ngang: lời chào, ảnh, rồi tên. Từng thử xếp ngang một dòng như bản tham khảo, nhưng "Não Minh Tâm" dài gấp đôi một cái tên tiếng Anh nên phải ép cỡ chữ xuống 3.5rem mới vừa — tên bị nhỏ và cả dòng mất cân. Xếp dọc thì tên được to gấp rưỡi. */ .bang-hieu-giua { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.6rem, 1.6vw, 1.1rem); text-align: center; } .bang-hieu-chao, .bang-hieu-ten { font-family: var(--disp); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: 0; } /* Lời chào là câu dẫn nên nhỏ hơn; tên mới là thứ cần đọng lại */ .bang-hieu-chao { color: var(--muc); font-size: clamp(1.25rem, 3.4vw, 2.125rem); } .bang-hieu-ten { font-size: clamp(2.125rem, 7vw, 4.5rem); } .bang-hieu-ten { background: linear-gradient(100deg, var(--hieu-dau), var(--hieu) 50%, var(--hieu-cuoi)); -webkit-background-clip: text; background-clip: text; color: transparent; /* Chữ có dấu mũ và dấu ngã cần chỗ, nếu không phần trên bị cắt khi background-clip */ padding-top: .08em; } /* Ảnh tròn chèn giữa dòng chữ */ .bang-hieu-anh { width: clamp(4.75rem, 11.5vw, 8rem); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: center 14%; max-width: none; flex: none; border: 3px solid var(--giay); box-shadow: 0 0 0 1px var(--vien), 0 10px 30px rgb(0 0 0 / .18); } /* --- Chip kỹ năng --- */ /* Chip nằm trong dòng chảy của cột; chính cột mới là thứ đặt tuyệt đối. Để position:absolute ở đây thì cả cột dồn chồng lên nhau một chỗ. */ .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; background: var(--giay); border: 1px solid var(--vien); border-radius: 999px; box-shadow: 0 4px 14px rgb(0 0 0 / .10); font-family: var(--mono); font-size: .6875rem; letter-spacing: .03em; color: var(--nhat); white-space: nowrap; } .chip svg { flex: none; color: var(--hieu); } /* Hai cột chip, trái là mảng quảng cáo, phải là công cụ. Trước đây mỗi chip đặt bằng một cặp phần trăm riêng, và khi cỡ tên tăng thì chip "ALFA Rà Soát" đè lên tên. Gom thành hai cột có max-width thì phần giữa luôn còn nguyên chỗ, dù tên dài hay cỡ chữ đổi. */ .chip-cot { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: .7rem; max-width: 22%; } .chip-cot-trai { left: clamp(.75rem, 2.2vw, 2rem); align-items: flex-start; } .chip-cot-phai { right: clamp(.75rem, 2.2vw, 2rem); align-items: flex-end; } /* Lệch nhẹ từng chip cho đỡ cứng, vẫn nằm trong cột */ .chip-cot-trai .chip:nth-child(2) { margin-left: .9rem; } .chip-cot-trai .chip:nth-child(3) { margin-left: -.3rem; } .chip-cot-trai .chip:nth-child(4) { margin-left: 1.2rem; } .chip-cot-phai .chip:nth-child(2) { margin-right: .9rem; } .chip-cot-phai .chip:nth-child(3) { margin-right: -.3rem; } .chip-cot-phai .chip:nth-child(4) { margin-right: 1.2rem; } /* Phần giữa không được lấn sang vùng của hai cột chip */ .bang-hieu-giua { max-width: 52%; } @media (max-width: 900px) { .bang-hieu { flex-direction: column; /* nếu không, hàng chip nằm cạnh khối chữ */ padding-block: clamp(2rem, 6vw, 3rem); min-height: 0; } /* Bỏ hai cột đặt tuyệt đối, dồn tất cả thành một hàng bọc dưới chữ */ .bang-hieu-giua { max-width: 100%; } .chip-cot { position: static; transform: none; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .5rem; } .chip-cot-trai { margin-top: 1.75rem; } .chip-cot-phai { margin-top: .5rem; } .chip-cot .chip { margin: 0 !important; } } /* --- 6b. Phần dẫn dưới banner ------------------------------------------- */ .mo-dau-duoi { margin-top: clamp(2rem, 5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 880px) { .mo-dau-duoi { grid-template-columns: 1fr; gap: 2rem; } } /* --- 6c. Mở đầu (khung ngoài) -------------------------------------------- */ .mo-dau { position: relative; /* Đệm trên nhỏ: banner đã là một thẻ có đệm riêng bên trong, nên chỉ cần đủ tách khỏi thanh điều hướng. Trước đây để 7rem — hợp lý hồi hero là chữ trần, nhưng với thẻ banner thì thành một mảng trống lớn. */ padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(3rem, 8vw, 5.5rem); overflow: hidden; } /* Lưới mờ giờ nằm trong .bang-hieu, không lặp lại ở đây nữa — hai lớp lưới chồng nhau làm phần mở đầu rối. */ .mo-dau .khung { position: relative; } /* Không đặt max-width ở đây. Cột của .mo-dau-duoi đã giới hạn bề ngang trên máy tính rồi, nên 17ch không có tác dụng gì ở đó — nhưng trên điện thoại nó chặn tiêu đề ở đúng 332px và bỏ phí tới 40px bên phải ở màn 430px. */ .mo-dau h1 { font-size: clamp(2.125rem, 5.6vw, 3.5rem); margin-bottom: 1.25rem; } .mo-dau h1 em { font-style: normal; background: linear-gradient(100deg, var(--hieu-dau), var(--hieu) 55%, var(--hieu-cuoi)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mo-dau .dan { font-size: 1.125rem; max-width: 52ch; } .hang-nut { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } /* Danh thiếp bên phải */ .the-danh-thiep { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.5rem; } /* Ảnh chân dung đã chuyển lên banner mở đầu (.bang-hieu-anh). Thẻ danh thiếp không còn ảnh nữa — hai chỗ cùng một khuôn mặt là thừa. */ .the-danh-thiep dl { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1.25rem; margin: 0; font-size: .875rem; } .the-danh-thiep dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); padding-top: .2em; white-space: nowrap; } .the-danh-thiep dd { margin: 0; color: var(--muc); } /* inline-block + đệm dọc để vùng bấm cao 26px thay vì 18px (WCAG 2.5.8 đòi tối thiểu 24px). Lề âm bù lại đúng phần đệm nên hàng trong thẻ không giãn ra. */ .the-danh-thiep dd a { color: var(--hieu-chu); text-decoration: none; display: inline-block; padding-block: .25rem; margin-block: -.25rem; } .the-danh-thiep dd a:hover { text-decoration: underline; } .the-danh-thiep .dinh { display: flex; align-items: center; gap: .5rem; padding-bottom: 1.125rem; margin-bottom: 1.125rem; border-bottom: 1px solid var(--vien); font-family: var(--mono); font-size: .75rem; color: var(--mo); } .den { width: .5rem; height: .5rem; border-radius: 50%; background: var(--hieu); flex: none; box-shadow: 0 0 0 3px var(--hieu-nen); } /* Hàng liên kết mạng xã hội */ .mang-xa-hoi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--vien); } .mang-xa-hoi a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--vien); border-radius: var(--bo); color: var(--mo); transition: color .16s var(--nhip), border-color .16s var(--nhip), background .16s var(--nhip); } .mang-xa-hoi a:hover { color: var(--hieu-chu); border-color: var(--hieu); background: var(--hieu-nen); } .mang-xa-hoi svg { display: block; } /* Ở chân trang không cần đường kẻ phân cách nữa */ .chan .mang-xa-hoi { margin-top: .625rem; padding-top: 0; border-top: 0; } /* --- 7. Dòng thời gian --------------------------------------------------- */ .moc-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0; } .moc { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--vien); } .moc:last-child { border-bottom: 1px solid var(--vien); } @media (max-width: 620px) { .moc { grid-template-columns: 1fr; gap: .5rem; } } .moc-nam { font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: var(--hieu-chu); padding-top: .2em; letter-spacing: .02em; } .moc h3 { font-size: 1.0625rem; margin-bottom: .375rem; } .moc p { color: var(--nhat); font-size: .9375rem; max-width: 60ch; } /* --- 8. Lưới thẻ --------------------------------------------------------- */ .luoi { display: grid; gap: 1px; margin-top: 2.5rem; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; } .luoi-3 { grid-template-columns: repeat(3, 1fr); } .luoi-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .luoi-3 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .luoi-2 { grid-template-columns: 1fr; } } .o { background: var(--giay); padding: 1.75rem; display: flex; flex-direction: column; gap: .625rem; transition: background .18s var(--nhip); } .o:hover { background: var(--chim); } /* Thẻ chiếm trọn chiều ngang lưới. Dùng cho ô lẻ cuối cùng, để lưới 2 cột không hở một ô trống lộ màu viền ra. Ở màn hình hẹp lưới còn 1 cột nên luật này không đổi gì. */ .o-rong { grid-column: 1 / -1; } .o-so { font-family: var(--mono); font-size: .75rem; color: var(--mo); letter-spacing: .06em; } .o h3 { font-size: 1.0625rem; } .o p { color: var(--nhat); font-size: .9375rem; } .o .lien { margin-top: auto; padding-top: .75rem; } /* Thẻ công cụ, có nhãn trạng thái */ .o-trang-thai { display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; } .tt-chay { background: var(--hieu-nen); color: var(--hieu-chu); } .tt-lam { background: var(--luu-nen); color: var(--luu); } /* --- 9. Bài viết --------------------------------------------------------- */ .bai-list { list-style: none; padding: 0; margin: 2.5rem 0 0; } .bai { border-top: 1px solid var(--vien); transition: background .18s var(--nhip); } .bai:last-child { border-bottom: 1px solid var(--vien); } .bai a { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 1.75rem; align-items: baseline; padding: 1.625rem .75rem; text-decoration: none; transition: padding-left .2s var(--nhip); } .bai a:hover { background: var(--giay); padding-left: 1.25rem; } @media (max-width: 720px) { .bai a { grid-template-columns: 1fr; gap: .5rem; padding-inline: .25rem; } .bai a:hover { padding-left: .5rem; } } .bai-ngay { font-family: var(--mono); font-size: .75rem; color: var(--mo); letter-spacing: .03em; white-space: nowrap; } .bai-noi-dung :is(h2, h3) { font-size: 1.1875rem; margin-bottom: .375rem; transition: color .16s var(--nhip); } .bai a:hover .bai-noi-dung :is(h2, h3) { color: var(--hieu-chu); } .bai-noi-dung p { color: var(--nhat); font-size: .9375rem; max-width: 58ch; } .bai-chu-de { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); white-space: nowrap; } @media (max-width: 720px) { .bai-chu-de { display: none; } } /* --- 10. Ba lối theo dõi ------------------------------------------------- */ .loi { background: var(--giay); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; border-top: 3px solid var(--vien-dam); transition: border-color .18s var(--nhip); } .loi:hover { border-top-color: var(--hieu); } .loi-gia { font-family: var(--mono); font-size: .8125rem; color: var(--hieu-chu); font-weight: 500; } .loi h3 { font-size: 1.0625rem; } .loi p { color: var(--nhat); font-size: .9375rem; flex: 1; } /* --- 11. Khối kết / liên hệ ---------------------------------------------- */ .khoi-ket { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); padding: clamp(1.75rem, 5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 820px) { .khoi-ket { grid-template-columns: 1fr; gap: 2rem; } } /* max-width bằng rem, không bằng ch — xem giải thích ở .tieu-de-muc mục 3. */ .khoi-ket h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); max-width: 21.5rem; } .khoi-ket .dan { font-size: 1rem; } .bang-lien-he { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; font-size: .9375rem; } .bang-lien-he li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--vien); } .bang-lien-he li:first-child { border-top: 1px solid var(--vien); } .bang-lien-he span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); padding-top: .3em; } .bang-lien-he a { color: var(--hieu-chu); text-decoration: none; } .bang-lien-he a:hover { text-decoration: underline; } /* Biểu mẫu */ .mau { display: grid; gap: 1rem; margin-top: 1.5rem; } .mau label { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); margin-bottom: .375rem; } .mau input, .mau textarea { width: 100%; padding: .6875rem .875rem; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); color: var(--muc); font-family: var(--sans); font-size: .9375rem; transition: border-color .16s var(--nhip); } /* Ô nhập được cả hai: viền đổi màu, VÀ vòng focus 2px như mọi nút, liên kết khác trên trang. Trước đây "outline: none" ở đây có độ ưu tiên (0,2,1), cao hơn luật :focus-visible toàn cục (0,1,0), nên người dùng bàn phím chỉ còn viền 1px trong khi chỗ khác có vòng 2px — không đồng nhất. Lưu ý về :focus:not(:focus-visible) bên dưới — nó KHÔNG có tác dụng với ô nhập chữ. Theo đặc tả, trình duyệt luôn cho ô nhập chữ khớp :focus-visible bất kể focus bằng chuột hay bàn phím, vì người gõ cần biết con trỏ đang ở đâu. Nên ô nhập hiện vòng trong cả hai trường hợp — đúng như mong muốn. Giữ luật đó lại cho các loại điều khiển khác (select, checkbox) nếu sau này thêm vào biểu mẫu: những thứ đó bấm chuột sẽ không hiện vòng. */ .mau input:focus, .mau textarea:focus { border-color: var(--hieu); } .mau input:focus:not(:focus-visible), .mau textarea:focus:not(:focus-visible) { outline: none; } .mau textarea { resize: vertical; min-height: 6.5rem; } .mau-ghi-chu { font-size: .8125rem; color: var(--mo); } /* --- 12. Chân trang ------------------------------------------------------ */ .chan { border-top: 1px solid var(--vien); padding-block: 2.5rem 3rem; margin-top: clamp(3rem, 8vw, 5rem); } .chan .khung { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between; } .chan-trai { display: flex; flex-direction: column; gap: .375rem; } .chan p, .chan li { font-size: .8125rem; color: var(--mo); } .chan-menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: 0; } /* Vùng bấm cao 18px là dưới ngưỡng 24px của WCAG 2.5.8. Đây là liên kết điều hướng đứng riêng nên không được miễn trừ như liên kết nằm giữa câu văn. inline-block + đệm dọc cho ra 30px; lề âm bù lại đúng phần đệm nên hàng chân trang không cao thêm. Bề ngang 51px đã đủ, chỉ thiếu chiều cao. */ .chan-menu a { color: var(--nhat); text-decoration: none; font-size: .875rem; display: inline-block; padding-block: .375rem; margin-block: -.375rem; } .chan-menu a:hover { color: var(--hieu-chu); } /* --- 13. Trang bài viết -------------------------------------------------- */ .thanh-doc { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--hieu-dau), var(--hieu-cuoi)); z-index: 60; transition: width .1s linear; } .dau-bai { padding-block: clamp(2.5rem, 7vw, 4.5rem) 2rem; } .duong-dan { font-family: var(--mono); font-size: .75rem; color: var(--mo); margin-bottom: 1.25rem; } /* Vùng bấm cao 15px, dưới ngưỡng 24px của WCAG 2.5.8. Đây là điều hướng đứng riêng, phân cách bằng dấu "/" chứ không phải liên kết nằm giữa câu văn, nên không được miễn trừ. Lề âm bù lại đệm để dòng breadcrumb không cao thêm. */ .duong-dan a { color: var(--mo); text-decoration: none; display: inline-block; padding-block: .3125rem; margin-block: -.3125rem; } .duong-dan a:hover { color: var(--hieu-chu); } .dau-bai h1 { font-size: clamp(1.875rem, 4.6vw, 2.875rem); /* rem chứ không phải ch — xem giải thích ở .tieu-de-muc mục 3. */ max-width: 33rem; /* 20ch ở cỡ chữ 46px = 529px */ } .meta-bai { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--vien); font-family: var(--mono); font-size: .75rem; color: var(--mo); letter-spacing: .03em; } /* Thân bài */ .than { padding-bottom: clamp(3rem, 8vw, 5rem); font-size: 1.0625rem; line-height: 1.75; } .than > * + * { margin-top: 1.5rem; } .than h2 { font-size: 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--vien); } .than h3 { font-size: 1.1875rem; margin-top: 2.25rem; } .than p { color: var(--nhat); } .than strong { color: var(--muc); font-weight: 600; } .than a { color: var(--hieu-chu); text-decoration: underline; text-underline-offset: .2em; } .than ul, .than ol { padding-left: 1.25rem; color: var(--nhat); } .than li + li { margin-top: .5rem; } .than li::marker { color: var(--hieu-chu); } .than blockquote { margin-inline: 0; padding: 1.25rem 1.5rem; background: var(--chim); border-left: 3px solid var(--hieu); border-radius: 0 var(--bo) var(--bo) 0; color: var(--muc); font-size: 1.0625rem; } .than blockquote p { color: var(--muc); } .than hr { border: 0; border-top: 1px solid var(--vien); margin-block: 2.5rem; } .than code { font-family: var(--mono); font-size: .875em; background: var(--chim); padding: .15em .4em; border-radius: 2px; } .than pre { background: var(--chim); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.125rem 1.25rem; overflow-x: auto; font-size: .875rem; line-height: 1.6; } .than pre code { background: none; padding: 0; font-size: inherit; } .than figure { margin: 2rem 0; } .than figcaption { margin-top: .625rem; font-size: .8125rem; color: var(--mo); font-family: var(--mono); } /* Khối nhấn trong bài */ .luu-y { border: 1px solid var(--vien); border-radius: var(--bo); background: var(--giay); padding: 1.25rem 1.5rem; } .luu-y .nhan { margin-bottom: .5rem; } .luu-y p { font-size: .9375rem; } /* Cuối bài */ .cuoi-bai { border-top: 1px solid var(--vien); padding-block: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; } /* --- 14. Hiện dần khi cuộn ----------------------------------------------- */ [data-hien] { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--nhip), transform .55s var(--nhip); } [data-hien="roi"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-hien] { opacity: 1; transform: none; } } /* --- 14b. Bảng xin đồng ý ------------------------------------------------ Dựng bằng JS trong main.js chứ không viết sẵn vào từng file HTML, để thêm trang mới là tự có, khỏi quên. Hai nút cố ý ngang nhau về thị giác: một lời đồng ý chỉ có giá trị khi từ chối cũng dễ bấm y như vậy. */ .bang-dong-y { /* Nằm trong dòng chảy chứ không nổi cố định, để không che thẻ danh thiếp ở phần mở đầu. Đánh đổi: người không cuộn qua khỏi màn hình đầu sẽ không thấy nó, nên số lượt được đo sẽ ít hơn. */ /* Trừ đi phần đệm ngang của .khung, nếu không banner sẽ thò ra hai bên so với cột chữ vì .khung rộng 1080px nhưng nội dung bên trong còn hẹp hơn đúng hai lần --le. */ width: calc(100% - var(--le) * 2); max-width: calc(var(--khung) - var(--le) * 2); margin: 0 auto clamp(2rem, 6vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.125rem 1.375rem; background: var(--giay); border: 1px solid var(--vien); border-left: 3px solid var(--hieu); border-radius: var(--bo); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--nhip), transform .35s var(--nhip); } .bang-dong-y[data-hien-ra="1"] { opacity: 1; transform: none; } .bang-dong-y p { flex: 1 1 22rem; margin: 0; font-size: .875rem; line-height: 1.55; color: var(--nhat); } .bang-dong-y strong { color: var(--muc); font-weight: 600; } .bang-dong-y-nut { display: flex; gap: .5rem; flex: none; } .bang-dong-y-nut button { padding: .5rem 1rem; border: 1px solid var(--vien-dam); border-radius: var(--bo); background: transparent; color: var(--muc); font-family: var(--sans); font-size: .875rem; font-weight: 500; cursor: pointer; transition: border-color .16s var(--nhip), background .16s var(--nhip); } .bang-dong-y-nut button:hover { border-color: var(--muc); background: var(--chim); } /* Nút đồng ý có màu hiệu, nhưng cùng cỡ chữ và cùng padding với nút từ chối */ .bang-dong-y-nut .dong-y { border-color: var(--hieu); color: var(--hieu-chu); } .bang-dong-y-nut .dong-y:hover { background: var(--hieu-nen); border-color: var(--hieu); } @media (max-width: 560px) { .bang-dong-y { gap: .875rem; } .bang-dong-y-nut { width: 100%; } .bang-dong-y-nut button { flex: 1; } } @media print { .bang-dong-y { display: none; } } /* --- 15. Song ngữ -------------------------------------------------------- Cả hai thứ tiếng đều nằm sẵn trong HTML. Thuộc tính data-tieng trên thẻ quyết định bên nào hiện. Không dùng display cố định cho bên đang hiện, để mỗi thẻ giữ nguyên kiểu hiển thị tự nhiên của nó (khối, dòng, flex...). Đổi tiếng là tức thì, không tải lại trang, không chớp. */ :root[data-tieng="vi"] [data-en] { display: none !important; } :root[data-tieng="en"] [data-vi] { display: none !important; } /* Chưa có JS thì mặc định hiện tiếng Việt */ :root:not([data-tieng]) [data-en] { display: none !important; } /* --- 16. Màn hình nhỏ ---------------------------------------------------- */ @media (max-width: 480px) { .chu-ky-ten { font-size: 1.625rem; } .dieu-huong .khung { gap: .625rem; } .doi-tieng button { min-width: 1.9rem; padding-inline: .375rem; } } /* Ở 360px (iPhone SE, máy Android nhỏ) chữ ký 26px chiếm 162px; cộng cụm nút 151px và khoảng cách 10px là 323px, trong khi chỗ trống chỉ có 305px — cụm nút ăn lấn 18px vào lề phải. Hạ chữ ký xuống 22px thì tổng còn 298px, dư 7px. Đặt ngưỡng ở 380px vì 390px (iPhone 12–16) đã vừa khít, không cần thu nhỏ. */ @media (max-width: 380px) { /* Dùng clamp chứ không phải một mức cố định: ở 320px (iPhone SE đời đầu) thì 22px vẫn còn thừa 33px. 5.9vw cho 18.9px ở 320px và 22px ở 373px trở lên. */ .chu-ky-ten { font-size: clamp(1.125rem, 5.9vw, 1.375rem); } } /* Dưới 340px thì thu chữ ký thêm nữa sẽ khó đọc, nên phần tiết kiệm lấy từ cụm nút: hẹp nút VI/EN lại và khít khoảng cách. Đủ để cụm nút không lấn lề ở 320px. Vẫn giữ vùng bấm cao 36px nên không ảnh hưởng thao tác ngón tay. */ @media (max-width: 340px) { .doi-tieng button { min-width: 1.6rem; padding-inline: .25rem; } .cong-cu-nav { gap: .375rem; } } /* --- 17. In ------------------------------------------------------------- */ @media print { .dieu-huong, .thanh-doc, .cuoi-bai, .khoi-ket, .chan { display: none; } body { background: #fff; color: #000; } .than { font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }