/* NBK Timeline — CSS cấu trúc (load cả editor lẫn frontend). Cấu hình qua CSS variables đặt inline trên gốc widget (#nbktl-...). v2.1: GIỮ line per-item trong marker (luôn hiện, luôn khớp point) + overlay fill gradient mượt theo scroll + point-top cấu hình + animation xuất hiện/biến mất. */ .nbk-tl { background: var(--nbktl-bg, transparent); padding: var(--nbktl-pad, 0); } /* Dải timeline CANH GIỮA khớp footer (mặc định 1400px, cấu hình qua --nbktl-content-w). Item xếp dọc & DÍNH nhau (không row-gap) để line dọc liền mạch qua các bước. */ .nbk-tl .nbk-tl-list { position: relative; max-width: var(--nbktl-content-w, 1400px); margin-left: auto; margin-right: auto; } .nbk-tl .nbk-tl-item { position: relative; display: block; } /* Cột trái: GHIM mép trái của dải content căn giữa, cao bằng item (line dọc chạy suốt). Không còn là cột flex — tách khỏi luồng để content tự canh giữa theo dải. */ .nbk-tl .nbk-tl-left { position: absolute; top: 0; bottom: 0; left: var(--nbktl-left-x, 0px); width: var(--nbktl-leftw, 220px); max-width: var(--nbktl-leftw, 220px); z-index: 2; /* Decorative column can overlap the content on wide screens. Let links beneath receive clicks. */ pointer-events: none; padding-left: calc(var(--nbktl-pt, 18px) + var(--nbktl-lblgap, 12px)); } /* ----- Marker: line liền mạch qua item + point ----- */ .nbk-tl .nbk-tl-marker { position: absolute; left: 0; top: 0; bottom: 0; width: var(--nbktl-pt, 18px); } .nbk-tl .nbk-tl-line-top, .nbk-tl .nbk-tl-line-bot, .nbk-tl .nbk-tl-line-fill { position: absolute; left: 50%; transform: translateX(-50%); /* Tối thiểu 1 pixel MÀN HÌNH: zoom < 100% thì 1 CSS px < 1 device px -> line mờ / biến mất. --nbktl-dpr = devicePixelRatio (JS widget cập nhật khi zoom/resize). */ width: max(var(--nbktl-linew, 3px), calc(1px / var(--nbktl-dpr, 1))); } /* Nền line (chưa fill) */ .nbk-tl .nbk-tl-line-top, .nbk-tl .nbk-tl-line-bot { background: var(--nbktl-line-off, #d9d9d9); } .nbk-tl .nbk-tl-line-top { top: 0; height: calc(var(--nbktl-pt-top, 3px) + var(--nbktl-pt, 18px) / 2); } .nbk-tl .nbk-tl-line-bot { top: calc(var(--nbktl-pt-top, 3px) + var(--nbktl-pt, 18px) / 2); bottom: 0; } /* Điểm kết thúc riêng từng bước: chỉ đổi chiều cao marker, giữ nguyên nội dung. Specificity đủ để ghi đè quy tắc nối line/canh giữa trong theme. */ .nbk-tl .nbk-tl-item.has-line-end .nbk-tl-left .nbk-tl-marker { height: var(--nbktl-line-end); bottom: auto; } .nbk-tl .nbk-tl-item.has-line-end .nbk-tl-left .nbk-tl-line-top { top: 0; height: 50%; } .nbk-tl .nbk-tl-item.has-line-end .nbk-tl-left .nbk-tl-line-bot { top: 50%; bottom: 0; } /* Overlay fill: phủ từ đỉnh item xuống theo tiến độ scroll (JS đặt height %), dùng gradient để nhấn khi chuyển section. */ .nbk-tl .nbk-tl-line-fill { top: 0; height: 0; z-index: 1; background: linear-gradient(180deg, var(--nbktl-line-on, #f56749) 0%, var(--nbktl-line-on2, var(--nbktl-line-on, #f56749)) 100%); transition: height .15s linear; } .nbk-tl .nbk-tl-point { position: absolute; left: 50%; top: var(--nbktl-pt-top, 3px); transform: translateX(-50%); width: var(--nbktl-pt, 18px); height: var(--nbktl-pt, 18px); border-radius: var(--nbktl-pt-radius, 0); background: var(--nbktl-pt-off, #c9c9c9); box-shadow: 0 0 0 var(--nbktl-pb, 3px) var(--nbktl-pbc, #fff); transition: background .35s ease, transform .35s ease, box-shadow .35s ease; z-index: 2; } /* Active: point đổi màu (+ phóng to / glow nếu bật) */ .nbk-tl .nbk-tl-item.is-active .nbk-tl-point { background: var(--nbktl-pt-on, #f56749); transform: translateX(-50%) scale(var(--nbktl-pt-scale, 1)); } .nbk-tl.has-glow .nbk-tl-item.is-active .nbk-tl-point { box-shadow: 0 0 0 var(--nbktl-pb, 3px) var(--nbktl-pbc, #fff), 0 0 16px 2px color-mix(in srgb, var(--nbktl-pt-on, #f56749) 75%, transparent); } /* ----- Nhãn ----- */ .nbk-tl .nbk-tl-label { position: relative; top: var(--nbktl-lbl-top, 0px); left: var(--nbktl-lbl-x, 0px); color: var(--nbktl-lbl-off, #8a8a8a); font-size: var(--nbktl-lbls, 16px); font-weight: var(--nbktl-lblw, 600); line-height: 1.35; transition: color .35s ease; } .nbk-tl .nbk-tl-item.is-active .nbk-tl-label { color: var(--nbktl-lbl-on, #111); } /* Vùng phải (container được thả widget vào): chừa lề trái = bề rộng cột trái + khoảng cách, phần còn lại canh khớp mép phải dải content (≡ footer). Cột trái ghim tuyệt đối bên trái. */ .nbk-tl .nbk-tl-item > :not(.nbk-tl-left) { display: block; width: auto !important; min-width: 0; max-width: 100%; margin-left: calc(var(--nbktl-leftw, 220px) + var(--nbktl-colgap, 28px)); min-height: var(--nbktl-rmh, 120px); } /* Full-bleed (control "Nội dung full-bleed"): vùng nội dung tràn hết bề ngang .nbk-tl, bù lề trái = (bề rộng dải - bề rộng thật) / 2. Cột trái vẫn tính theo dải content. */ .nbk-tl.is-bleed { container-type: inline-size; } .nbk-tl.is-bleed .nbk-tl-item > :not(.nbk-tl-left) { width: 100cqw !important; max-width: none !important; margin-left: calc((min(100cqw, var(--nbktl-cw, var(--nbktl-content-w, 1400px))) - 100cqw) / 2) !important; margin-right: 0 !important; } /* Blend (control "Tự đổi màu theo nền"): line/point/nhãn đảo màu theo nền phía dưới. */ .nbk-tl.is-blend .nbk-tl-left { mix-blend-mode: difference; } /* Tông màu theo bước (repeater "Màu line/point/nhãn"): trắng trên nền đen, đen trên nền khác đen. Chỉ ghi đè màu active (line fill, point, nhãn); bỏ blend để màu đúng tuyệt đối. */ .nbk-tl .nbk-tl-item.tone-light { --nbktl-line-on: #fff; --nbktl-line-on2: #fff; --nbktl-pt-on: #fff; --nbktl-lbl-on: #fff; } .nbk-tl .nbk-tl-item.tone-dark { --nbktl-line-on: #000; --nbktl-line-on2: #000; --nbktl-pt-on: #000; --nbktl-lbl-on: #000; } .nbk-tl .nbk-tl-item.tone-light .nbk-tl-left, .nbk-tl .nbk-tl-item.tone-dark .nbk-tl-left { mix-blend-mode: normal; } /* ================= ANIMATION xuất hiện / biến mất ================= */ /* Bật khi gốc có .has-anim; kiểu theo .anim-