/* OEE.vn landing — P3.1, đồng bộ ngôn ngữ thiết kế Poseidon (P3-landing.md §9)
 *
 * KHÔNG webfont, KHÔNG CDN: Chính sách quyền riêng tư công bố ở P2.4 khẳng định không có
 * bên thứ ba nào nhận dữ liệu người truy cập. Một link `fonts.googleapis.com` là đủ biến
 * câu đó thành lời nói dối, vì trình duyệt gửi IP + User-Agent sang Google mỗi lần tải trang.
 * Dùng font hệ thống — đổi lại còn nhanh hơn.
 *
 * KHÔNG có style nội tuyến ở HTML: CSP của landing đặt `style-src 'self'` (không
 * 'unsafe-inline'), nên mọi thuộc tính style="" sẽ bị chặn im lặng.
 *
 * ────────────────────────────────────────────────────────────────────────────────────────
 * NGUỒN CỦA BỘ TOKEN DƯỚI ĐÂY (§9.1 chọn hướng B: mượn ngôn ngữ thiết kế, giữ trang tĩnh)
 *
 *   _poseidon-reference/src/assets/tailwind.css            khối @theme + @layer components
 *   _poseidon-reference/src/app/pages/landing/components/  nhịp section, thang chữ
 *
 * Bản mẫu Poseidon là 15 component Angular phụ thuộc PrimeNG + Chart.js + LayoutService;
 * bê nguyên là mất SEO (app không có SSR) và vỡ trần bundle. Thứ chép sang đây là BỘ ĐO —
 * bo góc, đệm, bóng, thang chữ, nhịp section — dịch thẳng sang CSS thuần, 0 JavaScript.
 */

