/* ============================================================
   FWDLAB.TECH — Design System
   Dùng chung cho / (home) và /template
   ============================================================ */

:root {
  /* ===== Brand — Signal scale (50 → 900). Tên biến --sl-green-* giữ để code cũ chạy; màu là xanh Signal ===== */
  --sl-green-50:  var(--c-f0f3ff);
  --sl-green-100: var(--c-e1e8ff);
  --sl-green-200: var(--c-c2d0ff);
  --sl-green-300: var(--c-93abff);
  --sl-green-400: var(--c-5f82ff);
  --sl-green-500: var(--c-2b59ff);
  --sl-green-600: var(--c-2b59ff); /* Signal — màu nhấn duy nhất */
  --sl-green-700: var(--c-1f45d9);
  --sl-green-800: var(--c-1a36a6);
  --sl-green-900: var(--c-142673);

  /* ===== Neutrals — Ink → Paper (bộ nhận diện 02) ===== */
  --ink-50:  var(--c-f5f5f2); /* Paper */
  --ink-100: var(--c-eeeeea);
  --ink-200: var(--c-e6e7e2); /* Mist */
  --ink-300: var(--c-d5d6d0);
  --ink-400: var(--c-9a9ea5);
  --ink-500: var(--c-8a8e95);
  --ink-600: var(--c-5f636a); /* Graphite */
  --ink-700: var(--c-4a4d53);
  --ink-800: var(--c-3a3d42);
  --ink-900: var(--c-101214); /* Ink */

  /* Warm-grey (neutral-comparison card) */
  --warm-50:  var(--c-f5f5f2);
  --warm-200: var(--c-e6e7e2);

  /* ===== Semantic ===== */
  --sem-warn: var(--c-2b59ff);
  --sem-err:  var(--c-ef4444);
  --sem-info: var(--c-2b59ff);

  /* ===== CORE DESIGN TOKENS — fwdlab.tech ===== */
  --primary:           var(--c-2b59ff);           /* Signal — CTA chính */
  --primary-hover:     var(--c-1f45d9);
  --bg-page:           var(--c-ffffff);           /* Card / ô nổi trên nền Paper */
  --bg-paper:          var(--c-f5f5f2);           /* Paper — nền trang chính */
  --bg-surface:        var(--c-e6e7e2);           /* Mist — section xen kẽ */
  --bg-dark:           var(--c-101214);                  /* Ink — section tối, footer. Khối dùng nó phải nằm trong danh sách keep của tokens.css để giữ tối ở chế độ tối */
  --text-heading:      var(--c-101214);           /* Ink */
  --text-body:         var(--c-3a3d42);           /* Body text */
  --text-muted:        var(--c-5f636a);           /* Graphite — phụ, ngày tháng */
  --danger:            var(--c-ef4444);           /* Giá gạch / lỗi */

  /* Dark-mode text on --bg-dark */
  --text-on-dark:         var(--c-e6e7e2);        /* Body trên nền Ink */
  --text-on-dark-muted:   var(--c-9a9ea5);

  /* Component-specific tokens */
  --radius-card:       0;
  --radius-btn:        0;
  --shadow-card:       0 4px 6px -1px rgba(var(--c-101214-rgb),.1), 0 2px 4px -1px rgba(var(--c-101214-rgb),.06);
  --shadow-card-hover: 0 10px 20px -3px rgba(var(--c-101214-rgb),.12), 0 4px 6px -2px rgba(var(--c-101214-rgb),.05);

  /* ===== Aliases giữ tương thích code hiện tại ===== */
  --color-primary:        var(--primary);
  --color-primary-hover:  var(--primary-hover);
  --color-primary-dark:   var(--sl-green-900);
  --color-primary-light:  var(--sl-green-100);
  --color-bg-dark:        var(--bg-dark);
  --color-bg-section:     var(--bg-surface);
  --color-bg-alt:         var(--bg-surface);
  --color-text:           var(--text-heading);
  --color-text-muted:     var(--text-body);
  --color-text-dark-muted:var(--text-muted);
  --color-border:         var(--c-d5d6d0);
  --color-danger-bg:      var(--c-fef2f2);
  --color-danger-border:  var(--c-fca5a5);
  --color-danger-text:    var(--danger);

  /* ===== Spacing scale (4px base) ===== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ===== Radius ===== */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 9999px;

  /* ===== Shadow ===== */
  --shadow-xs:   0 1px 2px rgba(var(--c-1a1d1f-rgb),.04);
  --shadow-sm:   0 1px 3px rgba(var(--c-1a1d1f-rgb),.06), 0 1px 2px rgba(var(--c-1a1d1f-rgb),.04);
  --shadow-md:   0 4px 12px rgba(var(--c-1a1d1f-rgb),.08), 0 2px 4px rgba(var(--c-1a1d1f-rgb),.04);
  --shadow-lg:   0 12px 32px rgba(var(--c-1a1d1f-rgb),.10), 0 4px 8px rgba(var(--c-1a1d1f-rgb),.04);
  --shadow-glow: 0 12px 40px rgba(var(--c-2b59ff-rgb),.22);

  --shadow-pop:        var(--shadow-lg);

  /* ===== Motion ===== */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);

  /* ===== Typography ===== */
  --font-sans: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-brand: 'Sora', 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ===== Accessibility: keyboard focus ring (chỉ hiện khi tab bằng bàn phím) ===== */
.sf :focus { outline: none; }
.sf a:focus-visible,
.sf button:focus-visible,
.sf input:focus-visible,
.sf textarea:focus-visible,
.sf select:focus-visible,
.sf [tabindex]:focus-visible {
  outline: 2px solid var(--sl-green-500);
  outline-offset: 2px;
  border-radius: 0;
}

/* Tôn trọng prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Reset scoped ---------- */
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
/* Line-height 1.7 cho tiếng Việt (M4) */
.sf { font-family: var(--font-sans); color: var(--color-text); line-height: 1.7; }
/* navbar-responsive-8 */
/* Reset margin mặc định 8px của body + chặn cuộn ngang do drawer nav (position: fixed + translateX(100%)).
   overflow-x: clip không tạo scroll container nên không phá position: sticky của navbar. */
body.sf { margin: 0; background: var(--bg-paper); }
html:has(body.sf), body.sf { overflow-x: clip; }
/* Giữ chỗ thanh cuộn: mở drawer (khoá cuộn) không làm trang giãn rộng → không nhảy layout / nhảy vị trí cuộn
   trên trình duyệt có thanh cuộn chiếm chỗ (desktop, tablet Windows). Điện thoại dùng thanh cuộn nổi nên không ảnh hưởng. */
html:has(body.sf) { scrollbar-gutter: stable; }
.sf img { max-width: 100%; display: block; }
/* Heading line-height 1.2 — chặt cho display text */
.sf h1, .sf h2, .sf h3, .sf h4 { line-height: 1.2; }
/* Card body text line-height 1.65 */
.sf p, .sf li { line-height: 1.65; }

/* ---------- NAVBAR ---------- */
.sf-nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--color-border);
}
/* mobile-nav-fix */
/* Nền mờ đặt ở ::after, KHÔNG đặt backdrop-filter trên chính .sf-nav: backdrop-filter biến .sf-nav thành
   containing block của phần tử position:fixed bên trong (drawer, lớp phủ) → drawer bị gắn vào thanh nav
   thay vì màn hình, cuộn xuống rồi mở menu thì drawer nằm ở đầu trang, không thấy. */
