/* * CSS port từ theme WordPress `new-fulbright` cho trang chi tiết ngành học. * * Nguồn (theo `is_singular('major')` trong functions.php): * assets/css/curriculum-overview-majors-detail.css (giữ toàn bộ) * assets/css/main.css · james-styles.css · hai-apply.css (chỉ rule khớp DOM trang này) * assets/library/slick/slick/slick.css (slick core) * * MỌI selector đã prefix `.fb-legacy.fb-student-project` để không rò ra header/footer và phần còn * lại của app vốn dùng Tailwind. Rule `html`/`body` bị loại (chúng set padding * cho header cố định của theme, không áp dụng ở đây); `:root` được giữ và ánh xạ * lên `.fb-legacy.fb-student-project` vì theme dùng `var(--primary-color)` ở rất nhiều nơi. * * File được trích MỘT LẦN từ theme lúc migrate (script trích đã gỡ khỏi repo) — * giờ sửa tay trực tiếp. Chỉnh sửa của dự án đặt ở khối "ghi đè" CUỐI file. */ /* * Font tự host — KHÔNG khai báo ở đây. * * Site cũ nạp `Halyard Display` / `Halyard Text` / `Garamond Premier Pro` từ * Adobe Typekit (`use.typekit.net/ryj0kai.css`). Kit của Typekit **khoá theo * domain**: trên localhost hay domain chưa đăng ký, file CSS vẫn tải nhưng font * thì không (`document.fonts` rỗng) và trình duyệt rơi về font hệ thống — metric * khác nhau làm vỡ layout. * * Vì vậy dự án tự host toàn bộ file font trong `public/fonts/` và khai `@font-face` * **một lần duy nhất** trong `src/app/globals.css`. CSS migrate chỉ dùng lại tên * family, không khai lại — khai lại ở mỗi template sinh ra 54 bản @font-face * trùng nhau trỏ vào một bộ file thứ hai (`public/migrate/major/fonts/`). */ /* Nền tảng thay cho rule `body` của theme (`main.css`): `font: 400 14px/16px "Halyard Display"` + letter-spacing. Bỏ `padding` vì đó là chỗ chừa cho header fixed của WordPress, app này có header riêng. */ .fb-legacy.fb-student-project { color: #000; font: 400 14px/16px "Halyard Display", sans-serif; font-variant-numeric: oldstyle-nums proportional-nums; font-feature-settings: "ss15"; letter-spacing: 0.025em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fb-legacy.fb-student-project *, .fb-legacy.fb-student-project *::before, .fb-legacy.fb-student-project *::after { box-sizing: border-box; } /* Lưới `.row` / `.col-md-*` đến thẳng từ `assets/css/style.css` của theme (Bootstrap 4). Trước đây chỗ này dựng lại bằng CSS grid vì bản port ban đầu chưa nạp `style.css` — bản dựng tay ra 736px thay vì 757px cho `.col-md-8`, và khi `style.css` được nạp thì `max-width: 66.666667%` của Bootstrap cộng dồn lên ô grid làm cột co xuống 494px. Giữ nguyên Bootstrap của theme. `.sidebar` của theme là `position: sticky` và phải dính suốt chiều dài bài viết. Muốn vậy thì cột chứa nó phải cao bằng cả hàng — Bootstrap để `align-items: stretch`, KHÔNG được đặt `align-self: start`. */ /* Gỡ Preflight của Tailwind trong toàn bộ cây `.fb-legacy.fb-student-project`. * * Theme WordPress chạy KHÔNG có preflight, nên nó trông cậy vào style mặc định * của trình duyệt (margin của `p`/`h*`/`ul`/`blockquote`, bullet của list, * `font-weight` của heading...). Preflight zero hết những thứ đó bằng * `*, ::before, ::after { margin: 0; padding: 0; border: 0 solid }` và các rule * element, làm trang trông "như quên style" ở đúng những chỗ khó đoán nhất. * * `revert` trả về giá trị của user-agent stylesheet. Specificity ở đây là * (0,1,0) — cao hơn preflight (0,0,0) nhưng thấp hơn mọi rule của theme * (`.fb-legacy.fb-student-project .foo` = (0,2,0), `.fb-legacy.fb-student-project h1` = (0,1,1)) nên theme vẫn thắng. * `box-sizing: border-box` được giữ lại vì theme cũng dùng (`main.css`). */ .fb-legacy.fb-student-project *, .fb-legacy.fb-student-project *::before, .fb-legacy.fb-student-project *::after { margin: revert; padding: revert; border-width: revert; border-style: revert; list-style: revert; font-weight: revert; font-size: revert; } /* `td` / `th`: mặc định của trình duyệt là `padding: 1px`. * * `padding: revert` ở khối gỡ Preflight bên dưới KHÔNG khôi phục được giá trị * này (kiểm chứng bằng cách chèn một `` rỗng vào cả hai site: site cũ ra * `1px`, ở đây ra `0px`), làm mỗi dòng bảng tuyển dụng của Join-us hụt 2px. */ .fb-legacy.fb-student-project td, .fb-legacy.fb-student-project th { padding: 1px; } /* CSS gốc của plugin WP-PageNavi (`wp-pagenavi/pagenavi-css.css`). * * Plugin nằm ngoài theme nên không có trong phần port từ theme, nhưng * `padding` + `margin` ở đây quyết định kích thước từng ô số trang (18×22px trên * site cũ, 8×16px nếu thiếu). Đặt TRƯỚC phần port từ theme để rule `border: 0` * của theme vẫn thắng, đúng thứ tự như trên WordPress. */ .fb-legacy.fb-student-project .wp-pagenavi a, .fb-legacy.fb-student-project .wp-pagenavi span { text-decoration: none; border: 1px solid #bfbfbf; padding: 3px 5px; margin: 2px; } .fb-legacy.fb-student-project .wp-pagenavi a:hover, .fb-legacy.fb-student-project .wp-pagenavi span.current { border-color: #000; } .fb-legacy.fb-student-project .wp-pagenavi span.current { font-weight: bold; } /* `figure`: theme reset về `margin: 0 0 14px`, KHÔNG phải mặc định của trình * duyệt (`1em 40px`). * * Reset này nằm trong stylesheet mà `main.css` nạp qua `@import` — bản port từ * theme không đi theo `@import` nên rule này bị thiếu. Đối chiếu bằng cách chèn * một `
` rỗng vào cả hai site rồi đọc computed style: site cũ ra * `0px 0px 14px`, còn ở đây `revert` phía trên trả về `1em 40px` và làm * `.james__news--item figure` hụt 80px chiều ngang (359px → 279px). */ .fb-legacy.fb-student-project figure { margin: 0 0 14px; } /* Gỡ Preflight của Tailwind cho media trong phạm vi trang legacy. Preflight đặt `img, video { max-width: 100%; height: auto }` và `img, svg, video, ... { display: block; vertical-align: middle }`. Theme WordPress không có hai rule này (đối chiếu `CSS.getMatchedStylesForNode` giữa hai site) và chúng phá layout: `max-width: 100%` làm ảnh trong `.academic__item--img` sập từ 255px xuống ~33px. `height` không cần gỡ — rule của theme có specificity cao hơn nên đã thắng. */ .fb-legacy.fb-student-project img, .fb-legacy.fb-student-project video { max-width: none; } .fb-legacy.fb-student-project img, .fb-legacy.fb-student-project svg, .fb-legacy.fb-student-project video, .fb-legacy.fb-student-project canvas, .fb-legacy.fb-student-project audio, .fb-legacy.fb-student-project iframe, .fb-legacy.fb-student-project embed, .fb-legacy.fb-student-project object { display: revert; vertical-align: revert; } .fb-legacy.fb-student-project a { cursor: pointer; } /* Neo mục lục: chừa chỗ cho header cố định để tiêu đề không bị che, và cuộn mượt — theme làm việc này bằng `$.animate({scrollTop})` trong `main.js`. */ html:has(.fb-legacy.fb-student-project) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(.fb-legacy.fb-student-project) { scroll-behavior: auto; } } .fb-legacy.fb-student-project .content__container section[id], .fb-legacy.fb-student-project [id] { scroll-margin-top: 140px; } /* `.btn-sub` là `