/* ========================================
   TopLead Website - Styles
   ======================================== */

/* ============================================================
   TOKEN MÀU — HƯỚNG 03 "CONFIDENT WARM"
   ------------------------------------------------------------
   Theo TOPLEAD_DIRECTIONS.html, hướng 03, có điều chỉnh cho đạt
   WCAG AA. Ba lý do chọn hướng này:

   • Màu nhấn #CB6116 lệch màu logo #9C4E06 đúng 4° — hướng 01 và
     02 đều lệch 14°. Đây là hướng duy nhất thật sự cùng tông với
     dấu hiệu thương hiệu.
   • Nền kem ấm thay nền xám lạnh; mực nâu đen thay navy vốn chỏi
     với sắc đất của logo.
   • Có sẵn tông chàm làm dải tối THỨ HAI, nên các dải tối liền
     nhau không còn là một khối phẳng.

   Ba chỗ tài liệu gốc trượt chuẩn, đã vá bên dưới.
   ============================================================ */
:root {
  /* Nền tối — hai tông để các dải tối liền nhau vẫn tách bạch */
  --brand-primary: #023441;        /* chàm; giấy trên nền này 12.52:1 */
  --brand-primary-deep: #012A34;   /* chàm đậm cho hero; 14.22:1 */
  --brand-primary-mid: #0A4C5C;
  /* Bậc SÁNG của họ chàm, song song với --brand-logo-bright bên họ đồng.
     Trên nền tối, #0A4C5C chỉ đạt 1.59:1 nên viền vẽ bằng nó coi như vô hình;
     mã này đạt 4.94:1 trên chàm đậm và 4.35:1 trên chàm. */
  --brand-primary-light: #4E9DB6;

  /* Màu viền/đường kẻ mang sắc thương hiệu. Tự đổi theo nền: trên nền sáng
     dùng chàm đậm (#0A4C5C, 8.35:1), trên nền tối khối .hero/.qf/... khai đè
     sang chàm sáng (#4E9DB6, 4.35-5.78:1). Một mã cố định không thể vừa đọc
     được trên giấy vừa đọc được trên chàm đậm. */
  --brand-line: var(--brand-primary-mid);    /* chàm nhạt cho nhãn phụ trên nền sáng */
  --brand-primary-action: #023441; /* viền focus trên nền sáng */

  /* --- Thang màu logo. Giữ nguyên từ bản trước vì đây là phần
     ĐO ĐƯỢC của thương hiệu: lấy thẳng từ assets/images/logo.png.
     Hướng 03 chọn #CB6116 làm màu nhấn, nhưng mã đó KHÔNG dùng làm
     chữ hay nền nút được — chữ trắng trên nó chỉ 3.99:1, chữ mực
     4.45:1, làm chữ trên giấy 3.74:1. Thang này chính là bậc đậm
     cùng họ của nó, và mọi bậc đều đạt chuẩn. */
  --brand-logo: #9C4E06;         /* chữ và nút; trắng trên nó 5.61:1 */
  --brand-logo-deep: #7A3C05;    /* rê chuột, chữ trên nền đã pha */
  --brand-logo-bright: #E08A2E;  /* nhấn trên nền tối; 6.64:1 trên mực */

  /* Nhấn — #CB6116 là chữ ký của hướng 03, dùng cho MẢNG màu và
     đường nét, không dùng làm chữ. */
  --accent-primary: #CB6116;
  --accent-warm: #B5560F;
  /* Nền nút bấm phải TÁCH khỏi hai mã trên. Chữ trắng đặt lên #CB6116 chỉ đạt
     3.74:1, đặt lên #B5560F cũng không khá hơn — cả hai đều là mã dành cho
     mảng màu và đường nét, không phải cho chỗ có chữ đè lên.
     Dùng đúng màu logo: chữ trắng trên nó 5.61:1, lúc rê chuột 7.94:1. */
  --accent-button: var(--brand-logo);
  --accent-button-hover: var(--brand-logo-deep);
  /* Vàng ấm thay cho vàng chanh của bản trước: bảng màu này ngả ấm
     nên vàng lạnh chỏi. Trên mực đạt 8.78:1. */
  --accent-highlight: #EFA84A;

  /* Nền & trung tính */
  --surface-dark: #1F1611;   /* mực nâu đen của hướng 03 */
  --surface-light: #EDE3D3;  /* nền thẻ và bảng, sâu hơn nền trang */
  --surface-cream: #F5EDE0;
  --surface-white: #FAF7F2;

  /* Trạng thái.
     --success và --warning được gán lại ở cuối khối :root này. Trước đây chúng
     khai #9ED14B và #FFD85F ngay tại đây, nhưng vì bị ghi đè nên hai màu đó
     không bao giờ tới được giao diện — chúng chỉ còn là hai màu lệch bảng màu
     nằm lại trong tệp. Đã bỏ; giá trị thật xem ở phần gán bên dưới. */
  --success-soft: #EAF2E4;   /* cặp với --success-text: 5.48:1 */
  --error: #5A2132;
  --error-soft: #621932;
  --info: #65ABC4;
  --info-soft: #C4F8FF;

  /* --- Bốn token BỔ SUNG, đề xuất theo mục 3 của tài liệu ---
     Bộ trên có 9 cặp màu trượt WCAG AA khi đo thực tế. Bốn token này
     là bản dùng được cho phần CHỮ; các token gốc vẫn giữ nguyên cho
     phần nền và mảng màu. Số kèm theo là tỉ lệ tương phản đã đo.

     Chưa sửa gì trong TOPLEAD_DESIGN_SYSTEM.md — chờ duyệt. */

  /* error-soft (#621932) gần trùng error (#5A2132): đặt chữ lên nền đó
     ra 1.00:1, tức là không đọc được chữ nào. Đây là nền lỗi thật. */
  --error-bg: #FAE9EC;          /* error trên nền này: 10.56:1 */

  /* success (#9ED14B) làm chữ trên nền sáng chỉ 1.62:1. Giữ #9ED14B cho
     chấm/thanh trạng thái, dùng token này khi là chữ. */
  --success-text: #3F6B27;      /* trên surface-white: 5.65:1 */

  /* info (#65ABC4) làm chữ trên nền sáng chỉ 2.31:1. */
  --info-text: #276275;         /* trên surface-white: 6.11:1 */

  /* Mục 7 bắt viền focus dùng brand-primary-action (#021F94) trên MỌI
     thành phần, nhưng trên nền tối #16171C chỉ đạt 1.39:1 — gần như vô
     hình. Nền tối dùng token này. */
  --focus-on-dark: #FFD85F;     /* trên surface-dark: 12.99:1 */
}

/* Font tiêu đề dùng cho mọi chữ lớn trên site.
   ------------------------------------------------------------------
   Gom vào một chỗ thay vì rải khắp file, để sau này đổi font chỉ sửa một dòng.
   Chỉ áp cho tiêu đề và số liệu — thân bài giữ font trung tính, vì grotesk đậm
   đọc cả đoạn dài rất mệt mắt. */
h1, h2, h3,
.hero-headline,
.headline-line,
.section-header h2,
.page-hero-title,
.qf-title,
.post-card-title,
.li-card-title,
.jd-title,
.job-title{
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}/* Số liệu dùng monospace: chữ số đều bề ngang nên các cột số thẳng hàng, và
   con số đếm lên không bị giật qua lại theo từng bước. */
.partner-num,
.stat-num,
.qf-proof-num,
code, kbd, samp{
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}/* Các dải có nền tối.
   ------------------------------------------------------------------
   Hai thứ phải đổi khi nền chuyển sang tối:

   1. Điểm nhấn. Cam đất của logo (#9C4E06) quá tối để đọc trên nền mực hay
      nền chàm — chỉ khoảng 1.6:1. Chuyển sang bậc sáng cùng sắc 31°
      (#E08A2E, 6.64:1 trên mực) nên vẫn cùng tông với logo chứ không nhảy
      sang màu khác.
   2. Viền focus. Mục 7 bắt dùng #021F94, nhưng trên nền tối chỉ 1.39:1. */
.hero,
.qf,
.showcase,
.footer,
.navbar,
.partner,
.philosophy,
/* .cv-band đã bị bỏ khỏi danh sách này: nền của nó nay là kem sáng
   (--bg-cream, đặt vô điều kiện ở cuối tệp), không còn tối nữa. Khi còn nằm
   đây, mọi biến bên trong vẫn chọn bậc dành cho nền tối — đó là lý do nhãn
   mục trên trang Cách làm việc ra vàng-trên-kem, chỉ 1.61:1. */
.ind-hero,
.post-hero--dark,
.post-cta-box,
.prod-card--featured,
/* Hai khối liên hệ nay đóng trang bằng nền tối (xem khối "DẢI ĐÓNG CHO KHỐI
   LIÊN HỆ" ở cuối tệp), nên phải nằm trong nhóm này: --icon, --gold, --copper,
   --tag-ink, --line và --focus-ring đều tự lật sang bậc dành cho nền tối. */
.contact,
.contact-section{
  --gold: var(--brand-logo-bright);
  --gold-light: var(--accent-highlight);
  --gold-dark: var(--accent-warm);
  --copper: var(--brand-logo-bright);
  --copper-dark: var(--accent-highlight);
  --tag-ink: var(--accent-highlight);
  --brand-line: var(--brand-line);
  --icon: var(--surface-light);
  --line: rgba(250, 247, 242, 0.16);
  --line-strong: rgba(250, 247, 242, 0.34);
  --focus-ring: var(--focus-on-dark);
}

/* ============================================================
   TẦNG BẮC CẦU SANG DESIGN SYSTEM
   ------------------------------------------------------------
   Các tên biến cũ (--copper, --gold, --bg-cream…) được giữ lại
   nhưng nay TRỎ VỀ token của TOPLEAD_DESIGN_SYSTEM.md. Sửa ở
   một chỗ này thay vì viết lại 270 chỗ đang dùng: ít rủi ro
   hơn hẳn, và mọi khối trên trang đổi màu đồng loạt nên không
   có cảnh nửa cũ nửa mới.

   Tên cũ chưa xoá vì chúng nằm rải khắp file. Việc đổi tên là
   dọn dẹp riêng, không đi kèm đợt đổi màu này.

   Cách gán theo VAI TRÒ, không theo sắc độ gần nhất — đúng
   nguyên tắc ở cuối mục 4 của tài liệu:
     copper  = màu nhấn chung cho link, nhãn, biểu tượng
               → brand-primary-mid (tài liệu: "Navigation,
                 secondary buttons, links, badges")
     gold    = viền và nút phụ  → brand-primary
     Màu CAM accent-primary KHÔNG gán vào đây. Mục 2.1 dành nó
     riêng cho hành động chính duy nhất của mỗi màn, nên nó chỉ
     được đặt thẳng vào các lớp nút CTA bên dưới.
   ============================================================ */
:root {
  /* Màu chữ cho nhãn mục. Nền của nhãn là sắc logo pha 10%, tức nền sẫm hơn
     nền trang, nên chữ #9C4E06 tụt xuống 4.05:1. Bậc đậm giữ 5.74:1. */
  --tag-ink: var(--brand-logo-deep);

  /* Lớp ĐIỂM NHẤN NHỎ: chữ nhấn, viền, nét biểu tượng, nhãn mục.
     ~184 chỗ dùng, gần hết là color / border-color / stroke.

     Bản trước gán cả lớp này sang navy. Kết quả là mọi chi tiết nhấn chìm vào
     nền và trang trông phẳng lì — navy trên navy, hoặc navy trên xám sáng.
     Lớp này phải ẤM và bám màu logo; navy để dành cho MẢNG LỚN. */
  --gold: var(--brand-logo);
  --gold-dark: var(--brand-logo-deep);
  --gold-light: var(--brand-logo-bright);
  --copper: var(--brand-logo);
  --copper-dark: var(--brand-logo-deep);

  /* Nền */
  --bg-dark: var(--brand-primary-deep);
  --bg-dark-light: var(--brand-primary);
  --bg-warm-brown: var(--brand-primary);
  /* Nền chân trang. Dải nào nằm ngay trên chân trang phải kết thúc
     đúng giá trị này, nếu không sẽ lộ đường ghép. */
  --footer-bg: var(--brand-primary-deep);
  --bg-white: var(--surface-white);
  --bg-beige: var(--surface-cream);
  /* Dùng surface-cream chứ không phải surface-light.
     Dải logo là khoảng nghỉ duy nhất giữa hero và khối form, nên nó phải ấm
     để cùng họ với dấu hiệu thương hiệu. surface-light (#EDE3D3) nay cũng là
     kem, chỉ sâu hơn một bậc, và để dành cho thẻ và bảng — nơi cần tách khỏi
     nền trang. */
  --bg-cream: var(--surface-cream);

  /* Chữ */
  --text: var(--brand-primary);
  /* Lấy đúng giá trị --text-secondary của hợp đồng thương hiệu dùng chung với
     CRM. Đo được 7.16 / 6.58 / 6.02 trên ba nền sáng — cao hơn hẳn mã #6E5C50
     dùng trước đó (5.94 / 5.46 / 4.99). */
  --text-muted: #5E5148;

  /* ── LỚP TRUNG TÍNH ────────────────────────────────────────────────────────
     Đo tỷ lệ dùng màu toàn site: màu NHẤN đang chiếm 45% số lượt gọi. Mọi hệ
     giao diện chuyên nghiệp đều đặt màu nhấn ở khoảng 5-10% — chính mục 2.1 của
     bộ nhận diện cũng nói vậy. Nhấn 45% không phải là "nhiều điểm nhấn", nó là
     KHÔNG CÒN điểm nhấn nào, vì không còn gì để so sánh.

     Ba token dưới đây nhận lại phần việc mà màu nhấn đang làm hộ: nét biểu
     tượng lúc nghỉ, viền thẻ lúc nghỉ, đường phân cách. Màu nhấn rút về đúng
     chỗ của nó — nút chính, trạng thái đang chọn, rê chuột, viền focus, nhãn
     mục, dòng nhấn ở hero. */
  --icon-on-light: #5C4C42;           /* nét biểu tượng trên nền sáng; 7.65:1 */
  --icon: var(--icon-on-light);       /* nét biểu tượng lúc nghỉ */
  --line: rgba(31, 22, 17, 0.12);     /* đường phân cách, viền thẻ lúc nghỉ */
  --line-strong: #847D77;             /* viền ô nhập; 3.79:1 — đạt mức 3:1 */

  /* ── NHỊP DỌC & ĐỘ MỜ ─────────────────────────────────────────────────────
     Trang chủ trước đây mỗi dải một mức đệm: dải logo 60px, khối form 76px,
     hai dải sau 100px. Mỗi khối thở một kiểu nên cuộn xuống thấy như các mảnh
     ghép lại chứ không phải một trang. Một token duy nhất cho mọi dải.

     Độ mờ cũng đang có ba mức rời rạc (4px, 12px, 26px). Rút còn hai: một cho
     thanh điều hướng, một cho lớp phủ. Mức 26px là thứ tài liệu cảnh báo — nó
     làm chữ phía sau nhoè thành vệt và máy yếu bị giật khi cuộn. */
  --section-y: clamp(72px, 7vw, 104px);
  --hero-fade: 800ms;   /* trùng FADE_TIME trong script.js */
  --blur-soft: 8px;      /* huy hiệu, nhãn nhỏ nổi trên ảnh */
  --blur-nav: 14px;      /* thanh điều hướng */
  --blur-overlay: 20px;  /* lớp phủ, menu di động */

  /* ── TÊN CHUẨN THEO HỢP ĐỒNG THƯƠNG HIỆU DÙNG CHUNG VỚI CRM ───────────────
     Hai sản phẩm phải gọi cùng một màu bằng cùng một tên, nếu không mỗi bên
     nói một kiểu và không ai đối chiếu được. Website vốn đã dùng đúng 12/13
     giá trị của hợp đồng, chỉ khác cách đặt tên — nên đây là bí danh trỏ về
     token sẵn có, không phải một bảng màu thứ hai.

     Tên cũ giữ nguyên vì hàng trăm selector đang phụ thuộc; đổi tên hàng loạt
     là rủi ro không đổi lấy được gì. */
  --surface-page: var(--surface-cream);
  --surface-card: var(--surface-white);
  --surface-subtle: var(--surface-light);
  --brand-highlight: var(--accent-highlight);
  --text-primary: var(--surface-dark);
  --text-secondary: var(--text-muted);
  --text-on-dark: var(--surface-white);
  --focus-light: var(--brand-primary-mid);
  --focus-dark: var(--accent-highlight);
  --font-body: var(--font);

  /* Hợp đồng khai --border-subtle: #E4DAD5. Đo được chỉ 1.29:1 trên nền giấy,
     nên nó CHỈ dùng được làm đường phân cách trang trí, KHÔNG dùng cho viền ô
     nhập hay ranh giới điều khiển — những chỗ đó WCAG đòi 3:1 và phải dùng
     --line-strong. Đây là một thiếu sót của hợp đồng, đã ghi vào tài liệu. */
  --border-subtle: #E4DAD5;
  --text-light: var(--surface-white);
  --text-light-muted: var(--surface-light);

  /* Đổ bóng giữ sắc navy: bóng là chiều sâu, không phải điểm nhấn — bóng ấm
     trông như vết ố. Còn viền và nền nhạt của lớp nhấn thì dùng sắc logo. */
  --shadow-sm: 0 2px 8px rgba(31, 22, 17, 0.15);
  --shadow-md: 0 4px 16px rgba(31, 22, 17, 0.2);
  --shadow-lg: 0 8px 32px rgba(31, 22, 17, 0.25);
  /* Quầng sáng là hiệu ứng NHẤN nên đi theo sắc logo, khác với đổ bóng. */
  --shadow-glow: 0 0 20px rgba(156, 78, 6, 0.32);

  /* Viền */
  --border-gold: 1px solid var(--gold);
  --border-gold-light: 1px solid rgba(156, 78, 6, 0.3);

  --success: var(--success-text);
  /* Vẫn còn ba nơi dùng trong CSS trang quản trị (.admin-field .req,
     .admin-field.has-err, .admin-err), nên chú thích cũ nói "không còn nơi
     nào dùng" là sai. */
  --warning: var(--accent-highlight);

  /* Chữ theo hướng 03: grotesk đậm cho tiêu đề mang sự tự tin, thân bài dùng
     font trung tính dễ đọc, monospace dành cho số liệu.
     Mỗi khai báo đều có font dự phòng của hệ điều hành, nên lúc font Google
     chưa tải xong trang vẫn đọc được. */
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --shadow: 0 4px 20px rgba(31, 22, 17, 0.15);
  --transition-fast: all 0.15s ease;
  --transition: all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* Type scale (Task 1) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Spacing scale - multiples of 4px (Task 2) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-30: 120px;

  /* Header + focus (Task 4 / Task 3) */
  --header-height: 80px;
  /* Mục 7: nền sáng dùng brand-primary-action. Các dải tối khai đè bằng
     --focus-on-dark ở khối ngay dưới :root, vì #021F94 trên nền tối chỉ 1.39:1. */
  --focus-ring: var(--brand-primary-action);
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchor links land below the fixed header (Task 4) */
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font);
  background-color: var(--bg-white);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ========================================
   Language Switcher
   ======================================== */
.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-switcher {
  display: flex;
  gap: 2px;
  background: rgba(156, 78, 6, 0.15);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(156, 78, 6, 0.3);
  flex-shrink: 0;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-light);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lang-btn:hover {
  color: var(--gold-light);
}

.lang-btn.active {
  background: var(--accent-button);
  color: var(--surface-white);
}

.flag {
  font-size: 1rem;
}

/* ========================================
   Navbar
   ======================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: var(--transition);
  background: transparent;
}

.navbar.scrolled {
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
  backdrop-filter: blur(var(--blur-nav));
  border-bottom: 1px solid rgba(156, 78, 6, 0.2);
  padding: 12px 0;
  box-shadow: 0 2px 20px rgba(31, 22, 17, 0.1);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 56px;
  width: auto;
}

.logo-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.logo-text-top {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--surface-white);
  transition: color 0.3s ease;
}

.logo-text-bottom {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--surface-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.navbar.scrolled .logo-text-top {
  color: var(--gold);
}

.navbar.scrolled .logo-text-bottom {
  color: var(--copper);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Every top-level nav item - plain link or dropdown trigger - shares one shape */
.nav-links > a:not(.btn-cta),
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-light-muted);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

/* Underline sits on ::before so triggers can keep ::after for the caret */
.nav-links > a:not(.btn-cta)::before,
.nav-dropdown-trigger::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-links > a:not(.btn-cta):hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-links > a.active:not(.btn-cta),
.nav-dropdown-trigger.active {
  color: var(--gold);
}

.nav-links > a:not(.btn-cta):hover::before,
.nav-dropdown:hover .nav-dropdown-trigger::before,
.nav-links > a.active:not(.btn-cta)::before,
.nav-dropdown-trigger.active::before {
  width: 100%;
}

/* Navbar Dropdown */
.nav-dropdown {
  position: relative;
}

/* Caret follows the link colour (currentColor) in every navbar state */
.nav-dropdown-trigger::after {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown-trigger::after {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid rgba(156, 78, 6, 0.2);
  box-shadow: var(--shadow-lg);
  min-width: 176px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 100;
}

/* Opens on click, not on hover: script.js sets .is-open. A menu that dropped
   open whenever the pointer crossed it kept appearing unasked. */
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--text) !important;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: var(--transition-fast);
  text-decoration: none;
}

.nav-dropdown-menu a:hover {
  background: rgba(156, 78, 6, 0.1);
  color: var(--gold) !important;
}

.navbar.scrolled .nav-links > a:not(.btn-cta),
.navbar.scrolled .nav-dropdown-trigger {
  color: var(--surface-dark);
}

.navbar.scrolled .nav-links > a:not(.btn-cta):hover,
.navbar.scrolled .nav-dropdown:hover .nav-dropdown-trigger,
.navbar.scrolled .nav-links > a.active:not(.btn-cta),
.navbar.scrolled .nav-dropdown-trigger.active {
  color: var(--gold-dark);
}

.btn-cta {
  padding: 10px 24px;
  background: var(--gold);
  color: var(--text-light) !important;
  font-weight: 600;
  border-radius: var(--radius);
  transition: var(--transition-fast);
}

.btn-cta:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  /* Never let the row squeeze this out: it is the only way to open or close
     the menu, and on a narrow phone it was being pushed off screen entirely. */
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.mobile-menu-btn span {
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: var(--transition-fast);
  transform-origin: center;
}

/* Hamburger -> X when the mobile menu is open */
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Active State */
.nav-links.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Was var(--dark), which is not a variable this stylesheet defines: the
     whole declaration was dropped and the panel rendered fully transparent,
     leaving the menu unreadable over the page behind it. */
  /* Frosted glass: the hero and its particle field stay visible through the
     panel, blurred and darkened just enough to keep the links readable. */
  background: linear-gradient(180deg, rgba(31, 22, 17, 0.80), rgba(31, 22, 17, 0.90));
  -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  padding: 20px 20px 32px;
  border-top: 1px solid color-mix(in srgb, var(--brand-line) 18%, transparent);
  gap: 16px;
  /* Every dropdown is expanded inline, so the panel is usually taller than the
     screen. It scrolls on its own; script.js sets max-height to the space left
     under the navbar, which is the only way to get it exactly right across
     breakpoints (the bar's height changes with the logo size). */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nav-links.active a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(156, 78, 6, 0.1);
}

.nav-links.active a:last-child {
  border-bottom: none;
}

/* The open menu owns the screen; the page behind it must not scroll away. */
body.nav-open {
  overflow: hidden;
}

/* The bar takes the same glass treatment, so bar and panel read as one sheet. */
body.nav-open .navbar,
body:has(#bg-canvas).nav-open .navbar.scrolled {
  background: rgba(31, 22, 17, 0.80);
  -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  border-bottom-color: transparent;
}

/* Safari on older iOS and Firefox without the flag get no backdrop-filter at
   all - there, a translucent panel would leave the links unreadable, so fall
   back to a solid one. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav-links.active,
  body.nav-open .navbar,
  body:has(#bg-canvas).nav-open .navbar.scrolled {
    background: var(--footer-bg);
  }
}

body.nav-open .navbar .nav-links > a:not(.btn-cta),
body.nav-open .navbar .logo-text-top,
body.nav-open .navbar .logo-text-bottom {
  color: var(--surface-white);
}

/* The open menu owns the screen; the page behind it must not scroll away. */
body.nav-open {
  overflow: hidden;
}

/* The bar takes the same glass treatment, so bar and panel read as one sheet. */
body.nav-open .navbar,
body:has(#bg-canvas).nav-open .navbar.scrolled {
  background: rgba(31, 22, 17, 0.80);
  -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  backdrop-filter: blur(var(--blur-overlay)) saturate(150%);
  border-bottom-color: transparent;
}

/* Safari on older iOS and Firefox without the flag get no backdrop-filter at
   all - there, a translucent panel would leave the links unreadable, so fall
   back to a solid one. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav-links.active,
  body.nav-open .navbar,
  body:has(#bg-canvas).nav-open .navbar.scrolled {
    background: var(--footer-bg);
  }
}

body.nav-open .navbar .nav-links > a:not(.btn-cta),
body.nav-open .navbar .logo-text-top,
body.nav-open .navbar .logo-text-bottom {
  color: var(--surface-white);
}

/* Narrow phones: the logo, the language switcher and the menu button have to
   share ~320px. Drop the logo's second line and tighten everything. */
@media (max-width: 480px) {
  .logo { gap: 8px; min-width: 0; }
  .logo-img { height: 34px; }
  .logo-text-bottom { display: none; }
  .nav-right { gap: 10px; }
  .navbar .container { padding-left: 16px; padding-right: 16px; }
}

/* Mobile menu: a dropdown expands inline, and only once it is tapped - having
   all of them open at once made the panel several screens long. */
.nav-links.active .nav-dropdown {
  display: flex;
  flex-direction: column;
}

