/* ====== GLOBAL ====== */
:root{
  --accent:#0b7dda; 
  --ink:#0f172a;
  --ok:#2e7d32; 
  --bad:#c62828;
  --action-h:40px; 
  --action-minw:30px; 
  --action-radius:10px; 
  --action-gap:4px;
}

html,body{background:#f4f4f4}
body{
  font-family:Arial,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  margin:0; padding:20px; display:flex; justify-content:center; align-items:flex-start; min-height:100vh; overflow-y:auto;
  color:var(--ink);
}

/* ====== LAYOUT 2 CỘT VÒNG TRÒN ====== */
.box3{
  border:1px solid #000; border-radius:12px; overflow:hidden; color:#222;
  margin:6px auto; padding:10px 30px;
  background:repeating-linear-gradient(30deg,#fff 0 2px,#bfead3 2px 80px);
  max-width:95%;
}
.container{display:flex; align-items:flex-start; justify-content:center; gap:30px; max-width:500px; margin:0 auto}
.col{display:flex; flex-direction:column; align-items:center}
.col.right{margin-top:20px}

/* ====== VÒNG TRÒN ====== */
.circle{
  width:90px; height:90px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  font-size:30px; font-weight:bold; margin:2px 0; cursor:pointer; transition:background-color .25s ease;
  user-select:none;
}
.circle.odd{ background:#ffeb3b }
.circle.even{ background:#ffeb3b }
.circle.green{ background:#4caf50; color:#fff }
.circle.red{ background:#f44336; color:#fff }

/* ====== CONNECTORS ====== */
#circlesContainer{ position:relative }
#connectors{ position:absolute; inset:0; pointer-events:none; overflow:visible }

/* ====== MODAL ====== */
.modal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.45); padding:10px; overflow-y:auto; }
.modal-content{
  background:#fff;
  margin:auto;
  width:98%;
  max-width:1100px;
  min-height:99dvh;
  border:1px solid #888;
  position:relative;
  text-align:center;
  padding:6px 10px 10px;
  border-radius:10px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
}


#myModal .close{
  position:absolute; top:6px; right:10px; width:36px; height:36px; line-height:36px; border-radius:999px;
  color:#f00; font-size:28px; font-weight:bold; background:transparent; cursor:pointer; z-index:1002;
}
#myModal .close:hover{ color:#000 }

/* ====== NAV ARROWS ====== */
.modal-content .nav-arrow{
  position:absolute; bottom:8px; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; outline:none;
  background:rgba(0,0,0,.06); box-shadow:0 4px 12px rgba(0,0,0,.12); transition:transform .08s, background .15s;
}
.modal-content .nav-arrow:hover{ background:rgba(0,0,0,.12) }
.modal-content .nav-arrow:active{ transform:translateY(1px) }
.modal-content .nav-arrow.left{ left:8px }
.modal-content .nav-arrow.right{ right:8px }
.modal-content .nav-arrow svg{ width:22px; height:22px; stroke:#ff0000 }
.modal-content .nav-arrow.left svg{ transform:rotate(0deg) }


/* ====== QUESTION ====== */
#questionTitle{ margin:0 0 4px; color:#d00; text-decoration:underline }
#questionText{
  white-space:pre-wrap; font-size:22px; line-height:1.6; margin:0 6px 8px; text-align:center;
  font-family:"Times New Roman",serif;
}


/* ====== PHÂN SỐ HIỂN THỊ CHUẨN ====== */
.frac{
  display:inline-grid;
  grid-template-rows:auto auto;
  align-items:center;
  justify-items:center;
  vertical-align:middle;
  line-height:1;
  font-family:"Times New Roman",serif;
  font-size:1.18em;
  margin:0 3px;
}

.frac .num,
.frac .den{
  display:block;
  text-align:center;
  min-width:100%;
  padding-left:5px;
  padding-right:5px;
  box-sizing:border-box;
  white-space:nowrap;
}

.frac .num{
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
}

.frac .den{
  padding-top:2px;
}

/* ====== PHẦN ĐỀ TIẾNG ANH ĐỂ MÀU XANH ====== */

.enBox {
  color: #0b7dda;
}


/* ====== ANSWER INPUT ====== */
#answerInput{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:10px 0 14px }
#userAnswer{
  width:min(250px,82%); height:44px; font-size:20px; font-weight:600; text-align:center; letter-spacing:1.2px;
  padding:0 10px; border:2px solid #333; border-radius:10px; outline:none; background:#fff; color:#222;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
#userAnswer::placeholder{ font-family:"Times New Roman",serif; color:#888 }
#userAnswer:hover{ border-color:var(--accent) }
#userAnswer:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(11,125,218,.12) }
#userAnswer.is-correct{ border-color:var(--ok); background:#e8f5e9; box-shadow:0 0 0 4px rgba(46,125,50,.12) }
#userAnswer.is-wrong{ border-color:var(--bad); background:#ffebee; box-shadow:0 0 0 4px rgba(198,40,40,.12) }

/* ====== KEYPAD ====== */
.keypad{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:340px }
.keypad button{
  min-width:56px; height:40px; padding:0 8px; border-radius:10px; border:1px solid #999; background:#f5f5f5; font-weight:700;
  cursor:pointer; transition: box-shadow .15s, transform .02s, background .15s;
}
.keypad button:hover{ box-shadow:0 4px 10px rgba(0,0,0,.12) }
.keypad button:active{ transform:translateY(1px) }

/* ====== ACTION BAR ====== */
.actionBar{ display:flex; justify-content:center; align-items:center; gap:var(--action-gap); flex-wrap:wrap; margin:0px 0 4px }
.actionBar .btn{
  height:var(--action-h); min-width:var(--action-minw); padding:0 10px; box-sizing:border-box; font-size:16px; font-weight:700;
  border-radius:var(--action-radius); border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;
  transition:box-shadow .15s, transform .02s, background .15s, opacity .15s;
}
.actionBar .btn:hover{ box-shadow:0 4px 10px rgba(0,0,0,.15) }
.actionBar .btn:active{ transform:translateY(1px) }
.actionBar .btn:disabled{ opacity:.6; cursor:not-allowed }
.actionBar .btn.alt{ border-color:var(--accent);  background:var(--accent); }


/* ====== CÁC NÚT LỰA CHỌN ĐÁP ÁN ====== */
#answerButtons{
  display:flex;
  justify-content:center;
  gap:3px;
  flex-wrap:wrap;
  margin:2px 0 2px;
}


/* ====== FEEDBACK / ANSWER / SOLUTION ====== */
#feedback{
  display:none;
  margin-top:8px;
  min-height:0;
}

#feedback:not(:empty){
  display:block;
}

