/* ══════════════════════════════════════════════════════════════════════
   PAAN · Trang giới thiệu công ty
   ══════════════════════════════════════════════════════════════════════ */

/* ── Thanh điều hướng ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav .wrap { display: flex; align-items: center; gap: 20px; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-links a {
  padding: 8px 15px;
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: .92rem;
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a.on { color: var(--text); background: var(--surface-3); }

.nav-actions { display: flex; align-items: center; gap: 9px; flex: none; }

/* Nút loa: hiện biểu tượng tương ứng trạng thái đang phát hay đã tắt */
.snd-on { display: none; }
[data-sound="on"] .snd-on { display: block; }
[data-sound="on"] .snd-off { display: none; }

.burger {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: grid; }
  .nav-actions .btn { display: none; }
}

/* Ngăn kéo điều hướng trên điện thoại */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 890;
  background: var(--bg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.drawer.open { transform: none; visibility: visible; }
.drawer a {
  padding: 15px 16px;
  border-radius: var(--r);
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.drawer a:active { background: var(--surface-3); }
.drawer .btn { margin-top: 16px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 78px) 0 84px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Quầng sáng nền.
   Trước đây dùng filter: blur(90px) kèm animate scale — mỗi khung hình trình duyệt
   phải vẽ lại toàn bộ vùng mờ, máy GPU yếu không kịp nên nền chớp giật liên tục.
   Nay vẽ bằng gradient toả (trình duyệt vẽ một lần) và chỉ dịch chuyển bằng
   translate3d nên chạy thẳng trên GPU, không phải vẽ lại gì. */
.orb {
  position: absolute;
  border-radius: 50%;
  /* Nhiều chặng màu để độ loang giống hệt blur trước đây, không bị nhạt đi */
  background: radial-gradient(circle closest-side,
    var(--orb) 0%,
    color-mix(in srgb, var(--orb) 70%, transparent) 34%,
    color-mix(in srgb, var(--orb) 32%, transparent) 62%,
    transparent 100%);
  opacity: .62;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: float 26s ease-in-out infinite;
}
[data-theme="dark"] .orb { opacity: .40; }
.orb-1 { --orb: var(--brand);   width: 860px; height: 860px; top: -340px; right: -290px; }
.orb-2 { --orb: var(--cyan);    width: 680px; height: 680px; top: 30px;   left: -300px; animation-delay: -9s; }
.orb-3 { --orb: var(--brand-3); width: 580px; height: 580px; bottom: -260px; left: calc(42% - 100px); animation-delay: -18s; }

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(38px, -30px, 0); }
  66%      { transform: translate3d(-28px, 24px, 0); }
}

/* Tắt theo lựa chọn ở chân trang, không tự tắt theo cài đặt hệ điều hành nữa */
[data-motion="off"] .orb { animation: none !important; }
[data-motion="off"] .pulse { animation: none !important; }
/* ── Nền mạng nơ-ron ──────────────────────────────────────────────
   Vẽ bằng canvas: toàn bộ hiệu ứng nằm trong MỘT lớp duy nhất, trình duyệt
   không phải tính lại bố cục hay vẽ lại phần tử DOM nào, nên nhẹ và không giật. */
.neural {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Màu để JS đọc ra, nhờ vậy nền tự đổi theo giao diện sáng / tối */
.hero-bg {
  --net-node: 108, 92, 231;
  --net-line: 124, 110, 240;
  --net-pulse: 34, 184, 207;
  --net-strength: 1.55;   /* nền sáng nên phải đậm hơn mới nhìn rõ */
}
[data-theme="dark"] .hero-bg {
  --net-node: 167, 139, 250;
  --net-line: 139, 124, 246;
  --net-pulse: 56, 217, 233;
  --net-strength: 1;
}

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 22%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 22%, transparent 78%);
}

/* Chữ bên trái, hình người bên phải */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 40px;
  align-items: center;
}
.hero-inner { max-width: 880px; min-width: 0; }

