/* Website Agentic AI — theme CSS
 * v1.2: sửa theo phản hồi trực tiếp trên bản xem trực tiếp — vị trí tagline dưới logo,
 * nút lên-đầu-trang nổi cố định (không dính footer), CTA viền gradient, thêm sidebar
 * trái mở bằng nút 4-ô-vuông trên header (thay hẳn hamburger mobile cũ).
 * Font: Manrope (UI/nav/body) + Be Vietnam Pro (tiêu đề lớn).
 *
 * ĐỔI FONT TIÊU ĐỀ 12/08/2026 — Sora -> Be Vietnam Pro.
 * Lý do: Google Fonts chỉ phát hành Sora với subset `latin` + `latin-ext`. Dải
 * U+1EA0–U+1EF1 (toàn bộ chữ có dấu thanh: ạ ả ấ ầ ậ ế ề ệ ộ ớ ợ ứ ữ ự ị ọ) và cả
 * ă đ ơ ư ũ ỹ đều nằm NGOÀI hai subset đó, nên trình duyệt không dùng Sora cho các
 * ký tự ấy mà rơi xuống font kế tiếp -> mọi tiêu đề tiếng Việt trộn 2 font, dòng chữ
 * gợn sóng. Đã đo bằng bề rộng glyph: 23/28 ký tự tiếng Việt thử nghiệm rơi dự phòng.
 * Be Vietnam Pro có đủ dấu, khí chất hình học gần Sora nhất, giữ nguyên được toàn bộ
 * cỡ chữ + letter-spacing âm đã đo từ demo gốc.
 *
 * TUYỆT ĐỐI KHÔNG khai báo font tiêu đề trực tiếp trong quy tắc con. Dùng
 * var(--font-title) — đổi font sau này chỉ sửa đúng 1 chỗ ở :root.
 */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --font-title: 'Be Vietnam Pro', 'Manrope', sans-serif;
  /* Viền của các con số "rỗng ruột" cỡ lớn. #e3e6ea cũ chỉ đạt tương phản 1.15:1
     trên nền trắng — ở cỡ 259px mà không đọc ra được thì hiệu ứng chữ rỗng mất
     hết ý nghĩa. #A9B2BC đạt ~3.1:1 (ngưỡng WCAG cho chữ lớn) mà vẫn nhạt. */
  --num-outline: #A9B2BC;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink: #222222;
  --ink-2: #333333;
  --muted: #6b6b6b;
  --line: #ececec;
  /* Nền trang là TRẮNG. Dải xám #F0F2F4 chỉ dùng cho 2 vùng: khối trên cùng
     (hero + đối tác) và khối FAQ — đúng bản dựng gốc, không phải nền toàn trang. */
  --bg-page: #ffffff;
  --bg-band: #F0F2F4;
  /* Ruột nút viền gradient: mặc định bằng nền trang, khối nào nền khác thì
     khai báo lại biến này để viên nút không bị lộ mảng trắng. */
  --btn-fill: var(--bg-page);
  --bg-pill: #ffffff;
  --active-bg: #333333;
  --active-fg: #ffffff;
  --cta-border: #e24c4a;
  --cta-fg: #111111;
  --gradient-accent: linear-gradient(235deg, #e24c4a 15%, #386bb7 96%);
  --radius-pill: 50px;   /* CHỈ dùng cho phần tử thật sự tròn hết cỡ: active-pill, CTA, search */
  --radius-bar: 25px;    /* menu_bg / footer bg trong Figma: bo 25px, KHÔNG phải viên thuốc */
  /* Figma: menu_bg (header) VÀ footer Background đều đo đúng 1830px trên khung 1920px
     (lề trái/phải ~45-48px mỗi bên) — 2 khối này LUÔN dùng chung 1 container. Trước để
     1440px (chọn tuỳ ý, không bám theo Figma) nên nền tối cuối trang bị bó hẹp, lộ viền
     trắng 2 bên quá dày so với bản gốc. Đổi đúng 1830px, áp dụng thống nhất mọi nơi. */
  --container: 1830px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-page);
}
body.sidebar-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 24px;
  /* Dải header TRONG SUỐT: nền xám của khối trên cùng phải chạy liền lên tận
     mép trang, viên pill mới "nổi" trên nền như bản gốc. Để nền đục là có 1
     vạch trắng cắt ngang ngay dưới header. */
  background: transparent;
  transition: transform .32s ease;
  will-change: transform;
}

/* ---- Trạng thái DÍNH khi cuộn (site.js gắn .is-stuck / .is-hidden) --------
   Đo trên demo gốc: thanh dính là `position:fixed; top:0`, CHỈ có thanh trắng
   (không kéo theo thanh liên hệ tối), `border-radius: 0 0 25px 25px` (góc trên
   VUÔNG, dán sát mép) và `box-shadow: 0 5px 23px 4px rgba(0,0,0,.1)`.
   Cuộn xuống thì trượt mất, cuộn lên mới trượt xuống lại.
   Ở đây giữ nguyên position:sticky và chỉ dùng transform — không đổi chiều cao
   nên không làm nội dung phía dưới nhảy. Số kéo lên = phần nằm TRÊN thanh trắng:
     trang chủ  : đệm trên 18
     trang trong: 8 + thanh 38 + khe 9 = 55  */
.site-header.is-stuck { transform: translateY(-18px); }
.site-header:has(.site-topbar).is-stuck { transform: translateY(-55px); }
.site-header.is-stuck .site-header__bar {
  border-radius: 0 0 var(--radius-bar) var(--radius-bar);
  box-shadow: 0 5px 23px 4px rgba(17, 17, 17, .10);
}
/* Phải đặt CUỐI: cùng độ ưu tiên với 2 rule trên, thắng nhờ thứ tự. */
.site-header.is-stuck.is-hidden { transform: translateY(-100%); }

/* ---- Thanh liên hệ trên cùng (CHỈ trang trong: about/team…) ----------------
   Figma 09_About: khung header cao 147 = thanh tối 1830×38 bo 15 (y=0)
   + khe 9 + thanh trắng 1830×100 (y=47); khung bắt đầu ở y=8.
   Frame 01_Home KHÔNG có thanh này (header chỉ cao 100) — nên nó là markup
   riêng của trang trong, không đưa vào index.html. */
.site-header:has(.site-topbar) { padding-top: 8px; }
.site-topbar {
  max-width: var(--container);
  margin: 0 auto 9px;
  min-height: 38px;
  border-radius: 15px;
  background: var(--ink-2);
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 47px;                 /* Figma: "Call us" kết thúc 192.9, "Email" bắt đầu 240 */
  padding: 4px 33px 4px 38px;    /* Figma: chữ trái x=38.4, icon phải kết thúc 1796.6 */
}
.site-topbar__item {
  margin: 0;          /* <p> mặc định có margin 1em -> thanh phình lên 56 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}
.site-topbar__item span { opacity: .65; font-weight: 400; }
.site-topbar__item b { font-weight: 600; }
.site-topbar__socials {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 20px;                     /* Figma: tâm 4 icon cách nhau 32, icon ~12.5 */
}
.site-topbar__socials a { display: inline-flex; }
.site-topbar__socials img {
  width: 14px;
  height: 14px;
  /* Bộ icon này VỐN đã là màu sáng #f5f5f5 (vẽ cho nền tối của footer) nên KHÔNG
     được lọc invert — icon Instagram là ô đặc khoét lỗ, invert sẽ bịt kín thành
     một ô trắng đặc. */
  opacity: .9;
  transition: opacity .18s;
}
.site-topbar__socials a:hover img { opacity: 1; }
@media (max-width: 960px) {
  .site-topbar { display: none; }
  .site-header:has(.site-topbar) { padding-top: 18px; }
  /* Không còn thanh liên hệ nên phần trên thanh trắng chỉ còn đệm 18. */
  .site-header:has(.site-topbar).is-stuck { transform: translateY(-18px); }
  .site-header.is-stuck.is-hidden,
  .site-header:has(.site-topbar).is-stuck.is-hidden { transform: translateY(-100%); }
}

.site-header__bar {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "sidebar-toggle logo nav actions";
  align-items: center;
  /* ĐO LẠI THEO FIGMA (01_Home + 09_About giống hệt nhau, khung 1830):
       thanh trắng   1830 × 100, bo 25
       nút 4 ô vuông ô 42 bắt đầu x=24  (icon 19.6 ở x=36)
       logo          x=121 (rộng 47.2, cao 25)  -> khe logo 55 sau nút
       menu          x=534 rộng 695, viên active 106×38 bo 19
       icon tìm kiếm phải cùng CTA cách nhau 44
       CTA           196×58 (viền 2 -> ngoài 198×60), mép phải cách 20
     column-gap = 0, các khe đặt riêng cho từng cột vì chúng khác nhau hẳn. */
  column-gap: 0;
  background: var(--bg-pill);
  border-radius: var(--radius-bar);
  min-height: 100px;
  padding: 12px 20px 12px 24px;
  box-shadow: 0 8px 30px rgba(17, 17, 17, .07);
}

