/* ============================================================
   Vinpack — page-nangluc.css
   CSS RIÊNG CỦA trang "Năng lực doanh nghiệp". Chỉ nạp khi
   is_page_template( 'page-templates/nang-luc-doanh-nghiep.php' ).

   NẠP SAU global.css VÀ layout.css. inc/enqueue.php khai vinpack-global và
   vinpack-layout làm dependency của vinpack-nangluc (style), nên thứ tự nguồn
   cố định là global → layout → page-nangluc. Vài rule ở đây hoà độ ưu tiên
   với global.css rồi thắng bằng thứ tự nguồn — cùng khuôn home.css.

   BA LUẬT CỦA FILE NÀY — tests/test-css-cascade.php canh cả ba:

   1. KHÔNG khai custom property nào. Token thuộc về theme.json và global.css.
   2. KHÔNG dùng !important.
   3. KHÔNG khai `outline` ở bất kỳ đâu. Vòng focus của mục 10 global.css ở
      (0,1,0); một `X:focus{outline:none}` là (0,1,1) và nuốt trọn nó — lỗi
      đắt nhất của Phase A, không được lặp lại.

   VỀ TOKEN KHOẢNG CÁCH: mockup dùng nhiều số không khớp thang --sp-*
   (64/44/56/22/26/44...). Nhịp SECTION lặp lại trên cả mười khối
   (`.nl-sec{padding-block:64px}`) dùng calc() từ token (`--sp-6 * 2`) vì đây
   là một quyết định nhịp trang, không phải chi tiết một thành phần. Các số đo
   THÀNH PHẦN một-lần (đường kính icon, bán kính bo góc không khớp thang,
   cỡ chữ, tỉ lệ ảnh) giữ nguyên literal — đúng tiền lệ home.css đã làm cho
   `.partner-logo{height:46px}`. Bo góc dùng đúng bậc --r-* đã có khi khớp;
   không khớp thì giữ literal (--r-xl là bậc CUỐI của thang, không có bậc nào
   cho 22-24px).

   VỀ `[hidden]`: `.nl-slide[hidden]`, `.nl-dots[hidden]`,
   `.nl-cert-lightbox-backdrop[hidden]` và `.cm-detail[hidden]` đều dựa vào
   UA mặc định `[hidden]{display:none}`. File này KHÔNG đặt display vô điều
   kiện lên bất kỳ phần tử nào trong bốn nhóm đó — mọi rule chạm display của
   chúng đều đi qua `:not([hidden])` tường minh.

   VỀ SECTION NỀN MÀU: `.nl-sec-alt` (stats, machinery, certs, commitments) là
   `<section class="nl-sec nl-sec-alt">` — bản thân section KHÔNG mang class
   `wrap`, `.wrap` là MỘT `<div>` CON bên trong. Khác home.css (nơi section
   VÀ .wrap là CÙNG một thẻ, `<section class="X wrap">`, buộc phải bù đắp
   padding bằng calc), ở đây section không có `max-width` nào để bỏ — nó vốn
   đã rộng hết `<main>` ngay từ đầu, `.wrap` con lo phần giới hạn 1180px. Đặt
   `background` thẳng lên `.nl-sec-alt` là đủ để nó tràn hết chiều ngang mà
   không cần luật "bỏ max-width, bù padding" như mục 1 home.css.

   VỀ TRANSFORM TRÊN `.nl-cert` — LỆCH CHỦ Ý SO VỚI MOCKUP. Mockup nâng cả thẻ
   `.nl-cert:hover{transform:translateY(-6px)}`. `.nl-cert-lightbox` của thẻ đó
   là `position:fixed`, và một tổ tiên mang `transform` biến chính tổ tiên đó
   thành khối chứa cho MỌI hậu duệ `position:fixed` — lightbox sẽ định vị theo
   hộp thẻ đang bị đẩy lên, không phải theo khung nhìn, ĐÚNG lúc thẻ đang được
   di (hover) để bấm nút "Xem chứng nhận". File này bỏ hẳn transform trên
   `.nl-cert:hover`, chỉ giữ hiệu ứng phóng ảnh (`.nl-cert-img img{transform:
   scale()}` — transform nằm trên chính `<img>`, không phải tổ tiên của
   lightbox, nên không tạo khối chứa nào cả) và đổi bóng làm dấu hiệu hover.
   ============================================================ */

/* ============================================================
   0. Breadcrumb — DÙNG CHUNG vinpack_breadcrumb(), style ở ĐÂY vì hiện tại
   CHỈ trang này gọi hàm đó (banner.php, Task 2). Một trang sau dùng lại
   breadcrumb sẽ cần chuyển khối này sang layout.css hoặc chép một bản —
   quyết định đó thuộc về task đó, không phải Task 7.
   ============================================================ */
.crumb{ font-size:13px; color:var(--on-navy-text); margin-bottom:var(--sp-4); letter-spacing:.3px; }
.crumb a{ color:var(--on-navy-text); }
.crumb a:hover{ color:var(--white); }

/* ============================================================
   1. Banner
   ============================================================ */
/*
 * SỬA (28/08/2026, khách yêu cầu "làm layout banner, breadcrumb vs title
 * giống trang product cat") — bỏ hẳn khối MỘT PHẦN nền navy gradient +
 * vòng tròn trang trí `::after` (padding 56/60px, `.nl-banner p` đoạn dẫn),
 * đổi sang khuôn HAI PHẦN của `.cat-hero`/`.cat-hero-img`/`.cat-hero-info`
 * (taxonomy-vp_product_cat.php + assets/css/taxonomy-danhmuc.css) — dải
 * ảnh 2640×500 (fallback gradient navy khi field `banner_image` trống) rồi
 * xuống khối info NỀN TRẮNG. `.nl-banner` (section ngoài cùng) không còn
 * cần nền/padding/overflow riêng — hai khối con tự lo layout của mình,
 * cùng cách `.cat-hero{padding:0}` đã làm.
 */