.hero-figure {
  position: relative;
  min-width: 0;
  /* Đúng tỉ lệ khung vẽ của chân dung (620x780) để hình không bị hụt hai bên.
     Nền để trong suốt — hình người tan dần vào nền trang chứ không nằm trong hộp. */
  aspect-ratio: 620 / 780;
  max-height: 580px;
  /* Bấm vào nhân vật thì bật / tắt giọng nói. Chỉ nhận chuột trên ĐÚNG khung
     chứa này, còn canvas bên trong cố ý tràn ra ngoài khung để toả quầng sáng
     nên để nó trong suốt với chuột — nếu không phần tràn sẽ nuốt mất cú bấm và
     thao tác bôi đen chữ ở cột bên cạnh. */
  pointer-events: auto;
  cursor: pointer;
}
.hero-figure canvas {
  position: absolute;
  /* Canvas cố ý RỘNG HƠN khung chứa: quầng sáng viền và các hạt bắn ra khỏi thân
     nhờ vậy toả được ra ngoài chứ không bị cắt cụt ở mép khung. Cỡ người vẫn tính
     theo khung nên phóng to canvas không làm người to lên. */
  left: -13%;
  top: -15%;
  width: 126%;
  height: 130%;
  display: block;
  pointer-events: none;   /* xem ghi chú ở .hero-figure */
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  /* Trên điện thoại đưa hình lên trên làm ảnh mở đầu, thu gọn chiều cao */
  .hero-figure { order: -1; aspect-ratio: auto; height: 480px; max-height: 480px; }
}
@media (max-width: 560px) {
  .hero-figure { height: 450px; max-height: 450px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 26px;
}
.eyebrow b {
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
  color: #fff;
  font-size: .74rem;
  letter-spacing: .01em;
}
.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: pulse 2.2s infinite;
  flex: none;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero h1 { margin-bottom: 22px; }

/* Dòng tên công ty "PAAN TECHNOLOGY JSC" toàn chữ hoa nên rộng hơn hẳn dòng
   trên — đo được 1 dòng ≈ 11.45 lần cỡ chữ. Cỡ chữ h1 chung bám theo bề ngang
   MÀN HÌNH (vw) nên hỏng ở hai chỗ: ngay trên mốc 1000px hình minh hoạ ép cột
   chỉ còn ~496px (hẹp hơn cả điện thoại!), và dưới ~400px thì clamp chạm cận
   dưới 2.1rem. Cả hai đều rớt xuống hai dòng.
   Cách chữa: cho riêng dòng này bám BỀ NGANG CỘT bằng đơn vị cqi.
   8.4cqi = 8.4% bề ngang cột, chừa ~8% dự phòng so với mức khít 8.73%.
   min(...) giữ cho nó không bao giờ to hơn dòng đầu. */
.hero h1 .gradient-text {
  /* Dự phòng cho trình duyệt cũ chưa hiểu cqi: thu nhỏ theo màn hình. Chấp nhận
     xuống dòng chứ không đặt nowrap, vì tràn ngang còn khó coi hơn. */
  font-size: clamp(1.55rem, 4.1vw, 3.6rem);
}
@supports (font-size: 1cqi) {
  .hero h1 { container-type: inline-size; }
  .hero h1 .gradient-text {
    white-space: nowrap;
    font-size: min(clamp(2.1rem, 5.2vw, 3.6rem), 8.4cqi);
  }
}
.hero-sub {
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  color: var(--text-2);
  max-width: 660px;
  margin-bottom: 34px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 760px;
}
.stat {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  /* Cố ý KHÔNG dùng backdrop-filter ở đây: bốn ô này nằm chồng đúng vùng quầng
     sáng đang di chuyển, mỗi khung hình trình duyệt sẽ phải lọc lại nền phía sau
     — thêm một nguồn gây chớp giật. Nền mờ đục sẵn cho kết quả gần như y hệt. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
}
.stat b {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--brand), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span { font-size: .8rem; color: var(--text-3); font-weight: 600; }
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: calc(var(--header-h) + 46px) 0 56px; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* ── Dải công nghệ chạy ngang ─────────────────────────────────────── */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding: 17px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  /* Chạy được bằng CSS thuần trên MỌI trình duyệt, kể cả khi JS lỗi hoặc bị chặn.
     Khi JS chạy được, nó chỉ chỉnh lại animation-duration để tốc độ tính theo
     pixel/giây — nhờ vậy máy nào phông chữ rộng hẹp khác nhau vẫn cuốn đều như nhau. */
  animation: slide 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  /* Khoảng cách đặt bằng padding chứ không dùng gap: nhờ vậy dải nhân đôi rộng
     đúng gấp 2 lần một lượt, và translateX(-50%) khớp chính xác một chu kỳ.
     Dùng gap thì -50% lệch nửa khoảng cách, mỗi vòng lặp lại giật nhẹ một cái. */
  padding-right: 46px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: -.01em;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

[data-motion="off"] .marquee-track { animation: none !important; }

/* ── Khối chung ───────────────────────────────────────────────────── */
.section { padding: 92px 0; }
.section.alt { background: var(--bg-soft); }
@media (max-width: 720px) { .section { padding: 62px 0; } }

.section-head { max-width: 660px; margin-bottom: 46px; }
.section-head.center { margin-inline: auto; text-align: center; }
.tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-head p { margin-top: 14px; color: var(--text-2); font-size: 1.04rem; }

/* ── Dịch vụ ──────────────────────────────────────────────────────── */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.service {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sv, var(--brand)), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.service:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: color-mix(in srgb, var(--sv, var(--brand)) 40%, var(--line));
}
.service:hover::after { opacity: 1; }
.service-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--sv, var(--brand)) 13%, transparent);
  color: var(--sv, var(--brand));
  margin-bottom: 18px;
}
.service-ico svg { width: 24px; height: 24px; }
.service h3 { margin-bottom: 9px; }
.service p { color: var(--text-2); font-size: .94rem; }
.service ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service li {
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: .76rem;
  font-weight: 600;
}

