/* Website công khai gisc.vn — chỉ nạp qua SiteLayout (HeadContent), không bao giờ nạp cùng
   admin-components.css, nên không cần @layer: không có gì để tranh độ ưu tiên với khu quản trị.
   Dùng lại token của tokens.css (màu, khoảng cách, bo góc) — xem README. */

/* Giao diện tối: assets/js/theme.js thêm class "dark" vào <html> (chọn tay hoặc theo
   prefers-color-scheme, nhớ bằng localStorage). Khối này ĐỊNH NGHĨA LẠI — không đổi giá trị gốc —
   những biến của tokens.css mà site.css đang dùng, nên mọi rule hiện có tự đổi màu mà không cần sửa
   từng chỗ. Không đụng tới --brand-green/--brand-lime/--brand-gold/--line/--surface-soft/
   --surface-muted ở tokens.css (HostLookTests khoá giá trị mặc định — chỉ chạy trên khu quản trị,
   nơi không bao giờ có class "dark" vì site.css, và do đó theme.js, không nạp ở /admin, /login). */
:root {
  --line-strong: color-mix(in srgb, var(--line) 45%, var(--ink-500));
  --tint-soft: var(--brand-green-100);
  --tint-soft-ink: var(--brand-green-700);
  --glow-accent: var(--brand-green);
}
html.dark {
  color-scheme: dark;
  --surface: #0b1015;
  --surface-soft: #12181f;
  --surface-muted: #161d25;
  --ink-950: #f3f6f5;
  --ink-800: #d7dee0;
  --ink-700: #b7c1c5;
  --ink-600: #94a1a6;
  --ink-500: #77848a;
  --line: #232d35;
  --line-strong: #34404a;
  --tint-soft: color-mix(in srgb, var(--brand-lime) 20%, black);
  --tint-soft-ink: var(--brand-lime);
  --glow-accent: var(--brand-lime);
  --shadow-xs: 0 0 0 1px var(--line);
  --shadow-sm: 0 0 0 1px var(--line);
  --shadow-md: 0 0 0 1px var(--line);
  --shadow-lift: 0 0 0 1px var(--line-strong), 0 24px 48px -16px rgba(0, 0, 0, .55);
}

/* Logo màu cyan gốc chìm trên nền tối. brightness(0) quy mọi màu về đen theo đúng vùng alpha của
   ảnh, invert(1) lật đen thành trắng — ra bản "trắng" tương phản rõ mà không cần thêm tệp ảnh. */
html.dark .site-header__logo img, html.dark .site-footer__logo { filter: brightness(0) invert(1); }

/* Chữ trông "thô, dày" so với bản tham khảo (localhost:3000) dù CÙNG một font (Be Vietnam Pro):
   base.css (dùng chung với khu quản trị) không bật font-smoothing, và letter-spacing tiêu đề
   (-.01em) lỏng hơn nhiều so với bản tham khảo (-.028em) — chữ đậm mà giãn cách rộng nhìn nặng nề,
   càng rõ ở cỡ h1. Đặt lại riêng cho website công khai ở đây thay vì sửa base.css, để không đổi
   giao diện khu quản trị ngoài phạm vi lần này. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.7; }
h1, h2, h3, h4 { letter-spacing: -.028em; }
/* base.css đặt h1 tới 4.25rem/h2 tới 2.65rem — bản tham khảo dừng ở 3.5rem (h1, lg:text-[3.5rem])
   và 2.25rem (h2, md:text-4xl). Chữ đậm càng lớn càng nhìn "thô", nhất là tiếng Việt nhiều dấu
   chồng lên nhau; hạ trần kích thước cho khớp bản tham khảo là phần sửa chính, font-smoothing và
   letter-spacing ở trên chỉ là phần cộng thêm. */
h1 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.1; margin-bottom: var(--space-5); }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); margin-bottom: var(--space-4); }
h3 { margin-bottom: var(--space-3); }
h4 { margin-bottom: var(--space-2); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-16); }
.section--sunken { background: var(--surface-soft); }
.eyebrow { display: block; margin-bottom: var(--space-3); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-green-700); }
.lead { font-size: 1.15rem; color: var(--ink-700); max-width: 60ch; }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 30; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); }
.site-header__logo img { height: 36px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.site-nav a { font-weight: 600; color: var(--ink-700); white-space: nowrap; padding: .5rem .75rem; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); }
.site-nav a:hover { color: var(--brand-green-700); background: var(--surface-soft); }
.site-nav a.is-active { color: var(--brand-green-700); background: var(--tint-soft); }
/* Specificity, không thứ tự nguồn: ".site-nav a" (một class + một thẻ) đã đủ thắng ".button--primary"
   (một class) vì nhiều hơn một thành phần chọn; ghép thêm class ".site-nav__cta" vào chính nút CTA
   để phần đè lên đủ nặng, thay vì để nút "Nhận báo giá" bị nuốt mất nền/màu chữ khi hover. */
