/* Demo "Báo lỗi câu hỏi" — hai bản: Exam Web và FLYER App.
   Màu trình làm bài lấy từ tools/exam-themes/themes.json (đo bằng getComputedStyle trên
   exam.flyer.us, giao diện Dragon World): ô đáp án nền
   linear-gradient(rgb(255,246,244),rgb(255,230,211)) viền rgb(255,161,92) bóng rgb(123,54,3)
   chữ rgb(123,54,3) bo 24 · đồng hồ rgb(238,119,0) · thanh đáy
   linear-gradient(rgba(125,60,0,.75),rgba(61,27,16,.75)) · thanh tiến độ
   linear-gradient(90deg,rgb(254,190,24),rgb(255,139,34)) trên nền trắng ·
   ô ĐÚNG linear-gradient(rgb(194,255,175),rgb(82,153,61)), ô SAI
   linear-gradient(rgb(255,180,180),rgb(172,0,0)) — giống nhau ở cả sáu giao diện. */

/* ---------- khung máy ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0 0; align-items: flex-start }
.dev { position: relative; flex: none; transform-origin: top left }
.dev > .wrapscale { position: absolute; top: 0; left: 0; transform-origin: top left }
.dev > b { display: block; font: 700 12.5px "Open Sans", sans-serif; color: var(--muted); margin: 0; text-align: center }
.dev.s-ph { width: calc(412px * var(--k, 1)) }
.dev.s-ph > .wrapscale { transform: scale(var(--k, 1)) }
.dev.s-ph > b { margin-top: calc(890px * var(--k, 1) + 8px) }
.dev.s-dk { width: calc(1200px * var(--k2, 1)) }
.dev.s-dk > .wrapscale { transform: scale(var(--k2, 1)) }
.dev.s-dk > b { margin-top: calc(806px * var(--k2, 1) + 8px) }
.phone { width: 390px; height: 844px; border: 11px solid #1c1c1e; border-radius: 44px; overflow: hidden;
  background: #000; box-shadow: 0 18px 38px rgba(40, 20, 70, .18); position: relative }
.desk { width: 1180px; height: 760px; border: 10px solid #1c1c1e; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 18px 38px rgba(40, 20, 70, .18); position: relative }
/* khung máy tính cuộn ngang trên điện thoại, không thu nhỏ thành vệt mờ */
.scrollx { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: 1 1 100%; min-width: 0 }
.scrollx > .dev { flex: none }
.swipe-note { display: none; font: 600 11.5px "Open Sans", sans-serif; color: var(--muted); margin: 2px 0 0 }
@media (max-width: 900px) { .swipe-note { display: block } }

/* ---------- trình làm bài ---------- */
.ex { --tile: linear-gradient(rgb(255, 246, 244) 0%, rgb(255, 230, 211) 100%);
  --tile-bd: rgb(255, 161, 92); --tile-sh: rgb(123, 54, 3); --tile-fg: rgb(123, 54, 3);
  --timer: rgb(238, 119, 0); --foot: linear-gradient(rgba(125, 60, 0, .75) 0%, rgba(61, 27, 16, .75) 100%);
  --prog: linear-gradient(90deg, rgb(254, 190, 24) 0%, rgb(255, 139, 34) 100%);
  --ok: linear-gradient(rgb(194, 255, 175) 0%, rgb(82, 153, 61) 100%);
  --no: linear-gradient(rgb(255, 180, 180) 0%, rgb(172, 0, 0) 100%);
  width: 100%; height: 100%; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #7A2318 0%, #4A1410 45%, #B4551C 100%);
  font-family: "Baloo 2", "Open Sans", system-ui, sans-serif }
.ex .top { display: flex; align-items: center; gap: 12px; padding: 14px 18px }
.ex .xq { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #E2622A; display: grid; place-items: center;
  font: 800 19px "Baloo 2", sans-serif; flex: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .25) }