.sidebar-toggle { grid-area: sidebar-toggle; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); flex-shrink: 0; }
.sidebar-toggle:hover { background: #f1f1f1; }
.sidebar-toggle img { width: 18px; height: auto; }

/* data-cms="nav" bọc logo + nav-list nhưng không được tạo hộp layout riêng
   (display:contents) để logo/nav vẫn nằm đúng 2 cột grid độc lập của bar. */
.site-header__brand-nav { display: contents; }

.site-logo { grid-area: logo; display: flex; align-items: center; margin-left: clamp(14px, 2.9vw, 55px); }
.site-logo img { height: 25px; width: auto; }

/* Menu bắt đầu ở x=534 trong thanh 1830 — sau logo (kết thúc 168.2) còn 365.8.
   Dùng clamp theo vw để màn hẹp hơn tự thu lại thay vì đẩy CTA tràn ra ngoài. */
.site-nav { grid-area: nav; min-width: 0; padding-left: clamp(14px, 19.05vw, 366px); }
/* KHÔNG dùng flex-wrap: wrap. Menu xuống 2 dòng không phải là "co giãn tốt" —
   nó làm header cao gấp đôi (100 -> 136px) và hàng dưới canh trái lệch hẳn khỏi
   hàng trên, trong khi logo/CTA vẫn canh giữa theo 1 hàng. Figma: thanh header
   1830x100, menu MỘT hàng. Thà thu nhỏ đệm/khe rồi chuyển hẳn sang sidebar còn
   hơn để nó âm thầm gãy dòng. */
.nav-list { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
/* Figma: viên active 106×38 bo 19 — viên BAO CẢ chữ lẫn chấm caret
   (25 + chữ 39 + 16 + chấm 5 + 21 = 106), nên nền active nằm ở .nav-item
   chứ không phải ở riêng .nav-link như trước. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 38px;
  padding: 0 24px;
  border-radius: 19px;
  transition: background .18s;
}
.nav-item:has(.nav-link[aria-current="page"]) { background: var(--active-bg); }
.nav-item:has(.nav-link[aria-current="page"]) .nav-link { color: var(--active-fg); }
.nav-item:hover:not(:has(.nav-link[aria-current="page"])) { background: #f1f1f1; }

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s;
}
/* (Sidebar dùng .sidebar-nav-link riêng — nền active của nó khai báo ở khối SIDEBAR.) */

/* Caret chỉ hiện khi item thực sự có submenu (nav-children còn trong DOM) */
.nav-caret { display: none; align-items: center; justify-content: center; width: 7px; height: 9px; padding: 0; flex-shrink: 0; }
.nav-item:has(.nav-sublist) .nav-caret,
.sidebar-nav-item:has(.nav-sublist) .nav-caret { display: inline-flex; }
/* icon-caret.svg là hình tam giác bo góc 4.47x5.50, hướng LÊN.
   Trạng thái ĐÓNG phải chỉ XUỐNG (quy ước chung của mọi dropdown) — trước đây để
   nguyên hướng lên khi đóng rồi mới xoay 180 khi mở, tức là ngược hoàn toàn.
   Kèm theo: đặt cả width lẫn height theo đúng tỉ lệ gốc, và phóng từ 5px lên 7px
   cho nhìn ra được (5x5 gần như vô hình). */
.nav-caret img { width: 7px; height: 8.6px; transition: transform .18s; transform: rotate(180deg); }
.nav-item.is-open .nav-caret img, .nav-item:hover .nav-caret img,
.sidebar-nav-item.is-open .nav-caret img { transform: rotate(0deg); }

.nav-sublist {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(17, 17, 17, .14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 20;
}
.nav-item:hover .nav-sublist,
.nav-item:focus-within .nav-sublist,
.nav-item.is-open .nav-sublist {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-sublink {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-sublink:hover { background: #f4f4f4; }
.nav-sublink[aria-current="page"] { background: #f4f4f4; font-weight: 800; }

/* ============ ACTIONS: search + CTA ============ */
/* Figma: kính lúp 17×18 tâm x=1549.5, CTA bắt đầu 1614 -> khe 44 */
.site-header__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px, 2.3vw, 44px); }
.nav-search { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); flex-shrink: 0; }
.nav-search:hover { background: #f1f1f1; }
.nav-search img { width: 17px; height: auto; }

/* CTA viền gradient (Figma: stroke gradient đỏ→xanh, không phải viền màu phẳng) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma: khung nút 196×58, viền 2 vẽ giữa nét -> hộp ngoài 198×60 */
  min-width: 198px;
  height: 60px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--bg-pill), var(--bg-pill)) padding-box,
              var(--gradient-accent) border-box;
  font-size: 16px;
  font-weight: 600;
  color: var(--cta-fg);
  white-space: nowrap;
  transition: color .18s;
}
.btn-cta:hover { background: var(--gradient-accent) border-box; color: #fff; }

/* ============ SIDEBAR (mở bằng nút 4-ô-vuông trên header, mọi kích thước màn hình) ==== */
.site-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 300;
}
.site-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(340px, 86vw);
  background: #fff;
  box-shadow: 20px 0 50px rgba(17, 17, 17, .18);
  z-index: 301;
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow-y: auto;
}
body.sidebar-open .site-sidebar-backdrop { opacity: 1; visibility: visible; }
body.sidebar-open .site-sidebar { transform: translateX(0); }

.site-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.site-sidebar__head .site-logo img { height: 24px; width: auto; }
.sidebar-close {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; border-radius: 50%; color: var(--ink-2);
}
.sidebar-close:hover { background: #f1f1f1; }

.sidebar-nav { flex: 1; }
.sidebar-nav-list { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-item { position: relative; }
.sidebar-nav-item .nav-caret { position: absolute; right: 14px; top: 19px; }
.sidebar-nav-link {
  display: flex; align-items: center;
  padding: 13px 40px 13px 14px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--ink-2);
}
.sidebar-nav-link[aria-current="page"] { background: var(--active-bg); color: #fff; }
.sidebar-nav-link:hover:not([aria-current="page"]) { background: #f4f4f4; }
/* Submenu trong sidebar: xổ xuống tại chỗ (không phải dropdown nổi như bản desktop) */
.sidebar-nav-item .nav-sublist {
  position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
  max-height: 0; overflow: hidden; padding: 0 0 0 14px; transition: max-height .2s ease;
}
.sidebar-nav-item.is-open .nav-sublist { max-height: 240px; padding: 4px 0 6px 14px; }

.sidebar-cta { margin-top: 18px; width: 100%; }

/* ============ MOBILE TOGGLE cũ đã bỏ — sidebar-toggle dùng chung mọi kích thước ======= */

/* Khoảng 960 < w < 1700: thanh 1830px của Figma không còn chỗ. Bảy mục tiếng Việt
   (Figma chỉ có 6 mục tiếng Anh ngắn) cộng đệm 24px mỗi bên là quá khổ — đo được
   ở 1600/1440/1366/1280 menu đều xuống 2 dòng. Ở đây thu đệm + khe + bỏ
   letter-spacing (demo gốc dùng letter-spacing normal, ta tự thêm .3px làm mỗi
   mục rộng thêm ~6%). Giữ nguyên số Figma ở >=1700. */
@media (max-width: 1700px) {
  .site-nav { padding-left: clamp(12px, 5vw, 120px); }
  .nav-item { padding: 0 clamp(7px, 1.1vw, 18px); gap: 8px; }
  .nav-link { letter-spacing: 0; }
}
@media (max-width: 1200px) {
  .nav-item { padding: 0 clamp(5px, .8vw, 12px); gap: 6px; }
  .nav-link { font-size: 13px; }
}

/* ============ MOBILE (<=960px) ============ */
@media (max-width: 960px) {
  .site-header__bar {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "sidebar-toggle logo actions";
    min-height: 0;
    padding: 10px 14px;
    border-radius: 24px;
  }
  .site-nav { display: none; }
  .site-header__actions { gap: 6px; }
  .btn-cta { height: 46px; padding: 0 18px; font-size: 13.5px; min-width: 0; }
  .nav-search { width: 36px; height: 36px; }
  .sidebar-toggle { width: 38px; height: 38px; }
}

/* ============ HERO (slider) ============ */
/* Figma "Slider": mỗi slide đổi CẢ tiêu đề/mô tả/nút VÀ ảnh nền cùng lúc. Card
   ảnh gốc là 1 mask hữu cơ (Ooze blob) — đơn giản hoá thành ảnh bo góc
   var(--radius-bar) như mọi khối ảnh khác trong site. Mô tả + nút "Discover"
   trong Figma đặt tuyệt đối bên PHẢI tiêu đề (không nằm dưới) — quy về lưới 2
   cột co giãn để không vỡ khi chữ tiếng Việt dài hơn bản gốc tiếng Anh.
   BĂNG CHUYỀN — nhưng chỉ 2 thứ chạy: khối chữ (.hero-top) và tấm ảnh
   (.hero-media-img). Khung ảnh, nút nav, nút "Xem video", logo đè giữa ảnh đều
   ĐỨNG YÊN.
   Cách làm: các slide xếp CHỒNG lên nhau (grid cùng grid-area 1/1) nên mọi
   khung ảnh + nút của mọi slide trùng khít một chỗ -> nhìn ra như một bộ nút
   cố định duy nhất. Riêng chữ và ảnh của slide thứ k thì dịch (k - hiện tại)
   x 100%: slide đang xem ở 0, slide kế nằm chờ ở +100% (bị cắt), kéo tới đâu
   lộ ra tới đó. Hai lớp ảnh ăn khớp nhau vì mỗi khung tự cắt ảnh của mình.
   (Bản trước xếp slide NGANG cạnh nhau nên nút nav/Xem video trôi theo — sai.)
   Grid xếp chồng cũng giữ nguyên ưu điểm cũ: chiều cao tự co theo slide CAO
   NHẤT, không giật layout khi 2 slide có độ dài chữ khác nhau. */
.hero {
  position: relative;
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 24px auto 0;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 24px) 0;
  cursor: grab;            /* đặt ở ĐÂY chứ không phải .hero-slide: rìa padding
                              và khoảng trống quanh slide cũng phải ra bàn tay,
                              nếu không người dùng phải rê trúng slide mới thấy */
}
/* Cắt phần chữ đang trượt ở ĐÂY chứ không phải ở .hero: overflow cắt theo
   PADDING box, mà .hero có padding ngang 24px nên đặt ở đó thì chữ slide kế
   vẫn ló ra 24px mỗi bên. .hero-slides rộng đúng 1 slide nên cắt vừa khít.
   (Ảnh thì đã có .hero-media tự cắt rồi.) */
.hero-slides { display: grid; overflow: hidden; }
.hero-slide { grid-area: 1 / 1; min-width: 0; }
/* Slide đang xem nằm trên cùng để nút nav / "Xem video" của nó là cái nhận
   click, không bị bản sao của slide khác đè lên. */
.hero-slide.is-active { z-index: 1; }

/* CHỈ 3 thứ này chạy: khối chữ, tấm ảnh, và logo đè giữa ảnh (logo là một lớp
   dán trên ảnh nên phải đi cùng ảnh). Khung ảnh, nút nav, nút "Xem video"
   đứng yên. */
.hero-top,
.hero-media-img,
.hero-media-brand {
  will-change: transform;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* Đang kéo thì tắt transition để bám theo tay 1:1; thả ra mới bật lại. */
.hero.is-dragging .hero-top,
.hero.is-dragging .hero-media-img,
.hero.is-dragging .hero-media-brand { transition: none; }

.hero-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.hero-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 80px);
  line-height: 1.125;
  letter-spacing: -2.4px;
  color: #111;
}
.hero-em {
  font-style: normal;
  background: linear-gradient(248.86deg, #e24c4a 14.51%, #386bb7 95.96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-subtitle {
  margin: 0 0 24px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--ink-2);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 28px;
  background: var(--active-bg);
  color: var(--active-fg);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  transition: background .18s;
}
.hero-cta:hover { background: #111; }
.hero-cta-ic { display: inline-flex; width: 9px; height: 9px; flex-shrink: 0; }
.hero-cta-ic img { width: 100%; height: 100%; transform: rotate(90deg); }

.hero-media {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  aspect-ratio: 1830 / 499;
  border-radius: var(--radius-bar);
  overflow: hidden;
  /* KHÔNG đặt nền đục ở đây: các slide xếp chồng nhau, nền đục của khung slide
     trên sẽ che mất tấm ảnh của slide dưới đúng lúc 2 ảnh đang trượt qua nhau. */
}
.hero-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Logo đè giữa ảnh — đối chiếu demo gốc (artureanec neuros): wordmark trắng
   đè giữa MỌI slide, không phải rác template như tôi tưởng lúc đầu. Tái dùng
   logo + tên site thật, hardcode (lý do xem comment trong index.html). */
/* Căn giữa bằng inset+flex chứ KHÔNG bằng transform:translate(-50%,-50%) như
   trước: khối này phải trượt cùng tấm ảnh, mà slider lại điều khiển bằng
   transform — để nguyên cách cũ thì lệnh dịch của slider ghi đè mất phần căn
   giữa, logo văng đi mất. */
.hero-media-brand {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.hero-media-brand img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.hero-media-brand span {
  font-family: var(--font-title);
  font-size: clamp(14px, 2.4vw, 20px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Mũi tên prev/next — LẤY THẲNG TỪ FIGMA, node 1:520 "Navigation" (60x176).
   Figma KHÔNG dựng khối này bằng bo góc CSS mà là một hình SVG gồm 3 mảnh:
     - thân pill 60x136 (y 20..156), chỉ bo 2 góc PHẢI bán kính 25
     - 1 miếng LÕM 20x20 ở đầu trên  (Vector 16)
     - 1 miếng LÕM 20x20 ở đầu dưới  (Vector 17)
   Chính 2 miếng lõm đó tạo đường cong nối mượt từ pill ra mép ảnh — thứ mà
   border-radius không bao giờ tạo được (đó là lý do các lần dựng trước sai).
   Path của miếng lõm cùng họ với footer-corner-accent / hero-video-corner-accent.
   => Tách riêng hero-nav-shape.svg làm nền, giữ nguyên 2 nút bên trong chỉ để
   chứa icon + bắt click.
   Vị trí: Figma đặt Navigation ở top 813, khối ảnh ở top 550 cao 499
   => cách mép TRÊN ảnh 263/499 = 52.7%. Kích thước cố định đúng như Figma. */
.hero-nav {
  position: absolute;
  left: 0;
  top: 52.7%;
  z-index: 2;
  width: 60px;
  height: 176px;
  box-sizing: border-box;
  padding: 20px 0;          /* 20px đầu trên + 20px đầu dưới là phần lõm */
  background: url(../img/hero-nav-shape.svg) no-repeat 0 0 / 60px 176px;
  display: flex;
  flex-direction: column;
}
.hero-nav-btn {
  width: 60px;
  height: 68px;             /* 136 / 2 */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.hero-nav-btn img { width: 10px; height: auto; filter: brightness(0); opacity: .55; transition: opacity .15s; }
.hero-nav-btn:hover img { opacity: .9; }
.hero-nav-prev img { transform: rotate(-90deg); }  /* icon gốc chỉ LÊN */
.hero-nav-next img { transform: rotate(90deg); }
.hero--single .hero-nav { display: none; }

/* Kéo ngang để chuyển slide. touch-action:pan-y để trên mobile vẫn vuốt dọc
   cuộn trang bình thường, chỉ vuốt ngang mới rơi vào tay JS của slider.
   Con trỏ "grab" báo cho người dùng biết khối này kéo được — nhưng phải trả lại
   "pointer" cho các thứ bấm được, vì cursor là thuộc tính kế thừa. */
.hero { touch-action: pan-y; }
.hero.is-dragging, .hero.is-dragging * { cursor: grabbing; user-select: none; }
.hero-cta, .hero-nav-btn, .hero-watch { cursor: pointer; }
.hero-media-img, .hero-media-brand img { -webkit-user-drag: none; user-select: none; }
.hero--single { cursor: default; }

/* "Xem video" — Figma node 1:526 "Video". Đối chiếu lại toạ độ gốc:
     panel (1:527) 302x88 tại x 1574..1876 / y 961..1049
     khối ảnh          1830x499 tại x   45..1875 / y 550..1049
   => panel nằm LỌT HẲN trong ảnh, sát góc dưới-phải (right:0; bottom:0),
      bo 2 góc chéo trên-trái + dưới-phải 25px.
   3 chỗ trước đây sai, nay sửa:
     1. bottom:0 + translateY(50%) làm nút thò hẳn nửa thân ra ngoài đáy ảnh
        — Figma không hề thò ra, mà sát mép đáy.
     2. right: clamp(16px,3vw,24px) đẩy nút thụt vào — Figma sát mép phải.
     3. miếng lõm góc trên-phải đặt ở right:-20px (ra ngoài mép ảnh) —
        đúng phải là right:0; top:-20px (nằm TRÊN panel, canh mép phải ảnh).
   Kích thước cố định 302x88 đúng Figma, nội dung căn giữa để đổi ngôn ngữ
   (Watch video -> Xem video) không bị lệch. */
.hero-watch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 302px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #f0f2f4;
  border-radius: var(--radius-bar) 0 var(--radius-bar) 0;
  z-index: 2;
}
.hero-watch-play { position: relative; width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.hero-watch-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-watch-tri { width: 15px; height: 15px; transform: rotate(90deg); }
.hero-watch-text { font-size: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hero-watch-corner { position: absolute; width: 20px; height: 20px; pointer-events: none; }
/* Figma dùng CÙNG 1 hướng cho cả 2 miếng lõm (không lật) — nên bỏ scaleY(-1). */
.hero-watch-corner--bl { left: -20px; bottom: 0; }
.hero-watch-corner--tr { right: 0; top: -20px; }

@media (max-width: 860px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4 / 3; margin-top: 24px; }
  .hero-nav { display: none; }
  /* Mobile: bỏ khổ cố định 302px, co theo nội dung + tự padding vì không còn
     căn giữa trong khung rộng nữa. */
  .hero-watch { position: static; margin-top: 16px; width: fit-content; padding: 0 24px; }
  .hero-watch-corner { display: none; }
}
@media (max-width: 480px) {
  .hero-watch { height: auto; padding: 14px 20px; }
}

/* ============ FOOTER ============ */
/* Liền ngay dưới .contact-band (không cách, không bo góc trên) — xem ghi chú ở đó. */
.site-footer {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 0 auto 40px;
  padding: 40px clamp(24px, 5vw, 64px) 0;
  background: #1f1f1f;
  border-radius: 0 0 var(--radius-bar) var(--radius-bar);
  color: #f5f5f5;
  /* .footer-bottom là 1 thanh TRẮNG bo góc trên, nằm lọt trong khối tối này (đúng
     Figma — trước đây tôi tưởng nhầm là rác thiết kế nên bỏ qua). overflow:hidden
     để góc dưới vuông của thanh trắng bị cắt theo đúng góc bo của footer. */
  overflow: hidden;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 420px;
  max-width: 660px;
}
/* logo gốc màu #333333 (đúng cho nền sáng) — nền footer tối nên ép trắng bằng filter,
   không cần thêm field ảnh riêng, vẫn dùng chung đúng 1 site.logo cho toàn site. */
.footer-logo img { height: 25px; width: auto; filter: brightness(0) invert(1); }
.footer-tagline {
  margin: 34px 0 0;   /* Figma: đáy logo 1208 -> hộp chữ ≈1242 */
  max-width: 660px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 60px);
  line-height: 1.17;
  letter-spacing: -1.8px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-col { min-width: 140px; }
.footer-col h4 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  color: #f5f5f5;
}
.footer-list { display: flex; flex-direction: column; gap: 8px; }
.footer-list a {
  font-size: 16px;
  color: #f5f5f5;
  opacity: .85;
  transition: opacity .15s;
}
.footer-list a:hover { opacity: 1; text-decoration: underline; }

.footer-bottom {
  position: relative; /* neo 2 icon góc .footer-corner-accent */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* Figma: thanh trắng thụt vào 262px mỗi bên so với nền đen rộng 1830px (~14.3%) —
     giờ container site đã khớp đúng Figma nên dùng thẳng số gốc, không cần quy đổi. */
  margin: 0 clamp(16px, 14.3vw, 262px);
  min-height: 60px;   /* Figma: thanh trắng cao đúng 60 */
  padding: 0 clamp(24px, 4vw, 48px);
  background: #fff;
  border-radius: var(--radius-bar) var(--radius-bar) 0 0;
}
.footer-copy { font-size: 14px; color: #6b6b6b; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Hai link chính sách vỡ 2 dòng cạnh nhau trông như 4 dòng lởm chởm ở 390.
   Giữ mỗi link liền một dòng, thiếu chỗ thì xuống hàng nguyên cụm. */
.footer-legal a { font-size: 14px; color: #6b6b6b; white-space: nowrap; }
.footer-legal a:hover { text-decoration: underline; }

/* 2 icon góc (Vector 16/17 Figma) — đặt đè ra ngoài mép trái/phải thanh trắng, sát đáy,
   tạo độ cong kép "trắng khuyết - đen lượn" mượt hơn bo góc đơn thuần. site-footer đã
   overflow:hidden nên icon có bị hụt margin ở màn hình rất hẹp cũng không tràn ra ngoài. */
.footer-corner-accent {
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.footer-corner-accent--left { left: -20px; }
.footer-corner-accent--right { right: -20px; transform: scaleX(-1); }

/* Nút "lên đầu trang" — nổi cố định trên viewport (KHÔNG nằm trong layout footer),
   chỉ hiện khi cuộn xuống (site.js toggle .is-visible). Icon xuất từ Figma
   (node Top_button, xoay -90deg để mũi tên chỉ lên đúng như thiết kế). */
.footer-top-btn {
  position: fixed;
  /* Đẩy ra ngoài cột nội dung khi còn chỗ (màn >= ~1500), hẹp hơn thì bám mép.
     Kèm auto-ẩn khi footer lọt khung (site.js) — hai thứ này cùng làm giảm hẳn
     số chỗ nút đè lên nội dung. Vẫn không triệt tiêu được 100% ở khổ hẹp: đó là
     bản chất của nút nổi cố định. */
  right: max(16px, calc((100vw - 1340px) / 2 - 84px));
  bottom: 28px;
  z-index: 250;
  width: 60px;
  height: 42px;
  padding: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  filter: drop-shadow(0 10px 20px rgba(17, 17, 17, .25));
}
.footer-top-btn.is-visible { opacity: 1; visibility: visible; }
.footer-top-btn img { width: 100%; height: 100%; display: block; }

/* (Đệm trên/dưới của .footer-top cho màn nhỏ nằm ở khối "ĐO LẠI THEO BẢN GỐC"
   phía dưới file — phải đặt SAU rule 155/100 mới thắng được, media query
   không tự có độ ưu tiên cao hơn.) */
@media (max-width: 640px) {
  .footer-top { flex-direction: column; gap: 32px; }
  /* flex-basis: 660px (rule .footer-brand ở cuối file) là bề RỘNG khi hàng nằm
     ngang. Đổi sang flex-direction:column thì trục chính thành trục dọc, 660px
     biến thành CHIỀU CAO -> 536px trống đen giữa slogan và cột "Công ty".
     Phải reset cả flex-basis, không chỉ max-width. */
  .footer-brand { max-width: 100%; flex: 0 0 auto; }
  .footer-col { width: auto; }
  .site-footer { padding-top: 40px; }
  .footer-top-btn { right: 16px; bottom: 16px; width: 60px; height: 42px; }
}

/* CTA cuối trang đơn giản (.cta-band, content.cta[trang]) đã bỏ CSS ở site này —
   không dùng trên trang chủ nữa. Tính năng vẫn còn nguyên trong core/admin, cần lại
   cho trang khác thì thêm CSS tương ứng lúc đó. */

/* ============ GET IN TOUCH (contact + contact-form — dùng nhiều trang) ============ */
/* Liền nền với footer ngay bên dưới (không cách, không bo góc dưới) — 2 khối
   trông như 1 mảng tối liên tục, đúng bố cục gốc trong Figma. */
.contact-band {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 24px auto 0;
  padding: clamp(28px, 4vw, 48px);
  background: #1f1f1f;
  border-radius: var(--radius-bar) var(--radius-bar) 0 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  /* Figma: khoảng cách 2 cột = 111px trên container 1830px — giờ container site đã
     khớp đúng Figma nên dùng thẳng số gốc, không cần quy đổi tỉ lệ nữa. */
  gap: clamp(24px, 6.1vw, 111px);
  align-items: start;
}
.contact-info { color: #f5f5f5; padding: 12px 0; }
.contact-eyebrow { margin: 0 0 16px; font-size: 14px; font-weight: 500; color: #f5f5f5; }
.contact-eyebrow::before { content: '/ '; }
.contact-eyebrow::after { content: ' /'; }
.contact-heading {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -1px;
}
.contact-lead {
  max-width: 480px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 245, 245, .8);
}
.contact-info-grid {
  display: grid;
  /* 1fr 1fr chia đôi cứng: ô "Địa chỉ" chỉ được ~230px nên địa chỉ vỡ 4 dòng, ngắt
     giữa "TP." và "Hồ Chí Minh", trong khi ô "Hotline" bên cạnh trống mênh mông.
     auto-fit + minmax cho ô nào cần rộng thì được rộng. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px 40px;
  margin-top: 40px;
}
/* Địa chỉ là chuỗi dài nhất — cho nó ăn 2 cột khi còn chỗ, khỏi ngắt vụn. */
.contact-info-item--address { grid-column: span 2; }
@media (max-width: 700px) { .contact-info-item--address { grid-column: auto; } }
.contact-info-item h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
/* text-wrap:pretty tránh ngắt để lại cụm cụt kiểu "TP." / "Hồ Chí Minh". */
.contact-info-item p, .ms-info-item, .tm-card-role { text-wrap: pretty; }
.contact-info-item p { margin: 0; font-size: 16px; line-height: 1.75; color: #f5f5f5; }
.contact-social-icons { display: flex; gap: 16px; align-items: center; }
/* Cả 3 file icon giờ đều có viewBox vuông (glyph Facebook đã canh giữa lại trong
   khung vuông riêng) nên cho kích thước cố định như nhau — đồng cỡ thật, không
   lệ thuộc tỉ lệ gốc từng icon nữa. */
.contact-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; opacity: .85; transition: opacity .15s; }
.contact-social-icons a:hover { opacity: 1; }
.contact-social-icons a img { width: 100%; height: 100%; display: block; }
.contact-form-card { background: #fff; border-radius: var(--radius-bar); padding: clamp(28px, 4vw, 48px); }
.contact-form-heading {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  /* cỡ cứng 28px làm "Kết nối với chúng tôi" vỡ dòng bỏ lại "tôi" mồ côi ở 390 */
  font-size: clamp(22px, 5.6vw, 28px);
  letter-spacing: -.6px;
  color: #111;
}
.contact-form-sub { margin: 12px 0 28px; font-size: 16px; line-height: 1.6; color: #333; }
.cf-field { margin-bottom: 26px; }
.cf-input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #adadad;
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #111;
  outline: none;
  resize: none;
}
.cf-input::placeholder { color: #898989; }
.cf-input:focus { border-bottom-color: #111; }
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  margin-top: 6px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: var(--radius-bar);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s;
}
.contact-submit:hover { background: #111; }
.contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-submit-ic { display: inline-flex; width: 9px; height: 9px; flex-shrink: 0; }
.contact-submit-ic img { width: 100%; height: 100%; transform: rotate(90deg); }
.contact-form-msg { margin: 14px 0 0; font-size: 14px; min-height: 1em; }
.contact-form-msg[data-state="success"] { color: #2f9e44; }
.contact-form-msg[data-state="error"] { color: #e03131; }

@media (max-width: 860px) {
  .contact-band { grid-template-columns: 1fr; }
  .contact-form-card { margin-top: 8px; }
}
@media (max-width: 480px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ============ SLOGAN ============ */
/* Figma node "Slogan" (1750x596). Số đo lấy từ bản export SVG, quy về container
   1830 của site: đồ hoạ ở x -98..594 (thò ra ngoài mép trái ~99px), tiêu đề bắt
   đầu ~38% bề ngang, dải logo nằm sát đáy phần chữ.
   Dùng lưới 2 cột theo đúng tỉ lệ đó thay vì định vị tuyệt đối, để chữ tiếng Việt
   dài hơn bản gốc thì khối tự cao lên chứ không đè lên đồ hoạ. */
.slogan {
  position: relative;
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: clamp(64px, 8vw, 130px) auto 0;
  padding: 0 clamp(16px, 3vw, 24px);
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: end;
  gap: clamp(16px, 3vw, 40px);
  overflow: hidden;   /* cắt phần đồ hoạ thò ra, khỏi đẻ thanh cuộn ngang */
}
/* Đồ hoạ bám ĐÁY khối và thò sang trái đúng như Figma. Đặt aria-hidden ở HTML vì
   nó thuần trang trí, không mang thông tin. */
.slogan-shape {
  grid-column: 1;
  width: clamp(240px, 38vw, 693px);
  height: auto;
  margin-left: clamp(-99px, -5vw, -24px);
  margin-bottom: -1px;      /* khít đáy, tránh khe hở do làm tròn */
  align-self: end;
  pointer-events: none;
}
.slogan-body { grid-column: 2; }
.slogan-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  /* Demo gốc: 100px / lh 110px / letter-spacing -5px trên khung 1920 → quy sang
     đơn vị co giãn để màn nhỏ không vỡ chữ. */
  font-size: clamp(30px, 5.2vw, 100px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #111;
}
/* Dải logo đối tác — mờ 30% đúng fill-opacity trong SVG gốc. Xám hoá để không
   chọi màu với tiêu đề gradient ngay trên nó. */
.slogan-partners {
  list-style: none;
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}
.slogan-partner img {
  display: block;
  height: clamp(28px, 3.2vw, 56px);
  width: auto;
  opacity: .3;
  filter: grayscale(1);
}

@media (max-width: 860px) {
  /* Màn nhỏ: xếp dọc, đồ hoạ xuống dưới và thu nhỏ lại cho khỏi lấn chữ. */
  .slogan { grid-template-columns: 1fr; }
  .slogan-shape { grid-column: 1; grid-row: 2; width: clamp(180px, 55vw, 320px); margin-left: -32px; }
  .slogan-body { grid-column: 1; grid-row: 1; }
}

/* ============ SERVICES (trang chủ) ============ */
/* Figma node "Services" 1343x1118, đặt ở x284 trong khung 1920 => khối này HẸP
   hơn container 1830 của site, thụt vào ~239px mỗi bên. Giữ đúng bề ngang gốc
   bằng max-width riêng thay vì kéo full container.
   Lưới: 3 cột 420 + khe 40 (420*3 + 40*2 = 1340 ≈ 1343). Cao thẻ 561. */
.svc {
  width: calc(100% - 48px);
  max-width: 1343px;
  margin: clamp(72px, 9vw, 150px) auto 0;
}
.svc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.svc-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.svc-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  /* demo gốc: 60px / lh 70 / ls -3px trên khung 1920 */
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
  max-width: 15ch;
}
/* Nút "Khám phá thêm" — cùng khuôn nút đen bo tròn của hero, giữ nhất quán */
.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 28px;
  background: var(--active-bg);
  color: var(--active-fg);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s;
}
.svc-more:hover { background: #111; }
.svc-more-ic { display: inline-flex; width: 9px; height: 9px; flex-shrink: 0; }
.svc-more-ic img { width: 100%; height: 100%; transform: rotate(90deg); filter: brightness(0) invert(1); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.svc-col3 { display: grid; grid-template-rows: auto auto 1fr; gap: 0; }

.svc-card {
  position: relative;
  border-radius: var(--radius-bar);
  overflow: hidden;
  isolation: isolate;
}
.svc-card-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; }
.svc-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

/* Thẻ 1 + 2 cao 561/1343 của khối => giữ tỉ lệ để co giãn đúng */
.svc-card--photo,
.svc-card--grad { aspect-ratio: 420 / 561; }
/* Lớp phủ tối để chữ trắng đọc được trên ảnh — Figma vẽ sẵn trong ảnh, web thì
   ảnh do admin thay nên phải tự phủ, không thì ảnh sáng là mất chữ. */
.svc-card--photo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17,17,17,0) 35%, rgba(17,17,17,.75) 100%);
}
/* Gradient lấy đúng từ SVG: (460,245) -> (860.5,793) = 144deg, chốt màu 44.76% */
.svc-card--grad { background: linear-gradient(144deg, #542F2F 0%, #111111 45%); }

.svc-card--photo .svc-card-txt h3,
.svc-card--grad .svc-card-txt h3 { color: #fff; }
.svc-card--photo .svc-card-txt p,
.svc-card--grad .svc-card-txt p { color: rgba(255,255,255,.72); }
.svc-card-txt h3 {
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.svc-card-txt p { margin: 0; font-size: 15px; line-height: 1.7; }

/* ---- Nút mũi tên GÓC (dùng lại cho mọi thẻ + banner) ----
   Đo trên SVG Figma: góc dưới-phải của thẻ bị KHOÉT một hõm 71x60 bo góc
   trên-trái r=30, mang màu nền trang; trong hõm là hình tròn #111 đường kính
   50 (tâm cách mép phải 35, cách đáy 25 => right:10, bottom:0).
   Hai đầu hõm có 2 miếng lõm 20x20 — path GIỐNG HỆT hero-video-corner-accent.svg
   (đã diff để chắc). Trước dựng bằng mask corner-accent.svg, nay đã chuyển hết
   sang radial-gradient thuần CSS (luật mục 12): màu vẫn do CSS quyết, và mép
   gradient sắc hơn mép mask. Hình khối này lặp lại khắp thiết kế nên làm thành
   khối dùng chung ngay từ đây. */
.corner-cut {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 71px;
  height: 60px;
  background: var(--bg-page);
  border-top-left-radius: 30px;
  z-index: 2;
}
.corner-cut::before,
.corner-cut::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  /* radial-gradient thuần, KHÔNG mask (luật mục 12). Dải chuyển hẹp 19.9->20.1 và
     đi từ TRẮNG-trong-suốt — `transparent` là ĐEN trong suốt, pha ra vệt xám. */
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.corner-cut::before { left: -20px; bottom: 0; }   /* miếng lõm mép trái hõm */
.corner-cut::after  { right: 0; top: -20px; }     /* miếng lõm mép trên hõm */
.svc-go {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 50px;
  height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #111;
  border-radius: 50%;
  transition: background .15s, transform .15s;
}
.svc-go:hover { background: #333; transform: translateX(2px); }
/* icon-form-arrow.svg gốc chỉ LÊN nên phải xoay 90deg mới thành chỉ sang phải */
.svc-go img { width: 11px; filter: brightness(0) invert(1); transform: rotate(90deg); }

/* Cột 3 — thẻ số liệu nền sáng, cao 346/561 phần trên */
.svc-card--stat {
  background: #E9EBED;
  aspect-ratio: 420 / 346;
  overflow: visible;
}
.svc-card--stat .svc-card-in { justify-content: flex-start; padding: 32px; }
.svc-card--stat h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111;
}
.svc-stat {
  margin-top: -104px;      /* số liệu nằm nửa dưới thẻ sáng, theo bố cục Figma */
  padding: 0 32px 24px;
  position: relative;
  text-align: right;
}
.svc-stat-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(36px, 3.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  /* dùng lại đúng gradient thương hiệu, không đẻ token mới */
  background: linear-gradient(248.86deg, #e24c4a 14.51%, #386bb7 95.96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.svc-stat-label { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }

/* Thẻ logo nhỏ — cao 181/561 */
.svc-card--logo { aspect-ratio: 420 / 181; display: grid; place-items: center; }
.svc-poweredby { position: relative; width: clamp(90px, 10vw, 133px); height: auto; }

/* Banner đáy — #528CB0 phủ ảnh, bo 25, cao 294/1338 */
.svc-banner {
  position: relative;
  margin-top: 31px;
  aspect-ratio: 1338 / 294;
  border-radius: var(--radius-bar);
  overflow: hidden;
  isolation: isolate;
  background: #528CB0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(20px, 3vw, 40px);
}
.svc-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .85; }
.svc-banner-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(16px, 1.5vw, 26px);
  color: #fff;
  text-align: center;
}
.svc-banner-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 3.4vw, 46px); }
.svc-banner-icons img { display: block; height: clamp(28px, 2.8vw, 50px); width: auto; }

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .svc-col3 { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: start; }
  .svc-stat { margin-top: 0; text-align: left; padding: 16px 0 0; }
}
@media (max-width: 720px) {
  .svc-head { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-col3 { grid-template-columns: 1fr; }
  .svc-card-in { padding: 24px; }
  .svc-banner { aspect-ratio: auto; padding: 32px 24px; }
  /* Ở 390px, tỉ lệ 420/346 chỉ cho thẻ cao ~283px — tiêu đề tiếng Việt 2-3 dòng
     cộng số liệu là tràn. Bỏ tỉ lệ cứng, để nội dung tự quyết chiều cao. */
  .svc-card--stat { aspect-ratio: auto; min-height: 240px; padding: 24px; }
  /* Hõm nút góc rộng 71px nằm đè góc dưới-phải. Nhãn số liệu canh phải nên chạm
     thẳng vào nó — chữ tiếng Việt (font mới rộng hơn) bị cắt mất đuôi. Chừa chỗ. */
  .svc-card--stat .svc-stat { max-width: 100%; padding-right: 78px; }
  /* Ở khổ hẹp thẻ co lại nhưng hoạ tiết vòng tròn giữ nguyên đậm độ, chữ 14px
     nằm đè lên các đường kẻ -> khó đọc. Làm mờ hoạ tiết đi. */
  .svc-card--stat .svc-deco { opacity: .35; }
  .svc-card--logo { aspect-ratio: 16 / 7; }
}

/* Nút góc thẻ số liệu dùng #333 (Figma: circle r=25 fill #333333, nhạt hơn 3 thẻ kia) */
.svc-go--soft { background: #333; }
.svc-go--soft:hover { background: #444; }
/* Nút phải nổi trên hõm */
.svc-go { z-index: 3; }
/* Thẻ số liệu nay có hõm nên phải cắt như các thẻ khác */
.svc-card--stat { overflow: hidden; }

/* Bỏ bo góc DƯỚI-PHẢI ở mọi khối có hõm nút góc.
   Lý do: hõm là con của thẻ nên bị overflow:hidden cắt theo đường bo 25px của
   thẻ; tại mép cắt khử răng cưa, ảnh nền tối rịn qua thành một sợi chỉ đen hình
   cung, chạy cách nút đúng 10px nên nhìn như quầng quanh nút.
   Trong Figma góc đó vốn VUÔNG (hõm 71x60 lấp kín, path kết thúc bằng L420 793
   không hề bo), nên bỏ hẳn bán kính bên ấy là đúng thiết kế luôn, không phải
   mẹo vá. */
.svc-card,
.svc-banner { border-bottom-right-radius: 0; }

/* ---- SỬA 3 lỗi bố cục Services ----
   1. Bề rộng: demo gốc đo được max-width 1340px (không phải 1343 em làm tròn từ
      khung Figma 1343). Chốt đúng 1340.
   2. Khối "250+" trước đây nằm NGOÀI thẻ rồi kéo ngược lên bằng margin-top âm
      -> đè lên nút góc và lấn sang thẻ dưới. Nay đưa hẳn vào trong thẻ, neo góc
      dưới-phải bằng position, không dùng margin âm nữa.
   3. Khe cột 3: phải đúng 34px (Figma 578 -> 612), trước đây bị margin âm bóp
      còn 7px làm thẻ OpenAI trồi lên cao hơn 2 thẻ bên cạnh.
      346 + 34 + 181 = 561, khớp đúng chiều cao 2 thẻ kia. */
.svc { max-width: 1340px; }

.svc-col3 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  /* PHẢI có: media ≤1024 ở trên đặt align-items:start cho bản GRID cũ. Khối này
     nằm sau nên thắng về display, nhưng align-items:start vẫn còn hiệu lực. Với
     flex-direction:column, align-items điều khiển trục NGANG -> hai thẻ con co
     về bề rộng nội dung. Thẻ .svc-card--stat có MỌI con position:absolute nên bề
     rộng = 0, kéo theo aspect-ratio cho chiều cao = 0 -> thẻ biến mất hẳn ở
     mobile (đo được 0x0). Đừng gỡ dòng này. */
  align-items: stretch;
}

/* Thẻ số liệu: bố cục THEO LUỒNG, không dùng position:absolute nữa.
   Cách cũ (head absolute trên, stat absolute dưới) không có ràng buộc giữa hai
   khối: tiêu đề dài 2-3 dòng là tụt xuống đè lên số liệu. Nay xếp dọc, đẩy hai
   đầu bằng space-between -> vị trí quang học y hệt Figma mà không thể chồng. */
.svc-card--stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 32px;
}
.svc-card-head { position: static; }
.svc-card--stat .svc-card-head h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111;
}
.svc-stat {
  position: static;
  align-self: flex-end;
  margin: 0;
  text-align: right;
  /* chừa chỗ cho hõm nút góc (rộng 71) để chữ không chui xuống dưới nút */
  max-width: calc(100% - 96px);
}
.svc-stat-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(36px, 3.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(248.86deg, #e24c4a 14.51%, #386bb7 95.96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.svc-stat-label { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* Chữ trong thẻ 1 & 2 cũng phải né hõm nút góc, không thì dòng cuối chui xuống
   dưới nút y như lỗi ở thẻ số liệu. */
.svc-card--photo .svc-card-txt,
.svc-card--grad .svc-card-txt { padding-right: 62px; }

/* Lớp đường kẻ trang trí trong thẻ — bóc thẳng từ SVG Figma, giữ nguyên path:
   thẻ Machine Learning có 7 đường chéo đỏ #C94938 đan nhau, thẻ NLP có 10 vòng
   tròn đồng tâm #267799 ở góc dưới-trái. viewBox đặt đúng khung từng thẻ nên
   chỉ cần phủ inset:0 là khớp vị trí gốc, phần tràn ra ngoài thẻ tự bị cắt. */
.svc-deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Chữ phải nổi trên lớp trang trí */
.svc-card--grad .svc-card-in,
.svc-card--stat .svc-card-head,
.svc-card--stat .svc-stat { z-index: 1; }
/* (Bỏ position:absolute ở đây — xem khối "Thẻ số liệu: bố cục THEO LUỒNG" bên trên.
   Hai khối này absolute là nguyên nhân thẻ sập 0px ở mobile và chữ đè lên số.) */
.svc-card--stat .svc-card-head,
.svc-card--stat .svc-stat { position: static; }

/* .svc-card-in mang z-index để nổi trên lớp đường kẻ, nhưng z-index tạo NGỮ
   CẢNH XẾP LỚP mới: nút .svc-go nằm trong đó nên z-index:3 của nó chỉ có giá
   trị bên trong, còn cả khối vẫn ở lớp 1 -> bị hõm (lớp 2) đè mất nút.
   Nâng chính .svc-card-in lên trên hõm là xong; chữ không đè hõm vì đã chừa
   62px bên phải. */
.svc-card--grad .svc-card-in { z-index: 3; }


/* ============================================================
   Moving text — Figma node "Moving text" (1920x386)
   2 thanh nghiêng ngược chiều, chữ chạy ngược chiều nhau.
   Toàn bộ số đo lấy từ SVG export, quy ra % theo khung 1920.
   ============================================================ */
.mtext {
  position: relative;
  /* 386/1920 — giữ đúng tỉ lệ chiều cao của node Figma, nhưng chặn trên/dưới
     để trên màn siêu rộng chữ không phình vô lý. */
  height: 386px;
  overflow: hidden;          /* cắt phần thanh thò ra ngoài mép do nghiêng */
  background: var(--bg-page);
  /* KHÔNG đặt z-index ở đây: mục 3 GHI_CHU — z-index tạo ngữ cảnh xếp lớp,
     section sau đó sẽ không đè lên được. */
}

.mtext-bar {
  position: absolute;
  left: -1.36%;              /* x=-26.07 / 1920 */
  width: 103.56%;            /* 1988.38 / 1920 */
  height: 144px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform-origin: left top;   /* Figma rotate quanh chính điểm x,y của rect */
}

.mtext-bar--red  { top: 62.53px;  background: #F14F44; color: #111111; transform: rotate(1.82972deg); }
.mtext-bar--dark { top: 216.08px; background: #1F1F1F; color: #fff;    transform: rotate(-2.06739deg); }

.mtext-run {
  display: flex;
  flex: none;
  white-space: nowrap;
  will-change: transform;
}

/* 4 bản sao, dịch -50% là đúng 2 bản -> vòng lặp liền mạch không giật. */
.mtext-run--rtl { animation: mtext-rtl 32s linear infinite; }
.mtext-run--ltr { animation: mtext-ltr 32s linear infinite; }

@keyframes mtext-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes mtext-ltr {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.mtext-item {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 80px;           /* cap-height đo được 56px / 0.7 */
  line-height: 1;
  padding-right: 24px;
  /* Canh giữa theo THÂN chữ chứ không theo hộp dòng: hộp dòng của Sora lệch
     xuống vì descender, để nguyên thì chữ chìm dưới tâm thanh ~10px. */
  transform: translateY(-0.045em);
}

/* Người dùng tắt hiệu ứng chuyển động thì đứng yên, không chạy. */
@media (prefers-reduced-motion: reduce) {
  .mtext-run--rtl, .mtext-run--ltr { animation: none; }
}

@media (max-width: 1200px) {
  .mtext { height: 300px; }
  .mtext-item { font-size: 56px; }
  .mtext-bar--red  { top: 44px; height: 108px; }
  .mtext-bar--dark { top: 160px; height: 108px; }
}

@media (max-width: 860px) {
  .mtext { height: 210px; }
  .mtext-item { font-size: 34px; padding-right: 16px; }
  .mtext-bar--red  { top: 30px; height: 70px; }
  .mtext-bar--dark { top: 110px; height: 70px; }
}


/* ============================================================
   About — Figma node "About" (1880x1126)
   ============================================================ */
.about-wrap {
  position: relative;
  max-width: var(--container, 1830px);
  margin: 0 auto;
  /* Chừa chỗ cho thanh chéo: nửa độ chênh của mép chéo là 1830·tan(1.84°)/2 ≈ 29px,
     lấy 62px cho thanh nằm lọt hẳn trong khối. */
  padding-top: 62px;
}

/* Mép trên cắt xiên: thanh dày xoay -2.07deg, nhô lên khỏi thân khối rồi bị
   thân khối (nền cùng màu) che mất mép dưới -> chỉ còn thấy mép trên xiên. */
/* Thanh phải BO 25px giống bản gốc, và rộng đúng bằng khối (không thụt), nếu
   không hai đầu thanh vát nhọn chìa ra khỏi góc bo của khối -> đúng chỗ anh
   thấy "lệch và không bo cong". Góc nghiêng lấy từ path Figma:
   (79.73 - 20.67) / 1840 -> 1.84deg, không phải 2.07deg. */
.about-slant {
  position: absolute;
  left: 0; right: 0;
  top: 30px;
  height: 110px;
  background: #1F1F1F;
  border-radius: 25px;
  transform: rotate(-1.84deg);
  z-index: 0;
}

.about {
  position: relative;
  z-index: 1;
  background: #1F1F1F url(../img/about-waves.svg) no-repeat 100% 100% / 49%;
  /* Bo CẢ 4 GÓC: 2 góc trên tuy bị thanh chéo che nhưng nếu để vuông thì góc
     nhọn của nó thò lên trên đường cong của thanh, thành cái bậc nhỏ ở mép. */
  border-radius: var(--radius-bar, 25px);
  color: #fff;
  /* Collage tràn xuống dưới đáy khối — phải cho phép tràn, KHÔNG overflow:hidden. */
  overflow: visible;
}

.about-in {
  position: relative;
  z-index: 2;              /* chữ luôn nằm TRÊN khối hình chéo, không bị lấp */
  display: flex;
  gap: 110px;
  padding: 100px 242px 40px 243px;
  min-height: 902px;         /* đúng chiều cao thẻ trên Figma (đã gồm padding) */
  box-sizing: border-box;
}

.about-left  { width: 630px; flex: none; }
.about-right { width: 600px; flex: none; }

.about-eyebrow {
  margin: 0 0 2px;
  font-size: 16px; line-height: 28px; font-weight: 500;
  color: #fff;
}

.about-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 60px;
  line-height: 70px;
  color: #fff;
}
.about-title span { display: block; }
.about-title span:empty { display: none; }   /* dòng 2 rỗng thì không chừa chỗ trống */

/* --- Chữ lớn rỗng ruột "Neuro" + chỉ số "AI" --- */
.about-word {
  position: relative;
  margin: 0 0 130px;
  margin-left: -38px;        /* x=945 so với cột phải x=983 */
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 200px;
  line-height: 200px;
  white-space: nowrap;
}
.about-word-main {
  background-image: linear-gradient(262deg, #e24c4a 0%, #386bb7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px transparent;
  -webkit-text-fill-color: #1F1F1F;   /* = màu nền khối -> lấp ruột, chừa viền */
  color: transparent;
}
/* NEO THEO CHỮ, không theo toạ độ.
   Cũ: left: 637px — số đo cứng lấy từ Figma cho từ "Neuro" ở cỡ 200px. Nhưng cỡ
   chữ co theo breakpoint (200 -> 130 -> 84) và nội dung do admin nhập (nay là
   "Agentic", dài hơn "Neuro"), nên chỉ số nhỏ này lúc thì trôi ra xa 190px, lúc
   thì đè lên đuôi chữ. Để inline + vertical-align:top thì nó LUÔN bám sát chữ,
   ở đúng độ cao đỉnh chữ, không cần biết chữ dài bao nhiêu hay cỡ nào. */
.about-word-sup {
  position: static;
  display: inline-block;
  vertical-align: top;
  margin-left: .08em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 25px;
  line-height: 30px;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.about-p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: #fff;
}
.about-p:last-of-type { margin-bottom: 30px; }

.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* min-width thay vì width cố định: nhãn tiếng Việt dài hơn bản gốc, khoá cứng
     155px là chữ xuống dòng trong nút. */
  min-width: 155px; height: 50px;
  box-sizing: border-box;
  padding: 0 22px;
  white-space: nowrap;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.about-cta img {
  width: 10px;
  filter: brightness(0) invert(1);
  transform: rotate(90deg);          /* icon gốc chỉ LÊN -> xoay 90 để sang phải */
  transition: filter .25s;
}
.about-cta:hover { background: #fff; color: #1F1F1F; }
.about-cta:hover img { filter: brightness(0); }

/* Collage: neo theo mép thẻ, tràn ra ngoài trái + đáy đúng như Figma. */
/* top:290px là toạ độ Figma ở khung 1920. Ở 1440 cột chữ hẹp hơn nên tiêu đề dài
   xuống 3 dòng và chạm mảng đỏ. Neo theo ĐÁY khối thay vì theo đỉnh: ảnh luôn nằm
   dưới chân chữ dù tiêu đề dài bao nhiêu. */
.about-collage {
  position: absolute;
  left: -57px;
  top: auto;
  bottom: -120px;
  width: 872px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 1500px) {
  .about-in { padding: 80px 60px 40px; gap: 60px; min-height: 0; }
  .about-left, .about-right { width: auto; flex: 1 1 0; }
  .about-title { font-size: 44px; line-height: 54px; }
  .about-word { font-size: 130px; line-height: 130px; margin-left: 0; margin-bottom: 60px; }
  /* Khối co lại khi min-height về 0, mà collage cao 465px neo theo đáy -> đỉnh nó
     trồi lên chạm chân tiêu đề. Vừa hạ bớt bề rộng (=> thấp hơn) vừa trả lại một
     min-height đủ cho ảnh nằm trọn dưới chữ. */
  .about-in { min-height: 680px; }
  .about-collage { left: -40px; top: auto; bottom: -80px; width: 470px; }
}

@media (max-width: 1024px) {
  .about-in { flex-direction: column; padding: 70px 32px 40px; gap: 32px; }
  .about-collage { position: static; display: block; width: 100%; max-width: 520px; margin: 24px auto 0; }
  /* .about-word có white-space:nowrap; "Agentic" ở 84px (font mới rộng hơn Sora)
     cộng chỉ số "OS" vượt bề rộng cột 278px -> chữ chạy ra ngoài màn hình.
     Cho cỡ chữ bám theo bề ngang màn hình. */
  .about-word { font-size: clamp(48px, 17vw, 84px); line-height: 1; margin-bottom: 30px; }
  .about-word-sup { font-size: clamp(14px, 4vw, 25px); line-height: 1.2; }
  .about-title { font-size: 34px; line-height: 44px; }
  .about-slant { height: 70px; }
}


/* ============================================================
   Features — Figma node "Features" (1345x428)
   ============================================================ */
.feat {
  max-width: 1340px;
  margin: 0 auto;
  padding: 100px 0 0;
  /* Khối hình chéo của About tràn xuống dưới ~112px; nâng lớp để chữ Features
     luôn nằm TRÊN phần tràn đó (ảnh đã pointer-events:none nên không chặn chuột). */
  position: relative;
  z-index: 1;
}

.feat-eyebrow {
  margin: 0 0 2px;
  font-size: 16px; line-height: 28px; font-weight: 500;
  color: #111;
}

.feat-title {
  margin: 0 0 34px;
  max-width: 938px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 60px;
  line-height: 70px;
  color: #111;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 305px);
  gap: 40px;                 /* 345 - 305 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cột co giãn theo chiều dọc để 4 ô icon luôn thẳng hàng dù mô tả dài ngắn khác nhau. */
.feat-item {
  display: flex;
  flex-direction: column;
}

.feat-item-title {
  margin: 0 0 6px;
  font-size: 20px; line-height: 35px; font-weight: 600;
  color: #111;
}

.feat-item-desc {
  margin: 0 0 34px;
  font-size: 16px; line-height: 30px; font-weight: 500;
  color: #333;
}

.feat-item-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 15px;
  background: #E9EBED;
  margin-top: auto;          /* đẩy xuống đáy cột -> 4 icon thẳng hàng */
  flex: none;
}
.feat-item-ic img { width: 56px; height: 56px; display: block; }

@media (max-width: 1420px) {
  .feat { max-width: none; padding-left: 40px; padding-right: 40px; }
  .feat-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
}

@media (max-width: 1024px) {
  .feat-title { font-size: 40px; line-height: 50px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
}

@media (max-width: 640px) {
  .feat { padding: 60px 20px 0; }
  .feat-title { font-size: 30px; line-height: 40px; }
  .feat-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Pricing — Figma node "Pricing" (1340x657)
   ============================================================ */
.price {
  max-width: 1340px;
  margin: 0 auto;
  padding: 100px 0 0;
  display: grid;
  grid-template-columns: 433px 1fr;
  column-gap: 27px;          /* 460 - 433 */
  align-items: start;
}

.price-head { padding-top: 53px; }
.price-eyebrow {
  margin: 0 0 2px;
  font-size: 16px; line-height: 28px; font-weight: 500; color: #111;
}
.price-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400; font-size: 60px; line-height: 70px; color: #111;
}

.price-list {
  margin: 0; padding: 16px 0 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 9px;   /* 341 - 332 */
}

.price-card {
  position: relative;
  min-height: 316px;
  box-sizing: border-box;
  padding: 95px 80px 75px 75px;
  border-radius: var(--radius-bar, 25px);
  display: grid;
  /* 218 + 327 + 154 + 2 khe 16 + padding ngang 155 = 886 ≈ bề ngang thẻ 880.
     Cột giữa để 1fr để không bao giờ tràn ra khỏi thẻ.
     Cột GIÁ: 154px là bề rộng cái NÚT trong Figma, không phải bề rộng ô giá — bản
     gốc tiếng Anh ghi "Free" (132px) nên vừa. Giá tiếng Việt "từ 15.000.000đ" cần
     304px ở cỡ 60px -> bị cắt cụt mất đuôi. Nay cho ô giá nở tới max-content và
     hạ cỡ chữ giá bằng clamp (xem .price-card-price strong bên dưới). */
  grid-template-columns: 218px minmax(0, 1fr) minmax(154px, max-content);
  column-gap: 16px;
  /* Không dùng overflow:hidden — nhãn "Phổ biến" nhô lên mép trên và 2 miếng lõm
     nằm NGOÀI thẻ; cắt đi là mất (bẫy mục 3 GHI_CHU). Ảnh trang trí tự bo góc. */
}

/* Thẻ 1: chỉ có viền. Các thẻ sau: nền đặc + trang trí.
   TRƯỚC ĐÂY dùng `:last-child` vì thiết kế gốc đúng 2 gói. Site này bán 3 mức
   (5tr / 10tr / 15tr+) nên thẻ GIỮA rơi vào khoảng trống: không nền, không viền,
   nút không có kiểu, và nhãn "Phổ biến" (nền trắng) nằm trên thẻ trắng nên tàng
   hình. Đổi sang `:not(:first-child)` — với đúng 2 gói thì kết quả y hệt cũ, thêm
   gói thứ ba trở đi vẫn đúng kiểu. */
.price-card:first-child {
  border: 1px solid #333;
  background: transparent;
}
.price-card:not(:first-child) {
  background: #E9EBED;
}

.price-card-name {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 400; font-size: 40px; line-height: 40px; color: #111;
}
.price-card-note {
  margin: 0;
  font-size: 16px; line-height: 24px; font-weight: 600; color: #333;
}

.price-card-feats {
  margin: 0; padding: 0 30px 0 0;
  list-style: none;
}
.price-card-feats li {
  position: relative;
  padding-left: 16px;
  font-size: 16px; line-height: 30px; font-weight: 500; color: #333;
}
.price-card-feats li::before {
  content: '';
  position: absolute; left: 2px; top: 14px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #333;
}
.price-card-feats li:empty { display: none; }

.price-card-col--buy { position: relative; z-index: 2; }

.price-card-price {
  margin: 0 0 35px;
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-title);
  color: #111;
  white-space: nowrap;
}
.price-card-price strong { font-weight: 600; font-size: 48px; line-height: 48px; }
.price-card-price span {
  font-family: var(--font-body);
  font-weight: 700; font-size: 18px; line-height: 24px;
}

.price-card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 154px; height: 50px; box-sizing: border-box;
  padding: 0 22px; white-space: nowrap;
  border-radius: 9999px;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: opacity .25s;
}
.price-card-cta img { width: 10px; transform: rotate(90deg); }

/* Nút thẻ 1: viền GRADIENT. Viền gradient không có thuộc tính riêng -> vẽ bằng
   2 lớp nền, lớp trong tô màu trang, lớp ngoài tô gradient, cắt theo padding-box. */
.price-card:first-child .price-card-cta {
  color: #333;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--btn-fill, #fff), var(--btn-fill, #fff)) padding-box,
    linear-gradient(248.86deg, #e24c4a 14.51%, #386bb7 95.96%) border-box;
}
.price-card:first-child .price-card-cta img { filter: brightness(0); }

.price-card:not(:first-child) .price-card-cta {
  color: #fff;
  background: #333;
  border: 1px solid #333;
}
.price-card:not(:first-child) .price-card-cta img { filter: brightness(0) invert(1); }
.price-card-cta:hover { opacity: .85; }

/* --- Nhãn "Phổ biến": khoét vào mép trên thẻ --- */
.price-card-badge {
  position: absolute;
  left: 75px; top: 0;
  height: 40px;
  padding: 0 24px;
  display: flex; align-items: center;
  background: var(--bg-page, #fff);
  /* Figma (path nhãn): x535..671 y341..379 -> 136x38, bo 2 góc DƯỚI r=25,
     2 góc trên vuông vì trùng mép trên thẻ. */
  border-radius: 0 0 25px 25px;
  height: 38px;
  font-size: 16px; font-weight: 600; color: #111;
  z-index: 2;
}
.price-card-badge:empty { display: none; }   /* gói không có nhãn thì biến mất hẳn */

/* 2 miếng lõm 20x20 hai bên chân nhãn — dùng lại corner-accent.svg làm mask,
   chỉ xoay/lật cho đúng hướng. Trái: xoay 180 (lấp góc trên-phải của ô).
   Phải: lật dọc (lấp góc trên-trái của ô). */
.price-card-badge::before,
.price-card-badge::after {
  content: '';
  /* Đọc thẳng path Figma thay vì đoán hướng:
       lõm TRÁI  M515 341 C…535 361 L535 341 Z  -> ô 20x20 ở TRÊN, tô góc trên-PHẢI
       lõm PHẢI  M691 341 C…671 361 L671 341 Z  -> ô 20x20 ở TRÊN, tô góc trên-TRÁI
     File gốc corner-accent.svg tô góc dưới-PHẢI, nên:
       trái  = lật dọc  scaleY(-1)
       phải  = xoay 180 rotate(180deg) */
  position: absolute; top: 0;
  width: 20px; height: 20px;
  /* gradient tô góc dưới-phải y hệt file SVG gốc; transform lật giữ nguyên nên
     hướng không đổi. KHÔNG mask (luật mục 12), không `transparent` (ám xám). */
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page, #fff) 20.1px);
}
.price-card-badge::before { left: -20px; transform: scaleY(-1); }
.price-card-badge::after  { right: -20px; transform: rotate(180deg); }

/* Đường kẻ trang trí góc dưới trái — chỉ thẻ có nền mới hiện. */
.price-card-deco {
  position: absolute;
  left: 0; bottom: 0;
  width: 260px; height: auto;
  border-bottom-left-radius: var(--radius-bar, 25px);
  pointer-events: none;
  z-index: 1;
}
.price-card:first-child .price-card-deco { display: none; }

@media (max-width: 1420px) {
  .price { max-width: none; padding-left: 40px; padding-right: 40px; grid-template-columns: 1fr; row-gap: 30px; }
  .price-head { padding-top: 0; }
  .price-list { padding-top: 0; }
}

@media (max-width: 1100px) {
  .price-card { grid-template-columns: 1fr 1fr; row-gap: 30px; padding: 60px 40px; }
  .price-card-col--buy { grid-column: 1 / -1; }
  .price-card-badge { left: 40px; }
}

@media (max-width: 700px) {
  .price { padding-left: 20px; padding-right: 20px; }
  .price-title { font-size: 34px; line-height: 44px; }
  /* min-width:0 BẮT BUỘC: mặc định min-width của grid/flex item là auto = bề rộng
     nội dung nhỏ nhất. Giá "từ 15.000.000đ" + white-space:nowrap cho ra 370px,
     đẩy cả cột rộng hơn khung 350px -> thẻ và tiêu đề tràn khỏi mép phải. */
  .price-list, .price-card, .price-card-col { min-width: 0; }
  .price-card { grid-template-columns: minmax(0, 1fr); padding: 60px 24px 40px; }
  .price-card-price strong { font-size: clamp(22px, 7.4vw, 34px); }
  .price-card-badge { left: 24px; }
  .price-card-deco { display: none !important; }
}


/* ============================================================
   Nút viền GRADIENT dùng chung (FAQ, Blog) — tách ra vì cùng 1 kiểu
   ============================================================ */
.btn-gradient-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 154px; height: 50px; box-sizing: border-box;
  padding: 0 22px; white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--btn-fill, #fff), var(--btn-fill, #fff)) padding-box,
    linear-gradient(248.86deg, #e24c4a 14.51%, #386bb7 95.96%) border-box;
  color: #333; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: opacity .25s;
}
.btn-gradient-outline img { width: 10px; transform: rotate(90deg); filter: brightness(0); }
.btn-gradient-outline:hover { opacity: .8; }

/* ============================================================
   Testimonials — Figma node "Testimonials" (1830x793)
   ============================================================ */
.testi {
  position: relative;
  /* max-width 1830 mà KHÔNG có lề hai bên: ở mọi khung <=1830 khối ăn hết bề
     ngang màn hình (0 -> 1440) trong khi mọi khối khác dừng ở 24 -> 1416, nên
     góc bo bị cắt cụt ở hai mép. Thêm lề bằng đúng lề chung của trang. */
  max-width: min(var(--container, 1830px), calc(100vw - 48px));
  margin: 100px auto 0;
  aspect-ratio: 1830 / 792;
  border-radius: var(--radius-bar, 25px);
  overflow: hidden;          /* ở đây CẦN cắt: ảnh nền phải theo bo góc thẻ */
  color: #fff;
}

.testi-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Lớp phủ tối: ảnh nền do admin thay, gặp ảnh sáng là mất chữ trắng. */
.testi::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
  z-index: 1;
}

/* Thẻ tối bên trái: x0 y144, 945x648 — quy ra % để co giãn cùng thẻ ngoài. */
.testi-card {
  position: absolute;
  left: 0;
  top: 18.18%;               /* 144 / 792 */
  width: 51.64%;             /* 945 / 1830 */
  height: 81.82%;            /* 648 / 792 */
  background: #1F1F1F;
  border-radius: var(--radius-bar, 25px);
  z-index: 3;
}

.testi-track { height: 100%; }

.testi-quote {
  margin: 0;
  padding: 25% 12% 0 12%;
  box-sizing: border-box;
}
/* Mặc định (chưa có JS) hiện bản đầu, giấu các bản sau — trang vẫn đọc được.
   Khi testimonials.js chạy, nó gắn .is-active và tiếp quản việc đóng/mở. */
.testi-quote + .testi-quote { display: none; }
.testi-track:not([data-testi-init]) .testi-quote:first-child { display: block; }
.testi-track[data-testi-init] .testi-quote { display: none; }
.testi-track[data-testi-init] .testi-quote.is-active { display: block; }

.testi-mark { display: block; width: 42px; margin: 0 0 34px; }

.testi-text {
  margin: 0 0 34px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 24px; line-height: 35px;
  color: #fff;
}
.testi-author {
  font-size: 15px; line-height: 24px; font-weight: 500;
  color: rgba(255,255,255,.75);
}

/* Hộp nav khoét ở góc dưới-phải thẻ tối: x809..945, y733..793 của thẻ 945x648
   -> rộng 136, cao 60, dính mép phải + mép đáy, bo 25 ở HAI góc trên. */
.testi-nav {
  position: absolute;
  right: 0; bottom: 0;
  width: 136px; height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-page, #fff);
  border-radius: 25px 25px 0 0;
  z-index: 4;
}
/* 2 miếng lõm 20x20 hai bên chân hộp — lại là corner-accent.svg.
   Phải: giữ nguyên hướng gốc. Trái: lật ngang. */
.testi-nav::before,
.testi-nav::after {
  content: '';
  position: absolute; bottom: 0;
  width: 20px; height: 20px;
  /* gradient thay mask (luật mục 12); transform giữ nguyên nên hướng không đổi */
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page, #fff) 20.1px);
}
/* Đọc thẳng path Figma:
     lõm TRÁI  M789 793 C…809 773 L809 793 Z  -> trùng đúng file gốc, KHÔNG lật
     lõm PHẢI  M965 793 C…945 773 L945 793 Z  -> ảnh gương -> scaleX(-1)
   Trước đây gán ngược hai bên nên hai "cánh" quay sai chiều. */
.testi-nav::before { left: -20px; }
.testi-nav::after  { right: -20px; transform: scaleX(-1); }

.testi-nav-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
  transition: background-color .2s;
}
.testi-nav-btn:hover { background: rgba(0,0,0,.06); }
.testi-nav-btn img { width: 10px; filter: brightness(0); }
/* Icon gốc chỉ LÊN: trái = -90deg, phải = 90deg (mục 4 GHI_CHU). */
.testi-prev img { transform: rotate(-90deg); }
.testi-next img { transform: rotate(90deg); }

/* Cột phải nằm trên ảnh: bắt đầu x1167/1830 = 63.8%. */
.testi-side {
  position: absolute;
  left: 63.8%; right: 4%;
  top: 18.2%;
  z-index: 3;
}
.testi-eyebrow {
  margin: 0 0 12px;
  font-size: 16px; line-height: 28px; font-weight: 500; color: #fff;
}
.testi-title {
  margin: 0 0 60px;
  font-family: var(--font-title);
  font-weight: 400; font-size: 60px; line-height: 70px; color: #fff;
}
/* Số lớn chỉ có VIỀN: ruột trong suốt, nét trắng 1px. */
.testi-stat-num {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 600; font-size: 90px; line-height: 90px;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
.testi-stat-label {
  margin: 0;
  font-size: 18px; line-height: 28px; font-weight: 600; color: #fff;
}

@media (max-width: 1500px) {
  .testi-title { font-size: 40px; line-height: 50px; margin-bottom: 30px; }
  .testi-text { font-size: 19px; line-height: 30px; }
  .testi-stat-num { font-size: 64px; line-height: 64px; }
  .testi-quote { padding: 18% 10% 0; }
}

@media (max-width: 1024px) {
  .testi { aspect-ratio: auto; }
  /* PHẢI là relative, không được static: z-index chỉ có tác dụng với phần tử
     đã định vị. Để static thì thẻ tối và cột chữ tuy vẫn chiếm chỗ nhưng bị
     ảnh nền (absolute) và lớp phủ ::after vẽ đè lên -> nhìn như mất hẳn. */
  .testi-card { position: relative; width: auto; height: auto; margin: 24px; }
  .testi-quote { padding: 40px 32px 90px; }
  /* Kéo hộp nav vào trong thẻ thì 2 miếng lõm ::before/::after không còn tựa vào
     mép thẻ nữa — chúng hiện ra thành 2 "gai" trắng cong lơ lửng giữa thân thẻ
     tối. Ở khổ này bỏ hõm, dùng viên bo tròn đều. */
  .testi-nav { right: 24px; bottom: 24px; border-radius: 30px; }
  .testi-nav::before, .testi-nav::after { display: none; }
  /* Phải trả left/right/top về auto: đổi absolute -> relative mà giữ nguyên
     left:63.8% là khối bị đẩy lệch sang phải rồi cụt chữ. */
  .testi-side { position: relative; left: auto; right: auto; top: auto; padding: 0 32px 40px; }
  .testi-title { font-size: 30px; line-height: 40px; }
}

/* ============================================================
   FAQ — Figma node "FAQ" (1830x1226)
   ============================================================ */
/* Cả khối FAQ nằm trong 1 hộp nền XÁM bo 20 (demo: inner-section 1825x1231,
   nền #F0F2F4, radius 20). Nút "Xem thêm" là nút viền gradient nên phải khai
   báo lại --btn-fill, không thì ruột nút trắng lộ hẳn trên nền xám. */
.faq {
  max-width: var(--container, 1830px);
  margin: 130px auto 0;
  padding: 100px 0;
  background: var(--bg-band);
  border-radius: 20px;
  --btn-fill: var(--bg-band);
}
/* Đầu khối KHÔNG căn giữa: trên Figma nó bắt đầu ở x=707, tức thẳng hàng với
   CỘT CÂU HỎI (245 lề trái danh sách + 462). Căn giữa là lệch hẳn sang trái. */
.faq-head {
  width: 1340px; max-width: 100%;
  margin-left: auto; margin-right: auto;
  padding-left: 462px;
  box-sizing: border-box;
}
.faq-eyebrow {
  margin: 0 0 2px;
  font-size: 16px; line-height: 28px; font-weight: 500; color: #111;
}
.faq-title {
  margin: 0 0 60px;
  max-width: 700px;
  font-family: var(--font-title);
  font-weight: 400; font-size: 60px; line-height: 70px; color: #111;
}

.faq-list {
  width: 1340px;             /* đúng bề rộng đường kẻ trong Figma */
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.faq-item { border-bottom: 1px solid #333; }

.faq-q {
  display: grid;
  grid-template-columns: 465px 1fr 40px;   /* số · câu hỏi · mũi tên */
  align-items: start;
  gap: 0;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }

.faq-num {
  font-family: var(--font-title);
  font-weight: 400; font-size: 26px; line-height: 34px; color: #111;
}
.faq-q-text {
  font-family: var(--font-title);
  font-weight: 400; font-size: 26px; line-height: 34px; color: #111;
}
.faq-caret {
  display: flex; align-items: center; justify-content: flex-end;
  height: 34px;
}
.faq-caret img {
  width: 12px;
  filter: brightness(0);
  transform: rotate(180deg);          /* đóng: chỉ XUỐNG */
  transition: transform .25s;
}
.faq-item[open] .faq-caret img { transform: rotate(0deg); }   /* mở: chỉ LÊN */

.faq-a {
  margin: 0 40px 28px 465px;
  font-size: 16px; line-height: 30px; font-weight: 500; color: #333;
}

/* Nút cũng thẳng cột câu hỏi: lề trái = phần thừa mỗi bên + 462.
   Dùng margin (không phải padding) để không kéo giãn viên nút. */
.faq-cta { margin-top: 40px; margin-left: max(0px, calc((100% - 1340px) / 2 + 462px)); }

@media (max-width: 1420px) {
  .faq { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 900px) {
  .faq-title { font-size: 34px; line-height: 44px; }
  .faq-q { grid-template-columns: 60px 1fr 30px; }
  .faq-q-text, .faq-num { font-size: 20px; line-height: 28px; }
  .faq-a { margin-left: 60px; margin-right: 0; }
  /* Cột câu hỏi thu về 60px thì đầu khối và nút phải thụt theo, không thì
     padding-left 462px cố định làm tràn ngang trên máy nhỏ. */
  .faq-head { padding-left: 60px; }
  .faq-cta  { margin-left: 60px; }
}

/* ============================================================
   Blog — Figma node "Blog" (1202x885)
   ============================================================ */
/* Đo trên demo: khối Blog rộng 1340 (giống Services/Features/Pricing), KHÔNG
   phải 1830. Bản export Figma chỉ cắt 1202 nên dễ nhầm. */
.blog {
  max-width: 1340px;
  margin: 0 auto;
  padding: 100px 0 0;
}

.blog-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: 44px;
}
.blog-eyebrow {
  margin: 0 0 2px;
  font-size: 16px; line-height: 28px; font-weight: 500; color: #111;
}
.blog-title {
  margin: 0;
  max-width: 940px;
  font-family: var(--font-title);
  font-weight: 400; font-size: 60px; line-height: 70px; color: #111;
}

/* Figma: thẻ lớn 651 · khe 40 · thẻ nhỏ 420. Giữ đúng tỉ lệ 651:420 khi giãn. */
.blog-grid {
  display: grid;
  /* 651px/420px cứng: chừa 229px trống bên phải trong container 1340 và 2 thẻ
     khác hẳn bề rộng. Đổi sang tỉ lệ để lấp hết bề ngang, giữ đúng nhịp 651:420
     của Figma. align-items:stretch cho 2 thẻ bằng chiều cao. */
  grid-template-columns: 651fr 420fr;
  gap: 40px;
  align-items: stretch;
}
.blog-card { display: flex; flex-direction: column; }

/* Figma có VIỀN quanh cả thẻ: rect x1.5 y291.5 w650 h560 rx24.5 stroke #E0E0E0.
   Ảnh nằm sát mép trên trong viền, chữ nằm dưới với padding 40. */
.blog-card {
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-bar, 25px);
  padding-bottom: 34px;
}
.blog-card > *:not(.blog-card-media) { padding-left: 40px; padding-right: 40px; }

.blog-card-media {
  position: relative;
  display: block;
  border-radius: var(--radius-bar, 25px);
  /* KHÔNG overflow:hidden — nhãn ngày khoét ra ngoài mép ảnh. Ảnh tự bo góc. */
}
.blog-card-media img {
  display: block;
  width: 100%;
  /* Tỉ lệ 651/314 áp cho CẢ HAI thẻ, mà 2 cột rộng 790 và 510 -> ảnh cao 381 và
     246, tiêu đề 2 thẻ lệch nhau 135px. Khoá chiều cao theo thẻ trái để hai hàng
     tiêu đề thẳng nhau. (Ở mobile 1 cột thì trả lại tỉ lệ gốc.) */
  aspect-ratio: auto;
  height: clamp(200px, 26.4vw, 381px);
  object-fit: cover;
  border-radius: var(--radius-bar, 25px);
}

/* Nhãn ngày khoét vào góc DƯỚI-TRÁI của ảnh. */
/* Figma: M206 605 L3 605 L3 587 C…28 562 L181 562 C…206 587 L206 605 Z
   -> nhãn cao 43, dính mép TRÁI + mép ĐÁY ảnh, bo 2 góc TRÊN r=25. */
.blog-card-meta {
  position: absolute;
  left: 0; bottom: 0;
  height: 43px;
  padding: 0 18px 0 20px;
  display: flex; align-items: center;
  background: var(--bg-page, #fff);
  border-radius: 25px 25px 0 0;
  font-size: 14px; font-weight: 500; color: #333;
  white-space: nowrap;
}
/* Lõm phải: M206 585 C…226 605 L206 605 Z -> tô góc dưới-TRÁI của ô,
   file gốc tô góc dưới-PHẢI -> lật ngang. */
.blog-card-meta::after {
  content: '';
  position: absolute; right: -20px; bottom: 0;
  width: 20px; height: 20px;
  /* gradient thay mask (luật mục 12); scaleX(-1) giữ nguyên nên hướng không đổi */
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page, #fff) 20.1px);
  transform: scaleX(-1);
}

.blog-card-title {
  margin: 34px 0 12px;
  font-family: var(--font-title);
  font-weight: 400; font-size: 26px; line-height: 36px;
}
.blog-card-title a {
  color: #111; text-decoration: none;
  background-image: linear-gradient(#111, #111);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .3s;
}
.blog-card-title a:hover { background-size: 100% 1px; }

.blog-card-excerpt {
  margin: 0 0 20px;
  font-size: 16px; line-height: 30px; font-weight: 500; color: #333;
}
.blog-card-cats {
  margin: 0;
  font-size: 14px; font-weight: 500; color: #777;
}

@media (max-width: 1420px) {
  .blog { padding-left: 40px; padding-right: 40px; }
}
/* Dưới 1250px thì 651+40+420 không còn lọt: chuyển sang tỉ lệ co giãn, giữ
   đúng tương quan 651:420 của thiết kế thay vì khoá cứng pixel. */
@media (max-width: 1250px) {
  .blog-grid { grid-template-columns: 651fr 420fr; }
}
@media (max-width: 900px) {
  .blog-head { flex-direction: column; align-items: flex-start; }
  .blog-title { font-size: 34px; line-height: 44px; }
  .blog-grid { grid-template-columns: 1fr; gap: 50px; }
  .blog-card-media img { aspect-ratio: 651 / 314; height: auto; }
}


/* ============================================================
   Dải nền xám trên cùng (hero + đối tác dùng chung)
   Bản gốc: 2 section nền #F0F2F4 (0..1055 và 1055..1851) + 1 divider dày 130px
   xoay -2.07deg đặt tại 1796..1926, tức nhô LÊN 55px và XUỐNG 75px so với đáy
   dải. Ở đây gộp còn 1 khối, phần chéo là ::after với đúng số đo ấy.
   ============================================================ */
/* Cắt tràn NGANG ở cấp main: thanh chéo xoay làm hộp phình ngang ~2px mỗi bên,
   không cắt là sinh thanh cuộn ngang. Dùng `clip` chứ không `hidden`: clip không
   tạo vùng cuộn, và theo spec `overflow-x:clip` + `overflow-y:visible` thì trục
   dọc VẪN visible — nên phần tràn xuống dưới (khối hình chéo About) không bị mất.
   Cắt ở mép main cũng chính là mép màn hình nên không mất chi tiết nào. */
main { overflow-x: clip; }

.top-band {
  position: relative;
  /* Nền do ::before vẽ, KHÔNG đặt ở đây: nền của chính khối là hình chữ nhật
     đáy phẳng, sẽ thò ra dưới mép chéo. */
  background: none;
  /* Nút nav hero và đồ hoạ slogan là ảnh SVG tô sẵn #F0F2F4 -> chỉ khớp khi
     nền vùng này đúng là màu đó. Đổi màu dải là phải xuất lại 2 file ấy. */
}

/* Thân dải: kéo lên phủ cả dải header (header sticky nên vẫn nằm trên nhờ
   z-index), dừng trước đáy 30px để thanh chéo lo nốt phần mép. */
.top-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -320px;
  bottom: 30px;
  background: var(--bg-band);
  border-radius: 0 0 25px 25px;
  z-index: -1;
}

/* Mép dưới cắt chéo — thanh 130px xoay -2.07deg, BO 25px giống hệt bản gốc
   (bản gốc bọc thanh trong .elementor-widget-container có border-radius:25px +
   overflow:hidden). Trước để thanh vuông góc nên hai đầu bị vát nhọn, lệch hẳn
   so với góc bo của khối — đó là chỗ trông "kỳ". */
.top-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: -96px;      /* để mép dưới-PHẢI trùng đúng đáy dải */
  height: 130px;
  background: var(--bg-band);
  border-radius: 25px;
  transform: rotate(-2.07deg);
  z-index: -1;
}

/* Khoảng hở dưới phần chéo trước khi vào Services (bản gốc: 2096 - 1851). */
.svc { margin-top: 130px; }


/* ============================================================
   Footer + Get in Touch — soát lại theo bản dựng gốc (đo ở khung 1920)
   Khối tối rộng 1830 (x 45..1875), nhưng RUỘT chỉ rộng 1340 căn giữa
   (x 283..1623) — trước đây ruột dùng gần hết bề ngang nên chữ dạt ra sát mép,
   lệch hẳn so với các section khác của trang chủ (đều 1340).
     logo/slogan   x=283            (mép trái ruột)
     cột Company   x=1196 rộng 198
     cột Services  x=1424 rộng 198  (khe 30)
     thanh bản quyền rộng 1340, thụt 245 mỗi bên so với khối tối
   ============================================================ */
.site-footer { padding-left: 0; padding-right: 0; }

/* ĐO LẠI TRÊN FIGMA (khung footer 1830 × 1544, giống hệt ở 01_Home và 09_About):
     vạch ngăn   y=1028, x 242..1576 (rộng 1334), màu #CBCBCB — KHÔNG phải trắng mờ
     logo        y=1183 (cách vạch 155), x=242, cao 25
     tiêu đề     y≈1242, rộng tối đa ~640 (chữ tràn 247..882)
     cột Company x=1164.6 · cột Services x=1395.7 (khe 41, mỗi cột ~190)
     thanh trắng x 262..1568 (rộng 1306) y 1486..1546 (cao 60, bo trên 25)
   Trước đây đệm trên 56 / dưới 48 nên footer bị "dẹp" hơn bản gốc rất nhiều. */
.footer-top {
  max-width: 1340px;
  margin: 0 auto;
  padding: 155px 0 100px;
  /* Vạch ngăn mảnh giữa khối liên hệ và footer */
  border-top: 1px solid #CBCBCB;
  /* 2 cột link ĐỨNG CẠNH NHAU ở bên phải, không dàn ra 2 mép. */
  justify-content: flex-end;
  gap: 41px;
}
/* flex-basis 660px CHỈ đúng khi .footer-top nằm ngang. Ở <=640 nó đổi sang
   flex-direction:column, lúc đó 660px thành CHIỀU CAO -> 536px trống đen.
   Rule này nằm cuối file nên thắng cả media query ở trên; vì vậy phải tự khoá
   phạm vi bằng min-width chứ không sửa ở media query kia. */
@media (min-width: 641px) {
  .footer-brand { margin-right: auto; flex: 0 1 660px; }
}
@media (max-width: 640px) {
  .footer-brand { margin-right: 0; flex: 0 0 auto; }
}
.footer-col { width: 190px; flex: none; min-width: 0; }

.footer-bottom {
  max-width: 1306px;
  margin: 0 auto;
}

/* Khối "Get in Touch" — ĐO THẲNG TRÊN FIGMA (group "Contacts" của 01_Home,
   auto-layout ngang, khoảng cách 111):
     Contacts            X 292  Y 9528  W 1535  H 845   (spacing 111)
     Contact information X 292  Y 9639  W 578   H 734
     Get in touch_form   X 981  Y 9528  W 846   H 836
     khối tối (Footer)   X 48   Y 9477  W 1830
   => quy về khối tối 1830:  thụt trái 244 · cột chữ 578 · KHE 111 · thẻ form 846
      · thụt phải 51   (244+578+111+846+51 = 1830 ✔)
   Trước đây để 650/40/852 (đo áng chừng trên demo) nên 2 cột dính sát nhau. */
.contact-band {
  padding: clamp(24px, 2.7vw, 51px) clamp(20px, 2.7vw, 51px)
           clamp(28px, 5.3vw, 101px) clamp(20px, 12.7vw, 244px);
  grid-template-columns: 578fr 846fr;
  gap: clamp(24px, 5.8vw, 111px);
}

@media (max-width: 1200px) {
  .contact-band {
    grid-template-columns: 1fr;
    padding: 48px clamp(20px, 4vw, 40px);
  }
  .footer-top { padding: 96px 24px 64px; }
  .footer-bottom { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 640px) {
  .footer-top { padding: 56px 24px 48px; }
}


/* ============================================================
   HIỆU ỨNG TRANG CHỦ
   Chỉ ẩn khi <html class="js-reveal"> — class do reveal.js gắn ngay lập tức.
   File JS lỗi/chặn thì không có class, nội dung hiện bình thường (không bao giờ
   để người dùng nhìn trang trắng vì một hiệu ứng).
   ============================================================ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Trôi chậm (parallax) — biến --par do reveal.js cập nhật. */
.about-collage,
.price-card-deco,
.svc-deco {
  --par: 0px;
  transition: transform .2s linear;
}
.about-collage { transform: translate3d(0, var(--par), 0); }
.price-card-deco,
.svc-deco { transform: translate3d(0, calc(var(--par) * .5), 0); }

/* --- Rê chuột: thẻ nhấc lên nhẹ --- */
.svc-card,
.blog-card,
.price-card,
.feat-item {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.svc-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(17, 17, 17, .10);
}
.price-card:hover { transform: translateY(-4px); }

/* Ô icon Features đổi nền khi rê vào cả cột. */
.feat-item-ic { transition: background-color .3s, transform .3s; }
.feat-item:hover .feat-item-ic { background: #dfe3e7; transform: translateY(-4px); }

/* Ảnh trong thẻ phóng nhẹ — phải cắt ở KHUNG ảnh, không cắt ở thẻ (thẻ còn phải
   cho nhãn ngày và nút góc thò ra ngoài). */
.blog-card-media { overflow: hidden; }
.blog-card-media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }

.svc-card--photo .svc-card-bg,
.svc-card--logo .svc-card-bg { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.svc-card:hover .svc-card-bg { transform: scale(1.05); }

/* Nút tròn góc: mũi tên nhích sang phải khi rê vào thẻ. */
.svc-go img { transition: transform .3s; }
.svc-card:hover .svc-go img,
.svc-banner:hover .svc-go img { transform: rotate(90deg) translateY(3px); }

/* Câu hỏi FAQ sáng lên khi rê. */
.faq-q { transition: opacity .2s; }
.faq-q:hover { opacity: .7; }

/* Đối tác: xám -> màu thật khi rê vào. */
.slogan-partner img { transition: filter .35s, opacity .35s; }
.slogan-partner:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .about-collage, .price-card-deco, .svc-deco { transform: none; }
  .svc-card:hover, .blog-card:hover, .price-card:hover { transform: none; }
}


/* ============================================================================
   SOÁT LẠI THEO BẢN GỐC — nhịp dọc, typography, khối CTA
   Toàn bộ số dưới đây ĐO TRỰC TIẾP trên bản dựng gốc bằng getComputedStyle,
   không ước lượng. Đặt cuối file để đè các giá trị tạm trước đó.
   ============================================================================ */

/* ---------- 1. NHỊP DỌC GIỮA CÁC SECTION ----------------------------------
   Bản gốc: khoảng cách giữa 2 section liền nhau = 150px (about→features,
   features→pricing, pricing→testimonials, faq→blog, blog→get-in-touch đều 150).
   Riêng Services 130 (ngay sau mép chéo) và FAQ 37 (hộp xám đã có padding 100
   bên trong nên tổng vẫn ~137). Trước đây mình để 100 nên các khối sát nhau. */
.feat,
.price,
.blog { padding-top: 150px; }
.testi { margin-top: 150px; }
.faq { margin-top: 37px; }
.contact-band { margin-top: 150px; }

/* ---------- 2. TYPOGRAPHY -------------------------------------------------
   Điểm sai lớn nhất: bản gốc SIẾT chữ Sora bằng letter-spacing ÂM
   (60px → -3px, 80px → -2.4px, 40px → -1.2px, 30px → -0.9px, 25px → -0.75px).
   Thiếu nó là tiêu đề trông loãng và to hơn hẳn bản gốc dù cùng cỡ chữ. */

/* Tiêu đề section: Sora 400 60/70, ls -3px */
.svc-title, .feat-title, .price-title, .faq-title, .blog-title,
.about-title, .testi-title, .slogan-title, .contact-heading {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -3px;
}
/* Tiêu đề hero: Sora 400 80/90, ls -2.4px */
.hero-title { font-size: 80px; line-height: 90px; letter-spacing: -2.4px; }

/* Nhãn eyebrow: Manrope 500 16/28 (mình đang để 14 ở khối liên hệ) */
.contact-eyebrow { font-size: 16px; line-height: 28px; font-weight: 500; }

/* Tiêu đề cấp 2 trong thẻ: Sora 400 25/35, ls -0.75px */
.svc-card-txt h3, .svc-card-head h3, .blog-card-title, .testi-text {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.75px;
}
/* Câu hỏi FAQ + số thứ tự: Sora 400 30/35, ls -0.9px */
.faq-q-text, .faq-num {
  font-size: 30px;
  line-height: 35px;
  letter-spacing: -0.9px;
}
.faq-caret { height: 35px; }

/* Bảng giá */
.price-card-name { letter-spacing: -1.2px; }
.price-card-note { letter-spacing: -0.48px; }
/* 60px cố định là cỡ của bản gốc tiếng Anh ("Free" = 4 ký tự). Giá tiếng Việt
   dài 14 ký tự nên phải co lại mới lọt thẻ — clamp giữ 60px cho giá ngắn và tự
   hạ xuống cho giá dài. Cận dưới 26px vẫn lớn hơn mọi chữ khác trong thẻ. */
/* 3.1vw ở 1440 ra 44px -> "từ 15.000.000đ" chiếm 351px, bóp cột tính năng còn
   124px nên mỗi dòng chỉ lọt 1 chữ. 2.4vw ra ~34px, cụm giá còn ~270px. */
.price-card-price strong { font-size: clamp(26px, 2.4vw, 60px); line-height: 1.05; }

/* Đánh giá */
.testi-author { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 35px; }
.testi-stat-label { font-size: 20px; line-height: 30px; font-weight: 600; }

/* Link footer: Manrope 400 17/25 (mình đang để 16) */
.footer-list a { font-weight: 400; font-size: 17px; line-height: 25px; }

/* Nút CTA: Manrope 600 16 — bản gốc 16px, mình đang để 14 nên nút trông bé. */
.btn-gradient-outline,
.price-card-cta,
.about-cta,
.svc-more { font-size: 16px; }

/* ---------- 3. KHỐI CTA TRƯỚC FOOTER --------------------------------------
   Đo trên bản gốc (quy về khung 1920):
     tiêu đề  Sora 60/70   -> cách đoạn mô tả 76px
     mô tả    Manrope 400 16/30, rộng ~650
     lưới thông tin: 2 cột, nhãn Manrope 700 20/30, giá trị Manrope 500 18/28,
                     khe hàng 62 (không phải 32 như mình để)
     thẻ form: bo 25, padding 74/88, tiêu đề Sora 400 30/40 ls -0.9,
               mỗi ô nhập cách nhau 38, nút 14px
   Thẻ form thụt vào so với khối tối (không dính mép) — bản gốc thẻ nằm cao,
   phần thông tin bên trái dài hơn thẻ. */
/* Cột chữ trong Figma rộng đúng 578 — để 700/650 là tràn sang khe 111 giữa 2 cột. */
.contact-heading { max-width: 578px; }
.contact-lead {
  max-width: 578px;
  margin-top: 76px;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #f5f5f5;
}
.contact-info-grid {
  margin-top: 72px;
  gap: 62px 40px;
}
.contact-info-item h4 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: normal;
}
.contact-info-item p { font-size: 18px; line-height: 28px; }

.contact-form-card { padding: 74px 88px; }
.contact-form-heading {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.9px;
}
.contact-form-sub { margin: 14px 0 46px; font-size: 16px; line-height: 30px; }
.cf-field { margin-bottom: 38px; }
.cf-input { font-size: 16px; padding: 10px 2px; }
.contact-submit { border-radius: 9999px; padding: 0 30px; }

@media (max-width: 1400px) {
  .contact-form-card { padding: 48px 44px; }
  .contact-info-grid { gap: 40px 30px; }
}

/* ---------- 4. Thu nhỏ theo màn hình --------------------------------------
   Cỡ chữ trên là cỡ THẬT ở khung 1920. Màn nhỏ hơn phải rút xuống, nếu không
   tiêu đề 60px sẽ vỡ dòng lung tung. */
@media (max-width: 1200px) {
  .svc-title, .feat-title, .price-title, .faq-title, .blog-title,
  .about-title, .testi-title, .slogan-title, .contact-heading {
    font-size: 44px; line-height: 54px; letter-spacing: -2.2px;
  }
  .hero-title { font-size: 56px; line-height: 66px; letter-spacing: -1.7px; }
  .faq-q-text, .faq-num { font-size: 24px; line-height: 32px; letter-spacing: -0.7px; }
  .price-card-price strong { font-size: clamp(24px, 3.1vw, 46px); line-height: 1.05; }
  .feat, .price, .blog { padding-top: 110px; }
  .testi, .contact-band { margin-top: 110px; }
}
@media (max-width: 760px) {
  .svc-title, .feat-title, .price-title, .faq-title, .blog-title,
  .about-title, .testi-title, .slogan-title, .contact-heading {
    font-size: 32px; line-height: 42px; letter-spacing: -1.2px;
  }
  .hero-title { font-size: 38px; line-height: 46px; letter-spacing: -1px; }
  .svc-card-txt h3, .svc-card-head h3, .blog-card-title, .testi-text { font-size: 21px; line-height: 30px; }
  .faq-q-text, .faq-num { font-size: 19px; line-height: 27px; letter-spacing: -0.4px; }
  .feat, .price, .blog { padding-top: 80px; }
  .testi, .contact-band { margin-top: 80px; }
  .contact-form-card { padding: 32px 24px; }
  .contact-info-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .contact-lead { margin-top: 40px; }
}


/* ============================================================
   TRANG GIỚI THIỆU (about.html) — Figma frame 09_About
   Số đo đo lại trên demo /meet-neuro/ (khung 1905): thẻ tiêu đề 1825 cao 500 ·
   ruột 1340 @x283 · câu tuyên ngôn 992 bắt đầu 46% · khối câu chuyện 1340 với
   ảnh 872 TRÀN ra ngoài mép phải · đội ngũ rãnh 305 + khe 40 · giải thưởng nền xám.
   Các class .ab-hero* được trang team dùng chung.
   ============================================================ */

/* ---------- 1. THẺ TIÊU ĐỀ TRANG ---------- */
.ab-hero {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: clamp(18px, 2.4vw, 30px) auto 0;
}
.ab-hero-card {
  position: relative;
  min-height: clamp(280px, 26vw, 500px);
  border-radius: var(--radius-bar);
  /* KHÔNG overflow:hidden ở thẻ nữa. Thẻ nằm ở toạ độ LẺ (x=37.5 khi cửa sổ 1920,
     do --container 1830 + margin auto trên viewport 1905) nên đường cắt của thẻ
     rơi giữa pixel: rìa khử răng cưa của ảnh tối và rìa hộp trắng breadcrumb
     (cùng bị cắt tại đó) chồng nhau thành sợi xám — chỉnh radius/offset kiểu gì
     cũng còn. Giờ: lớp ảnh .ab-hero-bg TỰ bo + tự clip, còn .ab-crumb thò 1px ra
     ngoài thẻ phủ kín rìa ảnh — phần thò nằm trên nền trang trắng nên vô hình.
     (Vẫn GIỮ border-radius ở thẻ cho nền #333 dự phòng; ĐỪNG bỏ bán kính góc
     dưới-phải — đã thử và hỏng nặng, lộ mảng đen góc vuông.) */
  background: #333333;
  display: flex;
  align-items: center;
  padding: clamp(36px, 4vw, 50px) 0;
}
/* Ảnh nền lấy từ about_page.hero_image (đổi được trong admin). Trang nào không khai
   lớp .ab-hero-bg (team.html) thì lấy ảnh mặc định, khỏi trơ nền xám. */
.ab-hero-bg,
.ab-hero-bg-in { position: absolute; inset: 0; }
/* lớp ảnh TỰ bo + tự clip — thay cho overflow:hidden của thẻ (xem chú thích trên) */
.ab-hero-bg { border-radius: var(--radius-bar); overflow: hidden; }
.ab-hero-bg-in { background: url(../img/ab-hero-bg.webp) center / cover no-repeat; }
.ab-hero-card:not(:has(.ab-hero-bg)) {
  background-image: url(../img/ab-hero-bg.webp);
  background-size: cover;
  background-position: center;
}
.ab-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* PHẢI bo theo thẻ: thẻ không còn overflow:hidden nên lớp phủ này không được ai
     cắt giùm nữa — thiếu dòng này là góc VUÔNG tối của nó lòi ra ngoài cung tròn
     thành miếng chêm xám ở góc (đã dính một lần). */
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12) 45%, rgba(0,0,0,.34));
}
/* Chữ CĂN TRÁI theo đúng ruột 1340 của site, không căn giữa thẻ */
.ab-hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}
.ab-hero-mark { margin-bottom: clamp(12px, 1.6vw, 22px); }
.ab-hero-mark img {
  height: clamp(16px, 1.4vw, 23px);
  width: auto;
  filter: brightness(0) invert(1);
}
.ab-hero-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 80px);
  line-height: 1.125;
  letter-spacing: -0.03em;
  color: #F0F2F4;
}
/* Breadcrumb: hộp nền trang khoét vào góc DƯỚI-PHẢI của thẻ, kèm 2 miếng lõm 20x20
   (cùng hình khối .corner-cut, dựng bằng radial-gradient). */
.ab-crumb {
  position: absolute;
  /* Thò 1px ra ngoài thẻ để phủ kín rìa khử răng cưa của ảnh (thẻ đã bỏ
     overflow:hidden nên không còn bị cắt). Phần thò nằm trên nền trắng -> vô hình. */
  right: -1px;
  bottom: -1px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 40px);
  background: var(--bg-page);
  border-top-left-radius: 30px;
  /* 26 = 25 + 1px thò ra: cung của hộp nằm NGOÀI cung ảnh, phủ kín rìa ảnh. */
  border-bottom-right-radius: 26px;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--muted);
}
.ab-crumb::before,
.ab-crumb::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  /* Dựng bằng radial-gradient thuần CSS, KHÔNG dùng mask (luật vĩnh viễn mục 12
     GHI_CHU_DUNG_SECTION) — giống hệt .sd-play. Mask SVG dùng ở đây chính là một
     nguồn LÒI CHỈ nữa: mép mask cũng khử răng cưa nên chỗ tiếp giáp miếng lõm với
     mép thẻ lại pha ra một dải xám.
     CẢ HAI miếng đều là "phần đặc ở góc DƯỚI-PHẢI, khoét cong góc TRÊN-TRÁI"
     => cùng `at 0 0`. Đặt `at 100% 100%` cho miếng trên là LẬT NGƯỢC -> hiện
     nguyên ô vuông trắng thò ra (đúng lỗi mục 12 đã cảnh báo). */
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.ab-crumb::before { left: -20px; bottom: 0; }
.ab-crumb::after  { right: 0; top: -20px; }
.ab-crumb a:hover { color: var(--ink); }
.ab-crumb-sep { color: #C5C5C5; }
.ab-crumb-current { color: var(--ink); font-weight: 600; }
/* team.html đặt breadcrumb BÊN TRONG thẻ tối (không phải hộp trắng góc) */
.ab-hero-in .ab-crumb {
  position: static;
  padding: 0 0 10px;
  background: none;
  border-radius: 0;
  color: rgba(255, 255, 255, .62);
}
.ab-hero-in .ab-crumb::before,
.ab-hero-in .ab-crumb::after { display: none; }
.ab-hero-in .ab-crumb a:hover,
.ab-hero-in .ab-crumb-current { color: #fff; }

/* ---------- 2. CÂU TUYÊN NGÔN + DẢI LOGO ---------- */
.ab-intro {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: clamp(64px, 8vw, 150px) auto 0;
}
.ab-intro-top {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  overflow: hidden;
}
.ab-intro-shape {
  width: clamp(200px, 30vw, 520px);
  height: auto;
  justify-self: start;
  pointer-events: none;
}
.ab-intro-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(28px, 5.2vw, 100px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #111;
}
/* Dải logo: HÀNG RIÊNG rộng 1340 căn giữa (Figma: nhóm Partners 1342x92, 6 logo).
   Mỗi logo có bề ngang/chiều cao RIÊNG trong thiết kế (170x53 · 162x60 · 131x72 ·
   183x44 · 180x53 · 104x92) nên file ảnh xuất đúng cỡ đó và hiện theo kích thước thật.
   Dải này ĐỘC LẬP với dải logo trang chủ: khác dữ liệu (about_page.partners), khác
   class (.ab-partner), khác khuôn hiển thị — sửa bên này không ảnh hưởng bên kia. */
.ab-partners {
  width: 100%;
  max-width: 1340px;
  margin: clamp(28px, 4vw, 60px) auto 0;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 40px);
}
.ab-partners { display: flex; list-style: none; padding: 0; }
.ab-partners .ab-partner { flex: 0 0 auto; }
.ab-partners img {
  height: auto;
  width: auto;
  max-width: 100%;
  opacity: .3;
  filter: grayscale(1);
}
@media (max-width: 1100px) {
  /* Màn hẹp: thu nhỏ đều để 6 logo còn xếp được, giữ tỉ lệ từng logo */
  .ab-partners img { max-height: 40px; width: auto; }
}

/* ---------- 3. KHỐI CÂU CHUYỆN ---------- */
/* Ảnh tràn ra ngoài mép phải màn hình đúng như bản gốc → cắt phần thừa ở section,
   không để đẻ thanh cuộn ngang. */
.ab-story {
  width: 100%;
  margin: clamp(64px, 8vw, 150px) 0 0;
  overflow: hidden;
}
.ab-story-in {
  display: grid;
  /* Bề rộng CỐ ĐỊNH đúng bản gốc: cột chữ 906 (283→1189), ảnh 872 (1189→2061).
     Tổng 1778 > phần còn lại của khung nên ảnh TRÀN ra ngoài mép phải — đúng thiết kế,
     phần thừa bị .ab-story cắt. Dùng minmax() ở đây là sai: grid co cột chữ lại còn 751. */
  grid-template-columns: 906px 1fr;
  align-items: start;
  padding-left: max(24px, calc((100% - 1340px) / 2));
}
/* 906 - 19 = 887 = đúng bề rộng H2 của bản gốc */
.ab-story-text { padding-right: 19px; }
.ab-story-eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink-2);
}
.ab-story-h {
  margin: 0;
  max-width: 887px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
/* Hai đoạn văn thụt vào 159 so với tiêu đề, rộng 621 (đo trên demo) */
.ab-story-body {
  position: relative;
  margin-top: clamp(24px, 3.2vw, 48px);
  margin-left: clamp(0px, 12vw, 159px);
  max-width: 621px;
}
/* Chữ dựng dọc viền rỗng, nằm trong khoảng thụt 159 bên trái 2 đoạn văn.
   Rỗng ruột = fill trong suốt + text-stroke (cùng cách với số liệu 250+). */
.ab-story-side {
  position: absolute;
  /* Figma: chữ nằm sát mép trái cột chữ (x=11), cao 305, bề ngang 81 → cỡ chữ ~80 */
  left: clamp(-159px, -12vw, 0px);
  margin-left: 11px;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 81px);
  line-height: 1;
  letter-spacing: -0.03em;
  /* Figma: chữ này tô GRADIENT thương hiệu (#E24C4A → #386BB7), rỗng ruột.
     Cùng công thức với số liệu 250+: nền gradient + background-clip:text +
     text-fill-color = màu nền khối → chỉ còn viền ăn gradient. */
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--bg-page);
  -webkit-text-stroke: 1.5px transparent;
  pointer-events: none;
  user-select: none;
}
.ab-story-side:empty { display: none; }
.ab-story-p {
  margin: 0 0 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.875;
  color: var(--ink-2);
}
/* Figma: đoạn đầu ĐẬM hơn hẳn, đoạn sau chữ thường (demo gốc để giống nhau) */
.ab-story-p:first-of-type { font-weight: 700; color: #111; }
.ab-story-p:empty { display: none; }
.ab-story-media { position: relative; }
/* Đo trên demo ở 2 bề ngang: khối 1340 giữ nguyên, ẢNH CO theo chỗ còn lại và luôn
   thò khỏi mép phải màn hình đúng 156px (1905: ảnh 872 · 1455: ảnh 655).
   Vì vậy cột ảnh để 1fr (kéo tới mép phải) rồi cộng thêm 156 — KHÔNG khoá 872 cứng,
   khoá cứng thì màn hẹp bị cắt gần hết ảnh. */
.ab-story-img {
  width: calc(100% + 156px);
  max-width: none;   /* thắng reset img{max-width:100%} ở đầu file, nếu không ảnh không thò ra được */
  aspect-ratio: 1102 / 734;
  object-fit: cover;
  -webkit-mask: url(../img/ab-story-mask.svg) no-repeat center / 100% 100%;
  mask: url(../img/ab-story-mask.svg) no-repeat center / 100% 100%;
}

/* ---------- 4. ĐỘI NGŨ ---------- */
/* Đo trên Figma (nhóm Team 1341x1110, X289 Y3181):
   · 5 thẻ 304x478 bo 24.5, ảnh 305x314 bo 25 nền #E0E0E0
   · cột x = 346 / 691 / 1036 (rãnh 305 + khe 40)
   · hàng 1: cột3 y52 · cột4 y116  → lệch 0 / 64
   · hàng 2: cột3 y567 · cột2+cột4 y631 → lệch 0 / 64, khe dọc 2 hàng = 37
   · nút tròn Ø50 tâm (78, 304) trong thẻ → left 53, THÒ XUỐNG dưới đáy ảnh 15
   · hõm trắng 66x43 dính đáy ảnh, cách mép trái 45, kèm 2 miếng lõm 20x20 hai bên
   · nút CTA 154x49 bo 24.5 */
.ab-team {
  width: calc(100% - 48px);
  max-width: 1341px;
  margin: clamp(64px, 8vw, 150px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  row-gap: 37px;
  align-items: start;
}
.ab-team-head { grid-column: 1 / 3; }
.ab-team-list { display: contents; }
.ab-team-eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink-2);
}
.ab-team-h {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
/* Số liệu RỖNG RUỘT viền gradient (mục 8.3 ghi chú) */
.ab-team-count { margin: clamp(24px, 3vw, 44px) 0 0; }
.ab-team-count-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 100px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--bg-page);
  /* transparent trên nền trắng = vô hình. Viền phải là màu thật. */
  -webkit-text-stroke: 1.5px var(--num-outline);
}
.ab-team-count-label {
  display: block;
  margin-top: 6px;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 600;
  color: #111;
}
.ab-team-cta {
  margin-top: clamp(20px, 2.4vw, 34px);
  min-width: 154px;
  height: 49px;
}

.ab-team-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 24.5px;
  /* 478 (cao thẻ Figma) = ảnh 314 + tên 40+35 + chức danh 10+21 + đệm đáy 58 */
  padding-bottom: 58px;
  text-align: center;
}
.ab-team-card:nth-of-type(1) { grid-column: 3; grid-row: 1; margin-top: 0; }
.ab-team-card:nth-of-type(2) { grid-column: 4; grid-row: 1; margin-top: 64px; }
.ab-team-card:nth-of-type(3) { grid-column: 2; grid-row: 2; margin-top: 64px; }
.ab-team-card:nth-of-type(4) { grid-column: 3; grid-row: 2; margin-top: 0; }
.ab-team-card:nth-of-type(5) { grid-column: 4; grid-row: 2; margin-top: 64px; }
.ab-team-card:nth-of-type(n+6) { grid-column: auto; grid-row: 3; margin-top: 0; }

.ab-team-media { position: relative; }
.ab-team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 305 / 314;
  object-fit: cover;
  background: #E0E0E0;
  border-radius: 25px;
}
/* NÔI TRẮNG ÔM NÚT TRÒN ở mép dưới-trái ảnh.
   ĐÃ BỎ HẲN cách dựng cũ (.ab-team-notch + 2 pseudo-element mask corner-accent.svg
   đặt ở left/right -19px). Cách đó hỏng đi hỏng lại: chỉ cần mask không tải được,
   trình duyệt không hỗ trợ, hay đổi màu nền là 2 miếng 20x20 hiện nguyên hình 2 ô
   VUÔNG TRẮNG thò ra hai bên nút. Xem GHI_CHU_DUNG_SECTION.md mục 12 — cấm dùng lại.
   Nay chỉ còn MỘT khối trắng đặc 66x58 bo 2 góc trên, nút Ø50 nằm lọt trong (đệm 8),
   thò xuống dưới đáy ảnh 15 — không phụ thuộc bất cứ file ảnh nào. */
.ab-team-go {
  position: absolute;
  left: 45px;
  bottom: -15px;
  width: 66px;
  height: 58px;
  padding: 8px;
  background: #fff;
  /* Bo 21 đúng Figma (nôi 66x43 bo 2 góc TRÊN 21). KHÔNG để 50: 66 rộng thì 50 bị
     kẹp còn 33, tức là cạnh bên còn cong tới tận y=33 — trùng vào vùng đặt miếng
     loe (y 23..43) nên chỗ nối lòi ra 1 cái bậc trắng. Với 21 thì từ y=21 xuống
     cạnh đã thẳng đứng, miếng loe ráp vào liền mạch. */
  border-radius: 21px 21px 0 0;
  z-index: 3;
}
.ab-team-go-dot {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: background .2s;
}
/* Hai bên chân nôi loe cong VÀO ảnh (đúng bản gốc). Vẫn KHÔNG dùng mask/file ảnh:
   mỗi bên là 1 ô 21x20 tô bằng radial-gradient — trong bán kính 20 kể từ góc TRÊN
   phía ngoài thì trong suốt, ngoài ra là trắng => đúng miếng lõm 1/4 đường tròn.
   Dư 1px chồng lên thân nôi để không hở đường chỉ. Đặt ở `bottom:15px` vì thân nôi
   thò xuống dưới đáy ảnh đúng 15 — chỗ này chính là mép dưới ảnh. */
.ab-team-go::before,
.ab-team-go::after {
  content: '';
  position: absolute;
  bottom: 15px;
  width: 21px;
  height: 20px;
  pointer-events: none;
}
.ab-team-go::before {
  left: -20px;
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, #fff 20.1px);
}
.ab-team-go::after {
  right: -20px;
  background: radial-gradient(circle 20px at 100% 0, rgba(255,255,255,0) 0 19.9px, #fff 20.1px);
}
.ab-team-card:hover .ab-team-go-dot { background: var(--cta-border); }
/* icon-form-arrow.svg gốc chỉ LÊN => sang phải là rotate(90deg) (mục 4 GHI_CHU) */
.ab-team-go-dot img { width: 14px; transform: rotate(90deg); filter: brightness(0) invert(1); }
.ab-team-name {
  margin: 40px 0 0;
  padding: 0 20px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(19px, 1.45vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
}
.ab-team-role {
  margin: 10px 0 0;
  padding: 0 20px;
  font-size: 15px;
  color: var(--muted);
}
.ab-team-role:empty { display: none; }
.ab-team-role::before { content: '/ '; }
.ab-team-role::after  { content: ' /'; }

/* ---------- 5. GIẢI THƯỞNG ---------- */
/* Đo trên Figma (nhóm Awards 1830x1060, X45 Y4428):
   · 4 đường kẻ 1110x1 màu #333 tại y 496 / 632 / 772 / 912 → hàng cao ~136–140
   · danh sách rộng 1110, bắt đầu ở 476 tính từ mép trái khối 1830 (= 26%)
   · trong danh sách: năm ở 0 · hạng mục ở 104 · tên dự án ở 330
   · đầu khối (eyebrow + H2 rộng 772) thẳng hàng với CỘT TÊN
   Nền xám kéo hết chiều ngang trang (đo trên demo: khối 1905 = full màn). */
.ab-award {
  margin: clamp(64px, 8vw, 150px) 0 0;
  padding: clamp(48px, 6vw, 100px) 24px;
  background: #F0F2F4;
}
.ab-award { position: relative; overflow: hidden; }
.ab-award-in { position: relative; width: 100%; max-width: 1830px; margin: 0 auto; }
/* Đồ hoạ neo theo mép trái khối 1830 rồi lùi 508 đúng toạ độ Figma; phần thò ra
   ngoài bị section cắt. Nằm dưới nội dung, không bắt chuột. */
.ab-award-lines {
  position: absolute;
  left: -508px;
  top: 50%;
  transform: translateY(-50%);
  width: 815px;
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.ab-award-head,
.ab-award-list { position: relative; z-index: 1; }
.ab-award-head {
  padding-left: 26%;
  margin-bottom: clamp(32px, 4vw, 60px);
}
.ab-award-eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink-2);
}
.ab-award-h {
  margin: 0;
  max-width: 772px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
.ab-award-list {
  list-style: none;
  margin: 0 0 0 26%;
  padding: 0;
  max-width: 1110px;
}
.ab-award-item {
  display: grid;
  grid-template-columns: 104px 226px 1fr;
  align-items: start;
  padding: clamp(24px, 3.2vw, 50px) 0;
  border-bottom: 1px solid #333;
}
.ab-award-year,
.ab-award-cat {
  font-size: 14px;
  line-height: 2.14;
  font-weight: 500;
  color: #9B9B9B;
}
.ab-award-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
}

/* ---------- MÀN NHỎ ---------- */
@media (max-width: 1200px) {
  .ab-team { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ab-team-head { grid-column: 1 / -1; }
  .ab-team-card:nth-of-type(n) { grid-column: auto; grid-row: auto; margin-top: 0; }
}
@media (max-width: 1100px) {
  .ab-story-in { grid-template-columns: 1fr; padding-right: 24px; }
  .ab-story-side { display: none; }
  .ab-story-img { width: 100%; aspect-ratio: 16 / 10; margin-top: 32px; }
  .ab-story-body { margin-left: 0; }
}
@media (max-width: 960px) {
  .ab-intro-top { grid-template-columns: 1fr; }
  .ab-intro-shape { grid-row: 2; width: clamp(180px, 46vw, 320px); }
  .ab-intro-body { grid-row: 1; }
  .ab-partners { justify-content: flex-start; }
  .ab-award-head { padding-left: 0; }
  .ab-award-list { margin-left: 0; }
  .ab-award-item { grid-template-columns: 80px 1fr; }
  .ab-award-title { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ab-team { grid-template-columns: 1fr; }
  /* Breadcrumb bỏ vị trí tuyệt đối -> nó thành PHẦN TỬ FLEX ANH EM của .ab-hero-in
     trong .ab-hero-card (card đang display:flex). Ở hàng ngang, hai khối chia đôi
     bề rộng 390 nên cột tiêu đề bị bóp còn ~78px: tiêu đề dài (trang chi tiết dự án
     và case study) rơi xuống MỖI DÒNG MỘT TỪ, cao 405px. Đo thật bằng
     getBoundingClientRect, không phải nhìn ảnh.
     -> xếp DỌC ở khổ này: tiêu đề ăn trọn bề rộng, breadcrumb nằm dưới.
     Sửa ở đây (khuôn dùng chung) chứ không vá riêng 2 trang mới: 5 trang cũ cũng
     đang bị bóp, chỉ là tiêu đề ngắn nên chưa lộ. */
  .ab-hero-card { flex-direction: column; align-items: stretch; }
  /* Xếp dọc rồi thì breadcrumb phải bị ĐẨY XUỐNG ĐÁY thẻ. Thiếu margin-top:auto,
     nó nằm ngay dưới tiêu đề — thành một dải trắng XẺ NGANG GIỮA ảnh hero, ảnh
     còn chạy tiếp ~330px bên dưới, nhìn như ảnh bị rách đôi.
     Bo 2 góc dưới theo thẻ để dải trắng đọc ra là chân thẻ, không phải vết cắt. */
  /* Thẻ có padding dưới; không trừ đi thì dải trắng vẫn hở ~36px ảnh bên dưới,
     trông y như vết cắt. margin âm bằng đúng padding để nó áp sát đáy thẻ. */
  .ab-hero-card { padding-bottom: 0; }
  .ab-crumb {
    position: static;
    margin-top: auto;
    padding: 14px 24px;
    border-radius: 0 0 var(--radius-bar) var(--radius-bar);
  }
  .ab-crumb::before, .ab-crumb::after { display: none; }
  /* Tiêu đề dài trong breadcrumb: cắt bằng … thay vì đẩy cao 3 dòng.
     Các mục còn lại cũng phải nowrap — "Trang chủ" vỡ thành "Trang / chủ" thì
     dấu "/" trôi lung tung, cả hàng thành 2 dòng lệch. */
  .ab-crumb { flex-wrap: nowrap; }
  .ab-crumb a, .ab-crumb-sep { white-space: nowrap; flex: none; }
  .ab-crumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ============================================================
   TRANG ĐỘI NGŨ (team.html) — DỰNG LẠI 07/08/2026 sau khi đo lại bản gốc.
   Bản trước sai phần thẻ (thiếu hộp trắng, chữ dọc, nút tròn) và ô đếm.

   NGUỒN SỐ ĐO: demo gốc /awesome-team/ đo ở khung 1920 bằng
   getBoundingClientRect + getComputedStyle, đối chiếu Figma 10_Team (node 52:425).
   Toạ độ dưới đây quy về gốc container 1340 (bắt đầu x=283 trên khung 1920).

   Thẻ tiêu đề trang DÙNG CHUNG .ab-hero* với trang about — không lặp lại ở đây.
   ============================================================ */

/* ---------- 1. KHỐI DẪN ----------
   Đo: eyebrow y=0 (16/28) · tiêu đề y=34, rộng 773, Sora 60/70 ls -3
   Ô đếm: x=1061 (so với ruột 1340), y=93, rộng 241 — SỐ TRÊN, NHÃN DƯỚI. */
/* Khối dẫn giờ CHỈ còn cột chữ 773 — ô đếm đã dời xuống nằm trong lưới thẻ (xem
   .tm-count bên dưới), vì chỗ trống thật nằm ở ô cột 4 hàng 1 chứ không phải cạnh
   tiêu đề. 773/1340 = 57.7% nên dùng max-width theo tỉ lệ đó. */
.tm-intro {
  width: calc(100% - 48px);
  max-width: 1343px;
  margin: clamp(64px, 10vw, 192px) auto 0;
}
.tm-intro > * { max-width: 57.7%; }
.tm-intro-eyebrow {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: #111;
}
.tm-intro-title {
  margin: 6px 0 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
/* Ô ĐẾM — đội 5 người xếp 2 trên / 3 dưới thì ô CỘT 4 CỦA HÀNG 1 bỏ không, đó mới là
   chỗ trống thật. Nhét khối số vào đúng ô đó, ngang hàng với thẻ: rộng đúng 1 rãnh
   (1 phần 4 khung trừ 3 khe 40), neo mép phải, đỉnh trùng đỉnh hàng 1.
   Đặt tuyệt đối theo .tm-team, KHÔNG nhét vào trong vùng data-cms="team" — vào đó là
   dính repeat() và làm lệch nth-child của thẻ. */
/* Ô đếm CHIẾM TRỌN slot trống: rộng đúng 1 rãnh, cao đúng chiều cao thẻ (476/305 =
   1.561 lần bề rộng rãnh), nằm ở CỘT 3 hàng 1 — chỗ đáng lẽ là thẻ thứ 3.
   Cột 3 chứ không phải cột 4: ra cột 4 thì thủng lỗ ở giữa; cột 3 làm hàng 1 thành khối
   liền 3 ô, mép phải đã có hàng 2 (cột 2-3-4) đỡ. Mốc trái = 2 rãnh + 2 khe 40.
   Nội dung canh giữa theo chiều dọc để khối số ngồi đúng giữa slot. */
.tm-count {
  position: absolute;
  top: 0;
  /* Ô đếm phủ TRỌN khoảng trống của hàng 1 = cột 3 + khe + cột 4, và canh giữa trong đó.
     Mốc trái = 2 rãnh + 2 khe 40. Bề ngang = 2 rãnh + 1 khe = (khung-120)/2 + 40.
     Chiều cao = chiều cao hàng 1 = thẻ 477 + lệch 74 của thẻ cột 1 = 551
     → tỉ lệ 650/551 (2*305+40 = 650).
     Dùng aspect-ratio chứ KHÔNG dùng height/min-height với % — trong hai thuộc tính đó
     % tính theo CHIỀU CAO khối cha chứ không phải bề ngang, calc(...) ra sai. */
  left: calc(((100% - 120px) / 4) * 2 + 80px);
  width: calc((100% - 120px) / 2 + 40px);
  aspect-ratio: 650 / 551;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Số: Sora 100/100 w600 ls -5, TRẮNG. Bản gốc để trắng trơn trên nền #f0f2f4 nên
   nhìn như chữ rỗng viền. Nền site mình sáng hơn (--bg-page #fbfbfb) nên thêm viền
   1px xám nhạt, không thì mất hút. Đây là chỗ DUY NHẤT lệch bản gốc, cố ý. */
/* Bản gốc để 100px vì hàng 1 của họ đủ 3 thẻ, ô đếm chỉ là điểm nhấn phụ. Ở đây nó phải
   GÁNH nguyên một slot thẻ nên phóng tới 250px — cỡ này 2 chữ số vẫn nằm gọn trong rãnh
   305 (Sora ~0.55em mỗi số). Viền dày 2px, để 1px ở cỡ này nhìn như sợi chỉ. */
.tm-count-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(80px, 18vw, 300px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px var(--num-outline);
}
.tm-count-label {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.4vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
}
/* Chỉ số phụ (stats[1] trở đi) xếp thành hàng dưới, ngăn bằng một đường kẻ mảnh.
   Mục đích: vùng trống này không chỉ có mỗi con số, mà nói thêm được vài điều đáng tin. */
.tm-count-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  width: 100%;
  max-width: 520px;
  margin-top: clamp(22px, 3vw, 40px);
  padding-top: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.tm-count-more:not(:has(.tm-more-item)) { display: none; }
.tm-more-item { display: flex; flex-direction: column; gap: 2px; }
.tm-more-num {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #111;
}
.tm-more-label {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- 2. LƯỚI ĐỘI NGŨ — SO LE ----------
   Đo trên demo khung 1920 (container 283..1623):
     hàng 1 — x 283 / 628 / 973   → cột 1-2-3, y 1251 / 1177 / 1241  → lệch 74 / 0 / 64
     hàng 2 — x 628 / 973 / 1318  → cột 2-3-4, y 1747 / 1811 / 1747  → lệch 0 / 64 / 0
   4 rãnh 305 + khe 40 (305*4 + 40*3 = 1340). Khe 2 hàng: 20 (đáy hàng 1 y=1727).
   align-items:start để thẻ giữ đúng chiều cao 476, không bị kéo giãn bằng nhau. */
.tm-team {
  position: relative;              /* mốc cho ô đếm đặt vào ô trống cột 4 hàng 1 */
  width: calc(100% - 48px);
  max-width: 1343px;
  margin: clamp(40px, 4vw, 50px) auto 0;
}
.tm-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
}
/* cms-bind gỡ thẻ mẫu nhưng để lại text node xuống dòng => :empty KHÔNG ăn */
.tm-row:not(:has(.tm-card)) { display: none; margin-top: 0; }
.tm-row--left  > *:nth-child(1) { grid-column: 1; margin-top: 74px; }
.tm-row--left  > *:nth-child(2) { grid-column: 2; margin-top: 0; }
.tm-row--left  > *:nth-child(3) { grid-column: 3; margin-top: 64px; }
.tm-row--right { margin-top: 20px; }
.tm-row--right > *:nth-child(1) { grid-column: 2; margin-top: 0; }
.tm-row--right > *:nth-child(2) { grid-column: 3; margin-top: 64px; }
.tm-row--right > *:nth-child(3) { grid-column: 4; margin-top: 0; }
/* Người thứ 7 trở đi: trả về nhịp thẳng hàng, thà thẳng còn hơn so le sai */
.tm-row--right > *:nth-child(n+4) { grid-column: auto; margin-top: 40px; }
/* ĐỘI NGŨ 5 NGƯỜI (số đã chốt) — chia 2 TRÊN / 3 DƯỚI (team.html: slice "0,2" và "2,").
   Hàng 1 hai thẻ rơi vào cột 1-2 lệch 74/0, hàng 2 ba thẻ vào cột 2-3-4 lệch 0/64/0 —
   cả hai đều là luật mặc định ở trên, không cần luật riêng. Ra hình bậc thang từ trái
   trên xuống phải dưới.
   Luật dưới đây dành cho trường hợp hàng 2 chỉ có 2 thẻ (đội 4 người, chia 2/2): để
   nguyên cột 2-3 thì hụt hẳn cột 4, nhìn như thiếu → dồn về cột 3-4 cho tì mép phải. */
.tm-row--right:has(> :nth-child(2):last-child) > *:nth-child(1) { grid-column: 3; margin-top: 64px; }
.tm-row--right:has(> :nth-child(2):last-child) > *:nth-child(2) { grid-column: 4; margin-top: 0; }
/* Chỉ 1 người ở hàng 2 (đội 4 người) thì đặt ở cột 4 */
.tm-row--right:has(> :first-child:last-child) > *:nth-child(1) { grid-column: 4; margin-top: 0; }

/* ---------- 3. THẺ THÀNH VIÊN ----------
   Bản gốc: hộp TRẮNG 305x476 bo 25, cắt tràn. Ảnh 305x314 bo 25 nằm trên cùng.
   Ruột chữ padding 50/36/45. Tên Sora 20/30 ls -0.6 #111. Chức danh Manrope 14/30
   #9b9b9b, có dấu / / hai bên. */
.tm-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-bar);
  overflow: hidden;
}
.tm-card-media { position: relative; }
.tm-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 305 / 314;
  object-fit: cover;
  background: #e0e0e0;                /* đúng màu ô ảnh trống trong Figma */
  border-radius: var(--radius-bar);
}
/* Chữ dọc khổng lồ men theo mép PHẢI của ảnh, đọc từ dưới lên.
   Đo: hộp 48x240 sát mép phải, đáy trùng đáy ảnh; Sora 80/48 w600 ls -4 trắng.
   writing-mode + rotate(180) cho đúng chiều đọc mà không phải tính transform-origin.
   Dữ liệu: field `tag` — lược đồ core CHƯA CÓ nên hiện tự ẩn (:empty), ngày nào core
   thêm là hiện ngay. Không chế key mới trong dự án con. */
/* Dải phủ tối mép PHẢI ảnh: chữ dọc màu trắng, mà ảnh do admin thay — gặp ảnh
   nền sáng (áo sơ mi trắng, ảnh placeholder xám) là chữ mất hút. Phủ dọc mép phải
   đúng vùng chữ nằm, không đụng phần còn lại của ảnh. */
.tm-card-media::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,0) 100%);
  border-radius: inherit;
}
.tm-card-media:not(:has(.tm-card-tag))::after,
.tm-card-media:has(.tm-card-tag:empty)::after { display: none; }

.tm-card-tag {
  position: absolute;
  /* right:0 + line-height nhỏ hơn font-size = glyph tràn ngang khỏi hộp dòng rồi
     bị .tm-card (overflow:hidden) XÉN mất nét phải — "Kết nối" đọc thành "Kết nố".
     Trong writing-mode dọc, line-height điều khiển bề rộng NGANG của hộp dòng, nên
     nó phải >= 1em. Thụt thêm 6px cho chắc. */
  right: 6px;
  bottom: 0;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(44px, 4.2vw, 80px);
  line-height: 1.08;
  /* Bản gốc ls -4px, nhưng đó là chữ Latin không dấu. Chữ Việt xoay dọc mà bóp -4px thì
     dấu mũ/dấu thanh của chữ trên chạm chân chữ dưới. Nới về -0.5px — lệch bản gốc có
     chủ ý, vì bản gốc không phải xử lý tiếng Việt. */
  letter-spacing: -0.5px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.tm-card-tag:empty { display: none; }
/* Hõm trắng + nút tròn đè mép dưới-trái ảnh.
   Đo: hõm 66x58 tại x=45, đáy thấp hơn đáy ảnh 15px, bo 50px hai góc TRÊN.
   Nút tròn 50px #333 nằm trong, thụt 8px mỗi bên. */
.tm-card-go {
  position: absolute;
  left: 45px;
  bottom: -15px;
  width: 66px;
  height: 58px;
  padding: 8px;
  background: #fff;
  border-radius: 50px 50px 0 0;
}
/* HAI MIẾNG LÕM 20x20 hai bên hõm — chỗ này bản dựng trước em làm thiếu, để hõm thành
   hình chữ nhật bo tròn cụt lủn. Bản gốc nối hõm vào mép ảnh bằng đường cong LÕM, đo
   trên demo đúng công thức sau (thủ thuật "góc bo ngược"): ô 20x40 TRONG SUỐT, bo một
   góc dưới 20px, rồi đổ box-shadow trắng dịch xuống 20px — bóng đổ vẽ ra đúng mảng
   trắng bị đường cong khoét. Đây cùng một hình khối với .ab-crumb::before/::after ở
   thẻ tiêu đề trang (mục 2 GHI_CHU_DUNG_SECTION: miếng lõm dùng lại khắp bộ thiết kế). */
.tm-card-go::before,
.tm-card-go::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 20px;
  height: 40px;
  box-shadow: 0 20px 0 0 #fff;
}
.tm-card-go::before { left: -19px; border-radius: 0 0 20px 0; }
.tm-card-go::after  { left: 65px;  border-radius: 0 0 0 20px; }
.tm-card-go-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink-2);
  display: grid;
  place-items: center;
  transition: background .2s;
}
.tm-card:hover .tm-card-go-dot { background: var(--cta-border); }
/* icon-form-arrow.svg gốc chỉ LÊN => sang phải là rotate(90deg) (mục 4 GHI_CHU) */
.tm-card-go-dot img {
  width: 14px;
  transform: rotate(90deg);
  filter: brightness(0) invert(1);
}
.tm-card-body { padding: 50px 36px 45px; }
.tm-card-name {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 30px;
  letter-spacing: -0.03em;
  color: #111;
}
.tm-card-role {
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  color: #9b9b9b;                     /* CHỜ-TOKEN */
}
.tm-card-role:empty { display: none; }
.tm-card-role::before { content: '/ '; }
.tm-card-role::after  { content: ' /'; }
/* bio không có trong thiết kế trang này (chỉ trang about dùng) — giữ nhãn, ẩn đi.
   Mục 5 GHI_CHU: nhãn chỉ được THÊM, không được bỏ. */
.tm-card-bio { display: none; }

/* ---------- MÀN NHỎ ----------
   So le chỉ đúng ở khung rộng: dưới 1100 trả về lưới thẳng 2 cột, dưới 560 một cột. */
@media (max-width: 1100px) {
  .tm-intro > * { max-width: none; }
  /* Khung hẹp: lưới về 2 cột thẳng hàng, không còn ô trống nào để nhét ô đếm →
     trả nó về dòng chảy bình thường, nằm trên lưới thẻ. */
  .tm-count { position: static; width: auto; aspect-ratio: auto; margin-bottom: 28px; }
  .tm-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .tm-row--right { margin-top: 28px; }
  .tm-row > * { grid-column: auto !important; margin-top: 0 !important; }
  .tm-card-body { padding: 32px 24px 30px; }
  .tm-card-tag { font-size: 40px; line-height: 1.08; letter-spacing: -1px; }
  .tm-card-go { left: 24px; }
}
@media (max-width: 560px) {
  .tm-row { grid-template-columns: 1fr; }
}

/* ============================================================
   TRANG CHI TIẾT THÀNH VIÊN — member.html  (tiền tố .ms-)
   Số đo đo trên bản gốc demo.artureanec.com/themes/neuros/team/alan-begham/
   ở khung 1920 (getBoundingClientRect + getComputedStyle), đối chiếu với frame
   Figma 11_Team single (_figma/team-single-main.svg, group "Team member"
   1459x1550 tại 290,888).

   FIGMA KHÁC DEMO 1 chỗ — theo FIGMA: thẻ trái có VIỀN 1px #E0E0E0
   (rect 0.5,0.5 534x815 rx24.5 stroke #E0E0E0). Demo bỏ viền. Thẻ blog và thẻ
   đội ngũ của site này đều đã theo Figma là có viền nên giữ cho đồng bộ.

   Lưới: thẻ trái 535 · khe 155 · cột chữ 650  (= ruột 1340)
   ============================================================ */
.ms-main {
  width: calc(100% - 48px);
  max-width: 1343px;
  margin: clamp(56px, 10vw, 192px) auto 0;
  display: grid;
  /* 535/1340 và 650/1340 — cộng với khe 155/1340 vừa đúng 100% */
  grid-template-columns: 39.925% 48.507%;
  column-gap: 11.568%;
  align-items: start;
}
.ms-card { grid-column: 1; grid-row: 1; }
.ms-body { grid-column: 2; grid-row: 1; }
/* Hàng 2 tụt 32 so với đáy cột chữ (đo bản gốc: cột chữ hết ở 2266, hàng 2 ở 2298) */
.ms-ach  { grid-column: 1; grid-row: 2; margin-top: 32px; }
.ms-resp { grid-column: 2; grid-row: 2; margin-top: 32px; }

/* ---------- Thẻ trái ---------- */
.ms-card {
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-bar);
  overflow: hidden;
}
.ms-card-media { position: relative; }
.ms-photo {
  display: block;
  width: 100%;
  aspect-ratio: 535 / 551;      /* đúng tỉ lệ ảnh bản gốc, cũng là tỉ lệ 305/314 của thẻ team */
  object-fit: cover;
  border-radius: var(--radius-bar);
}
/* Chữ dọc men mép phải ảnh: bản gốc Sora 120/72 w600 ls-6, đáy cách đáy ảnh 27.
   ls giữ ở -0.01em (không phải -6px) vì chữ Việt xoay dọc bóp mạnh là dấu chạm nhau —
   cùng lý do đã ghi ở .tm-card-tag. */
/* Cùng lý do như .tm-card-media::after — chữ dọc trắng trên ảnh sáng. */
.ms-card-media::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,0) 100%);
  border-radius: inherit;
}
.ms-card-media:has(.ms-tag:empty)::after { display: none; }

.ms-tag {
  position: absolute;
  /* line-height .6 ở cỡ 90-120px là hộp dòng chỉ rộng bằng nửa glyph -> chữ tràn
     ngang rồi bị thẻ xén. Xem ghi chú ở .tm-card-tag. */
  right: 6px;
  bottom: 27px;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(56px, 6.25vw, 120px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ms-tag:empty { display: none; }

/* Ruột chữ của thẻ: padding 56/56/47/40 ở bản gốc */
.ms-card-info {
  position: relative;
  padding: clamp(28px, 2.9vw, 56px) clamp(28px, 2.9vw, 56px) clamp(24px, 2.4vw, 47px) clamp(20px, 2.1vw, 40px);
}
.ms-info-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 1.3vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
}
.ms-info-item {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: #333;
}
.ms-info-title + .ms-info-item { margin-top: 22px; }
.ms-info-item--email { margin-top: 15px; }
.ms-info-item--email a { color: #333; text-decoration: underline; }
.ms-info-item:empty { display: none; }

/* Viên tròn dọc 50x152 bo 25 nền #333, mép phải trùng padding-phải của thẻ,
   đỉnh cách đáy ảnh 59 (bản gốc: ảnh hết ở 551, viên bắt đầu 610). */
.ms-socials {
  position: absolute;
  top: 59px;
  right: clamp(28px, 2.9vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 50px;
  height: 152px;
  border-radius: 25px;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ms-socials a { display: grid; place-items: center; width: 20px; height: 20px; }
/* Bộ icon-social-*.svg VỐN ĐÃ sáng màu (vẽ cho nền tối) — không invert (mục 11.1) */
.ms-socials img { width: 14px; height: auto; }
.ms-socials a:not([href]) { display: none; }

/* ---------- Cột chữ phải ---------- */
.ms-role {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 30px;
  color: #333;
}
.ms-name {
  margin: 4px 0 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
.ms-desc { margin-top: 33px; }
.ms-desc p {
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: #333;
}
.ms-desc p:last-child { margin-bottom: 0; }
.ms-desc-lead strong { font-weight: 700; }

.ms-exp { margin-top: clamp(56px, 5.2vw, 100px); }
.ms-exp-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(24px, 2.1vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.05em;
  color: #111;
}
.ms-exp-group { margin-top: 28px; }
.ms-exp-group + .ms-exp-group { margin-top: 43px; }
.ms-exp-group-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 1.3vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
}
.ms-exp-list { margin-top: 15px; }
.ms-exp-item { position: relative; padding-left: 35px; }
.ms-exp-item + .ms-exp-item { margin-top: 31px; }
/* Mũi tên ĐỎ đầu mỗi mốc (Figma: path #F14F44 ~10x14 ở mép trái mốc).
   icon-form-arrow.svg gốc chỉ LÊN => sang phải là rotate(90deg) — mục 4 GHI_CHU. */
.ms-exp-item::before,
.ms-resp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  -webkit-mask: url(../img/icon-form-arrow.svg) no-repeat center / contain;
  mask: url(../img/icon-form-arrow.svg) no-repeat center / contain;
  transform: rotate(90deg);
}
.ms-exp-item::before {
  top: 11px;
  width: 14px;
  height: 14px;
  background: var(--cta-border, #F14F44);
}
.ms-exp-period {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 1.333;
  color: #111;
}
.ms-exp-org {
  margin: 20px 0 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #111;
}
.ms-exp-text {
  margin: 14px 0 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: #333;
}

/* ---------- Hàng 2: ô đếm trái ---------- */
.ms-ach { display: flex; align-items: center; gap: clamp(24px, 3.1vw, 60px); }
/* Bản gốc dùng một bản logo xám nhạt riêng; ở đây mượn logo site rồi làm nhạt đi,
   khỏi đẻ thêm asset. Thuần trang trí. */
.ms-ach-mark {
  width: clamp(120px, 11.7vw, 225px);
  height: auto;
  opacity: .12;
  filter: grayscale(1);
}
.ms-ach-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(56px, 5.2vw, 100px);
  line-height: 1;
  letter-spacing: -0.05em;
  /* Cùng cách xử lý như .tm-count-num: bản gốc để chữ TRẮNG trên nền #f0f2f4 nên
     nhìn như chữ rỗng viền; nền site mình trắng nên phải thêm viền, không thì mất hút. */
  color: #fff;
  -webkit-text-stroke: 1.5px var(--num-outline);
}
.ms-ach-label {
  margin: 10px 0 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #111;
}

/* ---------- Hàng 2: trách nhiệm phải ---------- */
.ms-resp-title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #111;
}
.ms-resp-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ms-resp-list li {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  font-size: 18px;
  line-height: 35px;
  color: #333;
}
.ms-resp-list li::before {
  top: 13px;
  width: 9px;
  height: 9px;
  background: #333;
}
/* Cột chữ phải thụt 35 như mốc kinh nghiệm ở bản gốc (x=1008 so với cột 973) */
.ms-resp-title,
.ms-resp-list { margin-left: 35px; }

/* ---------- Nhỏ dần ---------- */
@media (max-width: 1100px) {
  .ms-main {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .ms-card, .ms-body, .ms-ach, .ms-resp { grid-column: 1; }
  .ms-card { grid-row: 1; }
  .ms-body { grid-row: 2; }
  .ms-ach  { grid-row: 3; margin-top: 0; }
  .ms-resp { grid-row: 4; margin-top: 0; }
  .ms-card { max-width: 535px; }
  .ms-resp-title, .ms-resp-list { margin-left: 0; }
}
@media (max-width: 560px) {
  .ms-socials {
    position: static;
    flex-direction: row;
    width: 152px;
    height: 50px;
    margin-top: 24px;
  }
  .ms-ach { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Link tên thành viên ở trang danh sách (member.js dựng ra) */
.tm-card-name-link { color: inherit; text-decoration: none; }
.tm-card-name-link:hover { text-decoration: underline; }

/* ===================================================================== */
/* ============ TRANG DỊCH VỤ (services.html) — tiền tố .sv- ============ */
/* Nguồn: Figma frame 12_Services (1920x6015). Mọi số đo dưới đây đo bằng
   getBBox() trên bản export SVG của từng nhóm, KHÔNG ước lượng bằng mắt.
   Ba khối mới: .sv-list (bảng tối) · .sv-partners-sec · .sv-nums (bảng xiên).
   Khối lưới bento dùng lại .svc của trang chủ — không có CSS riêng ở đây. */

/* ---------- 1. BẢNG TỐI 4 NHÓM DỊCH VỤ (Services 1: 1830x1019) ---------- */
/* Ruột 1340 nằm giữa bảng 1830 => padding ngang 245. Lưới 2 cột 650, khe 40.
   Trong ô: icon 108 + khe 82 + chữ 460 (108+82+460 = 650). Nhịp hàng 241. */
/* Nhịp dọc đo trên frame: thẻ tiêu đề kết ở 686 -> bảng tối bắt đầu 725 (39);
   bảng tối kết 1744 -> lưới bento 1953 (209); bento kết 3071 -> đối tác 3161 (90);
   đối tác kết 3253 -> danh sách số 3401 (148). */
.sv-list {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: clamp(24px, 2vw, 39px) auto 0;
}
.sv-list + .svc { margin-top: clamp(72px, 11vw, 209px); }
/* Khác trang chủ ĐÚNG MỘT CHỖ: ở frame 12_Services thẻ 1 để chữ Ở TRÊN
   (tiêu đề y=303 so với mép thẻ 232), thẻ 2 vẫn để chữ ở dưới. Chỉ đổi trong
   phạm vi trang dịch vụ, KHÔNG đụng .svc của trang chủ. */
/* Đầu khối ở frame 12_Services siết hơn trang chủ: mực H2 ở y=55, thẻ bắt đầu 232.
   => eyebrow(21) + 20 + H2(140) = 181, rồi 50 nữa là tới mép thẻ. */
.sv-list + .svc .svc-head { row-gap: 0; margin-bottom: 50px; }
.sv-list + .svc .svc-eyebrow { margin-bottom: 20px; }
.sv-list + .svc .svc-card--photo .svc-card-in { justify-content: flex-start; }
/* .svc-card--photo::after phủ tối từ 35% xuống ĐÁY — đúng cho trang chủ vì chữ nằm
   dưới. Ở đây chữ bị đẩy lên NỬA TRÊN nên nằm ngoài vùng phủ, chữ trắng đè thẳng
   lên ảnh sáng, gần như không đọc được. Đảo chiều gradient cho đúng chỗ chữ nằm. */
.sv-list + .svc .svc-card--photo::after {
  background: linear-gradient(0deg, rgba(17,17,17,0) 35%, rgba(17,17,17,.75) 100%);
}
.sv-list + .svc .svc-card--photo .svc-card-txt { padding-top: 39px; }   /* 40 + 39 = 71 */
.sv-list-panel {
  background: #1F1F1F;
  border-radius: var(--radius-bar);
  /* 152 trên / 170 dưới / 245 ngang — theo mép chữ đo trên Figma */
  padding: clamp(48px, 8.1vw, 149px) clamp(24px, 13.4vw, 245px) clamp(56px, 9.3vw, 170px);
  color: #fff;
}
/* 60: đo bằng mực chữ — đáy hộp H2 (390) tới đỉnh mực tiêu đề mục (455) */
.sv-list-head { margin-bottom: clamp(28px, 3.3vw, 60px); }
.sv-eyebrow {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
}
.sv-eyebrow--dark { color: var(--ink-2); }
.sv-list-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);   /* 60/70 ls -3px */
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #fff;
  /* Figma (tiếng Anh) rộng 739 vừa đúng 3 dòng; bản tiếng Việt dài hơn nên phải
     nới ra 920 mới giữ được 3 dòng — bài học mục 9.5 GHI_CHU_DUNG_SECTION. */
  max-width: 920px;
}
.sv-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 0;
}
.sv-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 82px;
  /* stretch chứ KHÔNG start: hai ô cùng hàng phải có gạch chân ngang bằng nhau
     dù đoạn mô tả dài ngắn khác nhau (Figma: 2 gạch của một hàng cùng một y). */
  align-items: stretch;
  /* gạch chân trắng 1px chạy hết bề rộng CỘT CHỮ (460), không kéo qua icon */
  padding-bottom: 0;
}
/* nhịp hàng 241 = gạch chân hàng trên (608) -> đỉnh mực tiêu đề hàng dưới (696) */
.sv-item:nth-child(n + 3) { padding-top: clamp(36px, 4.5vw, 82px); }
.sv-item-ic {
  display: block;
  align-self: start;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
.sv-item-ic img { width: 100%; height: 100%; object-fit: contain; }
.sv-item-txt {
  position: relative;
  padding-bottom: clamp(16px, 1.4vw, 26px);   /* đáy mực đoạn mô tả -> gạch chân */
  border-bottom: 1px solid rgba(255,255,255,.9);
}
.sv-item-title {
  margin: 0 0 7px;                            /* đáy hộp tiêu đề -> đỉnh hộp mô tả */
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(19px, 1.34vw, 25px);   /* 25/35 ls -0.75 */
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #fff;
}
.sv-item-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.875;                     /* 16/30 */
  color: rgba(255,255,255,.72);
}

/* ---------- 2. DẢI LOGO ĐỐI TÁC ---------- */
/* Dùng lại .ab-partners/.ab-partner của trang about (cùng 6 logo, cùng cỡ);
   ở đây chỉ đặt nhịp dọc: Figma cách khối trên 90, cách khối dưới 148. */
.sv-partners-sec {
  width: calc(100% - 48px);
  max-width: 1342px;
  margin: clamp(48px, 5vw, 90px) auto 0;
}

/* ---------- 3. DANH SÁCH ĐÁNH SỐ (Services 3: 1840x985) ---------- */
/* Bảng #F0F2F4 bo 20, mép trên HƠI XIÊN: trái y≈23.7, phải y≈0 trên bề ngang
   1813 => nghiêng ~0.75deg. Xoay cả bảng thì hộp phình ngang (bài học .about-slant)
   nên thụt vào 6px mỗi bên để không sinh cuộn ngang. */
.sv-nums {
  width: calc(100% - 60px);
  max-width: 1828px;
  margin: clamp(64px, 7.7vw, 148px) auto 0;
  overflow: hidden;      /* chặn phần phình ra do xoay */
  padding: 14px 0;       /* chừa chỗ cho 2 góc bị xoay, không bị cắt cụt */
}
/* Figma nghiêng ĐÚNG TẤM NỀN, còn chữ vẫn nằm ngang tuyệt đối (bbox của mọi dòng
   chữ đều thẳng trục ngang của frame). Vì vậy KHÔNG xoay khối cha rồi xoay ngược
   từng con — làm thế con bị lệch theo trục đã xoay. Nền là một lớp ::before riêng. */
.sv-nums-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 7.9vw, 145px) clamp(24px, 13.5vw, 249px) clamp(48px, 8vw, 147px);
  /* nút viền gradient nằm trên nền xám => phải khai lại ruột nút */
  --btn-fill: var(--bg-band);
}
.sv-nums-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-band);
  border-radius: 20px;
  transform: rotate(-0.75deg);
}
.sv-nums-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 20px;
  transform: rotate(-0.75deg);   /* trùng khít lớp nền => cắt đúng như mask Figma */
  pointer-events: none;
}
.sv-nums-arcs {
  position: absolute;
  right: -14.3%;     /* Figma: cụm 575 rộng bắt đầu ở x1528 trong bảng 1840 => thò 263 */
  bottom: -17.9%;    /* bắt đầu y580, cao 581 trong bảng 985 => thò 176 */
  width: 31.3%;      /* 575 / 1840 */
  height: auto;
  opacity: .9;
}
.sv-nums-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Figma: nút 245..294, H2 179..306 => nút KHÔNG căn giữa theo cả cụm đầu khối
     mà nằm thấp, gần đáy H2. Căn đáy rồi nhấc lên 12 là khớp. */
  align-items: end;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(28px, 3.6vw, 53px);
}
.sv-nums-head > .sv-nums-more { margin-bottom: 12px; }
.sv-nums-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
  max-width: 17ch;                        /* Figma: đúng 2 dòng, rộng 622 */
}
/* Nút "Khám phá thêm" của trang này là VIỀN GRADIENT 154x49 (khác nút đen ở
   trang chủ) — đúng Figma frame 12_Services. */