.nl-banner{ padding:0; }
/*
 * SỬA 05/09/2026 (khách chốt kích thước ảnh banner): desktop 1920x425
 * (aspect-ratio 1920/425 ~ 4.52:1, cao hơn mốc 2640/500 = 5.28:1 chốt
 * 27/08/2026), điện thoại 430x150 (~2.87:1) để ảnh không mỏng như một vệt khi
 * bề ngang chỉ còn ~430px. Mốc 600px là breakpoint điện thoại các file này đang
 * dùng. Ảnh vẫn `object-fit:cover` nên ảnh gốc cỡ nào cũng lấp đúng khung.
 *
 * SỬA 09/09/2026 (khách: "cho mấy cái section banner cho chọn select tỉ lệ khung
 * ảnh đi, width thì 100%") — hai mốc trên nay là DỰ PHÒNG, không còn ghim cứng.
 * Người biên tập chọn ở ô "Tỉ lệ khung ảnh" trong admin; part in ra biến
 * `--vp-banner-ty-le` (và `--vp-banner-ty-le-mb` cho ≤600px) mang đúng giá trị đó.
 * Không chọn thì hai biến vắng mặt và `var()` rơi về mốc dự phòng — hành vi y hệt
 * trước ngày này. Bề ngang KHÔNG nằm trong ô chọn: luôn 100%.
 * Danh sách tỉ lệ hợp lệ ở inc/banner-ty-le.php (một nguồn cho cả ba banner).
 */
.nl-banner-img{
  width:100%;
  aspect-ratio:var(--vp-banner-ty-le, 1920/425);
  overflow:hidden;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.nl-banner-img-el{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/*
 * Chọn "Theo ảnh gốc — không cắt": bỏ khung tỉ lệ, ảnh cao tự nhiên theo chính
 * nó. Đặc thù hơn `.nl-banner-img` một class nên thắng cả rule trong @media 600px
 * bất kể thứ tự — không phụ thuộc vị trí trong tệp.
 */
.nl-banner-img.vp-banner-tu-do{ aspect-ratio:auto; }
.nl-banner-img.vp-banner-tu-do .nl-banner-img-el{ height:auto; }
.nl-banner-info{
  padding:var(--sp-6) var(--wrap-x) var(--sp-5);
  text-align:center;
}
/* Breadcrumb canh TRÁI, khối cha `.nl-banner-info` vẫn `text-align:center` để H1 canh giữa — đúng khuôn `.cat-hero-info`. */
.nl-banner-info .crumb{ font-size:13px; color:var(--text-muted); margin-bottom:var(--sp-4); text-align:left; }
.nl-banner-info .crumb a{ color:var(--text-muted); }
.nl-banner-info .crumb a:hover{ color:var(--navy); }
.nl-banner-info h1{ color:var(--navy); font-size:38px; margin-bottom:var(--sp-4); }

/* ============================================================
   2. Section chung — nhịp dùng trên cả mười khối
   ============================================================ */
.nl-sec{ padding-block:calc(var(--sp-6) * 2); padding-inline:0; }
.nl-sec-alt{ background:var(--bg-alt); }

.nl-head{ max-width:720px; margin-inline:auto; margin-bottom:calc(var(--sp-6) + var(--sp-3)); text-align:center; }
.nl-head .label{ display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--cobalt-ink); margin-bottom:var(--sp-3); }
.nl-head h2{ margin-bottom:var(--sp-4); line-height:1.25; }
.nl-head p{ color:var(--text-muted); font-size:16px; line-height:1.7; }

/*
 * `.nl-head p` trên nền --bg-alt: --text-muted chỉ 4.24:1 trên --bg-alt,
 * trượt AA cho chữ 16px — cùng con số đã ghim ở mục 1 home.css. Bốn khối
 * .nl-sec-alt (stats, machinery, certs, commitments) đều cần override này.
 */
.nl-sec-alt .nl-head p{ color:var(--text); }

/* ============================================================
   3. Nền tảng sản xuất (.nl-intro) — kèm slider data-vp-slider*
   ============================================================ */
.nl-intro{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.nl-intro-text h2{ margin-bottom:var(--sp-4); line-height:1.3; }
.nl-intro-text p{ color:var(--text); font-size:16px; line-height:1.85; margin-bottom:var(--sp-4); }
.nl-intro-text strong{ color:var(--navy); }

.nl-intro-visual{
  aspect-ratio:4 / 3;
  border-radius:var(--r-xl);
  background:var(--img-bg);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

/* Móc MỚI so với mockup: bọc trực tiếp hai .nl-slide, lấp đầy .nl-intro-visual
   vì .nl-slide vốn định vị theo .nl-intro-visual trong mockup gốc. */
.nl-slide-frame{ position:absolute; inset:0; }

.nl-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .8s ease;
}
/* [hidden] tường minh — KHÔNG display vô điều kiện, chỉ opacity cho slide
   đang hiện; UA lo phần display:none của slide đang ẩn. */
.nl-slide[hidden]{ opacity:0; }
.nl-slide img{ width:100%; height:100%; object-fit:cover; }


.nl-dots{ position:absolute; bottom:var(--sp-4); left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:2; }
/* [hidden] tường minh: dải chấm chỉ hiện khi JS bỏ hidden (initCertSlider()-
   dạng của page-nangluc.js). display:flex ở trên chỉ áp KHI KHÔNG hidden nhờ
   thứ tự — nhưng để tường minh và khỏi phụ thuộc thứ tự nguồn, khai lại rule
   [hidden] của UA ở đây. */
.nl-dots[hidden]{ display:none; }

.nl-dot{
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nl-dot::before{
  content:'';
  width:9px;
  height:9px;
  border-radius:var(--r-full);
  background:rgba(0, 27, 183, .25);
  transition:all var(--dur-micro) ease;
}
.nl-dot[aria-current='true']::before{ background:var(--navy); width:24px; border-radius:5px; }

/* ============================================================
   4. Con số ấn tượng (.nl-stats) — luôn trong .nl-sec-alt
   ============================================================ */
.nl-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); }
.nl-stat{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);
  text-align:center;
  box-shadow:var(--sh-1);
}
.nl-stat .num{ font-family:var(--font-head); font-weight:800; font-size:40px; line-height:1; margin-bottom:var(--sp-2); }
.stat-value{ color:var(--navy); }
.stat-suffix{ color:var(--cobalt-ink); }
.stat-unit{ font-size:20px; color:var(--cobalt-ink); }
.nl-stat .desc{ font-size:14px; color:var(--text-muted); line-height:1.5; }

