/* ============================================================
   service-grids.css — 10 thẻ dịch vụ.
   Mỗi thẻ = tiêu đề + lưới ảnh vuông (1–4 ảnh) + thanh tương tác.

   Nền vàng: #services-content::before dùng CHUNG rule với trang Sản phẩm
   trong css/style.css (background1.svg, fixed 100lvh + phủ trắng) nên nền hai
   trang giống hệt nhau, không bị phóng to và không giật khi cuộn.

   Lưới ảnh là hình vuông chia trên khung 6×6 ô → mọi bố cục lấp đủ 36 ô.
   ============================================================ */

.svc-section {
  padding: 10px 0 28px;
}

.svc-wrap {
  /* Một cột, rộng hết khung nội dung của site.
     Từng siết còn 560px để thẻ khỏi cao vống lên, vì khối ảnh .svc-grid là
     aspect-ratio 1/1 — khung rộng bao nhiêu thì ảnh cao bấy nhiêu. Cách đó bỏ
     phí quá nhiều chiều ngang trên desktop. Nay trả lại 1180px và xử lý chiều
     cao ở đúng chỗ gây ra nó: .svc-grid đổi tỉ lệ theo bề rộng màn (xem media
     query cuối file). */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 10px;
  display: grid;
  /* minmax(0, 1fr) chứ không phải 1fr: ô grid mặc định có min-width auto nên
     nội dung rộng (ảnh, chữ dài) đẩy được ô vượt khung gây tràn ngang. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  /* Grid mặc định kéo giãn ô cùng hàng cho bằng ô cao nhất → thẻ thấp hơn thừa
     mảng trắng dưới thanh tim/bình luận. Cho mỗi thẻ tự cao theo nội dung. */
  align-items: start;
}

/* ── Thẻ ── */
/* NỀN VÀNG. Chủ trang chốt thẻ ở /dichVu phải giống thẻ trang chủ 100%, nên luật này nằm
   ở đây — tệp này KHÔNG bị khoá trong #homepage-content như css/luxury-home.css, nhờ vậy
   một khai báo phủ được cả hai trang.

   Gradient chép từ .bg-primary trong css/style.css (quanh dòng 1975). Chép chứ không mượn
   class: thẻ dựng bằng JS ở hai nơi, gắn thêm một class Bootstrap chỉ để lấy màu thì lúc
   nào đó sẽ có nơi quên gắn. Đổi màu vàng của site thì sửa CẢ HAI chỗ.

   Trước bản gộp, thẻ ở đây nền trắng rgba(255,255,255,.94) — nền đục thay cho
   backdrop-filter, vì mỗi thẻ có backdrop-filter là một lớp compositing riêng (10 lớp),
   khiến iOS Safari lấy mẫu sai màu để tô thanh công cụ dưới. Nền đặc bây giờ cũng không
   dùng backdrop-filter nên cái bẫy ấy vẫn tránh được. */
.svc-card {
  background: linear-gradient(135deg,
      #fff8e1 0%,
      #fdf3dc 45%,
      #f3d68e 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 48px -26px rgba(120, 78, 20, 0.55);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.35s ease;
}

.svc-card:hover {
  box-shadow: 0 30px 60px -26px rgba(120, 78, 20, 0.62);
}

/* Vệt sáng quét qua thẻ khi rê chuột.
   KHÔNG kèm phép nâng thẻ lên: chủ trang đã yêu cầu bỏ hẳn. Trên màn cảm ứng :hover không
   tự mất sau khi chạm, nên thẻ nhảy lên là KẸT ở đó, lệch hẳn so với các thẻ bên cạnh. */
.svc-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transition: left .75s ease;
  pointer-events: none;
  z-index: 1;
}

.svc-card:hover::after {
  left: 130%;
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card::after {
    transition: none !important;
  }
}

