/* /chung/tien-do/tien-do.css — khối "Tiến độ quy trình" dùng chung (NV-CNTK-1 2B) · bản 1.0.0
   Màu theo Văn phòng số (Mận) — biến của app nếu có, không có thì giá trị mặc định (App Lái xe). Dưới 768 px: dòng thời gian dọc + tab. */
.td-khoi {
  --td-mau: var(--mau, #8a2468); --td-mau-nhat: var(--mau-nhat, #f8e8f1); --td-mau-vien: var(--mau-vien, #e6c3d8);
  --td-chu: var(--chu, #1f2430); --td-phu: var(--chu-phu, #5b6472); --td-vien: var(--vien, #e2e5ea); --td-nen: var(--be-mat-2, #f7f8fa);
  --td-xong: var(--tt-xong, #15803d); --td-xong-nen: var(--tt-xong-nen, #dcfce7); --td-tra: var(--tt-tra, #c2410c); --td-tra-nen: var(--tt-tra-nen, #ffedd5);
  --td-tc: var(--tt-qua, #b91c1c); --td-tc-nen: var(--tt-qua-nen, #fee2e2);
  font-size: 13px; line-height: 1.45; color: var(--td-chu); margin: 0 0 12px;
}
.td-khoi *, .td-bo-tab * { box-sizing: border-box; }
.td-dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.td-dau b { font-size: 14px; }
.td-tom { color: var(--td-phu); font-size: 13px; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── máy tính: dải ngang chia nhóm ── */
.td-ngang { display: flex; flex-wrap: wrap; gap: 8px; }
.td-nhom { flex: var(--td-so, 1) 1 260px; min-width: 0; }
.td-ngang.co-nhom .td-nhom { border: 1px solid var(--td-vien); border-radius: 10px; padding: 8px; background: #fff; }
.td-nhom-ten { font-size: 12px; font-weight: 700; color: var(--td-phu); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px 2px; }
.td-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; }
.td-khau { position: relative; display: flex; gap: 6px; align-items: flex-start; padding: 8px; border: 1px solid var(--td-vien); border-radius: 8px; background: var(--td-nen); min-width: 0; }
.td-khau .td-nd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-khau b { font-size: 13px; overflow-wrap: anywhere; }
.td-khau span { overflow-wrap: anywhere; }
.td-ng { color: var(--td-chu); }
.td-tg, .td-so { color: var(--td-phu); font-size: 12px; }
.td-ly { color: var(--td-tra); font-size: 12px; }
.td-dau-cham { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: #fff; border: 1px solid var(--td-vien); color: var(--td-phu); }
.td-khau.xong { background: #fff; }
.td-khau.xong .td-dau-cham, .td-muc.xong .td-dau-cham { background: var(--td-xong); border-color: var(--td-xong); color: #fff; }
.td-khau.dang { border: 2px solid var(--td-mau); background: var(--td-mau-nhat); box-shadow: 0 2px 8px rgba(138, 36, 104, .15); }
.td-khau.dang .td-dau-cham, .td-muc.dang .td-dau-cham { background: var(--td-mau); border-color: var(--td-mau); color: #fff; }
.td-khau.dang .td-tg { color: var(--td-mau); font-weight: 600; }
.td-khau.tra { border-color: var(--td-tra); background: var(--td-tra-nen); }
.td-khau.tra .td-dau-cham, .td-muc.tra .td-dau-cham { background: var(--td-tra); border-color: var(--td-tra); color: #fff; }
.td-khau.tc { border-color: var(--td-tc); background: var(--td-tc-nen); }
.td-khau.tc .td-dau-cham, .td-muc.tc .td-dau-cham { background: var(--td-tc); border-color: var(--td-tc); color: #fff; }
.td-khau.cho, .td-khau.bq { opacity: .6; }
.td-doc { display: none; }

/* ── điện thoại: dòng thời gian dọc ── */
@media (max-width: 767.98px) {
  .td-ngang { display: none; }
  .td-doc { display: block; list-style: none; margin: 0; padding: 0; position: relative; }
  .td-doc-nhom { font-size: 12px; font-weight: 700; color: var(--td-phu); text-transform: uppercase; letter-spacing: .02em; padding: 10px 0 4px 36px; }
  .td-muc { position: relative; padding-left: 0; }
  .td-muc::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: -4px; width: 2px; background: var(--td-vien); }
  .td-muc:last-child::before { display: none; }
  .td-muc.xong::before { background: var(--td-xong); }
  .td-muc-dau { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px 6px 2px; background: none; border: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
  .td-muc-dau:disabled { cursor: default; }
  .td-muc-dau .td-dau-cham { flex-basis: 24px; width: 24px; height: 24px; position: relative; z-index: 1; }
  .td-muc-ten { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .td-muc-ten b { font-size: 14px; overflow-wrap: anywhere; }
  .td-muc-ten small { color: var(--td-phu); font-size: 12px; }
  .td-muc.dang .td-muc-dau { background: var(--td-mau-nhat); }
  .td-muc.dang .td-muc-ten small { color: var(--td-mau); font-weight: 600; }
  .td-muc.cho, .td-muc.bq { opacity: .6; }
  .td-mui { width: 8px; height: 8px; border-right: 2px solid var(--td-phu); border-bottom: 2px solid var(--td-phu); transform: rotate(45deg); margin-right: 8px; transition: transform .15s; }
  .td-muc.mo .td-mui { transform: rotate(225deg); }
  .td-muc-ct { display: none; flex-direction: column; gap: 4px; padding: 2px 8px 10px 36px; }
  .td-muc.mo .td-muc-ct { display: flex; }
  .td-ct { list-style: none; margin: 2px 0; padding: 0; font-size: 12px; color: var(--td-phu); }
  .td-nut { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ── tab "Tiến độ" riêng trên điện thoại ── */
.td-tab { display: none; }
@media (max-width: 767.98px) {
  .td-bo-tab .td-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--vien, #e2e5ea); margin: 0 0 12px; }
  .td-tab button { flex: 1; min-height: 44px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 600; color: var(--chu-phu, #5b6472); cursor: pointer; }
  .td-tab button[aria-selected="true"] { color: var(--mau, #8a2468); border-bottom-color: var(--mau, #8a2468); }
  .td-bo-tab[data-td-dang="chinh"] > .td-o-tien-do, .td-bo-tab[data-td-dang="tien_do"] > .td-o-chinh { display: none; }
}