/*
 * Trang cổng `/lien-ket` — nhận diện "CÔNG BÁO".
 *
 * ## Vì sao trang này KHÁC hẳn các trang còn lại
 *
 * Không phải phá vỡ hệ thiết kế, mà là **dựng lại một ý đồ đã có sẵn ở bản gốc**. `phulien.io.vn/` và
 * `phulien.io.vn/tthc/` là hai trang rời với hai bảng màu khác nhau: trang tra cứu dùng nền trắng/đỏ
 * như bên ta, còn trang cổng dùng **giấy ngà `#faf6ee`, vàng đồng `#c99a2e`, kẻ chỉ `#e4dcc9`** và khai
 * `--font-display: Tahoma, "Times New Roman", serif`. Ý đồ rất rõ — một trang giống **sổ tra cứu in**,
 * không giống một ứng dụng. Nhưng Tahoma là font hệ thống nên ý đồ đó không bao giờ hiện ra đúng.
 *
 * Ở đây dựng lại nó cho đủ: giấy có thớ, kẻ chỉ mảnh, số mục đặt bằng slab serif, phụ đề in nghiêng,
 * mỗi thẻ mang một số hiệu như một mục lục văn bản. Người dân vào đây để TRA, không để đọc — thứ giúp
 * họ nhất là biết mình đang ở mục mấy trong bốn mục, và mỗi mục có bao nhiêu dòng.
 *
 * ## Guardrail vẫn giữ nguyên
 *
 * R1 màu qua token (khai ngay dưới đây, phạm vi `.portal-page`) · R2 vùng chạm ≥44px cho chip và ≥78px
 * cho thẻ · R4 tương phản ≥4,5:1 (vàng CHỈ dùng cho đường kẻ và nét trang trí, chữ dùng `--cb-gold-ink`
 * đã tối đi đủ) · R7 font tự lưu · R8 ba mức cỡ chữ vẫn chạy vì phần chữ nội dung theo `--fs`.
 *
 * ⚠️ **Một chỗ đi lệch `ui-guidelines` §2**: bo góc thẻ 4px thay vì 16–22px. Đây là tín hiệu mạnh nhất
 * của hướng "bản in", và §2 là pattern GÓP Ý chứ không phải guardrail chặn. Muốn quay lại thì sửa đúng
 * một dòng `--cb-radius`.
 */

/*
 * ⚠️ **Đợt bám Cổng DVC Quốc gia (2026-09-09) đã nối bảng màu riêng này về TOKEN NHÀ.**
 *
 * Trước đó `.portal-page` tự khai 7 mã màu lấy từ `phulien.io.vn/` — hợp lý khi trang cổng là hòn đảo
 * riêng, nhưng nay cả dự án đã sang tông đất thì hai bảng màu gần giống nhau đặt cạnh nhau lại thành
 * lệch: giấy `#faf6ee` bên này với `--paper-warm #f7f1e8` bên kia là hai sắc ngà khác nhau vài độ,
 * mắt bắt được ngay mà không hiểu vì sao.
 *
 * **Giữ lại toàn bộ BỐ CỤC công báo** — số mục serif, phụ đề nghiêng, kẻ dòng, số hiệu từng thẻ — chỉ
 * đổi nguồn màu. Trang cổng vẫn là một chốn riêng, nhưng riêng bằng hình khối chứ không bằng màu.
 */