/* ── Dự án ────────────────────────────────────────────────────────── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.filter {
  padding: 8px 17px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--brand); color: var(--brand); }
.filter.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-brand);
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(348px, 1fr));
  gap: 20px;
}
@media (max-width: 560px) { .projects { grid-template-columns: 1fr; } }

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: rise .5s var(--ease) backwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.project:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: color-mix(in srgb, var(--pc, var(--brand)) 45%, var(--line));
}
.project-cover {
  height: 128px;
  position: relative;
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--pc) 55%, transparent), transparent 62%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--pc) 34%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--pc) 22%, var(--surface-2)), var(--surface-2));
  display: flex;
  align-items: flex-end;
  padding: 16px 20px;
  overflow: hidden;
}
.project-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 12%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .35;
}
.project-initial {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 4.6rem;
  font-weight: 900;
  letter-spacing: -.07em;
  color: color-mix(in srgb, var(--pc) 34%, transparent);
  line-height: 1;
  user-select: none;
}
.project-badge {
  position: relative;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  font-size: .74rem;
  font-weight: 700;
  color: var(--pc);
}
.project-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.project-body h3 { font-size: 1.18rem; }
.project-tagline { color: var(--text-2); font-size: .91rem; }
.project-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.project-tech span {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: .73rem;
  font-weight: 600;
}
.project-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .8rem;
  color: var(--text-3);
  font-weight: 600;
}
.project-progress { display: flex; align-items: center; gap: 8px; flex: 1; }
.project-progress .bar { flex: 1; height: 5px; max-width: 108px; }
.project-progress .bar > i { background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #fff)); }

/* Chi tiết dự án trong hộp thoại */
.pd-cover {
  height: 118px;
  flex: none;          /* không cho co lại trong hộp thoại dạng flex column */
  margin: -22px -22px 4px;
  background:
    radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--pc) 58%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--pc) 24%, var(--surface-2)), var(--surface-2));
  position: relative;
}
.pd-section h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  margin: 0 0 10px;
  font-weight: 700;
}
.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pd-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--text-2); }
.pd-list li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--pc, var(--brand));
  flex: none;
}
/* ── Quy trình ────────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.step::before {
  counter-increment: step;
  content: '0' counter(step);
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.step h3 { font-size: 1.06rem; margin-bottom: 7px; }
.step p { color: var(--text-2); font-size: .9rem; }

/* ── Vì sao chọn Paan ─────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 34px; } }
.reasons { display: flex; flex-direction: column; gap: 16px; }
.reason {
  display: flex;
  gap: 15px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur), transform var(--dur);
}
.reason:hover { border-color: var(--brand); transform: translateX(4px); }
.reason-ico {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  color: var(--brand);
}
.reason-ico svg { width: 20px; height: 20px; }
.reason b { display: block; margin-bottom: 3px; }
.reason p { font-size: .9rem; color: var(--text-2); }

.code-window {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.code-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.code-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.code-bar i:nth-child(1) { background: #ff5f57; }
.code-bar i:nth-child(2) { background: #febc2e; }
.code-bar i:nth-child(3) { background: #28c840; }
.code-bar span { margin-left: 8px; font-size: .78rem; color: var(--text-3); font-weight: 600; }
.code-window pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: .8rem;
  line-height: 1.85;
  color: var(--text-2);
}
.c-key { color: var(--brand-2); }
.c-str { color: var(--teal); }
.c-fn { color: var(--cyan); }
.c-com { color: var(--text-3); font-style: italic; }
.c-num { color: var(--amber); }

/* ── Liên hệ ──────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; gap: 30px; } }

.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.contact-item .service-ico { margin: 0; width: 42px; height: 42px; border-radius: 12px; }
.contact-item span { display: block; font-size: .78rem; color: var(--text-3); font-weight: 600; }
.contact-item b { font-size: .96rem; word-break: break-word; }

/* Thẻ liên hệ bấm được (gọi điện, Zalo). Để cả khối làm vùng chạm thay vì chỉ
   mỗi dòng chữ — ngón tay trên điện thoại bấm trúng dễ hơn hẳn. */
