/* ══════════════════════════════════════════════════════════════════════
   BỘ KHUNG BIỂU MẪU DÙNG CHUNG (tiền tố fc-) — Đợt 1, 2026-09
   ──────────────────────────────────────────────────────────────────────
   Trước đây mỗi biểu mẫu (Tài khoản, Lớp học, Giáo trình, Học liệu, Hoạt
   động, Quiz) tự viết CSS riêng với màu cứng — sáu trang, sáu kiểu ô nhập.
   Tệp này là MỘT bộ duy nhất, màu lấy hết từ bảng màu chung --mau-*
   (ui/components/_bang_mau.html), không có mã màu hex nào.

   Bố cục trang:
     .fc-trang     khung trang (bề rộng đọc thoải mái)
     .fc-duong-dan đường dẫn (giống .ds-duong-dan của trang danh sách)
     .fc-dau       đầu trang: biểu tượng + tiêu đề + dòng phụ
     .fc-khoi      một nhóm ô có tiêu đề + mô tả (thẻ trắng)
     .fc-luoi      lưới ô 1 → 2 → 3 cột theo bề rộng; .fc-rong = trọn dòng
     .fc-chan      thanh nút dính đáy: MỘT nút chính + nút phụ/Huỷ
   Ô nhập:
     .fc-truong    một ô: .fc-nhan, ô nhập (.fc-o), .fc-goi-y, .fc-loi
     .fc-co-loi    trạng thái lỗi (kèm aria-invalid="true" trên ô)
     .fc-chon      một hộp chọn/nút gạt + nhãn; .fc-cac-chon nhóm radio/hộp chọn
     .fc-kem       ô nhập có phần gắn kèm trước/sau (đơn vị, tiền tố URL…)
     .fc-dem       bộ đếm ký tự (static/js/form_chung.js cập nhật)
   Thông báo:
     .fc-ghi-chu   .tot / .nhac / .loi / .tin — lỗi chung, nhắc, thành công
   Mẫu tham khảo: /bang-dieu-khien/thanh-phan/form-chi-tiet/
   Hướng dẫn:     docs/giao_dien/mau_form_chi_tiet.md
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --fc-o-cao:38px;          /* chiều cao ô nhập (điện thoại: 44px) */
  --fc-vien-dam:color-mix(in srgb,var(--mau-vien) 55%,var(--mau-chu-mo));   /* viền ô nhập: đậm hơn viền thẻ */
  --fc-vong:color-mix(in srgb,var(--mau-chinh-vua) 22%,transparent);        /* vòng sáng khi đang nhập */
}
.fc-trang{
  flex:1 1 auto;min-width:0;width:100%;max-width:960px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;color:var(--mau-chu)}
.fc-trang.fc-hep{max-width:720px}
.fc-trang.fc-rong-het{max-width:none}
.fc-trang [hidden]{display:none !important}

/* Khung cũ của _form_base.html: canh giữa theo cả hai chiều, KHÔNG giới hạn
   bề rộng (các biểu mẫu chưa chuyển tự đặt bề rộng thẻ của mình).
   Giữ ĐÚNG hành vi khung cũ (một div flex, không co giãn theo vùng nội dung)
   để 6 biểu mẫu cũ hiển thị y như trước cho tới khi được chuyển (Đợt 3).
   `safe center`: form cao hơn màn hình không bị đẩy tràn lên trên. */
.fc-trang.fc-trang-giua{flex:0 1 auto;width:auto;min-width:auto;max-width:none;min-height:100vh;
  display:flex;align-items:center;align-items:safe center;justify-content:center;padding:16px;gap:0;color:inherit}

/* ── Đường dẫn + đầu trang ────────────────────────────────────────────── */
.fc-duong-dan{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
  color:var(--mau-chu-mo);margin:0}
.fc-duong-dan a{color:var(--mau-chu-mo);text-decoration:none}
.fc-duong-dan a:hover{color:var(--mau-chinh)}
.fc-duong-dan .fc-hien{color:var(--mau-chu);font-weight:600}
.fc-duong-dan .fc-mui-ten{font-size:9px;opacity:.55}

