/* ============================================================
   Scarlet Sails HRM — website giới thiệu
   Static site, không framework, không build step.
   Sửa biến màu ở :root là đổi được toàn bộ tông màu.
   ============================================================ */

/* ------------------------------------------------------------
   TÔNG MÀU — nền tối là MẶC ĐỊNH, nền sáng là tuỳ chọn.

   Trước đây :root là bản sáng và bản tối nằm trong
   @media (prefers-color-scheme: dark). Nay đảo lại: :root giữ bản tối
   nên ai mở trang cũng thấy nền tối bất kể thiết lập hệ điều hành,
   còn bản sáng chỉ bật khi người dùng tự bấm nút (html[data-theme="light"]).
   Không dùng prefers-color-scheme cho tầng token nữa — nếu dùng, thiết lập
   hệ điều hành sẽ tranh quyền với nút bấm và người dùng bấm xong lại bị đổi về.
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* VÀNG CHANH là màu nhấn duy nhất của bản tối: nút chính, liên kết, số liệu,
     eyebrow. Trên nền gần đen, một màu nhấn sáng và lạnh hơn vàng đồng cho cảm giác
     dứt khoát; vẫn giữ đúng một màu nhấn thay vì rải nhiều màu.
     Bản sáng đổi hẳn sang XANH DƯƠNG — xem khối [data-theme="light"] bên dưới. */
  --brand: #e0d94e;         /* vàng chanh — nút, liên kết, chữ nhấn */
  --brand-bright: #f1eb85;  /* vàng chanh sáng — hover, chữ nhấn trên nền đen */
  --brand-deep: #b3ac35;    /* vàng chanh sẫm — trạng thái nhấn giữ chuột */
  /* Chữ ĐẶT TRÊN nền --brand. Vàng chanh rất sáng (~15:1 so với nền đen) nên chữ
     trên nó bắt buộc phải tối; bản sáng dùng xanh dương đậm nên ngược lại, chữ trắng. */
  --on-brand: #14150c;
  --navy: #0b111c;          /* nền hero / dải CTA (đen ngả xanh) */
  --navy-deep: #05080e;     /* đáy gradient, tối hơn nền trang */
  --teal: #f1eb85;          /* số liệu & nhãn trên nền tối — dùng chung vàng chanh sáng */
  --mint-ink: #e0d94e;      /* số liệu trên nền surface */
  --cyan: #16202f;          /* nền khối nhạt */
  --accent: #e5484d;        /* đỏ — số âm trong phiếu lương, báo lỗi */
  --accent-bright: #ff6369;
  --lime: #56c08d;          /* xanh lá — dấu tích, trạng thái đạt */

  /* "Pastel" của bản tối = các mảng tối có ánh màu, giữ nguyên vai trò nền thẻ */
  --tint-mint: #101a1c;
  --tint-cream: #1a1710;
  --tint-peach: #1c1611;
  --tint-leaf: #121a14;
  --tint-blue: #111826;

  --ink: #ffffff;           /* tiêu đề */
  --body: #a6aebc;          /* chữ thân bài */
  --muted: #828c9b;         /* chữ phụ — đủ 4.5:1 trên nền thẻ, đừng hạ tối hơn */
  --line: #1e2534;          /* đường kẻ & viền thẻ */
  --surface: #0e131c;       /* nền thẻ */
  --surface-2: #111823;
  --surface-3: #18202e;
  --page: #070b12;          /* nền trang */

  --radius: 14px;
  --radius-lg: 22px;
  /* Trên nền gần đen, đổ bóng gần như vô hình — chiều sâu phải dựa vào viền sáng
     mảnh. Giữ nguyên tên biến để không phải sửa hàng trăm chỗ đang dùng. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .62);

  --wrap: 1180px;
  --font: 'Manrope', "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Font chữ đều, chỉ dùng cho nhãn eyebrow in hoa — xem ghi chú trong fonts.css */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Bản sáng — chỉ bật khi người dùng bấm nút chuyển. Màu nhấn đổi hẳn sang XANH
   DƯƠNG, không phải sắc độ khác của vàng: vàng chanh trên nền trắng chỉ đạt khoảng
   1.3:1, tối đi tới mức đọc được thì đã thành màu nâu ô liu, không còn ra vàng chanh
   nữa. Xanh dương #0760c3 đạt ~5.9:1 trên nền trắng, dùng làm chữ và nút đều được. */
:root[data-theme="light"] {
  color-scheme: light;

  --brand: #0760c3;
  --brand-bright: #207de9;
  --brand-deep: #00448f;
  --on-brand: #ffffff;
  --navy: #101828;
  --navy-deep: #080d16;
  --teal: #6aaefc;          /* xanh sáng — dùng trên các dải nền TỐI của bản sáng */
  --mint-ink: #0760c3;
  --cyan: #e8f1fd;
  --accent: #c2185b;
  --accent-bright: #e0457f;
  --lime: #3f9b6d;

  --tint-mint: #f3f8f5;
  --tint-cream: #fdf8ea;
  --tint-peach: #fdf4e8;
  --tint-leaf: #f5f8ef;
  --tint-blue: #f4f4f7;

  --ink: #10141c;
  --body: #3c4350;
  --muted: #67707d;         /* chữ phụ — đủ 4.5:1 trên nền trắng, đừng nâng sáng hơn */
  --line: #e4e6ec;
  --surface: #ffffff;
  --surface-2: #f8f8fa;
  --surface-3: #eeeff3;
  --page: #ffffff;

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .06), 0 4px 12px rgba(16, 20, 28, .05);
  --shadow-md: 0 8px 30px rgba(16, 20, 28, .10);
  --shadow-lg: 0 20px 60px rgba(16, 20, 28, .16);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;      /* trang mẫu để 16px, không phải 17px */
  line-height: 1.55;    /* và nhịp dòng 1.5 — chặt hơn mức 1.7 trước đây */
  color: var(--body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* Sắp chữ đo trực tiếp từ trang mẫu, không ước lượng:
     h1  52px  weight 500  letter-spacing −1.82px (−.035em)  line-height 1.06
     h2  30px  weight 500  letter-spacing −0.66px (−.022em)  line-height 1.18
     h3  18px  weight 600  letter-spacing −0.18px (−.01em)
   Điểm khác lớn nhất so với bản trước: tiêu đề của họ ở weight **500**, không phải
   800. Weight 800 cho ra khối chữ đặc kiểu agency — đúng với mẫu bngagency lần
   trước, nhưng sai hẳn tinh thần thanh và thoáng của trang mẫu lần này.
   Tiếng Việt hưởng lợi thêm: ở weight nhẹ các dấu thanh bớt chen nhau.
   Line-height không hạ dưới 1.1 vì dấu tiếng Việt chồng lên dòng trên. */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .6em; font-weight: 500; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.25rem); letter-spacing: -.035em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); letter-spacing: -.022em; }
