/**
 * Alignment corrections from the client's second review.
 *
 * Nine rows across the PC and MB tabs say the same thing in different words:
 * *"team đang để căn lề của nội dung rất lộn xộn, căn giữa - căn trái không hề
 * đồng nhất"*. They are not nine faults. Measured at 430px and 1440px they come
 * down to three, and each rule below closes one of them.
 *
 * Kept out of assets/css/gtl/, which is the approved design as delivered and
 * stays byte-for-byte comparable. Loaded after those sheets on every page, so
 * these rules win on order as well as on specificity.
 */

/* ---------- 1. The note under a table or a grid ---------- */

/*
 * PC R2 #2 and #3, and "text dưới bảng chuyển hết [căn giữa]".
 *
 * `.lp-note` has exactly one rule in the design (page.css:864) and it sets no
 * alignment, so the note sits hard left under a heading block that is centred —
 * measured at 430px: text-align `start`, flush to both gutters. Two of the
 * client's rows point at this element and a third says to do the rest too; the
 * element is used six times across the four category landing pages, in
 * taxonomy-course_cat.php and component-table.php, so one rule covers them all.
 *
 * At every width, not just mobile: the PC tab reports it as well.
 */
.lp-note {
	margin-inline: auto;
	text-align: center;
}

/* ---------- 2. Section headings, once the layout is one column ---------- */

@media ( max-width: 900px ) {
	/*
	 * MB R2 #5, #7, #11, #12, #13.
	 *
	 * common.css:158 centres a `.section-head` only when it is a direct child of
	 * `.wrap` and not the `--row` variant. That is right on a wide screen: a head
	 * inside a two-column band is set against the column beside it, and a `--row`
	 * head shares its line with a carousel's arrows. Below 900px both of those
	 * reasons are gone — every band is a single column — and the exceptions
	 * survive as heads that read left while their neighbours read centre.
	 *
	 * A sweep of 52 heads over eight pages at 430px found four in that state:
	 * "Không chỉ dạy kiến thức, GTL…" and "Cẩm nang học tập…" on the front page,
	 * "Kế thừa tinh hoa Pasal…" and "Hành trình phát triển của GTL" on
	 * /gioi-thieu/gtl/. The first pair sit in a `.duo__text` column, the second
	 * are `--row` heads. After these rules, none.
	 *
	 * `.why-x .section-head--row` is named on its own because home.css:235 wins
	 * on specificity over a bare `.section-head--row`.
	 */
	.section-head,
	.section-head--row,
	.why-x .section-head--row {
		text-align: center;
	}

	.section-head--row,
	.why-x .section-head--row {
		align-items: center;
		justify-content: center;
	}

	.section-head .lead {
		margin-inline: auto;
	}

	/* ---------- 3. The three-item inclusion list ---------- */

	/*
	 * MB R2 #4: *"Căn chỉnh lại 3 dòng text"* on /khoa-hoc/boi-duong-van-hoa/.
	 *
	 * `.lp-includes` is already centred — page.css:865 carries the client's own
	 * earlier note, *"khách 18/09: canh giữa cho khớp tiêu đề mục"* — and two of
	 * the three items are. The third is not, because it is the long one: at 430px
	 * its text needs 324px of a 379px row, so the flex item fills the line, and
	 * its second line ("trong hợp đồng", 70px) starts at the left edge under a
	 * full-width first line. Measured item offsets from the list's left edge:
	 *
	 *   Đã gồm tài liệu…        75 … 75     centred
	 *   Học lại miễn phí…        0 …  0     full width, second line hard left
	 *   Báo cáo tiến độ…        50 … 50     centred
	 *
	 * One item per line and the text centred within it puts all three on the same
	 * axis — the measured centres become 202, 202, 201.
	 *
	 * `.checklist` is the same shape on /hop-tac/, where the client wrote
	 * *"Phần tích đỏ vẫn căn trái"*; it is a column flexbox, so centring it is
	 * `align-items`.
	 */
	/*
	 * Khách 25/09 đổi ý: khối này căn TRÁI, không căn giữa. Bản duyệt từng
	 * ghi "khách 18/09: canh giữa cho khớp tiêu đề mục" ở page.css:865, nên
	 * đây là lần đổi thứ hai của cùng một khối — giữ mỗi mục một dòng để
	 * dòng dài không còn kéo hết chiều ngang như trước.
	 */
	.lp-includes {
		align-items: flex-start;
		flex-direction: column;
	}

	.lp-includes li {
		text-align: left;
	}

	/*
	 * Chỉ /hop-tac/ — xem ghi chú MB R2 #20 ở trên. Hai chỗ dùng `.checklist`
	 * còn lại giữ nguyên mặc định của bản duyệt (page.css:479-481: cột,
	 * `align-items: flex-start`, icon `flex: none` 24px) nên icon thẳng cột.
	 */
	.split:not( .gate-split ) .checklist {
		align-items: center;
	}
}

