/* NV Timeline Pro – Responsive & Woodmart compatibility */

/* 0. Các reset nhẹ để tránh xung đột với theme Woodmart */
.nv-tlv, .nv-th { box-sizing: border-box; padding-inline: clamp(10px, 2.4vw, 28px); }
.nv-tlv *, .nv-th * { box-sizing: inherit; }
.nv-tlv img, .nv-th img { display: block; max-width: 100%; height: auto; }
.nv-tlv .button, .nv-th .button { all: unset; } /* tránh Woodmart .button override */
.nv-tl-readmore { all: revert; display:inline-block; padding:10px 14px; border-radius:10px; background:var(--active-accent); color:#fff; border:0; cursor:pointer; font-weight:800; }

/* 1. Heading co giãn theo viewport */
.nv-tlv-heading { font-size: clamp(20px, 3.2vw, 30px); }

/* 2. VERTICAL – điều chỉnh theo điểm gãy phổ biến */
@media (max-width: 1400px){
  /* thu hẹp cột năm bên phải */
  .nv-tlv-item { grid-template-columns: 1fr 34px 200px; }
  .nv-tlv-bgnum { right: calc(200px + 34px + 20px); }
}
@media (max-width: 1200px){
  .nv-tlv-item { grid-template-columns: 1fr 30px 180px; }
  .nv-tlv-bgnum { right: calc(180px + 30px + 18px); }
}
@media (max-width: 992px){
  .nv-tlv-item { grid-template-columns: 1fr 28px 150px; }
  .nv-tlv-left { grid-template-columns: min(max(84px, var(--thumb-w)), 120px) 1fr; }
  .nv-style--teardrop .nv-tlv-drop { width: 120px; height: 90px; }
  .nv-style--teardrop .nv-tlv-drop::before { width: 92px; height: 92px; }
  .nv-style--teardrop .nv-tlv-drop::after  { width: 60px; height: 60px; left: 6px; top: 15px; }
  .nv-tlv-year { font-size: 22px; }
  .nv-tlv-bgnum { font-size: 60px; }
}

/* Mobile/tablet dọc: chuyển sang layout 2 hàng, trục nằm sát trái  */
@media (max-width: 768px){
  .nv-tlv-axis { left: 18px; transform: none; }
  .nv-tlv-item {
    grid-template-columns: 28px 1fr; 
    grid-template-areas:
      "dot drop"
      ".   left";
    row-gap: 12px;
    padding-inline: 4px;
  }
  .nv-tlv-dot   { grid-area: dot; margin-left: 0; }
  .nv-tlv-right { grid-area: drop; }
  .nv-tlv-left  { grid-area: left; grid-template-columns: min(max(72px, var(--thumb-w)), 100px) 1fr; }
  .nv-tlv-thumb { width: min(max(72px, var(--thumb-w)), 100px); height: min(max(54px, var(--thumb-h)), 80px); }
  .nv-tlv-desc  { font-size: 13px; margin-right: 0; }
  .nv-tlv-bgnum { display: none; }
}

/* Điện thoại nhỏ */
@media (max-width: 480px){
  .nv-tlv { padding-inline: 12px; }
  .nv-tlv-left { padding: 14px 14px; gap: 12px; }
  .nv-tl-readmore { padding: 9px 12px; font-size: 14px; }
  .nv-style--badge .nv-tlv-badge { width: 92px; height: 92px; font-size: 22px; }
  .nv-style--teardrop .nv-tlv-drop { width: 108px; height: 84px; }
  .nv-style--teardrop .nv-tlv-drop::before { width: 84px; height: 84px; }
  .nv-style--teardrop .nv-tlv-drop::after  { width: 56px; height: 56px; left: 6px; top: 14px; }
  .nv-tlv-year { font-size: 20px; }
}

/* 3. HORIZONTAL – tối ưu trải nghiệm trượt và snap */
.nv-th-scroller { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.nv-th-item { scroll-snap-align: center; }
@media (max-width: 1200px){
  .nv-th-item { flex-basis: min(78vw, 520px); }
}
@media (max-width: 992px){
  .nv-th-item { flex-basis: 84vw; }
}
@media (max-width: 768px){
  .nv-th-stage { padding: 0 12px 10px; }
  .nv-th-line  { left: 12px; right: 12px; }
  .nv-th-prev, .nv-th-next { display: none; } /* nhường chỗ cho cử chỉ vuốt trên mobile */
  .nv-th-thumb { height: min(max(140px, var(--thumb-h)), 200px); }
}

/* 4. Fix tương thích Woodmart: container, z-index, spacing */
body.woodmart-theme .nv-tlv,
body.woodmart-theme .nv-th{
  /* ngăn các layout parent đặt overflow hidden làm cắt bóng đổ */
  overflow: visible;
}
body.woodmart-theme .nv-tlv .nv-tlv-left,
body.woodmart-theme .nv-th .nv-th-card{
  z-index: 1; position: relative;
}

/* Woodmart có thể làm hẹp padding cột, đảm bảo timeline không dính sát mép */
body.woodmart-theme .container .nv-tlv,
body.woodmart-theme .container .nv-th{
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

/* 5. High DPI & safe areas */
@supports(padding:max(0px)) {
  .nv-tlv, .nv-th { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}

/* 6. Tránh đè icon của Woodmart (ví dụ nút back-to-top) */
.nv-tlv, .nv-th { isolation: isolate; } /* tạo stacking context riêng */
/* Mobile LANDSCAPE: viewport thấp => thu cột ảnh và teardrop */
@media (orientation: landscape) and (max-height: 500px){
  /* Bố cục 3 cột nhỏ gọn hơn */
  .nv-tlv-item{
    grid-template-columns: 1fr 24px 140px;
    padding: 14px 8px;
    min-height: 120px;
  }
  /* Cột trái: khóa kích thước ảnh theo clamp để không bao giờ tràn */
  .nv-tlv-left{
    grid-template-columns: clamp(72px, 18vw, 110px) 1fr;
    gap: 12px;
    padding: 14px 14px;
    align-items: start;
  }
  .nv-tlv-thumb{
    width: clamp(72px, 18vw, 110px);
    height: clamp(56px, 14vw, 84px);
    border-radius: var(--thumb-radius);
  }
  .nv-tlv-title{ font-size: 16px; margin-bottom: 4px }
  .nv-tlv-desc{ font-size: 12.5px; margin-right: 0 }

  /* Teardrop/Badge nhỏ lại để không chiếm chỗ */
  .nv-style--teardrop .nv-tlv-drop{ width: 108px; height: 82px }
  .nv-style--teardrop .nv-tlv-drop::before{ width: 82px; height: 82px }
  .nv-style--teardrop .nv-tlv-drop::after{ width: 54px; height: 54px; left: 6px; top: 13px }
  .nv-style--badge .nv-tlv-badge{ width: 92px; height: 92px; font-size: 22px }
  .nv-tlv-year{ font-size: 20px }

  /* Số nền mờ ẩn đi để tăng không gian đọc */
  .nv-tlv-bgnum{ display: none }
}