h3 { font-size: 1.12rem; letter-spacing: -.01em; font-weight: 600; }
h4 { letter-spacing: -.005em; font-weight: 600; }
p { margin: 0 0 1.1em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }
ul { padding-left: 1.15rem; }
li { margin-bottom: .4em; }
strong { color: var(--ink); }

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

/* ---------- Skip link (a11y) ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: var(--on-brand); padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--ink); font-size: 1.06rem; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
/* Huy hiệu logo đã là hình tròn có nền trong suốt — không bo góc, không cắt mép vòng hoa sen. */
.brand svg, .brand img { width: 42px; height: 42px; flex: none; }

/* Logo gốc vẽ bằng xanh thép cho nền trắng nên chìm hẳn trên nền tối.
   Nền tối là mặc định nên đĩa sáng thành quy tắc gốc; bản sáng gỡ đĩa ra. */
.brand img { background: #f2f7f9; border-radius: 50%; padding: 2px; }
:root[data-theme="light"] .brand img { background: none; border-radius: 0; padding: 0; }
.brand small { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--body); font-weight: 600; font-size: .95rem;
  padding: 9px 14px; border-radius: 9px;
  /* Không cho gãy chữ giữa mục: khi nav chật, "Trang chủ" tự xuống hai dòng trông như lỗi.
     Thà để nav tràn rồi chuyển sang menu gập còn hơn hiện chữ gãy đôi. */
  white-space: nowrap;
}
/* Mục "Tính năng" là <button> của nav-drop chứ không phải <a>, phải khai riêng —
   nếu không nó vẫn gãy đôi trong khi các mục bên cạnh đã thẳng. */
.nav-drop > button { white-space: nowrap; }
/* Tên thương hiệu ở đầu trang cũng vậy: "Scarlet Sails" gãy đôi thì đẩy cao cả thanh
   và cắt mất dòng "HRM PLATFORM" bên dưới. */
.brand > span { white-space: nowrap; }
.nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, transparent); }
/* Nút CTA trong nav giữ nguyên nền gradient kể cả khi đang ở chính trang đó,
   nếu không quy tắc aria-current ở trên sẽ ăn mất nền và chữ trắng thành không đọc được. */
.nav a.btn-primary,
.nav a.btn-primary[aria-current="page"] {
  color: var(--on-brand);
  background: var(--brand);
}

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 10px; width: 44px; height: 42px; cursor: pointer; color: var(--ink); font-size: 1.2rem;
}

/* Ngưỡng nâng dần theo số mục trên nav: 900 → 1040 khi thêm "Về chúng tôi",
   → 1240 khi thêm "Tuyển dụng". Mỗi mục ngốn khoảng 110px, hết chỗ là các mục dồn lại
   và chữ gãy đôi. Thêm mục mới lần sau thì nâng tiếp ngưỡng này. */
@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--page); border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px; box-shadow: var(--shadow-md);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; }
  .nav .btn { margin-top: 8px; text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .97rem; padding: 13px 26px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Nút chính để MỘT màu phẳng, không gradient: khối màu đặc mới ra được vẻ dứt khoát
   của trang mẫu, gradient làm nút trông mềm và cũ. */
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 30%, transparent); }
.btn-primary:hover { background: var(--brand-bright); box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 42%, transparent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { padding: 16px 32px; font-size: 1.03rem; }

/* ---------- Sections ---------- */
/* Nhịp dọc siết lại một nấc so với bản cũ (88/60): trang mẫu đặt section liền nhau
   hơn nên nội dung trông đặc và đi nhanh, chứ không rời rạc từng mảng. */
.section { padding: 72px 0; }
.section-tight { padding: 52px 0; }
.section-alt { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Nhãn eyebrow dùng FONT CHỮ ĐỀU, giống trang mẫu. Đây là chi tiết nhỏ nhưng làm
   nên chất của họ: cụm chữ in hoa giãn rộng bằng font mono đứng trên tiêu đề sans.
   Trang mẫu để 10px / giãn 3.6px (~.36em); ở đây lấy .2em vì tiếng Việt có dấu,
   giãn tới .36em thì chữ rời ra khó đọc. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.09rem; color: var(--muted); margin-bottom: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 84px 0 76px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 480px at 78% -12%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 62%),
    radial-gradient(760px 420px at 8% 4%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%),
    radial-gradient(520px 340px at 92% 74%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%);
}
/* minmax(0, ...) là bắt buộc: `1fr` mặc định có min-width:auto, nên bảng mini trong
   showcase thổi rộng cả cột lưới ra quá viewport và hero (overflow:hidden) cắt cụt chữ. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 60px; align-items: center; }
.hero h1 { margin-bottom: .5em; }
.hero-lead { font-size: 1.16rem; color: var(--body); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 26px; }
.hero-note { font-size: .92rem; color: var(--muted); margin: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pill {
  font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--body); box-shadow: var(--shadow-sm);
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* ---------- Hero visual: luồng dữ liệu ---------- */
.flow {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-lg);
}
.flow-title { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.flow-step { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; }
.flow-step + .flow-step { border-top: 1px dashed var(--line); }
.flow-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.15rem; background: var(--surface-3);
}
.flow-step b { display: block; color: var(--ink); font-size: .97rem; }
.flow-step span { font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.35rem; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 15%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
}
.card ul { margin: 0; color: var(--muted); font-size: .94rem; }

/* ---------- Pain / gain ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.panel { border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
.panel h3 { display: flex; align-items: center; gap: 10px; }
.panel-pain { background: var(--surface-2); }
.panel-gain { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.panel ul { margin: 0; }
.panel li { color: var(--body); }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); padding: 26px 22px; text-align: center; }
.stat b { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.stat span { font-size: .89rem; color: var(--muted); }

/* ---------- Module table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: top; }
th { background: var(--surface-3); color: var(--ink); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }

.tag { display: inline-block; font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.tag-full { background: color-mix(in srgb, #16a34a 16%, transparent); color: #4ade80; }
.tag-part { background: color-mix(in srgb, #d97706 18%, transparent); color: #fbbf24; }
:root[data-theme="light"] .tag-full { color: #15803d; }
:root[data-theme="light"] .tag-part { color: #b45309; }

/* ---------- Steps ----------
   Kiểu đánh số của trang mẫu: số 01–04 cỡ lớn màu vàng đứng trần, KHÔNG bọc trong
   đĩa tròn nền đặc. Số to để trần đọc ra ngay thứ tự, còn đĩa tròn làm nó thành
   một cái nhãn nhỏ lọt thỏm bên cạnh chữ.
   decimal-leading-zero để trang Triển khai (6 bước) vẫn ra 01…06 cho đều. */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.step {
  display: block; padding: 24px 22px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -.045em;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .35em; font-size: 1.08rem; }
.step p { margin-bottom: 0; color: var(--muted); font-size: .93rem; }

