#popupModal img {
    margin: 0;
    max-height: 100%;
}

.btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem
}

@media (min-width: 768px) {
    #popupModal img {
        max-height: calc(100vh - 4rem);
    }

    #popupModal .modal-dialog {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 0;
        height: 100%;
        width: 92%;
        max-width: 1080px;
        padding: 2rem 1.5rem;
        margin: auto;
    }

    #popupModal .modal-content {
        width: auto;
        display: block;
    }
}

/* ===== Kỷ vật 1C — số hoá 3D (khớp layout web cũ) ===== */
.kyvat-1c-heading {
    text-align: center;
    font-size: 34px;
    color: #3a3a1e;
    font-weight: 700;
    margin: 6px 0 34px;
}
.kyvat-1c-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 44px;
}
.kyvat-1c-item { text-align: center; }
/* Món đầu (Máy ảnh CANON – PELLIX) chiếm trọn hàng như web cũ.
   Dùng :first-child để KHÔNG phải sửa HTML trong DB — tránh rủi ro TinyMCE làm rớt class. */
.kyvat-1c-item:first-child { grid-column: 1 / -1; }
.kyvat-1c-title {
    font-size: 26px;
    color: #222;
    font-weight: 700;
    margin: 0 0 14px;
}
.kyvat-1c-desc {
    text-align: justify;
    line-height: 1.75;
    color: #444;
    margin: 0 0 18px;
    font-size: 15px;
}
/* Tỉ lệ đo từ web cũ: món thường 610x500, món đầu full width 1280x500 */
.kyvat-1c-viewer {
    position: relative;
    width: 100%;
    aspect-ratio: 610 / 500;
    background: #ececec;
    border-radius: 4px;
    overflow: hidden;
}
.kyvat-1c-item:first-child .kyvat-1c-viewer { aspect-ratio: 1280 / 500; }
.kyvat-1c-viewer iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.kyvat-1c-credit {
    text-align: center;
    font-size: 13px;
    color: #777;
    margin-top: 24px;
}
@media (max-width: 768px) {
    .kyvat-1c-list { grid-template-columns: 1fr; gap: 30px; }
    .kyvat-1c-heading { font-size: 28px; }
    .kyvat-1c-title { font-size: 22px; }
    /* 1 cột rồi thì tỉ lệ 2.56 quá dẹt, trả về khung vuông vắn cho dễ xoay mô hình */
    .kyvat-1c-item:first-child .kyvat-1c-viewer { aspect-ratio: 610 / 500; }
}

/* ===== Đối tác — dải logo chạy + trang danh sách =====
   Bám theo mẫu D:/Layout/asiae-vn/html/index.html (section .bmc-partners):
   gap 40px, padding-block 26px, viền trên/dưới 1px, dải chữ tách bằng gạch dọc,
   logo cao 32px, track gap 60px, marquee 30s linear, mask mờ 6%/94%, hover dừng.
   Màu lấy từ palette site (--bs-* của library.min.css) thay cho --as-* của asiae. */
