/* HINH ANH Y HOC V7.5.0 — content cleanup, cover images, subject hero, mobile-first polish */

/* ---------- Typography: Vietnamese-safe and consistent ---------- */
:root{
  font-family:"Segoe UI",Arial,sans-serif;
}
body,button,input,select,textarea,
.v70-landing,.v51-auth-shell,.v70-dashboard,
.v46-subject-space,.v62-attempt-shell{
  font-family:"Segoe UI",Arial,sans-serif!important;
}
.v70-hero h1,.v70-section-heading h2,.v70-experience-copy h2,
.v70-progress-panel h2,.v70-library-preview h2,.v70-final-cta h2,
.v70-dashboard-copy h1,.v51-auth-story h1{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.018em!important;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  text-wrap:balance;
}
.v70-hero h1{line-height:1.03!important}
.v70-hero h1 em{font-style:normal}
.v70-hero h1 em:after{display:none!important}
.v70-section-heading h2,.v70-experience-copy h2,.v70-progress-panel h2,.v70-library-preview h2{line-height:1.12!important}
.v70-home-heading h2,.v46-subject-hero h1{letter-spacing:-.015em}

/* ---------- Landing cleanup ---------- */
.v70-hero-copy{max-width:760px}
.v70-hero-copy>p{max-width:620px!important;font-size:14px!important;line-height:1.7!important}
.v70-hero-actions{margin-top:22px!important}
.v70-feature-rail small{line-height:1.45}
.v70-section-heading{margin-bottom:24px!important}
.v70-section-heading>span,.v70-experience-copy>span,.v70-progress-panel>div:first-child>span,
.v70-library-preview>div:first-child>span{letter-spacing:1.25px!important}
.v70-mode-card p,.v70-mode-side p,.v70-memory-grid p,.v70-progress-panel p,
.v70-library-preview p{line-height:1.62!important}
.v70-final-cta{margin-top:62px!important}

/* ---------- Knowledge library cover images ---------- */
.lesson-cover.has-cover-image{
  background:#102f3b!important;
}
.lesson-cover-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:0;
  transition:transform .35s ease,filter .35s ease;
}
.lesson-cover.has-cover-image:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(7,27,33,.02) 35%,rgba(7,27,33,.36));
  pointer-events:none;
}
.lesson-cover.has-cover-image:after{display:none!important}
.lesson-cover.has-cover-image .lesson-cover-grid,
.lesson-cover.has-cover-image .cover-icon{display:none!important}
.lesson-cover.has-cover-image .cover-index{
  z-index:2;
  color:#fff!important;
  background:rgba(8,24,30,.58);
  backdrop-filter:blur(8px);
  padding:5px 8px;
  border-radius:999px;
  text-shadow:0 1px 5px rgba(0,0,0,.3);
}
.lesson-card:hover .lesson-cover.has-cover-image .lesson-cover-image{transform:scale(1.025)}
.v73-reading-cover{
  margin:-35px -40px 28px;
  height:clamp(220px,34vw,430px);
  overflow:hidden;
  border-radius:16px 16px 0 0;
  background:var(--bg);
}
.v73-reading-cover img{width:100%;height:100%;object-fit:cover;display:block}
.v73-admin-cover-preview{
  margin-top:10px;
  min-height:130px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--bg);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
}
.v73-admin-cover-preview.has-image{border-style:solid;background:#0d2028}
.v73-admin-cover-preview img{width:100%;height:180px;object-fit:cover;display:block}
.v73-admin-article-cover{width:100%;max-height:300px;object-fit:cover;border-radius:14px;margin-bottom:18px}

/* ---------- Subject hero: real course image ---------- */
.v73-subject-hero-image{
  width:min(440px,100%);
  height:270px;
  margin:0;
  justify-self:end;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(145deg,var(--theme-soft),var(--surface));
  box-shadow:0 20px 54px color-mix(in srgb,var(--theme-accent) 18%,transparent);
}
.v73-subject-hero-image img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .35s ease,filter .35s ease;
}
.v73-subject-hero-image:hover img{transform:scale(1.025)}
.v73-subject-image-fallback{position:absolute;inset:0;display:none;place-items:center;color:var(--theme-accent)}
.v73-subject-image-fallback .icon{width:56px;height:56px}
.v73-subject-hero-image.is-error .v73-subject-image-fallback{display:grid}
.v46-subject-hero{grid-template-columns:minmax(0,1fr) minmax(320px,440px)!important}
.v46-subject-hero-copy>p{font-size:12px!important;line-height:1.65!important}
.v46-subject-hero-metrics small{text-transform:none!important;letter-spacing:0!important;font-size:9px!important}