.portal-page {
  --cb-paper: var(--paper-warm);
  --cb-card: var(--paper);
  --cb-line: var(--red-border);
  --cb-ink: var(--ink);
  --cb-ink-soft: var(--ink-soft);
  /*
   * Vàng nghệ dùng cho ĐƯỜNG KẺ (không phải chữ, không vướng ngưỡng 4,5:1); chữ dùng `--gold-ink`.
   * Đây đúng cùng một luật với `--gold` / `--gold-ink` ở `tokens.css`, chỉ đổi tên cho phạm vi này.
   */
  --cb-gold: var(--gold);
  --cb-gold-ink: var(--gold-ink);
  --cb-radius: 4px;

  background-color: var(--cb-paper);
  /*
   * GIẤY KẺ DÒNG, không phải "thớ giấy".
   *
   * Bản đầu dựng thớ giấy bằng hai lưới kẻ 1px chồng nhau ở 2,6% — mở trình duyệt ra thì nó đọc thành
   * **lưới ô vuông**, trông như lỗi hiển thị chứ không như giấy. Vân giấy thật là nhiễu tần số cao,
   * mà nhiễu thì không dựng được bằng gradient; dựng bằng ảnh hoặc `filter: url(#noise)` thì một đằng
   * thêm file phải nạp trước cho kiosk (I10), một đằng bắt máy tại quầy vẽ lại lớp phủ mỗi lần cuộn.
   *
   * Kẻ dòng ngang theo nhịp 28px thì vừa rẻ vừa ĐÚNG chất hơn: đó là giấy kê khai, giấy sổ — thứ người
   * dân cầm ở quầy một cửa. Cộng một vệt sáng nhạt phía trên cho tờ giấy có chiều sâu.
   */
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 55%), transparent 240px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgb(36 31 26 / 3.5%) 27px 28px);
  color: var(--cb-ink);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
}

/* ---- Măng sét: hai đường kẻ đôi, tiêu đề serif, số đếm nằm cùng đường chân chữ ---- */

.portal-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 22px;
  padding-bottom: 12px;
  /* Kẻ đôi: nét đậm là `border`, nét vàng mảnh là `::after` — dấu hiệu quen thuộc của trang công báo. */
  border-bottom: 2px solid var(--cb-ink);
  position: relative;
}

.portal-masthead::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--cb-gold);
}

.portal-masthead h2 {
  margin: 0;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  /* Co theo bề ngang: 26px ở điện thoại, tới 40px ở màn kiosk. */
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Dòng nhỏ dưới tiêu đề, in nghiêng — giọng của một lời dẫn trong sổ tra cứu. */
.portal-kicker {
  margin: 6px 0 0;
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--cb-ink-soft);
}

.portal-count {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-gold-ink);
  white-space: nowrap;
  /* Số đếm dùng chữ số đều bề ngang: bộ lọc cập nhật theo từng ký tự, chữ số nhảy bề ngang thì cả dòng giật. */
  font-variant-numeric: tabular-nums;
}

/* ---- Ô tìm: một dòng kẻ, không phải một cái hộp ---- */

.portal-page .search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0 2px;
  border-bottom: 1.5px solid var(--cb-line);
}

.portal-page .search::before {
  content: '⌕';
  font-size: 22px;
  line-height: 1;
  color: var(--cb-gold-ink);
}

.portal-page .search input {
  flex: 1;
  min-width: 0;
  /* R2: ô nhập là vùng chạm, giữ sàn 44px kể cả khi bỏ khung hộp. */
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--cb-ink);
  font: inherit;
  font-size: var(--fs-base);
}

.portal-page .search input::placeholder {
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  color: var(--cb-ink-soft);
  opacity: 1;
}

.portal-page .search input:focus {
  outline: none;
}

.portal-page .search:focus-within {
  border-bottom-color: var(--cb-gold-ink);
}

/* ---- Chip nhảy mục: tab có gạch chân màu, không phải viên thuốc ---- */

.portal-page .portal-chips {
  gap: 4px 18px;
  margin-bottom: 26px;
}