.nav-links.active .nav-dropdown-menu {
  position: static;
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  padding: 0 0 0 16px;
  /* Collapsed by default; .is-open on the parent reveals it. */
  display: none;
  opacity: 1;
  visibility: visible;
}

.nav-links.active .nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

.nav-links.active .nav-dropdown-menu a {
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--surface-white) !important;
  opacity: 0.85;
}

.nav-links.active .nav-dropdown-menu a:hover {
  background: transparent;
  color: var(--gold-light) !important;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-deep) 55%, var(--brand-primary-deep) 100%);
  border-bottom: 3px solid var(--gold-light);
}

.hero > .container {
  width: 100%;
  max-width: 100% !important;
  display: flex;
  justify-content: center;
  padding: 0 clamp(20px, 5vw, 80px) !important;
  box-sizing: border-box;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
  filter: blur(100px);
  opacity: 0.15;
  animation: pulse 8s ease-in-out infinite;
}

.circle-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: -100px;
}

.circle-2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
  animation-delay: -4s;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(156, 78, 6, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 78, 6, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Particles Canvas */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.05); opacity: 0.18; }
}

/* Hero Slider */
.hero-slider {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.hero-headline {
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
}

.headline-line {
  display: block;
  color: var(--surface-white);
}

.headline-line.highlight {
  color: var(--gold-light);
}

.hero-slider .hero-subtitle {
  font-size: 1.25rem;
  /* 0.75 quá mờ khi nằm trên ảnh có nhiều chi tiết — chữ chìm vào đám đông
     phía sau. Nâng độ đặc và thêm bóng chữ mảnh để tách khỏi mọi vùng ảnh. */
  color: rgba(250, 247, 242, 0.94);
  text-shadow: 0 1px 12px rgba(1, 42, 52, 0.55);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Hero Slider Dots */
.hero-dots {
  display: flex;
  justify-content: center;
  /* Chấm rộng 10px, khe 12px nên bước chỉ 22px — hẹp hơn sàn vùng chạm 24px
     của WCAG 2.2. Nới khe lên 16px để bước thành 26px, vừa đủ cho vùng chạm
     bên dưới mà hai chấm cạnh nhau không giành cú chạm của nhau. */
  gap: 16px;
  margin-top: 40px;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 0;
}

.hero-dot:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-dot.active {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: scale(1.2);
}

.hero-dot.active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  animation: dotPulse 5s linear infinite;
}

@keyframes dotPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* CTA Buttons in Hero Slider */
.hero-slider .cta-buttons {
  justify-content: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(156, 78, 6, 0.15);
  border: 1px solid rgba(156, 78, 6, 0.3);
  border-radius: 50px;
  font-size: 0.875rem;
  color: var(--gold-light);
  margin-bottom: 32px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-light);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold {
  color: var(--gold);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 48px;
  line-height: 1.8;
}/* Hide old elements - replaced by slider */
.hero-content .badge,
.hero-content .stats-row{
  display: none;
}.stats-row{
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}.stat{
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}.stat-icon{
  width: 48px;
  height: 48px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}.stat-icon svg{
  width: 24px;
  height: 24px;
  stroke: var(--icon);
}.stat-number{
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}.stat-label{
  font-size: 0.875rem;
  color: var(--text-muted);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--gold-dark);
  box-shadow: 0 4px 0 var(--gold-dark), 0 6px 16px rgba(31, 22, 17, 0.3);
  transition: var(--transition);
  position: relative;
  top: 0;
}

.btn-primary svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.btn-primary:hover {
  background: var(--accent-button-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(122, 40, 12, 0.9), 0 12px 24px rgba(203, 97, 22, 0.35), 0 0 30px rgba(203, 97, 22, 0.28);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--gold-dark), 0 4px 8px rgba(31, 22, 17, 0.3);
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--accent-button);
  color: var(--surface-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(156, 78, 6, 0.5);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background: var(--gold);
  border-radius: 2px;
  animation: scroll 2s ease-in-out infinite;
}

@keyframes scroll {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.3; }
}

/* ========================================
   Section Styles
   ======================================== */
section {
  padding: 100px 0;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

.section-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Gạch nhấn dưới mọi tiêu đề mục — 14 chỗ trên 5 trang.
   ------------------------------------------------------------------
   Đây là thủ pháp lặp lại duy nhất của cả site, nên nó vừa là điểm nhấn vừa là
   thứ buộc các trang lại thành một bộ: cuộn trang nào cũng gặp đúng nhịp đó.

   Chuyển sắc trong CÙNG họ ấm (đất logo → vàng nhấn) chứ không bắc cầu sang
   navy: mục 3 cấm trộn màu chính với màu nhấn trong một chuyển sắc.
   Hai đầu đều lấy từ biến nên trên nền tối nó tự sáng lên theo. */
.section-header h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent-highlight));
}

/* Vài mục căn trái thì gạch nhấn cũng phải căn trái theo. */
.section-header--left h2::after,
.section-header.left h2::after {
  margin-left: 0;
  margin-right: auto;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--text-muted);
}

.section-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(156, 78, 6, 0.1);
  border: 1px solid rgba(156, 78, 6, 0.2);
  border-radius: 50px;
  font-size: 0.875rem;
  color: var(--tag-ink);
  font-weight: 500;
  margin-bottom: 16px;
}/* ========================================
   Founders Section
   ======================================== */
.founders{
  background: var(--bg-white);
}.founders-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}.founder-card{
  padding: 24px 20px;
  position: relative;
  background: var(--bg-beige);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.2);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}.founder-linkedin{
  position: absolute;
  top: 16px;
  right: 16px;
}.founder-linkedin a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: 50%;
  transition: var(--transition-fast);
}

.founder-linkedin a:hover {
  background: var(--gold);
}.founder-linkedin svg{
  width: 18px;
  height: 18px;
  fill: var(--gold);
}

.founder-linkedin a:hover svg {
}

.founder-card:hover {
  border-color: var(--gold);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}.founder-avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 2px solid var(--line);
}.founder-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}.founder-card h3{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}.founder-role{
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 8px;
}.founder-bio{
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 12px;
}.founder-quote{
  color: var(--text);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 4px;
}.founder-avatar{
  width: 84px;
  height: 84px;
}.founder-avatar.is-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}.founder-avatar.is-placeholder svg{
  width: 40px;
  height: 40px;
  fill: var(--surface-white);
  opacity: 0.92;
}.founder-exp{
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(156, 78, 6, 0.18);
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}.founder-exp li{
  position: relative;
  padding-left: 20px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}.founder-exp li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--icon);
  font-weight: 700;
}.founder-exp li.has-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  color: var(--text);
  font-weight: 500;
}.founder-exp li.has-badge::before{
  content: none;
}.founder-cert{
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}.founder-contact{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(156, 78, 6, 0.18);
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}.founder-contact-link{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--text);
  transition: var(--transition-fast);
}.founder-contact-link svg{
  width: 15px;
  height: 15px;
  stroke: var(--gold);
  flex-shrink: 0;
}

.founder-contact-link:hover {
  color: var(--gold);
}.founder-contact-link span{
  word-break: break-word;
}

/* ========================================
   Logos Section
   ======================================== */
.logos {
  padding: 60px 0;
  /* One background for the whole band instead of a card behind each logo. Flat
     on purpose: no elevation, no second layer, the strip reads as a single
     surface between the two dark sections it sits between. */
  /* Dải này là khoảng nghỉ duy nhất giữa hero và khối form, và cũng đúng là
     dải trưng logo khách hàng — nên nền phải ấm để cùng họ với logo. */
  background: var(--surface-cream);
  border-top: 1px solid rgba(156, 78, 6, 0.2);
  border-bottom: 1px solid rgba(156, 78, 6, 0.2);
  overflow: hidden;
}

.logos-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--copper-dark);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
/* Two hairlines that fade outward, so the label reads as a title for the band
   rather than a caption floating above it. */
.logos-label::before,
.logos-label::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 150px);
  background: linear-gradient(90deg, transparent, var(--copper));
  opacity: 0.5;
}
.logos-label::after { background: linear-gradient(90deg, var(--copper), transparent); }

.logos-marquee {
  display: flex;
  width: fit-content;
}

.logos-track {
  display: flex;
  /* Spacing lives on the items, not as a track gap. translateX(-50%) halves the
     track including its gaps, so one gap-width of drift showed up at the loop
     seam; with margins the halves are exactly equal. */
  animation: marquee 42s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 40px;
  padding: 14px 26px;
  position: relative;
  overflow: hidden;                    /* keeps the sheen inside the card */
  /* A card one shade lighter than the sand band. Not white: white against this
     warm ground reads as a hole punched in it. */
  background: var(--surface-white);
  border: 1px solid rgba(156, 78, 6, 0.22);
  border-radius: 14px;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s ease;
  flex-shrink: 0;
  /* In full colour: the old grayscale-plus-70%-opacity treatment hid them. */
}

.logo-mark {
  /* A wide box, not a square. Several partner marks are horizontal wordmarks;
     squeezed into 40x40 they scaled down to a few pixels tall and vanished.
     object-fit keeps square marks at their own size inside the same box. */
  width: 88px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-item:hover {
  transform: translateY(-3px);
  border-color: var(--copper);
}
.logo-item:hover .logo-mark { transform: scale(1.08); }
.logo-mark { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* A band of light travelling across each card. Staggered by position so it
   runs down the rail as a wave rather than flashing everywhere at once. */
.logo-item::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -50%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: logoSheen 7.2s ease-in-out infinite;
}
@keyframes logoSheen {
  0%, 58%   { left: -50%; opacity: 0; }
  62%       { opacity: 1; }
  88%, 100% { left: 120%; opacity: 0; }
}
/* Eight steps, repeating every eight items: the marquee holds two identical
   sets, so item n and item n+8 must carry the same delay or the loop seam
   would show two different points of the wave. */
.logo-item:nth-child(8n+1)::before { animation-delay: 0s; }
.logo-item:nth-child(8n+2)::before { animation-delay: 0.42s; }
.logo-item:nth-child(8n+3)::before { animation-delay: 0.84s; }
.logo-item:nth-child(8n+4)::before { animation-delay: 1.26s; }
.logo-item:nth-child(8n+5)::before { animation-delay: 1.68s; }
.logo-item:nth-child(8n+6)::before { animation-delay: 2.1s; }
.logo-item:nth-child(8n+7)::before { animation-delay: 2.52s; }
.logo-item:nth-child(8n+8)::before { animation-delay: 2.94s; }

@media (prefers-reduced-motion: reduce) {
  .logo-item::before { animation: none; opacity: 0; }
  .logo-item:hover .logo-mark { transform: none; }
}

.logo-text {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--copper-dark);
}

.logo-item:hover .logo-text {
  color: var(--copper);
}

@media (max-width: 640px) {
  .logo-item { gap: 11px; margin-right: 26px; padding: 11px 18px; }
  .logo-mark { width: 70px; height: 32px; }
  .logo-text { font-size: 0.9rem; }
}/* ========================================
   Value Section
   ======================================== */
.value{
  background: var(--bg-white);
}.value .section-header h2{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  font-weight: 500;
  color: var(--text-muted);
}.value-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}.value-card{
  padding: 40px;
  background: var(--bg-beige);
  border-radius: var(--radius-lg);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}.value-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.value-card:hover {
  border-color: var(--gold);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.value-card:hover::before {
  transform: scaleX(1);
}.value-icon{
  width: 56px;
  height: 56px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}.value-icon svg{
  width: 28px;
  height: 28px;
  stroke: var(--icon);
  transition: transform 0.3s ease;
}

.value-card:hover .value-icon svg {
  transform: scale(1.2) rotate(5deg);
}.value-card h3{
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}.value-card p{
  color: var(--text-muted);
  line-height: 1.7;
}/* ========================================
   Services Section
   ======================================== */
.services{
  background: var(--bg-beige);
}.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}.service-card{
  padding: 32px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.2);
  transition: var(--transition);
}

.service-card:hover {
  border-color: rgba(156, 78, 6, 0.4);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}.service-icon{
  width: 48px;
  height: 48px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}.service-icon svg{
  width: 24px;
  height: 24px;
  stroke: var(--icon);
}.service-card h3{
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 12px;
}.service-card p{
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}.service-tag{
  display: inline-block;
  padding: 4px 12px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: 50px;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 500;
}/* ========================================
   Pain Points Section
   ======================================== */
.pain-points{
  background: var(--bg-white);
}

.carousel {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}/* Pain Point Ticker - Word Swap Style */
.pain-ticker{
  text-align: center;
  margin-bottom: 48px;
}.pain-ticker-label{
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}.pain-ticker-words{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}.pain-ticker-word{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pain-ticker-word.active {
  opacity: 1;
  position: relative;
  left: auto;
  transform: none;
}

.carousel-track {
  display: flex;
  gap: 24px;
  animation: carousel 15s ease-in-out infinite;
}

@keyframes carousel {
  0%, 30% { transform: translateX(0); opacity: 1; }
  32% { opacity: 0.8; }
  33%, 63% { transform: translateX(-33.333%); opacity: 1; }
  65% { opacity: 0.8; }
  66%, 96% { transform: translateX(-66.666%); opacity: 1; }
  98% { opacity: 0.8; }
  100% { transform: translateX(0); opacity: 1; }
}.pain-card{
  flex: 0 0 calc(33.333% - 16px);
  padding: 40px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.2);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: var(--transition);
}

.pain-card:hover {
  border-color: var(--gold);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}.pain-icon{
  width: 64px;
  height: 64px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}.pain-icon svg{
  width: 32px;
  height: 32px;
  stroke: var(--icon);
}.pain-card h3{
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  color: var(--surface-dark);
}.pain-card p{
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(156, 78, 6, 0.3);
  border-radius: 50%;
  transition: var(--transition-fast);
}

.dot.active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}/* ========================================
   Stats Section
   ======================================== */
.stats{
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-mid) 100%);
  padding: 80px 0;
}.stats .section-header h2{
  color: var(--text-light);
}.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}.stats-card{
  text-align: center;
  padding: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  transition: var(--transition);
}

.stats-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}.stats-number{
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: 8px;
  line-height: 1;
}.stats-role{
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 4px;
}.stats-company{
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}/* ========================================
   Jobs Section
   ======================================== */
/* ========================================
   Testimonials Section
   ======================================== */
.testimonials{
  background: var(--bg-white);
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 100px 0;
}.testimonials::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, var(--bg-beige) 0%, transparent 100%);
  pointer-events: none;
}.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}.testimonial-card{
  padding: 32px;
  background: var(--bg-beige);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.2);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  opacity: 1 !important;
  transform: none !important;
}

.testimonial-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}.testimonial-text{
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 24px;
  font-style: italic;
  color: var(--surface-dark);
  position: relative;
  z-index: 1;
}.testimonial-text::before{
  content: '"';
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.5;
  line-height: 0;
  display: block;
  margin-bottom: 16px;
}.testimonial-author{
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  background: var(--accent-button);
  color: var(--surface-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.author-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.author-title {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ========================================
   CTA Banner Section
   ======================================== */
.cta-banner {
  /* Dark base that lands exactly on the footer's colour at the bottom edge, so
     the band and the footer read as one surface - same move as the homepage,
     where the particle field runs straight into the footer. The copper glow at
     the top keeps the CTA's warmth without cutting a hard line. */
  /* Nền ramp trước đây bắt đầu từ --surface-dark (#1F1611), một màu NÂU ấm,
     rồi mới đổ về màu chân trang. Đo trên ảnh chụp: nửa trên của dải ra
     #271A11 -> #1F1611, tức nguyên nửa dải nằm ngoài hệ chàm mà cả trang đang
     dùng. Nay ramp chạy trong cùng một hệ, và vẫn đáp đúng màu chân trang ở
     mép dưới nên mối nối không lộ.

     Lớp sáng ở đỉnh trước đây là đồng #9C4E06 phủ 55%. Đồng và chàm gần bù
     nhau: trộn ở bất kỳ độ đậm nào cũng ra bùn — 0.55 cho sắc 37° (cam),
     0.35 cho 79° (ô-liu), phải xuống 0.16 mới quay lại teal, mà lúc đó thì
     không còn thấy gì. Mục 7 của tài liệu thiết kế cũng xếp "gradient trộn
     brand primary với accent" vào danh sách không được làm. Nay lớp sáng dùng
     --brand-primary-mid, tức bậc sáng của chính hệ chàm, nên vẫn có chiều sâu
     ở đỉnh dải mà không đổi hệ màu. Hơi ấm cho lời kêu gọi đến từ nút bấm —
     đúng vai của màu nhấn. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 76, 92, 0.55) 0%, rgba(2, 52, 65, 0.20) 45%, transparent 72%),
    linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--footer-bg) 88%, var(--footer-bg) 100%);
  padding: var(--section-y) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* Fade the texture out before the bottom edge - at full strength it lifts the
     band lighter than the footer and re-draws the seam we just removed. */
  -webkit-mask-image: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark) 40%, transparent 88%);
  mask-image: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark) 40%, transparent 88%);
}

.cta-banner-content {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 16px;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
  margin-bottom: 32px;
}

.btn-magnetic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 40px;
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.btn-magnetic:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Contact Section
   ======================================== */
.contact {
  background: var(--bg-beige);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.contact-info h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.contact-info > p {
  color: var(--text-muted);
  font-size: 1.125rem;
  margin-bottom: 40px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  align-items: start;
  gap: 16px;
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--icon);
}

.contact-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.contact-value {
  font-weight: 500;
}

.contact-form-wrapper {
  background: var(--surface-white);
  padding: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
  box-shadow: 0 14px 44px rgba(31, 22, 17, 0.08);
}

.form-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.tab-btn {
  flex: 1;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(156, 78, 6, 0.25);
  color: var(--text-muted);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-light);
}

.tab-btn:hover:not(.active) {
  border-color: var(--gold);
  color: var(--gold);
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-beige);
  border: 1.5px solid rgba(156, 78, 6, 0.2);
  border-radius: var(--radius-sm);
  color: var(--surface-dark);
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(31, 22, 17, 0.14);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-submit svg {
  width: 20px;
  height: 20px;
}

.btn-submit:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-success {
  text-align: center;
  padding: 40px;
}

.success-icon {
  width: 64px;
  height: 64px;
  /* Trước dùng hai màu xanh lá tự chế (#4A7C59 nền, #9ED14B nét) cho ra
     1.98:1 — vừa lệch bảng màu vừa khó nhìn. Tài liệu đã có sẵn cặp màu
     trạng thái: --success-soft nền, --success-text nét, đạt 5.93:1. */
  background: var(--success-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.success-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--success-text);
}

.form-success h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.form-success p {
  color: var(--text-muted);
}

/* File Upload */
.file-upload {
  margin-bottom: 20px;
}

.file-upload-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.file-upload-area {
  position: relative;
  border: 2px dashed rgba(156, 78, 6, 0.3);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(156, 78, 6, 0.03);
}

.file-upload-area:hover {
  border-color: var(--gold);
  background: rgba(156, 78, 6, 0.05);
}

.file-upload-area.dragover {
  border-color: var(--gold);
  background: rgba(156, 78, 6, 0.1);
}

.file-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-upload-icon {
  width: 40px;
  height: 40px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.file-upload-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--icon);
}

.file-upload-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.file-upload-text span {
  color: var(--text-muted);
  font-weight: 500;
}

.file-upload-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 8px;
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius-sm);
}

.file-preview-icon {
  width: 32px;
  height: 32px;
  background: var(--gold);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-icon svg {
  width: 16px;
  height: 16px;
  /* --text-dark chưa bao giờ được khai trong stylesheet này, nên khai báo cũ
     là giá trị không hợp lệ và nét biểu tượng rơi về màu mặc định. Nền của nó
     là nút màu đồng, nên nét phải sáng: trắng trên #9C4E06 đạt 5.61:1. */
  stroke: var(--surface-white);
}

.file-preview-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: var(--transition-fast);
}

.file-preview-remove:hover {
  color: var(--error);
}

/* ========================================
   Footer
   ======================================== */
.footer {
  position: relative;
  background: var(--bg-warm-brown);
  border-top: 1px solid color-mix(in srgb, var(--brand-line) 18%, transparent);
  padding: clamp(80px, 10vw, 120px) 0 32px;
  /* Footer-scoped palette - readable warm tones on the dark ground */
  --footer-heading: var(--accent-highlight);
  --footer-text: var(--surface-light);
  --footer-strong: var(--surface-white);
  --footer-line: rgba(239, 168, 74, 0.16);
  --footer-tile: rgba(255, 255, 255, 0.06);
  --footer-tile-border: rgba(255, 255, 255, 0.12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--footer-line);
}

.footer-brand .logo-img {
  height: 54px;
  width: auto;
}

.footer-brand p {
  color: var(--footer-text);
  margin-top: 18px;
  max-width: 300px;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Social icon boxes (mirrors the contact-icon box treatment) */
.footer-social {
  margin-top: 26px;
}

.footer-social-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--footer-heading);
  margin-bottom: 12px;
}

.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-tile);
  border: 1px solid var(--footer-tile-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.social-box img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.social-box:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--footer-heading);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.social-box:focus-visible {
  outline: 2px solid var(--footer-heading);
  outline-offset: 2px;
}

.footer-links h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  color: var(--footer-heading);
}

.footer-links a {
  display: block;
  width: fit-content;
  color: var(--footer-text);
  padding: 7px 0;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--footer-strong);
  transform: translateX(3px);
}

.footer-emails a {
  word-break: break-word;
}

/* Office details + map block */
.footer-office {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: stretch;
  padding: 44px 0;
  border-bottom: 1px solid var(--footer-line);
}

.footer-office-info {
  display: flex;
  flex-direction: column;
}

.footer-office-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--footer-strong);
  margin-bottom: 22px;
}

.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.footer-contact-icon {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(158deg, var(--surface-white) 0%, var(--surface-light) 100%);
  border: 1px solid rgba(31, 22, 17, 0.28);
  border-radius: var(--radius-sm);
}
/* engraved icon language: clipped gold corner */
.footer-contact-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 12px solid var(--gold);
  border-right: 12px solid transparent;
}

.footer-contact-icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--icon);
  fill: none;
}

.footer-contact-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-text);
  margin-bottom: 4px;
}

.footer-contact-value {
  display: block;
  color: var(--footer-strong);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.5;
}

a.footer-contact-value {
  transition: var(--transition-fast);
}

a.footer-contact-value:hover {
  color: var(--footer-heading);
}

.footer-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  width: fit-content;
  color: var(--footer-heading);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.footer-directions svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  transition: var(--transition-fast);
}

.footer-directions:hover {
  color: var(--footer-strong);
}

.footer-directions:hover svg {
  transform: translateX(3px);
}

.footer-map {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--footer-tile-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  filter: grayscale(0.15);
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--footer-line);
  text-align: center;
}

.footer-bottom p {
  color: var(--footer-text);
  font-size: var(--text-sm);
}

/* ========================================
   Animations
   ======================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   Responsive - 4 Breakpoints
   ======================================== */

/* Desktop Large: 1440px+ */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
    padding: 0 60px;
  }

  .hero > .container {
    padding: 0 80px !important;
  }

  .hero-headline {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
  }

  .section-header h2 {
    font-size: clamp(2rem, 3vw, 3rem);
  }
}

/* Laptop: 1280px - 1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container {
    max-width: 1200px;
    padding: 0 40px;
  }

  .hero > .container {
    padding: 0 48px !important;
  }

  .hero-headline {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }
}

/* Tablet Large: 1024px - 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-headline {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
  }
}

/* The full nav row needs ~1200px: logo + 6 links + CTA + language switcher.
   Below that it collided with the logo and overflowed the viewport, so the
   hamburger takes over - not just on phones. */
@media (max-width: 1199px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

/* Laptop: the row fits, but only just - tighten it rather than let it collide.
   The upper bound is 1439px, not 1379px: .container stays capped at 1200px all
   the way to 1439px, so the nav has no more room at 1400px than at 1200px. Ending
   this block at 1379px left 1380-1439px on the untightened 32px gaps, and the
   logo ran straight into the first link. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-links {
    gap: 20px;
  }

  .nav-links > a:not(.btn-cta),
  .nav-dropdown-trigger {
    font-size: 0.875rem;
  }

  .btn-cta {
    padding: 10px 18px;
  }

  .nav-right {
    gap: 16px;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 900px;
    padding: 0 32px;
  }

  .hero > .container {
    padding: 0 32px !important;
  }

  .hero-headline {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }.services-grid{
    grid-template-columns: repeat(2, 1fr);
  }.stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .footer-office {
    grid-template-columns: 1fr;
    gap: 28px;
  }.founders-grid{
    grid-template-columns: repeat(2, 1fr);
  }.value-grid{
    grid-template-columns: 1fr;
  }.jobs-grid{
    grid-template-columns: 1fr;
  }.testimonials-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  section {
    padding: 60px 0;
  }

  .container {
    padding: 0 20px;
  }

  .hero > .container {
    padding: 0 20px !important;
  }

  .hero-headline {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .hero-slider {
    min-height: 350px;
  }

  .hero-particles {
    display: none;
  }

  .hero-dots {
    bottom: 24px;
  }

  .nav-right {
    gap: 16px;
  }

  /* .nav-links / .mobile-menu-btn switch over at 1199px above */

  .lang-switcher {
    padding: 2px;
  }

  .lang-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  .logo-img {
    height: 40px;
  }

  .logo-text-top {
    font-size: 1.2rem;
  }

  .logo-text-bottom {
    font-size: 0.7rem;
  }.stats-row{
    flex-direction: column;
    gap: 24px;
  }.stat{
    text-align: center;
  }.services-grid,
  .value-grid,
  .jobs-grid,
  .testimonials-grid,
  .stats-grid{
    grid-template-columns: 1fr;
  }.founders-grid{
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-office {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }.pain-card{
    flex: none;
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .logos-track {
    animation-duration: 15s;
  }

  .carousel-track {
    flex-direction: column;
    animation: none;
  }

  .carousel-dots {
    display: none;
  }

  /* About Page */
  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-stats {
    grid-template-columns: repeat(2, 1fr);
  }.why-grid{
    grid-template-columns: 1fr;
  }

  .timeline {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Page Hero (for subpages)
   ======================================== */
.page-hero {
  /* Tall enough that the particle field reads as an environment rather than a
     strip of texture behind two lines of text. Not 100vh: the first section
     should still peek above the fold so the page invites a scroll. */
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 150px 0 110px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-deep) 55%, var(--brand-primary-deep) 100%);
  /* No 3px slab across the bottom. That hard rule is what made the hero read as
     a boxed-off panel; a hairline that dissolves at both ends still separates
     the dark hero from the light section below without drawing a lid on it. */
  border-bottom: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 25%, var(--gold-light) 75%, transparent);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero .hero-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
  filter: blur(100px);
  opacity: 0.15;
}

.page-hero .hero-circle.circle-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: 10%;
}

