/* Trang chủ mcastar.com — màu lấy từ CSS bàn điều khiển MCA
   (ui/src/pages/home/styles/home.css, login.css): chuyển màu nút
   #9867FF → #6361FF, tím nhấn #6E40F8, bốn màu phụ vàng/cam/hồng/lơ,
   nền sáng #F6F9FC. Trang sáng như app, không có bản tối. */

:root {
  --violet: #6e40f8;
  --indigo: #6361ff;
  --lilac: #9867ff;
  --grad: linear-gradient(90deg, #9867ff 0%, #6361ff 100%);
  --yellow: #ffcb3c;
  --orange: #ff9748;
  --pink: #ff52b1;
  --blue: #4399ff;
  --red: #ff3542;

  --bg: #f6f9fc;
  --tint: #eef0ff;
  --surface: #ffffff;
  --ink: #1a1b3d;
  --text: #3d4260;
  --muted: #6b7190;
  --line: #e5e7eb;
  --line-2: #d9dde7;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(26, 27, 61, .06), 0 8px 24px rgba(99, 97, 255, .08);
  --shadow-lg: 0 20px 60px rgba(99, 97, 255, .18);
  --wrap: 1200px;
  --pad: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 820px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── nút ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 10px;
  font: 600 15px/1 inherit; font-family: inherit;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-lg { min-height: 48px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 18px rgba(110, 64, 248, .28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(110, 64, 248, .34); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--lilac); color: var(--violet); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid rgba(110, 64, 248, .45); outline-offset: 2px;
}

/* ── thanh đầu ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246, 249, 252, .86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(217, 221, 231, .6);
}
.nav-row { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px;
}
/* «Multi-Creator Assistant» dưới chữ MCA: chữ thường, xám, nhỏ. */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em; margin-top: 3px; }
.nav-links { display: flex; gap: 28px; margin-right: auto; }
.nav-links a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--violet); }
.nav-cta { display: flex; gap: 10px; }

/* ── hero ────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 72px 0 88px;
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(152, 103, 255, .20), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(255, 82, 177, .10), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; }
.grad-text {
  background: linear-gradient(90deg, #9867ff, #6361ff 45%, #ff52b1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: 18px; margin-top: 20px; max-width: 540px; }
.lead + .lead { margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-shot { position: relative; margin: 0; }
.window {
  background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line-2);
}
.window-bar { display: flex; gap: 6px; padding: 10px 12px; background: #f1f3f8; border-bottom: 1px solid var(--line); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9dde7; }
.window-bar i:nth-child(1) { background: #ff6b6b; }
.window-bar i:nth-child(2) { background: var(--yellow); }
.window-bar i:nth-child(3) { background: #3ecf8e; }
.hero-float {
  position: absolute; right: -28px; bottom: -48px; width: 20%;
  border-radius: 12px; box-shadow: var(--shadow-lg);
}

/* ── khối chung ──────────────────────────────────────── */
.section { padding: 88px 0; }
.section-tint { background: var(--tint); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; }
.section-lead { font-size: 17px; margin-top: 14px; }

/* ── chế độ chơi ─────────────────────────────────────── */
.modes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.mode {
  grid-column: span 2; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.mode:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mode:nth-child(4), .mode:nth-child(5) { grid-column: span 3; }
/* Ảnh overlay thật của từng chế độ (chụp từ bản xem, dữ liệu mẫu), ghép lên
   «màn live» tối có quầng sáng theo màu nhấn của thẻ. Viền dưới ảnh mang màu ấy. */
.mode-shot {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #14152e;
  border-bottom: 3px solid var(--tone);
}
/* Hai thẻ rộng ở hàng dưới: ảnh trái, chữ phải (ép ảnh dẹt thì cắt mất nhãn LIVE). */
.mode:nth-child(4), .mode:nth-child(5) { flex-direction: row; }
.mode:nth-child(4) .mode-shot, .mode:nth-child(5) .mode-shot {
  width: 52%; flex: none; border-bottom: 0; border-right: 3px solid var(--tone);
}
.mode:nth-child(4) .mode-body, .mode:nth-child(5) .mode-body { align-self: center; }
.mode-body { padding: 22px 26px 26px; }
.mode h3 { font-size: 20px; margin: 0 0 8px; }
.mode p { font-size: 15px; }

/* ── widget ──────────────────────────────────────────── */
/* Ba ô cao bằng nhau: ảnh dựng theo tỉ lệ 560×600 · 560×600 · 1180×600, nên
   cột 1fr · 1fr · 2.1fr cho cùng chiều cao. */
.widget-wall { display: grid; grid-template-columns: 1fr 1fr 2.1fr; gap: 16px; }
.widget-wall figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); background: #14152e; }
.section-head-wide { max-width: 900px; }
@media (max-width: 900px) {
  .widget-wall { grid-template-columns: 1fr 1fr; }
  .widget-wall .wide { grid-column: span 2; }
}
.widget-wall img { width: 100%; display: block; }
.widget-wall figcaption {
  padding: 10px 16px 12px; color: #fff; font-size: 14px; font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, .08);
}



