/* abktiendo.vvbsolutions.com — bảng theo dõi tiến độ dự án ABK */

:root {
  /* Hướng "Tươi": nền xanh rất nhạt, thẻ trắng nổi, bo góc lớn.
     Các tông sáng trong bản mockup không đạt WCAG AA ở cỡ chữ thường
     (chữ phụ 4.11, nhấn 4.06) nên đã đậm thêm một bậc — nhìn gần như cũ,
     nhưng đọc được. */
  --brand:#366FD8;          /* xanh logo VVB — dải tháng, nhãn thương hiệu */
  --teal:#5CE0E6;           /* xanh ngọc logo — điểm nhấn trang trí */
  --paper:#F3F6FC; --surface:#FFFFFF; --surface-2:#F5F8FD;
  --ink:#16203A; --muted:#5C6B86; --rule:#DCE4F4; --rule-soft:#EAF0FA;
  --accent:#2F62E8;         /* nhấn dùng cho CHỮ và nút — đạt AA */
  --accent-soft:#E7EDFD;    /* nền nhạt cho chip/nút */
  --accent-row:#F1F5FF;     /* nền hàng "tuần hiện tại" — sáng hơn để số tuần vẫn đạt AA */
  --signal:#A2560B; --signal-soft:#F8EEDF;
  --shadow:0 1px 2px rgba(22,32,58,.05), 0 6px 18px rgba(47,98,232,.10);
  --shadow-lift:0 2px 6px rgba(22,32,58,.07), 0 12px 28px rgba(47,98,232,.16);
  --band-past:#5C6B86;      /* nền dải tháng đã qua — chữ trắng phải đạt AA */

  /* bo góc — nét đặc trưng của hướng Tươi */
  --r-card:16px; --r-box:12px; --r-btn:11px; --r-pill:999px;

  --st-moi:#5A6576;        --st-moi-bg:#EDF0F6;
  --st-xuly:#1D4E89;       --st-xuly-bg:#E2EAFB;
  --st-review:#8A4B0A;     --st-review-bg:#F9EFE0;
  --st-dieuchinh:#B02418;  --st-dieuchinh-bg:#FCE7E5;
  --st-xong:#1B6E45;       --st-xong-bg:#E0F1E8;

  --f-display:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
  --f-body:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
  --f-mono:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
}

/* Giao diện tối chỉ bật khi người xem chọn rõ ràng; mặc định luôn là nền trắng. */
:root[data-theme="dark"] {
  --brand:#366FD8; --teal:#5CE0E6;
  --paper:#0C111C; --surface:#141B29; --surface-2:#1A2233;
  --ink:#E5EAF5; --muted:#8D9AB4; --rule:#28324516; --rule:#283245; --rule-soft:#1D2534;
  --accent:#7FA5F0; --accent-soft:#172440; --accent-row:#141E33;
  --band-past:#3E4961;
  --signal:#DDA23F; --signal-soft:#2A2214;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.4);
  --st-moi:#8D9AB4;       --st-moi-bg:#1D2534;
  --st-xuly:#7FA5F0;      --st-xuly-bg:#152238;
  --st-review:#E0A93F;    --st-review-bg:#2A2214;
  --st-dieuchinh:#F08A7E; --st-dieuchinh-bg:#2E1917;
  --st-xong:#63C495;      --st-xong-bg:#11261D;
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}

body{background:var(--paper);color:var(--ink);font-family:var(--f-body);
     font-variant-numeric:tabular-nums;
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:36px 24px 96px;display:flex;flex-direction:column;gap:40px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- masthead ---------- */
.masthead{display:flex;flex-direction:column;gap:16px;padding-bottom:28px;
          border-bottom:2px solid var(--brand);position:relative}
.masthead::after{content:"";position:absolute;left:0;bottom:-2px;width:88px;height:2px;background:var(--teal)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.8vw,2.95rem);
   line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.standfirst{width:100%;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-card);
       overflow:hidden;margin-top:4px;box-shadow:var(--shadow)}