/* ── Tiêu đề ── */
.svc-head {
  padding: 18px 18px 16px;
  /* Phần chữ nằm DƯỚI ảnh và giãn ra: ba thẻ cùng hàng cao bằng nhau (.h-100) mà mô tả dài
     ngắn khác nhau thì thanh nút vẫn luôn sát đáy, thẳng hàng giữa các thẻ. */
  flex: 1 1 auto;
}

.svc-title {
  font-family: "Cormorant Garamond", serif;
  /* 400 thay vì 300: Cormorant là font variable 300–500, ở cỡ tiêu đề nét 300
     mảnh tới mức dấu thanh tiếng Việt (ẫ, ộ, ề) bị nhạt hẳn so với thân chữ. */
  font-weight: 400;
  font-size: 1.5rem;
  /* 1.5 quá thưa cho một tiêu đề 2–3 dòng: các dòng rời rạc, không đọc thành
     một khối. Serif hiển thị cỡ này cần khoảng 1.25. */
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--text-header);
  font-style: italic;
  text-align: center;
  /* KHÔNG dùng transform: scaleY(). Nó kéo giãn ảnh chữ đã render nên nét dọc
     dày lên còn nét ngang giữ nguyên — sai tỉ lệ mà người thiết kế font đã cân,
     nhìn như chữ bị bóp. Muốn chữ cao hơn thì tăng font-size. */
  /* Chia đều chữ giữa các dòng, tránh dòng cuối trơ lại một từ */
  text-wrap: balance;
}

.svc-sub {
  margin: 9px 0 0;
  font-size: 0.9rem;
  /* Be Vietnam Pro chỉ có 300/400/500 (xem fonts/fonts.css). Đặt 200 thì trình
     duyệt tự làm mảnh chữ đi — nét gãy và mờ, rõ nhất ở dấu tiếng Việt. */
  font-weight: 300;
  color: var(--text-normal);
  /* 1.2 là khoảng dòng của tiêu đề, dùng cho đoạn văn dài thì các dòng dính vào
     nhau, dấu thanh dòng dưới chạm chân chữ dòng trên. */
  line-height: 1.6;
  text-align: justify;
  /* Tiếng Việt gần như không ngắt từ được, nên khi canh đều trình duyệt chỉ có
     cách giãn khoảng trắng. Không tắt hyphens thì Safari vẫn thử chèn gạch nối
     vào giữa từ tiếng Việt ở vài chỗ, nhìn rất sai. */
  hyphens: none;
  -webkit-hyphens: none;
  /* Cắt còn 3 dòng: có sub dài hơn 400 ký tự, để nguyên thì phần chữ cao gần
     bằng phần ảnh và cả trang thành một bức tường chữ. Nội dung đầy đủ nằm ở
     trang chi tiết.

     KHÔNG dùng -webkit-line-clamp ở đây. Nó không đi được với text-align:
     justify: WebKit tính vị trí dấu "…" theo dòng LÚC CHƯA canh đều, rồi mới
     giãn dòng ra cho chạm mép phải — nên ba chấm bị vẽ đè lên chữ cuối dòng.

     Cắt bằng max-height thay thế: 3 dòng = 3 × line-height = 4.8em. Cắt đúng
     ranh giới dòng nên không bao giờ lòi ra nửa con chữ, và không có dấu ba
     chấm nào để chồng lên.

     Cũng KHÔNG bù lại tín hiệu "còn nữa" bằng mask mờ dần: mask tạo thêm một
     lớp compositing cho mỗi thẻ, đúng thứ đã khiến iOS Safari lấy sai màu tô
     thanh công cụ hồi còn dùng backdrop-filter (xem ghi chú ở .svc-card).
     Cắt gọn ở ranh giới dòng là đủ — cả thẻ vốn đã bấm được để đọc tiếp. */
  max-height: calc(1.6em * 3);
  overflow: hidden;
}