/* Trang Triển khai có 6 bước — 6 cột thì mỗi thẻ hẹp quá, xuống 3 cột cho dễ đọc. */
.steps:has(> .step:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
/* Khối 3 bước (trang tư vấn): để lưới 4 cột thì ô thứ tư trống, hàng bị lệch hẳn. */
.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .steps, .steps:has(> .step:nth-child(5)) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps, .steps:has(> .step:nth-child(5)) { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
/* Dải CTA: nền tối đều, ánh vàng toả từ ĐỈNH GIỮA xuống — cân với nội dung căn giữa.
   Bản cũ dùng gradient chéo 135° kết thúc bằng --brand-deep nên dồn hết mảng vàng
   vào góc dưới phải, nhìn như khối màu bị lệch chứ không ra dụng ý. */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(680px 300px at 50% -30%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%),
    linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fff; border-radius: var(--radius-lg); padding: 58px 44px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: var(--teal); }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 620px; margin: 0 auto 28px; font-size: 1.06rem; }
.cta-band .btn-primary { background: var(--brand-bright); }
.cta-band .btn-primary:hover { background: #fff; color: var(--navy); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* Hai nút trong dải CTA đều là btn-ghost trong HTML nên nếu để nguyên sẽ giống hệt
   nhau và mất thứ bậc. Nút đầu là hành động chính: tô đặc màu trắng cho nổi trên navy. */
.cta-band .cta-actions .btn:first-child {
  background: #fff; color: var(--navy); border-color: #fff;
}
.cta-band .cta-actions .btn:first-child:hover { background: var(--teal); color: var(--navy-deep); border-color: var(--teal); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 640px) { .cta-band { padding: 40px 24px; } }

/* ---------- Form ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--page); border: 1px solid var(--line); border-radius: 10px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; border-color: var(--brand); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.form-hint { font-size: .86rem; color: var(--muted); }
.form-status { margin-top: 16px; padding: 13px 16px; border-radius: 10px; font-size: .93rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #4ade80; }
.form-status.err { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-bright); }
:root[data-theme="light"] .form-status.ok { color: #15803d; }
:root[data-theme="light"] .form-status.err { color: var(--accent); }

/* ---------- Contact info list ---------- */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.info-list li:last-child { border-bottom: 0; }
.info-list b { display: block; color: var(--ink); font-size: .95rem; }
.info-list span { font-size: .93rem; color: var(--muted); }
.todo { color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 7px; border-radius: 5px; }

/* ---------- FAQ ---------- */
details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
}
details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
summary { font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; flex: none; }
details[open] summary::after { content: "\2013"; }
details p { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }

/* ---------- Footer ---------- */
.site-foot { background: var(--surface-2); border-top: 1px solid var(--line); padding: 58px 0 30px; margin-top: 20px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 9px; }
.foot-grid a { color: var(--body); font-size: .94rem; }
.foot-grid a:hover { color: var(--brand); }
.foot-about p { font-size: .93rem; color: var(--muted); max-width: 34em; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .88rem; color: var(--muted); }

/* ---------- Utils ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.lead { font-size: 1.1rem; color: var(--body); }
.small { font-size: .9rem; color: var(--muted); }
/* Viền vàng chứ không phải đỏ: đây là khối GHI CHÚ hữu ích ("chuẩn bị trước buổi
   demo sẽ nhanh hơn"), không phải cảnh báo. Viền đỏ làm người đọc tưởng báo lỗi. */
.note {
  border-left: 3px solid var(--brand); background: var(--surface-2);
  padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: .94rem; color: var(--body);
}
.note p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover { transform: none; }
}

/* ============================================================
   NÂNG CẤP GIAO DIỆN — hero showcase, animation, blog components
   ============================================================ */