.fc-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fc-dau-chu{flex:1 1 260px;display:flex;align-items:center;gap:12px;min-width:0}
.fc-dau-bieu-tuong{flex:none;width:44px;height:44px;border-radius:var(--bo-goc);display:grid;
  place-items:center;color:var(--mau-mat);font-size:18px;
  background:linear-gradient(135deg,var(--mau-thuong-hieu),var(--mau-chinh))}
.fc-dau h1{font-size:20px;font-weight:700;color:var(--mau-chu);margin:0;line-height:1.25;text-wrap:balance}
.fc-dau-phu{font-size:12.5px;color:var(--mau-chu-mo);margin:2px 0 0}
.fc-dau-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Chip trạng thái của đối tượng đang sửa (Đang bật / Đã tắt…) — cùng dạng .ct-chip */
.fc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.5;
  padding:2px 10px;border-radius:99px;white-space:nowrap;background:var(--mau-nen);color:var(--mau-chu-mo);
  border:1px solid var(--mau-vien)}
.fc-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fc-chip.dat{background:var(--mau-dat-nen);color:color-mix(in srgb,var(--mau-dat) 80%,var(--mau-chu));
  border-color:color-mix(in srgb,var(--mau-dat) 30%,transparent)}
.fc-chip.nhac{background:var(--mau-nhac-nen);color:color-mix(in srgb,var(--mau-nhac) 70%,var(--mau-chu));
  border-color:color-mix(in srgb,var(--mau-nhac) 35%,transparent)}

/* ── Khối (nhóm ô) ────────────────────────────────────────────────────── */
.fc-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;margin:0}
.fc-khoi{background:var(--mau-mat);border:1px solid var(--mau-vien);border-radius:14px;
  padding:16px 18px;min-width:0;margin:0}
fieldset.fc-khoi{min-inline-size:0}
.fc-khoi-dau{margin-bottom:14px}
.fc-khoi-dau h2,.fc-khoi>legend{font-size:15px;font-weight:700;color:var(--mau-chu);margin:0;
  display:flex;align-items:center;gap:8px;float:none;width:auto;padding:0;line-height:1.35}
.fc-khoi-dau h2 i{color:var(--mau-chu-mo);font-size:14px}
.fc-khoi-dau p{margin:3px 0 0;font-size:12.5px;color:var(--mau-chu-mo);max-width:75ch}
.fc-khoi-bang{overflow-x:auto;margin:0 -2px}   /* bảng nhập (vd. thành phần đánh giá) */

