/*
* Sửa cách xuống dòng của tiêu đề.
*
* Vấn đề gốc: Manus đặt
cứng canh theo desktop. Trên mobile,
đó cộng
* với wrap tự nhiên tạo ra dòng lẻ chỉ 1 chữ ("nay,", "mai.", "đầu.") — lỗi orphan.
*
* File này được middleware chèn vào nên KHÔNG mất khi export lại Manus.
* Trình duyệt cũ bỏ qua các thuộc tính này, không hỏng gì.
*/
/*
* 1) Tiêu đề CÓ
: chỉ dùng 'pretty'.
* 'pretty' chỉ kéo chữ xuống để dòng cuối không còn 1 chữ trơ trọi,
* KHÔNG chia lại toàn bộ khối nên các
đánh dấu ranh giới câu vẫn nguyên.
*
* ĐÃ ĐO VÀ BỎ 'balance' cho nhóm này: Chromium gộp cả khối khi cân dòng,
* làm "Lộ trình rõ ràng. / Bứt phá HSK." (2 dòng đúng 2 câu) vỡ thành
* "Lộ trình rõ / ràng. Bứt / phá HSK.".
*/
h1,
h2,
h3 {
text-wrap: pretty;
}
/*
* 2) Tiêu đề KHÔNG có
: dùng 'balance' để chia đều số chữ mỗi dòng.
* Đây là nhóm bị wrap tự nhiên xấu nhất, ví dụ
* "Người truyền / lửa cho hành / trình HSK." -> "Người truyền lửa / cho hành trình HSK."
*/
h1:not(:has(br)),
h2:not(:has(br)),
h3:not(:has(br)) {
text-wrap: balance;
}
/* Đoạn văn: chống chữ mồ côi ở dòng cuối. */
p {
text-wrap: pretty;
}
/*
* 3) Hai thẻ cơ sở phải ngang nhau.
* Manus đẩy thẻ thứ hai xuống 28px bằng class `md:translate-y-7` (kiểu so le).
* Dùng thuộc tính `translate` (Tailwind v4) chứ không phải `transform`,
* nên phải ghi đè cả hai cho chắc.
*/
.document-panel[class*="translate-y-7"] {
translate: none !important;
transform: none !important;
}
/*
* 4) Khổ tablet / laptop nhỏ: lưới 2 cột bắt đầu từ 768px làm cột tiêu đề
* teo còn 174-197px trong khi cỡ chữ vẫn 54-63px -> mỗi dòng ~3 ký tự.
* Đo được ở 820px: "Lộ / trình / rõ / ràng. / Bứt / phá / HSK." (7 dòng).
* Cho xếp 1 cột tới 1100px để tiêu đề có đủ chiều rộng.
*/
@media (min-width: 768px) and (max-width: 1100px) {
/* Bắt mọi biến thể: md:grid-cols-2, md:grid-cols-[.37fr_1fr], md:grid-cols-3 ... */
[class*="md:grid-cols-"] {
grid-template-columns: 1fr !important;
}
/* items-end trong lưới 1 cột làm chữ dính đáy ô, bỏ đi. */
[class*="md:items-end"] {
align-items: start !important;
}
}
/*
* 5) Desktop rộng: cột tiêu đề của mục "Người truyền lửa..." chỉ được .37fr
* = 335px với cỡ chữ 57px, nên cắt gãy cụm "truyền lửa" / "hành trình".
* Nới lên .55fr (~440px) để chia dòng gọn hơn.
*/
@media (min-width: 1101px) {
/*
* Đo được: "cho hành trình HSK." rộng 512px ở cỡ 57px.
* Cột phải >= 512px thì text-wrap:balance mới chia được 2 dòng
* "Người truyền lửa / cho hành trình HSK."; hẹp hơn là nó buộc phải cắt 3 dòng.
* Đặt sàn 520px để mọi khổ desktop đều đủ. Chỉ 1 section dùng lưới này.
*/
[class*="grid-cols-[.37fr_1fr]"] {
grid-template-columns: minmax(520px, 0.72fr) minmax(0, 1fr) !important;
}
}