.site-nav__cta.button { margin-left: var(--space-2); padding: .625rem 1.25rem; color: white; }
.site-nav__cta.button:hover { color: white; background: var(--brand-green-700); }

/* menu dịch vụ có menu con: chỉ CSS (:hover/:focus-within), không JS — cùng chủ trương với ghi
   chú "no JS, no hamburger" ở khối responsive bên dưới. Bàn phím/đọc màn hình vẫn mở được panel
   vì :focus-within kích hoạt ngay khi một link bên trong panel nhận focus (Tab từ nút kích hoạt). */
.nav-item { position: relative; }
.nav-item__trigger { display: inline-flex; align-items: center; gap: .3rem; }
.nav-item__chevron { transition: transform var(--transition); }
.nav-item:hover .nav-item__chevron, .nav-item:focus-within .nav-item__chevron { transform: rotate(180deg); }
.mega-menu {
  /* margin-top: 0 (không phải var(--space-2)) — có khoảng hở giữa nút bấm và bảng menu thì con trỏ
     đi qua đó là rời khỏi cả hai phần tử, mất :hover giữa chừng, đóng menu trước khi rê tới nơi.
     Khoảng cách hình ảnh với thanh nav lấy từ padding-top, không phải margin, nên bảng vẫn áp sát
     về mặt bố cục còn phần đệm phía trên vẫn thuộc vùng bấm được. */
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); width: 46rem; max-width: 90vw;
  margin-top: 0; padding: var(--space-3) var(--space-6) var(--space-6); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); z-index: 40;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.mega-menu__col { display: flex; flex-direction: column; gap: var(--space-1); }
.mega-menu__heading { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); margin-bottom: var(--space-2); }
/* Tiền tố ".mega-menu " nâng độ ưu tiên: ".site-nav a" (một class + một thẻ) vốn đã thắng một
   class đơn lẻ như ".mega-menu__link" bất kể thứ tự khai báo — thêm class tổ tiên là cách rẻ nhất
   để phần ghi đè đủ nặng, không phải đổi kiến trúc chọn lớp (theo đúng bài học từ .button--secondary
   và .form-grid ở trên, chỉ khác nguồn xung đột lần này là site-nav thay vì admin-components.css). */
.mega-menu .mega-menu__link { display: flex; align-items: flex-start; gap: var(--space-2); padding: .5rem; border-radius: var(--radius-sm); font-weight: 500; color: var(--ink-800); white-space: normal; line-height: 1.3; }
.mega-menu .mega-menu__link:hover { background: var(--surface-soft); color: var(--brand-green-700); }
.mega-menu__link-icon { flex-shrink: 0; margin-top: .1rem; color: var(--ink-500); }
.mega-menu .mega-menu__link:hover .mega-menu__link-icon { color: var(--brand-green-700); }
.mega-menu__footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mega-menu .mega-menu__footer a { padding: 0; font-weight: 700; color: var(--brand-green-700); }
.mega-menu .mega-menu__footer a:hover { color: var(--brand-green); background: none; }