a.contact-item {
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
a.contact-item:hover { border-color: var(--brand); transform: translateY(-2px); }
a.contact-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Máy đang bật "giảm chuyển động" thì bỏ phần nhấc lên, giữ lại đổi viền */
[data-motion='off'] a.contact-item { transition: border-color .18s ease; }
[data-motion='off'] a.contact-item:hover { transform: none; }

.form-card { padding: 28px; }
@media (max-width: 560px) { .form-card { padding: 20px; } }

/* ── Chân trang ───────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 54px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 38px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col p { color: var(--text-2); font-size: .9rem; }
.footer-col a:hover { color: var(--brand); }
.footer-about p { margin-top: 14px; color: var(--text-2); font-size: .9rem; max-width: 330px; }
.footer-bottom {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text-3);
}
.foot-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--text-3);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: color var(--dur) var(--ease);
}
.link-btn:hover { color: var(--brand); text-decoration-color: currentColor; }

/* ── Hiệu ứng xuất hiện khi cuộn ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Nút lên đầu trang */
.to-top {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 800;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  box-shadow: var(--sh-2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all var(--dur) var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }

/* Nút "Thêm vào danh bạ" — chỉ hiện khi người xem cuộn tới phần Liên hệ.
   Nằm bên TRÁI nút lên đầu trang (nút kia chiếm right:20px, rộng 44px) nên
   chừa sẵn 78px bên phải, hai nút không bao giờ chồng lên nhau. */
.vcard-fab {
  position: fixed;
  left: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  /* Cùng dải màu với nút chính. KHÔNG dùng var(--btn-bg) — biến đó chỉ khai báo
     bên trong .btn-primary chứ không có ở :root, đặt ở đây sẽ ra nền rỗng. */
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  box-shadow: var(--sh-brand);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vcard-fab.show { opacity: 1; pointer-events: auto; transform: none; }
.vcard-fab:hover { filter: brightness(1.06); }
.vcard-fab:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; }
.vcard-fab svg { flex: none; }

/* Màn hình hẹp: kéo dài hết bề ngang còn trống, chừa chỗ cho nút lên đầu trang */
@media (max-width: 560px) {
  .vcard-fab { left: 18px; right: 78px; justify-content: center; }
}
/* Máy đang bật "giảm chuyển động" thì hiện thẳng, không trượt lên */
[data-motion='off'] .vcard-fab { transition: opacity var(--dur) var(--ease); transform: none; }