/* ==========================================================================
   SECTIONS — bố cục riêng của từng khối trên trang dịch vụ
   ========================================================================== */

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  /* Cùng biến khe với mọi mục khác — trước đây hero tự đặt riêng nên đo ra
     60/54 trong khi các mục 71, nhìn như hai nhịp khác nhau trên cùng trang. */
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero-cmyk { margin-bottom: var(--s4); }
.hero-eyebrow { margin-bottom: var(--s4); }

/* ---- Cụm tiêu đề hero kiểu áp phích (khối gắn lớp --rail) ----
   Dùng ở trang chủ VÀ các trang landing khai 'h1_top'/'h1_accent' — cùng một
   khuôn chữ để cả site đọc ra một giọng. Trang nào còn khai 'h1' kiểu cũ thì
   không có lớp này và rơi về cỡ chữ, nhịp mặc định của .hero.
   Mọi quy tắc trong khối này áp cho cả trang chủ lẫn 6 trang landing. */
.hero-copy--rail { padding-left: 24px; }   /* 4px thanh màu + 20px cách chữ */
.hero-copy--rail h1 {
  position: relative;                      /* mốc cho thanh CMYK bám theo */
  /* Không đặt margin ở đây: .hero h1 (khai phía dưới, cùng độ đặc hiệu) mới là
     chỗ quyết định khoảng tiêu đề→câu dẫn cho mọi hero, kể cả hero này. */
  font-size: var(--t-hero);
  letter-spacing: -.02em;
  /* Spec đặt 1.05 nhưng dấu tiếng Việt chồng tầng (ấ) chạm chân chữ p, y
     của dòng trên ở mức đó — 1.12 là mức bó sát nhất chưa chạm với font này. */
  line-height: 1.12;
}

/* Thanh CMYK nằm trong lề trái, cao ĐÚNG bằng khối tiêu đề (H1 + dòng dịch
   vụ nằm trong H1) — không còn chạy suốt xuống mô tả và nút như bản trước. */
.cmyk-rail {
  position: absolute;
  left: -24px; top: 6px; bottom: 6px;
  width: 4px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border-radius: 2px;
  overflow: hidden;
}
.cmyk-rail span:nth-child(1) { background: var(--c); }
.cmyk-rail span:nth-child(2) { background: var(--m); }
.cmyk-rail span:nth-child(3) { background: var(--y); }
.cmyk-rail span:nth-child(4) { background: var(--k); }

/* Mỗi dòng tiêu đề là một khối riêng, không tự xuống dòng. JS trong main.js
   phóng từng dòng cho vừa KHÍT bề ngang cột (tối đa 560px = bề ngang đoạn mô
   tả) — mép trái mép phải của cả cụm thẳng hàng như dàn trang áp phích.
   Chạy ở MỌI khổ màn hình, kể cả điện thoại — cột hẹp thì chữ nhỏ theo, tỉ lệ
   giữ nguyên. Cỡ chữ khai báo ở đây chỉ là mức rơi về khi tắt JS. */
/* Mỗi dòng tiêu đề là một khối riêng. KHÔNG cấm xuống dòng nữa: trước 29/08
   để nowrap rồi cho JS phóng từng dòng cho khít bề ngang cột — mép trái phải
   thẳng như dàn áp phích, nhưng hệ quả là dòng ít chữ thì to, dòng nhiều chữ
   thì nhỏ, và sáu trang landing ra sáu cỡ chữ khác nhau. Nay một cỡ duy nhất
   cho cả site (--t-hero), câu dài thì tự xuống dòng như tiêu đề bình thường. */
.hero-copy--rail h1 .fit-line { display: block; }

/* Điểm nhấn của tiêu đề: dòng dưới để dạng viền đỏ rỗng ruột — gợi bản kẽm
   chưa lên mực, đúng chất nhà in. Trình duyệt không hỗ trợ text-stroke thì rơi
   về chữ đỏ đặc, không thành chữ trong suốt.

   CỠ CHỮ BẰNG ĐÚNG dòng trên. Trước 29/08 để 1.55em cho dòng đỏ nổi hơn, nhưng
   khi sáu trang landing mỗi trang một câu dài ngắn khác nhau thì hai dòng lệch
   cỡ nhìn như lỗi dàn trang. Màu đỏ và nét viền rỗng đã đủ làm điểm nhấn, không
   cần phóng to thêm. */
.h1-accent { color: var(--red); }
@supports (-webkit-text-stroke: 1px red) {
  .h1-accent {
    color: transparent;
    -webkit-text-stroke: .04em var(--red);
    paint-order: stroke fill;
  }
}

/* Nhịp dọc cột chữ trang chủ: tiêu đề → dịch vụ 20 → mô tả 28 → nút 32 → chip 20.
   Trong cả cụm, màu đỏ chỉ còn ba chỗ: "Bao bì giấy", nút báo giá, dấu ngăn —
   icon chip vì thế chuyển về xám.
   Câu dẫn canh đều hai lề cho ăn khớp với khối tiêu đề dàn kiểu áp phích. */
.hero-copy--rail .lead { max-width: 560px; line-height: 1.65; text-align: justify; }
/* Nhịp dọc cột chữ hero, đã rút mỗi chỗ một nấc (32→24, 20→16) cùng với cả
   trang. Tỉ lệ giữa các khoảng giữ nguyên: nút vẫn cách xa hơn chip. */
.hero-copy--rail .hero-actions { margin-top: var(--s6); }
.hero-copy--rail .hero-chips { margin-top: var(--s4); }
/* Trang có máy tính giá: cụm nút–chip–số liệu bó sát lại thành một khối, khoảng
   cách giữa ba hàng bằng nhau. Trước đó nút cách chip 16px còn chip cách dải số
   20px, ba hàng nhìn rời rạc. */
.hero-grid--tg .hero-chips { margin-top: var(--s3); }
.hero-copy--rail .hero-chips .ico { color: var(--g500); }
/* Bốn chip đứng gọn MỘT hàng trên MỌI trang: chữ trong từng chip không xuống
   dòng, cả hàng được phép co lại thay vì rớt chip xuống hàng thứ hai.

   Trước 29/08 quy tắc này khoá riêng cho trang chủ (lớp --chips1) vì chip bên
   landing dài gấp ba ("Bế, dán, tạo hình tại xưởng"), ép một hàng là bóp nát.
   Nay chip mọi trang đã rút về cùng độ dài với trang chủ (8-16 ký tự) nên dùng
   chung được — lớp --chips1 bỏ hẳn. Đặt chip mới nhớ giữ trong khoảng đó. */
.hero-copy--rail .hero-chips { flex-wrap: nowrap; }
.hero-copy--rail .hero-chips .chip { white-space: nowrap; min-width: 0; }

/* ⚠️ Khối điện thoại phải nằm SAU mọi quy tắc gốc bên trên. Media query không
   làm tăng độ ưu tiên, đặt trước thì 'text-align: justify' viết sau sẽ đè lại.
   Tiêu đề VẪN dàn khít cột như bản máy tính — chỉ câu dẫn về canh trái, vì chữ
   canh đều hai lề ở cột dưới 520px giãn khoảng trắng rất xấu. */
@media (max-width: 520px) {
  .hero-copy--rail .lead { text-align: left; }
}
/* Khổ hẹp: bóp nhẹ đệm và khoảng cách giữa các chip để bốn chip vẫn đủ chỗ
   đứng chung một hàng. */
@media (max-width: 900px) {
  .hero-copy--rail .hero-chips { gap: 6px; }
  .hero-copy--rail .hero-chips .chip { padding: 7px 10px; gap: 6px; }
}
.hero h1 {
  /* Dòng dịch vụ đỏ nằm trong H1 nên khối tiêu đề dày hơn trước — nới khoảng
     cách xuống câu dẫn để hai khối không dính vào nhau. */
  margin: 0 0 var(--s5);
  /* Chữ hoa/thường tiếng Việt có dấu chồng lên đầu/chân chữ — dòng chữ to,
     đậm (weight 800) mà line-height sát 1 dễ khiến dấu dòng dưới chạm chữ
     dòng trên. 1.14 vẫn còn sát trên mobile khi dòng bị ngắt (ví dụ "ý",
     "tưởng"); nới hẳn lên 1.3 để dấu không chạm chữ dòng trên nữa. */
  line-height: 1.3;
}
.hero h1 .hl { color: var(--red); }

/* Dòng dịch vụ trong H1: hạ hẳn một cấp so với tiêu đề — xám, mảnh, viết hoa
   giãn chữ kiểu nhãn. Chỉ dấu ngăn giữ màu đỏ. */
.hero-h1-sub {
  display: block;
  margin-top: 20px;
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--g500);
}
/* Mỗi cụm ("in nhanh") bọc <span> cấm ngắt dòng: màn hình hẹp chỉ được xuống
   dòng tại dấu ngăn, không tách "IN" và "NHANH" ra hai dòng. */
.hero-h1-sub span { white-space: nowrap; }
.hero-h1-sub i {
  font-style: normal;
  color: var(--red);
  margin-inline: .2em;
}
.hero-actions { margin-top: var(--s6); }
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}

/* ⚠️ Khối này phải nằm SAU hai quy tắc gốc bên trên. Media query không làm tăng
   độ ưu tiên, nên nếu đặt trước thì '.hero-chips { display: flex }' viết sau sẽ
   đè lại '.hero-chips { display: none }' ở đây và dải chip vẫn hiện trên mobile. */
@media (max-width: 520px) {
  /* Hai nút hero phải BẰNG NHAU, không để mỗi nút một bề ngang theo độ dài chữ
     làm mép phải so le như trước.

     'flex: 1 1 0' cho hai nút chia đều phần trống; 'min-width: max-content' chặn
     không cho co nhỏ hơn chữ bên trong (nút đang để nowrap, co là tràn chữ ra
     ngoài). Kết hợp lại thì hàng tự xử:
       · đủ chỗ  → hai nút nằm cùng hàng, rộng bằng nhau;
       · chật    → rớt xuống hai hàng, mỗi nút chiếm trọn bề ngang, vẫn bằng nhau.

     Cần cả hai nhánh vì lớp .hero-actions dùng chung: trang chủ nhãn ngắn
     ("Nhận báo giá") thì vừa một hàng, còn hero của trang landing nhãn dài
     ("Nhận báo giá trong ngày") thì chắc chắn phải xuống hàng. */
  .hero-actions .btn { flex: 1 1 0; min-width: max-content; }
  /* Nút cỡ lớn mặc định đệm 32px mỗi bên. Giữ nguyên thì hai nhãn ngắn của
     trang chủ chiếm vừa đúng bề ngang màn hình 390px — vừa khít nên mỗi nút
     đứng đúng bằng chữ của nó, hoá ra lại so le; còn ở 360px thì rớt hàng.
     Hạ xuống 12px để dư chỗ cho hai nút giãn đều bằng nhau. */
  .hero-actions .btn--lg { padding-inline: var(--s3); }
  /* Mũi tên chỉ để trang trí mà ngốn gần 25px. Bỏ trên mobile thì nhãn ngắn
     mới đủ chỗ đứng chung hàng; nút đỏ chiếm nửa màn hình rồi, không cần thêm
     mũi tên mới nhận ra là bấm được. */
  .hero-actions .btn .ico { display: none; }

  /* Màn hình hẹp: thanh CMYK dọc mảnh lại còn 3px, lề thụt bớt để chữ còn chỗ */
  .hero-copy--rail { padding-left: 15px; }
  .cmyk-rail { width: 3px; left: -15px; }

  /* Bỏ hẳn dải chip cam kết trên mobile. Bốn chip này ăn hai hàng ngay dưới nút
     bấm, đẩy khối sản phẩm xuống sâu thêm gần 100px, trong khi ý của chúng đã
     được dải điểm mạnh ngay bên dưới và khối cam kết cuối trang nói lại rồi.
     Dùng 'display: none' chứ không ẩn kiểu .sr-only: đây là cả một khối nội
     dung bỏ khỏi bản mobile, không phải chú thích đi kèm chữ đang hiện.
     ⚠️ Bản máy tính và máy tính bảng VẪN GIỮ nguyên dải chip này. */
  .hero-chips { display: none; }
}

.hero-media { position: relative; }
/* Máy tính giá đặt vào chỗ khung video ở hero (chỉ trang tem nhãn) — là MỘT
   TẤM THẺ hoàn chỉnh: nền trắng, viền mảnh, bo góc, đổ bóng nhẹ. Nền hero cũng
   sáng nên không có viền là khối trôi nổi, không rõ đâu là ranh giới công cụ.
   Đổ bóng thay cho viền dày — tách khỏi nền mà không nặng nét. */
