/* OneDDH v1 — giao diện nổi. Mỗi thành phần nổi có nền riêng, chữ luôn tương phản. */
:root {
  --xanh: #1B75BB;
  --ngoc: #17A398;
  --la: #6CBF4B;
  --cam: #F5A623;
  --do: #D64545;
  --vang: #E0A800;
  --chu: #14202B;
  --mo: #4F6070;
  --nen-noi: #FFFFFF;
  --nen-nhat: #F3F7FA;
  --vien: #D3DDE6;
  --dau: 64px;
  --chan: 26px;
  --bang-rong: 380px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--chu);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #DCE6EE; color: var(--chu); }
button { font: inherit; color: var(--chu); }

#canh { position: fixed; inset: 0; z-index: 0; touch-action: none; }
#canh canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Nhãn khu nổi trên 3D */
#lop-nhan { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.nhan-khu {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  background: rgba(255,255,255,.86); color: var(--chu);
  border: 1px solid rgba(211,221,230,.9); border-left: 3px solid var(--xanh);
  border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 600; line-height: 1.2; opacity: .88;
  width: max-content; max-width: 150px; text-align: center; overflow-wrap: anywhere;
  pointer-events: auto; cursor: pointer; box-shadow: 0 2px 6px rgba(20,32,43,.15);
  transition: opacity .2s;
}
.nhan-khu.cay { border-left-color: var(--la); }
.nhan-khu.vp { border-left-color: var(--ngoc); }
.nhan-khu:hover { opacity: 1; background: #FFFFFF; z-index: 2; }
.nhan-khu.chon { background: var(--xanh); color: #fff; border-color: var(--xanh); opacity: 1; font-size: 12px; z-index: 3; }
.nhan-khu.mo { opacity: .25; }
.nhan-khu.an { display: none; }

.bong-ai {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  max-width: 240px; background: #FFF4E0; color: #3B2600; border: 2px solid var(--cam);
  border-radius: 12px; padding: 6px 10px; font-size: 12px; line-height: 1.3; pointer-events: auto; cursor: pointer;
  box-shadow: 0 4px 14px rgba(245,166,35,.45); animation: nay 1.2s ease-in-out infinite alternate;
}
.bong-ai b { color: #8A4B00; }
.bong-ai::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--cam); border-bottom: 0; }
@keyframes nay { from { margin-top: 0; } to { margin-top: -5px; } }

/* Thanh trên */
#dau {
  position: fixed; left: 8px; right: 8px; top: 8px; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,.96); color: var(--chu);
  border: 1px solid var(--vien); border-radius: 14px; padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(20,32,43,.12);
}
.thuong-hieu { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.thuong-hieu b { font-size: 20px; color: var(--xanh); letter-spacing: .3px; }
.thuong-hieu span { font-size: 12px; color: var(--mo); }
/* Máy tính: bảng điểm nằm hàng riêng dưới tên và nút, để nhãn P1–P3 đọc được. */
#diem { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; order: 3; min-width: 0; }
#cong-cu { margin-left: auto; }
.diem-dt {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center;
  background: var(--nen-nhat); border: 1px solid var(--vien); border-radius: 10px; padding: 5px 10px;
  cursor: pointer; min-width: 190px; flex: 1 1 220px; text-align: left;
}
.diem-nhan { font-size: 12px; color: var(--mo); font-weight: 600; }
.diem-so { font-size: 13px; text-align: right; color: var(--chu); }
.diem-so b { font-size: 17px; color: var(--xanh); }
.diem-dt .thanh { grid-column: 1 / -1; }
#diem-uu { display: flex; gap: 6px; flex: 2 1 300px; min-width: 0; }
.uu-chip {
  flex: 1 1 0; min-width: 0; text-align: left; cursor: pointer;
  background: var(--nen-nhat); color: var(--chu); border: 1px solid var(--vien); border-radius: 10px; padding: 4px 8px;
}
.uu-chip .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.25; overflow: hidden; color: var(--chu); }
.nghen {
  flex: none; background: #F5A623; color: #2B1A00; border: 2px solid #D9860B; border-radius: 999px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; animation: nhay-cam 1.6s ease-in-out infinite;
}
.nghen[hidden] { display: none; }
@keyframes nhay-cam { 50% { box-shadow: 0 0 0 4px rgba(245,166,35,.35); } }
.nghen-note { background: #FFF1DC; color: #4A2C00; border: 1px solid #F5A623; border-radius: 10px; padding: 8px 10px; margin: 8px 0; font-size: 13px; line-height: 1.4; }
.nghen-note[hidden] { display: none; }
/* Thẻ điện thoại công nhân */
.dt-the { display: flex; justify-content: center; margin: 10px 0 4px; }
.dt-man { width: 100%; max-width: 300px; background: #FFFFFF; color: var(--chu); border: 8px solid #1C2733; border-radius: 26px; padding: 12px 12px 14px; box-shadow: 0 6px 18px rgba(20,32,43,.22); }
.dt-dau { font-weight: 700; font-size: 14px; text-align: center; margin-bottom: 8px; color: var(--chu); }
.dt-nut { display: block; width: 100%; min-height: 46px; margin: 6px 0; background: var(--xanh); color: #FFFFFF; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.dt-nut:nth-of-type(2) { background: var(--ngoc); }
.dt-nut:nth-of-type(3) { background: #C0392B; }
.dt-nut:active { transform: scale(.98); }
.dt-xn { background: #ECF8E6; color: #1E4A12; border-radius: 10px; padding: 7px 9px; font-size: 12.5px; margin-top: 8px; }
.dt-xn.moi { animation: dt-moi .9s ease; }
@keyframes dt-moi { 0% { background: #B9EBA2; } 100% { background: #ECF8E6; } }
.dt-ti { font-size: 12.5px; margin-top: 6px; text-align: center; color: var(--chu); }
.uu-chip .thanh-wrap { margin-top: 3px; }
#cong-cu { display: flex; gap: 6px; flex-wrap: wrap; }
#cong-cu button {
  background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 999px;
  padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
#cong-cu button:hover { border-color: var(--xanh); }
#cong-cu button[aria-pressed="true"] { background: var(--xanh); color: #fff; border-color: var(--xanh); }
#nut-ai[aria-pressed="true"] { background: var(--cam); color: #2B1A00; border-color: var(--cam); }

/* Thanh tiến độ */
.thanh-wrap { display: flex; align-items: center; gap: 6px; }
.thanh { display: block; flex: 1; height: 7px; background: #E2E8EE; border-radius: 99px; overflow: hidden; min-width: 30px; }
.thanh i { display: block; height: 100%; width: 0; background: var(--la); border-radius: 99px; transition: width .25s, background-color .25s; }
.thanh-wrap b { font-size: 11px; min-width: 34px; text-align: right; color: var(--chu); font-variant-numeric: tabular-nums; }

/* Bảng mục tiêu */
#bang {
  position: fixed; right: 8px; top: calc(var(--dau) + 16px); bottom: calc(var(--chan) + 8px); width: var(--bang-rong); z-index: 4;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.98); color: var(--chu); border: 1px solid var(--vien); border-radius: 14px;
  box-shadow: 0 6px 22px rgba(20,32,43,.16); overflow: hidden;
}
#tay-nam { display: none; }
#bang-noi { overflow-y: auto; overflow-x: hidden; padding: 12px 14px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.duong-dan { font-size: 12px; color: var(--mo); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.duong-dan button { background: none; border: 0; padding: 0; color: var(--xanh); cursor: pointer; font-size: 12px; text-decoration: underline; }
.duong-dan span.sep { color: #8A99A8; }
.bang-ten { font-size: 18px; font-weight: 700; margin: 0 0 2px; line-height: 1.25; color: var(--chu); }
.bang-phu { font-size: 12px; color: var(--mo); margin-bottom: 8px; }
.the { background: var(--nen-nhat); color: var(--chu); border: 1px solid var(--vien); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.muc { font-size: 12px; font-weight: 700; color: var(--xanh); text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 6px; }
.noi-len { font-size: 12px; color: var(--mo); background: #EEF6FC; border: 1px dashed #9CC3E3; border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.noi-len button { background: none; border: 0; padding: 0; color: var(--xanh); cursor: pointer; text-decoration: underline; font-size: 12px; text-align: left; }

.dong { background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 10px; padding: 8px 10px; margin: 6px 0; transition: box-shadow .3s, border-color .3s; }
.dong.goal { border-left: 5px solid var(--xanh); }
.dong.uuTien { background: #F1F8F4; border-left: 5px solid var(--ngoc); }
.dong.chienLuoc, .dong.thang, .dong.tuan { margin-left: 12px; }
.dong.tuan { margin-left: 22px; }
.dong.nhay { border-color: var(--cam); box-shadow: 0 0 0 3px rgba(245,166,35,.35); }
.dong.de-doa { border-color: var(--cam); background: #FFF8EC; }
.dong-dau { display: flex; gap: 8px; align-items: flex-start; }
.dong-dau input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--la); cursor: pointer; }
.dong-viec { font-weight: 600; font-size: 14px; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dong-ma { font-size: 10px; color: #6B7B8A; background: #EEF2F5; border-radius: 4px; padding: 1px 4px; flex: none; }
.dong-so { font-size: 12px; color: var(--chu); margin-top: 3px; overflow-wrap: anywhere; }
.dong-so .tu-den { font-weight: 700; color: var(--xanh); }
.dong-meta { font-size: 11.5px; color: var(--mo); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.huy-hieu { background: #FFF1D6; color: #6B4300; border-radius: 6px; padding: 0 5px; }
.hien-nay { background: #E6F3EF; color: #0D5E57; border-radius: 6px; padding: 0 5px; }
.dong .thanh-wrap { margin-top: 6px; }
.dong-cuoi { display: flex; justify-content: flex-end; margin-top: 5px; }
.nut-xem { background: #EEF6FC; color: #0F4F80; border: 1px solid #B9D6EE; border-radius: 999px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.nut-xem:hover { background: #DDEEFA; }

.con-ds { display: flex; flex-direction: column; gap: 4px; }
.con-nut { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; text-align: left; background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.con-nut:hover { border-color: var(--xanh); }
.con-nut .ten { min-width: 0; overflow-wrap: anywhere; }
.con-nut small { color: var(--mo); display: block; font-size: 11px; }

/* Cần gạt */
.gat { background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.gat label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.gat label b { color: var(--xanh); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gat input[type=range] { width: 100%; margin: 6px 0 2px; accent-color: var(--xanh); height: 24px; }
.gat-mut { font-size: 11px; color: var(--mo); display: flex; justify-content: space-between; gap: 6px; }
.nut-hang { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.nut-hang button { flex: 1 1 120px; background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 8px; padding: 7px 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.nut-hang button.chinh { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.kq { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.kq div { background: #EEF6FC; color: var(--chu); border-radius: 8px; padding: 6px 8px; font-size: 11.5px; line-height: 1.25; }
.kq b { display: block; font-size: 15px; color: #0F4F80; }
details.gat-nhom > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--xanh); padding: 6px 0; }

.canh-bao-the { background: #FFF4E0; color: #3B2600; border: 2px solid var(--cam); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 14px; line-height: 1.4; }
.viec-25 { background: #ECF8E6; color: #1E4A12; border: 1px solid #A8D894; border-radius: 10px; padding: 8px 10px; margin: 8px 0; font-size: 13.5px; }
.nut-mo { display: inline-block; margin-top: 6px; background: var(--xanh); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; }

/* Ngăn kéo tổ chức */
#ngan {
  position: fixed; left: 8px; top: calc(var(--dau) + 16px); bottom: calc(var(--chan) + 8px); width: 320px; max-width: calc(100vw - 16px); z-index: 6;
  background: #FFFFFF; color: var(--chu); border: 1px solid var(--vien); border-radius: 14px; box-shadow: 0 8px 26px rgba(20,32,43,.2);
  display: flex; flex-direction: column; overflow: hidden;
}
#ngan[hidden] { display: none; }
.ngan-dau, .hop-dau { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--vien); background: var(--nen-nhat); color: var(--chu); }
.ngan-dau button, .hop-dau button { background: var(--nen-noi); color: var(--chu); border: 1px solid var(--vien); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
#ngan-noi { overflow-y: auto; padding: 8px 10px 14px; }
.cay-tc button { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--nen-noi); color: var(--chu); border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.cay-tc button:hover { background: #EEF6FC; }
.cay-tc button.chon { background: #DDEEFA; }
.cay-tc .bp { padding-left: 14px; font-weight: 600; }
.cay-tc .vt { padding-left: 30px; font-size: 12.5px; }
.cay-tc .cty { font-weight: 700; color: var(--xanh); }
.cay-tc .ten { min-width: 0; overflow-wrap: anywhere; }
.cay-tc .khoi-ten { margin: 10px 0 2px; padding: 3px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #0D5E57; background: #E6F3EF; border-radius: 6px; }

/* Hộp cách tính */
#hop-cach { position: fixed; inset: 0; z-index: 9; background: rgba(20,32,43,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#hop-cach[hidden] { display: none; }
.hop { background: #FFFFFF; color: var(--chu); border-radius: 14px; width: min(640px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
#cach-noi { overflow-y: auto; padding: 10px 16px 18px; font-size: 14px; line-height: 1.5; }
#cach-noi ol { padding-left: 20px; }
#cach-noi li { margin: 8px 0; }
#cach-noi .gt { color: #0F4F80; font-weight: 700; }

/* Gợi ý, lỗi, chân trang */
#goi-y {
  position: fixed; left: 50%; bottom: calc(var(--chan) + 18px); transform: translateX(-50%); z-index: 7;
  background: #14202B; color: #FFFFFF; border-radius: 999px; padding: 8px 16px; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: opacity .4s; max-width: calc(100vw - 32px); text-align: center;
}
#goi-y.an { opacity: 0; pointer-events: none; }
#loi-3d { position: fixed; left: 16px; top: calc(var(--dau) + 24px); z-index: 3; max-width: 420px; background: #FFF4E0; color: #3B2600; border: 1px solid var(--cam); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
#chan {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; min-height: var(--chan);
  background: rgba(20,32,43,.88); color: #F1F5F9; font-size: 11px; line-height: 1.35; padding: 5px 12px; text-align: center;
}

/* Điện thoại: bảng là tấm kéo từ dưới lên */
@media (max-width: 720px) {
  :root { --bang-rong: 100%; }
  #dau { left: 6px; right: 6px; top: 6px; padding: 6px 8px; gap: 6px; border-radius: 12px; }
  .thuong-hieu b { font-size: 17px; }
  .thuong-hieu span { font-size: 11px; }
  #diem { flex: 1 1 100%; flex-wrap: wrap; gap: 5px; order: 3; }
  .diem-dt { flex: 1 1 100%; min-width: 0; padding: 4px 8px; }
  #diem-uu { flex: 1 1 100%; gap: 4px; }
  .uu-chip { padding: 3px 6px; }
  .uu-chip .t { font-size: 10.5px; -webkit-line-clamp: 1; }
  .nghen { flex: 1 1 100%; padding: 4px 8px; }
  #cong-cu { margin-left: auto; gap: 4px; flex-wrap: nowrap; }
  #cong-cu button { padding: 5px 8px; font-size: 14px; }
  #cong-cu button span { display: none; }
  #bang {
    left: 0; right: 0; top: auto; width: auto; bottom: var(--chan);
    height: 55vh; height: 55dvh; max-height: 55vh; border-radius: 16px 16px 0 0; transition: height .25s ease;
  }
  #bang.thu { height: 52px; }
  #tay-nam {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 8px 14px 6px; position: relative;
    background: var(--nen-nhat); color: var(--chu); border: 0; border-bottom: 1px solid var(--vien); cursor: pointer; text-align: left;
  }
  #tay-nam .vach { position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; border-radius: 9px; background: #A9B7C4; }
  #bang-tieu { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 4px; }
  #tay-nam .mui { padding-top: 4px; }
  #bang.thu #tay-nam .mui { transform: rotate(180deg); }
  #ngan { left: 6px; right: 6px; width: auto; }
  .nhan-khu { font-size: 10px; padding: 2px 6px; max-width: 110px; }
  .bong-ai { max-width: 190px; font-size: 11px; }
  #goi-y { bottom: calc(var(--chan) + 64px); font-size: 13px; }
  #chan { font-size: 10px; padding: 4px 8px; }
  .con-nut { grid-template-columns: 1fr 90px; }
}

/* Nền kính mờ cho thanh trên và bảng (vòng 5). Nền vẫn đủ sáng để chữ tối tương phản. */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  #dau, #bang, #ngan {
    background: rgba(255,255,255,.84);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}