/* ============================================================
   Vinpack — page-dichvu.css
   CSS RIÊNG CỦA trang "Dịch vụ". Chỉ nạp khi
   is_page_template( 'page-templates/dich-vu.php' ).

   NẠP SAU global.css VÀ layout.css — inc/enqueue.php khai vinpack-global và
   vinpack-layout làm dependency của vinpack-dichvu (style), đúng khuôn
   page-nangluc.css/page-vechungtoi.css.

   BA LUẬT CỦA FILE NÀY — cùng ba luật page-nangluc.css/page-vechungtoi.css:
   1. KHÔNG khai custom property nào. Token thuộc về theme.json/global.css.
   2. KHÔNG dùng !important.
   3. KHÔNG khai `outline` ở bất kỳ đâu.

   VỀ `.crumb`: page-nangluc.css đã tự cảnh báo trước — style `.crumb` ở đó
   CHỈ nạp trên trang Năng lực doanh nghiệp. page-vechungtoi.css/product-
   single.css/taxonomy-danhmuc.css đều đã tự chép một bản riêng thay vì phụ
   thuộc ngầm vào một stylesheet KHÔNG được nạp trên trang đang xem — file
   này làm ĐÚNG NHƯ VẬY (mục 1). Màu lấy đúng mockup trang này: mockup không
   ghi màu cho `.crumb` cơ sở trong đoạn CSS "Service page" (chỉ có
   `.breadcrumb`/`.breadcrumb a` — tên KHÁC, xem mục "VỀ TÊN LỚP" bên dưới),
   nên dùng lại đúng công thức --on-navy-text đã áp cho `.nl-banner .crumb`
   (nền navy tương tự): 7.19:1 trên --navy (đo trong home.css mục 11).

   VỀ TÊN LỚP `.breadcrumb` CỦA MOCKUP: mockup ghi CSS cho `.breadcrumb`/
   `.breadcrumb a` (dòng 752-753) nhưng markup thật của khối banner
   (dòng 850) cũng dùng `class="breadcrumb"` — ĐÂY LÀ MOCKUP TỰ NHẤT QUÁN,
   KHÔNG PHẢI LỖI. Nhưng vinpack_breadcrumb() (inc/template-tags.php) — hàm
   DÙNG CHUNG cho MỌI trang của theme — luôn in cứng `<div class="crumb">`,
   không đọc được tên lớp theo trang. File này viết CSS cho `.crumb`, ĐÚNG
   TÊN HÀM DÙNG CHUNG in ra, không đổi theo `.breadcrumb` của riêng mockup
   trang này — cùng quyết định `.nl-banner`/`.page-hero`/`.pd-crumb`/
   `.sp-banner` đã làm trước đó.

   VỀ `.cta`/`.cta-box`/`.cta-copy`/`.cta-actions`/`.cta-box .btn-primary`
   (mục 5): TRÙNG TÊN với home.css nhưng home.css CHỈ nạp khi is_front_page()
   — KHÔNG BAO GIỜ true cùng lúc với is_page_template() của trang này, nên
   không thể phụ thuộc ngầm vào nó. File này TỰ CHÉP NGUYÊN VĂN khối CSS đó
   từ home.css mục 11 (cùng lý lẽ `.crumb` ở trên) — mockup trang Dịch vụ
   dùng CHÍNH XÁC cùng tên lớp và cùng cấu trúc (`.cta` > `.wrap` >
   `.cta-box` > (div không class chứa h2+p) + `.cta-actions`), không phải
   một khối CSS mới.

   VỀ TOKEN KHOẢNG CÁCH/BO GÓC: `.cta-box{border-radius:20px}` của mockup
   KHỚP ĐÚNG --r-xl, dùng token (khác quyết định giữ literal ở dưới). Các số
   còn lại của khối "Service page" (banner padding 64px/56px, service-block
   padding 56px, service-block-inner gap 64px, service-media border-radius
   18px) KHÔNG khớp bậc nào trong thang --sp-* hay --r-* (--sp-7=48, --sp-8=96,
   --r-lg=16, --r-xl=20) — giữ literal đúng tiền lệ đã ghi trong docblock
   page-nangluc.css cho trường hợp này, không ép về bậc gần nhất.

   VỀ MÀU CHỮ TRÊN NỀN `.service-block.dark` (navy): mockup ghi thẳng hex
   (#fff, #C3CDE8, #A9C4FF) — đối chiếu với token đã có: #C3CDE8 TRÙNG
   --on-navy-text (7.19:1 trên navy, đã đo ở home.css), #A9C4FF TRÙNG
   --on-navy-accent — dùng lại token thay vì chép hex, tránh một bản sao giá
   trị màu thứ hai âm thầm trôi lệch nếu token đổi. `.service-features li`
   trên nền dark mockup ghi #E6ECFB — KHÔNG khớp token nào có sẵn
   (--on-navy-text=#C3CDE8, --on-navy-text-2=#C7D2EE, --on-navy-accent=
   #A9C4FF đều khác); thay vì thêm một sắc trắng-ngà thứ tư gần giống ba token
   kia, dùng lại --on-navy-text-2 (7.54:1 trên navy, đã đo ở home.css mục
   "video-sec") — đủ sáng cho danh sách gạch đầu dòng, không phải một token
   mới.

   VỀ MÀU CHẤM `.dot`: mockup dùng var(--cobalt) cho nền light và #7FAAFA
   cho nền dark. Đây là hình trang trí thuần (không mang chữ, aria-hidden
   qua chính bản chất <span> rỗng), cùng cách `.sx-card li::before` của
   page-nangluc.css dùng thẳng --cobalt cho một chấm 6px tương tự — không áp
   luật tương phản 4.5:1 của CHỮ cho một chấm trang trí 8px. #7FAAFA không
   khớp token nào có sẵn và không phải màu CHỮ nên giữ literal, không thêm
   custom property mới.
   ============================================================ */

