/* ===========================================================================
   Giao diện web ôn luyện mô phỏng - tông màu giống phần mềm máy tính
   =========================================================================== */
:root{
  --navy:#0b2545; --navy2:#13315c; --xanh:#1d4ed8; --xanh-nhat:#dbeafe;
  --nen:#eef2f7; --the:#ffffff; --vien:#d7dfea; --chu:#1f2937; --mo:#64748b;
  --luc:#15803d; --luc-nhat:#dcfce7; --do:#b91c1c; --do-nhat:#fee2e2;
  --cam:#b45309; --cam-nhat:#fef3c7; --tim:#4f46e5; --vang:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--nen); color:var(--chu); font-size:16px; line-height:1.45;
}
.an{display:none !important}

/* ------------------------------- Banner ------------------------------- */
.banner{
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:#fff; padding:14px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.banner-nho{color:#9fb3d1; font-size:.82rem; letter-spacing:.6px; margin-top:2px}
.banner h1,.banner-lon{margin:0; font-size:1.7rem; font-weight:800; letter-spacing:.3px}
.logo{height:56px; width:auto; flex:none}
.banner .nut-vien-sang{margin-left:auto}

/* --------------------------------- Thẻ --------------------------------- */
.giua{display:flex; justify-content:center; padding:24px 16px 48px}
.the{background:var(--the); border:1px solid var(--vien); border-radius:12px; padding:22px}
.giua .the{width:min(880px,100%)}
.the-tieu-de{margin:0 0 10px; font-size:1.05rem; color:var(--navy)}

.hang-ten{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.hang-ten label{font-size:1.05rem}
input,select{
  font:inherit; color:var(--chu); background:#fff; border:1px solid var(--vien);
  border-radius:8px; padding:9px 11px; min-height:42px;
}
input:focus,select:focus{outline:none; border-color:var(--xanh)}
input[readonly]{background:#f4f6f9; color:var(--mo)}
.hang-ten input{flex:1; min-width:220px}

/* ------------------------------ Chọn chế độ ---------------------------- */
.o-chon{
  display:flex; gap:12px; align-items:flex-start; background:#f8fafc;
  border:1px solid var(--vien); border-radius:10px; padding:14px 16px; margin-bottom:12px; cursor:pointer;
}
.o-chon:has(input:checked){border-color:var(--xanh); background:#f5f8ff}
.o-chon input{margin-top:4px; width:18px; height:18px; accent-color:var(--xanh)}
.o-chon-ten{font-weight:800; font-size:1.05rem}
.o-chon-mota{color:var(--mo); font-size:.93rem}
.o-chon select{margin-top:10px; width:min(460px,100%)}
.o-tich{display:flex; gap:10px; align-items:center; margin:6px 0 14px; cursor:pointer}
.o-tich input{width:18px; height:18px; accent-color:var(--xanh)}

/* --------------------------------- Nút --------------------------------- */
.nut{
  font:inherit; font-weight:600; background:#fff; color:var(--chu);
  border:1px solid var(--vien); border-radius:8px; padding:9px 16px; cursor:pointer; min-height:42px;
}
.nut:hover:not(:disabled){border-color:var(--xanh); color:var(--xanh)}
.nut:disabled{opacity:.55; cursor:not-allowed}
.nut.to{min-height:50px; padding:0 26px; font-size:1.05rem}
.nut-xanh{background:var(--luc); border-color:var(--luc); color:#fff}
.nut-xanh:hover:not(:disabled){background:#166534; color:#fff}
.nut-xanhduong{background:var(--xanh); border-color:var(--xanh); color:#fff}
.nut-xanhduong:hover:not(:disabled){background:#1e40af; color:#fff}
.nut-tim{background:var(--tim); border-color:var(--tim); color:#fff}
.nut-tim:hover:not(:disabled){background:#4338ca; color:#fff}
.nut-do{background:#e11d48; border-color:#e11d48; color:#fff; font-weight:800}
.nut-do:hover:not(:disabled){background:#be123c; color:#fff}
.nut-vien-sang{background:transparent; color:#cfe0f5; border-color:#3b5a86}
.nut-vien-sang:hover{color:#fff; border-color:#fff}
.hang-nut{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.giua-nut{justify-content:center}

/* ------------------------------ Thông báo ------------------------------ */
.bao-cao{display:none; border-radius:8px; padding:10px 12px; margin:12px 0; font-size:.97rem}
.bao-cao.hien{display:block}
.bao-cao.loi{background:var(--do-nhat); color:var(--do)}
.bao-cao.ok{background:var(--luc-nhat); color:var(--luc)}
.bao-cao.canhbao{background:var(--cam-nhat); color:var(--cam)}
.nhac-vang{background:var(--cam-nhat); color:#78350f; border-radius:8px; padding:10px 12px; margin-bottom:14px}

/* ----------------------------- Nhập SBD ------------------------------- */
.luoi-sbd{display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center}
.luoi-sbd label{font-size:1.05rem}
.hang-sbd{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch}
.hang-sbd input{width:170px}
.hang-sbd .nut{min-height:56px}
.khung-thisinh{
  display:flex; gap:22px; background:#f8fafc; border:1px solid var(--vien);
  border-radius:10px; padding:16px; margin-top:14px; flex-wrap:wrap;
}
.anh-thisinh{
  width:150px; height:200px; border-radius:8px; background:#cbd5e1 no-repeat center/cover;
  position:relative; flex:none;
}
.anh-thisinh::before{content:""; position:absolute; left:50%; top:20%; width:36%; padding-top:36%;
  transform:translateX(-50%); background:#94a3b8; border-radius:50%}
.anh-thisinh::after{content:""; position:absolute; left:14%; top:60%; width:72%; height:46%;
  background:#94a3b8; border-radius:50% 50% 0 0}
.tt-thisinh{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:0; align-content:start}
.tt-thisinh dt{color:var(--mo); font-size:1.02rem}
.tt-thisinh dd{margin:0; font-weight:700; font-size:1.02rem}
.tt-thisinh dd.ten{font-size:1.2rem; font-weight:800; color:var(--navy)}

/* ------------------------------ Làm bài -------------------------------- */
.thanh-thisinh{
  background:#1e293b; color:#fff; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nhan-onluyen{background:var(--vang); color:#1e293b; font-weight:800; border-radius:6px; padding:5px 9px; font-size:.82rem}
.avatar{width:52px; height:58px; border-radius:10px; background:#cbd5e1; position:relative; overflow:hidden; flex:none}
.avatar::before{content:""; position:absolute; left:50%; top:18%; width:40%; padding-top:40%;
  transform:translateX(-50%); background:#94a3b8; border-radius:50%}
.avatar::after{content:""; position:absolute; left:12%; top:60%; width:76%; height:50%; background:#94a3b8; border-radius:50% 50% 0 0}
.ts-chu{flex:1; min-width:180px}
.ts-ten{font-size:1.2rem; font-weight:800}
.ts-meta{color:#cbd5e1; font-size:.9rem}
.ts-meta b{color:#fff}
.dong-ho{text-align:right; margin-left:auto}
.dh-nhan{color:#94a3b8; font-size:.72rem; font-weight:700}
.dh-so{font-size:1.9rem; font-weight:800; color:#f87171;
  font-family:Consolas,"Courier New",monospace; line-height:1.1}
.dh-so.sap-het{animation:nhapnhay 1s steps(2,start) infinite}
.dh-so.dem-xuoi{color:#93c5fd}
@keyframes nhapnhay{to{opacity:.35}}

.lam-bai{display:grid; grid-template-columns:62fr 38fr; gap:16px; padding:16px; align-items:start}
/* Ô lưới không được rộng hơn màn hình (quan trọng với điện thoại) */
.lam-bai>*,.ket-qua>*{min-width:0}
.ts-meta{overflow-wrap:anywhere}
.cot-video{padding:0; overflow:hidden}
.video-tieu-de{background:#f8fafc; border-bottom:1px solid var(--vien); padding:10px 16px; font-weight:700}
.khung-video{position:relative; background:#000; aspect-ratio:16/9}
.khung-video video{width:100%; height:100%; object-fit:contain; background:#000; display:block}
.video-thongbao{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:#e2e8f0; background:#000; padding:20px; white-space:pre-line;
}
.video-thanh{background:#0f172a; color:#e2e8f0; display:flex; align-items:center; gap:12px; padding:8px 14px}
.nut-nho{font:inherit; font-size:.9rem; background:#334155; color:#fff; border:none; border-radius:7px; padding:6px 12px; cursor:pointer}
.nut-nho:hover:not(:disabled){background:#475569}
.nut-nho:disabled{opacity:.5; cursor:not-allowed}
.nut-nho.nut-tim{background:var(--tim)}
.video-gio{font-size:.9rem; white-space:nowrap}
.tien-trinh{flex:1; height:6px; background:#334155; border-radius:3px; overflow:hidden}
.tien-trinh div{height:100%; width:0; background:#60a5fa; border-radius:3px}

.cot-cauhoi{max-height:calc(100vh - 260px); overflow:auto}
.phan{margin-bottom:16px}
.phan-dau{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.phan-ten{font-weight:700; color:var(--navy)}
.phan-diem{background:#e2e8f0; color:#475569; border-radius:9px; padding:2px 9px; font-size:.78rem; font-weight:700}
.dap-an{
  display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--vien);
  border-radius:8px; padding:10px 12px; margin-bottom:7px; cursor:pointer;
}
.dap-an:hover{border-color:#818cf8; background:#f8faff}
.dap-an .cham-tron{width:18px; height:18px; border:2px solid #cbd5e1; border-radius:50%; flex:none; margin-top:2px; background:#fff}
.dap-an.chon{background:#eef2ff; border:2px solid var(--tim); font-weight:700; color:#312e81}
.dap-an.chon .cham-tron{background:var(--tim); border:4px solid #c7d2fe}
.dap-an.dung{background:var(--luc-nhat); border:2px solid #16a34a; color:#14532d; font-weight:700}
.dap-an.dung .cham-tron{background:#16a34a; border:4px solid #bbf7d0}
.dap-an.sai{background:var(--do-nhat); border:2px solid #dc2626; color:#7f1d1d; font-weight:700}
.dap-an.sai .cham-tron{background:#dc2626; border:4px solid #fecaca}
.dap-an.dapan-dung{background:#f0fdf4; border:2px dashed #16a34a; color:#166534; font-weight:700}
.dap-an.mo{color:#94a3b8; background:#f8fafc}
.dap-an.khoa{cursor:default}

/* --------------------------- Thanh điều hướng -------------------------- */
.thanh-dieuhuong{margin:0 16px 16px; padding:12px 16px}
.hang-dieuhuong{display:flex; align-items:center; gap:12px}
/* [ĐÃ SỬA] Dải số câu luôn là MỘT hàng ngang; nhiều câu thì vuốt / cuộn ngang */
.o-so{display:flex; gap:6px; flex-wrap:nowrap; flex:1; min-width:0;
  overflow-x:auto; overflow-y:hidden; padding:4px 2px; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.o-so > :first-child{margin-left:auto}      /* đủ chỗ thì nằm giữa, thiếu chỗ thì cuộn */
.o-so > :last-child{margin-right:auto}
.o-so::-webkit-scrollbar{height:6px}
.o-so::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:3px}
.o-so button{
  flex:none;
  width:42px; height:38px; border-radius:7px; border:1px solid #cbd5e1; background:#f1f5f9;
  color:#475569; font:inherit; font-weight:700; cursor:pointer;
}
.o-so button.current{background:var(--tim); border-color:var(--tim); color:#fff}
.o-so button.partial{background:var(--vang); border-color:var(--vang); color:#fff}
.o-so button.done{background:#059669; border-color:#059669; color:#fff}
.chu-thich{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; color:var(--mo);
  font-size:.86rem; border-top:1px solid var(--vien); margin-top:10px; padding-top:10px}
.chu-thich span{display:flex; align-items:center; gap:6px}
.cham{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid #cbd5e1; background:#f1f5f9}
.cham.current{background:var(--tim); border-color:var(--tim)}
.cham.partial{background:var(--vang); border-color:var(--vang)}
.cham.done{background:#059669; border-color:#059669}

/* ------------------------------ Kết quả -------------------------------- */
.ket-qua{display:grid; grid-template-columns:400px 1fr; gap:16px; padding:16px; align-items:start}
.the-diem{text-align:center}
.the-diem h2{margin:0 0 4px; color:var(--navy); font-size:1.25rem}
.kq-ten{color:var(--mo); margin-bottom:6px}
.kq-diem{font-size:3.2rem; font-weight:800; line-height:1.1}
.kq-ketluan{display:inline-block; border-radius:16px; padding:6px 24px; font-weight:800; font-size:1.05rem; margin:8px 0}
.kq-chitiet{color:var(--mo); margin-bottom:16px}
.the-diem .nut{width:100%; margin-top:8px}
.dat{color:var(--luc)} .khongdat{color:var(--do)}
.nen-dat{background:var(--luc-nhat); color:var(--luc)}
.nen-khongdat{background:var(--do-nhat); color:var(--do)}
.bai-lam{max-height:calc(100vh - 140px); overflow:auto}
.bl-cau{background:#eef2f7; border-radius:8px; padding:8px 12px; margin:14px 0 8px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-weight:700; color:var(--navy)}
.bl-cau .diem{color:var(--chu)}
.bl-phan{border:1px solid var(--vien); border-radius:8px; padding:10px 12px; margin-bottom:8px}
.bl-ten{font-weight:700; margin-bottom:6px}
.bl-da{margin:3px 0}
.bl-da.dung{color:var(--luc); font-weight:700}
.bl-da.sai{color:var(--do); font-weight:700}
.bl-da.thuong{color:#475569}
.bl-khongchon{color:var(--cam); font-style:italic}

/* ------------------------------ Hộp thoại ------------------------------ */
.lop-phu{position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center;
  justify-content:center; padding:16px; z-index:50}
.hop{background:#fff; border-radius:12px; padding:20px; width:min(460px,100%)}
.hop-tieude{font-weight:800; font-size:1.1rem; color:var(--navy); margin-bottom:8px}
.hop-noidung{white-space:pre-line; margin-bottom:16px}
.hop-nut{display:flex; gap:10px; justify-content:flex-end}


/* [ĐÃ SỬA]: CHỈ bản máy tính - giữ nguyên 4 phần xếp dọc như giao diện gốc,
   chỉ co khoảng cách/đệm dọc để toàn bộ đáp án vừa chiều cao màn hình.
   Không áp dụng cho điện thoại (<= 980px), nên giao diện mobile được giữ nguyên. */
@media (min-width:981px){
  .cot-cauhoi{max-height:calc(100vh - 260px); overflow:auto}
  .phan{margin-bottom:8px}
  .phan-dau{margin-bottom:4px}
  .dap-an{gap:8px; padding:6px 12px; margin-bottom:4px}
  .dap-an .cham-tron{width:16px; height:16px; margin-top:1px}
}

/* ------------------------- Màn hình nhỏ / điện thoại ------------------- */
@media (max-width:980px){
  .thanh-thisinh{padding:10px 12px; gap:10px}
  .thanh-dieuhuong{margin:0 12px 12px}
  .lam-bai{padding:12px; gap:12px}
  .khung-video{aspect-ratio:16/9}
  .nut-vien-sang{order:5}
  .lam-bai{grid-template-columns:1fr}
  .cot-cauhoi{max-height:none}
  .ket-qua{grid-template-columns:1fr}
  .bai-lam{max-height:none}
  .banner h1,.banner-lon{font-size:1.15rem}
  .banner{padding:12px 14px; gap:10px}
  .logo{height:42px}
  .dh-so{font-size:1.5rem}
  /* [ĐÃ SỬA] Điện thoại: [←] [dải số vuốt ngang] [→] trên cùng một hàng */
  .hang-dieuhuong{flex-wrap:nowrap; gap:6px}
  .nut-dh{min-width:44px; padding:0 10px; font-size:1.1rem}
  .chu-nut{display:none}
  .o-so button{width:40px; height:40px}
  .chu-thich .phim-tat{display:none}   /* điện thoại không có bàn phím */
}