/* ---------------------------------------------------------------------------
   Trang Câu chuyện Cơm Lệ — dựng theo bản present Figma (node 4029:795).

   Khung thiết kế 1920 x 7861. Số đo đọc trực tiếp từ ảnh chụp bản present rồi
   quy về pixel thiết kế, nên các con số lẻ là CỐ Ý. Mốc dọc chính:

     header 0–79 · minh hoạ hero 180–773 · câu dẫn 845–876
     "Bữa cơm mang tên mẹ" 1107–1295 · số liệu 1377–1478
     vòm cong đỉnh 1639.5 · "( Chuyện Cơm Lệ )" 1778–1919 · phụ đề 1951–2000
     mốc 2015 bắt đầu 2160 · mốc 2026 kết thúc 6988 · chân trang 7151

   CẢ BA khối đầu (hero, tên, số liệu) dùng CHUNG một nền kem --brand-2, liền
   mạch tới tận chân trang; bản dựng cũ đổi nền ở giữa nên có một vệt cắt ngang.
   --------------------------------------------------------------------------- */

:root {
    /* Đỏ đất của nhãn hero và đoạn mô tả mốc — KHÔNG phải --status-error
       (#AF2234) như bản dựng cũ; đọc điểm ảnh trên bản present ra #B95C55. */
    --clay: #B95C55;
}

.hero-about,
.about-name,
.about-stats,
.timeline { background: var(--brand-2); }

/* ---- Hero ---- */
.hero-about { position: relative; padding-block-start: 180px; }
/* Ba cột trong khung nội dung 1440: hai cột bên rộng 360 (tâm rơi đúng 420 và
   1500 như bản present), cột giữa 720 nhưng minh hoạ rộng 804 nên tràn đều
   sang hai bên — đúng như thiết kế. */
.hero-about__inner {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    display: grid; grid-template-columns: 360px minmax(0, 1fr) 360px;
    align-items: start;
    text-align: center;
}
.hero-about__figure {
    grid-column: 2;
    justify-self: center;
    /* 650 = đúng khổ viewBox của file SVG; nét vẽ trên bản present cũng rộng
       650 và cao 595, nên đặt đúng khổ gốc là khớp. */
    inline-size: 650px; max-inline-size: none;
}
.hero-about__side { margin-block-start: 166px; }
.hero-about__han {
    font-family: var(--font-display); font-weight: 400;
    font-size: 70px; line-height: 70px;
    color: var(--brand-1);
}
/* Hai dấu ngoặc là KHỐI RIÊNG cao bằng cả hai dòng chữ (đo trên bản present:
   nét ngoặc cao ~130 trong khi chữ hoa chỉ ~34). Để chúng là ký tự thường
   trong dòng thì chúng chỉ cao bằng một dòng chữ, nhìn khác hẳn. */
.hero-about__label {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-block-start: 29px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 70px;
    color: var(--clay);
}
.hero-about__paren {
    font-size: 130px; line-height: 0.72;
    font-weight: 300;
}
.hero-about__icon { inline-size: 136px; margin-inline: auto; margin-block-start: 16px; }
.hero-about__side:nth-of-type(2) .hero-about__icon { inline-size: 209px; }

.hero-about__lead {
    margin-block-start: 62px;
    text-align: center;
    font-family: var(--font-display); font-weight: 400;
    font-size: 28px; line-height: 36px;
    color: var(--brand-4);
}

/* ---- Bữa cơm mang tên mẹ ---- */
/* Khối rộng 1210 (mép chữ 360…1570 trên bản present), cột tiêu đề 258, khoảng
   hở 44, phần còn lại là đoạn văn CĂN ĐỀU HAI BIÊN. */
.about-name {
    width: min(100% - var(--gutter) * 2, 1210px);
    margin-inline: auto;
    display: grid; grid-template-columns: 258px minmax(0, 1fr); column-gap: 44px;
    padding-block-start: 218px;
}
.about-name__title {
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 58px;
    color: var(--brand-1);
}
.about-name__body {
    text-align: justify;
    font-size: 20px; line-height: 28px;
    color: var(--brand-4);
}

/* ---- Số liệu ---- */
/* Bốn cột đều nhau trong khung 1440 trừ 60 mỗi bên → tâm cột 465/795/1125/1455,
   khớp bản present (461/791/1127/1445). */
.about-stats {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    padding-inline: 60px;
    padding-block-start: 62px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
}
.stat__value {
    font-family: var(--font-display); font-weight: 400;
    font-size: 60px; line-height: 70px;
    color: var(--brand-1);
}
.stat__label { margin-block-start: 22px; font-size: 20px; line-height: 28px; color: var(--brand-4); }

/* ---- Dòng thời gian ---- */
.timeline {
    position: relative;
    padding-block: 296px 0;
    /* Hoạ tiết vảy ngói chỉ phủ dải trên của khối (đo trên bản present: từ
       y≈2080 đến y≈2840), phía dưới là nền kem trơn. */
    padding-block-end: 163px;
    background:
        linear-gradient(180deg, transparent 0%, transparent calc(100% - 833px),
                        color-mix(in srgb, var(--brand-1) 42%, transparent) 100%),
        var(--brand-2);
}
/* Hoạ tiết vảy ngói chỉ phủ MỘT DẢI ở phần trên (bản present: y 2080…2840, tức
   611…1371 tính từ mép trên khối này), không rải khắp nền. */
