/* Bổ sung giao diện vận hành: giữ file gốc ổn định, các chỉnh sửa responsive đặt riêng để dễ bảo trì. */
:root{--tap:44px}

.audio-thi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border:1px solid var(--vien);border-radius:var(--r);background:#fbfbfd}
.audio-thi .phu-de{flex:1;min-width:180px}

/* Bảng dài không ép các nút rơi từng chữ. */
.hanh-dong-bang{min-width:max-content}
.bang td:last-child,.bang th:last-child{white-space:nowrap}
.bang td b{overflow-wrap:anywhere}

/* Trình tạo câu hỏi */
.noi-hop .cai-dat{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.noi-hop .cai-dat textarea{min-height:96px;resize:vertical}
.noi-hop input[type="file"]{height:auto;padding:9px}
#matchingFields,#choiceFields{min-width:0}

/* Trình tạo đề: không cho toolbar phá layout khi tên dài. */
.xay-dung .tieu-de-trang{align-items:flex-start}
.xay-dung .tieu-de-trang>div:first-child{min-width:0}
.xay-dung .tieu-de-trang h1{overflow-wrap:anywhere}
.cau-item .nhom-nut{flex:0 0 auto}

/* Form chấm bài */
.manual-score{font-variant-numeric:tabular-nums}
.phieu-cham h3{margin-top:22px}
.bai-lam{white-space:pre-wrap;overflow-wrap:anywhere}

/* Cài đặt hệ thống */
.cai-dat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cai-dat-card{padding:0;overflow:hidden}
.cai-dat-card-rong,.cai-dat-wide{grid-column:1/-1}
.cai-dat-card-head{padding:18px 20px 14px;border-bottom:1px solid var(--vien)}
.cai-dat-card-head h2{margin:0 0 5px;font-size:17px}
.cai-dat-card-head p{margin:0;color:var(--mo);font-size:13px;line-height:1.5}
.cai-dat-fields{display:grid;gap:16px;padding:18px 20px 20px}
.cai-dat-field{display:grid;gap:7px;min-width:0}
.cai-dat-field>span{font-weight:700;font-size:13px}
.cai-dat-field small,.cai-dat-toggle small{display:block;color:var(--mo);font-weight:400;line-height:1.45;margin-top:3px}
.cai-dat-field textarea.truong{height:auto;min-height:92px;resize:vertical;font-family:inherit;line-height:1.55}
.cai-dat-toggle{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--vien);border-radius:var(--r);cursor:pointer;background:#fff}
.cai-dat-toggle input{margin-top:3px;flex:0 0 auto}
.cai-dat-toggle span{min-width:0;font-size:13px}
.cai-dat-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:14px 16px;border:1px solid var(--vien);border-radius:var(--r);background:#fff;position:sticky;bottom:12px;z-index:12;box-shadow:0 8px 30px rgba(35,31,52,.08)}
.cai-dat-footer .loi{font-weight:700;color:#a33f3f}
.canh-bao-bao-tri{padding:10px 18px;text-align:center;border-bottom:1px solid var(--vien);font-size:13px;font-weight:700;background:#fff8e8}

.tich-hop-tong-quan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tich-hop-tong-quan>div{display:flex;flex-direction:column;gap:7px;padding:13px 14px;border:1px solid var(--vien);border-radius:var(--r);background:#fff;min-width:0}
.tich-hop-tong-quan b{font-size:12px;color:var(--mo)}
.tich-hop-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;gap:5px;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tich-hop-status.ok{background:#eaf6ef;color:#26734f}
.tich-hop-status.off{background:#f1f1f4;color:#6a6875}
.ma-he-thong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tich-hop-info{display:grid;gap:8px;padding:12px;border:1px dashed var(--vien);border-radius:var(--r);background:#fbfbfd}
.tich-hop-info small{color:var(--mo);line-height:1.5}
.email-test{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.email-test .nut{min-height:40px}
.secret-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.secret-row .nut{min-height:40px;white-space:nowrap}
.secret-status{padding:11px 12px;border:1px solid #dfe7df;border-radius:var(--r);background:#f7fbf8;font-size:12px;line-height:1.5}
.infra-list{display:grid;gap:0;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden}
.infra-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:11px 12px;border-bottom:1px solid var(--vien);font-size:12px}
.infra-list>div:last-child{border-bottom:0}
.infra-list span{color:var(--mo)}
.infra-list b{text-align:right;overflow-wrap:anywhere}
.dong-tich-hop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--vien)}
.dong-tich-hop:last-of-type{border-bottom:0}
.dong-tich-hop>div{display:grid;gap:3px;min-width:0}
.dong-tich-hop small{color:var(--mo)}
.ghi-chu-bao-mat{margin-top:8px;padding:13px 14px;border:1px solid #eadfb8;border-radius:var(--r);background:#fffaf0;font-size:12px;line-height:1.55}

/* Trạng thái focus rõ ràng, phù hợp thao tác phòng thi bằng bàn phím. */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(51,43,84,.18);outline-offset:2px;border-color:var(--tim)}
.nut,.icon-btn,.muc-ben,.dang-nhap-google{touch-action:manipulation}

/* Màn hình thi: chiều rộng đọc dễ, nút điều hướng không chạy vị trí. */
.to-thi{max-width:1120px;margin-inline:auto}
.dieu-huong-thi{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--vien);padding:12px 0 calc(12px + env(safe-area-inset-bottom));z-index:15}
.dieu-huong-thi .nut{min-width:112px}
.answer-text{font-size:15px}

/* Mobile */
@media(max-width:900px){
  .tich-hop-tong-quan{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .thanh-dau{height:auto;min-height:60px;padding:9px 12px;gap:8px}
  .thanh-dau>.nhom-nut{flex-wrap:nowrap;gap:6px}
  .thanh-dau .nhan{display:none}
  .khung{padding:18px 12px 32px}
  .tieu-de-trang{display:flex;align-items:flex-start;flex-direction:column}
  .tieu-de-trang>.nhom-nut,.tieu-de-trang>button{width:100%}
  .tieu-de-trang>.nhom-nut .nut{flex:1 1 auto}
  .danh-sach-de{grid-template-columns:1fr}
  .the-de{min-height:0}
  .the-de .hanh-dong .nut{flex:1 1 140px}
  .hang-thong-ke{grid-template-columns:1fr 1fr}
  .bo-loc{display:grid;grid-template-columns:1fr}
  .truong,.truong.tim{min-width:0;width:100%}
  .table-wrap{margin-inline:-12px;border-left:0;border-right:0;border-radius:0}
  .bang{min-width:720px}
  .xay-dung{grid-template-columns:1fr}
  .xay-dung .cot-xay:last-child{grid-column:auto}
  .cot-xay{padding:13px}
  .cau-item{align-items:flex-start;flex-direction:column}
  .cau-item .nhom-nut{width:100%}
  .cau-item .nhom-nut .nut{flex:1 1 auto}
  .luoi-chon{grid-template-columns:1fr}
  .noi-hop{width:100%;padding:16px;border-radius:10px;max-height:94dvh}
  .hop-chon{padding:8px}
  .chan-hop{align-items:stretch;flex-direction:column}
  .chan-hop .nhom-nut{width:100%}
  .chan-hop .nhom-nut .nut,.chan-hop>.nut{flex:1 1 auto}
  .cham-bai{grid-template-columns:1fr}
  .ds-cham,.phieu-cham{min-height:0}
  .noi-dung-thi{padding:16px 12px 84px}
  .thanh-thi{padding:0 12px}
  .thong-tin-thi{gap:10px}
  .to-thi{padding:14px;min-height:0}
  .dieu-huong-thi{margin:14px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .dieu-huong-thi .nut{min-width:0;flex:1 1 0}
  .dieu-huong-thi .tien-do{flex:0 0 auto;max-width:80px;text-align:center}
  .dap-an{width:100%;max-width:none}
  .audio-thi{align-items:stretch;flex-direction:column}
  .audio-thi .nut{width:100%}
  .audio-thi .phu-de{min-width:0}
  .cai-dat-grid{grid-template-columns:1fr}
  .cai-dat-card-rong,.cai-dat-wide{grid-column:auto}
  .cai-dat-footer{align-items:stretch;flex-direction:column;bottom:8px}
  .cai-dat-footer .nhom-nut{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cai-dat-footer .nut{width:100%}
  .email-test,.secret-row{grid-template-columns:1fr}
  .email-test .nut,.secret-row .nut{width:100%}
  .dong-tich-hop{align-items:flex-start}
  .infra-list>div{grid-template-columns:1fr;gap:3px}
  .infra-list b{text-align:left}
}

@media(max-width:420px){
  .ten-he-thong small{display:none}
  .logo{padding:6px}
  .hang-thong-ke{grid-template-columns:1fr}
  .tong-quan-hv{grid-template-columns:1fr}
  .tong-quan-hv .o:first-child{grid-column:auto}
  .nhom-nut>.nut{flex:1 1 auto}
  .dieu-huong-thi .tien-do{font-size:10px}
  .tich-hop-tong-quan{grid-template-columns:1fr}
  .cai-dat-footer .nhom-nut{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}