/* ==========================================================================
   TL-JOURNEY - Hành trình phát triển (thước mốc ngang + panel văn bản)
   Trang: /gioi-thieu/lich-su-phat-trien
   ========================================================================== */

.tl-journey{
  padding-block:clamp(64px,8vw,96px);color:var(--ink);
  background:
    radial-gradient(ellipse 900px 420px at 15% 0%,rgba(13,86,189,.08),transparent 60%),
    radial-gradient(ellipse 900px 420px at 100% 20%,rgba(13,86,189,.06),transparent 60%),
    var(--paper-2);
}

.tl-journey__head{text-align:center;margin-left:auto;margin-right:auto}
.tl-journey__head::before{
  content:"";display:block;width:48px;height:3px;border-radius:2px;
  background:var(--teco-color-blue-900);margin:0 auto 14px;
}
.tl-journey__head h2{color:var(--teco-color-blue-900)}
.tl-journey__desc{color:var(--ink-2)!important;margin-left:auto;margin-right:auto}

.tl-journey__nav{
  display:flex;align-items:center;gap:14px;
  margin-top:32px;margin-bottom:0;
  background:var(--teco-color-blue-900);border-radius:0;
  padding:20px clamp(16px,3vw,28px) 16px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}

.tl-journey__arrow{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:0;background:var(--teco-color-blue-700);color:#fff;
  cursor:pointer;transition:background .2s ease,opacity .2s ease;
}
.tl-journey__arrow svg{width:18px;height:18px}
.tl-journey__arrow:hover{background:var(--orange)}
.tl-journey__arrow:disabled{opacity:.35;cursor:default}

.tl-journey__ruler-wrap{
  position:relative;flex:1 1 auto;min-width:0;
  padding-top:52px;
}

.tl-journey__ruler{
  display:block;width:100%;height:auto;user-select:none;pointer-events:none;
}

.tl-journey__tabs{
  position:absolute;inset:0;top:0;bottom:auto;height:100%;
  list-style:none;margin:0;padding:0;
}

.tl-journey__tab-item{
  position:absolute;bottom:12px;transform:translateX(-50%);
}
.tl-journey__tab-item::before{
  content:"";position:absolute;left:50%;top:100%;bottom:auto;height:14px;width:1px;
  background:var(--teco-color-blue-700);transform:translateX(-50%);
}
.tl-journey__tab-item.is-active::before{background:var(--orange)}

.tl-journey__tab-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.55);
  font-family:"Inter",sans-serif;
}

.tl-journey__tab-year{
  font-size:.8125rem;font-weight:500;white-space:nowrap;letter-spacing:-.01em;
  transition:color .2s ease,font-weight .2s ease;
}

.tl-journey__tab-dot{
  width:9px;height:9px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(255,255,255,.55);
  transition:background .25s ease,border-color .25s ease;
}

.tl-journey__tab-item.is-active .tl-journey__tab-year{color:var(--orange);font-weight:700}
.tl-journey__tab-item.is-active .tl-journey__tab-dot{
  background:var(--orange);border-color:var(--orange);
}
.tl-journey__tab-item:not(.is-active):hover .tl-journey__tab-year{color:rgba(255,255,255,.85)}

.tl-journey__panels{margin-top:28px}

.tl-journey__panel{display:none}
.tl-journey__panel.is-active{display:block;animation:tlPanelIn .35s ease both}

@keyframes tlPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.tl-journey__panel-inner{
  border-radius:18px;box-shadow:var(--shadow);
  background:var(--paper);padding:clamp(20px,3vw,36px);
}

.tl-journey__panel-head{margin-bottom:22px}
.tl-journey__panel-head h3{color:var(--ink);margin:0 0 6px;font-size:1.375rem}
.tl-journey__panel-head p{color:var(--ink-2);margin:0}

.tl-journey__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

.tl-journey__item{
  border:none;border-radius:var(--radius-card,12px);
  background:var(--teco-color-blue-50);padding:18px 20px;
}

.tl-journey__year{
  display:inline-block;font-weight:700;color:var(--orange-ink);
  font-size:.875rem;margin-bottom:10px;
  padding:3px 12px;border-radius:999px;background:rgba(255,153,0,.14);
}
.tl-journey__item[data-hi] .tl-journey__year{background:rgba(255,153,0,.22)}

.tl-journey__text{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.tl-journey__item[data-hi] .tl-journey__text{color:var(--ink)}

@media (max-width:768px){
  .tl-journey__ruler-wrap{overflow-x:auto;padding-bottom:4px}
  .tl-journey__ruler,.tl-journey__tabs{width:900px;max-width:none}
  .tl-journey__grid{grid-template-columns:1fr}
}