.svc-more--outline,
.sv-nums-more {
  height: 49px;
  min-width: 154px;
  padding: 0 20px;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    var(--gradient-accent) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.svc-more--outline:hover,
.sv-nums-more:hover { background: var(--gradient-accent) border-box; color: #fff; }
.svc-more--outline .svc-more-ic img,
.sv-nums-more .svc-more-ic img { filter: brightness(0); }
.svc-more--outline:hover .svc-more-ic img,
.sv-nums-more:hover .svc-more-ic img { filter: brightness(0) invert(1); }

.sv-nums-list {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-num {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.1vw, 20px);
  /* Figma: 4 dòng nhịp 120 với cỡ chữ 100 => line-height 1.2 */
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 100px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #C0C5CB;
}
.sv-num-i {
  font-size: 0.4em;      /* số thứ tự ~40px khi chữ 100 */
  letter-spacing: 0;
  flex-shrink: 0;
}
/* dòng đầu tiên = mục đang mở, tô gradient thương hiệu */
.sv-num:first-child { color: transparent; }
.sv-num:first-child .sv-num-i,
.sv-num:first-child .sv-num-t {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- màn hình hẹp ---------- */
@media (max-width: 1100px) {
  .sv-list-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-item { column-gap: 32px; grid-template-columns: 84px minmax(0, 1fr); }
  .sv-item-ic { width: 84px; height: 84px; }
  .sv-item:nth-child(n + 2) { padding-top: 36px; }
  .sv-list-title { max-width: none; }
  .sv-nums-head { grid-template-columns: minmax(0, 1fr); }
  .sv-nums-more { justify-self: start; }
}
@media (max-width: 720px) {
  .sv-item { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .sv-item-ic { width: 72px; height: 72px; }
  .sv-num { flex-wrap: nowrap; }
  .sv-nums-arcs { display: none; }
}

/* ===================================================================== */
/* ====== TRANG CHI TIẾT DỊCH VỤ (service-detail.html) — tiền tố .sd- ==== */
/* Nguồn: Figma frame 13_Service single (1920x6055), đo bằng getBBox().
   Cột trái 305 tại x=290 · khe 40 · cột phải 997 tại x=635 (tổng 1342). */

.sd-wrap {
  width: calc(100% - 48px);
  max-width: 1342px;
  margin: clamp(64px, 10.7vw, 206px) auto 0;   /* đáy thẻ hero 686 -> 892 */
  display: grid;
  grid-template-columns: 305px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.sd-side { display: grid; gap: 32px; }         /* 341+32+352+32+379 = 1136 */

/* ---------- thẻ điều hướng dịch vụ (305x341, nền #F0F2F4 bo 25) ---------- */
.sd-nav {
  background: var(--bg-band);
  border-radius: var(--radius-bar);
  padding: 52px 45px;
}
.sd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: 18px;
  line-height: 1.35;
  color: #8A9199;
  transition: color .18s;
}
.sd-nav-item:hover { color: #111; }
.sd-nav-ic {
  width: 12px;
  flex: 0 0 12px;
  transform: rotate(90deg);
  opacity: 0;                                   /* chỉ mục đang xem mới hiện mũi tên */
  filter: brightness(0) saturate(100%) invert(38%) sepia(60%) saturate(2600%) hue-rotate(337deg);
}
.sd-nav-item.is-current { color: #111; font-weight: 600; }
.sd-nav-item.is-current .sd-nav-ic { opacity: 1; }

/* ---------- thẻ tải tài liệu (305x352) ---------- */
.sd-dl {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-bar);
  background: linear-gradient(144deg, #542F2F 0%, #111111 45%);
  color: #fff;
  padding: 82px 33px 45px;
  --btn-fill: transparent;
}
.sd-dl-deco { position: absolute; inset: auto 0 0 0; width: 100%; opacity: .55; pointer-events: none; }
.sd-dl-eyebrow { position: relative; margin: 0 0 12px; font-size: 14px; color: rgba(255,255,255,.72); }
.sd-dl-title {
  position: relative;
  margin: 0 0 42px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.27;
  letter-spacing: -0.03em;
  /* max-width: 8ch là số của tiêu đề tiếng Anh ngắn. Tiêu đề tiếng Việt
     "Nhận mẫu báo cáo khám bệnh website" bị bóp thành 5 dòng, MỖI DÒNG MỘT TỪ.
     Bỏ hẳn, để hộp chứa quyết định — thẻ vốn đã hẹp sẵn. */
  max-width: none;
}
.sd-dl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 145px;
  height: 49px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  transition: background .18s, border-color .18s;
}
.sd-dl-cta:hover { background: #fff; color: #111; border-color: #fff; }
.sd-dl-cta .svc-more-ic img { filter: brightness(0) invert(1); }
.sd-dl-cta:hover .svc-more-ic img { filter: brightness(0); }

/* ---------- thẻ giới thiệu dịch vụ khác (305x379, ảnh nền) ---------- */
.sd-teaser { border-radius: var(--radius-bar); overflow: hidden; }
.sd-teaser-in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 379px;
  padding: 40px;
  color: #fff;
  isolation: isolate;
}
.sd-teaser-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Ảnh do admin thay được -> phải tự phủ lớp tối, không trông chờ ảnh gốc đã tối */
.sd-teaser-in::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.62) 100%);
}
.sd-teaser-title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -0.03em;
}
.sd-teaser-desc { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.8); }