/* Tên thẻ là liên kết thật cho Google đi theo (buildCard, js/service-grids.js; thẻ bác sĩ ở
   js/bac-si.js dùng chung lớp này) — nhìn PHẢI y như chữ thường: thừa hưởng màu, không gạch chân,
   kể cả khi rê chuột hay đã ghé. */
.svc-lk,
.svc-lk:hover,
.svc-lk:visited,
.svc-lk:focus {
  color: inherit;
  text-decoration: none;
}

/* ── Lưới ảnh 6×6 ── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  /* Vuông trên màn hẹp. Từ tablet trở lên tỉ lệ dẹt dần — xem media query cuối
     file. Đổi tỉ lệ KHÔNG phá bố cục: 10 kiểu chia (.g-s-*) đều đặt theo ô của
     khung 6×6, ô chỉ chuyển từ vuông sang chữ nhật nằm ngang. */
  aspect-ratio: 1 / 1;
  gap: 2px;
  background: rgba(212, 162, 77, 0.22);
  /* .svc-grid là flex item của .svc-card nên cũng mang min-height: auto; nếu
     không ghim về 0 thì nội dung vẫn kéo được nó cao hơn aspect-ratio. */
  min-height: 0;
}

.svc-tile {
  position: relative;
  overflow: hidden;
  background: #f3ecdd;
  cursor: pointer;
  /* Ô lưới mặc định có min-width/min-height: auto = kích thước nội dung, nên ảnh
     to sẽ đẩy hàng cao vượt 1fr và lưới phình quá aspect-ratio 1/1 (đo được có
     thẻ cao 1040px thay vì 577px). Ghim về 0 để hàng bám đúng 1fr. */
  min-width: 0;
  min-height: 0;
}

.svc-tile img {
  /* Tuyệt đối trong ô (ô đã position: relative) để ảnh KHÔNG nằm trong luồng,
     nhờ vậy kích thước gốc của ảnh không bao giờ đẩy được hàng lưới cao lên.
     Đây mới là thứ giữ lưới đúng vuông; min-height: 0 ở trên chỉ là lớp chặn thứ hai. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%; /* smart-crop ghi đè bằng trọng tâm thật */
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.svc-tile img.is-loaded {
  opacity: 1;
}

.svc-tile:hover img {
  transform: scale(1.03);
}

/* Badge "+N" kiểu Facebook */
.svc-more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ── Thanh tương tác dưới thẻ ── */
/* Dải chân thẻ, KHÔNG phải một mảng trong suốt.
 *
 * Chủ trang báo hai lần là thanh này "bị cắt phía dưới". Đo thì nó nằm trọn trong thẻ —
 * cái gây ra cảm giác ấy là MÀU: thanh trong suốt trên nền vàng, mà ngoài thẻ là nền kem,
 * nên góc bo 18px cắt chéo hai đầu dải vàng trên nền kem, tương phản rõ.
 * Cho thanh một nền sáng hơn và bo hai góc dưới của chính nó (17px = 18px trừ viền 1px)
 * thì góc tròn là hình dạng CỦA dải, không còn là vết cắt vào nó. */
.svc-bar {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(184, 120, 45, 0.16);
  background: rgba(255, 255, 255, .34);
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  position: relative;
  z-index: 2;
}

.svc-act {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 6px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #7b6440;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.svc-act + .svc-act {
  border-left: 1px solid rgba(184, 120, 45, 0.12);
}

.svc-act svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform 0.18s ease;
}

.svc-act:hover {
  background: rgba(212, 162, 77, 0.12);
  color: #5c4a1e;
}

.svc-act:active svg {
  transform: scale(0.86);
}

/* Đã thích */
.svc-act.is-on {
  color: #e0245e;
}

.svc-act.is-on:hover {
  background: rgba(224, 36, 94, 0.09);
  color: #c51e51;
}

.svc-count {
  font-variant-numeric: tabular-nums;
}