.page-hero .hero-circle.circle-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: 10%;
}

.page-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.page-hero-subtitle {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  position: relative;
  z-index: 1;
  /* Cap the measure so the lead breaks into a shape, not one wide ribbon */
  max-width: 48ch;
  margin-inline: auto;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* ---- Page hero: structure around the title ---- */
.ph-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

/* Breadcrumb doubles as the eyebrow: it tells you where you are, which is
   exactly the job a page hero has and the old one was not doing. */
.ph-crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ph-crumb a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ph-crumb a:hover { color: var(--gold-light); }
.ph-crumb-sep { color: var(--text-muted); opacity: 0.6; }
.ph-crumb [aria-current="page"] { color: var(--text-muted); }

/* Scroll cue: a hairline that grows out of the bottom edge, so the hero reads
   as continuing into the page instead of stopping at a border. */
.ph-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}
.ph-scroll:hover { color: var(--gold-light); }
.ph-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--gold-light));
  transform-origin: top;
  animation: phCue 2.4s ease-in-out infinite;
}
@keyframes phCue {
  0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Staggered entrance so the hero assembles instead of appearing as a slab */
.ph-inner > * {
  opacity: 0;
  transform: translateY(16px);
  animation: phIn 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ph-inner > *:nth-child(1) { animation-delay: 0.05s; }
.ph-inner > *:nth-child(2) { animation-delay: 0.16s; }
.ph-inner > *:nth-child(3) { animation-delay: 0.27s; }
.ph-inner > *:nth-child(4) { animation-delay: 0.38s; }
@keyframes phIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ph-inner > * { animation: none; opacity: 1; transform: none; }
  .ph-scroll-line { animation: none; }
}

@media (max-width: 767px) {
  .page-hero { min-height: 62vh; padding: 120px 0 96px; }
  .ph-crumb { font-size: 0.7rem; letter-spacing: 0.12em; }
  .ph-scroll { display: none; }
}

/* ========================================
   About Story Section
   ======================================== */
.about-story {
  background: var(--bg-beige);
  padding: 100px 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.story-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
}

.story-content p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.story-content strong {
  color: var(--text);
  font-weight: 600;
}

.story-lead {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text) !important;
  line-height: 1.6 !important;
}

.story-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
}

.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.story-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}.stat-item{
  background: var(--bg-white);
  padding: 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid rgba(156, 78, 6, 0.2);
  transition: var(--transition);
}

.stat-item:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}.stat-number{
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
  /* Equal-width digits, so the number does not wobble while it counts up. */
  font-variant-numeric: tabular-nums;
}.stat-label{
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========================================
   About Team
   ======================================== */
.about-team {
  background: var(--bg-white);
  padding: 100px 0;
}/* ========================================
   Why Choose TopLead
   ======================================== */
.why-choose{
  position: relative;
  background: var(--bg-beige);
  padding: 100px 0;
  overflow: hidden;
}/* a soft office image behind the carousel so the band isn't flat beige */
.why-choose::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background:
    linear-gradient(180deg, var(--bg-beige) 0%, rgba(249, 246, 240, 0.82) 45%, var(--bg-beige) 100%),
    url("assets/images/why-choose-bg.jpg") center/cover no-repeat;
}.why-choose > .container{ position: relative; z-index: 1; }.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}/* ------------------------------------------------------------------
   Why Choose TopLead - circular carousel
   The six cards ride a loop: the middle one is full size and opaque,
   its neighbours step down in scale and fade back, like a shelf of
   products with the current pick pulled forward. script.js sets the
   transforms; everything here is the look and the easing.
   ------------------------------------------------------------------ */
.why-carousel{
  position: relative;
  margin-top: 48px;
  padding: 0 56px;
}

/* ------------------------------------------------------------------
   Partner wall - real logos with names and what each one does
   A static grid, not a moving strip: these are named relationships, so
   they get room to be read rather than scrolled past.
   ------------------------------------------------------------------ */
.partner-wall-head {
  text-align: center;
  margin-top: clamp(56px, 7vw, 84px);
  margin-bottom: clamp(32px, 4vw, 48px);
  padding: 0 20px;
}

.partner-wall-head .section-tag {
  margin-bottom: 16px;
}

/* Was a small uppercase eyebrow sitting under its own section-header - now
   that the section-header above it is gone, this carries the section title
   on its own, so it takes the same weight as every other section's h2. */
.partner-wall-label {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 16px;
}

.partner-wall-sub {
  font-size: 1.125rem;
  color: var(--text-muted, var(--text-muted));
  max-width: 56ch;
  margin: 0 auto;
}

/* The cards run as a rail rather than sit in a grid: full width of the window,
   dissolving at both edges so the row reads as continuing past the screen. */
.partner-wall {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 7%, var(--surface-dark) 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 7%, var(--surface-dark) 93%, transparent);
}

.partner-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 6px 10px;
  /* The set is duplicated in the markup, so -50% lands exactly on the copy
     and the loop has no visible seam. */
  animation: partner-run 37s linear infinite;  /* 25% faster than the original 46s */
}

@keyframes partner-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stop so a card can actually be read. */
.partner-wall:hover .partner-track,
.partner-wall:focus-within .partner-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; }
  .partner-wall { overflow-x: auto; scrollbar-width: none; }
  .partner-wall::-webkit-scrollbar { display: none; }
}

.partner-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  width: 252px;
  padding: 24px;
  border: 1px solid rgba(156, 78, 6, 0.16);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-card:hover {
  border-color: var(--copper);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(31, 22, 17, 0.10);
}

/* Flexbox centring, so logos of different heights share one baseline. */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  width: 100%;
  margin-bottom: 16px;
}

.partner-logo img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  height: auto;          /* never distort: cap the height, keep the ratio */
  object-fit: contain;
  transition: transform 200ms ease;
}

.partner-card:hover .partner-logo img {
  transform: scale(1.04);
}

/* YourFit's mark is white-on-black artwork; stripping the background would
   erase the wordmark, so it keeps its own tile and gets rounded to match. */
.partner-card--tile .partner-logo img {
  border-radius: 10px;
}

.partner-name {
  font-size: var(--text-sm, 0.95rem);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.partner-desc {
  font-size: var(--text-xs, 0.8rem);
  line-height: 1.5;
  color: var(--text-muted, var(--text-muted));
  margin: 0;
}

@media (max-width: 767px) {
  .partner-track { gap: 12px; }
  .partner-card { width: 208px; padding: 16px; }
  .partner-logo { height: 46px; margin-bottom: 12px; }
  .partner-logo img { max-height: 46px; }
}.why-stage{
  position: relative;
  height: 340px;
  /* The off-centre cards run past the edges by design; clip them so they
     never widen the page or collide with the section padding. */
  overflow: hidden;
}.why-carousel .why-card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(380px, 76vw);
  margin: 0;
  /* Set by script.js: translate(-50%, -50%) translateX(...) scale(...) */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.55s ease,
              box-shadow 0.55s ease;
  will-change: transform, opacity;
}.why-carousel .why-card.is-active{
  box-shadow: 0 24px 60px rgba(31, 22, 17, 0.22);
  border-color: rgba(156, 78, 6, 0.35);
}/* Only the middle card is a live target; the faded ones behind it must not
   swallow clicks meant for the arrows. */
.why-carousel .why-card:not(.is-active){
  pointer-events: none;
}.why-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(156, 78, 6, 0.28);
  background: var(--bg-white);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}.why-nav svg{ width: 20px; height: 20px; }
.why-nav:hover { background: var(--copper); color: var(--surface-white); border-color: var(--copper); }.why-prev{ left: 0; }.why-next{ right: 0; }.why-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}.why-dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(156, 78, 6, 0.28);
  cursor: pointer;
  transition: var(--transition-fast);
}.why-dot.is-active{
  width: 26px;
  background: var(--copper);
}

@media (max-width: 767px) {
  .why-carousel { padding: 0 12px; }.why-stage{ height: 380px; }.why-nav{ display: none; }   /* swipe instead - the arrows would crowd the card */
}.why-card{
  background: var(--bg-white);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
  transition: var(--transition);
}

.why-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}/* TopLead engraved icon: sand chip + clipped gold corner (see .tl-ico) */
.why-icon{
  position: relative;
  overflow: hidden;
  width: 54px;
  height: 54px;
  background: linear-gradient(158deg, var(--surface-white) 0%, var(--surface-light) 100%);
  border: 1px solid rgba(31, 22, 17, 0.22);
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(31, 22, 17, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}.why-icon::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 13px solid var(--line);
  border-right: 13px solid transparent;
}.why-icon svg{
  width: 25px;
  height: 25px;
  stroke: var(--icon);
}.why-card h3{
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}.why-card p{
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ========================================
   Clients Section
   ======================================== */
.clients {
  background: var(--bg-white);
  padding: 100px 0;
}

/* ========================================
   Milestones / Timeline
   ======================================== */
.milestones {
  background: var(--bg-beige);
  padding: 100px 0;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.timeline-item {
  position: relative;
}

.timeline-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 12px;
}

.timeline-content {
  background: var(--bg-white);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
}

.timeline-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.timeline-content p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.9rem;
}

/* ========================================
   Animations
   ======================================== */

/* Scroll Animation Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Reduced-motion safety net: never leave scroll-reveal content hidden, and
   skip the entrance motion for users who ask for less animation. */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Fade animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hero content animation */
.hero-content {
  animation: fadeInUp 0.8s ease forwards;
}

/* Scroll indicator pulse */
.scroll-indicator {
  animation: fadeInUp 1s ease 0.5s forwards;
  opacity: 0;
}

@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-dot {
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Section header animation */
.section-header {
  animation: fadeInUp 0.6s ease forwards;
}/* Stats card hover */
.stats-card{
  transition: var(--transition);
}

.stats-card:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-lg);
}

/* Logo hover lives with the rest of .logo-item, further up. Two hover rules in
   two places was how the lift and the shadow ended up disagreeing. */

/* ========================================
   Jobs Page
   ======================================== */
/* ========================================
   Tools & Content Page
   ======================================== */
.blog-section {
  background: var(--bg-white);
  padding: 80px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card {
  background: var(--bg-beige);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(156, 78, 6, 0.15);
  transition: var(--transition);
}

.blog-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.blog-image {
  height: 200px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 24px;
}

.blog-category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: 50px;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
}

.blog-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.4;
}

.blog-content p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.blog-read-more {
  color: var(--gold);
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.blog-read-more:hover {
  color: var(--gold-light);
}

/* Editorial blog feed (full posts) */
.blog-feed {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.blog-article {
  background: var(--bg-beige);
  border: 1px solid rgba(156, 78, 6, 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.blog-article:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.blog-article-media {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.blog-article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.blog-article:hover .blog-article-media img {
  transform: scale(1.04);
}

.blog-article-media .blog-category {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  background: rgba(31, 22, 17, 0.72);
  color: var(--surface-white);
  backdrop-filter: blur(var(--blur-soft));
}

.blog-article-body {
  padding: 32px 36px 34px;
}

.blog-article-body h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 18px;
  text-wrap: balance;
}

.blog-article-text p {
  color: var(--brand-primary);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 15px;
}

.blog-article-text ul {
  margin: 0 0 15px;
  padding-left: 22px;
  color: var(--brand-primary);
  line-height: 1.7;
}

.blog-article-text li {
  margin-bottom: 6px;
}

.blog-article-text strong {
  color: var(--text);
  font-weight: 600;
}

.blog-refs {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(156, 78, 6, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}

.blog-refs-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
}

.blog-refs p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.blog-article .blog-read-more {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.95rem;
  font-weight: 600;
}.resources-section{
  background: var(--bg-beige);
  padding: 80px 0;
}.resources-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}.resource-card{
  background: var(--bg-white);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
  text-align: center;
  transition: var(--transition);
}

.resource-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}.resource-icon{
  width: 72px;
  height: 72px;
  background: var(--surface-white);
  border: 1px solid rgba(156, 78, 6, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31, 22, 17, 0.08);
}.resource-icon svg{
  width: 28px;
  height: 28px;
  stroke: var(--icon);
}.resource-icon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}.resource-card h3{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}.resource-card p{
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 16px;
}.resource-download{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.resource-download:hover {
  background: var(--gold-light);
}

.newsletter-section {
  /* Cùng ramp với .cta-banner (giải thích ở đó). Trước đây hai dải này khai
     cùng một thiết kế nhưng lệch nhau: 0.55/0.20 với đệm 80px ở kia, 0.45/0.16
     với đệm 60px ở đây. Nay dùng đúng cùng bộ giá trị và cùng --section-y như
     mọi khối khác. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 76, 92, 0.55) 0%, rgba(2, 52, 65, 0.20) 45%, transparent 72%),
    linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--footer-bg) 88%, var(--footer-bg) 100%);
  padding: var(--section-y) 0;
}

.newsletter-content {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-content h2 {
  color: var(--text-light);
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.newsletter-content p {
  color: var(--text-light-muted);
  margin-bottom: 24px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
}

.newsletter-form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 22, 17, 0.3);
}

.newsletter-form .btn-magnetic {
  white-space: nowrap;
}

/* ========================================
   Contact Page
   ======================================== */
.contact-section {
  background: var(--bg-white);
  padding: 80px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-form-wrapper {
  background: var(--bg-beige);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
}

.contact-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.contact-tab {
  flex: 1;
  padding: 14px 24px;
  background: transparent;
  border: 2px solid rgba(156, 78, 6, 0.2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.contact-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-light);
}

.contact-tab:hover:not(.active) {
  border-color: var(--gold);
  color: var(--gold);
}

.contact-form {
  display: none;
}

.contact-form.active {
  display: block;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form .form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
}

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-white);
  border: 2px solid rgba(156, 78, 6, 0.2);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  transition: var(--transition);
}

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(31, 22, 17, 0.15);
}

.contact-form .form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .btn-magnetic {
  width: 100%;
  justify-content: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
}

.contact-info-icon {
  width: 56px;
  height: 56px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--icon);
}

.contact-info-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.contact-info-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.map-section {
  background: var(--bg-beige);
  padding: 0 0 80px;
}

.map-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(156, 78, 6, 0.15);
}

.map-wrapper iframe {
  display: block;
}

.social-section {
  background: var(--bg-white);
  padding: 60px 0;
  text-align: center;
}

.social-content h2 {
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.social-content > p {
  color: var(--text-muted);
  margin-bottom: 32px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.social-link svg {
  width: 20px;
  height: 20px;
}/* Sáu mã màu trong khối này là màu thương hiệu của LinkedIn, Facebook và Zalo.
   Mục 3.1 của design system miễn trừ: màu của công ty khác không phải thứ mình
   token hoá, đổi đi là hỏng nhận diện của họ. */
.social-link.linkedin{
  background: #0077B5; /* LinkedIn */
  color: white;
}

.social-link.linkedin:hover {
  background: #005885; /* LinkedIn, rê chuột */
  transform: translateY(-2px);
}

.social-link.facebook {
  background: #1877F2; /* Facebook */
  color: white;
}

.social-link.facebook:hover {
  background: #0d65d9; /* Facebook, rê chuột */
  transform: translateY(-2px);
}

.social-link.zalo {
  background: #0068FF; /* Zalo */
  color: white;
}

.social-link.zalo:hover {
  background: #0050c7; /* Zalo, rê chuột */
  transform: translateY(-2px);
}

.faq-quick {
  background: var(--bg-beige);
  padding: 60px 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.faq-item {
  background: var(--bg-white);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
}

.faq-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.faq-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ========================================
   Services Page
   ======================================== */
/* The old services-page block (services-main-grid, more-services-grid,
   service-main-card,
   more-service-card, service-cta, plus first passes at industry-grid and
   why-services) lived here. Those components no longer exist in the markup,
   and the industry/why rules were being silently overridden by the newer
   block further down - two definitions of the same class in two places is
   how a fix in one spot stops taking effect. Single definitions now. */

/* ========================================
   Approach Page
   ======================================== */
.comparison {
  background: var(--bg-white);
  padding: 80px 0;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.comparison-traditional,
.comparison-toplead {
  padding: 32px;
  border-radius: var(--radius-lg);
}

.comparison-traditional {
  background: rgba(156, 78, 6, 0.05);
  border: 1px solid rgba(156, 78, 6, 0.1);
}

.comparison-toplead {
  background: var(--bg-beige);
  border: 1px solid rgba(156, 78, 6, 0.2);
}

.comparison-grid h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.comparison-list {
  list-style: none;
}

.comparison-list li {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(156, 78, 6, 0.1);
}

.comparison-list li:last-child {
  border-bottom: none;
}

.comparison-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.comparison-list strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.comparison-list p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.frameworks {
  background: var(--bg-beige);
  padding: 80px 0;
}

.frameworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.framework-card {
  background: var(--bg-white);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 78, 6, 0.15);
  transition: var(--transition);
}

.framework-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.framework-icon {
  width: 64px;
  height: 64px;
  background: rgba(156, 78, 6, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.framework-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--icon);
}

.framework-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.framework-card > p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.framework-card ol {
  margin: 0 0 16px 20px;
}

.framework-card ol li {
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.framework-result {
  padding-top: 16px;
  border-top: 1px solid rgba(156, 78, 6, 0.1);
  font-weight: 600;
  color: var(--text);
}

.how-it-works {
  background: var(--bg-white);
  padding: 80px 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.step-item {
  text-align: center;
  padding: 24px 16px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--accent-button);
  color: var(--surface-white);
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 16px;
}

.step-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.step-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.workflow {
  background: var(--bg-beige);
  padding: 80px 0;
}

.workflow-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-step {
  flex: 0 0 auto;
  width: 140px;
  text-align: center;
}

.workflow-icon {
  width: 56px;
  height: 56px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.5rem;
}

.workflow-content h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.workflow-content p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.workflow-arrow {
  font-size: 1.5rem;
  color: var(--gold);
  flex-shrink: 0;
}

.research-stats {
  background: var(--bg-white);
  padding: 80px 0;
}.stats-comparison{
  display: flex;
  flex-direction: column;
  gap: 24px;
}.stat-comparison-item{
  padding: 20px;
  background: var(--bg-beige);
  border-radius: var(--radius);
}.stat-comparison-item .stat-label{
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}.stat-bar{
  display: flex;
  flex-direction: column;
  gap: 8px;
}.stat-bar-traditional,
.stat-bar-toplead{
  padding: 10px 16px;
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  font-weight: 500;
}.stat-bar-traditional{
  background: rgba(156, 78, 6, 0.15);
  color: var(--text-muted);
}.stat-bar-toplead{
  background: var(--accent-button);
  color: var(--surface-white);
}

.partner-testimonials {
  background: var(--bg-beige);
  padding: 80px 0;
}

/* File upload in forms */
.file-upload {
  position: relative;
}

.file-upload input[type="file"] {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.file-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed rgba(156, 78, 6, 0.3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(156, 78, 6, 0.03);
}

.file-upload-label:hover {
  border-color: var(--gold);
  background: rgba(156, 78, 6, 0.08);
}

.file-upload-label svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold);
}

.file-upload-label span {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ========================================
   Responsive Additional
   ======================================== */
@media (max-width: 1023px) {
  .filter-bar {
    grid-template-columns: repeat(2, 1fr);
  }.jobs-grid,
  .blog-grid,
  .resources-grid,
  .frameworks-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (max-width: 767px) {
  .filter-bar {
    grid-template-columns: 1fr;
  }.jobs-grid,
  .blog-grid,
  .resources-grid,
  .frameworks-grid,
  .comparison-grid{
    grid-template-columns: 1fr;
  }

  .blog-article-body {
    padding: 24px 22px 26px;
  }

  .blog-article-body h3 {
    font-size: 1.25rem;
  }

  .blog-article-media {
    height: 190px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .workflow-timeline {
    flex-direction: column;
  }

  .workflow-arrow {
    transform: rotate(90deg);
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .social-links {
    flex-direction: column;
  }

  .contact-tabs {
    flex-direction: column;
  }
}

/* Exclusive Section */
.exclusive-section {
  padding: 80px 0;
  background: var(--bg-white);
}

.exclusive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.exclusive-card {
  background: var(--bg-cream);
  border: 1px solid rgba(156, 78, 6, 0.3);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.exclusive-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(31, 22, 17, 0.2);
  border-color: var(--gold);
}

.exclusive-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 50%;
  color: white;
}

.exclusive-icon svg {
  width: 32px;
  height: 32px;
}

.exclusive-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.exclusive-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

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

@media (max-width: 480px) {
  .exclusive-grid {
    grid-template-columns: 1fr;
  }
}/* ============================================================
   BLOG POST PAGES + POST CARDS
   ============================================================ */

/* --- Post cards (Tools & Content grid) --- */
.post-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}.post-card{
  /* Một màu nhấn duy nhất cho MỌI thẻ bài viết.
     Bản trước mỗi bài một màu — xanh lá, xanh nước, đỏ, navy — thành ra chín
     thẻ chín hướng, không còn là một bộ. Một sắc nhấn lặp đều mới là nhận
     diện; khác biệt giữa các bài để ảnh bìa lo.
     Dùng var(--gold) nên tự đổi theo nền sáng hay nền tối. */
  --post-accent: var(--gold);
  --post-accent-dark: var(--gold-dark);
  display: flex;
  flex-direction: column;
  background: var(--bg-beige);
  border: 1px solid rgba(156, 78, 6, 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  color: inherit;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(31, 22, 17, 0.18);
  border-color: var(--post-accent);
}.post-card-media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-cream);
}.post-card-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.22));
}.post-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card:hover .post-card-media img {
  transform: scale(1.06);
}.post-card-cat{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--post-accent);
  color: var(--surface-white);
}.post-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
  border-top: 3px solid var(--post-accent);
}.post-card-title{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text);
  margin-bottom: 10px;
  text-wrap: balance;
}.post-card-teaser{
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 18px;
}.post-card-more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--post-accent);
  transition: gap 0.2s ease;
}

.post-card:hover .post-card-more {
  gap: 12px;
}/* --- Reading progress bar --- */
.post-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 2000;
}.post-progress span{
  display: block;
  height: 100%;
  width: 0;
  background: var(--post-accent, var(--gold));
  transition: width 0.1s linear;
}/* --- Post page base --- */
.post-body{
  --post-accent: var(--gold);
  --post-accent-dark: var(--gold-dark);
}.post{
  background: var(--bg-white);
}.post-hero{
  position: relative;
  padding: clamp(120px, 15vw, 148px) 0 52px;
  overflow: hidden;
}.post-back{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--post-accent);
  transition: var(--transition-fast);
}

.post-back:hover {
  opacity: 0.72;
}.post-cat{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--post-accent);
  color: var(--surface-white);
  margin-bottom: 20px;
}.post-title{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  max-width: 20ch;
}.post-meta{
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}.post-meta .dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}/* Dark hero variant */
.post-hero--dark{
  background: var(--bg-warm-brown);
}.post-hero--dark .post-title{
  color: var(--surface-white);
}.post-hero--dark .post-meta{
  color: var(--surface-light);
}.post-hero--dark .post-back{
  color: var(--accent-highlight);
}.post-hero--dark::before{
  content: "";
  position: absolute;
  top: -140px;
  right: -90px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--post-accent), transparent 68%);
  opacity: 0.34;
  pointer-events: none;
}/* Hero signature: pull line */
.post-hero-pull{
  margin-top: 28px;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 600;
  color: var(--post-accent);
  line-height: 1.42;
  max-width: 30ch;
}.post-hero--dark .post-hero-pull{
  color: var(--accent-highlight);
}
/* Cùng chuyện với .post-split-col: câu trích lớn ở hero dùng --text, màu chữ
   của nền sáng, nên trên nền chàm nó trùng đúng màu nền và biến mất. */