/* ============================================================
   5. Danh mục sản phẩm (.nl-prodcat)
   ============================================================ */
.nl-prodcat{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.pc-text .label{ display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--cobalt-ink); margin-bottom:var(--sp-3); }
.pc-text h2{ margin-bottom:var(--sp-4); line-height:1.25; }
.pc-text p{ color:var(--text); font-size:16px; line-height:1.8; margin-bottom:var(--sp-6); }
.pc-cta{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--navy);
  color:var(--white);
  font-weight:700;
  font-family:var(--font-head);
  font-size:15px;
  padding:14px var(--sp-6);
  border-radius:var(--r-btn);
  text-decoration:none;
  transition:background var(--dur-micro) ease, transform var(--dur-micro) ease, gap var(--dur-micro) ease;
}
/* --cobalt-ink, KHÔNG --cobalt: chữ trắng 15px trên nền --cobalt trơn KHÔNG
   đủ 4.5:1 — cùng bài học đã ghim ở .hero .btn-primary/.cta-box .btn-primary
   của home.css (mục 7.9). */
.pc-cta:hover{ background:var(--cobalt-ink); transform:translateY(-2px); gap:var(--sp-4); }
.pc-cta svg{ width:18px; height:18px; }

.pc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); }
.pc-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  padding:26px 14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-card-lg);
  text-decoration:none;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur-micro) ease, transform var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.pc-tile:hover{ border-color:var(--cobalt); transform:translateY(-4px); box-shadow:var(--sh-3); }
.pc-ic{ display:flex; align-items:center; justify-content:center; color:var(--navy); }
.pc-ic svg{ width:28px; height:28px; }
.pc-name{ font-size:14px; font-weight:700; color:var(--navy); font-family:var(--font-head); text-align:center; line-height:1.35; }

/* ============================================================
   6. Hệ thống máy móc & thiết bị (.sx-grid) — luôn trong .nl-sec-alt
   ============================================================ */
.sx-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.sx-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.sx-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
.sx-card .photo{
  aspect-ratio:16 / 10;
  background:var(--img-bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.sx-card .photo img{ width:100%; height:100%; object-fit:cover; }
.sx-card .body{ padding:var(--sp-5) 22px; flex:1; display:flex; flex-direction:column; }
.sx-card h3{ font-size:18px; margin-bottom:var(--sp-3); }
.sx-card ul{ display:flex; flex-direction:column; gap:9px; }
.sx-card li{ font-size:13.5px; color:var(--text); line-height:1.6; padding-left:var(--sp-4); position:relative; }
.sx-card li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:var(--r-full); background:var(--cobalt); }
.sx-card li strong{ color:var(--navy); font-weight:700; }
.sx-card li .brand{ color:var(--text-muted); white-space:nowrap; }

/* ============================================================
   7. Quy trình sản xuất (.nl-process) — KHÔNG nl-sec-alt
   ============================================================ */
.nl-process{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-4); position:relative; }
.nl-step{ text-align:center; position:relative; }
.nl-step-num{
  width:60px;
  height:60px;
  border-radius:var(--r-full);
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-head);
  font-weight:800;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--sp-4);
  position:relative;
  z-index:2;
}
.nl-step h4{ font-size:16px; margin-bottom:var(--sp-2); }
.nl-step p{ font-size:13px; color:var(--text-muted); line-height:1.55; }
/* Đường nối chạy XUYÊN QUA phía sau vòng số (z-index:1 < .nl-step-num z-index:2) —
   giữ đúng cơ chế mockup, KHÔNG vẽ bằng border giữa .nl-step. */
.nl-process::before{ content:''; position:absolute; top:30px; left:10%; right:10%; height:2px; background:var(--border); z-index:1; }

/* ============================================================
   8. Chứng nhận & kiểm định (.nl-certs) — luôn trong .nl-sec-alt, kèm
   lightbox RIÊNG cho mỗi thẻ
   ============================================================ */
.nl-certs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; max-width:960px; margin-inline:auto; }
.nl-cert{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
  /*
   * LUÔN hiện MẶC ĐỊNH (opacity:1). Hiệu ứng "hiện dần khi cuộn tới" đã
   * CHUYỂN sang GSAP + ScrollTrigger dùng chung toàn site (assets/js/
   * motion.js) — không còn gate-class .js-cert-anim/.show nữa: GSAP tự set
   * trạng thái ẩn bằng gsap.set() (inline style), CHỈ KHI đã tải được GSAP +
   * KHÔNG bật prefers-reduced-motion, cùng đúng hợp đồng suy giảm êm như
   * trước.
   */
  opacity:1;
  transition:box-shadow var(--dur-state) ease, border-color var(--dur-state) ease;
}
/* KHÔNG transform khi HOVER — xem chú thích đầu file ("VỀ TRANSFORM TRÊN
   .nl-cert"): tổ tiên transform sẽ biến thành khối chứa của lightbox
   position:fixed bên trong. GSAP animate transform CHO HIỆU ỨNG CUỘN lúc
   tải trang không phạm luật đó vì nó chỉ chạy MỘT LẦN rồi dừng hẳn ở
   transform:none, và lightbox luôn đóng lúc đó. */
