/* Dandi Art — app "Việc của tôi" · mobile-first, KHÔNG kéo ngang */
:root{
  --cam:#f79420; --cam2:#ef7a3d; --vang:#ffcb04; --ngoc:#00ab80; --sanho:#ef4f5e;
  --bg:#f7f5f2; --card:#fff; --ink:#232029; --muted:#7d7789; --line:#ece7e0;
  --r:16px; --sh:0 2px 10px rgba(60,45,25,.06); --nav:66px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{max-width:100%; overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,p{margin:0}
.hide{display:none !important}
.muted{color:var(--muted); font-weight:400}
.hint{color:var(--muted); font-size:13.5px; margin:6px 2px 12px}

/* ---------- đăng nhập ---------- */
.login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px 18px;
  background:linear-gradient(170deg,#fff7ee,#fff2f5 55%,#f3f0ff)}
.login-box{width:100%; max-width:380px; background:#fff; border-radius:22px; padding:26px 20px 22px;
  box-shadow:0 12px 34px rgba(90,60,20,.12); text-align:center}
.login-box img{height:46px; margin:0 auto 10px}
.login-box h1{font-size:22px; margin-bottom:2px}
.login-box p{margin:0 0 18px; font-size:14px}
label{display:block; text-align:left; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px}
input,select,textarea{width:100%; margin-top:5px; padding:13px 14px; border:1px solid var(--line);
  border-radius:14px; font:inherit; font-size:16px; background:#fff; color:var(--ink); appearance:none}
input:focus,select:focus,textarea:focus{outline:none; border-color:#f6c98d; box-shadow:0 0 0 3px #fff3e0}
textarea{min-height:110px; resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,#9a93a6 50%),linear-gradient(135deg,#9a93a6 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:40px}

.btn{width:100%; min-height:50px; border:0; border-radius:14px; font:inherit; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(95deg,var(--cam),var(--cam2)); cursor:pointer;
  box-shadow:0 6px 16px rgba(247,148,32,.26); transition:transform .08s}
.btn:active{transform:scale(.985)}
.btn.ghost{background:#fff; color:#8a5a12; border:1.5px solid var(--line); box-shadow:none}
.btn.ngoc{background:linear-gradient(95deg,var(--ngoc),#00926d); box-shadow:0 6px 16px rgba(0,171,128,.22)}
.btn.sanho{background:linear-gradient(95deg,var(--sanho),#e0364a); box-shadow:0 6px 16px rgba(239,79,94,.22)}
.btn:disabled{opacity:.6; box-shadow:none}
.msg{margin-top:10px; font-size:13.5px; color:var(--sanho); min-height:18px}
.msg.ok{color:var(--ngoc)}

/* ---------- khung app ---------- */
#app{max-width:640px; margin:0 auto; padding-bottom:calc(var(--nav) + 18px)}
.top{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 12px; background:rgba(247,245,242,.96); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line)}
.who{min-width:0}
.who b{display:block; font-size:16.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.role{display:inline-block; margin-top:2px; font-size:12px; font-weight:700; color:#a4620d; background:#fff3e0;
  border-radius:999px; padding:1px 9px}
.link{background:none; border:0; color:var(--muted); font:inherit; font-size:14px; padding:8px 6px; cursor:pointer}
.main{padding:14px 16px 0}
.pane-h{font-size:17px; margin:2px 0 12px}
.sub-h{font-size:15px; margin:16px 0 8px}

/* ---------- thẻ / danh sách ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh); margin-bottom:12px}
.list{display:grid; gap:10px}
.item{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px; box-shadow:var(--sh)}
.item .t{font-weight:700; font-size:16px; line-height:1.35; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.item .s{color:var(--muted); font-size:14px; margin-top:5px}
.item .r{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.item .r .btn{min-height:46px; font-size:15px}
.empty{color:var(--muted); font-size:14.5px; text-align:center; padding:22px 10px; background:#fff;
  border:1px dashed var(--line); border-radius:var(--r)}

.tag{display:inline-block; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:700; line-height:1.7}
.tag.hvt{background:#e9f2ff; color:#1e5fa8}
.tag.q7{background:#ffeff5; color:#b03a6a}
.tag.ok{background:#e7f8f1; color:#0c7a58}
.tag.wait{background:#fff4e2; color:#9c5f0b}

/* bé cần ghi nhận — checklist dễ bấm */
.stu{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px;
  border:1px solid var(--line); border-radius:14px; background:#fff; min-height:54px; cursor:pointer}
.stu:active{background:#fffaf3}
.stu.done{background:#f5fdf9; border-color:#cdeedd}
.stu .nm{font-size:15.5px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stu .chk{color:var(--ngoc); font-weight:700; font-size:14px; white-space:nowrap}
.stu .go{color:var(--cam2); font-size:13.5px; font-weight:700; white-space:nowrap}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{background:#fffaf2; border:1px solid var(--line); border-radius:14px; padding:14px 10px; text-align:center}
.stat b{display:block; font-size:23px; color:#b4620a; line-height:1.2}
.stat span{font-size:12.5px; color:var(--muted)}

/* ---------- tab dưới cùng: 4 nút chia đều, KHÔNG kéo ngang ---------- */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr); width:100%;
  background:rgba(255,255,255,.98); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -2px 14px rgba(60,45,25,.06);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs button{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--nav); border:0; background:none; font:inherit; color:#8e8899; cursor:pointer; padding:8px 4px}
.tabs .ico{font-size:19px; line-height:1}
.tabs .lb{font-size:11.5px; font-weight:600; white-space:nowrap}
.tabs button.on{color:var(--cam2)}
.tabs button.on .lb{font-weight:800}
.tabs .dot{position:absolute; top:7px; right:calc(50% - 20px); min-width:19px; height:19px; border-radius:999px;
  background:var(--sanho); color:#fff; font-size:11px; font-weight:800; line-height:19px; text-align:center; padding:0 5px}
.tabs .dot:empty{display:none}

/* ---------- modal (ghi nhận) ---------- */
.modal{position:fixed; inset:0; z-index:50; background:rgba(35,25,15,.45); display:flex; align-items:flex-end; justify-content:center}
.sheet{width:100%; max-width:640px; max-height:92dvh; overflow-y:auto; background:var(--bg);
  border-radius:20px 20px 0 0; padding:10px 16px calc(22px + env(safe-area-inset-bottom))}
.sheet-bar{width:44px; height:5px; border-radius:99px; background:#ddd6cc; margin:4px auto 10px}
.sheet h3{font-size:17px; margin-bottom:12px}
.row2{display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:6px}
@media (min-width:620px){
  .modal{align-items:center}
  .sheet{border-radius:20px}
  .item .r{grid-template-columns:auto auto; justify-content:start}
  .item .r .btn{padding:0 22px}
}