.sf-nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(var(--c-f5f5f2-rgb),.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sf-nav__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
}
.sf-nav__logo {
  font-size: 20px; font-weight: 800;
  color: var(--color-text); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.sf-nav__logo-icon { font-size: 22px; }
.sf-nav__links {
  display: flex; gap: 13px; align-items: center;
  flex: 1; min-width: 0;
}
/* Chữ trên thanh nav không bao giờ rớt 2 dòng */
.sf-nav__link, .sf-nav__cta, .sf-nav__logo, .sf-nav__login-cta { white-space: nowrap; }
.sf-user__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-nav__link {
  color: var(--color-text-muted);
  text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 6px 0; position: relative;
  transition: color .15s;
}
.sf-nav__link:hover { color: var(--color-primary); }
.sf-nav__link.active { color: var(--color-primary); font-weight: 600; }
.sf-nav__link.active::after {
  content:''; position: absolute; left: 0; right: 0; bottom: -17px;
  height: 2px; background: var(--color-primary);
}
/* Nhóm "Về fwdlab": desktop = dropdown (hover / click / bàn phím) */
.sf-nav__group { position: relative; display: flex; align-items: center; }
.sf-nav__group-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; margin: 0; font-family: inherit; line-height: inherit; cursor: pointer;
}
.sf-nav__caret { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.sf-nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 110;
  min-width: 210px; padding: 6px;
  background: var(--c-ffffff); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -12px rgba(var(--c-1a1d1f-rgb),.25);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.sf-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* cầu nối để rê chuột không bị đóng */
.sf-nav__group:hover .sf-nav__menu,
.sf-nav__group.is-open .sf-nav__menu,
.sf-nav__group:has(:focus-visible):not(.is-dismissed) .sf-nav__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.sf-nav__group:hover .sf-nav__caret,
.sf-nav__group.is-open .sf-nav__caret { transform: rotate(180deg); }
.sf-nav__menu-link {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.sf-nav__menu-link:hover { background: var(--color-bg-section); color: var(--color-primary); }
.sf-nav__menu-link.active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.sf-nav__actions { display: flex; gap: 8px; align-items: center; }
/* Cặp nút ngôn ngữ + sáng/tối (public/js/i18n.js, theme.js) dính liền nhau */
.sf-nav__prefs { display: inline-flex; flex-shrink: 0; }
.sf-nav__prefs .lang-switch + .theme-toggle { border-left-width: 0; }
.sf-nav__login {
  display: none; /* user-nav.js renders login state via #nav-user-slot */
}
.sf-nav__cta {
  background: var(--color-primary); color: #fff;
  padding: 9px 18px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.sf-nav__cta:hover { background: var(--color-primary-hover); }

/* Login button được render động bởi user-nav.js */
.sf-nav__login-cta {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: 0;
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.sf-nav__login-cta:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 480px) {
  .sf-nav__login-cta {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 0;
    border-width: 1px;
  }
}

.sf-nav__hamburger {
  display: none; background: none; border: 0;
  width: 32px; height: 32px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.sf-nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--color-text); margin: 0 auto;
}

/* Tablet 880-1024: links thưa hơn, gap bớt — chưa thành drawer */
@media (max-width: 1279px) and (min-width: 1181px) {
  .sf-nav__inner { gap: 18px; padding: 14px 20px; }
  .sf-nav__links { gap: 16px; }
  .sf-user__name, .sf-user__caret { display: none; }
  .sf-nav__link { font-size: 14px; }
  .sf-nav__cta { padding: 8px 14px; font-size: 13px; }
  .sf-nav__login { font-size: 13px; }
}

/* Hamburger drawer trigger — bump từ 860 → 880 để không bóp ở 1024 */
@media (max-width: 1180px) {
  .sf-nav__inner { gap: 12px; padding: 12px 18px; }
  .sf-nav__hamburger { display: flex; z-index: 102; position: relative; order: 3; flex: none; width: 44px; height: 44px; margin-right: -8px; }

  /* Mobile: full-screen drawer slide từ phải */
  .sf-nav__links, .sf-nav__actions {
    position: fixed; top: 0; right: 0;
    background: var(--c-ffffff);
    flex-direction: column;
    padding: 0;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; /* always flex, dùng transform để hide */
    overflow-y: auto;
    border: none;
  }
  .sf-nav__links {
    top: 0; height: 100vh; height: 100dvh; width: 82%; max-width: 340px;
    padding: 72px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    align-items: stretch; justify-content: flex-start;
    gap: 0;
    z-index: 101;
    box-shadow: none; /* bóng chỉ bật khi mở — lúc đóng bóng lọt vào mép phải màn hình */
  }
  .sf-nav__actions {
    /* Actions stay inline trên mobile (login + CTA), không phải drawer */
    position: static; transform: none;
    flex-direction: row; padding: 0; box-shadow: none;
    width: auto; height: auto;
    background: transparent;
    align-items: center; gap: 8px;
    margin-left: auto; margin-right: 0;
  }
  .sf-nav__link {
    padding: 14px 8px; font-size: 16px; font-weight: 600;
    color: var(--color-text); border-bottom: 1px solid var(--c-f6f6f4);
  }
  .sf-nav__link:last-child { border-bottom: none; }
  .sf-nav__link.active { color: var(--color-primary); }
  .sf-nav__link.active::after { display: none; }

  /* Hide login text trên mobile, chỉ giữ CTA + avatar */
  .sf-nav__login { display: none; }
  .sf-nav__cta { padding: 8px 14px; font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Open state: slide drawer in */
  .sf-nav.open .sf-nav__links { transform: translateX(0); box-shadow: -8px 0 32px rgba(var(--c-101214-rgb),.12); }

  /* Backdrop khi drawer mở */
  .sf-nav::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(16,18,20,.45); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease; z-index: 100;
  }
  .sf-nav.open::before { opacity: 1; pointer-events: auto; }

  /* Hamburger animation: → X khi open */
  .sf-nav__hamburger { transition: transform .2s; }
  .sf-nav.open .sf-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sf-nav.open .sf-nav__hamburger span:nth-child(2) { opacity: 0; }
  .sf-nav.open .sf-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sf-nav__hamburger span { transition: transform .2s, opacity .2s; }

  /* Khoá cuộn khi drawer mở — đặt ở <html> (lan ra viewport). KHÔNG đặt overflow:hidden trên body:
     vì <html> đã có overflow-x: clip, body sẽ thành scroll container riêng → .sf-nav mất sticky, drawer chạy lên đầu trang. */
  html:has(.sf-nav.open) { overflow: hidden; }
}

/* Nhóm "Về fwdlab" trong drawer mobile: nhãn + 3 link mở sẵn, không cần bấm */
@media (max-width: 1180px) {
  .sf-nav__group { display: block; position: static; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-f6f6f4); }
  .sf-nav .sf-nav__group-btn {
    width: 100%; padding: 12px 8px 4px; border-bottom: 0; cursor: default; pointer-events: none;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted);
  }
  .sf-nav__caret { display: none; }
  /* (0,4,0) — phải thắng rule mở dropdown desktop .sf-nav__group:has(:focus-visible):not(.is-dismissed) .sf-nav__menu */
  .sf-nav .sf-nav__links .sf-nav__group .sf-nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  .sf-nav__menu::before { display: none; }
  .sf-nav__menu-link {
    padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--c-f6f6f4);
    font-size: 16px; font-weight: 600; white-space: normal;
  }
  .sf-nav__menu-link:last-child { border-bottom: 0; }
  .sf-nav__menu-link.active { background: none; color: var(--color-primary); }
}

/* Mobile ≤640px: nav cần tối giản — sticky bar bottom hoặc hero CTA đã có CTA */
@media (max-width: 640px) {
  .sf-nav__inner { padding: 10px 14px; gap: 8px; }
  .sf-nav__logo { font-size: 16px; gap: 6px; }
  .sf-nav__actions { margin-right: 0; gap: 6px; align-items: center; }

  /* Ẩn CTA "Mua trọn bộ →" / "Mua 149K →" trên mobile —
     conflict với hamburger + avatar. CTA thay thế:
       - Home page: hero CTA + drawer link
       - PDP: sticky bar dưới + hero CTA */
  .sf-nav__cta { display: none; }

  /* User avatar chỉ hiện avatar, ẩn tên + caret để gọn */
  .sf-user__name,
  .sf-user__caret { display: none; }
  .sf-user__btn { padding: 2px !important; gap: 0 !important; }
}

/* Tiny phone ≤380px: thêm 1 step gọn nữa */
@media (max-width: 380px) {
  .sf-nav__inner { padding: 9px 12px; }
  .sf-nav__logo { font-size: 15px; }
  .sf-nav__actions { margin-right: 0; gap: 4px; }
  .sf-user__avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; }
}