/* ── bảng giá ────────────────────────────────────────── */
/* Bố cục theo bảng giá chủ shop đưa (thẻ căn giữa, nhãn trên mép thẻ).
   Giá dùng màu chữ đậm của trang, KHÔNG dùng đỏ (chủ shop chê 30/9). */
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 22px 22px; box-shadow: var(--shadow);
}
.plan-featured { border: 1.5px solid var(--lilac); box-shadow: var(--shadow-lg); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: 13px; font-weight: 600;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.plan h3 { font-size: 19px; font-weight: 700; }
.price {
  color: var(--ink); font-size: 36px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 18px; line-height: 1.1; white-space: nowrap;
}
.price span { font-size: 18px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.price-old { color: var(--muted); font-size: 16px; margin: 8px 0 28px; }
.price-old s { text-decoration-thickness: 1.5px; }
.plan .btn { margin-top: auto; }
/* «Gói vĩnh viễn»: không có giá — chữ «Liên hệ» mang màu tím nhấn, dòng dưới
   không gạch như giá cũ. */
.plan-forever .price { color: var(--violet); font-size: 30px; }
.plan-forever .price-old { color: var(--text); }
/* Câu chốt của bảng giá — chủ shop muốn nó nổi bật nhất khối. */
.price-motto span { white-space: nowrap; }
.price-motto { margin-top: 18px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.plans-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 28px; }

/* ── hỏi đáp ─────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 22px; box-shadow: var(--shadow);
}
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 28px 18px 0; position: relative;
  color: var(--ink); font-weight: 600; font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border: solid var(--violet); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; }

/* ── nhận tư vấn ─────────────────────────────────────── */
.cta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
  background: var(--grad); color: #fff; border-radius: 24px; padding: 48px;
  box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; }
.cta-copy p { margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .9); }
.consult { background: rgba(255, 255, 255, .14); border-radius: 16px; padding: 20px; }
.consult-row { display: flex; gap: 10px; }
.consult input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px;
  border-radius: 10px; border: 1px solid transparent; background: #fff; color: var(--ink);
  font: 16px/1 inherit; font-family: inherit;
}
.consult input[aria-invalid="true"] { border-color: var(--red); }
.consult .btn-primary { background: var(--ink); box-shadow: none; }
.consult .btn-primary:disabled { opacity: .7; cursor: wait; transform: none; }
.consult-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 8px 8px 14px;
  margin-bottom: 10px; font-size: 15px;
}
.consult-plan[hidden] { display: none; }
.consult-plan button {
  border: 0; background: var(--tint); color: var(--violet); width: 28px; height: 28px;
  border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer;
}
.consult-status { min-height: 22px; margin-top: 10px; font-size: 15px; }
.consult-status.ok { color: #fff; font-weight: 600; }
.consult-status.err { color: #ffe1e3; font-weight: 600; }

/* ── chân trang ──────────────────────────────────────── */
.footer { border-top: 1px solid var(--line-2); padding: 28px 0; font-size: 14px; color: var(--muted); }
.footer-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 20px; margin-right: auto; }
.footer nav a { color: var(--text); text-decoration: none; }
.footer .brand { font-size: 17px; }

/* ── màn hẹp ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .nav-links { gap: 20px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { padding: 48px 0 64px; }
  .hero-grid, .cta { grid-template-columns: minmax(0, 1fr); }
  .hero-float { right: -4px; bottom: -32px; width: 22%; }
  .modes { grid-template-columns: 1fr 1fr; }
  .mode, .mode:nth-child(4), .mode:nth-child(5) { grid-column: span 1; }
  .mode:nth-child(5) { grid-column: span 2; }
  .mode:nth-child(4), .mode:nth-child(5) { flex-direction: column; }
  .mode:nth-child(4) .mode-shot, .mode:nth-child(5) .mode-shot { width: 100%; border-right: 0; border-bottom: 3px solid var(--tone); }
  .section { padding: 64px 0; }
  .cta { padding: 32px; }
}
@media (max-width: 560px) {
  :root { --pad: 16px; }
  .nav-cta .btn-ghost { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .modes { grid-template-columns: 1fr; }
  .mode:nth-child(5) { grid-column: span 1; }
    .plans { grid-template-columns: 1fr; }
  .cta { padding: 24px 18px; border-radius: 18px; }
  .consult { padding: 14px; }
  .consult-row { flex-direction: column; }
  .footer nav { margin-right: 0; }
}