/* ── Thẻ mở được trang riêng ── */
.svc-card.is-link {
  cursor: pointer;
}

.svc-card.is-link:hover {
  box-shadow: 0 22px 46px -22px rgba(120, 78, 20, 0.62);
}

.svc-card.is-link:focus-visible {
  outline: 2px solid #d4a24d;
  outline-offset: 2px;
}

/* ══ 10 kiểu chia hình vuông — mỗi kiểu lấp đủ 36 ô ══════ */

/* 1 ảnh */
.g-s-full > :nth-child(1) { grid-area: 1 / 1 / 7 / 7; }

/* 2 ảnh — chia đôi dọc */
.g-s-2col > :nth-child(1) { grid-area: 1 / 1 / 7 / 4; }
.g-s-2col > :nth-child(2) { grid-area: 1 / 4 / 7 / 7; }

/* 2 ảnh — chia đôi ngang */
.g-s-2row > :nth-child(1) { grid-area: 1 / 1 / 4 / 7; }
.g-s-2row > :nth-child(2) { grid-area: 4 / 1 / 7 / 7; }

/* 2 ảnh — chia lệch 2:1 */
.g-s-2asym > :nth-child(1) { grid-area: 1 / 1 / 7 / 5; }
.g-s-2asym > :nth-child(2) { grid-area: 1 / 5 / 7 / 7; }

/* 3 ảnh — 1 lớn trái + 2 nhỏ phải */
.g-s-3left > :nth-child(1) { grid-area: 1 / 1 / 7 / 5; }
.g-s-3left > :nth-child(2) { grid-area: 1 / 5 / 4 / 7; }
.g-s-3left > :nth-child(3) { grid-area: 4 / 5 / 7 / 7; }

/* 3 ảnh — 1 lớn phải + 2 nhỏ trái */
.g-s-3right > :nth-child(1) { grid-area: 1 / 3 / 7 / 7; }
.g-s-3right > :nth-child(2) { grid-area: 1 / 1 / 4 / 3; }
.g-s-3right > :nth-child(3) { grid-area: 4 / 1 / 7 / 3; }

/* 3 ảnh — 1 lớn trên + 2 nhỏ dưới */
.g-s-3top > :nth-child(1) { grid-area: 1 / 1 / 5 / 7; }
.g-s-3top > :nth-child(2) { grid-area: 5 / 1 / 7 / 4; }
.g-s-3top > :nth-child(3) { grid-area: 5 / 4 / 7 / 7; }

/* 3 ảnh — 2 nhỏ trên + 1 lớn dưới */
.g-s-3bottom > :nth-child(1) { grid-area: 3 / 1 / 7 / 7; }
.g-s-3bottom > :nth-child(2) { grid-area: 1 / 1 / 3 / 4; }
.g-s-3bottom > :nth-child(3) { grid-area: 1 / 4 / 3 / 7; }

/* 4 ảnh — 2×2 */
.g-s-4quad > :nth-child(1) { grid-area: 1 / 1 / 4 / 4; }
.g-s-4quad > :nth-child(2) { grid-area: 1 / 4 / 4 / 7; }
.g-s-4quad > :nth-child(3) { grid-area: 4 / 1 / 7 / 4; }
.g-s-4quad > :nth-child(4) { grid-area: 4 / 4 / 7 / 7; }

/* 4 ảnh — 1 lớn trên + 3 nhỏ dưới */
.g-s-4hero > :nth-child(1) { grid-area: 1 / 1 / 5 / 7; }
.g-s-4hero > :nth-child(2) { grid-area: 5 / 1 / 7 / 3; }
.g-s-4hero > :nth-child(3) { grid-area: 5 / 3 / 7 / 5; }
.g-s-4hero > :nth-child(4) { grid-area: 5 / 5 / 7 / 7; }

