/* ============================================================
   BỐ CỤC TỪNG MỤC

   Cả trang là một tờ giấy đang được chấm, nên mọi mục dùng chung
   một lưới ba cột của bài kiểm tra:
     [lề trái: số thứ tự cô khoanh đỏ] [thân bài] [lề phải: lời phê]
   Không có mục nào là "thẻ đặt trên nền". Thân bài nằm thẳng trên
   giấy; lời phê nằm ngoài lề, ngang hàng với dòng nó nói tới.
   ============================================================ */

/* --- Thanh trên: dòng "Môn / Lớp" của đầu bài kiểm tra ----- */

.exam-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}

.exam-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding-block: 0.75rem;
}

.exam-head__name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.015em;
}

.exam-head__name .field-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--graphite);
}

.exam-nav {
    display: none;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.75rem);
}

.exam-nav a {
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--graphite);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.exam-nav a:hover {
    color: var(--red-deep);
    border-bottom-color: var(--red);
}

/* Nút trong thanh điều hướng phải thắng màu chữ của .exam-nav a */
.exam-nav a.btn,
.exam-nav a.btn:hover {
    color: var(--white);
    border-bottom-color: transparent;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    background: none;
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
}

.exam-head__drawer {
    display: none;
    padding-bottom: var(--s2);
    border-top: 1px dashed var(--paper-edge);
    padding-top: var(--s2);
}

.exam-head__drawer.is-open {
    display: block;
}

.exam-head__drawer a {
    display: block;
    font-weight: 600;
    text-decoration: none;
    padding-block: 0.5rem;
    color: var(--ink);
    border-bottom: 1px solid var(--paper-edge);
}

@media (min-width: 62rem) {
    .exam-nav {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }

    .exam-head__drawer {
        display: none !important;
    }
}

/* --- Lưới bài kiểm tra: lề trái / thân bài / lời phê ------- */

.exam-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s2);
}

.exam-grid__margin {
    /* Lề trái: nơi cô ghi số thứ tự và điểm — không phải chỗ trống */
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}

.exam-grid__body {
    min-width: 0;
}

.exam-grid__notes {
    /* Lời phê nằm ngoài lề phải, đúng như bài chấm tay */
    padding-top: var(--s1);
}

/* Màn hình đầu có thêm phần đuôi (lời dẫn + ba nút liên hệ). Trên điện
   thoại thứ tự phải là: lời khẳng định → bài văn → ô điểm → liên hệ.
   Câu miễn trừ trung thực không được đứng trước câu phải giành niềm tin. */
.exam-grid--hero {
    grid-template-areas:
        "body"
        "margin"
        "tail"
        "notes";
}

.exam-grid--hero .exam-grid__body {
    grid-area: body;
}

.exam-grid--hero .exam-grid__margin {
    grid-area: margin;
}

.exam-grid--hero .exam-grid__tail {
    grid-area: tail;
}

.exam-grid--hero .exam-grid__notes {
    grid-area: notes;
}

@media (min-width: 62rem) {
    .exam-grid {
        grid-template-columns: 9rem minmax(0, 1fr) 15rem;
        gap: var(--s3);
    }

    /* Cột lề trải suốt hai hàng, nếu không chiều cao của nó sẽ đẩy phần
       đuôi xuống và mở ra một khoảng trống chết giữa bài văn và nút liên hệ. */
    .exam-grid--hero {
        grid-template-areas:
            "margin body  notes"
            "margin tail  notes";
        align-items: start;
    }

    .exam-grid__margin {
        justify-content: flex-end;
        padding-top: 0.25rem;
    }

    /* Mục không có lời phê thì thân bài chiếm luôn cột lề phải */
    .exam-grid--wide {
        grid-template-columns: 9rem minmax(0, 1fr);
    }
}

/* --- Màn hình đầu: trang CHÍNH LÀ tờ bài văn ---------------
   Không thẻ, không viền, không bóng. Chữ nằm thẳng trên giấy. */

.hero {
    padding-top: clamp(var(--s3), 4vw, var(--s4));
    padding-bottom: clamp(var(--s4), 6vw, var(--s5));
}

