/* ==========================================================================
   timekeeping.css — trang Quy định chấm công (timekeeping.html)
   Dùng lại token màu của style.css. Không định nghĩa lại biến ở đây.
   Mọi thẻ <a> dạng nút đều khai báo màu chữ ở cả :hover (xem ghi chú v7.1
   trong style.css — quy tắc gốc a:hover thắng selector một-class).
   ========================================================================== */

/* ---------- Hero ---------- */
.tk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 28px;
  align-items: start;
  padding: 30px 32px;
  margin: 22px 0 34px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 300px at 0% 0%, #EAF3FC 0%, rgba(234, 243, 252, 0) 70%),
    linear-gradient(135deg, var(--blue-50) 0%, #FFFFFF 62%);
}
.tk-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 10px;
}
.tk-hero-title {
  font-size: 30px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue-900);
  margin: 0 0 12px;
}
.tk-hero-lede {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 20px;
}
.tk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

a.tk-dl {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  background: var(--blue-700);
  border: 1px solid var(--blue-700);
  box-shadow: 0 6px 18px rgba(18, 82, 144, 0.26);
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
}
a.tk-dl, a.tk-dl:hover, a.tk-dl:focus, a.tk-dl:visited { color: #fff; }
a.tk-dl:hover {
  background: var(--blue-900);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(4, 44, 83, 0.30);
}
.tk-dl > .ti { font-size: 24px; flex-shrink: 0; }
.tk-dl-text { display: flex; flex-direction: column; line-height: 1.3; }
.tk-dl-text strong { font-size: 14px; font-weight: 700; }
.tk-dl-text small { font-size: 11.5px; opacity: 0.82; margin-top: 2px; }
.tk-dl-arrow { font-size: 17px; margin-left: 4px; opacity: 0.85; }

.tk-hero-meta {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.tk-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.tk-meta-row:last-of-type { border-bottom: none; }
.tk-meta-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.tk-meta-v { font-size: 12.5px; font-weight: 600; color: var(--text-primary); text-align: right; }
.tk-meta-live { color: var(--teal-800); }
.tk-meta-scope {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- Năm con số ---------- */
.tk-nums {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.tk-num {
  padding: 18px 16px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  border-top: 3px solid var(--blue-600);
}
.tk-num-amber { border-top-color: var(--amber-600); }
.tk-num-teal { border-top-color: var(--teal-600); }
.tk-num-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue-900);
  font-variant-numeric: tabular-nums;
}
.tk-num-amber .tk-num-value { color: #7C4A03; }
.tk-num-teal .tk-num-value { color: var(--teal-900); }
.tk-num-unit {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 8px 0 8px;
}
.tk-num-note { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

/* ---------- Timeline một ngày ---------- */
.tk-timeline {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px 16px;
  margin-bottom: 16px;
}
.tk-track {
  position: relative;
  height: 108px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #F1F4F9);
  padding: 10px 0;
}
/* Hai làn tách biệt: làn trên là khung linh hoạt (được phép chấm công),
   làn dưới là giờ chính thức. Trước đây hai loại dải chồng lên nhau nên dải
   check-out phủ tối một mảng của ca chiều, trông như lỗi hiển thị. */
.tk-lane { position: relative; }
.tk-lane-flex { height: 30px; margin-bottom: 8px; }
.tk-lane-main { height: 50px; }
.tk-band {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  overflow: hidden;
}
.tk-band-flex {
  background: repeating-linear-gradient(135deg, rgba(37, 160, 125, 0.16) 0 7px, rgba(37, 160, 125, 0.06) 7px 14px);
  border: 1px dashed rgba(8, 80, 65, 0.40);
}
.tk-band-core {
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.tk-band-lunch {
  background: repeating-linear-gradient(135deg, #D7DCE5 0 6px, #EAEEF4 6px 12px);
  border: 1px solid #CBD2DE;
}
.tk-band-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 6px;
}
.tk-band-flex .tk-band-label { color: var(--teal-900); }
.tk-band-core .tk-band-label { color: #fff; }
.tk-band-lunch .tk-band-label { color: #55607A; }

.tk-axis { position: relative; height: 26px; margin-top: 6px; }
.tk-tick { position: absolute; transform: translateX(-50%); text-align: center; }
.tk-tick i { display: block; width: 1px; height: 5px; background: var(--border-strong); margin: 0 auto 3px; }
.tk-tick b { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.tk-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tk-lg { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; }
.tk-lg::before { content: ''; width: 14px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tk-lg-flex::before { background: rgba(37, 160, 125, 0.18); border: 1px dashed rgba(8, 80, 65, 0.45); }
.tk-lg-core::before { background: var(--blue-600); }
.tk-lg-lunch::before { background: repeating-linear-gradient(135deg, #D7DCE5 0 4px, #EAEEF4 4px 8px); }

.tk-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.tk-mark {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--teal-50);
  border: 1px solid var(--teal-100, #C7E9D9);
}
.tk-mark-warn { background: #FFF6E5; border-color: #F5DFB0; }
.tk-mark-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--teal-600); margin-top: 6px; flex-shrink: 0; }
.tk-mark-warn .tk-mark-dot { background: var(--amber-600); }
.tk-mark-text { font-size: 12.5px; line-height: 1.55; color: var(--text-primary); }

.tk-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tk-rule {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tk-rule > .ti { font-size: 19px; color: var(--blue-600); flex-shrink: 0; margin-top: 1px; }
.tk-rule-title { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tk-rule-body { display: block; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

.tk-week {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--blue-900);
}
.tk-week > .ti { font-size: 19px; flex-shrink: 0; color: var(--blue-700); }

/* ---------- Máy tính công ---------- */
.tk-calc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.tk-calc-inputs { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.tk-field { display: flex; flex-direction: column; gap: 6px; }
.tk-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tk-field input[type="time"] {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--blue-900);
  font-family: inherit;
}
.tk-field input[type="time"]:focus { outline: 2px solid var(--blue-400); outline-offset: 1px; border-color: var(--blue-600); }
.tk-field-arrow { font-size: 20px; color: var(--text-tertiary); padding-bottom: 12px; }

.tk-calc-try { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.tk-calc-try-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 9px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--blue-300);
  background: #fff;
  color: var(--blue-800);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tk-chip b { font-weight: 800; }
.tk-chip span { font-variant-numeric: tabular-nums; opacity: 0.8; }
.tk-chip:hover { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-900); }
.tk-chip.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.tk-chip.is-active span { opacity: 0.9; }

.tk-result { margin-top: 20px; }
.tk-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.tk-verdict-full { background: var(--teal-50); border: 1px solid var(--teal-300, #9CD5BE); }
.tk-verdict-half { background: #FFF6E5; border: 1px solid #F0CE8A; }
.tk-verdict-bad { background: #FDECEC; border: 1px solid #F3C0C0; }
.tk-verdict-glyph {
  width: 42px;
  height: 42px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
}
.tk-verdict-full .tk-verdict-glyph { background: var(--teal-600); }
.tk-verdict-half .tk-verdict-glyph { background: var(--amber-600); }
.tk-verdict-bad .tk-verdict-glyph { background: #C0392B; }
.tk-verdict-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-verdict-main { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.tk-verdict-full .tk-verdict-main { color: var(--teal-900); }
.tk-verdict-half .tk-verdict-main { color: #7C4A03; }
.tk-verdict-bad .tk-verdict-main { color: #8E2B20; }
.tk-verdict-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

.tk-shifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tk-shift {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  border-left: 3px solid var(--border-strong);
}
.tk-shift-ok { border-left-color: var(--teal-600); }
.tk-shift-bad { border-left-color: var(--amber-600); }
.tk-shift-k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: 5px; }
.tk-shift-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--blue-900); letter-spacing: -0.02em; }
.tk-shift-need { font-size: 11.5px; color: var(--text-tertiary); display: block; margin-top: 4px; }
.tk-shift-bad .tk-shift-v { color: #7C4A03; }

.tk-steps-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.tk-steps-log li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.tk-steps-log li:last-child { border-bottom: none; }
.tk-steps-log .tk-log-mark { flex-shrink: 0; width: 18px; text-align: center; font-weight: 800; }
.tk-log-ok .tk-log-mark { color: var(--teal-600); }
.tk-log-bad .tk-log-mark { color: var(--amber-600); }
.tk-log-info .tk-log-mark { color: var(--text-tertiary); }

.tk-disclaimer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* ---------- Sáu ví dụ ---------- */
.tk-exs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-ex {
  padding: 16px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  border-top: 3px solid var(--teal-600);
}
.tk-ex-half { border-top-color: var(--amber-600); }
.tk-ex-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.tk-ex-n {
  width: 22px; height: 22px;
  border-radius: 99px;
  background: var(--blue-50);
  color: var(--blue-800);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tk-ex-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35; flex: 1; min-width: 0; }
.tk-ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--teal-50);
  color: var(--teal-900);
}
.tk-ex-half .tk-ex-badge { background: #FFF1D6; color: #7C4A03; }
.tk-ex-glyph { font-size: 12px; font-weight: 800; }
.tk-ex-times {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
  margin-bottom: 9px;
}
.tk-ex-times i { font-style: normal; color: var(--text-tertiary); font-weight: 400; }
.tk-ex-calc {
  display: block;
  font-size: 12px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #F1F4F9);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 9px;
}
.tk-ex-note { font-size: 12px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ---------- Remote: các bước ---------- */
.tk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tk-step {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}
.tk-step-n {
  position: absolute;
  top: -10px;
  left: 16px;
  width: 22px; height: 22px;
  border-radius: 99px;
  background: var(--blue-700);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-step > .ti { font-size: 22px; color: var(--blue-600); display: block; margin-bottom: 9px; }
.tk-step strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.tk-step span { display: block; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

/* ---------- Khối riêng D3 ---------- */
.tk-d3 {
  border-radius: var(--radius-lg);
  border: 1px solid #C9C4F0;
  background: linear-gradient(135deg, #F4F2FE 0%, #FBFAFF 60%);
  padding: 26px 28px;
}
.tk-d3-head { margin-bottom: 20px; }
.tk-d3-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--purple-800, #3C3489);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tk-d3-badge .ti { font-size: 14px; }
.tk-d3-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #2A2468;
  margin: 0 0 8px;
}
.tk-d3-intro { font-size: 13px; line-height: 1.65; color: #4A4370; margin: 0; max-width: 72ch; }
.tk-d3-cases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 14px; align-items: start; }
.tk-d3-case {
  background: #fff;
  border: 1px solid #DCD8F4;
  border-radius: var(--radius-md);
  padding: 18px 19px;
}
.tk-d3-case-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tk-d3-tag {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: #EDEAFD;
  color: var(--purple-800, #3C3489);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tk-d3-case-head > .ti { font-size: 20px; color: var(--purple-800, #3C3489); }
.tk-d3-case-title { font-size: 14.5px; font-weight: 700; color: #2A2468; }
.tk-d3-case-body { font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.tk-d3-both {
  display: inline-block;
  margin: 14px 0 10px;
  padding: 4px 11px;
  border-radius: 99px;
  background: #FFF1D6;
  color: #7C4A03;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tk-d3-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-d3-conds li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: #F7F6FE;
  border: 1px solid #E4E0F8;
}
.tk-d3-conds li > .ti { font-size: 19px; color: var(--purple-800, #3C3489); flex-shrink: 0; margin-top: 1px; }
.tk-d3-conds strong { display: block; font-size: 13px; font-weight: 700; color: #2A2468; margin-bottom: 4px; }
.tk-d3-conds span { display: block; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- Đơn vắng mặt ---------- */
.tk-ab-rule {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--blue-900);
  margin-bottom: 14px;
}
.tk-ab-rule > .ti { font-size: 19px; color: var(--blue-700); flex-shrink: 0; }
.tk-ab { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.tk-ab-head, .tk-ab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1.5fr);
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
}
.tk-ab-head {
  background: var(--surface-alt, #F1F4F9);
  border-bottom: 1px solid var(--border);
}
.tk-ab-head span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tk-ab-row { border-bottom: 1px solid var(--border); }
.tk-ab-row:last-child { border-bottom: none; }
.tk-ab-type { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.tk-ab-auto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  justify-self: start;
}
.tk-ab-approve .tk-ab-auto { background: var(--teal-50); color: var(--teal-900); }
.tk-ab-reject .tk-ab-auto { background: #FDECEC; color: #8E2B20; }
.tk-ab-glyph { font-size: 13px; font-weight: 800; }
.tk-ab-cons { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.tk-ab-cons-empty { color: var(--text-tertiary); font-style: italic; }
.tk-ab-outro { font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary); margin: 12px 0 0; }

/* ---------- OT flow ---------- */
.tk-keypoint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  background: #FFF6E5;
  border: 1px solid #F0CE8A;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: #7C4A03;
  margin-bottom: 18px;
}
.tk-keypoint > .ti { font-size: 21px; flex-shrink: 0; color: var(--amber-600); }
.tk-flow { display: flex; flex-direction: column; }
.tk-flow-step { display: flex; gap: 16px; align-items: flex-start; position: relative; padding-bottom: 18px; }
.tk-flow-step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.tk-flow-last { padding-bottom: 0; }
.tk-flow-last::before { display: none; }
.tk-flow-dot {
  width: 40px; height: 40px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--blue-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.tk-flow-dot .ti { font-size: 20px; color: var(--blue-700); }
.tk-flow-body { padding-top: 5px; }
.tk-flow-body strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tk-flow-body span { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); max-width: 78ch; }

/* ---------- Sai lệch dữ liệu ---------- */
.tk-devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-dev {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}
.tk-dev > .ti { font-size: 21px; color: var(--blue-600); flex-shrink: 0; margin-top: 1px; }
.tk-dev strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.tk-dev span { display: block; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- Vai trò ---------- */
.tk-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.tk-role {
  padding: 17px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}
.tk-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.tk-role-head > .ti { font-size: 20px; color: var(--blue-600); }
.tk-role-head strong { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tk-role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tk-role li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.tk-role li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--blue-400);
}

/* ---------- Lưu ý ---------- */
.tk-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}
.tk-note-amber { background: #FFFBF2; border-color: #F0DFBB; }
.tk-note > .ti { font-size: 20px; flex-shrink: 0; margin-top: 1px; color: var(--text-tertiary); }
.tk-note-amber > .ti { color: var(--amber-600); }
.tk-note strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.tk-note span { display: block; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

.tk-source {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--blue-900);
}
.tk-source > .ti { font-size: 20px; color: var(--blue-700); }
.tk-source > span { flex: 1; min-width: 200px; }
a.tk-source-link { font-size: 12.5px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
a.tk-source-link { color: var(--blue-700); }
a.tk-source-link:hover { color: var(--blue-900); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tk-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-rules, .tk-exs, .tk-devs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-d3-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tk-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .tk-hero-title { font-size: 25px; }
  .tk-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-marks { grid-template-columns: minmax(0, 1fr); }
  .tk-shifts { grid-template-columns: minmax(0, 1fr); }
  .tk-ab-head { display: none; }
  .tk-ab-row { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 14px 16px; }
  .tk-ab-auto { justify-self: start; }
}
@media (max-width: 620px) {
  .tk-nums, .tk-rules, .tk-exs, .tk-devs, .tk-steps { grid-template-columns: minmax(0, 1fr); }
  .tk-timeline { padding: 22px 14px 14px; }
  /* dưới 620px các dải quá hẹp, nhãn luôn bị cắt — bỏ nhãn, dựa vào
     chú giải bên dưới và danh sách mốc giờ */
  .tk-band-label { display: none; }
  .tk-lane-flex { height: 24px; }
  .tk-lane-main { height: 44px; }
  .tk-track { height: 96px; }
  .tk-tick b { font-size: 9px; }
  .tk-tick:nth-child(even) { display: none; }
  .tk-calc { padding: 18px 16px; }
  .tk-calc-inputs { gap: 10px; }
  .tk-field { flex: 1; min-width: 132px; }
  .tk-field input[type="time"] { width: 100%; font-size: 18px; }
  .tk-field-arrow { display: none; }
  .tk-d3 { padding: 20px 16px; }
  .tk-d3-title { font-size: 18px; }
}

/* Ghi chú đọc hiểu dưới sáu ví dụ — cố tình dùng màu trung tính, tách khỏi
   phần nội dung trích từ quyết định, vì đây là nhận định của D3. */
.tk-ex-caveat {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #F1F4F9);
  border: 1px dashed var(--border-strong);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.tk-ex-caveat > .ti { font-size: 18px; flex-shrink: 0; color: var(--text-tertiary); margin-top: 1px; }

/* Chip ví dụ trong khối quy định riêng D3. Dùng nền trắng viền tím nhạt để
   người đọc thấy ngay đây là minh hoạ, không phải điều kiện bắt buộc (điều
   kiện nằm trong .tk-d3-conds phía trên, nền đậm hơn). */
.tk-d3-eg { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #DCD8F4; }
.tk-d3-eg-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B62A8;
  margin-bottom: 9px;
}
.tk-d3-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tk-d3-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #D5D0F0;
  color: #3A3374;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}
.tk-d3-chip::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 99px;
  background: #8B82C9;
  margin-right: 8px;
  flex-shrink: 0;
}
.tk-d3-eg-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: #6B62A8;
  margin: 10px 0 0;
}
@media (max-width: 620px) {
  .tk-d3-chip { font-size: 11.5px; padding: 5px 10px; }
}