.hero-media .cn-tinhgia {
  /* Đặt qua --pad chứ không ghi thẳng padding: phiếu tạm tính bên trong tràn
     hai mép thẻ bằng lề âm đúng trị số này (xem .tg-phieu). Ghi cứng padding
     mà quên --pad thì phiếu lệch mép, không báo lỗi gì cả. */
  --pad: clamp(20px, 2.2vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
/* Hero có máy tính giá (lớp --tg do hero.php gắn): hai cột canh MÉP TRÊN thay
   vì canh giữa. Máy tính giá cao hơn cột chữ nên canh giữa làm nó thò lên trên
   nhãn đầu trang và thụt xuống dưới dải chip — hai khối trôi nổi cạnh nhau.
   Canh mép trên thì hai cột cùng bắt đầu một đường, mắt đọc ra là một khối.

   Dùng lớp thật chứ không dùng :has() — Safari và trình duyệt đời trước 2023
   không hiểu :has(), gặp là bỏ qua cả quy tắc mà không báo gì. */
/* Nền hồng rất nhạt chuyển sang xám — CÙNG công thức với khối báo giá cuối
   trang (.cta-box). Hai khối quan trọng nhất của trang nhờ vậy nhận ra nhau,
   và tấm thẻ tính giá màu trắng nổi rõ hơn hẳn so với đặt trên nền trắng.
   Chỉ trang có máy tính giá — các trang landing khác giữ nền sáng như cũ. */
.hero--tg {
  background: linear-gradient(180deg, var(--red-subtle), var(--paper-sub));
}
/* stretch (không phải start): hai cột KÉO CAO BẰNG NHAU theo cột cao hơn —
   ở đây là thẻ tính giá. Dùng start thì cột trái co lại đúng bằng nội dung,
   'margin-top: auto' của dải số liệu không còn khoảng trống nào để đẩy, nên
   dải số rơi tự do và tràn xuống dưới đáy thẻ bên phải. */
.hero-grid--tg { align-items: stretch; }
/* Cột chữ thành flex dọc để đẩy được dải ba số liệu xuống SÁT ĐÁY — mép dưới
   dải số nhờ vậy thẳng hàng với mép dưới thẻ tính giá. */
.hero-grid--tg .hero-copy { display: flex; flex-direction: column; }
.hero-grid--tg .hero-stats { margin-top: auto; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hai hàng dùng chung cho cả ba ô: hàng chữ to và hàng mô tả. Ô nào chữ to
     phải xuống hai dòng thì cả ba ô cùng cao thêm, không ô nào lệch hàng. */
  grid-template-rows: auto auto;
  margin-top: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.hero-stat {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;   /* trình duyệt cũ bỏ qua dòng này, bố cục vẫn như trước */
  gap: 2px;
  padding: var(--s3);
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.hero-stat:last-child { border-right: 0; }
.hero-stat:hover { background: var(--paper-sub); }

/* Cả ba ô CÙNG một cỡ chữ, nhỏ hơn hẳn --t-stat của số liệu lớn trong trang.
   Dải này nằm ngay dưới video, đọc lướt là chính; để cỡ số liệu lớn thì ô nào
   giá trị là chữ ("Mọi số lượng") sẽ dài gấp mấy lần ô số, nhìn lệch nhịp. */
.hero-stat b {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-stat-sm);
  font-weight: var(--w-black);
  color: var(--red);
  letter-spacing: -.02em;
  transition: transform .25s var(--ease);
}
.hero-stat:hover b { transform: translateY(-2px); }
.hero-stat span { font-size: var(--t-xs); color: var(--muted); }

/* Hiện dần khi tải trang, ba ô nối nhau — dải nằm trên màn hình đầu nên không
   cần chờ cuộn. Người bật chế độ giảm chuyển động được base.css rút thời lượng
   xuống gần bằng 0, nội dung vẫn hiện đủ. */
@keyframes hero-stat-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hero-stat { animation: hero-stat-in .5s var(--ease) both; }
.hero-stat:nth-child(2) { animation-delay: .09s; }
.hero-stat:nth-child(3) { animation-delay: .18s; }

/* Trên điện thoại ba ô chỉ còn ~110px, không đủ cho dòng mô tả dài. Xếp dọc
   và đưa số ra trước chữ: mỗi ô thành một dòng đọc ngang, gọn hơn cả bản
   ba cột mà không cắt bớt chữ nào. */
@media (max-width: 520px) {
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat {
    display: flex;
    grid-row: auto;              /* bỏ chia hàng chung, mỗi ô là một dòng riêng */
    align-items: baseline;
    gap: var(--s3);
    text-align: left;
    padding: var(--s3) var(--s4);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-stat:last-child { border-bottom: 0; }
  /* Xếp hàng ngang thì số căn trái, không căn giữa như bản ba cột */
  .hero-stat b { flex: 0 0 auto; justify-content: flex-start; min-width: 4.5ch; }
}


@media (max-width: 900px) {
  /* ⚠️ Phải là minmax(0, 1fr) chứ KHÔNG phải 1fr. '1fr' có ngưỡng tối thiểu
     ngầm là min-content — một từ dài trong tiêu đề đủ đẩy ngưỡng đó vượt bề
     ngang màn hình, cột phình ra ngoài và chữ tràn khỏi trang. */
  /* row-gap 24px: một cột thì khe chữ→video lấy đúng khe đầu mục→nội dung của
     mọi mục khác, thay vì ăn theo khe cột 32px của bản máy tính. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }

  /* Video + dải số liệu xuống DƯỚI cụm chữ: trên điện thoại khách phải đọc
     được tiêu đề ngay, không phải cuộn qua hết khối ảnh mới thấy chữ.
     (Trước đây khối ảnh để order:-1 nên nằm trên.) */
  .hero-media { order: 0; }
}

/* ---------------------------------------------------------------- USP */
.usp { border-bottom: 1px solid var(--line); background: var(--paper); }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.usp-item {
  padding: var(--s6) var(--s4);
  border-right: 1px solid var(--line);
}
.usp-item:last-child { border-right: 0; }
.usp-item .ico { width: 26px; height: 26px; color: var(--red); margin-bottom: var(--s3); }
.usp-item b { display: block; font-size: var(--t-sm); color: var(--ink); }
.usp-item span { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 3px; line-height: 1.45; }

@media (max-width: 1000px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-item { border-bottom: 1px solid var(--line); }
  .usp-item:nth-child(2n) { border-right: 0; }
  .usp-item:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 760px) {
  /* Kiểu "lưới hai cột": icon nằm CẠNH tên trên cùng một dòng, bỏ dòng mô tả.
     Vẫn giữ hai cột của khối trên, chỉ đổi ruột từng mục — nên không khai lại
     grid-template-columns ở đây.

     Kiểu ba dòng mỗi mục (icon một dòng, tên một dòng, mô tả một dòng) làm dải
     này cao gần trọn một màn hình điện thoại chỉ để nói năm ý ngắn. Bản gọn
     này thấp hơn khoảng ba lần mà khách vẫn thấy đủ cả năm mục cùng lúc.

     ⚠️ Ngưỡng để 760px chứ không phải 520px: máy 540–740px (điện thoại xoay
     ngang, tablet nhỏ) vẫn là màn hình cần đọc lướt, giữ bản cao ở đó thì dải
     này chiếm hơn 400px chiều cao. */
  .usp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
  }
  /* Chừa chỗ hai bên nét kẻ dọc, nhưng KHÔNG đệm mép ngoài: mép trái cột 1 và
     mép phải cột 2 để trần cho chữ thẳng hàng với lề chung của trang. */
  .usp-item:nth-child(odd)  { padding-right: var(--s4); }
  .usp-item:nth-child(even) { padding-left: var(--s4); }
  .usp-item .ico { width: 19px; height: 19px; margin: 0; flex: none; }
  .usp-item b { font-size: var(--t-xs); line-height: 1.3; }
  /* Ẩn dòng mô tả bằng kiểu .sr-only chứ không phải 'display: none': trình đọc
     màn hình vẫn đọc được, chỉ mắt thường không thấy. */
  .usp-item span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------------------------------------------------------------- Công nghệ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}
.tech-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tech-card--offset { background: var(--g900); color: rgba(255, 255, 255, .72); border-color: var(--g900); }
.tech-card--offset h3 { color: #fff; }
.tech-card--offset::before,
.tech-card--offset::after { border-color: #fff; }
.tech-card--offset .tech-tag { background: rgba(255, 255, 255, .1); color: #fff; }
.tech-card--offset .tech-facts { border-color: rgba(255, 255, 255, .16); }
.tech-card--offset .tech-facts dt { color: rgba(255, 255, 255, .55); }
.tech-card--offset .tech-facts dd { color: #fff; }
.tech-card--offset .ticks .ico { color: #FF8A93; }

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  background: var(--red-subtle);
  color: var(--red);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tech-tag .ico { width: 15px; height: 15px; }
.tech-card-head h3 { margin: var(--s4) 0 var(--s3); font-size: var(--t-h3); }
.tech-card-head p { font-size: var(--t-body); }

.tech-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  padding-block: var(--s4);
  border-block: 1px solid var(--line);
}
.tech-facts dt { font-size: var(--t-label); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tech-facts dd { margin: 4px 0 0; font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--ink); }

.tech-card .btn { margin-top: auto; }

.tech-note {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  max-width: var(--maxw-text);
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--red-subtle);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-body);
  color: var(--g700);
}
.tech-note .ico { color: var(--red); margin-top: 2px; }

@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .tech-card { padding: var(--s5); }
  .tech-facts { grid-template-columns: 1fr; gap: var(--s2); }
  .tech-facts div { display: flex; justify-content: space-between; gap: var(--s3); }
  .tech-facts dd { margin: 0; }
}

/* ---------------------------------------------------------------- Bảng giá */
.price-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.price-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.price-table th,
.price-table td {
  padding: var(--s4) var(--s5);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.price-table thead th {
  background: var(--g900);
  color: #fff;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--g50); }
.price-table tbody th {
  font-weight: var(--w-bold);
  color: var(--ink);
  white-space: nowrap;
}
.price-tag {
  display: inline-block;
  margin-left: var(--s2);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--red-subtle);
  color: var(--red);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.price-cell { font-weight: var(--w-semibold); color: var(--ink); white-space: nowrap; }
.price-lead { color: var(--muted); white-space: nowrap; }

.price-todo {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: #92400E;
}
.price-todo .ico { margin-top: 2px; }

.price-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  gap: var(--s6);
  margin-top: var(--s6);
  align-items: start;
}
.price-note {
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.price-note h3 {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-h3);
  margin-bottom: var(--s3);
}
.price-note h3 .ico { color: var(--red); }
.price-note > p { font-size: var(--t-body); margin-bottom: var(--s5); }

.price-cta {
  display: grid;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--g900);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, .72);
}
.price-cta h3 { color: #fff; font-size: var(--t-h3); }
.price-cta p { font-size: var(--t-sm); margin-bottom: var(--s2); }
.price-cta::before, .price-cta::after { border-color: #fff; }
.price-cta .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); }
.price-cta .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

@media (max-width: 860px) { .price-foot { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Kiểu đóng */
.bind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
/* Dùng chung cho mọi thẻ ảnh bấm-để-phóng-to: khối "3 loại hộp" và thư viện
   mẫu đều là <button class="card-media js-zoom"> bên trong <figure class="card
   card--hover">, nên chỉ cần MỘT rule reset UA button ở đây. */
.bind-card .card-media,
.gal-item .card-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
.zoom-hint {
  position: absolute;
  right: var(--s3); bottom: var(--s3);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, .6);
  color: #fff;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.card-media:hover .zoom-hint,
.card-media:focus-visible .zoom-hint { opacity: 1; }

/* Thẻ dẫn sang trang chi tiết: ảnh không phóng to được nữa nên bỏ con trỏ
   kính lúp, và cả thẻ nhận màu chữ thường thay vì màu link. */
.bind-card--link { color: inherit; text-decoration: none; }
.bind-card--link .card-media { cursor: pointer; }
.bind-go { margin-top: var(--s4); }

.bind-card h3 { margin-bottom: var(--s2); }
.bind-best {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--g600);
}
.bind-best b { color: var(--ink); }

@media (max-width: 900px) { .bind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bind-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Gallery */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.tab {
  padding: 10px var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g600);
  transition: all .18s var(--ease);
}
.tab:hover { border-color: var(--g400); color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}
/* .gal-item giờ LÀ một .card .card--hover — border, bo góc, đổ bóng, dấu xén
   góc đỏ khi trỏ vào đều đến từ hệ thẻ dùng chung (components.css), không
   khai lại ở đây. Chỉ còn phần riêng của gallery: khoảng cách, ảnh, chữ. */
.gal-item { margin: 0; }
.gal-item[hidden] { display: none; }
/* Cản nhẹ việc tải ảnh mẫu: chặn kéo-thả ra ngoài và bôi chọn/copy ảnh.
   Chỉ cản khách vãng lai — không chặn được người dùng DevTools, không có
   cách nào chặn được bằng CSS/JS thuần. Xem thêm phần chặn chuột phải
   trong main.js. */
.gal-item img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.gal-item .card-media:hover img { transform: scale(1.05); }

/* Ô thay ảnh khi chất liệu chưa chụp được mẫu thật — cùng ngôn ngữ với
   .cl-media--soon ở bảng chất liệu (nền nhạt, viền đứt, chữ xám) để hai chỗ
   "đang cập nhật" trên cùng trang nhìn ra là một loại ô, không phải lỗi ảnh.
   Thẻ dạng này KHÔNG có .card--hover nên không nâng, không đổ bóng, không
   hiện dấu xén góc — người xem thấy ngay là chưa bấm được. */
.gal-media--soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s2);
  padding: var(--s4);
  text-align: center;
  background: var(--paper-sub);
  border-bottom: 1px dashed var(--line-strong);
  cursor: default;
}
.gal-media--soon > .ico { width: 40px; height: 40px; color: var(--g300, #CBD5E1); }
.gal-soon-txt { font-size: var(--t-label); font-weight: var(--w-semibold); color: var(--muted); }
/* Thẻ chờ ảnh lùi một bậc so với thẻ có mẫu thật: viền nhạt hơn, không bóng.
   Mẫu thật vẫn là thứ bắt mắt trước. */
.gal-item--soon { border-style: dashed; box-shadow: none; }

/* Phần chữ dưới ảnh — cùng nhịp với .prod-body/.bind-card (đệm var(--s5),
   không dùng đệm var(--s6) mặc định của .card-body vì ảnh gallery nhỏ hơn
   thẻ sản phẩm, đệm rộng quá làm phần chữ trống trải). */
.gal-cap { padding: var(--s5); }
.gal-cap-tag {
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g500);
}
.gal-item figcaption b { display: block; font-size: var(--t-sm); color: var(--ink); }
.gal-item figcaption span { display: block; margin-top: 2px; color: var(--muted); }

/* ---- Bảng quy cách khi trỏ vào ảnh ----
   Phủ dần từ đáy lên khi hover/focus, ảnh vẫn thấy được qua lớp gradient.
   pointer-events: none để chuột "xuyên" qua bảng, không chặn mất việc bấm
   ảnh để phóng to — bảng chỉ để xem, không có gì trong đó cần bấm. */
.gal-quycach {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s4);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, .6) 45%, rgba(15, 23, 42, .95) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.gal-item button:hover .gal-quycach,
.gal-item button:focus-visible .gal-quycach { opacity: 1; transform: translateY(0); }
.gal-quycach-title {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FF8A93;
}
.gal-quycach-rows { display: grid; gap: 5px; }
.gal-quycach-rows span {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--t-xs);
  line-height: 1.4;
}
.gal-quycach-rows span:first-child { border-top: 0; padding-top: 0; }
.gal-quycach-rows i { font-style: normal; color: rgba(255, 255, 255, .58); }
.gal-quycach-rows b { color: #fff; font-weight: var(--w-semibold); text-align: right; }

.gal-empty {
  padding: var(--s8);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.gal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* Hàng tab lọc + nút prev/next của bản trượt ngang, đứng cạnh nhau.
   Bản lưới thường (catalogue) render div này rỗng class — không ảnh hưởng gì. */
.gal-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.gal-tabs-row .tabs { margin-bottom: 0; flex: 1 1 auto; }

@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gal-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); } }

/* ---- Biến thể TRƯỢT NGANG HAI HÀNG ----
   Cho gallery đứng sớm trên trang: hai hàng ảnh xếp theo cột, kéo ngang xem
   tiếp — khách thấy nhiều mẫu ngay mà khối không chiếm cả màn hình như lưới
   4 cột đầy đủ. Ảnh ẩn bởi tab lọc (item.hidden) tự rời khỏi lưới, các ảnh
   còn lại dồn về đầu. Ghi đè lên .gal-grid nên phải đứng SAU các quy tắc
   media query của lưới thường ở trên. */
.gal-grid--scroll {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  /* To hơn bản đầu (200–264px) để nhìn rõ chi tiết bế khuôn, ép kim trên ảnh —
     đổi lại mỗi màn hình thấy ít cột hơn, bù lại bằng việc kéo ngang. */
  grid-auto-columns: clamp(300px, 34vw, 400px);
  grid-template-columns: none;
  gap: var(--s5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s3);
  scrollbar-width: thin;
}
.gal-grid--scroll .gal-item { scroll-snap-align: start; }

/* Điện thoại: 2 hàng × nhiều ảnh hở mép nhìn rối (4 ảnh lấp ló cùng lúc).
   Đổi thành 1 HÀNG, mỗi lần cuộn dừng đúng 1 ảnh full khung, không hở mép
   ảnh kế bên — 'mandatory' ép điểm dừng luôn khớp giữa, không dừng lửng. */