/* Dòng nhận dạng của tờ giấy, sống trong cột lề cạnh ô điểm. Không
   phải nhãn chữ hoa đặt trên tiêu đề — đó là thứ trang này từ chối. */
.hero__meta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--graphite);
    margin: 0 0 var(--s1);
    max-width: none;
}

.hero__title {
    color: var(--ink);
    max-width: 20ch;
    margin-bottom: var(--s3);
}

/* Ở cỡ chữ lớn, đáy hộp dòng nằm quá xa chân chữ: kéo nét gạch chân
   lên sát chữ, nếu không nó trông như một đường kẻ rời. */
.hero__title .mark-underline {
    padding-bottom: 0;
    background-position: 0 calc(100% - 0.16em);
}

.hero__title .mark-underline--double {
    background-position: 0 calc(100% - 0.16em), 0 calc(100% - 0.16em - 4px);
}

/* Đoạn văn của học trò dùng dòng kẻ CỦA TỜ GIẤY, không tự vẽ dòng kẻ
   riêng và không sơn đè nền.

   Đã thử cho khối này tự trải nền đục và tự kẻ dòng để chữ ngồi đúng
   trên vạch: chữ ngồi đúng thật, nhưng pha của nó lệch khỏi pha dòng kẻ
   của tờ giấy, nên dòng kẻ trong khối và dòng kẻ ở cột lời phê bên cạnh
   không thẳng hàng. Một tờ giấy hai hệ dòng kẻ lệch pha là mâu thuẫn
   nặng hơn hẳn việc chữ nằm lệch vài pixel so với vạch.

   Khóa pha tuyệt đối cần biết trước chiều cao mọi thứ phía trên, mà h1
   thì xuống dòng khác nhau theo bề ngang màn hình; ép line-height của
   h1 về bội số 32px sẽ bóp dấu tiếng Việt chồng lên nhau. Nên: một hệ
   dòng kẻ duy nhất, cùng bước 32px với chữ tay, chấp nhận lệch pha. */
.handwriting {
    font-family: var(--font-hand);
    font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
    line-height: var(--lh);
    color: var(--ink);
}

.handwriting p {
    max-width: none;
    margin: 0;
}

.hero__sub {
    font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
    color: var(--graphite);
    max-width: 36rem;
    margin-top: var(--s3);
}

/* Ba kênh liên hệ: một hàng, một kiểu, ba ô bằng nhau. Cả ba phải nằm
   trong khung nhìn đầu tiên kể cả trên điện thoại, nên ở màn hẹp nút
   thu gọn lại chứ không xuống hàng. */
.actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: var(--s3);
    max-width: 44rem;
}

@media (max-width: 33.9375rem) {
    .actions .btn {
        padding: 0.75rem 0.375rem;
        font-size: 0.9375rem;
        gap: 0.375rem;
    }

    .actions .btn__icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (min-width: 34rem) {
    .actions {
        gap: 0.75rem;
    }
}

/* Ô điểm ở lề trái, kèm ngay lời nói rõ đây là bài minh họa */
.hero__score {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.exam-grid__tail {
    min-width: 0;
}

/* Trên điện thoại cột lề nằm giữa bài văn và ba nút liên hệ, nên nó
   phải nằm ngang cho gọn — nếu xếp dọc như trên desktop thì cả ba nút
   bị đẩy khỏi khung nhìn đầu tiên, đúng thứ không được phép xảy ra. */
@media (max-width: 61.9375rem) {
    .hero__score {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s2);
    }

    .hero__meta {
        width: 100%;
        margin-bottom: 0;
    }

    .score {
        flex-direction: row;
        align-items: baseline;
        gap: var(--s2);
    }

    .hero__score .disclosure {
        flex: 1 1 14rem;
        margin-bottom: 0;
    }
}

/* --- Kết quả: bảng điểm, không phải hàng thẻ số liệu ------- */

.result-lead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
}

.result-lead__value {
    font-family: var(--font-display);
    font-size: clamp(5rem, 17vw, 12rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.05em;
}

.result-lead__unit {
    font-size: 0.45em;
}

.result-lead__label {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--white);
    max-width: 14ch;
    margin: 0;
}