/* ============================================================
   1. Breadcrumb — bản chép riêng, xem giải thích ở đầu file.
   ============================================================ */
.service-banner .crumb{ font-size:13px; color:var(--on-navy-text); margin-bottom:var(--sp-4); letter-spacing:.3px; }
.service-banner .crumb a{ color:var(--on-navy-text); }
.service-banner .crumb a:hover{ color:var(--white); }

/* ============================================================
   2. Banner (.service-banner)
   ============================================================ */
.service-banner{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  /*
   * STT 33 (feedback đợt 2, trang Dịch vụ): khách khoanh đỏ khoảng
   * header->banner quá dài. ĐO TRƯỚC KHI SỬA: padding cũ 64px 0 56px (top
   * 64px là khoảng trắng phía TRÊN breadcrumb/H1 bên trong khối navy, ngay
   * sau .site-header — đây chính là khoảng "header->banner" khách khoanh,
   * vì .site-header và .service-banner cùng nền navy nên khoảng trắng đó
   * đọc như một khối liền, top-padding càng lớn thị giác càng "trễ" trước
   * khi thấy chữ). Bottom 56px cộng dồn với phần đệm của khối theo sau
   * (.dv-detail-hero/.art-wrap) tạo khoảng "banner->nội dung" — xem thêm
   * docblock .dv-detail-hero trong page-dichvu-chitiet.css. RÚT còn 48px/
   * 32px (dùng token --sp-7/--sp-6 có sẵn, không bịa số mới) — giảm có
   * chừng mực (-25%/-43%), vẫn đủ khoảng thở cho banner, không rút về 0.
   */
  padding:var(--sp-7) 0 var(--sp-6);
  color:var(--white);
  /*
   * CANH TRÁI (07/09/2026, đợt đồng bộ banner). Đo trước khi sửa: breadcrumb
   * của banner này nằm ở 570..695 — giữa màn hình — trong khi bảy banner khác
   * của site đặt breadcrumb và H1 ở mốc trái 75px, và chính khách đã chốt
   * hướng canh trái cho banner trang chi tiết dịch vụ hôm 05/09.
   */
  text-align:left;
}
.service-banner h1{ font-size:38px; color:var(--white); margin-bottom:10px; }
.service-banner p{ color:var(--on-navy-text); font-size:16px; max-width:640px; margin:0; }