.fact{background:var(--surface);padding:13px 16px;display:flex;flex-direction:column;gap:3px}
.fact dt{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fact dd{font-family:var(--f-mono);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}

.block{display:flex;flex-direction:column;gap:18px}
h2{font-family:var(--f-display);font-weight:800;font-size:1.458rem;letter-spacing:-.022em;
   display:flex;align-items:baseline;gap:12px}
h2::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- thẻ trạng thái ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:13px;
       font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;
       border:1px solid currentColor;white-space:nowrap;flex-shrink:0}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge[data-st="moi"]{color:var(--st-moi);background:var(--st-moi-bg)}
.badge[data-st="dang-xu-ly"]{color:var(--st-xuly);background:var(--st-xuly-bg)}
.badge[data-st="review"]{color:var(--st-review);background:var(--st-review-bg)}
.badge[data-st="dieu-chinh"]{color:var(--st-dieuchinh);background:var(--st-dieuchinh-bg)}
.badge[data-st="hoan-thanh"]{color:var(--st-xong);background:var(--st-xong-bg)}

/* ---------- bảng tổng quan trạng thái ---------- */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tally-card{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--c);
            border-radius:var(--r-card);padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.tally-card[data-st="moi"]{--c:var(--st-moi)}
.tally-card[data-st="dang-xu-ly"]{--c:var(--st-xuly)}
.tally-card[data-st="review"]{--c:var(--st-review)}
.tally-card[data-st="dieu-chinh"]{--c:var(--st-dieuchinh)}
.tally-card[data-st="hoan-thanh"]{--c:var(--st-xong)}
.tally-n{font-family:var(--f-mono);font-size:2.16rem;font-weight:600;line-height:1;
         font-variant-numeric:tabular-nums;color:var(--c)}
.tally-name{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tally-desc{font-size:13.5px;color:var(--muted);line-height:1.45}

/* ---------- dòng thời gian ---------- */
.tl-scroll{overflow-x:auto;padding:4px 0 2px}
.tl{min-width:980px}
.tl-pins{position:relative;height:26px}
.tl-pin{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.tl-pin--end{transform:translateX(-100%);align-items:flex-end}
.tl-pin-label{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.05em;
              text-transform:uppercase;color:var(--signal);white-space:nowrap}
.tl-pin-stem{width:1px;height:7px;background:var(--signal)}

.tl-bar{position:relative;display:flex;height:52px;border:1px solid var(--rule);background:var(--surface)}
.tl-seg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
        gap:3px;border-right:1px solid var(--rule);min-width:0;overflow:hidden}
.tl-seg:last-child{border-right:0}
.tl-seg.is-gate{background:var(--signal-soft)}
.tl-seg-done{position:absolute;top:0;bottom:0;left:0;background:var(--st-xong);opacity:.22;z-index:1}
.tl-seg-tag{position:relative;z-index:2;font-family:var(--f-mono);font-size:13.5px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.tl-seg.is-gate .tl-seg-tag{color:var(--signal)}
.tl-seg-pct{position:relative;z-index:2;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}

.tl-now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent);z-index:3}
.tl-now::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tl-now-flag{position:absolute;top:50%;left:8px;transform:translateY(-50%);font-family:var(--f-mono);
             font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
             color:var(--accent);white-space:nowrap}

