/* ================================================ PHIẾU TỰ ĐÁNH GIÁ NĂNG LỰC */

.pd-dau {
  background: linear-gradient(160deg, #042b7b 0%, #053596 52%, #0b4bbd 100%);
  color: #fff; padding: 44px 0 40px;
}
.pd-dau h1 { font-size: clamp(26px, 3.8vw, 38px); margin: 16px 0 12px; letter-spacing: -.02em; }
.pd-mo { color: #c2d5f0; max-width: 74ch; margin: 0 0 10px; font-size: 15.6px; }
.pd-mo b { color: #fff; }
.pd-nho { font-size: 14.6px; color: #a9c0e2; }

.pd-than { padding: 34px 0 60px; }

.pd-khoi, .pd-thang {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.pd-tieu {
  display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-size: 19.5px; color: var(--navy);
}
.pd-tieu .pd-so {
  width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.pd-tieu .tuy { font-weight: 400; font-size: 15px; color: var(--faint); font-style: normal; }
.pd-huong { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.pd-huong b { color: var(--ink); }
.goi-y { color: var(--cyan); font-weight: 600; }

/* ------------------------------------------------------- ô nhập thông tin */
.pd-luoi-tt { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.o-nhap { display: block; }
.o-nhap > span { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.o-nhap > span i { color: var(--red); font-style: normal; }
.o-nhap input, .o-nhap textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15.4px; color: var(--ink); background: #fdfdff;
}
.o-nhap input:focus, .o-nhap textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(5, 53, 150, .12);
}
.o-nhap textarea { resize: vertical; min-height: 78px; }
.loi-o { display: block; color: var(--red); font-size: 13.4px; font-style: normal; margin-top: 5px; }

/* ------------------------------------------------------------- thang điểm */
.thang-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.thang-o {
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px;
  border-top: 3px solid var(--line);
}
.thang-o b { display: block; font-size: 24px; line-height: 1; margin-bottom: 5px; }
.thang-o span { display: block; font-weight: 700; font-size: 14.6px; color: var(--ink); margin-bottom: 5px; }
.thang-o em { display: block; font-style: normal; font-size: 13.4px; color: var(--muted); line-height: 1.42; }
.thang-o.t0 { border-top-color: #c8ced9; } .thang-o.t0 b { color: #8a93a3; }
.thang-o.t1 { border-top-color: var(--amber); } .thang-o.t1 b { color: var(--amber); }
.thang-o.t2 { border-top-color: var(--blue); } .thang-o.t2 b { color: var(--blue); }
.thang-o.t3 { border-top-color: var(--teal); } .thang-o.t3 b { color: var(--teal); }

/* thanh theo dõi tiến độ chấm */
.pd-tien { margin-top: 18px; display: flex; align-items: center; gap: 13px; }
.tien-ke { flex: 1; height: 8px; background: #e6eaf1; border-radius: 999px; overflow: hidden; }
.tien-ke i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 999px;
  transition: width .22s ease; }
.pd-tien span { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pd-tien.du .tien-ke i { background: var(--teal); }
.pd-tien.du span { color: var(--teal); }

/* --------------------------------------------------------- sáu thẻ miền */
.pd-mien-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.pd-cho { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 34px 0; }
.pd-cho-loi { color: var(--red); font-weight: 600; }

.pd-mien {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 0 6px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.pd-mien::before { content: ""; display: block; height: 4px; }
.m-navy::before { background: var(--navy); } .m-blue::before { background: var(--blue); }
.m-cyan::before { background: var(--cyan); } .m-teal::before { background: var(--teal); }
.m-amber::before { background: var(--amber); } .m-red::before { background: var(--red); }

.mien-dau {
  display: flex; align-items: center; gap: 11px; padding: 16px 20px 13px;
  border-bottom: 1px solid var(--line);
}
.mien-so {
  width: 27px; height: 27px; border-radius: 8px; background: var(--card); color: var(--navy);
  display: grid; place-items: center; font-weight: 800; font-size: 14.5px; flex-shrink: 0;
}
.mien-dau h3 { margin: 0; font-size: 16.6px; color: var(--navy); line-height: 1.28; }
.mien-dem {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--faint);
  background: var(--soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.mien-dem.xong { color: #fff; background: var(--teal); }

/* --------------------------------------------------- một dòng năng lực */
.nl-dong {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 11px 20px; border-radius: 8px;
}
.nl-dong + .nl-dong { border-top: 1px solid #eef1f6; }
.nl-ten { font-size: 15px; color: var(--ink); line-height: 1.36; }
.nl-ten b { color: var(--navy); font-size: 13.4px; margin-right: 3px; }

/* dòng chưa chấm khi bấm gửi: tô viền đỏ để tìm ngay, không phải rà từ đầu */
.nl-dong.thieu { background: #fdf1f0; box-shadow: inset 0 0 0 1.5px var(--red); }

.nl-diem { display: flex; gap: 5px; }
/* Ô chọn thật phải còn trong luồng tiêu điểm để bấm Tab vẫn chọn được —
   dùng opacity chứ không dùng display:none. */
.o-diem { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.the-diem {
  display: grid; place-items: center; width: 46px; padding: 10px 0;
  border: 1.5px solid var(--line); border-radius: 9px; cursor: pointer;
  background: #fff; transition: background .13s, border-color .13s;
}
.the-diem b { font-size: 19px; line-height: 1.1; color: var(--muted); }
.the-diem:hover { background: var(--card); border-color: #b9c9e6; }

/* Trên máy tính CHỈ hiện con số. Nhãn chữ trong ô từng để 8,6px: cỡ đó không
   đọc được, mà "Chưa làm được" lại xuống 3 dòng nên mỗi hàng cao tới 81px —
   trả giá chiều cao cho một dòng chữ vô dụng. Nghĩa của 0–3 đã nằm ở bảng thang
   điểm ngay phía trên, kèm chú giải khi trỏ chuột vào ô.
   Vẫn giữ thẻ span trong luồng đọc của trình đọc màn hình, chỉ ẩn phần hiển thị,
   nhờ vậy ô chọn vẫn có tên đầy đủ "0 Chưa làm được". */
.the-diem span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.o-diem:checked + .the-diem { border-width: 1.5px; }
.o-diem:checked + .td-0 { background: #eef0f4; border-color: #97a0af; }
.o-diem:checked + .td-0 b, .o-diem:checked + .td-0 span { color: #4c5563; }
.o-diem:checked + .td-1 { background: var(--amber); border-color: var(--amber); }
.o-diem:checked + .td-2 { background: var(--blue); border-color: var(--blue); }
.o-diem:checked + .td-3 { background: var(--teal); border-color: var(--teal); }
.o-diem:checked + .td-1 b, .o-diem:checked + .td-1 span,
.o-diem:checked + .td-2 b, .o-diem:checked + .td-2 span,
.o-diem:checked + .td-3 b, .o-diem:checked + .td-3 span { color: #fff; }
.o-diem:focus-visible + .the-diem { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ------------------------------------------------------- chọn ưu tiên */
.uu-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.o-uu { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.the-uu {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
  border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
  font-size: 14.6px; color: var(--ink); background: #fff; line-height: 1.36;
}
.the-uu b { color: var(--navy); font-size: 13px; flex-shrink: 0; padding-top: 1px; }
.the-uu:hover { border-color: #b9c9e6; background: #fbfcff; }
.o-uu:checked + .the-uu {
  border-color: var(--amber); background: #fdf6ec;
  box-shadow: inset 0 0 0 1px var(--amber);
}
.o-uu:checked + .the-uu b { color: var(--amber); }
.o-uu:disabled + .the-uu { opacity: .42; cursor: not-allowed; }
.o-uu:focus-visible + .the-uu { outline: 2px solid var(--navy); outline-offset: 2px; }
.uu-dem { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ô bẫy máy gửi tự động: đẩy ra ngoài khung nhìn, không dùng display:none vì
   một số công cụ tự động biết bỏ qua trường bị ẩn hẳn */
.o-bay { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------- nút gửi */
.pd-gui { text-align: center; padding: 6px 0 0; }
.nut-navy {
  background: var(--navy); color: #fff; border: 0; font-size: 16.5px; padding: 15px 34px;
  cursor: pointer; font-family: inherit; box-shadow: var(--shadow-md);
}
.nut-navy:hover:not(:disabled) { background: var(--navy-dark); }
.nut-navy:disabled { background: #98a4b8; cursor: not-allowed; box-shadow: none; }
.nut-vien-navy {
  background: #fff; color: var(--navy); border: 1.5px solid var(--navy);
  cursor: pointer; font-family: inherit; font-size: 15px;
}
.nut-vien-navy:hover { background: var(--card); }
.pd-rieng { margin: 16px auto 0; max-width: 62ch; font-size: 13.6px; color: var(--faint); }
.loi-chung {
  margin: 0 auto 16px; max-width: 68ch; background: #fdf1f0; border: 1px solid #f3c9c6;
  color: #a51f19; border-radius: 10px; padding: 12px 16px; font-size: 14.8px; font-weight: 600;
}

/* -------------------------------------------------------- màn hình xong */
.pd-xong {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal);
  border-radius: var(--radius); padding: 40px 30px; text-align: center;
  box-shadow: var(--shadow-md); max-width: 720px; margin: 0 auto;
}
.xong-dau {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 32px; display: grid; place-items: center;
}
.pd-xong h2 { margin: 0 0 6px; color: var(--navy); font-size: 26px; }
.xong-ten { margin: 0 0 22px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.xong-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.xong-so > div { background: var(--soft); border-radius: 11px; padding: 15px 8px; }
.xong-so b { display: block; font-size: 25px; color: var(--navy); line-height: 1.15; letter-spacing: -.02em; }
.xong-so span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.xong-mo { color: var(--muted); font-size: 15px; max-width: 52ch; margin: 0 auto 24px; }
.pd-xong .nut-hang { justify-content: center; }

/* ------------------------------------------------------------ điện thoại */
@media (max-width: 980px) {
  .pd-mien-luoi { grid-template-columns: 1fr; }
  .pd-luoi-tt { grid-template-columns: 1fr; }
  .thang-luoi { grid-template-columns: repeat(2, 1fr); }
  .uu-luoi { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pd-khoi, .pd-thang { padding: 18px 15px; }
  .mien-dau { padding: 14px 15px 11px; }
  /* Điện thoại: tên năng lực một dòng riêng, bốn ô điểm dàn đủ chiều rộng —
     đủ to để bấm bằng ngón tay, không phải ngắm.
     Ở đây ô rộng ~85px nên nhãn chữ vừa đúng một dòng: hiện lại nhãn, vì trên
     điện thoại không trỏ chuột được để xem chú giải. */
  .nl-dong { grid-template-columns: 1fr; gap: 8px; padding: 12px 15px; }
  .nl-diem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .the-diem { width: auto; padding: 8px 0 7px; }
  .the-diem b { font-size: 17px; }
  .the-diem span {
    position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; font-size: 9.4px; text-transform: uppercase;
    letter-spacing: .02em; color: var(--faint); line-height: 1.1; margin-top: 1px;
  }
  .o-diem:checked + .td-1 span, .o-diem:checked + .td-2 span,
  .o-diem:checked + .td-3 span { color: #fff; }
  .o-diem:checked + .td-0 span { color: #4c5563; }
  .xong-so { grid-template-columns: 1fr; gap: 9px; }
  .pd-xong { padding: 30px 18px; }
}