#answerText,#solutionText{
  display:none;
  white-space:pre-line;
  text-align:center;
  margin:10px auto 0;
  width:min(760px,92%);
  line-height:1.5;
  font-family:"Times New Roman",serif;
  font-size:22px;
}
#videoFrame{ display:none; margin-top:10px }



/* ====== IMG TAP-TO-ZOOM ====== */
#questionText img{ cursor:zoom-in; max-width:100%; height:auto }
#imgZoomOverlay{ position:fixed; inset:0; display:none; z-index:999999; background:rgba(0,0,0,.9); align-items:center; justify-content:center; cursor:zoom-out; -webkit-tap-highlight-color:transparent; touch-action:none }
#imgZoomOverlay img{ width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none }

/* ====== Onboarding ====== */
#onb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:99999 }
#onb-card{ width:min(560px,92vw); background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); padding:18px 18px 14px; text-align:left }
#onb-step-content{ font-size:16px; line-height:1.5 }
#onb-actions{ display:flex; gap:10px; margin-top:16px }
#onb-actions button{ border:0; outline:0; cursor:pointer; padding:10px 14px; border-radius:10px; font-weight:700 }
#onb-next{ background:var(--accent); color:#fff }
#onb-next:hover{ filter:brightness(1.05) }
#onb-skip{ background:#f3f4f6; color:#111 }
#onb-skip:hover{ background:#e5e7eb }
#onb-progress{ display:flex; gap:6px; margin-top:12px }
#onb-progress .dot{ width:8px; height:8px; border-radius:9999px; background:#d1d5db }
#onb-progress .dot.active{ background:var(--accent) }