/*
 * Biến thể cho TRANG CHI TIẾT (dịch vụ con, chính sách con): nền phẳng,
 * breadcrumb + H1 căn trái theo mép `.wrap` — bản chuẩn breadcrumb đã chốt
 * 28/08/2026 ("đồng bộ lại tất cả cùng 1 style"), giống `.cat-hero-info .crumb`
 * (taxonomy-danhmuc.css) và `.nd-crumb .crumb` (single-tintuc.css). Khách
 * khoanh đỏ 05/09/2026: khối navy căn giữa lạc lõng giữa các trang chi tiết.
 * Trang DANH SÁCH "Dịch vụ" giữ nguyên banner navy căn giữa (landing).
 *
 * Rule nằm ở ĐÂY chứ không ở page-dichvu-chitiet.css vì trang Chính sách chi
 * tiết chỉ nạp page-dichvu.css (đo 05/09/2026: global + layout + page-dichvu +
 * taxonomy-danhmuc). Padding trên 32px = `.nd-head`; dưới 0 vì khối kế tiếp
 * (`.wrap.dv-detail-hero` hoặc `.art-wrap`) đã có padding-top riêng.
 */
.service-banner--detail{
  background:none;
  padding:var(--sp-6) 0 0;
  text-align:left;
}
.service-banner--detail .crumb,
.service-banner--detail .crumb a{ color:var(--text-muted); }
.service-banner--detail .crumb a:hover{ color:var(--navy); }
.service-banner--detail h1{ color:var(--navy); }

/*
 * Khách 05/09/2026: "ảnh cho đều với title/content". ĐO: breadcrumb + H1 nằm
 * trong `.wrap` mặc định 1180px, còn ảnh đại diện (`.wrap.dv-detail-hero`) và
 * khối nội dung (`.art-wrap`) đều 1080px — tiêu đề nhô ra trái 50px so với hai
 * khối dưới. Kéo riêng khung chữ của banner chi tiết cho khớp; không đụng
 * `.wrap` gốc (dùng chung toàn site).
 *
 * 1144px chứ không 1080: `.wrap` có `padding-inline:32px`, nên khung chữ THẬT
 * bằng max-width trừ 64. Đặt 1080 thì chữ chỉ còn 1016 và vẫn thụt so với
 * `.art-wrap` (1080 thật, vì nó là khối con nằm trong `.wrap`). 1080 + 64 =
 * 1144 cho ra đúng 1080 — đo lại trên trình duyệt: cả bốn khối cùng mép trái.
 */
.service-banner--detail .wrap{ max-width:1144px; }

/* ============================================================
   3. Tiêu đề (.service-heading)
   ============================================================ */
.service-heading{ padding:64px 0 8px; text-align:center; }
.service-heading .kicker{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--cobalt-ink);
  letter-spacing:2px;
  text-transform:uppercase;
}
.service-heading h2{ font-size:30px; }
.service-heading p{ color:var(--text-muted); font-size:15px; max-width:520px; margin:10px auto 0; }

/* ============================================================
   4. Khối dịch vụ (.service-block × n)
   ============================================================ */
.service-block{ padding:56px 0; }
.service-block.light{ background:var(--white); }
.service-block.dark{ background:var(--navy); }
.service-block-inner{
  display:flex;
  align-items:center;
  gap:64px;
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--wrap-x);
}
.service-block.reverse .service-block-inner{ flex-direction:row-reverse; }
.service-media{ flex:1; min-width:0; }
.service-media img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  object-fit:cover;
}