/* Bảng điểm: hàng kẻ, số nằm cột phải, đúng grammar của sổ điểm */
.grade-list {
    margin: var(--s4) 0 0;
    border-top: 2px solid rgba(255, 255, 255, 0.55);
}

.grade-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    padding-block: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.grade-list__key {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.88);
}

.grade-list__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1;
}

/* Lời của một em cụ thể, giữ nguyên là lời kể, không vẽ thành biểu đồ */
.self-report {
    margin-top: var(--s4);
    border-left: 3px solid rgba(255, 255, 255, 0.6);
    padding-left: var(--s2);
    max-width: 40rem;
}

.self-report blockquote {
    margin: 0 0 var(--s1);
    font-family: var(--font-hand);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    line-height: 1.6;
}

.self-report cite {
    font-size: 0.9375rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.82);
}

/* --- Cách cô chấm ------------------------------------------ */

.marks {
    display: grid;
    gap: var(--s3);
    margin-top: var(--s3);
}

.mark-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--s2);
    align-items: start;
}

.mark-item__glyph {
    width: 4.5rem;
    height: 3.5rem;
    overflow: visible;
}

.mark-item h3 {
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.mark-item p {
    color: var(--graphite);
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .marks {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Lớp học: từng dòng trong sổ đầu bài ------------------- */

.classes {
    margin-top: var(--s3);
    border-top: 2px solid var(--ink);
}

.class-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.125rem;
    padding-block: var(--s2);
    border-bottom: 1px solid var(--paper-edge);
}

.class-row h3 {
    color: var(--ink);
}

.class-row p {
    color: var(--graphite);
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .class-row {
        grid-template-columns: 22rem 1fr;
        gap: var(--s2);
        align-items: baseline;
    }
}

/* Lớp online: khối riêng, không lẫn vào danh sách */
.online {
    margin-top: var(--s3);
    border: 2.5px solid var(--red);
    padding: var(--s3);
    background: var(--white);
}

.online h3 {
    color: var(--red-deep);
    margin-bottom: var(--s1);
}

.online p {
    margin-bottom: 0;
    color: var(--graphite);
}

.extras {
    margin-top: var(--s3);
    color: var(--graphite);
    font-size: 0.9375rem;
}

/* --- Học trò nói ------------------------------------------- */

.voices {
    display: grid;
    gap: var(--s3);
    margin-top: var(--s3);
}

.voice {
    /* figure mang margin-inline 40px mặc định của trình duyệt — phải xóa,
       nếu không cột lệch khỏi thân bài */
    margin: 0;
    border-top: 3px solid var(--ink);
    padding-top: var(--s2);
}

.voice blockquote {
    margin: 0 0 var(--s2);
    font-family: var(--font-hand);
    font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
    line-height: 1.7;
    color: var(--ink);
}

.voice figcaption {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
}

.voice figcaption span {
    display: block;
    font-weight: 500;
    color: var(--graphite);
}

@media (min-width: 48rem) {
    .voices {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Lời phê đóng bài --------------------------------------
   Một bài văn được chấm thì kết bằng lời phê của giáo viên. Đây là
   chỗ duy nhất trên trang cô nói bằng giọng của chính mình, nên nó
   cũng là chỗ đặt lời mời cuối cùng. */

.verdict {
    margin-top: var(--s3);
    border-top: 2px solid rgba(255, 255, 255, 0.55);
    padding-top: var(--s2);
    max-width: 42rem;
}

.verdict p {
    margin: 0;
    max-width: none;
    font-family: var(--font-hand);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.6;
}

.verdict__by {
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

/* --- Liên hệ: ba kênh ngang hàng --------------------------- */

.channels {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s3);
}

.channel {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2);
    text-decoration: none;
    border: 2.5px solid rgba(255, 255, 255, 0.55);
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.channel:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
}

.channel__icon {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.channel__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.2;
    display: block;
}

.channel__detail {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.84);
}

@media (min-width: 48rem) {
    .channels {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Chân trang -------------------------------------------- */

.foot {
    background: var(--ink);
    color: var(--white);
    padding-block: var(--s4);
}

.foot__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s2);
    font-size: 0.9375rem;
}

.foot a {
    color: var(--white);
}

.foot__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
}