/* ---------- BUTTONS ---------- */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 0; transition: all .15s;
  font-family: inherit;
}
.sf-btn--primary { background: var(--color-primary); color: #fff; }
.sf-btn--primary:hover { background: var(--color-primary-hover); }
.sf-btn--outline-light {
  background: transparent; color: #fff; border: 1.5px solid rgba(var(--c-ffffff-rgb),.3);
}
.sf-btn--outline-light:hover { border-color: var(--c-ffffff); background: rgba(var(--c-ffffff-rgb),.06); }
.sf-btn--outline-green {
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.sf-btn--outline-green:hover { background: var(--color-primary-light); }
.sf-btn--lg { padding: 15px 28px; font-size: 16px; }
.sf-btn--block { width: 100%; }

/* ---------- SECTION WRAPPER ---------- */
.sf-section { padding: 80px 24px; }
.sf-section--dark { background: var(--color-bg-dark); color: #fff; }
.sf-section--green { background: var(--color-bg-section); }
.sf-section--alt { background: var(--color-bg-alt); }
.sf-section__inner { max-width: 1200px; margin: 0 auto; }

.sf-h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800; line-height: 1.15;
  margin: 0 0 14px; letter-spacing: -.02em;
}
.sf-section--dark .sf-h2 { color: #fff; }
.sf-label-sm {
  display: inline-block;
  color: var(--color-primary); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.sf-sub {
  color: var(--color-text-muted); font-size: 17px; line-height: 1.65;
  max-width: 620px;
}
.sf-section--dark .sf-sub { color: var(--color-text-dark-muted); }
.sf-section__head { text-align: center; margin-bottom: 56px; }
.sf-section__head .sf-sub { margin: 0 auto; }

/* ---------- HERO (light theme) ---------- */
.sf-hero {
  background: linear-gradient(180deg, var(--c-ffffff) 0%, var(--c-f8f8f5) 100%);
  color: var(--color-text);
  padding: 80px 24px 100px;
  position: relative;
  overflow: hidden;
}
.sf-hero::before {
  content:''; position: absolute;
  top: -250px; right: -150px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(var(--c-2b59ff-rgb),.10) 0%, transparent 70%);
  pointer-events: none;
}
.sf-hero::after {
  content:''; position: absolute;
  bottom: -200px; left: -150px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(var(--c-2453fb-rgb),.08) 0%, transparent 70%);
  pointer-events: none;
}
.sf-hero__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center;
  position: relative; z-index: 1;
}
.sf-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--c-2b59ff-rgb),.25);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 20px;
}
.sf-hero__h1 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900; line-height: 1.06;
  margin: 0 0 22px; letter-spacing: -.025em;
  color: var(--color-text);
}
.sf-hero__h1 em { color: var(--color-primary); font-style: normal; }
.sf-hero__sub {
  color: var(--color-text-muted);
  font-size: 17px; line-height: 1.7; max-width: 520px;
  margin: 0 0 32px;
}
.sf-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sf-hero__proof {
  display: flex; align-items: center; gap: 14px;
  margin-top: 40px;
}
.sf-hero__avatars { display: flex; }
.sf-hero__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--c-ffffff);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 13px;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(var(--c-101214-rgb),.1);
}
.sf-hero__avatar:first-child { margin-left: 0; }
.sf-hero__proof-text { font-size: 13.5px; color: var(--color-text); line-height: 1.45; }
.sf-hero__proof-text strong { color: var(--color-text); font-weight: 700; }

/* Browser mockup — enlarged + green glow + fade-in slide */
#hero-visual {
  position: relative;
  isolation: isolate;
  overflow: visible;
  animation: sf-hero-rise 650ms var(--ease-out) both;
}
#hero-visual::before {
  content: '';
  position: absolute;
  inset: -40px -20px -60px -20px;
  background: radial-gradient(50% 45% at 60% 55%, rgba(var(--c-2b59ff-rgb),.18) 0%, rgba(var(--c-2b59ff-rgb),0) 70%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

.sf-hero-visual--image .sf-hero-image,
#hero-visual.sf-hero-visual--image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@keyframes sf-hero-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sf-hero-slider { position: relative; }
/* Ảnh hero hiển thị trực tiếp, không đóng khung (bỏ viền/bóng/bo góc) */
.sf-hero-slider__viewport {
  position: relative; overflow: hidden;
}
.sf-hero-slider__track {
  display: flex;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.sf-hero-slider__slide { flex: 0 0 100%; min-width: 0; }
.sf-hero-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-ffffff); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--color-text);
  cursor: pointer; z-index: 2; transition: .15s;
}
.sf-hero-slider__arrow--prev { left: 12px; }
.sf-hero-slider__arrow--next { right: 12px; }
.sf-hero-slider__arrow:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.sf-hero-slider .sf-hero__tagline { margin-top: 14px; }
.sf-hero-slider__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.sf-hero-slider__dot {
  width: 8px; height: 8px; border-radius: 0; background: var(--color-border);
  border: none; padding: 0; cursor: pointer; transition: .2s;
}
.sf-hero-slider__dot.active { background: var(--color-primary); width: 20px; }
@media (max-width: 860px) {
  .sf-hero-slider__arrow { display: none; }
}
.sf-browser {
  background: #282b2f; border-radius: var(--radius-lg);
  box-shadow:
    0 30px 70px rgba(var(--c-1a1d1f-rgb),.28),
    0 8px 24px rgba(43,89,255,.18),
    0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
  transform-origin: center;
}
@media (min-width: 861px) {
  .sf-browser { transform: scale(1.08); }
}
.sf-browser__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #1a1c1f;
  border-bottom: 1px solid rgba(var(--c-ffffff-rgb),.05);
}
.sf-browser__dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-53575d);
}
.sf-browser__dot:nth-child(1) { background: var(--c-ef4444); }
.sf-browser__dot:nth-child(2) { background: var(--c-0b3ef5); }
.sf-browser__dot:nth-child(3) { background: var(--c-2b59ff); }
.sf-browser__url {
  flex: 1; background: #101214; color: var(--c-a4a7a9);
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12px; margin-left: 12px; font-family: JetBrains Mono, ui-monospace, monospace;
}
.sf-browser__body { padding: 22px; background: #1a1d1f; }
.sf-browser__title { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.sf-browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sf-browser__mini {
  background: rgba(var(--c-2b59ff-rgb),.1); border: 1px solid rgba(var(--c-2b59ff-rgb),.2);
  border-radius: var(--radius-sm); padding: 12px 10px;
  text-align: center; font-size: 11px; color: var(--c-a4a7a9);
}
.sf-browser__mini strong { display: block; color: var(--c-6e88e7); font-size: 14px; margin-bottom: 2px; }
.sf-browser__chart {
  height: 80px; background: linear-gradient(180deg, rgba(var(--c-2b59ff-rgb),.15) 0%, transparent 100%);
  border-radius: var(--radius-sm); margin-bottom: 14px; position: relative;
  border-bottom: 1.5px solid var(--color-primary);
}
.sf-browser__chart::after {
  content:''; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'><path d='M0,70 L50,55 L100,60 L150,30 L200,40 L250,15 L300,25' fill='none' stroke='%2316a34a' stroke-width='2'/></svg>") center/100% 100% no-repeat;
}
.sf-browser__input {
  background: rgba(var(--c-ffffff-rgb),.05); border: 1px dashed rgba(var(--c-2b59ff-rgb),.4);
  border-radius: var(--radius-sm); padding: 14px;
  color: var(--c-6e88e7); font-size: 13px; text-align: center;
}
.sf-hero__tagline {
  text-align: center; margin-top: 20px;
  color: var(--color-text-muted); font-size: 13.5px; font-weight: 500;
  font-style: italic;
  letter-spacing: .005em;
}

/* Logo SVG */
.sf-nav__logo { line-height: 1; }
/* Logo fwdlab.tech — file trong /images/logo_app (bộ nhận diện 01 / Logo). SVG có sẵn lề trong viewBox 715×120 */
.sf-nav__logo-img { display: block; height: 30px; width: auto; margin-left: -5px; }
.sf-footer__logo-img { display: block; height: 32px; width: auto; margin-left: -6px; }
@media (max-width: 640px) { .sf-nav__logo-img { height: 30px; } }
@media (max-width: 380px) { .sf-nav__logo-img { height: 26px; } }
/* Chế độ tối: logo bản trắng (không nền) thay bản chữ đen */
.sf-nav__logo .sf-nav__logo-img--dark { display: none; } /* thắng .sf img {display:block} */
[data-theme="dark"] .sf-nav__logo .sf-nav__logo-img:not(.sf-nav__logo-img--dark) { display: none; }
[data-theme="dark"] .sf-nav__logo .sf-nav__logo-img--dark { display: block; }

@media (max-width: 860px) {
  .sf-hero { padding: 60px 24px; }
  .sf-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- TRUST BAR ---------- */
.sf-trustbar {
  background: var(--c-ffffff);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 24px;
}
.sf-trustbar__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; align-items: center;
}
.sf-trustbar__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--color-text);
}
.sf-trustbar__icon { font-size: 22px; }
.sf-trustbar__item span { line-height: 1.35; }
@media (max-width: 860px) {
  .sf-trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sf-trustbar__item { font-size: 13px; }
}

