/* Sơ đồ luồng + danh sách tính năng + phễu đo lường — dùng chung /tinh-nang và /quan-tri. Màu lấy từ biến của trang. */

/* ---------- danh sách tính năng ---------- */
.tn-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tn-nhom{background:var(--giay-3);border:1.5px solid var(--muc);border-radius:14px;padding:18px 18px 16px}
.tn-nhom h3{display:flex;align-items:baseline;gap:10px;font:600 16px/1.3 var(--sans);margin:0 0 12px}
.tn-nhom h3 span{font:600 12px/1 var(--mono);color:var(--ro)}
.tn-nhom ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tn-nhom li{display:grid;gap:2px;padding-top:10px;border-top:1px dashed var(--vien)}
.tn-nhom li b{font:600 14px/1.35 var(--sans)}
.tn-nhom li small{font-size:13px;line-height:1.45;color:var(--muc-2)}

/* ---------- khối luồng chung ---------- */
.ln-nut{background:var(--giay-3);border:1.5px solid var(--muc);border-radius:12px;padding:10px 14px;text-align:center;min-width:0;width:100%}
.ln-nut b{display:block;font:600 14px/1.3 var(--sans)}
.ln-nut small{display:block;font-size:12px;line-height:1.35;color:var(--muc-2);margin-top:2px}
.ln-nut.nguon{background:var(--muc);color:var(--giay-3);border-color:var(--muc)}
.ln-nut.nguon small{color:#C9C2B4}
.ln-nut.may{background:var(--ong);color:#fff;border-color:var(--ong)}
.ln-nut.may small{color:#CFE3DA}
.ln-nut.tu-dong{border-style:dashed;border-color:var(--ong);background:var(--ong-nhat);position:relative}
.ln-nut.tu-dong::after{content:"tự động";position:absolute;top:-9px;right:10px;background:var(--ong);color:#fff;font:600 10px/1 var(--mono);letter-spacing:.06em;padding:3px 6px;border-radius:5px}
.ln-nut.dich{border-color:var(--ro);background:var(--ro-nhat)}
.ln-mui{position:relative;height:26px;width:2px;background:var(--muc-3);margin:0 auto}
.ln-mui::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);border:6px solid transparent;border-top:7px solid var(--muc-3);border-bottom:0}
.ln-mui span{position:absolute;left:10px;top:4px;white-space:nowrap;font:600 11px/1 var(--mono);color:var(--muc-2)}

/* Luồng 1 — phễu rẽ nhánh */
.ln-pheu{display:grid;justify-items:center}
.ln-truc{display:grid;justify-items:center;width:min(420px,100%)}
.ln-re{position:relative;width:66.6%;height:34px}
.ln-re::before{content:"";position:absolute;left:50%;top:0;height:34px;width:2px;background:var(--muc-3)}
.ln-re::after{content:"";position:absolute;left:0;right:0;top:16px;height:18px;border:2px solid var(--muc-3);border-bottom:0;border-radius:10px 10px 0 0}
.ln-nhanh{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.ln-lan{display:grid;justify-items:center;align-content:start;padding:14px 12px 16px;border-radius:14px;border:1.5px solid var(--vien);background:color-mix(in srgb,var(--giay-3) 60%,transparent)}
.ln-nhan{font:600 12px/1 var(--mono);letter-spacing:.08em;padding:7px 10px;border-radius:999px;margin-bottom:12px;color:#fff;background:var(--ong)}
.lan-b .ln-nhan{background:#B7791F}
.lan-c .ln-nhan{background:var(--muc-3)}
.lan-a{border-color:var(--ong)}
.ln-vong{margin-top:14px;border:1.5px dashed var(--ro);color:var(--ro);border-radius:10px;padding:8px 10px;font:600 12px/1.4 var(--sans);text-align:center}

/* Luồng 2 — quạt việc khi chốt giờ */
.ln-quat{display:grid;justify-items:center;gap:0}
.ln-quat>.ln-nut{width:min(320px,100%)}
.ln-quat-day{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;width:100%;padding-top:34px}
.ln-quat-day::before{content:"";position:absolute;left:8.3%;right:8.3%;top:16px;height:18px;border:2px solid var(--muc-3);border-bottom:0;border-radius:10px 10px 0 0}
.ln-quat-day::after{content:"";position:absolute;left:50%;top:0;height:16px;width:2px;background:var(--muc-3)}
.ln-quat-o{display:grid;justify-items:center;gap:8px}
.ln-quat-o i{font:600 12px/24px var(--mono);font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--ro);color:#fff;text-align:center}

/* Luồng 3 — dòng thời gian email */
.ln-tg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.ln-tg::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:3px;background:var(--muc-3);border-radius:2px}
.ln-tg li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;padding:30px 6px 0}
.ln-tg li::before{content:"";position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:var(--giay-3);border:3px solid var(--muc-3)}
.ln-tg li.chinh::before{background:var(--ong);border-color:var(--ong)}
.ln-tg li.nhac::before{background:var(--ro);border-color:var(--ro)}
.ln-tg b{font:600 13px/1.2 var(--mono)}
.ln-tg span{font-size:13px;line-height:1.4;color:var(--muc-2)}

/* Luồng 5 — dữ liệu chạy qua đâu */
.ln-kt{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:28px;align-items:center}
.ln-kt-cot{display:grid;gap:10px}
.ln-kt-giua{position:relative}
.ln-kt-giua::before,.ln-kt-giua::after{content:"";position:absolute;top:50%;width:28px;height:2px;background:var(--muc-3)}
.ln-kt-giua::before{left:-28px}.ln-kt-giua::after{right:-28px}
.ln-kt-giua .ln-nut{padding:26px 18px}
.ln-kt-giua .ln-nut b{font-size:17px}

/* Luồng 4 — phễu đo lường có số */
.dl-pheu{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;padding:8px 2px 4px}
.dl-buoc{flex:1 1 0;min-width:74px;display:grid;justify-items:center;gap:4px;text-align:center}
.dl-cot{height:150px;width:100%;max-width:120px;display:flex;align-items:flex-end;background:repeating-linear-gradient(0deg,transparent 0 29px,var(--giay-2) 29px 30px);border-radius:8px 8px 0 0}
.dl-cot span{display:block;width:100%;height:var(--cao);background:linear-gradient(180deg,var(--ong-2,#2D6A5C),var(--ong));border-radius:8px 8px 0 0}
.dl-buoc:last-child .dl-cot span{background:linear-gradient(180deg,#E8774D,var(--ro))}
.dl-buoc b{font:400 clamp(22px,2.4vw,30px)/1 var(--serif)}
.dl-buoc small{font:600 12px/1.3 var(--sans);color:var(--muc-2)}
.dl-mui{flex:0 0 auto;align-self:center;display:grid;justify-items:center;gap:2px;padding:0 0 54px;min-width:60px}
.dl-mui b{font:600 14px/1 var(--mono);padding:5px 7px;white-space:nowrap;border-radius:999px;background:var(--giay-2);position:relative}
.dl-mui b::after{content:"→";margin-left:4px}
.dl-mui.dat b{background:var(--ong-nhat);color:var(--ong)}
.dl-mui.thieu b{background:var(--ro-nhat);color:#8a2a0b}
.dl-mui small{font:500 11px/1.2 var(--mono);color:var(--muc-3)}
.dl-mui em{font:600 11px/1.2 var(--mono);font-style:normal;color:var(--ro)}
.dl-ghi{font:500 12px/1.4 var(--mono);color:var(--muc-3);margin:8px 0 0}

@media (max-width:980px){
  .tn-luoi{grid-template-columns:1fr 1fr}
  .ln-quat-day{grid-template-columns:repeat(3,1fr)}
  .ln-quat-day::before{left:16.6%;right:16.6%}
  .ln-tg{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .ln-tg::before{display:none}
}
@media (max-width:640px){
  .tn-luoi,.ln-nhanh,.ln-kt{grid-template-columns:1fr}
  .ln-re{width:2px}
  .ln-re::after{display:none}
  .ln-quat-day{grid-template-columns:1fr 1fr}
  .ln-quat-day::before{display:none}
  .ln-tg{grid-template-columns:1fr;justify-items:start}
  .ln-tg li{justify-items:start;text-align:left;padding:0 0 0 34px}
  .ln-tg li::before{left:0;top:0}
  .ln-kt-giua::before,.ln-kt-giua::after{display:none}
  .dl-pheu{flex-direction:column;align-items:stretch;gap:4px}
  .dl-buoc{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;text-align:left;min-width:0}
  .dl-cot{order:3;height:14px;max-width:none;width:120px;background:var(--giay-2);border-radius:7px}
  .dl-cot span{height:100%;width:var(--cao);border-radius:7px}
  .dl-buoc b{font-size:24px;order:1;min-width:52px}
  .dl-buoc small{order:2}
  .dl-mui{flex-direction:row;display:flex;gap:8px;padding:2px 0 2px 52px;justify-content:flex-start}
  .dl-mui b::after{content:"↓"}
}