/* ===== TRANG NHƯỢNG QUYỀN — Hệ Thống Giáo Dục Á Đông =====
   Dùng chung design system trong style.css (navy/gold/cream, Playfair + Be Vietnam Pro).
   File này chỉ chứa component riêng của trang nhượng quyền. Mobile-first. */

/* ---------- Hero ---------- */
.nq-hero {
  background: var(--navy-900);
  color: var(--white);
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
.nq-hero::before {
  content: "";
  position: absolute;
  right: -180px; top: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 65%);
  pointer-events: none;
}
.nq-hero .container { position: relative; z-index: 2; }
.nq-hero-grid { display: grid; gap: 44px; align-items: center; }
.nq-hero .crumb { color: rgba(255,255,255,0.65); font-size: 13.5px; margin-bottom: 18px; }
.nq-hero .crumb a { color: var(--gold-300); }
.nq-hero h1 {
  color: var(--white);
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.nq-hero-tagline {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 21px);
  letter-spacing: 0.06em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}
.nq-hero-lede { color: rgba(255,255,255,0.8); font-size: 16.5px; max-width: 560px; }
.nq-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.nq-hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.12);
}
.nq-hero-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 960px) {
  .nq-hero { padding: 150px 0 100px; }
  .nq-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---------- Dải ảnh thật (trung tâm – đội ngũ – lớp học) ---------- */
.nq-photo-strip { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 44px; }
.nq-photo-strip figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--white); }
.nq-photo-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.nq-photo-strip figcaption {
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: var(--navy-900); background: var(--white); text-align: center;
}
@media (min-width: 760px) { .nq-photo-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Đối tượng phù hợp ---------- */
.nq-audience { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 40px; }
.nq-audience-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nq-audience-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.nq-audience-card .ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold-gradient); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.nq-audience-card h3 { font-size: 17px; margin-bottom: 6px; }
.nq-audience-card p { font-size: 14px; margin: 0; }
@media (min-width: 620px) { .nq-audience { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nq-audience { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Quyền lợi đối tác ---------- */
.nq-benefits { display: grid; gap: 16px; grid-template-columns: 1fr; }
.nq-benefit {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background .25s ease, border-color .25s ease;
}
.nq-benefit:hover { background: rgba(255,255,255,0.09); border-color: rgba(212,175,55,0.5); }
.nq-benefit .ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-gradient); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
}
.nq-benefit h3 { color: var(--white); font-size: 16px; margin-bottom: 4px; }
.nq-benefit p { font-size: 13.8px; margin: 0; color: rgba(255,255,255,0.7); }
@media (min-width: 700px) { .nq-benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .nq-benefits { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 3 mô hình hợp tác (bảng so sánh) ---------- */
.nq-models { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.nq-model {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.nq-model.is-featured { border-color: var(--gold-500); box-shadow: var(--shadow-soft); }
.nq-model-flag {
  position: absolute; top: 16px; right: -34px;
  transform: rotate(45deg);
  background: var(--gold-gradient); color: var(--navy-900);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 40px;
}
.nq-model-head {
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: var(--white);
  padding: 28px 26px 24px;
  text-align: center;
}
.nq-model-head .ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--gold-gradient); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.nq-model-head h3 { color: var(--white); font-size: 19px; margin: 0 0 6px; }
.nq-model-head p { color: rgba(255,255,255,0.7); font-size: 13.5px; margin: 0; }
.nq-model-body { padding: 8px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.nq-spec { border-bottom: 1px dashed var(--border-soft); padding: 15px 0; }
.nq-spec:last-of-type { border-bottom: 0; }
.nq-spec dt {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 5px;
  display: flex; align-items: center; gap: 7px;
}
.nq-spec dd { margin: 0; font-size: 14.2px; color: var(--ink-soft); line-height: 1.55; }
.nq-model-foot { margin-top: auto; padding-top: 22px; }
.nq-quote-line {
  display: block; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--navy-900); background: var(--cream);
  border: 1px dashed rgba(212,175,55,0.6);
  border-radius: var(--radius-sm); padding: 12px 10px; margin-bottom: 14px;
}
@media (min-width: 720px) { .nq-models { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .nq-models { grid-template-columns: repeat(3, 1fr); } }

/* Khi 3 thẻ đứng cạnh nhau, đây phải đọc được như một BẢNG SO SÁNH:
   tiêu đề và từng dòng thông số của 3 mô hình phải thẳng hàng ngang.
   Tên mô hình dài ngắn khác nhau (1–2 dòng) nên phải khoá chiều cao tối thiểu,
   nếu không các dòng "Quy mô mặt bằng", "Số phòng học"... sẽ lệch nhau. */
@media (min-width: 720px) {
  .nq-model-head h3 { min-height: 48px; }   /* đủ 2 dòng tiêu đề */
  .nq-model-head p { min-height: 44px; }    /* đủ 2 dòng mô tả ngắn */
  .nq-spec dd { min-height: 44px; }         /* đủ 2 dòng nội dung thông số */
}

.nq-models-note {
  margin-top: 28px;
  background: var(--white);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  font-size: 14px; color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
.nq-models-note strong { color: var(--navy-900); }

/* ---------- Quy trình 6 bước ---------- */
.nq-steps { position: relative; display: grid; gap: 18px; grid-template-columns: 1fr; }
.nq-step {
  position: relative;
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.nq-step-num {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold-gradient); color: var(--navy-900);
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.nq-step-ic { color: var(--gold-500); margin-bottom: 8px; }
.nq-step h3 { font-size: 17px; margin-bottom: 6px; }
.nq-step p { font-size: 14px; margin: 0; }
@media (min-width: 700px) { .nq-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .nq-steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Tiêu chí đối tác ---------- */
.nq-criteria { display: grid; gap: 16px; grid-template-columns: 1fr; }
.nq-criterion {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.nq-criterion .ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold-gradient); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
}
.nq-criterion h3 { font-size: 16px; margin-bottom: 4px; }
.nq-criterion p { font-size: 13.8px; margin: 0; }
@media (min-width: 760px) { .nq-criteria { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ accordion (dùng <details>, không cần JS) ---------- */
.nq-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.nq-faq details {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.nq-faq details[open] { border-color: rgba(212,175,55,0.6); }
.nq-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 22px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--navy-900);
  position: relative;
}
.nq-faq summary::-webkit-details-marker { display: none; }
.nq-faq summary::after {
  content: "";
  position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--gold-500);
  border-bottom: 2.5px solid var(--gold-500);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.nq-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.nq-faq summary:focus-visible { outline: 3px solid rgba(212,175,55,0.5); outline-offset: -3px; }
.nq-faq .nq-faq-body { padding: 0 22px 20px; }
.nq-faq .nq-faq-body p { font-size: 14.5px; margin: 0; }

/* ---------- Form đăng ký ---------- */
.nq-form-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .nq-form-layout { grid-template-columns: 0.85fr 1.15fr; } }
.nq-form-aside h2 { color: var(--white); }
.nq-form-aside p { color: rgba(255,255,255,0.78); }
.nq-form-points { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.nq-form-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,0.88); font-size: 14.5px; }
.nq-form-points .ic {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-gradient); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
}
.nq-form-map {
  width: 100%; height: 240px; border: 0;
  border-radius: var(--radius-md);
  margin-top: 28px;
  filter: grayscale(15%);
}
/* Lưới 2 cột cho các trường ngắn */
.nq-form-2col { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .nq-form-2col { grid-template-columns: 1fr 1fr; } }
.form-row textarea { min-height: 110px; resize: vertical; }
/* Honeypot chống spam — ẩn với người, bot vẫn thấy */
.nq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Báo lỗi khi gửi hồ sơ thất bại (mất mạng / endpoint lỗi) */
.form-submit-err {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.35);
  color: #C0392B;
  font-size: 13.5px;
  text-align: center;
}
.form-submit-err.is-visible { display: block; }

/* Placeholder rõ ràng cho chỗ còn thiếu dữ liệu thật */
.nq-placeholder {
  display: inline-block;
  background: rgba(212,175,55,0.14);
  border: 1px dashed var(--gold-500);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.94em;
  font-weight: 600;
  color: var(--navy-900);
}