/* ── Lưới ô: 1 cột (điện thoại) → 2 → 3 ───────────────────────────────── */
.fc-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:14px 16px;align-items:start}
/* Tối đa 2 cột (cột tối thiểu = nửa bề rộng hoặc 300px) — cũng dùng để xếp 2 khối cạnh nhau */
.fc-luoi.fc-luoi-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(300px,calc((100% - 16px) / 2))),1fr))}
@media (min-width:1100px){ .fc-luoi.fc-luoi-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fc-luoi>.fc-rong,.fc-luoi>.fc-ghi-chu{grid-column:1/-1}

/* ── Một ô ────────────────────────────────────────────────────────────── */
.fc-truong{display:grid;gap:5px;min-width:0;align-content:start}
.fc-nhan{font-size:13px;font-weight:600;color:var(--mau-chu);margin:0;line-height:1.35}
.fc-bat-buoc{color:var(--mau-loi);margin-left:3px;text-decoration:none;cursor:help;border:0}
.fc-tuy-chon{font-weight:400;color:var(--mau-chu-mo);font-size:12px;margin-left:4px}
.fc-goi-y{font-size:12px;color:var(--mau-chu-mo);margin:0;line-height:1.45}
.fc-loi{font-size:12.5px;font-weight:600;color:var(--mau-loi);margin:0;line-height:1.4;
  display:flex;gap:6px;align-items:flex-start}
.fc-loi::before{content:"!";flex:none;display:inline-grid;place-items:center;width:15px;height:15px;
  margin-top:1px;border-radius:50%;background:var(--mau-loi);color:var(--mau-mat);font-size:10px;font-weight:800}
.fc-loi+.fc-loi{margin-top:-2px}

/* Ô nhập, ô chọn, vùng văn bản */
.fc-o{display:block;width:100%;min-width:0;min-height:var(--fc-o-cao);font:inherit;font-size:14px;
  line-height:1.4;padding:8px 11px;color:var(--mau-chu);background:var(--mau-mat);
  border:1px solid var(--fc-vien-dam);border-radius:9px;margin:0;
  transition:border-color .15s,box-shadow .15s}
.fc-o::placeholder{color:var(--mau-chu-mo);opacity:.75}
.fc-o:hover{border-color:var(--mau-chu-mo)}
.fc-o:focus{outline:none;border-color:var(--mau-chinh-vua);box-shadow:0 0 0 3px var(--fc-vong)}
.fc-o:focus-visible{outline:2px solid var(--mau-chinh);outline-offset:1px}
textarea.fc-o{min-height:96px;resize:vertical}
select.fc-o{padding-right:30px}
select.fc-o[multiple]{padding:4px;min-height:140px}
select.fc-o[multiple] option{padding:5px 8px;border-radius:6px}
.fc-o[type=number]{font-variant-numeric:tabular-nums}
.fc-o[type=color]{padding:3px;width:56px}
.fc-o[type=file]{padding:5px;font-size:13px;cursor:pointer}
.fc-o[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;margin-right:10px;
  padding:6px 12px;border-radius:7px;border:1px solid var(--mau-vien);background:var(--mau-nen);
  color:var(--mau-chu);cursor:pointer}
.fc-o[type=file]:hover::file-selector-button{border-color:var(--mau-chinh);color:var(--mau-chinh)}
.fc-o:disabled{background:var(--mau-nen);color:var(--mau-chu-mo);cursor:not-allowed;opacity:1}
.fc-o[readonly]{background:var(--mau-nen);border-style:dashed}
.fc-o[readonly]:focus{box-shadow:none;border-color:var(--fc-vien-dam)}

/* Trạng thái lỗi — màu + viền dày + chữ, không chỉ dựa vào màu */
.fc-o[aria-invalid="true"],.fc-co-loi .fc-o{border-color:var(--mau-loi);border-width:1.5px;
  background:color-mix(in srgb,var(--mau-loi-nen) 55%,var(--mau-mat))}
.fc-o[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--mau-loi) 20%,transparent)}
.fc-co-loi>.fc-nhan{color:color-mix(in srgb,var(--mau-loi) 85%,var(--mau-chu))}

/* Ô ghép phần gắn kèm: [https://][ô nhập][ .edu.vn ] */
.fc-kem{display:flex;align-items:stretch;min-width:0}
.fc-kem>.fc-o{flex:1;border-radius:0}
.fc-kem>.fc-o:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px}
.fc-kem>.fc-o:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px}
.fc-kem-chu{flex:none;display:flex;align-items:center;padding:0 11px;font-size:13px;
  color:var(--mau-chu-mo);background:var(--mau-nen);border:1px solid var(--fc-vien-dam);white-space:nowrap}
.fc-kem-chu:first-child{border-right:0;border-radius:9px 0 0 9px}
.fc-kem-chu:last-child{border-left:0;border-radius:0 9px 9px 0}
.fc-kem>.fc-nut{border-radius:0 9px 9px 0;margin-left:-1px}

/* Bộ đếm ký tự (JS gắn khi ô có data-fc-dem + maxlength) */
.fc-dem{justify-self:end;font-size:11.5px;color:var(--mau-chu-mo);font-variant-numeric:tabular-nums;
  margin-top:-2px}
.fc-dem.gan-het{color:var(--mau-nhac);font-weight:600}
.fc-dem.qua{color:var(--mau-loi);font-weight:700}

/* ── Hộp chọn, nút radio, nút gạt ─────────────────────────────────────── */
.fc-chon{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;margin:0;
  font-size:13.5px;color:var(--mau-chu);cursor:pointer;min-height:24px}
.fc-chon>span{padding-top:1px;line-height:1.45}
.fc-chon>span>b{font-weight:600}
.fc-chon .fc-goi-y{display:block;margin-top:2px}
.fc-chon input[type=checkbox],.fc-chon input[type=radio],
.fc-cac-chon input[type=checkbox],.fc-cac-chon input[type=radio]{
  width:18px;height:18px;margin:2px 0 0;accent-color:var(--mau-thuong-hieu);cursor:pointer;flex:none}
.fc-chon input:focus-visible,.fc-cac-chon input:focus-visible{outline:2px solid var(--mau-chinh);outline-offset:2px}
.fc-chon input:disabled+span,.fc-cac-chon input:disabled+span{opacity:.55;cursor:not-allowed}

