/* LightSchool — layout công khai _LayoutSignup + trang Đăng ký dùng thử (TrialSignup/Index) */

.ts-body {
  --ts-brand: #0284c7;
  --ts-brand-600: #0369a1;
  --ts-brand-50: #e0f2fe;
  --ts-navy: #0b1a2e;
  --ts-sun: #f59e0b;
  --ts-mint: #10b981;
  --ts-rose: #f43f5e;
  --ts-ink: #0f172a;
  --ts-muted: #64748b;
  --ts-line: #e2e8f0;
  --bs-primary: var(--ts-brand);
  --bs-primary-rgb: 2, 132, 199;
  --bs-link-color: var(--ts-brand);
  --bs-link-color-rgb: 2, 132, 199;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ts-ink);
  background:
    radial-gradient(1100px 520px at 100% -10%, #e0f2fe 0%, transparent 60%),
    radial-gradient(900px 480px at -10% 110%, #fef3c7 0%, transparent 55%),
    #f8fafc;
}

.ts-body .btn-primary {
  --bs-btn-bg: var(--ts-brand);
  --bs-btn-border-color: var(--ts-brand);
  --bs-btn-hover-bg: var(--ts-brand-600);
  --bs-btn-hover-border-color: var(--ts-brand-600);
  --bs-btn-active-bg: var(--ts-brand-600);
  --bs-btn-disabled-bg: #7dd3fc;
  --bs-btn-disabled-border-color: #7dd3fc;
}
.ts-body .btn-outline-primary {
  --bs-btn-color: var(--ts-brand);
  --bs-btn-border-color: var(--ts-brand);
  --bs-btn-hover-bg: var(--ts-brand);
  --bs-btn-hover-border-color: var(--ts-brand);
}
.ts-body .form-control:focus,
.ts-body .form-select:focus,
.ts-body .form-check-input:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 .22rem rgba(2, 132, 199, .15);
}
.ts-body .form-check-input:checked { background-color: var(--ts-brand); border-color: var(--ts-brand); }

/* ── Top bar / footer ───────────────────────────────────────────────────── */
.ts-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: .7rem 0;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
}
.ts-brand img { display: block; height: 36px; width: auto; }

.ts-main { flex: 1; padding: 2.5rem 0 2rem; }

.ts-footer {
  padding: 1.25rem 0;
  font-size: .8125rem;
  color: var(--ts-muted);
  border-top: 1px solid var(--ts-line);
  background: #fff;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ts-hero {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem;
  border-radius: 24px;
  color: #e2e8f0;
  background-image:
    radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.6px),
    linear-gradient(160deg, var(--ts-navy) 0%, #075985 62%, #0891b2 115%);
  background-size: 22px 22px, auto;
  box-shadow: 0 24px 48px -24px rgba(7, 89, 133, .55);
}
@media (min-width: 992px) { .ts-hero { position: sticky; top: 92px; } }

.ts-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.ts-hero__blob--1 { width: 220px; height: 220px; right: -70px; top: -70px; border: 1.5px solid rgba(125, 211, 252, .35); }
.ts-hero__blob--2 { width: 120px; height: 120px; left: -60px; bottom: -60px; background: rgba(245, 158, 11, .12); }

.ts-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #fde68a;
  background: rgba(245, 158, 11, .14);
  border: 1px solid rgba(253, 230, 138, .35);
  border-radius: 999px;
}