.lang-switcher { display: inline-flex; align-items: center; gap: .125rem; padding: .1875rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.lang-switcher a { padding: .3rem .6rem; border-radius: calc(var(--radius-sm) - 2px); font-size: .8rem; font-weight: 700; color: var(--ink-600); }
.lang-switcher a:hover { background: none; color: var(--ink-800); }
.lang-switcher a.is-active { background: var(--surface); color: var(--ink-950); box-shadow: var(--shadow-xs); }

/* Icon mặt trời/mặt trăng: cả hai luôn render sẵn (SSR không biết localStorage của trình duyệt),
   CSS ẩn/hiện theo class "dark" trên <html> — đổi tức thì, không chờ vòng round-trip nào. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink-600); background: none; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.theme-toggle:hover { color: var(--brand-green-700); border-color: var(--brand-green); background: none; }
.theme-toggle__icon--sun { display: none; }
html.dark .theme-toggle__icon--moon { display: none; }
html.dark .theme-toggle__icon--sun { display: block; }

/* Mobile/tablet: 7 nav links + switcher don't fit next to the logo without wrapping into a mess.
   Stack the logo above and let the nav scroll horizontally — no JS, no hamburger to wire up.
   Mega menu is a hover/focus affordance a touch screen can't trigger anyway, so on these widths
   "Dịch vụ" just behaves like a plain link to /services — no loss, nothing to tap that would do
   nothing. */
@media (max-width: 860px) {
  .site-header__bar { flex-wrap: wrap; padding-block: var(--space-3); gap: var(--space-3); }
  .site-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
  .mega-menu { display: none; }
}

/* footer — nền trung tính (surface-soft) thay vì mảng teal đặc trước đây: hoà theo giao diện
   sáng/tối thay vì luôn tối bất kể theme, và đủ thoáng để 4 cột liên kết với khối định danh
   bên trái không bị chật. */
.site-footer { background: var(--surface-soft); border-top: 1px solid var(--line); padding-block: var(--space-20) var(--space-10); }
.site-footer a { color: var(--ink-600); transition: color var(--transition); }
.site-footer a:hover { color: var(--brand-green-700); }
.site-footer__top { display: grid; gap: var(--space-12); grid-template-columns: 1fr; margin-bottom: var(--space-12); }
@media (min-width: 960px) { .site-footer__top { grid-template-columns: 1.4fr 2fr; gap: var(--space-16); } }
.site-footer__logo { height: 32px; width: auto; margin-bottom: var(--space-4); }
.site-footer__tagline { color: var(--ink-600); max-width: 32rem; line-height: 1.65; margin-bottom: var(--space-5); }
.site-footer__address { display: flex; flex-direction: column; gap: var(--space-3); font-size: .9rem; font-style: normal; }
.site-footer__address-row { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-600); }
.site-footer__address-row .icon { flex-shrink: 0; margin-top: .15rem; color: var(--ink-500); }
.site-footer__nav { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: repeat(4, 1fr); } }
.site-footer__nav > div { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__heading { font-weight: 700; color: var(--ink-950); font-size: .9rem; margin-bottom: var(--space-1); }
.site-footer__bottom {
  display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6);
  border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-500);
}
.site-footer__bottom-text { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* hero */
/* Nền lưới chấm + quầng sáng nhẹ theo màu thương hiệu, thay cho mảng gradient hai quầng cũ (để lại
   một cạnh cứng nhìn như khung viền quanh h1 — xem FINDING-001). Vẽ bằng CSS, không phải ảnh: tự đổi
   theo --line-strong/--glow-accent khi bật giao diện tối, không có ảnh nào để hỏng hay lệch tỉ lệ.
   Che dần từ trái (nơi có chữ) sang phải (nơi có hoạ tiết) vì bố cục ở đây là chữ-trái/hoạ tiết-phải,
   không phải một khối nội dung căn giữa. */
.hero, .page-header { position: relative; overflow: hidden; }
.hero::before, .page-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 38%, black 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, black 100%);
  opacity: .6;
}
.hero::after, .page-header::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 70% at 60% 0%, var(--glow-accent) 0%, transparent 72%);
  opacity: .1;
}
.hero { padding-block: var(--space-20) var(--space-16); }
.hero .container { position: relative; z-index: 1; display: grid; gap: var(--space-10); align-items: center; }
.hero__motif { display: none; }
@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1.1fr .9fr; }
  .hero__motif { display: block; justify-self: end; width: 100%; max-width: 340px; }
}
.hero__title { max-width: 22ch; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

/* kiểu chữ hiển thị chung cho site công khai — chỉ áp dụng ở đây vì site.css không nạp cùng admin */
h1, h2 { letter-spacing: var(--tracking-display-lg); }

/* Routes.razor dùng <FocusOnNavigate Selector="h1"> để đưa focus vào h1 sau mỗi lần chuyển trang
   (cho screen reader) — không phải người dùng bấm Tab, nên không nên hiện viền focus tương tác. */
h1:focus-visible { outline: none; }

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: .75rem 1.5rem; border-radius: var(--radius-md); font-weight: 700; border: 1px solid transparent; transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--brand-green); color: white; }
.button--primary:hover { background: var(--brand-green-700); color: white; }
/* admin-components.css (nạp toàn cục, kể cả trang công khai — xem App.razor) đặt background cho
   .button trong một @layer; layer luôn thua style không nằm trong layer nào một khi có khai báo
   cùng thuộc tính, nhưng .button--secondary trước đây không hề khai báo "background" nên không có
   gì để thắng — nút "viền" hoá ra tô kín màu teal như nút chính. Đặt rõ "none" ở đây. */