/* ---------- ICP CARDS (Section 3) ---------- */
.sf-icp__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.sf-icp__card {
  background: var(--c-ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  transition: all .2s;
  display: flex; flex-direction: column;
  position: relative;
}
.sf-icp__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(var(--c-2b59ff-rgb),.12);
  border-color: var(--sl-green-400);
}
.sf-icp__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--sl-green-500), var(--sl-green-600));
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glow);
  transition: transform var(--dur-base) var(--ease-out);
}
.sf-icp__card:hover .sf-icp__icon {
  transform: translateY(-2px) scale(1.05);
}
.sf-icp__title {
  font-size: 17px; font-weight: 700; margin: 0 0 14px;
  line-height: 1.25;
}
.sf-icp__list { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.sf-icp__list li {
  font-size: 14px; color: var(--color-text-muted);
  padding: 5px 0 5px 16px;
  position: relative; line-height: 1.5;
}
.sf-icp__list li::before {
  content: '·';
  position: absolute; left: 4px;
  color: var(--color-primary); font-weight: 700;
}
.sf-icp__badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--color-primary); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.sf-icp__cta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--sl-green-700); font-weight: 600;
  text-decoration: none; font-size: 14px;
  align-self: flex-start;
  padding-top: 4px;
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sf-icp__cta:hover { color: var(--sl-green-800); gap: 8px; }
.sf-icp__card:hover .sf-icp__cta { gap: 8px; }
@media (max-width: 980px) {
  .sf-icp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sf-icp__grid { grid-template-columns: 1fr; }
}

/* ---------- COMPARE (Section 4) ---------- */
.sf-compare__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
.sf-compare__card {
  padding: 32px; border-radius: var(--radius-lg);
  border: 1px solid;
}
.sf-compare__card--bad {
  background: var(--warm-50);
  border-color: var(--warm-200);
}
.sf-compare__card--good {
  background: linear-gradient(135deg, var(--sl-green-50) 0%, var(--c-ffffff) 100%);
  border-color: var(--sl-green-300);
  box-shadow: 0 12px 32px rgba(var(--c-2b59ff-rgb),.08);
}
.sf-compare__title {
  font-size: 18px; font-weight: 700; margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--c-101214-rgb),.08);
}
.sf-compare__list { list-style: none; padding: 0; margin: 0; }
.sf-compare__list li {
  font-size: 14.5px; line-height: 1.6;
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--color-text);
}
.sf-compare__list li::before {
  position: absolute; left: 0; top: 10px;
  font-weight: 800; font-size: 15px;
}
.sf-compare__card--bad .sf-compare__list li::before {
  content: '✗'; color: var(--c-ef4444);
}
.sf-compare__card--bad .sf-compare__list li { color: var(--ink-600); }
.sf-compare__card--good .sf-compare__list li::before {
  content: '✓'; color: var(--c-2b59ff);
}
@media (max-width: 860px) {
  .sf-compare__grid { grid-template-columns: 1fr; }
}

/* ---------- PRODUCT GRID (Section 5 + /template) ---------- */
.sf-prod__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
}
.sf-prod__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;             /* Equal-height cards */
}
/* Trang chủ: 6 sản phẩm nổi bật → 3 cột đẹp hơn 4 cột dàn mỏng, NHƯNG chỉ ở
   desktop rộng — để mặc định (không @media) sẽ có specificity ID > mọi
   @media (max-width) bên dưới dùng class .sf-prod__grid, khoá cứng 3 cột
   xuyên suốt mọi kích thước màn hình kể cả mobile (bug đã xảy ra thực tế). */
@media (min-width: 1101px) {
  #sf-featured-grid { grid-template-columns: repeat(3, 1fr); }
}
.sf-prod__card {
  background: var(--bg-page);
  border: none;                     /* Spec: không viền */
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
  height: 100%;                     /* Equal-height trong grid */
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
}
.sf-prod__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.sf-prod__thumb {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--c-f8f8f5) 0%, var(--c-dce3fc) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* DEFAULT: cover full card — yêu cầu user upload ảnh đúng 1200x750 (16:10) */
.sf-prod__thumb img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
.sf-prod__card:hover .sf-prod__thumb img {
  transform: scale(1.05);
}
/* Blurred backdrop CHỈ visible khi ảnh portrait (sách bìa) — fallback graceful */
.sf-prod__thumb-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(20px) brightness(.95) saturate(1.1);
  transform: scale(1.2);
  z-index: 0;
  display: none;            /* Default: hide (vì cover full đã đẹp) */
}
/* Khi card có data-portrait → bật blur bg + contain (cho sách cover 2:3) */
.sf-prod__card[data-cover="portrait"] .sf-prod__thumb-bg { display: block; }
.sf-prod__card[data-cover="portrait"] .sf-prod__thumb img {
  object-fit: contain;
  padding: 16px;
  filter: drop-shadow(0 6px 16px rgba(16,18,20,.2));
}
.sf-prod__thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); font-size: 40px; opacity: .5;
}