:root {
  /* ── Màu nhận diện ─────────────────────────────────────────────────────────────────
   * BA token, không phải một. Đây là bản vá cho ngã ba bỏ ngỏ ở §5b, và nó KHÔNG phải
   * thứ §9.2 tưởng: §9.2 ghi `.button-primary` của Poseidon dùng `text-primary-contrast`
   * — "token tự lật màu chữ theo nền". Đọc tệp thật thì ở chế độ SÁNG Poseidon khai
   * `contrastColor: '#ffffff'` cứng (app.configurator.ts:225 và :289). Nó không lật gì
   * cả; áp nguyên vào nút #00c0c0 cho ra đúng thứ đang hỏng: trắng trên teal = 2,26:1.
   *
   * Nhưng Ý ĐỊNH của token thì đúng và làm được: #00c0c0 có độ sáng tương đối 0,415 —
   * nó là màu SÁNG, nên đối tác tương phản của nó phải TỐI, không phải trắng.
   *
   *   chữ #16212b trên nút #00c0c0        7,23:1  ✓ AA   ← --primary-contrast
   *   link #00767c trên nền trắng         5,41:1  ✓ AA   ← --primary-text
   *   #00c0c0 trên khối CTA tối           7,23:1  ✓ AA   ← --primary, đúng nền của nó
   *
   * Nhờ vậy màu logo gốc #00c0c0 giữ nguyên vai trò mảng đặc (nút, chấm, viền nổi bật)
   * mà không chỗ nào trượt AA. Owner chốt hướng này 2026-08-14.
   */
  --primary: #00c0c0; /* mảng đặc: nền nút, chấm số bước, badge gói, viền gói nổi bật */
  --primary-contrast: #16212b; /* chữ NẰM TRÊN --primary — tối, không phải trắng */
  --primary-hover: #00a8a8; /* nút hover; ink trên nó vẫn 5,57:1 ✓ */
  --primary-text: #00767c; /* chữ/link/icon teal trên nền sáng, và outline focus */
  --primary-soft: #e6f9f9; /* nền nhạt cho dải hero */

  /* ── Chữ ──────────────────────────────────────────────────────────────────────────
   * Giữ nguyên dải xám đã đo của bản cũ thay vì chép dải `surface` của Poseidon.
   * Poseidon sinh surface bằng color-mix(primary.900, white N%) và surface-500/600 của
   * họ rơi vào khoảng 4,3–4,5:1 — mép ngưỡng. Dải dưới đây đo được cao hơn hẳn trên CẢ
   * nền trắng lẫn nền --surface-50, nên không có lý do đổi.
   */
  --ink: #16212b; /* tiêu đề — 16,3:1 trên trắng */
  --body: #41505e; /* thân bài — 8,3:1 */
  --muted: #5c6b7a; /* chú thích — 5,5:1 trên trắng, 5,2:1 trên nền tinted */

  /* ── Bề mặt ───────────────────────────────────────────────────────────────────────
   * Poseidon đặt CẢ TRANG trên một nền hơi ám màu primary rồi thả thẻ TRẮNG lên,
   * chứ không viền thẻ. Ta theo đúng cách đó, nên nền trang là --surface-50 và
   * .section-alt mới là màu trắng — ngược với bản cũ, và đó là chủ ý.
   */
  --surface-0: #ffffff;
  --surface-50: #f5f9fa; /* nền trang */
  --surface-100: #eaf1f2; /* hover nút phụ */
  --border: #e2eaea; /* chỉ còn dùng cho viền badge và gạch phân cách */

  /* ── Hình khối (§9.2) ─────────────────────────────────────────────────────────────
   * --ring thay cho `border: 1px solid` của bản cũ: Poseidon dựng viền thẻ bằng LỚP
   * BÓNG thứ tư `0 0 0 1px` chứ không phải thuộc tính border, nên thẻ không bị cộng
   * thêm 2px vào kích thước và góc bo không bị răng cưa.
   *
   * ⚠ Poseidon để alpha 0,02. Con số đó hợp vì nền của họ LUÔN ám màu, thẻ trắng nổi sẵn.
   * Trang này có hai nền (tinted + trắng); trên nền trắng alpha 0,02 là thẻ tàng hình.
   * 0,07 là giá trị đọc được trên cả hai — nhạt hơn viền #e2e8f0 của bản cũ.
   */
  --ring: rgba(18, 18, 23, 0.07);
  --shadow-v1: 0 10px 10px -8px rgba(18, 18, 23, 0.02), 0 2px 2px -1.5px rgba(18, 18, 23, 0.02),
    0 1px 1px -0.5px rgba(18, 18, 23, 0.02);
  --shadow-card: var(--shadow-v1), 0 0 0 1px var(--ring);
  --shadow-badge: 0 1px 2px rgba(18, 18, 23, 0.05);
  --shadow-lift: 0 24px 48px -32px rgba(18, 18, 23, 0.3), 0 0 0 1px var(--ring);

  --radius-card: 1rem; /* ≥992px lên 1.5rem, đúng `rounded-2xl lg:rounded-3xl` */
  --radius-pill: 9999px;

  --wrap: 62rem; /* ≥768px: 70rem · ≥1200px: 85rem — thang container của Poseidon */
  --wrap-pad: 1.5rem;

  /* Nhịp section: `py-12 lg:py-24` của Poseidon = 3rem → 6rem. */
  --section-y: 3rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Header dính: neo #id không bị trượt lên dưới header. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

/* Thang chữ Poseidon: `font-semibold` = 600, KHÔNG phải 700/800 như bản cũ. Chữ nhẹ đi
   một bậc là khác biệt dễ thấy nhất sau kiểu nút — và là thứ làm trang bớt "đanh". */
h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ⚠ Poseidon để H1 ở 2.25rem → 3.75rem (≥992px). Bản mẫu của họ là hero MỘT CỘT canh
   giữa nên có cả bề rộng container cho tiêu đề. Hero của ta hai cột (chữ trái, ảnh phải),
   cột chữ chỉ ~½ container ⇒ 3.75rem là tràn dòng. Lấy tới 3.25rem và dừng. */
h1 {
  font-size: 2.25rem;
  line-height: 1.15;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem; /* `text-xl` — đầu đề thẻ của Poseidon */
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--primary-text);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.wrap-narrow {
  max-width: 48rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* Outline focus dùng --primary-text chứ không phải --primary: viền focus là thành phần
   phi văn bản, ngưỡng 3:1. #00c0c0 trên trắng chỉ 2,26:1 — trượt. #00767c đạt 5,41:1. */
:focus-visible {
  outline: 3px solid var(--primary-text);
  outline-offset: 2px;
}

/* ---------- Nút ----------
   `.button-primary` của Poseidon: rounded-full · px-7 py-3 · gap-2 · font-medium · bóng.
   Viên thuốc thay cho bo 9px là dấu hiệu nhận biết rõ nhất của bộ giao diện này. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow-v1);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-contrast);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

/* `.button` (phụ) của Poseidon là nền TRẮNG + bóng, không viền — không phải nút rỗng. */
.btn-ghost {
  background: var(--surface-0);
  color: var(--primary-text);
  box-shadow: var(--shadow-card);
}

.btn-ghost:hover {
  background: var(--surface-100);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

.btn-lg {
  padding: 0.875rem 2.25rem;
  font-size: 1.0625rem;
}

.btn-block {
  display: flex;
  width: 100%;
  margin-top: auto;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}

.brand-name {
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.brand-dot {
  color: var(--primary-text);
}

.site-nav a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--primary-text);
}

.site-nav .btn-primary {
  color: var(--primary-contrast);
}

/* Menu mobile: checkbox ẩn + label, không cần JavaScript. Viết theo lối mobile-first —
   trạng thái mặc định LÀ màn hình hẹp, ≥768px mới mở ra thành hàng ngang. */
.nav-toggle {
  display: none;
}

.nav-toggle-btn {
  display: block;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
}

.nav-bars,
.nav-bars::before,
.nav-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  content: '';
}

.nav-bars::before {
  transform: translateY(-7px);
}

.nav-bars::after {
  transform: translateY(5px);
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem var(--wrap-pad) 1.25rem;
}

.nav-toggle:checked ~ .site-nav {
  display: flex;
}

/* ⚠ `:not(.btn)` không phải để cho đẹp mắt. `.site-nav a` (0,1,1) có độ đặc hiệu CAO HƠN
   `.btn-sm` (0,1,0), nên nếu viết trần thì nút "Dùng thử miễn phí" trong menu mobile bị
   nuốt sạch padding ngang — mà nó đang giãn hết bề rộng nên không ai thấy triệu chứng. */
.site-nav a:not(.btn) {
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}

.site-nav .btn {
  margin-top: 0.85rem;
}

/* ---------- Hero ----------
   §9.2 đo được hero Poseidon `pt 9rem/13rem`. KHÔNG chép thẳng con số đó: topbar của họ
   là thanh nổi `position: fixed`, phần lớn 9rem là để né chính nó. Header ở đây dính
   nhưng vẫn chiếm chỗ trong luồng (4,5rem), nên khoảng trắng THẤY ĐƯỢC mới là thứ phải
   khớp: 9rem − ~4,5rem ≈ 4rem, và 13rem − ~5,5rem ≈ 7rem. Riêng padding-bottom thì chép
   nguyên 2,5rem/3,5rem vì dưới hero không có gì phải trừ. */
.hero {
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface-50) 78%);
  padding: 4rem 0 2.5rem;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

