/* Responsive chung cho toàn bộ website */

:root {
  --page-pad: clamp(12px, 3vw, 32px);
}

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

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

img,
video,
canvas {
  max-width: 100%;
}

main.flex-fill {
  width: 100%;
  min-width: 0;
}

.navbar .container {
  max-width: min(1140px, 100%);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.container,
.container-fluid {
  max-width: 100%;
}

/* Bảng quản trị: mobile cho cuộn ngang thay vì vỡ layout */
table {
  max-width: 100%;
}

.table,
.table-responsive,
.local-admin-table,
.admin-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ảnh các trang giới thiệu, dự án, liên hệ */
.sub-img,
.about-img,
.member-card img {
  max-width: 100%;
  height: auto !important;
}

/* Form login/register không được rộng hơn màn hình */
.login-container,
.login-card,
.signup-content,
.sell-box {
  max-width: calc(100vw - 24px);
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav {
    gap: 4px;
    padding-top: 10px;
  }

  footer .row > * {
    text-align: center !important;
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }

  .content {
    transform: none !important;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .btn-farm,
  .form-submit,
  .neu-button {
    max-width: 100%;
  }

  body.game-page .top-toolbar {
    top: calc(var(--nav-h, 56px) + 8px) !important;
    right: 8px !important;
    gap: 6px !important;
    height: auto !important;
    transform: none !important;
  }

  body.game-page .top-toolbar .toolbar-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 24px !important;
    border-radius: 12px !important;
  }

  body.game-page .coin-panel {
    top: calc(var(--nav-h, 56px) + 58px) !important;
    right: 8px !important;
    transform: none !important;
  }

  body.game-page #coinCounter {
    font-size: 16px !important;
    padding: 3px 10px !important;
  }

  footer .row > * {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  body.game-page .top-toolbar .toolbar-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 22px !important;
  }

  body.game-page #coinCounter {
    font-size: 14px !important;
  }
}