.post-hero--dark .post-hero-quote{
  color: var(--surface-white);
}
/* Hero signature: stats */
.post-hero-stats{
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 34px;
}.post-stat b{
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 800;
  color: var(--post-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Bố cục chia đôi chỉ dùng ở bài SME, nên khi hero chuyển sang nền tối nó bị
   bỏ sót: .post-split-col dùng --text và --text-muted, vốn là màu chữ cho nền
   sáng. Trên nền chàm #023441, chữ "SME" trùng đúng màu nền (1.00:1, biến mất
   hẳn) còn dòng mô tả chỉ đạt 1.75:1. Cấp cho nó cùng cặp màu mà .post-meta và
   .post-stat b đang dùng: 6.60:1 và 10.53:1. */
.post-hero--dark .post-split-col b{
  color: var(--accent-highlight);
}
.post-hero--dark .post-split-col span{
  color: var(--surface-light);
}
.post-hero--dark .post-stat b{
  color: var(--accent-highlight);
}.post-stat span{
  display: block;
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 24ch;
  line-height: 1.5;
}.post-hero--dark .post-stat span{
  color: var(--surface-light);
}/* Hero signature: quote */
.post-hero-quote{
  margin: 30px 0 0;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.34;
  color: var(--text);
  max-width: 24ch;
  padding-left: 22px;
  border-left: 4px solid var(--post-accent);
}/* Hero signature: split */
.post-hero-split{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
  max-width: 660px;
}.post-split-col b{
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 8px;
}.post-split-col span{
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}.post-split-vs{
  font-weight: 800;
  color: var(--post-accent);
  font-size: 1rem;
  text-transform: uppercase;
}/* Hero image band */
.post-figure{
  margin: 0;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  overflow: hidden;
  background: var(--bg-cream);
}.post-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}/* Article body */
.post-content{
  max-width: 720px;
  margin: 0 auto;
  padding: 54px 24px 8px;
}.post-lead{
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 26px;
}.post-content p{
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--brand-primary);
  margin-bottom: 20px;
}.post-content h2{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--post-accent);
}.post-content ul{
  margin: 0 0 22px;
  padding-left: 24px;
}.post-content li{
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--brand-primary);
  margin-bottom: 10px;
}.post-content li::marker{
  color: var(--post-accent);
}.post-content strong{
  color: var(--text);
  font-weight: 700;
}.post-refs{
  margin-top: 34px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(156, 78, 6, 0.06);
  background: color-mix(in srgb, var(--post-accent) 8%, transparent);
  border: 1px solid rgba(156, 78, 6, 0.2);
  border-color: color-mix(in srgb, var(--post-accent) 24%, transparent);
}.post-refs-label{
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--post-accent);
  font-weight: 800;
  margin-bottom: 8px;
}.post-refs p{
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}/* Post end / CTA */
.post-end{
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 76px;
}.post-cta-box{
  position: relative;
  overflow: hidden;
  background: var(--bg-warm-brown);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  text-align: center;
}.post-cta-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -30%, var(--post-accent), transparent 60%);
  opacity: 0.42;
  pointer-events: none;
}.post-cta-box h3{
  position: relative;
  color: var(--surface-white);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-wrap: balance;
}.post-cta-box p{
  position: relative;
  color: var(--surface-light);
  margin-bottom: 24px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}.post-cta-actions{
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}.post-cta-actions .btn-primary{
  background: var(--post-accent);
  border: none;
}.post-allposts{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-highlight);
  font-weight: 600;
  padding: 14px 22px;
  border: 1px solid color-mix(in srgb, var(--brand-line) 40%, transparent);
  border-radius: var(--radius);
  transition: var(--transition-fast);
}

.post-allposts:hover {
  background: rgba(239, 168, 74, 0.1);
  border-color: var(--brand-line);
}

@media (max-width: 767px) {
  .post-hero-stats {
    gap: 28px;
  }.post-hero-split{
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 100%;
  }.post-hero-split .post-split-vs{
    display: none;
  }.post-content,
  .post-end{
    padding-left: 20px;
    padding-right: 20px;
  }.post-cta-box{
    padding: 32px 22px;
  }
}


/* ============================================================
   YOU HAVE A GOOD PARTNER (animated count-up)
   ============================================================ */
.partner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-primary-deep) 0%, var(--brand-primary-deep) 100%);
  padding: 100px 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-line) 30%, transparent);
}
.partner-glow {
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 520px;
  /* Cùng một hiệu ứng với .showcase-glow — cùng kích thước, cùng vị trí —
     nhưng trước đây mỗi cái một màu lệch bảng màu và một độ đậm: #D0843A 30%
     ở đây, #FFD85F 18% ở kia. Cả hai nay dùng --accent-highlight #EFA84A với
     cùng độ đậm, nên hai dải cạnh nhau đọc ra như một hệ. */
  background: radial-gradient(ellipse at center, rgba(239,168,74,0.20), transparent 65%);
  pointer-events: none;
}
.partner .section-header { position: relative; z-index: 1; }
.partner .section-header h2 { color: var(--surface-white); }
.partner .section-header p { color: var(--surface-light); }.partner .section-tag.light{ background: rgba(239, 168, 74,0.14); color: var(--accent-highlight); }
.partner-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.partner-stat {
  text-align: center;
  padding: 34px 20px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid color-mix(in srgb, var(--brand-line) 16%, transparent);
  transition: var(--transition);
}
.partner-stat:hover {
  transform: translateY(-6px);
  border-color: var(--gold-light);
  box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}
.partner-num {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--accent-highlight), var(--accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.partner-label {
  color: var(--surface-light);
  font-size: 0.9rem;
  line-height: 1.5;
}
.partner-values {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 44px auto 0;
  max-width: 860px;
}
.partner-value {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid color-mix(in srgb, var(--brand-line) 12%, transparent);
}
.partner-value-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 168, 74,0.12);
}
.partner-value-icon svg { width: 22px; height: 22px; stroke: var(--icon); }
.partner-value h3 { color: var(--surface-white); font-size: 1.05rem; margin-bottom: 4px; }
.partner-value p { color: var(--surface-light); font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .partner-values { grid-template-columns: 1fr; }
}


/* Creative section CTA */
.section-cta { text-align: center; margin-top: 48px; }
.btn-cta-creative {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  color: var(--surface-white);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(31, 22, 17, 0.32);
  transition: var(--transition);
}
.btn-cta-creative svg { width: 20px; height: 20px; stroke: currentColor; transition: transform 0.25s ease; }
.btn-cta-creative:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(31, 22, 17, 0.44); }
.btn-cta-creative:hover svg { transform: translateX(6px); }


/* Image-led section feature */
.section-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 52px;
}
.section-feature-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(156, 78, 6, 0.15);
}
.section-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.section-feature-lead {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.section-feature-sub {
  color: var(--text-muted);
  margin-top: 16px;
  line-height: 1.75;
  font-size: 1.02rem;
}
@media (max-width: 768px) {
  .section-feature, .section-feature.reverse { grid-template-columns: 1fr; gap: 28px; }
  .section-feature.reverse .section-feature-media { order: -1; }
  .section-feature-media { aspect-ratio: 16 / 11; }
}


/* Who we serve */
.serve { background: var(--bg-white); padding: 92px 0; }
.serve-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.serve-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(156, 78, 6, 0.15);
}
.serve-media img { width: 100%; height: 100%; object-fit: cover; }
.serve-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 10px 0 14px; color: var(--text); }
.serve-text p { color: var(--text-muted); line-height: 1.75; margin-bottom: 22px; }
.serve-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.serve-chips span {
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(156, 78, 6, 0.08);
  border: 1px solid rgba(156, 78, 6, 0.18);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Philosophy band */
.philosophy { position: relative; overflow: hidden; background: var(--brand-primary-deep); padding: 84px 0; }
.philosophy-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(239, 168, 74, 0.22), transparent 62%);
  pointer-events: none;
}
.philosophy-inner { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; }
.philosophy-mark {
  display: block;
  margin: 0 auto 22px;
  width: min(420px, 78%);
  height: auto;
  mix-blend-mode: lighten;
}
.philosophy-quote {
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.36;
  color: var(--surface-white);
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .serve-inner { grid-template-columns: 1fr; gap: 28px; }
  .serve-media { aspect-ratio: 16 / 10; }
}/* ============================================================
   Decorative graphics - soft brand blobs + dot texture
   ============================================================ */
.services, .serve, .testimonials, .founders{
  position: relative;
  overflow: hidden;
}.services > .container,
.serve > .container,
.testimonials > .container,
.founders > .container{ position: relative; z-index: 1; }.services::before,
.testimonials::after,
.serve::before,
.founders::after{
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 130, 60, 0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}.services::before{ top: -140px; right: -120px; }.testimonials::after{ bottom: -160px; left: -120px; }
.serve::before { top: -120px; left: -140px; }.founders::after{ bottom: -160px; right: -140px; }

/* Subtle dot texture for the dark partner + philosophy bands */
.partner::after,
.philosophy::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(239, 168, 74, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--surface-dark) 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, var(--surface-dark) 30%, transparent 75%);
}
.partner .container, .philosophy .container { position: relative; z-index: 1; }

/* Feature images: gentle zoom on hover for life */
.section-feature-media img,
.serve-media img { transition: transform 0.6s ease; }
.section-feature:hover .section-feature-media img,
.serve-inner:hover .serve-media img { transform: scale(1.04); }

.contact-value { display: block; }
a.contact-value:hover { color: var(--gold); }

/* Contact section polish */
.contact-details a.contact-value { font-size: 0.95rem; color: var(--text); padding: 1px 0; line-height: 1.45; }
.contact-item > div:last-child { min-width: 0; }
.contact-item .contact-value { word-break: break-word; }
.contact-form .form-group label { color: var(--text); }


/* ============================================================
   TopLead 360 - interactive 3D showcase
   ============================================================ */
/* Đường kẻ ấm ở mép trên hai dải tối liền kề.
   ------------------------------------------------------------------
   Trang chủ có ba dải navy nối nhau (form → showcase → đối tác). Không có gì
   ngăn cách thì cuộn qua như một khối phẳng dài, đúng chỗ trang mất sức nặng.
   Đường kẻ mảnh cùng sắc với gạch nhấn dưới tiêu đề mục, nên vừa tách khối vừa
   lặp lại đúng thủ pháp của cả site chứ không thêm một kiểu trang trí mới. */
.showcase { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--brand-primary), var(--brand-primary-deep)); padding: 100px 0; border-top: 1px solid color-mix(in srgb, var(--brand-line) 30%, transparent); }
.showcase-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(ellipse, rgba(239,168,74,0.20), transparent 65%); pointer-events: none; }
.showcase .section-header { position: relative; z-index: 1; }
.showcase .section-header h2 { color: var(--surface-white); }
.showcase .section-header p { color: var(--surface-light); }.showcase .section-tag.light{ background: rgba(239, 168, 74,0.14); color: var(--accent-highlight); }

.sc-tabs { position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 32px; }
.sc-tab { padding: 10px 22px; border-radius: 50px; border: 1px solid color-mix(in srgb, var(--brand-line) 25%, transparent); background: rgba(255,255,255,0.04); color: var(--surface-light); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: var(--transition); }
.sc-tab:hover { color: var(--surface-white); border-color: var(--gold-light); }
.sc-tab.active { background: linear-gradient(135deg, var(--gold-light), var(--copper)); color: var(--surface-white); border-color: transparent; box-shadow: 0 8px 22px rgba(31, 22, 17,0.4); }

.sc-stage { position: relative; z-index: 1; perspective: 1600px; min-height: 440px; }
.sc-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid color-mix(in srgb, var(--brand-line) 16%, transparent); opacity: 0; transform: rotateY(-14deg) translateZ(-120px) scale(0.96); transform-origin: center; transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1); pointer-events: none; box-shadow: 0 30px 70px rgba(0,0,0,0.42); will-change: transform; }
.sc-panel.active { opacity: 1; transform: rotateY(0) translateZ(0) scale(1); pointer-events: auto; position: relative; }

.sc-media { position: relative; overflow: hidden; min-height: 360px; }
.sc-media img, .sc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(20,15,12,0.55)); }
.sc-badge { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 14px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(20,15,12,0.72); color: var(--accent-highlight); backdrop-filter: blur(var(--blur-soft)); }

.sc-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.sc-body h3 { color: var(--surface-white); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 18px; line-height: 1.3; }
.sc-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.sc-list li { position: relative; padding-left: 24px; color: var(--surface-light); font-size: 0.98rem; line-height: 1.5; }
.sc-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-light); }
.sc-list li strong { color: var(--surface-white); }
.sc-body p { color: var(--surface-light); line-height: 1.7; margin-bottom: 18px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chips span { padding: 6px 14px; border-radius: 50px; background: rgba(239, 168, 74,0.1); border: 1px solid color-mix(in srgb, var(--brand-line) 20%, transparent); color: var(--text-light-muted); font-size: 0.82rem; font-weight: 600; }
.sc-quote { color: var(--surface-light); font-size: 0.98rem; line-height: 1.55; font-style: italic; margin: 0 0 4px; }
.sc-quote-by { color: var(--surface-light); font-size: 0.85rem; margin-bottom: 16px; }
.sc-stars { color: var(--accent-highlight); letter-spacing: 1px; }
.sc-cta { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 13px 26px; border-radius: 50px; background: linear-gradient(135deg, var(--gold-light), var(--copper)); color: var(--surface-white); font-weight: 700; border: none; cursor: pointer; font-size: 0.95rem; text-decoration: none; transition: var(--transition); }
.sc-cta svg { width: 18px; height: 18px; transition: transform 0.25s; }
.sc-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31, 22, 17,0.4); }
.sc-cta:hover svg { transform: translateX(4px); }

@media (max-width: 820px) {
  .sc-stage { min-height: 0; perspective: none; }
  .sc-panel { grid-template-columns: 1fr; position: relative; opacity: 1; transform: none; box-shadow: none; }
  .sc-panel:not(.active) { display: none; }
  .sc-media { min-height: 210px; }
  .sc-body { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-panel { transition: opacity 0.3s ease; transform: none; }
}

/* Philosophy band - redesigned with network graphic */
.philosophy-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.philosophy-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,0.4); border: 1px solid color-mix(in srgb, var(--brand-line) 18%, transparent); }
.philosophy-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; }
.philosophy-text { text-align: left; }
.philosophy-text .philosophy-mark { width: min(320px, 70%); margin: 0 0 20px; }
.philosophy-text .philosophy-quote { text-align: left; }
@media (max-width: 820px) {
  .philosophy-grid { grid-template-columns: 1fr; gap: 28px; }
  .philosophy-text { text-align: center; }
  .philosophy-text .philosophy-mark { margin-left: auto; margin-right: auto; }
  .philosophy-text .philosophy-quote { text-align: center; }
}

/* ============================================================
   HOMEPAGE REDESIGN - shared 4D background, video, display type
   (scoped to the homepage via #bg-canvas / :has where needed)
   ============================================================ */

/* --- Shared interactive canvas: fixed, behind all content --- */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  /* Static dark base so the transparent dark sections stay dark even if
     WebGL/Three.js is unavailable. */
  background: var(--brand-primary-deep);
}
/* Let the fixed canvas show through only on the homepage. Other pages keep
   their own body background (they have no #bg-canvas). */
body:has(#bg-canvas) { background: transparent; }

/* --- Scoped 4D field: the same particle background as the homepage, sized to
   a single band. Used for the inner-page heroes and the CTA strip above the
   footer so every page opens and closes like the landing page. The canvas is
   injected by background.js and is transparent, so each band keeps its own
   gradient underneath as the no-WebGL fallback. --- */
.fx-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Bands that need a stacking context of their own to host the field */
.newsletter-section {
  position: relative;
  overflow: hidden;
}

/* A CTA band now ends on the footer's exact colour, so the footer's divider
   would draw a line straight through the blend. */
.cta-banner + .footer,
.newsletter-section + .footer {
  border-top: none;
}

/* Additive particles brighten whatever they sit on, which would re-draw the
   seam at the very bottom of a CTA band. Fade the field out before the join. */
.cta-banner .fx-panel,
.newsletter-section .fx-panel {
  -webkit-mask-image: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark) 58%, transparent 94%);
  mask-image: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark) 58%, transparent 94%);
}/* Content always rides above the field */
.page-hero .container,
.post-hero .container,
.cta-banner-content,
.newsletter-content,
.post-cta-box h3,
.post-cta-box p,
.post-cta-actions{
  position: relative;
  z-index: 1;
}

img, video { max-width: 100%; }

/* Đã gỡ dòng ':root { --font-display: var(--font); }' từng nằm ở đây.
   Đó là tàn dư từ thời site dùng một mặt chữ duy nhất là Plus Jakarta Sans.
   Nó nằm SAU khối token ở đầu file nên thắng theo thứ tự nguồn, và âm thầm vô
   hiệu hoá Bricolage Grotesque — mọi tiêu đề rơi hết về font thân bài. */
.hero-headline,
.page-hero-title,
.section-header h2,
.partner-num,
.philosophy-quote,
.post-title,
.cine-caption{
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* --- Hero: full-bleed muted video with a dark scrim for legible text --- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(1, 42, 52,0.72) 0%, rgba(1, 42, 52,0.82) 55%, rgba(13,13,13,0.9) 100%);
}
.hero > .container { position: relative; z-index: 2; }
.hero .hero-dots, .hero .scroll-indicator { z-index: 3; }

/* --- Dải tối chuyển sang bán trong suốt để lộ nền hạt phía sau. Độ đục giữ đủ
   cao để chữ sáng vẫn đạt WCAG-AA.

   Ba lớp phủ này TỪNG dùng rgba(31,22,17) — tức --surface-dark, một màu nâu
   ẤM. Nhưng nền hạt phía sau là chàm #012A34, và mọi dải tối khác trên trang
   (hero, form nhanh, chân trang) cũng là chàm. Trộn nâu ấm 74% lên chàm cho ra
   #171B1A: một mảng xám-đen trung tính, không thuộc hệ màu nào của trang. Đo
   trên trình duyệt đúng bằng con số đó, và đây chính là chỗ chủ dự án thấy
   "lạc quẻ" ở hai khối TopLead 360 độ và Đối tác.

   Nay dùng đúng cặp màu mà chính hai khối này khai khi KHÔNG có canvas —
   --brand-primary và --brand-primary-deep — chỉ thêm độ trong. Nền hạt vẫn lộ
   qua y như cũ, nhưng dải hoà vào cùng một hệ chàm với phần còn lại. --- */