/* `.badge` của Poseidon: px-3.5 py-1 · rounded-full · nền surface-0 · CÓ viền · bóng nhẹ ·
   font-medium · chữ surface-950. Bản cũ để chữ màu teal đậm; đưa về ink cho đúng bản mẫu
   và tiện thể lên 15,4:1. */
.eyebrow {
  display: inline-block;
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-badge);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  margin: 0 0 1.25rem;
}

.h1-accent {
  color: var(--primary-text);
}

.lead {
  font-size: 1.0625rem;
  max-width: 34rem;
  margin-bottom: 2rem;
}

.lead strong {
  color: var(--ink);
  font-weight: 600;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem; /* `gap-3.5` ở hàng nút hero của Poseidon */
  margin-bottom: 1.75rem;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.trust-row li::before {
  content: '✓';
  color: var(--primary-text);
  font-weight: 700;
  margin-right: 0.4rem;
}

.hero-shot {
  margin: 0;
  order: -1; /* màn hẹp: ảnh lên trước chữ; ≥992px trả về đúng cột phải */
}

.hero-shot img,
.wide-shot img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  background: var(--surface-0);
}

/* ---------- Khối chung ----------
   Poseidon canh GIỮA cụm đầu section (badge → h2 → câu dẫn) rồi mới thả lưới thẻ bên
   dưới. Chỉ đổi cách canh, không đụng một chữ nào trong nội dung. */