/* Mini dashboard mock (fallback khi chưa có coverImage) */
.sf-prod__mini {
  position: absolute;
  inset: 22px 22px 22px 22px;
  background: var(--c-ffffff);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  pointer-events: none;
}
.sf-prod__mini-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.sf-prod__mini-label {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: .02em;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.sf-prod__mini-val {
  font-size: 18px;
  color: var(--sl-green-700);
  font-weight: 800;
  letter-spacing: -.01em;
}
.sf-prod__mini-bars {
  display: flex; gap: 3px; align-items: flex-end;
  flex: 1;
  margin-top: 8px;
  min-height: 38px;
}
.sf-prod__mini-bars > div {
  flex: 1;
  background: linear-gradient(180deg, var(--sl-green-400), var(--sl-green-600));
  border-radius: 2px 2px 0 0;
  opacity: .88;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transform-origin: bottom;
}
.sf-prod__card:hover .sf-prod__mini-bars > div {
  opacity: 1; transform: scaleY(1.06);
}
/* Webapp variant */
.sf-prod__mini--webapp .sf-prod__mini-status {
  color: var(--sl-green-600);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: .08em;
}
.sf-prod__mini-body {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
  flex: 1; justify-content: center;
}
.sf-prod__mini-row {
  display: flex; align-items: center; gap: 8px;
}
.sf-prod__mini-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sl-green-500);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--c-2b59ff-rgb),.12);
}
.sf-prod__mini-bar-line {
  height: 6px;
  background: linear-gradient(90deg, var(--ink-200), var(--ink-100));
  border-radius: 999px;
}
.sf-prod__badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  z-index: 1;
}
.sf-badge {
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
  letter-spacing: .03em;
}
.sf-badge--sheet {
  background: rgba(var(--c-ffffff-rgb),.95); color: var(--sl-green-900);
}
.sf-badge--webapp {
  background: var(--c-8aa3fd); color: var(--c-0f2678);
}
/* Discount badge: tách riêng top-right theo spec design */
.sf-badge--discount {
  position: absolute; top: 12px; right: 12px;
  background: var(--c-fee2e2); color: var(--c-b91c1c);           /* đỏ nhạt/đỏ đậm contrast */
  font-size: 11px; font-weight: 800;
  padding: 6px 12px; border-radius: var(--radius-pill);
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(var(--c-ef4444-rgb),.15);
  z-index: 2;
}
/* Nếu discount nằm trong .sf-prod__badges group thì ghi đè về relative */
.sf-prod__badges .sf-badge--discount {
  position: static; box-shadow: none;
}
.sf-prod__play {
  /* Trước đây neo top:12/right:12 — trùng vị trí với .sf-badge--discount,
     2 badge đè lên nhau khi 1 sản phẩm vừa có video vừa có giảm giá.
     Chuyển vào giữa ảnh — đúng chuẩn UX nút play cho thumbnail video. */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(16,18,20,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; border: 2px solid rgba(var(--c-ffffff-rgb),.3);
  z-index: 2;
}
/* DEPRECATED — KHÔNG dùng overlay label trên ảnh nữa (gây che) */
.sf-prod__thumb-label { display: none; }
/* Category chip mới — đặt trong body, không đè ảnh */
.sf-prod__cat {
  font-size: 11px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; line-height: 1;
}
.sf-prod__body { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 0; }
.sf-prod__title {
  font-size: 15px; font-weight: 700; line-height: 1.35;
  margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-prod__rating {
  font-size: 12.5px; color: var(--color-text-muted);
  margin-bottom: 12px;
}
.sf-prod__rating strong { color: var(--c-0b3ef5); }
.sf-prod__price-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sf-prod__price {
  font-size: 20px; font-weight: 800; color: var(--color-primary);
}
.sf-prod__price-old {
  font-size: 13px; color: var(--c-a4a7a9); text-decoration: line-through;
}
.sf-prod__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: auto;
}
.sf-prod__tagline {
  font-size: 13px; color: var(--color-text-muted);
  line-height: 1.45; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-prod__cta-single {
  margin-top: auto;
  color: var(--color-primary); font-weight: 600; font-size: 14px;
  padding-top: 10px; border-top: 1px solid var(--color-border);
  transition: gap .2s;
}
.sf-prod__card:hover .sf-prod__cta-single {
  color: var(--color-primary-hover);
}
.sf-prod__btn {
  height: 40px; border-radius: var(--radius-btn);
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
  font-family: inherit; border: 0;
}
.sf-prod__btn--outline {
  background: var(--bg-page); color: var(--primary);
  border: 1.5px solid var(--primary);
}
.sf-prod__btn--outline:hover { background: var(--bg-surface); border-color: var(--primary-hover); color: var(--primary-hover); }
.sf-prod__btn--primary {
  background: var(--primary); color: #fff;
}
.sf-prod__btn--primary:hover { background: var(--primary-hover); }

@media (max-width: 1100px) { .sf-prod__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .sf-prod__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sf-prod__grid { grid-template-columns: 1fr; } }

/* Skeleton loader */
.sf-skel {
  background: linear-gradient(90deg, var(--c-f1f2ee) 25%, var(--c-e8e9e4) 50%, var(--c-f1f2ee) 75%);
  background-size: 200% 100%;
  animation: sf-shimmer 1.4s infinite;
  border-radius: var(--radius-lg);
  height: 340px;
}
@keyframes sf-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- HOW IT WORKS (Section 6) ---------- */
.sf-how__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; position: relative;
  max-width: 1000px; margin: 0 auto;
}
/* Dashed connector line — desktop only, nối 3 step */
@media (min-width: 861px) {
  .sf-how__grid::before {
    content: '';
    position: absolute;
    top: 60px; left: 16%; right: 16%;
    height: 2px;
    background-image: linear-gradient(to right, var(--sl-green-300) 50%, transparent 50%);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    z-index: 0;
  }
}
.sf-how__step {
  text-align: center; padding: 32px 20px;
  position: relative;
  z-index: 1;
}
.sf-how__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-green-500), var(--sl-green-700));
  color: #fff;
  font-size: 22px; font-weight: 800;
  margin-bottom: 18px;
  box-shadow: var(--shadow-glow);
}
.sf-how__title {
  font-size: 18px; font-weight: 700; margin: 0 0 10px;
}
.sf-how__desc {
  font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6;
  margin: 0;
}
.sf-how__guarantee {
  margin: 40px auto 0; max-width: 720px;
  background: var(--c-ffffff);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex; gap: 18px; align-items: flex-start;
}
.sf-how__guarantee-icon { font-size: 32px; flex-shrink: 0; }
.sf-how__guarantee h4 {
  margin: 0 0 6px; font-size: 17px; font-weight: 700;
}
.sf-how__guarantee p {
  margin: 0; font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6;
}
@media (max-width: 860px) {
  .sf-how__grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- PRICING (Section 7) ---------- */
.sf-price__grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 24px;
  max-width: 1180px; margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 1080px) {
  .sf-price__grid { grid-template-columns: 1fr; gap: 16px; max-width: 560px; }
  .sf-price__card--highlight { transform: none; }
}
.sf-price__card {
  background: var(--c-ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex; flex-direction: column;
  position: relative;
}
.sf-price__card--highlight {
  border: 2px solid var(--c-2b59ff);
  background: linear-gradient(180deg, var(--c-fff5f6) 0%, var(--c-ffffff) 45%);
  box-shadow: 0 24px 48px rgba(var(--c-2b59ff-rgb),.18), 0 4px 12px rgba(var(--c-2b59ff-rgb),.08);
  transform: scale(1.02);
  position: relative;
}
.sf-price__card--highlight::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--c-2b59ff-rgb),.16), transparent 40%);
  pointer-events: none;
  z-index: -1;
}
.sf-price__card--highlight .sf-price__price { color: var(--c-2b59ff); }
.sf-price__card--highlight .sf-price__features li::before { color: var(--c-2b59ff); }
.sf-price__card--highlight .sf-btn--primary { background: var(--c-2b59ff); }
.sf-price__card--highlight .sf-btn--primary:hover { background: var(--c-1f45d9); }
.sf-price__ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--c-2b59ff), var(--c-1f45d9));
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 7px 20px; border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(var(--c-2b59ff-rgb),.35);
  letter-spacing: .02em;
}
.sf-price__name {
  font-size: 17px; font-weight: 700; margin: 0 0 6px;
}
.sf-price__price {
  font-size: 36px; font-weight: 900; color: var(--color-primary);
  margin: 0 0 2px; letter-spacing: -.02em;
}
.sf-price__price small {
  font-size: 15px; font-weight: 500; color: var(--color-text-muted);
}
.sf-price__price-old {
  font-size: 16px; color: var(--c-a4a7a9); text-decoration: line-through;
  margin-bottom: 4px;
}
.sf-price__tagline {
  font-size: 14px; color: var(--color-text-muted); margin: 6px 0 26px;
}
.sf-price__features {
  list-style: none; padding: 0; margin: 0 0 28px;
  flex: 1;
}
.sf-price__features li {
  padding: 9px 0 9px 28px;
  font-size: 14.5px;
  position: relative;
  line-height: 1.55;
}
.sf-price__features li::before {
  content: '✓'; position: absolute; left: 0; top: 9px;
  color: var(--color-primary); font-weight: 800;
}
.sf-price__assurance {
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
  margin: 14px 0 0;
}
@media (max-width: 780px) {
  .sf-price__grid { grid-template-columns: 1fr; gap: 16px; }
  .sf-price__card--highlight { transform: none; }
}

/* ---------- CTV (Section 8) ---------- */
.sf-ctv { text-align: center; }
.sf-ctv__tiers {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin: 28px 0 36px;
}
.sf-ctv__tier {
  background: rgba(var(--c-ffffff-rgb),.1);
  border: 1px solid rgba(var(--c-ffffff-rgb),.25);
  padding: 14px 24px; border-radius: var(--radius-pill);
  color: #fff; font-size: 14.5px; font-weight: 600;
  transition: background .2s, transform .2s;
}
.sf-ctv__tier:hover { background: rgba(var(--c-ffffff-rgb),.15); transform: translateY(-2px); }
.sf-ctv__tier strong { color: var(--c-4a6ade); font-size: 18px; font-weight: 800; margin-left: 4px; }

/* ---------- FOOTER ---------- */
.sf-footer { background: #101214; color: var(--c-d9dad5); padding: 60px 24px 28px; }
.sf-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;
}
.sf-footer h5 {
  color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 16px;
}
.sf-footer ul { list-style: none; padding: 0; margin: 0; }
.sf-footer li { margin-bottom: 10px; }
.sf-footer a {
  color: var(--c-a4a7a9); text-decoration: none; font-size: 14px;
  transition: color .15s;
}
.sf-footer a:hover { color: var(--color-primary); }
.sf-footer__brand { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
/* Tagline (L3): contrast tốt hơn */
.sf-footer__tagline { margin: 12px 0 16px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
/* Social icons row (L2) */
.sf-footer__social { display: flex; gap: 10px; margin-top: 4px; }
.sf-footer__social a {
  width: 36px; height: 36px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--c-ffffff-rgb),.08); color: rgba(255,255,255,.7);
  transition: all .2s;
}
.sf-footer__social a:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.sf-footer__social svg { width: 18px; height: 18px; }
/* Contact info */
.sf-footer__contact { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 12px; line-height: 1.7; }
.sf-footer__contact a { color: rgba(255,255,255,.7); text-decoration: none; }
.sf-footer__contact a:hover { color: var(--color-primary); }
.sf-footer__copy {
  max-width: 1200px; margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid rgba(var(--c-ffffff-rgb),.08);
  text-align: center; font-size: 13px; color: var(--c-71757c);
}
/* Bộ Công Thương verification badge */
.sf-footer__badge { display: inline-block; margin-top: 16px; }
.sf-footer__badge img { height: 44px; width: auto; display: block; }
@media (max-width: 860px) {
  .sf-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------- TEMPLATE PAGE (light theme, match home hero) ---------- */
.sf-thero {
  background: linear-gradient(180deg, var(--c-ffffff) 0%, var(--c-f8f8f5) 100%);
  color: var(--color-text);
  padding: 56px 24px 44px; text-align: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.sf-thero::before {
  content:''; position: absolute;
  top: -150px; right: -100px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(var(--c-2b59ff-rgb),.08) 0%, transparent 70%);
  pointer-events: none;
}
.sf-thero__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.sf-thero .sf-hero__h1 { color: var(--color-text); }
.sf-thero .sf-hero__sub { color: var(--color-text-muted); }
.sf-thero__flow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 22px 0 20px;
}
.sf-thero__step {
  background: var(--c-ffffff);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(var(--c-101214-rgb),.04);
}
.sf-thero__arrow { color: var(--color-text-muted); align-self: center; opacity: .5; }
.sf-thero__trust {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  color: var(--color-text-muted); font-size: 13px; font-weight: 500;
}
.sf-thero__trust span { color: var(--color-primary); margin-right: 4px; font-weight: 800; }