.button--secondary { background: none; border-color: var(--line); color: var(--ink-800); }
.button--secondary:hover { border-color: var(--brand-green); color: var(--brand-green-700); }

/* cards / grids */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.grid-auto { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1.3fr 1fr; } }

.service-card__group { display: inline-block; margin-bottom: var(--space-3); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tint-soft-ink); background: var(--tint-soft); border-radius: 999px; padding: .2rem .65rem; }
.service-card > p { margin-top: var(--space-2); color: var(--ink-600); font-size: .9rem; line-height: 1.65; }
.service-card ul { margin: var(--space-3) 0 0; padding-left: 1.1rem; color: var(--ink-700); font-size: .9rem; }
.service-card ul li { margin-bottom: var(--space-2); }
.service-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md); background: var(--tint-soft); color: var(--tint-soft-ink);
  margin-bottom: var(--space-5);
}
.service-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.service-card__head h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: normal; }
.service-card__arrow { flex-shrink: 0; margin-top: .125rem; color: var(--ink-500); transition: color var(--transition); }
.service-card:hover .service-card__arrow { color: var(--brand-green-700); }

.stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.stats__icon {
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); width: 3rem; height: 3rem;
  border-radius: 999px; background: color-mix(in srgb, white 12%, transparent); color: var(--brand-lime);
}
.stats__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--brand-green-700); }

/* section nền tối — dùng cho phần cần nổi bật trên trang, không chỉ ở footer */
.section--dark { background: var(--gradient-dark); color: var(--brand-green-100); }
.section--dark .eyebrow { color: var(--brand-lime); }
.section--dark h2 { color: white; }
.section--dark p { color: var(--brand-green-100); }
.section--dark .stats__value { color: white; }
.section--dark .stats__icon { color: var(--brand-lime); }

/* trích dẫn khách hàng */
.testimonial { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-xs); }
.testimonial p { font-size: 1.05rem; color: var(--ink-800); }
.testimonial__author { display: flex; flex-direction: column; margin-top: var(--space-6); font-weight: 700; }
.testimonial__author span { font-weight: 500; color: var(--ink-600); }

/* dải "công nghệ sử dụng" dạng chữ, không dùng ảnh logo — nằm trong .section nên không cần
   thêm khoảng đệm dọc riêng, tránh cộng dồn thành một dải trắng trống quá lớn */
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--space-10); justify-content: center; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--space-6); }
.logo-strip span { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink-600); }

.cta-band { position: relative; overflow: hidden; background: var(--gradient-dark); color: white; border-radius: var(--radius-xl); padding: var(--space-12); text-align: center; }
.cta-band p { color: var(--brand-green-100); }
.cta-band .button--secondary { background: none; border-color: rgba(255,255,255,.4); color: white; }

/* page header (About/Services/Contact...) */
.page-header { padding-block: var(--space-12) var(--space-10); border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.page-header .container { position: relative; z-index: 1; }
.page-header__motif { display: none; }
@media (min-width: 900px) {
  .page-header__motif { display: block; position: absolute; z-index: 1; right: var(--space-6); top: 50%; transform: translateY(-50%); width: 160px; opacity: .8; pointer-events: none; }
}
.breadcrumb { font-size: .85rem; color: var(--ink-600); margin-bottom: var(--space-4); }
.breadcrumb a:hover { color: var(--brand-green-700); }

/* commitments (About) */
.commitment-list { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.commitment { display: flex; gap: var(--space-4); }
.commitment__mark {
  flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--brand-green), var(--brand-green-700)); color: white;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* contact */
.contact-info { display: grid; gap: var(--space-4); font-size: .9rem; font-style: normal; }
.contact-info__row { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-700); }
.contact-info__row:is(a):hover { color: var(--brand-green-700); }
.contact-info__icon { flex-shrink: 0; margin-top: .15rem; color: var(--ink-500); }
.contact-info__label { display: block; font-weight: 600; color: var(--ink-800); }
.card__header { border-bottom: 1px solid var(--line); padding: var(--space-4) var(--space-6); font-weight: 700; color: var(--ink-800); }
/* grid-template-columns đặt rõ "1fr": admin-components.css (nạp toàn cục — xem App.razor) đặt
   .form-grid thành 2 cột trong một @layer; .form-grid ở đây trước nay chưa từng tự khai báo
   grid-template-columns nên không có gì để thắng layer đó — y hệt lỗi .button--secondary. */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.form-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-field { display: grid; gap: var(--space-2); }