.portal-page .portal-chip {
  gap: 8px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 3px solid var(--nhom, var(--cb-line));
  border-radius: 0;
  background: transparent;
  color: var(--cb-ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.portal-page .portal-chip:hover,
.portal-page .portal-chip:focus-visible {
  color: var(--cb-gold-ink);
  border-bottom-width: 5px;
}

/* Số mục trên chip đặt bằng serif — cùng một giọng với số lớn ở đầu mỗi mục. */
.portal-page .portal-chip .portal-ord {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  color: var(--nhom, var(--cb-ink));
  font-variant-numeric: tabular-nums;
}

/* Chấm màu của bản gốc không còn cần: cả cái gạch chân đã là màu của mục. */
.portal-page .portal-dot {
  display: none;
}

/* ---- Đầu mục: số lớn nằm riêng một cột, kẻ chỉ chạy hết bề ngang ---- */

.portal-page .group-head {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: start;
  gap: 0 18px;
  margin: 0 0 18px;
  padding: 0 0 12px;
  /* Bỏ viền trái của bản chung — ở đây vai trò đó do CỘT SỐ và đường kẻ dưới đảm nhiệm. */
  border-left: 0;
  border-bottom: 1px solid var(--cb-line);
  position: relative;
}

/* Nét vàng ngắn neo ở mép trái đường kẻ — chi tiết của trang in, không mang nghĩa gì thêm. */
.portal-page .group-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 74px;
  height: 3px;
  background: var(--nhom, var(--cb-gold));
}

.portal-page .group-num {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: transparent;
  color: var(--nhom, var(--cb-ink));
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  /* Kéo lên cho đường chân của chữ số ngang với dòng tiêu đề bên cạnh. */
  margin-top: -4px;
}

.portal-page .section-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.35;
}

.portal-page .group-sub {
  margin: 5px 0 0;
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--cb-ink-soft);
}

/* ---- Mục lục: mỗi thẻ là một dòng có số hiệu ---- */

/*
 * `minmax(196px)` chứ không nhỏ hơn. Đo ở 1400px: 158px cho ra **7 cột, thẻ rộng 170px** — dày hơn hẳn
 * bản gốc (5 cột) và mỗi thẻ nhỏ đi. Người dân đứng trước màn kiosk chạm bằng ngón tay, không bằng
 * chuột; 196px cho ra 6 cột ở kiosk và vẫn 2 cột ở điện thoại.
 */
.portal-page .link-list {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}

