/* ============================================================
   2026-10-28 (anh Huy): BẢNG TIMELINE DỰ ÁN (js/113-project-timeline.js)
   Lần 3: bảng gửi cho KHÁCH → MỘT giao diện duy nhất (nền sáng ấm), không theo chế độ sáng/tối của
   app; mọi màu lấy từ biến --tl-* khai báo ngay trên .tl-ov / .tl-pop / .tl-dlg-ov (không dùng
   --bg / --text của app). Màu vòng: pastel + mực cùng sắc, đo tương phản trong js/113 (TL_COLORS).
   Thanh ngày kín chiều cao hàng, chừa 1px trên/dưới. Không có đường đỏ "hôm nay".
   ============================================================ */
.tl-ov, .tl-pop, .tl-dlg-ov{
  --tl-bg:#FBFAF7; --tl-surface:#FFFFFF; --tl-head:#F7F5F1; --tl-line:#ECE8E1; --tl-line2:#F2EFEA;
  --tl-ink:#2B2A28; --tl-ink2:#6B6660; --tl-ink3:#9A948C; --tl-chip:#F1EEE9;
  --tl-sat:#5B7BA6; --tl-sat-bg:#F2F5F9; --tl-sun:#B4644F; --tl-sun-bg:#FBF2EF; --tl-today:#E07A5F;
  --tl-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
body.tl-open{ overflow:hidden; }
.tl-ov{
  position:fixed; inset:0; z-index:100000; display:flex; padding:18px;
  padding-top:max(18px, env(safe-area-inset-top, 0px));
  padding-bottom:max(18px, env(safe-area-inset-bottom, 0px));
  background:rgba(38,34,30,.42); backdrop-filter:blur(3px);
  font-family:var(--tl-font);
}
.tl-card{
  flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--tl-bg); color:var(--tl-ink); border:1px solid var(--tl-line);
  border-radius:18px; overflow:hidden; box-shadow:0 24px 70px rgba(40,32,24,.28);
}
.tl-loading{ margin:auto; padding:40px; text-align:center; color:var(--tl-ink2); font-size:13px; }

