/*
 * profile.css — component riêng trang Hồ sơ năng lực (/ho-so-nang-luc/),
 * nạp SAU front-page.css (inline) + about.css nên dùng chung token +
 * .wrap/.btn/.eyebrow/.center/.pat/.certs/.fleet/.why-grid/.cards/.page-hero.
 * Chỉ định nghĩa class hs-*. Viết mobile-first.
 */

/* ===== centerpiece: thông tin pháp nhân + panel PDF ===== */
.hs-org { display: grid; gap: 26px; align-items: start; }
@media (min-width: 980px) { .hs-org { grid-template-columns: 1.45fr 1fr; gap: 40px; } }

.hs-facts { margin: 22px 0 0; }
.hs-facts > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .hs-facts > div { grid-template-columns: 170px 1fr; gap: 16px; padding: 13px 0; } }
.hs-facts dt { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.hs-facts dd { margin: 0; font-size: 15px; color: var(--text); font-weight: 600; line-height: 1.55; }
.hs-facts dd.num { font-variant-numeric: tabular-nums; }
.hs-facts dd a { color: var(--primary); text-decoration: none; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .hs-facts dd a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.hs-pdf { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; color: #fff; padding: 30px 26px; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 60%), linear-gradient(160deg, var(--navy), var(--navy-ink)); display: grid; gap: 10px; justify-items: start; }
.hs-pdf-ic { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #ff8d96; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); margin-bottom: 4px; }
.hs-pdf h2 { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.hs-pdf-meta { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #aecdf2; margin: 0; font-variant-numeric: tabular-nums; }
.hs-pdf-p { font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 0 0 8px; }
.hs-pdf-note { font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.55; margin: 6px 0 0; }

.hs-pdf-view { font-size: 13.5px; font-weight: 700; color: #aecdf2; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .hs-pdf-view:hover { color: #fff; } }
.hs-pdf-view:focus-visible { outline: 2px solid #ff8d96; outline-offset: 3px; }

/* ===== lật xem cuốn hồ sơ in (tái dùng lưới + lightbox của gallery.css) ===== */
.hs-scan-sec { background: var(--band); border-block: 1px solid var(--line); }
.gl-grid.hs-scan { margin-top: 34px; gap: 16px; }
@media (min-width: 700px) { .gl-grid.hs-scan { grid-template-columns: 1fr 1fr; gap: 18px; } }
/* ảnh scan là spread ngang ~2.8:1 — bỏ khung 4:3 mặc định của gallery */
.hs-scan .gl-item img { aspect-ratio: auto; height: auto; }
/* trang 7 trở đi: ẩn khỏi lưới nhưng vẫn trong DOM để lightbox lật đủ 23 trang */
.hs-scan .hs-scan-x { display: none; }
.hs-scan-more { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .01em; background: rgba(9, 20, 36, .58); pointer-events: none; }
.hs-scan-more small { font-size: 12.5px; font-weight: 600; opacity: .85; }

/* ===== bảng cơ cấu đội xe + ảnh ===== */
.hs-fleet { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) { .hs-fleet { grid-template-columns: 1.25fr 1fr; gap: 48px; } }

/* đồng bộ chuẩn bảng Á Châu 22/07/2026 (mẫu site cũ): header primary chữ trắng, padding 8×12 */
.hs-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 15px; }
.hs-table th, .hs-table td { padding: 8px 12px; line-height: 1.45; text-align: left; border: 1px solid var(--line); }
.hs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hs-table thead th { background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; border-color: var(--primary-deep); }
.hs-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--band) 80%, transparent); }
.hs-table tbody td { color: var(--text); }
.hs-table tbody .num { font-weight: 700; color: var(--ink); }
.hs-table tfoot th, .hs-table tfoot td { background: var(--band); color: var(--ink); font-weight: 800; border-top: 2px solid var(--line-2); }
.hs-note { font-size: 13.5px; color: var(--text-2); margin: 14px 0 0; }
.hs-note a { color: var(--primary); }

.hs-media { margin: 0; display: grid; gap: 16px; }
.hs-media img { width: 100%; height: auto; border-radius: 8px; display: block; }
.hs-media-2 { display: none; }
@media (min-width: 980px) { .hs-media-2 { display: block; } }

/* ===== phạm vi dịch vụ: band + lưới blueprint 44px ===== */
.hs-svc-sec { background: var(--band); border-block: 1px solid var(--line); position: relative; isolation: isolate; }
.hs-svc-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--primary) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 5%, transparent) 1px, transparent 1px); background-size: 44px 44px; }
.hs-svc .why-item { background: var(--surface); }
/* 6 mục dịch vụ: 3 cột (3+3) thay vì 4 cột của why-grid mặc định (bị lệch 4+2) */
@media (min-width: 940px) { .why-grid.hs-svc { grid-template-columns: repeat(3, 1fr); } }
.hs-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 44px; font-size: 13.5px; font-weight: 800; color: var(--accent); text-decoration: none; }
.hs-more .arr { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .hs-more:hover .arr { transform: translateX(4px); } }
.hs-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ghi chú giữa section minh chứng */
.center-note { text-align: center; max-width: 62ch; margin: 26px auto 6px; }
.center-note a { color: var(--primary); }

/* content-visibility: khối dưới màn hình đầu — trình duyệt bỏ qua
   style/layout/paint tới khi cuộn gần (đồng bộ cách front-page.css làm;
   .fleet/#minh-chung/.certs/.endcta đã được front-page.css phủ sẵn) */
#cuon-ho-so, #doi-xe, #pham-vi, #kho-bai {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

@media (prefers-reduced-motion: reduce) {
  .hs-more .arr { transition: none; }
}