/* Axis */
.nv-tlv-axis{ position:absolute; top:60px; bottom:20px; left:50%; width:2px; transform:translateX(-50%); background:#c9cdd5 }

/* List */
.nv-tlv-list{ list-style:none; margin:0 auto; padding:0; max-width:960px; position:relative }
.nv-tlv-item{ position:relative; display:grid; grid-template-columns: 1fr 40px 220px; align-items:center; gap:12px 16px; padding:18px 12px; min-height:140px }
.nv-tlv-item + .nv-tlv-item{ margin-top:14px }

/* Card left with thumb (dùng biến) */
.nv-tlv-left{ display:grid; grid-template-columns: var(--thumb-w) 1fr; gap:16px; align-items:center; background:#fff; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.08); padding:18px 20px; position:relative }
.nv-tlv-thumb{ width:var(--thumb-w); height:var(--thumb-h); margin:0; border-radius:var(--thumb-radius); overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.06) }
.nv-tlv-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.nv-tlv-text{ min-width:0 }
.nv-tlv-title{ margin:0 0 6px; font-size:20px; font-weight:900 }
.nv-tlv-desc{ margin:0 12px 12px 0; color:var(--muted); font-size:14px }

/* Dot */
.nv-tlv-dot{ width:18px; height:18px; border-radius:999px; margin:0 auto; background:#fff; border:4px solid #d1d5db; box-shadow:0 0 0 3px #fff inset }
.nv-tlv-item:hover .nv-tlv-dot{ background: var(--active-accent); border-color: var(--brand); box-shadow:0 0 0 4px rgba(0,0,0,.04) }

/* Right side – style switch */
.nv-tlv-right{ display:flex; align-items:center; justify-content:flex-start }

/* Teardrop */
.nv-style--teardrop .nv-tlv-drop{ position:relative; display:inline-grid; place-items:center; width:148px; height:110px; color:#fff; font-weight:900 }
.nv-style--teardrop .nv-tlv-drop::before,
.nv-style--teardrop .nv-tlv-drop::after{ content:""; position:absolute; background:var(--brand); border-radius:100px }
.nv-style--teardrop .nv-tlv-drop::before{ width:110px; height:110px; right:0; top:0 }
.nv-style--teardrop .nv-tlv-drop::after{ width:70px; height:70px; left:8px; top:20px; transform:rotate(45deg); border-radius:20px }
.nv-tlv-year{ position:relative; z-index:2; font-size:26px; letter-spacing:.3px }

/* Badge */
.nv-style--badge .nv-tlv-badge{ display:inline-grid; place-items:center; width:110px; height:110px; background:var(--brand); color:#fff; border-radius:999px; font-weight:900; font-size:26px }

/* Background index */
.nv-tlv-bgnum{ position:absolute; right:calc(220px + 40px + 24px); font-size:72px; font-weight:900; line-height:1; color:rgba(0,0,0,.05); pointer-events:none }

/* Responsive */
@media (max-width: 900px){
  .nv-tlv-item{ grid-template-columns: 1fr 30px 160px }
  .nv-style--teardrop .nv-tlv-drop{ width:120px; height:90px }
  .nv-style--teardrop .nv-tlv-drop::before{ width:90px; height:90px } .nv-style--teardrop .nv-tlv-drop::after{ width:58px; height:58px; left:6px; top:16px }
  .nv-tlv-year{ font-size:22px }
  .nv-tlv-bgnum{ font-size:60px }
}
@media (max-width: 640px){
  .nv-tlv-axis{ left:16px; transform:none }
  .nv-tlv-item{ grid-template-columns: 30px 1fr; grid-template-areas: "dot drop" ".   left"; row-gap:10px }
  .nv-tlv-left{ grid-area:left; grid-template-columns: var(--thumb-w) 1fr }
  .nv-tlv-dot{ grid-area:dot; margin-left:0 }
  .nv-tlv-right{ grid-area:drop }
  .nv-tlv-bgnum{ display:none }
}