/* ─────────────────────────────────────────────────────────────────────────
   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 (chuẩn dự án):
     - Mobile : ≤ 640px
     - Tablet : 641–1024px
     - Desktop: ≥ 1025px (không cần override)

   Lưu ý: các bộ override `.gk-mgmt-main`, `.gk-admin-main` áp cho /giao-vien/
   và /admin/ — không bọc `.gk-scope` được nên phải selector song song.
   ───────────────────────────────────────────────────────────────────────── */

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; }

/* Tất cả iframe (PDF viewer, YouTube) — chiều cao quá lớn sẽ tràn mobile */
.gk-scope iframe[style*="height:720px"],
.gk-scope iframe[style*="height:680px"],
.gk-scope iframe[style*="height:640px"],
.gk-scope iframe[style*="height:600px"] { height: 70vh !important; min-height: 360px; }

/* 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:56px"]      { padding: 32px 18px !important; }
  .gk-scope [style*="padding:32px"]      { padding: 18px 16px !important; }
  .gk-scope [style*="padding:40px"]      { padding: 22px 16px !important; }
  .gk-scope [style*="padding:24px"]      { padding: 16px 14px !important; }

  /* Exam main inline padding 28px 40px → 14px 14px */
  .gk-scope main[style*="padding:28px 40px"] { padding: 14px 14px !important; }
  /* Direct children of <main> grid — cho phép shrink khi nội dung dài */
  .gk-scope main[style*="grid-template-columns"] > * { min-width: 0 !important; }
  .gk-scope main > div[style*="max-width:760px"] { max-width: 100% !important; min-width: 0 !important; }

  /* Cell trong exam grid (numbers) — đảm bảo readable trên 4 cột */
  .gk-scope #gk-exam-grid > * {
    min-width: 0 !important;
    font-size: 13px !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 → 4 cột (đủ rộng để bấm trên 360px) */
  .gk-scope [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Form grid 2–3 cột asymmetric (teacher wizard, form builder) → stack */
  .gk-scope [style*="grid-template-columns:2fr 1fr"],
  .gk-scope [style*="grid-template-columns:1fr 2fr"],
  .gk-scope [style*="grid-template-columns:1fr 1fr 1fr"],
  .gk-scope [style*="grid-template-columns:1fr 2fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.3fr 1fr"],
  .gk-scope [style*="grid-template-columns:1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Auto-fill grids (pricing cards, live class list) — ép 1 cột nếu min ≥ 260px */
  .gk-scope [style*="minmax(380px"],
  .gk-scope [style*="minmax(360px"],
  .gk-scope [style*="minmax(320px"],
  .gk-scope [style*="minmax(300px"],
  .gk-scope [style*="minmax(280px"],
  .gk-scope [style*="minmax(260px"] {
    grid-template-columns: 1fr !important;
  }
  /* Min < 260px → cho phép 2 cột nếu vừa, không tràn */
  .gk-scope [style*="minmax(240px"],
  .gk-scope [style*="minmax(220px"] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }

  /* Exam result layout 4 cột (score ring + meta + actions) → stack */
  .gk-scope [style*="grid-template-columns:200px 1fr 180px auto"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 16px !important;
  }

  /* Sidebar 220px (profile tabs) → stack */
  .gk-scope [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat tile grids ở /giao-vien/ + /admin/ (ngoài .gk-scope) */
  .gk-mgmt-main [style*="grid-template-columns:repeat(5, 1fr)"],
  .gk-mgmt-main [style*="grid-template-columns:repeat(4, 1fr)"],
  .gk-mgmt-main [style*="grid-template-columns:repeat(3, 1fr)"],
  .gk-mgmt-main [style*="grid-template-columns:1fr 1fr"],
  .gk-mgmt-main [style*="grid-template-columns:2fr 1fr"],
  .gk-mgmt-main [style*="grid-template-columns:1fr 2fr"],
  .gk-mgmt-main [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Decoration kanji cỡ đại — luôn ẩn trên mobile (nếu cần) */
  .gk-scope [style*="font-size:540px"],
  .gk-scope [style*="font-size:320px"],
  .gk-scope [style*="font-size:280px"],
  .gk-scope [style*="font-size:240px"],
  .gk-scope [style*="font-size:220px"],
  .gk-scope [style*="font-size:200px"] { display: none !important; }
  /* Kanji vừa cỡ (hub/detail) — chỉ thu nhỏ thay vì ẩn */
  .gk-scope [style*="font-size:180px"] { font-size: 96px !important; line-height: 1 !important; }
  .gk-scope [style*="font-size:160px"] { font-size: 84px !important; line-height: 1 !important; }
  .gk-scope [style*="font-size:140px"] { font-size: 72px !important; line-height: 1 !important; }
  .gk-scope [style*="font-size:120px"] { font-size: 64px !important; line-height: 1 !important; }
  .gk-scope [style*="font-size:100px"] { font-size: 56px !important; line-height: 1 !important; }

  /* Decoration card absolute (hero rotated + showcase) — đã có handler cho rotate(),
     bổ sung cho card không rotate (ginou home showcase 340px) */
  .gk-scope div[style*="position:absolute"][style*="width:340px"],
  .gk-scope div[style*="position:absolute"][style*="width:320px"],
  .gk-scope div[style*="position:absolute"][style*="width:280px"],
  .gk-scope div[style*="position:absolute"][style*="width:240px"],
  .gk-scope div[style*="position:absolute"][style*="width:220px"],
  .gk-scope div[style*="position:absolute"][style*="width:200px"],
  .gk-scope div[style*="position:absolute"][style*="width:180px"],
  .gk-scope div[style*="position:absolute"][style*="width:170px"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 14px !important;
    transform: none !important;
  }

  /* Tooltip absolute (home hero) — chuyển static để không tràn footer */
  .gk-scope [style*="position:absolute"][style*="max-width:180px"] {
    position: relative !important;
    inset: auto !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
  }

  /* Floating side-widget (exam calculator) — chuyển thành full-width bottom sheet */
  .gk-scope [style*="position:fixed"][style*="width:260px"],
  .gk-scope [style*="position:fixed"][style*="width:280px"],
  .gk-scope [style*="position:fixed"][style*="width:300px"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.18) !important;
    z-index: 80 !important;
  }

  /* Table tràn ngang — chuyển khối block-scroll */
  .gk-scope table,
  .gk-mgmt-main table,
  .gk-admin-main table#result_list,
  .gk-admin-main table.module {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    white-space: nowrap;
  }
  .gk-scope table.gk-table--wrap,
  .gk-mgmt-main table.gk-table--wrap { white-space: normal; }

  /* td.max-width cố định gây overflow text */
  .gk-scope td[style*="max-width:400px"],
  .gk-mgmt-main td[style*="max-width:400px"] {
    max-width: 220px !important;
    word-break: break-word;
  }

  /* Image hero/avatar lớn trong admin (gou-kun thumb 96px OK, mascot 140px) */
  .gk-scope img[style*="width:140px"],
  .gk-mgmt-main img[style*="width:140px"] { width: 96px !important; }

  /* Search form fixed-width (articles list) */
  .gk-scope form[style*="width:260px"],
  .gk-scope form[style*="width:280px"],
  .gk-scope [style*="width:260px"][style*="margin-left:auto"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Audio player min-width:280px → cho phép thu xuống 0 */
  .gk-scope audio[style*="min-width:280px"],
  .gk-scope [style*="min-width:280px"] { min-width: 0 !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;
  }
  /* Sticky aside/div bên trong bất kỳ grid 1fr Npx (documents, audios, video detail) */
  .gk-scope [style*="grid-template-columns:1fr 320px"] [style*="position:sticky"],
  .gk-scope [style*="grid-template-columns:1fr 360px"] [style*="position:sticky"],
  .gk-scope [style*="grid-template-columns:1fr 340px"] [style*="position:sticky"],
  .gk-scope [style*="grid-template-columns:1fr 280px"] [style*="position:sticky"],
  .gk-scope [style*="grid-template-columns:1fr 260px"] [style*="position:sticky"] {
    position: static !important;
    top: auto !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: 30px !important; line-height: 1.1 !important; word-break: break-word; }
  .gk-scope .gk-h1      { font-size: 24px !important; word-break: break-word; }
  .gk-scope .gk-h2      { font-size: 20px !important; }
  /* h1 inline cố định font-size lớn (login/signup/hub) */
  .gk-scope h1[style*="font-size:40px"],
  .gk-scope h1[style*="font-size:38px"],
  .gk-scope h1[style*="font-size:36px"],
  .gk-scope h2[style*="font-size:40px"],
  .gk-scope h2[style*="font-size:36px"] {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  .gk-scope h1[style*="font-size:30px"],
  .gk-scope h1[style*="font-size:28px"],
  .gk-scope h2[style*="font-size:30px"],
  .gk-scope h2[style*="font-size:28px"] { font-size: 22px !important; word-break: break-word; }

  /* Câu hỏi JS-render với .gk-ja inline font-size — wrap kỹ */
  .gk-scope #gk-exam-question-card .gk-ja,
  .gk-scope .gk-ja[style*="font-size:30px"],
  .gk-scope .gk-ja[style*="font-size:34px"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !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; }

  /* Hero CTA buttons: wrap khi không vừa */
  .gk-scope div[style*="display:flex"][style*="gap:10px"]:not([style*="flex-direction"]),
  .gk-scope div[style*="display:flex"][style*="gap:12px"]:not([style*="flex-direction"]),
  .gk-scope div[style*="display:flex"][style*="gap:14px"]:not([style*="flex-direction"]) {
    flex-wrap: wrap !important;
  }
  /* gk-btn: nếu nằm trong wrap flex và mobile, full-width row */
  .gk-scope .gk-btn { white-space: normal !important; }
  .gk-scope .gk-btn-lg { padding: 0 18px !important; font-size: 15px !important; height: 48px !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; }

  /* Login/Signup tablet: ẩn branded panel (kanji decoration) — chỉ giữ form */
  .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;
  }
  .gk-scope div[style*="grid-template-columns:1fr 1.1fr"],
  .gk-scope div[style*="grid-template-columns:1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat tile grids ở /giao-vien/ + /admin/ tablet → 2 cột */
  .gk-mgmt-main [style*="grid-template-columns:repeat(5, 1fr)"],
  .gk-mgmt-main [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gk-mgmt-main [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gk-mgmt-main [style*="grid-template-columns:1fr 2fr"],
  .gk-mgmt-main [style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Form grid asym ở .gk-scope tablet */
  .gk-scope [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .gk-scope [style*="grid-template-columns:1fr 2fr 1fr"],
  .gk-scope [style*="grid-template-columns:1fr 2fr"],
  .gk-scope [style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Auto-fill grids — ép xuống 2 cột (mỗi cột ~340–400px tablet) */
  .gk-scope [style*="minmax(380px"],
  .gk-scope [style*="minmax(360px"],
  .gk-scope [style*="minmax(320px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Kanji vừa cỡ — thu 60% cho tablet */
  .gk-scope [style*="font-size:540px"] { font-size: 280px !important; }
  .gk-scope [style*="font-size:320px"] { font-size: 200px !important; }
  .gk-scope [style*="font-size:280px"] { font-size: 180px !important; }
  .gk-scope [style*="font-size:240px"] { font-size: 160px !important; }
  .gk-scope [style*="font-size:220px"] { font-size: 150px !important; }
  .gk-scope [style*="font-size:200px"] { font-size: 140px !important; }
  .gk-scope [style*="font-size:180px"] { font-size: 130px !important; }
  .gk-scope [style*="font-size:160px"] { font-size: 120px !important; }

  /* Decoration card absolute width — scale 70% */
  .gk-scope div[style*="position:absolute"][style*="width:340px"] { width: 240px !important; }
  .gk-scope div[style*="position:absolute"][style*="width:320px"] { width: 220px !important; }
  .gk-scope div[style*="position:absolute"][style*="width:280px"] { width: 200px !important; }
  .gk-scope div[style*="position:absolute"][style*="width:240px"] { width: 180px !important; }

  /* Sidebar 220px → giữ 180px tablet */
  .gk-scope [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 180px 1fr !important;
  }

  /* Iframe height tablet — 75vh */
  .gk-scope iframe[style*="height:720px"],
  .gk-scope iframe[style*="height:680px"],
  .gk-scope iframe[style*="height:640px"] { height: 75vh !important; min-height: 440px; }

  /* Floating exam calculator — thu hẹp 1 chút */
  .gk-scope [style*="position:fixed"][style*="width:260px"] { width: 220px !important; }

  /* Exam main grid 1fr 320px — sidebar hẹp lại tablet để cell vừa hơn */
  .gk-scope main[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr 280px !important;
  }
  /* Exam question grid 6 cột — tablet vẫn 6 nhưng nén font */
  .gk-scope #gk-exam-grid { font-size: 12px !important; }
  .gk-scope #gk-exam-grid > * { min-width: 0 !important; padding: 4px 2px !important; }

  /* Direct children of grid main — cho phép shrink */
  .gk-scope main[style*="grid-template-columns"] > * { min-width: 0 !important; }
}