/* ---------- ruột bài (cột phải 997) ---------- */
.sd-title {
  margin: 0 0 clamp(20px, 2.2vw, 40px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
.sd-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.875; font-weight: 700; color: var(--ink-2); }
.sd-body { margin: 0; font-size: 16px; line-height: 1.875; color: var(--ink-2); }

/* ảnh minh hoạ 995x613 bo 25 + viên "Xem video" khoét góc dưới-phải */
.sd-fig {
  position: relative;
  margin: clamp(28px, 3.4vw, 64px) 0 0;
  /* KHÔNG bo, KHÔNG overflow:hidden ở khung nữa. Trước đây khung clip cả ảnh lẫn
     nút ở toạ độ LẺ (aspect-ratio cho cao 614.21875px) -> tại mép cắt, rìa khử
     răng cưa của ảnh tối và của nút trắng chồng nhau thành sợi xám = cái "khe".
     Giờ ảnh TỰ bo bằng border-radius của chính nó (một lớp mép duy nhất), nút thò
     1px ra ngoài phủ kín rìa ảnh — phần thò nằm trên nền trang trắng nên vô hình. */
  aspect-ratio: 995 / 613;
}
.sd-fig-img {
  width: 100%; height: 100%; object-fit: cover;
  /* góc dưới-phải để vuông vì viên nút lấp kín */
  border-radius: var(--radius-bar) var(--radius-bar) 0 var(--radius-bar);
}
.sd-play {
  position: absolute;
  /* thò 1px phủ kín rìa ảnh; phần thò nằm trên nền trang trắng nên không thấy */
  right: -1px;
  bottom: -1px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 26px 0 22px;
  background: var(--bg-page);
  border-radius: 30px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  color: #111;
}
.sd-play-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: #111;
}
.sd-play-ic img { width: 9px; transform: rotate(90deg); filter: brightness(0) invert(1); }
/* hai miếng lõm 20x20 nối viên nút vào mép ảnh — dựng bằng radial-gradient
   thuần CSS, KHÔNG dùng mask (luật vĩnh viễn mục 12 GHI_CHU_DUNG_SECTION) */
