/* ==========================================================================
   V95 — Card nhiệm vụ mới (kt-card). Nạp SAU CÙNG nên thắng các file cũ.
   Bố cục: dải nhãn màu → tiêu đề + mô tả → khối thưởng lớn → chip → tiến độ
   dạng ô → nút full-width. Dùng biến --nb-* nên tự đổi theo sáng/tối.
   ========================================================================== */
html:root:root body #tasks .task-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:20px!important;align-items:start}
@media(max-width:640px){html:root:root body #tasks .task-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}}

html:root:root body #tasks .kt-card{
  position:relative;display:block;padding:0!important;margin:0!important;min-height:0!important;overflow:hidden;
  background:var(--nb-surface,#fff)!important;color:var(--nb-text,#000)!important;
  border:2px solid var(--nb-line,#000)!important;border-radius:var(--nb-r-lg,14px)!important;
  box-shadow:5px 5px 0 0 var(--nb-line,#000)!important;transform:none!important;
  transition:transform .14s ease,box-shadow .14s ease!important}
html:root:root body #tasks .kt-card:hover{transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 0 var(--nb-line,#000)!important}
html:root:root body #tasks .kt-card:before,html:root:root body #tasks .kt-card:after{content:none!important;display:none!important}

/* ---- dải nhãn trên cùng ---- */
html:root:root body #tasks .kt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border-bottom:2px solid var(--nb-line,#000);background:var(--nb-yellow,#ffe17c);color:#000}
html:root:root body #tasks .kt-is-pub .kt-top{background:var(--nb-sage,#b7c6c2)}
html:root:root body #tasks .kt-is-ow .kt-top{background:#ffc98a}
html:root:root body #tasks .kt-tag{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#000!important}
html:root:root body #tasks .kt-card .tk-pin{-webkit-appearance:none;appearance:none;flex:none;display:inline-grid;place-items:center;width:32px!important;min-width:32px!important;height:32px;padding:0!important;margin:0!important;font-size:15px;line-height:1;cursor:pointer;background:#fff!important;color:#000!important;border:2px solid #000!important;border-radius:8px!important;box-shadow:2px 2px 0 0 #000!important;filter:grayscale(1);opacity:.85;transition:transform .12s,box-shadow .12s,opacity .12s}
html:root:root body #tasks .kt-card .tk-pin:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 0 #000!important;opacity:1}
html:root:root body #tasks .kt-card .tk-pin.on{background:#000!important;filter:none;opacity:1}
html:root:root body #tasks .kt-card .tk-pin:focus-visible{outline:3px solid #000;outline-offset:2px}

/* ---- thân card ---- */
html:root:root body #tasks .kt-body{display:grid;gap:14px;padding:16px 14px 16px}
html:root:root body #tasks .kt-main{display:flex;gap:12px;align-items:flex-start}
html:root:root body #tasks .kt-ico{flex:none;display:grid;place-items:center;width:54px;height:54px;font-size:27px;line-height:1;background:#fff;color:#000;border:2px solid var(--nb-line,#000);border-radius:14px;box-shadow:3px 3px 0 0 var(--nb-line,#000)}
html:root:root body #tasks .kt-txt{flex:1 1 auto;min-width:0}
html:root:root body #tasks .kt-txt h3{margin:0 0 5px!important;font-family:var(--nb-head,inherit)!important;font-size:19px!important;line-height:1.22!important;font-weight:900!important;letter-spacing:-.01em;color:var(--nb-text,#000)!important;overflow-wrap:anywhere}
html:root:root body #tasks .kt-txt p{margin:0!important;font-size:13px!important;line-height:1.5!important;color:var(--nb-muted,#4b5563)!important;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- khối thưởng ---- */
html:root:root body #tasks .kt-reward{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border:2px solid var(--nb-line,#000);border-radius:12px;overflow:hidden}
html:root:root body #tasks .kt-rw-l,html:root:root body #tasks .kt-rw-r{padding:10px 12px;min-width:0}
html:root:root body #tasks .kt-rw-l{background:var(--nb-yellow,#ffe17c)}
html:root:root body #tasks .kt-rw-r{background:var(--nb-surface,#fff);border-left:2px solid var(--nb-line,#000)}
html:root:root body #tasks .kt-reward small{display:block;margin-bottom:3px;font-size:10.5px!important;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
html:root:root body #tasks .kt-rw-l small,html:root:root body #tasks .kt-rw-l b{color:#000!important}
html:root:root body #tasks .kt-rw-r small{color:var(--nb-muted,#4b5563)!important}
html:root:root body #tasks .kt-reward b{display:block;font-family:var(--nb-head,inherit);font-weight:900;line-height:1.1;overflow-wrap:anywhere}
html:root:root body #tasks .kt-rw-l b{font-size:clamp(18px,6vw,27px)}
html:root:root body #tasks .kt-rw-r b{font-size:clamp(18px,5.5vw,24px);color:var(--nb-text,#000)!important}
html:root:root body #tasks .kt-rw-r b span{font-size:.62em;font-weight:800;color:var(--nb-muted,#4b5563)!important}

/* ---- chip thông tin ---- */
html:root:root body #tasks .kt-chips{list-style:none;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;gap:6px}
html:root:root body #tasks .kt-chips li{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;font-size:12px;background:transparent!important;border:2px solid var(--nb-line,#000)!important;border-radius:999px!important;box-shadow:none!important}
html:root:root body #tasks .kt-chips span{flex:none;font-weight:700;color:var(--nb-muted,#4b5563)!important}
html:root:root body #tasks .kt-chips b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;color:var(--nb-text,#000)!important}

/* ---- tiến độ dạng ô ---- */
html:root:root body #tasks .kt-prog-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800}
html:root:root body #tasks .kt-prog-top span{color:var(--nb-text,#000)!important}
html:root:root body #tasks .kt-prog-top span:last-child{color:var(--nb-muted,#4b5563)!important}
html:root:root body #tasks .kt-segs{display:flex;gap:4px;margin-top:7px}
html:root:root body #tasks .kt-segs i{display:block;flex:1 1 0;height:14px;background:var(--nb-surface,#fff);border:2px solid var(--nb-line,#000);border-radius:4px}
html:root:root body #tasks .kt-segs i.on{background:#171e19}
html:root:root body #tasks .kt-segs.is-bar{gap:0;height:16px;border:2px solid var(--nb-line,#000);border-radius:999px;overflow:hidden;background:var(--nb-surface,#fff)}
html:root:root body #tasks .kt-segs.is-bar i{flex:none;height:100%;border:0;border-radius:0;background:#171e19;transition:width .25s ease}
html:root:root[data-theme="dark"] body #tasks .kt-segs i.on,html:root:root[data-theme="dark"] body #tasks .kt-segs.is-bar i{background:var(--nb-yellow,#ffe17c)}

/* ---- nút hành động ---- */
html:root:root body #tasks .kt-card .task-open,html:root:root body #tasks .kt-card .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0!important;padding:10px 14px!important;font-size:15px;font-weight:900;letter-spacing:.01em;cursor:pointer;background:#171e19!important;color:#fff!important;border:2px solid var(--nb-line,#000)!important;border-radius:12px!important;box-shadow:4px 4px 0 0 var(--nb-yellow,#ffe17c)!important;transition:transform .12s,box-shadow .12s}
html:root:root body #tasks .kt-card .task-open:not(:disabled):after{content:"→";font-size:1.15em;line-height:1}
html:root:root body #tasks .kt-card .task-open:not(:disabled):hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--nb-yellow,#ffe17c)!important}
html:root:root body #tasks .kt-card .task-open:not(:disabled):active{transform:translate(4px,4px);box-shadow:0 0 0 0 transparent!important}
html:root:root body #tasks .kt-card .task-open:focus-visible{outline:3px solid var(--nb-focus,#171e19);outline-offset:3px}
html:root:root body #tasks .kt-card .btn:disabled{cursor:not-allowed;color:#555!important;background:repeating-linear-gradient(45deg,#e4e4e7,#e4e4e7 8px,#f4f4f5 8px,#f4f4f5 16px)!important;box-shadow:none!important;transform:none!important}
html:root:root[data-theme="dark"] body #tasks .kt-card .task-open:not(:disabled){background:var(--nb-yellow,#ffe17c)!important;color:#000!important;box-shadow:4px 4px 0 0 var(--nb-line,#b7c6c2)!important}
html:root:root[data-theme="dark"] body #tasks .kt-card .task-open:not(:disabled):hover{box-shadow:2px 2px 0 0 var(--nb-line,#b7c6c2)!important}

@media(max-width:360px){
  html:root:root body #tasks .kt-body{padding:14px 12px}
  html:root:root body #tasks .kt-ico{width:46px;height:46px;font-size:23px}
  html:root:root body #tasks .kt-txt h3{font-size:17px!important}
}
@media(prefers-reduced-motion:reduce){
  html:root:root body #tasks .kt-card,html:root:root body #tasks .kt-card .tk-pin,html:root:root body #tasks .kt-card .btn,html:root:root body #tasks .kt-segs.is-bar i{transition:none!important}
}