/* ---------- 4. The page number inside its circle ---------- */

/*
 * The digit sits high in every pager button.
 *
 * `.pager` is a flex container, so each `.pager__btn` is a flex item and its
 * `display: inline` is blockified to `block`. The button is 42px tall by
 * page.css:523 while its line box is 25.9px, and nothing centres the one in the
 * other — measured on /thanh-tich/: the glyph starts 3px below the top edge and
 * ends 19px above the bottom, so it rides 8px above centre of the circle.
 *
 * It went unnoticed until now because the certificate wall only ever drew three
 * page numbers; at six cards a page it draws eight, and the client spotted it.
 *
 * Centring the item's own content fixes every pager on the site at once.
 */
.pager__btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

/* ---------- 5. The course fact card on a phone ---------- */

/*
 * page.css:883 puts the five facts — dành cho, môn học, hình thức, lớp đang mở,
 * học phí — in two columns below 560px. Five items into two columns leaves the
 * last one alone on a row of its own, and each 157px column is narrow enough
 * that "Tiếng Anh, Tiếng Việt, Toán" breaks over three lines.
 *
 * One column per the client's instruction: each fact gets the full 337px, the
 * odd row disappears, and the block grows from 238px to 313px — the height is
 * the trade, and it buys a value that no longer wraps.
 */
@media ( max-width: 560px ) {
	.lp-facts__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- 6. The admission card ---------- */

/*
 * PC R2 #5, with a reference image: *"Dòng 1: ava + profile ngắn gọn. Dòng 2:
 * Text dài, dài ngang khung text và căn 2 bên lề"*.
 *
 * page.css:1181 lays the card out as a flex row — the portrait, then one column
 * holding the name, the campus and the caption. So the caption is set in
 * whatever is left beside a 72px portrait: measured at 1440px, 210px of a 326px
 * card. The client wants it across the whole card, justified, on a line of its
 * own.
 *
 * No markup change is needed, and none is made — the caption is wrapped in a
 * plain `<div>` with the name and the campus, and `display: contents` lets that
 * wrapper vanish from the layout so all three become cells of the card's own
 * grid. Nothing gains or loses a class, so `wp mona fidelity` is unaffected.
 *
 * The portrait spans the first two rows; the name sits at the foot of row one
 * and the campus at the head of row two, which keeps the pair centred against
 * it. Measured after: the caption goes 210 → 296px and is justified, the card
 * loses 30px of height (300 → 270), and all twelve cards in the block still come
 * out the same height.
 *
 * `b:not(:has(+ small))` covers a student with no campus on record: with no
 * second row to fill, the name takes both.
 */
.adm-card {
	align-items: start;
	column-gap: 14px;
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	row-gap: 0;
}

.adm-card > div {
	display: contents;
}

.adm-card > img {
	grid-area: 1 / 1 / 3 / 2;
}

.adm-card b {
	align-self: end;
	grid-area: 1 / 2 / 2 / 3;
}

.adm-card b:not( :has( + small ) ) {
	align-self: center;
	grid-area: 1 / 2 / 3 / 3;
}

.adm-card small {
	align-self: start;
	grid-area: 2 / 2 / 3 / 3;
}

.adm-card p {
	grid-area: 3 / 1 / 4 / -1;
	margin-top: 10px;
	text-align: justify;
	text-justify: inter-word;
}

/* ---------- 7. The "big number" strips ---------- */

/*
 * MB R2 #6: *"bố cục chỉ 2 hàng, mỗi hàng 2 ô số"*, on /gioi-thieu/pasal/,
 * /thanh-tich/ and /hop-tac/, following the front page.
 *
 * common.css:1167 already gives all five strips two columns below 900px, and
 * the front page's `.bignum` keeps them all the way down. The three the client
 * names are `.statstrip` and `.big-stats`, which common.css:1172 drops to one
 * column below 560px — for a stated reason: *"dưới 560px các dải chữ dài về 1
 * cột"*, their labels being longer than the front page's. So this is a decision
 * being reversed, not an oversight, and it is the client's to reverse.
 *
 * Measured at 430px before agreeing to it: with two columns none of the four
 * numbers is clipped, no strip scrolls sideways, and each block loses a third of
 * its height — 212 → 150px on /thanh-tich/ and /hop-tac/, 320 → 236px on
 * /gioi-thieu/pasal/, whose labels are the longest of the three. The shared
 * `clamp( 2.1rem, 11cqi, 3rem )` at common.css:1169 is what makes it fit: the
 * figure is sized against its own column, not the viewport.
 *
 * `.honors-arc__stats` is included because it is drawn by the same rules and
 * would otherwise be the only strip left behaving the old way.
 */
@media ( max-width: 560px ) {
	.statstrip,
	.statstrip--3,
	.big-stats,
	.honors-arc__stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 32px;
	}

	/* An odd cell opens a row, so it carries no divider. */
	:is( .statstrip, .statstrip--3, .big-stats, .honors-arc__stats ) > :nth-child( odd ) {
		border-left: 0;
	}
}