@media (max-width: 640px) {
  .gal-grid--scroll {
    grid-template-rows: none;
    grid-auto-columns: 100%;
    gap: 0;
    scroll-snap-type: x mandatory;
  }
  .gal-grid--scroll .gal-item { scroll-snap-align: center; }
}

/* ---------------------------------------------------------------- Quy trình */
/* ---- Quy trình đặt hàng — dải mạch ngang (đổi 29/08) ----
   Bản trước là danh sách dọc nền tối kèm video, mỗi bước một đoạn 25-30 chữ.
   Nay năm bước chỉ còn icon + tên, xếp ngang thành một mạch: khối thấp hơn
   khoảng ba lần mà vẫn nói đủ thứ tự các bước. Xem inc/sections/process.php.

   Số cột đọc từ biến --n in ra trong HTML, không khoá cứng 5 — thêm bớt bước
   chỉ sửa data/quy-trinh.php, CSS không phải đụng tới. */
.proc-rail {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: var(--s5);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Đường nối chạy NGANG qua tâm các vòng tròn. Thụt hai đầu đúng nửa vòng tròn
   (24px) để nét không thò ra ngoài vòng đầu và vòng cuối. */
.proc-rail::before {
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 23px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.proc-node { position: relative; text-align: center; }
.proc-dot {
  width: 48px; height: 48px;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--red);
  display: grid; place-items: center;
  position: relative; z-index: 1;   /* nằm ĐÈ lên đường nối */
}
/* Cả năm icon cùng màu đỏ thương hiệu, cùng một kiểu vòng: viền đỏ, ruột
   trắng. Bản trước tô bước 1 đỏ đặc làm điểm bắt đầu, nhưng khi cả dải đã
   đỏ thì icon đỏ trên nền đỏ đặc sẽ mất hút — số thứ tự 1…5 đã đủ nói thứ
   tự đọc, không cần thêm dấu hiệu riêng cho bước đầu. */
.proc-dot .ico { width: 21px; height: 21px; color: var(--red); }
.proc-stt {
  position: absolute;
  top: -5px; right: calc(50% - 34px);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 10px; font-weight: var(--w-bold);
  display: grid; place-items: center;
  z-index: 2;
}
.proc-node b { display: block; font-size: var(--t-body); color: var(--ink); }

/* Khổ hẹp: VẪN nằm ngang, không xoay dọc.
   Xoay dọc thì năm bước chiếm gần trọn màn hình điện thoại chỉ để nói năm chữ,
   mà cái mạch ngang — thứ khiến người ta đọc ra "các bước nối tiếp nhau" —
   cũng mất luôn. Thay vào đó thu nhỏ đều: vòng tròn 48→36px, chữ xuống
   --t-label, khoảng cách cột còn 4px. Ở màn 360px (hẹp nhất còn phổ biến)
   mỗi cột được ~65px, đủ cho tên bước xuống tối đa hai dòng. */
@media (max-width: 860px) {
  .proc-rail { gap: var(--s3); }
  .proc-rail::before { left: 20px; right: 20px; top: 19px; }
  .proc-dot { width: 40px; height: 40px; margin-bottom: var(--s2); }
  .proc-dot .ico { width: 18px; height: 18px; }
  .proc-stt { top: -4px; right: calc(50% - 28px); width: 18px; height: 18px; font-size: 9px; }
  .proc-node b { font-size: var(--t-sm); line-height: 1.3; }
}

/* Điện thoại: bóp thêm một nấc nữa. Tên bước cho phép ngắt hai dòng — chữ
   đứng giữa nên hai dòng vẫn cân, không cần cắt ngắn tên. */
@media (max-width: 540px) {
  .proc-rail { gap: 4px; }
  .proc-rail::before { left: 18px; right: 18px; top: 17px; }
  .proc-dot { width: 36px; height: 36px; }
  .proc-dot .ico { width: 16px; height: 16px; }
  .proc-stt { top: -3px; right: calc(50% - 25px); width: 16px; height: 16px; font-size: 8px; }
  .proc-node b {
    font-size: var(--t-tag);
    line-height: 1.25;
    /* Cột chỉ ~65px: chữ dài phải được xuống dòng thay vì tràn ra ngoài. */
    overflow-wrap: break-word;
    hyphens: none;
  }
}

/* ---------------------------------------------------------------- Quy cách */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}
.spec-card {
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.spec-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: var(--red-subtle);
  color: var(--red);
}
.spec-ico .ico { width: 24px; height: 24px; }
.spec-card h3 { margin-bottom: var(--s3); }
.spec-card > p { margin-bottom: var(--s4); }

.spec-rows { display: grid; gap: 0; margin-top: var(--s4); }
.spec-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding-block: 11px;
  border-bottom: 1px dashed var(--line);
}
.spec-rows > div:last-child { border-bottom: 0; }
.spec-rows dt { font-size: var(--t-sm); color: var(--g600); }
.spec-rows dd { margin: 0; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); }

@media (max-width: 760px) { .spec-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .spec-card { padding: var(--s5); } }

/* ---------------------------------------------------------------- CTA mini
   Dải kêu gọi ngắn chen giữa trang dài. KHÔNG mang class .section (nó không
   phải một chương nội dung) nên phải tự khai đệm — nhưng khai ĐÚNG BẰNG mọi
   mục khác. Trước 29/08 chỗ này để clamp(28px,4vw,44px) cho "mỏng hơn", kết
   quả là khe hai bên dải chỉ 100px trong khi mọi chỗ khác 113px. */