body:has(#bg-canvas) .showcase   { background: linear-gradient(165deg, rgba(2, 52, 65,0.74), rgba(1,42,52,0.82)); }
body:has(#bg-canvas) .partner    { background: linear-gradient(160deg, rgba(1, 42, 52,0.74) 0%, rgba(1, 42, 52,0.86) 100%); }
body:has(#bg-canvas) .philosophy { background: rgba(1, 42, 52,0.76); }

/* --- Pill CTAs with magnetic hover (JS drives the transform) --- */
.hero .btn-primary {
  border-radius: 999px;
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* --- Scroll-reveal stagger tightened to ~80ms per child (per spec) --- */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }

/* --- Cinematic mid-page video strip (parallax handled in background.js) --- */
.cine-strip {
  position: relative;
  /* Nền tối phải có sẵn, không chờ video. Trước đây màu nền chỉ được đặt trong
     nhánh @media giảm chuyển động, còn ở chế độ thường thì dải này trông cậy
     hoàn toàn vào <video> phủ kín. Trong lúc video chưa vẽ xong — hoặc nếu nó
     tải hỏng, bị chặn — nền trắng của trang lộ ra và chữ trắng bên trên biến
     mất hẳn. Video vẫn vẽ đè lên màu này nên nhìn không đổi gì. */
  background-color: var(--brand-primary-deep);
  height: min(58vh, 440px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
  transform: scale(1.18);
}
.cine-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(31, 22, 17,0.8), rgba(31, 22, 17,0.45) 50%, rgba(31, 22, 17,0.8));
}
.cine-caption {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  text-align: center;
  color: var(--surface-white);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.32;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}

/* --- Reduced motion: drop autoplaying video, fall back to a still poster --- */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .cine-video { display: none; }
  .cine-strip { background: var(--brand-primary-deep) url('assets/images/our-belief.jpg') center/cover no-repeat; }
}

/* ============================================================
   HOMEPAGE - ONE CONTINUOUS DARK CANVAS
   Removes the light/dark banding & hard seams so scrolling feels
   like a single evolving scene. All scoped to the homepage
   (only index.html has #bg-canvas) so other pages are untouched.
   ============================================================ */

/* Kill hard section seams / dividers */
body:has(#bg-canvas) .hero { border-bottom: none; }
body:has(#bg-canvas) .logos { border-top: none; border-bottom: none; }/* Every content section becomes transparent so the shared field runs
   unbroken from top to bottom (the dark "moments" showcase/partner/
   philosophy keep their darker semi-transparent scrim for depth). */
body:has(#bg-canvas) .founders{ background: transparent; }
/* .logos deliberately keeps its own band. Partner logos are mostly dark marks on
   a transparent file, so running the dark field through this strip left them
   invisible - the one place where breaking the shared field is the right call. */

/* Headings & eyebrows go light on the dark canvas */
body:has(#bg-canvas) .section-header h2,

body:has(#bg-canvas) .section-header p { color: var(--surface-light); }
/* Trước đây chỗ này tô cứng --accent-highlight cho MỌI nhãn mục trên trang
   có canvas. Nhưng không phải khối nào trên các trang đó cũng tối: nhãn nằm
   trên nền kem thành vàng-trên-kem, chỉ 1.61:1 — gần như không đọc được.
   --tag-ink vốn đã biết ngữ cảnh (nhóm khối tối ở đầu file đổi nó sang bậc
   sáng), nên trả lại cho nó: nền tối vẫn vàng sáng, nền kem thành 6.74:1. */
body:has(#bg-canvas) .section-tag {
  background: rgba(239, 168, 74,0.14);
  color: var(--tag-ink);
  border: 1px solid color-mix(in srgb, var(--brand-line) 22%, transparent);
}/* Founders: beige cards -> dark glass, light text */
body:has(#bg-canvas) .founder-card{
  background: rgba(30,22,16,0.55);
  border-color: color-mix(in srgb, var(--brand-line) 16%, transparent);
  box-shadow: 0 22px 50px rgba(0,0,0,0.38);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
}body:has(#bg-canvas) .founder-card h3{ color: var(--surface-white); }body:has(#bg-canvas) .founder-role{ color: var(--text-light-muted); }body:has(#bg-canvas) .founder-quote{ color: var(--surface-light); }body:has(#bg-canvas) .founder-exp li{ color: var(--surface-light); }body:has(#bg-canvas) .founder-contact-link span{ color: var(--surface-light); }body:has(#bg-canvas) .founder-contact-link svg{ stroke: var(--accent-highlight); }

/* No homepage override for the logo strip: it uses the same flat band as every
   other page. The old dark-glass chip sat at opacity 0.85, which dimmed the
   partner marks themselves on top of hiding them against the dark field. */

/* Contact keeps its own light section: the dark field ran behind a white form
   card and light text, which left the block reading as two unrelated halves. */



body:has(#bg-canvas) a.contact-value:hover { color: var(--accent-highlight); }



/* will-change only on the elements that actually animate on scroll */
body:has(#bg-canvas) .animate-on-scroll { will-change: transform, opacity; }

/* ============================================================
   POLISH PASS - typography roles, focus, click-safety, header
   ============================================================ */

/* --- Task 1: responsive display/heading scale (does not touch layout JS) --- */
.hero .hero-headline {
  font-size: clamp(2.25rem, 5vw, 4.5rem);   /* h1: 36 -> 72px */
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.section-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.25rem); /* h2: 30 -> 36px */
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* The hero carries itself on type alone - no buttons, no extra furniture - so
   the title has to be genuinely display-scale, not body copy that happens to be
   bold. 800 is the heaviest weight loaded, and at this size a slightly tighter
   track keeps the word reading as one solid mass. */
.page-hero-title {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
/* Keep prose readable - cap measure, never letter-space body copy */
.section-header p { max-width: 62ch; margin-inline: auto; }
p { letter-spacing: normal; }

/* --- Task 3: guarantee a visible focus ring on every interactive element --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn-primary:focus-visible,
.btn-cta:focus-visible,
.btn-submit:focus-visible,
.btn-magnetic:focus-visible,
.lang-btn:focus-visible,
.hero-dot:focus-visible,
.tab-btn:focus-visible,
.contact-tab:focus-visible,
.sc-tab:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Task 3: decorative overlays must never intercept clicks --- */
.hero-bg,
.hero-video,
.hero-overlay,
.hero-grid,
.hero-circle,
.cine-video,
.cine-overlay,
.partner-glow,
.showcase-glow,
.philosophy-bg,
.page-hero .hero-bg {
  pointer-events: none;
}

/* Mobile menu text stays readable on its dark panel in all states */
.nav-links.active a { color: var(--surface-white); }

/* --- Task 4: homepage header = dark glass (matches the atmospheric hero) --- */
body:has(#bg-canvas) .navbar.scrolled {
  background: rgba(31, 22, 17, 0.72);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  border-bottom-color: color-mix(in srgb, var(--brand-line) 16%, transparent);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
body:has(#bg-canvas) .navbar.scrolled .nav-links > a:not(.btn-cta),
body:has(#bg-canvas) .navbar.scrolled .nav-dropdown-trigger { color: var(--surface-white); }
body:has(#bg-canvas) .navbar.scrolled .nav-links > a:not(.btn-cta):hover,
body:has(#bg-canvas) .navbar.scrolled .nav-dropdown:hover .nav-dropdown-trigger,
body:has(#bg-canvas) .navbar.scrolled .nav-links > a.active:not(.btn-cta),
body:has(#bg-canvas) .navbar.scrolled .nav-dropdown-trigger.active { color: var(--gold-light); }
body:has(#bg-canvas) .navbar.scrolled .logo-text-top,
body:has(#bg-canvas) .navbar.scrolled .logo-text-bottom { color: var(--surface-white); }

/* ============================================================
   AWARD PASS - Sections A/B/C/D redesign + global depth/polish
   ============================================================ */

/* --- Global ghost/secondary button (reusable across sections) --- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 24px;
  border: 1px solid color-mix(in srgb, var(--brand-line) 50%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--surface-white);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-ghost:hover {
  background: rgba(239, 168, 74, 0.10);
  border-color: var(--brand-line);
  transform: translateY(-1px);
}

/* --- Global image-card hover zoom --- */
.philosophy-media { overflow: hidden; }
.philosophy-media img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.philosophy-media:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------------
   Philosophy media - the film panel
   The quote says people are the engine, not a cost, so the panel shows
   people rather than a stock graphic. Three pieces sit over the footage:
   a scrim that keeps the lower half readable, the TopLead mark pressed
   in like a seal on a document, and a caption that signs the claim.
   ------------------------------------------------------------------ */
.philosophy-media {
  position: relative;
  margin: 0;              /* it is a <figure> now */
  isolation: isolate;     /* keeps the scrim and seal off the page's stacking */
}

/* Four real photos in rotation rather than one static frame, so the panel
   still reads as a slice of life rather than a single staged shot. */
.phil-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.phil-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  opacity: 0;
  transition: opacity 1.1s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.phil-slide.is-active {
  opacity: 1;
}

.phil-dots {
  position: absolute;
  top: clamp(14px, 2.2vw, 22px);
  left: clamp(18px, 3vw, 28px);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.phil-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.phil-dot.is-active {
  width: 20px;
  background: var(--gold-light, var(--accent-highlight));
}

/* Dark at the foot, clear at the top: the caption gets its contrast without
   dimming the faces in the frame. */
.phil-media-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(31, 22, 17, 0.88) 0%, rgba(31, 22, 17, 0.45) 26%, rgba(31, 22, 17, 0) 55%),
    linear-gradient(to bottom, rgba(31, 22, 17, 0.45) 0%, transparent 30%);
}

/* The mark, pressed into the top corner like a seal. */
.phil-seal {
  position: absolute;
  top: clamp(14px, 2.2vw, 22px);
  right: clamp(14px, 2.2vw, 22px);
  width: clamp(52px, 7vw, 68px);
  height: clamp(52px, 7vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 15, 11, 0.42);
  border: 1px solid color-mix(in srgb, var(--brand-line) 45%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.phil-seal img {
  width: 58%;
  height: auto;
  opacity: 0.92;
}

.phil-media-caption {
  position: absolute;
  left: clamp(18px, 3vw, 28px);
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 26px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--surface-cream);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.phil-caption-rule {
  flex-shrink: 0;
  width: clamp(22px, 4vw, 40px);
  height: 2px;
  background: var(--gold-light, var(--accent-highlight));
}

/* Auto-advancing slides is exactly what reduced-motion asks us not to do;
   script.js stops the rotation and the first photo stands in as a still. */
@media (prefers-reduced-motion: reduce) {
  .phil-slide { transition: none; }
  .philosophy-media:hover img { transform: none; }
}

/* ---------- SECTION A - Philosophy editorial panel ---------- */
.philosophy-grid { align-items: center; }
.philosophy-media {
  aspect-ratio: 4 / 5;
  transform: rotate(-1.5deg);
  border: 1px solid color-mix(in srgb, var(--brand-line) 20%, transparent);
  box-shadow: 0 0 80px color-mix(in srgb, var(--brand-line) 8%, transparent), 0 26px 60px rgba(0, 0, 0, 0.45);
}
.philosophy-media img { aspect-ratio: 4 / 5; }
.philosophy-text { position: relative; z-index: 2; }
.phil-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--accent-highlight);
}
.phil-accent-line {
  display: block;
  width: 2px;
  height: 60px;
  margin: 16px 0 20px;
  background: linear-gradient(to bottom, var(--accent-highlight), transparent);
}
.philosophy-text .philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
}
.phil-body {
  margin-top: 18px;
  max-width: 44ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}
.philosophy-text .btn-ghost { margin-top: 28px; }
@media (min-width: 821px) {
  .philosophy-text { margin-left: -24px; }  /* subtle overlap = depth */
}

/* ---------- SECTION B - Partner stats: featured grid ---------- */
.partner .section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.partner .section-header p { max-width: 52ch; margin-inline: auto; }
.partner-stat {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.partner-num { font-family: var(--font-display); }
.partner-label { max-width: 22ch; margin-inline: auto; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.55); }
.partner-cur {
  font-size: 0.5em;
  vertical-align: 0.55em;
  -webkit-text-fill-color: var(--accent-highlight);
  color: var(--accent-highlight);
  margin-left: 3px;
}
.partner-stat.featured {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid color-mix(in srgb, var(--brand-line) 60%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--brand-line) 15%, transparent), inset 0 0 20px color-mix(in srgb, var(--brand-line) 5%, transparent);
}
.partner-stat.featured .partner-num { font-size: clamp(3.4rem, 8vw, 6rem); }
/* connect the two rows without disconnecting them */
.partner-values { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 40px; }
.partner-value {
  padding: 28px 32px;
  border-left: 2px solid color-mix(in srgb, var(--brand-line) 40%, transparent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}
.partner-value:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.05); border-left-color: var(--brand-line); }
.partner-value-icon { width: 48px; height: 48px; }
.partner-value h3 { font-size: var(--text-xl); }
.partner-value p { font-size: var(--text-base); }

/* ---------- SECTION C - Cinematic video strip ---------- */
.cine-strip {
  height: clamp(320px, 42vw, 560px);
  display: block;
  overflow: hidden;
}
.cine-video { object-position: center center; }
.cine-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.30) 100%);
}
.cine-strip::before,
.cine-strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 96px;
  z-index: 1;
  pointer-events: none;
}
.cine-strip::before { top: 0; background: linear-gradient(to bottom, var(--surface-dark), transparent); }
.cine-strip::after { bottom: 0; background: linear-gradient(to top, var(--surface-dark), transparent); }
.cine-content {
  position: absolute;
  z-index: 2;
  bottom: 15%;
  left: clamp(24px, 8vw, 120px);
  right: clamp(24px, 8vw, 120px);
  max-width: 640px;
  text-align: left;
}
.cine-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--accent-highlight);
  margin-bottom: 12px;
}
.cine-strip .cine-caption {
  position: static;
  margin: 0;
  padding: 0;
  max-width: 16ch;
  text-align: left;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--surface-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.cine-cta-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.cine-line { width: 48px; height: 2px; background: var(--accent-highlight); flex-shrink: 0; }

/* ---------- SECTION D - Footer emerges from the page ---------- */
.footer {
  background: var(--footer-bg);        /* near page-dark warm tint, not brown */
  border-top: none;
  padding: clamp(80px, 8vw, 112px) 0 48px;
}
/* No fade above the footer anywhere now. It existed for when the homepage
   footer rose straight out of the dark particle field; with the contact section
   above it opaque and light, the gradient ran from transparent to near-black
   over a pale ground and read as a grey smear. A clean edge is correct here -
   the same as every inner page. */
.footer-links h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; }
.footer-links a { font-size: var(--text-sm); transition: color 0.2s ease; }
.footer-emails a {
  display: block;
  text-align: left;
  text-indent: 0;
  padding-left: 0;
  word-break: break-word;
  font-size: var(--text-sm);
}
/* Dòng bản quyền: ở độ mờ 0.40 chữ kem hoà vào nền chàm còn 3.27:1, dưới
   ngưỡng 4.5:1 cho cỡ chữ 12px. 0.58 cho 5.3:1 mà vẫn lùi lại phía sau. */
.footer-bottom p { font-size: var(--text-xs); color: rgba(246, 238, 227, 0.58); }
/* Footer social marks keep their native brand colours */
.social-box img {
  filter: none;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   "YOU HAVE A GOOD PARTNER" - 4 uniform, balanced stat boxes
   (equal size + one clean design; 48h keeps only a subtle accent)
   ============================================================ */
.partner-grid { gap: 20px; align-items: stretch; }
.partner-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 34px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}
/* Same number size for ALL four boxes */
.partner-stat .partner-num,
.partner-stat.featured .partner-num {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  margin-bottom: 10px;
}
.partner-stat .partner-label { max-width: 20ch; }
.partner-cur { vertical-align: 0.48em; }
/* Featured (48h): whisper of emphasis, NOT a size change */
.partner-stat.featured {
  background: rgba(255, 255, 255, 0.045);
  border-color: color-mix(in srgb, var(--brand-line) 35%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22), 0 0 0 1px color-mix(in srgb, var(--brand-line) 8%, transparent);
}
@media (max-width: 760px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONVERGENCE (approach.html)
   Two flows - one from each side - moving toward a meeting point.
   Section 1 sets them against each other, section 2 walks them
   together, section 3 guards the join. Scoped to .cv so none of
   it can leak into the rest of the site.
   ============================================================ */
/* Thu hẹp về .cv-band và .cv.
   Trước đây khối này ghi thẳng vào :root, trong khi chú thích ngay trên còn
   ghi "scoped to .cv so none of it can leak". :root là phạm vi TOÀN TRANG nên
   nó rò ra đúng những nơi nó nói là không rò: .logo-item ở trang chủ,
   .read-progress ở trang bài viết, .ind-card ở trang Dịch vụ. */
.cv-band,
.cv {
  /* The gold that reads on dark ground. --gold/--gold-light are copper
     tones meant for light backgrounds and would sink into this. */
  /* Nhập vào hệ nhấn chung thay vì giữ một màu riêng: --gold tự đổi theo nền
     sáng hay tối nên khối này luôn cùng tông với phần còn lại của trang. */
  --cv-gold: var(--gold);
  --cv-gold-hi: var(--accent-highlight);
  --cv-ink: var(--surface-dark);
  --cv-text: var(--surface-cream);
  --cv-dim: var(--surface-light);
  --cv-mute: var(--text-muted);
  --cv-line: rgba(239, 168, 74, 0.22);
  --cv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cv {
  position: relative;
  /* No background of its own - the three sit on one continuous ground painted
     by .cv-band below, so the run reads as a single surface rather than three
     slabs butted together. */
  background: transparent;
  color: var(--cv-text);
  padding: 80px 0;
  overflow: hidden;
}
.cv .section-header h2 { color: var(--surface-white); }
.cv .section-header > p { color: var(--cv-dim); }
.cv .section-tag {
  background: rgba(239, 168, 74, 0.14);
  border-color: color-mix(in srgb, var(--brand-line) 30%, transparent);
  color: var(--cv-gold);
}
.cv a { color: var(--cv-gold); }
.cv a:focus-visible,
.cv [tabindex]:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 3px; border-radius: 4px; }/* ---------- Section 1: the comparison ---------- */
.cmp-stage{
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 74px 0 24px;
  --split: 50%;
}/* Two illustrations carry the contrast: an anonymous crowd on one side,
   many hands meeting over a map on the other. */
.cmp-art{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 30px;
}.cmp-fig{
  margin: 0;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}.cmp-fig img{ display: block; width: 100%; height: 100%; object-fit: cover; }/* the traditional image is drained of colour - it is the one being argued against */
.cmp-fig--trad img{ filter: grayscale(1) contrast(0.9) brightness(0.72); }.cmp-fig--tl{ border-color: color-mix(in srgb, var(--brand-line) 45%, transparent); }.cmp-fig--tl img{ filter: saturate(1.05); }.cmp-heads{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 22px;
}.cmp-head{
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}.cmp-head--trad{ color: var(--text-muted); text-align: right; padding-right: 24px; }.cmp-head--tl{ color: var(--gold); padding-left: 24px; }.cmp-rows{ position: relative; list-style: none; margin: 0; padding: 0; }.cmp-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid rgba(156, 78, 6, 0.20);
}.cmp-row:last-child{ border-bottom: 1px solid rgba(156, 78, 6, 0.20); }.cmp-cell{ margin: 0; font-size: 0.98rem; line-height: 1.55; transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }.cmp-cell--trad{
  color: var(--text-muted);
  text-align: right;
  padding-right: 24px;
  /* a thin rule through it instead of a cross emoji */
  text-decoration: line-through;
  /* #C47868 là một sắc hồng cam không thuộc bảng màu — sắc duy nhất còn lạc
     hệ sau đợt dọn. --error-text giữ đúng ý "gạch bỏ" mà vẫn nằm trong hệ. */
  text-decoration-color: color-mix(in srgb, var(--error) 50%, transparent);
  text-decoration-thickness: 1px;
}.cmp-cell--tl{
  color: var(--surface-cream);
  font-weight: 500;
  padding-left: 24px;
  /* grid (not flex+baseline): keeps the bullet pinned beside the heading's
     first line even though the detail text below makes the cell tall */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}.cmp-mark{
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-line) 60%, transparent);
}/* rows 1,3,4,5 put the bullet, heading and detail as three direct grid items;
   keep the detail in column 2 (under the heading), never under the bullet.
   Row 2 wraps its text in <a>, so its detail isn't a grid item - unaffected. */
.cmp-cell--tl > .cmp-detail{ grid-column: 2; }/* dragging shifts which side carries the weight */
.cmp-stage .cmp-cell--trad,
.cmp-stage .cmp-head--trad{ opacity: calc(0.35 + (100% - var(--split)) / 100 * 0.9); }.cmp-stage .cmp-cell--tl,
.cmp-stage .cmp-head--tl{ opacity: calc(0.35 + var(--split) / 100 * 0.9); }.cmp-stage .cmp-fig--tl{ opacity: calc(0.32 + var(--split) / 100 * 0.85); }.cmp-stage .cmp-fig--trad{ opacity: calc(0.32 + (100% - var(--split)) / 100 * 0.85); }.cmp-divider{
  position: absolute;
  top: 56px;
  bottom: 8px;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  cursor: grab;
  touch-action: none;
  z-index: 3;
}.cmp-divider:active{ cursor: grabbing; }.cmp-grip{
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--surface-white);
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-line) 40%, transparent);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cmp-divider:hover .cmp-grip,
.cmp-divider:focus-visible .cmp-grip { transform: rotate(45deg) scale(1.18); box-shadow: 0 0 24px color-mix(in srgb, var(--brand-line) 65%, transparent); }
.cmp-divider:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 767px) {
  .cmp-stage { padding-top: 20px; --split: 50%; }.cmp-divider{ display: none; }.cmp-art{ gap: 12px; margin-bottom: 22px; }.cmp-fig{ opacity: 1 !important; }.cmp-heads{ display: none; }.cmp-row{ grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }.cmp-cell--trad, .cmp-cell--tl{ text-align: left; padding: 0; opacity: 1 !important; }.cmp-cell--trad::before, .cmp-cell--tl::before{
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 3px;
    text-decoration: none;
  }.cmp-cell--trad::before{ content: "Truyền thống"; color: var(--text-muted); }.cmp-cell--tl::before{ content: "TopLead"; color: var(--gold); }.cmp-cell--tl{ display: block; }.cmp-cell--tl .cmp-mark{ display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cv *, .cv *::before, .cv *::after { transition: none !important; animation: none !important; }
}

/* ---------- Section 3: what guards the join ---------- */
.ex-stack { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }

.ex-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: var(--radius-lg);
  background: rgba(31, 22, 17, 0.34);
  transition: border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-card:hover { border-color: color-mix(in srgb, var(--brand-line) 40%, transparent); }
.ex-card--flip .ex-visual { order: 2; }      /* alternate the alignment */
.ex-card.is-open { border-color: var(--gold); background: rgba(31, 22, 17, 0.55); }

.ex-visual { display: flex; align-items: center; justify-content: center; }
.ex-mini { width: 100%; max-width: 220px; height: auto; }

.ex-role {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); opacity: 0.75; margin-bottom: 10px;
}
.ex-body h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--surface-white); margin-bottom: 4px; }
.ex-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 12px; }
.ex-summary { color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; max-width: 58ch; }

.ex-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: 50px;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-toggle:hover { background: rgba(239, 168, 74, 0.1); border-color: var(--gold); }
.ex-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ex-card.is-open .ex-toggle::after { transform: rotate(-135deg) translate(-3px, -3px); }

/* --- expanded panel --- */
.ex-panel {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 26px;
  /* Room for the close button, which is absolute and so does not push content
     down on its own. Without this it lands on top of whatever the panel opens
     with - the funnel, the pillars, the timeline. */
  padding-top: 58px;
  border-top: 1px solid rgba(156, 78, 6, 0.20);
}
.ex-close {
  position: absolute; top: 12px; right: 0;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-close:hover { border-color: var(--gold); background: rgba(239, 168, 74, 0.1); }
.ex-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* funnel: bar width is proportional to how many candidates remain */
.ex-funnel { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ex-funnel li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 13px 18px;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: var(--radius-sm);
  width: var(--w);
  min-width: 300px;
  background: linear-gradient(90deg, rgba(239, 168, 74,0.12), rgba(239, 168, 74,0.02));
  transition: border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-funnel li:hover { border-color: var(--gold); transform: translateX(4px); }
.ex-l-name { font-weight: 600; color: var(--surface-cream); font-size: 0.95rem; }
.ex-l-num { font-size: 1.15rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.ex-l-num i { font-style: normal; opacity: 0.5; margin: 0 3px; }
.ex-l-pct { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.ex-l-desc { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.ex-note {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
}

/* three pillars of light */
.ex-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ex-pillar {
  padding: 20px;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(239, 168, 74,0.09), transparent 70%);
  transition: border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-pillars:hover .ex-pillar { opacity: 0.45; }
.ex-pillars .ex-pillar:hover { opacity: 1; border-color: var(--gold); }
.ex-pillar h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.05rem; color: var(--surface-white); margin-bottom: 10px; }
.ex-p-n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); opacity: 0.7; }
.ex-pillar p { font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); }

/* 90-day timeline */
.ex-timeline { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.ex-timeline::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 7px;
  height: 1px; background: linear-gradient(90deg, var(--gold), rgba(239, 168, 74,0.25));
}
.ex-timeline li { position: relative; padding-top: 26px; }
.ex-timeline li::before {
  content: ""; position: absolute; top: 2px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--brand-line) 70%, transparent);
}
.ex-tl-d { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.ex-tl-t { display: block; font-weight: 600; color: var(--surface-cream); margin-bottom: 4px; }
.ex-tl-x { display: block; font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; }

/* mini previews */
.ex-mini .ex-fn { fill: rgba(239, 168, 74,0.14); stroke: var(--icon); stroke-width: 1.2; }
.ex-mini .ex-mini-a, .ex-mini .ex-mini-b { fill: var(--gold); font-size: 20px; font-weight: 800; text-anchor: middle; }
.ex-mini .ex-pil rect { fill: rgba(239, 168, 74,0.2); stroke: var(--icon); stroke-width: 1.2; animation: exPulse 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes exPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.ex-mini .ex-beam { stroke: var(--icon); stroke-width: 2; }
.ex-mini .ex-rail { stroke: rgba(239, 168, 74,0.4); stroke-width: 1.5; }
.ex-mini .ex-tick { fill: var(--icon); }
.ex-mini .ex-tick-l { fill: var(--text-muted); font-size: 13px; text-anchor: middle; }

@media (max-width: 900px) {
  .ex-card { grid-template-columns: 1fr; gap: 20px; }
  .ex-card--flip .ex-visual { order: 0; }
  .ex-visual { justify-content: flex-start; }
  .ex-mini { max-width: 170px; }
  .ex-pillars, .ex-timeline { grid-template-columns: 1fr; }
  .ex-timeline::before { display: none; }
  .ex-funnel li { width: auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-mini .ex-pil rect { animation: none; opacity: 0.85; }
}

/* Each step carries a photograph of that moment, so the journey is grounded
   in real work rather than abstract shapes alone. */
.jr-photo {
  margin: 0 0 18px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(156, 78, 6, 0.20);
  aspect-ratio: 3 / 2;
  max-width: 340px;
}
.jr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-card .jr-num { font-size: clamp(52px, 6vw, 84px); margin-bottom: 4px; }
@media (max-width: 767px) {
  .jr-photo { max-width: 100%; }
}

/* ============================================================
   CONVERGENCE - presence pass
   The three sections read as one continuous descent: each gets its
   own depth, the type carries more weight, and the gold is spent on
   a few accents rather than spread thin.
   ============================================================ */

/* A soft warm pool behind each section keeps the three from reading
   as flat black slabs stacked on each other. */
.cv::before { content: none; }
.cv > .container { position: relative; z-index: 1; }

/* Headings carry the section. Larger, tighter, with the eyebrow tag
   sitting closer so the block reads as one unit. */
.cv .section-header { margin-bottom: clamp(38px, 5vw, 60px); }
.cv .section-header h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-bottom: 14px;
}
.cv .section-header > p { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 54ch; margin-inline: auto; }
.cv .section-tag { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }/* --- Section 1 --- */
.cmp-fig{ aspect-ratio: 4 / 3; }.cmp-fig--tl{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-line) 25%, transparent), 0 24px 60px rgba(0,0,0,0.5); }.cmp-head{ font-size: 0.86rem; }.cmp-row{ padding: 19px 0; }.cmp-cell{ font-size: 1.04rem; }.cmp-cell--tl{ font-weight: 600; }/* the winning side gets a faint warm wash so the eye lands there first */
.cmp-rows::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%; right: 0;
  background: linear-gradient(90deg, rgba(239, 168, 74,0.05), transparent 60%);
  pointer-events: none;
}.cmp-grip{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* --- Section 2 --- */
.jr-photo { max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.jr-card h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; }
.jr-num {
  font-size: clamp(60px, 7vw, 104px);
  -webkit-text-stroke-width: 1.5px;
  opacity: 0.4;
}
.jr-desc { font-size: 1.06rem; }
.jr-chip { font-size: 0.78rem; padding: 6px 16px; }

.jr-curve { stroke-width: 2.5; }
.jr-curve--a { stroke: url(#jrFadeA); opacity: 1; }
.jr-curve--b { stroke: url(#jrFadeB); opacity: 1; }
.jr-flowdots circle { fill: var(--icon); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-line) 90%, transparent)); }
.jr-wp { fill: var(--surface-dark); stroke: var(--icon); stroke-width: 1.5; opacity: 0.55; }
.jr-wp.is-on {
  fill: var(--icon);
  opacity: 1;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-line) 95%, transparent));
}
.jr-end { font-size: 14px; font-weight: 600; letter-spacing: 0.2em; }
.jr-dot { width: 10px; height: 10px; }
.jr-dot.is-active { width: 30px; }

/* --- Section 3 --- */
.ex-card { padding: clamp(28px, 3.4vw, 44px); }
.ex-body h3 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); letter-spacing: -0.02em; }
.ex-sub { font-size: 1rem; font-weight: 600; }
.ex-summary { font-size: 1.04rem; }
.ex-role { font-size: 0.7rem; }
.ex-toggle { font-size: 0.92rem; padding: 11px 24px; }
/* a hairline of gold down the leading edge ties the three cards together */
.ex-card { position: relative; overflow: hidden; }
.ex-card::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.5;
  transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), bottom 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-card:hover::before, .ex-card.is-open::before { opacity: 1; top: 6%; bottom: 6%; }
.ex-l-num { font-size: 1.3rem; }

@media (max-width: 767px) {
  .cmp-rows::after { display: none; }
  .cv .section-header h2 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
}

/* The step control lives on the curve itself: each waypoint is the button for
   its own step, so the marker you click is the marker that lights up. The
   separate row of dots is kept only where the curve is static (phones). */
.jr-wp--hit { cursor: pointer; }
.jr-wp--hit:hover { fill: var(--gold); opacity: 0.85; }
.jr-wp--hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* a wider invisible target than the 6px dot, so it is easy to hit */
.jr-wp--hit { stroke-width: 8; stroke: transparent; paint-order: stroke; }
.jr-wp--hit.is-on { stroke: transparent; }

@media (min-width: 768px) {
  .jr-dots { display: none; }
  .jr-card { inset: 0; }
}

/* With motion turned down the rotation never runs, so every step has to be
   present at once - otherwise the reader is stranded on step 01. Same
   treatment the phone layout gets. */
@media (prefers-reduced-motion: reduce) {
  .jr-layout { display: block; }
  .jr-col { min-height: 0; }
  .jr-col--art { margin-bottom: 28px; }
  .jr-panel { min-height: 0; }
  .jr-card {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 26px 0;
    border-top: 1px solid rgba(156, 78, 6, 0.20);
  }
  .jr-photo { max-width: 320px; }
  .jr-dots { display: none; }
}/* ============================================================
   Section 1 - the drag has to pay for itself
   At rest the two headlines sit side by side. Push the divider
   toward a side and that side's reasoning opens up, while the
   other recedes. That is the whole point of the control: it buys
   the reader detail, not decoration.
   ============================================================ */
.cmp-detail{
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 400;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}.cmp-detail--trad{ color: var(--text-muted); }.cmp-detail--tl{ color: var(--text-muted); }/* Divider removed: the comparison is now a static two-column read. Both sides
   stay fully lit and every detail is shown without any dragging. */
.cmp-stage .cmp-cell--trad,
.cmp-stage .cmp-head--trad,
.cmp-stage .cmp-cell--tl,
.cmp-stage .cmp-head--tl,
.cmp-stage .cmp-fig--trad,
.cmp-stage .cmp-fig--tl{ opacity: 1; }.cmp-stage .cmp-detail{ opacity: 1; max-height: 14em; transform: none; }/* --reveal-tl / --reveal-trad are set by script.js from the divider position */
.cmp-stage{ --reveal-tl: 0; --reveal-trad: 0; }.cmp-stage[data-reveal="tl"] .cmp-detail--tl,
.cmp-stage[data-reveal="trad"] .cmp-detail--trad{
  opacity: 1;
  max-height: 12em;
  transform: none;
}/* the side being pushed away steps back rather than vanishing */
.cmp-stage[data-reveal="tl"] .cmp-cell--trad{ opacity: 0.4; }.cmp-stage[data-reveal="trad"] .cmp-cell--tl{ opacity: 0.4; }.cmp-hint{
  position: absolute;
  top: calc(50% + 26px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}.cmp-stage[data-edge="1"] .cmp-hint{ opacity: 0.8; }/* Two zones rather than one flat field: the traditional half reads cold and
   tired, the TopLead half warm and lit. */
.cmp-rows{ position: relative; }.cmp-rows::before{
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.028), transparent);
  pointer-events: none;
}.cmp-fig--trad img{ filter: grayscale(1) contrast(0.88) brightness(0.6); }.cmp-fig--trad{ border-color: rgba(255,255,255,0.08); }.cmp-fig--tl{
  border-color: color-mix(in srgb, var(--brand-line) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-line) 18%, transparent), 0 26px 64px rgba(0,0,0,0.55);
}.cmp-grip{ cursor: grab; }.cmp-divider:active .cmp-grip{ transform: rotate(45deg) scale(1.15); cursor: grabbing; }

/* BUG-07: animateMotion is SMIL - a CSS media query cannot reach it, so the
   dots have to be removed from the render instead. */
