/* Thanh 5 mốc "Những dấu ấn của TTC" dạng khối nổi nối nhau (nằm thẳng).
   Chỉ đổi giao diện; cách bấm chọn mốc và nội dung giữ nguyên. */
.ms2-rail{--gap:8px;gap:var(--gap);padding:6px 4px 16px}
.ms2-rail li{position:relative}
.ms2-rail button{
  min-height:64px;padding:12px 8px 14px;border-radius:14px;color:var(--brand-900);
  background:linear-gradient(165deg,#fff,#eaf1f9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(0,64,136,.10),0 7px 0 #b3c7e2,0 16px 18px -6px rgba(0,38,79,.30);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.ms2-rail button::after{display:none}
.ms2-rail button:hover{color:var(--brand-900);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(0,64,136,.10),0 10px 0 #b3c7e2,0 20px 20px -6px rgba(0,38,79,.32)}
.ms2-rail button[aria-selected="true"]{
  color:#fff;transform:translateY(-6px);
  background:linear-gradient(165deg,#1a62b5,#004088);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.14),0 13px 0 #00264f,0 26px 24px -6px rgba(0,38,79,.45)}
.ms2-rail button:focus-visible{outline:3px solid #fed933;outline-offset:3px}
.ms2-rail .ms2-y{color:var(--brand)}
.ms2-rail button[aria-selected="true"] .ms2-y{color:#fed933}
.ms2-rail .ms2-t{color:inherit}

/* Đường nối giữa các mốc (từ 768px; nhỏ hơn thì chỉ còn các khối năm) */
@media (min-width:768px){
  .ms2-rail{--gap:34px}
  .ms2-rail li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:calc(100% + 6px);top:34px;width:calc(var(--gap) - 12px);height:12px;pointer-events:none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l9 5-9 5z' fill='%23004088'/%3E%3C/svg%3E") right center/12px 12px no-repeat,
      repeating-linear-gradient(90deg,#004088 0 6px,transparent 6px 12px) left center/calc(100% - 10px) 4px no-repeat;
    animation:ms3flow .9s linear infinite}
  .ms2-rail button{padding:14px 14px 16px}
}
@keyframes ms3flow{to{background-position:right center,12px center}}
@media (max-width:767px){
  .ms2-rail{--gap:6px}
  .ms2-rail button{padding:10px 4px 12px;min-height:48px;text-align:center}
  .ms2-rail .ms2-y{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  .ms2-rail li:not(:last-child)::after{animation:none}
  .ms2-rail button{transition:none}
}