.portal-page .link-card {
  position: relative;
  gap: 12px;
  padding: 30px 12px 16px;
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  /* Bỏ viền trên dày của bản chung: màu của mục nay nằm ở số hiệu và ở nét khi chạm. */
  border-top: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  color: var(--cb-ink);
  /*
   * Hiện dần theo thứ tự khi mở trang. `--i` do template đặt cho từng thẻ; 37 thẻ × 14ms = tối đa
   * 0,52s nên thẻ cuối vẫn kịp trước khi người dân cuộn tới.
   *
   * `opacity: 0` CHỈ nằm trong khung hình đầu, không nằm ở luật gốc — trình duyệt không chạy được
   * animation thì thẻ vẫn hiện bình thường, không bao giờ có chuyện cả trang trắng.
   */
  animation: cb-hien-dan 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

@keyframes cb-hien-dan {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Số hiệu mục.thứ-tự — "2.07" — góc trên trái, như một dòng mục lục văn bản. */
.portal-page .link-ord {
  position: absolute;
  top: 9px;
  left: 11px;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  /* Dưới sàn `--fs-xs` có chủ ý: số hiệu mục kiểu công báo ("1.01") mang `aria-hidden="true"`, thuần
     trang trí, và phải lọt vào góc ô ảnh 64px. Không có chữ nào người dân cần đọc ở đây. */
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--cb-ink-soft);
  font-variant-numeric: tabular-nums;
}

/*
 * Ô ảnh CO THEO ẢNH, không phải một ô vuông cứng.
 *
 * Đo trên trang thật: 27/28 logo cao 30–50px, riêng `dvc-logo.png` tỉ lệ **6,55:1** nên trong ô vuông
 * 64px nó chỉ còn **cao 8px** — một vệt mỏng, và nó nằm ở THẺ ĐẦU TIÊN của trang. Bản gốc cũng dính
 * đúng lỗi này (ô `icon-plate` 72×72 cho cùng file ảnh); không có lý do gì phải chép lại.
 *
 * `width: auto` + `min-width` giữ ô vuông cho logo vuông, nhưng cho logo dạng băng ngang nở ra tới hết
 * bề ngang thẻ. Không cần biết trước tỉ lệ từng ảnh, không cần thêm cột nào trong CSDL.
 */
.portal-page .link-icon {
  width: auto;
  min-width: 64px;
  max-width: 100%;
  height: 64px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: var(--cb-radius);
  background: var(--cb-paper);
  border: 1px solid var(--cb-line);
}

.portal-page .link-icon img {
  max-width: 100%;
  max-height: 48px;
}

/*
 * `--fs-sm` (15px), không phải bậc sàn. Nhãn là thứ người dân đọc để chọn đúng cơ quan; ở khoảng cách
 * 60–80cm của màn kiosk thì đây phải trên sàn một bậc. Thẻ dùng `min-height` nên tự cao thêm.
 *
 * 🔄 2026-09-11: trước đây file này có CƠ CHẾ PHÓNG CHỮ RIÊNG — năm luật viết thẳng
 * `calc(Npx * var(--fs, 1))` trong khi phần còn lại của dự án đi qua danh sách lớp ở `kiosk.css`.
 * Hai cơ chế cho một hành vi là thứ khó chịu hơn cả một cơ chế hỏng: sửa cái này không ăn sang cái kia.
 * Nay cả dự án dùng chung thang token; `--fs` đã nằm SẴN trong token khi ở trong `.content`, nên nhân
 * thêm một lần nữa ở đây là phóng bình phương.
 */
.portal-page .link-label {
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.portal-page .link-card:hover,
.portal-page .link-card:focus-visible {
  border-color: var(--nhom, var(--cb-gold-ink));
  box-shadow: 0 6px 18px rgb(36 31 26 / 8%);
  transform: translateY(-2px);
}

.portal-page .link-card:hover .link-ord,
.portal-page .link-card:focus-visible .link-ord {
  color: var(--nhom, var(--cb-ink));
}

/* Kiosk là màn cảm ứng: `:hover` không bắn, phải có dấu hiệu đã-nhận riêng. */
.portal-page .link-card:active {
  transform: translateY(0) scale(0.985);
}

/* ---- Nút "Xem tất cả" và câu báo rỗng: cùng giọng bản in ---- */

.portal-page .portal-more {
  border: 0;
  border-bottom: 2px solid var(--cb-gold);
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  color: var(--cb-gold-ink);
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.portal-page .portal-more:hover,
.portal-page .portal-more:focus-visible {
  color: var(--cb-ink);
  border-bottom-color: var(--cb-ink);
}

.portal-page .state {
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  color: var(--cb-ink-soft);
}

.portal-page .crumbs,
.portal-page .crumbs a {
  color: var(--cb-ink-soft);
}

.portal-page .link-group {
  margin-bottom: 38px;
}

/* ---- Điểm ngắt ---- */

@media (max-width: 640px) {
  .portal-page {
    /* Màn điện thoại dày điểm ảnh: kẻ dòng nhạt bớt và thưa ra cho khỏi cạnh tranh với chữ. */
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 45%), transparent 160px),
      repeating-linear-gradient(180deg, transparent 0 31px, rgb(36 31 26 / 2.5%) 31px 32px);
  }

  .portal-page .group-head {
    grid-template-columns: 52px 1fr;
    gap: 0 12px;
  }

  .portal-page .group-head::after {
    width: 52px;
  }

  .portal-page .link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .portal-page .portal-chips {
    gap: 4px 14px;
  }
}

/*
 * Người khai báo giảm chuyển động: bỏ hẳn phần hiện dần và phần nhấc thẻ. `animation: none` trả thẻ
 * về trạng thái thường (opacity 1) vì `opacity: 0` chỉ nằm trong khung hình đầu.
 */
@media (prefers-reduced-motion: reduce) {
  .portal-page .link-card {
    animation: none;
  }

  .portal-page .link-card:hover,
  .portal-page .link-card:focus-visible,
  .portal-page .link-card:active {
    transform: none;
  }
}