/* Hinh Anh Y Hoc V7.1.0 - Visual Polish & UI Stability */

/* ---------- Global tokens / readable states ---------- */
:root{
  --v63-radius-sm:10px;
  --v63-radius:16px;
  --v63-radius-lg:22px;
  --v63-control-h:44px;
  --v63-modal-pad:24px;
  --v63-readable:color-mix(in srgb,var(--ink) 88%,var(--surface));
  --v63-readable-muted:color-mix(in srgb,var(--ink) 68%,var(--surface));
}
body{overflow-x:hidden}
.btn,.icon-button,input,select,textarea,button{font-family:inherit}
.btn{min-height:40px}
.btn:disabled,[aria-disabled="true"]{opacity:.56!important;filter:saturate(.65);cursor:not-allowed!important}
.small,.muted{color:var(--v63-readable-muted)}

/* ---------- Modal system ---------- */
dialog#modal{
  width:auto;
  min-width:0;
  max-width:min(640px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:var(--v63-modal-pad);
  border-radius:var(--v63-radius-lg);
  overflow:auto;
  background:var(--surface);
  color:var(--ink);
}
dialog#modal::backdrop{background:color-mix(in srgb,#07131a 68%,transparent);backdrop-filter:blur(5px)}
dialog#modal h1,dialog#modal h2,dialog#modal h3,dialog#modal p{max-width:100%}
dialog#modal h2{margin:0;font-size:22px;line-height:1.25}
dialog#modal p{color:var(--v63-readable-muted);line-height:1.65}
.modal-actions{position:static!important;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);background:transparent!important}

.v62-guide-modal,.v62-mode-dialog,.v62-settings-dialog,.v62-mini-review{
  width:min(560px,calc(100vw - 80px))!important;
  max-width:100%;
  min-height:0!important;
  height:auto!important;
  gap:14px!important;
}
.v62-guide-modal{width:min(500px,calc(100vw - 80px))!important}
.v62-guide-modal .modal-actions{justify-content:flex-end}
.v62-mode-dialog .modal-actions{margin-top:4px}
.v62-mode-choice{padding:13px 14px!important;border-radius:14px!important}
.v62-mode-choice>div:last-child{min-width:0}
.v62-mode-choice strong{font-size:14px}
.v62-mode-choice small{display:block;margin-top:3px;line-height:1.5;color:var(--v63-readable-muted)}
.v62-mode-switches{padding-top:2px!important}
.v62-mode-switches label{padding:10px 2px!important}

.v62-mini-review{gap:12px!important}
.v62-mini-review>p{margin:0!important}
.v62-mini-review .v50-mini-options{gap:8px!important}
.v62-mini-review .v50-mini-options .btn{min-height:44px!important;padding:10px 14px!important;color:var(--ink)!important;border-color:var(--line)!important;background:var(--surface)!important}
.v62-mini-review .v50-mini-options .btn:hover{border-color:var(--theme-accent)!important}
.v62-mini-review .v50-mini-options .btn.correct{border-color:#20aa6b!important;background:color-mix(in srgb,#20aa6b 10%,var(--surface))!important}
.v62-mini-review .v50-mini-options .btn.wrong{border-color:#d95151!important;background:color-mix(in srgb,#d95151 9%,var(--surface))!important}

/* ---------- Course cards / subject artwork ---------- */
.v46-course-card{border-radius:18px!important}
.v46-course-cover[style*="url("],.v46-course-poster[style*="url("]{filter:none!important;background-size:cover!important;background-position:center!important}
.v46-course-cover[style*="url("]::before,.v46-course-poster[style*="url("]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 18%,transparent),transparent 58%);pointer-events:none;z-index:1}
.v46-course-cover>* ,.v46-course-poster>*{position:relative;z-index:2}
.v46-course-cover[style*="url("] strong,.v46-course-poster[style*="url("] strong{text-shadow:0 2px 14px rgba(255,255,255,.78),0 1px 2px rgba(0,0,0,.18)}
[data-theme="dark"] .v46-course-cover[style*="url("]::before,[data-theme="dark"] .v46-course-poster[style*="url("]::before{background:linear-gradient(90deg,rgba(7,17,22,.28),transparent 60%)}

/* ---------- Learning engine: stable layouts ---------- */
.exam-focus .main{max-width:1440px;margin-inline:auto;width:100%}
.exam-focus .v62-form-layout{display:grid!important;grid-template-columns:300px minmax(0,1fr)!important;gap:20px!important;align-items:start!important}
.exam-focus .v62-form-side{grid-column:1!important;grid-row:1!important;position:sticky!important;top:18px!important;min-width:0!important}
.exam-focus .v62-question-panel{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important}
.v62-question-panel{min-height:0!important;padding:26px 28px!important;border-radius:18px!important}
.v62-question-panel h2{font-size:clamp(20px,2vw,26px)!important;line-height:1.45!important;overflow-wrap:anywhere}
.v62-answer-grid{align-items:stretch}
.v62-answer-grid .answer-option{min-width:0!important;overflow:hidden}
.v62-answer-grid .answer-option>span:last-child{min-width:0;overflow-wrap:anywhere;line-height:1.5}
.v62-question-panel .question-actions{margin-top:22px!important}
.v62-form-side .question-map{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-height:290px!important}
.v62-form-side .question-dot{min-width:0!important}