.sd-play::before, .sd-play::after {
  content: ''; position: absolute; width: 20px; height: 20px;
}
/* CẢ HAI miếng đều là "phần đặc nằm ở góc DƯỚI-PHẢI, khoét cong ở góc TRÊN-TRÁI"
   => cùng dùng `at 0 0`. Đặt `at 100% 100%` cho miếng phía trên là LẬT NGƯỢC:
   phần đặc rơi vào góc trên-trái và hiện nguyên một Ô VUÔNG TRẮNG thò lên khỏi
   viên nút — đúng lỗi mục 12 GHI_CHU_DUNG_SECTION đã cảnh báo. */
/* Dải chuyển phải HẸP (19.9->20.1) và phải đi từ TRẮNG-trong-suốt, không phải
   `transparent` (= ĐEN trong suốt). Dải rộng 1px đi từ đen trong suốt chính là
   cái "khe nhỏ" xám nhìn thấy ở chỗ hai mảnh ghép vào nhau. */
.sd-play::before {
  left: -20px; bottom: 0;
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.sd-play::after {
  right: 0; top: -20px;
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}

/* danh sách gạch đầu dòng mũi tên (features[] của bản ghi dịch vụ) */
.sd-feats { margin: clamp(20px, 2vw, 36px) 0 0; padding: 0; list-style: none; }
.sd-feats li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 3px 0;
  font-size: 16px;
  line-height: 1.625;
  color: var(--ink-2);
}
/* icon-form-arrow.svg tô fill="white" — không có filter là mũi tên trắng trên nền
   trắng, vô hình. Mọi chỗ dùng icon này trên nền sáng đều phải brightness(0).
   Thêm height để giữ đúng tỉ lệ gốc 1.5 (viewBox 9x6), không để trình duyệt bóp. */