.sf-bundlebar {
  background: var(--c-ffffff);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
}
.sf-bundlebar__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--c-c7d3fe) 0%, var(--c-b3c3fe) 100%);
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  border: 1px solid var(--c-2453fb);
}
.sf-bundlebar__icon { font-size: 28px; }
.sf-bundlebar__text { flex: 1; min-width: 200px; }
.sf-bundlebar__title { font-weight: 700; color: var(--c-0f2678); margin: 0 0 2px; font-size: 15px; }
.sf-bundlebar__desc { color: var(--c-0e2b92); font-size: 13px; margin: 0; line-height: 1.4; }
.sf-bundlebar__price {
  font-weight: 800; color: var(--c-0f2678); font-size: 18px;
}
.sf-bundlebar__save {
  background: var(--c-dc2626); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); margin-left: 8px;
}

.sf-filters {
  padding: 24px 24px 0; background: var(--color-bg-alt);
}
.sf-filters__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.sf-search {
  flex: 1 1 300px;
  position: relative;
}
.sf-search input {
  width: 100%; height: 44px;
  padding: 0 16px 0 40px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14.5px; font-family: inherit;
  background: var(--c-ffffff);
  transition: border-color .15s;
}
.sf-search input:focus {
  outline: 0; border-color: var(--color-primary);
}
.sf-search::before {
  content: '🔍'; position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; pointer-events: none;
}
.sf-tabs {
  display: flex; gap: 8px; padding: 16px 0; overflow-x: auto;
  max-width: 1200px; margin: 0 auto;
}
.sf-tab {
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--c-ffffff); border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  font-family: inherit; transition: .15s;
}
.sf-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.sf-tab.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

.sf-empty {
  text-align: center; padding: 80px 20px;
  color: var(--color-text-muted);
  grid-column: 1 / -1;
}
.sf-empty__icon { font-size: 44px; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE POLISH
   Mobile-first breakpoints cho các component chưa responsive
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (≤ 860px) */
@media (max-width: 860px) {
  .sf-section { padding: 56px 20px; }
  .sf-section__head { margin-bottom: 36px; }
  .sf-h2 { font-size: clamp(24px, 6vw, 32px); }
  .sf-hero { padding: 60px 20px 70px; }
  .sf-hero__h1 { font-size: clamp(30px, 7vw, 42px); }
  .sf-hero__sub { font-size: 15.5px; }
  .sf-hero__ctas { flex-direction: column; }
  .sf-hero__ctas .sf-btn { width: 100%; }
  .sf-hero__proof { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sf-thero { padding: 40px 20px 32px; }
  .sf-thero__flow { gap: 6px; }
  .sf-thero__step { font-size: 12px; padding: 7px 12px; }
  .sf-thero__arrow { display: none; }
  .sf-thero__trust { gap: 14px; font-size: 12.5px; }
  .sf-trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .sf-trustbar__item { font-size: 12.5px; }
  .sf-how__grid { max-width: 480px; }
  .sf-how__step { padding: 24px 16px; }
  .sf-compare__card { padding: 24px 20px; }
  .sf-ctv__tiers { gap: 10px; }
  .sf-ctv__tier { font-size: 13px; padding: 10px 18px; }
  .sf-prod__head { margin-bottom: 24px; }
}

/* Mobile (≤ 560px) */
@media (max-width: 560px) {
  .sf-section { padding: 44px 16px; }
  .sf-nav__inner { padding: 12px 18px; gap: 8px; }
  .sf-nav__logo { font-size: 18px; }
  .sf-nav__cta { padding: 7px 14px; font-size: 13px; }
  .sf-hero { padding: 44px 18px 60px; }
  .sf-hero__inner { gap: 32px; }
  .sf-hero__h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.12; }
  .sf-hero__sub { font-size: 15px; line-height: 1.6; }
  .sf-hero__proof { margin-top: 28px; }
  .sf-hero__avatar { width: 32px; height: 32px; font-size: 12px; }
  .sf-hero__proof-text { font-size: 12.5px; }
  .sf-thero { padding: 32px 18px 28px; }
  .sf-thero__flow { margin: 16px 0 14px; }
  .sf-thero__step { font-size: 11.5px; padding: 6px 11px; }
  .sf-trustbar { padding: 18px 16px; }
  .sf-trustbar__inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sf-trustbar__icon { font-size: 18px; }
  .sf-trustbar__item span { font-size: 12px; line-height: 1.35; }
  .sf-icp__card { padding: 22px 18px; }
  .sf-icp__icon { width: 48px; height: 48px; font-size: 24px; margin-bottom: 14px; }
  .sf-icp__title { font-size: 16px; }
  .sf-compare__card { padding: 20px 16px; }
  .sf-compare__list li { font-size: 13.5px; padding: 8px 0 8px 26px; }
  .sf-how__guarantee { padding: 20px 18px; }
  .sf-how__guarantee-icon { font-size: 26px; }
  .sf-price__card { padding: 28px 22px; }
  .sf-price__price { font-size: 30px; }
  .sf-price__features li { font-size: 14px; }
  .sf-browser__body { padding: 16px; }
  .sf-browser__cards { gap: 6px; }
  .sf-browser__mini { font-size: 10px; padding: 10px 8px; }
  .sf-browser__mini strong { font-size: 13px; }
  .sf-filters { padding: 16px 16px 0; }
  .sf-search input { height: 42px; font-size: 14px; }
  .sf-tabs { padding: 14px 16px; gap: 6px; }
  .sf-tab { padding: 8px 14px; font-size: 12.5px; }
  .sf-prod__grid { gap: 14px; padding: 0; }
  .sf-prod__body { padding: 14px; }
  .sf-prod__title { font-size: 14.5px; }
  .sf-prod__price { font-size: 18px; }
  .sf-bundlebar { padding: 12px 16px; }
  .sf-bundlebar__inner { padding: 14px 16px; gap: 12px; }
  .sf-bundlebar__title { font-size: 14px; }
  .sf-bundlebar__desc { font-size: 12px; }
  .sf-footer { padding: 40px 20px 24px; }
  .sf-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sf-footer__copy { font-size: 12px; margin-top: 32px; padding-top: 20px; }
}

/* Tiny phone (≤ 380px) */
@media (max-width: 380px) {
  .sf-nav__logo { font-size: 16px; }
  .sf-hero__h1 { font-size: 26px; }
  .sf-h2 { font-size: 22px; }
  .sf-trustbar__inner { grid-template-columns: 1fr; }
  .sf-footer__inner { grid-template-columns: 1fr; }
}

/* Dark section mobile — giảm padding dashboard-like */
@media (max-width: 560px) {
  .sf-section--dark { padding: 44px 18px; }
  .sf-section--dark .sf-h2 { font-size: 26px; line-height: 1.2; }
}

.sf-cat3__head { margin-bottom: 28px; }
.sf-cat3__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.sf-cat3__card {
  display: flex; gap: 16px; background: var(--c-ffffff);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 20px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sf-cat3__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--sl-green-400);
}

.sf-cat3__art {
  position: relative; flex: none; width: 132px; min-height: 152px;
  border-radius: var(--radius-md); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
}
.sf-cat3__art--sheet { background: linear-gradient(160deg, var(--sl-green-50) 0%, var(--sl-green-100) 100%); }
.sf-cat3__art--script { background: linear-gradient(160deg, var(--c-f4f5f1) 0%, var(--c-8aa3fd) 100%); }
.sf-cat3__art--svc   { background: linear-gradient(160deg, var(--c-fbfbf9) 0%, var(--c-ebebe7) 100%); }

