/* Innophys Muscle Suit — theme custom CSS
   Tailwind (Play CDN) lo phần utility; file này lo: frame mobile căn giữa,
   mask-icon helper, font, và vài override nhỏ. */

:root {
  --inno-blue: #0060DF;
  --inno-ink: #0E1A2B;
}

html { -webkit-text-size-adjust: 100%; }

body.inno-body {
  margin: 0;
  background: #e7ebf2;            /* nền xám 2 bên trên desktop */
  font-family: 'Inter', sans-serif;
}

/* Khung mobile căn giữa — giữ 1:1 thiết kế mockup 375px */
.inno-frame {
  width: 100%;
  max-width: 412px;
  margin-inline: auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(14, 26, 43, 0.12);
}

/* Container nội dung trong section (≈343px của thiết kế) */
.inno-wrap { width: 100%; max-width: 344px; margin-inline: auto; }

/* mask-icon helper: SVG dùng currentColor → tô màu bằng background-color (class bg-*) */
.mi {
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;    mask-size: contain;
  display: inline-block;
  flex: none;
}

/* Ẩn scrollbar vùng cuộn ngang */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

/* Kéo-để-cuộn bằng chuột */
.inno-grab { cursor: grab; scroll-behavior: smooth; }
.inno-grab.inno-grabbing { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.inno-grab.inno-grabbing * { pointer-events: none; }

/* FAQ accordion */
.inno-faq-item .inno-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease, opacity .25s ease;
  opacity: 0;
}
.inno-faq-item.is-open .inno-faq-a { max-height: 400px; opacity: 1; }
.inno-faq-item .inno-faq-icon-plus { display: flex; }
.inno-faq-item .inno-faq-icon-minus { display: none; }
.inno-faq-item.is-open .inno-faq-icon-plus { display: none; }
.inno-faq-item.is-open .inno-faq-icon-minus { display: flex; }

/* Form states */
.inno-form-msg { display: none; }
.inno-form-msg.is-show { display: block; }

/* Nút gọi nổi: giới hạn trong khung trên desktop */
@media (min-width: 460px) {
  .inno-fab { right: calc(50vw - 200px); }
}

/* Field chip chọn được trong form tư vấn */
.inno-chip { cursor: pointer; transition: all .15s ease; }
.inno-chip.is-active {
  background: var(--inno-blue) !important;
  border-color: var(--inno-blue) !important;
  color: #fff !important;
}