/* ============================================================
   Vinpack — page-duan.css
   CSS RIÊNG CỦA trang archive "Dự án" (archive-vp_project.php). Chỉ nạp khi
   is_post_type_archive( 'vp_project' ).

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

   BA LUẬT CỦA FILE NÀY — cùng ba luật các file page-*.css khác:
   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Ề `.proj-card{opacity:0;transform:translateY(24px)}` CỦA MOCKUP — CỐ Ý
   KHÔNG CHÉP
   ---------------------------------------------------------------------------
   Mockup ẩn `.proj-card` mặc định rồi dựa vào IntersectionObserver (IIFE #2,
   cuối file mockup) thêm class `.reveal` khi cuộn tới mới hiện. Task 1 CHỈ
   viết JS lọc + chỉ báo trượt (assets/js/page-duan.js) — KHÔNG viết JS
   scroll-reveal (để ngỏ cho Task 2). Chép nguyên `opacity:0` ở đây sẽ tái
   diễn ĐÚNG cạm bẫy `.tl-item{opacity:0}` của Phase H (trang Về chúng tôi):
   không có JS cuộn-hiện thì lưới dự án VÔ HÌNH VĨNH VIỄN. `.proj-card` ở đây
   mặc định `opacity:1; transform:translateY(0)` — thấy được ngay không cần
   JS. `.proj-card.reveal{opacity:1;transform:translateY(0)}` vẫn được giữ
   lại (vô hại, một class không tồn tại trên DOM khi chưa có JS) để tương
   thích ngược nếu Task 2 thêm JS scroll-reveal thật sau này.

   ---------------------------------------------------------------------------
   VỀ `.proj-section.wrap` — CÙNG CẠM BẪY ĐẶC TẢ MÀ CHÍNH MOCKUP TỰ CẢNH BÁO
   ---------------------------------------------------------------------------
   global.css mục 5 đã viết rõ: `:where(section){padding-block:var(--sp-8)}`
   (đặc tả 0) thua MỌI rule có lớp, và `section.wrap{padding:var(--sp-8)
   var(--wrap-x)}` (đặc tả 0,1,1) tồn tại CHÍNH VÌ `.wrap{padding-inline:...}`
   (đặc tả 0,1,0) một mình không đủ khi phần tử vừa là `<section>` vừa mang
   `.wrap`. Markup thật ở đây là `<section class="proj-section wrap">` —
   CÙNG tình huống. Nếu chỉ viết `.proj-section{padding:36px 0 80px}` (đặc tả
   0,1,0) thì `section.wrap` của global.css (0,1,1, cao hơn) THẮNG, và giá
   trị "36px 0 80px" của MOCKUP CHÍNH NÓ trở thành mã chết — đúng những gì đã
   xảy ra thật trong file nguồn: mockup viết `.proj-section{padding:36px 0
   80px}` NHƯNG markup của mockup cũng dùng `<section class="proj-section
   wrap">` với `section.wrap{padding:96px 32px}` đặc tả cao hơn đứng SAU
   trong cùng file — nên trên trình duyệt thật, "36px 0 80px" CHƯA BAO GIỜ
   được áp dụng, kết quả render thật là 96px dọc/32px ngang. Ở đây chọn tái
   hiện Ý ĐỊNH đọc được từ chính con số mockup viết ra (36px sát ngay dưới
   thanh lọc dính, 80px rộng rãi trước khi sang khối CTA, gutter ngang GIỮ
   NGUYÊN var(--wrap-x) như mọi nơi khác) thay vì tái hiện lỗi đặc tả — viết
   `.proj-section.wrap` (đặc tả 0,2,0, thắng tuyệt đối section.wrap 0,1,1,
   không phụ thuộc thứ tự nguồn giữa hai file).
   ============================================================ */

/* ============================================================
   1. Banner (.proj-banner) — KHÔNG breadcrumb, mockup không vẽ khối này ở
      trang Dự án (khác .sp-banner/.service-banner của các trang khác).
   ============================================================ */
.proj-banner{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding:76px 0;
  color:var(--white);
  overflow:hidden;
  position:relative;
}
.proj-banner-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.proj-banner h1{ font-size:38px; color:var(--white); margin-bottom:14px; }
.proj-banner p{ color:var(--on-navy-text); font-size:16px; max-width:460px; margin:0 0 26px; }
.proj-banner-visual{ display:flex; align-items:center; justify-content:center; }
/*
 * NÚT TRONG BANNER TRÊN NỀN NAVY (03/09/2026, khách gửi ảnh chụp
 * /du-an-tieu-bieu/, mũi tên chỉ từ nút "Yêu cầu báo giá dự án" sang nút
 * trắng trên header — "nền xanh nút trắng"). `.proj-banner` KHÔNG mang
 * `.on-navy` nên rule `.on-navy .btn-primary` của global.css không với
 * tới; `.btn-primary` mặc định `background:var(--navy)` — TRÙNG HỆT màu
 * điểm đầu gradient của chính `.proj-banner`, tách bạch đo được 1:1, nút
 * hoàn toàn vô hình.
 *
 * Dùng chung rule này cho CẢ HAI trang tái dùng `.proj-banner`:
 * archive-vp_project.php VÀ page-templates/doi-tac-khach-hang.php (cả hai
 * nạp page-duan.css — xem điều kiện enqueue trong inc/enqueue.php).
 * Cùng khuôn trắng/navy đã dùng cho `.cta-box .btn-primary`.
 */
.proj-banner .btn-primary,
.proj-banner .btn-primary:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.proj-banner-visual svg{ width:100%; max-width:340px; height:auto; }

/* ============================================================
   2. Thanh lọc (.proj-filterbar)
   ============================================================ */