/* ── KHUNG ẢNH LUÔN VUÔNG, Ở MỌI KHỔ MÀN ──────────────────────────────────────────
   Chủ trang chốt: một ảnh tràn ô vuông, hai ảnh chữ nhật ghép thành vuông, bốn ảnh vuông
   nhỏ — kiểu nào cũng phải nằm trong một khung VUÔNG. Tỉ lệ duy nhất là aspect-ratio: 1/1
   khai ở .svc-grid, không có ngoại lệ theo bề ngang màn.

   LỊCH SỬ, để người sau khỏi "sửa lại cho đúng": chỗ này từng hạ tỉ lệ dần theo màn —
   4/3 từ 768px, 3/2 từ 992px, 16/9 từ 1200px. Lý do khi ấy là thẻ bên /dichVu chiếm hết
   một cột rộng 1180px, mà vuông nghĩa là rộng bao nhiêu cao bấy nhiêu, tức ~1160px, quá
   một màn laptop. Nhưng cách ấy đo theo BỀ NGANG MÀN chứ không theo bề ngang THẺ, nên nó
   bóp dẹt luôn cả thẻ trang chủ — vốn chỉ rộng ~350px vì xếp ba cột — và đó chính là chỗ
   bị báo lỗi. Muốn thẻ /dichVu đỡ cao thì siết bề ngang .svc-wrap, đừng đụng vào tỉ lệ. */
@media (min-width: 768px) {
  .svc-wrap {
    gap: 18px;
    padding: 0 14px;
  }
}

@media (min-width: 992px) {

  /* ── Tinh chỉnh cho desktop ──
     Thẻ rộng 1180px thì mọi thứ đo theo điện thoại đều bị lệch thang: padding
     18px thành sợi chỉ quanh mảng trắng khổng lồ, tiêu đề 1.5rem thành bé tí. */
  /* KHÔNG đổi border-radius theo bề rộng màn: chủ trang chốt bo góc 18px, bằng đúng thẻ
     sản phẩm (.product-card), ở mọi khổ màn hình. Trước đây chỗ này để 22px và mobile để
     15px, nên cùng một thẻ có ba bán kính khác nhau tuỳ cửa sổ. */
  .svc-card {
    box-shadow: 0 22px 50px -28px rgba(120, 78, 20, 0.5);
  }

  .svc-head {
    padding: 34px 40px 28px;
    /* Canh giữa tiêu đề. Không ảnh hưởng .svc-sub vì phần tử đó tự khai
       text-align: justify. */
    text-align: center;
  }

  .svc-title {
    font-size: 2rem;
  }

  .svc-sub {
    /* ĐÂY mới là thứ làm thẻ desktop trông nghiệp dư: để nguyên, mỗi dòng dài
       hơn 150 ký tự. Mắt đọc xong dòng phải quét ngược cả gang tay về đầu dòng
       sau và rất dễ nhảy nhầm dòng. Chuẩn sắp chữ là 45–75 ký tự một dòng.
       68ch giữ đúng khoảng đó; khối chữ thành một cột hẹp canh giữa trên nền
       thẻ rộng — đúng lối dàn trang của tạp chí. */
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.98rem;
    margin-top: 14px;
  }

  /* Thanh tương tác: ở 1180px mà chia đều các nút thì mỗi nút rộng cả trăm pixel, chữ
     với icon trôi lạc giữa mảng trống. Cho nút co về đúng bề ngang nội dung và
     dồn vào giữa.

     CHỈ lưới một cột của /dichVu (#services-content). Thẻ ngoài trang chủ ba cột mỗi thẻ
     chỉ ~280px: đệm 30px hai bên cho bốn nút (thêm nút QR) là tràn khỏi thẻ, cắt mất chữ
     "QR" và trái tim — thẻ hẹp giữ luật gốc, bốn nút chia đều bề ngang. */
  /* Chiều cao thanh và cỡ chữ thì áp cho MỌI thẻ — thanh thấp hơn 46px là dính sát mép dưới. */
  .svc-bar {
    padding: 4px 0;
  }

  .svc-act {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 13.5px;
  }

  #services-content .svc-bar {
    justify-content: center;
  }

  #services-content .svc-act {
    flex: 0 0 auto;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Vạch ngăn chỉ hợp lý khi các nút chia đều cả bề ngang. Nút đã co lại rồi thì
     vạch thành mấy gạch lửng lơ giữa thẻ. */
  #services-content .svc-act + .svc-act {
    border-left: 0;
  }

  /* KHÔNG nhấc thẻ khi rê chuột. Chủ trang đã yêu cầu bỏ hẳn phép nâng thẻ: trên màn cảm
     ứng :hover không tự mất sau khi chạm, nên thẻ nhảy lên là KẸT ở đó, lệch hẳn so với
     các thẻ bên cạnh. Chỉ còn đổ bóng đậm thêm — nó không xê dịch thẻ nên có kẹt cũng
     không ai thấy sai. */
  .svc-card.is-link:hover {
    box-shadow: 0 30px 60px -26px rgba(120, 78, 20, 0.6);
  }
}