.sf-cat3__tag { font-size: 12.5px; font-weight: 800; color: var(--c-1a1d1f); line-height: 1.3; text-decoration: none; }
.sf-cat3__artsub { font-size: 11px; color: var(--c-54585e); line-height: 1.4; margin-top: 3px; display: block; text-decoration: none; }
.sf-cat3__corner {
  position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px;
  border-radius: var(--radius-pill); background: var(--c-ffffff); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.sf-cat3__stat {
  margin-top: auto; background: rgba(var(--c-ffffff-rgb),.85); border-radius: var(--radius-sm);
  padding: 10px 11px; box-shadow: var(--shadow-sm); text-decoration: none;
}
.sf-cat3__stat strong { display: block; font-size: 17px; font-weight: 900; line-height: 1.1; margin-bottom: 2px; text-decoration: none; }
.sf-cat3__stat span { font-size: 10px; color: var(--c-73777e); font-weight: 600; text-decoration: none; }
.sf-cat3__art--sheet .sf-cat3__stat strong  { color: var(--sl-green-700); }
.sf-cat3__art--script .sf-cat3__stat strong { color: var(--c-0e2b92); }
.sf-cat3__art--svc .sf-cat3__stat strong    { color: var(--c-1a1d1f); }

.sf-cat3__phone {
  margin-top: auto; background: #1a1d1f; border-radius: var(--radius-sm); padding: 11px 10px;
}
.sf-cat3__phone-bar { width: 32%; height: 4px; border-radius: 2px; background: var(--c-414449); margin: 0 auto 10px; }
.sf-cat3__phone-chip {
  display: flex; align-items: center; gap: 5px; justify-content: center;
  background: rgba(var(--c-2b59ff-rgb),.16); border: 1px solid rgba(var(--c-2b59ff-rgb),.35);
  color: var(--sl-green-400); font-size: 9.5px; font-weight: 700;
  border-radius: var(--radius-sm); padding: 6px 6px; margin-bottom: 7px;
}
.sf-cat3__phone-btn {
  background: var(--sl-green-600); color: #fff; font-size: 10px; font-weight: 700;
  text-align: center; border-radius: var(--radius-sm); padding: 7px 0;
}

.sf-cat3__body { flex: 1; min-width: 0; padding-top: 2px; }
.sf-cat3__title { font-size: 15.5px; font-weight: 800; margin: 0 0 12px; }
.sf-cat3__title a { color: var(--color-text); text-decoration: none; }
.sf-cat3__card:hover .sf-cat3__title a { color: var(--color-primary); }
.sf-cat3__links { list-style: none; padding: 0; margin: 0; }
.sf-cat3__links li { margin-bottom: 9px; }
.sf-cat3__links a {
  font-size: 13px; color: var(--color-text-muted); text-decoration: none;
  transition: color .15s, padding-left .15s; display: inline-block;
}
.sf-cat3__links a::before { content: '›'; margin-right: 5px; color: var(--sl-green-400); font-weight: 700; }
.sf-cat3__links a:hover { color: var(--color-primary); padding-left: 2px; }

@media (max-width: 1180px) { .sf-cat3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 3 cột tràn ngang ở 981–1180px (art 132px cứng) */
@media (max-width: 560px) { .sf-cat3__grid { grid-template-columns: 1fr; } }

.sf-svc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sf-svc__card {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center;
  gap: 20px; text-decoration: none; overflow: hidden;
  border: 1px solid rgba(var(--c-ffffff-rgb),.08);
  border-radius: var(--radius-xl); padding: 32px 30px; min-height: 240px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sf-svc__card--green {
  background: radial-gradient(120% 140% at 105% -10%, rgba(var(--c-2b59ff-rgb),.28) 0%, transparent 45%),
              linear-gradient(135deg, #06164e 0%, #020b2c 100%);
}
.sf-svc__card--blue {
  background: radial-gradient(120% 140% at 105% -10%, rgba(var(--c-3862f8-rgb),.25) 0%, transparent 45%),
              linear-gradient(135deg, #0c1948 0%, #101214 100%);
}
.sf-svc__card--solo { grid-template-columns: 1fr; }
.sf-svc__card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(var(--c-101214-rgb),.4); }
.sf-svc__card--green:hover { border-color: rgba(var(--c-6e88e7-rgb),.35); }
.sf-svc__card--blue:hover { border-color: rgba(var(--c-7d99fc-rgb),.35); }
.sf-svc__tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(var(--c-ffffff-rgb),.12); padding: 5px 12px; border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.sf-svc__title { font-size: 21px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.32; }
.sf-svc__desc { font-size: 13.5px; color: rgba(255,255,255,.68); line-height: 1.6; margin: 0 0 14px; }
.sf-svc__list { list-style: none; padding: 0; margin: 0 0 20px; }
.sf-svc__list li { font-size: 12.5px; color: rgba(255,255,255,.62); padding: 3px 0 3px 20px; position: relative; }
.sf-svc__list li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; }
.sf-svc__card--green .sf-svc__list li::before { color: var(--c-6e88e7); }
.sf-svc__card--blue .sf-svc__list li::before { color: var(--c-7d99fc); }
.sf-svc__cta {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px;
  padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(var(--c-ffffff-rgb),.1);
  transition: gap .2s, background .2s;
}
.sf-svc__card--green .sf-svc__cta { color: var(--c-6e88e7); }
.sf-svc__card--blue .sf-svc__cta { color: var(--c-7d99fc); }
.sf-svc__card:hover .sf-svc__cta { gap: 10px; background: rgba(var(--c-ffffff-rgb),.18); }

.sf-svc__visual { display: flex; align-items: center; justify-content: center; height: 100%; }
.sf-svc__mockup {
  width: 100%; background: rgba(var(--c-ffffff-rgb),.06); border: 1px solid rgba(var(--c-ffffff-rgb),.12);
  border-radius: 0; overflow: hidden; backdrop-filter: blur(6px);
}
.sf-svc__mockup-bar { display: flex; gap: 5px; padding: 10px 12px; background: rgba(16,18,20,.22); }
.sf-svc__mockup-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--c-ffffff-rgb),.25); }
.sf-svc__mockup-body { padding: 16px 18px; }
.sf-svc__mockup-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.55); padding: 7px 0; }
.sf-svc__mockup-check {
  width: 17px; height: 17px; flex: none; border-radius: 50%; background: rgba(var(--c-6e88e7-rgb),.18);
  color: var(--c-6e88e7); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.sf-svc__mockup-row--active { color: #fff; font-weight: 600; }
.sf-svc__mockup-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c-0b3ef5); animation: sfSvcPulse 1.4s infinite; }
@keyframes sfSvcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.sf-svc__badge-ring {
  width: 92px; height: 92px; border-radius: 50%; background: rgba(var(--c-7d99fc-rgb),.12);
  border: 1px solid rgba(var(--c-7d99fc-rgb),.3); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 36px;
}
.sf-svc__stat { text-align: center; }
.sf-svc__stat strong { display: block; font-size: 22px; font-weight: 900; color: #fff; }
.sf-svc__stat span { font-size: 12px; color: rgba(255,255,255,.6); }

@media (max-width: 820px) {
  .sf-svc__grid { grid-template-columns: 1fr; }
  .sf-svc__card { grid-template-columns: 1fr; }
  .sf-svc__visual { margin-top: 18px; }
}

.sf-proofstrip { background: var(--sl-green-50); border-bottom: 1px solid var(--color-border); }
.sf-proofstrip__inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; font-size: 13px; color: var(--color-text-muted);
}
.sf-proofstrip__item strong { color: var(--color-text); font-weight: 800; }
.sf-proofstrip__dot { color: var(--color-border); }
@media (max-width: 560px) { .sf-proofstrip__inner { font-size: 12px; padding: 8px 16px; } }

.sf-cat3__art--bundle { background: linear-gradient(160deg, var(--c-f0f3ff) 0%, var(--c-c2d0ff) 100%); }
.sf-cat3__art--bundle .sf-cat3__stat strong { color: var(--c-1237be); }

.sf-cat3__svc-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; }
.sf-cat3__svc-divider::before, .sf-cat3__svc-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.sf-cat3__svc-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.sf-cat3__svc-row { max-width: 360px; }

.sf-section--fade-top { position: relative; }
.sf-section--fade-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--c-2b59ff-rgb),.5), transparent);
}