.cta-strip { padding-block: var(--section-y); }
.cta-strip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}
.cta-strip-copy b { display: block; font-size: var(--t-h4); color: #fff; }
.cta-strip-copy p { margin-top: 4px; font-size: var(--t-sm); }
.cta-strip .btn { flex: none; }
@media (max-width: 640px) {
  .cta-strip-in { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------------------------------------------------------------- Cẩm nang */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.guide-body { max-width: var(--maxw-text); }

/* HAI CỘT trên máy tính — CHỈ mục "Cẩm nang trước khi in" (#cam-nang), cùng lý
   do với khối Hỏi đáp: một cột hẹp thì nửa phải màn hình bỏ trống.

   ⚠️ Khoá theo #cam-nang chứ KHÔNG áp cho mọi .guide-body: sáu trang chính
   sách và trang giới thiệu cũng dùng class này, nhưng bên đó là văn bản đọc
   liền mạch từ trên xuống — chia hai cột là mắt phải nhảy lên nhảy xuống,
   khó đọc hơn hẳn. Cẩm nang thì khác: mỗi mục là một khối gấp mở độc lập. */
#cam-nang .guide-body {
  max-width: none;
  columns: 2;
  column-gap: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) {
  #cam-nang .guide-body { columns: 1; max-width: var(--maxw-text); }
}

/* Khối nội dung của trang chính sách và trang giới thiệu.
   base.css đã xoá hết margin mặc định, mà .guide-block trước giờ chưa có kiểu
   riêng nên các mục dính sát nhau. Gom nhịp giãn vào đây cho cả 6 trang dùng chung. */
.guide-block + .guide-block { margin-top: var(--s7); }
.guide-block h3 { margin-bottom: var(--s3); }
.guide-block p { line-height: 1.72; }
.guide-block p + p { margin-top: var(--s4); }
.guide-block .ticks { margin-block: var(--s4); }
.guide-block .ticks:last-child { margin-bottom: 0; }
.guide-block .ticks li { font-size: var(--t-body); line-height: 1.6; }

/* Mỗi mục là một khối bấm mở — chữ vẫn nằm trong HTML cho Google đọc,
   nhưng mắt người chỉ thấy tiêu đề nên trang gọn hẳn. */
.guide-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s3);
  /* Không cho một mục bị cắt đôi giữa hai cột — nửa tiêu đề cuối cột trái,
     nửa nội dung đầu cột phải thì không đọc được. */
  break-inside: avoid;
  page-break-inside: avoid;
  scroll-margin-top: calc(var(--nav-h) + 20px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.guide-item[open] { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.guide-item:hover { border-color: var(--line-strong); }

.guide-item summary {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 52px var(--s4) var(--s5);
  position: relative;
  cursor: pointer;
  list-style: none;
}
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item summary h3 {
  font-size: var(--t-h4);
  margin: 0;
  transition: color .18s var(--ease);
}
.guide-item summary:hover h3 { color: var(--red); }
.guide-num {
  flex: none;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  color: var(--g400);
  letter-spacing: .06em;
}
.guide-item[open] .guide-num { color: var(--red); }

/* Dấu + đổi thành − khi mở, giống mục Câu hỏi thường gặp cho nhất quán */
.guide-item summary::after {
  content: "";
  position: absolute;
  right: var(--s5); top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.guide-item[open] summary::after {
  transform: rotate(180deg);
  background-size: 100% 2.5px, 0 2.5px;
}

.guide-content {
  padding: 0 var(--s5) var(--s5);
  border-top: 1px solid var(--line);
  margin-top: -1px;
  padding-top: var(--s5);
}
.guide-content p { line-height: 1.72; }
.guide-content p + p { margin-top: var(--s4); }
.guide-content .ticks { margin-block: var(--s4); }
.guide-content .ticks li { font-size: var(--t-body); line-height: 1.6; }

.guide-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: var(--s5); }
.guide-toc {
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.guide-toc b {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.guide-toc li + li { margin-top: var(--s2); }
.guide-toc a {
  display: block;
  padding: 7px 0 7px var(--s3);
  border-left: 2px solid var(--line);
  font-size: var(--t-sm);
  color: var(--g600);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.guide-toc a:hover { border-left-color: var(--red); color: var(--red); }

.guide-help {
  padding: var(--s6);
  background: var(--g900);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, .68);
}
.guide-help::before, .guide-help::after { border-color: #fff; }
.guide-help > .ico { width: 30px; height: 30px; color: #FF8A93; margin-bottom: var(--s3); }
.guide-help b { display: block; color: #fff; margin-bottom: var(--s2); font-size: var(--t-body); }
.guide-help p { margin-bottom: var(--s4); }

@media (max-width: 1000px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .guide-aside { grid-template-columns: 1fr; } }

/* ------------------------------------------- Năng lực — bố cục mới (trang chủ)
   Chữ bên trái | khung video bên phải, một tầng duy nhất.

   `align-items: stretch` là mấu chốt của việc CANH ĐỀU TRÊN DƯỚI: chiều cao
   hàng do cột chữ quyết định, khung video giãn đúng bằng đó nên mép trên và
   mép dưới thẳng một đường — không phải chỉnh tỉ lệ cho "xấp xỉ" như trước.

   Đây là bố cục DUY NHẤT của mục này từ 29/08 — bản cũ (.trust-layout, dùng ở
   5 trang sản phẩm) đã xoá cùng lúc với việc bỏ mục "Năng lực" khỏi trang con. */
.nl-hang {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}

/* Cột chữ chừa 24px lề trái cho thanh CMYK đứng, y hệt .hero-copy--rail
   (4px bề ngang thanh + 20px cách chữ). Nhãn "02", đoạn dẫn và dải thẻ đều
   thụt theo nên mép trái cả cụm thẳng một đường.

   `align-self: center` để cụm chữ nằm giữa theo chiều dọc phòng khi cột video
   cao hơn. CỐ Ý không biến khối này thành flex column: .eyebrow vốn là
   inline-flex, làm con của flex column thì nó bị kéo giãn hết bề ngang và
   nhịp lề trên/dưới giữa các con cũng đổi. Để nguyên khối block thì mọi thứ
   bên trong giữ đúng dáng cũ. */
.nl-chu { padding-left: 24px; align-self: center; }
/* Không đặt margin cho h2 ở đây: khoảng nhãn→tiêu đề→câu dẫn do hai rule chung
   ở base.css lo, để mục này cùng nhịp với mọi mục khác. */
.nl-chu h2 { position: relative; }   /* mốc cho thanh CMYK bám theo */
/* Dùng lại nguyên xi lớp .cmyk-rail của hero (khai ở đầu file này), chỉ chỉnh
   khoảng thụt trên/dưới cho hợp cỡ chữ h2 vốn nhỏ hơn h1. */
.nl-chu h2 .cmyk-rail { left: -24px; top: 4px; bottom: 4px; }
@media (max-width: 520px) {
  /* Màn hình hẹp: thanh mảnh 3px, lề thụt 15px — y hệt hero ở cùng khổ, để hai
     cụm tiêu đề trên cùng một trang không thụt hai kiểu. */
  .nl-chu { padding-left: 15px; }
  .nl-chu h2 .cmyk-rail { width: 3px; left: -15px; }
}

/* Câu dẫn canh đều hai lề — mép trái mép phải thành hai đường thẳng, ăn khớp
   với khối tiêu đề và dải thẻ bên dưới. Làm y hệt câu dẫn ở hero.
   Nới dòng lên 1.65 (mặc định 1.55): chữ canh đều hai lề phải giãn khoảng
   trắng giữa các từ, dòng thưa hơn thì mắt không thấy chỗ giãn đó. */
.nl-chu .lead { text-align: justify; line-height: 1.65; }
/* ⚠️ Khối điện thoại phải nằm NGAY SAU quy tắc gốc bên trên. Media query không
   làm tăng độ ưu tiên — đặt trước thì 'text-align: justify' viết sau đè lại.
   Dưới 520px cột quá hẹp, canh đều hai lề làm khoảng trắng giãn toác trông rất
   xấu, nên trả về canh trái. Cùng cách xử lý với câu dẫn ở hero. */
@media (max-width: 520px) {
  .nl-chu .lead { text-align: left; }
}

/* Câu trích dẫn tóm hành trình một đơn hàng (tư vấn → thiết kế → sản xuất),
   thêm 23/08 — vạch đỏ bên trái mượn đúng ngôn ngữ của .cmyk-rail trong tiêu
   đề mục này, để hai chi tiết ăn khớp nhau như hero đã làm với "Bao bì giấy".
   In nghiêng để tách bạch với câu dẫn .lead ngay phía trên — không phải icon
   trích dẫn to kiểu Tây vì hệ chữ này chưa dùng dấu ngoặc kép nghệ thuật ở
   đâu khác trên site, thêm vào đây sẽ lạc phong cách. */
.nl-trich {
  margin: 0;
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 3px solid var(--red);
  font-size: var(--t-body);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
}

/* Từ khoá trong tiêu đề để dạng viền đỏ rỗng ruột — cùng hiệu ứng với dòng đỏ
   trên hero, gợi bản kẽm chưa lên mực. Cỡ chữ giữ nguyên như phần còn lại của
   câu (hero cũng vậy từ 29/08 — xem .h1-accent).
   Trình duyệt không hỗ trợ text-stroke thì rơi về chữ đỏ đặc, vẫn đọc được. */
.h2-nhan { color: var(--red); }
@supports (-webkit-text-stroke: 1px red) {
  .h2-nhan {
    color: transparent;
    -webkit-text-stroke: .035em var(--red);
    paint-order: stroke fill;
  }
}

/* Dải thẻ bo tròn — phần duy nhất nêu năng lực bằng chữ trong mục này, nên cho
   thở rộng hơn một nhịp để ra dáng khối riêng, không dính vào đoạn dẫn. */
.nl-the { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.nl-the li {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
}
.nl-the .ico { width: 18px; height: 18px; color: var(--red); }
.nl-the b { font-size: var(--t-label); color: var(--ink); font-weight: var(--w-semibold); }

/* Cột video: bỏ tỉ lệ cố định 16:9 của .video cho khung giãn hết chiều cao
   hàng. `min-height` là mức sàn phòng khi cột chữ ngắn bất thường (đổi tiêu đề
   ngắn hơn chẳng hạn) — thiếu nó khung video có thể bị dẹp lép. */
.nl-media { display: flex; }
.nl-media .video { width: 100%; aspect-ratio: auto; min-height: 320px; }

@media (max-width: 900px) {
  /* Một cột: khe chữ→video lấy 24px như khe đầu mục→nội dung ở mọi mục khác,
     thay vì ăn theo khe cột 32px của bản máy tính. */
  .nl-hang { grid-template-columns: 1fr; align-items: start; row-gap: var(--s6); }
  /* Một cột thì không còn gì để canh bằng — trả khung video về tỉ lệ cố định.
     Dùng 3:2 chứ không 16:9 cho khung đỡ dẹt trên màn hình hẹp. */
  .nl-media .video { aspect-ratio: 3 / 2; min-height: 0; }
}

@media (max-width: 560px) {
  /* Trên điện thoại cột chỉ còn ~315px (375px máy − 36px lề trang − 24px chừa
     thanh CMYK). flex-wrap kiểu viên thuốc đổ 1 thẻ / 2 thẻ / 1 / 1 so le rất
     lộn xộn vì các thẻ dài ngắn khác nhau.

     Ép thành LƯỚI 2 CỘT ĐỀU NHAU thay vì flex-wrap: mỗi ô rộng bằng nhau nên
     hai cột luôn thẳng hàng, thẻ nào chữ dài (VD "Đội ngũ chuyên nghiệp") thì
     tự xuống dòng trong ô của nó thay vì đẩy lệch cả hàng.

     Bỏ luôn dáng viên thuốc ở khổ này — thẻ bo tròn kéo tràn hết bề ngang ô
     trông y như nút bấm, mà đây không phải nút, khách chạm vào không có gì
     xảy ra. Kẻ ngăn mảnh nói đúng bản chất hơn: đây là một danh sách. */
  .nl-the {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: var(--s6);   /* câu dẫn → danh sách: 24px, cùng nhịp đầu mục→nội dung */
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .nl-the li {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 10px var(--s3);
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  /* Không còn viền bo ôm lấy chữ nữa nên nhấc lên một nấc cỡ, khỏi lọt thỏm
     giữa khoảng trắng hai bên. */
  .nl-the b { font-size: var(--t-sm); }
}

/* ---------------------------------------------------------------- Logo khách
   Dải logo nội tuyến. CSS này dùng chung với mục "Đối tác" (doi-tac.php)
   nên KHÔNG xoá, dù khối "Năng lực" không còn gọi tới nữa. */

.logos { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.logos-title { text-align: center; margin-bottom: var(--s5); }
.logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s7);
}
.logos-row img {
  height: 46px; width: auto;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s var(--ease), opacity .2s var(--ease);
}
.logos-row img:hover { filter: none; opacity: 1; }

/* ---------------------------------------------------------------- Đối tác */
/* Mục "Đối tác" đứng riêng trên trang chủ, dùng lại .logos-row để thừa hưởng
   hiệu ứng xám → hiện màu, chỉ đổi cách xếp.

   Nền để SÁNG, phân cách bằng đường kẻ mảnh chứ không dùng .section--tint:
   nhịp nền trang chủ là sáng · sáng · xám(Năng lực) · sáng(Lĩnh vực) · XÁM(FAQ).
   Cho mục này nền xám thì nó dính liền vào mảng xám của FAQ ngay dưới, hai mục
   nhoè thành một. Đường kẻ mảnh tách bạch được mà không phá nhịp — cùng ngôn
   ngữ với border-top của .logos ở trên. */
/* Băng logo đối tác. Đệm để ĐÚNG nhịp chung: trước 29/08 khai riêng
   clamp(28px,3vw,44px) với lý do "băng phụ mỏng thì đệm mỏng", nhưng nó dùng
   công thức khác hẳn .cta-strip vốn cùng một ý — hai băng phụ, hai khoảng
   cách. Nay cả hai cùng --section-y, cả trang một nhịp. */
.doi-tac {
  border-top: 1px solid var(--line);
  padding-block: var(--section-y);
}

/* Cụm nhãn: vạch CMYK nhỏ nằm trên, tên mục nằm dưới, cả cụm canh giữa. */
.doi-tac-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

/* Nhãn một dòng, thay cho eyebrow + h2 + đoạn dẫn.
   Trước để cỡ nhãn nhỏ 13px màu xám nhạt nên chìm nghỉm, đọc như một dòng chú
   thích chứ không ra tên mục. Nâng lên cỡ tiêu đề thẻ, đổi sang màu mực và
   giảm giãn chữ (chữ to mà giãn .12em thì rời rạc, khó đọc thành cụm). */
.doi-tac-nhan {
  margin: 0;
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

/* MỘT hàng chạy ngang không ngừng.
   Khung ngoài cắt bớt phần thừa, và làm mờ dần hai mép để logo hiện ra / khuất
   đi mềm mắt thay vì bị chặt cụt ở rìa. */
.doi-tac-vp {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

/* --dt-o = bề ngang MỘT Ô logo. Mỗi nấc trượt đúng bằng một ô, và cả vòng trượt
   đúng bằng một bản danh sách — nhờ vậy mối nối trùng khít, mắt không thấy.
   Dùng ô rộng cố định thay cho `gap`: có gap thì bản danh sách rộng hơn số ô
   nhân bề ngang ô đúng một khoảng gap, cả vòng lệch đi từng đó và dải trôi dần
   sai chỗ sau mỗi vòng. */
.doi-tac-track {
  --dt-o: 190px;
  display: flex;
  width: max-content;
  /* Trôi đều, KHÔNG dừng: chạy hết đúng nửa dải rồi nhảy về 0. Vì nửa sau là
     bản sao giống hệt nửa đầu nên đúng lúc nhảy hình vẫn trùng khít, mắt không
     bắt được mối nối — dải như trôi mãi không có điểm đầu điểm cuối. */
  animation: doi-tac-chay var(--dt-giay, 39s) linear infinite;
}
@keyframes doi-tac-chay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* DỪNG khi rê chuột hoặc chạm vào, nhấc ra thì chạy tiếp.

   Hai cơ chế riêng cho hai loại máy, cố ý KHÔNG dùng chung :hover:
   — Máy có chuột thật: khoá trong @media (hover: hover). Không khoá thì trên
     điện thoại một cú chạm để lại trạng thái hover dính cứng cho tới khi chạm
     ra chỗ khác, dải đứng chết luôn — đúng lỗi của bản trước.
   — Máy cảm ứng: lớp .is-dung do main.js gắn lúc đặt tay xuống và gỡ lúc nhấc
     tay lên, nên không bao giờ kẹt. */
@media (hover: hover) {
  .doi-tac-vp:hover .doi-tac-track { animation-play-state: paused; }
}
.doi-tac-vp.is-dung .doi-tac-track { animation-play-state: paused; }

.doi-tac-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doi-tac-list > li {
  flex: 0 0 var(--dt-o);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ô CỐ ĐỊNH 150×90 + object-fit:contain, không để height:auto.
   Logo mỗi hãng một tỉ lệ rất khác nhau: 11 logo mượn từ netprint.vn đều là
   khung 1043×626 (1,67:1), còn Agribank là 50:9 — ngang gấp năm lần. Nếu chỉ
   khoá bề ngang thì mỗi ảnh cao một kiểu, hàng logo nhấp nhô và chiều cao cả
   dải bị cái cao nhất kéo theo. Khoá cả hộp rồi cho ảnh nằm lọt vào trong thì
   logo nào cũng cân giữa, không méo, và hàng luôn cao đúng 90px dù sau này
   thêm logo hình gì. */
/* Khoá CHIỀU CAO, thả bề ngang — đây mới là cách cho hàng logo đều mắt.
   Bản cũ khoá cứng cả hộp 150×90: logo ngang (1,67:1) bị chặn bởi bề ngang nên
   cao ra 90px, logo vuông lại bị chặn bởi chiều cao nên chỉ được 90×90 — nhìn
   ra cái to cái nhỏ vì diện tích chênh nhau.
   Cho mọi logo CÙNG cao 52px thì mắt đọc cả hàng thành một đường thẳng, bề
   ngang lệch nhau không ai để ý.

   max-width vẫn giữ để chặn ngoại lệ cực ngang (Agribank tỉ lệ 50:9, thả tự do
   ở chiều cao 52px là rộng gần 290px, một mình nó chiếm hai ô). Gặp trường hợp
   đó thì object-fit thu lại vừa khung, chỉ mình nó thấp hơn hàng. */
.doi-tac-list img {
  height: 52px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s var(--ease), opacity .2s var(--ease);
}
.doi-tac-list img:hover { filter: none; opacity: 1; }

/* MIỄN TRỪ CÓ CHỦ Ý khỏi luật giảm chuyển động toàn site ở base.css:204.
   Luật đó tắt mọi animation trên máy có bật "giảm chuyển động" bằng
   `animation-duration: .01ms !important` áp lên `*`, nên dải logo đứng chết một
   chỗ. Chủ trang muốn dải chạy liên tục trên MỌI máy, nên ghi đè lại —
   `.doi-tac-track` (một lớp) đặc hiệu hơn `*` nên thắng.

   Đây là ngoại lệ DUY NHẤT của site; các hiệu ứng khác vẫn tắt bình thường. */
@media (prefers-reduced-motion: reduce) {
  .doi-tac-track {
    animation-duration: var(--dt-giay, 39s) !important;
    animation-iteration-count: infinite !important;
  }
}

@media (max-width: 560px) {
  .doi-tac-list { gap: var(--s6); }
  .doi-tac-list img { width: 120px; }
}

/* ---------------------------------------------------------------- FAQ */
/* HAI CỘT trên máy tính (đổi 29/08). Trước đó một cột rộng 860px nên nửa phải
   màn hình bỏ trống, mà danh sách 6-13 câu lại kéo trang dài lê thê.

   Dùng CSS columns chứ không phải grid: grid phải chia sẵn câu nào cột trái
   câu nào cột phải, mà mỗi trang một số câu khác nhau (6, 8, 10, 13) nên chia
   tay là sai. Columns tự rót cho hai cột cao gần bằng nhau, và khi khách bấm
   mở một câu thì tự dồn lại — không phải viết JS. */
.faq-list {
  columns: 2;
  column-gap: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line-strong);
}
.faq-list details {
  border-bottom: 1px solid var(--line-strong);
  /* Không cho một câu bị cắt đôi giữa hai cột — nửa câu hỏi nằm cuối cột trái,
     nửa câu trả lời sang đầu cột phải thì không đọc được. */
  break-inside: avoid;
  /* Cả hai dòng cùng nghĩa: bản chuẩn và bản cũ cho Safari/Firefox đời trước. */
  page-break-inside: avoid;
}
/* Điện thoại và máy tính bảng: về một cột. Hai cột trên màn hẹp thì mỗi cột
   chỉ còn ~150px, câu hỏi vỡ thành 4-5 dòng. */
@media (max-width: 900px) {
  .faq-list { columns: 1; }
}
.faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--s5) 52px var(--s5) 0;
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  color: var(--ink);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 15px; height: 15px;
  margin-top: -7px;
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
/* Mở ra: ẩn gạch dọc để dấu + thành dấu −.
   Xoay nửa vòng cho mượt mắt mà gạch ngang vẫn nằm ngang khi dừng. */
.faq-list details[open] summary::after {
  transform: rotate(180deg);
  background-size: 100% 2.5px, 0 2.5px;
}
.faq-list summary:hover { color: var(--red); }
.faq-answer {
  padding-bottom: var(--s5);
  max-width: var(--maxw-text);
  font-size: var(--t-body);
  line-height: 1.7;
}
.faq-answer p + p { margin-top: var(--s3); }
.faq-more { margin-top: var(--s6); font-size: var(--t-sm); }
.faq-more .link-arrow { margin-left: var(--s2); }

/* ---------------------------------------------------------------- CTA + form */
/* Đệm ĐÚNG bằng mọi mục khác. Trước 29/08 dùng --section-y-lg cho "thoáng
   hơn vì là đích đến của trang", nhưng hộp báo giá bên trong đã có đệm riêng
   rất dày rồi — cộng thêm khe rộng thành thừa 18px so với các mục còn lại. */
.cta-section { padding-block: var(--section-y); }
/* Khối báo giá — nền SÁNG (đổi 29/08).
   Trước đó là hộp đen đặc: nổi thì nổi thật, nhưng nằm giữa một trang toàn nền
   trắng và xám nhạt nên đọc ra như một mảng lạ, và form trắng bên trong bị viền
   đen bó chặt trông ngột.
   Nay nền chuyển từ hồng rất nhạt (--red-subtle, cùng họ với màu thương hiệu)
   sang xám nhạt; form trắng đổ bóng sâu nên vẫn nổi rõ khỏi nền mà cả khối vẫn
   sáng, liền mạch với phần còn lại của trang. */
.cta-box {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  padding: clamp(32px, 4vw, 48px) clamp(32px, 4vw, 56px);
  background: linear-gradient(180deg, var(--red-subtle), var(--paper-sub));
  border-radius: var(--r-lg);
}
/* Chữ bên trái nay là chữ đen trên nền sáng — không còn ghi đè màu trắng nữa,
   để mọi thứ ăn theo màu mặc định của trang. */
.cta-promise { margin: var(--s6) 0; }
.cta-promise .ico { color: var(--red); }
.cta-promise li { font-size: var(--t-sm); }
.cta-direct { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta-hours {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s4);
  color: var(--muted);
}
.cta-hours .ico { width: 15px; height: 15px; }

.quote-form {
  padding: var(--s6);
  background: var(--paper);
  border-radius: var(--r-lg);
  /* Bóng sâu để tấm form tách hẳn khỏi nền — thứ giữ cho khối vẫn có điểm nhấn
     sau khi bỏ nền đen. */
  box-shadow: var(--sh-lg);
  color: var(--text);
}
.quote-title { font-size: var(--t-h3); margin-bottom: var(--s5); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.field--full { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; margin-bottom: var(--s4); }
.quote-note {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-top: var(--s4);
}
.quote-note .ico { width: 16px; height: 16px; color: var(--red); margin-top: 2px; }

@media (max-width: 940px) {
  /* ⚠️ minmax(0, 1fr) chứ KHÔNG phải 1fr: "1fr" ngầm là minmax(auto, 1fr), cột
     không được co dưới min-content của cụm chữ bên trong — ở 360px cụm đó 332px
     mà chỗ chỉ còn 284px, nên cả trang bị cuộn ngang 10px. row-gap 24 = khe
     đầu mục→nội dung, thay vì ăn theo khe cột 32px của bản máy tính. */
  .cta-box { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
}
@media (max-width: 520px) {
  /* Hai nút "0902 988 600" / "Nhắn Zalo" chia đều một hàng — cùng cách hero đã
     làm cho hai nút của nó; để mặc định thì mỗi nút một bề ngang, mép phải so le. */
  .cta-direct > .btn { flex: 1 1 0; min-width: max-content; }
  .form-grid { grid-template-columns: 1fr; }
  .quote-form { padding: var(--s5); }
  .cta-box { padding: var(--s5); }
}

/* ---------------------------------------------------------------- Dịch vụ liên quan */
.related { border-top: 1px solid var(--line); }

/* Thẻ dịch vụ trong dải cuộn ngang (đổi 29/08 từ lưới 3 cột sang .hs).
   Trước đây mỗi thẻ có icon + tên + một câu trích dẫn + dòng "Xem chi tiết",
   xếp lưới 3 cột và hiện tới 11-12 thẻ — trên điện thoại thành một cột dọc dài
   lê thê ở cuối trang. Nay chỉ còn ảnh + tên, 8 thẻ, máy tính đúng hai hàng
   bốn cột, điện thoại vuốt ngang.

   .hs-card lo phần khung và cuộn; .rel-card chỉ thêm phần "bấm được": bỏ gạch
   chân, cho cả thẻ thành vùng bấm. Hiệu ứng nâng + dấu xén góc đỏ khi trỏ vào
   do .rel-card--live trong components.css lo, dùng chung với thẻ sản phẩm. */
.rel-card { text-decoration: none; color: inherit; }
.rel-card .hs-title h3 { font-size: var(--t-body); }
/* Thẻ chưa có trang riêng: chữ nhạt hơn và không bấm được, để mắt phân biệt
   ngay với thẻ dẫn đi đâu đó thật. */
.rel-soon { display: block; margin-top: 4px; font-style: italic; }

/* Dải này thấp hơn các dải .hs khác vì thẻ chỉ có ảnh + một dòng tên. */
.hs--rel .hs-media { aspect-ratio: 4 / 3; }
.hs--rel .hs-body { padding-block: var(--s4); }

/* ---------------------------------------------------------------- Trang phụ */
/* Đầu trang phụ (chính sách, liên hệ, blog). Dùng đúng mốc chung thay vì bản
   chép tay clamp(40px,4.6vw,64px) — hai đầu mút y hệt --section-y, chỉ khác hệ
   số vw nên lệch vài px ở màn cỡ trung, không vì lý do gì. */
.page-hero {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.page-hero .cmyk-bar { margin-bottom: var(--s5); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: var(--s5); }

/* Liên hệ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.contact-card {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact-card h3 { margin-bottom: 0; }
.contact-card .spec-ico { margin-bottom: var(--s2); }
.contact-card .xs { display: inline-flex; align-items: center; gap: 6px; }
.contact-card .xs .ico { width: 14px; height: 14px; }
.contact-card--wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }

/* Blog khi chưa có bài */
.blog-empty {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s9) var(--s7);
  text-align: center;
  background: var(--paper-sub);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.blog-empty > .ico { width: 40px; height: 40px; color: var(--red); margin: 0 auto var(--s5); }
.blog-empty .lead { margin-inline: auto; }
.blog-soon {
  max-width: 720px;
  margin: var(--s7) auto 0;
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.blog-soon .ticks { margin-top: var(--s4); }

/* ==========================================================================
   CUỘN NGANG (.hs) — dùng chung cho "Năng lực sản xuất" và "Lĩnh vực phục vụ"
   ========================================================================== */

.hs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  margin-bottom: var(--s6);   /* đầu mục → nội dung: 24px, cùng nhịp .section-head */
}
/* Trích dẫn trong đầu mục có dải cuộn: đứng giữa tiêu đề và cặp nút trái/phải.
   Trước 29/08 nó nằm ngay dưới tiêu đề bên cột trái, nên hai kiểu đầu mục trên
   site xếp khác nhau — kiểu này câu dẫn dưới tiêu đề, kiểu kia câu dẫn bên
   phải. Nay cả hai giống nhau: tiêu đề trái, trích dẫn phải. */
.hs-trich {
  flex: 0 1 clamp(260px, 32%, 420px);
  margin: 0 0 0 auto;
  align-self: end;
}
.hs-nav { display: flex; gap: var(--s2); flex: none; }
.hs-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.hs-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.hs-btn:disabled { opacity: .3; cursor: default; }
.hs-btn .ico { width: 20px; height: 20px; }
.hs-btn--prev .ico { transform: rotate(180deg); }

/* Vùng cuộn — ẩn thanh trượt, đã có nút và chỉ báo đếm số thay thế */
.hs-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 310px;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-track:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.hs-card {
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--r-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hs-card:hover { border-color: var(--line-strong); border-top-color: var(--red); box-shadow: var(--sh-sm); }

.hs-card h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.hs-card > p { font-size: var(--t-sm); }

/* ---- Thẻ ảnh-trên-chữ-dưới: dùng cho cả Công đoạn sản xuất và Lĩnh vực ---- */
/* Bề rộng thẻ = chia đều bề rộng dải cho số cột, trừ đi các khe ở giữa.
   Trước đây thẻ cố định 340px nên thẻ cuối luôn bị cắt lửng ở mép phải —
   khách tưởng trang vỡ chứ không hiểu là "còn cuộn được nữa". Giờ mỗi bậc
   màn hình hiện đúng một số thẻ trọn vẹn; tín hiệu còn-cuộn-được đã có
   thanh đếm 01/08 và hai nút mũi tên lo. Đổi số thẻ mỗi màn chỉ cần đổi
   --hs-cols, không đụng vào công thức. */
.hs--media .hs-track {
  --hs-cols: 4;
  --hs-gap: var(--s4);   /* khe mặc định; dải nào chạy khe khác thì khai lại đúng một dòng */
  grid-auto-columns: calc((100% - (var(--hs-cols) - 1) * var(--hs-gap)) / var(--hs-cols));
}
.hs--media .hs-card { padding: 0; }
.hs-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-tint);
  overflow: hidden;
}
.hs-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
/* Khoá theo .hs--media chứ không theo .cap-card, để mọi dải thẻ ảnh-trên-chữ-dưới
   đều được hưởng — kể cả dải dựng bằng sections/deck.php. */
.hs--media .hs-card:hover .hs-media img { transform: scale(1.04); }
.hs-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s5);
  flex: 1;
}
.hs-title { display: flex; align-items: center; gap: var(--s2); }
.hs-title .ico { width: 19px; height: 19px; color: var(--red); flex: none; }
.hs-title h3 { margin: 0; }
.hs-body > p { font-size: var(--t-sm); }

/* ---- Thẻ công đoạn sản xuất: chỉ ảnh + tiêu đề + mô tả ----
   Bỏ dải chip nên thẻ hụt mất một mảng ở đáy. Bù bằng hai việc:
   1. Ảnh khổ cao hơn (4/3 thay cho 16/10) — thẻ giờ ít chữ, để ảnh chiếm tỉ
      trọng lớn hơn thì cân, và công đoạn sản xuất vốn cần nhìn ảnh là chính.
   2. Ảnh GIÃN nốt phần cao còn dư ('flex: 1 0 auto'): các thẻ cùng hàng luôn
      cao bằng nhau, thẻ nào mô tả ngắn hơn trước đây hở một mảng trống ở đáy —
      nay chỗ đó thành ảnh, không còn khoảng trắng lửng.
   Chỉ khoá theo .cap-card, các dải thẻ khác (Kiểu dáng, Gia công, Lĩnh vực)
   vẫn giữ nguyên chip và tỉ lệ ảnh cũ. */
/* Ảnh khoá đúng MỘT khổ cho mọi thẻ, không cho giãn theo chỗ dư. Bản trước cho
   ảnh giãn lấp phần cao còn thừa, hoá ra thẻ nào mô tả dài hơn một dòng thì ảnh
   bị co lại chừng ấy — bốn ảnh cạnh nhau cao lệch nhau, mép dưới ảnh và dòng
   tiêu đề đều không thẳng hàng. Ảnh đều nhau quan trọng hơn việc lấp kín đáy thẻ.
   Khổ 4/3 chỉ mở từ 720px trở lên: ở điện thoại dải chạy mỗi lần một thẻ, ảnh
   4/3 trên khổ hẹp chỉ đội thẻ dài thêm ~70px nên giữ 16/10 như cũ. */
@media (min-width: 720px) {
  .cap-card .hs-media { aspect-ratio: 4 / 3; }
}
/* Dải chip dưới đáy thẻ — dồn xuống cuối để mọi thẻ trong hàng cao bằng nhau.
   Khoá theo .hs--media để dùng chung cho cả sections/deck.php. */
.hs--media .hs-card .chip-row { margin-top: auto; padding-top: var(--s3); }
.hs--media .hs-card .chip { background: var(--paper-sub); font-size: var(--t-label); padding: 5px 10px; }
/* Thẻ ngành: khung hình trên là bản vẽ khai triển trình bày như hình
   minh hoạ kỹ thuật (không phải hình nền chìm). Khi có ảnh thật cho ngành
   nào, thêm 'img' vào dữ liệu là ảnh tự thay chỗ bản vẽ ngành đó. */
.hs-media--art {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, var(--g50), var(--g100));
}
.ind-art {
  width: auto;
  height: 82%;
  color: var(--red);
  opacity: .78;
  transition: transform .45s var(--ease);
}
.hs-card:hover .ind-art { transform: scale(1.05); }

/* Ba mục #ve-netprint / #nang-luc / #linh-vuc từng rút padding-top để đọc như
   MỘT cụm "Năng lực NetPrint" (23/08). Bỏ ngày 29/08: cách rút đó làm khe
   trong cụm chỉ còn 87px trong khi mọi chỗ khác 113px, và vì cụm nằm giữa
   trang chủ nên chính chỗ này là nơi "chỗ thừa chỗ sát" lộ rõ nhất.
   Ba mục vẫn đọc liền mạch nhờ tiêu đề và nội dung nối nhau, không cần bóp
   khoảng trắng. Khe giờ bằng mọi mục khác. */
/* Các bậc màn hình — mỗi bậc một số thẻ nguyên, không thẻ nào bị cắt.
   Ngưỡng chọn theo bề rộng thẻ tối thiểu còn đọc được (~270px):
   4 cột từ 1180px, 3 cột từ 890px, 2 cột từ 641px, điện thoại 1 thẻ đầy khung. */
@media (max-width: 1179px) { .hs--media .hs-track { --hs-cols: 3; } }
@media (max-width: 889px)  { .hs--media .hs-track { --hs-cols: 2; } }
@media (max-width: 640px)  { .hs--media .hs-track { --hs-cols: 1; } }

/* Dải có ÍT thẻ hơn số cột thì chia theo đúng số thẻ, kẻo thừa ô trống bên
   phải (dải "Ba kiểu hay đặt" ở /hop-carton-boi/ chỉ có 3 thẻ). Đặt trong
   min-width để không đè lên các bậc màn hẹp ở trên — class có đặc hiệu cao
   hơn, nằm ngoài media query là nó thắng cả ở điện thoại. */
@media (min-width: 1180px) {
  .hs--media .hs-track--3 { --hs-cols: 3; }
  .hs--media .hs-track--2 { --hs-cols: 2; }
}
@media (min-width: 890px) and (max-width: 1179px) {
  .hs--media .hs-track--2 { --hs-cols: 2; }
}

/* Ghi đè độ rộng thẻ từ hệ .hs cho riêng thư viện mẫu hộp giấy — hai dải
   "Kiểu dáng"/"Gia công" dùng đúng 340px (rồi 86% trên điện thoại) của
   .hs--media là hợp lý cho thẻ minh hoạ, nhưng ảnh sản phẩm thật ở thư viện
   mẫu cần khổ riêng đã canh ở trên. Cùng mức đặc hiệu (2 lớp) với hai rule
   .hs--media .hs-track bên trên nên phải đứng SAU để thắng nhờ thứ tự khai báo. */
/* Khe của dải này: khai báo 'gap: var(--s5)' ở khối .gal-grid--scroll bên trên
   KHÔNG có tác dụng — .hs-track (cùng đặc hiệu, đứng sau) ghi đè thành var(--s4).
   Khe thật đang chạy là 16px, nên --hs-gap giữ mặc định cho khớp; sửa chỗ này chỉ
   khi muốn đổi hẳn khoảng cách giữa các ảnh. */
/* Ba cột ở màn rộng: ra đúng ~400px mỗi ảnh như khổ cũ đã chọn, nhưng nay là
   3 ảnh TRỌN VẸN thay vì 2 ảnh rưỡi cắt lửng. Khổ cũ clamp(300px,34vw,400px)
   không ăn nhập gì với bề rộng dải nên cắt thẻ ở gần như mọi cỡ màn hình.
   Các bậc hẹp hơn để hệ chung lo (3 → 2 → 1 thẻ). */
@media (min-width: 1180px) { .gal-grid--scroll.hs-track { --hs-cols: 3; } }
@media (max-width: 640px) {
  .gal-grid--scroll.hs-track { grid-template-rows: none; grid-auto-columns: 100%; gap: 0; }
}

/* Dòng "Hay dùng" — chỉ có ở mục Lĩnh vực phục vụ */
.ind-need {
  position: relative;
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  color: var(--g600);
}
.ind-need b { color: var(--ink); }

/* Chỉ báo: đếm số + vạch tiến trình */
.hs-meter {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
}
.hs-meter b { font-size: var(--t-sm); color: var(--ink); flex: none; }
.hs-meter .hs-total { color: var(--g400); }
.hs-bar {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.hs-bar i {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: var(--red);
  transition: width .3s var(--ease), left .3s var(--ease);
}

@media (max-width: 640px) {
  /* Bề rộng thẻ ở điện thoại do --hs-cols lo (xem khối bậc màn hình bên trên).
     Rule ".hs-track { grid-auto-columns: 82% }" cũ đã bỏ: mọi dải trong dự án
     đều nằm trong .hs--media nên nó không bao giờ có tác dụng, để lại chỉ khiến
     người sửa sau tưởng điện thoại đang chạy 82%. */
  .hs-nav { display: none; }
  .hs-head { display: block; }
}

/* ---------------------------------------------------------------- Khối sản phẩm */

/* ---- Băng nhóm (chỉ có trên máy tính) ----
   Mỗi nhóm là một băng: ảnh bìa khổ dọc một bên, lưới thẻ 2 cột bên kia.
   Băng chẵn đảo bên để hai băng liền nhau không đơn điệu.

   ⚠️ Dưới 900px toàn bộ cấu trúc băng TAN RA (xem cuối mục này): ảnh bìa ẩn,
      .prod-band và .prod-grid thành 'display: contents' nên mọi thẻ rơi thẳng
      vào lưới chung .prod-bands — bản điện thoại giữ nguyên lưới 2 cột phẳng
      y như trước khi có băng. */
/* Khoảng trắng không thôi chưa đủ tách bốn nhóm, nên mỗi băng ngăn nhau bằng
   một NÉT KẺ MẢNH — đúng nét site đang dùng ở chân trang và đầu thẻ sản phẩm.
   Kẻ nằm giữa hai khoảng trống bằng nhau (margin trên, padding dưới) thì nó
   mới đọc ra là ranh giới, chứ lệch về một bên thì thành gạch chân của băng trên.

   Dùng gap:0 rồi tự chừa bằng margin/padding — để gap thì khoảng cách cộng
   dồn thêm một lần nữa, hai băng xa nhau gấp đôi ý muốn.

   ⚠️ Cả khối này CHỈ ăn trên máy tính. Dưới 900px .prod-band thành
      'display: contents' nên không sinh ra khung — kẻ, margin, padding đều bị
      bỏ qua; còn gap thì được khai lại ở cuối mục này cho lưới phẳng. */
.prod-bands { display: grid; gap: 0; }
/* Khe giữa hai băng = 24 + kẻ + 24 = 48px. Trước đây 52+52 = 104px, rộng hơn cả
   khe giữa hai MỤC (60px) nên mỗi băng đọc như một mục riêng. Băng là nhóm con
   trong cùng một mục, khe phải nhỏ hơn khe mục mà lớn hơn khe thẻ (24). */
.prod-band { margin-top: var(--s6); }
.prod-band:first-child { margin-top: 0; }
.prod-band {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: var(--s6);
  align-items: stretch;
}
.prod-band--flip { grid-template-columns: 1.14fr .86fr; }
/* Băng của nhóm chỉ có 2 mục: bỏ ảnh bìa, lưới về MỘT cột để dải thẻ chiếm
   trọn bề ngang — hai thẻ bên trong tự chia đôi (xem .prod-grid). */
.prod-band--doi { grid-template-columns: 1fr; }
.prod-band--doi .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .prod-band--doi .prod-grid { grid-template-columns: 1fr; }
}
/* Đảo bằng 'order' chứ không đổi thứ tự HTML: trình đọc màn hình vẫn nghe tên
   nhóm trước rồi mới tới danh sách sản phẩm của nhóm đó. */
.prod-band--flip .prod-cover { order: 2; }

/* Đầu băng — icon tròn + số thứ tự + tên nhóm to + câu trích dẫn. Nằm TRÊN
   băng, không đè lên ảnh bìa (ảnh bìa vẫn phải sạch hoàn toàn, xem ghi chú ở
   .prod-cover ngay dưới). Chiếm cả hai cột, đảo lên đầu ở băng lật ngược. */
.prod-band-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s2);
}
.prod-band--flip .prod-band-head { order: -1; }

.prod-band-ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper-tint);
  color: var(--red);
}
.prod-band-ico .ico { width: 30px; height: 30px; }

.prod-band-title {
  font-size: var(--t-h3);
  letter-spacing: -.02em;
}
.prod-band-num {
  margin-right: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .05em;
  color: var(--g400);
  vertical-align: middle;
}
.prod-band-title + .prod-band-quote { margin-top: var(--s2); }
.prod-band-quote {
  max-width: var(--maxw-text);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--muted);
}

/* Nét ngăn hai băng — dải CMYK mảnh thay cho gạch xám đơn sắc, đúng motif
   ngành in đang dùng ở .cmyk-bar/.cmyk-rail. */
.prod-sep {
  display: flex;
  height: 4px;
  margin: var(--s6) 0;
  border-radius: 2px;
  overflow: hidden;
}
.prod-sep span { flex: 1; }
.prod-sep span:nth-child(1) { background: var(--c); }
.prod-sep span:nth-child(2) { background: var(--m); }
.prod-sep span:nth-child(3) { background: var(--y); }
.prod-sep span:nth-child(4) { background: var(--k); }

/* ---- Ảnh bìa nhóm ----
   23/08: sau nhiều lần thử (chữ trắng đè + gradient tối, chữ trắng + text-
   shadow, chip nền đen + viền đỏ), anh chốt ảnh bìa SẠCH HOÀN TOÀN — không
   chữ, không lớp phủ, không mờ (opacity 1). Số thứ tự, tên nhóm, mô tả, đếm
   nhóm, vạch CMYK đều đã bỏ hẳn khỏi inc/sections/services.php. Tên nhóm vẫn
   còn trong 'alt' của ảnh, không hiện ra mắt. ĐỪNG thêm lại chữ/lớp phủ ở đây
   trừ khi anh yêu cầu lại. */
.prod-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--g900);
  isolation: isolate;
}
.prod-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.prod-cover:hover img { transform: scale(1.05); }

/* ---- Lưới thẻ trong một băng ---- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}
/* Nhóm có SỐ LẺ thẻ (3 mục) thì thẻ cuối nằm trơ một mình, bên cạnh hở một ô
   trống bằng nguyên cái thẻ. Cho nó chiếm trọn hai cột thì hết trống, mà cũng
   thành một điểm nhấn kết nhóm.
   ':last-child:nth-child(odd)' = thẻ cuối VÀ đứng ở vị trí lẻ — đúng ba trường
   hợp 1, 3, 5 thẻ; nhóm 2 hoặc 4 thẻ vốn đã kín nên không dính rule này. */
.prod-grid > .prod-card:last-child:nth-child(odd) { grid-column: span 2; }
/* Thẻ này rộng gấp đôi các thẻ cùng nhóm. Giữ 1:1 như chúng thì ảnh cao
   gấp đôi hàng trên, thẻ lấn hết băng — nên đây là ngoại lệ DUY NHẤT vẫn
   dùng khung ngang. Ảnh vuông vào khung 2:1 bị cắt mạnh, nhưng chủ thể nằm
   giữa nên vẫn đủ nhận ra sản phẩm. */
.prod-grid > .prod-card:last-child:nth-child(odd) .prod-media { aspect-ratio: 2 / 1; }
.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
/* Hover của thẻ sản phẩm dùng chung quy tắc trong components.css
   (mục "HOVER THỐNG NHẤT CHO THẺ") — không định nghĩa riêng ở đây nữa.

   Không làm mờ thẻ chưa có trang con: sản phẩm là hàng NetPrint làm thật,
   làm mờ là tự hạ giá trị. Trạng thái đã nói bằng dòng chữ ở chân thẻ. */

/* ---- Ảnh ----
   Toàn bộ ảnh sản phẩm đều VUÔNG ở gốc (768×768 trên netprint.vn, 1200×1200
   bộ chụp mới). Khung từng là 4:3 nên cắt mất 25% chiều cao mỗi tấm — hộp
   bị xén đỉnh và đáy, túi giấy mất quai. Nay khung đúng 1:1 như ảnh: không
   cắt gì, sản phẩm hiện trọn (anh Phúc chốt 31/08).

   Đổi thì phải đổi ĐỒNG LOẠT cả năm chỗ đặt aspect-ratio cho .prod-media
   trong file này — chúng tồn tại chỉ để mọi thẻ cao bằng nhau; sót một chỗ là
   hàng đó lệch. */
.prod-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.prod-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.prod-card--live:hover .prod-media img { transform: scale(1.045); }

/* Mấy tấm khai báo 'img_pos' đều là ảnh có DẢI ĐỎ chữ in sẵn ở đáy (tag treo,
   in nhanh, thiệp mời). Khung 5:4 đã tự cắt 20% chiều cao, 'img_pos' neo mép
   trên nên phần cắt rơi đúng vào dải đỏ đó. Phóng thêm chút cho ăn chắc.
   ⚠️ Xoá cả rule này lẫn 'img_pos' khi đã chụp lại ảnh nền xám sạch theo các
      TODO ẢNH trong data/services.php. */
/* Ba tấm ảnh trên netprint.vn có dải đỏ chữ in sẵn ở đáy. Hồi khung còn 4:3,
   riêng việc cắt 25% chiều cao đã hất gần hết dải đó ra ngoài, scale 1.06 chỉ
   dọn nốt. Nay khung 1:1 khớp đúng ảnh vuông nên không còn phần thừa nào —
   phải tự phóng đủ mạnh mới đẩy được dải đỏ ra khỏi khung.

   1.16 = cắt ~14% chiều cao, neo mép trên nên phần mất dồn hết xuống đáy —
   đúng chỗ có dải đỏ. Đây vẫn là cách vá: chụp lại ba tấm nền xám sạch
   không chữ rồi bỏ 'img_pos' đi mới là cách đúng. */
.prod-media--crop img { transform: scale(1.16); transform-origin: center top; }
.prod-card--live:hover .prod-media--crop img { transform: scale(1.2); }

/* Khung ảnh của sản phẩm chưa có ảnh thật: lưới chấm nhè nhẹ như giấy can
   nhà in, icon to thả mờ ở giữa. Cốt để nhìn ra là CHỦ Ý, không phải ảnh lỗi. */
.prod-media--blank {
  display: grid;
  place-items: center;
  background-color: var(--paper-sub);
  background-image: radial-gradient(var(--g200) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* Icon đặt trong ô vuông trắng chứ không thả trần: các icon này vốn vẽ cho cỡ
   nhỏ, phóng lên 60px màu nhạt thì thành mảng mờ vô nghĩa. Đóng ô lại vừa đọc
   ra hình, vừa cùng ngôn ngữ khối vuông bo góc với nút ở chân thẻ. */
.prod-blank {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  color: var(--g400);
}
.prod-blank .ico { width: 28px; height: 28px; }

/* ---- Thân thẻ ---- */
/* Không dùng 'gap': đầu thẻ đã có nét kẻ và khoảng đệm riêng, để gap nữa thì
   khoảng cách cộng dồn hai lần. Các khối dưới tự giãn bằng margin-top. */
.prod-body {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  flex: 1;
}
/* Tên sản phẩm chiếm trọn bề ngang, không còn phải né khung icon bên trái.
   Câu tên dài ("Thiết kế bao bì – ấn phẩm") nhờ vậy xuống dòng gọn hơn. */
/* Đầu thẻ "01 BAO BÌ GIẤY" đã bỏ 23/08 (xem inc/sections/services.php) —
   .prod-body không còn 'gap' nội bộ (ghi chú cũ ngay trên), nên tên sản phẩm
   cần margin-top riêng để không dính sát mép ảnh. */
.prod-title {
  margin-top: var(--s1);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: var(--lh-snug);
}

/* Trích dẫn ngắn — chốt đúng 2 dòng ở mọi thẻ (cắt bớt thì thôi, khách còn
   cả trang chi tiết để đọc). Cao bằng nhau thì đáy thẻ của cả hàng thẳng một
   mức, và hàng nút mũi tên tạo thành một đường ngang chạy suốt lưới. */
.prod-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--t-sm) * var(--lh-body) * 2);
  margin-top: var(--s2);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* ---- Lối vào trang chi tiết ----
   Chữ kèm mũi tên chạy thẳng trong mạch nội dung, không còn nút vuông đóng
   khung ở chân thẻ: bỏ được cả khoảng đệm lẫn chiều cao của khối nút, phần
   chữ nhờ vậy thấp hẳn xuống nhường chỗ cho ảnh. Chỉ thẻ đã có trang mới có
   dòng này, nên nó cũng là dấu hiệu duy nhất phân biệt thẻ bấm được. */
.prod-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--red);
}
.prod-cta .ico {
  width: 17px; height: 17px;
  flex: none;
  transition: transform .2s var(--ease);
}
.prod-card--live:hover .prod-cta .ico { transform: translateX(4px); }

/* ---- Dưới 900px: băng tan ra, quay về đúng lưới phẳng như trước ----
   'display: contents' làm .prod-band và .prod-grid biến mất khỏi bố cục, con
   của chúng trở thành con trực tiếp của .prod-bands — nhờ vậy 12 thẻ của 4
   nhóm nằm chung MỘT lưới 2 cột, không còn chia băng. Ảnh bìa ẩn hẳn bằng
   'display: none' vì đây là cả một khối trang trí bỏ khỏi bản mobile. */
@media (max-width: 900px) {
  .prod-bands {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6);
  }
  .prod-band,
  .prod-band--flip,
  .prod-grid { display: contents; }
  .prod-cover,
  .prod-band-head,
  .prod-sep { display: none; }
  /* Trả thẻ cuối của nhóm lẻ về đúng một ô như mọi thẻ khác. Lưới mobile là
     một lưới chung của cả 4 nhóm nên không còn ô trống để phải lấp, mà để nó
     tràn ngang thì bản điện thoại khác hẳn trước — đúng thứ phải giữ nguyên. */
  .prod-grid > .prod-card:last-child:nth-child(odd) { grid-column: auto; }
  /* Trả về 1:1 như khung mặc định — ở đây thẻ đã về một ô như mọi thẻ khác
     nên không còn lý do dùng khung ngang; để khác đi là cao hơn thẻ bên cạnh. */
  .prod-grid > .prod-card:last-child:nth-child(odd) .prod-media { aspect-ratio: 1 / 1; }
}