.ex .thm { background: linear-gradient(rgb(255, 160, 60), rgb(230, 110, 10)); border-radius: 999px; padding: 6px 14px;
  font: 700 12px "Open Sans", sans-serif; flex: none }
.ex .bar { flex: 1; height: 14px; border-radius: 999px; background: #fff; overflow: hidden; min-width: 60px }
.ex .bar i { display: block; height: 100%; width: 20%; background: var(--prog) }
.ex .tmr { background: var(--timer); border-radius: 14px; padding: 6px 14px; text-align: center; flex: none;
  box-shadow: 0 4px 0 rgba(123, 54, 3, .55) }
.ex .tmr small { display: block; font: 600 9.5px "Open Sans", sans-serif; opacity: .9 }
.ex .tmr b { font: 800 19px "Baloo 2", sans-serif; line-height: 1.1 }
.ex .mid { display: flex; gap: 26px; padding: 10px 34px; align-items: flex-start }
.ex .pic { width: 300px; height: 330px; border: 3px solid rgba(255, 255, 255, .85); border-radius: 18px; flex: none;
  background: linear-gradient(#5C3A7E, #2E1B4A); display: grid; place-items: center; font-size: 60px }
.ex .qa { flex: 1; min-width: 0 }
.ex .q { font: 700 25px "Baloo 2", sans-serif; line-height: 1.3; margin: 10px 0 24px }
.ex .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.ex .tile { background: var(--tile); border: 2px solid var(--tile-bd); box-shadow: 0 4px 0 0 var(--tile-sh);
  color: var(--tile-fg); border-radius: 24px; min-height: 96px; display: grid; place-items: center;
  font: 800 19px "Baloo 2", sans-serif; text-align: center; padding: 14px; cursor: pointer }
.ex .tile.ok { background: var(--ok); border-color: rgb(180, 242, 161); color: #fff; box-shadow: inset 0 -8px 0 0 rgb(82, 153, 61) }
.ex .tile.no { background: var(--no); border-color: rgb(240, 147, 147); color: #fff; box-shadow: inset 0 -8px 0 0 rgb(172, 0, 0) }
.ex .foot { position: absolute; left: 0; right: 0; bottom: 0; background: var(--foot); padding: 14px 24px;
  display: flex; align-items: center; gap: 14px }
.ex .foot .ttl { flex: 1; text-align: center; font: 700 15px "Baloo 2", sans-serif }
.ex .btn { border: 0; border-radius: 14px; font: 800 15px "Baloo 2", sans-serif; padding: 12px 26px; cursor: pointer }
.ex .btn.back { background: linear-gradient(#E9B468, #C98B38); color: #6B3A08; box-shadow: 0 4px 0 #8A5A14 }
.ex .btn.next { background: linear-gradient(#73D14B, #46A62A); color: #fff; box-shadow: 0 4px 0 #2E7A17 }
/* nút báo lỗi — phần đề xuất thêm */
.ex .flag { width: 40px; height: 40px; border-radius: 12px; flex: none; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .42); font-size: 17px }
.ex .flag:hover { background: rgba(255, 255, 255, .3) }
.ex .flag.new::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 999px; background: #FF4D4D;
  transform: translate(15px, -15px) }
/* bản điện thoại của trình làm bài */
.ex.ph .top { padding: 12px 12px 8px; flex-wrap: wrap }
.ex.ph .bar { order: 9; flex: 1 1 100%; height: 12px }
.ex.ph .tmr { padding: 4px 10px } .ex.ph .tmr b { font-size: 16px }
.ex.ph .xq { width: 32px; height: 32px; font-size: 16px }
.ex.ph .thm { padding: 5px 10px; font-size: 11px }
.ex.ph .flag { width: 32px; height: 32px; font-size: 15px }
.ex.ph .mid { flex-direction: column; padding: 8px 16px; gap: 10px }
.ex.ph .pic { width: 100%; height: 215px }
.ex.ph .q { font-size: 17px; margin: 4px 0 14px }
.ex.ph .opts { gap: 12px } .ex.ph .tile { min-height: 74px; font-size: 15px; border-radius: 18px }
.ex.ph .foot { padding: 10px 12px; gap: 8px }
.ex.ph .btn { padding: 10px 16px; font-size: 13px } .ex.ph .foot .ttl { font-size: 12px }

/* ---------- tấm chọn lý do ---------- */
/* cloud-doc.css không có luật [hidden] nên phải tự tắt — nếu không, tấm phủ trong suốt
   vẫn nằm trên và nuốt mọi cú bấm vào khung. */
.sheet-mask[hidden] { display: none }
.sheet-mask { position: absolute; inset: 0; background: rgba(20, 8, 4, .5); display: flex; align-items: flex-end; z-index: 5 }
.sheet { background: #fff; color: #2A1A12; width: 100%; border-radius: 22px 22px 0 0; padding: 16px 16px 22px;
  font-family: "Open Sans", sans-serif; max-height: 86%; overflow: auto }
.sheet .grab { width: 44px; height: 4px; border-radius: 99px; background: #E0D7D2; margin: 0 auto 12px }
.sheet h4 { margin: 0 0 3px; font: 800 18px "Baloo 2", sans-serif; text-align: center }
.sheet .sub { margin: 0 0 14px; font-size: 12.5px; color: #8A7A72; text-align: center }
.sheet .rs { display: flex; flex-direction: column; gap: 8px }
.sheet .r { background: #F4F1EF; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px;
  font: 600 14px "Open Sans", sans-serif; cursor: pointer; text-align: center }
.sheet .r:hover { background: #ECE7E4 }
.sheet .r.on { background: #FFF2E6; border-color: var(--tile-bd); color: var(--tile-fg) }
.sheet .more { margin-top: 12px }
.sheet textarea { width: 100%; border: 1px solid #E0D7D2; border-radius: 12px; padding: 10px 12px; resize: none;
  font: 400 13.5px "Open Sans", sans-serif; height: 62px }
.sheet .ctx { margin-top: 12px; background: #F8F6F5; border-radius: 12px; padding: 10px 12px; font-size: 11.5px; color: #6B5C54; line-height: 1.6 }
.sheet .ctx b { color: #2A1A12 }
.sheet .send { margin-top: 12px; width: 100%; border: 0; border-radius: 14px; padding: 13px;
  background: linear-gradient(#73D14B, #46A62A); color: #fff; font: 800 15px "Baloo 2", sans-serif; cursor: pointer;
  box-shadow: 0 4px 0 #2E7A17 }
.sheet .send[disabled] { background: #DCD6D2; color: #9B8F88; box-shadow: 0 4px 0 #C4BCB7; cursor: default }
/* bản máy tính: hộp giữa màn thay vì tấm trượt từ đáy */
.ex:not(.ph) .sheet-mask { align-items: center; justify-content: center }
.ex:not(.ph) .sheet { width: 520px; border-radius: 20px; max-height: 80% }
/* lời cảm ơn */
.thanks { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6;
  background: rgba(20, 8, 4, .9); color: #fff; border-radius: 14px; padding: 12px 18px;
  font: 700 13.5px "Open Sans", sans-serif; display: none; text-align: center; max-width: 86% }
.thanks.on { display: block }

/* ---------- bản FLYER App ---------- */
.ap { background: #140C26 }
.ap .sbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  font: 700 14px "Open Sans", sans-serif; color: #fff; flex: none }
.ap .ex { height: calc(100% - 44px) }
.ap .nav { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: grid; place-items: center }
.ap .nav i { width: 134px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .55) }
.lvlpill { display: inline-block; background: #E7F7EC; color: #1E7A42; border-radius: 999px; padding: 2px 9px; font: 700 11px "Open Sans", sans-serif; vertical-align: 2px }