@media (prefers-reduced-motion: reduce) {
  .jr-flowdots { display: none; }.cmp-detail{ opacity: 1; max-height: 12em; transform: none; }.cmp-cell--trad, .cmp-cell--tl{ opacity: 1 !important; }
}/* BUG-08: with scripting off nothing can be revealed on demand, so open it all */
.no-js .cmp-detail{ opacity: 1; max-height: 12em; transform: none; }.no-js .cmp-divider{ display: none; }
.no-js .jr-card { position: static; opacity: 1; visibility: visible; transform: none; padding: 26px 0; border-top: 1px solid rgba(156, 78, 6, 0.20); }
.no-js .jr-panel, .no-js .jr-col { min-height: 0; }
.no-js .jr-layout { display: block; }
.no-js .jr-dots { display: none; }
.no-js .ex-panel { display: block !important; }
.no-js .ex-toggle, .no-js .ex-close { display: none; }
.noscript-note {
  background: rgba(239, 168, 74,0.12);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-line) 30%, transparent);
  color: var(--surface-cream);
  padding: 12px 20px;
  text-align: center;
  font-size: 0.92rem;
}/* Two names, set large enough to be the anchor of the section. Dragging does
   not just move a line - it lights one company up and pushes the other back
   into the dark. */
.cmp-heads{ align-items: end; margin-bottom: 26px; }.cmp-head{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
  transition: color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), text-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}.cmp-head--trad{ color: var(--text-muted); }.cmp-head--tl{ color: var(--surface-white); }/* lit */
.cmp-stage[data-reveal="tl"] .cmp-head--tl{
  color: var(--accent-highlight);
  text-shadow: 0 0 26px rgba(239, 168, 74, 0.75), 0 0 60px rgba(239, 168, 74, 0.35);
  transform: translateY(-2px);
}.cmp-stage[data-reveal="trad"] .cmp-head--trad{
  color: var(--surface-light);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}/* pressed back into shadow */
.cmp-stage[data-reveal="tl"] .cmp-head--trad,
.cmp-stage[data-reveal="trad"] .cmp-head--tl{
  color: var(--text-muted);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
  opacity: 0.55;
  transform: translateY(3px);
}/* The TopLead cell is a flex row (marker + headline), so the revealed detail
   became a third column instead of a paragraph underneath. Let it wrap and
   claim the full width, indented past the marker. */
.cmp-cell--tl{ flex-wrap: wrap; }.cmp-cell--tl .cmp-detail{ flex: 0 0 100%; margin-left: 19px; }.cmp-cell--tl > a{ flex: 1 1 auto; }

/* INT-04: the panel animates its height; script.js swaps `hidden` on either
   side of the transition so a collapsed panel is still out of the tab order. */
.ex-panel {
  overflow: hidden;
  transition: height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-card.is-open .ex-panel { opacity: 1; }
.ex-panel[style*="height: 0"] { opacity: 0; }

.ex-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* INT-03: steps slide as they change rather than blinking in place */
.jr-card { transform: translateX(28px); }
.jr-card.is-active { transform: none; }
.jr-card { transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.4s; }

/* INT-06: anchor jumps from the nav dropdown should glide, and clear the
   fixed navbar rather than hiding the heading underneath it. */
html { scroll-behavior: smooth; }
#comparison, #journey, #exclusive { scroll-margin-top: 96px; }
/* Targets of the hero scroll cue: clear the fixed navbar on arrival */
#story, #services-overview, #jobs-list, #contact-form, #blog-list { scroll-margin-top: 96px; }

/* VIS-15: the step control shows which step it is, not just a dot */
.jr-dot {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  font: 600 0.72rem/1 var(--font);
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(156, 78, 6, 0.20);
}
.jr-dot::after { content: attr(aria-label); font-size: 0; }
.jr-dot.is-active { width: 30px; background: var(--gold); border-color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ex-panel { transition: none; }
  .jr-card { transform: none; }
}

/* ---- VIS-02: the funnel, as bars whose width is the candidate count ----
   The drop from 80 to 3 has to be felt, not read. Bars make the difference
   legible at a glance in a way trapezoids never did. */
.ex-mini .ex-fb {
  fill: var(--gold);
  opacity: var(--o, 1);
  transform-origin: 120px center;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-card.in-view .ex-mini .ex-fb { transform: scaleX(1); }
.ex-card.in-view .ex-mini .ex-fb:nth-of-type(2) { transition-delay: 0.09s; }
.ex-card.in-view .ex-mini .ex-fb:nth-of-type(3) { transition-delay: 0.18s; }
.ex-card.in-view .ex-mini .ex-fb:nth-of-type(4) { transition-delay: 0.27s; }
.ex-card.in-view .ex-mini .ex-fb:nth-of-type(5) { transition-delay: 0.36s; }
.ex-card.in-view .ex-mini .ex-fb--out { transition-delay: 0.45s; }
.ex-mini .ex-fb--out { fill: var(--icon); }
.ex-mini .ex-mini-a, .ex-mini .ex-mini-b { fill: var(--surface-dark); font-size: 13px; font-weight: 800; }
.ex-mini .ex-mini-b { fill: var(--icon); font-size: 15px; }

/* ---- VIS-03: three pillars holding a beam ---- */
.ex-mini .ex-pil rect {
  fill: url(#exPilGrad, rgba(239, 168, 74,0.22));
  fill: rgba(239, 168, 74,0.22);
  stroke: var(--gold);
  stroke-width: 1.2;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0s);
  animation: none;
}
.ex-card.in-view .ex-mini .ex-pil rect { transform: scaleY(1); }
.ex-mini .ex-beam { stroke: var(--icon); stroke-width: 2.5; }
.ex-mini .ex-base { stroke: rgba(239, 168, 74,0.45); stroke-width: 1.5; }
.ex-mini .ex-pil-link { stroke: var(--icon); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.ex-mini .ex-beam-l { fill: var(--icon); font-size: 11px; font-weight: 600; text-anchor: middle; letter-spacing: 0.04em; }
.ex-mini .ex-pil-l { fill: var(--text-muted); font-size: 10px; text-anchor: middle; }

/* ---- VIS-04: 90 days of cover, not three dots ---- */
.ex-mini .ex-arc { fill: none; stroke: var(--icon); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.4; }
.ex-mini .ex-rail { stroke: rgba(239, 168, 74,0.28); stroke-width: 2; }
.ex-mini .ex-fill {
  stroke: var(--icon); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 188; stroke-dashoffset: 188;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-card.in-view .ex-mini .ex-fill { stroke-dashoffset: 0; }
.ex-mini .ex-tick { fill: var(--icon); }
.ex-mini .ex-tick-l { fill: var(--icon); font-size: 11px; font-weight: 700; text-anchor: middle; }
.ex-mini .ex-tick-n { fill: var(--text-muted); font-size: 9.5px; text-anchor: middle; }
.ex-mini .ex-cover { fill: var(--icon); font-size: 10px; font-weight: 600; text-anchor: middle; }

/* ---- VIS-05 / VIS-06: the three read as one system, in order ---- */
.ex-stack { position: relative; }
.ex-stack::before {
  content: "";
  position: absolute;
  left: 0; top: 40px; bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(239, 168, 74,0.45) 12%, rgba(239, 168, 74,0.45) 88%, transparent);
}
.ex-card::after {
  content: attr(data-phase);
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-white);
  border: 1px solid var(--gold);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- VIS-07: sections meet instead of butting up against each other ---- */
.cv + .cv { position: relative; }
.cv + .cv::after { content: none; }

/* ---- VIS-09: the palette warms as the reader descends ---- */
/* Ba biến thể này từng ghim --accent-highlight, bậc dành cho nền tối, từ hồi
   dải .cv còn tối. Nay để chúng thừa hưởng --cv-gold chung ở trên
   (var(--gold), tự hợp với nền sáng) đúng như chú thích ở cuối tệp mô tả. *//* ---- VIS-11: sections arrive rather than appear ---- */
.cv .section-header, .cmp-row, .ex-card{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--cv-ease), transform 0.55s var(--cv-ease);
}.cv .section-header.in-view, .cmp-row.in-view, .ex-card.in-view{ opacity: 1; transform: none; }.cmp-row.in-view{ transition-delay: calc(var(--i, 0) * 80ms); }
.ex-card.in-view { transition-delay: calc(var(--i, 0) * 110ms); }

@media (prefers-reduced-motion: reduce) {
  .cv .section-header, .cmp-row, .ex-card { opacity: 1; transform: none; transition: none; }
  .ex-mini .ex-fb { transform: scaleX(1); transition: none; }
  .ex-mini .ex-pil rect { transform: scaleY(1); transition: none; }
  .ex-mini .ex-fill { stroke-dashoffset: 0; transition: none; }
}.no-js .cv .section-header, .no-js .cmp-row, .no-js .ex-card{ opacity: 1; transform: none; }
.no-js .ex-mini .ex-fb { transform: scaleX(1); }
.no-js .ex-mini .ex-pil rect { transform: scaleY(1); }
.no-js .ex-mini .ex-fill { stroke-dashoffset: 0; }

/* FEAT-02: read position. Fixed under the navbar, scaled by scroll fraction. */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-highlight), var(--accent-highlight));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1200;
  pointer-events: none;
}

/* FEAT-03: back to top, appears once the hero is behind the reader */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(31, 22, 17, 0.82);
  border: 1px solid color-mix(in srgb, var(--brand-line) 45%, transparent);
  color: var(--accent-highlight);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, border-color 0.25s ease;
  z-index: 1100;
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--brand-line); background: rgba(239, 168, 74, 0.14); }
.to-top:focus-visible { outline: 2px solid var(--accent-highlight); outline-offset: 3px; }
.to-top svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The clipped window the arrow stack slides through. Height is one arrow, so
   only ever one is visible; the step below must equal arrow + gap. */
.tt-arrows {
  display: block;
  width: 19px;
  height: 19px;
  overflow: hidden;
}
/* The window stays put and the stack slides inside it. Transforming the window
   itself moved the clip along with the arrow, so the arrow escaped above the
   button instead of sliding out of view. */
.tt-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.to-top:hover .tt-stack,
.to-top:focus-visible .tt-stack {
  animation: none;                       /* let the transition own the transform */
  transform: translateY(-27px);          /* 19px arrow + 8px gap */
}

/* Idle: a small hop every few seconds. Long pause between hops on purpose -
   a constant loop in the corner of the eye reads as a bug, not as charm. */
@keyframes ttBob {
  0%, 86%, 100% { transform: translateY(0); }
  90%           { transform: translateY(-4px); }
  94%           { transform: translateY(0); }
}
.to-top.is-on .tt-stack { animation: ttBob 4.8s ease-in-out infinite; }

/* A gold ring breathing outward, so the button reads as live rather than parked.
   Lives on the button, not inside .tt-arrows, so the clipping does not eat it. */
.to-top::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-line) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}
.to-top.is-on::after { animation: ttRing 3.4s ease-out infinite; }
@keyframes ttRing {
  0%        { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0;    transform: scale(1.5); }
}
.to-top.is-on:hover { transform: translateY(-3px); }
.to-top.is-on:hover::after { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .to-top.is-on .tt-stack,
  .to-top.is-on::after { animation: none; }
  .tt-stack { transition: none; }
}

/* ---- TIER 5: the review rail ----
   Three real Google reviews, duplicated once so the loop closes without a
   seam. Adding more is just adding cards - the rail does not need changing. */
.cv-reviews { overflow: hidden; }.tst-rail{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 7%, var(--surface-dark) 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 7%, var(--surface-dark) 93%, transparent);
}.tst-track{
  display: flex;
  gap: 22px;
  width: max-content;
  /* Vertical padding only: horizontal padding is not halved by translateX(-50%),
     so it would put a small jump at the loop seam. */
  padding: 6px 0;
  /* 6 cards per set now instead of 3, so the distance doubled - double the
     duration to keep the same reading pace. */
  animation: tstRun 84s linear infinite;
}
@keyframes tstRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tst-rail:hover .tst-track,
.tst-rail:focus-within .tst-track { animation-play-state: paused; }.cv-reviews .testimonial-card{
  flex: 0 0 auto;
  width: min(380px, 82vw);
  background: rgba(31, 22, 17, 0.42);
  border: 1px solid var(--cv-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color 0.35s var(--cv-ease);
}
.cv-reviews .testimonial-card:hover { border-color: color-mix(in srgb, var(--brand-line) 45%, transparent); }.tst-stars{ display: flex; gap: 3px; margin-bottom: 14px; }.tst-stars svg{ width: 15px; height: 15px; fill: var(--icon); }.cv-reviews .testimonial-text{ color: var(--cv-text); font-size: 0.97rem; line-height: 1.65; margin-bottom: 20px; }.cv-reviews .testimonial-author{ display: flex; align-items: center; gap: 12px; }
/* TEST-04: circular, gold, consistent */
.cv-reviews .author-avatar {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--cv-gold), var(--accent-warm));
  color: var(--surface-dark);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}/* Client cards carry a label where the candidate cards carry stars, so both
   kinds start their quote at the same height in the rail. No stars here: these
   are relayed feedback, not a rated Google review. */
.tst-badge{
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border: 1px solid rgba(156, 78, 6, 0.20);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}
.cv-reviews .author-avatar--logo {
  background: var(--surface-white);
  padding: 6px;
  overflow: hidden;
}
.cv-reviews .author-avatar--logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cv-reviews .author-name { color: var(--surface-cream); font-weight: 600; }
.cv-reviews .author-title { color: var(--cv-dim); font-size: 0.84rem; }.tst-more{ text-align: center; margin-top: 30px; }.tst-more a{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-line) 40%, transparent);
  padding-bottom: 3px;
}
.tst-more a:hover { border-bottom-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .tst-track { animation: none; }.tst-rail{ overflow-x: auto; scrollbar-width: none; }.tst-rail::-webkit-scrollbar{ display: none; }
}.no-js .tst-track{ animation: none; }/* FEAT-01: catch the reader at the moment the comparison has convinced them */
.cmp-cta{
  text-align: center;
  margin-top: 34px;
  color: var(--text-muted);
  font-size: 1rem;
}.cmp-cta a{
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-line) 45%, transparent);
  padding-bottom: 2px;
  margin-left: 5px;
}
.cmp-cta a:hover { border-bottom-color: var(--gold); }

/* ---------- Section 2: the journey, as a timeline ----------
   Six steps down a single gold line, the same spine Section 3 uses. Every
   step is on screen at once: no rotation to wait through, no step hidden
   behind a control the reader has to discover. */
.jr-steps { position: relative; padding-left: 34px; }
.jr-steps::before {
  content: "";
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(239, 168, 74,0.5) 8%, rgba(239, 168, 74,0.5) 92%, transparent);
}

.jr-step {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4vw, 56px) 0;
  border-top: 1px solid rgba(156, 78, 6, 0.20);
}
.jr-step:first-child { border-top: none; }

/* the node on the spine carries the step number */
.jr-step::before {
  content: attr(data-step);
  position: absolute;
  left: -34px; top: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-white);
  border: 1px solid var(--gold);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(156, 78, 6, 0.20);
  aspect-ratio: 3 / 2;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.jr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.jr-body { min-width: 0; }
.jr-num {
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  opacity: 0.3;
  margin-bottom: 2px;
}
.jr-body h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--surface-white);
  margin-bottom: 12px;
}
.jr-chip {
  display: inline-block;
  background: var(--gold);
  color: var(--surface-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.jr-desc { color: var(--text-muted); font-size: 1.02rem; line-height: 1.65; margin-bottom: 16px; max-width: 52ch; }
.jr-deliv {
  border-left: 3px solid var(--gold);
  background: rgba(239, 168, 74, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  color: var(--brand-primary);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 52ch;
}
.jr-deliv-lbl {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* the convergence pays off at the end of the line, not beside it */
.jr-meet { text-align: center; margin-top: 34px; }
.jr-meet-svg { width: min(640px, 100%); height: auto; display: block; margin: 0 auto; }
.jr-mcurve { fill: none; stroke: var(--icon); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.jr-mdot { fill: var(--icon); }
.jr-meet-l {
  margin-top: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jr-step { opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.jr-step.in-view { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }

@media (max-width: 767px) {
  .jr-steps { padding-left: 26px; }
  .jr-step { grid-template-columns: 1fr; gap: 16px; }
  .jr-step::before { left: -26px; top: 34px; }
  .jr-num { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-step { opacity: 1; transform: none; transition: none; }
}
.no-js .jr-step { opacity: 1; transform: none; }

/* ============================================================
   One ground under all three sections
   A single wrapper paints the surface once, so the run from the
   comparison through the journey to the safeguards reads as one
   continuous descent rather than three tiles set side by side.
   ============================================================ */
.cv-band {
  position: relative;
  isolation: isolate;
  /* Solid black floor for contrast. background.js drops its particle canvas in
     here as a child, so the moving field paints on top of the black while the
     content above stays clear of both. */
  background: var(--brand-primary-deep);
}
.cv-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* three soft pools placed along the length of the whole run - they overlap
     across section boundaries, which is what removes the seams */
  background:
    radial-gradient(48% 26% at 22% 6%,  rgba(212, 167, 106, 0.07), transparent 70%),
    radial-gradient(52% 24% at 78% 40%, rgba(239, 168, 74, 0.06), transparent 72%),
    radial-gradient(46% 26% at 30% 74%, rgba(240, 210, 160, 0.05), transparent 70%);
}
.cv-band > * { position: relative; z-index: 1; }

/* the reviews close the run on the same ground */
.cv-reviews { background: transparent; }

/* The particle canvas is a child of .cv-band, so it must sit above the black
   floor but under everything that has to be read. */
.cv-band > .fx-panel { z-index: 0; }
.cv-band > .cv,
.cv-band > .cv-reviews { position: relative; z-index: 1; background: transparent; }

/* The band's field is pinned to the viewport rather than stretched over the
   whole run: constant density and constant cost however tall the band gets.
   clip-path both contains the fixed child and keeps it inside the band. */
.cv-band { clip-path: inset(0); }
.cv-band > .fx-panel {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* The hero used to end on a hard 3px copper rule. Now that the hero's field
   runs straight into the band below it, that line reads as a seam across the
   middle of one continuous surface. */
body:has(.cv-band) .page-hero { border-bottom: none; }

/* Trustcare's expanded panel had the three pillars in a row and a wide gap
   beside them. The photograph fills that gap and grounds the claim: this is
   what an honest conversation actually looks like. */
/* :not([hidden]) matters: the `hidden` attribute only sets display:none via
   the UA stylesheet, so any author `display` here would override it and the
   panel could never close again. */
#trustcare .ex-panel:not([hidden]) { display: grid; grid-template-columns: 340px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
#trustcare .ex-close { grid-column: 2; justify-self: end; }
.ex-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(156, 78, 6, 0.20);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.ex-photo img { display: block; width: 100%; height: 260px; object-fit: cover; }
.ex-photo figcaption {
  padding: 12px 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(239, 168, 74, 0.05);
  border-top: 1px solid rgba(156, 78, 6, 0.20);
}
#trustcare .ex-pillars { grid-template-columns: 1fr; gap: 14px; }

@media (max-width: 900px) {
  #trustcare .ex-panel:not([hidden]) { grid-template-columns: 1fr; }
  #trustcare .ex-close { grid-column: 1; }
  .ex-photo img { height: 200px; }
}

/* Once the panel is open the three pillars are spelled out in full, so the
   small pillar diagram in the card header is saying the same thing twice.
   Keep it as the collapsed preview, drop it once the detail is showing. */
#trustcare.is-open .ex-visual { display: none; }
#trustcare.is-open { grid-template-columns: 1fr; }/* ============================================================
   SERVICES PAGE - three tiered services presented as products
   ============================================================ */

.services-overview{ background: var(--bg-white); padding: 100px 0; }.prod-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}.prod-card{
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  background: var(--bg-cream);
  border: 1px solid rgba(156, 78, 6, 0.22);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.4s ease, box-shadow 0.4s ease;
}/* A gold hairline that draws itself across the top edge on hover: the card
   reacts without moving anything the eye is trying to read. */
.prod-card::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--copper), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prod-card:hover,
.prod-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--copper);
  box-shadow: var(--shadow-lg);
}
.prod-card:hover::after,
.prod-card:focus-within::after { transform: scaleX(1); }/* The middle tier is the one most clients land on, so it carries the weight */
.prod-card--featured{
  background: var(--bg-warm-brown);
  border-color: color-mix(in srgb, var(--brand-line) 34%, transparent);
}.prod-card--featured::after{ transform: scaleX(1); }.prod-card--featured .prod-name{ color: var(--surface-white); }.prod-card--featured .prod-tagline{ color: var(--text-light-muted); }.prod-card--featured .prod-desc,
.prod-card--featured .prod-list li{ color: var(--surface-light); }.prod-card--featured .prod-tier{
  background: rgba(239, 168, 74, 0.16);
  color: var(--accent-highlight);
  border-color: color-mix(in srgb, var(--brand-line) 30%, transparent);
}.prod-card--featured .prod-incl-label{ color: var(--surface-light); }.prod-card--featured .prod-list li::before{ background: var(--accent-highlight); }.prod-card--featured .prod-foot{ border-top-color: color-mix(in srgb, var(--brand-line) 20%, transparent); }.prod-card--featured .prod-price{ color: var(--surface-white); }.prod-tier{
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(156, 78, 6, 0.3);
  border-radius: 999px;
  background: rgba(156, 78, 6, 0.08);
  color: var(--copper-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}.prod-name{
  margin: 18px 0 6px;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}.prod-tagline{
  margin-bottom: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}.prod-desc{
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 22px;
}.prod-incl-label{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}.prod-list{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }.prod-list li{
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}.prod-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 2px;
  border-radius: 2px;
  background: var(--copper);
}.prod-foot{
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(156, 78, 6, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}.prod-price{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--copper-dark);
}/* The buy button. Solid gold, lifts on hover, and the cart glyph rolls forward
   a step rather than the whole button jumping. */
.prod-buy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: var(--radius);
  background: var(--accent-button);
  color: var(--surface-white);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.prod-buy:hover {
  background: var(--copper);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 22, 17, 0.34);
}.prod-buy:active{ transform: translateY(0); }.prod-buy-icon{
  width: 19px; height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prod-buy:hover .prod-buy-icon { transform: translateX(3px); }

/* ---- HR Consulting: secondary, deliberately lighter than the three above ---- */
.hrc { background: var(--bg-beige); padding: 80px 0; }
.hrc-box {
  display: grid;
  grid-template-columns: 210px auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 30px clamp(24px, 3vw, 38px);
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.2);
  border-radius: var(--radius-lg);
}
.hrc-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(156, 78, 6, 0.2);
  box-shadow: 0 12px 30px rgba(31, 22, 17, 0.12);
}
.hrc-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the photo is a desktop-only flourish; the band stacks tightly below 1024 */
@media (max-width: 1024px) { .hrc-figure { display: none; } }
.hrc-mark {
  position: relative;
  overflow: hidden;
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(158deg, var(--surface-white) 0%, var(--surface-light) 100%);
  border: 1px solid rgba(31, 22, 17, 0.22);
  box-shadow: 0 6px 16px rgba(31, 22, 17, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--copper-dark);
}
.hrc-mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 14px solid var(--gold);
  border-right: 14px solid transparent;
}
.hrc-mark svg { width: 26px; height: 26px; }
.hrc-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 6px;
}
.hrc-body h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.hrc-body p { font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.hrc-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--copper);
  border-radius: var(--radius);
  color: var(--copper-dark);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.hrc-cta svg { width: 17px; height: 17px; transition: transform 0.3s ease; }
.hrc-cta:hover { background: var(--copper); color: var(--text-light); }
.hrc-cta:hover svg { transform: translateX(3px); }

/* ---- Industry Focus: cinematic CSS showcase ----
   No paid video: each "clip" is a layered CSS scene (drifting light grade +
   film grain + hand-drawn line glyph). The film-strip below reuses the exact
   auto-scroll technique from .partner-track (duplicated set, translateX -50%,
   pause on hover, reduced-motion falls back to a manual scroll). */
.industry-focus { background: var(--bg-white); padding: 100px 0; overflow: hidden; }

/* Shared film grain, used by the hero banner and every card */
.ind-grain {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: indGrain 1.1s steps(3) infinite;
}
@keyframes indGrain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-6%, 4%); }
  66%  { transform: translate(4%, -5%); }
  100% { transform: translate(0, 0); }
}

/* Cinematic hero banner — a video-like photo montage */
.ind-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  /* skyline base shows instantly (and is the reduced-motion still frame) */
  background: var(--brand-primary-deep) url("assets/images/industries/industry-hero.jpg") center/cover no-repeat;
  box-shadow: 0 30px 70px rgba(31, 22, 17, 0.28);
}
/* The reel: eight industry photos stacked, cross-fading with a slow Ken Burns
   zoom, so it plays like a video montage — no Motion credits required. */
.ind-hero-reel { position: absolute; inset: 0; }
.ind-reel-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  will-change: opacity, transform;
  animation: reelCycle 32s ease-in-out infinite;
  animation-delay: calc(var(--s) * 4s);
}
@keyframes reelCycle {
  0%    { opacity: 0; transform: scale(1.04); }
  3%    { opacity: 1; }
  12.5% { opacity: 1; transform: scale(1.12); }
  15.5% { opacity: 0; transform: scale(1.13); }
  100%  { opacity: 0; transform: scale(1.04); }
}
/* warm cinematic tint keeps the overlaid text legible over bright photos */
.ind-hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 9, 5, 0.42) 0%, rgba(15, 9, 5, 0.12) 42%, rgba(13, 7, 4, 0.82) 100%),
    radial-gradient(120% 130% at 50% 42%, rgba(31, 22, 17, 0.15), rgba(13, 7, 4, 0.5));
}
.ind-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
/* keep the film grain above the tint (textures the photo) but below the text */
.ind-hero > .ind-grain { z-index: 2; }
/* thin inset gold frame for a framed, cinematic feel */
.ind-hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-line) 28%, transparent);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
  z-index: 3;
}
.ind-hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.ind-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-highlight);
}
.ind-hero-kicker::before,
.ind-hero-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
}
.ind-hero-kicker::before { background: linear-gradient(90deg, transparent, var(--accent-highlight)); }
.ind-hero-kicker::after  { background: linear-gradient(90deg, var(--accent-highlight), transparent); }
.ind-hero-line {
  max-width: 22ch;
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--surface-white);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