@media (max-width: 560px) {
  /* ---- Mobile: lưới 2 cột cố định ----
     Giữ hai cột như khổ máy tính bảng thay vì rớt xuống một cột. Một cột thì
     mỗi thẻ rộng bằng màn hình, 12 thẻ nối nhau dài hơn 4500px; hai cột cắt
     đôi chiều dài đó mà vẫn đọc được.

     Thẻ chỉ còn khoảng 150px bề ngang nên mọi thứ bên trong phải thu lại theo,
     giữ nguyên cỡ của bản máy tính là chữ tràn và vỡ khung. */
  .prod-bands { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }

  .prod-media { aspect-ratio: 1 / 1; }
  /* Thẻ cuối nhóm lẻ: rule ở khối 900px đặc hiệu hơn nên thắng dòng trên,
     làm 2 thẻ cao hơn 10 thẻ còn lại — hàng 4 và 5 lệch nhau. Ghi đè lại. */
  .prod-grid > .prod-card:last-child:nth-child(odd) .prod-media { aspect-ratio: 1 / 1; }
  .prod-body { padding: var(--s3); }

  /* Giãn ly hẹp lại: 0.14em ở cột hẹp làm "BAO BÌ GIẤY" dài quá một dòng */
  .prod-cat { font-size: var(--t-tag); letter-spacing: .08em; }
  .prod-num { font-size: var(--t-tag); }

  .prod-title { font-size: var(--t-sm); }

  .prod-desc {
    font-size: var(--t-label);
    /* Khai lại chiều cao tối thiểu theo đúng cỡ chữ mới, nếu không nó vẫn tính
       theo --t-sm của bản máy tính và chừa dư một khoảng trống thừa. */
    min-height: calc(var(--t-label) * var(--lh-body) * 2);
  }

  .prod-cta { margin-top: var(--s2); font-size: var(--t-label); }
  .prod-cta .ico { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------- Form báo giá thông minh */

/* Mỗi bước quy cách là một dòng gọn, bấm mở popup để chọn */
.qf-rows {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: visible;
  margin-bottom: var(--s3);
}
.qf-row { position: relative; border-bottom: 1px solid var(--line); }
.qf-row:last-child { border-bottom: 0; }
.qf-row[hidden] { display: none; }

.qf-toggle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 12px var(--s4);
  background: transparent;
  border: 0;
  text-align: left;
  transition: background .15s var(--ease);
}
.qf-toggle:hover { background: var(--paper-sub); }

.qf-n {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  flex: none;
}
.qf-label {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  flex: none;
  min-width: 88px;
}
/* Giá trị đang chọn — xám khi chưa chọn, đỏ đậm khi đã có */
.qf-val {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--g400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qf-val.is-set { color: var(--red); font-weight: var(--w-semibold); }
.qf-caret { width: 17px; height: 17px; color: var(--g400); flex: none; transition: transform .2s var(--ease); }
.qf-toggle[aria-expanded="true"] .qf-caret { transform: rotate(180deg); }

/* Bảng chọn nổi lên trên, không đẩy form dài ra */
.qf-pop {
  position: absolute;
  top: calc(100% - 1px);
  left: 0; right: 0;
  z-index: 30;
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.qf-pop[hidden] { display: none; }

/* Dòng số lượng nhập thẳng, không cần popup */
.qf-row--input {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s4);
}
.qf-inline {
  flex: 1;
  min-height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: var(--t-sm);
}
.qf-inline:focus { box-shadow: none; }

.qf-note { min-height: 68px; margin-bottom: var(--s4); }

/* ---- Gửi kèm file ----
   Cả khối là một nhãn lớn bấm được: ô chọn file thật nằm bên trong nhưng ẩn đi,
   vì nút "Choose File" mặc định của trình duyệt mỗi hệ điều hành một kiểu và
   không chỉnh được theo giao diện trang. */
.qf-file { margin-bottom: var(--s4); }
.qf-file-pick {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-sub);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.qf-file-pick:hover { border-color: var(--red); background: var(--red-subtle); }
/* Bàn phím Tab tới ô file thì viền sáng lên — ô thật ẩn nên không tự có viền */
.qf-file-pick:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--focus-ring); }
.qf-file-pick > .ico { width: 22px; height: 22px; color: var(--red); flex: none; }
.qf-file-pick b { display: block; font-size: var(--t-sm); color: var(--ink); }
.qf-file-pick input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qf-file-list {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-label);
  color: var(--muted);
}
.qf-file-list li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.qf-file-list li:last-child { border-bottom: 0; }
/* File vượt mức: đỏ để khách thấy ngay chứ không đợi bấm gửi mới biết */
.qf-file-list li.is-qua { color: var(--red); font-weight: var(--w-semibold); }
.qf-file-note { margin-top: var(--s2); }
.qf-contact { margin-top: 0; }
/* g500 chứ không g400: chữ 13px màu g400 trên nền trắng chỉ đạt tương phản ~2.9:1,
   dưới mức đọc được 4.5:1 — khách lớn tuổi nhìn không ra chữ "không bắt buộc". */