.v62-quizizz-shell{min-height:0!important;max-width:1280px;margin-inline:auto}
.v62-quizizz-head{padding:14px 20px!important}
.v62-quizizz-head strong{font-size:17px!important;line-height:1.3}
.v62-quizizz-head .timer{display:inline-flex!important;align-items:center;justify-content:center;min-width:74px!important;min-height:34px!important;padding:6px 10px!important;background:#ffffff16!important;color:#fff!important;border:1px solid #ffffff25!important;border-radius:999px!important}
.v62-quizizz-layout{max-width:1040px!important;padding:18px!important}
.v62-quizizz-layout .v62-question-panel{box-shadow:none!important;border:1px solid var(--line)}
.v62-quizizz-footer{padding:0 18px 18px!important}
.practice-feedback{min-height:0!important;padding:0!important;margin-top:14px!important}
.practice-feedback:empty{display:none!important}

.v62-survival-play{max-width:1120px!important}
.v62-survival-question{min-height:0!important;padding:28px!important}

/* ---------- Results ---------- */
.v50-result-summary{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.v50-result-summary article{min-height:86px!important;display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:10px!important;padding:16px!important}
.v50-result-summary article strong{font-size:23px!important;line-height:1!important;grid-row:1/3}
.v50-result-summary article small{font-size:10px!important;color:var(--v63-readable-muted)!important;line-height:1.3!important}
.v50-result-summary article span{font-size:10px!important;color:var(--v63-readable-muted)!important}
.v50-review-card{overflow:hidden}
.v50-review-card h3{overflow-wrap:anywhere}

/* ---------- Saved / review ---------- */
.v62-memory-hero{padding:22px!important;border-radius:18px!important}
.v62-memory-hero h1{font-size:28px!important}
.v62-memory-hero p{opacity:1!important;color:var(--v63-readable-muted)!important}
.v62-review-actions .btn:disabled{color:var(--v63-readable-muted)!important}

/* ---------- Landing V7.1.0 ---------- */
.v63-landing .landing-main{overflow:hidden}
.v63-landing .landing-hero{min-height:520px}
.v63-landing .landing-hero-copy>p:not(.eyebrow){max-width:700px}
.v63-landing .landing-actions{flex-wrap:wrap}
.v63-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v63-mode-grid article,.v63-feature-strip article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-soft)}
.v63-mode-grid article>span,.v63-feature-strip article>span{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--theme-soft);color:var(--theme-accent);margin-bottom:18px}
.v63-mode-grid h3,.v63-feature-strip h3{margin:0 0 8px;font-size:17px}
.v63-mode-grid p,.v63-feature-strip p{margin:0;color:var(--v63-readable-muted);line-height:1.7}
.v63-mode-grid small{display:block;margin-top:14px;color:var(--theme-accent);font-weight:750;line-height:1.5}
.v63-feature-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v63-feature-strip article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start}
.v63-feature-strip article>span{margin:0}
.v63-image-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.v63-landing-cta{margin-top:42px}

/* ---------- General responsive ---------- */
@media(max-width:1100px){
  .v63-mode-grid,.v63-image-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v63-feature-strip{grid-template-columns:1fr}
  .exam-focus .v62-form-layout{grid-template-columns:260px minmax(0,1fr)!important}
}
@media(max-width:900px){
  .exam-focus .v62-form-layout{grid-template-columns:1fr!important}
  .exam-focus .v62-form-side,.exam-focus .v62-question-panel{grid-column:1!important;grid-row:auto!important;position:relative!important;top:auto!important}
  .exam-focus .v62-form-side{order:2}
  .exam-focus .v62-question-panel{order:1}
  .v62-form-side .question-map{grid-template-columns:repeat(10,minmax(0,1fr))!important;max-height:150px!important}
  .v50-result-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  dialog#modal{max-width:calc(100vw - 20px);padding:18px;border-radius:18px}
  .v62-guide-modal,.v62-mode-dialog,.v62-settings-dialog,.v62-mini-review{width:100%!important}
  .v62-mode-choice{grid-template-columns:auto 40px minmax(0,1fr)!important}
  .v62-answer-grid{grid-template-columns:1fr!important}
  .v62-question-panel{padding:20px 16px!important}
  .v62-question-panel h2{font-size:19px!important}
  .v62-form-side .question-map{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .v62-quizizz-head{align-items:flex-start!important}
  .v62-quizizz-head>div:last-child{gap:7px!important}
  .v62-streak{display:none!important}
  .v63-mode-grid,.v63-image-grid{grid-template-columns:1fr!important}
  .v50-result-summary{grid-template-columns:1fr 1fr!important}
}
@media(max-width:520px){
  .v50-result-summary{grid-template-columns:1fr!important}
  .v62-question-panel .question-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .v63-feature-strip article{grid-template-columns:40px minmax(0,1fr);padding:18px}
  .v63-feature-strip article>span{width:40px;height:40px}
}