/* Nhóm lựa chọn (RadioSelect / CheckboxSelectMultiple của Django: div>div>label>input) */
fieldset.fc-truong{border:0;padding:0;margin:0;min-inline-size:0}
fieldset.fc-truong>legend{float:none;width:auto;padding:0;margin:0 0 6px}
.fc-cac-chon,.fc-cac-chon>div{display:flex;flex-wrap:wrap;gap:8px 18px}
.fc-cac-chon>div>div,.fc-cac-chon>label{display:block}
.fc-cac-chon.fc-doc,.fc-cac-chon.fc-doc>div{flex-direction:column;gap:8px}
.fc-cac-chon label{display:inline-flex;gap:8px;align-items:flex-start;font-size:13.5px;
  color:var(--mau-chu);cursor:pointer;margin:0;font-weight:400}
.fc-co-loi .fc-cac-chon{padding:8px 10px;border-radius:9px;border:1.5px solid var(--mau-loi);
  background:color-mix(in srgb,var(--mau-loi-nen) 55%,var(--mau-mat))}

/* Nút gạt: <input type="checkbox" role="switch" class="fc-cong-tac"> */
.fc-chon input.fc-cong-tac,input.fc-cong-tac{appearance:none;-webkit-appearance:none;width:40px;height:22px;
  border-radius:11px;background:var(--fc-vien-dam);position:relative;cursor:pointer;margin:1px 0 0;
  transition:background .15s;flex:none}
input.fc-cong-tac::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--mau-mat);box-shadow:var(--do-noi);transition:left .15s}
input.fc-cong-tac:checked{background:var(--mau-dat)}
input.fc-cong-tac:checked::after{left:21px}
input.fc-cong-tac:disabled{opacity:.5;cursor:not-allowed}

/* ── Nút ──────────────────────────────────────────────────────────────── */
.fc-nut{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;
  font-size:13.5px;font-weight:600;line-height:1.3;min-height:38px;padding:8px 15px;border-radius:9px;
  border:1px solid var(--mau-vien);background:var(--mau-mat);color:var(--mau-chu);cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.fc-nut:hover{border-color:var(--mau-chinh);color:var(--mau-chinh)}
.fc-nut:focus-visible{outline:2px solid var(--mau-chinh);outline-offset:2px}
.fc-nut-chinh{background:var(--mau-thuong-hieu);border-color:var(--mau-thuong-hieu);color:var(--mau-mat)}
.fc-nut-chinh:hover{background:var(--mau-chinh);border-color:var(--mau-chinh);color:var(--mau-mat)}
.fc-nut-nhe{border-color:transparent;background:transparent;color:var(--mau-chu-mo)}
.fc-nut-nhe:hover{background:var(--mau-nen);border-color:transparent}
.fc-nut-xoa{color:var(--mau-loi);border-color:color-mix(in srgb,var(--mau-loi) 30%,transparent);
  background:var(--mau-loi-nen)}
.fc-nut-xoa:hover{background:var(--mau-loi);border-color:var(--mau-loi);color:var(--mau-mat)}
.fc-nut:disabled,.fc-nut[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
/* Đang gửi (form_chung.js đặt khi bấm lưu): quay biểu tượng, chặn bấm lần hai */
.fc-dang-gui .fc-nut[type=submit]{opacity:.7;cursor:progress}
.fc-dang-gui .fc-nut-chinh>i{animation:fc-quay 1s linear infinite}
.fc-dang-gui .fc-nut-chinh>i::before{content:"\f110"}   /* fa-spinner */
@keyframes fc-quay{to{transform:rotate(360deg)}}

/* ── Thanh nút cuối biểu mẫu (dính đáy khi cuộn) ──────────────────────── */
.fc-chan{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--mau-mat) 92%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--mau-vien);border-radius:14px;box-shadow:0 -6px 18px -12px var(--mau-chu-mo)}
.fc-chan-ghi-chu{flex:1 1 220px;font-size:12.5px;color:var(--mau-chu-mo);margin:0;min-width:0}
.fc-chan-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.fc-chan.fc-chan-tinh{position:static;box-shadow:none}
/* Thứ tự NHÌN: [Xoá] ……… [Huỷ] [Lưu]. Thứ tự DOM: Lưu trước (Enter trong ô = Lưu). */
.fc-chan-nut>.fc-nut-chinh{order:2}
.fc-chan-nut>.fc-nut-xoa{order:-1;margin-right:auto}
.fc-chan-nut:has(>.fc-nut-xoa){flex:1 1 auto}

