/* Trang phiếu đề xuất (nhansu.jarvis.vn): làm cho điện thoại trước, theo bản vẽ Bố duyệt 31/10 */
:root {
  --nen: #F2F4F7; --the: #FFFFFF; --chu: #14181F; --phu: #3D4A56; --nhat: #4A5563; --vien: #C9D2DD;
  --vien-dam: #9AA4B1; --xanh: #0A4FB8; --xanh-dam: #083C8A; --xanh-nhat: #F7FAFF; --xanh-nen: #DCE7FA;
  --do: #B42318; --do-nen: #FDECEA; --cam: #9A5B00; --cam-nen: #FFF4E0; --luc: #1E7A3A; --luc-nen: #E8F5EC;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--xanh); }
a:hover { color: var(--xanh-dam); }
.dau { background: var(--xanh); color: #FFFFFF; padding: 14px 16px; }
.dau-to { font-weight: 700; font-size: 17px; }
.dau-nho { font-size: 13px; color: var(--xanh-nen); }
main { max-width: 640px; margin: 0 auto; padding: 14px 12px 40px; display: flex; flex-direction: column; gap: 12px; }
h2 { font-size: 16px; margin: 6px 2px 0; }
.the { background: var(--the); border-radius: 12px; padding: 12px 14px; }
.the p { margin: 0 0 8px; }
.nho { font-size: 13px; color: var(--phu); }
.dam { font-weight: 600; }
.bao { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.bao.tot { background: var(--luc-nen); color: var(--luc); }
.bao.xau { background: var(--do-nen); color: var(--do); }
.thong-tin { display: grid; grid-template-columns: 112px minmax(0, 1fr); row-gap: 4px; font-size: 14px; }
.nhan-tt { color: var(--nhat); }
.tien-do { display: flex; flex-direction: column; gap: 8px; }
.hang-tien-do { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
progress { width: 100%; height: 8px; border: 0; border-radius: 4px; background: #DCE4EE; overflow: hidden; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: #DCE4EE; border-radius: 4px; }
progress::-webkit-progress-value { background: var(--xanh); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--xanh); border-radius: 4px; }

/* Một đầu mục */
.dong { background: var(--the); border-radius: 12px; padding: 0; }
.dong > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dong > summary::-webkit-details-marker { display: none; }
.dong[open] > summary { padding-bottom: 4px; }
.ten-dong { font-weight: 700; }
.tom-tat { font-size: 13px; text-align: right; flex-shrink: 0; max-width: 55%; }
.tom-tat.xong { color: var(--luc); }
.tom-tat.thieu { color: var(--cam); }
.tom-tat.doi { color: var(--do); font-weight: 600; }
.dong.da-doi { outline: 2px solid var(--do); }
.than-dong { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.mo-ta { font-size: 13px; color: var(--phu); white-space: pre-wrap; }

/* Ba nút Đạt / Chưa đạt / Chưa đủ dẫn chứng: đủ chữ, to, dễ bấm */
.ba-nut { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.ba-nut button { min-height: 56px; border-radius: 10px; border: 2px solid var(--vien-dam); background: #FFFFFF; color: var(--chu); font: inherit; font-weight: 600; font-size: 15px; line-height: 1.25; padding: 4px; cursor: pointer; }
.ba-nut button[value="K"] { font-size: 14px; }
.ba-nut button[aria-pressed="true"] { border-color: var(--xanh); background: var(--xanh); color: #FFFFFF; font-weight: 700; }
.ba-nut button:disabled { opacity: .6; }

/* Dẫn chứng */
.dc { border: 1px solid var(--vien); border-radius: 10px; padding: 10px; display: flex; gap: 10px; }
.anh-dc { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.mot-anh { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mot-anh img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #DCE4EE; display: block; }
.khong-anh { width: 72px; height: 72px; border-radius: 8px; background: #EEF1F5; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--nhat); text-align: center; }
.noi-dung-dc { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.tieu-de-dc { font-weight: 600; }
.mo-ta-dc { color: var(--phu); white-space: pre-wrap; overflow-wrap: anywhere; }
.hanh-dong { display: flex; gap: 16px; font-size: 13px; align-items: center; }
.hanh-dong form, .mot-anh form { margin: 0; }
.lien-ket { background: none; border: 0; padding: 0; color: var(--xanh); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Form */
form { margin: 0; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--phu); }
input[type="date"], input[type="text"], select, textarea { font: inherit; font-size: 16px; color: var(--chu); background: #FFFFFF; border: 1px solid var(--vien-dam); border-radius: 8px; padding: 9px 10px; width: 100%; }
input[type="date"], input[type="text"], select { min-height: 44px; }
textarea { resize: vertical; }
.them-dc > summary { list-style: none; }
.them-dc[open] > summary { display: none; }
.them-dc > summary::-webkit-details-marker { display: none; }
.form-dc { border: 2px solid var(--xanh); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--xanh-nhat); margin-top: 8px; }
.tieu-de-form { font-weight: 700; font-size: 14px; }
fieldset.ca { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
fieldset.ca legend { font-size: 13px; color: var(--phu); padding: 0 0 4px; }
fieldset.ca input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.ca label { display: block; text-align: center; min-height: 44px; line-height: 40px; border: 2px solid var(--vien-dam); border-radius: 10px; background: #FFFFFF; color: var(--chu); font-size: 15px; font-weight: 600; cursor: pointer; }
fieldset.ca input:checked + label { border-color: var(--xanh); background: var(--xanh); color: #FFFFFF; }
fieldset.ca input:focus-visible + label { outline: 3px solid var(--xanh-nen); }
.nut-anh { flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px dashed var(--vien-dam); border-radius: 10px; background: #FFFFFF; color: var(--chu); font-size: 14px; cursor: pointer; position: relative; }
.nut-anh input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nut { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.nut.chinh { background: var(--xanh); color: #FFFFFF; border: 2px solid var(--xanh); }
.nut.chinh:disabled { background: #AFC3E3; border-color: #AFC3E3; cursor: not-allowed; }
.nut.phu { background: #FFFFFF; color: var(--chu); border: 1px solid var(--vien-dam); }
.nut.to { width: 100%; min-height: 54px; font-size: 17px; }
.hai-nut { display: flex; gap: 8px; justify-content: flex-end; }
.hai-nut .chinh { flex: 1; }
.luu { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.co-js .nut-luu { display: none; }
.da-luu { font-size: 12px; color: var(--nhat); }
.van-hoa { display: flex; flex-direction: column; gap: 12px; }
.van-hoa label > span { color: var(--chu); font-size: 14px; }

/* Nút gửi cuối trang */
.gui { background: var(--the); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--xanh-nen); }
.con-lai { font-size: 14px; color: var(--cam); }
.con-lai.xong { color: var(--luc); }