/* ---------- 8. Chân trang trên điện thoại ---------- */

/*
 * Ba lần chạm vào khối này, ghi lại cả ba để lần sau khỏi đi lại:
 *
 *   MB R1 #18  *"Các mục hotline…: để icon và text trên cùng 1 dòng"*.
 *              common.css:870 căn giữa hàng liên hệ bằng `flex-direction:
 *              column`, nên icon rơi xuống một dòng riêng phía trên chữ.
 *
 *   25/09      Tôi giữ hàng ngang rồi căn giữa từng cặp icon–chữ. Ba hàng
 *              dài ngắn khác nhau nên mỗi cặp tự nằm giữa theo bề rộng
 *              riêng: ba icon rơi vào 118px, 107px và 17px. Khách trả lại.
 *
 *   25/09      Tôi đọc thành "khách không muốn căn giữa" và căn trái cả
 *              chân trang. Cùng ngày họ ghi vào bảng (MB R2 #15): *"căn
 *              chỉnh lại hết chân trang về vị trí chính giữa"*. Ý họ là
 *              căn giữa cho đúng, không phải bỏ.
 *
 * Nên: căn giữa, nhưng căn giữa CẢ HÀNG chứ không căn giữa nội dung BÊN
 * TRONG hàng. Mỗi `li` co về đúng bề rộng nội dung của nó (`width:
 * fit-content`) rồi cả khối đó được đẩy vào giữa cột (`margin-inline:
 * auto`). Bên trong `li` vẫn là flex hàng ngang căn trái, nên icon luôn
 * dính sát chữ của chính hàng đó — đúng cái đã hỏng ở lần thứ hai.
 *
 * `align-items: flex-start` giữ icon ngang với dòng chữ đầu thay vì trôi
 * xuống giữa một giá trị hai dòng.
 *
 * `.footer__contact li` có khung viền (theme.css:205) nên `fit-content`
 * làm khung ôm sát chữ; `max-width: 100%` chặn hàng dài nhất (danh sách cơ
 * sở) tràn ra ngoài cột.
 */
@media ( max-width: 560px ) {
	/* Trả lại ý định gốc của common.css:865-871. */
	.footer__grid,
	.footer__bottom {
		text-align: center;
	}

	.footer__about {
		align-items: center;
	}

	.footer__about p {
		margin-inline: auto;
	}

	.footer__social {
		justify-content: center;
	}

	.footer__bottom {
		align-items: center;
	}

	/*
	 * Hàng liên hệ. Căn giữa CẢ DANH SÁCH, không căn giữa từng hàng.
	 *
	 * Đo khi thử căn giữa từng hàng: icon rơi vào x = 35 / 127.3 / 35 — vẫn
	 * so le, y như lần 118 / 107 / 17 mà khách đã trả lại. Ba hàng dài ngắn
	 * khác nhau thì căn giữa riêng từng hàng KHÔNG BAO GIỜ cho icon cùng một
	 * cột; đó là điều kiện hình học, không phải chuyện chọn thuộc tính.
	 *
	 * Cho `ul` co về bề rộng nội dung rồi đẩy vào giữa, các `li` căn trái bên
	 * trong nó — cả khối nằm giữa mà ba icon vẫn chung một cột.
	 */
	.footer__contact {
		margin-inline: auto;
		max-width: 100%;
		width: fit-content;
	}

	.footer__contact li {
		align-items: flex-start;
		flex-direction: row;
		justify-content: flex-start;
	}

	/* Chữ trong hàng căn trái để icon và dòng đầu thẳng nhau. */
	.footer__contact li > div {
		text-align: left;
	}

	/*
	 * Cụm "Thành viên hệ sinh thái đào tạo — Pasal" (MB R2 #15, vế sau).
	 * Là pill inline-flex chứa chữ + logo Pasal cao 20px (common.css:464).
	 * Chữ đã được ghép 'đào tạo' bằng gtl_tie() ở component-footer.php:24;
	 * cho pill được xuống dòng và căn giữa để logo không bị ép ra rìa.
	 */
	.footer__eco {
		justify-content: center;
		text-align: center;
	}
}