/* Chip chọn trong popup */
.q-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.q-chip { position: relative; cursor: pointer; }
.q-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.q-chip span {
  display: block;
  padding: 8px var(--s3);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--g600);
  transition: all .16s var(--ease);
}
.q-chip:hover span { border-color: var(--g400); color: var(--ink); }
.q-chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.q-chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Ô nhập kích thước Dài × Rộng × Cao */
.q-dims { display: flex; align-items: flex-end; gap: var(--s2); }
.q-dims label { flex: 1; min-width: 0; display: grid; gap: 5px; font-size: var(--t-xs); color: var(--g600); }
.q-dims .input { text-align: center; }
.q-x { padding-bottom: 14px; color: var(--g400); font-weight: var(--w-bold); flex: none; }
.q-pages { display: grid; gap: 5px; margin-top: var(--s3); font-size: var(--t-xs); color: var(--g600); }

@media (max-width: 420px) {
  .qf-label { min-width: 72px; }
  .q-dims { flex-wrap: wrap; }
  .q-dims label { flex: 1 1 40%; }
  .q-x { display: none; }
}

/* ---------------------------------------------------------------- Khối tài khoản ngân hàng
   Thứ khách vào trang thanh toán để tìm, nên cho lên đầu và làm nền tối để
   tách hẳn khỏi phần chữ giải thích bên dưới. Dãy số dùng font mono, giãn chữ
   rộng ra cho dễ đọc và dễ đối chiếu từng chữ số. */