.section {
  padding: var(--section-y) 0;
}

.section-alt {
  background: var(--surface-0);
}

.section h2 {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.section-lead {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: 1.125rem; /* `text-lg` */
  text-align: center;
}

.section h2 + .grid-3,
.section h2 + .steps,
.section h2 + .faq,
.section-lead + .grid-3,
.section-lead + .steps {
  margin-top: 2.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.5rem; /* `gap-8` giảm còn 1.5rem vì lưới ta 3 cột chứ không phải flex 3 khối */
}

/* Thẻ Poseidon: `rounded-2xl lg:rounded-3xl p-4 lg:p-6 bg-surface-card shadow-…` —
   KHÔNG viền. Viền được thay bằng lớp bóng `0 0 0 1px` (xem --ring). */
.card {
  background: var(--surface-0);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  font-size: 0.97rem;
}

.card h3 {
  margin-bottom: 0.6rem;
}

/* ---------- Ba bước ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  background: var(--surface-0);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: 600;
  margin-bottom: 1rem;
}

.steps h3 {
  margin-bottom: 0.6rem;
}

.steps p {
  margin-bottom: 0;
  font-size: 0.97rem;
}

.wide-shot {
  margin: 3rem 0 0;
}

.wide-shot figcaption {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Thư viện ảnh sản phẩm (§3 khối 4) ----------
   Lưới ảnh + phóng to bằng `:target`. KHÔNG JavaScript — xem chú thích trong index.html. */
.trust-row-center {
  justify-content: center;
  margin-top: 1rem;
}

.shot-grid {
  display: grid;
  /* Số cột đặt TƯỜNG MINH chứ không `auto-fit`: container ở ≥1200px rộng 85rem, `auto-fit`
     nhét vừa 4 cột ⇒ 6 ảnh xếp thành 4+2 lệch hàng và mỗi ảnh co lại còn ~320px. Ba cột cho
     hai hàng cân và ảnh đủ to để đọc được KPI trước khi bấm phóng to. */
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

@media (min-width: 576px) {
  .shot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .shot-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shot-link {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}

.shot-link img {
  width: 100%;
  /* Ảnh chụp cao thấp khác nhau (trang Andon cao, trang lệnh sản xuất thấp). Ép cùng một
     khung + cắt từ MÉP TRÊN để lưới thẳng hàng, mà phần bị cắt luôn là khoảng trống dưới
     chân trang chứ không phải nội dung. Ảnh đầy đủ vẫn xem được khi bấm phóng to. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--surface-0);
  transition: box-shadow 180ms ease-out, transform 180ms ease-out;
}

.shot-link:hover img,
.shot-link:focus-visible img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.shot-cap {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Tiêu đề ảnh: khối riêng một dòng, teal đúng --primary-text (5,41:1 trên nền sáng). */
.shot-cap b {
  display: block;
  color: var(--primary-text);
  font-size: 0.95rem;
}

/* Dấu hiệu "bấm được": chỉ hiện khi con trỏ tới, không làm rối lưới lúc đứng yên. */
.shot-link::after {
  content: 'Bấm để xem lớn';
  align-self: flex-start;
  margin-top: -0.35rem;
  font-size: 0.8rem;
  color: var(--primary-text);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.shot-link:hover::after,
.shot-link:focus-visible::after {
  opacity: 1;
}

/* ---------- Ảnh phóng to ---------- */
.lightbox {
  display: none;
}

/* `:target` = id trong URL khớp. Đây là cơ chế của chính trình duyệt nên không cần script,
   và bấm nút Quay lại cũng đóng ảnh như người dùng mong đợi. */
.lightbox:target {
  display: grid;
  position: fixed;
  inset: 0;
  /* 50 = ngang `.site-header`, và thế là ĐỦ: lớp phủ đứng sau header trong DOM nên ở cùng
     mức z-index nó vẫn vẽ đè lên. Đã đo bằng `elementFromPoint(720, 30)` — điểm giữa thanh
     menu — trả về `.lightbox-bg`. Ảnh chụp thu nhỏ nhìn như header không bị mờ, nhưng đó là
     ảo giác của cỡ ảnh: điểm ảnh tại đó là #545458 chứ không phải #f5f9fa. */
  z-index: 50;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 23, 0.72);
}

.lightbox-box {
  position: relative;
  margin: 0;
  max-width: 92rem;
  width: 100%;
}

.lightbox-box img {
  display: block;
  width: 100%;
  height: auto;
  /* Ảnh cao (Andon, Dashboard) phải vừa màn hình mà không cần cuộn trong lớp phủ. */
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--surface-0);
  box-shadow: var(--shadow-lift);
}

.lightbox-box figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: #d7e0e4;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.lightbox-close:hover {
  background: var(--surface-100);
}

/* ---------- Bảng giá ---------- */
.plans {
  align-items: stretch;
}

.plan {
  position: relative;
  padding-top: 2rem;
}

/* Gói nổi bật: viền teal đặc thay cho lớp ring mờ. Đây là chi tiết TRANG TRÍ — thông tin
   "phổ biến nhất" đã nằm ở nhãn chữ ngay trên, nên #00c0c0 ở đây không phải gánh ngưỡng
   3:1 của thành phần truyền đạt thông tin. */
.plan-featured {
  box-shadow: var(--shadow-v1), 0 0 0 2px var(--primary);
}

/* ★ Phải viết `.plan p.…` chứ không phải `.plan-price`: quy tắc chung `.card p` có độ đặc
   hiệu (0,1,1) nên nó THẮNG `.plan-price` (0,1,0) dù khai sau — giá gói bị co về cỡ chữ
   thường, mà trang vẫn hiện bình thường nên không có triệu chứng nào ngoài "trông sai". */
.plan p.plan-badge {
  position: absolute;
  top: -0.8rem;
  left: 1.5rem;
  background: var(--primary);
  color: var(--primary-contrast);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-badge);
  margin: 0;
}

.plan p.plan-price {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0.35rem 0 0.15rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.plan p.plan-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.plan-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: 0.95rem;
}

.plan-list li {
  padding: 0.45rem 0 0.45rem 1.55rem;
  border-top: 1px solid var(--border);
  position: relative;
}

.plan-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-text);
  font-weight: 700;
}