/* ---------- 9. The teacher card on a phone ---------- */

/*
 * MB R2 #11: *"Căn giữ icon, title và 'thầy cô đang giảng dạy….'"* on
 * /hop-tac/, in the band "Thầy cô đang đồng hành cùng GTL". The three things
 * named are the subject badge over the portrait, the teacher's name, and the
 * label of each figure at the foot of the card ("giảng dạy Ngữ văn — 21 năm").
 *
 * Measured at 430px before the rule: the card is 379px wide and every one of
 * them starts at the left edge — badge at 27px, name and school flush left,
 * both figures flush left inside their half. The band's own heading is centred,
 * so the card read as the odd one out, which is what the client saw.
 *
 * Site-wide rather than only on /hop-tac/: the same card is drawn on the front
 * page, /giao-vien/ and every course page, and the client asked in #12 for the
 * other pages to match rather than diverge.
 *
 * The subject badge stays at the left corner the design put it in — the client
 * asked for it back there on 25/09, after this rule had centred it. The two
 * figures keep their divider and
 * take equal padding on both sides — uneven padding would shift each figure off
 * the centre of its own half by half the difference.
 *
 * Measured after: badge, name and school all sit on the card's centre line, and
 * each figure sits on the centre of its column, on all four cards.
 */
@media ( max-width: 560px ) {
	.teacher-card .card__body {
		text-align: center;
	}

	.teacher-card__stats > div {
		align-items: center;
	}

	.teacher-card__stats > div:first-child,
	.teacher-card__stats > div + div {
		padding-inline: 8px;
	}
}

/* ---------- 10. The eyebrow chip, and the colour it takes from its surface ---------- */

/*
 * MB R2 #5: *"Chỉnh khung màu text phần chữ 'giới thiệu' … hiện tại đang bị
 * trùng với màu back đen … nền đen thì để khung màu vàng, chữ màu vàng - nền
 * xám thì để viền khung đỏ, chữ màu đỏ"*.
 *
 * The chip is drawn in the surface's own text colour today — black on light,
 * white on dark, with a hairline border at 28% or 35% opacity. On black that is
 * a white chip on black with a barely visible edge, which is what the client
 * means by it disappearing.
 *
 * The two colours are the client's, the shades are ours, and the reason is
 * contrast. Measured against the surfaces the chip actually lands on:
 *
 *   --yellow  #F7CA39 on --dark #090B0C   12.64:1   used as asked
 *   --red     #E54036 on --smoke #F4F4F5   3.73:1   BELOW the 4.5:1 floor
 *   --red-700 #C42E23 on --smoke #F4F4F5   5.08:1   used instead
 *   --red-700 #C42E23 on white             5.58:1
 *
 * The chip is 12px bold uppercase, which WCAG counts as normal text, so 4.5:1
 * is the floor rather than 3:1. --red-700 is the design's own darker red — the
 * one it already uses for a pressed button and for a required-field mark — so
 * nothing new is introduced and the chip still reads as red.
 *
 * Red surfaces keep white: yellow on --red-700 is 3.58:1 and would fail.
 * A sweep of 32 chips over eight pages puts the lowest at 5.08:1.
 */
.eyebrow {
	border-color: var( --red-700 );
	color: var( --red-700 );
}

.bg-navy .eyebrow,
.bg-black .eyebrow,
.hero .eyebrow,
.honors .eyebrow,
.feature--dark .eyebrow,
.page-hero:not( .page-hero--yellow ) .eyebrow,
.article-cta .eyebrow,
.core-c__head .eyebrow {
	border-color: var( --yellow );
	color: var( --yellow );
}

.bg-red .eyebrow,
.page-hero--red .eyebrow,
.cta-band .eyebrow,
.register-section .eyebrow {
	border-color: var( --line-on-red );
	color: var( --white );
}

/* ---------- 11. The text column of a stacked duo ---------- */

/*
 * MB R2 #5 again: *"Điều chỉnh căn giữa cho cả text và tiêu đề"* on
 * /gioi-thieu/gtl/.
 *
 * Rule 2 centres the heading of a `.duo__text` column once the layout is one
 * column, but the paragraphs under it stayed left, so the block read half
 * centred. This finishes it.
 *
 * Deliberately not `p` everywhere: centring running prose is bad setting, and
 * the earlier sweep found 47 card paragraphs that are right to leave alone.
 * `.duo__text` is the narrow case the client is pointing at — a text column
 * that sits beside an image on a wide screen and below it on a phone, where
 * there is no longer a picture edge for the text to align against.
 */