.bank-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: rgba(255, 255, 255, .8);
}
/* Chưa có ảnh QR thì thu bề ngang lại, để thẻ không thành một dải trống bên phải */
.bank-card--noqr { grid-template-columns: 1fr; max-width: 720px; }
.bank-cmyk { position: absolute; top: 0; left: 0; width: 180px; }

.bank-main { display: grid; gap: var(--s5); }
.bank-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .7);
}
.bank-logo {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  padding: 5px 10px;
  background: #fff;
  border-radius: var(--r-sm);
  font-size: var(--t-label);
  font-weight: var(--w-black);
  letter-spacing: .04em;
  color: var(--ink);
}

.bank-row { display: grid; gap: 5px; }
.bank-label {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.bank-row > b { color: #fff; font-size: var(--t-lead); font-weight: var(--w-bold); line-height: 1.35; }
.bank-hint { font-size: var(--t-sm); color: rgba(255, 255, 255, .6); line-height: 1.5; }

.bank-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.bank-acc b {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: var(--w-black);
  letter-spacing: .04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bank-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s4);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: #fff;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.bank-copy .ico { width: 16px; height: 16px; }
.bank-copy:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
/* Trạng thái đã chép: đổi hẳn sang đỏ thương hiệu để mắt bắt được ngay */
.bank-copy.is-done {
  background: var(--red);
  border-color: var(--red);
}

.bank-qr { display: grid; justify-items: center; gap: var(--s3); }
.bank-qr img {
  width: clamp(150px, 20vw, 200px);
  height: auto;
  padding: var(--s3);
  background: #fff;
  border-radius: var(--r-md);
}
.bank-qr span { font-size: var(--t-label); color: rgba(255, 255, 255, .6); }

/* Cảnh báo lừa đảo — nhà in hay bị giả mạo đúng ở khâu chuyển khoản */
.bank-warn {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  max-width: var(--maxw-text);
  margin-top: var(--s5);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}
.bank-warn .ico { width: 20px; height: 20px; color: var(--red); flex: none; margin-top: 2px; }
.bank-warn b { color: var(--ink); }

@media (max-width: 760px) {
  .bank-card { grid-template-columns: 1fr; }
  .bank-qr { justify-items: start; }
}

/* ================================================================
   MÁY TÍNH GIÁ TEM NHÃN  (#tinh-gia)
   Chỉ dùng ở /in-tem-nhan-dan/. Hai cột: nhập | kết quả.
   Cột kết quả DÍNH khi cuộn trên máy tính — khách đổi thông số ở
   cột trái vẫn thấy số tiền đổi theo, không phải cuộn lên xuống.
   ================================================================ */
.tg-box {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* ---------------------------------------------------------- Cột nhập */
.tg-form { display: grid; gap: var(--s6); align-content: start; }
.tg-field { display: grid; gap: var(--s3); }
.tg-label {
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Ô số: nhãn đơn vị nằm bên phải trong khung, không thành dòng riêng */
.tg-num {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease);
}
.tg-num:focus-within { border-color: var(--red); }
.tg-num input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  color: var(--ink);
  outline: none;
}
.tg-num span { font-size: var(--t-label); color: var(--muted); white-space: nowrap; }
.tg-num--wide { max-width: 200px; }

.tg-pair { display: flex; align-items: center; gap: var(--s2); }
.tg-pair .tg-num { flex: 1 1 0; min-width: 0; }
.tg-pair i { font-style: normal; color: var(--muted); flex: none; }

/* Nút số lượng bấm nhanh */
.tg-quick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tg-q {
  padding: 5px var(--s3);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--muted);
  background: var(--paper-sub);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: all .2s var(--ease);
}
.tg-q:hover { color: var(--ink); border-color: var(--ink); }

/* Chip chất liệu — 2 cột, mỗi chip có tên + dòng gợi ý dùng khi nào */
.tg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.tg-chips--row { display: flex; flex-wrap: wrap; }
.tg-chip { cursor: pointer; }
.tg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tg-chip > span {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 10px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all .2s var(--ease);
}
.tg-chip b { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); }
.tg-chip small { font-size: var(--t-tag); line-height: 1.35; color: var(--muted); }
.tg-chip:hover > span { border-color: var(--ink); }
.tg-chip input:checked + span {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 5%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--red);
}
.tg-chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.tg-chip--sm > span { padding: 7px var(--s4); }

.tg-hint { display: flex; gap: var(--s2); align-items: center; color: var(--muted); }
.tg-hint .ico { width: 15px; height: 15px; flex: none; }
.tg-hint a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------- Cột kết quả */
.tg-out {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  align-self: start;
  display: grid;
  gap: var(--s4);
  padding: clamp(18px, 2vw, 24px);
  background: var(--g900);
  border-radius: var(--r-md);
  color: #fff;
}
.tg-rows { display: grid; gap: var(--s2); }
.tg-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .62);
}
.tg-rows b { color: #fff; font-weight: var(--w-semibold); }

.tg-total {
  display: grid;
  gap: 2px;
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.tg-total-label {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
}
.tg-total-num {
  font-size: var(--t-stat);
  font-weight: var(--w-black);
  letter-spacing: -.02em;
  color: #fff;
}

.tg-actions { display: grid; gap: var(--s2); }
.tg-actions .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: none;
}
.tg-actions .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Bản thay thế khi số lượng vượt ngưỡng in nhanh */
.tg-offset { display: grid; gap: var(--s3); justify-items: start; }
.tg-offset .ico { width: 26px; height: 26px; color: var(--red); }
.tg-offset b { font-size: var(--t-h4); color: #fff; }
.tg-offset p { color: rgba(255, 255, 255, .68); }
.tg-offset .btn { width: 100%; }

.tg-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
}
.tg-note .ico { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.tg-note b { color: rgba(255, 255, 255, .8); }

@media (max-width: 900px) {
  /* Một cột: cột kết quả xuống dưới cột nhập và THÔI dính — trên màn hẹp
     khối dính chiếm gần hết màn hình, che mất phần đang nhập. */
  .tg-box { grid-template-columns: minmax(0, 1fr); }
  .tg-out { position: static; }
}

@media (max-width: 480px) {
  /* Chip chất liệu về 1 cột: hai cột ở màn 360px chỉ còn ~140px mỗi ô,
     dòng gợi ý "Chống nước, chai lọ – tủ mát" bị vỡ thành 3 dòng. */
  .tg-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   CÔNG NGHỆ IN — HAI CỤM LỚN  (#cong-nghe)
   Mỗi cụm: trái video + nội dung │ phải công cụ (máy tính giá /
   dải gia công). Hai cụm cùng tỉ lệ cột và cùng nhịp đệm nên nhìn
   cân nhau, dù ruột cột phải khác hẳn nhau.
   ================================================================ */
.cn-cum {
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
/* Hai cụm công nghệ nằm NGANG một hàng, cao bằng nhau (đổi 29/08 — trước xếp
   dọc, mỗi cụm có một video chưa quay nên phần này dài gần hai màn hình).
   Dưới 900px về một cột: hai cụm cạnh nhau trên màn hẹp thì mỗi cụm chỉ còn
   ~160px, danh sách gạch đầu dòng vỡ hết. */
.cn-doi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: stretch;
}
@media (max-width: 900px) {
  .cn-doi { grid-template-columns: 1fr; }
}
/* Cụm trong lưới không cần khoảng cách dọc nữa — gap của lưới lo rồi. */
.cn-doi > .cn-cum + .cn-cum { margin-top: 0; }
.cn-cum + .cn-cum { margin-top: var(--s6); }
/* Cụm offset để nền xám nhạt — phân biệt hai nhánh mà không phá nhịp trang */
.cn-cum--offset { background: var(--paper-sub); }

.cn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.cn-head h3 { font-size: var(--t-h3); margin: 0; }

/* Huy hiệu máy in nhanh — chỉ cụm 1 dùng, cụm offset không có */
.cn-badge {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}
.cn-badge svg { width: 24px; height: 24px; }
.cn-badge--dark { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.cn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3);
  font-size: var(--t-tag);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-radius: var(--r-pill);
  order: -1;                       /* nhãn đứng trước tiêu đề */
  flex: none;
}
.cn-tag .ico { width: 15px; height: 15px; }
.cn-tag--dark { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Hai cột — tỉ lệ giống nhau ở CẢ HAI cụm để chúng cân nhau */
/* align-items: stretch (mặc định) — KHÔNG đổi thành start. Hai cột phải cao
   bằng nhau thì khối video bên trái mới giãn ra lấp phần chênh lệch. */
.cn-body {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 2.4vw, 32px);
}
/* Bố cục DỌC (31/08): video trên, chữ dưới, dải gia công dưới cùng.
   Hai cụm công nghệ đứng cạnh nhau nên mỗi cụm chỉ rộng nửa trang — chia đôi
   tiếp thành hai cột chữ|video thì cả ảnh lẫn chữ đều bị bóp. */
.cn-body--doc { grid-template-columns: 1fr; gap: var(--s5); }
/* Khung video trong bố cục dọc: trả lại tỉ lệ cố định. Ở bố cục hai cột cũ nó
   phải giãn cao theo cột bên cạnh nên bị bỏ aspect-ratio; giờ đứng một mình thì
   để 16:10 cho khung không cao lêu nghêu. */
.cn-body--doc .cn-video { flex: none; }
.cn-body--doc .cn-video .video { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
/* Cột chữ hết là flex dọc giãn — trong bố cục này nó chỉ là một khối bình thường. */
.cn-body--doc .cn-left { display: grid; gap: var(--s4); align-content: start; }

/* ---------------------------------------------------------- Cột trái */
/* Cột trái là flex dọc, khối video để 'flex: 1' nên nó NUỐT hết phần chiều
   cao thừa — cột trái luôn cao đúng bằng cột phải, dù cột phải là máy tính
   giá (cụm 1) hay dải bốn ô gia công (cụm 2). Nhờ vậy hai cụm cân nhau mà
   không phải canh tay chiều cao cho từng cụm. */
.cn-left { display: flex; flex-direction: column; gap: var(--s4); }
.cn-video { flex: 1 1 auto; min-height: 0; }
/* Bỏ tỉ lệ cố định của .video để khung ăn theo chiều cao hàng.
   min-height là mức sàn phòng khi cột phải ngắn bất thường. */
.cn-video .video { height: 100%; aspect-ratio: auto; min-height: 260px; }
.cn-desc { font-size: var(--t-body); color: var(--g600); line-height: 1.6; }
.cn-points { display: grid; gap: var(--s2); }
.cn-cta { align-self: start; margin-top: var(--s1); }

/* --------------------------------------------------------- Cột phải */
.cn-right {
  /* Đệm khai bằng biến để "phiếu tạm tính" trong máy tính giá tràn được
     hai mép thẻ bằng margin âm cùng trị số — đổi đệm ở đây là phiếu tự khớp. */
  --pad: clamp(16px, 2vw, 22px);
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
/* ---- Máy tính giá — 5 dòng thu gọn, mỗi dòng mở popup ------------- */
/* Ghi đè TOÀN BỘ bản nền tối ở khối "MÁY TÍNH GIÁ TEM NHÃN" phía trên:
   khối này để nền sáng, chỉ số tiền là đỏ. Bố cục dòng mượn nguyên bộ
   .qf-* của form báo giá nên ở đây chỉ chỉnh vài chỗ cho vừa cột hẹp. */
/* Lưới 2 cột: hàng đầu là hai ô kích thước, bốn ô chọn xếp 2×2 bên dưới.
   MỌI Ô CÙNG MỘT KIỂU "nhãn nổi trên viền" như ô Dài/Rộng: khung riêng bo
   góc, nhãn đè lên nét viền, icon đỏ đầu ô, viền + nhãn đỏ khi mở/đang gõ. */
.cn-tinhgia .tg-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--s3);              /* khe dọc ≥ 16px: nhãn nổi 13px ngồi ở -9px cần chỗ */
  margin-bottom: 0;
  border: 0;                        /* bỏ khung chung của .qf-rows gốc */
  border-radius: 0;
  overflow: visible;                /* popup phải thò ra ngoài được */
}
.cn-tinhgia .tg-row-size { grid-column: 1 / -1; padding: 0; border-bottom: 0; }

/* Bốn ô chọn: mỗi ô một khung như .tg-dim */
.cn-tinhgia .qf-row[data-row] {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);   /* thắng .qf-row gốc */
  transition: border-color .2s var(--ease);
}
.cn-tinhgia .qf-row[data-row]:hover,
.cn-tinhgia .qf-row[data-row]:focus-within,
.cn-tinhgia .qf-row[data-row]:has(.qf-toggle[aria-expanded="true"]) { border-color: var(--red); }

/* Nhãn dòng ngồi trên nét viền, y hệt nhãn Dài/Rộng */
.cn-tinhgia .qf-row[data-row] .qf-label {
  position: absolute;
  top: -9px; left: 10px;              /* cỡ nhãn 13px như .tg-dim em */
  z-index: 1;
  min-width: 0;
  padding: 0 5px;
  background: var(--paper);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  color: var(--muted);
  transition: color .2s var(--ease);
}
.cn-tinhgia .qf-row[data-row]:hover .qf-label,
.cn-tinhgia .qf-row[data-row]:focus-within .qf-label,
.cn-tinhgia .qf-row[data-row]:has(.qf-toggle[aria-expanded="true"]) .qf-label { color: var(--red); }

.cn-tinhgia .qf-toggle { padding: 11px var(--s3); gap: var(--s2); border-radius: var(--r-md); }
.cn-tinhgia .qf-toggle:hover { background: none; }   /* hiệu ứng đã nằm ở viền */
.cn-tinhgia .qf-val { font-size: var(--t-sm); text-align: right; }
.cn-tinhgia .qf-val.is-set { color: var(--ink); font-weight: var(--w-semibold); }  /* đỏ để dành cho số tiền */

/* Popup rộng hơn ô chứa nó (ô chỉ còn nửa cột), và mở về phía có chỗ:
   ô cột trái đổ sang phải, ô cột phải đổ sang trái — không tràn khỏi khối.
   top đổi 100%-1px → 100%+4px vì các ô giờ rời nhau, cần hở một khe nhỏ. */
.cn-tinhgia .qf-pop { min-width: 268px; top: calc(100% + 4px); }
.cn-tinhgia [data-row="mat"] .qf-pop,
.cn-tinhgia [data-row="be"]  .qf-pop { left: 0; right: auto; }
.cn-tinhgia [data-row="lam"] .qf-pop,
.cn-tinhgia [data-row="qty"] .qf-pop { left: auto; right: 0; }

/* Icon đầu ô: trần, màu đỏ, cùng cỡ icon thước của ô kích thước */
.cn-tinhgia .qf-n {
  width: auto; height: auto;
  background: none;
  color: var(--red);
}
.cn-tinhgia .qf-n .ico { width: 17px; height: 17px; }

/* Ô nhập kích thước kiểu "nhãn nổi trên viền":
   nhãn Dài/Rộng đè lên nét viền trên, icon thước đứng đầu ô, đơn vị cuối ô.
   Cả ô là một <label> nên bấm chỗ nào trong ô cũng nhảy vào ô nhập. */
.tg-dims { display: flex; gap: var(--s3); flex: 1; min-width: 0; }
.tg-dim {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 0;
  min-width: 0;
  padding: 11px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: text;
  transition: border-color .2s var(--ease);
}
.tg-dim:focus-within { border-color: var(--red); }

/* Nhãn ngồi trên nét viền — nền paper che nét viền phía sau chữ */
/* Nhãn 13px (--t-label) chứ không phải 11px — anh Phúc chốt 25/08 cho dễ đọc.
   top nới -9px theo cỡ chữ mới để nhãn vẫn cưỡi đúng giữa nét viền. */
.tg-dim em {
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 0 5px;
  background: var(--paper);
  font-style: normal;
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  color: var(--muted);
  transition: color .2s var(--ease);
}
.tg-dim:focus-within em { color: var(--red); }

.tg-dim-ico { width: 17px; height: 17px; flex: none; color: var(--red); }

.tg-dim input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  color: var(--ink);
  text-align: right;
  outline: none;
}
/* Ẩn nút tăng/giảm mặc định — chúng chiếm chỗ và đẩy chữ đơn vị lệch đi */
.tg-dim input::-webkit-outer-spin-button,
.tg-dim input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tg-dim input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.tg-dim b {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--muted);
  flex: none;
}