.ts-hero__title {
  position: relative;
  text-wrap: balance;
  margin: 1.1rem 0 .75rem;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.22;
  color: #fff;
  letter-spacing: -.01em;
}
.ts-hero__title span {
  background: linear-gradient(90deg, #7dd3fc, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts-hero__lead { position: relative; color: #cbd5e1; margin-bottom: 1.5rem; }

.ts-features {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .9rem;
}
.ts-features li { display: flex; gap: .85rem; align-items: flex-start; }
.ts-features strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.ts-features small { color: #94a3b8; font-size: .8125rem; }

.ts-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.ts-ic--sky  { color: #7dd3fc; background: rgba(56, 189, 248, .16); }
.ts-ic--mint { color: #6ee7b7; background: rgba(16, 185, 129, .16); }
.ts-ic--sun  { color: #fcd34d; background: rgba(245, 158, 11, .16); }
.ts-ic--rose { color: #fda4af; background: rgba(244, 63, 94, .16); }

.ts-hero__note {
  position: relative;
  display: flex;
  gap: .65rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  color: #e0f2fe;
  background: rgba(255, 255, 255, .07);
  border: 1px dashed rgba(186, 230, 253, .35);
  border-radius: 14px;
}
.ts-hero__note i { color: #fcd34d; font-size: 1.05rem; }
.ts-hero__note strong { color: #fff; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.ts-card {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -28px rgba(15, 23, 42, .25);
}

.ts-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ts-muted);
}
.ts-section-title::after { content: ""; flex: 1; height: 1px; background: var(--ts-line); }
.ts-section-title i { color: var(--ts-brand); font-size: 1rem; }

.ts-card .form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.ts-card .form-control-lg,
.ts-card .form-select-lg,
.ts-card .input-group-lg > .form-control,
.ts-card .input-group-lg > .input-group-text,
.ts-card .input-group-lg > .btn { font-size: 1rem; border-radius: 12px; }
.ts-card .input-group-lg > .input-group-text { background: #f8fafc; color: var(--ts-muted); }
.ts-optional { font-weight: 400; color: var(--ts-muted); font-size: .8rem; }

/* searchSelect (site.css) — cao bằng input-lg */
.ts-card .ls-select__trigger { min-height: 48px; padding: .55rem .9rem; font-size: 1rem; border-radius: 12px; }
.ts-card .ls-select__trigger:disabled { background: #f8fafc; cursor: not-allowed; }
.ts-invalid-select .ls-select__trigger { border-color: var(--bs-danger); }
.ts-field-error { margin-top: .25rem; font-size: .875em; color: var(--bs-danger); }
.ts-skeleton {
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: ts-shimmer 1.2s infinite;
}
@keyframes ts-shimmer { to { background-position: -200% 0; } }

.ts-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ts-chip {
  padding: .45rem .95rem;
  font-size: .875rem;
  font-weight: 500;
  color: #334155;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  transition: all .15s;
}
.ts-chip:hover { border-color: #7dd3fc; color: var(--ts-brand); }
.ts-chip.is-on { color: #fff; background: var(--ts-brand); border-color: var(--ts-brand); box-shadow: 0 6px 14px -8px rgba(2, 132, 199, .8); }

.ts-cta {
  padding-top: .85rem;
  padding-bottom: .85rem;
  font-weight: 600;
  border-radius: 14px;
  box-shadow: 0 12px 24px -14px rgba(2, 132, 199, .9);
}

/* Alert ẩn/hiện bằng x-show — KHÔNG dùng .d-flex của Bootstrap (!important đè display:none của Alpine). */
.ts-alert { display: flex; gap: .5rem; align-items: flex-start; }

.ts-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Stepper ────────────────────────────────────────────────────────────── */
.ts-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  counter-reset: none;
}
.ts-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
}
/* Chỉ bước đứng SAU 1 bước khác mới có đường nối (con đầu của <ol> là <template x-for>). */
.ts-step + .ts-step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--ts-line);
  z-index: 0;
}
.ts-step.is-active::before,
.ts-step.is-done::before { background: var(--ts-brand); }
.ts-step__dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ts-muted);
  background: #fff;
  border: 2px solid var(--ts-line);
  border-radius: 50%;
  transition: all .2s;
}
.ts-step.is-active .ts-step__dot { color: #fff; background: var(--ts-brand); border-color: var(--ts-brand); box-shadow: 0 0 0 5px var(--ts-brand-50); }
.ts-step.is-done .ts-step__dot { color: #fff; background: var(--ts-mint); border-color: var(--ts-mint); }
.ts-step__label { font-size: .8125rem; font-weight: 600; color: var(--ts-muted); }
.ts-step.is-active .ts-step__label { color: var(--ts-ink); }

/* ── OTP ────────────────────────────────────────────────────────────────── */
/* Thẻ "Đã gửi mã" — phản hồi ngay sau khi bấm Nhận mã: gửi tới đâu, từ Zalo nào, còn 1 bước, cách tìm tin nhắn. */
.ts-sent {
  padding: 1.1rem 1.15rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 100%);
  border: 1px solid #a7f3d0;
}
.ts-sent.is-pop { animation: ts-sent-in .45s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes ts-sent-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.ts-sent__top { display: flex; gap: .85rem; align-items: center; }
.ts-sent__check {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 0 0 6px rgba(16, 185, 129, .15);
}
.ts-sent.is-pop .ts-sent__check { animation: ts-pop .5s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.ts-sent__title { font-weight: 700; font-size: 1.05rem; color: #065f46; }
.ts-sent__sub { font-size: .85rem; color: #334155; }
.ts-sent__note {
  margin-top: .85rem; padding: .5rem .75rem; border-radius: 10px;
  font-size: .85rem; color: #0c4a6e; background: rgba(255, 255, 255, .7);
}
.ts-sent__note i { color: var(--ts-sun); margin-right: .25rem; }
.ts-sent__steps {
  list-style: none; padding: 0; margin: .75rem 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.ts-sent__steps li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: #334155; line-height: 1.3; }
.ts-sent__steps li > span:first-child {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; font-size: .72rem; font-weight: 700; color: #fff; background: var(--ts-brand);
}
.ts-sent__help { margin-top: .75rem; font-size: .82rem; color: #475569; }
.ts-sent__help summary { cursor: pointer; color: var(--ts-brand); font-weight: 600; }
.ts-sent__help ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.ts-otp-label { text-align: center; font-weight: 600; font-size: .95rem; }

.ts-otp { display: flex; justify-content: center; gap: .6rem; margin: .5rem 0 1rem; }
.ts-otp__box {
  width: 54px;
  height: 62px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ts-ink);
  background: #f8fafc;
  border: 1.5px solid var(--ts-line);
  border-radius: 14px;
  transition: all .15s;
}
.ts-otp__box:focus { outline: none; background: #fff; border-color: var(--ts-brand); box-shadow: 0 0 0 4px var(--ts-brand-50); }

.ts-strength { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.ts-strength span { height: 5px; border-radius: 99px; background: var(--ts-line); transition: background .2s; }
.ts-strength .on-1 { background: var(--ts-rose); }
.ts-strength .on-2 { background: var(--ts-sun); }
.ts-strength .on-3 { background: var(--ts-mint); }

.ts-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8125rem; color: var(--ts-muted); }
.ts-rules li { display: inline-flex; align-items: center; gap: .35rem; }
.ts-rules li.ok { color: #059669; }

/* ── Hoàn tất ───────────────────────────────────────────────────────────── */
.ts-done { text-align: center; padding: .5rem 0 .25rem; }
.ts-done__check {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  color: #fff;
  background: linear-gradient(135deg, #34d399, #059669);
  border-radius: 50%;
  box-shadow: 0 0 0 10px #d1fae5;
  animation: ts-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes ts-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ts-done__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}
.ts-done__info > div {
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid var(--ts-line);
  border-radius: 12px;
}
.ts-done__info > div > span { display: block; font-size: .75rem; color: var(--ts-muted); margin-bottom: .15rem; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .ts-main { padding-top: 1.25rem; }
  .ts-hero { padding: 1.5rem 1.25rem; }
  .ts-features { grid-template-columns: 1fr 1fr; }
  .ts-features small { display: none; }
}
@media (max-width: 575.98px) {
  .ts-main { padding-top: .75rem; }
  .ts-sent__steps { grid-template-columns: 1fr; }
  .ts-hero { padding: 1.1rem 1rem; border-radius: 18px; }
  .ts-hero__title { font-size: 1.35rem; margin: .7rem 0 0; }
  .ts-hero__lead, .ts-features { display: none; }
  .ts-card { padding: 1.25rem 1rem; border-radius: 18px; }
  .ts-cta { font-size: 1rem; }
  .ts-hero__note { display: none; }
  .ts-otp { gap: .4rem; }
  .ts-otp__box { width: 44px; height: 54px; font-size: 1.35rem; }
  .ts-step__label { font-size: .72rem; }
  .ts-done__info { grid-template-columns: 1fr; }
}