.proj-filterbar{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--white);
  padding:22px 0 0;
}
.proj-filterbar-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.proj-filters{
  display:flex;
  gap:36px;
  position:relative;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.proj-filters::-webkit-scrollbar{ display:none; }
.proj-filter-btn{
  background:none;
  border:none;
  padding:0 0 16px;
  margin:0;
  font-size:14.5px;
  font-weight:600;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .25s;
  white-space:nowrap;
  position:relative;
}
.proj-filter-btn:hover{ color:var(--navy); }
.proj-filter-btn.active{ color:var(--navy); font-weight:700; }
.proj-filter-indicator{
  position:absolute;
  bottom:0;
  height:2px;
  background:var(--navy);
  transition:left .35s var(--ease), width .35s var(--ease);
}
.proj-filterbar-line{ height:1px; background:var(--border); margin-top:0; }
.proj-count{
  font-size:13px;
  color:var(--text-muted);
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
  margin-bottom:16px;
}
.proj-count strong{ color:var(--navy); font-weight:700; }

/* ============================================================
   3. Lưới dự án (.proj-section / .proj-grid / .proj-card)
   ============================================================ */
.proj-section.wrap{ padding:36px var(--wrap-x) 80px; }
.proj-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:44px;
  row-gap:56px;
}

/* Thẻ biên tập tối giản — không viền/hộp, ảnh dẫn dắt, chữ trầm. */
.proj-card{
  background:transparent;
  border:none;
  border-radius:0;
  transition:transform .35s ease;
  /* Mặc định THẤY ĐƯỢC — xem giải thích ở đầu file. */
  opacity:1;
  transform:translateY(0);
  /*
   * "STRETCHED LINK" — cả thẻ bấm được, không chỉ riêng "Xem chi tiết"
   * (03/09/2026, khách gửi ảnh chụp lưới dự án: "nhấn vào box item nhảy
   * link luôn, ko phải chỉ nhấn vào nút chi tiết"). CÙNG kỹ thuật đã dùng
   * cho `.prod-card`/`.prod-cta` (taxonomy-danhmuc.css, mục "STRETCHED
   * LINK" — đọc đầy đủ lý lẽ ở đó, không chép lại): `.proj-link` (liên kết
   * `<a>` DUY NHẤT, THẬT, đã có sẵn trong PHP ở CẢ BA nơi dùng `.proj-card`
   * — archive-vp_project.php, page-templates/doi-tac-khach-hang.php,
   * single-vp_project.php) nhận thêm lớp phủ `::after` tuyệt đối phủ kín
   * TOÀN BỘ thẻ. Sửa MỘT CHỖ (page-duan.css là file CSS DUY NHẤT định
   * nghĩa `.proj-card`) áp dụng cho cả ba, vì markup ba nơi giống hệt nhau
   * — single-vp_project.php tự ghi chú "copy NGUYÊN cấu trúc từ archive-
   * vp_project.php".
   *
   * `.proj-card-img`/`.proj-card-body`/`.proj-tag`/h3/p KHÔNG cần z-index
   * riêng: không phần tử nào trong số đó là link/nút, phủ `::after` đè lên
   * không che mất hành vi bấm nào khác để phải nhường chỗ — giống hệt lý do
   * đã ghi cho `.prod-photo`/`.prod-info`.
   */
  position:relative;
  cursor:pointer;
}
.proj-card .proj-link::after{ content:""; position:absolute; inset:0; }
.proj-card.reveal{ opacity:1; transform:translateY(0); }
.proj-card:hover{ transform:translateY(-4px); }
.proj-card.hidden{ display:none; }
.proj-card-img{
  width:100%;
  aspect-ratio:5 / 4;
  overflow:hidden;
  background:var(--bg-alt);
  border-radius:6px;
  margin-bottom:20px;
}
.proj-card-img img,
.proj-card-img svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2, .8, .2, 1);
}
.proj-card:hover .proj-card-img img,
.proj-card:hover .proj-card-img svg{ transform:scale(1.045); }
.proj-card-body{ padding:0; }
.proj-tag{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.proj-card h3{
  font-size:18px;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.35;
}
.proj-card p{ font-size:13.5px; color:var(--text-muted); line-height:1.65; margin-bottom:14px; }
.proj-card .proj-link{
  font-size:12.5px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.3px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s, color .25s;
}
.proj-card:hover .proj-link{ color:var(--cobalt); border-bottom-color:var(--cobalt); }

.proj-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--text-muted);
  font-size:14px;
  display:none;
}
.proj-empty.show{ display:block; }

/* ============================================================
   4. CTA cuối trang (.cta) — bản chép riêng, cùng lý lẽ đã ghi ở
      page-dichvu.css/page-nangluc.css: home.css chỉ nạp khi is_front_page(),
      KHÔNG BAO GIỜ true cùng lúc với is_post_type_archive( 'vp_project' ).
   ============================================================ */
.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/page-dichvu.css.
 */
/*
 * 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); }

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width:900px){
  .proj-grid{ grid-template-columns:repeat(2, 1fr); column-gap:28px; row-gap:40px; }
  .proj-filterbar-inner{ flex-direction:column; align-items:flex-start; }
  .proj-filters{ width:100%; }
  .proj-banner-grid{ grid-template-columns:1fr; text-align:center; }
  .proj-banner-visual{ order:-1; max-width:220px; margin:0 auto; }
  .proj-banner p{ margin:0 auto 26px; }
  /* THUA tu 03/09/2026 — xem ghi chu trong home.css. .cta-box goc da can giua o moi be rong. */
}
@media (max-width:600px){
  .proj-grid{ grid-template-columns:1fr; }
}
/*
 * 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){
  .proj-banner h1{ font-size:30px; }
}

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