.partner-strip {
    --partner-line: #e6e8ec;
    background: #fff;
    border-top: 1px solid var(--partner-line);
    border-bottom: 1px solid var(--partner-line);
}
.partner-strip__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 26px;
    padding-bottom: 26px;
}
.partner-strip__title {
    flex: none;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-primary, #003F9C);
}
.partner-strip__sep {
    flex: none;
    align-self: stretch;
    width: 1px;
    background: var(--partner-line);
}
.partner-strip__marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partner-strip__track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: partner-marquee 30s linear infinite;
}
.partner-strip__track a,
.partner-strip__track span {
    flex: none;
    display: block;
    line-height: 0;
}
.partner-strip__track img {
    height: 32px;
    width: auto;
    object-fit: contain;
}
.partner-strip:hover .partner-strip__track { animation-play-state: paused; }
.partner-strip__more {
    flex: none;
    font-size: 14px;
    white-space: nowrap;
    color: var(--bs-primary, #003F9C);
}

@keyframes partner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Trang /doi-tac/ — cùng ngôn ngữ thị giác với dải trên trang chủ */
.partner-page { --partner-line: #e6e8ec; }
.partner-page__title {
    text-align: center;
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--bs-primary, #003F9C);
}
.partner-page__sep {
    display: block;
    width: 64px;
    height: 2px;
    margin: 0 auto 40px;
    background: var(--bs-primary, #003F9C);
}
.partner-page__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.partner-page__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--partner-line);
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
a.partner-page__item:hover,
a.partner-page__item:focus-visible {
    border-color: var(--bs-primary, #003F9C);
    box-shadow: 0 4px 14px rgba(0, 63, 156, .12);
}
.partner-page__item img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    object-fit: contain;
}
.partner-page__empty {
    text-align: center;
    color: var(--bs-desc, #667085);
    padding: 60px 0;
}

@media (max-width: 991px) {
    .partner-page__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .partner-strip__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .partner-strip__sep { display: none; }
    .partner-strip__marquee { width: 100%; }
    .partner-page__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .partner-page__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .partner-strip__track { animation: none; }
}


/* ===== Lich su hinh thanh Duong 1C — dung lai theo web cu (Elementor) =====
   Bam so do thuc te tu 1C-Web/1c/lich-su-hinh-thanh-duong-1c/index.html.
   Sai lech co chu dinh: khong dung webfont "Lexend Deca" cua ban cu. */
/* ===== out-hero.css ===== */
/* ==========================================================================
   Lịch sử hình thành Đường 1C — 3 khối đầu trang
   Prefix: ls1c-hero / ls1c-intro / ls1c-birth
   Đo từ: 1C-Web/1c/lich-su-hinh-thanh-duong-1c/index.html
           + wp-content/uploads/elementor/css/post-745.css
   ========================================================================== */

/* --- Token dùng chung cho 3 khối (khai báo lặp, không tạo class mới) ------ */
.ls1c-hero,
.ls1c-intro,
.ls1c-birth {
  --ls1c-white: #ffffff;
  --ls1c-ink: #000000;
  --ls1c-beige: #c7c3ad;
  --ls1c-green-dark: #455039;
  --ls1c-muted: #676767;

  /* Full-bleed: khối tràn mép, nội dung vẫn giới hạn trong __inner */
  width: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  box-sizing: border-box;
  position: relative;
}

.ls1c-hero *,
.ls1c-intro *,
.ls1c-birth * {
  box-sizing: border-box;
}

/* 100vw tính CẢ thanh cuộn dọc => khối full-bleed thừa ~nửa thanh cuộn ở mép
   phải và sinh scroll ngang. Cắt phần thừa ngay ở gốc tài liệu.
   Dùng `clip` (không phải `hidden`) để không phá position:sticky,
   và dùng :has() để chỉ áp dụng cho trang có 3 khối này. */


/* ==========================================================================
   [0] ls1c-hero — nền đen + ảnh nền, chữ trắng
   Đo @1440: section h = 620.8px, bg #000, container min-height 50vh (450px),
   column padding 300px 0 100px, text-align center
   ========================================================================== */
.ls1c-hero {
  background-color: var(--ls1c-ink);
  overflow: hidden;
  isolation: isolate;
}

/* Overlay ảnh: background-position 0 -381px, cover, no-repeat, opacity .5,
   background-attachment fixed chỉ từ 1025px trở lên (theo post-745.css) */
.ls1c-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/1c-media/wp-content/uploads/2024/02/3052020huyen8670-1.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
}

.ls1c-hero__inner {
  max-width: 1140px;
  margin-inline: auto;
  min-height: 50vh;
  padding-block: 300px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Eyebrow: 24px / 700 / line-height 1.2 / #fff, margin-bottom 20px */
.ls1c-hero__eyebrow {
  margin: 0 0 20px;
  color: var(--ls1c-white);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

/* H1: 70px / 500 / line-height 1 / #fff — mobile giảm bằng clamp */
.ls1c-hero__title {
  margin: 0 0 20px;
  color: var(--ls1c-white);
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.375rem);
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  overflow-wrap: break-word;
}

/* Divider: rộng 30px, border 2px solid #fff, wrapper padding 5px 0 */
.ls1c-hero__rule {
  display: block;
  width: 30px;
  height: 0;
  margin: 5px auto;
  border-top: 2px solid var(--ls1c-white);
}

@media (min-width: 1025px) {
  .ls1c-hero__bg {
    background-position: 0 -381px;
    background-attachment: fixed;
  }
}

/* Tablet ≤1024: section padding-inline 25px, offset trên 350px, dưới 100px,
   container min-height 60vh, ảnh nền về 0 0 / scroll */
@media (max-width: 1024px) {
  .ls1c-hero {
    padding-inline: calc(50vw - 50% + 25px);
  }
  .ls1c-hero__inner {
    min-height: 60vh;
    padding-block: 350px 100px;
  }
}

/* Mobile ≤767: padding-inline 20px, offset trên 350px, dưới 75px,
   container min-height 50vh */
@media (max-width: 767px) {
  .ls1c-hero {
    padding-inline: calc(50vw - 50% + 20px);
  }
  .ls1c-hero__inner {
    min-height: 50vh;
    padding-block: 260px 75px;
  }
}

/* ==========================================================================
   [1] ls1c-intro — ảnh nền bg-map + overlay đen 10%, chữ trắng
   Đo @1440: padding 175px 0, container max-width 940px, h2 60px/500 capitalize
   ========================================================================== */
.ls1c-intro {
  background-color: var(--ls1c-ink);
  background-image: url("/1c-media/wp-content/uploads/2024/02/bg-map.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  padding-block: 175px;
  overflow: hidden;
  isolation: isolate;
}

/* Overlay: background-color #000, opacity .1 */
.ls1c-intro__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ls1c-ink);
  opacity: 0.1;
  pointer-events: none;
}

.ls1c-intro__inner {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow: 24px / 500 / lh 1.2 / #fff, margin-bottom 20px */
.ls1c-intro__eyebrow {
  margin: 0 0 20px;
  color: var(--ls1c-white);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}

/* H2: 60px / 500 / lh 1 / #fff / text-transform capitalize
   (bản cũ giữ nguyên text thường, viết hoa đầu từ bằng CSS) */
.ls1c-intro__title {
  margin: 0 0 20px;
  color: var(--ls1c-white);
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  text-transform: capitalize;
  overflow-wrap: break-word;
}

/* Divider: rộng 50px, border 2px solid #fff, wrapper padding 5px 0 */
.ls1c-intro__rule {
  display: block;
  width: 50px;
  height: 0;
  margin: 5px auto 20px;
  border-top: 2px solid var(--ls1c-white);
}

.ls1c-intro__body {
  color: var(--ls1c-white);
  font-size: 1rem;
  line-height: 1.5;
}

.ls1c-intro__body p {
  margin: 0 0 1.6em;
}

.ls1c-intro__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ls1c-intro-item;
}

.ls1c-intro__list li {
  margin: 0 0 1.6em;
  counter-increment: ls1c-intro-item;
}

.ls1c-intro__list li::before {
  content: counter(ls1c-intro-item) ". ";
}

.ls1c-intro__body > *:last-child,
.ls1c-intro__list li:last-child {
  margin-bottom: 0;
}

/* Tablet ≤1024: padding 125px 25px, body thụt vào 70px mỗi bên */
@media (max-width: 1024px) {
  .ls1c-intro {
    padding-block: 125px;
    padding-inline: calc(50vw - 50% + 25px);
  }
  .ls1c-intro__body {
    padding-inline: 70px;
  }
}

/* Mobile ≤767: padding 75px 20px 55px, body bỏ thụt lề */
@media (max-width: 767px) {
  .ls1c-intro {
    padding-block: 75px 55px;
    padding-inline: calc(50vw - 50% + 20px);
  }
  .ls1c-intro__body {
    padding-inline: 0;
  }
}

/* ==========================================================================
   [2] ls1c-birth — nền #c7c3ad, 2 cột 50/50 (ảnh trái + text phải)
   Đo @1440: section h = 703.8px, container min-height 65vh (585px),
   cột 720px + 720px, cột phải padding 10% 15% 8% 15%
   ========================================================================== */
.ls1c-birth {
  background-color: var(--ls1c-beige);
  padding-inline: 0;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 65vh;
}

.ls1c-birth__media {
  position: relative;
  background-color: var(--ls1c-ink);
  min-height: 50px; /* spacer 50px của bản cũ */
  overflow: hidden;
}

/* Ảnh: cover, center center, opacity .9 trên nền đen (khớp overlay bản cũ) */
.ls1c-birth__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.9;
}

.ls1c-birth__content {
  padding: 10% 15% 8%;
  text-align: center;
  align-self: center;
}

/* Divider: rộng 50px, border 1px solid #455039, wrapper padding 15px 0 */
.ls1c-birth__rule {
  display: block;
  width: 50px;
  height: 0;
  margin: 15px auto 30px;
  border-top: 1px solid var(--ls1c-green-dark);
}

/* Eyebrow: 30px / 500 / lh 1 / #000, margin-bottom 30px */
.ls1c-birth__eyebrow {
  margin: 0 0 30px;
  color: var(--ls1c-ink);
  font-size: clamp(1.625rem, 1.45rem + 0.5vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
}

/* H2: 60px / 500 / lh 1 / #000 / capitalize, margin-bottom 30px */
.ls1c-birth__title {
  margin: 0 0 30px;
  color: var(--ls1c-ink);
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  text-transform: capitalize;
  overflow-wrap: break-word;
}

/* Body: 16px / lh 1.5 / #676767, canh giữa, p margin-bottom 1.6em */
.ls1c-birth__body {
  color: var(--ls1c-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.ls1c-birth__body p {
  margin: 0 0 1.6em;
}

.ls1c-birth__body p:last-child {
  margin-bottom: 0;
}

/* Tablet ≤1024: min-height 50vh, cột phải padding 12% 12% 8% */
@media (max-width: 1024px) {
  .ls1c-birth {
    min-height: 50vh;
  }
  .ls1c-birth__content {
    padding: 12% 12% 8%;
  }
  .ls1c-birth__rule {
    margin-bottom: 20px;
  }
  .ls1c-birth__eyebrow,
  .ls1c-birth__title {
    margin-bottom: 20px;
  }
}

/* Mobile ≤767: xếp dọc, ảnh cao 350px (spacer bản cũ), padding 15% 5% 12% */
@media (max-width: 767px) {
  .ls1c-birth {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ls1c-birth__media {
    min-height: 350px;
    height: 350px;
  }
  .ls1c-birth__content {
    padding: 15% 5% 12%;
  }
}

/* ==========================================================================
   GHI CHÚ BÀN GIAO — đã đo được gì / chỗ nào chưa khớp bản cũ
   --------------------------------------------------------------------------
   ĐO THẬT (agent-browser, viewport 1440x900 / 921 / 768 / 544 / 375,
   getBoundingClientRect + getComputedStyle trên bản cũ, cộng với việc đọc
   trực tiếp wp-content/uploads/elementor/css/post-745.css):

   [0] hero  (section .elementor-element-e86f1e2)
       - height 620.8px @1440 (= padding 300 + 220.8 nội dung + 100)
       - background-color rgb(0,0,0); overlay ảnh 3052020huyen8670-1.jpg,
         background-position 0px -381px, size cover, no-repeat, opacity 0.5,
         background-attachment: fixed CHỈ trong @media(min-width:1025px)
       - container max-width 1140px, min-height 50vh (=450px @900)
       - column padding 300px 0 100px, text-align center
       - h4 eyebrow: 24px / 700 / line-height 28.8px / #fff / margin-bottom 20px
       - h1: 70px / 500 / line-height 70px / #fff / text-transform none
       - divider: width 30px, border-block-start 2px solid #fff,
         wrapper padding 5px 0
       - Tablet ≤1024: section padding 0 25px; column margin 350px 25px 25px
         + padding 0 0 75px; container min-height 60vh; overlay 0 0
       - Mobile ≤767: section padding 0 20px; column margin 350px 0 75px
         + padding 0; container min-height 50vh

   [1] intro (section .elementor-element-f7df532)
       - height 1099.5px @1440; padding 175px 0
       - background bg-map.jpg, position top center, cover, no-repeat, scroll
       - overlay: background-color #000, opacity 0.1
       - container max-width 940px
       - h4 eyebrow 24px/500 #fff; h2 60px/500 lh 60px #fff capitalize
       - divider width 50px, 2px solid #fff, wrapper padding 5px 0
       - text 16px / line-height 24px / #fff / canh giữa; p margin-bottom 25.6px
       - khoảng cách giữa các widget: 20px
       - Tablet ≤1024: padding 125px 25px; text block padding 0 70px
       - Mobile ≤767: padding 75px 20px 55px; text block padding 0

   [2] birth (section .elementor-element-0bda652)
       - height 703.8px @1440 (viewport 1440 không scrollbar);
         container min-height 65vh (=585px @900), max-width: none (full width)
       - background-color rgb(199,195,173) = #C7C3AD
       - 2 cột 720px + 720px, items-stretch
       - cột trái: background #000 + overlay PVCT_17209-scaled.jpg,
         position center center, cover, opacity 0.9; bên trong chỉ có spacer 50px
       - cột phải: padding 10% 15% 8% 15% (theo width cột), align center
       - divider: width 50px, 1px solid rgb(69,80,57) = #455039,
         wrapper padding 15px 0
       - h3 "1966 – 1967": 30px / 500 / lh 30px / #000
       - h2 "Đường 1C ra đời": 60px / 500 / lh 60px / #000 / capitalize
       - p: 16px / lh 24px / rgb(103,103,103) = #676767 / canh giữa / mb 25.6px
       - khoảng cách widget 30px (20px ở ≤1024)
       - Tablet ≤1024: container min-height 50vh; cột phải padding 12% 12% 8%
       - Mobile ≤767: spacer cột ảnh 350px; cột phải padding 15% 5% 12% 5%

   Font-size responsive đo được trên bản cũ (Astra breakpoint 921 / 544):
       h1 hero : 70 / 70 / 70 / 70 / 70   (KHÔNG giảm — tràn trên mobile)
       h4      : 24 / 21.888 / 21.888 / 21.888 / 21.888
       h2      : 60 / 55 / 55 / 40 / 40
       h3      : 30 / 28 / 28 / 26 / 26
       p       : 16 / 14.592 …

   !! LỆCH SO VỚI SPEC (đã đo lại 2 lần để chắc chắn):
      SPEC/đề bài ghi: Heading "Đường 1C ra đời" = 30px.
      SỐ ĐO THẬT trên bản cũ: h2 "Đường 1C ra đời" = 60px / weight 500 /
      line-height 60px / text-transform capitalize; còn 30px là của
      h3 eyebrow "1966 – 1967" ngay phía trên nó.
      => Bản này dùng 60px cho tiêu đề và 30px cho eyebrow (bám theo số đo).
      Nếu chốt lại theo SPEC thì sửa .ls1c-birth__title về clamp cỡ 30px.

   CHƯA KHỚP BẢN CŨ — lý do:
   1. SAI LỆCH CÓ CHỦ ĐÍCH THEO SPEC: không import webfont "Lexend Deca"
      (bản cũ dùng font này cho toàn bộ 3 khối). Dùng font sẵn có của site
      => chiều cao dòng / độ rộng chữ sẽ lệch vài px so với số đo ở trên.
   2. Hero h1 bản cũ giữ 70px ở MỌI breakpoint (tràn chữ ở 375px). Theo yêu cầu
      đề bài, bản mới dùng clamp(2.25rem, 1.2rem + 4.6vw, 4.375rem)
      => 70px @1440, ~54.5px @768, 36px @375. Vì vậy chiều cao hero ở tablet /
      mobile KHÔNG bằng bản cũ (738px @768, 993px @375).
   3. Hero mobile ≤767: bản cũ dùng margin-top 350px + padding-bottom 75px.
      Bản mới dùng padding-block 260px 75px để khối không quá cao khi font đã
      giảm. Desktop (300/100) và tablet (350/100) giữ đúng bản cũ.
   4. h2/h3 dùng clamp thay vì 3 nấc cứng của Astra (60/55/40 và 30/28/26).
      Giá trị hai đầu khớp chính xác, khoảng giữa (≈921–1024px) chênh tối đa
      ~5px vì clamp nội suy tuyến tính.
   5. Paragraph: bản cũ scale còn 14.592px từ ≤921px (do body-scale của Astra).
      Bản mới giữ 1rem ở mọi breakpoint vì dùng typography của site đích.
   6. Ảnh khối [2]: bản cũ vẽ bằng background-image trên cột.
      Bản mới dùng <img> + object-fit:cover + opacity .9 trên nền đen để có
      alt text và lazy-load; kết quả hiển thị tương đương.
   7. Container: kit Elementor của bản cũ là 1140px (KHÔNG phải 1340px như bảng
      trong SPEC). Hero dùng đúng 1140px, intro dùng 940px, birth full-width —
      đúng theo số đo. Nếu chốt theo SPEC 1340px thì phải sửa .ls1c-hero__inner.
   8. Full-bleed dùng margin-inline: calc(50% - 50vw) +
      padding-inline: calc(50vw - 50%): nền tràn sát mép, nội dung vẫn nằm
      trong __inner. Riêng .ls1c-birth chỉ dùng margin-inline (không padding)
      vì đúng bản cũ khối này là full-width thật (2 cột 50/50, không container).
      LƯU Ý: 100vw tính CẢ thanh cuộn dọc nên khối bị thừa nửa thanh cuộn ở
      mép phải => sinh scroll ngang. Đã đo và xác nhận trên harness:
        không có rule chặn : innerHeight - clientHeight = 15px (CÓ scroll ngang)
        có html:has(...) clip: innerHeight - clientHeight = 0px  (HẾT scroll ngang)
      Vì vậy rule `` ở đầu file là BẮT BUỘC,
      không được bỏ. Dùng :has() để chỉ ảnh hưởng trang có khối này
      (Chrome 105+/Safari 15.4+/Firefox 121+). Trình duyệt không hỗ trợ :has()
      chỉ bị thừa ~8px scroll ngang, không vỡ layout.

   ĐÃ KIỂM CHỨNG LẠI TRÊN BẢN DỰNG MỚI (harness .container Bootstrap 1140px):
        vw 1440 : hero 620.8px  (bản cũ 620.8) — KHỚP TUYỆT ĐỐI
                  intro 1040px  (bản cũ 1099.5) — lệch do font hệ thống hẹp hơn
                  birth 639.2px (bản cũ 703.8)  — lệch do font hệ thống hẹp hơn
        vw 768  : hero 637.7 / intro 996.4 / birth 796.5 — không tràn ngang
        vw 375  : hero 556.8 / intro 1212.5 / birth 1027.1 — không tràn ngang
        overflow ngang (innerHeight - clientHeight) = 0 ở cả 1440 / 768 / 375.

   TODO còn lại:
   - [TODO] Chưa có route/static-file mapping "/1c-media" trong repo
     (grep "1c-media" không ra kết quả). Cần map /1c-media -> 1C-Web/1c/
     hoặc copy 3 ảnh sau vào wwwroot:
       wp-content/uploads/2024/02/3052020huyen8670-1.jpg   (đã xác nhận tồn tại)
       wp-content/uploads/2024/02/bg-map.jpg                (đã xác nhận tồn tại)
       wp-content/uploads/2024/03/PVCT_17209-scaled.jpg     (đã xác nhận tồn tại)
   - [TODO] alt text ảnh khối [2] do mình tự đặt mô tả (bản cũ là background,
     không có alt). Cần người phụ trách nội dung duyệt lại.
   ========================================================================== */

/* ===== out-timeline.css ===== */
/* =========================================================================
   ls1c-timeline — khối TIMELINE trang "Lịch sử hình thành Đường 1C"
   CSS thuần, không JS, không webfont ngoài, không !important.
   Mobile-first: mặc định 1 cột (đường kẻ lề trái) -> >=769px zigzag 2 cột.
   ========================================================================= */

.ls1c-timeline {
  /* --- design token (đo từ bản Elementor cũ) --- */
  --ls1c-beige: #c7c3ad;          /* nền khối */
  --ls1c-accent: #455039;         /* gạch ngang + chấm mốc */
  --ls1c-ink: #000;               /* mốc + lead */
  --ls1c-muted: #676767;          /* body text (đo: rgb(103,103,103)) */
  --ls1c-rule: rgba(0, 0, 0, .15);/* đường kẻ dọc (đo: border-right cột trái) */

  --ls1c-dot: 8px;                /* đường kính chấm mốc */
  --ls1c-pad: 34px;               /* khoảng cách đường kẻ -> mép chữ (mobile) */
  --ls1c-shift: 0px;              /* độ lệch zigzag của mốc bên phải */
  --ls1c-maxw: 1140px;            /* bề rộng nội dung (đo: 570 + 570) */

  --ls1c-date-fs: clamp(40px, 4.1667vw, 60px);  /* 1440 -> 60px, <=960 -> 40px */
  --ls1c-title-fs: clamp(26px, 2.0833vw, 30px); /* 1440 -> 30px, mobile -> 26px */
  --ls1c-lead-fs: clamp(18px, 1.39vw, 20px);
  --ls1c-body-fs: clamp(14.5px, 1.111vw, 16px);

  box-sizing: border-box;
  background: var(--ls1c-beige);
  color: var(--ls1c-ink);
  padding: 75px 20px 20px;

  /* Full-bleed: agent dựng khối này không làm nền tràn mép nên còn hở 2 dải
     trắng ở 1440 (đo: left 76, width 1288 trong khi viewport 1440).
     Dùng đúng kỹ thuật của khối ls1c-stats — box-shadow đổ màu ra ngoài,
     clip-path chặn bóng tràn lên/xuống khối liền kề. Không dùng 100vw vì
     100vw tính cả thanh cuộn nên sinh scroll ngang. */
  position: relative;
  box-shadow: 0 0 0 100vmax var(--ls1c-beige);
  clip-path: inset(0 -100vmax);
}

.ls1c-timeline *,
.ls1c-timeline *::before,
.ls1c-timeline *::after { box-sizing: border-box; }

/* ---------- tiêu đề khối ---------- */

.ls1c-timeline__title {
  max-width: var(--ls1c-maxw);
  margin: 0 auto;
  font-size: var(--ls1c-title-fs);
  line-height: 1;
  font-weight: 500;
  color: var(--ls1c-ink);
  text-align: center;
}

/* gạch ngắn 50px dưới tiêu đề: 45px trên / 25px + 50px dưới (đo trên bản cũ) */
.ls1c-timeline__title::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  margin: 45px auto 75px;
  background: var(--ls1c-accent);
}

/* ---------- danh sách mốc ---------- */

.ls1c-timeline__list {
  position: relative;
  max-width: var(--ls1c-maxw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* đường kẻ dọc — mobile: sát lề trái, trùng tâm chấm mốc */
.ls1c-timeline__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ls1c-dot) / 2);
  width: 1px;
  margin-left: -0.5px;
  background: var(--ls1c-rule);
}

.ls1c-timeline__item {
  position: relative;
  padding-left: var(--ls1c-pad);
  text-align: left;
}

.ls1c-timeline__card { position: relative; }

/* ---------- mốc thời gian ---------- */

.ls1c-timeline__date {
  margin: 0;
  font-size: var(--ls1c-date-fs);
  line-height: 1;
  font-weight: 500;
  color: var(--ls1c-ink);
  /* bản cũ viết hoa đầu từ bằng CSS ("Mùa khô 1968" -> "Mùa Khô 1968"),
     nhờ vậy giữ nguyên văn chuỗi trong content.json */
  text-transform: capitalize;
}

/*
  Gạch ngang + chấm mốc: 1 pseudo-element duy nhất, vẽ bằng background.
  - cao 8px, cách mốc 5px, cách nội dung kế tiếp 30px  (5 + 8 + 5 + 25 = 43px)
  - tràn ra ngoài padding của item đúng (pad + dot/2) để chấm nằm trên đường kẻ
  - radial-gradient = chấm dạng vòng (mô phỏng icon far-dot-circle 8px của bản cũ)
*/
.ls1c-timeline__date::after {
  content: "";
  display: block;
  height: var(--ls1c-dot);
  margin: 5px 0 30px calc(-1 * (var(--ls1c-pad) + var(--ls1c-dot) / 2));
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at center,
      var(--ls1c-accent) 0 1.6px,
      rgba(0, 0, 0, 0) 1.6px 2.9px,
      var(--ls1c-accent) 2.9px 4px,
      rgba(0, 0, 0, 0) 4px),
    linear-gradient(var(--ls1c-accent), var(--ls1c-accent));
  background-size:
    var(--ls1c-dot) var(--ls1c-dot),
    calc(100% - var(--ls1c-dot)) 1px;
  background-position: left center, right center;
}

/* ---------- nội dung ---------- */

.ls1c-timeline__body {
  font-size: var(--ls1c-body-fs);
  line-height: 1.5;
  color: var(--ls1c-muted);
}

.ls1c-timeline__body p { margin: 0 0 1.6em; }

.ls1c-timeline__body ol,
.ls1c-timeline__body ul {
  margin: 0 0 24px 48px;
  padding: 0;
}

.ls1c-timeline__body li { margin: 0; }

/* dòng dẫn đậm — bản cũ là <h5> 20px/24px, weight 500, #000, nằm sát body
   (đo: đáy dòng dẫn = đỉnh đoạn body đầu tiên, không có khoảng cách).
   Đặt NGOÀI .ls1c-timeline__body để không dính rule margin của <p> trong body. */
.ls1c-timeline__lead {
  margin: 0;
  font-size: var(--ls1c-lead-fs);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ls1c-ink);
}

.ls1c-timeline__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* khi dồn về 1 cột, tách các mốc cho dễ đọc
   (bản cũ ở mobile dùng padding 50px trên / 40px dưới cho mỗi cột) */
@media (max-width: 768px) {
  .ls1c-timeline__item + .ls1c-timeline__item { padding-top: 50px; }
}

/* ---------- >= 769px: zigzag 2 cột ---------- */

@media (min-width: 769px) {
  .ls1c-timeline {
    --ls1c-pad: 50px;   /* đo: padding cột trái 0 50px 0 0 / cột phải 0 0 0 50px */
    --ls1c-shift: 183px;/* đo: margin-top của .elementor-widget-wrap cột phải */
    padding: 125px 0;
  }

  .ls1c-timeline__list {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 570px + 570px @1440 */
    align-items: start;
  }

  /* đường kẻ dọc về giữa */
  .ls1c-timeline__list::before {
    left: 50%;
  }

  /* --- mốc bên trái --- */
  .ls1c-timeline__item--left {
    grid-column: 1;
    padding: 0 var(--ls1c-pad) 0 0;
    text-align: right;
  }

  .ls1c-timeline__item--left .ls1c-timeline__date::after {
    /* thụt trái 99px, tràn phải để chấm nằm trên đường kẻ giữa */
    margin-left: 99px;
    margin-right: calc(-1 * (var(--ls1c-pad) + var(--ls1c-dot) / 2));
    background-position: right center, left center;
  }

  /* danh sách trong cột trái (bản cũ không có, để dự phòng cho CMS) */
  .ls1c-timeline__item--left .ls1c-timeline__body ol,
  .ls1c-timeline__item--left .ls1c-timeline__body ul {
    margin: 0 0 24px;
    list-style-position: inside;
  }

  /* --- mốc bên phải --- */
  .ls1c-timeline__item--right {
    grid-column: 2;
    padding: 0 0 0 var(--ls1c-pad);
    margin-top: var(--ls1c-shift);
    text-align: left;
  }

  .ls1c-timeline__item--right .ls1c-timeline__date::after {
    margin-right: 100px;
    background-position: left center, right center;
  }
}

/* =========================================================================
   GHI CHÚ BÀN GIAO — số liệu đã ĐO (agent-browser, viewport 1440x900,
   file:///d:/.../1C-Web/1c/lich-su-hinh-thanh-duong-1c/index.html,
   section.elementor-top-section thứ 4 — index 3)

   ĐÃ ĐO ĐƯỢC
   - Khối: background rgb(199,195,173) = #c7c3ad; padding 125px 0 (1440),
     75px 15px (768), 75px 20px 20px (375). Cao tổng 5957px @1440.
   - Container ngoài max-width 1340px, nội dung thực 1140px (x = 143..1283).
   - 2 cột 570px + 570px, KHÔNG có gap.
     cột trái: .elementor-widget-wrap padding 0 50px 0 0
               + border-right 1px solid rgba(0,0,0,.15)  -> đường kẻ dọc ở x = 713
     cột phải: .elementor-widget-wrap padding 0 0 0 50px, border 0
   - Zigzag: cột phải có margin-top 183px @1440 (195px @768).
     Chiều cao mỗi "hàng" = 183px + chiều cao nội dung cột phải.
     Trong grid của mình: item--right { margin-top:183px } + align-items:start
     cho ra đúng cùng vị trí.
     ĐÃ ĐO LẠI SAU KHI THÊM 15 DÒNG DẪN: cả 8 hàng vẫn lệch đúng 183px và
     leftH <= 183 + rightH ở cả 7 hàng đôi -> KHÔNG phải chỉnh lại offset.
     Hàng sát ngưỡng nhất là hàng 4 ("Đầu mùa nước nổi 1968" / "Mùa xuân 1969"):
     leftH 430 vs 183 + 249 = 432 (dư 2px). Nếu font của site rộng hơn làm
     leftH vượt ngưỡng, grid tự lấy chiều cao hàng = leftH — chỉ đẩy hàng sau
     xuống vài px, không vỡ bố cục.
   - Tiêu đề "Timeline": h3, 30px / line-height 30px / weight 500 / #000 / center,
     margin-bottom 20px; gạch dưới 1px solid #455039 rộng 50px, căn giữa,
     padding 25px trên-dưới; rồi 50px padding-bottom của hàng tiêu đề
     -> tổng từ đáy tiêu đề tới mốc đầu tiên = 121px (2638 -> 2759).
   - Mốc (h2): 60px / line-height 60px / weight 500 / #000 /
     text-transform: capitalize; căn phải (cột trái), căn trái (cột phải).
     "Đầu Mùa Nước Nổi 1968" xuống 2 dòng (cao 120px) — nên bố cục gạch/chấm
     ở bản mình đi theo dòng chảy (pseudo-element trong flow), không toạ độ cứng.
     Responsive của bản cũ: 55px @768, 40px @375  -> clamp(40px, 4.1667vw, 60px).
   - Gạch ngang + chấm dưới mốc: khối cao 18px (padding 5px trên/dưới + chấm 8px),
     cách nội dung kế tiếp 25px  => tổng 43px sau mốc.
     Đường kẻ 1px solid #455039, dài 467px; chấm 8x8px màu #455039 (icon
     far-dot-circle), tâm nằm ĐÚNG trên đường kẻ dọc.
     Cột trái: gạch thụt trái 99px; cột phải: gạch thụt phải 100px.
   - Dòng dẫn (h5): 20px / 24px / weight 500 / #000; margin 0 — đáy dòng dẫn
     trùng đỉnh đoạn body đầu tiên (đo: 2910 -> 2910), và trùng đỉnh ảnh ở
     mốc 1997 (7301 -> 7301).
   - Body (text editor): 16px / 24px / #676767; <p> margin-bottom 25.6px (1.6em);
     <ol>/<ul> margin 0 0 24px 48px, list-style-position outside.
     Responsive bản cũ: 14.592px / 21.888px @768 và @375.
   - Ảnh: width = 100% bề rộng nội dung cột (520px), height auto, không bo góc,
     nằm ngay sau body (khoảng cách đến từ margin-bottom của <p> cuối).
   - Ảnh có thật trong repo: 1C-Web/1c/wp-content/uploads/2024/03/ ->
     src = /1c-media/wp-content/uploads/2024/03/<tên file>  (KHÔNG còn TODO đường dẫn).

   CHỖ CHƯA KHỚP BẢN CŨ (và lý do)
   1. Font: bản cũ dùng "Lexend Deca". Bản mình kế thừa font của site
      (SPEC yêu cầu không import webfont ngoài) -> chiều cao dòng/độ dài chữ
      sẽ lệch nhẹ, kéo theo tổng chiều cao khối khác 5957px.
   2. (ĐÃ XONG) Dòng dẫn: content.json bản cập nhật đã có trường `lead` cho đủ
      15/15 mốc -> đã render nguyên văn vào .ls1c-timeline__lead cho cả 15.
      Riêng 1997 và 06/01/2024 có `lead` == `text` (bản cũ 2 mốc này chỉ có
      dòng dẫn, không có body) -> CHỈ render __lead, bỏ hẳn .ls1c-timeline__body
      để không lặp chữ. Tổng: 15 __lead, 13 __body.
   3. Đường kẻ dọc: bản cũ dừng ở cuối hàng thứ 7 (hàng cuối chỉ có 1 mốc nên
      Elementor bỏ border). Bản mình cho đường kẻ chạy liên tục hết danh sách —
      chủ ý, nhìn liền mạch hơn và không phụ thuộc số mốc chẵn/lẻ.
   4. Chấm mốc vẽ bằng radial-gradient (vòng + tâm) thay cho <svg> far-dot-circle;
      ở kích thước 8px sai khác không nhận ra bằng mắt.
   5. Sai số toạ độ <= 1px do bản cũ dùng border-right 1px làm đường kẻ (chiếm
      chỗ trong box), còn bản mình dùng pseudo-element absolute ở left:50%.
   6. Breakpoint: bản cũ ở 768px VẪN 2 cột (chỉ gộp 1 cột ở <=767 và bỏ hẳn
      đường kẻ, chữ căn giữa). Theo yêu cầu đề bài, bản mình gộp 1 cột từ
      <=768px, dồn hết mốc về bên trái, đường kẻ dọc chuyển sang lề trái,
      chữ căn trái. Đây là sai lệch có chủ đích.
   7. Chuỗi `text` của mốc 4/1967 trong content.json bị dính rác trích xuất
      ("/*! elementor - v3.20.0 ... .elementor-widget-image img{...}") — đã cắt
      bỏ phần rác, giữ nguyên phần nội dung thật (kết thúc ở "...chưa kịp lấy
      phiên hiệu").
   8. content.json nối liền các <p>/<li> thành 1 chuỗi. Bản mình tách lại đúng
      ranh giới của bản cũ — KHÔNG thêm/bớt ký tự nào, chỉ phân bố lại vào
      <p>/<ol>/<ul> cho đúng cấu trúc gốc.

   TODO CÒN LẠI
   - Không còn TODO nội dung. Đã điền đủ 15/15 `lead` + 13 `body` + 3 ảnh,
     đường dẫn ảnh đã xác định thật (uploads/2024/03/).
   - Cỡ chữ mốc: theo số ĐO (60px @1440), không theo bảng token trong SPEC
     (SPEC ghi 30px — 30px thực ra là cỡ của tiêu đề "Timeline"). Anh An đã duyệt.

   KIỂM TRA LẦN CUỐI (sau khi thêm 15 dòng dẫn)
   - 1440: 2 cột 570 + 570 tại x = 143 / 713; lệch phải đúng 183px ở cả 7 hàng
     đôi; khoảng cách mốc -> dòng dẫn = 43px; dòng dẫn -> body = 0px;
     ảnh 520x389; scrollWidth 1425 (= 1440 - scrollbar) -> KHÔNG tràn ngang.
     Cao khối 5838px (bản cũ 5957px, lệch ~2% do khác font).
   - 768 : gộp 1 cột, mọi mốc dồn trái, đường kẻ dọc ở lề trái (left 4px),
     mốc 40px / dòng dẫn 18px; scrollWidth 753 -> KHÔNG tràn ngang.
   - 375 : 1 cột, mốc 40px / dòng dẫn 18px / body 14.5px;
     scrollWidth 360, 0 phần tử vượt mép -> KHÔNG tràn ngang.
   ========================================================================= */

/* ===== out-stats.css ===== */
/* ============================================================
   ls1c-stats — 4 dải số liệu "Lịch sử hình thành Đường 1C"
   CSS thuần, không JS, không webfont ngoài, không !important.
   Mọi số đo lấy từ bản Elementor cũ ở viewport 1440x900
   (getBoundingClientRect + getComputedStyle) — xem ghi chú cuối file.
   ============================================================ */

.ls1c-stats {
  /* nền mặc định; các modifier chỉ đổi biến này */
  --ls1c-stats-bg: #ffffff;

  position: relative;
  box-sizing: border-box;
  padding: 50px 15px;                 /* đo được: section padding 50px 0 */
  background-color: var(--ls1c-stats-bg);
  color: #000000;
  text-align: center;

  /* Full-bleed: nền tràn mép bằng box-shadow spread.
     box-shadow không sinh scrollbar ngang (khác 100vw / margin âm),
     nên khối này đặt trong .container hay ngoài .container đều an toàn.
     clip-path chặn bóng đổ tràn lên/xuống khối liền kề. */
  box-shadow: 0 0 0 100vmax var(--ls1c-stats-bg);
  clip-path: inset(0 -100vmax);
}

.ls1c-stats *,
.ls1c-stats *::before,
.ls1c-stats *::after { box-sizing: border-box; }

/* ---- Modifier nền ---- */
.ls1c-stats--grey  { --ls1c-stats-bg: #ededed; }
.ls1c-stats--white { --ls1c-stats-bg: #ffffff; }
.ls1c-stats--green { --ls1c-stats-bg: #455039; color: #ffffff; }

/* ---- Container nội dung ---- */
/* Đo được: .elementor-container max-width 1140px, cột con thụt 15px mỗi bên */
.ls1c-stats__inner {
  max-width: 1140px;
  margin-inline: auto;
}

/* ---- Eyebrow (chỉ khối "Chiến Công lẫy lừng") ---- */
/* Đo: h5 20px / 500 / line-height 24px / #000 / center, widget margin-bottom 20px.
   margin-top 70px + padding-top 50px của section = 120px đúng bằng
   padding-top 120px đo được ở khối 4. */
.ls1c-stats__eyebrow {
  margin: 70px 0 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: inherit;
}

/* ---- Tiêu đề khối ---- */
/* Đo: h2 60px / 500 / line-height 60px / text-transform capitalize / center.
   Khối 5,6,7: .elementor-widget-container margin-top 60px -> tổng 110px kể từ
   mép trên section. Khối 4 có eyebrow nên không có 60px này. */
/* margin-bottom để 0, khoảng cách 50px xuống lưới dồn hết vào
   .ls1c-stats__grid — tránh margin collapsing giữa 2 anh em làm mất 20px. */
.ls1c-stats__title {
  margin: 60px 0 0;
  font-size: clamp(30px, 4.17vw, 60px);
  font-weight: 500;
  line-height: 1;
  text-transform: capitalize;
  color: inherit;
}

.ls1c-stats__eyebrow + .ls1c-stats__title { margin-top: 0; }

/* ---- Lưới số liệu ---- */
/* Đo: tiêu đề margin-bottom 20px + inner-section margin-top 30px = 50px.
   Cột không có gap (column-gap-no), mỗi cột tự thụt 15px hai bên
   -> rãnh giữa 2 cột = 30px. */
.ls1c-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 50px;
}

.ls1c-stats__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls1c-stats__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls1c-stats__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---- Một ô số liệu ---- */
/* padding-bottom 36px = khoảng trắng đuôi đo được (25.6px margin của <p>
   + 10px margin widget). Giữ lại để chiều cao section khớp bản cũ và
   đồng thời làm row-gap khi lưới xuống dòng ở màn nhỏ. */
.ls1c-stats__item {
  padding: 0 15px 36px;
  text-align: center;
}

/* ---- Ảnh (chỉ khối 4) ---- */
.ls1c-stats__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
}

/* Ảnh trái ở bản cũ bị set max-width 94.726% (511.5px trong cột 540px).
   Tái hiện đúng bản cũ; muốn 2 ảnh bằng nhau thì xoá đúng khối này. */
.ls1c-stats__img--narrow { max-width: 94.726%; }

/* ---- Con số ---- */
/* Đo: h3 30px / 500 / line-height 30px / center, margin-bottom 10px.
   Giữ 30px cố định ở mọi breakpoint (chuỗi dài nhất "Hơn 200 trận"
   ~190px, vẫn lọt cột hẹp nhất 315px ở mốc 375). */
.ls1c-stats__num {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
}

/* ---- Nhãn mô tả ---- */
/* Đo: p 16px / 400 / line-height 24px / center; màu #676767 trên nền sáng,
   #ffffff trên nền xanh. */
.ls1c-stats__label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
}

.ls1c-stats--green .ls1c-stats__label { color: #ffffff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* <= 1023px (gồm cả mốc 768): khối 5 số xuống 3 cột.
   Dùng 6 rãnh, mỗi ô span 2, rồi đẩy ô thứ 4 sang rãnh 2 để hàng lẻ
   (2 ô còn lại) nằm cân giữa thay vì dồn về trái. */
@media (max-width: 1023.98px) {
  .ls1c-stats__grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ls1c-stats__grid--5 > .ls1c-stats__item { grid-column: span 2; }
  .ls1c-stats__grid--5 > .ls1c-stats__item:nth-child(4) { grid-column: 2 / span 2; }
}

/* <= 767px: khối 5 số và 3 số xuống 2 cột (4 rãnh, mỗi ô span 2),
   ô lẻ cuối cùng được căn giữa.
   Mốc 768 vẫn ăn rule ở trên -> 3 cột, đúng yêu cầu "768 còn 2-3 cột". */
@media (max-width: 767.98px) {
  .ls1c-stats__grid--5,
  .ls1c-stats__grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ls1c-stats__grid--5 > .ls1c-stats__item,
  .ls1c-stats__grid--3 > .ls1c-stats__item { grid-column: span 2; }

  .ls1c-stats__grid--5 > .ls1c-stats__item:nth-child(4) { grid-column: span 2; }
  .ls1c-stats__grid--5 > .ls1c-stats__item:nth-child(5) { grid-column: 2 / span 2; }
  .ls1c-stats__grid--3 > .ls1c-stats__item:nth-child(3) { grid-column: 2 / span 2; }

  .ls1c-stats__title { line-height: 1.2; }
}

/* <= 575px (gồm mốc 375): tất cả 1 cột, giữ nguyên cỡ chữ, không tràn ngang */
@media (max-width: 575.98px) {
  .ls1c-stats { padding: 40px 15px; }

  .ls1c-stats__eyebrow { margin-top: 40px; }
  .ls1c-stats__title   { margin-top: 40px; }

  .ls1c-stats__grid,
  .ls1c-stats__grid--2,
  .ls1c-stats__grid--3,
  .ls1c-stats__grid--5 { grid-template-columns: minmax(0, 1fr); }

  /* :nth-child(n) chỉ để nâng độ ưu tiên cho bằng các rule căn giữa
     ở breakpoint rộng hơn, nhờ vậy không phải dùng !important. */
  .ls1c-stats__grid--5 > .ls1c-stats__item:nth-child(n),
  .ls1c-stats__grid--3 > .ls1c-stats__item:nth-child(n),
  .ls1c-stats__grid--2 > .ls1c-stats__item:nth-child(n) { grid-column: auto; }

  .ls1c-stats__item { padding-bottom: 30px; }
}

/* ============================================================
   GHI CHÚ ĐO ĐẠC & SAI LỆCH SO VỚI BẢN CŨ
   Bản tham chiếu: 1C-Web/1c/lich-su-hinh-thanh-duong-1c/index.html
   Đo bằng agent-browser, viewport 1440x900 (window.innerWidth = 1440).
   Section index 4/5/6/7 = .elementor-element-8822972 / -e5cfd8a /
   -ba95330 / -d7e1ba9.
   ------------------------------------------------------------
   ĐÃ ĐO ĐƯỢC (giá trị thật, không ước lượng)

   Chiều cao & padding section:
     [4] h 785.34px | padding 120px 0 50px | bg rgb(237,237,237)
     [5] h 393.59px | padding 50px  0 50px | bg rgb(69,80,57)
     [6] h 369.59px | padding 50px  0 50px | bg rgb(255,255,255)
     [7] h 369.59px | padding 50px  0 50px | bg rgb(69,80,57)
   Container: width 1140px, max-width 1140px, padding 0.
   Cột con: padding 0 15px (rãnh 30px), section không có column-gap.
     [4] 2 cột x 570px  (nội dung 540px)
     [5] 5 cột x 228px  (nội dung 198px)
     [6] 3 cột x 379.98px (nội dung 349.98px)
     [7] 2 cột x 570px  (nội dung 540px)

   Typography:
     eyebrow h5 : 20px / 500 / lh 24px / rgb(0,0,0)   / center / mb 20px
     tiêu đề h2 : 60px / 500 / lh 60px / capitalize   / center / mb 20px
                  màu #000 ở [4][6], #fff ở [5][7]
                  [5][6][7]: widget-container margin-top 60px
     con số  h3 : 30px / 500 / lh 30px / center / mb 10px
                  màu #000 ở [4][6], #fff ở [5][7]
     nhãn     p : 16px / 400 / lh 24px / center / mb 25.6px
                  màu rgb(103,103,103)=#676767 ở [4][6], #fff ở [5][7]
     letter-spacing: normal ở mọi cấp.

   Khoảng cách dọc:
     tiêu đề -> lưới = 20px (margin widget) + 30px (margin-top của
     inner-section) = 50px.
     ảnh -> số = 10px; số -> nhãn = 10px; đuôi ô = 25.6 + 10 = 35.6px.

   Ảnh khối [4] (đường dẫn lấy từ src gốc, KHÔNG phải phỏng đoán):
     anh-1c.png    -> /1c-media/wp-content/uploads/2024/03/anh-1c.png
                      render 511.52 x 329.69 (widget max-width 94.726%)
     di-chuyen.jpg -> /1c-media/wp-content/uploads/2024/02/di-chuyen.jpg
                      render 540 x 327.75 (max-width 100%)

   Kiểm chứng: cộng lại đúng chiều cao đo được, ví dụ [6]
     50 + 60 + 60 + 20 + 30 + (30 + 10 + 24 + 35.6) + 50 = 369.6 ✔
   ------------------------------------------------------------
   ĐÃ ĐO LẠI BẢN DỰNG NÀY (cùng công cụ, cùng viewport) — KẾT QUẢ

   1440x900, tính từ mép trên mỗi section:
     eyebrow y=120 | tiêu đề y=164 | lưới y=274   (khối 4) — khớp bản cũ
     tiêu đề y=110 | lưới y=220                   (khối 5,6,7) — khớp bản cũ
     Toạ độ/bề rộng ô số liệu trùng khít bản cũ:
       [4] x=143 & 713, rộng 570      (cũ 142.5 / 712.5 / 570)
       [5] x=143,371,599,827,1055, rộng 228 (cũ 142.5…1054.5 / 228)
       [6] x=143,523,903, rộng 380    (cũ 142.5 / 522.5 / 902.5 / 379.98)
       [7] x=143 & 713, rộng 570      (cũ 142.5 / 712.5 / 570)
     Chiều cao section: 394 / 370 / 370 (cũ 393.59 / 369.59 / 369.59)
     Khối [4] lệch ~2px vì khi đo ảnh chưa tải được ở môi trường test;
     với ảnh thật tỉ lệ 1024x660 và 575x349 sẽ ra đúng 329.69 / 327.75.

   Không tràn ngang (documentElement.scrollWidth <= clientWidth) và không
   phần tử con nào vượt mép, đã kiểm ở 1440 / 768 / 640 / 375 / 320.
     768 : [5] 3 cột (3+2, hàng lẻ căn giữa), [6] 3 cột, [4][7] 2 cột
     640 : [5] 2 cột (2+2+1, căn giữa), [6] 2 cột (2+1, căn giữa)
     375 : tất cả 1 cột, con số giữ 30px, không ô nào bị bóp chữ
   ------------------------------------------------------------
   CHƯA KHỚP BẢN CŨ — VÀ LÝ DO

   1. Font chữ. Bản cũ dùng "Lexend Deca". Theo SPEC, bản mình dùng font
      sẵn có của site, không import webfont ngoài. => Bề rộng chữ và do đó
      chiều cao ô có thể lệch vài px. Sai lệch có chủ đích.

   2. Tiêu đề dùng clamp(30px, 4.17vw, 60px) thay vì 60px cứng.
      Tại 1440 cho ra đúng 60px; ở khoảng 720–1440 sẽ nhỏ hơn bản cũ
      (bản cũ giữ 60px tới breakpoint 1024 của Elementor). Đánh đổi lấy
      việc bớt media query theo yêu cầu số 7 của SPEC.

   3. Container 1140px (đo thật) chứ không phải 1340px như bảng token
      trong SPEC. Lấy theo số đo. Nếu nhúng khối này vào trong
      .container của Bootstrap thì bề ngang nội dung sẽ hụt thêm 30px
      (do padding 15px hai bên của .container). Khuyến nghị đặt khối
      ở vùng full-width, nền đã tự tràn mép bằng box-shadow.

   4. Full-bleed dùng box-shadow spread 100vmax + clip-path thay vì
      width:100vw / margin âm. Lý do: 100vw tính cả bề rộng thanh cuộn
      nên gây tràn ngang ~15px; box-shadow không bao giờ sinh scrollbar.
      Hệ quả: nếu tổ tiên có overflow:hidden thì nền sẽ bị cắt — khi đó
      đổi sang margin-inline: calc(50% - 50vw) và cho body overflow-x:hidden.

   5. Bản cũ hai ảnh khối [4] lệch nhau: rộng 511.5 vs 540, cao 329.69 vs
      327.75 => hai con số "20.000 lượt" / "13.000 tấn" không thẳng hàng
      (lệch ~8px). Đã tái hiện đúng bằng .ls1c-stats__img--narrow.
      Muốn hai ảnh bằng nhau chỉ cần xoá rule đó.

   6. Điểm ngắt responsive tự đặt (1024 / 768 / 576) chứ không theo
      1024 / 767 của Elementor; bản cũ ở mobile không được đo vì phạm vi
      công việc chỉ yêu cầu 1440 / 768 / 375.

   7. Nhãn của "Hơn 200 trận" ở bản cũ ghi "Trong suốt thời gian tuyết
      đường hoạt động" — "tuyết" nhiều khả năng là lỗi gõ của "tuyến".
      Đã COPY NGUYÊN VĂN theo yêu cầu, KHÔNG tự sửa. Cần anh/chị xác nhận
      có sửa thành "tuyến đường" hay không.  => TODO nội dung.

   8. Tiêu đề trong HTML giữ nguyên chữ hoa/thường của bản cũ
      ("Chiến Công lẫy lừng", "Chiến tích hào hùng", ...) và dựa vào
      text-transform: capitalize để hiển thị ra "Chiến Công Lẫy Lừng"
      giống hệt bản cũ. Không sửa chữ trong nguồn.
   ============================================================ */

.block-bg.content-post .container:has(.ls1c) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}