/* line-icons-1 — icon nét thay emoji (trang chủ, /template, /web-apps) */
.sf-trustbar__icon {
  width: 40px; height: 40px; flex: none; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); color: var(--color-primary-dark);
}
.sf-trustbar__icon svg { width: 20px; height: 20px; }
.sf-icp__icon svg { width: 26px; height: 26px; }
.sf-compare__title { display: flex; align-items: center; gap: 10px; }
.sf-compare__mark {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-compare__mark svg { width: 15px; height: 15px; stroke-width: 2.5; }
.sf-compare__card--bad .sf-compare__mark { background: var(--color-danger-bg); color: var(--c-ef4444); }
.sf-compare__card--good .sf-compare__mark { background: var(--color-primary-light); color: var(--c-2b59ff); }
.sf-compare__card--bad .sf-compare__list li::before,
.sf-compare__card--good .sf-compare__list li::before {
  content: ''; width: 16px; height: 16px; top: 14px; background: currentColor;
  -webkit-mask: var(--sf-li-mask) center / contain no-repeat; mask: var(--sf-li-mask) center / contain no-repeat;
}
.sf-compare__card--bad .sf-compare__list li::before { --sf-li-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%206%206%2018'%2F%3E%3Cpath%20d%3D'm6%206%2012%2012'%2F%3E%3C%2Fsvg%3E"); }
.sf-compare__card--good .sf-compare__list li::before { --sf-li-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); }
.sf-cat3__corner { color: var(--color-text); }
.sf-cat3__corner svg { width: 15px; height: 15px; }
.sf-cat3__phone-chip svg { width: 11px; height: 11px; stroke-width: 3; vertical-align: -1px; margin-right: 4px; }
.sf-how__guarantee-icon { color: var(--color-primary); line-height: 0; }
.sf-how__guarantee-icon svg { width: 32px; height: 32px; }
.sf-svc__mockup-check svg { width: 10px; height: 10px; stroke-width: 3; }
.sf-svc__badge-ring { color: var(--c-7d99fc); }
.sf-svc__badge-ring svg { width: 38px; height: 38px; stroke-width: 1.75; }
.sf-thero__step { display: inline-flex; align-items: center; gap: 7px; }
.sf-thero__step svg { width: 15px; height: 15px; flex: none; color: var(--color-primary); }
.sf-thero__trust > div { display: inline-flex; align-items: center; }
.sf-thero__trust span svg { width: 14px; height: 14px; display: block; stroke-width: 3; }
.sf-empty__icon { color: var(--color-text-muted); line-height: 0; }
.sf-empty__icon svg { width: 40px; height: 40px; stroke-width: 1.75; }
.sf-bundlebar__icon { color: var(--color-primary); line-height: 0; }
.sf-bundlebar__icon svg { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .sf-trustbar__icon { width: 34px; height: 34px; border-radius: 0; }
  .sf-trustbar__icon svg { width: 17px; height: 17px; }
  .sf-icp__icon svg { width: 22px; height: 22px; }
  .sf-how__guarantee-icon svg { width: 26px; height: 26px; }
}

/* pricing-4-cards — khối giá trang chủ có thêm Bundle Văn phòng (thẻ ẩn cho tới khi bundle có thật) */
.sf-price__grid:has(> .sf-price__card--office:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1280px; }
.sf-price__grid:has(> .sf-price__card--office:not([hidden])) .sf-price__card { padding: 36px 24px 28px; }
.sf-price__grid:has(> .sf-price__card--office:not([hidden])) .sf-price__price { font-size: 32px; }
.sf-price__grid:has(> .sf-price__card--office:not([hidden])) .sf-price__assurance { min-height: 3em; }
.sf-price__card--office { border: 2px solid var(--color-primary); background: linear-gradient(180deg, var(--c-f6f6f3) 0%, var(--c-ffffff) 45%); box-shadow: 0 20px 40px rgba(var(--c-2b59ff-rgb),.14); }
.sf-price__card[hidden] { display: none !important; }
.sf-price__ribbon--green { background: linear-gradient(135deg, var(--c-2b59ff), var(--c-1f45d9)); box-shadow: 0 6px 16px rgba(var(--c-2b59ff-rgb),.35); }
.sf-price__ed { display: table; margin: 4px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; background: var(--color-primary-light); color: var(--color-primary-dark); white-space: nowrap; vertical-align: 1px; }
.sf-price__ed--basic { background: var(--c-c7d3fe); color: var(--c-0e2b92); }
.sf-price__card--office .sf-price__assurance a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1240px) {
  .sf-price__grid:has(> .sf-price__card--office:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
  .sf-price__grid:has(> .sf-price__card--office:not([hidden])) .sf-price__card--highlight { transform: none; }
}
@media (max-width: 700px) {
  .sf-price__grid:has(> .sf-price__card--office:not([hidden])) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}

/* ═══ Nhận diện thương hiệu (public/js/brand.js) ═══
   1. Chữ "fwdlab" trong nội dung = wordmark: Sora đậm, ".tech" nhạt như logo. Màu theo chữ xung quanh.
   2. Họa tiết logo ">■" (mũi tên + ô vuông Signal) đứng trước mọi nhãn nhỏ phía trên tiêu đề.
   3. Dòng ">■ fwdlab.tech" phía trên tiêu đề hero; wordmark lớn chìm ở cuối footer. */
.fl-brand { font-family: var(--font-brand); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; text-transform: none; } /* luôn viết thường, kể cả trong nhãn in hoa */
.fl-brand__tld { font-weight: 400; opacity: .55; }
.sf-h2 .fl-brand, .sf-hero__h1 .fl-brand, h1 .fl-brand, h2 .fl-brand { font-weight: 700; }

/* Họa tiết ">■": SVG cắt từ logo (fwdlab-logo.svg) — mũi tên Ink/Paper theo nền, ô vuông Signal */
.fl-mark,
.sf-label-sm::before, .sf-svc__tag::before, .sf-pdp__kicker::before,
.ch-eyebrow::before, .co-eyebrow::before, .pp-eyebrow::before, .bl-eyebrow::before, .rv-eyebrow::before, .info-label::before {
  content: ""; display: inline-block; width: 1.05em; height: .95em; margin-right: .5em; vertical-align: -.1em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 24 80 72'%3E%3Cpath d='M18 32L50 60L18 88' fill='none' stroke='%23101214' stroke-width='14'/%3E%3Crect x='64' y='49' width='22' height='22' fill='%232B59FF'/%3E%3C/svg%3E");
}
[data-theme="dark"] .fl-mark,
[data-theme="dark"] :is(.sf-label-sm, .sf-svc__tag, .sf-pdp__kicker, .ch-eyebrow, .co-eyebrow, .pp-eyebrow, .bl-eyebrow, .rv-eyebrow, .info-label)::before,
.sf-section--dark :is(.sf-label-sm, .sf-svc__tag)::before, .sf-footer .fl-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 24 80 72'%3E%3Cpath d='M18 32L50 60L18 88' fill='none' stroke='%23F5F5F2' stroke-width='14'/%3E%3Crect x='64' y='49' width='22' height='22' fill='%235F82FF'/%3E%3C/svg%3E");
}

/* Hero: ">■ fwdlab.tech" phía trên tiêu đề */
.sf-hero__brand {
  display: flex; align-items: center; margin: 0 0 14px;
  font: 600 15px/1 var(--font-brand); letter-spacing: -.01em; color: var(--c-101214);
}
.sf-hero__brand .fl-mark { width: 1.25em; height: 1.1em; margin-right: .45em; }
.sf-hero__brand .fl-brand__tld { font-weight: 400; opacity: .5; }

/* Footer: logo to hơn + wordmark lớn chìm ở cuối (brand.js chèn) */
.sf-footer__logo-img { height: 40px; }
.sf-footer { overflow: hidden; }
.sf-footer__wordmark {
  max-width: 1200px; margin: 36px auto -0.18em; padding: 0 0 0 2px; user-select: none; pointer-events: none;
  font: 600 clamp(56px, 15vw, 210px)/.9 var(--font-brand); letter-spacing: -.05em; white-space: nowrap;
  color: rgba(255, 255, 255, .07);
}
.sf-footer__wordmark span { color: rgba(255, 255, 255, .035); }
.sf-footer__wordmark-mark {
  display: inline-block; width: .5em; height: .45em; margin-right: .08em; vertical-align: .02em; opacity: .12;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 24 80 72'%3E%3Cpath d='M18 32L50 60L18 88' fill='none' stroke='%23F5F5F2' stroke-width='14'/%3E%3Crect x='64' y='49' width='22' height='22' fill='%232B59FF'/%3E%3C/svg%3E");
}
@media (max-width: 640px) { .sf-footer__logo-img { height: 34px; } .sf-footer__wordmark { margin-top: 28px; } }

/* Chữ ký "người làm" trên thẻ sản phẩm + trang sản phẩm: >■ fwdlab (sản phẩm người bán: "Bán bởi X") */
.sf-prod__maker { display: flex; align-items: center; margin: 2px 0 6px; font-size: 13px; line-height: 1; color: var(--c-101214); }
.sf-prod__maker .fl-mark { width: 1em; height: .9em; margin-right: .3em; vertical-align: 0; }
.sf-prod__maker--pdp { display: inline-flex; margin: 0; font-size: 14px; color: var(--c-54585e); }
.sf-prod__maker--pdp .fl-mark { margin-left: .4em; }
.sf-prod__maker--pdp .fl-brand { color: var(--c-101214); }