.nl-cert:hover{ box-shadow:var(--sh-3); border-color:var(--cobalt); }

.nl-cert-img{
  aspect-ratio:3 / 4;
  background:var(--img-bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:var(--sp-5);
}
/*
 * object-fit:contain, KHONG phai cover — anh logo chung nhan (ISO/BRCGS...)
 * la anh ngang det (vi du 420x135, ti le ~3:1), khung nay lai cao (3/4).
 * cover ep anh ngang cao het chieu cao khung roi cat rong, phong to mot
 * manh nho cua logo va vo hat (git blame: bao cao nguoi dung kem anh chup
 * man hinh thay so bi cat vo va rang cua). Trang chu dung dung .cert-logo-img
 * {object-fit:contain} cho CUNG mot anh nay (home.css dong 1086) - noi nay
 * truoc do dung cover la khong nhat quan, khong phai chu y thiet ke.
 */
.nl-cert-img img{ width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.nl-cert:hover .nl-cert-img img{ transform:scale(1.04); }

.nl-cert-zoom{
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(0, 18, 145, .72);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--white);
  font-family:var(--font-head);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--dur-state) ease;
}

/*
 * `.nl-cert-seal` — icon giữ chỗ cho thẻ KHÔNG có logo (`.nl-cert--text`).
 * Feedback khách (21/08/2026): "thêm cái ảnh placeholder vào 2 cái box".
 * Đứng trong CÙNG khung `.nl-cert-img` (aspect-ratio 3/4, nền --img-bg) mà
 * biến thể --logo dùng cho <img> thật — hai biến thể cao bằng nhau ngay từ
 * layout, không cần mẹo margin:auto nào bù trừ nữa (xem rule đã XOÁ ở cuối
 * mục này). `color:var(--cobalt)` cho icon nổi trên nền --img-bg nhạt, cùng
 * tinh thần "cobalt = điểm nhấn thương hiệu" đã dùng cho .bt-media-fallback/
 * .cert-seal ở home.css. KHÔNG `:hover`/`:focus` nào ở đây — không phải nút,
 * không nhận tương tác.
 */
.nl-cert-seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--border);
  color:var(--cobalt);
}
/* :hover VÀ :focus-visible — nút chỉ hiện khi rê chuột trong mockup, nhưng một
   nút chỉ hiện với chuột là một nút KHÔNG bao giờ nhận được focus bàn phím một
   cách nhìn thấy được (nó vẫn trong thứ tự Tab, opacity không gỡ tab-index).
   Thêm :focus-within để bàn phím cũng thấy nút hiện ra. */
.nl-cert:hover .nl-cert-zoom,
.nl-cert:focus-within .nl-cert-zoom{ opacity:1; }
.nl-cert-zoom svg{ width:20px; height:20px; }

/*
 * ĐÃ XOÁ — `.nl-cert--text .nl-cert-body{ margin-block:auto }` (STT 5, đợt
 * phản hồi trước). Rule đó bù cho thẻ KHÔNG logo thiếu hẳn `.nl-cert-img`,
 * khiến chữ dính mép trên và để hở khoảng trống lớn bên dưới trong lưới cao
 * bằng nhau. Feedback khách (21/08/2026, "thêm cái ảnh placeholder vào 2 cái
 * box") bác bỏ chính tiền đề đó: `.nl-cert--text` giờ LUÔN có `.nl-cert-img`
 * (icon `.nl-cert-seal` thay logo thật, xem rule phía trên) — hai biến thể
 * cao bằng nhau tự nhiên ngay từ khung ảnh, không còn khoảng trống lệch nào
 * để bù bằng margin nữa. Giữ rule cũ lại sẽ là dead code câm lặng.
 */
.nl-cert{ display:flex; flex-direction:column; }

.nl-cert-body{ padding:var(--sp-5) var(--sp-5); text-align:center; }
.nl-cert-body h4{ font-size:17px; margin-bottom:7px; }
.nl-cert-note{ font-size:13.5px; color:var(--text-muted); line-height:1.6; }

/*
 * Lightbox — MỘT vỏ RIÊNG cho MỖI chứng nhận (certs.php, Task 5), không dùng
 * chung như mockup. `position:fixed` nên nằm ngoài luồng của `.nl-cert-img`
 * dù DOM nằm bên trong nó (miễn không tổ tiên nào mang transform — xem chú
 * thích đầu file).
 */
.nl-cert-lightbox-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0, 8, 40, .82);
  z-index:9998;
}
/* [hidden] tường minh — nền mờ mặc định `hidden`, UA lo display:none. */
.nl-cert-lightbox-backdrop[hidden]{ display:none; }

.nl-cert-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px var(--sp-5);
  opacity:0;
  visibility:hidden;
  /*
   * ĐỘ TRỄ HAI CHIỀU LỆCH NHAU — đúng khuôn `.nav-search-pop` (layout.css mục
   * 1b) mà certs.php đã cảnh báo trước. Mặc định (ĐÓNG): đợi hết animation ẩn
   * (var(--dur-state)) rồi mới visibility:hidden — cho phép opacity chạy hết
   * trước khi vỏ biến mất khỏi cây a11y/tab.
   */
  transition:opacity var(--dur-state) ease, visibility 0s linear var(--dur-state);
}
/*
 * MỞ (aria-hidden="false"): visibility:visible NGAY LẬP TỨC (độ trễ 0s), để
 * page-nangluc.js gọi .focus() cùng lượt thực thi vẫn nhận được — đợi hết
 * animation ở chiều này sẽ làm trình duyệt từ chối focus lúc vỏ còn
 * visibility:hidden.
 */