/* Auto-scrolling film-strip (mirrors .partner-wall / .partner-track) */
.ind-rail {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 6%, var(--surface-dark) 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--surface-dark) 6%, var(--surface-dark) 94%, transparent);
}
.ind-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 6px 10px;
  /* the set is duplicated in the markup, so -50% lands exactly on the copy */
  animation: ind-run 52s linear infinite;
}
@keyframes ind-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ind-rail:hover .ind-track,
.ind-rail:focus-within .ind-track { animation-play-state: paused; }

.ind-card {
  --acc: var(--accent-highlight);
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--brand-line) 14%, transparent);
  background: var(--surface-dark);
  box-shadow: 0 18px 40px rgba(31, 22, 17, 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.4s ease, box-shadow 0.4s ease;
}
.ind-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand-line) 45%, transparent);
  box-shadow: 0 26px 56px rgba(31, 22, 17, 0.34);
}
/* light sheen sweeping across on hover */
.ind-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
.ind-card:hover::after { animation: indSheen 0.9s ease; }
@keyframes indSheen {
  from { left: -60%; opacity: 1; }
  to   { left: 120%; opacity: 1; }
}

/* Real photo with a slow Ken Burns zoom, staggered per card via --i */
.ind-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: cardKen 20s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -2.4s);
  will-change: transform;
}
@keyframes cardKen {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16); }
}

/* === TopLead icon language ===============================================
   Engraved monoline glyph on a warm sand chip with a clipped gold corner.
   Reused site-wide via .tl-ico so every icon shares one distinctive look. */
.tl-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  color: var(--copper-dark);
  background: linear-gradient(158deg, var(--surface-white) 0%, var(--surface-light) 100%);
  border: 1px solid rgba(31, 22, 17, 0.22);
  box-shadow: 0 6px 16px rgba(12, 7, 4, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* the signature: a small clipped gold corner, top-left */
.tl-ico::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 12px solid var(--gold);
  border-right: 12px solid transparent;
}
.tl-ico svg { width: 22px; height: 22px; }

.ind-card-ico {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ind-card:hover .ind-card-ico { transform: translateY(-2px) scale(1.06); }
.ind-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 4, 2, 0.72) 100%);
}
.ind-card-meta {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ind-card-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--acc);
  opacity: 0.85;
}
.ind-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--surface-white);
}/* ---- Why choose: four counted claims ---- */
.why-services{ background: var(--bg-beige); padding: 100px 0; }.why-services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}.why-service-item{
  text-align: center;
  padding: 34px 20px;
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.18);
  border-radius: var(--radius-lg);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.why-service-item:hover { border-color: var(--copper); transform: translateY(-4px); }.why-service-number{
  display: block;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--copper);
  margin-bottom: 14px;
}.why-service-item p{
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .prod-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }.why-services-grid{ grid-template-columns: repeat(2, 1fr); }
  .hrc-box { grid-template-columns: auto 1fr; }
  .hrc-cta { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 600px) {
  .services-overview, .industry-focus, .why-services { padding: 70px 0; }.prod-card{ padding: 28px 22px 24px; }.why-services-grid{ grid-template-columns: 1fr; }
  .hrc-box { grid-template-columns: 1fr; text-align: left; }
  .hrc-cta { width: 100%; justify-content: center; }
  .ind-hero { aspect-ratio: 16 / 10; }
  .ind-card { width: 250px; }
  .ind-card-ico { top: 12px; left: 12px; }
  .tl-ico { width: 38px; height: 38px; border-radius: 11px; }
  .tl-ico svg { width: 20px; height: 20px; }
  .ind-card-name { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card, .prod-card::after, .prod-buy, .prod-buy-icon,
  .why-service-item, .hrc-cta, .hrc-cta svg { transition: none; }
  .prod-card:hover, .why-service-item:hover { transform: none; }
  /* Freeze the showcase entirely: no drifting light, no grain, no marquee. */
  .ind-track { animation: none; }
  .ind-rail { overflow-x: auto; scrollbar-width: none; }
  .ind-rail::-webkit-scrollbar { display: none; }
  .ind-reel-frame, .ind-card-photo, .ind-grain { animation: none; }
  .ind-card, .ind-card-ico { transition: none; }
  .ind-card:hover { transform: none; }
  .ind-card:hover .ind-card-ico { transform: none; }
  .ind-card:hover::after { animation: none; }
}/* ============================================================
   JOBS SYSTEM - list, filters, admin mode, detail page
   One definition per class. The two earlier .job-card blocks were
   overriding each other from opposite ends of this file.
   ============================================================ */

.jobs-filter{
  background: var(--bg-beige);
  padding: 40px 0;
  border-bottom: 1px solid rgba(156, 78, 6, 0.12);
}
.filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: end;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-group input,
.filter-group select {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.25);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(31, 22, 17, 0.14);
}.jobs-list{ background: var(--bg-white); padding: 70px 0 100px; }.jobs-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}.jobs-count{ font-size: 0.95rem; font-weight: 600; color: var(--text-muted); }.jobs-note{
  padding: 16px 18px;
  margin-bottom: 24px;
  border: 1px solid color-mix(in srgb, var(--brand-line) 40%, transparent);
  border-radius: var(--radius-sm);
  background: rgba(239, 168, 74, 0.08);
  color: var(--text-muted);
  font-size: 0.92rem;
}.jobs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}.job-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: var(--bg-cream);
  border: 1px solid rgba(156, 78, 6, 0.2);
  border-radius: var(--radius-lg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s ease, box-shadow 0.35s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  border-color: var(--copper);
  box-shadow: var(--shadow-md);
}.job-head{ display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }.job-logo{
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.16);
}.job-logo-img{ width: 100%; height: 100%; object-fit: contain; padding: 4px; }/* Stands in for a missing or unloadable logo, and for anonymised postings */
.job-logo-fallback{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--copper), var(--copper-dark));
  color: var(--text-light);
  font-weight: 800;
  font-size: 1.05rem;
}.job-head-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }.job-company{
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.job-location{ font-size: 0.82rem; color: var(--text-muted); }.job-title{
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 10px;
}.job-desc{
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 16px;
}.job-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }.job-tag{
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(156, 78, 6, 0.09);
  border: 1px solid rgba(156, 78, 6, 0.18);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
}.job-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid rgba(156, 78, 6, 0.15);
}.job-salary{ font-size: 1rem; font-weight: 800; color: var(--copper); }.job-level{ font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }.job-actions{ display: flex; gap: 10px; margin-top: 16px; }.job-detail-link,
.job-apply{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}.job-detail-link{
  border: 1px solid var(--line);
  color: var(--copper-dark);
  background: transparent;
}
.job-detail-link:hover { background: rgba(156, 78, 6, 0.1); }.job-apply{ background: var(--accent-button); color: var(--surface-white); border: 1px solid var(--accent-button); }
.job-apply:hover { background: var(--copper); border-color: var(--copper); }.jobs-empty{
  padding: 60px 24px;
  text-align: center;
  border: 1px dashed rgba(156, 78, 6, 0.35);
  border-radius: var(--radius-lg);
  background: var(--bg-cream);
}.jobs-empty p{ font-size: 1.05rem; color: var(--text-muted); margin-bottom: 16px; }.jobs-empty-cta{
  display: inline-block;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.28s ease;
}
.jobs-empty-cta:hover { background: var(--copper); }/* Chế độ ?admin=1 của trang việc làm đã bị gỡ khỏi jobs.js và jobs.html khi CRM
   trở thành nguồn dữ liệu duy nhất. Toàn bộ CSS của nó (.admin-bar, .admin-flag,
   .admin-btn, .job-del) đã xoá theo — không còn phần tử nào mang những lớp đó nên
   các quy tắc này không bao giờ chạy nữa. Đây cũng là nơi duy nhất dùng biến
   --warning. */

/* ---- Job detail ---- */
.page-hero--compact{ min-height: 46vh; padding: 140px 0 70px; }
.jd-section { background: var(--bg-white); padding: 70px 0 100px; }
.jd { display: block; }

.jd-top { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.jd-logo { width: 64px; height: 64px; border-radius: 12px; }
.jd-top-text { display: flex; flex-direction: column; min-width: 0; }
.jd-company { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.jd-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 6px 0 12px;
}

.jd-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px;
  margin-bottom: 36px;
  background: var(--bg-cream);
  border: 1px solid rgba(156, 78, 6, 0.18);
  border-radius: var(--radius-lg);
}
.jd-fact { display: flex; flex-direction: column; gap: 5px; }
.jd-fact-k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.jd-fact-v { font-size: 1rem; font-weight: 700; color: var(--text); }

.jd-body { display: grid; gap: 34px; max-width: 76ch; }
.jd-block h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(156, 78, 6, 0.2);
}
.jd-block p { font-size: 1rem; line-height: 1.75; color: var(--text-muted); }
.jd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jd-list li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.jd-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--copper);
}

.jd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(156, 78, 6, 0.2);
}
.jd-apply { flex: 0 0 auto; min-width: 210px; }
.jd-back { font-size: 0.94rem; font-weight: 700; color: var(--copper-dark); text-decoration: none; }
.jd-back:hover { text-decoration: underline; }

.jd-missing { padding: 80px 24px; text-align: center; }
.jd-missing h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; color: var(--text); }
.jd-missing p { color: var(--text-muted); margin-bottom: 22px; }
.jd-missing-cta {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  background: var(--accent-button);
  color: var(--surface-white);
  font-weight: 700;
  text-decoration: none;
}
.jd-missing-cta:hover { background: var(--copper); }

/* ---- Admin page (internal, VI only) ---- */
.admin-page { background: var(--bg-beige); color: var(--text); }
.admin-head { padding: 46px 0 32px; background: var(--bg-warm-brown); color: var(--surface-white); }
.admin-home { display: inline-block; margin-bottom: 16px; color: var(--accent-highlight); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.admin-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
.admin-sub { margin-top: 8px; color: var(--surface-light); font-size: 0.95rem; }
.admin-steps { margin: 22px 0 0 18px; display: grid; gap: 7px; color: var(--surface-light); font-size: 0.92rem; line-height: 1.5; }
.admin-steps code { background: rgba(239, 168, 74, 0.16); color: var(--accent-highlight); padding: 1px 6px; border-radius: 4px; font-size: 0.86em; }
.admin-main { padding: 40px 0 90px; }
.admin-form { background: var(--bg-white); border: 1px solid rgba(156, 78, 6, 0.2); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.admin-field { display: flex; flex-direction: column; gap: 7px; }
.admin-field--wide { grid-column: 1 / -1; }
.admin-field label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.admin-field .req { color: var(--warning); }
.admin-field input[type="text"],
.admin-field select,
.admin-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.25);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.admin-field textarea { resize: vertical; line-height: 1.55; }
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(31, 22, 17, 0.14);
}
.admin-field.has-err input,
.admin-field.has-err textarea { border-color: var(--warning); }
.admin-hint { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.admin-hint code { background: rgba(156, 78, 6, 0.1); padding: 1px 5px; border-radius: 4px; }
.admin-err { font-size: 0.82rem; font-weight: 600; color: var(--warning); }
.admin-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.admin-check input { width: 17px; height: 17px; accent-color: var(--copper); }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.admin-status { font-size: 0.88rem; color: var(--text-muted); }
.admin-preview { margin-top: 28px; background: var(--bg-warm-brown); border-radius: var(--radius-lg); padding: 24px; }
.admin-preview h2 { font-size: 1.05rem; font-weight: 800; color: var(--surface-white); margin-bottom: 14px; }
.admin-preview pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  color: var(--surface-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .jd-facts { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .filter-bar { grid-template-columns: 1fr; }.jobs-grid{ grid-template-columns: 1fr; }
  .jd-facts { grid-template-columns: 1fr; }.job-actions{ flex-direction: column; }
  .jd-top { flex-direction: column; align-items: flex-start; }
  .jd-apply { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .job-card, .job-detail-link, .job-apply { transition: none; }
  .job-card:hover { transform: none; }
}

/* =========================================================================
   APPROACH PAGE - LIGHT THEME
   The convergence band (comparison / journey / exclusive / reviews) was built
   on a black floor with a 3D particle field. This repaints it onto the same
   warm light surface Services and Jobs use. Every selector here is approach-
   only, so it can't leak elsewhere. Appended last to win by source order.
   ========================================================================= */

/* 1. Theme tokens flipped for a light ground (copper accents, dark warm text) */
/* Thu hẹp về .cv-band và .cv.
   Trước đây khối này ghi thẳng vào :root, trong khi chú thích ngay trên còn
   ghi "scoped to .cv so none of it can leak". :root là phạm vi TOÀN TRANG nên
   nó rò ra đúng những nơi nó nói là không rò: .logo-item ở trang chủ,
   .read-progress ở trang bài viết, .ind-card ở trang Dịch vụ. */
.cv-band,
.cv {
  --cv-gold-hi: var(--accent-highlight);
  --cv-ink: var(--surface-white);
  --cv-text: var(--brand-primary);
  --cv-dim: var(--text-muted);
  --cv-mute: var(--text-muted);
  --cv-line: rgba(156, 78, 6, 0.20);
}
/* Ba biến thể này trước đây mỗi cái một màu. Nay đều thừa hưởng --cv-gold
   chung, tức là cùng sắc nhấn với toàn bộ phần còn lại của trang.
   (--accent-warm bỏ ở đây: trên nền kem nó chỉ đạt 3.89:1.) */

/* 2. Band becomes a warm light floor; drop the dark particle field */
.cv-band { background: var(--bg-cream); }
  /* Hai khối này chỉ tối khi hiệu ứng nền chạy. Ở chế độ giảm chuyển động
     chúng thành nền sáng, nên phải trả điểm nhấn về bậc của nền sáng —
     giữ nguyên bậc sáng #E08A2E trên nền #D9E4E8 chỉ còn 2.4:1. */
  .cv-band,
  .philosophy {
    --gold: var(--brand-logo);
    --gold-light: var(--brand-logo-bright);
    --gold-dark: var(--brand-logo-deep);
    --copper: var(--brand-logo);
    --copper-dark: var(--brand-logo-deep);
    --tag-ink: var(--brand-logo-deep);
    --focus-ring: var(--brand-primary-action);
  }
.cv-band > .fx-panel { display: none !important; }
.cv-band::before {
  background:
    radial-gradient(48% 26% at 22% 6%,  rgba(156, 78, 6, 0.05), transparent 70%),
    radial-gradient(52% 24% at 78% 40%, rgba(239, 168, 74, 0.05), transparent 72%),
    radial-gradient(46% 26% at 30% 74%, rgba(156, 78, 6, 0.04), transparent 70%);
}/* 3. Every hard-coded light-on-dark text -> dark warm ink */
.cv .section-header h2,
.jr-body h3,
.ex-body h3,
.ex-pillar h3,
.ex-l-name,
.ex-tl-t,
.cmp-cell--tl,
.cv-reviews .author-name{ color: var(--brand-primary); }/* 4. Comparison */
.cmp-fig--trad{ border-color: rgba(0, 0, 0, 0.1); }.cmp-fig--tl{ box-shadow: 0 0 0 1px rgba(31, 22, 17, 0.22), 0 22px 50px rgba(31, 22, 17, 0.18); }

/* 5. Journey */
.jr-photo { box-shadow: 0 18px 40px rgba(31, 22, 17, 0.16); }
.jr-chip { color: var(--surface-white); }
.jr-deliv { background: rgba(156, 78, 6, 0.06); }
.jr-num { opacity: 0.5; }

/* 6. Exclusive cards -> white surfaces on the cream band */
.ex-card { background: var(--bg-white); border-color: rgba(31, 22, 17, 0.18); box-shadow: 0 10px 30px rgba(31, 22, 17, 0.08); }
.ex-card:hover { border-color: var(--copper); }
.ex-card.is-open { background: var(--bg-white); border-color: var(--copper); }
.ex-toggle:hover { background: rgba(156, 78, 6, 0.08); }
.ex-close:hover { background: rgba(156, 78, 6, 0.08); }
.ex-funnel li { background: var(--bg-beige); }
.ex-pillar { background: var(--bg-beige); }
.ex-mini .ex-fn { fill: rgba(156, 78, 6, 0.12); }
.ex-mini .ex-pil rect { fill: rgba(156, 78, 6, 0.16); }
.ex-mini .ex-rail { stroke: rgba(156, 78, 6, 0.35); }/* 7. Testimonial rail on the band -> white cards */
.cv-reviews .testimonial-card{ background: var(--bg-white); box-shadow: 0 10px 30px rgba(31, 22, 17, 0.07); }
.cv-reviews .testimonial-card:hover { border-color: var(--copper); }/* 8. Fixes: a later rule forced the "TopLead" comparison heading white (it was
   the emphasised side on the dark theme) - keep it emphasised as copper here.
   And the journey spine was a faint light-gold that vanished on the cream. */
.cmp-head--tl{ color: var(--gold); }
.jr-steps::before {
  background: linear-gradient(180deg, transparent, rgba(156, 78, 6, 0.42) 8%, rgba(156, 78, 6, 0.42) 92%, transparent);
}


/* The homepage logo marquee was the one horizontal strip that didn't stop on
   hover. Now every auto-scrolling strip (logos, partners, industries, reviews)
   pauses when the cursor rests on it. */
.logos-marquee:hover .logos-track,
.logos-marquee:focus-within .logos-track { animation-play-state: paused; }

/* =========================================================================
   BLOG: search + topic filter + card meta (author / date)
   ========================================================================= */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  max-width: 1000px;
  margin: 0 auto 40px;
}
.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 220px;
}
.blog-search-ico {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--icon);
  pointer-events: none;
}
.blog-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid rgba(156, 78, 6, 0.25);
  border-radius: 50px;
  background: var(--bg-white);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-search-input:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(31, 22, 17, 0.12);
}
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(156, 78, 6, 0.25);
  background: var(--bg-white);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-chip:hover { border-color: var(--copper); color: var(--copper-dark); }
.blog-chip.is-active {
  background: linear-gradient(135deg, var(--gold-light), var(--copper));
  border-color: transparent;
  color: var(--surface-white);
}
.blog-chip:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.blog-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 48px 0;
}.post-card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}.post-card-author{ font-weight: 600; color: var(--text-muted); }.post-card-dot{ opacity: 0.5; }

/* =========================================================================
   SCROLLABLE AUTO-RAILS
   JS (initScrollRail) turns each horizontal strip into a native horizontally-
   scrollable viewport it nudges with rAF. That means a Mac trackpad two-finger
   swipe (or click-drag / touch) scrolls it, and it keeps auto-running when idle.
   overscroll-behavior-x: contain stops a horizontal swipe from triggering the
   browser's back/forward gesture.
   ========================================================================= */
.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.tl-scroll:active { cursor: grabbing; }
.tl-scroll::-webkit-scrollbar { display: none; }
.tl-scroll.logos-marquee { width: 100%; }/* the rAF loop drives scrollLeft, so the old keyframe translate must be off */
.tl-scroll .logos-track,
.tl-scroll .partner-track,
.tl-scroll .ind-track,
.tl-scroll .tst-track{ animation: none !important; }
/* .logos-track is a flex child of the marquee; keep it at content width so it
   overflows (and therefore scrolls) instead of shrinking to the viewport. */
.tl-scroll .logos-track { width: max-content; flex-shrink: 0; }/* testimonial source badges: distinguish candidate vs client feedback */
/* Hai huy hiệu này phân biệt ứng viên với khách hàng, KHÔNG phải trạng thái
   thành công hay thất bại. Mục 3 cấm mượn màu ngữ nghĩa để trang trí, nên phân
   biệt bằng sáng/ấm trong cùng một hệ thay vì nhảy sang xanh lá. */
/* Màu "sáng" chỉ đọc được trên nền tối; trên thẻ trắng nó còn 1.19:1. Phân
   biệt bằng ẤM (đồng) với TRUNG TÍNH (mực nhạt) — vẫn một hệ màu, không thêm
   sắc thứ hai, mà đọc được trên cả hai nền vì --copper tự đổi theo ngữ cảnh. */
.tst-badge--candidate{ color: var(--copper); border-color: color-mix(in srgb, var(--copper) 35%, transparent); }.tst-badge--client{ color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .logos-track,
  .partner-track,
  .ind-track,
  .tst-track,
  .hero-video,
  .phil-slides img,
  .hero-slide { animation: none !important; transition: none !important; }
  /* Giảm chuyển động: quy tắc cũ chỉ ép opacity:1 cho MỌI slide mà quên gỡ
     filter: blur(6px) và transform — kết quả là tất cả slide cùng hiện, nhoè
     chồng lên nhau, còn nút CTA vẫn nằm ở opacity:0 nên không bấm được.
     Ở chế độ này slide không chạy: chỉ slide đang chọn được hiện, và hiện đủ. */
  .hero-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hero-slide.active .hero-subtitle,
  .hero-slide.active .cta-buttons {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   VIETNAMESE TYPOGRAPHY
   Keep Plus Jakarta Sans; no negative tracking on headings (diacritics need
   room), roomier leading, and a smaller heading scale. Appended last so it wins.
   ========================================================================= */
body { line-height: 1.65; letter-spacing: 0.01em; }
h1, h2, h3, h3, h5, h6 { letter-spacing: 0; line-height: 1.35; }.hero-headline, .page-hero-title, .page-hero-subtitle, .section-header h2,
.prod-name, .sc-title, .jr-body h3, .ex-body h3, .cine-caption, .philosophy-quote,
.founder-quote, .post-title, .post-card-title, .jd-title, .job-title, .ind-hero-line,
.partner-num, .hrc-body h3, .admin-head h1, .jr-card h3, .why-service-item p,
.blockquote, blockquote{ letter-spacing: 0 !important; line-height: 1.35; }
/* reduced heading scale for Vietnamese readability */
.hero-headline    { font-size: clamp(2.6rem, 5.4vw, 3.4rem) !important; }
.page-hero-title  { font-size: clamp(2.4rem, 5vw, 3.1rem) !important; }
.section-header h2 { font-size: clamp(1.9rem, 4vw, 2.5rem) !important; }.hero-subtitle, .page-hero-subtitle, .post-lead, .services-lead, .lead{ font-size: 1.125rem; line-height: 1.6; }
p { line-height: 1.65; }

/* ============ Consultation popup (cpx) — layout per mockup, TopLead colours ============ */
.cpx-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,12,6,.55);opacity:0;transition:opacity .28s ease;}
.cpx-overlay.is-open{opacity:1;}
.cpx-overlay[hidden]{display:none;}
.cpx-modal{width:100%;max-width:440px;background:var(--surface-white);border-radius:18px;box-shadow:0 30px 80px rgba(20,12,6,.4);padding:26px 26px 22px;transform:translateY(24px);opacity:0;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s ease;max-height:92vh;overflow-y:auto;}
.cpx-overlay.is-open .cpx-modal{transform:translateY(0);opacity:1;}
.cpx-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.cpx-logo{width:34px;height:34px;object-fit:contain;}
.cpx-brand{font-weight:700;color:var(--copper-dark);font-size:.95rem;letter-spacing:.02em;}
.cpx-brand b{font-weight:800;color:var(--copper);}
.cpx-close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:none;background:rgba(156, 78, 6,.08);color: var(--icon);font-size:1rem;cursor:pointer;line-height:1;transition:background .2s ease;}
.cpx-close:hover{background:rgba(156, 78, 6,.16);}
.cpx-title{font-size:1.15rem;font-weight:800;color:var(--text);margin:6px 0 2px;}
.cpx-form{display:flex;flex-direction:column;}
.cpx-label{font-size:.82rem;font-weight:600;color:var(--text);margin:12px 0 6px;}
.cpx-input{width:100%;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--text);background:var(--bg-beige);border:1px solid rgba(31, 22, 17,.22);border-radius:10px;transition:border-color .2s ease,box-shadow .2s ease;}
.cpx-input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(31, 22, 17,.12);background:var(--surface-white);}
.cpx-input.cpx-invalid{border-color:var(--error);box-shadow:0 0 0 3px rgba(90, 33, 50,.12);}
.cpx-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A3E20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;}
.cpx-error{color:var(--error);font-size:.82rem;margin:10px 0 0;}
.cpx-submit{margin-top:18px;padding:13px 18px;border:none;border-radius:10px;background:var(--accent-button);color:var(--surface-white);font-family:inherit;font-size:.98rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
.cpx-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(31, 22, 17,.35);}
.cpx-note{font-size:.78rem;color:var(--text-muted);line-height:1.55;margin:14px 0 0;}
.cpx-success{text-align:center;padding:22px 0;}
.cpx-success-ico{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:rgba(63, 107, 39,.12);color:var(--success-text);font-size:1.6rem;display:flex;align-items:center;justify-content:center;}
.cpx-success h3{font-size:1.2rem;color:var(--text);margin-bottom:6px;}
.cpx-success p{color:var(--text-muted);font-size:.92rem;}
@media (max-width:480px){.cpx-overlay{padding:0;align-items:flex-end;}.cpx-modal{max-width:100%;border-radius:18px 18px 0 0;padding:22px 18px;}}
@media (prefers-reduced-motion:reduce){.cpx-overlay,.cpx-modal{transition:none;}}

/* Philosophy section now lives on the (light) About page -> white ground, dark text */
.philosophy { background: var(--bg-beige); }
.philosophy-bg { background: radial-gradient(ellipse at 50% 0%, rgba(156, 78, 6,0.07), transparent 62%); }
.philosophy-quote { color: var(--brand-primary); }
.phil-body { color: var(--text-muted); }
.phil-eyebrow { color: var(--copper); }
.phil-accent-line { background: linear-gradient(90deg, var(--copper), transparent); }
.philosophy-mark { mix-blend-mode: normal; }
.philosophy .btn-ghost { color: var(--copper-dark); border-color: rgba(156, 78, 6,0.45); }
.philosophy .btn-ghost:hover { background: var(--copper); color: var(--surface-white); border-color: var(--copper); }

/* Mobile menu: the "Liên hệ" CTA was a small cramped button next to full-width
   links. Make it a proper full-width CTA so it no longer looks narrow. */