/* ── Ghi chú / thông báo: .tot .nhac .loi .tin ────────────────────────── */
.fc-ghi-chu{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  padding:11px 14px;border-radius:12px;margin:0;color:var(--mau-chu);
  background:var(--mau-nen);border:1px solid var(--mau-vien)}
.fc-ghi-chu>i{flex:none;margin-top:3px}
.fc-ghi-chu>div{min-width:0}
.fc-ghi-chu b{font-weight:700}
.fc-ghi-chu ul{margin:4px 0 0;padding-left:18px}
.fc-ghi-chu li+li{margin-top:2px}
.fc-ghi-chu p{margin:4px 0 0}
.fc-ghi-chu p:first-child{margin-top:0}
.fc-ghi-chu:focus{outline:2px solid var(--mau-chinh);outline-offset:2px}
.fc-ghi-chu.tot{background:var(--mau-dat-nen);border-color:color-mix(in srgb,var(--mau-dat) 35%,transparent);
  color:color-mix(in srgb,var(--mau-dat) 70%,var(--mau-chu))}
.fc-ghi-chu.nhac{background:var(--mau-nhac-nen);border-color:color-mix(in srgb,var(--mau-nhac) 40%,transparent);
  color:color-mix(in srgb,var(--mau-nhac) 60%,var(--mau-chu))}
.fc-ghi-chu.loi{background:var(--mau-loi-nen);border-color:color-mix(in srgb,var(--mau-loi) 40%,transparent);
  color:color-mix(in srgb,var(--mau-loi) 75%,var(--mau-chu))}
.fc-ghi-chu.tin{background:var(--mau-tin-nen);border-color:color-mix(in srgb,var(--mau-tin) 35%,transparent);
  color:color-mix(in srgb,var(--mau-tin) 65%,var(--mau-chu))}
.fc-ghi-chu.tot>i{color:var(--mau-dat)} .fc-ghi-chu.nhac>i{color:var(--mau-nhac)}
.fc-ghi-chu.loi>i{color:var(--mau-loi)} .fc-ghi-chu.tin>i{color:var(--mau-tin)}

/* Bảng nhập liệu nằm trong khối (hàng thành phần, thang điểm…) */
.fc-bang{width:100%;border-collapse:collapse;font-size:13.5px}
.fc-bang th{font-size:12px;font-weight:600;color:var(--mau-chu-mo);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--mau-vien);white-space:nowrap}
.fc-bang td{padding:6px 8px;border-bottom:1px solid var(--mau-vien);vertical-align:middle}
.fc-bang tfoot td{border-bottom:0}
.fc-bang .so{text-align:right;font-variant-numeric:tabular-nums}
.fc-bang .fc-o{min-height:34px;padding:6px 9px;font-size:13.5px}
.fc-bang td.so .fc-o{text-align:right;max-width:110px;margin-left:auto}

/* ── Điện thoại: ô 44px, chữ 16px (iOS không tự phóng to), nút trải ngang ─ */
@media (max-width:767.98px){
  :root{--fc-o-cao:44px}
  .fc-trang{gap:12px}
  .fc-khoi{padding:14px}
  .fc-o{font-size:16px}
  .fc-nut{min-height:44px}
  .fc-chon,.fc-cac-chon label{min-height:44px;align-items:center}
  .fc-chon>span{padding-top:0}
  .fc-chan{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    border-radius:14px 14px 0 0;margin:0 -2px}
  .fc-chan-nut{width:100%;margin-left:0}
  .fc-chan-nut .fc-nut{flex:1 1 0}
  .fc-chan-nut>.fc-nut-xoa{margin-right:0}
  .fc-dau h1{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .fc-o,.fc-nut,input.fc-cong-tac,input.fc-cong-tac::after{transition:none}
  .fc-dang-gui .fc-nut-chinh>i{animation:none}
}
@media print{
  .fc-chan{position:static;box-shadow:none;backdrop-filter:none}
}