/* ---------- FAQ ---------- */
.faq {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0;
}

.faq summary {
  cursor: pointer;
  padding: 0.95rem 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--primary-text);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.faq[open] summary::after {
  content: '−';
}

.faq p {
  margin: 0 0 1rem;
  font-size: 0.98rem;
}

/* ---------- CTA cuối ----------
   Khối duy nhất có nền tối, và là chỗ #00c0c0 sống đúng nền của nó (7,23:1 — xem §5b).
   Nút ở đây dùng chung .btn-primary nên chữ vẫn là --primary-contrast, đồng nhất cả trang. */
.cta-final {
  background: var(--ink);
  color: #cbd6df;
  padding: 4rem 0;
  text-align: center;
}

.cta-final h2 {
  color: #fff;
  font-size: 2.25rem;
  max-width: none;
}

.cta-final p {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: 1.0625rem;
}

/* Link trong khối CTA nằm trên nền --ink (tối). Màu link mặc định của trang được chọn cho
   nền sáng, nên phải khai riêng ở đây — nếu không thì số điện thoại có thể chìm hẳn vào nền
   và không ai biết, vì trang vẫn hiện "bình thường". `:not(.btn)` để không đụng vào nút. */
.cta-final a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-0);
  padding: 3rem 0 1.75rem;
  font-size: 0.93rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-brand {
  max-width: 22rem;
}

