/* public/ke-hoach.css — màn 🗺️ Kế hoạch kinh doanh (26/09).
   Mọi class mang tiền tố kh- để không đụng các khối khác (bài học 01/09: hai
   thành phần dùng chung một tên class là khối sau đè khối trước, im lặng). */

#ke-hoach { display: grid; gap: 1rem; }
#ke-hoach .card { margin: 0; }
#ke-hoach h2 small { font-weight: 400; font-size: .8rem; }
.kh-h3 { margin: 1rem 0 .5rem; font-size: .92rem; color: var(--ink); }
.kh-h3 small { font-weight: 400; opacity: .7; }
/* Câu dẫn dưới tiêu đề thẻ: nói trước trong thẻ có gì, trước khi đổ số ra. */
.kh-tom { margin: -.2rem 0 .8rem; font-size: .84rem; line-height: 1.6; opacity: .82; }
.kh-nguon-gia { margin: .5rem 0 0; font-size: .8rem; line-height: 1.6; opacity: .78; }
.kh-meta { color: var(--faint); font-size: .74rem; text-align: right; margin: 0; }

/* ---- Viên nhãn ---- */
.kh-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  border: 1px solid var(--rule-hi); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.kh-pill.dat, .kh-pill.ok, .kh-pill.kh-ng-that { color: var(--good); border-color: rgba(87, 214, 141, .35); background: rgba(87, 214, 141, .08); }
.kh-pill.cham { color: var(--bad); border-color: rgba(255, 93, 102, .35); background: rgba(255, 93, 102, .08); }
.kh-pill.kh-ng-khai { color: #8fb8ff; border-color: rgba(143, 184, 255, .35); }
.kh-pill.kh-ng-nganh { color: var(--accent2); border-color: rgba(255, 154, 76, .35); }
.kh-pill.kh-ng-doan { color: #ffb457; border-color: rgba(255, 180, 87, .4); background: rgba(255, 180, 87, .08); }
.kh-pill.fw { color: var(--ink); background: rgba(255, 255, 255, .04); font-weight: 500; }

/* ---- Thanh bước chuẩn bị ---- */
.kh-buoc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.kh-buoc > div { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel); min-width: 0; }
.kh-buoc > div span { flex: 0 0 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-hi); font-size: .78rem; font-weight: 700; }
.kh-buoc > div b { font-size: .82rem; }
.kh-buoc > div small { margin-left: auto; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.kh-buoc > div.xong span { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Mentor đã biết gì ---- */
.kh-nhom { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.kh-nhom-o { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .02); }
.kh-nhom-o > summary { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i b" "i p" "i s"; column-gap: .6rem; row-gap: .25rem;
  padding: .7rem .8rem; cursor: pointer; list-style: none; }
.kh-nhom-o > summary::-webkit-details-marker { display: none; }
.kh-nhom-o > summary > span { grid-area: i; font-size: 1.3rem; align-self: center; }
.kh-nhom-o > summary > b { grid-area: b; font-size: .86rem; }
.kh-nhom-o > summary > i { grid-area: p; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.kh-nhom-o > summary > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; }
.kh-nhom-o.du > summary > i::after { background: var(--good); }
.kh-nhom-o > summary > small { grid-area: s; color: var(--muted); font-size: .72rem; }
.kh-nhom-o ul { list-style: none; margin: 0; padding: 0 .8rem .7rem; display: grid; gap: .45rem; }
.kh-nhom-o li { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: .5rem; align-items: start; font-size: .8rem; }
.kh-nhom-o li b { font-weight: 600; }
.kh-nhom-o li p { margin: .15rem 0 0; color: var(--ink); opacity: .85; overflow-wrap: anywhere; }
.kh-nhom-o li small { color: var(--faint); font-size: .7rem; }
.kh-dau { color: var(--muted); font-weight: 700; text-align: center; }
.kh-nhom-o li.co .kh-dau { color: var(--good); }

/* ---- Bộ câu hỏi ---- */
.kh-cau-nhom { margin-top: .8rem; }
.kh-cau-nhom h3 { font-size: .86rem; margin: 0 0 .4rem; color: var(--accent2); }
.kh-cau { padding: .8rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-bottom: .6rem; display: grid; gap: .4rem; }
.kh-cau.co-loi { border-color: rgba(255, 93, 102, .5); }
.kh-cau label { font-weight: 600; font-size: .86rem; margin: 0; line-height: 1.45; }
.kh-cau textarea, .kh-cau input { width: 100%; margin: 0; }
.kh-bb, .kh-nen { font-size: .66rem; font-weight: 600; padding: .05rem .4rem; border-radius: 99px; margin-left: .25rem; vertical-align: middle; white-space: nowrap; }
.kh-bb { color: var(--accent2); border: 1px solid rgba(255, 154, 76, .4); }
.kh-nen { color: var(--muted); border: 1px solid var(--rule-hi); }
.kh-luu-vao { color: var(--faint); font-size: .7rem; }
.kh-dem { color: var(--muted); font-size: .72rem; }
.kh-dem.du { color: var(--good); }
.kh-loi { color: var(--bad); font-size: .8rem; margin: 0; }
.kh-so { display: flex; align-items: center; gap: .5rem; }
.kh-so input { flex: 1; }
.kh-so span { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.kh-chon { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0; }
.kh-chip { padding: .42rem .8rem; border-radius: 999px; border: 1px solid var(--rule-hi); background: transparent; color: var(--ink);
  font: inherit; font-size: .8rem; cursor: pointer; transition: background .15s, border-color .15s; }
.kh-chip:hover { background: var(--panel-hi); }
.kh-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kh-chip.nay:not(.on) { border-color: var(--accent2); }
.kh-tuy-chon { margin-top: .6rem; }
.kh-tuy-chon > summary { cursor: pointer; color: var(--muted); font-size: .84rem; padding: .3rem 0; }
.kh-luu-hang { position: sticky; bottom: .6rem; background: var(--panel); padding: .5rem 0 0; }

/* ---- Phỏng vấn ---- */
.kh-pv { padding: .8rem; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .02); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: .6rem; display: grid; gap: .35rem; }
.kh-pv.xong { border-left-color: var(--good); }
.kh-pv b { font-size: .88rem; line-height: 1.45; }
.kh-pv textarea { width: 100%; margin: 0; }
.kh-pv .row-actions { margin: 0; }

/* ---- Toán ---- */
.kh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.kh-tiles > div { padding: .6rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); display: grid; gap: .15rem; }
.kh-tiles small { color: var(--muted); font-size: .72rem; }
.kh-tiles b { font-size: 1.02rem; }
.kh-dg { margin: .4rem 0 0; font-size: .82rem; padding: .4rem .6rem; border-radius: 10px; }
.kh-dg.tot { color: var(--good); background: rgba(87, 214, 141, .07); }
.kh-dg.xau { color: var(--bad); background: rgba(255, 93, 102, .07); }
.kh-dg.canh-bao { color: #ffb457; background: rgba(255, 180, 87, .07); }
.kh-ket-luan { padding: .6rem .8rem; border-radius: var(--radius-sm); font-weight: 700; font-size: .88rem; margin-bottom: .5rem; }
.kh-ket-luan.ok { background: rgba(87, 214, 141, .1); color: var(--good); }
.kh-ket-luan.cang { background: rgba(255, 180, 87, .1); color: #ffb457; }
.kh-ket-luan.vuot { background: rgba(255, 93, 102, .1); color: var(--bad); }
.kh-ket-luan.mo { background: rgba(255, 255, 255, .04); color: var(--muted); }
.kh-toan { list-style: none; counter-reset: b; margin: 0; padding: 0; display: grid; gap: .35rem; }
.kh-toan li { counter-increment: b; display: grid; grid-template-columns: 1.6rem 1fr auto; grid-template-areas: "n t v" "n c c"; column-gap: .5rem; font-size: .84rem; padding: .4rem 0; border-bottom: 1px dashed var(--rule); }
.kh-toan li::before { content: counter(b); grid-area: n; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: rgba(255, 255, 255, .05); }
.kh-toan li span { grid-area: t; }
.kh-toan li b { grid-area: v; white-space: nowrap; }
.kh-toan li small { grid-area: c; color: var(--faint); font-size: .72rem; }
/* Trần năng lực — "làm hết sức thì ra bao nhiêu" đặt cạnh "cần tỉ lệ bao nhiêu". */
.kh-nang-luc { margin: .5rem 0 .2rem; padding: .7rem .85rem; border-radius: 11px; border-left: 3px solid var(--rule-hi); background: rgba(255,255,255,.03); }
.kh-nang-luc.ok { border-left-color: #57d68d; background: rgba(87,214,141,.07); }
.kh-nang-luc.cang { border-left-color: #ffab5c; background: rgba(255,171,92,.07); }
.kh-nang-luc.vuot { border-left-color: #ff6b6b; background: rgba(255,107,107,.07); }
.kh-nang-luc > p { margin: 0; font-size: .85rem; line-height: 1.6; }
.kh-can { width: 100%; margin-top: .6rem; border-collapse: collapse; font-size: .82rem; }
.kh-can th { text-align: left; font-weight: 700; opacity: .65; padding: .25rem .4rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.kh-can td { padding: .35rem .4rem; border-top: 1px solid rgba(255,255,255,.08); }
.kh-can tr.khong-dat td { color: #ffb3b3; }
.kh-can tr.khong-dat td:last-child { font-weight: 700; }
.kh-gia-dung { margin: .5rem 0 0; font-size: .8rem; opacity: .8; }
.kh-kiem { display: grid; gap: .3rem; margin-top: .6rem; }
.kh-kiem p { margin: 0; font-size: .82rem; padding: .35rem .6rem; border-radius: 9px; border-left: 3px solid var(--rule-hi); }
.kh-kiem p.ok { border-left-color: var(--good); }
.kh-kiem p.cang { border-left-color: #ffb457; }
.kh-kiem p.vuot { border-left-color: var(--bad); background: rgba(255, 93, 102, .05); }
.kh-gia-dinh { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; margin-top: .6rem; font-size: .78rem; color: var(--muted); }
.kh-gia-dinh b { color: var(--ink); }
.kh-don-bay { display: grid; gap: .45rem; }
.kh-don-bay > div { display: grid; grid-template-columns: 1fr minmax(80px, 180px) auto; gap: .6rem; align-items: center; font-size: .8rem; }
.kh-don-bay i { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.kh-don-bay i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--good); border-radius: 99px; }
.kh-don-bay b { color: var(--good); white-space: nowrap; font-size: .76rem; }

/* ---- Dựng ---- */
.kh-dung textarea { width: 100%; }
.kh-dang-dung h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kh-dang-dung ol { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.kh-dang-dung li { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--faint); }
.kh-dang-dung li span { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--rule-hi); display: grid; place-items: center; font-size: .72rem; flex: 0 0 auto; }
.kh-dang-dung li.xong { color: var(--muted); }
.kh-dang-dung li.xong span { background: var(--good); border-color: var(--good); color: #06150c; }
.kh-dang-dung li.dang { color: var(--ink); font-weight: 600; }
.kh-dang-dung li.dang span { border-color: var(--accent); color: var(--accent2); animation: kh-nhip 1.2s ease-in-out infinite; }
.kh-dang-dung li small { color: var(--muted); font-weight: 400; }
.kh-dang-dung.gon ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kh-xoay { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--rule-hi); border-top-color: var(--accent); animation: kh-xoay .9s linear infinite; display: inline-block; }
@keyframes kh-xoay { to { transform: rotate(360deg); } }
@keyframes kh-nhip { 50% { box-shadow: 0 0 0 5px rgba(255, 90, 31, .18); } }
@media (prefers-reduced-motion: reduce) { .kh-xoay, .kh-dang-dung li.dang span { animation: none; } }

/* ---- Bản kế hoạch ---- */
.kh-canh { border-color: rgba(255, 180, 87, .35); }
.kh-canh-loi { border-color: rgba(255, 93, 102, .45); }
.kh-canh p, .kh-canh ul { margin: .35rem 0 0; font-size: .84rem; }
.kh-nhap-dau { border-color: var(--rule-hi); background: linear-gradient(135deg, rgba(255, 90, 31, .08), transparent 60%), var(--panel); }
.kh-muc-tieu { display: grid; gap: .1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.kh-muc-tieu small { color: var(--accent2); font-size: .7rem; letter-spacing: .08em; font-weight: 700; }
.kh-muc-tieu b { font-size: 1.5rem; }
.kh-muc-tieu span { color: var(--muted); font-size: .84rem; }
.kh-luan-diem { font-size: .95rem; line-height: 1.65; }
.kh-goi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.kh-goi > div { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; display: grid; gap: .2rem; }
.kh-goi small { color: var(--muted); font-size: .72rem; }
.kh-goi .kh-gia { font-size: 1.1rem; font-weight: 700; color: var(--accent2); }
.kh-goi p { margin: 0; font-size: .8rem; }
.kh-truc { display: flex; gap: 3px; margin: .4rem 0 .8rem; }
.kh-truc > div { min-width: 0; padding: .5rem .6rem; background: rgba(255, 255, 255, .04); display: grid; gap: .1rem; border-top: 3px solid var(--rule-hi); }
.kh-truc > div:first-child { border-radius: 10px 0 0 10px; }
.kh-truc > div:last-child { border-radius: 0 10px 10px 0; }
.kh-truc > div b { font-size: .75rem; color: var(--muted); }
.kh-truc > div span { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-truc > div small { font-size: .68rem; color: var(--faint); }
.kh-truc > div.dang-chay { border-top-color: var(--accent); background: rgba(255, 90, 31, .1); }
.kh-truc > div.da-qua { border-top-color: var(--good); }
.kh-truc.nho > div { padding: .35rem .5rem; }
.kh-gd { border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.kh-gd.dang-chay { border-color: var(--rule-hi); }
.kh-gd > summary { display: flex; gap: .7rem; align-items: center; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.kh-gd > summary::-webkit-details-marker { display: none; }
.kh-gd > summary > div { display: grid; min-width: 0; }
.kh-gd > summary small { color: var(--muted); font-size: .74rem; }
.kh-gd-so { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 1px solid var(--rule-hi); }
.kh-gd.dang-chay .kh-gd-so { background: var(--accent); border-color: var(--accent); color: #fff; }
.kh-gd.da-qua .kh-gd-so { background: var(--good); border-color: var(--good); color: #06150c; }
.kh-gd-than { padding: 0 .9rem .9rem; font-size: .86rem; }
.kh-gd-than h4, .kh-tuan h4 { margin: .8rem 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kh-fw { display: flex; flex-wrap: wrap; gap: .3rem; }
.kh-cl { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.kh-cl p { margin: .15rem 0 0; color: var(--ink); opacity: .85; }
.kh-bang { width: 100%; border-collapse: collapse; font-size: .8rem; }
.kh-bang th, .kh-bang td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.kh-bang th { color: var(--muted); font-weight: 600; font-size: .72rem; }
.kh-khong-lam { color: #ffb4b8; }
.kh-khong-lam-the ul { margin: .3rem 0; padding-left: 1.1rem; }
.kh-cac-tuan > summary { cursor: pointer; font-weight: 600; margin-top: .6rem; }
.kh-tuan-o { border-top: 1px dashed var(--rule); padding-top: .5rem; margin-top: .5rem; }
.kh-tuan-o > h4 { color: var(--accent2); }
.kh-trong-tam { font-weight: 600; margin: .3rem 0; }
.kh-nhip { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.kh-nhip li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; font-size: .84rem; align-items: baseline; }
.kh-nhip li b { color: var(--accent2); }
.kh-nhip li small { color: var(--faint); font-size: .72rem; }
.kh-kich-ban { border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-bottom: .5rem; overflow: hidden; }
.kh-kich-ban > div { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .6rem; background: rgba(255, 255, 255, .03); font-size: .8rem; }
.kh-kich-ban pre { margin: 0; padding: .6rem; white-space: pre-wrap; font-family: var(--font); font-size: .84rem; line-height: 1.55; }
.kh-phep-thu, .kh-moc { font-size: .82rem; margin: .4rem 0 0; }
.kh-phan-bien { border-color: rgba(143, 184, 255, .25); }
.kh-phan-bien p { font-size: .85rem; }
.kh-diem { display: inline-grid; place-items: center; min-width: 2.6rem; padding: .15rem .5rem; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: .86rem; font-weight: 700; }
.kh-cuoi { flex-wrap: wrap; }

/* ---- Đang chạy ---- */
.kh-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.kh-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: .86rem; padding: .55rem .8rem; cursor: pointer; }
.kh-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.kh-dau-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.kh-dau-hang > div { display: grid; gap: .1rem; min-width: 0; }
.kh-dau-hang small { color: var(--accent2); font-size: .68rem; letter-spacing: .07em; font-weight: 700; }
.kh-dau-hang b { font-size: 1.05rem; overflow-wrap: anywhere; }
.kh-dau-hang span { color: var(--muted); font-size: .76rem; }
.kh-thanh { display: block; position: relative; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); margin: .4rem 0; }
.kh-thanh em { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.kh-thanh u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; text-decoration: none; }
.kh-thanh.lon { height: 9px; margin: .8rem 0 .4rem; }
.kh-hom-nay { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kh-hom-nay li { display: grid; grid-template-columns: 1.2rem 1fr minmax(70px, 140px); gap: .6rem; align-items: center; font-size: .86rem; }
.kh-hom-nay li > div { display: grid; }
.kh-hom-nay li small { color: var(--muted); font-size: .74rem; }
.kh-hom-nay li.xong b { color: var(--muted); text-decoration: line-through; }
.kh-hom-nay li.xong .kh-dau { color: var(--good); }
.kh-hom-nay li.xong .kh-thanh em { background: var(--good); }
.kh-cs-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.kh-cs { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; display: grid; gap: .25rem; }
.kh-cs > div:first-child { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .84rem; }
.kh-cs-so { font-size: .8rem; color: var(--muted); }
.kh-cs-so span { font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.kh-cs.cham { border-color: rgba(255, 93, 102, .35); }
.kh-cs.dat .kh-thanh em { background: var(--good); }
.kh-cs small { font-size: .72rem; }
.kh-cong { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; font-size: .84rem; padding: .5rem 0; border-bottom: 1px dashed var(--rule); }
.kh-cong .kh-thanh { grid-column: 1 / -1; }
.kh-cong.dat { color: var(--good); }
.kh-cong.dat .kh-thanh em { background: var(--good); }
.kh-de-xuat { border-color: rgba(255, 154, 76, .45); }
.kh-dx { padding: .6rem 0; border-bottom: 1px dashed var(--rule); }
.kh-dx p { margin: 0 0 .2rem; }
.kh-duyet { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .6rem 0; border-bottom: 1px dashed var(--rule); }
.kh-duyet > div:first-child { display: grid; }
.kh-duyet small { color: var(--muted); font-size: .74rem; }
.kh-duyet p { grid-column: 1 / -1; margin: 0; font-size: .84rem; line-height: 1.55; }
.kh-duyet.tot .kh-diem { color: var(--good); }
.kh-duyet.kem .kh-diem, .kh-duyet.khong-bao-cao .kh-diem { color: var(--bad); }
.kh-ls { padding: .6rem 0; border-bottom: 1px dashed var(--rule); font-size: .84rem; }
.kh-ls p { margin: .2rem 0; }
.kh-xong h2 { color: var(--good); }

/* ---- Phễu bán hàng (27/09) ---- */
.kh-qua { border: 1px solid rgba(87, 214, 141, .3); background: rgba(87, 214, 141, .05); border-radius: var(--radius-sm); padding: .8rem .9rem; display: grid; gap: .25rem; }
.kh-qua > small { color: var(--good); font-size: .68rem; letter-spacing: .08em; font-weight: 700; }
.kh-qua > b { font-size: 1.02rem; }
.kh-qua p { margin: 0; font-size: .84rem; }
.kh-pheu { display: grid; justify-items: center; gap: 0; margin: .4rem 0 .6rem; }
.kh-pheu-bac { width: var(--w); min-width: min(100%, 260px); display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  padding: .6rem .8rem; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 90, 31, .16), rgba(255, 154, 76, .08)); border: 1px solid var(--rule-hi); }
.kh-pheu-bac > div:first-child { display: grid; min-width: 0; }
.kh-pheu-bac b { font-size: .86rem; }
.kh-pheu-bac small { color: var(--muted); font-size: .72rem; }
.kh-pheu-so { display: grid; justify-items: end; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.kh-pheu-so .that { color: var(--ink); font-weight: 600; }
.kh-pheu-mui { font-size: .74rem; color: var(--muted); padding: .25rem 0; }
.kh-pheu-mui b { color: var(--ink); }
.kh-pheu-mui.cham b:last-of-type { color: var(--bad); }
.kh-pheu-mui.dat b:last-of-type { color: var(--good); }
.kh-tu-choi > summary { cursor: pointer; font-weight: 600; margin: .6rem 0 .4rem; }
@media (max-width: 760px) {
  .kh-pheu-bac { width: 100%; flex-direction: column; align-items: flex-start; }
  .kh-pheu-so { justify-items: start; }
}

/* ---- Dải kế hoạch trong Sổ số liệu (tab Hôm nay) ---- */
.lg-kh { border-color: var(--rule-hi); }
.lg-kh-dau { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; }
.lg-kh ul { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .3rem; font-size: .84rem; }
.lg-kh li.xong { color: var(--muted); text-decoration: line-through; }

@media (max-width: 760px) {
  .kh-buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-dau-hang { grid-template-columns: 1fr; gap: .5rem; }
  .kh-truc > div span, .kh-truc > div small { display: none; }
  .kh-hom-nay li { grid-template-columns: 1.2rem 1fr; }
  .kh-hom-nay li .kh-thanh { grid-column: 2; }
  .kh-don-bay > div { grid-template-columns: 1fr auto; }
  .kh-don-bay i { grid-column: 1 / -1; grid-row: 2; }
  .kh-nhip li { grid-template-columns: 1fr auto; }
  .kh-nhip li small { display: none; }
  .kh-luu-hang { position: static; }
}