.service-text{ flex:1; min-width:0; }
.service-text .kicker{
  display:block;
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  color:var(--cobalt-ink);
  letter-spacing:2px;
  text-transform:uppercase;
}
.service-block.dark .service-text .kicker{ color:var(--on-navy-accent); }
.service-text h3{ font-size:27px; margin-bottom:14px; line-height:1.25; }
.service-block.dark .service-text h3{ color:var(--white); }
.service-text p{ font-size:15px; line-height:1.7; margin-bottom:var(--sp-6); }
.service-block.light .service-text p{ color:var(--text-muted); }
.service-block.dark .service-text p{ color:var(--on-navy-text); }
.service-features{ list-style:none; margin-bottom:var(--sp-6); padding:0; }
.service-features li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; margin-bottom:10px; }
.service-block.light .service-features li{ color:var(--text); }
.service-block.dark .service-features li{ color:var(--on-navy-text-2); }
.service-features .dot{ width:8px; height:8px; border-radius:var(--r-full); flex-shrink:0; }
.service-block.light .service-features .dot{ background:var(--cobalt); }
.service-block.dark .service-features .dot{ background:#7FAAFA; }

/* ============================================================
   5. CTA cuối trang (.cta) — bản chép riêng, xem giải thích ở đầu file.
   ============================================================ */
.cta{ background:var(--bg-alt); }
/*
 * CĂN GIỮA (03/09/2026, khách: "cta cho center hết xem" — ảnh chụp
 * /du-an-tieu-bieu/ khoanh đỏ khối "Vẫn còn nhiều dự án khác"). Trước đây
 * `space-between` đẩy chữ sát trái, nút sát phải — khối rộng full-wrap thì
 * lệch hẳn về hai đầu, không có tâm.
 *
 * `.cta-box` là MỘT rule lặp lại y hệt ở BA file (home.css, page-dichvu.css,
 * page-duan.css) — không import lẫn nhau, phải sửa cả ba cùng lúc. Đã grep
 * xác nhận cả ba giống nhau tuyệt đối trước khi sửa.
 */
/*
 * KHUÔN CTA CHUẨN — chốt 07/09/2026 (khách: "mấy cái call to action đồng bộ
 * với nhau và title nó đừng cho xuống hàng trên desktop").
 *
 * ĐO SÁU KHỐI TRÊN TRANG THẬT TRƯỚC KHI SỬA (1280px): `.cta-box` (chủ, dịch
 * vụ, dự án, tuyển dụng) bo 20 đệm 48 chữ mô tả 14.5; `.news-cta-box` bo 24
 * đệm 52/56 mô tả 16; `.nl-cta-box` bo 20 đệm 52/56 h2 30; `.au-cta-box` bo 24
 * đệm 52/56 h2 30 mô tả 15 và HỘP chỉ 820px; `.contact-cta-box` bo 24 đệm
 * 64/40 gradient 160deg hộp 1080px. Sáu khối cùng một vai trò mà không giá trị
 * nào trùng nhau đủ bộ.
 *
 * CHUẨN LẤY THEO ĐA SỐ, trừ hai chỗ có lý do đo được: bo góc lấy var(--r-xl)
 * (test-css-cascade đang khoá đúng token này cho .cta-box, đổi sang 24px sẽ
 * làm đỏ test và bỏ token lấy số cứng), đệm lấy var(--sp-7) = 48px của
 * `.cta-box` — khối phổ biến nhất, có mặt ở 4/8 trang.
 *
 * `max-width` của HỘP bỏ hẳn (au 820, contact 1080): hộp giờ lấp đúng bề ngang
 * `.wrap` như bốn khối kia, nên mọi trang có cùng một mép.
 */
.cta-box{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius:var(--r-xl);
  padding:var(--sp-7);
  text-align:center;
  color:var(--white);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-5);
}
/* Vòng sáng góc trái dưới — phần khuôn chung, trước đây chỉ 3/6 khối có. */
.cta-box::after{
  content:"";
  position:absolute;
  left:-60px;
  bottom:-60px;
  width:260px;
  height:260px;
  border-radius:var(--r-full);
  background:radial-gradient(circle, rgba(92,144,245,.25), transparent 70%);
}
.cta-box > *{ position:relative; z-index:1; }
.cta-copy{ min-width:0; }
/*
 * BỎ `max-width:420px` — ĐÂY LÀ THỨ ÉP TIÊU ĐỀ XUỐNG HÀNG. Đo tại 1280px:
 * hộp rộng 1116, trừ đệm còn 1020px cho chữ, nhưng tiêu đề bị bó trong 420px
 * nên "Vẫn còn nhiều dự án khác đang chờ bạn khám phá" (và cả ba tiêu đề CTA
 * còn lại) đều gãy làm hai dòng — cao 80px thay vì 40px. Bỏ giới hạn thì
 * tiêu đề dài nhất trong bốn trang vẫn gọn một dòng trên desktop.
 *
 * `text-wrap:balance` thay chỗ nó: khi bề ngang hẹp lại (điện thoại) buộc
 * phải xuống dòng thì hai dòng chia đều chữ, không còn dòng dưới trơ một từ.
 */