.nl-cert-lightbox[aria-hidden='false']{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-state) ease, visibility 0s linear 0s;
}

.nl-cert-lightbox-img{
  max-width:min(760px, 100%);
  max-height:74vh;
  border-radius:var(--r-card);
  box-shadow:var(--sh-4);
  object-fit:contain;
  display:block;
  margin-bottom:var(--sp-4);
}
.nl-cert-lightbox-cap{ color:var(--white); font-family:var(--font-head); font-weight:700; font-size:16px; text-align:center; }
.nl-cert-lightbox-close{
  position:absolute;
  top:var(--sp-5);
  right:28px;
  width:44px;
  height:44px;
  border-radius:var(--r-full);
  background:rgba(255, 255, 255, .14);
  border:0;
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur-micro) ease;
}
.nl-cert-lightbox-close:hover{ background:rgba(255, 255, 255, .28); }
.nl-cert-lightbox-close svg{ width:18px; height:18px; }

/* ============================================================
   9. Năng lực xuất khẩu quốc tế (.nl-export) — KHÔNG nl-sec-alt
   ============================================================ */
.nl-export{ display:grid; grid-template-columns:1.45fr 1fr; gap:48px; align-items:center; }
/*
 * ĐÃ XOÁ — `border-radius`/`overflow:hidden` trên `.nl-export-visual` (từng
 * bo góc + cắt viền khối navy đặc của LẦN 2). Feedback khách 21/08/2026:
 * "Phần dotted maps nằm trên nền trắng luôn chứ k nằm trong shape cố định".
 * Không còn khung/hình bọc quanh bản đồ — chấm nằm thẳng trên nền trắng của
 * trang. Xem docblock "BẢN ĐỒ CHẤM" (LẦN 3) trong
 * template-parts/nangluc/export.php cho toàn bộ lịch sử.
 */
/*
 * .nl-export-map — LẦN 3: SVG dán nguyên văn từ mockup khách gửi (xem
 * docblock "BẢN ĐỒ CHẤM" trong template-parts/nangluc/export.php), thay lưới
 * 60×24 ô tự dựng của LẦN 2. width:100% height:auto giữ đúng tỉ lệ viewBox
 * (1000×380, cố định — SVG tĩnh nên viewBox không còn tính động nữa). KHÔNG
 * `border-radius` — cùng lý do ĐÃ XOÁ ở `.nl-export-visual` phía trên, không
 * có khung nào để bo góc nữa.
 */
.nl-export-map{ width:100%; height:auto; display:block; }

/*
 * Màu chấm/ghim của `.nl-export-map` — LẦN 3, chép nguyên khối màu từ CSS
 * mockup (class `.d`/`.dh`/`.dv`/`.mk`/`.mkv`/`.mkp` của `.nl-map`), chỉ đổi
 * tiền tố selector từ `.nl-map` sang `.nl-export-map` cho khớp tên class
 * theme đang dùng — không đổi giá trị màu/kích thước nào so với mockup.
 * `mkPulse` là animation LẶP VÔ HẠN (vòng lan toả quanh điểm gốc Việt Nam) —
 * mục 12 global.css đã có `@media(prefers-reduced-motion:reduce){ *,*::before,
 * *::after{ animation-iteration-count:1 !important; animation-duration:.01ms
 * !important; } }` áp dụng vô điều kiện cho MỌI animation trên trang, nên
 * không cần thêm truy vấn media riêng ở đây — bất biến đã có sẵn tự phủ.
 */