/* ---------- thanh trên ---------- */
.tl-top{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px 12px 22px; border-bottom:1px solid var(--tl-line); background:var(--tl-surface);
}
.tl-title{ font-weight:700; font-size:15px; letter-spacing:-.1px; max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:10px; color:var(--tl-ink); }
.tl-title span{ display:block; font-size:10px; font-weight:600; color:var(--tl-ink3); letter-spacing:.9px; text-transform:uppercase; margin-top:2px; }
.tl-grp, .tl-seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--tl-chip); }
.tl-pill, .tl-seg > button{
  border:none; background:transparent; color:var(--tl-ink2); font:600 12px/1 var(--tl-font);
  padding:7px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.tl-pill{ background:var(--tl-chip); }
.tl-grp .tl-pill{ background:transparent; }
.tl-pill.on, .tl-seg > button.on{ background:var(--tl-surface); color:var(--tl-ink); box-shadow:0 1px 2px rgba(40,32,24,.14); }
.tl-pill:hover, .tl-seg > button:hover{ color:var(--tl-ink); }
.tl-kind1{ font-size:12px; font-weight:600; color:var(--tl-ink2); padding:7px 12px; border-radius:999px; background:var(--tl-chip); }
.tl-year{
  font:600 12px var(--tl-font); color:var(--tl-ink); background:var(--tl-chip); border:none;
  border-radius:999px; padding:7px 10px; cursor:pointer;
}
.tl-sp{ flex:1; }
.tl-status{ font-size:11px; color:var(--tl-ink3); white-space:nowrap; }
.tl-btn{
  display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--tl-font);
  padding:8px 14px; border-radius:999px; border:1px solid var(--tl-line); background:var(--tl-surface);
  color:var(--tl-ink); cursor:pointer; white-space:nowrap;
}
.tl-btn:hover{ border-color:var(--tl-ink3); }
.tl-btn.pri{ background:var(--tl-ink); border-color:var(--tl-ink); color:#fff; }
.tl-x{ border:none; background:var(--tl-chip); color:var(--tl-ink2); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; margin-left:2px; }
.tl-x:hover{ color:var(--tl-ink); }
/* 2026-10-30 PM-MOBILE-A: nút gom công cụ — chỉ hiện trên điện thoại. Máy tính: khung .tl-tools
   "trong suốt" với bố cục (display:contents) nên thanh trên cùng giữ y như cũ. */
.tl-tools{ display:contents; }
.tl-tools-btn{ display:none; flex:0 0 auto; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:none; background:var(--tl-chip); color:var(--tl-ink2); cursor:pointer; }
.tl-tools-btn.on{ background:var(--tl-ink); color:#fff; }
/* 2026-10-31 UI3: nhãn nhóm công cụ — chỉ hiện trong menu điện thoại. */
.tl-glab{ display:none; }

/* ---------- lưới ---------- */
.tl-scroll{ flex:1; min-height:0; overflow:auto; position:relative; overscroll-behavior:contain; touch-action:pan-x pan-y; background:var(--tl-surface); }
/* Thanh cuộn NGANG ẩn (giữ dải tháng/ngày kéo trái phải thay cho nó); thanh dọc giữ, vẽ gọn. */
.tl-scroll::-webkit-scrollbar{ width:10px; height:0; }
.tl-scroll::-webkit-scrollbar-thumb{ background:#E2DDD5; border-radius:10px; border:2px solid var(--tl-surface); }
.tl-scroll::-webkit-scrollbar-track{ background:transparent; }
.tl-inner{ position:relative; min-height:100%; }
.tl-head{
  position:sticky; top:0; z-index:6; background:var(--tl-head); border-bottom:1px solid var(--tl-line);
  display:grid; grid-template-columns:var(--tl-left, 236px) 1fr;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.tl-head.panning{ cursor:grabbing; }
.tl-corner{
  position:sticky; left:0; z-index:7; grid-column:1; grid-row:1 / span 4; cursor:default;
  background:var(--tl-head); border-right:1px solid var(--tl-line); padding:10px 18px; display:flex; flex-direction:column; justify-content:flex-end;
}
.tl-corner b{ font-size:20px; font-weight:700; letter-spacing:-.3px; color:var(--tl-ink); }
.tl-corner span{ font-size:10px; font-weight:600; color:var(--tl-ink3); letter-spacing:.9px; text-transform:uppercase; }
.tl-hr{ position:relative; grid-column:2; }
.tl-hr-mo{ height:28px; }
.tl-hr-wk{ height:15px; }
.tl-hr-d{ height:24px; }
.tl-hr-w{ height:18px; }
.tl-mo, .tl-wk, .tl-d, .tl-w{ position:absolute; top:0; bottom:0; }
.tl-mo{ border-left:1px solid var(--tl-line); }
.tl-mo span{ position:sticky; left:calc(var(--tl-left, 236px) + 10px); display:inline-block; padding:8px 10px 0; font-size:12.5px; font-weight:600; color:var(--tl-ink); white-space:nowrap; }
.tl-wk{ font:600 9.5px/15px var(--tl-font); letter-spacing:.4px; color:var(--tl-ink3); padding-left:4px; white-space:nowrap; overflow:hidden; border-left:1px solid var(--tl-line2); }
.tl-d{ display:flex; align-items:center; justify-content:center; font:500 11px var(--tl-font); font-variant-numeric:tabular-nums; color:var(--tl-ink2); }
.tl-d span{ min-width:22px; text-align:center; border-radius:999px; padding:3px 0; }
.tl-d.today span{ background:var(--tl-today); color:#fff; font-weight:700; min-width:24px; }
.tl-w{ display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:600; color:var(--tl-ink3); }
.tl-d.sat, .tl-w.sat{ color:var(--tl-sat); background:var(--tl-sat-bg); }
.tl-d.sun, .tl-w.sun{ color:var(--tl-sun); background:var(--tl-sun-bg); }

.tl-body{ position:relative; }
.tl-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.tl-bgd{ position:absolute; top:0; bottom:0; }
.tl-bgd.sat{ background:var(--tl-sat-bg); }
.tl-bgd.sun{ background:var(--tl-sun-bg); }

.tl-row{ position:relative; display:flex; border-bottom:1px solid var(--tl-line2); }
/* Cột tên: cả ô tô màu của vòng (pastel), chữ cùng sắc đậm. Viền trắng ngăn các ô. */
.tl-name{
  position:sticky; left:0; z-index:4; flex:0 0 var(--tl-left, 236px); width:var(--tl-left, 236px);
  display:flex; align-items:center; gap:10px; padding:0 8px 0 18px;
  background:var(--tl-p); color:var(--tl-pi); box-shadow:inset 0 -1px 0 rgba(255,255,255,.9), inset -1px 0 0 rgba(255,255,255,.9);
}
.tl-code{ flex:none; min-width:18px; font:700 10px/1 var(--tl-font); letter-spacing:.5px; opacity:.7; font-variant-numeric:tabular-nums; }
.tl-name b{ flex:1; min-width:0; font-size:12.5px; font-weight:650; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-row.k-feedback .tl-name b{ font-style:italic; font-weight:550; }
.tl-row.k-milestone .tl-name b{ letter-spacing:.2px; }
.tl-more{ border:none; background:transparent; color:inherit; cursor:pointer; font-size:15px; padding:2px 5px; border-radius:6px; opacity:0; }
.tl-name:hover .tl-more, .tl-more:focus{ opacity:.8; }
@media (hover:none){ .tl-more{ opacity:.8; } }
.tl-more:hover{ background:rgba(255,255,255,.55); opacity:1; }

.tl-area{ position:relative; z-index:1; cursor:crosshair; user-select:none; -webkit-user-select:none; }
/* Giữ chuột kéo trái/phải (js/113 _tlWirePan): cột tên + vùng trống = bàn tay; chỉ xem thì cả lưới;
   giữ Space thì mọi chỗ. */
.tl-scroll, .tl-name{ cursor:grab; }
.tl-name{ user-select:none; -webkit-user-select:none; }
.tl-scroll.tl-view .tl-area, .tl-scroll.tl-view .tl-bar{ cursor:grab; }
.tl-scroll.tl-space, .tl-scroll.tl-space *{ cursor:grab !important; }
.tl-scroll.tl-panning, .tl-scroll.tl-panning *{ cursor:grabbing !important; user-select:none; }
/* Thanh ngày: khung trong suốt, chỉ các ĐOẠN ngày được tính mới tô (T7/CN chưa chọn để trống). */
.tl-bar{ position:absolute; cursor:grab; }
.tl-sg{ position:absolute; top:0; bottom:0; background:var(--tl-c); border-radius:5px; pointer-events:none; }
.tl-cnt{ position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; color:var(--tl-bi); font:650 11px/1 var(--tl-font); font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.tl-bar:hover .tl-sg{ filter:brightness(.97); }
/* Đang chọn / đang kéo: MỘT viền bao cả thanh (kể cả ô T7/CN để trống). */
.tl-bar.sel, .tl-bar.dragging, .tl-bar.ghost{ outline:1.5px dashed var(--tl-bi); outline-offset:-1px; border-radius:6px; }
.tl-bar.dragging, .tl-bar.ghost{ z-index:3; cursor:grabbing; }
.tl-bar.sel{ z-index:3; }
/* Dấu + ở hai đầu: hiện khi rê chuột / khi thanh đang chọn / đang kéo. */
.tl-h{
  position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:700 14px/1 var(--tl-font);
  background:var(--tl-surface); color:var(--tl-bi); border:1.5px solid var(--tl-bi); box-shadow:0 1px 4px rgba(40,32,24,.2); cursor:ew-resize; z-index:4;
  opacity:0; transition:opacity .12s; touch-action:none;
}
.tl-h.l{ left:-11px; } .tl-h.r{ right:-11px; }
.tl-bar:hover .tl-h, .tl-bar.sel .tl-h, .tl-bar.dragging .tl-h{ opacity:1; }
.tl-del{
  position:absolute; top:-9px; right:12px; width:18px; height:18px; border-radius:50%; border:2px solid var(--tl-surface); padding:0;
  background:#C0533F; color:#fff; font:700 9px/14px var(--tl-font); cursor:pointer; z-index:5; display:none;
}
.tl-bar.sel .tl-del{ display:block; }
.tl-bar.dragging .tl-del{ display:none; }
@media (hover:none){ .tl-h{ width:26px; height:26px; margin-top:-13px; } .tl-h.l{ left:-14px; } .tl-h.r{ right:-14px; } .tl-bar:not(.sel) .tl-h{ opacity:0; pointer-events:none; } }
.tl-empty{ padding:30px; text-align:center; color:var(--tl-ink3); font-size:13px; position:sticky; left:0; width:min(100%, 600px); }

/* ---------- ghi chú cho khách (đáy bảng) ---------- */
.tl-notes{ flex:0 0 auto; display:flex; border-top:1px solid var(--tl-line); background:var(--tl-surface); }
.tl-notes-h{
  flex:0 0 var(--tl-left, 236px); padding:12px 18px; font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--tl-ink3); background:var(--tl-head); border-right:1px solid var(--tl-line);
}
.tl-notes-b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tl-note{
  display:block; width:100%; box-sizing:border-box; padding:8px 16px; min-height:33px; border:none; border-bottom:1px solid var(--tl-line2);
  background:transparent; color:var(--tl-ink); font:400 13px/1.4 var(--tl-font); outline:none;
}
.tl-note:last-child{ border-bottom:none; }
.tl-note::placeholder{ color:var(--tl-ink3); }
input.tl-note:focus{ background:#FFFCF6; box-shadow:inset 2px 0 0 var(--tl-today); }
.tl-hint{ flex:0 0 auto; padding:7px 22px; font-size:11px; color:var(--tl-ink3); border-top:1px solid var(--tl-line); background:var(--tl-bg); }

/* ---------- menu hàng + hộp nhập tên ---------- */
.tl-pop{ position:fixed; z-index:100006; display:flex; flex-direction:column; min-width:160px; padding:5px; background:var(--tl-surface); border:1px solid var(--tl-line); border-radius:12px; box-shadow:0 12px 32px rgba(40,32,24,.18); font-family:var(--tl-font); }
.tl-pop button{ border:none; background:transparent; color:var(--tl-ink); text-align:left; padding:8px 10px; border-radius:8px; font:500 12.5px var(--tl-font); cursor:pointer; }
.tl-pop button:hover{ background:var(--tl-chip); }
.tl-dlg-ov{ position:fixed; inset:0; z-index:100005; display:flex; align-items:center; justify-content:center; background:rgba(38,34,30,.32); padding:16px; font-family:var(--tl-font); }
.tl-dlg{ width:min(400px, 100%); background:var(--tl-surface); color:var(--tl-ink); border:1px solid var(--tl-line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow:0 18px 50px rgba(40,32,24,.25); }
.tl-dlg-h{ font-weight:700; font-size:14px; }
.tl-dlg > input, .tl-dlg input{ font:500 13px var(--tl-font); padding:9px 11px; border-radius:10px; border:1px solid var(--tl-line); background:var(--tl-bg); color:var(--tl-ink); outline:none; }
.tl-dlg input:focus{ border-color:var(--tl-ink3); }
.tl-dlg-f{ display:flex; gap:8px; align-items:center; }

/* ---------- điện thoại ---------- */
@media (max-width:768px){
  .tl-ov{ padding:0; padding-top:env(safe-area-inset-top, 47px); }
  .tl-card{ border-radius:0; }
  .tl-top{ padding:10px 12px; gap:6px; }
  .tl-title{ max-width:100%; flex:1 1 100%; }
  /* PM-MOBILE-A: hàng 1 = tên dự án + trạng thái lưu + nút công cụ; bấm nút mới xổ các công cụ xuống dưới. */
  .tl-top > .tl-title{ flex:1 1 0; min-width:0; margin-right:0; }
  .tl-top > .tl-status{ order:1; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
  .tl-tools-btn{ display:inline-flex; order:2; }
  .tl-tools{ display:none; order:3; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:6px; }
  .tl-top.tools-open > .tl-tools{ display:flex; }
  .tl-tools > .tl-sp{ display:none; }
  /* 2026-10-31 UI3: menu công cụ = lưới 6 cột, chia nhóm (View · Actions · Export & share). Thứ tự DOM giữ như
     máy tính; hàng điện thoại xếp bằng `order` + nhãn chiếm trọn hàng (nhóm vắng nút thì không để hàng trống).
     Nút ✕ đứng ngoài menu, ngay cạnh nút phễu (cùng order 2, DOM sau nút phễu). */
  .tl-top > .tl-x{ order:2; width:34px; height:34px; margin-left:0; flex:0 0 auto; }
  .tl-top.tools-open > .tl-tools{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; align-items:stretch; }
  .tl-tools > .tl-glab{ display:block; grid-column:1 / -1; font:700 10px/1 var(--tl-font); letter-spacing:.8px; text-transform:uppercase; color:var(--tl-ink3); opacity:.8; padding:6px 2px 0; }
  .tl-tools > .tl-g-r1{ grid-column:span 3; }
  .tl-tools > .tl-g-r2{ grid-column:span 2; }
  .tl-tools > .tl-g-lab-act{ order:1; }
  .tl-tools > .tl-g-act{ order:2; grid-column:span 2; }
  .tl-tools > .tl-g-lab-exp{ order:3; }
  .tl-tools > .tl-g-exp{ order:4; grid-column:span 2; }
  .tl-tools > .tl-seg, .tl-tools > .tl-grp{ display:flex; min-width:0; box-sizing:border-box; min-height:36px; }
  .tl-tools > .tl-seg > button, .tl-tools > .tl-grp > .tl-pill{ flex:1 1 0; min-width:0; padding:7px 4px; }
  .tl-tools > .tl-kind1, .tl-tools > .tl-year, .tl-tools > .tl-pill, .tl-tools > .tl-btn{
    display:flex; align-items:center; justify-content:center; min-width:0; width:100%; min-height:36px; box-sizing:border-box;
    padding:7px 4px; text-align:center; overflow:hidden; text-overflow:ellipsis;
  }
  .tl-tools > .tl-year{ text-align-last:center; }
  .tl-hint{ display:none; }
  .tl-name{ padding-left:10px; gap:6px; }
  .tl-notes-h{ padding:10px; }
}

/* ---------- hộp chia sẻ (Share) ---------- */
.tl-dlg.tl-sh{ width:min(480px, 100%); gap:14px; padding:18px 20px 20px; }
.tl-sh-hd{ display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.tl-sh-hd .tl-x{ width:28px; height:28px; font-size:12px; }
.tl-sh-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--tl-line); border-radius:12px; background:var(--tl-bg); }
.tl-sh-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tl-sh-t b{ font-size:13px; font-weight:650; }
.tl-sh-t i{ font-style:normal; font-size:11.5px; color:var(--tl-ink2); line-height:1.4; }
.tl-sh-sel{ font:600 12.5px var(--tl-font); color:var(--tl-ink); background:var(--tl-surface); border:1px solid var(--tl-line); border-radius:999px; padding:7px 12px; cursor:pointer; }
.tl-sh-sel:disabled{ opacity:.6; cursor:default; }
.tl-sh-link{ display:flex; gap:8px; }
.tl-sh-link input{ flex:1; min-width:0; font:500 12.5px var(--tl-font); padding:9px 12px; border-radius:999px; border:1px solid var(--tl-line); background:var(--tl-surface); color:var(--tl-ink2); outline:none; }
.tl-sh-note{ margin:0; font-size:11.5px; line-height:1.5; color:var(--tl-ink3); }

/* ---------- trang khách (timeline.html) ---------- */
html:has(body.tlg){ overflow:hidden; }
body.tlg{ margin:0; background:#EDEAE4; overflow:hidden; }
body.tlg .tl-ov{ background:#EDEAE4; backdrop-filter:none; }
.tlg-giua{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:#EDEAE4; font-family:var(--tl-font, "Segoe UI", system-ui, sans-serif); color:#2B2A28; }
.tlg-hop{ width:min(400px, 100%); background:#fff; border:1px solid #ECE8E1; border-radius:18px; padding:28px 26px; text-align:center; box-shadow:0 18px 50px rgba(40,32,24,.12); }
.tlg-hop h1{ margin:0 0 8px; font-size:17px; font-weight:700; }
.tlg-hop p{ margin:0; font-size:13px; line-height:1.55; color:#6B6660; }
.tlg-form{ display:flex; gap:8px; margin-top:18px; }
.tlg-form input{ flex:1; min-width:0; font:500 13px inherit; padding:10px 14px; border-radius:999px; border:1px solid #ECE8E1; background:#FBFAF7; color:#2B2A28; outline:none; }
.tlg-form button{ border:none; border-radius:999px; padding:0 18px; font:600 13px inherit; background:#2B2A28; color:#fff; cursor:pointer; }
.tlg-loi{ margin-top:12px; font-size:12px; font-weight:600; color:#B4442F; }
.tlg-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100020; background:#2B2A28; color:#fff; padding:9px 16px; border-radius:999px; font:500 12.5px "Segoe UI", system-ui, sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:90vw; }

/* ---------- đang xem bản cũ + hộp Lịch sử phiên bản (2026-10-29) ---------- */
.tl-prev{ flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 22px; background:#FFF6E6; border-bottom:1px solid #F1DFC0; color:#6B4E16; font-size:12.5px; }
.tl-prev b{ font-weight:700; }
.tl-prev span:not(.tl-sp){ color:#8A6A2E; }
.tl-dlg.tl-hi{ width:min(560px, 100%); max-height:min(80vh, 640px); overflow:auto; gap:8px; }
.tl-hi-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--tl-line); border-radius:12px; background:var(--tl-bg); }
.tl-hi-row.cur{ background:var(--tl-surface); border-color:var(--tl-ink3); }
.tl-hi-row.on{ border-color:#E0B25F; background:#FFF9EE; }
.tl-hi-v{ flex:none; min-width:34px; text-align:center; font:700 12px var(--tl-font); padding:5px 0; border-radius:8px; background:var(--tl-chip); color:var(--tl-ink); font-variant-numeric:tabular-nums; }
.tl-hi-tag{ font-size:11px; font-weight:600; color:var(--tl-ink3); }

/* ---------- trang Timeline tổng hợp (js/115) — giao diện app (theo sáng / tối) ---------- */
#page-timelines{ display:none; }
#page-timelines.active{ display:flex; flex-direction:column; gap:12px; }
/* 2026-10-29: nội dung trong #tlp-root (chuyển được vào ô "📅 Timeline" của Bảng làm việc — js/38). */
.tlp-root{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.pmw-tlhost{ height:100%; min-height:0; }
.pmw-tlhost .tlp-root{ height:100%; overflow:auto; padding:8px 10px; gap:8px; }
.tlp-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tlp-tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--bg3); }
.tlp-tabs button{ border:none; background:transparent; color:var(--text2); font:600 12.5px inherit; padding:7px 14px; border-radius:8px; cursor:pointer; }
.tlp-tabs button.on{ background:var(--bg); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.tlp-tabs button span{ display:inline-block; min-width:18px; margin-left:4px; padding:1px 6px; border-radius:999px; background:var(--bg2); font-size:11px; color:var(--text3); }
.tlp-q{ flex:0 1 280px; min-width:160px; padding:8px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text); font:inherit; font-size:13px; }
.tlp-sp{ flex:1; }
.tlp-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
.tlp-tb{ width:100%; min-width:900px; border-collapse:collapse; font-size:13px; }
.tlp-tb th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--text3); padding:10px 12px; background:var(--bg2); border-bottom:1px solid var(--border); white-space:nowrap; }
.tlp-tb td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.tlp-tb tr:last-child td{ border-bottom:none; }
.tlp-tb td b{ display:block; font-weight:650; }
.tlp-tb td small{ display:block; font-size:11px; color:var(--text3); margin-top:2px; }
.tlp-tb .r{ text-align:right; white-space:nowrap; }
.tlp-v{ display:inline-block; padding:2px 8px; border-radius:6px; background:var(--bg3); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
.tlp-share{ font-size:12px; font-weight:600; color:var(--green); }
.tlp-mo{ color:var(--text3); }
.tlp-trong{ padding:40px 20px; text-align:center; color:var(--text3); font-size:13px; border:1px dashed var(--border); border-radius:12px; }
.tlp-canh{ padding:10px 14px; border-radius:10px; background:rgba(245,158,11,.12); color:var(--amber); font-size:12.5px; margin-bottom:8px; }
.tlp-hop-ov{ position:fixed; inset:0; z-index:100004; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.45); }
.tlp-hop{ width:min(480px, 100%); background:var(--bg2); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.tlp-hop-h{ font-weight:700; font-size:15px; }
.tlp-hop-f{ display:flex; gap:8px; align-items:center; }
.tlp-ghi{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text2); }
.tlp-f{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--text2); }
.tlp-f input, .tlp-f select, .tlp-da{ font:inherit; font-size:13px; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--bg); color:var(--text); }
.tlp-da{ width:100%; }
.tlp-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:768px){ .tlp-q{ flex:1 1 100%; } .tlp-2{ grid-template-columns:1fr; } }
/* Mỗi dự án một hàng (2026-10-29): chip loại timeline + hàng con khi xổ ra */
.tlp-tb tr.tlp-cha{ cursor:pointer; }
.tlp-tb tr.tlp-cha:hover td{ background:var(--bg2); }
.tlp-tb tr.tlp-cha.mo td{ background:var(--bg2); border-bottom-color:transparent; }
.tlp-mui{ float:left; width:18px; margin-right:4px; color:var(--text2); font-size:14px; line-height:18px; }
/* Ô loại timeline: nền + viền tô theo loại (bỏ vạch bóng đổ bên trái — trên ô bo tròn nó bị cong méo). */
.tlp-chip{ display:inline-flex; align-items:center; gap:6px; margin:2px 6px 2px 0; padding:5px 12px; border-radius:999px; border:1px solid var(--tlp-cv, var(--border)); background:var(--tlp-cb, var(--bg3)); color:var(--tlp-ct, var(--text)); font:700 12px inherit; cursor:pointer; transition:filter .12s, transform .12s; }
.tlp-chip i{ font-style:normal; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--tlp-cv, var(--border)); color:var(--tlp-ci, var(--text)); }
.tlp-chip:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.tlp-chip.k-still{ --tlp-cb:rgba(96,165,250,.16); --tlp-cv:rgba(96,165,250,.55); --tlp-ct:#93C5FD; --tlp-ci:#0B1F3A; }
.tlp-chip.k-animation{ --tlp-cb:rgba(251,146,60,.16); --tlp-cv:rgba(251,146,60,.55); --tlp-ct:#FDBA74; --tlp-ci:#3A1A05; }
.tlp-chip.k-update{ --tlp-cb:rgba(74,222,128,.14); --tlp-cv:rgba(74,222,128,.5); --tlp-ct:#86EFAC; --tlp-ci:#0B2E17; }
:root[data-theme="light"] .tlp-chip.k-still{ --tlp-cb:#E3EEFB; --tlp-cv:#9DBFE6; --tlp-ct:#1D4E89; --tlp-ci:#fff; }
:root[data-theme="light"] .tlp-chip.k-animation{ --tlp-cb:#FCEADC; --tlp-cv:#E9B48C; --tlp-ct:#8A3F12; --tlp-ci:#fff; }
:root[data-theme="light"] .tlp-chip.k-update{ --tlp-cb:#E2F3E2; --tlp-cv:#9CCB9C; --tlp-ct:#2F6B34; --tlp-ci:#fff; }
:root[data-theme="light"] .tlp-chip i{ background:var(--tlp-ct); }
.tlp-tb tr.tlp-con td{ background:var(--bg2); font-size:12.5px; }
.tlp-nhanh{ display:inline-block; margin-left:20px; padding-left:10px; border-left:2px solid var(--border); font-weight:600; }

/* ============================================================
   LỊCH DỰ ÁN — tab "🗓️ Lịch dự án" trong PM Dashboard (js/116, 2026-10-29)
   Cùng giao diện bảng Timeline: nền sáng ấm cố định (không theo sáng/tối của app), màu pastel.
   ============================================================ */
.pcal{
  --tl-bg:#FBFAF7; --tl-surface:#FFFFFF; --tl-head:#F7F5F1; --tl-line:#ECE8E1; --tl-line2:#F2EFEA;
  --tl-ink:#2B2A28; --tl-ink2:#6B6660; --tl-ink3:#9A948C; --tl-chip:#F1EEE9;
  --tl-sat:#5B7BA6; --tl-sat-bg:#F2F5F9; --tl-sun:#B4644F; --tl-sun-bg:#FBF2EF; --tl-today:#E07A5F;
  --tl-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
  flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--tl-bg); color:var(--tl-ink); border:1px solid var(--tl-line); border-radius:14px; font-family:var(--tl-font);
}
.pcal-top{ flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--tl-surface); border-bottom:1px solid var(--tl-line); }
.pcal-thang{ display:inline-flex; align-items:center; gap:4px; padding:3px; border-radius:999px; background:var(--tl-chip); }
.pcal-thang b{ min-width:118px; text-align:center; font-size:13.5px; font-weight:700; }
.pcal-nut{ border:none; width:28px; height:28px; border-radius:50%; background:var(--tl-surface); color:var(--tl-ink); font-size:16px; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(40,32,24,.14); }
.pcal-pill{ border:1px solid var(--tl-line); background:var(--tl-surface); color:var(--tl-ink); font:600 12px var(--tl-font); padding:7px 12px; border-radius:999px; cursor:pointer; }
.pcal-pill:hover, .pcal-nut:hover{ border-color:var(--tl-ink3); }
.pcal-q{ flex:0 1 220px; min-width:140px; font:500 12.5px var(--tl-font); padding:7px 12px; border-radius:999px; border:1px solid var(--tl-line); background:var(--tl-bg); color:var(--tl-ink); outline:none; }
.pcal-sp{ flex:1; }
.pcal-xep{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--tl-ink3); }
.pcal-xep select{ font:600 12px var(--tl-font); color:var(--tl-ink); background:var(--tl-chip); border:none; border-radius:999px; padding:7px 10px; cursor:pointer; text-transform:none; letter-spacing:0; }
/* Thông tin dự án đang chọn: nằm ngay trong hàng công cụ (giữa chọn tháng và Tháng này), 1 dòng. */
.pcal-info{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:4px 16px; flex-wrap:nowrap; overflow:hidden; padding:0 6px; font-size:12.5px; white-space:nowrap; }
.pcal-info > *{ flex:none; }
.pcal-info .pcal-canh{ flex:0 1 auto; min-width:0; overflow:hidden; flex-wrap:nowrap; }
.pcal-goi{ color:var(--tl-ink3); font-size:12px; }
.pcal-i-ten{ font-size:13.5px; font-weight:700; margin-right:4px; }
.pcal-i{ display:inline-flex; align-items:baseline; gap:6px; }
.pcal-i i{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--tl-ink3); }
.pcal-i em{ font-style:normal; color:var(--tl-ink2); }
.pcal-i b{ font-size:14px; font-variant-numeric:tabular-nums; }
.pcal-x{ margin-left:4px; border:none; background:var(--tl-chip); color:var(--tl-ink2); width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:11px; }
.pcal-scroll{ flex:1; min-height:0; overflow:auto; position:relative; background:var(--tl-surface); overscroll-behavior:contain; touch-action:pan-x pan-y; }
.pcal-scroll::-webkit-scrollbar{ width:10px; height:0; }
.pcal-scroll::-webkit-scrollbar-thumb{ background:#E2DDD5; border-radius:10px; border:2px solid var(--tl-surface); }
.pcal-trong{ padding:40px 20px; text-align:center; color:var(--tl-ink3); font-size:13px; }
.pcal-inner{ position:relative; min-height:100%; }
.pcal-head{ position:sticky; top:0; z-index:6; background:var(--tl-head); border-bottom:1px solid var(--tl-line); display:grid; grid-template-columns:var(--pcal-left, 230px) 1fr; cursor:grab; user-select:none; -webkit-user-select:none; }
.pcal-head.keo{ cursor:grabbing; }
.pcal-corner{ position:sticky; left:0; z-index:7; grid-column:1; grid-row:1 / span 3; cursor:default; background:var(--tl-head); border-right:1px solid var(--tl-line); padding:8px 16px; display:flex; flex-direction:column; justify-content:flex-end; }
.pcal-corner b{ font-size:17px; font-weight:700; letter-spacing:-.3px; }
.pcal-corner span{ font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--tl-ink3); }
.pcal-hr{ position:relative; grid-column:2; }
.pcal-hr-wk{ height:16px; } .pcal-hr-d{ height:24px; } .pcal-hr-w{ height:18px; }
.pcal-mo, .pcal-wk, .pcal-d, .pcal-w{ position:absolute; top:0; bottom:0; }
.pcal-mo span{ position:sticky; left:calc(var(--pcal-left, 230px) + 10px); display:inline-block; padding:8px 10px 0; font-size:12.5px; font-weight:600; white-space:nowrap; }
.pcal-wk{ font:600 9.5px/16px var(--tl-font); letter-spacing:.4px; color:var(--tl-ink3); padding-left:6px; white-space:nowrap; overflow:hidden; border-left:1px solid var(--tl-line2); }
.pcal-d{ display:flex; align-items:center; justify-content:center; font:500 11.5px var(--tl-font); font-variant-numeric:tabular-nums; color:var(--tl-ink2); border-left:1px solid var(--tl-line2); }
.pcal-d span{ min-width:24px; text-align:center; border-radius:999px; padding:3px 0; }
.pcal-d.today span{ background:var(--tl-today); color:#fff; font-weight:700; }
.pcal-w{ display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--tl-ink3); border-left:1px solid var(--tl-line2); }
.pcal-d.sat, .pcal-w.sat{ color:var(--tl-sat); background:var(--tl-sat-bg); }
.pcal-d.sun, .pcal-w.sun{ color:var(--tl-sun); background:var(--tl-sun-bg); }
.pcal-body{ position:relative; }
.pcal-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.pcal-bgd{ position:absolute; top:0; bottom:0; }
.pcal-bgd.sat{ background:var(--tl-sat-bg); } .pcal-bgd.sun{ background:var(--tl-sun-bg); }
.pcal-row{ position:relative; display:flex; border-bottom:1px solid var(--tl-line2); }
.pcal-name{
  position:sticky; left:0; z-index:4; flex:0 0 var(--pcal-left, 230px); width:var(--pcal-left, 230px);
  display:flex; flex-direction:column; justify-content:center; gap:3px; padding:6px 10px 6px 16px; cursor:pointer;
  background:var(--tl-p); color:var(--tl-pi); box-shadow:inset 0 -1px 0 rgba(255,255,255,.9), inset -1px 0 0 rgba(255,255,255,.9);
}
.pcal-name b{ font-size:12.5px; font-weight:650; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcal-name:hover{ filter:brightness(.97); }
.pcal-row.chon .pcal-name{ box-shadow:inset 4px 0 0 var(--tl-pi), inset 0 -1px 0 rgba(255,255,255,.9); }
.pcal-row.chon{ background:rgba(224,122,95,.05); }
.pcal-tt{ align-self:flex-start; font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.4px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.7); }
.pcal-tt.hold{ color:#8A5A12; }
.pcal-tt.fin{ color:#2F6B34; }
.pcal-area{ position:relative; z-index:1; }
.pcal-o{ position:absolute; top:5px; bottom:5px; padding:0 3px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--tl-line2); }
.pcal-v{ height:22px; flex:none; display:flex; align-items:center; padding:0 7px; border-radius:5px; background:var(--tl-c); color:var(--tl-bi); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcal-v b{ font-weight:700; flex:none; }
.pcal-v span{ overflow:hidden; text-overflow:ellipsis; opacity:.85; white-space:pre; }
.pcal-v.xong{ opacity:.55; text-decoration:line-through; }
@media (max-width:768px){ .pcal-top{ padding:8px 10px; } .pcal-q{ flex:1 1 100%; } .pcal-name{ padding-left:10px; } }
/* Lịch sử hạn (view đã sang vòng khác) + cảnh báo view chưa có deadline */
.pcal-v.qua{ opacity:.6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.pcal-v.qua::after{ content:"↪"; margin-left:auto; padding-left:6px; font-size:10px; opacity:.8; }
.pcal-canh{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 6px; padding:4px 10px; border-radius:10px; background:#FDECE6; color:#9B3A22; font-size:12px; font-weight:600; }
.pcal-canh em{ font-style:normal; font-weight:500; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.7); color:#7A2E1B; font-size:11px; }
/* Hàng công cụ Lịch dự án luôn 1 dòng trên máy tính: thông tin dự án co lại, phần bên phải giữ nguyên. */
@media (min-width:769px){
  .pcal-top{ flex-wrap:nowrap; }
  .pcal-top > :not(.pcal-info){ flex-shrink:0; }
  .pcal-top .pcal-q{ flex:0 0 170px; min-width:0; }
}
/* Ô "🗓️ Lịch dự án" trong Bảng làm việc (js/38 _pmwRenderCal): bảng lịch thật lấp đầy ô. */
#pmw-cal-body{ overflow:hidden; }
.pmw-calhost{ height:100%; min-height:0; display:flex; flex-direction:column; }
.pmw-calhost > #pmd-cal-content{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* 2026-10-30 PM-MOBILE-A: Lịch dự án là trang riêng (#page-project_calendar, js/116) — bảng lấp đầy trang,
   chỉ vùng ngày bên trong cuộn (giống lúc còn là tab trong PM Dashboard). */
.main:has(#page-project_calendar.active) > .content{ padding:0 4px 4px; display:flex; flex-direction:column; min-height:0; }
#page-project_calendar.active{ display:flex; flex-direction:column; flex:1; min-height:0; }
#page-project_calendar > #pmd-cal-content{ flex:1; min-height:0; display:flex; flex-direction:column; }
.pmw-calhost .pcal{ border-radius:0; border:none; }
/* 2026-10-30 PM-MOBILE-A2 (js/116): bỏ hàng công cụ trên bảng lịch. Chuyển tháng ‹ › trong ô góc trái;
   "Tháng này" + nút công cụ trên topbar (menu gắn <body> — .pmd-pop ở layout.css). Trong ô "Lịch dự án" của
   Bảng làm việc (không có topbar) cụm đó nằm ở dải nhỏ .pcal-mini. Dải thông tin chỉ hiện khi đã chọn dự án. */
#page-project_calendar .pcal{ border-top-left-radius:0; border-top-right-radius:0; border-top:none; }
.pcal-tools{ display:none; flex:0 0 auto; align-items:center; gap:4px; }
.main:has(#page-project_calendar.active) > .topbar .pcal-tools, .pcal-mini .pcal-tools{ display:flex; margin-left:auto; }
.pcal-nay{ height:32px; min-height:32px !important; padding:0 10px; font-size:12px; white-space:nowrap; }
.pcal-mini{ flex:0 0 auto; display:flex; align-items:center; padding:4px 8px; background:var(--tl-surface); border-bottom:1px solid var(--tl-line); }
.pcal-mini:empty{ display:none; }
.pcal-mini .btn{ color:var(--tl-ink); }
.pcal > .pcal-info{ flex:0 0 auto; padding:7px 14px; background:var(--tl-surface); border-bottom:1px solid var(--tl-line); overflow-x:auto; overflow-y:hidden; }
.pcal > .pcal-info:empty{ display:none; }
.pcal-cnav{ display:flex; align-items:center; gap:4px; min-width:0; }
.pcal-cnav b{ flex:1 1 auto; min-width:0; text-align:center; font-size:15px; font-weight:700; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcal-cnav .pcal-nut{ flex:0 0 auto; width:24px; height:24px; font-size:15px; }
.pcal-corner > span{ text-align:center; margin-top:2px; }
.pcal-pop{ width:300px; }
.pcal-pop-goi{ font-size:12px; line-height:1.5; color:var(--text2); padding:4px 8px; }
.pcal-pop-q{ box-sizing:border-box; width:100%; margin:4px 0; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:13px; }
.pcal-pop-xep{ display:flex; align-items:center; gap:8px; padding:4px 8px; font-size:12px; color:var(--text2); }
.pcal-pop-xep select{ flex:1; min-width:0; padding:7px 8px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:12.5px; }
/* Ô tên dự án: logo + tên cùng 1 hàng, nhãn Hold / Final bên dưới; không phần nào được co mất. */
.pcal-name > *{ flex-shrink:0; }
.pcal-nm{ display:flex; align-items:center; gap:6px; min-width:0; }
.pcal-nm .logo-da{ flex:0 0 auto; }
.pcal-nm b{ flex:1 1 auto; min-width:0; }
@media (max-width:768px){
  .pcal-corner{ padding:6px 6px; }
  .pcal-cnav{ gap:2px; }
  .pcal-cnav b{ font-size:12.5px; }
  .pcal-cnav .pcal-nut{ width:20px; height:20px; font-size:13px; }
  .pcal > .pcal-info{ padding:6px 10px; }
}
/* 2026-10-30 PC-CAL-2 (js/116 _pcalTbHtml): công cụ xem Lịch dự án — dùng lại nút Timeline (.tl-seg/.tl-pill/.tl-year).
   Máy tính: thanh .pcal-tb trên topbar, trước "Tháng này". Điện thoại: giấu thanh, công cụ nằm đầu menu (.pcal-pop-xem). */
.pcal-tb, .pcal-pop-xem{
  --tl-surface:#FFFFFF; --tl-ink:#2B2A28; --tl-ink2:#6B6660; --tl-ink3:#9A948C; --tl-chip:#F1EEE9;
  --tl-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  display:flex; align-items:center; gap:6px;
}
.pcal-tb{ margin-right:4px; }
.pcal-tb .tl-pill, .pcal-tb .tl-seg > button, .pcal-pop-xem .tl-pill, .pcal-pop-xem .tl-seg > button{ padding:6px 10px; min-height:0; }
.pcal-tb .tl-year, .pcal-pop-xem .tl-year{ padding:6px 8px; }
.tl-grp.tat{ opacity:.45; }
.tl-grp.tat .tl-pill{ cursor:default; }
.pcal-pop-xem{ flex-wrap:wrap; padding:4px 8px 8px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.pcal-hr-th{ height:30px; }
.pcal-hr-th .pcal-d span{ min-width:40px; font-weight:600; }
.pcal-v.pcal-them{ background:var(--tl-chip); color:var(--tl-ink2); justify-content:center; }
/* 2026-10-31 UI3: "+N view" bấm được → bảng nổi (_pcalMoO, js/116) liệt kê đủ view của ô, mỗi view 1 dòng cùng màu. */
.pcal-v.pcal-them{ cursor:pointer; }
.pcal-v.pcal-them:hover{ color:var(--tl-ink); box-shadow:inset 0 0 0 1px var(--tl-ink3); }
.pcal-mds{ display:flex; flex-direction:column; gap:4px; padding:8px 12px 10px; }
.pcal-v.pcal-v-dong{ height:auto; min-height:28px; padding:5px 9px; font-size:12px; white-space:normal; flex-wrap:wrap; column-gap:0; line-height:1.35; }
.pcal-v.pcal-v-dong span{ white-space:normal; }
@media (max-width:768px){ .pcal-tb{ display:none; } }
/* Trang Timeline (js/115) — điện thoại: ô tìm + 2 nút gom vào nút công cụ trên topbar. Máy tính giữ như cũ. */
.tlp-tools{ display:none; flex:0 0 auto; align-items:center; }
.tlp-pop{ width:300px; }
.tlp-pop .tlp-q{ flex:none; box-sizing:border-box; width:100%; min-width:0; margin-bottom:4px; }
@media (max-width:768px){
  .main:has(#page-timelines.active) > .topbar .tlp-tools{ display:flex; margin-left:auto; }
  #page-timelines .tlp-bar > .tlp-q, #page-timelines .tlp-bar > .btn, #page-timelines .tlp-bar > .tlp-sp{ display:none; }
}
#pmw-tl-body:has(.pmw-tlhost){ overflow:hidden; }