.cta-box h2{ color:var(--white); text-wrap:balance; }
/* --on-navy-text trên --navy: 7.19:1 — cùng phép đo đã ghi ở home.css mục 11. */
.cta-box .section-lead{ color:var(--on-navy-text); margin-top:10px; font-size:16px; line-height:1.7; max-width:600px; margin-inline:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap-inline); }
/*
 * `.cta-box` KHÔNG mang `.on-navy` nên rule `.on-navy .btn-primary` của
 * global.css không với tới, và nền --navy của `.btn-primary` chỉ ~1.2:1 so
 * với hộp navy — nút tàng hình. Cùng vá y hệt home.css mục 11.
 */
/*
 * TÁCH BẠCH nút chính khỏi nền hộp (cùng đợt 03/09/2026, ảnh chụp khoanh đỏ
 * nút "Yêu cầu báo giá dự án" — nút gần như biến mất vào nền navy).
 *
 * Đo trên trang thật trước khi sửa: nền hộp #001BB7 (điểm đầu gradient),
 * nút cũ #3366CC (--cobalt-ink) — độ tách bạch giữa hai màu chỉ 2.13:1.
 * Đổi nút chính sang NỀN TRẮNG/CHỮ NAVY (cùng khuôn nút "Yêu cầu báo giá"
 * trên header, .vp-header-cta) — đo lại đạt 11.41:1.
 */
.cta-box .btn-primary,
.cta-box .btn-primary:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* ============================================================
   6. Responsive
   ============================================================ */
@media (max-width:900px){
  .service-block-inner{ flex-direction:column; gap:var(--sp-6); }
  /*
   * Selector LẶP LẠI ĐÚNG (0,3,0) của mục 4 (.service-block.reverse
   * .service-block-inner), đặt SAU trong nguồn — thắng bằng thứ tự nguồn ở
   * cùng độ ưu tiên, KHÔNG cần !important (luật 2 ở đầu file).
   */
  .service-block.reverse .service-block-inner{ flex-direction:column; }
  /* THUA tu 03/09/2026 — xem ghi chu trong home.css. .cta-box goc da can giua o moi be rong. */
}
/*
 * KHUÔN CTA CHUẨN TRÊN ĐIỆN THOẠI (07/09/2026) — khai cuối file để chắc chắn
 * đứng SAU rule chính của hộp (bài học từ page-tacgia.css: rule điện thoại nằm
 * TRƯỚC rule chính thì thua thứ tự nguồn, khai đúng mà không hiệu lực nào —
 * hộp đó đo ra đệm 36px trong khi năm hộp kia 32/24).
 *
 * NÚT FULL-WIDTH: đo tại 375px, nút co theo độ dài chữ nên hai nút trong cùng
 * một khối lệch nhau (dự án 187px và 155px, năng lực 199px và 171px) và mỗi
 * trang một bề ngang. Kéo bằng bề ngang hộp thì cột nút thẳng nhau ở mọi
 * trang, và vùng chạm cũng rộng hơn hẳn.
 */
@media (max-width:600px){
  .cta-box{ padding:var(--sp-6) var(--sp-5); }
  .cta-box .btn{ width:100%; }
}
/*
 * THANG CỠ TIÊU ĐỀ BANNER CHUẨN (07/09/2026): 38px desktop, 30px từ 900px,
 * 28px từ 600px. Trước đợt này mỗi banner tự chọn mốc và cỡ riêng nên ở 800px
 * màn hình có ba cỡ tiêu đề khác nhau cùng lúc — xem docblock đầy đủ trong
 * scratchpad/banner-dong-bo.py và các khối tương ứng ở tám file banner khác.
 */
@media (max-width:900px){
  .service-banner h1{ font-size:30px; }
}

@media (max-width:600px){
  .service-banner h1{ font-size:28px; }
}