@media ( max-width: 900px ) {
	.duo__text,
	.duo__text .prose {
		text-align: center;
	}

	.duo__text .prose > * {
		margin-inline: auto;
	}
}

/* ---------- 12. One scrollable row per group on /giao-vien/ ---------- */

/*
 * MB R2 #10: *"lướt mãi mới tới section tiếp theo … 17 gv hiện tại mới chỉ là
 * demo, sau này sẽ có 100+ giáo viên"*.
 *
 * The page printed every teacher into one four-column grid, so its height grew
 * with the staff list. Now there is one row per training group and each row
 * scrolls sideways, so the page is four rows tall whether the site has
 * seventeen teachers or a hundred and seventy.
 *
 * The card keeps the width it is drawn at in `.grid-4` on a wide screen — 340px
 * — so nothing about the card itself changes. On a phone it takes 78vw, which
 * leaves the next card showing at the edge; that overhang is what tells the
 * reader the row moves.
 *
 * The filter chips above are untouched. They hide a card by setting `hidden`,
 * and a row whose cards are all hidden folds away here rather than leaving a
 * heading over an empty strip.
 */
.tc-row__title {
	font-size: 1.05rem;
	letter-spacing: .02em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.tc-row:not( :has( .teacher-card:not( [hidden] ) ) ) {
	display: none;
}

/*
 * Khách 25/09: "phần này chỉ áp dụng cho mobile, và làm thành slider".
 *
 * Dưới 900px mỗi nhóm là một slider thật của theme — không thanh cuộn, có
 * mũi tên, chấm và kéo. Từ 901px trở lên, đường ray quay về lưới 4 cột
 * đứng yên như bản duyệt; slider của theme cuộn bằng scrollLeft chứ không
 * bằng transform, nên biến nó thành lưới không đụng độ gì với JS.
 */
@media ( min-width: 901px ) {
	.tc-row__slider .slider__track {
		display: grid;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		overflow: visible;
		cursor: default;
	}

	.tc-row__slider .slider__track > * {
		flex: none;
	}

	.tc-row__slider .slider__nav {
		display: none;
	}
}

@media ( max-width: 560px ) {
	.tc-row__title {
		text-align: center;
	}
}

/* ---------- 13. The three cooperation cards ---------- */

/*
 * MB R2 #11, read correctly this time: *"Căn giữ icon, title và 'thầy cô đang
 * giảng dạy….' — Phần tích đỏ vẫn căn trái"*.
 *
 * The card is `.pt-model`, in "Ba hình thức hợp tác với GTL" on /hop-tac/: a
 * 56px icon, an h3, a red line naming who the model is for
 * ("Thầy cô đang dạy tại các trường THCS, THPT"), then a list of red ticks.
 *
 * Measured at 430px before: the icon sits at the card's left padding edge and
 * the h3, the red line and every tick begin there too, under a band heading
 * that is centred. The whole card read left while the page read centre.
 *
 * The tick list centres as a list — each row is placed on the card's centre
 * line — but the text inside a row stays left, so a point that runs to two
 * lines still reads as a paragraph with its tick attached to the first line
 * rather than as a ragged column.
 *
 * Measured after, on all three cards: icon, heading, red line and every tick
 * row sit on the card's centre line.
 */
@media ( max-width: 900px ) {
	.pt-model {
		text-align: center;
	}

	.pt-model__ic {
		margin-inline: auto;
	}

	.pt-model ul {
		justify-items: center;
	}

	.pt-model li {
		text-align: left;
	}
}

/* ---------- 14. The course card's header ---------- */

/*
 * Client screenshot, 25/09: on a category page the course card's opening block
 * — the group pill, the course name and the grey summary — is boxed and marked
 * "canh giữa". page.css:817 sets `align-items: flex-start` on
 * `.lp-course__main`, so every child hugs the left edge under a band heading
 * that is centred.
 *
 * Scoped to what the client boxed. The tick list and the subject pills below it
 * were left outside the box and stay left, which also keeps a two-line point
 * reading as a sentence rather than as a centred column. They asked for the
 * inclusion list on the same page to be left in the very next message, so the
 * narrow reading is the right one here.
 */
@media ( max-width: 900px ) {
	.lp-course__main {
		align-items: center;
		text-align: center;
	}

	.lp-course__hl,
	.lp-course .subject-tags {
		align-self: stretch;
		text-align: left;
	}
}

/* ---------- 15. The portrait keeps its head ---------- */

/*
 * Client, 25/09: *"các hình ảnh này ưu tiên hiển thị phần trên, ko cắt đầu, áp
 * dụng với các slide ảnh giống vậy"*.
 *
 * common.css:1038 draws the teacher's media box as 4/5 — taller than wide — and
 * common.css:1039 turns it 5/4 below 560px, wider than tall, to keep the card
 * short on a phone. The photograph is a 2:3 cut-out, so a landscape box has to
 * throw away most of its height; the design's own note beside that rule says it
 * "cắt ~7% đỉnh … và phần chân", and 7% off the top of a portrait is the top of
 * the head.
 *
 * Anchoring to the top spends the whole crop on the legs instead. The subject is
 * a person standing: the face is at the top and there is nothing below the knees
 * worth keeping at 430px.
 *
 * One rule covers every place the card appears — the front page band, /hop-tac/,
 * /giao-vien/ and each course page all draw the same `.teacher-card`.
 */
@media ( max-width: 560px ) {
	/*
	 * Khách 25/09, sau khi neo ảnh lên đỉnh: "cho khung ảnh cao thêm 1 chút".
	 * Khung vuông thay cho 5/4: cao thêm 61px (thẻ 460 → 521px), đủ để thấy
	 * đầu, thân và tay, mà vẫn thấp hơn khổ dọc 4/5 của desktop 77px.
	 */
	.teacher-card .card__media {
		aspect-ratio: 1 / 1;
	}

	.teacher-card .card__media img,
	.teacher-card [class*="teacher-card__media--"] img {
		object-position: center top;
	}
}

/* ---------- 16. The page hero on a dark surface ---------- */

/*
 * Client, 25/09, with a screenshot of /khoa-hoc/boi-duong-van-hoa/:
 * *"phần này chỉnh center, nếu nền đen thì text mô tả màu vàng, khung ảnh có
 * border vàng"*, and the standing note from MB R2 #5: *"nền đen thì để khung
 * màu vàng, chữ màu vàng — nền xám thì để viền khung đỏ, chữ màu đỏ"*.
 *
 * `.page-hero` is the dark band at the top of a category, course, teacher or
 * achievement page. It carries a chip, an h1, a lead and, in the split variant,
 * a photograph. Three of those four were drawn in white or in white at 72%, so
 * the band read as one grey block.
 *
 * Everything here is for the phone, on the client's instruction of 25/09:
 * "các phần này chỉ chỉnh trên mobile", sent with the desktop view and the
 * yellow lead and the yellow picture frame boxed. The chip is the exception —
 * they left it out of the boxes, and it keeps the colour convention at every
 * width, which is where it started in MB R2 #5.
 *
 * Centring is a phone rule for its own reason: on a wide screen the text sits
 * beside the photograph and has an edge to align to, so centring it there
 * would be the fault the client keeps reporting elsewhere, in reverse.
 *
 * Yellow on --dark measures 12.64:1. The yellow and red hero variants keep
 * their own colours: yellow on either would vanish.
 *
 * `.page-hero .page-hero__text` rather than `.page-hero__text`, because
 * page.css:37 and :1028 set `align-items: flex-start` on the --cutout and --fit
 * variants at two classes deep and would otherwise win.
 */
.page-hero:not( .page-hero--yellow ):not( .page-hero--red ) .page-hero__badge {
	border-color: var( --yellow );
	color: var( --yellow );
}

@media ( max-width: 900px ) {
	.page-hero .page-hero__text {
		align-items: center;
		text-align: center;
	}

	.page-hero h1,
	.page-hero .lead {
		margin-inline: auto;
	}

	.page-hero:not( .page-hero--yellow ):not( .page-hero--red ) .lead {
		color: var( --yellow );
	}

	.page-hero:not( .page-hero--yellow ):not( .page-hero--red ) .page-hero__visual img {
		border: 2px solid var( --yellow );
	}
}

/* ---------- 17. A class with more than one weekly schedule ---------- */

/*
 * Client, 25/09, with a screenshot of a class that now has three: *"cho thành
 * từng dòng"*.
 *
 * page.css:301 lays the card's meta list out in two columns — the design's
 * shape for one schedule, where the days take the left cell and the hours the
 * right. Three schedules land in three of those cells instead, so they sit
 * beside each other and beside the teacher and the mode, each wrapping inside a
 * half-width column.
 *
 * A schedule is a sentence, not a column entry, so it takes the whole row. The
 * teacher and the mode keep the two-column arrangement under them.
 */
.sched-card__meta .sched-card__slot {
	grid-column: 1 / -1;
}

/* ---------- 18. Tiêu đề không nằm trong .section-head ---------- */

/*
 * MB R2 #16, khách 25/09: *"Chỉnh sửa lại tất cả các title (VD: GTL Academy qua
 * những con số, kết quả thật, niềm tin thật,…) bị rơi chữ xuống dòng không hợp
 * lý >> với các title ngắn cho thành 1 dòng, title dài thì ngắt chữ có nghĩa"*.
 *
 * Bản duyệt đặt `text-wrap: balance` cho mọi h1–h4 ở common.css:104, rồi ở
 * common.css:163 đổi riêng h2 sang `pretty` kèm giải thích ngay tại chỗ:
 * *"balance chia đều hai dòng nên mỗi dòng chỉ còn ~1/2 khung, pretty lấp đầy
 * dòng đầu và chỉ tránh để một chữ mồ côi ở dòng cuối"*. Tức là đội đã chọn
 * `pretty` cho h2 — chỉ là selector bó vào `.wrap > .section-head`.
 *
 * Hai tiêu đề khách nêu đều nằm ngoài cái bó đó. front-page.php dựng chúng với
 * class riêng (home.css:39 `.trust__title`, home.css:176 `.honors-arc__body h2`)
 * vì chúng mang bố cục riêng, nên vẫn dính `balance` và vẫn bị chia đôi:
 * "Kết quả thật, niềm tin | thật".
 *
 * Áp đúng quy tắc mà đội đã chọn cho h2, cho những h2 còn lại. `pretty` không
 * ép số dòng, chỉ cấm dòng cuối một chữ — "title ngắn cho thành 1 dòng" theo
 * đúng nghĩa khách nói. Phần "ngắt chữ có nghĩa" do gtl_tie() lo.
 *
 * Không đụng common.css; các h2 trong .section-head đã đúng rồi nên không lặp.
 */
.trust__title,
.honors-arc__body h2,
.duo__text h2,
.band h2 {
	text-wrap: pretty;
}

/* ---------- 19. Thẻ mốc trên dòng thời gian Lộ trình ---------- */

/*
 * MB R2 #13, khách 25/09: *"Khóa học >> Văn hóa >> Lộ trình học: Căn giữa lại
 * nội dung phía trên ảnh (ở tất cả các phần tiếp theo bên dưới cho đồng bộ)"*.
 *
 * Thẻ dựng ở component-timeline.php:46-60 theo thứ tự: nhãn `.tl__phase`, h3,
 * đoạn mô tả, rồi `.tl__img`. Ba phần đầu là "nội dung phía trên ảnh"; ảnh giữ
 * nguyên full-width.
 *
 * `.tl__card` là flexbox cột (page.css:213), nên nhãn phải đổi `align-self` —
 * `text-align` không chạm tới nó vì nó là flex item tự co theo nội dung
 * (page.css:214 đặt `align-self: flex-start`).
 *
 * Chỉ ở mobile. Phản hồi nằm ở tab MB, và trên desktop bốn thẻ nằm cạnh nhau
 * thành một hàng nên căn trái vẫn là cách đọc tự nhiên.
 *
 * "Các phần tiếp theo bên dưới" hiểu là các mốc còn lại của cùng dòng thời
 * gian — luật áp cho mọi `.tl__card` nên tất cả các mốc đồng bộ.
 */
@media ( max-width: 900px ) {
	.tl__card {
		text-align: center;
	}

	.tl__phase {
		align-self: center;
	}

	.tl__card p {
		margin-inline: auto;
	}
}

/* ---------- 20. Sứ mệnh và tầm nhìn trên /gioi-thieu/gtl/ ---------- */

/*
 * MB R2 #18, khách 25/09: *"Giới thiệu >> Về GTL: Text mục sứ mệnh và tầm nhìn
 * bị to và in đậm >> căn chỉnh cho giống mục về Pasal"*.
 *
 * Hai trang dùng chung component-mv-grid.php; khác nhau chỉ ở CSS phủ theo
 * class trang. Đo ra chênh lệch duy nhất là cỡ chữ:
 *
 *   /gioi-thieu/gtl/    .mv-card p              page.css:786
 *                       clamp( 1.3rem, 2vw, 1.75rem )      → 20.8–28px
 *   /gioi-thieu/pasal/  .pasal-mvv .mv-card p   page.css:1047
 *                       clamp( 1.05rem, 1.35vw, 1.2rem )   → 16.8–19.2px
 *
 * `font-weight` hai bên BẰNG NHAU (cùng 700, cùng var(--display)) — Pasal chỉ
 * ghi đè font-size. Nên cảm giác "in đậm" thực ra đến từ cỡ chữ lớn trên một
 * đoạn văn dài, và "giống Pasal" theo đúng nghĩa CSS hiện có là hạ cỡ chữ.
 * Không đụng tới weight: làm thế sẽ khác Pasal, tức là khác cái khách chỉ vào.
 *
 * Chỉ ở mobile — phản hồi nằm ở tab MB, và trên desktop hai thẻ nằm cạnh nhau
 * ở nửa khung nên cỡ chữ lớn vẫn cân.
 *
 * Bám vào body class của trang thay vì đổi component, để trang Pasal và mọi
 * chỗ khác dùng .mv-card không bị ảnh hưởng.
 */
@media ( max-width: 900px ) {
	.page-template-template-about-gtl .mv-card p {
		font-size: clamp( 1.05rem, 1.35vw, 1.2rem );
	}

	/* Thẻ cao 320px cho một đoạn chữ nhỏ thì thừa; Pasal đặt 0 (page.css:1046). */
	.page-template-template-about-gtl .mv-card {
		min-height: 0;
	}
}

/* ---------- 21. Thẻ bài viết chưa gắn ảnh bìa ---------- */

/*
 * MB R2 #17. Khung ảnh vẫn giữ chỗ khi bài chưa có `ar_cover` lẫn featured
 * image, để thẻ không đổi hình dạng giữa chừng — xem ghi chú ở
 * component-card-article.php. Nền lấy đúng sắc xám của khung ảnh đang tải
 * trong bản duyệt, nên nó đọc ra là "chưa có ảnh" chứ không phải lỗi vẽ.
 */
.card__media--blank {
	background: var( --smoke-2 );
}

/* ---------- 22. Ô tải tài liệu trong băng thư viện, trên điện thoại ---------- */

/*
 * Khách 28/09: *"phần này trên mobile đưa xuống cuối danh sách"* — ô vàng
 * "Bộ đề và cẩm nang luyện thi".
 *
 * Trên máy tính `.lib-grid` là lưới 3 cột: bài nổi bật chiếm 2 cột hàng đầu,
 * ô tải tài liệu lấp ô thứ ba của chính hàng đó (home.css:249, :255). Đúng chỗ.
 *
 * Xuống một cột (home.css:281) thì thứ tự nguồn thành thứ tự đọc, và ô vàng
 * rơi vào giữa: bài nổi bật, rồi một ô quảng cáo, rồi mới tới ba bài còn lại —
 * nó cắt ngang danh sách bài viết.
 *
 * `order` chỉ đổi thứ tự hiển thị, không đụng markup nên không ảnh hưởng phép
 * đo fidelity, và trên máy tính lưới giữ nguyên vì luật chỉ sống ở khổ hẹp.
 * Mốc 680px lấy đúng mốc home.css chuyển lưới về một cột.
 */
@media ( max-width: 680px ) {
	.lib-grid .lib-dl {
		order: 1;
	}
}

/* ---------- 23. Form đăng ký trên nền đỏ, phía trên footer ---------- */

/*
 * Khách 29/09: "đang bị đổi thành text đen … khó nhìn" — "chỉ cần thêm
 * background trắng trong ô fill thông tin chứ không phải nguyên box".
 *
 * form-bridge.css vẽ form cho nền trắng: nhãn đen, chip "Con quan tâm" chỉ
 * có viền xám, không nền. Ở .register-section form nằm thẳng trên --red-700,
 * nên nhãn chuyển trắng và chip được nền trắng như các ô nhập còn lại.
 */
.register-section .msf-form .msf-field > label {
	color: var( --white );
}

.register-section .msf-form .msf-req,
.register-section .msf-form .msf-field-error {
	color: var( --white );
}

.register-section .msf-form .msf-choice {
	background: var( --white );
	border-color: var( --white );
}

.register-section .msf-form .msf-choice:has( input:checked ) {
	background: var( --dark );
	border-color: var( --dark );
	color: var( --white );
}

/*
 * Khách 29/09: "cho toàn bộ form qua phải thẳng hàng với button đăng ký trên
 * header". form.css của plugin giới hạn .msf-form ở 520px, nên form dừng giữa
 * cột. Bỏ giới hạn để form lấp hết cột phải — mép phải cột trùng mép phải
 * .wrap, cũng là mép phải .header__cta.
 */
.register-section .msf-form {
	max-width: none;
}