.nl-export-map .d{ fill:#C3D2F0; }
.nl-export-map .dh{ fill:var(--cobalt); }
.nl-export-map .dv{ fill:var(--navy); }
.nl-export-map .mk{ fill:var(--cobalt); stroke:#fff; stroke-width:1.5; }
.nl-export-map .mkv{ fill:var(--navy); stroke:#fff; stroke-width:2; }
.nl-export-map .mkp{
  fill:none;
  stroke:var(--navy);
  stroke-width:2;
  opacity:.55;
  transform-box:fill-box;
  transform-origin:center;
  animation:mkPulse 2.4s ease-out infinite;
}
@keyframes mkPulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(2.8); opacity:0; }
  100%{ transform:scale(2.8); opacity:0; }
}

.nl-export-text h2{ margin-bottom:var(--sp-4); }
.nl-export-text p{ color:var(--text); font-size:16px; line-height:1.8; margin-bottom:var(--sp-5); }
/*
 * .nl-countries — FEEDBACK ĐỢT 1, STT 19 vế 2: khách xin "chỉnh 4:4" (8 quốc
 * gia của mockup xuống dòng 4/3/1 với `flex-wrap`, khách muốn đều 4 trên/4
 * dưới). Đổi sang CSS Grid CỐ ĐỊNH 4 CỘT thay vì flex-wrap — với đúng 8 mục,
 * grid tự chia 4/4 (hàng 1 lấp đủ 4 cột, hàng 2 lấp 4 mục còn lại) mà KHÔNG
 * cần biết trước tổng số 8 ở đâu trong CSS (không có con số "8" nào bị ghi
 * cứng — vinpack_nangluc_export() có thể trả 1..n dòng). Số khác 8 vẫn xếp
 * đúng luật "tối đa 4 mỗi hàng, hàng cuối có bao nhiêu xếp bấy nhiêu" mà
 * không vỡ: ví dụ 5 dòng → 4 trên + 1 dưới, 3 dòng → 1 hàng 3 ô (grid không
 * ép đủ 4 cột phải có phần tử). `max-content` cho mỗi cột (không phải `1fr`)
 * để độ rộng cột theo đúng tên nước dài nhất RƠI VÀO cột đó, giữ dáng "viên
 * thuốc" (pill) ôm sát chữ như flex cũ, không bị kéo dãn full-width kiểu ô
 * bảng.
 *
 * `justify-items:start` — SỬA feedback khách 21/08/2026: "Phần button fit
 * với tên nước" (khoanh đỏ "Úc" và "Đức"). NGUYÊN NHÂN: `max-content` tính
 * theo CỘT, không theo Ô — cột 2 (chứa "Nhật Bản" hàng 1 VÀ "Đức" hàng 2)
 * rộng theo "Nhật Bản" (tên dài hơn), cột 4 (chứa "Úc" hàng 1 VÀ "Malaysia"
 * hàng 2) rộng theo "Malaysia". Grid item mặc định `justify-items:stretch`
 * (khác flexbox — đây là bẫy hay gặp của Grid), nên `.nl-country` của "Đức"/
 * "Úc" bị KÉO DÃN lấp đầy bề rộng cột dùng chung với ô kia, dù chữ ngắn hơn
 * nhiều — đúng hiện tượng khách khoanh đỏ. `justify-items:start` bắt mỗi
 * item tự co về đúng bề rộng nội dung của NÓ (viên thuốc ôm sát chữ), neo
 * vào mép trái ô — cột có thể vẫn rộng (khoảng trắng vô hình còn đó), nhưng
 * viên thuốc hiển thị đúng cỡ chữ của nó. Không đổi cách chia 4/4 (STT 19 vế
 * 2) — `justify-items` không ảnh hưởng số cột/cách ngắt hàng.
 */
.nl-countries{ display:grid; grid-template-columns:repeat(4, max-content); gap:var(--sp-3); justify-content:start; justify-items:start; }
.nl-country{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px var(--sp-5); font-size:14px; font-weight:600; color:var(--navy); }

/* ============================================================
   10. Cam kết & chính sách (.cm-list) — luôn trong .nl-sec-alt
   ============================================================ */
.cm-list{ max-width:1060px; margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; column-gap:44px; }
.cm-item{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:var(--sp-4);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--border);
  align-items:start;
  /*
   * LUÔN hiện MẶC ĐỊNH — cùng nguyên tắc .nl-cert/.tl-item ở trên. Hiệu ứng
   * "hiện lần lượt khi cuộn tới" đã CHUYỂN sang GSAP + ScrollTrigger dùng
   * chung toàn site (assets/js/motion.js) — không còn gate-class
   * .js-cm-anim/.show nữa.
   */
  opacity:1;
}
.cm-ic{
  width:44px;
  height:44px;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--navy);
}
.cm-ic svg{ width:21px; height:21px; }
/*
 * FEEDBACK ĐỢT 1, STT 20 vế 2: giữ "Cam kết trách nhiệm môi trường & nguồn
 * gốc nguyên liệu" trên MỘT DÒNG khi đủ chiều rộng. `white-space:nowrap` là
 * rule NỀN ở đây (áp dụng khi KHÔNG có media nào ghi đè — đúng bề rộng ≥1180
 * nơi .cm-list đạt max-width 1060px đầy đủ, cột chữ mỗi .cm-item rộng đủ cho
 * tiêu đề dài nhất trong dữ liệu hiện tại), rồi bị GỠ lại thành `normal`
 * trong khối `@media (max-width:1180px)` ở mục 13 bên dưới — CÙNG HƯỚNG
 * max-width mà mọi @media khác của file này dùng (bộ giải cascade của
 * tests/test-css-cascade.php mục 14 chỉ nhận dạng được điều kiện
 * `max-width`, xem vp_cas_media_active(); một `min-width` trần ở đây sẽ rơi
 * vào nhóm "điều kiện lạ" mà bộ giải không mô phỏng được). Ở màn hẹp hơn
 * (dưới 1180, kể cả lúc .cm-list rơi về 1 cột ở mục 13) `normal` phục hồi,
 * tránh nowrap trần đẩy tràn ngang trên màn 320-375px mà global.css mục 5
 * (a11y/responsive) đã cấm. Áp cho MỌI .cm-body h3 (không chỉ dòng dài nhất)
 * vì CSS không chọn được theo nội dung chữ — tiêu đề ngắn hơn vẫn vừa một
 * dòng vốn dĩ, nowrap không đổi gì cho chúng.
 */
.cm-body h3{ font-size:16px; margin-bottom:6px; line-height:1.35; white-space:nowrap; }
.cm-body p{ color:var(--text); font-size:14px; line-height:1.7; }
.cm-body strong{ color:var(--navy); font-weight:700; }

.cm-more{ margin-top:var(--sp-2); }
.cm-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  cursor:pointer;
  padding:13px 6px;
  margin:-13px -6px;
  /* --cobalt-ink, KHÔNG --cobalt: --cobalt trên --bg-alt chỉ ~2.7:1, trượt cả
     ngưỡng 3.0 lẫn 4.5 — .cm-list ngồi TRỰC TIẾP trên nền --bg-alt của
     .nl-sec-alt (không có thẻ trắng bọc ngoài .cm-item). */
  color:var(--cobalt-ink);
  font-family:var(--font-head);
  font-weight:700;
  font-size:13px;
  line-height:18px;
  transition:color var(--dur-micro) ease;
}
.cm-toggle:hover{ color:var(--navy); }
.cm-toggle svg{ width:15px; height:15px; transition:transform var(--dur-micro) ease; }
.cm-toggle[aria-expanded='true'] svg{ transform:rotate(180deg); }