/* Danh sách lựa chọn trong popup — chấm tròn + tên + dòng gợi ý */
.tg-opts { display: grid; gap: 2px; }
.tg-opt { display: block; cursor: pointer; }
.tg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tg-opt-body {
  display: grid;
  gap: 1px;
  padding: 8px var(--s3) 8px 30px;
  position: relative;
  border-radius: var(--r-sm);
  transition: background .15s var(--ease);
}
/* Chấm tròn tự vẽ — không cần thêm icon */
.tg-opt-body::before {
  content: '';
  position: absolute;
  left: var(--s3); top: 12px;
  width: 12px; height: 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: all .15s var(--ease);
}
.tg-opt:hover .tg-opt-body { background: var(--paper-sub); }
.tg-opt input:checked + .tg-opt-body::before {
  border-color: var(--red);
  border-width: 4px;
}
.tg-opt input:focus-visible + .tg-opt-body { outline: 2px solid var(--red); outline-offset: 1px; }
.tg-opt b { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); }
.tg-opt input:checked + .tg-opt-body b { color: var(--red); }
.tg-opt small { font-size: var(--t-tag); line-height: 1.35; color: var(--muted); }

/* Popup số lượng: dải nút gợi ý, gạch phân cách, rồi ô tự điền */
.cn-tinhgia .tg-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-or {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0;
  font-size: var(--t-tag);
  color: var(--muted);
}
.tg-or::before, .tg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---- Bảng kết quả: NỀN SÁNG, chỉ số tiền là đỏ ------------------- */
.cn-tinhgia .tg-out {
  position: static;
  display: block;
  padding: 0;
  margin-top: var(--s4);
  background: none;                 /* bỏ hẳn nền tối của bản cũ */
  border-top: 0;                    /* đường xé .tg-tear thay cho kẻ ngang */
  border-radius: 0;
  color: inherit;
}
/* ---- Phương án A: kết quả kiểu PHIẾU TẠM TÍNH của xưởng in ---------- */

/* Đầu khối: thanh CMYK + tiêu đề + câu dẫn */
.tg-head { display: grid; gap: 3px; }
.tg-head .cmyk-bar { margin-bottom: var(--s1); }
.tg-head b {
  font-size: var(--t-h4);          /* 19px — nâng từ 15px cho tiêu đề đứng vững */
  font-weight: var(--w-black);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Phần "(Decal / Tem nhãn)" trong tiêu đề: cùng hàng nhưng nhẹ hơn một bậc
   để "TÍNH GIÁ IN NHANH" vẫn là cụm đập vào mắt trước. */
.tg-head-sub { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--muted); }
.tg-head small { font-size: var(--t-label); color: var(--muted); }

/* Đường xé răng cưa nối khối nhập với phiếu — hai dải tam giác úp nhau,
   màu trùng nền phiếu (paper-sub) nên nhìn như mép giấy bị xé. */
.tg-tear {
  height: 10px;
  margin: 0 calc(-1 * var(--pad));
  background:
    linear-gradient(-45deg, transparent 70%, var(--paper-sub) 70%) 0 0 / 12px 10px repeat-x,
    linear-gradient(45deg,  transparent 70%, var(--paper-sub) 70%) 0 0 / 12px 10px repeat-x;
}
.tg-slip {
  margin: 0 calc(-1 * var(--pad));
  padding: var(--s4) var(--pad) var(--s5);
  background: var(--paper-sub);
}
.tg-slip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--line-strong);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tg-spec {
  margin-top: var(--s3);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--g600);
}
.tg-qtyline {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.tg-qtyline b { font-weight: var(--w-semibold); color: var(--ink); }
.tg-qtyline span { color: var(--g600); }
.tg-dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }

.tg-slip-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
}
.tg-slip-total em {
  font-style: normal;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Tổng tiền đóng khung đỏ xoay nhẹ — cảm giác con mộc đóng lên phiếu */
.tg-stamp {
  padding: 5px 13px;
  border: 2px solid var(--red);
  border-radius: var(--r-sm);
  color: var(--red);
  font-size: var(--t-h4);
  font-weight: var(--w-black);
  letter-spacing: -.02em;
  transform: rotate(-1.5deg);
}

/* Nút phụ là DÒNG CHỮ, không phải nút to thứ hai — nhẹ và sang hơn */
.tg-sendlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s2);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  cursor: pointer;
}
.tg-sendlink:hover { color: var(--red); }
.tg-sendlink .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.tg-sendlink:hover .ico { transform: translateX(3px); }
.cn-tinhgia .tg-actions { display: grid; gap: var(--s1); margin-top: var(--s4); justify-items: stretch; }
.cn-tinhgia .tg-sendlink { justify-self: center; }

.cn-tinhgia .tg-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  margin-top: var(--s3);
  line-height: 1.5;
  color: var(--muted);
}
.cn-tinhgia .tg-note .ico { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--g400); }
.cn-tinhgia .tg-note b { color: var(--ink); }

@media (max-width: 900px) {
  /* Một cột: video lên trên, công cụ xuống dưới — thứ tự đọc tự nhiên */
  .cn-body { grid-template-columns: minmax(0, 1fr); }
  /* Một cột thì không còn cột nào để canh bằng — trả khung video về tỉ lệ cố
     định, nếu không nó giãn cao lêu nghêu chiếm gần hết màn hình. Dùng 3:2
     cho đỡ dẹt trên màn hẹp, giống cách .nl-media làm ở trang chủ. */
  .cn-video { flex: 0 0 auto; }
  .cn-video .video { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
}

@media (max-width: 420px) {
  /* Màn rất hẹp: bốn ô chọn về MỘT cột — hai cột ở đây mỗi ô chỉ còn
     ~140px, giá trị "Bế theo hình logo" không đủ chỗ. Hai ô kích thước
     vẫn đứng cạnh nhau được vì ruột chúng ngắn. Popup trả về đúng bề
     ngang ô, không lệch trái phải. (Nhãn nổi là absolute nên tự theo ô,
     không cần chỉnh gì thêm.) */
  .cn-tinhgia .tg-rows { grid-template-columns: minmax(0, 1fr); }
  .cn-tinhgia .qf-pop { min-width: 0; left: 0; right: 0; }
  .tg-dim { padding: 10px var(--s2); }
}

/* ================================================================
   CHẤT LIỆU DECAL  (#chat-lieu) — dải cuộn một hàng, 3 thẻ mỗi màn
   Dùng lại toàn bộ cơ chế .hs (nút cuộn, thanh đếm nằm trong main.js),
   chỉ đổi số thẻ mỗi màn và ruột thẻ. Ảnh ĐỂ SẠCH, không lớp phủ.
   ================================================================ */
.hs--cl .hs-track { --hs-cols: 3; }
@media (max-width: 1080px) { .hs--cl .hs-track { --hs-cols: 2; } }
@media (max-width: 700px)  { .hs--cl .hs-track { --hs-cols: 1; } }

.cl-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* ------------------------------------------------------------- Ảnh */
.cl-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  background: var(--g100);
  overflow: hidden;
  cursor: zoom-in;
}
.cl-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.cl-card:hover .cl-media img { transform: scale(1.04); }

/* Số thứ tự — huy hiệu nền trắng ở góc, KHÔNG phủ gradient lên ảnh */
.cl-stt {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 2;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .93);
  border-radius: var(--r-sm);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  color: var(--ink);
}

.cl-zoom {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: rgba(255, 255, 255, .93);
  border-radius: var(--r-sm);
  color: var(--ink);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.cl-card:hover .cl-zoom { opacity: 1; }
.cl-zoom .ico { width: 16px; height: 16px; }

/* Ô thay ảnh khi chất liệu chưa chụp được mẫu thật */
.cl-media--soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s2);
  background: var(--paper-sub);
  border-bottom: 1px dashed var(--line-strong);
  cursor: default;
}
.cl-media--soon > .ico { width: 40px; height: 40px; color: var(--g300, #CBD5E1); }
.cl-soon-txt { font-size: var(--t-label); font-weight: var(--w-semibold); color: var(--muted); }

/* ---------------------------------------------------------- Thân thẻ */
/* Thân thẻ giãn hết chiều cao còn lại của thẻ (thẻ là flex cột), để dải chip
   "HỢP VỚI" luôn nằm sát ĐÁY — xem .cl-hop bên dưới. Trước 29/08 nội dung dồn
   lên trên nên bài dài ngắn khác nhau là dải chip mỗi thẻ một cao độ, nhìn so
   le hẳn khi ba thẻ đứng cạnh nhau. */
.cl-body {
  flex: 1;
  /* flex cột chứ không phải grid: grid có align-content dồn mọi hàng lên trên,
     nên margin-top:auto của .cl-hop không đẩy được nó xuống đáy. */
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
}
.cl-body h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
}
.cl-body h3 .ico { width: 19px; height: 19px; color: var(--red); flex: none; }

.cl-sum {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  padding-left: var(--s3);
  border-left: 2px solid var(--red);
}
.cl-bai { font-size: var(--t-sm); line-height: 1.62; color: var(--g600); }
.cl-bai b { color: var(--ink); font-weight: var(--w-semibold); }

/* Ngành hàng — chip viên thuốc, gộp từ mục "Ngành hàng" cũ đã bỏ */
.cl-hop {
  display: grid;
  gap: var(--s2);
  /* auto: đẩy dải chip xuống sát đáy thẻ, mọi thẻ trong hàng ngang bằng nhau
     bất kể bài dài ngắn thế nào. */
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.cl-hop b {
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip {
  padding: 4px 10px;
  font-size: var(--t-tag);
  font-weight: var(--w-medium);
  color: var(--ink);
  background: var(--paper-sub);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}