.timeline::before {
    content: ""; position: absolute;
    inset-block-start: 611px; inset-inline: 0; block-size: 760px;
    background: url("/img/about/pattern-vay.svg") 0 0 / 117px 120px repeat;
    opacity: .9; pointer-events: none;
}
/* Vòm cong: đỉnh cao hơn mép trái/phải 97, chạy hết bề ngang. */
.timeline__arc {
    position: absolute; inset-block-start: 161px; inset-inline: 0;
    inline-size: 100%; block-size: 100px;
    pointer-events: none;
}

.timeline__header { text-align: center; }
.timeline__title {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 60px;
    color: var(--brand-4);
}
/* Ngoặc của tiêu đề timeline CÙNG MÀU nâu với chữ, không phải màu vàng. */
.timeline__paren { font-size: 130px; line-height: 0.72; font-weight: 300; }
.timeline__lead {
    margin-block-start: 60px;
    font-size: 20px; line-height: 28px;
    color: var(--brand-1);
}

.timeline__track {
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    margin-block-start: 159px;
    /* Bản present xếp các mốc CHỒNG LẤN nhau chút ít (mốc sau bắt đầu trước khi
       mốc trước kết thúc) và mỗi mốc lệch một kiểu vì được đặt tay. Ở đây dùng
       khoảng hở ĐỀU 1px — con số cho ra đúng tổng chiều cao 4828 của cả dòng
       thời gian, nhờ vậy mốc đầu, mốc 2024 và mốc cuối rơi đúng vị trí thiết
       kế; ba mốc còn lại lệch 60–130px so với bản present. */
    display: grid; row-gap: 1px;
}
/* MỘT đường kẻ đứt chạy dọc chính giữa suốt timeline. */
.timeline__track::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%;
    border-inline-start: 1px dashed var(--brand-1);
}
.timeline__year { position: relative; inline-size: 50%; }
/* Mốc LẺ nằm nửa TRÁI trục, mốc CHẴN nửa phải — bản present bắt đầu bằng 2015
   bên trái. */
.timeline__year:nth-child(odd)  { justify-self: start; padding-inline-end: 40px; }
.timeline__year:nth-child(even) { justify-self: end; padding-inline-start: 40px; }

/* Nhãn năm đo được cao ~106 nét chữ → cỡ 150px, không phải 72px như bản cũ. */
.timeline__year-label {
    font-family: var(--font-display); font-weight: 400;
    font-size: 150px; line-height: 110px;
    color: var(--brand-1);
}
/* Nhãn năm canh PHẢI: mốc trái canh theo mép phải khối chữ (sát trục), mốc phải
   canh theo mép phải TẤM ẢNH (rộng 616) — đúng như bản present. */
.timeline__year-label { text-align: end; }
.timeline__year:nth-child(even) .timeline__year-label { inline-size: 616px; }

/* Khối chữ rộng 300; ảnh dùng chung mép với khối chữ nhưng được phép rộng hơn. */
.milestone { inline-size: 300px; }
.timeline__year:nth-child(odd) .milestone { margin-inline-start: auto; }
/* Khung ảnh trong bản present là kích thước CỐ ĐỊNH cho từng mốc, không suy ra
   từ tỉ lệ ảnh gốc: mốc bên phải 616x384, mốc bên trái 273x409, riêng mốc đầu
   tiên 568x408. Ảnh tự cắt vừa khung bằng object-fit: cover. */
.milestone__photo {
    display: block;
    margin-block-start: 32px; margin-block-end: 32px;
    max-inline-size: none;
    object-fit: cover;
}
.timeline__year:nth-child(odd) .milestone__photo  { inline-size: 273px; block-size: 409px; }
.timeline__year:nth-child(even) .milestone__photo { inline-size: 616px; block-size: 384px; }
.timeline__year:first-child .milestone__photo     { inline-size: 568px; block-size: 408px; }
/* Mốc đầu tiên có khối chữ HẸP hơn (250 thay vì 300) — đo trên bản present:
   dòng "Thành lập cơ sở đầu tiên" ngắt trước chữ "tại", chỉ khớp khi khối rộng
   khoảng 250. Nhờ vậy mép trái khối (và tấm ảnh) cũng rơi đúng x=670. */
.timeline__year:first-child .milestone { inline-size: 250px; }

.milestone__month { font-size: 16px; line-height: 24px; color: var(--brand-1); }
.milestone__title {
    font-size: 19px; line-height: 28px; font-weight: 500;
    color: var(--brand-4);
}
/* Đoạn mô tả thụt đầu dòng và dùng màu đỏ đất. */
.milestone__desc {
    margin-block-start: 6px;
    font-size: 16px; line-height: 24px;
    color: var(--clay); text-indent: var(--sp-8);
}
.milestone + .milestone { margin-block-start: var(--sp-40); }

/* Mép giấy chuyển dần sang nâu trước khi vào chân trang — là LỚP NỀN chồng lên
   phần dưới của khối, không phải một khối trống thêm vào (thêm khối thì trang
   dài thêm gần 1000px so với thiết kế). */