.form-field label { font-weight: 600; font-size: .9rem; color: var(--ink-800); }
.form-field__required { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-md); font: inherit;
  background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--ink-500); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 20%, transparent);
}
/* ink-500 do mau o day (#7c8b83 tren nen trang) chi dat 3.57:1 — duoi nguong 4.5:1 cua WCAG AA cho
   chu thuong. ink-600 dat 5.25:1 (sang) / 7.19:1 (toi), do bang cong thuc luminance cua WCAG. */
.form-consent { font-size: .8rem; color: var(--ink-600); }
.form-section-title { margin: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); font-size: 1.05rem; }

/* checklist compact dùng ở khối bên (Quote) — khác ".commitment-list" (About) ở chỗ không có
   khối số lớn, hợp với khung hẹp bên cạnh biểu mẫu thay vì hàng ngang trên trang riêng. */
.commit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.commit-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.commit-item__icon {
  flex-shrink: 0; margin-top: .2rem; width: 1.25rem; height: 1.25rem; padding: .2rem; border-radius: 999px;
  background: var(--tint-soft); color: var(--tint-soft-ink);
}
.commit-item h3 { font-size: .9rem; margin-bottom: .2rem; }
.commit-item p { font-size: .85rem; color: var(--ink-600); margin: 0; line-height: 1.5; }
.form-notice { padding: var(--space-4); border-radius: var(--radius-md); font-size: .9rem; }
.form-notice--success { background: var(--tint-soft); color: var(--tint-soft-ink); }
.form-notice--error { background: #fef3f2; color: var(--danger); }
html.dark .form-notice--error { background: color-mix(in srgb, var(--danger) 18%, black); color: #ffb4ab; }
iframe.contact-map { width: 100%; height: 320px; border: 0; border-radius: var(--radius-lg); background: var(--surface-muted); }

/* pricing */
.pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.pricing-card--recommended { border-color: var(--brand-green); box-shadow: 0 0 0 2px var(--brand-green); }
.pricing-card__badge { position: absolute; top: -0.75rem; right: var(--space-6); background: var(--brand-green); color: white; font-size: .75rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; }
.pricing-card__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--brand-green-700); }
.pricing-card__price span { font-size: .9rem; font-weight: 500; color: var(--ink-600); }
.pricing-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-700); font-size: .9rem; }
.pricing-card ul li { margin-bottom: var(--space-2); }

.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table th { background: var(--surface-soft); font-weight: 700; }
.data-table-wrap { overflow-x: auto; }

.notice { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); font-size: .9rem; color: var(--ink-700); }

/* faq */
.faq-item { border-bottom: 1px solid var(--line); padding-block: var(--space-4); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--brand-green-700); }
.faq-item[open] summary::before { content: '\2212'; }
.faq-item p { margin-top: var(--space-3); color: var(--ink-700); }

/* pagination / pills */
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-10); }
.pagination a, .pagination span { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pagination a:hover { border-color: var(--brand-green); color: var(--brand-green-700); }
.pagination .is-current { background: var(--brand-green); color: white; border-color: var(--brand-green); }

.pill-group { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-8); }
.pill { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink-700); }
.pill.is-active, .pill:hover { border-color: var(--brand-green); color: var(--tint-soft-ink); background: var(--tint-soft); }

.empty-state { padding: var(--space-12); text-align: center; color: var(--ink-600); border: 1px dashed var(--line); border-radius: var(--radius-lg); }

/* case studies / news cards */
.metric-row { display: flex; gap: var(--space-6); margin-top: var(--space-4); }
.metric-row strong { display: block; font-size: 1.3rem; color: var(--brand-green-700); font-family: var(--font-display); }
.metric-row span { font-size: .8rem; color: var(--ink-600); }
.meta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: .8rem; color: var(--ink-600); margin-bottom: var(--space-2); }

/* sitemap */
.sitemap-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sitemap-grid h2 { margin-bottom: var(--space-3); font-size: 1rem; }
.sitemap-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

/* search */
.search-form { display: flex; gap: var(--space-3); margin-bottom: var(--space-10); max-width: 640px; }
.search-form input { flex: 1; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }