/* ============================================================
   NÉT CHẤM ĐỎ — hệ thống linh kiện của trang
   Trang này không có "card", "badge", "pill". Nó có nét bút:
   gạch chân, gạch bỏ, khoanh tròn, lời phê bên lề, ô điểm.

   Nguyên tắc: trạng thái MẶC ĐỊNH là nét ĐÃ VIẾT XONG. Chỉ khi
   JavaScript chạy được (html.js) mới xóa nét đi để viết lại theo
   nhịp cuộn. Nhờ vậy JS hỏng thì trang vẫn đầy đủ, không trắng.
   ============================================================ */

/* --- Chữ viết tay của cô ----------------------------------- */

.hand {
    font-family: var(--font-hand);
    color: var(--red);
    /* Patrick Hand đặt dấu tiếng Việt hơi cao: nới dòng để không cụt */
    line-height: 1.45;
}

/* --- Gạch chân: nét kéo từ trái sang phải -------------------
   Dùng background-image chứ không dùng ::after tuyệt đối, vì câu
   được gạch thường xuống dòng mà ::after chỉ bám hộp dòng đầu. */

.mark-underline {
    display: inline;
    background-image: linear-gradient(var(--red), var(--red));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 2px;
}

.mark-underline--double {
    padding-bottom: 5px;
    background-image: linear-gradient(var(--red), var(--red)),
        linear-gradient(var(--red), var(--red));
    background-position: 0 100%, 0 calc(100% - 4px);
    background-size: 100% 2px, 100% 2px;
}

.js .mark-underline {
    background-size: 0% 2px;
    transition: background-size 0.62s var(--ease);
}

.js .mark-underline--double {
    background-size: 0% 2px, 0% 2px;
}

.js .is-marked .mark-underline {
    background-size: 100% 2px;
}

.js .is-marked .mark-underline--double {
    background-size: 100% 2px, 100% 2px;
}

/* --- Gạch bỏ: câu bị cô xóa -------------------------------- */

.mark-strike {
    color: var(--ink-soft);
    background-image: linear-gradient(var(--red), var(--red));
    background-repeat: no-repeat;
    background-position: 0 55%;
    background-size: 100% 2px;
}

.js .mark-strike {
    background-size: 0% 2px;
    transition: background-size 0.5s var(--ease);
}

.js .is-marked .mark-strike {
    background-size: 100% 2px;
}

/* --- Nét vẽ SVG: khoanh tròn, mũi tên, ngoặc --------------- */

.mark-draw path,
.mark-draw ellipse,
.mark-draw line {
    fill: none;
    stroke: var(--red);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.js .mark-draw path,
.js .mark-draw ellipse,
.js .mark-draw line {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 0.9s var(--ease);
}

.js .is-marked .mark-draw path,
.js .is-marked .mark-draw ellipse,
.js .is-marked .mark-draw line {
    stroke-dashoffset: 0;
}

/* --- Số thứ tự mục: chữ số cô khoanh đỏ bên lề -------------
   Thay cho nhãn chữ hoa dàn chữ. Đây là ký hiệu của chính thế
   giới này, không phải quy ước của trang landing page. */

.numeral {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--red);
    padding: 0.45em 0.5em;
}

.numeral__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.field-red .numeral {
    color: var(--white);
}

.field-red .numeral__ring ellipse,
.field-red .numeral__ring path {
    stroke: var(--white);
}

/* --- Ô điểm: 6 gạch đi, 9 viết bên cạnh -------------------- */

/* Điểm cũ nằm trên, điểm mới cô viết xuống dưới — xếp dọc để cả khối
   nằm gọn trong cột lề thay vì tràn ra mép trang. */
.score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-family: var(--font-display);
    line-height: 1;
}

.score__old {
    position: relative;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--ink-soft);
    background-image: linear-gradient(var(--red), var(--red));
    background-repeat: no-repeat;
    background-position: 0 52%;
    background-size: 100% 3px;
}

.js .score__old {
    background-size: 0% 3px;
    transition: background-size 0.5s var(--ease) 0.25s;
}

.js .is-marked .score__old {
    background-size: 100% 3px;
}

.score__new {
    position: relative;
    font-size: clamp(3rem, 5.5vw, 4.25rem);
    font-weight: 800;
    color: var(--red);
    padding: 0 0.22em;
}

/* Vòng khoanh quanh điểm mới. Chữ số 9 thò xuống dưới đáy hộp chữ nên
   vòng phải kéo xuống, nếu không nó ôm hụt nửa dưới. */
.score__ring {
    position: absolute;
    inset: -10% -4% -26%;
    width: auto;
    height: auto;
    overflow: visible;
}

/* --- Lời phê bên lề ---------------------------------------- */

.margin-note {
    display: block;
    font-family: var(--font-hand);
    color: var(--red);
    font-size: 1.0625rem;
    line-height: 1.4;
    transform: rotate(-1.2deg);
}

.margin-note + .margin-note {
    margin-top: var(--s2);
}

.js .margin-note {
    opacity: 0;
    transform: translateY(6px) rotate(-1.2deg);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.js .is-marked .margin-note {
    opacity: 1;
    transform: translateY(0) rotate(-1.2deg);
}

.margin-note::before {
    content: "↳ ";
    font-family: var(--font-body);
}

/* --- Nút bấm: ô cô khoanh đỏ -------------------------------
   Ba kênh liên hệ ngang hàng nhau, nên chỉ có MỘT kiểu nút. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 0.8125rem 1.25rem;
    border: 2.5px solid var(--red);
    background: var(--white);
    color: var(--red-deep);
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
        box-shadow 0.18s var(--ease);
}

.btn:hover {
    background: var(--red);
    color: var(--white);
    /* Bóng có độ nhòe: giấy nhấc khỏi mặt bàn, không phải khối phẳng lệch */
    box-shadow: 0 6px 14px -4px rgba(168, 18, 8, 0.45);
}

/* Nút trên thanh điều hướng và trên nền đỏ: đảo ngược mực */
.btn--solid {
    background: var(--red);
    color: var(--white);
}

.btn--solid:hover {
    background: var(--red-deep);
    color: var(--white);
}

.field-red .btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white);
}

.field-red .btn:hover {
    background: var(--white);
    color: var(--red-deep);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4);
}

.btn__icon {
    /* Logo Zalo là chữ, ở 20px thành vệt mờ — cần cỡ đọc được */
    width: 1.625rem;
    height: 1.625rem;
    flex: none;
}

/* --- Tắt chuyển động: mọi nét đã viết sẵn ------------------ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .js .mark-underline {
        background-size: 100% 2px;
    }

    .js .mark-underline--double {
        background-size: 100% 2px, 100% 2px;
    }

    .js .mark-strike {
        background-size: 100% 2px;
    }

    .js .score__old {
        background-size: 118% 3px;
    }

    .js .mark-draw path,
    .js .mark-draw ellipse,
    .js .mark-draw line {
        stroke-dashoffset: 0;
    }

    .js .margin-note {
        opacity: 1;
        transform: rotate(-1.2deg);
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}