.tl-ticks{display:flex;height:9px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.tl-tick{border-right:1px solid var(--rule-soft);min-width:0}
.tl-tick:last-child{border-right:0}
.tl-tick.is-month{border-right-color:var(--rule)}
.tl-tick[data-st="hoan-thanh"]{background:var(--st-xong);opacity:.6}
.tl-tick[data-st="dang-xu-ly"]{background:var(--st-xuly);opacity:.5}
.tl-tick[data-st="review"]{background:var(--st-review);opacity:.6}
.tl-tick[data-st="dieu-chinh"]{background:var(--st-dieuchinh);opacity:.75}

.tl-labels{display:flex;margin-top:10px}
.tl-label{padding-right:10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.tl-label b{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.1em}
.tl-label.is-gate b{color:var(--signal)}
.tl-label span{font-family:var(--f-mono);font-size:13px;color:var(--muted);
               font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-label em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}

/* thanh kế hoạch vs thực tế */
.pace{display:flex;flex-direction:column;gap:8px;background:var(--surface);
      border:1px solid var(--rule);border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--shadow)}
.pace-row{display:grid;grid-template-columns:130px 1fr 62px;align-items:center;gap:12px}
.pace-name{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pace-track{height:10px;background:var(--surface-2);border:1px solid var(--rule);position:relative;overflow:hidden}
.pace-fill{position:absolute;top:0;bottom:0;left:0}
.pace-fill.is-plan{background:var(--accent);opacity:.45}
.pace-fill.is-real{background:var(--st-xong)}
.pace-val{font-family:var(--f-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.pace-gap{font-size:14px;color:var(--muted);line-height:1.5;margin-top:2px}
.pace-gap strong{color:var(--signal)}

/* ---------- bộ lọc ---------- */
.filters{display:flex;flex-direction:column;gap:10px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-row .filter-label{min-width:118px;flex-shrink:0}

.filter-label{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;
              text-transform:uppercase;color:var(--muted);margin-right:2px}
.chip{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:0;
      padding:6px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);
      color:var(--muted);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip[aria-pressed="true"]{background:var(--brand);color:#FFFFFF;border-color:var(--brand);
                           box-shadow:0 2px 8px rgba(54,111,216,.28)}
.chip-n{opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}

/* ---------- tháng & tuần ---------- */
.months{display:flex;flex-direction:column;gap:30px}
.month{display:flex;flex-direction:column}
.month[hidden]{display:none}
.month-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 20px;
            background:var(--brand);color:#FFFFFF;width:100%;border:0;text-align:left;
            border-radius:var(--r-card) var(--r-card) 0 0;
            font-family:inherit;font-size:inherit;cursor:pointer}
.month-head:hover{filter:brightness(1.08)}

.month-head:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.month.is-gate .month-head{background:var(--signal);color:#FFFFFF}
.month-tag{font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.1em;
           padding:2px 8px;border:1px solid currentColor}
.month-title{font-family:var(--f-display);font-size:1.188rem;font-weight:700}
.month-span{font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums;margin-left:auto;opacity:.85}
.month-prog{font-family:var(--f-mono);font-size:13px;font-weight:600;padding:2px 8px;
            background:rgba(255,255,255,.16);font-variant-numeric:tabular-nums}

.weeks{display:flex;flex-direction:column;border:1px solid var(--rule);border-top:0;background:var(--surface);
       border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;box-shadow:var(--shadow)}

.week{display:grid;grid-template-columns:238px 1fr;gap:0 24px;padding:16px 20px;
      border-bottom:1px solid var(--rule-soft)}
.week:last-child{border-bottom:0}
.week[hidden]{display:none}
.week.is-now{box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-row)}
.week.is-milestone{box-shadow:inset 3px 0 0 var(--signal);background:var(--signal-soft)}

.week-rail{display:flex;flex-direction:column;gap:4px}
.week-no{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.week.is-milestone .week-no{color:var(--signal)}
.week-dates{font-family:var(--f-mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.week-meta{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.04em}
.week-mini{display:flex;height:4px;gap:1px;margin-top:5px}
.week-mini i{flex:1;background:var(--st-moi-bg)}
.week-mini i[data-st="dang-xu-ly"]{background:var(--st-xuly)}
.week-mini i[data-st="review"]{background:var(--st-review)}
.week-mini i[data-st="dieu-chinh"]{background:var(--st-dieuchinh)}
.week-mini i[data-st="hoan-thanh"]{background:var(--st-xong)}

.week-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.week-title{font-family:var(--f-display);font-size:1.123rem;font-weight:600;letter-spacing:-.005em}
.items{display:flex;flex-direction:column;gap:6px}
.item{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:start;
      padding:7px 10px;background:var(--surface-2);border-left:2px solid var(--st-moi)}
.item[hidden]{display:none}
.item[data-st="dang-xu-ly"]{border-left-color:var(--st-xuly)}
.item[data-st="review"]{border-left-color:var(--st-review)}
.item[data-st="dieu-chinh"]{border-left-color:var(--st-dieuchinh)}
.item[data-st="hoan-thanh"]{border-left-color:var(--st-xong)}
.item-text{font-size:15.5px;line-height:1.5;min-width:0}
.item[data-st="hoan-thanh"] .item-text{color:var(--muted)}
.item-note{grid-column:1/-1;font-size:13.5px;line-height:1.45;color:var(--muted);
           font-style:italic;padding-top:2px}

.empty{padding:20px;text-align:center;color:var(--muted);font-size:15px;
       background:var(--surface);border:1px dashed var(--rule)}
.empty[hidden]{display:none}

/* ---------- lưu ý ---------- */
.risks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.risk{background:var(--surface);padding:18px 21px;display:flex;flex-direction:column;gap:5px}
.risk-head{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.risk-title{font-weight:600;font-size:16px}
.risk p{font-size:15px;color:var(--muted);line-height:1.55}

.seed-warn{display:flex;gap:10px;padding:12px 16px;background:var(--signal-soft);
           border-left:3px solid var(--signal);color:var(--signal);font-size:14.5px;line-height:1.5}
.seed-warn b{font-weight:600}

.colophon{border-top:1px solid var(--rule);padding-top:18px;font-size:14px;color:var(--muted);
          display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}
.colophon span{font-family:var(--f-mono);font-size:13px}

.loading{padding:60px 20px;text-align:center;color:var(--muted);font-family:var(--f-mono);font-size:14px}
.fatal{padding:20px;background:var(--signal-soft);border-left:3px solid var(--signal);color:var(--signal);font-size:15px}
.fatal code{font-family:var(--f-mono);font-size:14px}

@media (max-width:720px){
  .week{grid-template-columns:1fr;gap:10px}
  .week-rail{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .week-mini{width:100%;margin-top:2px}
  .month-span{margin-left:0;width:100%}
  .pace-row{grid-template-columns:96px 1fr 54px;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- bình luận theo hạng mục ---------- */


.chip-sync{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.05em;
           text-transform:uppercase;color:var(--signal);background:var(--signal-soft);
           border:1px solid var(--signal);padding:1px 5px;white-space:nowrap}

.thread-body{display:flex;flex-direction:column;gap:10px;padding:10px 0 4px;
             margin-top:4px;border-top:1px dashed var(--rule)}

.cmt-log{display:flex;flex-direction:column;gap:8px}
.cmt-none{font-size:13.5px;color:var(--muted);font-style:italic}
.cmt{background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--accent);
     padding:8px 11px;display:flex;flex-direction:column;gap:3px}
.cmt.is-local{border-left-color:var(--signal);background:var(--signal-soft)}
.cmt-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cmt-who{font-size:14px;font-weight:600}
.cmt-when{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cmt-text{font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.cmt-del{margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;
         font-family:var(--f-mono);font-size:13px;color:var(--muted);text-decoration:underline}
.cmt-del:hover{color:var(--signal)}

.cmt-form{display:flex;flex-direction:column;gap:7px}
.cmt-name,.cmt-input{width:100%;font-family:var(--f-body);font-size:14.5px;color:var(--ink);
                     background:var(--surface);border:1px solid var(--rule);padding:8px 11px;border-radius:7px}
.cmt-name{max-width:340px}
.cmt-input{resize:vertical;min-height:62px;line-height:1.5}
.cmt-name:focus,.cmt-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.cmt-name::placeholder,.cmt-input::placeholder{color:var(--muted);opacity:.75}

.cmt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{font-family:var(--f-body);font-size:13.5px;font-weight:700;letter-spacing:.01em;
     padding:9px 18px;border:1px solid transparent;border-radius:var(--r-btn);
     background:linear-gradient(180deg,var(--brand) 0%,#2A5DBE 100%);color:#FFFFFF;cursor:pointer;
     box-shadow:0 1px 2px rgba(14,24,48,.16), 0 2px 8px rgba(54,111,216,.22);
     transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);
           box-shadow:0 2px 4px rgba(14,24,48,.18), 0 6px 16px rgba(54,111,216,.30)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(14,24,48,.2)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-ghost{background:none;color:var(--signal);border:1px solid var(--signal);box-shadow:none}
.btn-ghost:hover{background:var(--signal);color:#fff;filter:none;
                 box-shadow:0 2px 8px rgba(162,86,11,.25)}
.cmt-msg{font-size:13px;line-height:1.4}
.cmt-msg.is-ok{color:var(--st-xong)}
.cmt-msg.is-err{color:var(--signal)}

/* ---------- thanh nhắc đồng bộ ---------- */
#sync[hidden]{display:none}
.syncbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 18px;
         background:var(--signal-soft);border:1px solid var(--signal);border-left-width:3px}
.syncbar-text{font-size:14.5px;line-height:1.5;color:var(--signal);flex:1;min-width:260px}
.syncbar-text b{font-weight:700}
.syncbar-acts{display:flex;flex-wrap:wrap;gap:8px}
#dump{width:100%;min-height:150px;font-family:var(--f-mono);font-size:13px;margin-top:10px;
      background:var(--surface);color:var(--ink);border:1px solid var(--rule);padding:10px}
#dump[hidden]{display:none}

/* ---------- thanh thao tác trên mỗi hạng mục ---------- */
.item{grid-template-columns:1fr auto;border-radius:var(--r-box)}
.item-badge{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.item-tools{grid-column:1/-1;display:flex;flex-direction:column;gap:0}
.item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:8px;margin-top:6px;
              border-top:1px dashed var(--rule)}

.st-form{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.st-label{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.st-select{min-width:150px;border-radius:9px;font-family:var(--f-body);font-size:13.5px;color:var(--ink);background:var(--surface);
           border:1px solid var(--rule);padding:7px 11px;cursor:pointer;min-width:136px}
.st-select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.st-msg{font-size:13px;line-height:1.4}
.st-msg.is-ok{color:var(--st-xong)}

.btn-sm{font-size:13px;padding:6px 14px;border-radius:7px;letter-spacing:0}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{filter:none;transform:none;box-shadow:none}
.btn-quiet{background:var(--surface);color:var(--muted);border:1px solid var(--rule);
           display:inline-flex;align-items:center;gap:6px;box-shadow:none;font-weight:600}
.btn-quiet:hover{background:var(--surface);color:var(--accent);border-color:var(--accent);
                 filter:none;box-shadow:0 2px 8px rgba(54,111,216,.16)}
.btn-quiet.is-on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.thread-ico{font-size:13px;line-height:1}

.thread{margin-top:2px}
.thread[hidden]{display:none}

/* ---------- băng báo chế độ hoạt động ---------- */
.modebar{display:flex;flex-wrap:wrap;gap:6px;padding:11px 16px;font-size:14.5px;line-height:1.5;
         border-left:3px solid}
.modebar b{font-weight:700}
.modebar.is-live{background:var(--st-xong-bg);border-left-color:var(--st-xong);color:var(--st-xong)}
.modebar.is-local{background:var(--signal-soft);border-left-color:var(--signal);color:var(--signal)}
.item-audit{grid-column:1/-1;font-family:var(--f-mono);font-size:13px;color:var(--muted);
            letter-spacing:.03em;padding-top:2px}

/* ---------- tháng đóng/mở ---------- */
.month-chev{display:inline-block;font-size:13px;line-height:1;transition:transform .12s ease;
            transform:rotate(90deg);opacity:.75}
.month.is-closed .month-chev{transform:rotate(0deg)}
.month.is-closed .weeks{display:none}
.month.is-closed .month-head{border-radius:var(--r-card)}

.month-when{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.1em;
            text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;opacity:.9}

/* tháng đã qua lùi lại một bước để tháng hiện tại nổi lên */
.month.is-past .month-head{background:var(--band-past)}
.month.is-past .month-head:hover{background:var(--ink)}
.month.is-current .month-head{box-shadow:inset 0 0 0 2px var(--teal)}

@media (prefers-reduced-motion:reduce){.month-chev{transition:none}}

/* ---------- màn đăng nhập ---------- */
#cong[hidden]{display:none}
.cong{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
      padding:24px;background:var(--paper);z-index:50}
.cong-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--rule);
           border-top:3px solid var(--brand);border-radius:20px;padding:34px 32px 28px;
           display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.cong-mark{width:56px;height:4px;background:var(--brand);position:relative;margin-bottom:14px}
.cong-mark::after{content:"";position:absolute;left:0;top:0;width:18px;height:4px;background:var(--teal)}
.cong-title{font-family:var(--f-display);font-size:1.728rem;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.cong-sub{font-size:14.5px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.cong-label{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
            color:var(--muted);margin-top:6px}
.cong-input{width:100%;font-family:var(--f-body);font-size:15.5px;color:var(--ink);
            background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-btn);padding:12px 14px}
.cong-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.cong-btn{margin-top:14px;width:100%;justify-content:center;padding:11px 14px;font-size:13px}
.cong-msg{font-size:13.5px;line-height:1.45;min-height:1.2em;color:var(--signal)}
.cong-msg.is-ok{color:var(--st-xong)}
.cong-foot{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--muted);
           margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-soft)}

/* ---------- ai đang đăng nhập ---------- */
.whoami{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--f-mono);
        font-size:13px;color:var(--muted);letter-spacing:.04em}
.whoami b{color:var(--ink);font-weight:600}
.btn-out{background:none;border:1px solid var(--rule);color:var(--muted);cursor:pointer;
         font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px}
.btn-out:hover{border-color:var(--signal);color:var(--signal)}
#noi-dung[hidden]{display:none}

.cong-hint{font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px}
.ben-tag{font-size:13px;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:999px;
         border:1px solid currentColor}
.ben-tag[data-ben="ABK"]{color:var(--signal);background:var(--signal-soft)}
.ben-tag[data-ben="VVB"]{color:var(--accent);background:var(--accent-soft)}

/* tháng đã hoàn tất: dải màu xanh "xong", thu gọn mặc định */
.month.is-done .month-head{background:var(--st-xong)}
.month.is-done .month-head:hover{filter:brightness(1.08)}
.month-when.is-done{border-color:currentColor}

.st-wait{font-size:13px;color:var(--muted);font-style:italic}

.tl-note{width:100%;margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* chip vô hiệu: có mặt để cho biết đếm = 0, nhưng không bấm được */
.chip:disabled{opacity:.45;cursor:not-allowed}
.chip:disabled:hover{border-color:var(--rule);color:var(--muted);background:var(--surface)}

/* nút hành động khác màu với chip lọc */
.chip-act{border-style:dashed}
.chip-reset{border-color:var(--signal);color:var(--signal)}
.chip-reset:hover{background:var(--signal);color:#fff;border-color:var(--signal)}
.chip-reset[hidden]{display:none}

.filter-state{font-size:13px;color:var(--muted)}
.filter-state.is-on{color:var(--accent);font-weight:700}

/* ---------- liên kết tới từng hạng mục ---------- */
.item{scroll-margin-top:24px}

.btn-link{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid transparent;
          border-radius:999px;padding:2px 9px;cursor:pointer;font-family:var(--f-body);
          font-size:13px;color:var(--muted);transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn-link:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-link.is-done{background:var(--st-xong-bg);border-color:var(--st-xong);color:var(--st-xong)}
.btn-link-ico{font-size:13px;line-height:1}
.btn-link-id{font-weight:700;letter-spacing:.02em}

/* hạng mục được mở bằng liên kết */
.item.is-target{box-shadow:0 0 0 2px var(--accent), 0 4px 16px rgba(54,111,216,.28);
                background:var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){
  .item.is-target{animation:nhayNhe 1.4s ease-out 1}
  @keyframes nhayNhe{
    0%{box-shadow:0 0 0 3px var(--accent), 0 6px 22px rgba(54,111,216,.45)}
    100%{box-shadow:0 0 0 2px var(--accent), 0 4px 16px rgba(54,111,216,.28)}
  }
}