@media (min-width: 1200px) {
  .svc-wrap { gap: 22px; }
}

/* Thẻ hẹp 4 cột ở trang chủ — CHỈ LAPTOP (1200–1599px, dùng chuột): bớt đệm ngang 40px của thẻ
   /dichVu rộng, dành chỗ cho chữ. Cỡ chữ không đặt ở đây — xem .svc-khop bên dưới. */
@media (min-width: 1200px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
  #the-dich-vu-cam .svc-head { padding: 26px 20px 22px; }
  /* 4 thẻ một hàng (the-dich-vu-cam.js gắn .dv-cot-laptop). Thay cho col-xl-3 vì lớp đó của
     Bootstrap áp cả desktop — chủ trang: "chỉ laptop". */
  #the-dich-vu-cam .dv-cot-laptop { flex: 0 0 auto; width: 25%; }
}

/* vuaMan() (index.html) đã bớt bề ngang tấm nền để ảnh vừa màn — ở MỌI khổ, kể cả điện thoại
   xoay ngang — thì tấm nền phải đứng giữa, không dính mép trái. */
#services-content .lux-section[data-vua-man] {
  margin-left: auto;
  margin-right: auto;
}

/* /dichVu từ 992px trở lên GIỐNG TRANG TIN TỨC (chủ trang chốt 02/10/2026): mỗi thẻ một hàng,
   rộng đúng 3 cột giữa của lưới 5 cột — cùng công thức với .middle > .feeds trong css/style.css
   (khung 1200px, khe 1rem) nên thẻ dịch vụ và bài tin tức rộng bằng nhau.
   Tấm kính trắng .lux-section VẪN GIỮ nhưng thu lại ôm sát cột thẻ (rộng thẻ + đệm 2.25rem hai
   bên, canh giữa) — trước đó nó tràn hết bề ngang, hai bên thừa mảng trắng lớn.
   Thay bản 3 cột chỉ-laptop (29/09/2026); áp MỌI màn ≥992px. Điện thoại, máy tính bảng giữ nguyên. */
