/* ─────────────────────────────────────────────────────────────────────────
   responsive.css — phủ responsive cho toàn bộ màn hình (desktop / tablet / mobile)

   Cách tiếp cận: vì các template hiện tại chứa rất nhiều inline `style="..."`
   (port trực tiếp từ shared.jsx prototype), file này dùng attribute-selector
   `[style*="..."]` + `!important` để override theo breakpoint.

   Breakpoints:
     - Mobile : ≤ 640px
     - Tablet : 641–1024px
     - Desktop: ≥ 1025px (không cần override)
   ───────────────────────────────────────────────────────────────────────── */

html, body { max-width: 100%; overflow-x: hidden; }

/* Cho phép wrap nav khi không đủ chỗ */
.gk-scope img,
.gk-scope video,
.gk-scope iframe { max-width: 100%; height: auto; }

/* Hamburger toggle (dùng cho top_nav + app_nav). Desktop: nav luôn hiện, summary ẩn. */
.gk-mobile-toggle { display: none; }
.gk-mobile-menu { display: contents; }
.gk-mobile-menu > summary { display: none; }
.gk-mobile-menu > nav { display: flex !important; }

/* ───────── MOBILE ≤ 640px ───────── */
@media (max-width: 640px) {

  /* ── Section padding override ── */
  .gk-scope [style*="padding:80px 48px"] { padding: 44px 16px !important; }
  .gk-scope [style*="padding:96px 48px"] { padding: 56px 16px !important; }
  .gk-scope [style*="padding:72px 48px"] { padding: 44px 16px !important; }
  .gk-scope [style*="padding:64px 48px"] { padding: 40px 16px !important; }
  .gk-scope [style*="padding:48px 48px"] { padding: 28px 16px !important; }
  .gk-scope [style*="padding:56px 48px"] { padding: 36px 16px !important; }
  .gk-scope [style*="padding:32px 48px"] { padding: 20px 16px !important; }
  .gk-scope [style*="padding:28px 48px"] { padding: 20px 16px !important; }
  .gk-scope [style*="padding:0 48px"]    { padding: 0 16px !important; }
  .gk-scope [style*="padding:18px 48px"] { padding: 14px 16px !important; }
  .gk-scope [style*="padding:48px 56px"] { padding: 28px 18px !important; }
  .gk-scope [style*="padding:14px 32px"] { padding: 12px 14px !important; }
  .gk-scope [style*="padding:24px 48px"] { padding: 18px 16px !important; }
  .gk-scope [style*="padding:28px 40px"] { padding: 18px 14px !important; }
  .gk-scope [style*="padding:28px 32px"] { padding: 20px 16px !important; }
  .gk-scope [style*="padding:36px 32px"] { padding: 22px 16px !important; }
  .gk-scope [style*="padding:40px 48px"] { padding: 24px 16px !important; }
  .gk-scope [style*="padding:48px 24px"] { padding: 28px 16px !important; }
  .gk-scope [style*="padding:48px 32px"] { padding: 28px 16px !important; }
  .gk-scope [style*="padding:60px 24px"] { padding: 36px 16px !important; }
  .gk-scope [style*="padding:80px 24px"] { padding: 44px 16px !important; }

  /* ── Multi-column grids → 1 cột ── */
  .gk-scope [style*="grid-template-columns:repeat(5, 1fr)"],
  .gk-scope [style*="grid-template-columns:repeat(4, 1fr)"],
  .gk-scope [style*="grid-template-columns:repeat(3, 1fr)"],
  .gk-scope [style*="grid-template-columns:repeat(2, 1fr)"],
  .gk-scope [style*="grid-template-columns:1.5fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.4fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.3fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.2fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.1fr 1fr"],
  .gk-scope [style*="grid-template-columns:1fr 1.4fr"],
  .gk-scope [style*="grid-template-columns:1fr 1.1fr"],
  .gk-scope [style*="grid-template-columns:1fr 140px"],
  .gk-scope [style*="grid-template-columns:1fr 180px"],
  .gk-scope [style*="grid-template-columns:1fr 220px"],
  .gk-scope [style*="grid-template-columns:1fr 260px"],
  .gk-scope [style*="grid-template-columns:1fr 280px"],
  .gk-scope [style*="grid-template-columns:1fr 320px"],
  .gk-scope [style*="grid-template-columns:1fr 340px"],
  .gk-scope [style*="grid-template-columns:1fr 360px"],
  .gk-scope [style*="grid-template-columns:220px 1fr"],
  .gk-scope [style*="grid-template-columns:280px 1fr"],
  .gk-scope [style*="grid-template-columns:200px 1fr auto"],
  .gk-scope [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Course/audio item rows: thumbnail gọn lại nhưng vẫn 2 cột */
  .gk-scope [style*="grid-template-columns:120px 1fr auto"] {
    grid-template-columns: 64px 1fr !important;
    grid-row-gap: 8px !important;
  }
  .gk-scope [style*="grid-template-columns:120px 1fr auto"] > a.gk-btn,
  .gk-scope [style*="grid-template-columns:120px 1fr auto"] > .gk-btn {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
  .gk-scope [style*="grid-template-columns:108px 1fr"] {
    grid-template-columns: 64px 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:80px 1fr"] {
    grid-template-columns: 56px 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:56px 1fr auto"] {
    grid-template-columns: 44px 1fr auto !important;
  }
  .gk-scope [style*="grid-template-columns:52px 1fr"] {
    grid-template-columns: 40px 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:48px 1fr auto auto"] {
    grid-template-columns: 40px 1fr auto !important;
    grid-row-gap: 6px !important;
  }
  .gk-scope [style*="grid-template-columns:48px 1fr auto auto"] > :last-child {
    grid-column: 2 / -1 !important;
  }
  .gk-scope [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Exam grid 6 cột → 5 cột (mobile vẫn dùng dạng grid) */
  .gk-scope [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* Exam main grid (1fr 320px) → 1 cột, sticky bỏ */
  .gk-scope main[style*="grid-template-columns:1fr 320px"],
  .gk-scope main[style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .gk-scope main[style*="grid-template-columns:1fr 320px"] aside[style*="position:sticky"],
  .gk-scope main[style*="grid-template-columns:1fr 360px"] aside[style*="position:sticky"] {
    position: static !important;
  }

  /* Login/signup grid: ẩn branded panel (background:var(--primary)) trên mobile */
  .gk-scope div[style*="grid-template-columns:1fr 1.1fr"] > div[style*="background:var(--primary)"],
  .gk-scope div[style*="grid-template-columns:1.1fr 1fr"] > div[style*="background:var(--primary)"] {
    display: none !important;
  }

  /* Typography giảm bớt */
  .gk-scope .gk-display { font-size: 36px !important; line-height: 1.08 !important; }
  .gk-scope .gk-h1      { font-size: 26px !important; }
  .gk-scope .gk-h2      { font-size: 20px !important; }

  /* Headers (top_nav, app_nav, exam header) */
  .gk-scope header[style*="height:72px"],
  .gk-scope header[style*="height:60px"],
  .gk-scope header[style*="height:64px"] {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .gk-scope header[style*="padding:14px 32px"] {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
  }

  /* Nav: ẩn khi đóng, panel khi mở — qua <details>. */
  .gk-mobile-menu { display: block !important; position: relative; order: 99; }
  .gk-mobile-menu > summary { display: grid !important; }
  .gk-mobile-menu > nav { display: none !important; }
  .gk-mobile-menu[open] > nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 6px 0 0 !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 8px;
    z-index: 50;
  }
  .gk-mobile-menu[open] > nav a {
    width: 100%;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
  .gk-mobile-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 36px; height: 36px;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    background: var(--surface);
  }
  .gk-mobile-menu > summary::-webkit-details-marker { display: none; }
  .gk-mobile-menu > summary > svg { display: block; }

  /* Header bottom bar (.gk-header-actions) — đẩy nút action xuống đầy hàng */
  .gk-scope header > div[style*="margin-left:auto"] {
    margin-left: auto !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  /* Trên login form: nút Google/FB & form khô đẹp */
  .gk-scope form[style*="display:flex"][style*="flex-direction:column"] { width: 100% !important; }

  /* Exam header timer pill cô đặc */
  .gk-scope #gk-exam-timer-pill { padding: 6px 10px !important; gap: 8px !important; }
  .gk-scope #gk-exam-timer { font-size: 14px !important; }

  /* Exam result grid 200px 1fr auto → stack */
  .gk-scope [style*="grid-template-columns:200px 1fr auto"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 16px !important;
  }
  .gk-scope [style*="grid-template-columns:200px 1fr auto"] > div:last-child {
    text-align: left !important;
  }

  /* Audio/Video featured hero side */
  .gk-scope [style*="grid-template-columns:1fr 180px"] > div:last-child .gk-ja-serif {
    font-size: 84px !important;
  }

  /* Footer columns: dồn label, tăng khoảng cách giữa nhóm */
  .gk-scope footer[style*="padding:48px 32px"] {
    padding: 36px 18px 24px !important;
  }
  .gk-scope footer > div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    gap: 28px !important;
  }
  .gk-scope footer > div[style*="margin-top:40px"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Stack greeting row + dashboard CTA */
  .gk-scope [style*="display:flex"][style*="justify-content:space-between"][style*="align-items:flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* Hide rotated decorative cards trong hero để layout không tràn */
  .gk-scope div[style*="transform:rotate(4deg)"],
  .gk-scope div[style*="transform:rotate(-5deg)"],
  .gk-scope div[style*="transform:rotate(-4deg)"] {
    position: relative !important;
    transform: none !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 14px !important;
  }
  /* Hero visual container không cần height fix nữa */
  .gk-scope div[style*="height:460px"],
  .gk-scope div[style*="height:440px"] {
    height: auto !important;
  }

  /* Login: panel branded (cột phải) — đã ẩn ở mobile, kanji decoration cũng off */
  .gk-scope div[style*="font-size:540px"] { display: none !important; }

  /* CTA strip (ginou home) — dồn cột */
  .gk-scope section[style*="background:var(--primary)"] > div[style*="display:flex"][style*="gap:40px"] {
    flex-direction: column !important;
    gap: 18px !important;
    align-items: flex-start !important;
  }

  /* Hide subtle decorative grid backgrounds for perf */
  .gk-grid-bg { background-size: 32px 32px !important; }

  /* Pagination wrap */
  .gk-scope div[style*="justify-content:center"][style*="margin-top:48px"] { flex-wrap: wrap !important; }

  /* Flashcard stage: thu gọn */
  .gk-fc-stage { max-width: 100% !important; }
  .gk-scope #gk-fc-kanji { font-size: 64px !important; }
  .gk-scope #gk-fc-meaning { font-size: 20px !important; }
  .gk-scope #gk-fc-hiragana { font-size: 22px !important; }
}

/* ───────── TABLET 641–1024px ───────── */
@media (min-width: 641px) and (max-width: 1024px) {

  /* Section padding compress vừa phải */
  .gk-scope [style*="padding:80px 48px"] { padding: 60px 28px !important; }
  .gk-scope [style*="padding:96px 48px"] { padding: 72px 28px !important; }
  .gk-scope [style*="padding:72px 48px"] { padding: 56px 28px !important; }
  .gk-scope [style*="padding:64px 48px"] { padding: 48px 28px !important; }
  .gk-scope [style*="padding:48px 48px"] { padding: 36px 28px !important; }
  .gk-scope [style*="padding:56px 48px"] { padding: 44px 28px !important; }
  .gk-scope [style*="padding:32px 48px"] { padding: 24px 28px !important; }
  .gk-scope [style*="padding:28px 48px"] { padding: 22px 28px !important; }
  .gk-scope [style*="padding:0 48px"]    { padding: 0 28px !important; }
  .gk-scope [style*="padding:18px 48px"] { padding: 14px 28px !important; }
  .gk-scope [style*="padding:40px 48px"] { padding: 30px 28px !important; }
  .gk-scope [style*="padding:48px 32px"] { padding: 36px 24px !important; }
  .gk-scope [style*="padding:48px 56px"] { padding: 36px 32px !important; }
  .gk-scope [style*="padding:28px 40px"] { padding: 22px 24px !important; }
  .gk-scope [style*="padding:24px 48px"] { padding: 22px 28px !important; }
  .gk-scope [style*="padding:28px 32px"] { padding: 22px 24px !important; }
  .gk-scope [style*="padding:36px 32px"] { padding: 28px 24px !important; }
  .gk-scope [style*="padding:48px 24px"] { padding: 36px 24px !important; }
  .gk-scope [style*="padding:60px 24px"] { padding: 44px 24px !important; }
  .gk-scope [style*="padding:80px 24px"] { padding: 60px 24px !important; }

  /* Grid downscale */
  .gk-scope [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .gk-scope [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gk-scope [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2-col asym → đứng cạnh nhưng cột phải hẹp hơn */
  .gk-scope [style*="grid-template-columns:1fr 360px"],
  .gk-scope [style*="grid-template-columns:1fr 340px"],
  .gk-scope [style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr 260px !important;
  }
  .gk-scope [style*="grid-template-columns:1fr 280px"],
  .gk-scope [style*="grid-template-columns:1fr 260px"] {
    grid-template-columns: 1fr 220px !important;
  }
  .gk-scope [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 220px 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 180px 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:1.5fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.4fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.3fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.2fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.1fr 1fr"],
  .gk-scope [style*="grid-template-columns:1fr 1.4fr"],
  .gk-scope [style*="grid-template-columns:1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer 4 col → 2 col */
  .gk-scope [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Course card row: giữ 3 cột nhưng nút phải gọn hơn */
  .gk-scope [style*="grid-template-columns:120px 1fr auto"] {
    grid-template-columns: 96px 1fr auto !important;
  }

  /* Typography đỡ to */
  .gk-scope .gk-display { font-size: 48px !important; }
  .gk-scope .gk-h1      { font-size: 34px !important; }

  /* Header: gọn padding bên */
  .gk-scope header[style*="padding:0 32px"] { padding: 0 20px !important; }
  .gk-scope header[style*="padding:14px 32px"] { padding: 12px 20px !important; }

  /* Hero rotated decorative card scale xuống một chút */
  .gk-scope div[style*="height:460px"],
  .gk-scope div[style*="height:440px"] { height: 380px !important; }
}