/*
 * `.cm-detail[hidden]` — KHÔNG display vô điều kiện ở đây hay bất cứ đâu
 * trong file này đè lên `[hidden]{display:none}` mặc định của UA. Trạng thái
 * MỞ chỉ cần padding-top cho đoạn văn bên trong — không transition trên
 * display/visibility, vì đây là accordion nội tuyến (không phải modal), xem
 * cảnh báo trong docblock commitments.php.
 */
.cm-detail p{ padding-top:var(--sp-2); font-size:14px; color:var(--text); line-height:1.7; }

/* ============================================================
   11. Đối tác & khách hàng (.nl-sec.partners) — KHÔNG nl-sec-alt, dùng lại
   cơ chế băng chạy hai hàng của template-parts/home/partners.php
   ============================================================ */
.nl-sec.partners{ padding-bottom:calc(var(--sp-6) * 2 - var(--sp-6)); }

/*
 * TRÀN HẾT VIEWPORT — feedback khách 21/08/2026: "kéo section này full
 * witdh luôn đi". Cùng kỹ thuật ĐÃ DÙNG cho `.partners.wrap` ở trang chủ
 * (STT 8, xem docblock đầy đủ ở home.css) — KHÔNG dùng `100vw`/`50vw`
 * (tính cả thanh cuộn dọc, đẻ ra cuộn ngang trên Windows, xem đối chứng ở
 * test-css-cascade.php mục 7.1 cho home.css). `max-width:none` bỏ hẳn giới
 * hạn --wrap-max; `padding-inline:0` bỏ đệm hai bên — bề rộng còn lại đến
 * từ chính KHỐI CHỨA (`.nl-sec` → `body`, tính bằng `%`, không tính thanh
 * cuộn) nên tràn đúng mép nhìn thấy được, không dư một pixel.
 *
 * `.nl-sec.partners .wrap` (0,3,0) thắng rule `.wrap` gốc (0,1,0) của
 * global.css bằng ĐỘ ƯU TIÊN, không nhờ thứ tự nạp.
 */
.nl-sec.partners .wrap{ max-width:none; padding-inline:0; }

/* Tiêu đề nhận lại phần đệm mà vỏ vừa bỏ — cùng lý do .partners .section-head
   của trang chủ: dưới ~704px chữ không dính mép. Trên màn rộng .nl-head vẫn
   tự căn giữa theo max-width riêng của nó nên không đổi gì. */
.nl-sec.partners .nl-head{ padding-inline:var(--wrap-x); }

.partner-row{
  position:relative;
  overflow:hidden;
  /*
   * KHÔNG còn margin âm — cùng lý do STT 8 đã bỏ nó ở home.css: trước đây
   * `margin-inline:calc(var(--wrap-x) * -1)` ăn ngược phần đệm của `.wrap`
   * cũ; nay `.wrap` đã `padding-inline:0` (xem rule phía trên) nên băng vốn
   * đã chạm mép — giữ margin âm sẽ đẩy nó ra NGOÀI mép, đúng loại tràn
   * ngang cả dự án đang tránh. Để 0 tường minh, không xoá dòng, để người
   * sửa sau biết chỗ này từng có margin âm và vì sao nó biến mất.
   */
  margin-inline:0;
  margin-bottom:var(--sp-5);
}
.partner-row:last-child{ margin-bottom:0; }
.partner-row::before,
.partner-row::after{ content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.partner-row::before{ left:0; background:linear-gradient(90deg, var(--white), transparent); }
.partner-row::after{ right:0; background:linear-gradient(270deg, var(--white), transparent); }

.partner-track{ display:flex; gap:var(--sp-4); width:max-content; padding:6px 0; }
.partner-track.left{ animation:vpNlScrollLeft 26s linear infinite; }
.partner-track.right{ animation:vpNlScrollRight 26s linear infinite; }
.partner-row:hover .partner-track{ animation-play-state:paused; }

.partner-badge{
  flex-shrink:0;
  width:150px;
  height:78px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-3);
  transition:box-shadow var(--dur-micro) ease;
}
.partner-badge:hover{ box-shadow:var(--sh-2); }
.partner-logo{ height:46px; width:auto; max-width:120px; object-fit:contain; }

@keyframes vpNlScrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes vpNlScrollRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

@media (prefers-reduced-motion: reduce){
  .partner-track.left,
  .partner-track.right{ animation-name:none; }
}

/* ============================================================
   12. CTA tải hồ sơ (.nl-cta)
   ============================================================ */
.nl-cta{ padding-block:32px calc(var(--sp-6) * 2 + var(--sp-3)); }
.nl-cta-box{
  background:linear-gradient(135deg, var(--navy), var(--navy-dark));
  border-radius:var(--r-xl);
  padding:var(--sp-7);
  text-align:center;
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.nl-cta-box::after{
  content:'';
  position:absolute;
  left:-60px;
  bottom:-60px;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(92, 144, 245, .25), transparent 70%);
  border-radius:var(--r-full);
}
/*
 * BỎ font-size GHI CỨNG (07/09/2026, đợt đồng bộ CTA — lượt kiểm điện thoại).
 * Đo tại 375px: tiêu đề khối này 32px trong khi `.cta-box` của trang chủ/dịch
 * vụ/dự án/tuyển dụng chỉ 25px, vì `.cta-box h2` KHÔNG khai cỡ chữ nên co theo
 * `h2{font-size:25px}` của global.css ở mốc ≤900px, còn khối này khai đè nên
 * đứng nguyên 32px trên hộp chỉ rộng 279px. Bỏ khai đi thì cả sáu khối cùng
 * một cỡ ở cả hai đầu: 32px desktop, 25px điện thoại.
 */
