above the story text, on the prototype
* as much as here. The port copied the markup faithfully, which is why
* `wp mona fidelity` is green, and inherited the gap with it.
*
* So these rules are a reconstruction, not a transcription: they are built from
* the design's own tokens and follow the components it already uses — the two
* columns behave like `.split` and the panel like a `.card`. Nothing here
* changes a class, so the fidelity comparison is unaffected.
*
* Loaded only on an achievement page — see inc/classes/class-mona-enqueue.php.
*/
/* ---------- The two columns ---------- */
/*
* The facts panel is a fixed reading width and the story takes the rest, the
* same shape `.split` makes for every other page that pairs a summary with a
* body. Below 900px they stack, and the panel goes first because it holds the
* result the reader came for.
*/
.story-layout {
align-items: start;
display: grid;
gap: clamp( 28px, 5vw, 72px );
grid-template-columns: minmax( 0, 320px ) minmax( 0, 1fr );
}
@media ( max-width: 900px ) {
.story-layout {
grid-template-columns: 1fr;
gap: clamp( 24px, 5vw, 36px );
}
}
/* ---------- The facts panel ---------- */
/*
* Khách 28/09: *"cố định, đừng cho sticky"*.
*
* Khung từng dính theo khi cuộn, `top` chừa đúng chiều cao thanh điều hướng.
* Từ khi khối giáo viên dọn xuống dưới khung (cùng ngày), cột trái cao hơn
* cột phải nên sticky gần như không còn quãng nào để trượt — nó chỉ còn gây
* cảm giác khung trôi lệch so với phần chữ bên cạnh.
*
* Luật `position: static` cho khổ hẹp trước đây cũng bỏ theo: không còn gì
* để huỷ.
*/
.story-facts {
background: var( --white );
border: 1px solid var( --line );
border-radius: var( --r-lg );
padding: clamp( 20px, 2.4vw, 28px );
}
/* A section with a tinted background would otherwise hide the panel's edge. */
.bg-smoke .story-facts {
box-shadow: var( --sh );
}
/*
* The headline figure: the mark, or the school for an admission. It is set in
* the display face at a size that survives "ĐH Kinh tế Quốc dân" wrapping onto
* two lines without pushing the list below the fold.
*/
.story-facts__big {
display: block;
font-family: var( --display );
font-size: clamp( 1.5rem, 2.6vw, 2.125rem );
line-height: 1.15;
margin-top: 12px;
}
/* ---------- Label / value rows ---------- */
.story-facts dl {
margin: 18px 0 0;
}
/*
* Each row is one holding a
and a — the design's own markup,
* which is why the rule hangs off the element rather than a class.
*/
.story-facts dl > div {
align-items: baseline;
border-top: 1px solid var( --line );
display: flex;
gap: 16px;
justify-content: space-between;
padding: 10px 0;
}
.story-facts dl > div:first-child {
border-top: 0;
padding-top: 0;
}
.story-facts dl > div:last-child {
padding-bottom: 0;
}
.story-facts dt {
color: var( --gray );
flex: none;
font-size: .9rem;
}
.story-facts dd {
font-weight: 600;
margin: 0;
text-align: right;
}
/* ---------- The story itself ---------- */
/*
* `.prose` caps its line length at 68ch, which is right for an article sitting
* in a full-width column. Here the column is already narrow, so the cap only
* leaves a ragged gap on the right.
*/
.story-body {
max-width: none;
}
.story-body > :first-child {
margin-top: 0;
}
/* ---------- The same student's other results ---------- */
/*
* A heading and a list, appended to the panel when the child holds more than
* one record. It needs a rule of its own or it sits flush against the last
* label/value row and reads as part of it.
*/
.story-facts h4 {
border-top: 1px solid var( --line );
font-size: .9rem;
letter-spacing: .04em;
margin: 18px 0 0;
padding-top: 16px;
text-transform: uppercase;
}
.story-facts h4 + ul {
display: grid;
gap: 6px;
list-style: none;
margin: 10px 0 0;
padding: 0;
}
.story-facts h4 + ul a {
text-decoration-color: var( --line-strong );
text-underline-offset: 3px;
}
/* ---------- Thẻ giáo viên và thẻ khoá học, trong chính hai cột ---------- */
/*
* Khách 28/09: *"giáo viên nằm dưới thành tích, khóa học nằm dưới nội dung"*.
*
* Trước đó hai thẻ đã đi qua bốn cách xếp: mỗi thẻ một bề rộng riêng cạnh
* nhau, rồi hai cột bằng nhau, rồi hai cột trong một khung, rồi hai băng
* riêng. Cách nào cũng vướng cùng một chuyện — hai thẻ khác chiều cao và
* khác chủ đề, ghép vào một hàng thì một cái thành đồ độn, mà tách thành
* băng riêng thì mỗi thẻ đứng lẻ giữa một băng rộng 1420px, phía trên còn
* chừa một khoảng chết bằng đúng phần trống dưới cột trái.
*
* Đưa mỗi thẻ về cột của nó thì khoảng trống ấy chính là chỗ chúng đứng:
* thẻ giáo viên lấp phần dưới bảng thành tích, thẻ khoá học nối ngay sau
* đoạn mô tả khoá trong bài. Không băng nào phải dựng thêm.
*/
/*
* Cột trái là một chồng hai khối rời, không phải một khung duy nhất: khung
* thành tích, rồi khối giáo viên nằm NGOÀI nó (khách 28/09 — để trong thì
* thẻ giáo viên vốn đã có viền riêng thành thẻ lồng thẻ, và lớp đệm của
* khung ăn mất 58px bề ngang).
*/
.story-side {
display: grid;
gap: 24px;
}
/*
* Tiêu đề khối: cùng dáng chữ với 'Thành tích khác' trong khung, nhưng bỏ
* đường kẻ trên — ở đây nó mở một khối mới chứ không ngăn với danh sách
* phía trên, và khoảng cách 24px của `.story-side` đã tách đủ rồi.
*/
.story-side__teacher h4 {
font-size: .9rem;
letter-spacing: .04em;
margin: 0;
text-transform: uppercase;
}
/*
* Cột rộng 320px, nhỏ hơn 340px mà thẻ giáo viên được vẽ ở /giao-vien/, nên
* thẻ nhận trọn bề rộng cột thay vì giữ một con số cố định rồi tràn.
*/
.story-aside-card {
margin-top: 12px;
}
.story-aside-card > * {
width: 100%;
}
/*
* Cột phải rộng hơn nhiều, nên thẻ khoá học giữ đúng 460px — bề rộng nó có
* trong `.grid-3` ở /khoa-hoc/ — và bám mép trái để thẳng hàng với chữ phía
* trên, thay vì kéo ngang cả cột.
*
* `.prose` đặt margin cho mọi thẻ con, nên khoảng cách trên lấy theo nhịp
* của đoạn văn liền trước.
*/
.story-body-card {
margin-top: 20px;
max-width: 460px;
}
@media ( max-width: 900px ) {
/* Một cột: thẻ khoá học rộng hết khung như mọi thứ khác trong bài. */
.story-body-card {
max-width: none;
}
}