.nav-links.active .btn-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 24px;
  margin-top: 6px;
  border-radius: 12px;
}/* Post figure — video variant (SECC field report) */
.post-figure--video{height:auto;background:var(--surface-dark);}.post-figure--video video{display:block;width:100%;height:auto;max-height:74vh;margin:0 auto;object-fit:contain;background:var(--surface-dark);}.post-figure figcaption{padding:11px 20px;text-align:center;font-size:.85rem;color:var(--text-muted);background:var(--bg-beige);border-top:1px solid rgba(156, 78, 6,.12);}

/* About — 6 core industry groups (chips under the story stats) */
.story-sectors{margin-top:30px;text-align:center;}
.story-sectors-label{display:block;font-size:.9rem;font-weight:700;color: var(--text-muted);letter-spacing:.02em;margin-bottom:14px;}
.sector-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:0;}
.sector-chips li{padding:9px 16px;border-radius:999px;background:var(--bg-beige);border:1px solid rgba(156, 78, 6,.22);color:var(--text);font-size:.92rem;font-weight:600;line-height:1.3;}/* ============================================================
   BÀI VIẾT LINKEDIN (trang Blog)
   ------------------------------------------------------------
   Nội dung do script.js đổ vào từ CRM. Bám theo cùng ngôn ngữ
   hình ảnh với .post-card để hai mục đứng cạnh nhau không lệch
   nhau, nhưng thẻ thấp hơn và không có nhãn chuyên mục — đây là
   bài ngắn dẫn ra ngoài, không phải bài dài trên site.
   ============================================================ */
.li-section{
  background: var(--bg-cream, var(--surface-white));
  padding: 72px 0;
}.li-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}.li-card{
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid rgba(156, 78, 6, 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  color: inherit;
  text-decoration: none;
}

.li-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(31, 22, 17, 0.16);
  border-color: var(--copper);
}.li-card-media{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-beige, var(--surface-cream));
}.li-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.li-card-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  flex: 1;
}.li-card-date{
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}.li-card-title{
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}.li-card-teaser{
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted, var(--text-muted));
  margin: 0;
  /* Tóm tắt dài ngắn khác nhau; cắt ở 3 dòng để các thẻ trong lưới
     không cao vống lên so với nhau. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}.li-card-more{
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--copper);
}.li-follow{
  display: inline-block;
  margin-top: 28px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--copper-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
}

.li-follow:hover { color: var(--copper); }

@media (max-width: 640px) {
  .li-section { padding: 56px 0; }.li-cards{ gap: 18px; }
}

/* ============================================================
   FORM BẮT ĐẦU NHANH (trang chủ, ngay dưới dải logo đối tác)
   ------------------------------------------------------------
   Nền tối, thẻ form sáng đặt lên trên: đây là điểm duy nhất trên
   nửa đầu trang cần người xem dừng lại và thao tác, nên nó phải
   nổi hẳn khỏi nhịp đọc chứ không hoà vào.

   Dùng combo "Action" của TOPLEAD_DESIGN_SYSTEM.md mục 6
   (brand-primary + surface-cream + accent-primary), đúng loại
   khối mà combo đó dành cho.

   Dải nền kết thúc ở brand-primary-deep, cũng là màu mở đầu của
   .showcase ngay bên dưới, để hai khối tối liền nhau không lộ
   đường ghép.
   ============================================================ */
.qf {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--brand-primary), var(--brand-primary-deep));
  padding: 76px 0;
}

.qf-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse, rgba(239, 168, 74, 0.16), transparent 65%);
  pointer-events: none;
}

.qf-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* --- cột trái: lời hứa --- */
.qf-pitch .section-tag {
  background: rgba(239, 168, 74, 0.14);
  color: var(--accent-highlight);
}

.qf-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--surface-white);
  margin: 16px 0 12px;
}

.qf-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--surface-light);
  margin: 0 0 30px;
  max-width: 46ch;
}

.qf-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qf-proof-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.qf-proof-num {
  flex-shrink: 0;
  min-width: 76px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-highlight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.qf-proof-num small { font-size: 0.86rem; font-weight: 700; }

.qf-proof-txt {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--surface-light);
}

/* --- cột phải: thẻ form --- */
.qf-card {
  background: var(--surface-cream);
  border: 1px solid color-mix(in srgb, var(--brand-line) 28%, transparent);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

.qf-step + .qf-step { margin-top: 24px; }

.qf-step-no {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tag-ink);
  margin-bottom: 8px;
}

.qf-q {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0 0 14px;
}

.qf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qf-chip {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-primary);
  background: var(--surface-white);
  border: 1px solid rgba(156, 78, 6, 0.28);
  border-radius: 999px;
  /* 44px chiều cao tối thiểu cho ngón tay trên điện thoại. */
  padding: 11px 16px;
  cursor: pointer;
  transition: var(--transition);
}

.qf-chip:hover {
  border-color: var(--brand-logo);
  color: var(--brand-logo);
}

.qf-chip.is-on {
  /* Nút đang chọn dùng sắc logo, không dùng xanh dương: cả trang chỉ nên có
     một sắc nhấn. Thứ bậc với nút gửi tạo bằng độ sáng — đất trầm cho lựa
     chọn, cam rực cho hành động — chứ không tạo bằng hai màu khác nhau. */
  background: var(--brand-logo);
  border-color: var(--brand-logo);
  color: var(--surface-white);
}

/* Bước 2 bị thu lại cho tới khi chọn xong mảng. Lớp is-hidden do
   JavaScript gắn vào, nên khi JavaScript không chạy thì hai ô vẫn
   hiện sẵn và form dùng được bình thường. */
.qf-step-2.is-hidden {
  display: none;
}

.qf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.qf-field { display: flex; flex-direction: column; gap: 6px; }

.qf-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.qf-field input {
  font: inherit;
  font-size: 0.98rem;
  color: var(--brand-primary);
  background: var(--surface-white);
  border: 1px solid rgba(156, 78, 6, 0.28);
  border-radius: var(--radius-sm, 8px);
  padding: 13px 14px;
  width: 100%;
  transition: var(--transition);
}

.qf-field input:focus {
  outline: none;
  border-color: var(--brand-logo);
  box-shadow: 0 0 0 3px rgba(156, 78, 6, 0.18);
}

.qf-field input.is-bad {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(90, 33, 50, 0.16);
}

.qf-error {
  color: var(--error);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

.qf-submit {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--surface-white);
  background: var(--accent-button);
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 15px 22px;
  margin-top: 18px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.qf-submit svg { width: 18px; height: 18px; }

.qf-submit:hover:not(:disabled) {
  background: var(--accent-button-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(203, 97, 22, 0.34);
}

.qf-submit:disabled { opacity: 0.6; cursor: default; }

.qf-fine {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--brand-primary);
  text-align: center;
  margin: 12px 0 0;
}

/* --- màn cảm ơn --- */
.qf-done { text-align: center; padding: 26px 6px; }

.qf-done-ico {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(63, 107, 39, 0.12);
  color: var(--success-text);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qf-done h3 { font-size: 1.2rem; color: var(--brand-primary); margin: 0 0 8px; }
.qf-done p { font-size: 0.94rem; line-height: 1.6; color: var(--brand-primary); margin: 0; }

@media (max-width: 900px) {
  .qf { padding: 56px 0; }
  .qf-inner { grid-template-columns: 1fr; gap: 34px; }
  .qf-proof { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  .qf-proof-item { flex-direction: column; gap: 4px; align-items: flex-start; flex: 1 1 150px; }
  .qf-proof-num { min-width: 0; }
}

@media (max-width: 560px) {
  .qf-card { padding: 22px 18px; }
  .qf-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   NHỊP NỀN CHUẨN CHO MỌI TRANG
   ------------------------------------------------------------
   Một nhịp duy nhất, lặp lại giống nhau ở mọi trang:

       hero TỐI → trắng → kem → trắng → kem → … → TỐI (đóng)

   Vì sao gom vào một khối cuối file thay vì sửa rải rác: nhịp nền
   là thứ chỉ nhìn thấy khi xếp CẢ TRANG cạnh nhau. Để mỗi mục tự
   khai nền của nó thì không ai kiểm được nhịp, và thực tế đã lệch
   đúng như vậy — đo ra mỗi trang một kiểu:

     trang chủ    tối → kem → tối → tối → tối → kem
     giới thiệu   tối → kem → trắng → kem → trắng → kem → tối → tối
     dịch vụ      tối → trắng → kem → trắng → kem → tối     ← đúng
     blog         tối → kem → trắng → kem → tối
     việc làm     tối → kem → trắng → tối

   Trang Dịch vụ vốn đã đúng nhịp, nên lấy làm mẫu cho phần còn lại.

   Hai quy tắc của nhịp này:
   • Dải ĐẦU sau hero luôn là nền SÁNG NHẤT. Sau một dải tối cao
     bằng màn hình, mắt cần chỗ nghỉ rõ ràng nhất có thể.
   • Dải CUỐI trước chân trang luôn TỐI, để không có đường ghép
     giữa nội dung và chân trang.

   Không đụng tới trang Quy trình: bốn dải ở đó là một khối so sánh
   có hiệu ứng nền riêng chạy bằng canvas, đổi nền phẳng của chúng
   sẽ phá hiệu ứng.
   ============================================================ */

/* Trang chủ — dải logo là khoảng nghỉ duy nhất trước chuỗi dải tối,
   nên lấy nền sáng nhất. */
.logos { background: var(--surface-white); }

/* Giới thiệu */
.about-story    { background: var(--surface-white); }
.about-team     { background: var(--surface-cream); }
.why-choose     { background: var(--surface-white); }
.clients        { background: var(--surface-cream); }
.philosophy     { background: var(--surface-white); }

/* Blog */
.li-section        { background: var(--surface-white); }
.blog-section      { background: var(--surface-cream); }
.resources-section { background: var(--surface-white); }

/* Việc làm */
.jobs-filter { background: var(--surface-white); }
.jobs-list   { background: var(--surface-cream); }

/* Dịch vụ và Liên hệ vốn đã đúng nhịp — không cần khai lại. */

/* Trang chủ: ba dải tối liền nhau, và không lật được.
   ------------------------------------------------------------------
   Khối "TopLead 360" chứa video và có 17 quy tắc viết cho nền tối, nên lật nó
   sang nền sáng là làm lại cả cụm mà không chắc đẹp hơn. Thay vì cưỡng ép, cho
   ba dải đó thành MỘT CHƯƠNG TỐI có chủ ý: chìm dần đều một chiều, từ chàm
   xuống chàm đậm rồi xuống mực, kết thúc đúng tông chân trang.

   Trước đây dải thứ ba lại sáng ngược lên chàm rồi mới tối, nên ba dải trông
   như ba khối rời đánh nhau chứ không phải một mạch. Cùng với đường kẻ ấm ở
   mép trên mỗi dải, chuỗi này đọc thành một chương liền mạch.

       hero        chàm
       dải logo    trắng   ← khoảng nghỉ
       form        chàm      ┐
       TopLead 360 chàm đậm  ├ một chương tối, chìm dần
       đối tác     mực       ┘
       liên hệ     kem
       chân trang  mực
   ------------------------------------------------------------------ */

/* Ảnh nền các thẻ ngành nghề (trang Dịch vụ).
   Chuyển từ inline style sang class: ảnh nền là thuộc tính TRÌNH BÀY, chỗ của
   nó là CSS. Các inline style còn lại trên site (--i, --w, --o) là giá trị DỮ
   LIỆU của từng phần tử cho hiệu ứng, không phải trình bày — đổi chúng thành
   class chỉ đẻ thêm class chứ không gọn hơn, nên giữ nguyên. */
.ind-photo--technology { background-image: url('assets/images/industries/industry-technology.jpg'); }
.ind-photo--finance { background-image: url('assets/images/industries/industry-finance.jpg'); }
.ind-photo--retail { background-image: url('assets/images/industries/industry-retail.jpg'); }
.ind-photo--manufacturing { background-image: url('assets/images/industries/industry-manufacturing.jpg'); }
.ind-photo--realestate { background-image: url('assets/images/industries/industry-realestate.jpg'); }
.ind-photo--healthcare { background-image: url('assets/images/industries/industry-healthcare.jpg'); }
.ind-photo--logistics { background-image: url('assets/images/industries/industry-logistics.jpg'); }
.ind-photo--education { background-image: url('assets/images/industries/industry-education.jpg'); }

/* Ẩn khỏi mắt nhưng trình đọc màn hình vẫn đọc.
   Dùng cho tiêu đề mà bố cục không cần hiện, nhưng cấu trúc tài liệu thì cần —
   thiếu nó thì trang nhảy thẳng từ h1 xuống h3 và người dùng trình đọc màn hình
   mất một cấp định hướng. Không dùng display:none vì thứ đó bị bỏ qua hoàn toàn. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MỘT NHỊP DỌC CHO MỌI DẢI
   ------------------------------------------------------------
   Đo trước khi sửa: dải logo 60px, khối form 76px, hai dải sau
   100px. Ba mức đệm khác nhau trên cùng một trang là lý do nó
   trông chấp nối — mắt đọc khoảng trắng để biết đâu là một khối,
   khoảng trắng đổi liên tục thì mọi dải thành mảnh rời.

   Hero không nằm trong đây vì nó cao bằng màn hình; chân trang
   giữ nhịp riêng vì còn phần dưới cùng.
   ============================================================ */
.logos,
.qf,
.showcase,
.partner,
.contact,
.about-story, .about-team, .why-choose, .clients, .philosophy,
.services-overview, .hrc, .industry-focus, .why-services,
.li-section, .blog-section, .resources-section,
.jobs-filter, .jobs-list,
.contact-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Thanh điều hướng: nền trong mờ ngay từ đầu, không đợi cuộn.
   Đây là chỗ dùng độ mờ đúng nghĩa — lớp điều hướng nổi trên nội dung, nên nó
   phải cho thấy có thứ gì đó bên dưới mà vẫn đọc được chữ trên nó. Nền vẫn đủ
   đặc (0.82) để chữ đạt tương phản, chứ không phải tấm kính mờ đọc không ra. */
.navbar {
  background: color-mix(in srgb, var(--brand-primary-deep) 84%, transparent);
  backdrop-filter: blur(var(--blur-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav));
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
}

/* Trình duyệt không hỗ trợ backdrop-filter thì dùng nền đặc, đừng để chữ nằm
   trên nền trong suốt không đọc được. */
@supports not (backdrop-filter: blur(1px)) {
  .navbar { background: var(--brand-primary-deep); }
}


/* ============================================================
   HERO — băng chuyền tiêu đề
   ------------------------------------------------------------
   Khối này TRƯỚC ĐÂY nằm trong script.js và được chèn vào <head>
   lúc chạy. Vì chèn sau, nó luôn thắng styles.css theo thứ tự
   nguồn — nên mọi lần sửa .hero-slide ở đây đều vô hiệu mà không
   để lại dấu vết nào. Đó là một phần lý do trang trông chắp vá:
   một nửa hệ thống nằm ngoài stylesheet.

   Đã bỏ max-height: 500px của bản cũ, vì nó cắt mất nút CTA nằm
   dưới chữ phụ — hero hiện ra như một khoảng trống lớn không có
   lời kêu gọi hành động nào.
   ============================================================ */

    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 1.5rem;
      box-sizing: border-box;

      opacity: 0;
      transform: translateY(30px);
      filter: blur(6px);
      pointer-events: none;
      transition:
        opacity   var(--hero-fade) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--hero-fade) cubic-bezier(0.4, 0, 0.2, 1),
        filter    var(--hero-fade) cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform, filter;
    }

    .hero-slide.active {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
      pointer-events: auto;
    }

    .hero-slide.leaving {
      opacity: 0;
      transform: translateY(-20px);
      filter: blur(4px);
    }

    /* Headline styles */
    .hero-headline {
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .headline-line {
      display: block;
    }

    .hero-slide .hero-subtitle {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.75);
      margin-bottom: 24px;
      max-width: 500px;
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity   0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-slide .cta-buttons {
      opacity: 0;
      transform: translateY(12px);
      transition:
        opacity   0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-slide.active .hero-subtitle {
      opacity: 1; transform: translateY(0);
      transition-delay: 0.3s;
    }
    .hero-slide.active .cta-buttons {
      opacity: 1; transform: translateY(0);
      transition-delay: 0.45s;
    }

    /* Dot indicator */
    .hero-dots {
      position: absolute;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      /* Khối này đứng sau nên thắng quy tắc .hero-dots ở đầu tệp. Khe phải
         khớp 16px ở đó, nếu không bước giữa hai chấm tụt về 22px và vùng
         chạm của hai chấm giữa lại chồng nhau. */
      gap: 16px;
      z-index: 10;
    }

    .hero-dot {
      position: relative;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.3s, transform 0.3s;
    }

    .hero-dot:hover {
      background: rgba(255,255,255,0.6);
      transform: scale(1.2);
    }

    .hero-dot.active {
      background: var(--accent-warm);
      transform: scale(1.25);
    }

    .hero-slider {
      position: relative;
      width: 100%;
      height: 60vh;
      min-height: 400px;
        /* Bỏ max-height:500px của bản cũ — nó cắt mất nút CTA bên dưới chữ phụ. */
    }

/* ============================================================
   VÙNG CHẠM
   ------------------------------------------------------------
   Đo trên trình duyệt thật ở khổ 390px: chấm chuyển ảnh bìa chỉ 10x10px và
   nút đổi ngôn ngữ 28x22px. Cả hai đều dưới sàn 24px của WCAG 2.2 — trên
   điện thoại rất dễ bấm trượt.

   Cách sửa giữ nguyên hình hài: một lớp phủ trong suốt nới rộng chỗ nhận
   chạm, còn phần nhìn thấy không đổi một pixel nào. Kích thước lấy đúng
   theo khoảng cách đo được, nên lớp phủ của hai nút cạnh nhau không đè lên
   nhau — nếu đè, nút sau sẽ nuốt cú chạm của nút trước.

   Hai chỗ khác cố tình để nguyên: .sc-tab cao 36px và .logo cao 40px đều đã
   qua sàn 24px, mà bước giữa hai hàng tab đúng bằng 44px nên ép lên 44 sẽ
   khiến hàng dưới cướp cú chạm của hàng trên.
   ============================================================ */

/* Chấm: nới cả hai chiều. Bước ngang 26px sau khi nới khe ở trên; chiều dọc
   trống nên lấy đủ 44px. */
.hero-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Nút ngôn ngữ: bề ngang 28px đã đạt sàn, mà khe giữa VI và EN chỉ 2px nên
   chỉ được nới theo chiều dọc. */
.lang-btn {
  position: relative;
}

.lang-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Các chấm và liên kết nhỏ còn lại, đo ở khổ 390px.
   Bước giữa hai chấm quyết định bề rộng tối đa của lớp phủ: phủ rộng hơn bước
   thì chấm sau đè lên chấm trước và nuốt cú chạm. Nên phải nới khe trước.
     .why-dot   8px, khe 10 -> bước 18 : khe 16 -> bước 24
     .phil-dot  7px, khe  8 -> bước 15 : khe 17 -> bước 24
   Hai nhóm liên kết chỉ thiếu chiều cao, bề ngang đã dư, nên chỉ nới dọc.  */

.why-dots { gap: 16px; }
.phil-dots { gap: 17px; }

.why-dot, .phil-dot { position: relative; }

.why-dot::after,
.phil-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Thanh điều hướng phụ: cao 18px, bề ngang 80px đã dư. */
.ph-crumb a { position: relative; }

.ph-crumb a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
}

/* Liên kết điện thoại/email trong thẻ nhà sáng lập: cao 22px, bước dọc 31px
   nên phủ 30px là vừa, không chạm liên kết ở dòng dưới. */
.founder-contact-link { position: relative; }

.founder-contact-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
}

/* Ô chọn tệp bị thu còn 0.1px cho khuất, nên khi dùng bàn phím Tab tới thì
   không có gì sáng lên — người dùng không biết mình đang đứng ở đâu. Chuyển
   viền hội tụ sang phần nhìn thấy được. Hai trang dựng khác nhau nên có hai
   bộ chọn: index bọc ô input trong .file-upload-area, còn contact đặt ô input
   ngay trước nhãn.  Dùng :focus-visible để bấm chuột không hiện viền. */
.file-upload-area:has(input[type="file"]:focus-visible),
.file-upload > input[type="file"]:focus-visible + .file-upload-label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   MIẾNG NỀN SÁNG TỰ ĐẶT LẠI MÀU MỰC
   ------------------------------------------------------------
   Bốn thành phần này tự vẽ một miếng nền SÁNG cho riêng mình
   (#FAF7F2 -> #EDE3D3), bất kể khối bao quanh sáng hay tối. Nhưng màu nét
   thì chúng vẫn mượn --icon của khối bao ngoài. Trong chân trang — vốn nằm
   trong nhóm khối tối, nơi --icon lật sang bậc sáng #EDE3D3 — nét biểu tượng
   trùng khít màu đáy miếng nền: tương phản đúng 1.00:1, biểu tượng biến mất
   hẳn như trong ảnh chủ dự án gửi.

   Cách sửa theo nguyên tắc: cái gì tự vẽ nền của mình thì cũng phải tự đặt
   màu mực của mình. Ba thành phần còn lại hiện đang ở khối nền sáng nên dòng
   này không đổi gì với chúng, nhưng sẽ giữ chúng an toàn nếu sau này có ai
   đặt chúng vào một khối tối.

   Góc vát màu cam (::before) giữ nguyên --gold theo ngữ cảnh: nó đang hiện
   rõ và đúng ý đồ, chỉ có nét biểu tượng là hỏng.
   ============================================================ */
.footer-contact-icon,
.why-icon,
.hrc-mark,
.tl-ico {
  --icon: var(--icon-on-light);
  --copper: var(--brand-logo);
  --copper-dark: var(--brand-logo-deep);
}

/* ============================================================
   DẢI ĐÓNG CHO TRANG BÀI VIẾT
   ------------------------------------------------------------
   Chín trang bài viết kết thúc bằng nền trắng của <article> rồi đâm thẳng vào
   chân trang chàm — cạnh gắt, khác hẳn sáu trang kia vốn có dải CTA tối nối
   liền chân trang. Nhưng bài viết KHÔNG thiếu lời kêu gọi: .post-cta-box đã có
   sẵn tiêu đề, câu mô tả và hai nút, đúng bằng nội dung của .cta-banner. Nó chỉ
   đang là một thẻ tối nằm lọt giữa nền trắng.

   Nên không thêm nội dung mới. Chỉ cho .post-end trải hết bề ngang và mang đúng
   ramp của .cta-banner, rồi để nội dung CTA ngồi thẳng trên dải. Kết quả: bài
   viết kết thúc bằng cùng một dải như mọi trang khác, đáp đúng màu chân trang.

   Đệm ngang cố tình không đặt ở đây: quy tắc responsive phía trên đã hạ nó
   xuống 20px ở khổ hẹp, mà khối này đứng sau nên sẽ ghi đè mất.
   ============================================================ */
article.post > .post-end {
  max-width: none;
  padding-block: var(--section-y);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 76, 92, 0.55) 0%, rgba(2, 52, 65, 0.20) 45%, transparent 72%),
    linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--footer-bg) 88%, var(--footer-bg) 100%);
}

/* Thẻ CTA nay là nội dung của dải, không còn là thẻ riêng: bỏ nền và bo góc,
   giữ bề ngang đọc được ở giữa. */
article.post > .post-end > .post-cta-box {
  max-width: 720px;
  margin-inline: auto;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Lớp sáng riêng của thẻ dùng --post-accent (màu đồng). Trên nền chàm của dải
   thì đồng trộn ra bùn — cùng lý do đã bỏ nó khỏi .cta-banner. Dải đã có lớp
   sáng cùng hệ ở đỉnh rồi, nên lớp này thừa. */
article.post > .post-end > .post-cta-box::before {
  content: none;
}

/* ============================================================
   DẢI ĐÓNG CHO KHỐI LIÊN HỆ
   ------------------------------------------------------------
   Trang chủ và trang Liên hệ trước đây kết thúc bằng nền sáng rồi đâm thẳng
   vào chân trang chàm. Không thêm dải CTA mới vì cả hai đã kết thúc bằng chính
   form liên hệ — một lời mời "hãy liên hệ" đặt ngay dưới cái form làm đúng việc
   đó thì thừa. Thay vào đó, khối form chuyển sang nền tối, đúng kiểu đã có sẵn
   trên site: .qf ở trang chủ vốn là một form đặt trên nền chàm.

   Thẻ form giữ nguyên nền sáng của nó, nên toàn bộ ô nhập, nhãn và nút bên
   trong không phải đụng tới. Chỉ cột thông tin nằm NGOÀI thẻ mới cần đổi màu.
   ============================================================ */
.contact,
.contact-section {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 76, 92, 0.55) 0%, rgba(2, 52, 65, 0.20) 45%, transparent 72%),
    linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--footer-bg) 88%, var(--footer-bg) 100%);
}

/* Chữ ở cột thông tin, bên ngoài thẻ form. */
.contact .contact-info h2,
.contact .contact-value,
.contact-section .contact-info h3 {
  color: var(--surface-white);
}

.contact .contact-info > p,
.contact .contact-label,
.contact-section .contact-info p,
.contact-section .contact-info a {
  color: var(--surface-light);
}

.contact .contact-value:hover,
.contact-section .contact-info a:hover {
  color: var(--gold);
}

/* Thẻ form tự vẽ nền SÁNG cho riêng nó, nên phải tự đặt lại màu mực — cùng
   nguyên tắc đã áp cho .tl-ico và .footer-contact-icon. Không có dòng này thì
   viền ô nhập lúc hội tụ sẽ lấy bậc sáng của nền tối và tụt tương phản trên
   nền thẻ. */
.contact-form-wrapper {
  --icon: var(--icon-on-light);
  --gold: var(--brand-logo);
  --gold-dark: var(--brand-logo-deep);
  --copper: var(--brand-logo);
  --copper-dark: var(--brand-logo-deep);
  --tag-ink: var(--brand-logo-deep);
  --line: rgba(31, 22, 17, 0.12);
  --focus-ring: var(--brand-primary-action);
}