/* Bỏ top cứng: offset 6px là đo theo line-height của Sora, đổi font là lệch ngay.
   align-self:center để icon tự canh giữa dòng chữ, không phụ thuộc font. */
.sd-feat-ic { width: 9px; height: 6px; flex: 0 0 9px; align-self: center; object-fit: contain; filter: brightness(0); transform: rotate(90deg); }

/* ---------- CÁCH VẬN HÀNH — accordion ---------- */
.sd-acc { margin-top: clamp(48px, 6.7vw, 128px); }
.sd-acc-title {
  margin: 0 0 clamp(24px, 3.4vw, 64px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
  max-width: 12ch;
}
.sd-acc-list { margin: 0; padding: 0; list-style: none; }
.sd-acc-item { border-bottom: 1px solid #C0C5CB; }
.sd-acc-q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 30px);
  line-height: 1.17;
  letter-spacing: -0.03em;
  color: #111;
}
.sd-acc-num::after { content: '.'; }
/* 9px cho hình tam giác 4.47x5.5 ra một đốm đen không đọc được là mũi tên, người
   dùng không biết dòng này bấm mở được. Phóng lên 13px và ĐẢO hướng cho đúng quy
   ước: đóng chỉ XUỐNG, mở chỉ LÊN (giống .faq-caret ngay trên). */