/* ====== Responsive ====== */
@media (max-width:400px){
  .actionBar .btn{ min-width:20px; font-size:15px }
  #userAnswer{ width:92% }
}

/* ====== SFX TOGGLE FLOAT ====== */
#sfx-toggle{
  position:fixed; left:12px; bottom:12px; z-index:2147483647; border:none; border-radius:999px; padding:6px 10px;
  background:rgba(0,0,0,.65); color:#fff; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.12); backdrop-filter:blur(2px);
  font-size:13px; pointer-events:auto;
}

/* ====== ANSWER BUTTONS ====== */
#answerButtons button{
  min-width:60px;
  height:40px;
  border-radius:10px;
  border:2px solid #999;
  background:#f5f5f5;
  color:red;
  cursor:pointer;
  font-family:"Times New Roman", serif;
  font-size:24px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#answerButtons button:hover{ box-shadow:0 6px 14px rgba(0,0,0,.12) }
#answerButtons button:active{ transform:translateY(1px) }
#answerButtons button.selected{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* ====== HIỆN THÔNG BÁO NHANH ====== */
.center-toast {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 2147483647 !important;

  max-width: 94vw;
  padding: 8px 12px;
  border-radius: 999px;

  background: #ffeb3b !important;
  color: red !important;
  font-size: 16px;
  font-weight: 400 !important;
  text-align: center;
  line-height: 1.35;

  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}

.center-toast.show {
  animation: toastZoomOut 1s ease forwards;
}

@keyframes toastZoomOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }

  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  75% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.85);
  }
}

/* ====== MODAL FOOTER ====== */
.modalFooter{
  margin-top:auto;
  padding:8px 0 2px;
  text-align:center;
  font-size:16px;
  color:#0f172a;
}

.footerLine{
  width:250px;
  max-width:70%;
  height:1px;
  background:blue;
  margin:0 auto 6px;
}

.footerContact{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.zaloBtn{
  display:inline-block;
  background:#0b7dda;
  color:#fff;
  text-decoration:none;
  padding:3px 8px;
  font-size:16px;
  border-radius:6px;
  cursor:pointer;
}

.zaloBtn:hover{
  filter:brightness(1.08);
}

/* ====== ÉP PHÂN SỐ TO ====== */
/*#questionText .frac,*/
/*#answerText .frac,*/
/*#solutionText .frac{*/
/*  font-size:1.25em !important;*/
/*}*/

/* ====== CONFETTI / PHÁO HOA LUÔN NỔ TRÊN MODAL ====== */
#confettiCanvas{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:2147483646 !important;
  pointer-events:none !important;
}

/* ====== CHỐNG BÔI ĐEN / COPY NỘI DUNG APP ====== */
body,
.box3,
.modal-content,
#pageTitle,
#questionTitle,
#questionText,
#answerText,
#solutionText,
#feedback,
.actionBar,
#answerButtons,
.modalFooter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Vẫn cho phép nhập/chọn trong ô đáp án */
input,
textarea,
#fillAnswerInput {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Hạn chế kéo ảnh ra ngoài */
#questionText img,
#solutionText img {
  -webkit-user-drag: none;
  user-drag: none;
}
/* ====== HẾT CHỐNG BÔI ĐEN / COPY NỘI DUNG APP ====== */