@media (min-width: 992px) {
  #services-content .lux-section {
    /* Ảnh vuông cao hơn màn (laptop 150% chỉ ≈560px CSS) thì vuaMan() trong index.html bớt thêm
       bề ngang tấm này — thẻ và lưới ảnh co theo, ảnh giữ tỉ lệ. Xem KHUNG_ANH ở đó. */
    max-width: calc((min(100%, 1200px) - 4rem) * 3 / 5 + 2rem + 4.5rem);
    margin-left: auto;
    margin-right: auto;
  }
  #services-content .svc-wrap {
    max-width: none;
    padding: 0;
  }
  /* Cỡ tiêu đề/mô tả: do khopCoChu tính theo bề rộng thẻ (xem .svc-khop cuối tệp).

     Thẻ hẹp dựng GIỐNG thẻ trang chủ (chủ trang gửi ảnh mẫu 29/09/2026): đệm chữ gọn, mô tả
     chạy hết bề ngang thẻ, thanh nút chia đều có vạch ngăn. Các luật "nút co về giữa, đệm 30px,
     bỏ vạch" ở khối ≥992px là cho thẻ MỘT cột rộng 1180px — ở thẻ hẹp thì trả lại. */
  #services-content .svc-head { padding: 26px 24px 22px; }
  #services-content .svc-sub { max-width: none; }
  #services-content .svc-bar { justify-content: normal; }
  #services-content .svc-act { flex: 1; padding-left: 6px; padding-right: 6px; }
  #services-content .svc-act + .svc-act { border-left: 1px solid rgba(184, 120, 45, 0.12); }
}

/* ── CỠ CHỮ TỰ KHỚP (khopCoChu trong js/service-grids.js) ──
   Chủ trang (29/09/2026): tiêu đề MỘT dòng, mô tả canh đều, cỡ chữ tự điều chỉnh theo số cột
   và số chữ mỗi thẻ, đồng bộ giữa các thẻ. JS đo tên dài nhất trong khối rồi đặt một cỡ chung
   vào --svc-co-tieu-de / --svc-co-mo-ta, tính lại mỗi khi khối đổi bề rộng. Vì thế KHÔNG theo
   media query: 4, 3, 2 hay 1 cột đều do số đo quyết định. Lớp .svc-khop chỉ có khi JS đã tính
   xong; trước đó các cỡ theo media query ở trên là đường lùi.
   Đặt SAU các khối media query để thắng .svc-title / .svc-sub ở đó khi cùng độ ưu tiên. */
/* CHỈ LAPTOP (992–1599px, dùng chuột — cùng điều kiện với đầu css/style.css): mọi thay đổi
   đợt này là cho laptop, không đụng thiết bị khác (chủ trang 29/09/2026). JS vẫn tính biến ở
   mọi khổ, nhưng ngoài khổ laptop không luật nào đọc chúng. */
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
  .svc-khop .svc-title {
    font-size: var(--svc-co-tieu-de);
    white-space: nowrap;
  }
  .svc-khop .svc-sub {
    font-size: var(--svc-co-mo-ta);
    text-align: justify;
  }
  /* Tên quá dài cho thẻ quá hẹp, đã chạm sàn 16px mà vẫn không vừa: cho gãy dòng chia đều,
     KHÔNG cắt bằng "…" — mất chữ trong tên dịch vụ tệ hơn một tiêu đề hai dòng. */
  .svc-khop.svc-khop-gay .svc-title {
    white-space: normal;
    text-wrap: balance;
  }
  /* Nhãn ngắn ("Chia sẻ") không bao giờ gãy 2 dòng — thẻ hẹp 4 cột trên laptop đã gặp. */
  .svc-act { white-space: nowrap; }
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  .svc-section { padding: 8px 0 22px; }
  .svc-wrap { padding: 0 8px; gap: 13px; }
  /* border-radius giữ 18px như mọi khổ màn — xem chú thích ở media query desktop. */
  .svc-head { padding: 15px 15px 13px; }
  /* Chỉ hạ tiêu đề, giữ nguyên cỡ sub: tên dịch vụ dài (vd "Cấy Mỡ FullFace -
     Trẻ Hóa Da Công Nghệ Cao") ở 1.5rem sẽ tràn 3 dòng trên máy hẹp. */
  .svc-title { font-size: 1.38rem; }
  .svc-more { font-size: 20px; }
  .svc-act { font-size: 12.5px; gap: 6px; padding: 10px 4px; }
  .svc-act svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-tile img { transition: opacity 0.2s ease; }
  .svc-tile:hover img { transform: none; }
  .svc-act svg { transition: none; }
}