/* ---------- Quiz / attempt desktop refinements ---------- */
.v62-answer-grid{gap:11px!important}
.v62-answer-grid .answer-option{margin:0!important}
.v62-question-panel .question-actions{position:relative;z-index:4}
.v62-image-button{background:color-mix(in srgb,var(--surface) 88%,#000 12%)}
.v62-image-button img{background:transparent!important}

/* ---------- Mobile-first pass ---------- */
@media(max-width:900px){
  .v70-dashboard-hero{grid-template-columns:1fr!important;min-height:0!important}
  .v70-dashboard-art{min-height:280px!important}
  .v70-learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v70-home-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v70-insight-layout,.v70-secondary-layout{grid-template-columns:1fr!important}
  .v70-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v46-subject-hero{grid-template-columns:1fr!important}
  .v73-subject-hero-image{justify-self:stretch;width:100%;height:clamp(220px,48vw,340px)}

  /* Forms/exams: question first, compact side controls after it */
  .exam-focus .v62-form-layout{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important}
  .exam-focus .v62-question-panel{order:1!important;width:100%!important}
  .exam-focus .v62-form-side{order:2!important;width:100%!important;position:relative!important;top:auto!important}
  .v62-form-side .question-map{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:7px!important;
    max-height:none!important;
    padding:3px 2px 8px!important;
    scroll-snap-type:x proximity;
  }
  .v62-form-side .question-dot{flex:0 0 38px!important;width:38px!important;height:38px!important;aspect-ratio:auto!important;scroll-snap-align:center}
}

@media(max-width:760px){
  html{scroll-padding-top:72px}
  body{overflow-x:hidden}
  .main,.exam-focus .main{padding:14px 12px calc(84px + env(safe-area-inset-bottom))!important}
  .topbar{padding-inline:10px!important}
  .top-search{display:none!important}
  .breadcrumb{min-width:0;overflow:hidden;text-overflow:ellipsis}

  /* Drawer sidebar stays off canvas until menu opens */
  .sidebar{width:min(86vw,300px)!important;padding:22px 16px 18px!important;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 18px 60px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)!important}
  .site-body,.exam-focus .site-body{margin-left:0!important}
  .mobile-overlay.show{display:block!important;position:fixed;inset:0;background:rgba(4,18,27,.42);backdrop-filter:blur(2px);z-index:55}
  .mobile-menu{display:inline-flex!important}
  .nav-link{font-size:13px!important;font-weight:650!important}

  /* Landing */
  .v70-landing-main{width:calc(100% - 18px)!important}
  .v70-hero{padding:25px 18px 18px!important;border-radius:20px!important;margin-top:10px!important}
  .v70-hero h1{font-size:clamp(36px,10vw,50px)!important;letter-spacing:-.018em!important;line-height:1.03!important;margin:16px 0!important}
  .v70-hero-copy>p{font-size:13px!important;line-height:1.62!important}
  .v70-hero-actions .btn{width:100%!important}
  .v70-hero-stats{grid-template-columns:1fr 1fr!important;margin-top:24px!important;padding-top:17px!important}
  .v70-hero-visual{min-height:265px!important;border-radius:18px!important}
  .v70-feature-rail{grid-template-columns:1fr 1fr!important}
  .v70-feature-rail>a{min-width:0!important}
  .v70-section{padding-top:48px!important}
  .v70-section-heading h2,.v70-experience-copy h2,.v70-progress-panel h2,.v70-library-preview h2,.v70-final-cta h2{font-size:30px!important}
  .v70-mode-layout,.v70-experience-section{grid-template-columns:1fr!important}
  .v70-mode-side,.v70-memory-grid,.v70-progress-metrics,.v70-course-grid{grid-template-columns:1fr!important}
  .v70-question-demo{min-width:0}
  .v70-demo-body{grid-template-columns:1fr!important}
  .v70-demo-image{min-height:210px!important}
  .v70-final-cta{padding:28px 20px!important;border-radius:22px!important;gap:20px!important}

  /* Dashboard */
  .v70-dashboard-hero{padding:22px 18px!important;border-radius:20px!important}
  .v70-dashboard-copy h1{font-size:38px!important;letter-spacing:-.04em!important;margin:13px 0 10px!important}
  .v70-dashboard-copy>p{font-size:12px!important;line-height:1.55!important}
  .v70-dashboard-actions{display:grid!important;grid-template-columns:1fr 1fr!important;margin-top:17px!important}
  .v70-dashboard-actions .btn:first-child{grid-column:1/-1}
  .v70-dashboard-actions .btn{width:100%!important}
  .v70-dashboard-metrics{grid-template-columns:1fr 1fr!important;row-gap:14px!important;margin-top:20px!important;padding-top:17px!important}
  .v70-dashboard-metrics>div{border-left:0!important;padding:0!important}
  .v70-dashboard-art{min-height:220px!important;border-radius:18px!important}
  .v70-dashboard-art-card{left:12px!important;right:12px!important;bottom:12px!important;padding:12px!important}
  .v70-home-section{padding-top:30px!important}
  .v70-home-heading{margin-bottom:13px!important}
  .v70-home-heading h2{font-size:21px!important}
  .v70-learning-grid{grid-template-columns:1fr!important;gap:9px!important}
  .v70-learning-card{min-height:0!important;padding:14px!important;grid-template-columns:38px 1fr 16px!important;align-items:center!important}
  .v70-learning-card h3{font-size:14px!important;margin:3px 0!important}
  .v70-learning-card p{font-size:9px!important}
  .v70-home-course-grid{grid-template-columns:1fr!important}
  .v70-home-course{min-height:0!important}
  .v70-home-course-media{height:180px!important}
  .v70-review-panel{grid-template-columns:1fr!important}
  .v70-review-orb{display:none!important}
  .v70-core-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .v70-core-grid>a{min-height:165px!important;padding:15px!important}
  .v70-core-grid h3{font-size:14px!important;margin-top:14px!important}
  .v70-core-grid p{font-size:8.5px!important}

  /* Library */
  .premium-heading,.page-heading{margin-bottom:16px!important;padding-bottom:10px!important}
  .premium-heading h1,.page-heading h1{font-size:28px!important}
  .premium-heading .muted,.page-heading .muted{font-size:12px!important;line-height:1.55!important}
  .library-toolbar{grid-template-columns:1fr!important}
  .library-count{display:none!important}
  .search-large{padding:6px!important;border-radius:13px!important}
  .search-large .btn{padding-inline:14px!important;min-height:42px!important}
  .library-grid{grid-template-columns:1fr!important;gap:13px!important}
  .lesson-cover{height:190px!important}
  .lesson-card-copy{padding:16px!important}
  .lesson-card-copy h3{font-size:16px!important;margin:10px 0 6px!important}
  .lesson-card-copy>p{font-size:11px!important;line-height:1.55!important}
  .v73-reading-cover{margin:-23px -23px 22px!important;height:230px!important;border-radius:14px 14px 0 0!important}
  .reading-layout{grid-template-columns:1fr!important;gap:14px!important}
  .reading{padding:23px!important}
  .reading h1{font-size:27px!important;line-height:1.18!important}
  .reading .summary{font-size:14px!important;line-height:1.65!important;padding-bottom:18px!important}
  .article-body{font-size:15px!important;line-height:1.78!important}
  .reading-aside{position:static!important}

  /* Subject hub */
  .v46-subject-hero{padding:20px 16px!important;border-radius:20px!important;gap:20px!important}
  .v46-subject-hero h1{font-size:32px!important;margin:11px 0 7px!important}
  .v46-subject-hero-copy>p{font-size:12px!important}
  .v46-subject-hero-metrics{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:17px 0!important}
  .v46-subject-hero-metrics span{border:0!important;padding:9px!important;border-radius:12px;background:color-mix(in srgb,var(--bg) 75%,var(--surface));display:block!important}
  .v46-subject-hero-metrics b{display:block!important;font-size:18px!important}
  .v46-subject-hero-metrics small{display:block!important;margin-top:2px!important}
  .v73-subject-hero-image{height:220px!important;border-radius:16px!important}
  .v46-hero-cta{width:100%!important}
  .v46-tool-grid{grid-template-columns:1fr!important}
  .v46-tool-card{min-height:0!important}

  /* Quizizz / practice mobile: compact, continuous flow */
  .v62-quizizz-shell{border-radius:0!important;border-left:0!important;border-right:0!important;margin-inline:-12px!important}
  .v62-quizizz-head{
    position:sticky!important;top:0;z-index:40;
    padding:9px 11px!important;gap:8px!important;align-items:center!important;
  }
  .v62-quizizz-head>div:first-child{min-width:0;gap:8px!important}
  .v62-quizizz-head>div:first-child>span{display:none!important}
  .v62-quizizz-head strong{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54vw}
  .v62-quizizz-head>div:last-child{gap:5px!important;flex:none}
  .v62-streak{display:inline-flex!important;padding:5px 7px!important;font-size:9px!important}
  .v62-quizizz-head .timer{min-width:60px!important;min-height:30px!important;padding:4px 7px!important;font-size:11px!important}
  .v62-quizizz-head .icon-button{width:32px!important;height:32px!important;border-radius:9px!important}
  .v62-quizizz-progress{padding:8px 11px!important;gap:5px!important;position:sticky;top:50px;z-index:35;background:var(--surface)}
  .v62-quizizz-progress>span{font-size:10px!important}
  .v62-quizizz-layout{padding:10px!important}
  .v62-question-panel{padding:15px 12px!important;border-radius:16px!important;scroll-margin-top:96px}
  .v62-question-panel .question-number{margin-bottom:12px!important;gap:8px!important;align-items:center!important}
  .v62-question-panel .question-number .btn{font-size:10px!important;min-height:34px!important;padding:6px 9px!important}
  .v62-question-panel h2{font-size:18px!important;line-height:1.42!important;margin:0 0 13px!important}
  .v62-question-images{grid-template-columns:1fr!important;gap:8px!important;margin:10px 0 12px!important}
  .v62-image-button{min-height:0!important;border-radius:13px!important}
  .v62-image-button img{height:auto!important;max-height:38vh!important;object-fit:contain!important}
  .v62-answer-grid{grid-template-columns:1fr!important;gap:10px!important;margin-top:12px!important}
  .v62-answer-grid .answer-option{
    min-height:54px!important;
    padding:9px 11px!important;
    border-radius:13px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:10px!important;
    font-size:15px!important;
    line-height:1.42!important;
    margin:0!important;
  }
  .v62-answer-grid .answer-letter{width:32px!important;height:32px!important;border-radius:10px!important;font-size:13px!important}
  .practice-feedback{margin-top:10px!important;padding:9px 10px!important;min-height:0!important;font-size:11px!important;border-radius:10px!important}
  .practice-feedback span,.practice-feedback strong{font-size:11px!important}
  .v62-question-panel .question-actions{
    position:sticky!important;
    bottom:calc(58px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
    backdrop-filter:blur(12px);
    margin:13px -4px 0!important;
    padding:8px 4px!important;
    border-top:1px solid var(--line)!important;
    gap:8px!important;
  }
  .v62-question-panel .question-actions .btn{min-width:0!important;min-height:42px!important;flex:1;font-size:11px!important;padding:8px 10px!important}
  .v62-quizizz-footer{
    position:sticky!important;bottom:0;z-index:45;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    gap:7px!important;
  }
  .v62-quizizz-footer .btn{min-height:42px!important;flex:1!important;padding:8px 10px!important}
  .v62-quizizz-footer .save-state{display:none!important}

  /* Form / exam mobile */
  .v62-form-layout{gap:12px!important}
  .v62-form-side{padding:14px!important;border-radius:15px!important;gap:8px!important}
  .v62-form-side>div:first-child{padding-bottom:8px!important}
  .v62-side-stat{padding:6px 0!important}
  .v62-form-side .question-map{margin:1px 0!important}
  .map-legend{font-size:8px!important}
  .v62-form-side .btn{min-height:42px!important}

  /* Memory / survival */
  .v62-memory-hero{padding:17px!important}
  .v62-memory-hero h1{font-size:24px!important}
  .v62-review-actions{gap:7px!important}
  .v62-survival-play{border-radius:15px!important}
  .v62-survival-status{gap:12px!important;font-size:10px!important}
  .v62-survival-question{padding:16px 12px!important}
  .v62-survival-answer{min-height:54px!important;padding:9px 11px!important;grid-template-columns:34px 1fr!important;font-size:14px!important}

  /* Modal */
  dialog#modal{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;padding:18px 15px!important;border-radius:18px!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important}
  .v62-mode-dialog,.v62-settings-dialog,.v62-mini-review,.v62-guide-modal{width:100%!important;max-width:100%!important}
  .v62-mode-choice{padding:11px!important;grid-template-columns:auto 38px minmax(0,1fr)!important;gap:9px!important}
  .v62-mode-icon{width:36px!important;height:36px!important}
  .v62-mode-choice strong{font-size:13px!important}
  .v62-mode-choice small{font-size:9px!important}
  .modal-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .modal-actions .btn{width:100%!important}

  /* Calendar: agenda first on mobile */
  .v50-calendar-head{align-items:flex-start!important;gap:12px!important}
  .v50-calendar-head h1{font-size:28px!important}
  .v50-calendar-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}
  .v50-calendar-actions .btn{width:100%!important}
  .v50-calendar-layout{display:flex!important;flex-direction:column!important;gap:12px!important}
  .v50-day-panel{order:1!important;padding:16px!important}
  .v50-calendar-card{order:2!important;padding:14px!important}
  .v50-calendar-toolbar{gap:7px!important}
  .v50-calendar-toolbar h2{font-size:16px!important;flex:1}
  .v50-weekdays{font-size:8px!important}
  .v50-calendar-grid{gap:4px!important}
  .v50-day{min-height:64px!important;padding:6px!important;border-radius:10px!important}
  .v50-day>span{font-size:10px!important}
  .v50-day small{font-size:7px!important}
  .v50-event{padding:13px!important}
  .v50-event h3{font-size:14px!important}

  /* Admin */
  .v60-admin-split,.v60-library-admin,.admin-grid{grid-template-columns:1fr!important}
  .v60-course-admin-grid{grid-template-columns:1fr!important}
  .v60-yhn-table-wrap,.v72-yhn-table-wrap{max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch}
  .form-row{grid-template-columns:1fr!important}
  .card{max-width:100%}
  .tabs{margin-inline:-2px;padding-inline:2px}
  .tab{font-size:11px!important}

  /* Support never covers content */
  .v46-support{
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  .v46-support-main{width:58px!important;height:58px!important;border-radius:19px!important}
  .v46-support-main .icon{width:22px!important;height:22px!important}
  .v46-support-main b{font-size:6px!important}
}

@media(max-width:430px){
  .v70-feature-rail{grid-template-columns:1fr!important}
  .v70-hero-stats{grid-template-columns:1fr 1fr!important}
  .v70-core-grid{grid-template-columns:1fr!important}
  .v70-dashboard-actions{grid-template-columns:1fr!important}
  .v70-dashboard-actions .btn:first-child{grid-column:auto}
  .v70-dashboard-metrics{grid-template-columns:1fr 1fr!important}
  .v62-streak{font-size:0!important;width:28px!important;height:28px!important;justify-content:center!important;padding:0!important}
  .v62-streak::before{content:"🔥";font-size:13px}
  .v62-quizizz-head strong{max-width:48vw!important;font-size:12px!important}
  .v62-question-panel h2{font-size:17px!important}
  .v62-answer-grid .answer-option{font-size:14px!important;min-height:52px!important}
  .v50-calendar-actions{grid-template-columns:1fr!important}
}

@media(max-width:360px){
  .main,.exam-focus .main{padding-inline:9px!important}
  .v62-quizizz-shell{margin-inline:-9px!important}
  .v62-quizizz-head strong{max-width:42vw!important}
  .v62-answer-grid .answer-option{grid-template-columns:30px minmax(0,1fr)!important;padding:8px 9px!important;gap:8px!important}
  .v62-answer-grid .answer-letter{width:30px!important;height:30px!important}
  .v70-hero h1{font-size:34px!important}
  .v70-dashboard-copy h1{font-size:34px!important}
}

@media(prefers-reduced-motion:reduce){
  .lesson-cover-image,.v73-subject-hero-image img{transition:none!important}
}