.nl-cta-box h2{ color:var(--white); margin-bottom:var(--sp-3); position:relative; z-index:1; text-wrap:balance; }
.nl-cta-box p{
  color:var(--on-navy-text);
  font-size:16px;
  line-height:1.7;
  margin-bottom:var(--sp-6);
  position:relative;
  z-index:1;
  max-width:600px;
  margin-inline:auto;
}
.nl-cta-btns{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
/*
 * SỬA (27/08/2026, khách yêu cầu "đồng bộ lại tất cả nút") — bỏ `.nl-cta-
 * btn`/`.nl-cta-btn.primary`/`.nl-cta-btn.ghost` riêng, đổi markup
 * (partners-cta.php) sang `.btn.btn-primary`/`.btn.btn-outline-light`
 * chung. Bản riêng cũ ĐÃ ĐÚNG MÀU (--cobalt-ink) nhưng lệch kích thước
 * (padding 15px var(--sp-6) thay vì 12px 22px, font 15px thay vì 14.5px,
 * primary không viền trong khi bản chuẩn có viền 2px, ghost viền 1.5px
 * thay vì 2px) so với chuẩn đã chốt ở khối CTA trang chủ/dịch vụ/dự án.
 * `.btn-outline-light` dùng nguyên từ global.css, không cần override.
 * `.btn-primary` cần override — cùng lý lẽ đúng từng chữ như `.cta-box
 * .btn-primary` của home.css/page-dichvu.css/page-duan.css: `.nl-cta-box`
 * KHÔNG mang `.on-navy` nên nền --navy mặc định của `.btn-primary` chỉ
 * 1.23:1 so với hộp navy — nút tàng hình.
 */
/*
 * ĐÍCH ĐỔI 03/09/2026 (khách gửi ảnh chụp nút chìm vào nền navy ở khối
 * "Vẫn còn nhiều dự án khác", /du-an-tieu-bieu/): --cobalt-ink trên nền hộp
 * navy chỉ tách bạch 2.13:1 — đỡ hơn nút TÀNG HÌNH (1.23:1) mà comment ở
 * trên nói tới, nhưng vẫn mờ. `.cta-box .btn-primary` (home.css/page-
 * dichvu.css/page-duan.css) — khối mà rule NÀY tự nhận là "khuôn" để theo —
 * đã đổi sang trắng/navy, đạt 11.41:1. Đổi tại đây cho khớp lại đúng cái
 * khuôn nó tự nhận.
 */
.nl-cta-box .btn-primary,
.nl-cta-box .btn-primary:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* ============================================================
   13. Responsive
   ============================================================ */
@media (max-width:1180px){
  .nl-intro,
  .nl-export{ grid-template-columns:1fr; gap:36px; }
  .nl-stats{ grid-template-columns:repeat(2, 1fr); }
  .nl-process{ grid-template-columns:repeat(2, 1fr); gap:28px; }
  .nl-process::before{ display:none; }
  .nl-certs{ grid-template-columns:repeat(2, 1fr); }
  .sx-grid{ grid-template-columns:repeat(2, 1fr); }
  .nl-prodcat{ grid-template-columns:1fr; gap:36px; }
  /* STT 20 vế 2 — gỡ lại nowrap nền của mục 10 dưới 1180px, xem chú thích ở
     rule .cm-body h3. */
  .cm-body h3{ white-space:normal; }
}

@media (max-width:900px){
  .nl-sec{ padding-block:var(--sp-6); }
}

@media (max-width:600px){
	/* Banner điện thoại 430x150 — xem ghi chú .nl-banner-img. */
	.nl-banner-img{ aspect-ratio:var(--vp-banner-ty-le-mb, 430/150); }

  .nl-stats,
  .nl-certs,
  .nl-process{ grid-template-columns:1fr; }
  .sx-grid{ grid-template-columns:1fr; }
  .pc-grid{ grid-template-columns:repeat(2, 1fr); }
  .cm-list{ grid-template-columns:1fr; }
  .cm-item{ grid-template-columns:44px 1fr; gap:var(--sp-4); }
  .nl-cta-box{ padding:var(--sp-6) var(--sp-5); }
  /* 4 cột max-content của mục 9 không còn đủ chỗ dưới 600px (tên dài như
     "Singapore"/"Malaysia" cộng 4 cột sẽ tràn ngang) — 2 cột vẫn giữ đúng
     luật "n mục xếp đều, không hàng cụt", chỉ đổi số cột theo bề rộng. */
  .nl-countries{ grid-template-columns:repeat(2, max-content); }
}
/*
 * KHUÔN CTA CHUẨN TRÊN ĐIỆN THOẠI (07/09/2026) — khai cuối file để chắc chắn
 * đứng SAU rule chính của hộp (bài học từ page-tacgia.css: rule điện thoại nằm
 * TRƯỚC rule chính thì thua thứ tự nguồn, khai đúng mà không hiệu lực nào —
 * hộp đó đo ra đệm 36px trong khi năm hộp kia 32/24).
 *
 * NÚT FULL-WIDTH: đo tại 375px, nút co theo độ dài chữ nên hai nút trong cùng
 * một khối lệch nhau (dự án 187px và 155px, năng lực 199px và 171px) và mỗi
 * trang một bề ngang. Kéo bằng bề ngang hộp thì cột nút thẳng nhau ở mọi
 * trang, và vùng chạm cũng rộng hơn hẳn.
 */
@media (max-width:600px){
  .nl-cta-box .btn{ width:100%; }
}
/*
 * THANG CỠ TIÊU ĐỀ BANNER CHUẨN (07/09/2026): 38px desktop, 30px từ 900px,
 * 28px từ 600px. Trước đợt này mỗi banner tự chọn mốc và cỡ riêng nên ở 800px
 * màn hình có ba cỡ tiêu đề khác nhau cùng lúc — xem docblock đầy đủ trong
 * scratchpad/banner-dong-bo.py và các khối tương ứng ở tám file banner khác.
 */
@media (max-width:900px){
  .nl-banner-info h1{ font-size:30px; }
}

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