/* Aptis Crack — refined responsive layer
   A calmer editorial layout for phones, tablets and desktop. */
:root {
  --ui-ink: #17231f;
  --ui-muted: #66736d;
  --ui-line: #dfe7e2;
  --ui-paper: #ffffff;
  --ui-canvas: #f4f7f5;
  --ui-accent: #087f5b;
  --ui-accent-dark: #056044;
  --ui-accent-soft: #e9f5ef;
  --ui-radius: 12px;
  --ui-shadow: 0 8px 24px rgba(22, 45, 35, .07);
}

html { background: var(--ui-canvas); }
body { color: var(--ui-ink); background: var(--ui-canvas); }
.site-nav { background: rgba(255,255,255,.96); border-bottom-color: var(--ui-line); backdrop-filter: blur(16px); }
.nav-inner { height: 68px; max-width: 1240px; }
.nav-logo-icon { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.nav-logo-text::after { color: var(--ui-ink); -webkit-text-fill-color: var(--ui-ink); text-shadow: none; }
.nav-logo-text::before { color: var(--ui-accent); -webkit-text-fill-color: var(--ui-accent); }
.nav-links a { border-radius: 8px; color: #53615b; font-weight: 600; letter-spacing: -.01em; }
.nav-links a .ic { display: none; }
.nav-links a:hover { color: var(--ui-ink); background: #f1f6f3; }
.nav-links a.active { color: var(--ui-accent-dark); background: var(--ui-accent-soft); }
.nav-user { border-color: var(--ui-line); }

.page-container { max-width: 1240px; padding-top: 48px; }
.page-hero { padding-top: 18px; }
.hero-grid { gap: 64px; }
.page-hero-title { color: var(--ui-ink); letter-spacing: -.035em; }
.page-hero-title span { color: var(--ui-accent); }
.page-hero-title span::after { background: #ccebdc; height: 7px; bottom: 3px; }
.page-hero-subtitle { color: var(--ui-muted); line-height: 1.75; }
.page-hero-badge { color: var(--ui-accent-dark); border-color: #bfe3d0; background: #f8fcfa; box-shadow: none; }
.btn-primary { background: var(--ui-accent); box-shadow: 0 5px 12px rgba(8,127,91,.18); }
.btn-primary:hover:not(:disabled) { background: var(--ui-accent-dark); box-shadow: 0 7px 16px rgba(8,127,91,.22); }
.hero-stats { box-shadow: var(--ui-shadow); border-color: var(--ui-line); }
.stat-num { color: var(--ui-accent-dark); }
.section-title { color: var(--ui-ink); }
.section-title .ic { display: none; }
.section-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--ui-accent);
}
.section-sub { color: var(--ui-muted); line-height: 1.65; }

.skills-grid { gap: 16px; grid-template-columns: repeat(5, 1fr); max-width: 1320px; }
.skill-card { border-radius: var(--ui-radius); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.skill-card.available:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,45,35,.11); }
.skill-card-media { height: 140px; padding: 12px 18px 8px; }
.skill-card-body { padding: 17px 18px 18px; }
.skill-title { font-size: 18px; margin-bottom: 6px; }
.skill-desc { font-size: 13.5px; line-height: 1.55; }
.skill-meta { margin-top: 13px; padding-top: 13px; }
.skill-cta { margin-top: 12px; font-size: 13px; }
.skill-title { color: var(--ui-ink); }
.skill-desc { color: var(--ui-muted); }
.skill-meta-item { background: #f7faf8; border-color: #e6eee9; }
.skill-cta { color: var(--ui-accent-dark); }

#card-predict { --accent: #e11d48; --accent-soft: #fdeef2; }
#card-predict .skill-cta { color: #be123c; }
#card-predict .skill-meta-item { color: #9f1239; background: #fdf2f6; border-color: #fbdce6; }
#card-predict:not(.available) { opacity: .94; }
#card-predict:not(.available):hover { transform: none; }

.card, .profile-card, .profile-card-block, .auth-shell, .exam-intro-content, .exam-inst-container, .result-card { border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.form-input, .form-select, .form-textarea { border-color: #d7e1db; border-radius: 9px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(8,127,91,.12); }

/* Exams: reduce visual noise and keep controls usable on touch screens. */
.exam-header { background: rgba(255,255,255,.98); border-bottom-color: var(--ui-line); }
.exam-content { max-width: 920px; }
.exam-footer { background: rgba(255,255,255,.98); border-top-color: var(--ui-line); }
.btn-prev, .btn-next, .btn-exit, .btn-qlist { min-height: 42px; border-radius: 9px; }

/* Part / đề picker: dùng chữ số thay icon, đường nhấn bên trái */
.part-opt { border-left: 3px solid transparent; }
.part-opt:hover { border-left-color: var(--ui-accent); }
.part-opt.selected { border-left-color: var(--ui-accent); }
.part-opt-num { font-variant-numeric: tabular-nums; letter-spacing: .07em; }

/* Footer gọn, ít màu */
.site-footer { letter-spacing: .01em; }

@media (max-width: 900px) {
  .nav-inner { padding-left: 18px; padding-right: 18px; }
  .hero-grid { gap: 26px; }
  .hero-art { max-width: 390px; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav-inner { height: 60px; padding: 0 12px; gap: 8px; }
  .nav-logo-icon { width: 38px; height: 38px; border-radius: 10px; padding: 3px; }
  .nav-right { gap: 6px; }
  .nav-user { padding-right: 7px; }
  .nav-toggle { width: 36px; height: 36px; border-radius: 9px; }
  .site-nav.nav-open .nav-links { top: 60px; padding: 8px 12px 12px; }
  .site-nav.nav-open .nav-links a { min-height: 44px; }
  .page-container { padding: 22px 14px 46px; }
  .page-hero { padding-top: 8px; }
  .hero-grid { gap: 18px; }
  .hero-art { order: -1; max-width: 280px; margin: 0 auto; }
  .page-hero-title { font-size: clamp(28px, 8vw, 36px); line-height: 1.12; margin-bottom: 13px; }
  .page-hero-subtitle { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
  .hero-cta, .hero-cta .btn { width: 100%; }
  .hero-cta .btn { min-height: 46px; }
  .hero-stats { margin-top: 24px; }
  .stat-item { min-width: 50%; padding: 13px 7px; }
  .stat-item:nth-child(3)::before { display: none; }
  .section-title { margin-top: 34px; font-size: 18px; }
  .section-title::before { height: 19px; width: 4px; }
  .skills-grid { gap: 12px; }
  #mode-cards-grid { grid-template-columns: 1fr !important; }
  .mode-card { min-height: 118px; padding: 14px; }
  .filter-bar { overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; }
  .filter-btn { flex: 0 0 auto; min-height: 40px; }
  .skill-card-media { height: 118px; padding: 8px 20px 4px; }
  .skill-card-body { padding: 14px 15px 16px; }
  .skill-card-badge { top: 9px; right: 9px; padding: 3px 8px; font-size: 10px; }
  .skill-title { font-size: 17px; }
  .skill-desc { font-size: 13px; line-height: 1.5; }
  .skill-meta { margin-top: 11px; padding-top: 11px; }
  .skill-meta-item { padding: 4px 8px; font-size: 11px; }
  .exam-header { padding: 8px 10px; }
  .exam-header-center { order: 3; }
  .exam-content { padding-left: 13px; padding-right: 13px; }
  .exam-footer { padding: 9px 10px; gap: 6px; }
  .exam-footer .btn, .exam-footer button { min-height: 42px; }
  .exam-footer .btn-prev, .exam-footer .btn-next { flex: 1 1 calc(50% - 6px); }
  .exam-footer .btn-exit, .exam-footer .btn-qlist { flex: 0 0 auto; }
  .btn-exit-text, .btn-qlist { font-size: 12px; }
  .modal, .custom-modal, .result-card { width: calc(100vw - 24px); max-width: none !important; border-radius: 14px; }
  .modal-footer, .modal-actions { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn, .modal-actions .btn { flex: 1; min-height: 42px; }
}
@media (max-width: 380px) {
  .nav-user > span { display: none; }
  .nav-user { border: 0; padding: 3px; background: transparent; }
  .page-container { padding-left: 10px; padding-right: 10px; }
  .page-hero-title { font-size: 27px; }
  .stat-label { font-size: 10.5px; }
}

/* Trang luyện tập: mode-card dùng số 01/02/03 thay emoji */
.mode-card { border-radius: var(--ui-radius); }
.mode-card-icon {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 8px;
  padding: 4px 9px;
  margin-bottom: 10px;
  width: fit-content;
  font-variant-numeric: tabular-nums;
}
.mode-card.active .mode-card-icon,
.mode-card-primary .mode-card-icon { background: var(--ui-accent); color: #fff; }
.mode-card-title { letter-spacing: -.01em; }
.mode-card-tag { font-variant-numeric: tabular-nums; }

/* Tiêu đề các trang thi (intro): thanh nhấn bên trái */
.exam-intro-subtitle {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   MOTION LAYER — chuyển động có chủ đích, nhanh gọn, không lố
   ============================================================ */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .16s;
  --dur-med: .28s;
  --dur-slow: .55s;
}

/* Vào trang: hero trượt lên mượt hơn, ảnh xuất hiện sau một nhịp */
.hero-copy { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.hero-art  { animation: fadeUp var(--dur-slow) .1s var(--ease-out) both; }
.hero-stats { animation: fadeUp var(--dur-slow) .18s var(--ease-out) both; }

/* Thẻ kỹ năng: xuất hiện so le 60ms, hover nâng nhẹ + ảnh phóng rất khẽ
   (dùng backwards thay both để sau khi chạy xong, hover transform không bị animation giữ chặn) */
.skill-card:nth-child(1) { animation: fadeUp .45s .05s var(--ease-out) backwards; }
.skill-card:nth-child(2) { animation: fadeUp .45s .11s var(--ease-out) backwards; }
.skill-card:nth-child(3) { animation: fadeUp .45s .17s var(--ease-out) backwards; }
.skill-card:nth-child(4) { animation: fadeUp .45s .23s var(--ease-out) backwards; }
.skill-card:nth-child(5) { animation: fadeUp .45s .29s var(--ease-out) backwards; }
.skill-card-media img { transition: transform var(--dur-slow) var(--ease-out); }
.skill-card.available:hover .skill-card-media img { transform: translateY(-3px) scale(1.02); }

/* Chế độ luyện (01/02/03): so le nhẹ, góc nhấn đổi màu mượt */
.mode-card:nth-child(1) { animation: fadeUp .4s .04s var(--ease-out) backwards; }
.mode-card:nth-child(2) { animation: fadeUp .4s .1s var(--ease-out) backwards; }
.mode-card:nth-child(3) { animation: fadeUp .4s .16s var(--ease-out) backwards; }
.mode-card-icon { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* Micro-interaction: nút nhấn có "trọng lượng" */
.btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn-primary:active:not(:disabled) { box-shadow: 0 3px 8px rgba(8,127,91,.16); }

/* Nav link: chấm nhấn nhỏ mọc ra khi hover/active */
.nav-links a { position: relative; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ui-accent);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: translateX(-50%) scale(1); }

/* Ô đề/Part: rê chuột dịch phải 2px — cảm giác "đẩy" vào danh sách */
.part-opt { transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
a.part-opt:hover { transform: translateX(2px); }

/* Nút lọc Part: đổi màu mượt */
.filter-btn { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

/* Bàn phím: vòng focus rõ ràng cho người dùng bàn phím */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Người dùng bật "giảm chuyển động" -> tắt hết animation trang trí */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   FINISHING PASS — chi tiết nhỏ của người craft
   ============================================================ */

/* Màu khi người dùng bôi đen chữ: đúng tông xanh lá của site */
::selection { background: #b7e6d4; color: #10231c; }

/* Thanh cuộn mảnh, màu trung tính — không phá bố cục */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9d6d0; border-radius: 8px; border: 2px solid #f4f7f5; }
::-webkit-scrollbar-thumb:hover { background: #aebfb7; }

/* Nav xuất hiện: cả thanh trượt xuống nhẹ, các link hiện tuần tự */
.site-nav { animation: navDrop .4s var(--ease-out) both; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav-links li:nth-child(1) { animation: fadeUp .4s .05s var(--ease-out) both; }
.nav-links li:nth-child(2) { animation: fadeUp .4s .1s var(--ease-out) both; }
.nav-links li:nth-child(3) { animation: fadeUp .4s .15s var(--ease-out) both; }
.nav-links li:nth-child(4) { animation: fadeUp .4s .2s var(--ease-out) both; }
.nav-links li:nth-child(5) { animation: fadeUp .4s .25s var(--ease-out) both; }

/* Hero chữ hiện theo nhịp: badge → tiêu đề → mô tả → nút */
@media (min-width: 641px) {
  .page-hero .page-hero-badge { animation: fadeUp .5s .05s var(--ease-out) both; }
  .page-hero .page-hero-title { animation: fadeUp .55s .12s var(--ease-out) both; }
  .page-hero .page-hero-subtitle { animation: fadeUp .5s .2s var(--ease-out) both; }
  .page-hero .hero-cta { animation: fadeUp .5s .28s var(--ease-out) both; }
}

/* Thẻ lồng nhau: giữ layout ổn định, không tạo lớp vẽ thừa */
.nav-links li { display: inline-flex; }

/* ============================================================
   RESULT SCREEN — nhóm nút thống nhất, phân cấp rõ: 1 hành động
   chính (nền đậm), còn lại là phụ. Dùng chung 4 trang thi.
   ============================================================ */

/* Vào màn: các khối trong thẻ trượt lên so le */
.result-overlay.show .result-card > * { animation: fadeUp .45s var(--ease-out) backwards; }
.result-overlay.show .result-card > *:nth-child(1) { animation-delay: .05s; }
.result-overlay.show .result-card > *:nth-child(2) { animation-delay: .11s; }
.result-overlay.show .result-card > *:nth-child(3) { animation-delay: .17s; }
.result-overlay.show .result-card > *:nth-child(4) { animation-delay: .23s; }
.result-overlay.show .result-card > *:nth-child(5) { animation-delay: .29s; }
.result-overlay.show .result-card > *:nth-child(6) { animation-delay: .35s; }
.result-overlay.show .result-card > *:nth-child(7) { animation-delay: .41s; }

/* Hai nhóm nút dùng chung một khung: cùng khoảng cách, cùng chiều cao */
.result-actions,
.grade-mode-row { display: flex; gap: 10px; justify-content: center; }

/* Nút phụ/Xem lại: chuyển từ dọc sang ngang (icon + chữ trên một hàng) */
.btn-res {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  min-height: 48px;
  border-radius: 12px;
}
.btn-res-icon .ic { width: 19px; height: 19px; }
.btn-res-label { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* Nút chính của màn kết quả: bỏ bóng đậm, gọn hơn */
.btn-res-primary { box-shadow: 0 2px 8px rgba(8,127,91,.18); }

/* Nút chọn cách chấm (Writing/Speaking): cùng chiều cao với nhóm trên */
.grade-mode-row .btn { min-height: 48px; padding: 12px 20px; }

/* Mobile: mỗi nút chiếm một hàng, đều nhau */
@media (max-width: 480px) {
  .result-actions,
  .grade-mode-row { flex-direction: column; align-items: stretch; }
  .btn-res, .grade-mode-row .btn { justify-content: center; width: 100%; }
}