.sd-acc-caret { width: 13px; height: 16px; object-fit: contain; justify-self: end; margin-top: 10px; transform: rotate(180deg); transition: transform .2s; }
.sd-acc-item.is-open .sd-acc-caret { transform: rotate(0deg); }
/* Đóng/mở bằng grid-template-rows 0fr->1fr: chạy mượt mà KHÔNG phải đo chiều cao */
.sd-acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.sd-acc-a > p { overflow: hidden; margin: 0; font-size: 16px; line-height: 1.875; color: var(--ink-2); }
.sd-acc-item.is-open .sd-acc-a { grid-template-rows: 1fr; }
.sd-acc-item.is-open .sd-acc-a > p { padding-bottom: 34px; }

/* ---------- BẢNG GIÁ 3 THẺ DỌC (305x564) ---------- */
.sd-price { margin-top: clamp(48px, 8.1vw, 156px); }
.sd-price-title {
  margin: 0 0 clamp(24px, 2.4vw, 44px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  line-height: 1.166;
  letter-spacing: -0.05em;
  color: #111;
}
.sd-plans {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  /* align-items:start cho mỗi thẻ tự cao theo nội dung -> tên gói dài 2 dòng là
     thẻ đó dài thêm, ba nút "Bắt đầu" lệch nhau tới 61px. stretch cho 3 thẻ bằng
     nhau, còn nút được đẩy xuống đáy bằng margin-top:auto ở .sd-plan-cta. */
  align-items: stretch;
}
.sd-plan {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 564px;
  padding: 75px 45px 45px;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-bar);
  background: var(--bg-page);
}
/* thẻ GIỮA nổi bật: nền xám, không viền, có nhãn "Phổ biến" khoét mép trên */
.sd-plan:nth-child(2) {
  background: #E9EBED;
  border-color: transparent;
  --btn-fill: #E9EBED;
}
.sd-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 38px;
  background: var(--bg-page);
  border-radius: 0 0 25px 25px;   /* khoét XUỐNG nên bo 2 góc DƯỚI (đọc từ path) */
  font-size: 14px;
  font-weight: 500;
  color: #111;
}
.sd-plan:nth-child(2) .sd-plan-badge { display: flex; }
.sd-plan-badge::before, .sd-plan-badge::after {
  content: ''; position: absolute; top: 0; width: 20px; height: 20px;
}
.sd-plan-badge::before {
  left: -20px;
  background: radial-gradient(circle 20px at 0 100%, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.sd-plan-badge::after {
  right: -20px;
  background: radial-gradient(circle 20px at 100% 100%, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.sd-plan-deco { position: absolute; left: 0; bottom: 0; width: 100%; opacity: .5; pointer-events: none; }
.sd-plan:not(:nth-child(2)) .sd-plan-deco { display: none; }
.sd-plan-name {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #111;
}
.sd-plan-note { position: relative; margin: 0 0 34px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
/* Bỏ margin-bottom:auto: nay chính .sd-plan-cta mang margin-top:auto để pin nút
   xuống đáy. Để cả hai cùng auto thì khoảng dư bị CHIA ĐÔI, giá lơ lửng giữa thẻ. */
.sd-plan-feats { position: relative; margin: 0; padding: 0; list-style: none; }
.sd-plan-feats li {
  position: relative;
  padding: 0 0 16px 16px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
}
.sd-plan-feats li::before { content: '•'; position: absolute; left: 0; }
.sd-plan-price {
  position: relative;
  margin: 34px 0 22px;
  font-family: var(--font-title);
  font-weight: 600;
  /* Giá VND dài hơn hẳn "$99" của bản gốc — để 50px cứng là tràn ra ngoài thẻ.
     Bài học chung: mọi con số/nhãn bản Việt phải co được, không khoá cứng cỡ. */
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #111;
  /* KHÔNG dùng overflow-wrap: anywhere — nó ngắt ngay sau dấu "/" để lại dòng
     "tháng" mồ côi, mỗi thẻ ngắt một kiểu. Giữ nguyên cụm số và cụm "/tháng". */
  overflow-wrap: normal;
}
.sd-plan-price span { font-size: 18px; font-weight: 600; white-space: nowrap; }
.sd-plan-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: start;
  /* Đẩy nút xuống đáy thẻ để 3 nút thẳng hàng dù tên gói / danh sách tính năng
     dài ngắn khác nhau. Đi kèm .sd-plans { align-items: stretch }. */
  margin-top: auto;
  min-width: 128px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    var(--gradient-accent) border-box;
  border: 1px solid transparent;
  color: var(--ink-2);
}
.sd-plan-cta .svc-more-ic img { filter: brightness(0); }
/* thẻ giữa: nút ĐEN ĐẶC (đúng Figma), không phải viền gradient */
.sd-plan:nth-child(2) .sd-plan-cta {
  background: var(--active-bg);
  border-color: transparent;
  color: #fff;
}
.sd-plan:nth-child(2) .sd-plan-cta .svc-more-ic img { filter: brightness(0) invert(1); }
.sd-plan-cta:hover { background: var(--gradient-accent) border-box; color: #fff; }
.sd-plan-cta:hover .svc-more-ic img { filter: brightness(0) invert(1); }

/* ---------- màn hình hẹp ---------- */
@media (max-width: 1100px) {
  .sd-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .sd-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .sd-plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
  .sd-acc-title, .sd-price-title { max-width: none; }
}
@media (max-width: 720px) {
  .sd-side { grid-template-columns: minmax(0, 1fr); }
  .sd-plan { min-height: 0; padding: 64px 28px 32px; }
  .sd-play { height: 48px; padding: 0 18px; font-size: 14px; }
}


/* ============================================================
   TRANG LIÊN HỆ (contact.html) — Figma frame "30_Contacts" 1920x2837
   Số đo đọc thẳng từ metadata Figma (không đo bằng mắt trên demo):
     Header   x45  y8    1830x147   -> chép nguyên, không CSS mới
     Heading  x45  y187  1830x499   -> dùng lại .ab-hero* (KHÔNG đẻ class mới)
     Contacts x292 y876  1337x734   -> .ct-band  (578 · khe 110 · 649)
     Map      x48  y1770 1830x500   -> .ct-map
     Footer   x48  y2310 1830x480   -> .site-footer--solo (bo CẢ 4 góc)
   Nhịp dọc: hero->liên hệ 190 · liên hệ->bản đồ 160 · bản đồ->footer 40.

   LƯU Ý PHÂN BIỆT (đừng gộp nhầm):
     .contact-band = khối "Get in Touch" cuối 5 trang kia — nền TỐI, thẻ form TRẮNG.
     .ct-*         = khối chính của riêng trang này — nền TRẮNG, thẻ form XÁM.
   Hai bộ KHÁC nhau cả nền lẫn tỉ lệ cột, nên tách hẳn; sửa bộ này không đụng 5 trang kia.
   ============================================================ */

.ct-band {
  width: calc(100% - 48px);
  /* Figma ruột 1337 (x292..1629 trong khung 1920) — lấy tròn 1340 như mọi section
     hẹp khác của site (Services/Features/Pricing/Blog), xem mục 8.4 GHI_CHU. */
  max-width: 1340px;
  margin: clamp(60px, 9.9vw, 190px) auto 0;
  display: grid;
  /* 578 : 649 đúng tỉ lệ Figma; khe 110 = 980 - 292 - 578 */
  grid-template-columns: 578fr 649fr;
  gap: clamp(28px, 5.7vw, 110px);
  align-items: start;
}

/* ---------- cột trái: thông tin ---------- */
.ct-eyebrow {
  margin: 0 0 21px;              /* Figma: eyebrow y876 h30 -> h2 y927 */
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ink-2);
}
.ct-eyebrow::before { content: '/ '; }
.ct-eyebrow::after  { content: ' /'; }

.ct-title {
  margin: 0;
  max-width: 578px;
  font-family: var(--font-title);
  font-weight: 400;
  /* Figma h2 60/70; letter-spacing ÂM là bắt buộc với Sora (mục 10.2 GHI_CHU) */
  font-size: clamp(30px, 3.1vw, 60px);
  line-height: 1.167;
  letter-spacing: -0.05em;
  color: var(--ink);
  /* Chữ Việt dài hơn bản gốc -> cho phép ngắt trong từ thay vì tràn khối */
  overflow-wrap: anywhere;
}
.ct-lead {
  /* Figma: h2 kết thúc 1219 -> đoạn mô tả y1242 (khe 23); rộng 518, KHÔNG phải 578 */
  margin: 23px 0 0;
  max-width: 518px;
  font-size: 16px;
  line-height: 30px;
  color: var(--muted);
}

.ct-info-grid {
  /* Figma: 2 mốc x292 / x546 -> cột rộng 254. Hàng: nhãn y1369 và y1527 (nhịp 158). */
  margin-top: 67px;             /* mô tả kết thúc 1302 -> nhãn hàng 1 y1369 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 254px));
  column-gap: 0;
  row-gap: 48px;
}
.ct-info-item h3 {
  /* mục 10.2: nhãn thông tin liên hệ Manrope 700 20/30 */
  margin: 0 0 25px;             /* nhãn y1369 -> giá trị y1424, trừ line-height */
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.ct-info-item p {
  /* mục 10.2: giá trị Manrope 500 18/28 */
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* Dòng phụ (giờ làm việc / thời gian phản hồi) — Figma không có, thêm cho bản Việt.
   Rỗng thì :empty tự ẩn, không để lại khoảng trắng thừa. */
.ct-info-sub {
  margin-top: 6px !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--muted) !important;
}
.ct-info-sub:empty { display: none; }

.ct-socials { display: flex; gap: 22px; align-items: center; }
.ct-socials a {
  display: inline-flex;
  width: 18px;
  height: 18px;
  /* Bộ icon-social-*.svg vốn là màu SÁNG #f5f5f5 (vẽ cho nền tối). Trang này nền
     TRẮNG nên phải đảo lại.
     KHÔNG dùng brightness(0): icon Instagram là ô ĐẶC #f5f5f5 với 2 hình tròn #1f1f1f
     VẼ ĐÈ LÊN (không phải khoét lỗ) -> brightness(0) tô đen tất, ra một ô vuông đen
     đặc. Đã dính đúng lỗi này lúc dựng.
     invert(1) mới đúng: #f5f5f5 -> #0a0a0a (nét icon thành đen) và #1f1f1f -> #e0e0e0
     (ruột Instagram thành sáng), vùng trong suốt giữ nguyên alpha. */
  filter: invert(1);
  opacity: .8;
  transition: opacity .15s;
}
.ct-socials a:hover { opacity: 1; }
.ct-socials a img { width: 100%; height: 100%; display: block; }

.ct-note {
  margin: 40px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}
.ct-note:empty { display: none; }

/* ---------- cột phải: thẻ form ---------- */
.ct-form-card {
  /* Figma: 649x717 bo 25, nền #F0F2F4; padding trái 104 / trên 80 / phải 103 / dưới 84 */
  background: var(--bg-band);
  border-radius: var(--radius-bar);
  padding: clamp(32px, 4.2vw, 80px) clamp(24px, 5.4vw, 104px) clamp(36px, 4.4vw, 84px);
  /* Nền khối KHÔNG phải trắng -> khai lại --btn-fill, không thì nút viền gradient
     nào rơi vào đây sẽ lộ ruột trắng (mục 9.1 GHI_CHU). */
  --btn-fill: var(--bg-band);
}
.ct-form-title {
  /* mục 10.2: tiêu đề thẻ form Sora 400 30/40 ls -0.9 */
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 40px;
  letter-spacing: -0.9px;
  color: var(--ink);
}
.ct-form-sub {
  margin: 14px 0 53px;          /* Figma: sub y1023 kết thúc 1060 -> ô đầu y1113 */
  font-size: 16px;
  line-height: 30px;
  color: var(--muted);
}
/* Nhịp ô nhập: Figma 1113 -> 1183 -> 1254.5 -> 1326 = 70/ô, ô cao ~41
   => khe dưới mỗi ô 30. (Khác .contact-band cuối trang: ở đó là 38.) */
.ct-form .cf-field { margin-bottom: 30px; }
.ct-form .cf-input {
  width: 100%;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
  background: transparent;
  border: 0;
  /* gạch chân: rect 440x1 màu #ADADAD (đo trên bản dựng gốc) */
  border-bottom: 1px solid #ADADAD;
  border-radius: 0;
  outline: none;
}
.ct-form .cf-input::placeholder { color: #898989; }
.ct-form .cf-input:focus { border-bottom-color: var(--ink); }
.ct-form textarea.cf-input { resize: vertical; min-height: 112px; }
/* <select> mặc định của trình duyệt có nền + mũi tên riêng -> phải gỡ, không thì
   giữa dàn ô gạch-chân lại thò ra 2 cái hộp bo góc xám. */
.ct-form .cf-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  color: var(--ink);
  cursor: pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E")
    no-repeat right 2px center;
}
/* Chưa chọn gì (option rỗng) thì chữ mờ như placeholder của các ô kia */
.ct-form .cf-select:has(option[value=""]:checked) { color: #898989; }

.ct-submit {
  /* Figma: nút 178x50 bo viên thuốc, nền #333, chữ Manrope 14 */
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 178px;             /* min-width chứ KHÔNG khoá width: nhãn Việt dài hơn */
  height: 50px;
  padding: 0 30px;
  background: var(--ink-2);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s;
}
.ct-submit:hover { background: #111; }
.ct-submit:disabled { opacity: .6; cursor: not-allowed; }
.ct-submit .contact-submit-ic img { filter: brightness(0) invert(1); }

.ct-form-note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.ct-form-note:empty { display: none; }
.ct-form-card .contact-form-msg { margin-top: 10px; }

/* ---------- bản đồ ---------- */
.ct-map {
  /* Figma: x48 y1770 1830x500 — đúng container site; cách khối trên 160 */
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: clamp(56px, 8.3vw, 160px) auto 0;
}
.ct-map-frame {
  display: block;
  width: 100%;
  height: clamp(260px, 26vw, 500px);
  border: 0;
  /* LUẬT (a): iframe TỰ bo — khối cha KHÔNG overflow:hidden. Cắt iframe bằng
     overflow:hidden của cha là đúng công thức sinh sợi chỉ xám ở 4 góc. */
  border-radius: var(--radius-bar);
  background: var(--bg-band);   /* chỗ chờ khi bản đồ chưa tải, không để lỗ trắng */
}
/* Chưa nhập maps_embed_url thì core không ghi src -> ẩn hẳn, không chừa hộp xám trống */
.ct-map-frame:not([src]) { display: none; }
.ct-map:not(:has(.ct-map-frame[src])) { display: none; }

/* ---------- footer đứng một mình ---------- */
/* Footer mặc định chỉ bo 2 góc DƯỚI vì luôn dính liền .contact-band phía trên.
   Trang này không có .contact-band (Figma để Footer cao 480, không phải 1544)
   nên phải bo cả 4 góc và tự tạo khoảng cách 40 với bản đồ. */
.site-footer--solo {
  border-radius: var(--radius-bar);
  margin-top: clamp(24px, 2.1vw, 40px);
}
/* Vạch ngăn #CBCBCB + đệm trên 155 của .footer-top sinh ra CHỈ để tách khối
   .contact-band với ruột footer. Trang này không có khối đó -> vạch thành một
   nét kẻ lơ lửng ở mép trên footer (đã thấy rõ lúc chụp kiểm). Bỏ vạch, và đưa
   đệm trên về đúng Figma 30_Contacts: footer y2310, cột link y2417 => 107. */
.site-footer--solo .footer-top {
  border-top: 0;
  padding-top: clamp(56px, 5.6vw, 107px);
}

/* ---------- màn hình hẹp ---------- */
@media (max-width: 1200px) {
  .ct-band { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ct-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 640px) {
  .ct-info-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .ct-info-item h3 { margin-bottom: 12px; }
  .ct-submit { width: 100%; justify-content: center; }
}


/* ============================================================
   BLOG — blog.html (danh sách) + post.html (chi tiết)
   Figma "22_Blog Classic" 1920x5065 · "24_Blog single" 1920x5511
     Heading  x45   y187  1830x499  -> dùng lại .ab-hero* (không đẻ class mới)
     Posts    x289  y888  996 rộng
     Sidebar  x1325 y888  305 rộng   => khe 40, tổng 1341 ~ ruột 1340 của site
     Contacts y3520 1535x845 (đúng .contact-band) · Footer 1830x1544 (bản ĐẦY ĐỦ)
   Nhịp: hero->thân 202 · giữa 2 thẻ bài 30 · giữa 2 hộp sidebar ~50

   RUỘT THẺ BÀI DÙNG LẠI .blog-card* CỦA TRANG CHỦ — viền #E0E0E0 bao cả thẻ
   (mục 9.4 GHI_CHU) và nhãn ngày khoét góc dưới-trái bằng radial-gradient đã có
   sẵn ở đó. Ở đây chỉ đổi BỀ RỘNG (danh sách dọc 996) chứ không dựng lại.
   ============================================================ */

.bl-wrap {
  width: calc(100% - 48px);
  max-width: 1340px;
  margin: clamp(56px, 10.5vw, 202px) auto 0;
  display: grid;
  grid-template-columns: 996fr 305fr;
  gap: 40px;
  align-items: start;
}
.bl-main { min-width: 0; }   /* không có dòng này, chữ dài làm cột phình vượt lưới */

/* ---------- bộ lọc danh mục ---------- */
/* Figma KHÔNG có bộ lọc này (bản gốc là blog tĩnh của WordPress). Thêm theo yêu cầu
   của kế hoạch P3 "lọc theo categories.json"; kiểu dáng mượn viên thẻ 35px của Figma
   (Rectangle 1103) cho đồng bộ, không phát minh hình khối mới. */
.bl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.bl-chip-list { display: contents; }   /* để các nút con nằm thẳng trong flex của .bl-filter */
.bl-chip {
  height: 35px;
  padding: 0 18px;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.bl-chip:hover { border-color: var(--ink-2); }
.bl-chip.is-on {
  background: var(--active-bg);
  border-color: var(--active-bg);
  color: var(--active-fg);
}

/* ---------- danh sách bài ---------- */
.bl-list { display: flex; flex-direction: column; gap: 30px; }
/* Thẻ chiếm hết cột 996 (KHÔNG phải lưới 651+420 của trang chủ). Ảnh Figma 996x474
   -> tỉ lệ 996/474, khác 651/314 của trang chủ nên phải ghi đè aspect-ratio. */
.bl-card { width: 100%; }
.bl-card .blog-card-media img { aspect-ratio: 996 / 474; }
.bl-card-title { font-size: clamp(24px, 2vw, 34px); line-height: 1.28; }

.bl-empty {
  margin: 0;
  padding: 40px 0;
  font-size: 16px;
  color: var(--muted);
}

/* ---------- phân trang ---------- */
/* Figma x646 y3268 286x52: 3 viên tròn 50x50 khe 10, nút "Next" 106x50. */
.bl-pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
}
.bl-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 50px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .18s, color .18s, border-color .18s;
}
.bl-page:hover { border-color: var(--ink-2); }
.bl-page.is-on { background: var(--active-bg); border-color: var(--active-bg); color: var(--active-fg); }
.bl-page--next { min-width: 106px; }
.bl-page-ic { display: inline-flex; width: 9px; height: 9px; }
.bl-page-ic img { width: 100%; height: 100%; transform: rotate(90deg); }

/* ---------- sidebar 305 ---------- */
.bl-side { display: flex; flex-direction: column; gap: 50px; min-width: 0; }
.bl-side-box { min-width: 0; }
.bl-side-title {
  margin: 0 0 22px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.75px;
  color: var(--ink);
}
/* Figma: vạch 304x1 ngay dưới tiêu đề hộp (Rectangle 1099) */
.bl-side-title--rule { padding-bottom: 18px; border-bottom: 1px solid #E0E0E0; }

/* W1 — Danh mục dịch vụ: thẻ TỐI 305x341, chữ thụt 45, đệm trên 46 */
.bl-side-box--dark {
  background: #1f1f1f;
  border-radius: var(--radius-bar);
  padding: 46px 45px;
  color: #f5f5f5;
  /* nền không trắng -> khai lại ruột nút viền gradient (mục 9.1) */
  --btn-fill: #1f1f1f;
}
.bl-side-box--dark .bl-side-title { color: #f5f5f5; }
.bl-svc { display: flex; flex-direction: column; gap: 14px; }
.bl-svc a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 26px;
  color: #f5f5f5;
  opacity: .85;
  transition: opacity .15s;
}
.bl-svc a:hover { opacity: 1; }
.bl-svc-ic { display: inline-flex; width: 9px; height: 9px; flex: none; }
.bl-svc-ic img { width: 100%; height: 100%; filter: brightness(0) invert(1); transform: rotate(90deg); }

/* W2 — Bài gần đây: ảnh 75x69 bo, khe 16, tiêu đề 214 */
.bl-recent { display: flex; flex-direction: column; gap: 30px; }
.bl-recent a { display: flex; gap: 16px; align-items: flex-start; }
.bl-recent-img {
  width: 75px;
  height: 69px;
  flex: none;
  object-fit: cover;
  /* ảnh TỰ bo — khối cha không overflow:hidden (luật a) */
  border-radius: 12px;
}
.bl-recent-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-recent-date { font-size: 14px; line-height: 22px; color: var(--muted); }
.bl-recent-title {
  font-size: 16px;
  line-height: 25px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.bl-recent a:hover .bl-recent-title { text-decoration: underline; }

/* W3 — Lưu trữ theo tháng */
.bl-archive { display: flex; flex-direction: column; gap: 12px; }
.bl-archive li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-2);
}
.bl-archive b { font-weight: 600; color: var(--muted); }

/* W4 — Thẻ: viên 35 cao, bo viên thuốc (Figma Rectangle 1103) */
.bl-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-tag {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 15px;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  transition: background .18s, color .18s, border-color .18s;
}
button.bl-tag { cursor: pointer; }
.bl-tag:hover { border-color: var(--ink-2); }
.bl-tag.is-on { background: var(--active-bg); border-color: var(--active-bg); color: var(--active-fg); }

/* W5 — Banner 304x385: chữ neo ĐÁY (Figma tiêu đề y2395 trong hộp bắt đầu y2196) */
.bl-banner {
  position: relative;
  min-height: 385px;
  padding: 49px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-bar);
  background: var(--gradient-accent);
  color: #fff;
  overflow: visible;          /* luật (a): không cắt góc bằng cha */
  --btn-fill: transparent;
}
.bl-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* lớp inset:0 nằm trong khối bo -> BẮT BUỘC bo theo (luật b) */
  border-radius: inherit;
}
.bl-banner > :not(.bl-banner-bg) { position: relative; z-index: 1; }
.bl-banner-title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.75px;
}
.bl-banner-text { margin: 0 0 24px; font-size: 15px; line-height: 25px; opacity: .92; }
.bl-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: background .18s, color .18s;
}
.bl-banner-cta:hover { background: #fff; color: var(--ink); }
.bl-banner-cta:hover .svc-more-ic img { filter: brightness(0); }
.bl-banner-cta .svc-more-ic { display: inline-flex; width: 9px; height: 9px; }
.bl-banner-cta .svc-more-ic img { width: 100%; height: 100%; filter: brightness(0) invert(1); transform: rotate(90deg); }

/* ---------- trang chi tiết bài ---------- */
.bl-post-fig { margin: 0 0 30px; }
/* Figma 24_Blog single: ảnh bìa 996x474, cùng nhãn ngày khoét góc như thẻ danh sách */
.bl-post-media { display: block; }
.bl-post-media img { width: 100%; aspect-ratio: 996 / 474; object-fit: cover; border-radius: var(--radius-bar); }
.bl-post-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.bl-post-body { font-size: 17px; line-height: 32px; color: var(--ink-2); }
.bl-post-body :first-child { margin-top: 0; }
.bl-post-body h2, .bl-post-body h3 {
  margin: 40px 0 16px;
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bl-post-body h2 { font-size: clamp(24px, 1.8vw, 34px); line-height: 1.3; }
.bl-post-body h3 { font-size: clamp(20px, 1.4vw, 26px); line-height: 1.35; }
.bl-post-body p { margin: 0 0 20px; }
.bl-post-body img { border-radius: var(--radius-bar); margin: 24px 0; }
.bl-post-body ul, .bl-post-body ol { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.bl-post-body ol { list-style: decimal; }
.bl-post-body li { margin-bottom: 8px; }
/* Khối trích dẫn — Figma "Quote" 994x302 nền xám, chữ 804 rộng */
.bl-post-body blockquote {
  margin: 30px 0;
  padding: 60px 64px;
  background: var(--bg-band);
  border-radius: var(--radius-bar);
  font-family: var(--font-title);
  font-size: clamp(18px, 1.4vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.75px;
  color: var(--ink);
}
.bl-post-body a { text-decoration: underline; }

/* chân bài: vạch ngăn 994x1 (Figma Rectangle 1099 y2368) */
.bl-post-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #E0E0E0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.bl-post-by { margin: 0; font-size: 16px; color: var(--muted); }
.bl-post-by b { color: var(--ink); font-weight: 600; }
.bl-post-share { display: flex; gap: 22px; align-items: center; }
.bl-post-share a {
  display: inline-flex;
  width: 18px;
  height: 18px;
  /* nền SÁNG -> invert(1), KHÔNG brightness(0): icon Instagram là ô đặc có 2 hình
     tròn vẽ đè, brightness(0) ra một ô vuông đen (đã dính ở trang liên hệ). */
  filter: invert(1);
  opacity: .8;
  transition: opacity .15s;
}
.bl-post-share a:hover { opacity: 1; }
.bl-post-share a img { width: 100%; height: 100%; display: block; }

.bl-post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.bl-post-nav-a { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.bl-post-nav-a:hover { text-decoration: underline; }
.bl-post-nav-a--next { margin-left: auto; }

/* ---------- màn hình hẹp ---------- */
/* Ngưỡng đặt ngay dưới bề rộng mà lưới 996+40+305 (=1341) còn lọt kèm lề 48
   -> 1389. Bẫy mục 8.1: để ngưỡng tận 900 là lưới vỡ ở 1024 mà không ai thấy. */
@media (max-width: 1389px) {
  .bl-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 60px; }
  .bl-side { flex-direction: row; flex-wrap: wrap; }
  .bl-side-box, .bl-banner { flex: 1 1 280px; }
}
@media (max-width: 720px) {
  .bl-side { flex-direction: column; }
  .bl-side-box, .bl-banner { flex: 1 1 auto; }
  .bl-post-body blockquote { padding: 32px 28px; }
  .bl-pager { flex-wrap: wrap; }
}

/* =====================================================================
   P4 — TRANG DỰ ÁN (portfolio.html) + CHI TIẾT DỰ ÁN (project.html)
   Nguồn số đo: demo Neuros /projects-page/ và /projects/…/ đo bằng
   getBoundingClientRect() ở vw 1470, quy về container 1830 của site này.
   (Quota Figma MCP đã hết từ phiên P1 — ghi rõ trong TODO.)

   demo (vw1470)            -> site (1920)
   lưới 2 cột 650 khe 40    -> 2 cột 895 khe 40  (= 1830)
   ảnh thấp 650x421         -> tỉ lệ 895/580
   ảnh cao  650x700         -> tỉ lệ 895/964
   thẻ tên: hộp trắng góc DƯỚI-TRÁI ảnh, bo 0 25 0 0, chữ 20/25 -> 25/35
   ===================================================================== */

.pf {
  width: min(100% - 90px, var(--container));
  margin: clamp(60px, 9.9vw, 190px) auto 0;
}
.pf-head { margin-bottom: clamp(28px, 3.3vw, 60px); }
.pf-eyebrow {
  margin: 0 0 16px;
  font-size: 16px; line-height: 28px; font-weight: 500;
  color: var(--ink-2);
}
.pf-eyebrow::before { content: '/ '; }
.pf-eyebrow::after  { content: ' /'; }
.pf-title {
  margin: 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(34px, 3.1vw, 60px); line-height: 1.17; letter-spacing: -3px;
  color: var(--ink);
}
.pf-intro {
  margin: 20px 0 0; max-width: 760px;
  font-size: 16px; line-height: 30px; color: var(--ink-2);
}

/* Thanh lọc — dùng lại .bl-chip của trang blog, không đẻ bộ nút thứ hai */
.pf-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(24px, 2.6vw, 46px) 0 clamp(28px, 3vw, 54px);
}

/* Lưới 2 cột đều nhau, MỘT tỉ lệ ảnh cho mọi thẻ.
   ĐÃ THỬ VÀ BỎ — `columns: 2` (multi-column) để dựng masonry so le 580/964 như demo:
   Chromium phân mảnh khối đa cột, và phần tử `position: absolute` bên trong lại lấy
   FRAGMENTAINER làm gốc toạ độ chứ không lấy khối cha `position: relative`. Đo thật:
   hộp tên của thẻ thứ 2 nở thành 1334x1584 nằm đè lên cả lưới (getBoundingClientRect,
   không phải nhìn ảnh). Hộp tên là absolute nên multi-column là đường cụt ở đây.
   Masonry thật cần chiều cao so le mà vẫn khít -> chỉ làm được bằng JS bố cục, và
   JS đó lại vỡ mỗi lần lọc danh mục. Chọn lưới đều: chắc chắn, lọc không vỡ.
   Nhịp cao/thấp của demo ghi vào TODO, làm khi core có `grid-template-rows: masonry`. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.pf-card { display: block; }
.pf-card[hidden] { display: none; }

/* LUẬT (a): khối cha KHÔNG overflow:hidden. Ảnh tự bo bằng border-radius của
   chính nó; hộp trắng thò 1px ra ngoài để phủ rìa ảnh. */
.pf-card-media { position: relative; display: block; }
.pf-card-img {
  width: 100%; height: auto;
  aspect-ratio: 895 / 580;
  object-fit: cover;
  border-radius: var(--radius-bar);
}

.pf-card-cap {
  position: absolute;
  left: -1px; bottom: -1px;
  max-width: calc(100% - 90px);
  padding: 30px 34px 24px 30px;
  background: var(--bg-page);
  border-radius: 0 26px 0 0;   /* +1 so với ảnh, đúng luật (a) */
  z-index: 2;
}
/* Hai miếng lõm 20x20 — radial-gradient thuần, rgba(255,255,255,0), dải 19.9→20.1.
   KHÔNG dùng `transparent` (đen-trong-suốt -> ám xám), KHÔNG dùng mask SVG (luật c).
   Cả hai miếng đều giữ `at 0 0` và chỉ lật bằng transform — đặt `at 100% …` là
   lật ngược, hiện nguyên ô vuông trắng (cạm bẫy đã ghi ở .ab-crumb). */
.pf-card-cap::before,
.pf-card-cap::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: radial-gradient(circle 20px at 0 0, rgba(255,255,255,0) 0 19.9px, var(--bg-page) 20.1px);
}
.pf-card-cap::before { right: -20px; bottom: 0; transform: scaleX(-1); }  /* lõm bên phải hộp */
.pf-card-cap::after  { left: 0; top: -20px;   transform: scaleX(-1); }    /* lõm phía trên hộp */

.pf-card-tag {
  display: block; margin-bottom: 8px;
  font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted);
}
.pf-card-tag:empty { display: none; }
.pf-card-title {
  display: block;
  font-family: var(--font-title); font-weight: 400;
  font-size: 25px; line-height: 35px; letter-spacing: -.75px;
  color: var(--ink);
}
.pf-card:hover .pf-card-title { text-decoration: underline; }

.pf-empty {
  margin: 0; padding: 40px 0;
  font-size: 16px; color: var(--muted);
}

@media (max-width: 1024px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pf { width: min(100% - 32px, var(--container)); }
  .pf-card-cap { padding: 22px 24px 18px 20px; max-width: calc(100% - 60px); }
  .pf-card-title { font-size: 20px; line-height: 28px; }
}

/* ---------------- CHI TIẾT DỰ ÁN — project.html ----------------
   demo /projects/…/: cột ảnh x65 w575, cột chữ x735 w675 trong ruột 1340
   => khe 95. Lưới meta 3 cột 203 + vạch ngăn trên. */
.pj {
  width: min(100% - 90px, 1340px);
  margin: clamp(56px, 7.8vw, 150px) auto 0;
}
.pj-wrap {
  display: grid;
  grid-template-columns: minmax(0, 575fr) minmax(0, 670fr);
  gap: clamp(32px, 5vw, 95px);
  align-items: start;
}
.pj-media { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 50px); }
.pj-fig { position: relative; }
.pj-fig-img {
  width: 100%; height: auto;
  aspect-ratio: 575 / 450;
  object-fit: cover;
  border-radius: var(--radius-bar);
}
/* Nút play — chỉ hiện khi bản ghi có video_url (JS gắn cờ). */
.pj-play {
  position: absolute; left: 50%; top: 50%;
  width: 74px; height: 74px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
}
.pj-play img { width: 14px; transform: rotate(90deg); filter: brightness(0); }
.pj-play:hover { background: #fff; }

.pj-title {
  margin: 0 0 26px;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(30px, 3.1vw, 60px); line-height: 1.17; letter-spacing: -3px;
  color: var(--ink);
}
.pj-lead {
  margin: 0 0 24px;
  font-size: 16px; line-height: 30px; font-weight: 700; color: var(--ink-2);
}
.pj-lead:empty { display: none; }
.pj-body { font-size: 16px; line-height: 30px; color: var(--ink-2); }
.pj-body p { margin: 0 0 20px; }
.pj-body p:last-child { margin-bottom: 0; }
.pj-body ul, .pj-body ol { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.pj-body ol { list-style: decimal; }
.pj-body li { margin-bottom: 8px; }
.pj-body img { border-radius: var(--radius-bar); margin: 24px 0; }
.pj-body h2, .pj-body h3 {
  font-family: var(--font-title); font-weight: 400;
  letter-spacing: -.9px; color: var(--ink); margin: 32px 0 14px;
}
.pj-body h2 { font-size: clamp(24px, 1.8vw, 34px); line-height: 1.3; }
.pj-body h3 { font-size: clamp(20px, 1.4vw, 26px); line-height: 1.35; }

.pj-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: clamp(32px, 3.5vw, 62px);
  padding-top: clamp(24px, 2.5vw, 44px);
  border-top: 1px solid #CBCBCB;
}
.pj-meta-item h3 {
  margin: 0 0 10px;
  font-family: var(--font-title); font-weight: 400;
  font-size: 22px; line-height: 30px; letter-spacing: -.66px; color: var(--ink);
}
.pj-meta-item p { margin: 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.pj-meta-item:not(:has(p:not(:empty))) { display: none; }

.pj-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(28px, 3vw, 50px);
  min-height: 58px; padding: 0 30px;
  border-radius: var(--radius-pill);
  background: var(--active-bg); color: #fff;
  font-size: 16px; font-weight: 600; white-space: nowrap;
}
.pj-cta:hover { background: #111; }
.pj-cta .svc-more-ic img { filter: brightness(0) invert(1); }

/* Bộ sưu tập — ẩn HẲN khi gallery[] rỗng (yêu cầu của kế hoạch P4) */
.pj-gallery {
  width: min(100% - 90px, 1340px);
  margin: clamp(48px, 6vw, 110px) auto 0;
}
.pj-gallery:not(:has(.pj-gal-item)) { display: none; }
.pj-gal-title {
  margin: 0 0 clamp(20px, 2.2vw, 40px);
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(26px, 2vw, 40px); line-height: 1.2; letter-spacing: -1.2px;
}
.pj-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}
.pj-gal-item img {
  width: 100%; height: auto;
  aspect-ratio: 650 / 450; object-fit: cover;
  border-radius: var(--radius-bar);
}

/* Dự án trước / sau — suy từ chính danh sách, không cần khoá dữ liệu mới */
.pj-nav {
  width: min(100% - 90px, 1340px);
  margin: clamp(40px, 4.5vw, 80px) auto 0;
  display: flex; justify-content: space-between; gap: 16px;
}
.pj-nav[hidden] { display: none; }
.pj-nav-a { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.pj-nav-a:hover { text-decoration: underline; }
.pj-nav-a--next { margin-left: auto; }

@media (max-width: 900px) {
  .pj-wrap { grid-template-columns: minmax(0, 1fr); }
  .pj-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pj, .pj-gallery, .pj-nav { width: min(100% - 32px, 1340px); }
  .pj-meta { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   P5 — CASE STUDY (case-study.html) + CHI TIẾT (case-study-detail.html)
   Nguồn: demo Neuros /case-studies-page/ và /case-studies/…/ (đo thật).

   demo (vw1470)                  -> site (1920)
   thẻ tối bo 25, nền #1f1f1f     -> giữ nguyên
   thẻ so le rộng 805 / 575       -> lưới 24 cột: span 14 / span 10
   viên danh mục: viền 1px #fff, bo tròn, 12px, đệm 7.5/22
   huy hiệu ngày: nền #e34d4b bo 7, dòng nhỏ 14 + số ngày lớn
   tiêu đề thẻ 30/35 trắng · ảnh trong thẻ bo 25, đệm 0 16 25 23
   ===================================================================== */

.cs {
  width: min(100% - 90px, var(--container));
  margin: clamp(60px, 9.9vw, 190px) auto 0;
}
.cs-head { margin-bottom: clamp(28px, 3.3vw, 60px); }
.cs-eyebrow {
  margin: 0 0 16px;
  font-size: 16px; line-height: 28px; font-weight: 500; color: var(--ink-2);
}
.cs-eyebrow::before { content: '/ '; }
.cs-eyebrow::after  { content: ' /'; }
.cs-title {
  margin: 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(34px, 3.1vw, 60px); line-height: 1.17; letter-spacing: -3px;
}
.cs-intro {
  margin: 20px 0 0; max-width: 760px;
  font-size: 16px; line-height: 30px; color: var(--ink-2);
}
.cs-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(24px, 2.6vw, 46px) 0 clamp(28px, 3vw, 54px);
}

/* Lưới 24 cột để dựng nhịp thẻ rộng/hẹp so le của demo:
   hàng 1 = 14 + 10 · hàng 2 = 10 + 14 · hàng 3 = 14 + 10 … */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.cs-card { grid-column: span 14; }
.cs-card:nth-child(4n+2),
.cs-card:nth-child(4n+3) { grid-column: span 10; }
.cs-card[hidden] { display: none; }

.cs-card-in {
  display: flex; flex-direction: column;
  height: 100%;
  background: #1F1F1F;
  border-radius: var(--radius-bar);
  color: #fff;
}
.cs-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 20px 0 33px;
}
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-pill {
  display: inline-flex; align-items: center;
  min-height: 35px; padding: 4px 22px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap;
}
.cs-date {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 21px 11px 12px;
  background: #E34D4B; border-radius: 7px; color: #fff;
}
.cs-date-top { font-size: 14px; line-height: 20px; opacity: .9; }
.cs-date-day {
  font-family: var(--font-title); font-weight: 400;
  font-size: 30px; line-height: 34px; letter-spacing: -.9px;
}
.cs-date:not(:has(.cs-date-day:not(:empty))) { display: none; }

.cs-card-title {
  margin: 26px 33px 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(22px, 1.6vw, 30px); line-height: 1.17; letter-spacing: -.9px;
  color: #fff;
}
.cs-card-title a:hover { text-decoration: underline; }
.cs-card-excerpt {
  margin: 16px 33px 0;
  font-size: 15px; line-height: 26px; color: rgba(255,255,255,.72);
}
.cs-card-excerpt:empty { display: none; }
.cs-card-media { margin-top: auto; padding: 25px 16px 25px 23px; }
.cs-card-media img {
  width: 100%; height: auto;
  aspect-ratio: 726 / 324; object-fit: cover;
  border-radius: var(--radius-bar);
}
.cs-empty { margin: 0; padding: 40px 0; font-size: 16px; color: var(--muted); }

@media (max-width: 1100px) {
  .cs-card,
  .cs-card:nth-child(4n+2),
  .cs-card:nth-child(4n+3) { grid-column: span 12; }
}
@media (max-width: 760px) {
  .cs-card,
  .cs-card:nth-child(4n+2),
  .cs-card:nth-child(4n+3) { grid-column: span 24; }
  .cs { width: min(100% - 32px, var(--container)); }
  .cs-card-head { padding: 18px 16px 0 20px; }
  .cs-card-title, .cs-card-excerpt { margin-left: 20px; margin-right: 20px; }
}

/* ---------------- CHI TIẾT CASE STUDY — case-study-detail.html ----------------
   demo: cột thông tin tối bên trái ~330 dính trên, nội dung bên phải ~995
   trong ruột 1340 => khe 80. */
.csd {
  width: min(100% - 90px, 1340px);
  margin: clamp(56px, 7.8vw, 150px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 330fr) minmax(0, 930fr);
  gap: clamp(32px, 4.2vw, 80px);
  align-items: start;
}

/* Cột trái — thẻ thông tin, dính khi cuộn */
.csd-side { position: sticky; top: 130px; display: grid; gap: 30px; }
.csd-info {
  padding: 36px 32px 32px;
  background: #1F1F1F; border-radius: var(--radius-bar); color: #fff;
}
.csd-info-row + .csd-info-row { margin-top: 26px; }
.csd-info-row:not(:has(p:not(:empty))) { display: none; }
.csd-info-row h3 {
  margin: 0 0 6px;
  font-size: 14px; line-height: 22px; font-weight: 500; color: rgba(255,255,255,.6);
}
.csd-info-row p {
  margin: 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: 20px; line-height: 28px; letter-spacing: -.6px; color: #fff;
}
.csd-info-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.csd-info-pills:empty { display: none; }
.csd-info-pill {
  display: inline-flex; align-items: center;
  min-height: 35px; padding: 4px 20px;
  background: rgba(255,255,255,.1); border-radius: var(--radius-pill);
  font-size: 13px; color: #fff; white-space: nowrap;
}
.csd-side-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 26px;
  border-radius: var(--radius-pill);
  background: var(--active-bg); color: #fff;
  font-size: 16px; font-weight: 600; text-align: center;
}
.csd-side-cta:hover { background: #111; }
.csd-side-cta .svc-more-ic img { filter: brightness(0) invert(1); }

/* Cột phải — nội dung */
.csd-main { min-width: 0; }
.csd-hero-img {
  width: 100%; height: auto;
  aspect-ratio: 995 / 430; object-fit: cover;
  border-radius: var(--radius-bar);
}
.csd-hero:not(:has(img[src])) { display: none; }
.csd-sec { margin-top: clamp(40px, 5vw, 90px); }
.csd-sec:first-of-type { margin-top: clamp(32px, 3.4vw, 62px); }
.csd-sec[hidden] { display: none; }
.csd-h {
  margin: 0 0 24px;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(28px, 2.4vw, 46px); line-height: 1.14; letter-spacing: -1.4px;
}
.csd-lead {
  margin: 0 0 22px;
  font-size: 17px; line-height: 32px; font-weight: 700; color: var(--ink-2);
}
.csd-lead:empty { display: none; }
.csd-body { font-size: 16px; line-height: 30px; color: var(--ink-2); }
.csd-body p { margin: 0 0 20px; }
.csd-body p:last-child { margin-bottom: 0; }
.csd-body ul, .csd-body ol { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.csd-body ol { list-style: decimal; }

/* Gạch đầu dòng giải pháp — mũi tên, dùng lại nhịp của .sd-feats */
.csd-points { margin: 0 0 26px; padding: 0; list-style: none; }
.csd-points:empty { display: none; }
.csd-points li {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
  font-size: 16px; line-height: 28px; font-weight: 700; color: var(--ink-2);
}
.csd-points li::before {
  content: ''; flex: 0 0 9px; width: 9px; height: 9px; margin-top: 10px;
  background: var(--cta-border);
  -webkit-mask: url(../img/icon-form-arrow.svg) center / contain no-repeat;
          mask: url(../img/icon-form-arrow.svg) center / contain no-repeat;
  transform: rotate(90deg);
}

/* Con số kết quả — chữ viền rỗng như demo */
.csd-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 50px);
  margin-top: clamp(28px, 3.2vw, 56px);
}
.csd-outcomes:empty { display: none; }
.csd-outcome-num {
  display: block;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(52px, 5vw, 90px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--cta-border);
}
.csd-outcome-label {
  display: block; margin-top: 14px;
  font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink);
}

/* Trích dẫn khách hàng */
.csd-quote {
  margin: clamp(36px, 4vw, 70px) 0 0;
  padding: clamp(28px, 3vw, 50px);
  background: #F0F2F4; border-radius: var(--radius-bar);
}
.csd-quote[hidden] { display: none; }
.csd-quote-text {
  margin: 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px); line-height: 1.4; letter-spacing: -.9px;
  color: var(--ink);
}
.csd-quote-text::before { content: '“'; }
.csd-quote-text::after  { content: '”'; }
.csd-quote-by { margin: 22px 0 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.csd-quote-by b { display: block; color: var(--ink); font-weight: 600; }

.csd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: clamp(32px, 3.5vw, 60px);
}
.csd-gallery:empty { display: none; }
.csd-gallery img {
  width: 100%; height: auto;
  aspect-ratio: 650 / 450; object-fit: cover;
  border-radius: var(--radius-bar);
}

.csd-nav {
  width: min(100% - 90px, 1340px);
  margin: clamp(40px, 4.5vw, 80px) auto 0;
  display: flex; justify-content: space-between; gap: 16px;
}
.csd-nav[hidden] { display: none; }
.csd-nav-a { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.csd-nav-a:hover { text-decoration: underline; }
.csd-nav-a--next { margin-left: auto; }

@media (max-width: 1024px) {
  .csd { grid-template-columns: minmax(0, 1fr); }
  .csd-side { position: static; }
}
@media (max-width: 560px) {
  .csd, .csd-nav { width: min(100% - 32px, 1340px); }
}

/* ============================================================
   TỰ ẨN KHỐI CHƯA CÓ DỮ LIỆU
   Khối nào dựng sẵn khuôn nhưng khoá dữ liệu chưa tồn tại trong content.json thì
   core render ra một cái xác: eyebrow trơ "/ /", tiêu đề rỗng, danh sách rỗng,
   vẫn chiếm 300-570px chiều cao. Trang trống còn hơn trang render nửa vời.

   Việc phát hiện "rỗng" nằm ở site.js (hàm hideEmptyBlocks) chứ KHÔNG dùng CSS:
   :empty trong CSS tính cả text-node khoảng trắng, mà HTML thụt lề thì khối nào
   cũng có khoảng trắng -> không bao giờ khớp. JS đọc textContent.trim() thì chắc.
   ============================================================ */
[data-empty-hidden] { display: none !important; }

/* Trang thành viên: khi CẢ .ms-exp lẫn .ms-resp đều bị ẩn vì thiếu dữ liệu, bố
   cục 2 cột chỉ còn ảnh bên trái + vài dòng bio bên phải -> mảng trắng ~540px.
   Dồn về một cột cho cân. (.ms-exp bị member.js ẩn bằng thuộc tính hidden.) */
.ms-main:has(.ms-exp[hidden]):has(.ms-resp[data-empty-hidden]) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 40px;
}
/* PHẢI reset cả grid-column của từng con: chúng được gán cứng cột 1/cột 2, để
   nguyên thì trình duyệt tự đẻ ra cột 2 ngầm, template 1 cột thành vô nghĩa. */
.ms-main:has(.ms-exp[hidden]):has(.ms-resp[data-empty-hidden]) > * {
  grid-column: 1;
  grid-row: auto;
  margin-top: 0;
}
.ms-main:has(.ms-exp[hidden]):has(.ms-resp[data-empty-hidden]) .ms-card { max-width: 535px; }