/* `img` là inline, nên bọc nó trong `<a>` sẽ đẻ ra một dải trống dưới ảnh đúng bằng phần
   descender của dòng chữ — và vùng bấm cũng cao hơn ảnh chừng đó. `inline-block` + `line-height:0`
   bóp vùng bấm về đúng ảnh. Ổ bấm vẫn đủ lớn: logo 149×47. */
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-brand p {
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem 2.5rem;
  align-content: start;
}

.footer-nav a {
  color: var(--body);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--primary-text);
  text-decoration: underline;
}

.footer-legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.footer-legal p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   Điểm ngắt — 576 · 768 · 992 · 1200 · 1920, đúng bộ Poseidon khai ở @theme
   (`--breakpoint-*: initial` xoá sạch bộ mặc định của Tailwind rồi khai lại năm mốc này).
   Viết mobile-first: mỗi khối chỉ THÊM, không có khối max-width nào phải gỡ ngược.
   ══════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 576px) {
  .footer-nav {
    grid-template-columns: repeat(2, auto);
  }
}

@media (min-width: 768px) {
  :root {
    --wrap: 70rem;
  }

  body {
    font-size: 17px;
  }

  h1 {
    font-size: 2.75rem;
  }

  /* CTA cuối chép đúng thang của Poseidon (`text-4xl md:text-5xl`) vì câu tiêu đề ở đó
     ngắn — 2,25rem → 3rem không tràn dòng như các h2 section dài. */
  .cta-final h2 {
    font-size: 3rem;
  }

  .cta-final {
    padding: 5rem 0;
  }
}

@media (min-width: 992px) {
  :root {
    --radius-card: 1.5rem; /* `lg:rounded-3xl` */
    --section-y: 6rem; /* `lg:py-24` */
  }

  h2 {
    font-size: 2.75rem;
  }

  /* ⚠ Menu ngang mở ở 992px chứ không phải 768px như Poseidon. Bản mẫu của họ dùng `md:`
     được vì bốn nhãn tiếng Anh một từ. Năm nhãn tiếng Việt ở đây ("Cách hoạt động",
     "Đăng nhập"…) đúng 768px thì gãy làm hai dòng, chồng lên nhau — lỗi này đã CÓ SẴN từ
     bản cũ (ngắt ở 760px), thấy được trong ảnh chụp "trước" ở đúng bề rộng máy tính bảng. */
  .nav-toggle-btn {
    display: none;
  }

  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    background: none;
    border-bottom: 0;
    padding: 0;
  }

  .site-nav a:not(.btn) {
    padding: 0;
    border-top: 0;
  }

  .site-nav .btn {
    margin-top: 0;
  }

  .hero {
    padding: 7rem 0 3.5rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
  }

  .hero-shot {
    order: 0;
  }

  .lead {
    font-size: 1.25rem;
  }

  .card,
  .steps li {
    padding: 1.75rem;
  }

  /* Chốt 3 cột thay vì để auto-fit tự chia. Container nở tới 85rem ở ≥1200px, đủ chỗ cho
     BỐN cột 265px — và khối "Tính năng" có 6 thẻ nên auto-fit xếp thành 4+2, một hàng cụt.
     Ba cột giữ 6 thẻ thành 3+3, và ba khối còn lại (nỗi đau · ba bước · bảng giá) vốn đã
     đúng ba mục. */
  .grid-3,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section h2 + .grid-3,
  .section h2 + .steps,
  .section h2 + .faq,
  .section-lead + .grid-3,
  .section-lead + .steps {
    margin-top: 4rem; /* `lg:mt-16` */
  }
}

@media (min-width: 1200px) {
  :root {
    --wrap: 85rem;
  }

  h1 {
    font-size: 3.25rem;
  }
}