/* ---------- Nền gradient động cho hero ---------- */
.hero::after {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 720px; z-index: -1;
  background:
    radial-gradient(520px 320px at 20% 30%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(460px 300px at 80% 20%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%),
    radial-gradient(420px 280px at 55% 70%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    radial-gradient(380px 260px at 88% 88%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  filter: blur(30px); opacity: .7;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-24px, 18px, 0) scale(1.06); }
  100% { transform: translate3d(20px, -14px, 0) scale(1.02); }
}

/* ---------- Showcase: cửa sổ sản phẩm ---------- */
.showcase { position: relative; }
.window {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: float-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes float-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.win-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.win-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.win-title { margin-left: 8px; font-size: .76rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.win-body { padding: 16px 18px 20px; }

.mini-table { width: 100%; border-collapse: collapse; min-width: 0; }
.mini-table th, .mini-table td {
  padding: 8px 3px; text-align: center; border: 0; border-bottom: 1px solid var(--line);
  font-size: .72rem; white-space: nowrap; text-transform: none; letter-spacing: 0; background: transparent;
}
.mini-table th { color: var(--muted); font-size: .64rem; letter-spacing: .04em; font-weight: 700; }
.mini-table td:first-child, .mini-table th:first-child { text-align: left; padding-left: 4px; color: var(--ink); font-weight: 700; }
.mini-table tbody tr:last-child td { border-bottom: 0; }

.chip {
  display: inline-block; min-width: 32px; padding: 3px 6px; border-radius: 6px;
  font-size: .66rem; font-weight: 800;
}

/* Màn hẹp: bớt bớt cột ngày để bảng minh họa vẫn vừa khung, không phải cuộn ngang. */
@media (max-width: 620px) {
  .mini-table th:nth-child(n+6), .mini-table td:nth-child(n+6) { display: none; }
}
@media (max-width: 420px) {
  .mini-table th:nth-child(n+5), .mini-table td:nth-child(n+5) { display: none; }
}
.chip-ok   { background: color-mix(in srgb, #16a34a 20%, transparent); color: #15803d; }
.chip-ot   { background: color-mix(in srgb, var(--teal) 24%, transparent); color: #22d3ee; }
.chip-late { background: color-mix(in srgb, #d97706 26%, transparent); color: #fbbf24; }
.chip-off  { background: var(--surface-3); color: var(--muted); }
.chip-night{ background: color-mix(in srgb, #6366f1 24%, transparent); color: #a5b4fc; }
:root[data-theme="light"] .chip-ok { color: #15803d; }
:root[data-theme="light"] .chip-ot { color: #16657e; }
:root[data-theme="light"] .chip-late { color: #b45309; }
:root[data-theme="light"] .chip-night { color: #4f46e5; }

.float-card {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 15px; box-shadow: var(--shadow-md);
  font-size: .82rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px;
  animation: bob 5s ease-in-out infinite;
}
.float-card em { font-style: normal; font-size: 1.1rem; }
.float-card small { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); }
/* Thẻ nổi phải nằm TRÊN cửa sổ (cửa sổ đứng sau trong DOM nên mặc định che mất),
   và không thò quá xa mép .wrap để hero (overflow:hidden) không cắt cụt chữ. */
.float-card { z-index: 2; }
.window { position: relative; z-index: 1; }
/* Nằm HẲN ngoài mép trên/dưới của cửa sổ, không gối lên nó.
   Trước đây top/bottom chỉ lệch -24…-32px trong khi thẻ cao ~50px, nên thẻ luôn
   chồm vào trong: thẻ trên che mất dòng tiêu đề "Bảng chấm công — Tháng…", thẻ dưới
   đè lên một hàng nhân viên. Nhìn ra thành lỗi layout chứ không ra thẻ nổi.
   Trừ hao thêm 9px vì hiệu ứng bob nhấp lên xuống ±9px. */
.float-1 { top: -68px; left: -26px; animation-delay: .2s; }
.float-2 { bottom: -78px; left: -18px; animation-delay: 1.4s; }
.float-3 { bottom: -78px; right: -20px; animation-delay: 2.6s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1280px) { .float-1, .float-2, .float-3 { display: none; } }

/* ---------- Reveal khi cuộn ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* ---------- Dải chạy ngang ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface-2); padding: 15px 0; }
.ticker-track { display: flex; gap: 40px; width: max-content; animation: slide 40s linear infinite; }
.ticker-track b {
  font-size: .87rem; font-weight: 700; color: var(--muted); white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.stat b { font-variant-numeric: tabular-nums; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: .85rem; color: var(--muted); padding: 20px 0 0; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }
.crumb i { font-style: normal; margin: 0 7px; opacity: .5; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); text-decoration: none; }
/* Ảnh bìa bài viết: nền tối + một quầng vàng nhạt ở góc, icon vàng.
   Trước đây là dải gradient chạy thẳng từ navy sang vàng sáng — trên nền tối nó ra
   một vệt nâu ngả ô liu, ba thẻ đứng cạnh nhau nhìn như ảnh bị lỗi màu. */
.post-cover {
  height: 124px; display: grid; place-items: center; font-size: 2.3rem;
  background:
    radial-gradient(220px 150px at 78% 6%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 72%),
    linear-gradient(160deg, var(--surface-3), var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
}
.post-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.post-body p { margin: 0; font-size: .92rem; color: var(--muted); }
.post-meta { margin-top: auto; padding-top: 14px; font-size: .8rem; color: var(--muted); font-weight: 700; }

/* ---------- Nội dung bài viết ---------- */
.article { max-width: 750px; margin: 0 auto; }
.article h2 { margin-top: 1.9em; font-size: 1.6rem; }
.article h3 { margin-top: 1.5em; font-size: 1.14rem; }
.article > p, .article > ul, .article > ol { font-size: 1.05rem; }
.article ul, .article ol { margin-bottom: 1.2em; }
.article-lead { font-size: 1.14rem; color: var(--body); border-left: 3px solid var(--accent); padding-left: 20px; margin-bottom: 2em; }
.article-meta { font-size: .88rem; color: var(--muted); margin-bottom: 28px; }
.toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 34px; }
.toc b { display: block; margin-bottom: 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: 6px; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .hero::after, .window, .float-card, .ticker-track { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Chuyển ngôn ngữ ---------- */
.lang {
  display: flex; align-items: center; gap: 2px; margin-left: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface);
}
.lang a {
  padding: 5px 11px; font-size: .8rem; font-weight: 800; border-radius: 7px;
  color: var(--muted); letter-spacing: .04em;
}
.lang a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--brand); color: var(--on-brand); }
.lang a[aria-current="true"]:hover { background: var(--brand); color: var(--on-brand); }

/* Phải cùng ngưỡng với menu gập (1040px), không thì trong khoảng 900–1040px cụm
   ngôn ngữ nằm trong menu xổ dọc nhưng vẫn mang kiểu của thanh ngang. */
@media (max-width: 1040px) {
  .lang { margin: 10px 0 0; justify-content: center; }
  .lang a { flex: 1; text-align: center; padding: 10px; }
}

/* ---------- Nút chuyển nền sáng/tối ---------- */
/* Nền tối là mặc định nên nút mặc định hiện hình MẶT TRỜI (bấm để sang nền sáng);
   khi đang ở nền sáng thì đổi sang hình MẶT TRĂNG. Chỉ một nút, đổi icon bằng CSS
   để không phải viết JS dựng lại nội dung nút. */
.theme-toggle {
  display: grid; place-items: center; margin-left: 8px; flex: none;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
.theme-toggle .ic { width: 19px; height: 19px; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* Cùng ngưỡng với menu gập (1040px) — xem ghi chú ở khối .lang phía trên. */
@media (max-width: 1040px) {
  /* Trong menu xổ dọc, nút vuông 40px đứng lẻ trông chông chênh — kéo dài ra và
     ghép nhãn chữ cho cân với các mục menu khác. */
  .theme-toggle { width: 100%; margin: 10px 0 0; height: 46px; }
}

/* ============================================================
   NÂNG CẤP CHUYÊN NGHIỆP — hàng tính năng xen kẽ, vai trò,
   nút liên hệ nổi, FAQ 2 cột, dropdown menu
   ============================================================ */

/* ---------- Hàng tính năng: chữ một bên, ảnh sản phẩm một bên ---------- */
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px; align-items: center; padding: 56px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row.flip .feature-copy { order: 2; }
.feature-row.flip .feature-visual { order: 1; }
@media (max-width: 940px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 52px 0; }
  .feature-row.flip .feature-copy, .feature-row.flip .feature-visual { order: initial; }
}

.feature-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
}
.feature-copy h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -.015em; margin-bottom: .5em; }
.feature-copy > p { font-size: 1.05rem; }
.feature-points { list-style: none; padding: 0; margin: 22px 0 0; }
.feature-points li {
  position: relative; padding-left: 30px; margin-bottom: 12px; font-size: .97rem; color: var(--body);
}
.feature-points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.feature-points li strong { color: var(--ink); }

/* ---------- Mockup phiếu lương ---------- */
.pay-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; border-bottom: 1px dashed var(--line); font-size: .84rem;
}
.pay-row:last-child { border-bottom: 0; }
.pay-row span { color: var(--muted); }
.pay-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.pay-row.total { border-top: 2px solid var(--line); border-bottom: 0; margin-top: 6px; padding-top: 14px; }
.pay-row.total span { color: var(--ink); font-weight: 700; }
.pay-row.total b { color: var(--brand); font-size: 1.18rem; }
.pay-row.minus b { color: var(--accent); }

/* ---------- Mockup điện thoại ---------- */
.phone {
  width: 250px; margin: 0 auto; background: var(--surface);
  border: 9px solid var(--ink); border-radius: 34px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.phone-bar {
  background: linear-gradient(135deg, var(--brand), var(--navy));
  color: #fff; padding: 16px 16px 22px;
}
.phone-bar small { display: block; font-size: .68rem; opacity: .82; letter-spacing: .05em; }
.phone-bar b { font-size: 1.02rem; }
.phone-body { padding: 4px 14px 16px; }
.phone-check {
  margin: -16px 0 12px; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 14px; text-align: center;
}
.phone-check .big { font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.phone-check .sub { font-size: .7rem; color: var(--muted); }
.phone-btn {
  margin-top: 10px; background: var(--brand);
  color: var(--on-brand); border-radius: 10px; padding: 9px; font-size: .82rem; font-weight: 800;
}
.phone-list { list-style: none; padding: 0; margin: 0; }
.phone-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--body);
}
.phone-list li:last-child { border-bottom: 0; }
.phone-list b { color: var(--ink); font-weight: 700; }

/* ---------- Mockup trạng thái thiết bị ---------- */
.dev-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: .82rem;
}
.dev-row:last-child { border-bottom: 0; }
.dev-row .nm { color: var(--ink); font-weight: 700; }
.dev-row .nm small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.dev-row .ct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .76rem; }
.dot-ok, .dot-warn {
  display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.dot-ok { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.dot-warn { background: color-mix(in srgb, #d97706 20%, transparent); color: #b45309; }
.dot-ok { color: #4ade80; } .dot-warn { color: #fbbf24; }
:root[data-theme="light"] .dot-ok { color: #15803d; }
:root[data-theme="light"] .dot-warn { color: #b45309; }

/* ---------- Vai trò người dùng ---------- */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .role-grid { grid-template-columns: 1fr; } }
.role {
  text-align: center; padding: 30px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.role:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.role-ico {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.role:nth-child(2) .role-ico { background: color-mix(in srgb, var(--teal) 16%, transparent); }
.role:nth-child(3) .role-ico { background: color-mix(in srgb, var(--cyan) 26%, transparent); }
.role:nth-child(4) .role-ico { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.role h3 { font-size: 1.05rem; margin-bottom: .45em; }
.role p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- FAQ hai cột ---------- */
.faq-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .faq-split { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.faq-split .section-head { margin-bottom: 0; position: sticky; top: 100px; }
@media (max-width: 900px) { .faq-split .section-head { position: static; } }

/* ---------- Nút liên hệ nổi ---------- */
/* Đặt bên PHẢI: các nút CTA trong hero căn trái, để bên trái thì nút nổi đè lên
   đúng nút "Xem toàn bộ tính năng" trên mobile. Ba nút xếp dọc cũng nặng nề nên
   thu nhỏ lại và làm mờ bớt khi không trỏ tới. */
.float-contact {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px;
}
.float-contact a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(18, 49, 61, .22);
  opacity: .92; transition: transform .15s ease, opacity .15s ease;
}
.float-contact:hover a, .float-contact a:focus-visible { opacity: 1; }
.float-contact a:hover { transform: scale(1.08); text-decoration: none; }
/* Nút "đặt demo" nền vàng nên icon phải là màu tối, khác hai nút Zalo/gọi nền đậm */
.float-contact .fc-demo { background: var(--brand); color: var(--on-brand); }
.float-contact .fc-zalo { background: #0068ff; font-size: .72rem; font-weight: 800; }
.float-contact .fc-phone { background: var(--accent); }
@media (max-width: 620px) {
  .float-contact { right: 12px; bottom: 12px; gap: 8px; }
  .float-contact a { width: 42px; height: 42px; font-size: 1.05rem; }
}

/* ---------- Icon SVG (thay cho emoji) ----------
   Emoji hiển thị khác nhau trên mỗi hệ điều hành và làm site trông như hàng mẫu.
   Bộ icon này dùng currentColor nên tự ăn theo màu chữ của khối chứa nó,
   và lấy kích thước 1em nên vẫn tôn trọng font-size đã đặt sẵn ở từng chỗ. */
.ic {
  width: 1em; height: 1em; flex: none;
  vertical-align: -0.14em;
}
/* Icon đứng đầu tiêu đề: tách khỏi chữ và lấy màu thương hiệu */
h2 > .ic, h3 > .ic { color: var(--brand); margin-right: .4em; vertical-align: -0.1em; }
/* Ô icon bo góc của thẻ tính năng và thẻ vai trò */
.card-ico .ic, .role-ico .ic { color: var(--brand); }
/* Nhãn nhỏ trên mockup */
.feature-tag .ic { color: var(--brand); margin-right: .1em; }
/* Dải ticker: chữ nhỏ nên icon cần to hơn một chút mới cân */
.ticker-track b .ic { width: 1.3em; height: 1.3em; color: var(--brand); }
.ticker-track em .ic { width: 1.3em; height: 1.3em; color: var(--brand); }
/* Ảnh bìa bài viết: nền gradient đậm nên icon phải trắng */
.post-cover .ic { color: var(--brand); opacity: 1; }
/* Danh sách thông tin liên hệ */
.info-list .ic { color: var(--brand); }
/* Nút liên hệ nổi: nền đậm, icon trắng và nhỉnh hơn chữ */
.float-contact .ic { width: 1.2em; height: 1.2em; }

/* ---------- Dropdown trong nav ---------- */
.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--body); font-weight: 600; font-size: .95rem; padding: 9px 14px; border-radius: 9px;
}
.nav-drop > button::after { content: "\25BE"; font-size: .7rem; opacity: .7; }
.nav-drop > button:hover { background: var(--surface-3); color: var(--ink); }
.nav-drop-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 60;
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { display: block; }
.nav-drop-panel a {
  display: block; padding: 10px 12px; border-radius: 8px; font-size: .92rem;
  color: var(--body); font-weight: 600;
}
.nav-drop-panel a small { display: block; font-weight: 500; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.nav-drop-panel a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }

@media (max-width: 900px) {
  .nav-drop { width: 100%; }
  .nav-drop > button { width: 100%; justify-content: space-between; padding: 12px 14px; }
  .nav-drop-panel {
    position: static; display: block; box-shadow: none; border: 0;
    padding: 0 0 0 12px; min-width: 0; background: transparent;
  }
  .nav-drop-panel a small { display: none; }
}

/* ---------- Dải cam kết (thay cho tường logo khách hàng) ---------- */
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .promise-grid { grid-template-columns: 1fr; } }
.promise {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 28px;
}
.promise h3 { font-size: 1.05rem; margin-bottom: .5em; }
.promise p { margin: 0; font-size: .95rem; color: var(--muted); }

/* ============================================================
   LỚP GIAO DIỆN KIỂU AGENCY
   Hero navy đặc, tiêu đề hai tông, số liệu mint cỡ lớn, thẻ nền pastel.
   Đặt cuối file để đè lên phần nền ở trên mà không phải viết lại cả file.
   ============================================================ */

/* ---------- Dải liên hệ mảnh trên đầu trang ---------- */
.topbar {
  background: var(--navy); color: rgba(255, 255, 255, .82);
  font-size: .82rem; font-weight: 600;
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .tb-claim { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; letter-spacing: .01em; }
.topbar .tb-claim b { color: var(--teal); font-weight: 800; letter-spacing: .02em; }
.topbar .ic { width: 1.05em; height: 1.05em; opacity: .9; }
@media (max-width: 720px) {
  .topbar { font-size: .76rem; }
  .topbar .tb-claim { display: none; }
  .topbar .wrap { justify-content: center; gap: 14px; min-height: 34px; }
}

/* ---------- Hero nền đen ---------- */
/* .hero::before đã phủ kín khung hero và nằm dưới nội dung (z-index:-1) nên tô nền
   ngay tại đó, khỏi phải đụng vào cấu trúc HTML hay thứ tự xếp lớp.

   Ánh sáng ở đây phải RẤT nhạt. Nền gần đen chỉ cần một quầng ấm hé ở góc là đủ
   thấy chiều sâu; đẩy đậm lên là thành vệt màu bẩn chứ không sang. */
.hero::before {
  background:
    radial-gradient(900px 520px at 82% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
    radial-gradient(700px 460px at 6% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 64%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hero::after {
  background:
    radial-gradient(520px 320px at 22% 32%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%),
    radial-gradient(460px 300px at 82% 18%, color-mix(in srgb, var(--brand-bright) 7%, transparent), transparent 72%);
  opacity: .9;
}
.hero h1, .hero h2, .hero strong { color: #fff; }
.hero .eyebrow { color: var(--teal); }
.hero-lead { color: rgba(255, 255, 255, .8); }
.hero-note { color: rgba(255, 255, 255, .6); }
.hero .lead, .hero p { color: rgba(255, 255, 255, .8); }
.hero .pill {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22);
  color: #fff; box-shadow: none; backdrop-filter: blur(4px);
}
.hero .btn-ghost {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none;
}
.hero .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hero a:not(.btn) { color: var(--teal); }
.hero .crumb, .hero .crumb a { color: rgba(255, 255, 255, .62); }
.hero .crumb a:hover { color: #fff; }
/* Trang trong dùng hero ngắn, chỉ có tiêu đề + một đoạn dẫn */
.hero { padding: 76px 0 72px; }

/* Hero và dải CTA LUÔN nền tối, kể cả khi người dùng chọn bản sáng. Nên khai báo
   lại đúng nhóm token nền-tối ngay trên hai khối này: biến CSS có tính thừa kế,
   nhờ vậy mọi thứ bên trong (cửa sổ sản phẩm, thẻ, đường kẻ, nút) tự lấy màu hợp
   với nền tối mà không phải viết quy tắc ghi đè cho từng thành phần.

   Màu nhấn ở đây là XANH SÁNG chứ không phải xanh #0760c3 của bản sáng: xanh đậm
   đó chỉ đạt ~2.4:1 trên nền gần đen, đặt lên hero là chìm hẳn. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .cta-band {
  --surface: #0e131c;
  --surface-2: #111823;
  --surface-3: #18202e;
  --line: #1e2534;
  --ink: #ffffff;
  --body: #a6aebc;
  --muted: #6f7988;
  --brand: #6aaefc;
  --brand-bright: #93c6ff;
  --brand-deep: #2f7fd8;
  --on-brand: #08172b;
}

/* ============================================================
   HERO TRANG CHỦ — bố cục kiểu trang mẫu
   Ảnh sản phẩm phủ kín phía sau, chữ đè lên trên; cụm giới thiệu + nút ở góc
   dưới trái, dải thẻ năng lực ở góc dưới phải.
   Toàn bộ tên class ở khối này là tên MỚI (hero-full, hero-canvas, hero-inner,
   hero-foot, hero-pitch, hero-deck, deck-*, btn-arrow, hero-title) — cố ý không
   khai báo lại selector nào đã có ở trên để tránh đè nhầm quy tắc/breakpoint.
   ============================================================ */
.hero-full {
  padding: 0; min-height: 90vh;
  display: flex; align-items: flex-end;
}

/* Lớp ảnh: nằm dưới nội dung nhưng trên hai lớp gradient nền của .hero
   (hai lớp đó dùng z-index:-1) */
.hero-canvas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Cửa sổ sản phẩm cố tình tràn khỏi mép phải để trông như một khung ảnh bị cắt,
   không phải một cái hộp đặt gọn giữa trang. */
.hero-canvas .window {
  position: absolute; top: 7%; left: 52%; width: 70%;
  transform: rotate(-1.1deg);
  box-shadow: var(--shadow-lg);
  opacity: .82; /* lùi ra sau một nấc để không tranh với chữ */
  /* Tan dần ở chân khung: vừa để dải thẻ + nhãn "Bốn phần lõi" ở dưới không chồng
     lên hàng cuối của bảng, vừa cho cảm giác ảnh chìm vào nền thay vì bị cắt ngang. */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 94%);
}
.hero-canvas .mini-table { font-size: .72rem; }
.hero-canvas .mini-table th, .hero-canvas .mini-table td { padding: 7px 6px; }

/* Lớp phủ làm ảnh mờ dần về bên trái. Không có lớp này thì chữ nằm trên lưới dữ
   liệu và không đủ tương phản để đọc. */
/* Nửa trái phải ĐẶC hẳn, không phải mờ nhẹ: tiêu đề cỡ 4rem nằm đè lên một lưới
   dữ liệu dày, chỉ giảm mờ chút thì chữ và số lẫn vào nhau không đọc nổi.
   Lớp thứ hai tối chân khung để dải thẻ ở góc dưới phải có nền tĩnh. */
.hero-canvas::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      var(--navy) 0%,
      var(--navy) 46%,
      color-mix(in srgb, var(--navy) 90%, transparent) 60%,
      color-mix(in srgb, var(--navy) 58%, transparent) 78%,
      color-mix(in srgb, var(--navy) 38%, transparent) 100%),
    linear-gradient(0deg,
      var(--navy) 14%,
      color-mix(in srgb, var(--navy) 88%, transparent) 34%,
      transparent 58%);
}

.hero-inner { position: relative; z-index: 1; padding: 128px 24px 56px; width: 100%; }
/* Cỡ chữ bị chặn ở 3.5rem chứ không để 4.2rem: to hơn mức này thì dòng "Chấm công
   tự động." vượt qua nửa trái đặc màu và chữ bắt đầu chạm vào lưới dữ liệu.
   max-width nới từ 14ch lên 16ch sau khi đổi sang Manrope: font này hẹp hơn Inter
   nhưng `ch` cũng co theo, nên 14ch cắt luôn dòng đầu thành hai — tiêu đề vỡ 4 dòng
   thay vì 3 dòng như ý đồ của thẻ <br> trong markup. */
.hero-title { font-size: clamp(2.2rem, 4.6vw, 3.5rem); max-width: 16ch; margin-bottom: 0; }

.hero-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 48px; align-items: end; margin-top: 64px;
}
.hero-pitch { max-width: 52ch; }
.hero-pitch .eyebrow { display: block; margin-bottom: 12px; }
.hero-pitch .hero-lead { margin-bottom: 22px; }

/* Liên kết phụ dạng chữ + mũi tên, thay cho nút viền thứ hai: trang mẫu để nút
   chính đứng một mình cho dứt khoát, lựa chọn thứ hai chỉ là một dòng chữ. */
.btn-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .97rem; color: var(--ink); padding: 13px 4px;
}
.btn-arrow span { transition: transform .15s ease; color: var(--brand); }
.btn-arrow:hover { text-decoration: none; color: var(--brand-bright); }
.btn-arrow:hover span { transform: translateX(4px); }

/* Dải thẻ năng lực góc dưới phải */
.deck-label {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand);
}
.deck-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.deck-card {
  display: block; padding: 16px 14px 15px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.deck-card:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-3px); }
.deck-card .ic { width: 20px; height: 20px; color: var(--brand); margin-bottom: 10px; }
/* Màu đặt thẳng trên <b>, không dựa vào màu thừa kế từ thẻ <a>: quy tắc
   `.hero a:not(.btn) { color: var(--teal) }` có độ ưu tiên cao hơn nên nếu chỉ tô
   màu cho .deck-card thì tiêu đề thẻ bị kéo về vàng và chìm mất. */
.deck-card b { display: block; font-size: .93rem; margin-bottom: 3px; color: var(--ink); }
.deck-card small { display: block; font-size: .76rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 1180px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-canvas .window { left: 52%; width: 88%; top: 4%; }
}

@media (max-width: 940px) {
  /* Trên điện thoại, đặt chữ lên lưới dữ liệu là không đọc nổi dù có lớp phủ.
     Đổi ảnh sản phẩm thành một khối ĐỨNG RIÊNG bên dưới phần chữ — vừa đọc được,
     vừa không mất hẳn hình sản phẩm như bản trước đây. */
  /* Phải giữ flex (không đổi về block) thì `order` mới có tác dụng: .hero-canvas
     đứng TRƯỚC .hero-inner trong DOM, để nguyên thì ảnh nhảy lên trên tiêu đề. */
  .hero-full { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
  .hero-inner { order: 1; padding: 76px 24px 8px; }
  .hero-canvas { order: 2; }
  .hero-title { max-width: none; }
  .hero-foot { margin-top: 36px; }
  .hero-canvas {
    position: static; inset: auto; overflow: hidden;
    margin: 32px 0 0; padding: 0 24px 40px;
  }
  .hero-canvas::after { display: none; }
  .hero-canvas .window {
    position: static; width: 100%; transform: none;
    max-width: 640px; margin: 0 auto;
  }
  .hero-canvas .mini-table { font-size: .68rem; }
}

@media (max-width: 720px) {
  .deck-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .deck-row { grid-template-columns: 1fr; }
}

/* ============================================================
   BA MẪU BỐ CỤC LẤY TỪ TRANG MẪU
   1. Đầu section: tiêu đề bên trái, nút "xem tất cả" bên phải
   2. Danh sách gạch vuông vàng có kẻ tóc ngăn từng dòng
   3. Dải pill lọc + lưới thẻ
   Tên class đều mới, không khai báo lại selector nào đã có.
   ============================================================ */

/* ---------- 1. Đầu section hai bên ---------- */
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 40px;
}
/* .section-head bên trong đã có margin-bottom riêng — bỏ đi để hàng tự canh đáy */
.section-head-row .section-head { margin-bottom: 0; }
.head-action { flex: none; white-space: nowrap; }
.head-action span { color: var(--brand); transition: transform .15s ease; display: inline-block; }
.head-action:hover span { transform: translateX(4px); }

@media (max-width: 820px) {
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- 2. Danh sách gạch vuông vàng ---------- */
/* Trang mẫu dùng ô vuông nhỏ màu vàng + một đường kẻ tóc dưới mỗi mục, thay cho
   dấu chấm tròn. Kẻ tóc mới là thứ tạo nhịp cho danh sách; bỏ nó đi thì các dòng
   dính vào nhau thành một khối chữ. */
.feature-points { list-style: none; padding: 0; margin: 22px 0 0; }
.feature-points li {
  position: relative; padding: 13px 0 13px 24px; margin: 0;
  border-bottom: 1px solid var(--line);
}
.feature-points li:last-child { border-bottom: 0; }
.feature-points li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 7px; height: 7px; background: var(--brand); border-radius: 1px;
}
.feature-points li strong { color: var(--ink); }

/* ---------- 3. Pill lọc + lưới thẻ phân hệ ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pill-filter {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  padding: 9px 17px; border-radius: 999px;
  background: var(--surface); color: var(--body);
  border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill-filter:hover { border-color: var(--brand); color: var(--ink); }
.pill-filter.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mod-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 20px 18px;
  transition: border-color .15s ease, transform .15s ease;
}
.mod-card:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: translateY(-2px); }
.mod-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.mod-top h3 { margin: 0; font-size: 1.02rem; }
.mod-card p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.6; }
.mod-card[hidden] { display: none; }
.mod-empty { margin: 24px 0 0; color: var(--muted); }

@media (max-width: 980px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mod-grid { grid-template-columns: 1fr; } }

/* ---------- 4. Về chúng tôi: khối hình trái + danh sách gạch vàng phải ---------- */
.about-split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}

/* Cột trái đứng thay chỗ của ảnh chụp đội ngũ: con số lớn + ba lĩnh vực.
   Viền vàng mờ và quầng sáng góc trên để khối này nặng ngang một tấm ảnh, nếu để
   nền phẳng như thẻ thường thì nó chìm và bố cục thành lệch hẳn về bên phải. */
.about-visual {
  position: relative; overflow: hidden;
  padding: 40px 34px 34px; border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 260px at 84% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
}
.about-big {
  display: block; font-size: clamp(3.4rem, 7vw, 4.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -.05em; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.about-big-sub { margin: 12px 0 26px; max-width: 30ch; color: var(--body); }

.about-domains { border-top: 1px solid var(--line); }
.about-domain {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.about-domain .ic { width: 21px; height: 21px; color: var(--brand); flex: none; margin-top: 2px; }
.about-domain b { display: block; font-size: .96rem; color: var(--ink); }
.about-domain small { display: block; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.about-note { margin: 20px 0 0; font-size: .84rem; color: var(--muted); }

.about-copy .lead { font-size: 1.06rem; margin-bottom: 6px; }
.about-list { list-style: none; padding: 0; margin: 22px 0 28px; }
.about-list li {
  position: relative; padding: 15px 0 15px 24px; margin: 0;
  border-bottom: 1px solid var(--line);
}
.about-list li:last-child { border-bottom: 0; }
.about-list li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 7px; height: 7px; background: var(--brand); border-radius: 1px;
}
.about-list strong { display: block; color: var(--ink); margin-bottom: 3px; }
.about-list span { display: block; font-size: .93rem; color: var(--muted); line-height: 1.62; }

@media (max-width: 940px) {
  .about-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* Trên màn hẹp, phần chữ phải đứng TRƯỚC khối số: người đọc cần biết đang đọc về
     ai rồi mới tới con số, chứ không mở ra đã thấy "10+" chưa rõ của cái gì. */
  .about-visual { order: 2; }
  .about-copy { order: 1; }
}

/* ---------- Tiêu đề hai tông ---------- */
/* Bôi màu một cụm từ trong tiêu đề bằng <span class="hl">…</span> */
.hl { color: var(--brand); }
.hero .hl, .cta-band .hl { color: var(--teal); }

/* ---------- Nhãn nhỏ phía trên tiêu đề ---------- */
.eyebrow { color: var(--brand); letter-spacing: .14em; }

/* ---------- Đầu mục section ---------- */
.section-head.center { max-width: 800px; }
.section-head p { font-size: 1.12rem; }

/* ---------- Dải số liệu ---------- */
/* Bỏ khung và đường kẻ: số cỡ lớn đứng một mình mới ra dáng bảng thành tích. */
.stats {
  grid-template-columns: repeat(4, 1fr); gap: 28px;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
/* Khối này đứng sau .stats gốc nên phải khai báo lại breakpoint: nếu không, quy tắc
   4 cột ở trên đè mất @media(max-width:780px) khai báo phía trước, dải số liệu giữ
   nguyên 4 cột trên điện thoại và đẩy cả trang trượt ngang. */
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 380px) { .stats { grid-template-columns: 1fr; gap: 18px; } }
.stat { background: transparent; padding: 4px 0; text-align: left; }
.stat b {
  font-size: clamp(2.4rem, 4.6vw, 3.2rem); font-weight: 800; color: var(--mint-ink);
  letter-spacing: -.045em; line-height: 1.05; margin-bottom: 8px;
}
.stat span {
  display: block; font-size: .8rem; font-weight: 800; color: var(--ink);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.45;
}
/* Trên nền navy thì dùng mint sáng, chữ chú thích chuyển sang trắng */
.hero .stat b, .cta-band .stat b { color: var(--teal); }
.hero .stat span, .cta-band .stat span { color: rgba(255, 255, 255, .78); }

/* ---------- Thẻ ---------- */
/* Nền tối: mọi thẻ chung một nền, phân tách bằng VIỀN TÓC chứ không bằng màu.
   Bốn màu pastel luân phiên là ngôn ngữ của nền sáng — bê nguyên sang nền tối thì
   thành bốn mảng nâu/lục/lam lấm tấm, đúng chỗ trông rẻ tiền nhất. */
.role, .promise {
  background: var(--surface); border: 1px solid var(--line); box-shadow: none;
}
.role:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: none; }

/* Nền sáng giữ nguyên dải pastel luân phiên như trước. */
:root[data-theme="light"] .role,
:root[data-theme="light"] .promise { border-color: transparent; }
:root[data-theme="light"] .role:nth-child(4n+1),
:root[data-theme="light"] .promise:nth-child(4n+1) { background: var(--tint-mint); }
:root[data-theme="light"] .role:nth-child(4n+2),
:root[data-theme="light"] .promise:nth-child(4n+2) { background: var(--tint-cream); }
:root[data-theme="light"] .role:nth-child(4n+3),
:root[data-theme="light"] .promise:nth-child(4n+3) { background: var(--tint-leaf); }
:root[data-theme="light"] .role:nth-child(4n+4),
:root[data-theme="light"] .promise:nth-child(4n+4) { background: var(--tint-blue); }
:root[data-theme="light"] .role:hover { border-color: transparent; box-shadow: var(--shadow-md); }
/* Đĩa sau icon: nền tối cần mảng sáng mờ, nền sáng cần đĩa trắng đục trên pastel.
   Gộp về một chỗ — trước đây có hai quy tắc trùng selector nên cái sau đè cái trước. */
.role-ico, .role:nth-child(2) .role-ico, .role:nth-child(3) .role-ico, .role:nth-child(4) .role-ico {
  background: rgba(255, 255, 255, .08);
}
:root[data-theme="light"] .role-ico,
:root[data-theme="light"] .role:nth-child(2) .role-ico,
:root[data-theme="light"] .role:nth-child(3) .role-ico,
:root[data-theme="light"] .role:nth-child(4) .role-ico {
  background: rgba(255, 255, 255, .72);
}
/* Viền trái giữ MỘT màu nhấn, chỉ đổi độ đậm. Trước đây xen kẽ vàng/xanh lá/mint —
   trên nền tối ba màu khác hệ đứng cạnh nhau trông như lỗi chứ không ra chủ ý. */
.promise { border-left: 3px solid var(--brand); }
.promise:nth-child(4n+2) { border-left-color: color-mix(in srgb, var(--brand) 62%, transparent); }
.promise:nth-child(4n+3) { border-left-color: var(--brand-bright); }

/* ---------- Ô icon của thẻ tính năng ---------- */
/* Cùng lý do như thẻ vai trò: nền tối dùng một mảng sáng mờ cho cả bốn. */
.card-ico,
.card:nth-child(4n+2) .card-ico,
.card:nth-child(4n+3) .card-ico,
.card:nth-child(4n+4) .card-ico { background: rgba(255, 255, 255, .06); }
:root[data-theme="light"] .card-ico { background: var(--tint-blue); }
:root[data-theme="light"] .card:nth-child(4n+2) .card-ico { background: var(--tint-mint); }
:root[data-theme="light"] .card:nth-child(4n+3) .card-ico { background: var(--tint-cream); }
:root[data-theme="light"] .card:nth-child(4n+4) .card-ico { background: var(--tint-leaf); }

/* ---------- Khối so sánh ---------- */
/* Hai khối so sánh: CÙNG một nền, phân biệt bằng màu đường viền — bên trái đỏ nhạt
   (cách đang làm), bên phải vàng (với hệ thống). Bản cũ tô hai nền khác màu, trên
   nền tối thành một mảng nâu và một mảng xanh xám, nhìn bẩn chứ không ra tương phản. */
.panel-pain {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.panel-gain {
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}
/* Icon hai bên ở cỡ 20px đọc gần giống nhau (tam giác cảnh báo và cánh buồm của
   logo), nên tách bằng MÀU để nhìn phát biết bên nào là vấn đề, bên nào là lời giải.
   Không đổi hình vì cánh buồm là nhận diện thương hiệu. */
.panel-pain h3 .ic { color: var(--accent); }
.panel-gain h3 .ic { color: var(--brand); }

/* Bản sáng giữ lại dải pastel như cũ */
:root[data-theme="light"] .panel-pain { background: var(--tint-peach); border-color: transparent; }
:root[data-theme="light"] .panel-gain { background: var(--tint-blue); border-color: transparent; }

/* ---------- Nút cuộn lên đầu ---------- */
/* Xếp ngay TRÊN cụm nút liên hệ nổi: cụm đó cao 3×46px + 2 khe 9px, cách đáy 16px,
   nên mốc 190px là vừa hết chồng lên nhau. */
.to-top {
  position: fixed; right: 16px; bottom: 190px; z-index: 59;
  width: 46px; height: 62px; border-radius: 999px;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: var(--shadow-sm); font-family: inherit;
}
.to-top.show { display: flex; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }
.to-top .ic { width: 1.5em; height: 1.5em; }
@media (max-width: 620px) { .to-top { right: 12px; bottom: 166px; width: 42px; height: 42px; font-size: 0; gap: 0; } }

/* ---------- Chi tiết chữ ---------- */
/* Inter có sẵn bộ số đều bề ngang, bật lên cho bảng và số liệu khỏi nhảy cột */
.stat b, .mini-table td, .pay-row b, .phone-check .big { font-variant-numeric: tabular-nums; }
.btn { letter-spacing: -.01em; font-size: 1rem; }
.btn-lg { font-size: 1.06rem; }
.nav a, .nav-drop > button { letter-spacing: -.005em; }