/* ==========================================================================
   PHÚ AN KHANG — Design tokens v1.1 · Bước 1: chuẩn hóa nền tảng (30/09/2026)
   Theo Design System v1 (09/2026). Mọi màu, cỡ chữ, bo góc, chuyển động dùng
   các biến dưới đây; không viết mã màu hay cỡ chữ trực tiếp trong component.
   ========================================================================== */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/be-vietnam-pro-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/be-vietnam-pro-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/be-vietnam-pro-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/be-vietnam-pro-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/be-vietnam-pro-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Màu thương hiệu */
  --pak-brand:#12354a;--pak-brand-deep:#102d40;
  --pak-action:#ffcb05;--pak-action-hover:#edb900;--pak-action-pressed:#d9a900;--pak-action-bright:#ffdb54;
  --pak-action-tint:#fff8dc;--pak-action-deep:#8f7500;--pak-notice-ink:#625014;
  --pak-accent-mark:rgb(255 203 5 / 55%);
  /* Chữ */
  --pak-text:#172d3b;--pak-muted:#526572;--pak-link:#0a4d8c;--pak-focus:#0a4d8c;
  --pak-on-dark:#ffffff;--pak-on-dark-muted:#d8e4eb;--pak-on-dark-subtle:#9fb2bf;
  /* Nền và viền */
  --pak-page:#ffffff;--pak-surface:#f5f8fa;--pak-surface-2:#edf2f5;--pak-border:#dce4e8;--pak-border-input:#a8b7c1;
  /* Trạng thái */
  --pak-zalo:#0965c6;--pak-success:#15803d;--pak-success-tint:#eaf6ee;--pak-success-line:#9cc9ab;--pak-warning:#b45309;--pak-error:#b91c1c;
  /* Font và thang chữ (desktop → mobile tự co giãn) */
  --pak-font:"Be Vietnam Pro",Arial,"Helvetica Neue",sans-serif;
  --pak-fs-display:clamp(38px,2.64vw + 27.7px,62px); /* H1 trang chủ, tuyên bố lớn */
  --pak-fs-title:clamp(32px,1.76vw + 25.1px,48px);   /* H1 trang con, hero landing */
  --pak-fs-section:clamp(28px,1.32vw + 22.9px,40px); /* H2 tiêu đề mục */
  --pak-fs-panel:clamp(22px,0.66vw + 19.4px,28px);   /* tiêu đề khối, form, banner */
  --pak-fs-card:clamp(18px,0.44vw + 16.3px,22px);    /* H3 thẻ */
  --pak-fs-card-sm:clamp(16px,0.11vw + 15.6px,17px); /* tiêu đề thẻ gọn: sản phẩm, dòng danh sách */
  --pak-fs-stat:clamp(32px,1.76vw + 25.1px,48px);    /* số liệu lớn */
  --pak-fs-lead:clamp(16px,0.11vw + 15.6px,17px);    /* mô tả hero */
  --pak-fs-body:16px;--pak-fs-body-sm:15px;--pak-fs-button:15px;--pak-fs-label:14px;--pak-fs-caption:13px;--pak-fs-eyebrow:12px;
  --pak-track-tight:-0.02em;--pak-track-caps:0.1em;
  /* Hình khối, bóng, chuyển động */
  --pak-r-sm:4px;--pak-r:8px;--pak-r-lg:12px;
  --pak-shadow:0 1px 2px rgb(18 53 74 / 6%),0 8px 24px rgb(18 53 74 / 8%);
  --pak-motion:180ms;--pak-ease:cubic-bezier(.2,.8,.2,1);
  /* Tên cũ, giữ để tương thích — trỏ về token mới */
  --navy:var(--pak-brand);--blue:var(--pak-link);--yellow:var(--pak-action);--yellow-hover:var(--pak-action-hover);
  --ink:var(--pak-text);--muted:var(--pak-muted);--line:var(--pak-border);--soft:var(--pak-surface);--white:#fff;--radius:var(--pak-r-lg);
  --pak-border-default:var(--pak-border);--pak-radius:var(--pak-r-lg);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}
body {
  margin: 0;
  font-family: var(--pak-font);
  color: var(--pak-text);
  background: var(--pak-page);
  font-size: var(--pak-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a,
button {
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pak-focus);
  outline-offset: 4px;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1 {
  font-size: var(--pak-fs-title);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--pak-track-tight);
  text-wrap:balance;
}
h2 {
  font-size: var(--pak-fs-section);
  line-height: 1.25;
  letter-spacing: var(--pak-track-tight);
  font-weight:700;
  text-wrap:balance;
}
h3 {
  font-size: var(--pak-fs-card);
  line-height: 1.35;
  font-weight:700;
}
h4 {
  font-size: var(--pak-fs-card-sm);
  line-height:1.4;
  font-weight:700;
}
p {
  color: var(--pak-muted);
  line-height:1.75;
}
small,
.small {
  font-size: var(--pak-fs-label);
}
.wrap {
  width: min(1240px, calc(100% - 64px));
  margin: auto;
}
.demo {
  font-size: var(--pak-fs-caption);
  background: var(--pak-action-tint);
  text-align: center;
  padding: 5px 16px;
  color: var(--pak-notice-ink);
  letter-spacing: 0;
}
.demo a {
  font-weight: 700;
  text-decoration: underline;
  margin-left: 12px;
}
.utility {
  background: var(--navy);
  color: var(--pak-on-dark);
  font-size: var(--pak-fs-caption);
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}
.utility a {
  margin-left: 24px;
}
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img {
  width: 57px;
  height: 38px;
  object-fit: contain;
}
.brand strong {
  font-size: 19px;
  letter-spacing: 0.03em;
  display: block;
  line-height: 1.2;
}
.brand small {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: 0.08em;
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight:600;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: var(--pak-fs-label);
  font-weight: 600;
}
.nav a {
  padding: 32px 0;
  position: relative;
  white-space: nowrap;
}
.nav a.active:after {
  content: "";
  height: 3px;
  background: var(--yellow);
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon {
  width: 21px;
  height: 21px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn {
  background: var(--pak-page);
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
}
.btn {
  min-height: 48px;
  padding: 12px 20px;
  background: var(--yellow);
  color: var(--navy);
  border: 1px solid var(--yellow);
  border-radius: var(--pak-r);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--pak-fs-button);
  line-height: 1.3;
  transition:background-color var(--pak-motion) var(--pak-ease), border-color var(--pak-motion) var(--pak-ease), color var(--pak-motion) var(--pak-ease), box-shadow var(--pak-motion) var(--pak-ease), transform 120ms var(--pak-ease);
}
.btn:hover {
  background: var(--yellow-hover);
  border-color: var(--yellow-hover);
}
.btn.secondary {
  background: var(--pak-page);
  border-color: var(--pak-border-input);
  color: var(--pak-brand);
}
.btn.secondary:hover {
  background: var(--soft);
  border-color: var(--navy);
}
.btn.dark {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--pak-on-dark);
}
.btn.small {
  min-height: 44px;
  padding: 10px 16px;
}
.btn.full {
  width: 100%;
}
.text-link {
  font-size: var(--pak-fs-label);
  font-weight: 700;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 26px;
}
.eyebrow {
  font-size: var(--pak-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pak-track-caps);
  color: var(--blue);
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow:before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--yellow);
}
.hero {
  padding: 48px 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}
.hero p {
  font-size: var(--pak-fs-lead);
  margin-top: 23px;
  max-width: 530px;
  line-height: 1.75;
}
.hero h1 span {
  color: var(--pak-brand);
  font-style:normal;
  background:linear-gradient(transparent 62%, var(--pak-accent-mark) 62%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 0.06em;
}
.hero-image {
  position: relative;
  min-width: 0;
}
.hero-image img {
  width: 100%;
  height: 465px;
  object-fit: cover;
  border-radius: var(--pak-r-lg);
  display: block;
}
.hero-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: rgba(255, 255, 255, 0.96);
  padding: 15px 20px;
  border-radius: var(--pak-r);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 30px #12354a20;
}
.hero-label small {
  color: var(--muted);
  display: block;
  font-size: var(--pak-fs-eyebrow);
}
.hero-label strong {
  font-size: var(--pak-fs-card-sm);
}
.image-caption {
  font-size: var(--pak-fs-caption);
  color: var(--muted);
  margin-top: 6px;
}
.searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--pak-border-input);
  padding: 6px 6px 6px 16px;
  border-radius: var(--pak-r);
  background: var(--pak-page);
  position: relative;
}
.searchbox input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  height: 42px;
  color: var(--ink);
  background: transparent;
  font-size: var(--pak-fs-body);
}
.search-wrap {
  margin-top: 30px;
  position: relative;
}
.search-hint {
  display: block;
  font-size: var(--pak-fs-caption);
  margin-top: 8px;
  color: var(--muted);
}
.search-hint a {
  color: var(--blue);
  margin-left: 8px;
}
.autocomplete {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  background: var(--pak-page);
  box-shadow: 0 12px 30px #12354a25;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  z-index: 40;
  padding: 8px;
}
.autocomplete a {
  display: block;
  padding: 12px;
  border-radius: var(--pak-r-sm);
  font-size: var(--pak-fs-label);
}
.autocomplete a:hover {
  background: var(--soft);
}
.audiences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  margin-bottom: 25px;
  overflow: hidden;
}
.audience {
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.audience + .audience {
  border-left: 1px solid var(--line);
}
.audience:hover {
  background: var(--soft);
}
.audience .icon {
  width: 28px;
  height: 28px;
  color: var(--blue);
}
.audience strong {
  display: block;
  font-size: var(--pak-fs-card-sm);
}
.audience small {
  font-size: var(--pak-fs-body-sm);
  color: var(--muted);
}
.audience .arrow {
  margin-left: auto;
  color: var(--blue);
}
.section {
  padding: 64px 0;
}
.section.soft {
  background: var(--soft);
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
}
.section-head p {
  margin-top: 10px;
  max-width: 660px;
}
.grid {
  display: grid;
  gap: 24px;
}
.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.category-card {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  position: relative;
  background: var(--pak-page);
}
.category-card:hover {
  border-color: var(--pak-on-dark-subtle);
  background: var(--pak-page);
}
.category-card .symbol {
  width: 52px;
  height: 52px;
  background: var(--pak-surface);
  border-radius: var(--pak-r-lg);
  display: grid;
  place-items: center;
  color: var(--blue);
  margin-bottom: 25px;
}
.category-card .symbol .icon {
  height: 28px;
  width: 28px;
}
.category-card h3 {
  font-size: var(--pak-fs-card);
}
.category-card p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 8px;
}
.category-card .arrow {
  position: absolute;
  top: 26px;
  right: 22px;
  color: var(--pak-muted);
}
.boq-banner {
  background: var(--navy);
  color: var(--pak-on-dark);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 70px;
  padding: 44px;
  border-radius: var(--pak-r-lg);
}
.boq-banner p {
  color: var(--pak-on-dark-muted);
  margin-top: 12px;
}
.boq-banner .eyebrow {
  color: var(--pak-on-dark-muted);
}
.boq-banner .paper {
  background: #ffffff0b;
  border: 1px solid #ffffff24;
  border-radius: var(--pak-r-lg);
  padding: 25px;
}
.paper-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff20;
  font-size: var(--pak-fs-body-sm);
}
.paper-row:last-child {
  border: 0;
}
.paper-row .icon {
  color: var(--yellow);
}
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--pak-page);
  min-width: 0;
}
.product-card:hover {
  border-color: var(--pak-on-dark-subtle);
}
.product-visual {
  height: 210px;
  background: var(--pak-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 25px;
}
.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.missing-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--pak-on-dark-subtle);
  gap: 15px;
  min-height: 180px;
  background: var(--soft);
  border-radius: var(--pak-r-lg);
  text-align: center;
  padding: 20px;
}
.missing-media .icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}
.missing-media span {
  font-size: var(--pak-fs-caption);
}
.product-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-brand {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.product-body h3 {
  font-size: var(--pak-fs-card-sm);
  line-height: 1.4;
  min-height: 49px;
}
.product-body .code {
  font-size: var(--pak-fs-label);
  color: var(--muted);
  margin-top: 9px;
}
.product-body .spec-line {
  font-size: var(--pak-fs-label);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 8px;
}
.badge {
  font-size: var(--pak-fs-eyebrow);
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--pak-r-sm);
  background: var(--pak-surface-2);
  color: var(--pak-muted);
}
.badge.warn {
  background: var(--pak-action-tint);
  color: var(--pak-notice-ink);
}
.badge.gray {
  background: var(--pak-surface-2);
  color: var(--pak-muted);
}
.brand-strip {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-size: var(--pak-fs-panel);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.story-card {
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  background: var(--pak-page);
}
.story-image {
  height: 215px;
  width: 100%;
  object-fit: cover;
  display: block;
}
.story-body {
  padding: 24px;
}
.story-body p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 10px;
}
.story-body .eyebrow {
  font-size: var(--pak-fs-eyebrow);
  margin-bottom: 12px;
}
.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 0;
  background: var(--pak-page);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer p {
  font-size: var(--pak-fs-body-sm);
  margin: 20px 0;
  max-width: 310px;
}
.footer h4 {
  margin-bottom: 16px;
  font-size: var(--pak-fs-body-sm);
}
.footer a:not(.brand) {
  display: block;
  font-size: var(--pak-fs-label);
  color: var(--muted);
  margin: 8px 0;
}
.footer a:hover {
  color: var(--blue);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  padding: 20px 0;
  font-size: var(--pak-fs-caption);
  color: var(--muted);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: var(--pak-fs-caption);
  color: var(--muted);
  padding: 26px 0;
}
.breadcrumb a:hover {
  color: var(--blue);
}
.page-intro {
  padding: 16px 0 32px;
  max-width: 800px;
}
.page-intro h1 {
  font-size: var(--pak-fs-title);
}
.page-intro p {
  margin-top: 15px;
}
.page-main {
  padding-bottom: 70px;
  min-height: 60vh;
}
.chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 18px 0 26px;
}
.chip {
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  background: var(--pak-page);
  color: var(--ink);
  padding: 10px 15px;
  min-height: 44px;
  font-size: var(--pak-fs-label);
}
.chip.active,
.chip:hover {
  background: var(--navy);
  color: var(--pak-on-dark);
  border-color: var(--navy);
}
.catalog-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 30px;
}
.filters {
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  padding: 20px;
  align-self: start;
  position: sticky;
  top: 110px;
}
.filters h3 {
  font-size: var(--pak-fs-card-sm);
  margin-bottom: 15px;
}
.filter-group {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: 15px;
}
.filter-group strong {
  font-size: var(--pak-fs-label);
  display: block;
  margin-bottom: 10px;
}
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--pak-fs-label);
  min-height: 44px;
  color: var(--pak-muted);
}
.check input {
  accent-color: var(--blue);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 15px;
  font-size: var(--pak-fs-label);
}
.toolbar select {
  max-width: 190px;
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: var(--pak-r);
  background: var(--pak-page);
  color: var(--ink);
}
.note {
  font-size: var(--pak-fs-caption);
  background: var(--pak-action-tint);
  color: var(--pak-notice-ink);
  padding: 12px 16px;
  border-radius: var(--pak-r);
  margin-bottom: 25px;
}
.empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--pak-border);
  border-radius: var(--pak-r-lg);
}
.empty .icon {
  width: 40px;
  height: 40px;
  color: var(--blue);
  margin-bottom: 15px;
}
.empty h2 {
  font-size: var(--pak-fs-panel);
  margin-bottom: 14px;
}
.empty p {
  max-width: 480px;
  margin: auto;
}
.empty .actions {
  justify-content: center;
}
.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: start;
  padding: 10px 0 48px;
}
.detail-hero h1 {
  font-size: var(--pak-fs-section);
}
.detail-hero p {
  margin-top: 18px;
}
.detail-hero .product-visual {
  height: 440px;
  border-radius: var(--pak-r-lg);
  border: 1px solid var(--line);
  padding: 50px;
}
.detail-hero .product-visual img {
  cursor: zoom-in;
}
.key-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.key-spec {
  padding: 12px 15px;
  background: var(--soft);
  border-radius: var(--pak-r);
}
.key-spec small {
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
  display: block;
}
.key-spec strong {
  font-size: var(--pak-fs-body-sm);
}
.anchor-nav {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
  margin-bottom: 35px;
}
.anchor-nav a {
  padding: 16px 0;
  font-size: var(--pak-fs-label);
  white-space: nowrap;
}
.anchor-nav a:first-child {
  border-bottom: 3px solid var(--yellow);
}
.reading {
  max-width: 850px;
}
.reading h2 {
  font-size: var(--pak-fs-panel);
  margin: 35px 0 18px;
}
.reading h3 {
  margin: 25px 0 12px;
}
.reading p {
  margin-bottom: 18px;
  line-height: 1.85;
}
.reading ul {
  color: var(--muted);
  padding-left: 23px;
}
.spec-table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: var(--pak-fs-body-sm);
}
.spec-table th,
.spec-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.spec-table th {
  font-weight: 500;
  width: 40%;
  background: var(--soft);
}
.document-row {
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: var(--pak-r);
  margin-bottom: 14px;
}
.document-row > .icon {
  color: var(--blue);
  height: 28px;
  width: 28px;
}
.document-row p {
  font-size: var(--pak-fs-label);
  margin: 5px 0 0;
}
.document-row .btn {
  margin-left: auto;
  flex-shrink: 0;
}
.form-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}
.form-panel {
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: var(--pak-r-lg);
}
.form-panel h2 {
  font-size: var(--pak-fs-panel);
  margin-bottom: 20px;
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.field.wide {
  grid-column: 1/-1;
}
.field label {
  font-size: var(--pak-fs-label);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--pak-border-input);
  border-radius: var(--pak-r);
  width: 100%;
  padding: 12px;
  background: var(--pak-page);
  color: var(--ink);
  min-height: 48px;
}
.field textarea {
  min-height: 115px;
  resize: vertical;
}
.field small {
  font-size: var(--pak-fs-caption);
  color: var(--muted);
}
.form-panel .check {
  align-items: flex-start;
  margin: 16px 0;
}
.form-panel .check input {
  margin-top: 5px;
}
.check a {
  text-decoration: underline;
  color: var(--blue);
}
.form-aside {
  padding: 30px;
  border-radius: var(--pak-r-lg);
  background: var(--soft);
}
.form-aside h3 {
  margin-bottom: 20px;
}
.steps {
  counter-reset: step;
}
.step {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.step:before {
  counter-increment: step;
  content: "0" counter(step);
  font-size: var(--pak-fs-body-sm);
  color: var(--blue);
  font-weight: 700;
  margin-top: 2px;
}
.step p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 7px;
}
.upload {
  position: relative;
  border: 1px dashed var(--pak-on-dark-subtle);
  background: var(--soft);
  border-radius: var(--pak-r);
  text-align: center;
  padding: 25px;
  cursor: pointer;
}
.upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.upload .icon {
  width: 28px;
  height: 28px;
  color: var(--blue);
  margin-bottom: 12px;
}
.upload strong {
  display: block;
  font-size: var(--pak-fs-body-sm);
}
.upload small {
  display: block;
}
.error {
  color: var(--pak-error);
  font-size: var(--pak-fs-body-sm);
  margin: 12px 0;
}
.file-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  padding: 12px;
  margin-top: 10px;
  font-size: var(--pak-fs-caption);
  word-break: break-word;
}
.file-item button {
  margin-left: auto;
}
.success-circle {
  width: 75px;
  height: 75px;
  background: var(--pak-success-tint);
  color: var(--pak-success);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 25px;
}
.success-circle .icon {
  width: 40px;
  height: 40px;
}
.thankyou {
  text-align: center;
  max-width: 700px;
  padding: 60px 0;
  margin: auto;
}
.thankyou h1 {
  font-size: var(--pak-fs-title);
}
.thankyou p {
  margin: 20px 0;
}
.thankyou .actions {
  justify-content: center;
}
.doc-cover {
  background: var(--navy);
  color: var(--pak-on-dark);
  aspect-ratio: 3/4;
  border-radius: var(--pak-r-sm);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 300px;
  border-left: 9px solid var(--yellow);
}
.doc-cover strong {
  font-size: var(--pak-fs-panel);
  line-height: 1.3;
}
.doc-cover span {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
}
.doc-cover small {
  color: var(--pak-on-dark-subtle);
}
.doc-card {
  display: flex;
  gap: 20px;
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: var(--pak-r-lg);
  align-items: center;
}
.doc-card .mini-cover {
  width: 70px;
  height: 93px;
  background: var(--navy);
  border-left: 5px solid var(--yellow);
  color: var(--pak-on-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--pak-fs-card);
}
.doc-card h3 {
  font-size: var(--pak-fs-card-sm);
}
.doc-card p {
  font-size: var(--pak-fs-label);
  margin-top: 7px;
}
.subgrid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 55px;
}
.toc {
  position: sticky;
  top: 110px;
  align-self: start;
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.toc a {
  display: block;
  font-size: var(--pak-fs-label);
  color: var(--muted);
  padding: 8px 0;
}
.toc strong {
  display: block;
  margin-bottom: 12px;
  font-size: var(--pak-fs-body-sm);
}
.map-panel {
  border: 1px solid var(--line);
  background: var(--soft);
  min-height: 280px;
  border-radius: var(--pak-r-lg);
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.map-panel .icon {
  height: 40px;
  width: 40px;
  color: var(--blue);
  margin-bottom: 20px;
}
.map-panel p {
  max-width: 350px;
  margin-top: 12px;
}
.list-row {
  display: grid;
  grid-template-columns: 70px 1fr 100px 44px;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.list-row img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.list-row h3 {
  font-size: var(--pak-fs-card-sm);
}
.list-row input[type="number"] {
  width: 85px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
}
.list-row textarea {
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--line);
  padding: 10px;
  font-size: var(--pak-fs-body);
  border-radius: var(--pak-r);
  resize: vertical;
}
.modal {
  border: none;
  border-radius: var(--pak-r-lg);
  padding: 0;
  width: min(670px, calc(100% - 30px));
  max-height: 90dvh;
  color: var(--ink);
  box-shadow: 0 20px 80px #172d3b40;
}
.modal::backdrop {
  background: #102d4070;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--pak-page);
  z-index: 2;
}
.modal-head h2 {
  font-size: var(--pak-fs-card);
}
.modal-body {
  padding: 25px;
}
.modal-body .form-panel {
  padding: 0;
  border: 0;
}
.modal img.zoom {
  max-width: 100%;
  width: 100%;
  height: 65vh;
  object-fit: contain;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 26px;
  background: var(--navy);
  color: var(--pak-on-dark);
  padding: 15px 20px;
  border-radius: var(--pak-r);
  z-index: 80;
  box-shadow: 0 5px 25px #12354a20;
  max-width: calc(100% - 40px);
  font-size: var(--pak-fs-body-sm);
}
.toast a {
  text-decoration: underline;
  color: var(--yellow);
  margin-left: 10px;
}
.mobile-only,
.mobile-bar {
  display: none;
}
.review-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.review-card {
  border: 1px solid var(--line);
  padding: 25px;
  border-radius: var(--pak-r-lg);
}
.review-card h3 {
  margin-bottom: 15px;
}
.review-card a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--pak-fs-label);
  color: var(--blue);
}
.review-card a:last-child {
  border: 0;
}
.swatches {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.swatch {
  width: 130px;
}
.swatch div {
  height: 70px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  margin-bottom: 8px;
}
.swatch p {
  font-size: var(--pak-fs-label);
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--pak-fs-card-sm);
}
.faq p {
  margin-top: 14px;
  max-width: 780px;
}
.lead-banner {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
  padding: 35px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--yellow);
  border-radius: var(--pak-r);
  margin-top: 45px;
}
.lead-banner h3 {
  font-size: var(--pak-fs-panel);
}
.lead-banner p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 8px;
}
.lead-banner .btn {
  flex-shrink: 0;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 25px 0;
}
.pagination a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  font-size: var(--pak-fs-label);
}
.pagination a.active {
  background: var(--navy);
  color: var(--pak-on-dark);
}
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
}
.admin-side {
  background: var(--navy);
  padding: 25px;
  border-radius: var(--pak-r-lg);
  color: var(--pak-on-dark);
  align-self: start;
}
.admin-side a {
  display: block;
  padding: 12px 0;
  font-size: var(--pak-fs-label);
  color: var(--pak-on-dark-muted);
}
.metric {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
}
.metric strong {
  font-size: var(--pak-fs-stat);
  display: block;
  margin-top: 10px;
}
.metric small {
  color: var(--muted);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pak-fs-label);
}
.admin-table th,
.admin-table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 17px 12px;
}
.admin-table th {
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
  background: var(--soft);
}
.table-scroll {
  overflow: auto;
}
.skip {
  position: absolute;
  top: -80px;
  left: 16px;
  background: var(--navy);
  color: var(--pak-on-dark);
  padding: 15px;
  z-index: 100;
}
.skip:focus {
  top: 15px;
}
body:has(dialog[open]) {
  overflow: hidden;
}
.mobile-menu-links a {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu-links .btn {
  margin-top: 25px;
}
dialog[open] {
  animation: appear 0.15s ease;
}
@keyframes appear {
  from {
    opacity: 0.5;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1400px) {
  .hero {
    gap: 70px;
  }
  .hero-image img {
    height: 490px;
  }
}
@media (max-width: 1180px) {
  .nav {
    gap: 14px;
    font-size: var(--pak-fs-label);
  }
  .header-inner {
    gap: 15px;
  }
  .brand strong {
    font-size: 16px;
  }
  .head-actions .btn {
    padding: 10px 12px;
  }
  .brand img {
    width: 45px;
  }
  .hero {
    gap: 35px;
  }
  .hero h1 {
    font-size: var(--pak-fs-title);
  }
  .grid.four {
    gap: 16px;
  }
  .catalog-layout .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1023px) {
  .nav {
    display: none;
  }
  .head-actions {
    margin-left: auto;
  }
  .mobile-only {
    display: inline-flex;
  }
  .hero h1 {
    font-size: var(--pak-fs-title);
  }
  .hero-image img {
    height: 410px;
  }
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audience {
    padding: 18px 14px;
    gap: 10px;
  }
  .audience small {
    font-size: var(--pak-fs-body-sm);
  }
  .audience .arrow {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 25px;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .boq-banner {
    gap: 30px;
  }
  .detail-hero {
    gap: 30px;
  }
  .detail-hero h1 {
    font-size: var(--pak-fs-section);
  }
  .subgrid {
    grid-template-columns: 180px 1fr;
    gap: 30px;
  }
  .form-layout {
    gap: 24px;
  }
  .form-panel {
    padding: 25px;
  }
  .admin-layout {
    grid-template-columns: 170px 1fr;
  }
  .admin-layout .grid.four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .demo {
    font-size: var(--pak-fs-caption);
    line-height: 1.5;
  }
  .demo a {
    margin-left: 5px;
  }
  .utility {
    display: none;
  }
  .header-inner {
    height: 68px;
    gap: 8px;
  }
  .brand img {
    width: 46px;
    height: 33px;
  }
  .brand strong {
    font-size: 16px;
  }
  .brand small {
    display:none;
    letter-spacing: var(--pak-track-caps);
  }
  .head-actions {
    gap: 6px;
  }
  .head-actions > .btn {
    display: none;
  }
  .head-actions .list-head {
    display: none;
  }
  .icon-btn {
    width: 44px;
    height: 44px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 28px 0;
    gap: 26px;
  }
  .hero h1 {
    font-size: var(--pak-fs-title);
    letter-spacing: var(--pak-track-tight);
  }
  .hero p {
    font-size: var(--pak-fs-lead);
    margin-top: 16px;
  }
  .hero .actions {
    gap: 10px;
    margin-top: 20px;
  }
  .hero .actions .btn {
    flex: 1;
    padding: 11px 12px;
  }
  .hero-image img {
    height: 300px;
  }
  .hero-label {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px;
  }
  .hero-label strong {
    font-size: var(--pak-fs-card-sm);
  }
  .eyebrow {
    font-size: var(--pak-fs-eyebrow);
    letter-spacing: var(--pak-track-caps);
    margin-bottom: 12px;
  }
  .search-wrap {
    margin-top: 24px;
  }
  .searchbox .btn {
    padding: 10px;
    min-width: 44px;
  }
  .search-hint {
    font-size: var(--pak-fs-caption);
  }
  .audiences {
    grid-template-columns: 1fr;
    margin: 0;
  }
  .audience {
    padding: 17px 20px;
  }
  .audience + .audience {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .audience small {
    font-size: var(--pak-fs-body-sm);
  }
  .audience .arrow {
    display: block;
  }
  .section {
    padding: 40px 0;
  }
  .section-head {
    align-items: start;
    gap: 10px;
    margin-bottom: 22px;
  }
  .section-head h2 {
    font-size: var(--pak-fs-section);
  }
  .section-head p {
    font-size: var(--pak-fs-body);
  }
  .section-head .text-link {
    font-size: var(--pak-fs-label);
    white-space: nowrap;
  }
  .grid {
    gap: 14px;
  }
  .grid.three {
    grid-template-columns: 1fr;
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
  .category-card {
    padding: 18px;
  }
  .category-card h3 {
    font-size: var(--pak-fs-card);
  }
  .category-card p {
    font-size: var(--pak-fs-body-sm);
  }
  .category-card .symbol {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
  }
  .category-card .arrow {
    top: 18px;
    right: 12px;
    width: 16px;
  }
  .boq-banner {
    grid-template-columns: 1fr;
    padding: 27px;
    gap: 22px;
  }
  .boq-banner h2 {
    font-size: var(--pak-fs-section);
  }
  .boq-banner .paper {
    padding: 16px;
  }
  .boq-banner .actions .btn {
    width: 100%;
  }
  .product-visual {
    height: 155px;
    padding: 18px;
  }
  .product-body {
    padding: 13px;
  }
  .product-body h3 {
    font-size: var(--pak-fs-card-sm);
    min-height: 44px;
  }
  .product-brand {
    font-size: var(--pak-fs-eyebrow);
  }
  .product-body .spec-line,
  .product-body .code {
    font-size: var(--pak-fs-label);
  }
  .product-bottom .text-link {
    font-size: var(--pak-fs-label);
  }
  .product-bottom {
    gap: 4px;
  }
  .product-bottom .icon-btn {
    height: 44px;
    width: 44px;
  }
  .product-bottom .icon {
    width: 18px;
  }
  .brand-strip {
    gap: 22px;
    justify-content: center;
  }
  .wordmark {
    font-size: var(--pak-fs-panel);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer-grid > div:last-child {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 100px;
  }
  .footer {
    padding-top: 35px;
  }
  .breadcrumb {
    padding: 20px 0;
    font-size: var(--pak-fs-caption);
  }
  .page-intro {
    padding-top: 6px;
  }
  .page-intro h1 {
    font-size: var(--pak-fs-title);
  }
  .catalog-layout {
    grid-template-columns: 1fr;
  }
  .filters {
    display: none;
    position: static;
  }
  .catalog-layout .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolbar {
    flex-wrap: wrap;
    font-size: var(--pak-fs-label);
  }
  .toolbar select {
    font-size: var(--pak-fs-body);
    max-width: 170px;
  }
  .chips {
    gap: 7px;
  }
  .chip {
    font-size: var(--pak-fs-label);
    padding: 8px 12px;
  }
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .detail-hero .product-visual {
    height: 310px;
    padding: 35px;
  }
  .detail-hero h1 {
    font-size: var(--pak-fs-section);
  }
  .key-specs {
    gap: 10px;
  }
  .detail-hero .actions .btn {
    width: 100%;
  }
  .anchor-nav {
    gap: 23px;
  }
  .form-layout {
    grid-template-columns: 1fr;
  }
  .form-panel {
    padding: 22px;
  }
  .fields {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: var(--pak-fs-body);
  }
  .form-aside {
    order: 2;
    padding: 25px;
  }
  .subgrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 10px;
  }
  .toc strong {
    width: 100%;
  }
  .toc a {
    padding: 4px 0;
  }
  .document-row {
    padding: 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .document-row .btn {
    margin-left: 44px;
  }
  .doc-card {
    padding: 17px;
    gap: 15px;
  }
  .doc-cover {
    max-width: 240px;
    margin: auto;
    width: 100%;
  }
  .list-row {
    grid-template-columns: 45px 1fr 44px;
    gap: 10px;
  }
  .list-row img {
    width: 45px;
    height: 45px;
  }
  .list-row > label {
    grid-column: 2;
  }
  .list-row > .icon-btn {
    grid-column: 3;
    grid-row: 1;
  }
  .list-row h3 {
    font-size: var(--pak-fs-card-sm);
  }
  .lead-banner {
    padding: 24px;
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
  .lead-banner .btn {
    width: 100%;
  }
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    border-top: 1px solid var(--line);
    background: var(--pak-page);
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 10px;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px #12354a08;
  }
  .mobile-bar a {
    font-size: var(--pak-fs-label);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 45px;
  }
  .mobile-bar .btn {
    font-size: var(--pak-fs-label);
  }
  .toast {
    bottom: 85px;
    right: 16px;
  }
  .modal {
    max-height: 94dvh;
  }
  .modal-head {
    padding: 17px;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-head h2 {
    font-size: var(--pak-fs-card);
  }
  .spec-table th,
  .spec-table td {
    padding: 12px;
    font-size: var(--pak-fs-body-sm);
  }
  .thankyou {
    padding-top: 35px;
  }
  .thankyou h1 {
    font-size: var(--pak-fs-title);
  }
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-side {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 18px;
  }
  .admin-side strong {
    width: 100%;
  }
  .admin-side a {
    padding: 5px;
  }
  .review-card {
    padding: 20px;
  }
  .page-main {
    padding-bottom: 40px;
  }
  .image-caption {
    font-size: var(--pak-fs-caption);
  }
  .story-image {
    height: 230px;
  }
  .missing-media {
    min-height: 150px;
  }
  .mobile-menu-links a {
    font-size: var(--pak-fs-body);
  }
}
@media (max-width: 370px) {
  .brand strong {
    font-size: 14px;
  }
  .brand img {
    width: 38px;
  }
  .header-inner {
    gap: 4px;
  }
  .head-actions {
    gap: 4px;
  }
  .hero h1 {
    font-size: var(--pak-fs-title);
  }
  .product-bottom {
    flex-wrap: wrap;
  }
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .actions .btn {
    width: 100%;
  }
  .head-actions .icon-btn {
    width: 44px;
  }
  .section-head {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .header,
  .utility,
  .demo,
  .mobile-bar,
  .footer,
  .review-nav,
  .btn,
  .head-actions {
    display: none !important;
  }
  .wrap {
    width: 100%;
  }
  .section {
    padding: 25px 0;
  }
  body {
    font-size: 12pt;
  }
  .page-main {
    padding: 0;
  }
  .grid {
    break-inside: avoid;
  }
}

[hidden] {
  display: none !important;
}
.hero-image img {
  object-position: 38% center;
}
.note a {
  text-decoration: underline;
}
.reading ol {
  color: var(--muted);
  padding-left: 24px;
}
.reading li {
  margin: 12px 0;
}

.mega summary {
  list-style: none;
  cursor: pointer;
  padding: 31px 0;
  white-space: nowrap;
}
.mega summary:after {
  content: "⌄";
  margin-left: 5px;
}
.mega[open] summary {
  color: var(--blue);
}
.mega-panel {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 64px));
  padding: 28px;
  background: var(--pak-page);
  border: 1px solid var(--line);
  box-shadow: 0 18px 30px #12354a20;
  border-radius: 0 0 var(--pak-r-lg) var(--pak-r-lg);
}
.nav .mega-panel a {
  padding: 15px;
  display: block;
  white-space: normal;
  border-radius: var(--pak-r);
}
.nav .mega-panel a:hover {
  background: var(--soft);
}
.mega-panel strong {
  display: block;
  margin-top: 12px;
}
.mega-panel small {
  display: block;
  color: var(--muted);
  font-size: var(--pak-fs-caption);
  margin-top: 5px;
  font-weight: 400;
}
.mega-bottom {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 30px;
}
.nav .mega-bottom a {
  color: var(--blue);
}
/* Editorial landing pages */
.landing {
  background: var(--pak-page);
}
.landing h1 {
  font-size: var(--pak-fs-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--pak-track-tight);
}
.landing h1 em,
.landing .lp-title em {
  font-style: normal;
  color: var(--pak-brand);
  background:linear-gradient(transparent 62%, var(--pak-accent-mark) 62%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 0.06em;
}
.lp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
  padding: 35px 0 62px;
}
.lp-hero > div > p {
  font-size: var(--pak-fs-lead);
  line-height: 1.85;
  margin-top: 24px;
  max-width: 545px;
}
.lp-hero .actions {
  margin-top: 28px;
}
.lp-hero-figure {
  margin: 0;
  position: relative;
  padding-bottom: 28px;
  min-width: 0;
}
.lp-hero-figure > img {
  width: 100%;
  height: 490px;
  object-fit: cover;
  display: block;
  border-radius: var(--pak-r-lg);
}
.lp-hero-figure figcaption {
  font-size: var(--pak-fs-caption);
  color: var(--muted);
  margin-top: 9px;
  line-height: 1.6;
}
.lp-photo-tag {
  position: absolute;
  bottom: 76px;
  left: 0;
  background: var(--pak-page);
  padding: 19px 25px;
  max-width: 90%;
  border-left: 4px solid var(--yellow);
  box-shadow: 0 4px 16px #12354a12;
}
.lp-photo-tag span {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
  display: block;
  color: var(--muted);
}
.lp-photo-tag strong {
  display: block;
  font-size: var(--pak-fs-card-sm);
  margin-top: 4px;
}
.lp-established {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  margin-top: 35px;
}
.lp-established > span {
  font-size: var(--pak-fs-stat);
  line-height: 1.05;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: var(--pak-track-tight);
}
.lp-established p {
  font-size: var(--pak-fs-body-sm);
  line-height: 1.6;
}
.lp-established small {
  font-size: var(--pak-fs-eyebrow);
}
.lp-nav {
  position: sticky;
  top: 86px;
  z-index: 20;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
}
.lp-nav > .wrap {
  display: flex;
  gap: 35px;
  overflow: auto;
  scrollbar-width: thin;
}
.lp-nav a {
  font-size: var(--pak-fs-label);
  padding: 19px 0;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  min-height: 60px;
}
.lp-nav a.current {
  border-color: var(--yellow);
  color: var(--blue);
  font-weight: 700;
}
.lp-progress {
  height: 2px;
  background: var(--pak-surface);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
}
.lp-progress span {
  display: block;
  height: 100%;
  background: var(--yellow);
  transform-origin: left;
  transform: scaleX(0);
}
.landing section[id] {
  scroll-margin-top: 170px;
}
.lp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.lp-duo p {
  font-size: var(--pak-fs-body);
  line-height: 1.85;
}
.lp-audience-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.lp-audience-tags span {
  border-bottom: 2px solid var(--yellow);
  padding: 7px 0;
  margin-right: 17px;
  font-size: var(--pak-fs-label);
  font-weight: 600;
}
.lp-sector-card {
  display: block;
  background: var(--pak-page);
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.lp-sector-card:hover {
  border-color: var(--pak-on-dark-subtle);
  box-shadow: 0 8px 25px #12354a0d;
}
.lp-sector-image {
  height: 240px;
  position: relative;
  overflow: hidden;
  background: var(--soft);
}
.lp-sector-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.lp-sector-card:hover .lp-sector-image img {
  transform: scale(1.035);
}
.lp-sector-number {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--pak-page);
  color: var(--navy);
  padding: 5px 11px;
  font-size: var(--pak-fs-label);
  font-weight: 700;
  border-radius: var(--pak-r-sm);
}
.lp-sector-body {
  padding: 26px;
}
.lp-sector-body > small {
  font-size: var(--pak-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--pak-track-caps);
  color: var(--blue);
  display: block;
  margin-bottom: 10px;
}
.lp-sector-body h3 {
  font-size: var(--pak-fs-card);
}
.lp-sector-body p {
  margin-top: 14px;
  font-size: var(--pak-fs-body-sm);
  line-height: 1.8;
}
.lp-sector-body .text-link {
  margin-top: 15px;
}
.lp-locations > div {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.lp-locations > .icon,
.lp-locations .icon {
  color: var(--blue);
  margin-top: 4px;
}
.lp-locations strong {
  font-size: var(--pak-fs-card-sm);
}
.lp-locations small {
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
}
.lp-document-stack {
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
}
.lp-document-main {
  display: block;
  background: var(--navy);
  color: var(--pak-on-dark);
  padding: 35px;
  border-left: 7px solid var(--yellow);
  border-radius: var(--pak-r);
  box-shadow: 12px 12px 0 var(--pak-border);
}
.lp-document-main .eyebrow {
  color: var(--pak-on-dark-muted);
  font-size: var(--pak-fs-eyebrow);
}
.lp-document-main h3 {
  font-size: var(--pak-fs-panel);
  line-height: 1.3;
}
.lp-doc-date {
  font-size: var(--pak-fs-stat);
  font-weight: 700;
  letter-spacing: var(--pak-track-tight);
  color: var(--pak-on-dark-muted);
  margin: 25px 0;
  line-height: 1.05;
}
.lp-document-main > span {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ffffff30;
  padding-top: 15px;
  font-size: var(--pak-fs-body-sm);
}
.lp-document-support {
  margin-top: 32px;
  padding: 18px 0;
}
.lp-document-support > div {
  font-size: var(--pak-fs-body-sm);
  font-weight: 600;
}
.lp-document-support p {
  font-size: var(--pak-fs-label);
  margin-top: 7px;
}
.lp-evidence {
  border-top: 1px solid var(--pak-border);
  margin-top: 35px;
  padding-top: 22px;
}
.lp-evidence summary {
  cursor: pointer;
  font-size: var(--pak-fs-card-sm);
  font-weight: 600;
}
.lp-evidence p {
  max-width: 830px;
  margin-top: 18px;
}
.lp-end {
  padding: 48px;
  background: var(--navy);
  color: var(--pak-on-dark);
  border-radius: var(--pak-r-lg);
}
.lp-end .eyebrow {
  color: var(--pak-on-dark-muted);
}
.lp-end h2 {
  font-size: var(--pak-fs-section);
  line-height: 1.25;
}
.lp-end p {
  color: var(--pak-on-dark-muted);
  margin-top: 17px;
}
.lp-end .actions {
  margin-top: 27px;
}
.lp-title {
  padding: 32px 0 48px;
}
.lp-title h1 {
  font-size: var(--pak-fs-display);
  max-width: 1000px;
}
.lp-title-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 28px;
}
.lp-title-bottom p {
  max-width: 610px;
  font-size: var(--pak-fs-lead);
  line-height: 1.8;
}
.lp-title-bottom > .btn {
  flex-shrink: 0;
}
.lp-brand-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lp-brand-tabs a {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 23px;
  font-size: var(--pak-fs-body);
  font-weight: 600;
}
.lp-brand-tabs a + a {
  border-left: 1px solid var(--line);
}
.lp-brand-tabs a:hover {
  background: var(--soft);
}
.lp-brand-tabs span {
  color: var(--muted);
  font-size: var(--pak-fs-eyebrow);
  font-weight: 400;
}
.lp-brand-tabs .icon {
  margin-left: auto;
}
.lp-inline-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--blue);
  border-radius: var(--pak-r);
  margin-bottom: 20px;
}
.lp-brand-signature {
  padding-top: 22px;
  margin-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px;
}
.lp-brand-signature strong {
  font-size: var(--pak-fs-panel);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lp-brand-signature span {
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
  max-width: 160px;
  line-height: 1.6;
}
.lp-group {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.lp-group:hover {
  background: var(--pak-page);
  border-color: var(--pak-on-dark-subtle);
}
.lp-group-num {
  position: absolute;
  top: 25px;
  right: 23px;
  font-size: var(--pak-fs-eyebrow);
  color: var(--pak-muted);
}
.lp-group > .icon {
  width: 28px;
  height: 28px;
  color: var(--blue);
  margin-bottom: 26px;
}
.lp-group h3 {
  font-size: var(--pak-fs-card);
}
.lp-group p {
  font-size: var(--pak-fs-body-sm);
  line-height: 1.8;
  margin: 14px 0;
}
.lp-group .text-link {
  margin-top: auto;
}
.lp-source {
  border-top: 1px solid var(--line);
  padding: 24px 0 40px;
  color: var(--muted);
  font-size: var(--pak-fs-caption);
  max-width: 960px;
}
.lp-source a {
  color: var(--blue);
  text-decoration: underline;
}
.lp-source .icon {
  width: 18px;
  height: 18px;
}
.lp-teasers {
  padding-top: 15px;
}
.lp-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  background: var(--pak-page);
  transition: background 0.2s;
}
.lp-teaser:hover {
  background: var(--soft);
}
.lp-teaser h2 {
  font-size: var(--pak-fs-panel);
}
.lp-teaser p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 13px;
}
.lp-teaser-icon {
  display: grid;
  place-items: center;
  background: var(--pak-action-tint);
  border-radius: 50%;
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
.lp-teaser-icon .icon {
  width: 28px;
  height: 28px;
  color: var(--navy);
}
.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal-ready.in-view {
  opacity: 1;
  transform: none;
}
@media (max-width: 1100px) {
  .lp-hero {
    gap: 35px;
  }
  .landing h1 {
    font-size: var(--pak-fs-display);
  }
  .lp-hero-figure > img {
    height: 440px;
  }
  .lp-duo {
    gap: 45px;
  }
  .lp-nav > .wrap {
    gap: 24px;
  }
  .lp-sector-image {
    height: 205px;
  }
  .lp-sector-body {
    padding: 22px;
  }
  .lp-sector-body h3 {
    font-size: var(--pak-fs-card);
  }
  .lp-title-bottom {
    align-items: start;
  }
  .lp-title-bottom p {
    font-size: var(--pak-fs-lead);
  }
  .lp-title-bottom .btn {
    max-width: 230px;
  }
  .lp-brand-signature {
    flex-wrap: wrap;
    gap: 7px;
  }
  .lp-teaser {
    padding: 25px;
  }
  .lp-teaser-icon {
    width: 50px;
    height: 50px;
  }
  .lp-teaser h2 {
    font-size: var(--pak-fs-panel);
  }
}
@media (max-width: 767px) {
  .lp-hero {
    grid-template-columns: 1fr;
    padding: 16px 0 32px;
    gap: 28px;
  }
  .landing h1 {
    font-size: var(--pak-fs-display);
    letter-spacing: var(--pak-track-tight);
  }
  .lp-hero > div > p {
    font-size: var(--pak-fs-lead);
    margin-top: 20px;
  }
  .lp-hero .actions {
    margin-top: 23px;
    display: grid;
    grid-template-columns: 1fr;
  }
  .lp-hero .actions .btn {
    width: 100%;
  }
  .lp-hero-figure > img {
    height: 310px;
  }
  .lp-hero-figure {
    padding-bottom: 17px;
  }
  .lp-photo-tag {
    bottom: 65px;
    padding: 14px 18px;
  }
  .lp-photo-tag strong {
    font-size: var(--pak-fs-card-sm);
  }
  .lp-established {
    padding-top: 19px;
    margin-top: 26px;
  }
  .lp-established > span {
    font-size: var(--pak-fs-stat);
  }
  .lp-established p {
    font-size: var(--pak-fs-body-sm);
  }
  .lp-nav {
    top: 68px;
  }
  .lp-nav > .wrap {
    gap: 25px;
  }
  .lp-nav a {
    font-size: var(--pak-fs-label);
    padding: 15px 0;
    min-height: 54px;
  }
  .landing section[id] {
    scroll-margin-top: 140px;
  }
  .lp-duo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .lp-sector-image {
    height: 240px;
  }
  .lp-sector-body h3 {
    font-size: var(--pak-fs-card);
  }
  .lp-sector-body {
    padding: 24px;
  }
  .lp-document-stack {
    margin-top: 0;
    max-width: 340px;
  }
  .lp-document-main {
    padding: 28px;
  }
  .lp-document-main h3 {
    font-size: var(--pak-fs-panel);
  }
  .lp-doc-date {
    font-size: var(--pak-fs-stat);
  }
  .lp-end {
    padding: 30px 25px;
  }
  .lp-end h2 {
    font-size: var(--pak-fs-section);
  }
  .lp-end .actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .lp-end .actions .btn {
    width: 100%;
  }
  .lp-title {
    padding: 15px 0 30px;
  }
  .lp-title h1 {
    font-size: var(--pak-fs-display);
  }
  .lp-title-bottom {
    display: block;
    margin-top: 24px;
  }
  .lp-title-bottom > .btn {
    margin-top: 23px;
    max-width: none;
    width: 100%;
  }
  .lp-brand-tabs {
    grid-template-columns: 1fr;
  }
  .lp-brand-tabs a + a {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .lp-brand-tabs a {
    padding: 16px 10px;
    font-size: var(--pak-fs-body);
  }
  .lp-brand-signature {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
  }
  .lp-brand-signature strong {
    font-size: var(--pak-fs-panel);
  }
  .lp-group {
    padding: 20px;
  }
  .lp-group h3 {
    font-size: var(--pak-fs-card);
  }
  .lp-group p {
    font-size: var(--pak-fs-body-sm);
  }
  .lp-group .text-link {
    font-size: var(--pak-fs-label);
  }
  .lp-teaser {
    padding: 25px;
    gap: 15px;
  }
  .lp-teaser h2 {
    font-size: var(--pak-fs-panel);
  }
  .lp-teasers {
    padding-top: 0;
  }
  .lp-source {
    padding-bottom: 35px;
  }
  .lp-audience-tags {
    gap: 5px;
  }
  .lp-sector-bolt .lp-hero-figure > img,
  .lp-sector-water .lp-hero-figure > img {
    object-fit: contain;
    background: var(--soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lp-sector-card:hover .lp-sector-image img {
    transform: none;
  }
  .lp-progress {
    display: none;
  }
}
@media print {
  .lp-nav,
  .lp-progress {
    display: none;
  }
  .reveal-ready {
    opacity: 1 !important;
    transform: none !important;
  }
  .lp-hero {
    gap: 25px;
  }
  .lp-hero-figure > img {
    height: 260px;
  }
  .lp-document-main {
    box-shadow: none;
  }
  .lp-end {
    color: var(--navy);
    background: var(--pak-page);
    border: 1px solid var(--line);
  }
}

.lp-sector-bolt .lp-hero-figure > img {
  object-fit: contain;
  background: var(--soft);
}
.lp-sector-card[href*="schneider"] .lp-sector-image img {
  object-fit: contain;
  background: var(--soft);
}
.lp-hero:has(.lp-established) .lp-hero-figure > img {
  object-position: right center;
}
.news-page-title {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.news-page-title > .text-link {
  max-width: 230px;
  flex-shrink: 0;
}
.news-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 45px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--soft);
}
.news-feature figure {
  margin: 0;
  position: relative;
}
.news-feature img {
  width: 100%;
  height: 350px;
  display: block;
  object-fit: cover;
}
.news-feature figcaption {
  position: absolute;
  left: 15px;
  bottom: 14px;
  background: var(--pak-page);
  padding: 5px 10px;
  font-size: var(--pak-fs-caption);
}
.news-feature > div {
  padding: 25px 30px 25px 0;
}
.news-feature p {
  margin-top: 20px;
  line-height: 1.8;
}
.news-feature small {
  display: block;
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
  margin-top: 18px;
}
.news-card {
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  background: var(--pak-page);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.news-card:hover {
  border-color: var(--pak-on-dark-subtle);
  box-shadow: 0 6px 20px #12354a0c;
}
.news-card-mark {
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.news-card-mark .icon {
  height: 28px;
  width: 28px;
  color: var(--blue);
}
.news-card-mark span {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
  color: var(--muted);
}
.news-card-body {
  padding: 25px;
}
.news-card-body h3 {
  margin-top: 16px;
  font-size: var(--pak-fs-card);
}
.news-card-body p {
  font-size: var(--pak-fs-body-sm);
  margin: 14px 0;
}
.news-card-body small {
  font-size: var(--pak-fs-eyebrow);
  color: var(--muted);
  display: block;
  margin: 15px 0;
}
.news-knowledge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 35px;
  background: var(--soft);
  border-radius: var(--pak-r-lg);
}
.news-knowledge p {
  margin: 15px 0;
}
.news-knowledge h2 {
  font-size: var(--pak-fs-panel);
}
.news-knowledge .text-link {
  display: flex;
}
.news-article-head {
  max-width: 870px;
  margin: 15px auto 30px;
}
.news-article-head h1 {
  font-size: var(--pak-fs-title);
  margin-top: 22px;
  line-height: 1.2;
}
.news-article-head > p {
  font-size: var(--pak-fs-lead);
  margin-top: 23px;
}
.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 17px;
  font-size: var(--pak-fs-caption);
  color: var(--muted);
}
.news-wide-photo {
  max-width: 1000px;
  margin: 0 auto 40px;
}
.news-wide-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--pak-r-lg);
}
.news-wide-photo figcaption {
  font-size: var(--pak-fs-caption);
  color: var(--muted);
  margin-top: 7px;
}
.news-event-facts {
  border: 1px solid var(--line);
  border-radius: var(--pak-r);
  margin: 25px 0;
}
.news-event-facts > div {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--pak-fs-body-sm);
}
.news-event-facts > div:last-child {
  border: 0;
}
.news-event-facts strong {
  min-width: 90px;
}
.news-event-facts span {
  color: var(--muted);
}
@media (max-width: 767px) {
  .news-page-title {
    display: block;
    margin-bottom: 25px;
  }
  .news-page-title > .text-link {
    max-width: none;
  }
  .news-feature {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .news-feature img {
    height: 240px;
  }
  .news-feature > div {
    padding: 25px;
  }
  .news-feature h2 {
    font-size: var(--pak-fs-panel);
  }
  .news-knowledge {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 30px;
  }
  .news-article-head h1 {
    font-size: var(--pak-fs-title);
  }
  .news-article-head > p {
    font-size: var(--pak-fs-lead);
  }
  .news-meta {
    gap: 8px;
  }
  .news-event-facts > div {
    flex-wrap: wrap;
  }
  .news-event-facts span {
    flex-basis: 100%;
    padding-left: 36px;
  }
}
/* PHU AN KHANG high-fidelity home — Design System 1.0 */
.hf-home {
  --muted: var(--pak-muted);
  font-family: var(--pak-font);
}
.hf-home p {
  line-height: 1.75;
}
.hf-home .section {
  padding: 88px 0;
}
.hf-home .eyebrow {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
}
.hf-home h2 {
  font-size: var(--pak-fs-section);
  letter-spacing: var(--pak-track-tight);
  line-height: 1.25;
}
.hf-home .section-head {
  margin-bottom: 36px;
}
.hf-home .image-caption {
  font-size: var(--pak-fs-caption);
  line-height: 1.6;
  margin-top: 16px;
}
.hf-home .hf-soft {
  background: var(--pak-surface);
}
.hf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
  align-items: center;
}
.hf-intro {
  padding: 16px 0;
}
.hf-intro h1 {
  font-size: var(--pak-fs-display);
  letter-spacing: var(--pak-track-tight);
  line-height: 1.14;
}
.hf-intro h1 span {
  color: var(--pak-brand);
  font-style:normal;
  background:linear-gradient(transparent 62%, var(--pak-accent-mark) 62%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 0.06em;
}
.hf-intro > p {
  max-width: 510px;
  margin-top: 24px;
  font-size: var(--pak-fs-lead);
}
.hf-intro .actions {
  margin-top: 28px;
}
.hf-search {
  margin-top: 36px;
  max-width: 510px;
}
.hf-search > label {
  font-size: var(--pak-fs-label);
  font-weight: 700;
}
.hf-search .search-wrap {
  margin-top: 10px;
}
.hf-search .searchbox {
  border-color: var(--pak-border-input);
  box-shadow: 0 4px 16px #12354a08;
}
.hf-search .searchbox input {
  font-size: var(--pak-fs-body);
}
.hf-search .search-hint {
  font-size: var(--pak-fs-caption);
  line-height: 1.8;
}
.hf-hero-visual {
  margin: 0;
  position: relative;
  min-width: 0;
  align-self: stretch;
  min-height: 580px;
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  background: var(--pak-surface-2);
}
.hf-hero-visual > img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: 44% center;
}
.hf-hero-visual > figcaption {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  width: fit-content;
  background: #ffffffec;
  padding: 6px 10px;
  border-radius: var(--pak-r-sm);
  font-size: var(--pak-fs-caption);
  color: var(--pak-text);
}
.hf-visual-link {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: var(--pak-page);
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--pak-action);
  border-radius: var(--pak-r);
  box-shadow: 0 12px 32px #12354a18;
}
.hf-visual-link small {
  display: block;
  font-size: var(--pak-fs-label);
  letter-spacing: var(--pak-track-caps);
  color: var(--pak-muted);
  margin-bottom: 6px;
}
.hf-visual-link strong {
  font-size: var(--pak-fs-card);
  line-height: 1.35;
}
.hf-audiences {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pak-border);
  border-bottom: 1px solid var(--pak-border);
}
.hf-audiences > a {
  position: relative;
  padding: 28px 22px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.hf-audiences > a + a {
  border-left: 1px solid var(--pak-border);
}
.hf-audiences > a > .icon:first-of-type {
  width: 28px;
  height: 28px;
  color: var(--pak-link);
}
.hf-audiences > a > .icon:last-child {
  margin-left: auto;
  width: 18px;
}
.hf-audiences strong,
.hf-audiences small {
  display: block;
}
.hf-audiences strong {
  font-size: var(--pak-fs-card-sm);
}
.hf-audiences small {
  font-size: var(--pak-fs-body-sm);
  color: var(--pak-muted);
  margin-top: 4px;
}
.hf-index {
  display: none;
}
.hf-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hf-category {
  border: 1px solid var(--pak-border);
  border-radius: var(--pak-r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  background: var(--pak-page);
  transition:
    border-color 180ms,
    transform 180ms,
    box-shadow 180ms;
}
.hf-category > .icon:first-child {
  height: 28px;
  width: 28px;
  color: var(--pak-link);
}
.hf-category strong {
  display: block;
  font-size: var(--pak-fs-card-sm);
}
.hf-category small {
  display: block;
  color: var(--pak-muted);
  font-size: var(--pak-fs-body-sm);
  margin-top: 8px;
}
.hf-category > .icon:last-child {
  width: 18px;
  align-self: flex-end;
  margin-top: auto;
}
.hf-business {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hf-business-card {
  background: var(--pak-page);
  border: 1px solid var(--pak-border);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
}
.hf-business-image {
  height: 240px;
  position: relative;
  background: var(--pak-page);
  overflow: hidden;
}
.hf-business-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms var(--pak-ease);
}
.hf-business-card:not(:first-child) .hf-business-image img {
  object-fit: contain;
  padding: 16px;
}
.hf-business-image > span {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--pak-page);
  border-radius: var(--pak-r-sm);
  padding: 4px 9px;
  font-size: var(--pak-fs-eyebrow);
  font-weight: 700;
}
.hf-business-body {
  padding: 24px;
}
.hf-business-body > small {
  font-size: var(--pak-fs-body-sm);
  color: var(--pak-muted);
}
.hf-business-body h3 {
  font-size: var(--pak-fs-card);
  margin: 8px 0 16px;
}
.hf-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hf-products .product-card {
  box-shadow: none;
  border-radius: var(--pak-r-lg);
}
.hf-products .product-visual {
  height: 260px;
}
.hf-product-help {
  padding: 32px;
  background: var(--pak-surface);
  border: 1px solid var(--pak-border);
  border-radius: var(--pak-r-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hf-product-help h3 {
  font-size: var(--pak-fs-panel);
  line-height: 1.3;
}
.hf-product-help .text-link {
  margin-top: auto;
}
.hf-round {
  width: 56px;
  height: 56px;
  border: 1px solid var(--pak-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pak-page);
}
.hf-boq {
  background: var(--pak-brand);
  color: var(--pak-on-dark);
  padding: 56px;
  border-radius: var(--pak-r-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.hf-boq .eyebrow {
  color: var(--pak-action);
}
.hf-boq h2 {
  font-size: var(--pak-fs-section);
}
.hf-boq p {
  color: var(--pak-on-dark-muted);
  margin-top: 20px;
}
.hf-white-link {
  font-size: var(--pak-fs-label);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 12px 0;
}
.hf-checklist {
  border: 1px solid #ffffff38;
  padding: 28px;
  border-radius: var(--pak-r);
}
.hf-checklist h3 {
  font-size: var(--pak-fs-card);
  margin-bottom: 12px;
}
.hf-checklist > div {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #ffffff26;
}
.hf-checklist small {
  display: block;
  color: var(--pak-on-dark-muted);
  margin-top: 20px;
}
.hf-company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hf-company figure {
  margin: 0;
}
.hf-company img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--pak-r-lg);
}
.hf-company figcaption {
  font-size: var(--pak-fs-caption);
  color: var(--pak-muted);
  margin-top: 8px;
}
.hf-company p {
  margin-top: 24px;
}
.hf-company-links {
  margin-top: 28px;
}
.hf-company-links a {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--pak-border);
  padding: 18px 0;
  font-weight: 600;
}
.hf-docs {
  margin-top: 32px;
}
.hf-knowledge {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--pak-border);
}
.hf-knowledge .text-link {
  margin-left: auto;
  flex-shrink: 0;
}
.hf-last {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hf-home .news-card {
  background: var(--pak-page);
}
.hf-home a:focus-visible {
  outline: 3px solid var(--pak-focus);
  outline-offset: 4px;
}
.hf-home .searchbox:focus-within {
  outline: 3px solid var(--pak-focus);
  outline-offset: 3px;
}
@media (hover: hover) {
  .hf-category:hover {
    transform: translateY(-3px);
    border-color: var(--pak-on-dark-subtle);
    box-shadow: 0 8px 24px #12354a0c;
  }
  .hf-business-card:hover img {
    transform: scale(1.025);
  }
  .hf-audiences > a:hover {
    background: var(--pak-surface);
  }
  .hf-company-links a:hover {
    color: var(--pak-link);
  }
}
@media (min-width: 1024px) {
  .hf-intro {
    animation: pak-enter 450ms var(--pak-ease) both;
  }
  .hf-hero-visual {
    animation: pak-enter 600ms var(--pak-ease) both;
  }
}
@keyframes pak-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .hf-hero {
    gap: 28px;
  }
  .hf-intro h1 {
    font-size: var(--pak-fs-display);
  }
  .hf-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hf-audiences > a {
    padding: 24px 12px;
    gap: 10px;
  }
  .hf-audiences > a > .icon:last-child {
    display: none;
  }
  .hf-boq {
    gap: 32px;
    padding: 40px;
  }
  .hf-company {
    gap: 32px;
  }
  .hf-business-body {
    padding: 20px;
  }
  .hf-business-body h3 {
    font-size: var(--pak-fs-card);
  }
}
@media (max-width: 767px) {
  .hf-home .section {
    padding: 56px 0;
  }
  .hf-hero {
    grid-template-columns: 1fr;
    padding-top: 28px;
    padding-bottom: 32px;
    gap: 28px;
  }
  .hf-intro {
    padding: 0;
  }
  .hf-intro h1 {
    font-size: var(--pak-fs-display);
    letter-spacing: var(--pak-track-tight);
    line-height: 1.14;
  }
  .hf-intro h1 span br {
    display: none;
  }
  .hf-intro > p {
    font-size: var(--pak-fs-lead);
  }
  .hf-hero-visual {
    min-height: 340px;
  }
  .hf-visual-link {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 16px;
  }
  .hf-visual-link strong {
    font-size: var(--pak-fs-card);
  }
  .hf-audiences {
    grid-template-columns: 1fr;
  }
  .hf-audiences > a {
    padding: 20px 0;
  }
  .hf-audiences > a + a {
    border-left: 0;
    border-top: 1px solid var(--pak-border);
  }
  .hf-audiences > a > .icon:last-child {
    display: block;
  }
  .hf-home h2 {
    font-size: var(--pak-fs-section);
    letter-spacing: var(--pak-track-tight);
  }
  .hf-home .section-head {
    align-items: start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  .hf-categories {
    gap: 12px;
  }
  .hf-category {
    padding: 18px;
    gap: 16px;
  }
  .hf-category strong {
    font-size: var(--pak-fs-card-sm);
  }
  .hf-category small {
    font-size: var(--pak-fs-body-sm);
  }
  .hf-business,
  .hf-products {
    grid-template-columns: 1fr;
  }
  .hf-business-image {
    height: 230px;
  }
  .hf-business-body h3 {
    font-size: var(--pak-fs-card);
  }
  .hf-product-help {
    gap: 16px;
  }
  .hf-boq {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 28px;
  }
  .hf-boq h2 {
    font-size: var(--pak-fs-section);
  }
  .hf-checklist {
    padding: 20px;
  }
  .hf-company {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hf-company img {
    height: 280px;
  }
  .hf-knowledge {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hf-knowledge p {
    flex: 1;
  }
  .hf-knowledge .text-link {
    margin-left: 0;
    width: 100%;
  }
  .hf-last {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .hf-home .brand-strip {
    flex-wrap: wrap;
  }
  .hf-home .wordmark {
    min-width: 40%;
    text-align: center;
  }
  .hf-home .actions .btn {
    padding: 12px 16px;
  }
  .hf-search {
    margin-top: 28px;
  }
  .hf-home .eyebrow {
    letter-spacing: var(--pak-track-caps);
  }
  .hf-home .search-hint a {
    display: inline-block;
    min-height: 32px;
    padding-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hf-home * {
    animation: none !important;
    transition: none !important;
  }
  .hf-home a:hover,
  .hf-home a:hover img {
    transform: none !important;
  }
}
/* Motion 1.1: subtle feedback, no content hidden by default. */
.hf-home .hf-intro,
.hf-home .hf-hero-visual {
  animation: none;
}
.pak-home-motion .header {
  transition: box-shadow 160ms ease-out;
}
.pak-home-motion.pak-header-scrolled .header {
  box-shadow: 0 4px 14px #12354a0b;
}
.hf-stats {
  padding-top: 72px;
  padding-bottom: 8px;
}
.hf-stats-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.hf-sample-note {
  font-size: var(--pak-fs-caption);
  color: var(--pak-notice-ink) !important;
  background: var(--pak-action-tint);
  padding: 12px 16px;
  border-left: 3px solid var(--pak-action);
  border-radius: var(--pak-r-sm);
}
.hf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--pak-border);
  border-bottom: 1px solid var(--pak-border);
}
.hf-stat {
  padding: 32px 24px;
}
.hf-stat + .hf-stat {
  border-left: 1px solid var(--pak-border);
}
.hf-stat strong {
  display: block;
  color: var(--pak-brand);
  font-size: var(--pak-fs-stat);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-bottom: 8px;
}
.hf-stat > span {
  font-size: var(--pak-fs-body-sm);
  color: var(--pak-muted);
}
.hf-home .btn,
.hf-home .icon-btn {
  transition:
    background 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 160ms ease-out;
}
.hf-home .icon-btn:active {
  background: var(--pak-surface-2);
}
.hf-home [data-action="add"][aria-pressed="true"] {
  color: var(--pak-success);
  background: var(--pak-success-tint);
  border-color: var(--pak-success-line);
}
.hf-home .product-card {
  transition: border-color 180ms ease-out;
}
.hf-home .hf-audiences > a > .icon:last-child,
.hf-home .hf-company-links .icon,
.hf-home .text-link .icon,
.hf-home .hf-category > .icon:last-child {
  transition: transform 180ms ease-out;
}
.hf-home .hf-category:focus-visible {
  border-color: var(--pak-link);
}
.hf-list-count {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 19px;
  height: 19px;
  line-height: 19px;
  border-radius: var(--pak-r-lg);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--pak-fs-eyebrow);
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
}
.pak-home-motion .list-head {
  position: relative;
}
.pak-home-motion .autocomplete:not([hidden]) {
  animation: pak-pop 160ms ease-out;
}
.pak-home-motion .modal[open] {
  animation: pak-pop 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pak-home-motion .toast:not([hidden]) {
  animation: pak-pop 180ms ease-out;
}
.pak-home-motion:has(.modal[open]) {
  overflow: hidden;
}
.pak-home-motion .mobile-menu-links a {
  min-height: 44px;
}
@keyframes pak-pop {
  from {
    opacity: 0;
    translate: 0 6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .hf-home .hf-category:hover {
    transform: translateY(-2px);
  }
  .hf-home .product-card:hover {
    border-color: var(--pak-on-dark-subtle);
  }
  .hf-home .hf-audiences > a:hover > .icon:last-child,
  .hf-home .hf-company-links a:hover .icon,
  .hf-home .text-link:hover .icon,
  .hf-home .hf-category:hover > .icon:last-child {
    transform: translateX(4px);
  }
  .hf-home .news-card:hover h3 {
    color: var(--pak-link);
  }
}
.hf-home .hf-audiences > a:focus-visible > .icon:last-child,
.hf-home .hf-company-links a:focus-visible .icon,
.hf-home .text-link:focus-visible .icon {
  transform: translateX(4px);
}
@media (max-width: 767px) {
  .hf-stats {
    padding-top: 48px;
  }
  .hf-stats-heading {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }
  .hf-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }
  .hf-stat {
    padding: 24px 16px;
  }
  .hf-stat:nth-child(3) {
    border-left: 0;
  }
  .hf-stat:nth-child(n + 3) {
    border-top: 1px solid var(--pak-border);
  }
  .hf-stat strong {
    font-size: var(--pak-fs-stat);
  }
  .hf-home .hf-business-card:hover img,
  .hf-home .hf-category:hover {
    transform: none;
  }
  .hf-home .hf-category {
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pak-home-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hf-home a:focus-visible .icon {
    transform: none !important;
  }
}
/* Project-first acquisition pages */
.pr-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 40px;
  align-items: center;
}
.pr-hero h1 {
  font-size: var(--pak-fs-title);
  line-height: 1.2;
  letter-spacing: var(--pak-track-tight);
}
.pr-hero .hf-intro > p {
  max-width: 580px;
}
.pr-hero .pr-file-note {
  font-size: var(--pak-fs-caption);
  line-height: 1.6;
  margin-top: 12px;
}
.pr-direct {
  margin-top: 24px;
  color: var(--navy);
  font-weight: 700;
}
.pr-direct a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
}
.pr-hero-photo {
  margin: 0;
  background: var(--pak-surface);
  border-radius: var(--pak-r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.pr-hero-photo > img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  display: block;
}
.pr-hero-photo figcaption {
  font-size: var(--pak-fs-caption);
  padding: 16px 22px;
  line-height: 1.6;
  color: var(--pak-muted);
}
.pr-photo-links {
  display: grid;
  gap: 0;
  padding: 0 22px 12px;
}
.pr-photo-links a {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--pak-fs-body-sm);
}
.pr-brands {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.pr-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pr-brand-grid a {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid var(--pak-border);
}
.pr-brand-grid a.pr-brand-featured {
  border-left-color: var(--yellow);
  background: var(--pak-page);
}
.pr-brand-grid strong {
  font-size: var(--pak-fs-card);
  color: var(--navy);
}
.pr-brand-grid span {
  font-size: var(--pak-fs-label);
  color: var(--pak-muted);
}
.pr-brands > p {
  font-size: var(--pak-fs-body-sm);
  margin-top: 20px;
}
.pr-project-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 56px;
}
.pr-project-paths > a {
  padding: 32px;
  border-radius: var(--pak-r-lg);
  background: var(--navy);
  color: var(--pak-on-dark);
}
.pr-project-paths h2 {
  font-size: var(--pak-fs-panel);
  margin: 12px 0;
}
.pr-project-paths p {
  color: var(--pak-on-dark-muted);
}
.pr-project-paths small {
  color: var(--pak-action);
}
.pr-project-paths .text-link {
  color: var(--pak-action);
  margin-top: 12px;
}
.pr-qs {
  background: var(--pak-surface);
}
.pr-qs-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  background: var(--pak-page);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pr-qs-card h3 {
  font-size: var(--pak-fs-card);
}
.pr-qs-card p {
  font-size: var(--pak-fs-body-sm);
}
.pr-qs-card .text-link {
  margin-top: auto;
}
.pr-landing-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 32px 0 48px;
}
.pr-landing-top h1 {
  font-size: var(--pak-fs-title);
  line-height: 1.2;
}
.pr-landing-top p {
  margin-top: 24px;
  font-size: var(--pak-fs-lead);
}
.pr-landing-top figure {
  margin: 0;
}
.pr-landing-top img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  background: var(--pak-surface);
  border-radius: var(--pak-r-lg);
}
.pr-landing-top figcaption {
  font-size: var(--pak-fs-caption);
  color: var(--pak-muted);
  margin-top: 12px;
}
.pr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  font-size: var(--pak-fs-body-sm);
  color: var(--pak-muted);
}
.pr-facts span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pr-anchor {
  background: var(--pak-page);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 86px;
  z-index: 15;
}
.pr-anchor .wrap {
  display: flex;
  gap: 28px;
  overflow-x: auto;
}
.pr-anchor a {
  padding: 16px 0;
  white-space: nowrap;
  font-size: var(--pak-fs-label);
  font-weight: 700;
}
.project-page .section h2 {
  margin-bottom: 24px;
}
.project-page section[id] {
  scroll-margin-top: 155px;
}
.pr-sample {
  background: var(--pak-action-tint);
  border-left: 3px solid var(--yellow);
  padding: 16px 20px;
  color: var(--pak-notice-ink);
  margin: 20px 0;
}
.pr-table-scroll {
  overflow-x: auto;
}
.pr-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.pr-table th,
.pr-table td {
  text-align: left;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--pak-fs-body);
}
.pr-table th {
  background: var(--pak-surface);
}
.pr-resource {
  display: flex;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
  background: var(--pak-page);
  padding: 28px;
  margin-top: 24px;
}
.pr-resource > div {
  min-width: 0;
  flex: 1;
}
.pr-resource h3 {
  font-size: var(--pak-fs-card);
}
.pr-resource p {
  margin: 8px 0;
}
.pr-resource small {
  color: var(--pak-notice-ink);
}
.pr-resource .actions {
  margin-top: 16px;
}
.pr-combo {
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: var(--pak-r-lg);
  background: var(--pak-page);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pr-combo small {
  color: var(--pak-muted);
  font-size: var(--pak-fs-body-sm);
}
.pr-combo .text-link {
  margin-top: auto;
}
.pr-case-pending {
  padding: 28px;
  background: var(--pak-page);
  border: 1px dashed var(--pak-border-input);
  display: flex;
  gap: 20px;
  align-items: start;
  margin-top: 24px;
  border-radius: var(--pak-r-lg);
}
.pr-quote-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.pr-form {
  background: var(--pak-page);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--pak-r-lg);
}
.pr-form h2 {
  font-size: var(--pak-fs-panel);
  margin-bottom: 12px !important;
}
.pr-form label {
  display: block;
  font-size: var(--pak-fs-label);
  font-weight: 700;
  margin: 20px 0 8px;
}
.pr-form input,
.pr-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--pak-border-input);
  border-radius: var(--pak-r);
  color: var(--ink);
  font-size: var(--pak-fs-body);
}
.pr-form textarea {
  resize: vertical;
}
.pr-form-note {
  font-size: var(--pak-fs-caption);
  margin: 16px 0;
}
.pr-form-contact {
  font-size: var(--pak-fs-label);
  margin-top: 20px;
}
.pr-form-contact a {
  color: var(--blue);
  text-decoration: underline;
}
.pr-form [data-project-result] {
  padding: 18px;
  background: var(--pak-success-tint);
  color: var(--pak-success);
  margin-top: 20px;
}
.pr-reading {
  margin: 32px auto;
  max-width: 850px;
}
.pr-reading section {
  margin-bottom: 40px;
}
.pr-reading .pr-resource .actions {
  flex-wrap: wrap;
}
.pr-desktop-contact {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 24;
}
.pr-desktop-contact a {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 28px;
  box-shadow: 0 5px 20px #12354a24;
  font-size: var(--pak-fs-body-sm);
  font-weight: 700;
}
.pr-call {
  background: var(--yellow);
  color: var(--navy);
}
.pr-zalo {
  background: var(--pak-zalo);
  color: var(--pak-on-dark);
}
.pr-call .icon {
  animation: pr-call-cue 1.5s ease-out 2;
}
.pr-mobile-contact {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  gap: 8px;
}
.pr-mobile-contact > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  border-radius: var(--pak-r);
  font-size: var(--pak-fs-label);
  font-weight: 700;
}
.pr-mobile-contact > a:nth-child(2) {
  background: var(--pak-surface);
}
.footer {
  padding-bottom: 100px;
}
body:has(dialog[open]) .pr-desktop-contact,
body:has(dialog[open]) .pr-mobile-contact {
  visibility: hidden;
}
body:has(dialog[open]) {
  overflow: hidden;
}
@keyframes pr-call-cue {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@media (hover: hover) {
  .pr-brand-grid a:hover,
  .pr-qs-card:hover {
    border-color: var(--pak-on-dark-subtle);
  }
  .pr-project-paths > a:hover {
    background: var(--pak-brand);
  }
  .pr-desktop-contact a:hover {
    filter: brightness(0.96);
  }
}
@media (max-width: 1000px) {
  .pr-hero,
  .pr-landing-top {
    gap: 28px;
  }
  .pr-hero h1 {
    font-size: var(--pak-fs-title);
  }
  .pr-brand-grid strong {
    font-size: var(--pak-fs-card);
  }
  .pr-quote-layout {
    gap: 28px;
  }
  .pr-anchor {
    top: 72px;
  }
}
@media (max-width: 767px) {
  .pr-hero,
  .pr-landing-top,
  .pr-quote-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pr-hero {
    padding-top: 28px;
  }
  .pr-hero h1 {
    font-size: var(--pak-fs-title);
  }
  .pr-hero-photo > img {
    height: 220px;
  }
  .pr-brand-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pr-brand-grid a {
    padding: 12px;
  }
  .pr-brand-grid strong {
    font-size: var(--pak-fs-card);
  }
  .pr-project-paths {
    grid-template-columns: 1fr;
    padding-top: 32px;
    gap: 16px;
  }
  .pr-project-paths > a {
    padding: 24px;
  }
  .pr-landing-top img {
    height: 250px;
  }
  .pr-anchor {
    position: static;
  }
  .pr-anchor .wrap {
    gap: 20px;
  }
  .pr-quote-layout {
    gap: 32px;
  }
  .pr-form {
    padding: 24px;
  }
  .pr-resource {
    padding: 20px;
    gap: 12px;
  }
  .pr-resource h3 {
    font-size: var(--pak-fs-card);
  }
  .pr-resource .btn {
    width: 100%;
  }
  .pr-table {
    min-width: 580px;
  }
  .pr-desktop-contact {
    display: none;
  }
  .pr-mobile-contact {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pr-case-pending {
    padding: 20px;
  }
  .pr-qs-card {
    padding: 24px;
  }
  .pr-reading {
    max-width: 100%;
  }
  .project-page section[id] {
    scroll-margin-top: 100px;
  }
  body:has(.pr-form input:focus) .pr-mobile-contact,
  body:has(.pr-form textarea:focus) .pr-mobile-contact {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-call .icon {
    animation: none;
  }
}

@media (max-width: 767px) {
  .pr-brand-grid > a:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
/* Evidence-led corporate homepage */
.evidence-home {
  --navy: #102d40;
  --ink: #102d40;
  background: var(--pak-page);
}
.evidence-home h2 {
  letter-spacing: -0.01em;
}
.ev-section {
  padding: 58px 0;
}
.ev-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 26px;
}
.ev-section-heading > p {
  max-width: 450px;
}
.ev-hero {
  position: relative;
  background: var(--pak-brand-deep);
  isolation: isolate;
  color: var(--pak-on-dark);
  overflow: hidden;
}
.ev-hero-bg,
.ev-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ev-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 27, 43, 0.97), rgba(6, 27, 43, 0.76) 50%, rgba(6, 27, 43, 0.34)),
    linear-gradient(0deg, var(--pak-brand-deep), transparent 65%);
}
.ev-hero-content {
  min-height: 760px;
  padding-top: 64px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: center;
}
.evidence-home .hf-intro {
  padding: 0;
  max-width: none;
}
.evidence-home .hf-intro h1 {
  font-size: var(--pak-fs-display);
  line-height: 1.14;
  letter-spacing: var(--pak-track-tight);
  color: var(--pak-on-dark);
}
.evidence-home .hf-intro h1 span {
  color: var(--pak-action);
  background:none;
  padding:0;
}
.evidence-home .hf-intro > p {
  margin-top: 24px;
  color: var(--pak-on-dark-muted);
  font-size: var(--pak-fs-lead);
  line-height: 1.65;
}
.ev-hero .eyebrow,
.ev-cert-section .eyebrow,
.ev-boq .eyebrow {
  color: var(--yellow);
}
.ev-hero .btn.secondary,
.ev-boq .btn.secondary {
  background: transparent;
  color: var(--pak-on-dark);
  border-color: #ffffff75;
}
.ev-hero-phone {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  font-size: var(--pak-fs-eyebrow);
  flex-wrap: wrap;
}
.ev-hero-phone strong {
  font-size: var(--pak-fs-card);
  color: var(--yellow);
}
.ev-hero-proof {
  align-self: end;
  border-left: 3px solid var(--yellow);
  padding: 14px 20px;
  background: #102d4070;
  margin-bottom: 20px;
}
.ev-hero-proof > span {
  font-size: var(--pak-fs-eyebrow);
  letter-spacing: var(--pak-track-caps);
  color: var(--pak-on-dark-muted);
}
.ev-hero-proof strong {
  display: block;
  font-size: var(--pak-fs-card);
  margin: 12px 0;
}
.ev-hero-proof small {
  color: var(--yellow);
  font-size: var(--pak-fs-label);
}
.ev-metrics {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #ffffff40;
  border-bottom: 1px solid #ffffff25;
  padding: 22px 0;
  align-self: end;
}
.ev-metrics > div {
  padding: 0 24px;
  border-right: 1px solid #ffffff30;
}
.ev-metrics > div:first-child {
  padding-left: 0;
}
.ev-metrics > div:last-child {
  border: 0;
}
.ev-metrics strong {
  display: block;
  color: var(--yellow);
  font-size: var(--pak-fs-stat);
  line-height: 1.05;
}
.ev-metrics > div > span {
  display: block;
  color: var(--pak-on-dark-muted);
  font-size: var(--pak-fs-label);
  margin-top: 8px;
}
.ev-hero-source {
  grid-column: 1/-1;
  font-size: var(--pak-fs-caption) !important;
  color: var(--pak-on-dark-subtle) !important;
  margin: -12px 0 18px !important;
}
.ev-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.ev-brands {
  padding: 26px 0;
  background: var(--pak-surface);
  border-bottom: 1px solid var(--line);
}
.ev-brand-heading,
.ev-brand-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.ev-brand-heading h2 {
  font-size: var(--pak-fs-card-sm);
  letter-spacing: 0;
}
.ev-brand-heading a {
  font-size: var(--pak-fs-label);
  font-weight: 700;
}
.ev-brand-strip {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.ev-brand-strip a {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pak-page);
  border: 1px solid var(--pak-border);
  padding: 12px;
}
.ev-brand-strip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ev-brand-strip .ev-brand-major {
  padding: 6px;
}
.ev-brand-sub {
  font-size: var(--pak-fs-eyebrow);
  color: var(--pak-muted);
}
.ev-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-top: 36px;
}
.ev-paths > a {
  position: relative;
  min-height: 280px;
  background: var(--pak-brand-deep);
  overflow: hidden;
  color: var(--pak-on-dark);
}
.ev-paths > a > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  transition: transform 0.45s ease;
}
.ev-paths > a:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #102d40e8, #102d4020);
}
.ev-paths > a > div {
  position: relative;
  z-index: 1;
  padding: 30px;
  max-width: 440px;
}
.ev-paths small {
  font-size: var(--pak-fs-eyebrow);
  color: var(--yellow);
  letter-spacing: var(--pak-track-caps);
}
.ev-paths h2 {
  font-size: var(--pak-fs-panel);
  margin: 14px 0;
}
.ev-paths p {
  color: var(--pak-on-dark-muted);
}
.ev-paths span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--yellow);
  margin-top: 22px;
  font-weight: 700;
  font-size: var(--pak-fs-body-sm);
}
.ev-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.ev-filter button {
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid var(--pak-border-input);
  background: var(--pak-page);
  border-radius: var(--pak-r-sm);
  font-size: var(--pak-fs-label);
  font-weight: 700;
  color: var(--navy);
}
.ev-filter button[aria-pressed="true"] {
  background: var(--navy);
  color: var(--pak-on-dark);
  border-color: var(--navy);
}
.ev-result {
  font-size: var(--pak-fs-caption);
  margin: 12px 0;
}
.ev-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
}
.ev-project[hidden] {
  display: none !important;
}
.ev-project {
  border-bottom: 2px solid var(--pak-border);
  min-width: 0;
}
.ev-project-image {
  position: relative;
  overflow: hidden;
  background: var(--pak-border);
}
.ev-project-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ev-project-image > span {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #102d40d9;
  color: var(--pak-on-dark);
  padding: 4px 9px;
  font-size: var(--pak-fs-eyebrow);
}
.ev-project-caption {
  position: relative;
  padding: 14px 25px 18px 0;
}
.ev-project-caption small {
  font-size: var(--pak-fs-eyebrow);
  color: var(--pak-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ev-project-caption h3 {
  font-size: var(--pak-fs-card-sm);
  margin-top: 5px;
}
.ev-project-caption > .icon {
  position: absolute;
  right: 0;
  top: 38px;
  width: 18px;
}
.ev-source-note {
  font-size: var(--pak-fs-caption);
  margin-top: 22px;
  line-height: 1.6;
  color: var(--pak-muted);
}
.ev-cert-section {
  background: var(--pak-brand-deep);
  color: var(--pak-on-dark);
}
.ev-cert-section p {
  color: var(--pak-on-dark-muted);
}
.ev-certs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.ev-cert > div {
  background: var(--pak-surface-2);
  padding: 9px;
}
.ev-cert img {
  width: 100%;
  height: auto;
  display: block;
}
.ev-cert h3 {
  font-size: var(--pak-fs-card-sm);
  margin: 16px 0 4px;
}
.ev-cert p {
  font-size: var(--pak-fs-label);
  min-height: 40px;
}
.ev-cert > span {
  font-size: var(--pak-fs-eyebrow);
  color: var(--yellow);
  display: block;
  margin-top: 8px;
}
.ev-boq {
  background: var(--pak-brand);
  color: var(--pak-on-dark);
  border-top: 1px solid #ffffff20;
}
.ev-boq-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
}
.ev-boq h2 {
  font-size: var(--pak-fs-section);
}
.ev-boq-layout > div > p {
  color: var(--pak-on-dark-muted);
  margin: 20px 0;
  max-width: 520px;
}
.ev-boq-check {
  display: grid;
  gap: 9px;
  font-size: var(--pak-fs-label);
  color: var(--pak-on-dark-muted);
}
.ev-boq-check .icon {
  color: var(--yellow);
  margin-right: 8px;
}
.ev-boq .pr-form {
  color: var(--ink);
  border-radius: var(--pak-r-sm);
}
.ev-boq .pr-form h2 {
  font-size: var(--pak-fs-panel);
}
.ev-boq .pr-form p {
  color: var(--pak-muted);
}
.ev-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.ev-category-grid > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 23px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 112px;
}
.ev-category-grid > a > .icon:first-child {
  width: 28px;
  height: 28px;
  color: var(--pak-action-deep);
}
.ev-category-grid > a > .icon:last-child {
  margin-left: auto;
  width: 18px;
}
.ev-category-grid h3 {
  font-size: var(--pak-fs-card-sm);
}
.ev-category-grid p {
  font-size: var(--pak-fs-label);
  margin-top: 5px;
}
.ev-extra-brands {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--pak-fs-label);
  padding: 20px;
  background: var(--pak-surface);
}
.ev-extra-brands a {
  font-weight: 700;
  text-decoration: underline;
}
.ev-resources {
  background: var(--pak-surface-2);
}
.ev-resource-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
}
.ev-profile-download {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  background: var(--pak-page);
  padding: 24px;
  align-items: center;
}
.ev-profile-download > img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 16px #102d4020;
}
.ev-profile-download small {
  font-size: var(--pak-fs-caption);
  color: var(--pak-muted);
}
.ev-profile-download h3 {
  font-size: var(--pak-fs-panel);
  margin: 10px 0;
}
.ev-profile-download p {
  font-size: var(--pak-fs-label);
}
.ev-profile-download .btn {
  margin: 20px 0 10px;
}
.ev-profile-download > div > a:last-child {
  display: block;
  font-size: var(--pak-fs-label);
}
.ev-technical-links > a {
  display: flex;
  gap: 15px;
  padding: 19px 0;
  border-bottom: 1px solid var(--pak-border);
  align-items: center;
}
.ev-technical-links > a > span {
  font-size: var(--pak-fs-card);
  color: var(--pak-muted);
}
.ev-technical-links h3 {
  font-size: var(--pak-fs-card-sm);
}
.ev-technical-links small {
  display: block;
  font-size: var(--pak-fs-caption);
  margin-top: 8px;
  color: var(--pak-muted);
}
.ev-technical-links .icon {
  margin-left: auto;
}
.ev-contact {
  border-top: 1px solid var(--pak-border);
  padding-top: 42px;
  margin-top: 48px;
}
.ev-contact-title {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ev-contact-title h2 {
  font-size: var(--pak-fs-panel);
  margin-right: auto;
}
.ev-contact-title a {
  font-size: var(--pak-fs-label);
  overflow-wrap: anywhere;
}
.ev-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ev-address-grid h3 {
  font-size: var(--pak-fs-card);
}
.ev-address-grid p {
  font-size: var(--pak-fs-label);
  margin: 8px 0 16px;
}
.ev-address-grid iframe {
  width: 100%;
  height: 190px;
  border: 0;
  background: var(--pak-border);
}
.ev-address-grid a {
  display: block;
  margin-top: 8px;
  font-size: var(--pak-fs-label);
  font-weight: 700;
}
@media (hover: hover) {
  .ev-project:hover img,
  .ev-paths > a:hover > img {
    transform: scale(1.025);
  }
  .ev-category-grid > a:hover {
    background: var(--pak-action-tint);
  }
  .ev-project:hover {
    border-bottom-color: var(--pak-action-deep);
  }
  .ev-brand-strip a:hover {
    border-color: var(--pak-action-deep);
  }
}
@media (max-width: 1000px) {
  .ev-hero-content {
    min-height: 730px;
    grid-template-columns: 1.6fr 1fr;
  }
  .ev-hero-proof strong {
    font-size: var(--pak-fs-card);
  }
  .ev-project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ev-boq-layout {
    gap: 30px;
  }
  .ev-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ev-resource-grid {
    grid-template-columns: 1fr;
  }
  .ev-certs {
    gap: 14px;
  }
  .ev-brand-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .ev-section {
    padding: 38px 0;
  }
  .ev-section-heading {
    display: block;
  }
  .ev-section-heading > a,
  .ev-section-heading > p {
    margin-top: 14px;
    display: inline-block;
  }
  .ev-hero-content {
    min-height: 0;
    padding-top: 36px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .evidence-home .hf-intro h1 {
    font-size: var(--pak-fs-display);
    letter-spacing: var(--pak-track-tight);
  }
  .evidence-home .hf-intro > p {
    font-size: var(--pak-fs-lead);
  }
  .ev-hero .actions {
    gap: 10px;
  }
  .ev-hero .btn {
    width: 100%;
  }
  .ev-hero-proof {
    margin: 0;
    padding: 12px 16px;
  }
  .ev-hero-proof strong {
    font-size: var(--pak-fs-card);
  }
  .ev-hero-proof strong br {
    display: none;
  }
  .ev-metrics {
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }
  .ev-metrics > div,
  .ev-metrics > div:first-child {
    padding: 18px 12px;
    border-bottom: 1px solid #ffffff25;
  }
  .ev-metrics > div:nth-child(2) {
    border-right: 0;
  }
  .ev-metrics strong {
    font-size: var(--pak-fs-stat);
  }
  .ev-metrics > div > span {
    font-size: var(--pak-fs-label);
  }
  .ev-hero-source {
    margin: 0 0 18px !important;
    line-height: 1.5;
  }
  .ev-brand-heading,
  .ev-brand-sub {
    display: block;
  }
  .ev-brand-heading a {
    display: inline-block;
    margin-top: 10px;
  }
  .ev-brand-sub > span {
    display: block;
    margin-top: 8px;
  }
  .ev-brand-strip {
    gap: 8px;
  }
  .ev-brand-strip a {
    height: 65px;
    padding: 6px;
  }
  .ev-paths {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 24px;
  }
  .ev-paths > a {
    min-height: 235px;
  }
  .ev-paths > a > div {
    padding: 24px;
  }
  .ev-paths h2 {
    font-size: var(--pak-fs-panel);
  }
  .ev-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .ev-project-caption {
    padding: 10px 0 14px;
  }
  .ev-project-caption h3 {
    font-size: var(--pak-fs-card-sm);
  }
  .ev-project-caption small {
    font-size: var(--pak-fs-eyebrow);
  }
  .ev-project-caption > .icon {
    display: none;
  }
  .ev-filter {
    gap: 6px;
  }
  .ev-filter button {
    font-size: var(--pak-fs-label);
    padding: 9px 11px;
  }
  .ev-certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }
  .ev-cert h3 {
    font-size: var(--pak-fs-card-sm);
  }
  .ev-cert p {
    font-size: var(--pak-fs-label);
  }
  .ev-boq-layout {
    grid-template-columns: 1fr;
  }
  .ev-boq h2 {
    font-size: var(--pak-fs-section);
  }
  .ev-category-grid {
    grid-template-columns: 1fr;
  }
  .ev-category-grid > a {
    min-height: 90px;
    padding: 18px;
  }
  .ev-profile-download {
    grid-template-columns: 95px 1fr;
    gap: 17px;
    padding: 18px;
  }
  .ev-profile-download h3 {
    font-size: var(--pak-fs-panel);
  }
  .ev-profile-download .btn {
  }
  .ev-address-grid {
    grid-template-columns: 1fr;
  }
  .ev-contact-title {
    gap: 12px;
  }
  .ev-contact-title h2 {
    width: 100%;
  }
  .ev-contact-title a {
    display: block;
  }
  .ev-hero-bg {
    object-position: 60% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evidence-home * {
    transition: none !important;
  }
  .ev-project:hover img,
  .ev-paths > a:hover > img {
    transform: none;
  }
}
/* Contractor navigation and native industry rail */
.ev-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(6, 27, 43, 0.95) 0%,
      rgba(6, 27, 43, 0.86) 35%,
      rgba(6, 27, 43, 0.28) 68%,
      rgba(6, 27, 43, 0.04) 100%
    ),
    linear-gradient(0deg, var(--pak-brand-deep) 0%, transparent 37%);
}
.ev-hero-content {
  padding-bottom: 24px;
}
.ev-hero-proof {
  background: #102d40cb;
  backdrop-filter: blur(3px);
}
.ev-metrics strong {
  font-size: var(--pak-fs-stat);
}
.ev-brand-strip {
  grid-template-columns: 1.65fr 1.65fr repeat(4, 1fr);
}
.ev-brand-strip a {
  padding: 17px;
}
.ev-brand-strip .ev-brand-major {
  padding: 4px;
}
.ev-rail-controls {
  display: flex;
  gap: 10px;
}
.ev-rail-controls button {
  border-radius: var(--pak-r-sm);
  font-size: 24px;
  width: 46px;
  height: 46px;
}
.ev-industry-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 100px) / 3.25);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  padding: 0 0 18px;
  scrollbar-color: var(--pak-border-input) var(--pak-surface-2);
  scrollbar-width: thin;
}
.ev-industry-card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--pak-border);
  background: var(--pak-page);
  min-width: 0;
}
.ev-range-photo {
  width: 100%;
  aspect-ratio: 1.6;
  height: auto;
  object-fit: contain;
  background: var(--pak-surface);
  display: block;
  border-bottom: 1px solid var(--pak-border);
}
.ev-industry-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ev-range-logo {
  width: 125px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 18px;
}
.ev-industry-body h3 {
  font-size: var(--pak-fs-card);
  line-height: 1.35;
  min-height: 52px;
}
.ev-industry-body ul {
  padding: 0;
  list-style: none;
  color: var(--pak-muted);
  font-size: var(--pak-fs-body-sm);
  line-height: 1.8;
  margin: 14px 0 22px;
}
.ev-industry-body > span {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--pak-fs-body-sm);
  font-weight: 700;
  border-top: 1px solid var(--pak-border);
  padding-top: 16px;
}
.ev-industries .ev-extra-brands {
  background: none;
  padding: 8px 0;
}
.ev-project-image > span {
  font-size: var(--pak-fs-eyebrow);
  max-width: 100%;
}
.ev-project-caption small {
  font-size: var(--pak-fs-eyebrow);
}
.ev-project {
  scroll-margin-top: 130px;
}
.ev-project:target {
  outline: 3px solid var(--yellow);
  outline-offset: 6px;
}
.ev-project-supply {
  font-size: var(--pak-fs-body-sm);
  margin-top: 8px;
}
.ev-resource-grid {
  display: block;
}
.ev-technical-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ev-technical-links > a {
  align-items: start;
}
.ev-technical-links small {
  font-size: var(--pak-fs-caption);
}
.ev-menu-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ev-menu-links a {
  padding: 15px !important;
  white-space: normal;
}
.ev-menu-links a:hover {
  background: var(--pak-action-tint);
}
.ev-solution-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 50px;
  padding: 30px 0;
}
.ev-solution-hero h1 {
  font-size: var(--pak-fs-title);
}
.ev-solution-hero p {
  font-size: var(--pak-fs-lead);
  margin: 22px 0;
}
.ev-solution-hero > img {
  width: 100%;
  height: 380px;
  object-fit: contain;
  background: var(--pak-surface);
}
.ev-solution-ranges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 26px;
}
.ev-solution-ranges article {
  padding: 25px;
  background: var(--pak-surface);
}
.ev-solution-ranges small {
  color: var(--pak-muted);
}
.ev-solution-ranges h3 {
  margin: 10px 0;
}
.ev-solution-ranges p {
  font-size: var(--pak-fs-body);
}
.ev-solution-needs {
  border-top: 1px solid var(--pak-border);
  border-bottom: 1px solid var(--pak-border);
}
.ev-solution-needs p {
  margin-top: 18px;
  max-width: 850px;
}
.ev-cross {
  background: var(--pak-surface-2);
}
.ev-cross .wrap > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.ev-cross a {
  padding: 17px;
  background: var(--pak-page);
  font-weight: 700;
  font-size: var(--pak-fs-body-sm);
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.ev-industry-page .ev-boq-layout p {
  margin-top: 20px;
}
.ev-industry-page .pr-form h2 {
  font-size: var(--pak-fs-panel);
}
.mobile-menu-links details > summary {
  font-weight: 700;
  padding: 16px 0;
}
.mobile-menu-links details > a {
  padding-left: 20px;
  font-size: var(--pak-fs-body-sm);
}
@media (hover: hover) {
  .ev-industry-card:hover {
    border-color: var(--pak-action-deep);
  }
  .ev-industry-card:hover .ev-industry-body > span {
    color: var(--pak-action-deep);
  }
}
@media (max-width: 1000px) {
  .ev-industry-rail {
    grid-auto-columns: calc((100% - 50px) / 2.3);
  }
  .ev-solution-hero {
    gap: 25px;
  }
  .ev-solution-hero h1 {
    font-size: var(--pak-fs-title);
  }
  .ev-solution-ranges {
    gap: 15px;
  }
}
@media (max-width: 767px) {
  .ev-hero-shade {
    background:
      linear-gradient(90deg, #061b2bed, #061b2b6b), linear-gradient(0deg, var(--pak-brand-deep) 0%, transparent 80%);
  }
  .ev-hero-content {
    padding-bottom: 0;
  }
  .ev-metrics strong {
    font-size: var(--pak-fs-stat);
  }
  .ev-metrics > div > span {
    font-size: var(--pak-fs-label);
  }
  .ev-metrics {
    order: 2;
  }
  .ev-hero-proof {
    order: 3;
    margin-bottom: 22px;
  }
  .ev-brand-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .ev-brand-strip a {
    padding: 14px;
  }
  .ev-brand-strip .ev-brand-major {
    padding: 2px;
  }
  .ev-brand-strip .ev-brand-major:nth-child(1),
  .ev-brand-strip .ev-brand-major:nth-child(2) {
    height: 78px;
  }
  .ev-industry-rail {
    grid-auto-columns: 84%;
    gap: 14px;
  }
  .ev-industry-body {
    padding: 20px;
  }
  .ev-industry-body h3 {
    min-height: 0;
  }
  .ev-industries .ev-section-heading {
    display: flex;
    align-items: end;
    gap: 10px;
  }
  .ev-industries h2 {
    font-size: var(--pak-fs-section);
  }
  .ev-rail-controls {
    gap: 6px;
  }
  .ev-rail-controls button {
    width: 40px;
    height: 44px;
  }
  .ev-project-caption h3 {
    font-size: var(--pak-fs-card-sm);
  }
  .ev-project-caption small {
    font-size: var(--pak-fs-eyebrow);
  }
  .ev-technical-links {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ev-solution-hero {
    grid-template-columns: 1fr;
    padding: 15px 0;
  }
  .ev-solution-hero h1 {
    font-size: var(--pak-fs-title);
  }
  .ev-solution-hero > img {
    height: 260px;
  }
  .ev-solution-ranges,
  .ev-cross .wrap > div {
    grid-template-columns: 1fr;
  }
  .ev-solution-ranges article {
    padding: 20px;
  }
  .ev-cross h2 {
    font-size: var(--pak-fs-section);
  }
  .pr-form {
    scroll-margin-block: 100px 120px;
  }
  .pr-form [type="submit"] {
    scroll-margin-bottom: 125px;
  }
  .pr-mobile-contact {
    z-index: 24;
  }
  .ev-industry-page .ev-boq-layout {
    gap: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-industry-rail {
    scroll-behavior: auto;
  }
}
/* Keep floating contact controls clear of the entire quote form. */
body.pak-form-visible .pr-mobile-contact,
body.pak-form-visible .pr-desktop-contact {
  visibility: hidden;
  pointer-events: none;
}
.ev-profile-inline {
  margin-top: 22px;
  font-size: var(--pak-fs-body-sm);
}
.ev-profile-inline a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Unified photographic concept assets; actual logos remain separate. */
.ev-range-photo {
  object-fit: cover;
  aspect-ratio: 1.6;
}
.ev-solution-hero > img {
  object-fit: cover;
}
.ev-hero-bg {
  object-position: 65% center;
}
@media (max-width: 767px) {
  .ev-hero-bg {
    object-position: 67% center;
  }
  .ev-solution-hero > img {
    height: 245px;
  }
}
/* ==========================================================================
   Component nền tảng · Bước 1
   ========================================================================== */
/* Nút: 3 kiểu (chính vàng, phụ viền, tối) · đủ trạng thái */
.btn:active{background:var(--pak-action-pressed);border-color:var(--pak-action-pressed);transform:translateY(1px)}
.btn.secondary:active{background:var(--pak-surface-2);border-color:var(--pak-brand)}
.btn.dark:hover{background:var(--pak-brand-deep);border-color:var(--pak-brand-deep)}
.btn .icon{width:18px;height:18px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--pak-brand);border-right-color:transparent;animation:pak-spin .7s linear infinite}
@keyframes pak-spin{to{transform:rotate(360deg)}}
/* Vòng focus màu vàng trên nền tối */
.utility,.boq-banner,.lp-document-main,.lp-end,.hf-boq,.pr-project-paths,.ev-hero,.ev-paths,.ev-cert-section,.ev-boq,.admin-side,.toast,.mobile-bar{--pak-focus:var(--pak-action)}
/* Số liệu và mã sản phẩm thẳng hàng */
.hf-stat strong,.ev-metrics strong,.metric strong,.product-body .code,.spec-table td{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}.btn.is-loading::after{animation-duration:2s}}
/* Nút không rớt chữ xuống dòng trong ô tìm kiếm và trạng thái trống */
.searchbox .btn,.empty .btn{white-space:nowrap;flex-shrink:0}

/* ==========================================================================
   Bước 3.1 · Bài viết kỹ thuật và trang Kiến thức (30/09/2026)
   Dùng token của Bước 1. Bài viết: cột chữ 760px, mục lục và liên hệ bám bên phải.
   ========================================================================== */
.kb-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:45;pointer-events:none}
.kb-progress span{display:block;height:100%;background:var(--pak-action);transform:scaleX(0);transform-origin:0 50%}
.kb-head{padding-bottom:4px}
.kb-head .breadcrumb{padding-bottom:18px}
.kb-head h1{font-size:var(--pak-fs-title);max-width:900px;margin-top:2px}
.kb-lead{font-size:clamp(16px,0.44vw + 14.3px,20px);line-height:1.65;color:var(--pak-text);max-width:760px;margin-top:18px}
.kb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px;padding-block:16px;border-block:1px solid var(--pak-border)}
.kb-byline{display:flex;align-items:center;gap:12px}
.kb-byline strong{display:block;font-size:var(--pak-fs-label);color:var(--pak-brand)}
.kb-byline small{display:block;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.kb-pending{border-bottom:1px dashed var(--pak-border-input)}
.kb-avatar{width:44px;height:44px;border-radius:50%;background:var(--pak-action);color:var(--pak-brand);display:grid;place-items:center;font-weight:700;font-size:var(--pak-fs-caption);letter-spacing:0.04em;flex-shrink:0}
.kb-avatar.lg{width:64px;height:64px;font-size:var(--pak-fs-body)}
.kb-facts{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0;font-size:var(--pak-fs-label);color:var(--pak-muted)}
.kb-facts li{display:inline-flex;align-items:center;gap:6px}
.kb-facts .icon{width:16px;height:16px}
.kb-share{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.kb-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);background:var(--pak-page);color:var(--pak-brand);font:600 var(--pak-fs-label)/1.2 var(--pak-font);cursor:pointer;transition:background-color var(--pak-motion) var(--pak-ease),border-color var(--pak-motion) var(--pak-ease)}
.kb-share-btn:hover{border-color:var(--pak-brand);background:var(--pak-surface)}
.kb-share-btn .icon{width:16px;height:16px}

.kb-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,4vw,72px);align-items:start;padding-block:32px 8px}
.kb-main{max-width:760px;min-width:0}
.kb-hero{margin:0 0 32px}
.kb-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.kb-hero figcaption,.kb-figure figcaption{font-size:var(--pak-fs-caption);line-height:1.6;color:var(--pak-muted);margin-top:10px;padding-left:12px;border-left:3px solid var(--pak-action)}

.kb-summary{background:var(--pak-surface);border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);padding:22px 24px;margin-bottom:36px}
.kb-summary h2.kb-summary-title{display:flex;align-items:center;gap:8px;font-size:var(--pak-fs-card-sm);letter-spacing:0;margin-bottom:12px;color:var(--pak-brand)}
.kb-summary-title .icon{width:20px;height:20px;color:var(--pak-success)}
.kb-summary ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.kb-summary li{position:relative;padding-left:22px;color:var(--pak-text);line-height:1.65}
.kb-summary li::before{content:"";position:absolute;left:2px;top:0.62em;width:8px;height:8px;border-radius:2px;background:var(--pak-action)}

.kb-body p{color:var(--pak-text);font-size:var(--pak-fs-lead);line-height:1.8;margin:0 0 20px}
.kb-body h2{font-size:var(--pak-fs-panel);line-height:1.3;margin:56px 0 18px;padding-top:20px;border-top:1px solid var(--pak-border);position:relative;scroll-margin-top:110px}
.kb-body h2::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:3px;background:var(--pak-action)}
.kb-body > h2:first-child{margin-top:8px}
.kb-body h3{font-size:var(--pak-fs-card);line-height:1.4;margin:32px 0 10px;color:var(--pak-brand)}
.kb-body h4{font-size:var(--pak-fs-card-sm);margin:24px 0 8px;color:var(--pak-brand)}
.kb-body a:not(.btn):not(.kb-seealso):not(.kb-inline-phone){color:var(--pak-link);text-decoration:underline;text-underline-offset:3px}
.kb-body strong{color:var(--pak-text)}
.kb-list{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px}
.kb-list li{position:relative;padding-left:30px;color:var(--pak-text);font-size:var(--pak-fs-lead);line-height:1.7}
ul.kb-list li::before{content:"";position:absolute;left:6px;top:0.7em;width:8px;height:8px;border-radius:2px;background:var(--pak-action)}
ol.kb-list{counter-reset:kb}
ol.kb-list li{counter-increment:kb}
ol.kb-list li::before{content:counter(kb);position:absolute;left:0;top:0.18em;width:22px;height:22px;border-radius:50%;background:var(--pak-brand);color:var(--pak-on-dark);font-size:var(--pak-fs-eyebrow);font-weight:700;display:grid;place-items:center}

.kb-table{overflow-x:auto;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);margin:8px 0 24px;background:var(--pak-page)}
.kb-table:focus-visible{outline:3px solid var(--pak-focus);outline-offset:3px}
.kb-table table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--pak-fs-body-sm);line-height:1.55}
.kb-table thead th{background:var(--pak-brand);color:var(--pak-on-dark);text-align:left;padding:12px 16px;font-weight:700;vertical-align:bottom}
.kb-table tbody th{background:var(--pak-surface);text-align:left;font-weight:700;color:var(--pak-brand)}
.kb-table td,.kb-table tbody th{padding:12px 16px;border-top:1px solid var(--pak-border);vertical-align:top;color:var(--pak-text)}
.kb-table tbody tr:hover td{background:var(--pak-surface)}
.kb-table-hint{display:none;align-items:center;gap:6px;font-size:var(--pak-fs-caption)!important;color:var(--pak-muted)!important;margin:-14px 0 24px!important}
.kb-table-hint .icon{width:14px;height:14px}

.kb-figure{margin:28px 0}
.kb-figure img{display:block;width:100%;height:auto;border-radius:var(--pak-r-lg);background:var(--pak-surface)}

.kb-seealso{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;margin:4px 0 28px;padding:14px 18px;border:1px solid var(--pak-border);border-left:4px solid var(--pak-action);border-radius:var(--pak-r);background:var(--pak-page);color:var(--pak-brand);transition:border-color var(--pak-motion) var(--pak-ease),background-color var(--pak-motion) var(--pak-ease)}
.kb-seealso span{grid-column:1/-1;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted)}
.kb-seealso strong{font-size:var(--pak-fs-body);color:var(--pak-brand)}
.kb-seealso:hover{border-color:var(--pak-border-input);background:var(--pak-surface)}
.kb-seealso .icon{width:18px;height:18px}

.kb-callout{margin:28px 0;padding:18px 20px;border-radius:var(--pak-r);background:var(--pak-surface);border-left:4px solid var(--pak-link)}
.kb-callout.warn{background:var(--pak-action-tint);border-left-color:var(--pak-warning)}
.kb-callout-label{display:flex;align-items:center;gap:6px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-link);margin-bottom:6px}
.kb-callout.warn .kb-callout-label{color:var(--pak-warning)}
.kb-callout-label .icon{width:16px;height:16px}
.kb-callout > strong{display:block;font-size:var(--pak-fs-card-sm);line-height:1.45;color:var(--pak-text);margin-bottom:6px}
.kb-body .kb-callout p{margin:0;font-size:var(--pak-fs-body)}

.kb-inline-cta{display:grid;gap:14px;margin:40px 0;padding:24px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark);--pak-focus:var(--pak-action)}
.kb-inline-cta strong{display:block;font-size:var(--pak-fs-card);line-height:1.35;color:var(--pak-on-dark)}
.kb-body .kb-inline-cta p{color:var(--pak-on-dark-muted);margin:6px 0 0;font-size:var(--pak-fs-body-sm);line-height:1.6}
.kb-inline-cta .actions{margin-top:2px}
.kb-inline-cta .btn.secondary,.kb-end .btn.secondary,.kb-aside-cta .btn.secondary{background:transparent;color:var(--pak-on-dark);border-color:rgb(255 255 255 / 45%)}
.kb-inline-cta .btn.secondary:hover,.kb-end .btn.secondary:hover,.kb-aside-cta .btn.secondary:hover{background:rgb(255 255 255 / 8%);border-color:var(--pak-on-dark)}
.kb-body .kb-inline-phone{display:inline-flex;align-items:center;gap:8px;color:var(--pak-action);font-weight:700;text-decoration:none}

.kb-faq{margin-top:52px}
.kb-faq h2{font-size:var(--pak-fs-panel);margin-bottom:8px}
.kb-faq details{border-bottom:1px solid var(--pak-border)}
.kb-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0;min-height:44px;font-weight:700;font-size:var(--pak-fs-card-sm);line-height:1.45;cursor:pointer;color:var(--pak-brand)}
.kb-faq summary::-webkit-details-marker{display:none}
.kb-faq summary .icon{margin-top:2px;transition:transform var(--pak-motion) var(--pak-ease)}
.kb-faq details[open] summary .icon{transform:rotate(45deg)}
.kb-faq details p{margin:0 0 20px;color:var(--pak-text);line-height:1.75}

.kb-end{margin-top:52px;padding:32px;border-radius:var(--pak-r-lg);background:var(--pak-brand-deep);color:var(--pak-on-dark);--pak-focus:var(--pak-action)}
.kb-end .eyebrow{color:var(--pak-action)}
.kb-end h2{font-size:var(--pak-fs-panel);line-height:1.3;color:var(--pak-on-dark);margin:4px 0 10px}
.kb-end p{color:var(--pak-on-dark-muted)}
.kb-end-phone{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--pak-action);font-weight:700;font-size:var(--pak-fs-card)}

.kb-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid var(--pak-border)}
.kb-foot .kb-share{margin-left:0}
.kb-topic{font-size:var(--pak-fs-label);color:var(--pak-muted)}
.kb-topic a{color:var(--pak-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.kb-author{display:flex;gap:18px;align-items:flex-start;margin-top:28px;padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg)}
.kb-author strong{color:var(--pak-brand)}
.kb-author p{margin:6px 0;font-size:var(--pak-fs-body-sm)}
.kb-author small{color:var(--pak-muted);font-size:var(--pak-fs-caption)}

.kb-aside{position:sticky;top:110px;display:grid;gap:18px}
.kb-toc{padding:18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);max-height:calc(100vh - 420px);min-height:180px;overflow:auto}
.kb-toc > strong{display:block;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted);margin:0 0 8px 8px}
.kb-toc ol,.kb-toc-mobile ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kb-toc a,.kb-toc-mobile a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:8px 10px;border-radius:var(--pak-r);font-size:var(--pak-fs-label);line-height:1.45;color:var(--pak-text);transition:background-color var(--pak-motion) var(--pak-ease)}
.kb-toc a span,.kb-toc-mobile a span{color:var(--pak-muted);font-weight:700;font-variant-numeric:tabular-nums}
.kb-toc a:hover,.kb-toc-mobile a:hover{background:var(--pak-surface)}
.kb-toc a[aria-current]{background:var(--pak-action-tint);color:var(--pak-brand);font-weight:700;box-shadow:inset 3px 0 0 var(--pak-action)}
.kb-aside-cta{padding:22px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark);display:grid;gap:10px;--pak-focus:var(--pak-action)}
.kb-aside-cta small{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);color:var(--pak-action)}
.kb-aside-phone{display:flex;align-items:center;gap:8px;font-size:var(--pak-fs-card);font-weight:700;color:var(--pak-on-dark)}
.kb-aside-cta p{color:var(--pak-on-dark-muted);font-size:var(--pak-fs-label);line-height:1.55;margin:0 0 4px}
.kb-aside-cta .btn{width:100%}
.kb-toc-mobile{display:none;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);margin:0 0 28px;background:var(--pak-page)}
.kb-toc-mobile summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;font-weight:700;color:var(--pak-brand);cursor:pointer}
.kb-toc-mobile summary::-webkit-details-marker{display:none}
.kb-toc-mobile summary span{margin-left:auto;font-weight:500;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.kb-toc-mobile ol{padding:0 8px 10px}

.kb-related{padding-block:48px 72px}
.kb-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:22px}
.kb-section-head h2{font-size:var(--pak-fs-panel)}
.kb-count{font-size:var(--pak-fs-label);color:var(--pak-muted);font-variant-numeric:tabular-nums}

.kb-grid{display:grid;gap:24px}
.kb-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-card a{display:flex;flex-direction:column;height:100%;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-page);transition:border-color var(--pak-motion) var(--pak-ease),box-shadow var(--pak-motion) var(--pak-ease),transform var(--pak-motion) var(--pak-ease)}
.kb-card a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow);transform:translateY(-3px)}
.kb-card-media{aspect-ratio:16/10;background:var(--pak-surface);overflow:hidden}
.kb-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 240ms var(--pak-ease)}
.kb-card a:hover .kb-card-media img{transform:scale(1.025)}
.kb-card-media.is-empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--pak-brand),var(--pak-brand-deep))}
.kb-card-icon .icon{width:40px;height:40px;color:var(--pak-action);stroke-width:1.5}
.kb-card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px}
.kb-card-cat{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-link)}
.kb-card h3{font-size:var(--pak-fs-card-sm);line-height:1.4;color:var(--pak-brand)}
.kb-card p{font-size:var(--pak-fs-label);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-card-meta{margin-top:auto;padding-top:6px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.kb-card.is-more{display:none}
.kb-card.is-more.is-searching:not([hidden]){display:block}

.kb-hub-head{background:var(--pak-surface);border-bottom:1px solid var(--pak-border)}
.kb-hub-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;margin:4px 0 28px}
.kb-hub-intro h1{font-size:var(--pak-fs-title)}
.kb-hub-intro p{max-width:620px;margin-top:14px;font-size:var(--pak-fs-lead);line-height:1.7}
.kb-search label{display:block;font-weight:700;font-size:var(--pak-fs-label);color:var(--pak-brand);margin-bottom:8px}
.kb-search-box{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;background:var(--pak-page);border:1px solid var(--pak-border-input);border-radius:var(--pak-r)}
.kb-search-box:focus-within{outline:3px solid var(--pak-focus);outline-offset:2px}
.kb-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--pak-fs-body);color:var(--pak-text)}
.kb-search-box .icon{color:var(--pak-muted)}
.kb-search .kb-hub-stat{font-size:var(--pak-fs-caption);color:var(--pak-muted);margin-top:10px}
.kb-hub-stat strong{color:var(--pak-brand)}
.kb-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:18px;scrollbar-width:thin}
.kb-cats a{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--pak-border-input);border-radius:999px;background:var(--pak-page);font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-brand);white-space:nowrap;transition:background-color var(--pak-motion) var(--pak-ease),border-color var(--pak-motion) var(--pak-ease)}
.kb-cats a:hover{border-color:var(--pak-brand)}
.kb-cats a span{font-size:var(--pak-fs-caption);color:var(--pak-muted);font-variant-numeric:tabular-nums}
.kb-cats a[aria-current]{background:var(--pak-brand);border-color:var(--pak-brand);color:var(--pak-on-dark)}
.kb-cats a[aria-current] span{color:var(--pak-on-dark-muted)}

.kb-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;padding-block:40px 0}
.kb-feature a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);height:100%;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-page);transition:box-shadow var(--pak-motion) var(--pak-ease),border-color var(--pak-motion) var(--pak-ease)}
.kb-feature a:hover{box-shadow:var(--pak-shadow);border-color:var(--pak-border-input)}
.kb-feature-media{background:var(--pak-surface)}
.kb-feature-media img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
.kb-feature-body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px}
.kb-feature h2{font-size:var(--pak-fs-panel);line-height:1.25;color:var(--pak-brand)}
.kb-feature p{font-size:var(--pak-fs-body-sm);line-height:1.65}
.kb-popular{border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);padding:22px 22px 16px}
.kb-popular h2{font-size:var(--pak-fs-card);margin-bottom:6px}
.kb-popular ol{list-style:none;margin:0;padding:0}
.kb-popular li + li{border-top:1px solid var(--pak-border)}
.kb-popular a{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0}
.kb-rank{font-size:var(--pak-fs-panel);font-weight:700;line-height:1;color:var(--pak-action-deep);font-variant-numeric:tabular-nums}
.kb-popular strong{display:block;font-size:var(--pak-fs-label);line-height:1.45;color:var(--pak-brand)}
.kb-popular small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.kb-popular a:hover strong{text-decoration:underline;text-underline-offset:3px}
.kb-popular .kb-source{font-size:var(--pak-fs-caption);color:var(--pak-muted);margin-top:6px}
.kb-listing{padding-block:48px 16px}
.kb-more{display:flex;justify-content:center;margin-top:28px}
.kb-empty{text-align:center;padding:40px 16px;border:1px dashed var(--pak-border-input);border-radius:var(--pak-r-lg)}
.kb-empty .icon{width:40px;height:40px;color:var(--pak-muted)}
.kb-empty h3{margin:10px 0 6px}
.kb-empty p{margin-bottom:16px}

@media (max-width:1180px){.kb-layout{grid-template-columns:minmax(0,1fr) 264px}}
@media (max-width:1100px){.kb-top{grid-template-columns:1fr}}
@media (max-width:1023px){
  .kb-layout{grid-template-columns:1fr}.kb-main{max-width:none}.kb-aside{display:none}.kb-toc-mobile{display:block}
  .kb-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-hub-intro{grid-template-columns:1fr;gap:20px}
}
@media (max-width:767px){
  .kb-head .breadcrumb{padding-bottom:12px}
  .kb-meta{gap:12px;padding-block:14px}
  .kb-share{margin-left:0;width:100%}
  .kb-share-btn{flex:1}
  .kb-share a.kb-share-btn[href*="facebook"]{display:none}
  .kb-layout{padding-top:20px}
  .kb-hero{margin-inline:-16px}
  .kb-hero img{border-radius:0}
  .kb-hero figcaption{margin-inline:16px}
  .kb-body p,.kb-list li{font-size:var(--pak-fs-body);line-height:1.75}
  .kb-body h2{margin-top:44px}
  .kb-table-hint{display:flex}
  .kb-inline-cta,.kb-end{padding:20px}
  .kb-inline-cta .actions .btn,.kb-end .actions .btn{width:100%}
  .kb-summary{padding:18px}
  .kb-grid.three{grid-template-columns:1fr}
  .kb-feature a{grid-template-columns:1fr}
  .kb-feature-media img{min-height:0;aspect-ratio:16/10}
  .kb-feature-body{padding:20px}
  .kb-author{flex-direction:column;padding:18px}
  .kb-related{padding-block:32px 48px}
}
@media (prefers-reduced-motion:reduce){
  .kb-card a,.kb-card-media img,.kb-share-btn,.kb-seealso,.kb-toc a,.kb-faq summary .icon{transition:none}
  .kb-card a:hover{transform:none}.kb-card a:hover .kb-card-media img{transform:none}
}

/* Bước 3.1 · Thư viện tài liệu, chi tiết tài liệu, tài liệu kỹ sư */
.dl-filters{display:grid;gap:2px}
.dl-filter-label{flex-shrink:0;align-self:center;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted);min-width:44px}
.dl-feature{padding-block:40px 0}
.dl-feature-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center;padding:32px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:linear-gradient(90deg,var(--pak-surface),var(--pak-page) 70%)}
.dl-cover{display:block}
.dl-cover img{display:block;width:100%;height:auto;border-radius:var(--pak-r);box-shadow:0 14px 34px rgb(18 53 74 / 20%);transform:rotate(-2deg);transition:transform var(--pak-motion) var(--pak-ease)}
.dl-cover:hover img{transform:rotate(0) translateY(-4px)}
.dl-feature-card h2{font-size:var(--pak-fs-section);margin:4px 0 12px}
.dl-feature-card p{max-width:620px}
.dl-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.dl-facts li{padding:6px 12px;border-radius:999px;background:var(--pak-page);border:1px solid var(--pak-border);font-size:var(--pak-fs-label);color:var(--pak-text)}
.dl-list-wrap{padding-block:48px 16px}
.dl-list{display:grid;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-page)}
.dl-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-top:1px solid var(--pak-border);transition:background-color var(--pak-motion) var(--pak-ease)}
.dl-row:first-child{border-top:0}
.dl-row:hover{background:var(--pak-surface)}
.dl-row[hidden]{display:none}
.dl-file{position:relative;display:grid;place-items:end center;width:52px;height:64px;padding-bottom:10px;border-radius:6px;background:var(--pak-brand);color:var(--pak-on-dark);font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:0.06em;overflow:hidden}
.dl-file::before{content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(225deg,var(--pak-page) 50%,rgb(255 255 255 / 35%) 50%)}
.dl-file.dl-ext-xlsx{background:var(--pak-success)}
.dl-file.dl-ext-cad{background:var(--pak-link)}
.dl-file.dl-ext-img{background:var(--pak-action-deep)}
.dl-meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.dl-type{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-link)}
.dl-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--pak-fs-caption);font-weight:700;line-height:1.4}
.dl-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dl-status.is-available{background:var(--pak-success-tint);color:var(--pak-success)}
.dl-status.is-pending{background:var(--pak-action-tint);color:var(--pak-notice-ink)}
.dl-status.is-request{background:var(--pak-surface-2);color:var(--pak-brand)}
.dl-status.is-old{background:var(--pak-surface-2);color:var(--pak-muted)}
.dl-info{min-width:0}
.dl-info h3{font-size:var(--pak-fs-card-sm);line-height:1.4}
.dl-info h3 a{color:var(--pak-brand)}
.dl-info h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.dl-meta{font-size:var(--pak-fs-label);color:var(--pak-muted);margin-top:2px}
.dl-actions .btn{white-space:nowrap}
.dl-qs-teaser{padding-block:32px 8px}
.dl-qs-teaser a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 24px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark);--pak-focus:var(--pak-action);transition:background-color var(--pak-motion) var(--pak-ease)}
.dl-qs-teaser a:hover{background:var(--pak-brand-deep)}
.dl-qs-teaser strong{display:block;font-size:var(--pak-fs-card)}
.dl-qs-teaser small{display:block;color:var(--pak-on-dark-muted);font-size:var(--pak-fs-label);margin-top:4px}
.dl-qs-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pak-action);color:var(--pak-brand)}
.dl-qs-contact{display:grid;gap:8px;padding:22px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark);--pak-focus:var(--pak-action)}
.dl-qs-contact small{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);color:var(--pak-action)}
.dl-qs-contact a:not(.btn){display:flex;align-items:center;gap:8px;font-size:var(--pak-fs-card);font-weight:700;color:var(--pak-on-dark)}
.dl-qs-contact p{color:var(--pak-on-dark-muted);font-size:var(--pak-fs-label);margin:0}
.dl-detail-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start;padding-top:4px}
.dl-detail-cover{margin:0}
.dl-detail-cover img{display:block;width:100%;height:auto;border-radius:var(--pak-r-lg);box-shadow:var(--pak-shadow)}
.dl-cover-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;aspect-ratio:3/4;padding:32px 28px 28px 38px;border-radius:var(--pak-r-lg);background:linear-gradient(160deg,var(--pak-brand),var(--pak-brand-deep));color:var(--pak-on-dark);box-shadow:var(--pak-shadow);overflow:hidden}
.dl-cover-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--pak-action)}
.dl-cover-art small{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);color:var(--pak-action)}
.dl-cover-art strong{font-size:var(--pak-fs-panel);line-height:1.2;margin-top:auto}
.dl-cover-art span{font-size:var(--pak-fs-label);color:var(--pak-on-dark-muted)}
.dl-cover-art img{width:57px;height:auto}
.dl-detail-info h1{font-size:var(--pak-fs-title);margin-top:6px}
.dl-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:26px 0 22px;background:var(--pak-border);border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden}
.dl-spec div{padding:12px 16px;background:var(--pak-page)}
.dl-spec dt{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.dl-spec dd{margin:2px 0 0;font-size:var(--pak-fs-body-sm);font-weight:700;color:var(--pak-text)}
.dl-note{font-size:var(--pak-fs-label);color:var(--pak-muted);margin-top:14px;max-width:640px}
.dl-section{margin-top:56px}
.dl-section > h2{font-size:var(--pak-fs-panel);margin-bottom:18px}
.dl-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dl-preview a{display:block;overflow:hidden;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-surface)}
.dl-preview img{display:block;width:100%;height:auto;transition:transform 240ms var(--pak-ease)}
.dl-preview a:hover img{transform:scale(1.025)}
@media (max-width:1023px){.dl-detail-grid{grid-template-columns:240px minmax(0,1fr);gap:32px}.dl-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .dl-feature-card{grid-template-columns:1fr;gap:24px;padding:20px}
  .dl-cover{max-width:170px}
  .dl-row{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px}
  .dl-file{width:44px;height:54px}
  .dl-actions{grid-column:1/-1}
  .dl-actions .btn{width:100%}
  .dl-qs-teaser a{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .dl-qs-teaser a > .icon{display:none}
  .dl-detail-grid{grid-template-columns:1fr;gap:24px}
  .dl-detail-cover{max-width:220px}
  .dl-detail-info .actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.dl-cover img,.dl-preview img,.dl-row,.dl-qs-teaser a{transition:none}.dl-cover:hover img{transform:rotate(-2deg)}.dl-preview a:hover img{transform:none}}
.dl-spec div:last-child:nth-child(odd){grid-column:1/-1}

/* ==========================================================================
   Bước 3.2 · Khung chung: header, menu, tìm nhanh, footer, thanh liên hệ (30/09/2026)
   Header 76px (điện thoại 64px). Menu ngang từ 1200px; nhỏ hơn dùng ngăn kéo.
   ========================================================================== */
body{--pak-header-h:76px;--pak-sticky-top:var(--pak-header-h)}
.lp-nav,.pr-anchor{top:var(--pak-sticky-top);transition:top 240ms var(--pak-ease)}
.toc,.filters,.kb-aside{top:calc(var(--pak-sticky-top) + 24px)}
.list-head{position:relative}
.hf-list-count{position:absolute;right:-6px;top:-7px;min-width:20px;height:20px;line-height:20px;border-radius:10px;background:var(--pak-action);color:var(--pak-brand);font-size:var(--pak-fs-eyebrow);font-weight:700;text-align:center;padding:0 5px;box-shadow:0 0 0 2px var(--pak-page)}

/* Dải thông tin trên cùng */
.pak-utility{font-size:var(--pak-fs-caption)}
.pak-utility .wrap{display:flex;align-items:center;gap:24px;min-height:36px;padding:0}
.pak-utility a{margin:0}
.pak-utility .icon{width:15px;height:15px}
.pak-utility-info{display:flex;gap:20px;margin:0;color:var(--pak-on-dark-muted);line-height:1.4;white-space:nowrap}
.pak-utility-info span{display:inline-flex;align-items:center;gap:6px}
.pak-utility-links{display:flex;gap:20px;margin-left:auto}
.pak-utility-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--pak-on-dark-muted);white-space:nowrap}
.pak-utility-links a:hover{color:var(--pak-on-dark)}
.pak-utility-phone{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding-left:20px;border-left:1px solid rgb(255 255 255 / 18%);color:var(--pak-action);font-weight:600;white-space:nowrap}
.pak-utility-phone strong{font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pak-utility-phone:hover{color:var(--pak-action-bright)}

/* Header */
.pak-header{transition:box-shadow 200ms var(--pak-ease),transform 260ms var(--pak-ease),background-color 200ms}
.pak-header .header-inner{height:var(--pak-header-h);gap:24px}
body.pak-scrolled .pak-header{box-shadow:0 1px 0 var(--pak-border),0 8px 24px rgb(18 53 74 / 8%);border-bottom-color:transparent}
.pak-nav{margin-left:auto;align-self:stretch}
.pak-nav-list{display:flex;align-items:stretch;gap:clamp(14px,1.4vw,26px);height:100%;margin:0;padding:0;list-style:none}
.pak-nav-item{display:flex;align-items:center}
.pak-nav-link{position:relative;display:flex;align-items:center;min-height:44px;font-size:var(--pak-fs-body-sm);font-weight:600;color:var(--pak-text);white-space:nowrap}
.pak-nav-link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:2px;background:var(--pak-action);transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms var(--pak-ease)}
.pak-nav-item.is-active>.pak-nav-link::after,.pak-nav-item.is-open>.pak-nav-link::after,.pak-nav-link:hover::after{transform:scaleX(1)}
.pak-nav-item.is-open>.pak-nav-link{color:var(--pak-brand)}
.pak-nav-link:focus-visible{outline-offset:2px;border-radius:4px}
.pak-nav-toggle{display:grid;place-items:center;width:26px;height:44px;margin-left:1px;padding:0;border:0;border-radius:6px;background:none;color:var(--pak-muted);cursor:pointer}
.pak-nav-toggle:hover{color:var(--pak-brand);background:var(--pak-surface)}
.pak-nav-toggle .icon{width:16px;height:16px;stroke-width:2;transition:transform 220ms var(--pak-ease)}
.pak-nav-item.is-open .pak-nav-toggle{color:var(--pak-brand)}
.pak-nav-item.is-open .pak-nav-toggle .icon{transform:rotate(180deg)}
.pak-header .head-actions{gap:10px}
.pak-header .icon-btn{transition:background-color 160ms,border-color 160ms,color 160ms}
.pak-header .icon-btn:hover{background:var(--pak-surface);border-color:var(--pak-border-input)}
.pak-menu-btn{display:none!important}
.pak-nav-scrim{position:fixed;inset:0;z-index:29;background:rgb(16 45 64 / 30%);animation:pak-fade 200ms ease}
@keyframes pak-fade{from{opacity:0}}

/* Menu thả xuống toàn chiều ngang */
.pak-panel{position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100dvh - var(--pak-header-h) - 24px);overflow:auto;overscroll-behavior:contain;background:var(--pak-page);border-top:1px solid var(--pak-border);box-shadow:0 28px 48px -16px rgb(16 45 64 / 28%)}
.pak-panel:not([hidden]){animation:pak-panel-in 220ms var(--pak-ease)}
.pak-panel:not([hidden]) .pak-panel-main>*,.pak-panel:not([hidden]) .pak-panel-feature{animation:pak-rise 320ms var(--pak-ease) both}
.pak-panel:not([hidden]) .pak-panel-feature{animation-delay:60ms}
@keyframes pak-panel-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes pak-rise{from{opacity:0;transform:translateY(8px)}}
.pak-panel-inner{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;padding:32px 0 36px}
.pak-panel-kicker{margin:0 0 14px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted);line-height:1.4}
.pak-panel a[aria-current="page"]{background:var(--pak-action-tint)}
.pak-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pak-cat{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:var(--pak-r);transition:background-color 160ms}
.pak-cat:hover{background:var(--pak-surface)}
.pak-cat-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--pak-surface-2);color:var(--pak-brand);transition:background-color 160ms,color 160ms}
.pak-cat:hover .pak-cat-icon{background:var(--pak-action)}
.pak-cat strong,.pak-sol strong,.pak-link-item strong{display:block;font-size:var(--pak-fs-body-sm);font-weight:700;line-height:1.35;color:var(--pak-text)}
.pak-cat small,.pak-sol small,.pak-link-item small{display:block;margin-top:4px;font-size:var(--pak-fs-caption);line-height:1.5;color:var(--pak-muted);font-weight:400}
.pak-sol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
.pak-sol{display:flex;align-items:center;gap:16px;padding:10px;border-radius:var(--pak-r);transition:background-color 160ms}
.pak-sol:hover{background:var(--pak-surface)}
.pak-sol img{flex:none;width:96px;height:64px;object-fit:cover;border-radius:6px;background:var(--pak-surface-2)}
.pak-sol small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pak-link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.pak-link-item{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:var(--pak-r);transition:background-color 160ms}
.pak-link-item:hover{background:var(--pak-surface)}
.pak-link-item>.icon{margin-top:1px;color:var(--pak-brand)}
.pak-panel-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:18px;padding-top:14px;border-top:1px solid var(--pak-border)}
.pak-panel-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.pak-panel-links a:hover{text-decoration:underline;text-underline-offset:4px}
.pak-panel-links .icon{width:16px;height:16px}
.pak-panel-feature{--pak-focus:var(--pak-action);display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:start;padding:28px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark-muted)}
.pak-feature-kicker{margin:0;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-action);line-height:1.4}
.pak-panel-feature strong{font-size:var(--pak-fs-card);line-height:1.35;color:var(--pak-on-dark)}
.pak-panel-feature p{margin:0;font-size:var(--pak-fs-label);line-height:1.6;color:var(--pak-on-dark-muted)}
.pak-panel-feature .btn{margin-top:6px}
.pak-feature-search,.pak-feature-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-on-dark);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pak-feature-search .icon,.pak-feature-link .icon{width:16px;height:16px}
.pak-feature-doc{flex-direction:row;gap:18px}
.pak-feature-doc img{flex:none;width:84px;height:auto;border-radius:4px;box-shadow:0 8px 20px rgb(0 0 0 / 35%)}
.pak-feature-doc>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pak-feature-visit ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--pak-fs-label)}
.pak-feature-visit li{display:flex;gap:10px}
.pak-feature-visit b{min-width:44px;color:var(--pak-on-dark);font-variant-numeric:tabular-nums}
.pak-feature-visit p{display:flex;align-items:center;gap:8px}
.pak-feature-visit p .icon{width:16px;height:16px;color:var(--pak-action)}
.pak-feature-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:4px}
.pak-feature-actions .btn{margin:0}

/* Ngăn kéo menu (điện thoại, máy tính bảng) */
.pak-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);max-width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--pak-page);color:var(--pak-text);box-shadow:-24px 0 60px rgb(16 45 64 / 24%)}
.pak-drawer[open]{display:flex;flex-direction:column;animation:pak-drawer-in 300ms var(--pak-ease)}
.pak-drawer.is-closing{animation:pak-drawer-out 180ms ease-in forwards}
.pak-drawer::backdrop{background:rgb(16 45 64 / 50%);animation:pak-fade 300ms ease}
.pak-drawer.is-closing::backdrop{animation:pak-fade 180ms ease reverse forwards}
@keyframes pak-drawer-in{from{transform:translateX(100%)}}
@keyframes pak-drawer-out{to{transform:translateX(100%)}}
.pak-drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 16px 0 20px;border-bottom:1px solid var(--pak-border)}
.pak-drawer-head .brand small{display:none}
.pak-drawer-head .brand img{width:46px;height:33px}
.pak-drawer-head .brand strong{font-size:16px}
.pak-drawer-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px 20px 24px}
.pak-drawer-search{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);background:var(--pak-surface);color:var(--pak-muted);font:inherit;font-size:var(--pak-fs-body);text-align:left;cursor:pointer}
.pak-drawer-nav{margin-top:8px}
.pak-acc{border-bottom:1px solid var(--pak-border)}
.pak-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;list-style:none;font-size:17px;font-weight:700;cursor:pointer}
.pak-acc>summary::-webkit-details-marker{display:none}
.pak-acc>summary .icon{width:18px;height:18px;color:var(--pak-muted);transition:transform 220ms var(--pak-ease)}
.pak-acc[open]>summary .icon{transform:rotate(180deg)}
.pak-acc-body{display:grid;gap:2px;padding:0 0 14px}
.pak-acc[open] .pak-acc-body{animation:pak-rise 260ms var(--pak-ease)}
.pak-acc-body a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:var(--pak-r);font-size:var(--pak-fs-body-sm);color:var(--pak-text)}
.pak-acc-body a:hover,.pak-acc-body a[aria-current="page"]{background:var(--pak-surface)}
.pak-acc-body a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--pak-action);font-weight:700}
.pak-acc-body a>.icon{width:20px;height:20px;color:var(--pak-brand)}
.pak-acc-body img{flex:none;width:52px;height:36px;object-fit:cover;border-radius:4px;background:var(--pak-surface-2)}
.pak-acc-body .pak-acc-all{justify-content:space-between;font-weight:700;color:var(--pak-link)}
.pak-acc-all .icon{width:16px;height:16px}
.pak-drawer-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--pak-border);font-size:17px;font-weight:700}
.pak-drawer-link .icon{width:18px;height:18px;color:var(--pak-muted)}
.pak-drawer-link[aria-current="page"],.pak-drawer-link.is-active{box-shadow:inset 3px 0 0 var(--pak-action);padding-left:12px}
.pak-drawer-count{min-width:24px;height:24px;margin-left:auto;margin-right:-4px;padding:0 7px;border-radius:12px;background:var(--pak-action);color:var(--pak-brand);font-size:var(--pak-fs-caption);font-weight:700;line-height:24px;text-align:center}
.pak-drawer-contact{--pak-focus:var(--pak-action);display:grid;gap:12px;margin-top:24px;padding:20px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark-muted)}
.pak-drawer-call{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 16px 8px 8px;border-radius:32px;background:var(--pak-action);color:var(--pak-brand)}
.pak-drawer-call small{display:block;font-size:var(--pak-fs-caption);font-weight:600}
.pak-drawer-call strong{display:block;font-size:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.pak-drawer-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pak-drawer-pair a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid rgb(255 255 255 / 24%);border-radius:var(--pak-r);color:var(--pak-on-dark);font-size:var(--pak-fs-label);font-weight:700}
.pak-drawer-pair .pak-drawer-zalo{background:var(--pak-zalo);border-color:var(--pak-zalo)}
.pak-drawer-contact p{margin:0;font-size:var(--pak-fs-label);line-height:1.8;color:var(--pak-on-dark-muted)}
.pak-drawer-contact p .icon{width:16px;height:16px;margin-right:6px;color:var(--pak-action)}
.pak-drawer-foot{flex:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--pak-border);background:var(--pak-page)}
.pak-drawer-foot .btn{width:100%}

/* Tìm nhanh */
.pak-search{width:min(760px,calc(100% - 32px));max-width:none;max-height:min(720px,calc(100dvh - 112px));margin:72px auto auto;padding:0;border:0;border-radius:var(--pak-r-lg);background:var(--pak-page);color:var(--pak-text);box-shadow:0 32px 80px rgb(16 45 64 / 32%);overflow:hidden}
.pak-search[open]{animation:pak-search-in 220ms var(--pak-ease)}
.pak-search.is-closing{animation:pak-search-out 160ms ease-in forwards}
.pak-search::backdrop{background:rgb(16 45 64 / 55%);backdrop-filter:blur(3px);animation:pak-fade 220ms ease}
.pak-search.is-closing::backdrop{animation:pak-fade 160ms ease reverse forwards}
@keyframes pak-search-in{from{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes pak-search-out{to{opacity:0;transform:translateY(-8px) scale(.98)}}
.pak-search-inner{display:flex;flex-direction:column;max-height:inherit}
.pak-search-bar{flex:none;display:flex;align-items:center;gap:12px;height:68px;padding:0 12px 0 22px;border-bottom:1px solid var(--pak-border);transition:box-shadow 160ms}
.pak-search-bar:focus-within{box-shadow:inset 0 -2px 0 var(--pak-action)}
.pak-search-bar>.icon{width:22px;height:22px;color:var(--pak-brand)}
.pak-search-bar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--pak-text);font:inherit;font-size:18px}
.pak-search-bar input::placeholder{color:var(--pak-muted)}
.pak-search-bar input::-webkit-search-cancel-button{cursor:pointer}
.pak-search-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:var(--pak-r);background:none;color:var(--pak-muted);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer}
.pak-search-close:hover{background:var(--pak-surface);color:var(--pak-brand)}
.pak-search kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid var(--pak-border);border-bottom-width:2px;border-radius:5px;background:var(--pak-surface);font:inherit;font-size:12px;font-weight:600;color:var(--pak-muted)}
.pak-mob{display:none}
.pak-search-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 10px 16px}
.pak-sr-label{display:flex;align-items:center;gap:8px;margin:0;padding:14px 12px 8px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted);line-height:1.4}
.pak-sr-label .icon{width:15px;height:15px}
.pak-sr-item{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:14px;min-height:60px;padding:8px 12px;border-radius:var(--pak-r);color:var(--pak-text);scroll-margin:8px}
.pak-sr-item>.icon{width:18px;height:18px;color:var(--pak-muted);opacity:0;transform:translateX(-4px);transition:opacity 160ms,transform 160ms}
.pak-sr-item[aria-selected="true"]{background:var(--pak-surface);box-shadow:inset 3px 0 0 var(--pak-action)}
.pak-sr-item[aria-selected="true"]>.icon{opacity:1;transform:none;color:var(--pak-brand)}
.pak-sr-thumb{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--pak-surface-2);color:var(--pak-brand)}
.pak-sr-thumb .icon{width:20px;height:20px}
.pak-sr-text strong{display:block;font-size:var(--pak-fs-body-sm);font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pak-sr-text small{display:block;margin-top:2px;font-size:var(--pak-fs-caption);color:var(--pak-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pak-sr-text mark,.pak-search-articles mark{background:none;color:inherit;font-weight:700;box-shadow:inset 0 -.42em 0 var(--pak-accent-mark)}
.pak-si-block+.pak-si-block{margin-top:8px}
.pak-si-head{display:flex;align-items:center;justify-content:space-between;padding-right:4px}
.pak-si-clear{min-height:36px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--pak-link);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer}
.pak-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 8px}
.pak-chip{min-height:40px;padding:0 16px;border:1px solid var(--pak-border);border-radius:20px;background:var(--pak-page);color:var(--pak-text);font:inherit;font-size:var(--pak-fs-label);cursor:pointer;transition:background-color 160ms,border-color 160ms}
.pak-chip:hover{background:var(--pak-action-tint);border-color:var(--pak-action)}
.pak-si-links{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 2px}
.pak-si-links a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--pak-r)}
.pak-si-links a:hover{background:var(--pak-surface)}
.pak-si-links a>.icon{flex:none;width:40px;height:40px;padding:10px;border-radius:8px;background:var(--pak-surface-2);color:var(--pak-brand)}
.pak-si-links strong{display:block;font-size:var(--pak-fs-body-sm);font-weight:700;line-height:1.35}
.pak-si-links small{display:block;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pak-sr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px 28px;text-align:center}
.pak-sr-empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--pak-surface-2);color:var(--pak-brand)}
.pak-sr-empty strong{font-size:var(--pak-fs-card-sm)}
.pak-sr-empty p{max-width:440px;margin:0;font-size:var(--pak-fs-body-sm)}
.pak-sr-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.pak-sr-empty-actions .btn{min-height:44px;padding:10px 16px}
.pak-search-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 20px;border-top:1px solid var(--pak-border);background:var(--pak-surface);font-size:var(--pak-fs-label)}
.pak-search-foot a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--pak-link);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pak-search-foot a .icon{width:16px;height:16px}
.pak-search-keys{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--pak-muted);white-space:nowrap}
.pak-search-keys kbd+kbd{margin-left:-2px}
.pak-search-keys kbd:not(:first-child){margin-left:6px}
.pak-search-keys kbd:nth-child(2){margin-left:0}

/* Trang /tim-kiem/: khối bài viết từ chỉ mục tìm nhanh */
.pak-search-articles{margin:40px 0 8px}
.pak-search-articles h2{margin-bottom:16px;font-size:var(--pak-fs-panel)}
.pak-sa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pak-sa-list a{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 160ms}
.pak-sa-list a:hover{border-color:var(--pak-border-input)}
.pak-sa-list img{flex:none;width:96px;height:60px;object-fit:cover;border-radius:6px}
.pak-sa-list strong{display:block;font-size:var(--pak-fs-body-sm);font-weight:700;line-height:1.4}
.pak-sa-list small{display:block;margin-top:4px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}

/* Nút gọi: vòng sóng lan ra (hiệu ứng "nhấp nháy" theo yêu cầu) */
.pak-ring{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pak-brand);color:var(--pak-action)}
.pak-ring .icon{width:18px;height:18px;stroke-width:2;animation:pak-shake 3s ease-in-out infinite}
.pak-ring::before,.pak-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--pak-brand);opacity:0;animation:pak-wave 3s cubic-bezier(.2,.6,.35,1) infinite}
.pak-ring::after{animation-delay:.7s}
.pak-ring-sm{width:28px;height:28px}
.pak-ring-sm .icon{width:15px;height:15px}
@keyframes pak-wave{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.85);opacity:0}}
@keyframes pak-shake{0%,56%,100%{transform:rotate(0)}60%{transform:rotate(-16deg)}64%{transform:rotate(14deg)}68%{transform:rotate(-10deg)}72%{transform:rotate(6deg)}76%{transform:rotate(0)}}

/* Nút nổi trên máy tính: gọi bên trái, Zalo bên phải; hiện khi cuộn qua dải thông tin trên cùng */
.pak-float{align-items:flex-end}
.pak-float>a,.pak-float-right>*{transition:opacity 260ms var(--pak-ease),transform 260ms var(--pak-ease),visibility 0s linear 260ms}
body:not(.pak-float-in) .pak-float>a,body:not(.pak-float-in) .pak-float-right>.pr-zalo,body:not(.pak-totop-in) .pak-totop{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}
body.pak-float-in .pak-float>a,body.pak-float-in .pak-float-right>.pr-zalo,body.pak-totop-in .pak-totop{transition-delay:0s}
.pak-float .pr-call{gap:12px;padding:6px 20px 6px 6px}
.pak-float-text small{display:block;font-size:var(--pak-fs-eyebrow);font-weight:600;line-height:1.2;opacity:.85}
.pak-float-text strong{display:block;font-size:17px;line-height:1.25;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pak-float-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pak-float .pr-zalo{min-height:48px}
.pak-totop{pointer-events:auto;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--pak-border);border-radius:50%;background:var(--pak-page);color:var(--pak-brand);box-shadow:0 5px 20px rgb(18 53 74 / 16%);cursor:pointer}
.pak-totop:hover{border-color:var(--pak-brand)}
body.pak-nav-open .pak-float{visibility:hidden}

/* Thanh liên hệ dưới cùng trên điện thoại */
.pak-contact-bar{grid-template-columns:1.15fr 1fr .85fr;box-shadow:0 -6px 24px rgb(18 53 74 / 10%)}
.pak-contact-bar>a{gap:8px;font-size:var(--pak-fs-label);font-weight:700}
.pak-contact-bar>a:nth-child(2){background:var(--pak-surface);border:1px solid var(--pak-border);color:var(--pak-brand)}

/* Footer */
.pak-footer{--pak-focus:var(--pak-action);background:var(--pak-brand-deep);color:var(--pak-on-dark-muted);padding-bottom:100px}
.pak-footer a{color:inherit}
.pak-footer a.btn{color:var(--pak-brand)}
.pak-footer-cta{background:var(--pak-brand);border-bottom:1px solid rgb(255 255 255 / 8%)}
.pak-footer-cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:36px 0}
.pak-fc-intro h2{margin:8px 0 6px;font-size:var(--pak-fs-panel);line-height:1.3;color:var(--pak-on-dark)}
.pak-fc-intro p{margin:0;font-size:var(--pak-fs-label);color:var(--pak-on-dark-subtle)}
.pak-fc-intro .pak-feature-kicker{color:var(--pak-action)}
.pak-fc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pak-fc-call,.pak-fc-item{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 18px 6px 6px;border-radius:32px}
.pak-fc-call{background:var(--pak-action);color:var(--pak-brand)!important}
.pak-fc-item{padding-left:16px;border:1px solid rgb(255 255 255 / 22%);color:var(--pak-on-dark)!important}
.pak-fc-item:hover{border-color:var(--pak-on-dark-muted)}
.pak-fc-item>.icon{color:var(--pak-action)}
.pak-fc-call small,.pak-fc-item small{display:block;font-size:var(--pak-fs-eyebrow);font-weight:600;line-height:1.2;opacity:.85}
.pak-fc-call strong,.pak-fc-item strong{display:block;font-size:var(--pak-fs-body);line-height:1.3;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pak-fc-actions .btn{min-height:56px;border-radius:32px;padding:12px 24px}
.pak-footer-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(0,2.9fr);gap:56px;padding:56px 0 40px}
.pak-footer-brand .brand{color:var(--pak-on-dark)}
.pak-footer-brand .brand small{color:var(--pak-on-dark-subtle)}
.pak-footer-legal{margin:20px 0 16px;font-size:var(--pak-fs-label);font-weight:600;line-height:1.5;color:var(--pak-on-dark)}
.pak-footer-showrooms{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none;font-size:var(--pak-fs-label);line-height:1.5}
.pak-footer-showrooms li{display:flex;gap:10px}
.pak-footer-showrooms b{color:var(--pak-on-dark);font-weight:600}
.pak-footer-brand .icon{flex:none;width:17px;height:17px;margin-top:2px;color:var(--pak-action)}
.pak-footer-meta{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;font-size:var(--pak-fs-label);line-height:1.5;color:var(--pak-on-dark-muted)}
.pak-footer-meta a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pak-footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pak-footer-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgb(255 255 255 / 22%);border-radius:var(--pak-r);font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-on-dark)}
.pak-footer-social a:hover{border-color:var(--pak-on-dark-muted)}
.pak-footer-social .icon{margin:0}
.pak-footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pak-fcol>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:default}
.pak-fcol>summary::-webkit-details-marker{display:none}
.pak-fcol>summary .icon{display:none}
.pak-fcol h2{margin:0 0 14px;font-size:var(--pak-fs-body-sm);font-weight:700;letter-spacing:0;color:var(--pak-on-dark)}
.pak-fcol ul{margin:0;padding:0;list-style:none}
.pak-fcol li a{display:inline-flex;align-items:center;min-height:36px;font-size:var(--pak-fs-label);color:var(--pak-on-dark-muted);line-height:1.4}
.pak-fcol li a:hover{color:var(--pak-on-dark);text-decoration:underline;text-underline-offset:4px}
.pak-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:24px 0 8px;border-top:1px solid rgb(255 255 255 / 12%);font-size:var(--pak-fs-caption);color:var(--pak-on-dark-subtle)}
.pak-footer-bottom p{margin:0;color:inherit;line-height:1.6}
.pak-footer-bottom nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.pak-footer-bottom nav a{display:inline-flex;align-items:center;min-height:32px}
.pak-footer-bottom a:hover{color:var(--pak-on-dark)}
.pak-footer-proto{margin-left:auto!important}
.pak-footer-proto a{text-decoration:underline;text-underline-offset:3px}

/* Máy tính nhỏ và máy tính bảng: menu ngang chuyển thành ngăn kéo */
@media (max-width:1199px){
  .pak-nav{display:none}
  .pak-header .head-actions{margin-left:auto}
  .pak-menu-btn{display:inline-grid!important}
  .pak-utility-info span:nth-child(2){display:none}
  .pak-footer-grid{grid-template-columns:1fr;gap:40px}
  .pak-footer-cta .wrap{grid-template-columns:1fr;gap:20px}
}
@media (max-width:1023px){
  .pak-utility-links{display:none}
  .pak-utility-phone{margin-left:auto}
  .pak-footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px) and (min-width:1024px){
  .pak-header .brand strong{font-size:18px}
}
/* Điện thoại */
@media (max-width:767px){
  body{--pak-header-h:64px}
  body.pak-header-hidden{--pak-sticky-top:0px}
  body.pak-header-hidden .pak-header:not(:focus-within){transform:translateY(-100%);box-shadow:none}
  .pak-header .header-inner{height:var(--pak-header-h)}
  .pak-header .head-actions{gap:8px}
  .pak-drawer{width:100%}
  .pak-search{width:100%;height:100dvh;max-height:none;margin:0;border-radius:0}
  .pak-search-inner{height:100%;max-height:none}
  .pak-search-bar{height:64px;padding:0 6px 0 16px}
  .pak-search-bar input{font-size:17px}
  .pak-search-close kbd,.pak-desk,.pak-search-keys{display:none}
  .pak-mob{display:inline}
  .pak-search-close{color:var(--pak-link);font-size:var(--pak-fs-body-sm)}
  .pak-search-body{padding:4px 4px 16px}
  .pak-si-links{grid-template-columns:1fr}
  .pak-search-foot{padding:0 16px calc(env(safe-area-inset-bottom))}
  .pak-search-foot:has([data-search-all][hidden]){display:none}
  .pak-sr-item{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .pak-sr-item>.icon{display:none}
  .pak-sr-text strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pak-sa-list{grid-template-columns:1fr}
  .pak-sa-list img{width:80px;height:52px}
  .pak-contact-bar{gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .pak-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .pak-footer-cta .wrap{padding:28px 0}
  .pak-fc-intro h2{font-size:var(--pak-fs-card)}
  .pak-fc-actions{display:grid;grid-template-columns:1fr 1fr}
  .pak-fc-actions>*{min-width:0}
  .pak-fc-call{grid-column:1/-1}
  .pak-fc-call strong{font-size:20px}
  .pak-fc-item{padding-right:12px}
  .pak-fc-actions .btn{grid-column:1/-1}
  .pak-footer-grid{padding:40px 0 24px;gap:28px}
  .pak-footer-links{grid-template-columns:1fr;gap:0}
  .pak-fcol{border-top:1px solid rgb(255 255 255 / 12%)}
  .pak-fcol:last-child{border-bottom:1px solid rgb(255 255 255 / 12%)}
  .pak-fcol>summary{min-height:56px;cursor:pointer}
  .pak-fcol>summary .icon{display:block;width:18px;height:18px;color:var(--pak-on-dark-subtle);transition:transform 220ms var(--pak-ease)}
  .pak-fcol[open]>summary .icon{transform:rotate(180deg)}
  .pak-fcol h2{margin:0;font-size:var(--pak-fs-body)}
  .pak-fcol ul{padding:0 0 14px}
  .pak-fcol li a{min-height:44px;font-size:var(--pak-fs-body-sm)}
  .pak-footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .pak-footer-proto{margin-left:0!important}
}
@media (hover:hover){
  .pak-float .pr-call:hover{filter:none;background:var(--pak-action-hover)}
  .pak-float .pr-zalo:hover{filter:brightness(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .pak-header,.pak-float>a,.pak-float-right>*,.lp-nav,.pr-anchor{transition:none}
  body.pak-header-hidden .pak-header:not(:focus-within){transform:none}
}
@media print{
  .pak-footer,.pak-float,.pak-contact-bar,.pak-nav-scrim,.pak-drawer,.pak-search{display:none!important}
}

/* ==========================================================================
   Bước 3.3 · Trang chủ (30/09/2026)
   Hero chạy chuyển động bằng CSS ngay khi mở trang; các khối bên dưới hiện dần
   khi cuộn bằng site-motion.js (dùng chung toàn site), không có JS thì luôn hiện.
   ========================================================================== */
.hp-home{background:var(--pak-page)}
.hp-section{padding-block:clamp(64px,7vw,104px)}
.hp-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;line-height:1.4;color:var(--pak-link)}
.hp-kicker::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;background:var(--pak-action)}
.hp-home h2{font-size:var(--pak-fs-section);line-height:1.18;letter-spacing:var(--pak-track-tight);color:var(--pak-text)}
.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.hp-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link);white-space:nowrap}
.hp-link .icon,.hp-more .icon{width:16px;height:16px;transition:transform 200ms var(--pak-ease)}
.hp-link:hover .icon{transform:translateX(3px)}
.hp-more{display:inline-flex;align-items:center;gap:8px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.hp-flip{transform:scaleX(-1)}

/* Hero */
.hp-hero{--pak-focus:var(--pak-action);position:relative;isolation:isolate;overflow:hidden;background:var(--pak-brand-deep);color:var(--pak-on-dark)}
.hp-hero-media{position:absolute;inset:0 0 -14% 0;z-index:-2;will-change:transform}
.hp-hero-img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% center}
.hp-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(6 27 43 / 96%) 0%,rgb(6 27 43 / 84%) 36%,rgb(6 27 43 / 38%) 72%,rgb(6 27 43 / 20%) 100%),linear-gradient(0deg,var(--pak-brand-deep) 2%,rgb(16 45 64 / 0%) 46%)}
.hp-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:48px;min-height:clamp(620px,calc(100svh - 144px),860px);padding-top:clamp(36px,4vw,64px)}
.hp-hero-copy{grid-column:1;align-self:center;padding-bottom:20px}
.hp-hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;line-height:1.4;color:var(--pak-action)}
.hp-hero-eyebrow span{flex:none;width:28px;height:3px;border-radius:2px;background:var(--pak-action);transform-origin:0 50%}
.hp-hero h1{margin:0;font-size:var(--pak-fs-display);line-height:1.1;letter-spacing:-.025em;color:var(--pak-on-dark)}
.hp-line{display:block;overflow:hidden;padding:.12em 0 .1em;margin:-.12em 0 -.1em}
.hp-line>span{display:inline-block}
.hp-accent{color:var(--pak-action)}
.hp-hero-lead{max-width:560px;margin:26px 0 0;font-size:var(--pak-fs-lead);line-height:1.7;color:var(--pak-on-dark-muted)}
.hp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hp-hero-actions .btn{min-height:56px}
.hp-btn-profile{padding:8px 24px 8px 18px}
.hp-btn-profile>.icon{width:22px;height:22px}
.hp-btn-profile>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.hp-btn-profile small{margin-top:2px;font-size:var(--pak-fs-eyebrow);font-weight:600;opacity:.78}
.hp-hero .btn.secondary{background:rgb(255 255 255 / 6%);border-color:rgb(255 255 255 / 45%);color:var(--pak-on-dark);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hp-hero .btn.secondary:hover{background:rgb(255 255 255 / 14%);border-color:var(--pak-on-dark)}
.hp-hero-phone{display:inline-flex;align-items:center;gap:14px;margin-top:28px;color:var(--pak-on-dark)}
.hp-hero-phone .pak-ring{width:44px;height:44px;background:var(--pak-action);color:var(--pak-brand)}
.hp-hero-phone .pak-ring::before,.hp-hero-phone .pak-ring::after{border-color:var(--pak-action)}
.hp-hero-phone small{display:block;font-size:var(--pak-fs-eyebrow);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pak-on-dark-subtle)}
.hp-hero-phone strong{display:block;font-size:24px;line-height:1.2;letter-spacing:.02em;color:var(--pak-action);font-variant-numeric:tabular-nums}
.hp-hero-proof{grid-column:2;align-self:end;justify-self:end;display:flex;align-items:center;gap:16px;max-width:440px;margin-bottom:24px;padding:16px 20px 16px 16px;border:1px solid rgb(255 255 255 / 16%);border-radius:var(--pak-r-lg);background:rgb(16 45 64 / 58%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--pak-on-dark);transition:border-color 200ms,background-color 200ms}
.hp-hero-proof:hover{border-color:rgb(255 203 5 / 60%);background:rgb(16 45 64 / 76%)}
.hp-proof-faces{flex:none;display:flex}
.hp-proof-faces img{width:48px;height:48px;border:2px solid var(--pak-brand-deep);border-radius:50%;object-fit:cover}
.hp-proof-faces img+img{margin-left:-14px}
.hp-proof-text small{display:block;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pak-on-dark-subtle)}
.hp-proof-text strong{display:block;margin:4px 0 6px;font-size:var(--pak-fs-body-sm);line-height:1.45}
.hp-proof-text em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-action)}
.hp-proof-text em .icon{width:16px;height:16px}
.hp-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgb(255 255 255 / 16%)}
.hp-metrics>div{position:relative;padding:24px 24px 30px}
.hp-metrics>div+div{border-left:1px solid rgb(255 255 255 / 12%)}
.hp-metrics>div:first-child{padding-left:0}
.hp-metrics>div::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--pak-action);transform-origin:0 50%}
.hp-metrics>div+div::before{left:24px}
.hp-metrics strong{display:block;font-size:var(--pak-fs-stat);line-height:1;letter-spacing:-.02em;color:var(--pak-action);font-variant-numeric:tabular-nums}
.hp-metrics>div>span{display:block;margin-top:10px;font-size:var(--pak-fs-label);color:var(--pak-on-dark-muted)}
/* Hero chạy một lần khi mở trang */
@keyframes hp-zoom{from{transform:scale(1.14)}}
@keyframes hp-rise{from{transform:translateY(110%)}}
@keyframes hp-up{from{opacity:0;transform:translateY(22px)}}
@keyframes hp-in-left{from{opacity:0;transform:translateX(32px)}}
@keyframes hp-grow{from{transform:scaleX(0)}}
html:not(.pak-hero-done) .hp-hero-img{animation:hp-zoom 2.8s cubic-bezier(.16,.8,.24,1) both}
html:not(.pak-hero-done) .hp-hero-eyebrow{animation:hp-up .6s .05s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-hero-eyebrow span{animation:hp-grow .8s .2s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-line>span{animation:hp-rise 1s calc(.12s + var(--i) * .11s) cubic-bezier(.16,.84,.3,1) both}
html:not(.pak-hero-done) .hp-hero-lead{animation:hp-up .7s .52s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-hero-actions{animation:hp-up .7s .62s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-hero-phone{animation:hp-up .7s .72s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-hero-proof{animation:hp-in-left .9s .8s var(--pak-ease) both}
html:not(.pak-hero-done) .hp-metrics>div{animation:hp-up .7s calc(.9s + var(--i) * .09s) var(--pak-ease) both}
html:not(.pak-hero-done) .hp-metrics>div::before{animation:hp-grow .9s calc(1.05s + var(--i) * .09s) var(--pak-ease) both}

/* Dải thương hiệu */
.hp-trust{padding:40px 0 28px;background:var(--pak-page);border-bottom:1px solid var(--pak-border)}
.hp-trust-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.hp-home .hp-trust h2{font-size:var(--pak-fs-card);line-height:1.3;letter-spacing:0}
.hp-trust-head p{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0 0;font-size:var(--pak-fs-label);font-weight:600;line-height:1.5;color:var(--pak-text)}
.hp-trust-head p span{display:inline-flex;align-items:center;gap:8px}
.hp-trust-head p .icon{width:18px;height:18px;color:var(--pak-success)}
.hp-trust-tools{display:flex;align-items:center;gap:12px}
.hp-trust-tools>a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link);white-space:nowrap}
.hp-trust-tools>a .icon{width:16px;height:16px}
.hp-marquee-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--pak-border);border-radius:50%;background:var(--pak-page);color:var(--pak-brand);cursor:pointer}
.hp-marquee-toggle:hover{border-color:var(--pak-border-input)}
.hp-marquee-toggle .icon{width:16px;height:16px;stroke-width:2.2}
.hp-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hp-marquee-track{flex:none;display:flex;align-items:center;gap:20px;margin:0;padding:6px 20px 10px 0;list-style:none;animation:hp-marquee 42s linear infinite}
.hp-marquee:hover .hp-marquee-track,.hp-marquee:focus-within .hp-marquee-track,.hp-trust.is-paused .hp-marquee-track{animation-play-state:paused}
@keyframes hp-marquee{to{transform:translateX(-100%)}}
.hp-marquee li a{display:grid;place-items:center;width:208px;height:96px;padding:18px 24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,box-shadow 200ms}
.hp-marquee li a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.hp-marquee img{width:auto;height:auto;max-width:100%;max-height:56px;object-fit:contain}
.hp-trust-more{margin-top:14px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.hp-trust-more a{font-weight:600;color:var(--pak-link);text-decoration:underline;text-underline-offset:3px}

/* Năng lực tổng kho */
.hp-cap-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,88px);align-items:start}
.hp-cap-intro{position:sticky;top:calc(var(--pak-sticky-top) + 40px)}
.hp-cap-intro h2{max-width:560px}
.hp-cap-intro>p:not(.hp-kicker){max-width:520px;margin:20px 0 0;font-size:var(--pak-fs-lead);line-height:1.7}
.hp-cap-fields{display:grid;margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--pak-border)}
.hp-cap-fields li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--pak-border);font-weight:600;color:var(--pak-text)}
.hp-cap-fields b{min-width:22px;font-size:var(--pak-fs-caption);color:var(--pak-muted);font-variant-numeric:tabular-nums}
.hp-cap-intro .actions{margin-top:32px}
.hp-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-bottom:48px}
.hp-pillar{position:relative;display:flex;flex-direction:column;min-height:280px;padding:28px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface);overflow:hidden;transition:border-color 250ms,box-shadow 250ms,background-color 250ms}
.hp-pillar:nth-child(even){margin:48px 0 -48px}
.hp-pillar::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--pak-action);transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--pak-ease) 250ms}
.hp-pillar:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow);background:var(--pak-page)}
.hp-pillar:hover::after,.hp-pillar[data-shown]::after{transform:scaleX(1)}
.hp-pillar-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:auto}
.hp-pillar-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--pak-brand);color:var(--pak-action)}
.hp-pillar-icon .icon{width:24px;height:24px}
.hp-pillar-num{font-size:clamp(44px,3.2vw + 8px,64px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--pak-brand);font-variant-numeric:tabular-nums}
.hp-pillar-word{padding-top:12px;font-size:var(--pak-fs-panel);letter-spacing:-.01em}
.hp-pillar h3{margin-top:28px;font-size:var(--pak-fs-card);line-height:1.3}
.hp-pillar p{margin:8px 0 0;font-size:var(--pak-fs-body-sm);line-height:1.6}

/* Ngành hàng */
.hp-industries{background:var(--pak-surface)}
.hp-rail-controls{display:flex;gap:8px}
.hp-rail-controls .icon-btn{width:48px;height:48px;border-color:var(--pak-border-input);border-radius:50%;background:var(--pak-page);color:var(--pak-brand);transition:background-color 160ms,border-color 160ms}
.hp-rail-controls .icon-btn:hover{border-color:var(--pak-brand);background:var(--pak-brand);color:var(--pak-on-dark)}
.hp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 3.3);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 8px;margin:-4px -2px 0;scrollbar-width:none}
.hp-rail::-webkit-scrollbar{display:none}
.hp-ind-card{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);overflow:hidden;transition:border-color 250ms,box-shadow 250ms}
.hp-ind-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.hp-ind-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--pak-surface-2)}
.hp-ind-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--pak-ease)}
.hp-ind-card:hover .hp-ind-media img{transform:scale(1.06)}
.hp-ind-media span{position:absolute;left:16px;top:16px;display:grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:15px;background:rgb(16 45 64 / 80%);color:var(--pak-on-dark);font-size:var(--pak-fs-caption);font-weight:700;font-variant-numeric:tabular-nums}
.hp-ind-body{display:flex;flex:1;flex-direction:column;padding:22px 22px 20px}
.hp-ind-logo{align-self:flex-start;width:auto;max-width:160px;height:32px;object-fit:contain;object-position:left center}
.hp-ind-body h3{margin:16px 0 10px;font-size:var(--pak-fs-card)}
.hp-ind-body ul{display:grid;gap:6px;margin:0 0 20px;padding:0;list-style:none;font-size:var(--pak-fs-body-sm);color:var(--pak-muted)}
.hp-ind-body li{position:relative;padding-left:16px}
.hp-ind-body li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--pak-action)}
.hp-ind-body .hp-more{margin-top:auto;padding-top:16px;border-top:1px solid var(--pak-border)}
.hp-ind-card:hover .hp-more .icon{transform:translateX(4px)}
.hp-rail-progress{height:3px;margin-top:24px;border-radius:2px;background:var(--pak-border);overflow:hidden}
.hp-rail-progress span{display:block;width:100%;height:100%;background:var(--pak-brand);transform:scaleX(var(--p,.3));transform-origin:0 50%;transition:transform 150ms linear}

/* Dự án & chứng nhận */
.hp-projects .ev-project-image img{transition:transform 700ms var(--pak-ease)}
.hp-projects .ev-project a:hover .ev-project-image img{transform:scale(1.06)}
.hp-more-projects{display:none}
.hp-certs{background:var(--pak-surface)}
.hp-certs .ev-cert{display:block;padding:12px 12px 18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 250ms,box-shadow 250ms}
.hp-certs .ev-cert:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.hp-certs .ev-cert>div{padding:0;border-radius:var(--pak-r);overflow:hidden;background:var(--pak-surface-2)}
.hp-certs .ev-cert img{transition:transform 700ms var(--pak-ease)}
.hp-certs .ev-cert:hover img{transform:scale(1.04)}
.hp-certs .ev-cert h3,.hp-certs .ev-cert p{padding-inline:6px}
.hp-certs .ev-cert p{min-height:0;color:var(--pak-muted)}
.hp-certs .ev-cert>span{display:inline-flex;align-items:center;gap:6px;margin:10px 6px 0;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.hp-certs .ev-cert>span .icon{width:16px;height:16px}

/* Quy trình báo giá */
.hp-process{--pak-focus:var(--pak-action);background:var(--pak-brand-deep);color:var(--pak-on-dark-muted)}
.hp-home .hp-process h2{color:var(--pak-on-dark)}
.hp-process .hp-kicker{color:var(--pak-action)}
.hp-process-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:start}
.hp-steps{position:relative;display:grid;margin:40px 0 0;padding:0;list-style:none}
.hp-steps::before,.hp-steps::after{content:"";position:absolute;left:27px;top:30px;bottom:30px;width:2px;background:rgb(255 255 255 / 14%)}
.hp-steps::after{background:var(--pak-action);transform-origin:50% 0}
.hp-steps li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:14px 0}
.hp-step-icon{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border:2px solid rgb(255 255 255 / 18%);border-radius:50%;background:var(--pak-brand);color:var(--pak-action)}
.hp-step-icon .icon{width:22px;height:22px}
.hp-step-icon b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pak-action);color:var(--pak-brand);font-size:var(--pak-fs-eyebrow)}
.hp-steps h3{margin:6px 0 4px;font-size:var(--pak-fs-card-sm);color:var(--pak-on-dark)}
.hp-steps p{margin:0;font-size:var(--pak-fs-body-sm);line-height:1.6;color:var(--pak-on-dark-muted)}
.hp-process-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hp-process .btn.secondary{background:transparent;border-color:rgb(255 255 255 / 45%);color:var(--pak-on-dark)}
.hp-process .btn.secondary:hover{background:rgb(255 255 255 / 10%);border-color:var(--pak-on-dark)}
.hp-process-form .pr-form{margin:0;color:var(--pak-text);box-shadow:0 30px 60px -20px rgb(0 0 0 / 45%)}
.hp-home .hp-process .pr-form h2{color:var(--pak-text)}

/* Kiến thức & tài liệu */
.hp-kb-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:24px;align-items:start}
.hp-kb-articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hp-kb-card{display:flex;flex-direction:column;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);overflow:hidden;transition:border-color 250ms,box-shadow 250ms}
.hp-kb-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.hp-kb-media{aspect-ratio:16/10;overflow:hidden;background:var(--pak-surface-2)}
.hp-kb-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--pak-ease)}
.hp-kb-card:hover .hp-kb-media img{transform:scale(1.05)}
.hp-kb-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:18px 20px 20px}
.hp-kb-body small{font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-muted)}
.hp-kb-body h3{font-size:var(--pak-fs-card-sm);line-height:1.4}
.hp-kb-body .hp-more{margin-top:auto;padding-top:6px}
.hp-kb-card:hover .hp-more .icon{transform:translateX(4px)}
.hp-kb-docs{--pak-focus:var(--pak-action);padding:24px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark-muted)}
.hp-kb-docs h3{display:flex;align-items:center;gap:10px;font-size:var(--pak-fs-card-sm);color:var(--pak-on-dark)}
.hp-kb-docs h3 .icon{color:var(--pak-action)}
.hp-kb-docs ul{margin:12px 0 0;padding:0;list-style:none}
.hp-kb-docs li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid rgb(255 255 255 / 12%);font-size:var(--pak-fs-body-sm);line-height:1.45;color:var(--pak-on-dark)}
.hp-kb-docs li a:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
.hp-kb-docs .dl-status{flex:none}
.hp-kb-doc-actions{display:grid;margin-top:12px}
.hp-kb-docs .hp-link{color:var(--pak-action)}

/* Showroom & kho */
.hp-visit{background:var(--pak-surface)}
.hp-visit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.hp-visit-photo{position:relative;margin:0;aspect-ratio:1280/777;border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-surface-2)}
.hp-visit-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hp-visit-photo figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:6px;background:rgb(16 45 64 / 76%);color:var(--pak-on-dark);font-size:var(--pak-fs-eyebrow)}
.hp-visit-copy h2{margin-bottom:12px}
.hp-place{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--pak-border)}
.hp-place-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--pak-brand);color:var(--pak-action)}
.hp-place h3{font-size:var(--pak-fs-card-sm)}
.hp-place p{margin:4px 0 0;font-size:var(--pak-fs-body-sm);line-height:1.6}
.hp-place .hp-place-note{font-size:var(--pak-fs-label)}
.hp-place-note b{color:var(--pak-text)}
.hp-place .hp-link{min-height:40px;margin-top:4px}
.hp-visit-hours{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-weight:600;color:var(--pak-text)}
.hp-visit-hours .icon{color:var(--pak-brand)}
.hp-visit .actions{margin-top:24px}

/* Hiện dần khi cuộn: dùng chung site-motion.js (xem phần "Trang chủ liền mạch" cuối file) */

/* Máy tính bảng */
@media (max-width:1199px){
  .hp-hero-grid{column-gap:32px}
  .hp-rail{grid-auto-columns:calc((100% - 40px) / 2.4)}
  .hp-kb-grid{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .hp-hero-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .hp-hero-copy{padding-bottom:28px}
  .hp-hero-proof{grid-column:1;justify-self:start;margin-bottom:28px}
  .hp-cap-grid,.hp-process-grid,.hp-visit-grid{grid-template-columns:1fr}
  .hp-cap-intro{position:static}
  .hp-pillar:nth-child(even){margin:0}
  .hp-pillars{padding-bottom:0}
}
/* Điện thoại */
@media (max-width:767px){
  .hp-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}
  .hp-hero-grid{padding-top:36px}
  .hp-hero-shade{background:linear-gradient(180deg,rgb(6 27 43 / 90%) 0%,rgb(6 27 43 / 78%) 50%,rgb(16 45 64 / 96%) 100%)}
  .hp-hero-lead{margin-top:20px}
  .hp-hero-actions{display:grid;margin-top:26px}
  .hp-hero-actions .btn{width:100%;justify-content:center}
  .hp-btn-profile>span{align-items:center}
  .hp-hero-phone{margin-top:22px}
  .hp-hero-proof{max-width:none;width:100%;padding:14px}
  .hp-proof-faces img{width:40px;height:40px}
  .hp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-metrics>div{padding:20px 16px 24px}
  .hp-metrics>div:nth-child(odd){padding-left:0;border-left:0}
  .hp-metrics>div:nth-child(n+3){border-top:1px solid rgb(255 255 255 / 12%)}
  .hp-metrics>div+div::before{left:16px}
  .hp-metrics>div:nth-child(3)::before{left:0}
  .hp-trust{padding:32px 0 24px}
  .hp-trust-head{flex-direction:column;align-items:flex-start;gap:12px}
  .hp-trust-tools{width:100%;justify-content:space-between}
  .hp-marquee li a{width:156px;height:80px;padding:14px 18px}
  .hp-marquee img{max-height:44px}
  .hp-marquee-track{gap:12px;padding-right:12px}
  .hp-cap-fields{grid-template-columns:1fr 1fr;gap:8px;border:0}
  .hp-cap-fields li{align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--pak-border);border-radius:var(--pak-r);font-size:var(--pak-fs-label);line-height:1.4}
  .hp-cap-fields b{min-width:0}
  .hp-pillars{grid-template-columns:1fr;gap:12px}
  .hp-pillar{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;min-height:0;padding:20px}
  .hp-pillar-top{grid-row:1/3;flex-direction:column;align-items:flex-start;gap:10px;margin:0}
  .hp-pillar-icon{width:44px;height:44px}
  .hp-pillar-num{font-size:40px}
  .hp-pillar-word{padding-top:0;font-size:var(--pak-fs-card-sm)}
  .hp-pillar h3{margin-top:0;font-size:var(--pak-fs-card-sm)}
  .hp-pillar p{margin-top:6px;font-size:var(--pak-fs-label)}
  .hp-rail{grid-auto-columns:84%;gap:14px}
  .hp-rail-controls{display:none}
  .hp-projects:not(.is-expanded) .ev-project:nth-child(n+7){display:none}
  .hp-more-projects{display:flex;width:100%;margin-top:24px}
  .hp-projects.is-expanded .hp-more-projects{display:none}
  .hp-certs .ev-certs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px;scrollbar-width:none}
  .hp-certs .ev-certs::-webkit-scrollbar{display:none}
  .hp-certs .ev-cert{scroll-snap-align:start}
  .hp-steps li{gap:16px}
  .hp-process-actions{display:grid}
  .hp-process-actions .btn{width:100%}
  .hp-kb-articles{grid-template-columns:1fr;gap:12px}
  .hp-kb-card{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .hp-kb-media{aspect-ratio:auto;height:100%}
  .hp-kb-body{padding:14px 16px}
  .hp-kb-body .hp-more{display:none}
  .hp-visit .actions{display:grid}
  .hp-visit .actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hp-hero-media{transform:none!important}
  .hp-marquee{width:min(1240px,calc(100% - 64px));margin:auto;-webkit-mask-image:none;mask-image:none}
  .hp-marquee-track{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:0}
  .hp-marquee li a{width:auto}
  .hp-marquee-track[aria-hidden]{display:none}
  .hp-marquee-toggle{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){.hp-marquee{width:calc(100% - 32px)}}

/* ==========================================================================
   Bước 3.4 · Sản phẩm, tìm kiếm, danh sách tư vấn, thương hiệu (30/09/2026)
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pk-page{padding-bottom:clamp(48px,6vw,88px)}
.pk-page h1{font-size:var(--pak-fs-title);line-height:1.15;letter-spacing:var(--pak-track-tight)}
.pk-page h2{font-size:var(--pak-fs-panel);line-height:1.25;letter-spacing:var(--pak-track-tight)}
.pk-section{padding-top:clamp(36px,4.5vw,64px)}
.pk-section>h2{margin-bottom:20px}
.pk-muted{color:var(--pak-muted)}
.pk-small{font-size:var(--pak-fs-caption);margin-top:12px}
.pk-hero{padding:24px 0 36px;background:var(--pak-surface);border-bottom:1px solid var(--pak-border)}
.pk-hero .breadcrumb{margin-bottom:20px}
.pk-hero-lead{max-width:720px;margin-top:14px;font-size:var(--pak-fs-lead);line-height:1.7}
.pk-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.pk-search{display:flex;align-items:center;gap:10px;min-height:60px;padding:6px 6px 6px 18px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r-lg);background:var(--pak-page);box-shadow:var(--pak-shadow)}
.pk-search:focus-within{border-color:var(--pak-link);box-shadow:0 0 0 3px rgb(10 77 140 / 14%)}
.pk-search>.icon{color:var(--pak-muted)}
.pk-search input{flex:1;min-width:0;height:46px;border:0;outline:0;background:transparent;font:inherit;font-size:var(--pak-fs-body);color:var(--pak-text)}
.pk-search .btn{min-height:46px;padding:10px 22px}

/* Ngành hàng */
.pk-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pk-cat-card{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;gap:16px;align-items:start;padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,box-shadow 200ms}
.pk-cat-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.pk-cat-card>.icon{margin-top:4px;color:var(--pak-muted);transition:transform 200ms var(--pak-ease)}
.pk-cat-card:hover>.icon{transform:translateX(3px);color:var(--pak-brand)}
.pk-cat-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--pak-surface-2);color:var(--pak-brand);flex:none}
.pk-cat-card:hover .pk-cat-icon{background:var(--pak-action)}
.pk-cat-icon-lg{width:72px;height:72px;border-radius:16px}
.pk-cat-icon-lg .icon{width:32px;height:32px}
.pk-cat-text strong{display:block;font-size:var(--pak-fs-card-sm);line-height:1.35}
.pk-cat-text small{display:block;margin-top:4px;font-size:var(--pak-fs-label);color:var(--pak-muted);line-height:1.5}
.pk-cat-text em{display:block;margin-top:10px;font-style:normal;font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-link)}
.pk-brandbar{margin-top:clamp(36px,4.5vw,64px);padding:28px 0;background:var(--pak-surface);border-block:1px solid var(--pak-border)}
.pk-brandbar .wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label link" "logos logos";align-items:center;gap:14px 24px}
.pk-brandbar p{grid-area:label}
.pk-brandbar .hp-link{grid-area:link}
.pk-brandbar p{margin:0;font-weight:700;color:var(--pak-text)}
.pk-brandbar-list{grid-area:logos;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.pk-brandbar-list a{display:grid;place-items:center;height:68px;padding:10px 14px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-page);transition:border-color 200ms}
.pk-brandbar-list a:hover{border-color:var(--pak-border-input)}
.pk-brandbar-list img{max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain}

/* Thẻ sản phẩm */
.pk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pk-card{display:flex;flex-direction:column;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);overflow:hidden;transition:border-color 200ms,box-shadow 200ms}
.pk-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.pk-card[hidden]{display:none}
.pk-card-media{display:block;aspect-ratio:1;background:#fff;border-bottom:1px solid var(--pak-border);overflow:hidden}
.pk-card-media img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;transition:transform 500ms var(--pak-ease)}
.pk-card:hover .pk-card-media img{transform:scale(1.04)}
.pk-card-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:16px 18px 12px}
.pk-card-meta{font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-muted);line-height:1.4}
.pk-card h3{font-size:var(--pak-fs-card-sm);line-height:1.4}
.pk-card h3 a{color:var(--pak-text)}
.pk-card h3 a::after{content:"";position:absolute;inset:0}
.pk-card{position:relative}
.pk-card h3 a:hover{color:var(--pak-link)}
.pk-card-code{font-size:var(--pak-fs-label);color:var(--pak-muted)}
.pk-card-code b{color:var(--pak-text);font-variant-numeric:tabular-nums}
.pk-card-specs{display:grid;gap:3px;margin:4px 0 0;padding:0;list-style:none;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-card-specs li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-card-specs span{margin-right:6px;color:var(--pak-text);font-weight:600}
.pk-card-specs span::after{content:":"}
.pk-card-foot{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:0 12px 14px 12px}
.pk-card-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);background:var(--pak-page);color:var(--pak-brand);font:inherit;font-size:var(--pak-fs-label);font-weight:700;cursor:pointer;transition:background-color 160ms,border-color 160ms,color 160ms}
.pk-card-add:hover{border-color:var(--pak-brand);background:var(--pak-surface)}
.pk-card-add .icon{width:16px;height:16px;stroke-width:2.2}
.pk-add.is-added{border-color:var(--pak-success-line);background:var(--pak-success-tint);color:var(--pak-success)}
.pk-card-quote{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--pak-r);font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link);white-space:nowrap}
.pk-card-quote:hover{background:var(--pak-surface)}

/* Trang danh mục */
.pk-cat-head{display:flex;align-items:flex-start;gap:24px}
.pk-cat-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pk-cat-brands a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 8px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-page);font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-text)}
.pk-cat-brands a:hover{border-color:var(--pak-border-input)}
.pk-mini-logo{width:auto;max-width:64px;height:24px;object-fit:contain}
.pk-cat-nav{display:flex;gap:6px;margin-top:28px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pk-cat-nav::-webkit-scrollbar{display:none}
.pk-cat-nav a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-muted);white-space:nowrap}
.pk-cat-nav a:hover{background:var(--pak-page);color:var(--pak-text)}
.pk-cat-nav a[aria-current="page"]{background:var(--pak-brand);color:var(--pak-on-dark)}
.pk-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--pak-border)}
.pk-filters{display:grid;gap:10px;min-width:0}
.pk-filter-row{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--pak-border);border-radius:20px;background:var(--pak-page);color:var(--pak-text);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer;transition:background-color 160ms,border-color 160ms,color 160ms}
.pk-chip span{font-size:var(--pak-fs-caption);color:var(--pak-muted);font-weight:600}
.pk-chip:hover{border-color:var(--pak-border-input)}
.pk-chip[aria-pressed="true"]{background:var(--pak-brand);border-color:var(--pak-brand);color:var(--pak-on-dark)}
.pk-chip[aria-pressed="true"] span{color:var(--pak-on-dark-subtle)}
.pk-toolbar-end{display:flex;align-items:center;gap:16px;flex:none}
.pk-count{margin:0;font-size:var(--pak-fs-label);white-space:nowrap}
.pk-count b{color:var(--pak-text)}
.pk-sort{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 12px;border:1px solid var(--pak-border);border-radius:var(--pak-r);color:var(--pak-muted)}
.pk-sort .icon{width:16px;height:16px}
.pk-sort select{min-height:42px;border:0;background:transparent;font:inherit;font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-text);cursor:pointer}
.pk-empty-filter{padding:32px;text-align:center;border:1px dashed var(--pak-border-input);border-radius:var(--pak-r-lg)}
.pk-empty-filter p{margin-bottom:12px}
.pk-empty-cat{display:flex;gap:24px;align-items:flex-start;padding:32px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.pk-empty-cat h2{margin-bottom:8px}
.pk-empty-cat p{max-width:640px}
.pk-lines{margin-top:clamp(36px,4.5vw,56px)}
.pk-lines>p{margin:6px 0 18px;font-size:var(--pak-fs-label)}
.pk-line-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pk-line{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,background-color 200ms}
.pk-line:hover{border-color:var(--pak-border-input);background:var(--pak-surface)}
.pk-line-brand{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted)}
.pk-line strong{font-size:var(--pak-fs-body-sm);line-height:1.4;color:var(--pak-text)}
.pk-line-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.pk-line-cta .icon{width:16px;height:16px;transition:transform 200ms var(--pak-ease)}
.pk-line:hover .pk-line-cta .icon{transform:translateX(3px)}
.pk-related-arts{margin-top:clamp(36px,4.5vw,56px)}
.pk-related-arts h2{margin-bottom:16px}
.pk-art-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pk-art-list a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms}
.pk-art-list a:hover{border-color:var(--pak-border-input)}
.pk-art-list img{width:120px;height:76px;border-radius:8px;object-fit:cover}
.pk-art-list small{display:block;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-art-list strong{display:block;margin-top:4px;font-size:var(--pak-fs-label);line-height:1.45;color:var(--pak-text)}
.pk-help{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(40px,5vw,64px);padding:28px 32px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark-muted);--pak-focus:var(--pak-action)}
.pk-page .pk-help h2{font-size:var(--pak-fs-card);color:var(--pak-on-dark)}
.pk-help p{max-width:620px;margin-top:6px;color:var(--pak-on-dark-muted)}
.pk-help-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.pk-help .btn.secondary{background:transparent;border-color:rgb(255 255 255 / 45%);color:var(--pak-on-dark)}
.pk-help .btn.secondary:hover{background:rgb(255 255 255 / 10%);border-color:var(--pak-on-dark)}

/* Chi tiết sản phẩm */
.pk-detail-page .breadcrumb{padding-top:24px;margin-bottom:24px}
.pk-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.pk-gallery{position:sticky;top:calc(var(--pak-sticky-top) + 24px)}
.pk-gallery-main{position:relative;margin:0;aspect-ratio:1;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:#fff;overflow:hidden}
.pk-gallery-main img{display:block;width:100%;height:100%;object-fit:contain;padding:6%}
.pk-zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--pak-border);border-radius:50%;background:rgb(255 255 255 / 92%);color:var(--pak-brand);cursor:zoom-in}
.pk-zoom:hover{border-color:var(--pak-brand)}
.pk-thumbs{display:flex;gap:10px;margin-top:12px}
.pk-thumbs button{width:84px;height:84px;padding:4px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:#fff;cursor:pointer}
.pk-thumbs button[aria-pressed="true"]{border:2px solid var(--pak-brand)}
.pk-thumbs img{width:100%;height:100%;object-fit:contain}
.pk-info-meta{font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-muted)}
.pk-info-meta a{color:var(--pak-link);text-decoration:underline;text-underline-offset:3px}
.pk-info h1{margin-top:8px}
.pk-code-row{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 6px 6px 14px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-surface)}
.pk-code-row span{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-code-row b{font-size:var(--pak-fs-body);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pk-copy{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:6px;background:transparent;color:var(--pak-muted);cursor:pointer}
.pk-copy:hover{background:var(--pak-page);color:var(--pak-brand)}
.pk-copy .icon{width:17px;height:17px}
.pk-lead{margin-top:18px;font-size:var(--pak-fs-lead);line-height:1.7}
.pk-badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-text)}
.pk-badges li{display:inline-flex;align-items:center;gap:7px}
.pk-badges .icon{width:17px;height:17px;color:var(--pak-success)}
.pk-keyspecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0 0;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden}
.pk-keyspecs>div{padding:12px 16px;border-bottom:1px solid var(--pak-border)}
.pk-keyspecs>div:nth-child(odd){border-right:1px solid var(--pak-border)}
.pk-keyspecs>div:nth-last-child(-n+2):nth-child(odd),.pk-keyspecs>div:last-child{border-bottom:0}
.pk-keyspecs>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.pk-keyspecs dt{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-keyspecs dd{margin:2px 0 0;font-size:var(--pak-fs-body-sm);font-weight:600;color:var(--pak-text)}
.pk-buy{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.pk-buy .btn{min-height:52px}
.pk-buy-add .icon{width:18px;height:18px}
.pk-ask{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.pk-ask a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.pk-ask .icon{width:17px;height:17px}
.pk-price-note{display:flex;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--pak-r);background:var(--pak-action-tint);font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-notice-ink)}
.pk-price-note .icon{flex:none;width:18px;height:18px;margin-top:1px}
.pk-specs-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.pk-specs-wrap>div h2{margin-bottom:16px}
.pk-spec-table{width:100%;border-collapse:collapse;font-size:var(--pak-fs-body-sm)}
.pk-spec-table th,.pk-spec-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--pak-border)}
.pk-spec-table th{width:42%;font-weight:600;color:var(--pak-muted);background:var(--pak-surface)}
.pk-spec-table td{color:var(--pak-text)}
.pk-source{margin-top:12px;font-size:var(--pak-fs-caption)}
.pk-drawing{margin:0;padding:16px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:#fff}
.pk-drawing img{display:block;width:100%;height:auto}
.pk-drawing figcaption{margin-top:8px;font-size:var(--pak-fs-caption);color:var(--pak-muted);text-align:center}
.pk-doc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pk-doc-list a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms}
.pk-doc-list a:hover{border-color:var(--pak-border-input)}
.pk-doc-list a>.icon{color:var(--pak-brand)}
.pk-doc-list strong{display:block;font-size:var(--pak-fs-body-sm);line-height:1.4;color:var(--pak-text)}
.pk-doc-list small{display:block;margin-top:2px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}

/* Tìm kiếm */
.pk-hero-search h1{margin-bottom:20px}
.pk-hero-search .pk-search{max-width:760px}
.pk-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--pak-border)}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-bottom:3px solid transparent;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-muted);white-space:nowrap}
.pk-tabs a span{font-size:var(--pak-fs-caption);font-weight:600}
.pk-tabs a[aria-current="page"]{border-bottom-color:var(--pak-action);color:var(--pak-text)}
.pk-result-group{padding-top:32px}
.pk-result-group h2{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;font-size:var(--pak-fs-card)}
.pk-result-group h2 span{font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-muted)}
.pk-result-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pk-result-list a{display:grid;grid-template-columns:96px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:10px 14px 10px 10px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms}
.pk-result-list a:hover{border-color:var(--pak-border-input)}
.pk-result-list img{width:96px;height:64px;border-radius:8px;object-fit:cover}
.pk-result-list .pak-sr-thumb{width:96px;height:64px}
.pk-result-list strong{display:block;font-size:var(--pak-fs-body-sm);line-height:1.4;color:var(--pak-text)}
.pk-result-list small{display:block;margin-top:2px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-result-list mark{background:none;color:inherit;font-weight:700;box-shadow:inset 0 -.42em 0 var(--pak-accent-mark)}
.pk-result-list>a>.icon{width:18px;height:18px;color:var(--pak-muted)}
.pk-no-result,.pk-search-start{max-width:720px;margin:0 auto;padding:24px 0 8px;text-align:center}
.pk-no-result .pak-sr-empty-icon{margin:0 auto 14px}
.pk-no-result p,.pk-search-start p{margin:10px auto 20px}
.pk-no-result .pk-help-actions{justify-content:center}
.pk-try{margin-top:18px;font-size:var(--pak-fs-label)}
.pk-try a{color:var(--pak-link);font-weight:600}
.pk-search-start .pak-chips{justify-content:center;padding:0}

/* Danh sách tư vấn */
.pk-list-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.pk-list{display:grid;gap:12px}
.pk-list-row{display:grid;grid-template-columns:28px 88px minmax(0,1fr) auto 44px;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page)}
.pk-list-index{font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-muted);text-align:center;font-variant-numeric:tabular-nums}
.pk-list-img img{display:block;width:88px;height:88px;padding:6px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:#fff;object-fit:contain}
.pk-list-info{display:grid;gap:4px;min-width:0}
.pk-list-info strong{font-size:var(--pak-fs-body-sm);line-height:1.4;color:var(--pak-text)}
.pk-list-info small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pk-list-note{width:100%;min-height:40px;margin-top:6px;padding:8px 12px;border:1px solid var(--pak-border);border-radius:var(--pak-r);font:inherit;font-size:var(--pak-fs-label);color:var(--pak-text)}
.pk-list-note:focus{border-color:var(--pak-link);outline:none;box-shadow:0 0 0 3px rgb(10 77 140 / 14%)}
.pk-list-qty{display:grid;gap:6px;justify-items:stretch}
.pk-stepper{display:grid;grid-template-columns:40px 64px 40px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);overflow:hidden}
.pk-stepper button{display:grid;place-items:center;height:44px;border:0;background:var(--pak-surface);color:var(--pak-brand);cursor:pointer}
.pk-stepper button:hover{background:var(--pak-surface-2)}
.pk-stepper .icon{width:16px;height:16px;stroke-width:2.2}
.pk-stepper input{width:100%;height:44px;border:0;border-inline:1px solid var(--pak-border);text-align:center;font:inherit;font-size:var(--pak-fs-body);font-weight:700;color:var(--pak-text);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pk-stepper input::-webkit-inner-spin-button,.pk-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pk-list-qty select{min-height:36px;padding:0 8px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-page);font:inherit;font-size:var(--pak-fs-label);color:var(--pak-text)}
.pk-list-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.pk-link-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border:0;background:none;font:inherit;font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-error);cursor:pointer}
.pk-link-btn .icon{width:16px;height:16px}
.pk-list-aside{position:sticky;top:calc(var(--pak-sticky-top) + 24px)}
.pk-list-summary{display:grid;gap:12px;padding:24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.pk-list-summary>p:first-child{font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase}
.pk-sum-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--pak-border);font-size:var(--pak-fs-body-sm)}
.pk-sum-row b{text-align:right;color:var(--pak-text);font-variant-numeric:tabular-nums}
.pk-list-summary .btn.full{margin-top:6px;min-height:52px}
.pk-list-tools{display:grid;gap:8px}
.pk-list-tools .btn{justify-content:flex-start;min-height:44px}
.pk-list-empty{max-width:560px;margin:0 auto;text-align:center}
.pk-list-empty .pk-cat-icon{margin:0 auto 18px}
.pk-list-empty p{margin-top:10px}
.pk-list-empty .actions{justify-content:center}
.pk-toast-undo{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:4px 10px;border:1px solid rgb(255 255 255 / 40%);border-radius:6px;background:transparent;color:var(--pak-action);font:inherit;font-weight:700;cursor:pointer}
.pk-toast-undo .icon{width:15px;height:15px}
.pk-copy-area{width:100%;padding:12px;border:1px solid var(--pak-border);border-radius:var(--pak-r);font:inherit;font-size:var(--pak-fs-label)}

/* Thương hiệu */
.pk-brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.pk-brand-card{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,box-shadow 200ms}
.pk-brand-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.pk-brand-card-logo{display:flex;align-items:center;height:64px;margin-bottom:6px}
.pk-brand-card-logo img{max-width:180px;max-height:56px;width:auto;height:auto;object-fit:contain}
.pk-page .pk-brand-card h2{font-size:var(--pak-fs-card)}
.pk-brand-card p{font-size:var(--pak-fs-label);line-height:1.6}
.pk-brand-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--pak-border);font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-link)}
.pk-brand-card-foot .icon{width:18px;height:18px;transition:transform 200ms var(--pak-ease)}
.pk-brand-card:hover .pk-brand-card-foot .icon{transform:translateX(3px)}
.pk-wordmark{display:inline-flex;align-items:center;font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--pak-brand)}
.pk-brand-extra{margin-top:24px;padding:18px 22px;border:1px dashed var(--pak-border-input);border-radius:var(--pak-r-lg)}
.pk-page .pk-brand-extra h2{font-size:var(--pak-fs-card-sm)}
.pk-brand-extra p{margin-top:6px}
.pk-brand-extra a{font-weight:700;color:var(--pak-link);text-decoration:underline;text-underline-offset:3px}
.pk-brand-head{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.pk-brand-logo{display:grid;place-items:center;aspect-ratio:4/3;padding:28px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:#fff}
.pk-brand-logo img{max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain}
.pk-brand-logo .pk-wordmark{font-size:36px}
.pk-brand-story{max-width:720px;margin-top:10px;font-size:var(--pak-fs-body-sm)}
.pk-brand-where{display:flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;color:var(--pak-text)}
.pk-brand-where .icon{color:var(--pak-brand)}
.pk-cert-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center}
.pk-cert-img{display:block;padding:8px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:#fff;transition:box-shadow 200ms}
.pk-cert-img:hover{box-shadow:var(--pak-shadow)}
.pk-cert-img img{display:block;width:100%;height:auto;border-radius:4px}
.pk-cert-row p{max-width:620px;margin-top:8px}

@media (max-width:1199px){
  .pk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pk-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-list-layout{grid-template-columns:minmax(0,1fr) 300px}
  .pk-brandbar-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1023px){
  .pk-hero-grid,.pk-detail,.pk-specs-wrap,.pk-list-layout{grid-template-columns:1fr}
  .pk-gallery,.pk-list-aside{position:static}
  .pk-art-list{grid-template-columns:1fr 1fr}
  .pk-help{flex-direction:column;align-items:flex-start}
  .pk-brand-head{grid-template-columns:180px minmax(0,1fr);gap:28px}
}
@media (max-width:767px){
  .pk-hero{padding:18px 0 28px}
  .pk-hero .breadcrumb{margin-bottom:14px}
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pk-card-body{padding:12px 12px 8px}
  .pk-card-specs{display:none}
  .pk-card-foot{flex-direction:column;align-items:stretch;gap:2px;padding:0 10px 10px}
  .pk-card-add{min-height:44px;font-size:var(--pak-fs-caption)}
  .pk-card-quote{justify-content:center;min-height:40px}
  .pk-cat-grid{grid-template-columns:1fr;gap:10px}
  .pk-cat-card{grid-template-columns:48px minmax(0,1fr) 18px;padding:16px}
  .pk-cat-icon{width:48px;height:48px}
  .pk-cat-icon-lg{width:56px;height:56px}
  .pk-cat-head{gap:16px}
  .pk-brandbar-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-toolbar{flex-direction:column;gap:12px}
  .pk-filter-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .pk-filter-row::-webkit-scrollbar{display:none}
  .pk-chip{flex:none}
  .pk-toolbar-end{width:100%;justify-content:space-between}
  .pk-empty-cat{flex-direction:column;padding:22px}
  .pk-line-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pk-line{min-height:0;padding:14px}
  .pk-art-list{grid-template-columns:1fr}
  .pk-art-list a{grid-template-columns:96px minmax(0,1fr)}
  .pk-art-list img{width:96px;height:64px}
  .pk-help{padding:22px}
  .pk-help-actions{display:grid;width:100%}
  .pk-help-actions .btn{width:100%}
  .pk-thumbs button{width:68px;height:68px}
  .pk-keyspecs{grid-template-columns:1fr}
  .pk-keyspecs>div:nth-child(odd){border-right:0}
  .pk-keyspecs>div:nth-last-child(-n+2):nth-child(odd){border-bottom:1px solid var(--pak-border)}
  .pk-keyspecs>div:last-child{border-bottom:0}
  .pk-buy{grid-template-columns:1fr}
  .pk-spec-table th,.pk-spec-table td{padding:10px 12px}
  .pk-doc-list,.pk-result-list{grid-template-columns:1fr}
  .pk-result-list a{grid-template-columns:72px minmax(0,1fr)}
  .pk-result-list img,.pk-result-list .pak-sr-thumb{width:72px;height:52px}
  .pk-result-list>a>.icon{display:none}
  .pk-list-row{grid-template-columns:64px minmax(0,1fr) 44px;grid-template-areas:"img info del" "qty qty qty";gap:12px;padding:12px}
  .pk-list-index{display:none}
  .pk-list-img{grid-area:img}
  .pk-list-img img{width:64px;height:64px}
  .pk-list-info{grid-area:info}
  .pk-list-remove{grid-area:del;align-self:start}
  .pk-list-qty{grid-area:qty;grid-template-columns:auto 1fr;align-items:center}
  .pk-list-more{flex-direction:column;align-items:stretch}
  .pk-brand-head{grid-template-columns:1fr;gap:18px}
  .pk-brand-logo{max-width:220px;aspect-ratio:auto;padding:18px}
  .pk-cert-row{grid-template-columns:120px minmax(0,1fr);gap:16px}
}
@media print{
  .pk-list-page .pk-hero .breadcrumb,.pk-list-aside,.pk-list-more,.pk-list-remove,.pk-stepper button{display:none!important}
  .pk-list-layout{display:block}
  .pk-list-row{break-inside:avoid;border-color:#999}
  .pk-list-note{border:0;padding:0}
}

/* ==========================================================================
   Bước 3.5 · Form & trang cảm ơn (30/09/2026)
   ========================================================================== */
.pf-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,56px);align-items:start;padding-top:clamp(32px,4vw,56px)}
.pf-aside{display:grid;gap:16px;position:sticky;top:calc(var(--pak-sticky-top) + 24px)}
.pf-form{display:grid;gap:24px;padding:clamp(20px,3vw,36px);border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);box-shadow:0 1px 2px rgb(18 53 74 / 4%)}
.pf-form-title{margin-bottom:16px}
.pf-group{margin:0;padding:0;border:0;min-width:0}
.pf-group>legend{float:left;width:100%;margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--pak-border);font-size:var(--pak-fs-card-sm);font-weight:700;color:var(--pak-text)}
.pf-group>legend+*{clear:both}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.pf-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;padding:0;border:0}
.pf-wide{grid-column:1/-1}
.pf-field>label,.pf-chips>legend{font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-text);padding:0}
.pf-req{color:var(--pak-error);font-weight:700}
.pf-opt{font-weight:400;color:var(--pak-muted);font-size:var(--pak-fs-caption)}
.pf-hint{margin:-2px 0 0;font-size:var(--pak-fs-caption);line-height:1.5;color:var(--pak-muted)}
.pf-field input,.pf-field select,.pf-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);background:var(--pak-page);color:var(--pak-text);font:inherit;font-size:var(--pak-fs-body);transition:border-color 160ms,box-shadow 160ms}
.pf-field textarea{min-height:120px;resize:vertical;line-height:1.6}
.pf-field select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.pf-field input::placeholder,.pf-field textarea::placeholder{color:#7b8b96}
.pf-field input:focus,.pf-field select:focus,.pf-field textarea:focus{outline:none;border-color:var(--pak-link);box-shadow:0 0 0 3px rgb(10 77 140 / 16%)}
.pf-field.is-invalid input,.pf-field.is-invalid select,.pf-field.is-invalid textarea{border-color:var(--pak-error);background:#fffafa}
.pf-field.is-invalid input:focus,.pf-field.is-invalid select:focus,.pf-field.is-invalid textarea:focus{box-shadow:0 0 0 3px rgb(185 28 28 / 14%)}
.pf-err{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--pak-fs-label);font-weight:600;line-height:1.45;color:var(--pak-error)}
.pf-err .icon{flex:none;width:16px;height:16px;margin-top:2px}
.pf-summary{padding:16px 18px;border:1px solid #f1c4c4;border-left:4px solid var(--pak-error);border-radius:var(--pak-r);background:#fff5f5;color:var(--pak-text)}
.pf-summary:focus{outline:3px solid var(--pak-focus);outline-offset:3px}
.pf-summary p{display:flex;align-items:center;gap:8px;margin:0;color:var(--pak-error)}
.pf-summary p .icon{width:18px;height:18px}
.pf-summary ul{margin:8px 0 0;padding-left:26px}
.pf-summary li{margin:4px 0}
.pf-summary a{color:var(--pak-error);font-size:var(--pak-fs-label);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pf-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{position:relative;display:inline-flex}
.pf-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.pf-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--pak-border-input);border-radius:22px;background:var(--pak-page);font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-text);transition:background-color 160ms,border-color 160ms,color 160ms}
.pf-chip input:hover+span{border-color:var(--pak-brand)}
.pf-chip input:checked+span{border-color:var(--pak-brand);background:var(--pak-brand);color:var(--pak-on-dark)}
.pf-chip input:checked+span::before{content:"";width:14px;height:8px;margin-right:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.pf-chip input:focus-visible+span{outline:3px solid var(--pak-focus);outline-offset:3px}
.pf-chips.is-invalid .pf-chip span{border-color:var(--pak-error)}
.pf-check{display:flex;align-items:flex-start;gap:12px;font-size:var(--pak-fs-body-sm);line-height:1.55;color:var(--pak-text);cursor:pointer}
.pf-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--pak-brand);cursor:pointer}
.pf-check a{color:var(--pak-link);text-decoration:underline;text-underline-offset:3px}
.pf-plain{margin-top:-8px}
.pf-consent{padding:16px;border-radius:var(--pak-r);background:var(--pak-surface)}
.pf-consent.is-invalid{background:#fff5f5}
.pf-final{display:grid;gap:18px}
.pf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pf-submit{min-height:54px;padding:12px 28px;font-size:var(--pak-fs-body)}
.pf-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--pak-fs-caption);line-height:1.55;color:var(--pak-muted)}
.pf-note .icon{flex:none;width:15px;height:15px;margin-top:2px}
.pf-note a{font-weight:700;color:var(--pak-link)}
.pf-draft{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--pak-fs-caption);color:var(--pak-success)}
.pf-draft .icon{width:15px;height:15px}
.pf-listbox{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.pf-listbox ul{display:grid;gap:4px;margin:0;padding:0 0 0 34px;list-style:none;font-size:var(--pak-fs-label)}
.pf-listbox li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--pak-border)}
.pf-listbox li b{flex:none;font-variant-numeric:tabular-nums}
.pf-listbox .hp-link{justify-self:start;min-height:36px;margin-left:34px}
/* Tải file BOQ */
.pf-drop{position:relative;display:grid;justify-items:center;gap:8px;padding:32px 20px;border:2px dashed var(--pak-border-input);border-radius:var(--pak-r-lg);background:var(--pak-surface);text-align:center;transition:border-color 160ms,background-color 160ms}
.pf-drop:hover,.pf-drop.is-over{border-color:var(--pak-brand);background:var(--pak-action-tint)}
.pf-drop:focus-within{outline:3px solid var(--pak-focus);outline-offset:3px}
.pf-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pf-drop-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--pak-page);color:var(--pak-brand);box-shadow:var(--pak-shadow)}
.pf-drop-icon .icon{width:26px;height:26px}
.pf-drop strong{font-size:var(--pak-fs-body)}
.pf-drop strong u{color:var(--pak-link);text-underline-offset:3px}
.pf-drop small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pf-files{display:grid;gap:8px;margin:-10px 0 0;padding:0;list-style:none}
.pf-files:empty{display:none}
.pf-files li{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:8px 8px 8px 12px;border:1px solid var(--pak-border);border-radius:var(--pak-r);background:var(--pak-page)}
.pf-file-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--pak-surface-2);color:var(--pak-brand)}
.pf-ext-xlsx,.pf-ext-xls,.pf-ext-csv{background:#e7f5ec;color:#1d7a45}
.pf-ext-pdf{background:#fdecec;color:#b42318}
.pf-file-name{min-width:0}
.pf-file-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--pak-fs-label)}
.pf-file-name small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
/* Đăng ký đại lý 2 bước */
.pf-steps{display:flex;gap:8px;margin:0;padding:0;list-style:none;counter-reset:none}
.pf-steps li{display:flex;flex:1;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--pak-r);background:var(--pak-surface);font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-muted)}
.pf-steps li span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--pak-page);border:1px solid var(--pak-border-input);font-size:var(--pak-fs-caption);font-weight:700}
.pf-steps li.is-current{background:var(--pak-brand);color:var(--pak-on-dark)}
.pf-steps li.is-current span{background:var(--pak-action);border-color:var(--pak-action);color:var(--pak-brand)}
.pf-steps li.is-done span{background:var(--pak-success);border-color:var(--pak-success);color:#fff}
.pf-steps+div .pf-actions{margin-top:22px}
/* Thẻ bên cạnh form */
.pf-card{padding:24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page)}
.pf-page .pf-card h2,.pf-thanks .pf-card h2{margin-bottom:10px;font-size:var(--pak-fs-card-sm)}
.pf-card p{font-size:var(--pak-fs-label);line-height:1.6}
.pf-card .btn{margin-top:14px}
.pf-card-soft{background:var(--pak-surface)}
.pf-card-dark{--pak-focus:var(--pak-action);border-color:var(--pak-brand);background:var(--pak-brand);color:var(--pak-on-dark-muted)}
.pf-page .pf-card-dark h2,.pf-thanks .pf-card-dark h2{color:var(--pak-on-dark)}
.pf-card-dark p{color:var(--pak-on-dark-muted)}
.pf-call{display:flex;align-items:center;gap:14px;min-height:60px;margin-top:14px;padding:8px 18px 8px 8px;border-radius:32px;background:var(--pak-action);color:var(--pak-brand)}
.pf-call small{display:block;font-size:var(--pak-fs-caption);font-weight:600}
.pf-call strong{display:block;font-size:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.pf-card-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pf-card-pair a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid rgb(255 255 255 / 24%);border-radius:var(--pak-r);color:var(--pak-on-dark);font-size:var(--pak-fs-label);font-weight:700}
.pf-card-pair .pf-zalo{background:var(--pak-zalo);border-color:var(--pak-zalo)}
.pf-next{display:grid;gap:0;margin:4px 0 0;padding:0;list-style:none;counter-reset:pf}
.pf-next li{position:relative;display:grid;gap:2px;padding:12px 0 12px 42px;border-bottom:1px solid var(--pak-border);counter-increment:pf}
.pf-next li:last-child{border-bottom:0}
.pf-next li::before{content:counter(pf);position:absolute;left:0;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pak-action-tint);color:var(--pak-notice-ink);font-size:var(--pak-fs-caption);font-weight:700}
.pf-next strong{font-size:var(--pak-fs-body-sm);color:var(--pak-text)}
.pf-next span{font-size:var(--pak-fs-label);color:var(--pak-muted);line-height:1.55}
.pf-checklist{display:grid;gap:10px;margin:6px 0 12px;padding:0;list-style:none;font-size:var(--pak-fs-label);color:var(--pak-text)}
.pf-checklist li{display:flex;gap:10px;line-height:1.5}
.pf-checklist .icon{flex:none;width:18px;height:18px;color:var(--pak-success)}
/* Trang Liên hệ */
.pf-channels{padding-top:clamp(28px,3.5vw,48px)}
.pf-channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pf-channel{display:grid;gap:4px;align-content:start;padding:20px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,box-shadow 200ms}
.pf-channel:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.pf-ch-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:12px;background:var(--pak-surface-2);color:var(--pak-brand)}
.pf-channel small{font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-muted)}
.pf-channel strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text);font-variant-numeric:tabular-nums}
.pf-channel .pf-email{font-size:var(--pak-fs-label);overflow-wrap:anywhere}
.pf-channel-main{border-color:var(--pak-action);background:var(--pak-action-tint)}
.pf-channel-main .pf-ch-icon{background:var(--pak-action)}
.pf-places{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pf-place{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:20px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.pf-page .pf-place h2{font-size:var(--pak-fs-card-sm)}
.pf-place p{margin-top:4px;font-size:var(--pak-fs-body-sm);line-height:1.6}
.pf-muted{color:var(--pak-muted)}
.pf-place .pf-muted{font-size:var(--pak-fs-label)}
.pf-hours{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--pak-text)!important}
.pf-hours .icon{width:16px;height:16px;color:var(--pak-brand)}
/* Trang cảm ơn */
.pf-thanks-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,56px);align-items:start;padding-top:clamp(36px,5vw,72px)}
.pf-done{display:grid;place-items:center;width:72px;height:72px;margin-bottom:22px;border-radius:50%;background:var(--pak-success-tint);color:var(--pak-success);box-shadow:0 0 0 10px rgb(21 128 61 / 6%)}
.pf-done .icon{width:34px;height:34px;stroke-width:2.4}
html:not(.pak-hero-done) .pf-done{animation:pf-pop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pf-pop{from{transform:scale(.4);opacity:0}}
.pf-thanks h1{max-width:620px}
.pf-ref{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:2px 14px;margin-top:24px;padding:14px 18px;border:1px dashed var(--pak-border-input);border-radius:var(--pak-r-lg);background:var(--pak-surface)}
.pf-ref span{font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-muted)}
.pf-ref b{font-size:20px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--pak-text)}
.pf-ref small{grid-column:1/-1;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pf-recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:620px;margin:22px 0 0;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden}
.pf-recap div{padding:12px 16px;border-bottom:1px solid var(--pak-border)}
.pf-recap div:nth-child(odd){border-right:1px solid var(--pak-border)}
.pf-recap div:nth-last-child(-n+2){border-bottom:0}
.pf-recap div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.pf-recap dt{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.pf-recap dd{margin:2px 0 0;font-size:var(--pak-fs-body-sm);font-weight:600;color:var(--pak-text)}
.pf-proto{display:flex;align-items:flex-start;gap:8px;max-width:620px;margin-top:20px;padding:12px 14px;border-radius:var(--pak-r);background:var(--pak-action-tint);font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-notice-ink)}
.pf-proto .icon{flex:none;width:17px;height:17px;margin-top:2px}
.pf-thanks-more{padding-top:clamp(40px,5vw,64px)}
.pf-thanks-more h2{margin-bottom:16px}
.pf-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pf-more{display:grid;gap:4px;align-content:start;padding:20px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms,box-shadow 200ms}
.pf-more:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.pf-more strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.pf-more small{font-size:var(--pak-fs-label);color:var(--pak-muted)}
/* Form ngắn (trang chủ, trang giải pháp) dùng chung kiểu báo lỗi */
.pr-form .pf-inline{gap:0}
.pr-form .pf-inline .pf-err{margin-top:6px}
.pr-form .pf-field.is-invalid input,.pr-form .pf-field.is-invalid textarea{border-color:var(--pak-error);background:#fffafa}

@media (max-width:1199px){
  .pf-layout,.pf-thanks-grid{grid-template-columns:minmax(0,1fr) 320px}
  .pf-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .pf-layout,.pf-thanks-grid{grid-template-columns:1fr}
  .pf-aside{position:static}
}
@media (max-width:767px){
  .pf-form{padding:18px;gap:20px;border-radius:var(--pak-r)}
  .pf-grid{grid-template-columns:1fr;gap:16px}
  .pf-actions{display:grid}
  .pf-actions .btn{width:100%;justify-content:center}
  .pf-steps li{padding:8px 10px;font-size:var(--pak-fs-caption)}
  .pf-drop{padding:24px 14px}
  .pf-channel-grid,.pf-places,.pf-more-grid,.pf-recap{grid-template-columns:1fr}
  .pf-recap div:nth-child(odd){border-right:0}
  .pf-recap div:nth-last-child(-n+2){border-bottom:1px solid var(--pak-border)}
  .pf-recap div:last-child{border-bottom:0}
  .pf-place{grid-template-columns:40px minmax(0,1fr);padding:16px}
  .pf-ref{display:grid;width:100%}
}

/* ==========================================================================
   Bước 3.6 · Về Phú An Khang, showroom, đại lý, tin tức, giải pháp, chính sách, trang lỗi
   ========================================================================== */
.ab-hero{padding-bottom:0}
.ab-hero .wrap:first-child{padding-bottom:28px}
.ab-hero .actions{margin-top:22px}
.ab-tabs{border-top:1px solid var(--pak-border);background:var(--pak-page)}
.ab-tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ab-tabs .wrap::-webkit-scrollbar{display:none}
.ab-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 14px;border-bottom:3px solid transparent;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-muted);white-space:nowrap}
.ab-tabs a:hover{color:var(--pak-text)}
.ab-tabs a[aria-current="page"]{border-bottom-color:var(--pak-action);color:var(--pak-text)}
.ab-tabs a.ab-tabs-extra{margin-left:auto;color:var(--pak-link)}
.ab-tabs .icon{width:15px;height:15px}
.ab-photo{position:relative;margin:0;border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-surface-2)}
.ab-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ab-photo figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 9px;border-radius:6px;background:rgb(16 45 64 / 78%);color:var(--pak-on-dark);font-size:var(--pak-fs-eyebrow);line-height:1.4}
.ab-photo-lg{aspect-ratio:762/400}
.ab-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:center}
.ab-split h2{margin-bottom:14px}
.ab-split p+p{margin-top:12px}
.ab-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;border-top:1px solid var(--pak-border)}
.ab-facts div{padding:16px 12px 0 0}
.ab-facts div+div{padding-left:16px;border-left:1px solid var(--pak-border)}
.ab-facts strong{display:block;font-size:clamp(22px,1.2vw + 10px,30px);line-height:1.1;color:var(--pak-brand);font-variant-numeric:tabular-nums}
.ab-facts div>span{display:block;margin-top:6px;font-size:var(--pak-fs-caption);color:var(--pak-muted);line-height:1.4}
.ab-vision{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ab-vision article{padding:28px;border-radius:var(--pak-r-lg);background:var(--pak-brand);color:var(--pak-on-dark-muted)}
.ab-vision .hp-kicker{color:var(--pak-action)}
.ab-quote{font-size:var(--pak-fs-card);line-height:1.5;color:var(--pak-on-dark)!important}
.ab-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.ab-values article{padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg)}
.ab-values h3{margin:14px 0 6px;font-size:var(--pak-fs-card-sm)}
.ab-values p{font-size:var(--pak-fs-label);line-height:1.6}
.ab-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.ab-fields a{position:relative;display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-surface);transition:border-color 200ms,box-shadow 200ms}
.ab-fields a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow);background:var(--pak-page)}
.ab-fields b{position:absolute;right:18px;top:16px;font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.ab-fields strong{font-size:var(--pak-fs-card-sm);line-height:1.35;color:var(--pak-text)}
.ab-fields small{font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-muted)}
.ab-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ab-more a{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 20px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);font-weight:700;color:var(--pak-text);transition:border-color 200ms}
.ab-more a:hover{border-color:var(--pak-brand)}
.ab-more .icon{width:18px;height:18px;color:var(--pak-link)}
.ab-cta{margin-top:clamp(40px,5vw,64px)}
.ab-two .pk-doc-list{grid-template-columns:1fr}
.ab-brand-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.ab-brand-row a{display:grid;gap:6px;justify-items:center;padding:18px 12px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);text-align:center;transition:border-color 200ms}
.ab-brand-row a:hover{border-color:var(--pak-border-input)}
.ab-brand-logo{display:grid;place-items:center;height:48px}
.ab-brand-logo img{max-width:120px;max-height:44px;width:auto;height:auto;object-fit:contain}
.ab-brand-row strong{font-size:var(--pak-fs-label);color:var(--pak-text)}
.ab-brand-row small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.ab-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.ab-two h2{margin-bottom:12px}
.ab-bars{display:grid;gap:10px}
.ab-bars div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:center;font-size:var(--pak-fs-label)}
.ab-bars b{display:block;width:var(--w);min-width:84px;padding:8px 12px;border-radius:6px;background:var(--pak-brand);color:var(--pak-on-dark);font-size:var(--pak-fs-caption);white-space:nowrap}
.ab-proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-proj a{display:grid;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;transition:box-shadow 200ms}
.ab-proj a:hover{box-shadow:var(--pak-shadow)}
.ab-proj img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover}
.ab-proj span{padding:14px 16px}
.ab-proj strong{display:block;font-size:var(--pak-fs-body-sm);color:var(--pak-text)}
.ab-proj small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.ab-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0 0;padding:0;list-style:none;counter-reset:none}
.ab-steps li{position:relative;display:grid;gap:6px;align-content:start;padding:20px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg)}
.ab-steps li>span{position:relative;display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border-radius:50%;background:var(--pak-brand);color:var(--pak-action)}
.ab-steps li>span b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pak-action);color:var(--pak-brand);font-size:var(--pak-fs-eyebrow)}
.ab-steps strong{font-size:var(--pak-fs-body-sm);color:var(--pak-text)}
.ab-steps small{font-size:var(--pak-fs-label);color:var(--pak-muted);line-height:1.55}
.ab-flow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:28px;align-items:start;border-top:1px solid var(--pak-border);margin-top:clamp(28px,3.5vw,48px)}
.ab-flow:first-child{border-top:0;margin-top:0}
.ab-flow h2{margin-bottom:8px}
.ab-flow .ab-steps{margin-top:0}
.ab-flow .ab-steps:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-gallery{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:14px}
.ab-gallery .ab-g1{grid-row:1/3;height:100%;min-height:360px}
.ab-gallery .ab-g2,.ab-gallery .ab-g3{aspect-ratio:1.9}
.ab-gallery-2{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.ab-gallery-2 .ab-g1{grid-row:auto;min-height:0;aspect-ratio:1.9}
.ab-rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.ab-rooms-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-room{position:relative;display:grid;gap:8px;align-content:start;padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);transition:border-color 200ms,box-shadow 200ms}
a.ab-room:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.ab-room-no{position:absolute;right:16px;top:14px;padding:3px 10px;border-radius:12px;background:var(--pak-action-tint);font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-notice-ink)}
.ab-room .ab-brand-logo{justify-items:start;place-items:center start}
.ab-room strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.ab-room small{font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-muted)}
.ab-room em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-link)}
.ab-room em .icon{width:14px;height:14px}
.ab-room-store{background:var(--pak-surface)}
.ab-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ab-role{display:grid;gap:8px;align-content:start;padding:24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg)}
.ab-avatar{display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:50%;background:var(--pak-surface-2);color:var(--pak-brand)}
.ab-avatar .icon{width:30px;height:30px}
.pk-page .ab-role h2{font-size:var(--pak-fs-card-sm)}
.ab-role p{font-size:var(--pak-fs-label);line-height:1.6}
.ab-role-link a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.ab-role-link .icon{width:16px;height:16px}
.ab-certs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ab-cert{display:grid;gap:8px;align-content:start;padding:12px 12px 18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);font:inherit;text-align:left;cursor:zoom-in;transition:border-color 200ms,box-shadow 200ms}
.ab-cert:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.ab-cert-img{display:block;border-radius:var(--pak-r);overflow:hidden;background:var(--pak-surface-2)}
.ab-cert-img img{display:block;width:100%;height:auto;transition:transform 500ms var(--pak-ease)}
.ab-cert:hover .ab-cert-img img{transform:scale(1.03)}
.ab-cert strong{padding:0 4px;font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.ab-cert small{padding:0 4px;font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-muted)}
.ab-cert em{display:inline-flex;align-items:center;gap:6px;padding:0 4px;font-style:normal;font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-link)}
.ab-cert em .icon{width:15px;height:15px}
.modal img.ab-zoom{height:auto;max-height:78vh}
.ab-locs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ab-loc{border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;background:var(--pak-page)}
.ab-loc .ab-photo{border-radius:0;aspect-ratio:1.9}
.ab-loc-body{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px}
.pk-page .ab-loc h2{font-size:var(--pak-fs-card)}
.ab-loc p{margin-top:4px;font-size:var(--pak-fs-body-sm);line-height:1.6}
.ab-loc .actions{margin-top:16px}
/* Giải pháp */
.so-needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.so-needs a{display:grid;gap:8px;align-content:start;padding:24px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms,box-shadow 200ms}
.so-needs a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.so-needs small{margin-top:6px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted)}
.so-needs strong{font-size:var(--pak-fs-card);color:var(--pak-text)}
.so-needs span:not(.pk-cat-icon){font-size:var(--pak-fs-label);line-height:1.6;color:var(--pak-muted)}
.so-needs em,.so-ind em{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-style:normal;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.so-needs em .icon,.so-ind em .icon{width:16px;height:16px}
.so-ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.so-ind a{display:grid;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);overflow:hidden;transition:border-color 200ms,box-shadow 200ms}
.so-ind a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.so-ind-img{position:relative;display:block;aspect-ratio:1.5;background:var(--pak-surface-2)}
.so-ind-img img{width:100%;height:100%;object-fit:cover}
.so-ind-img b{position:absolute;left:12px;top:12px;padding:3px 9px;border-radius:12px;background:rgb(16 45 64 / 80%);color:#fff;font-size:var(--pak-fs-caption)}
.so-ind-body{display:grid;gap:6px;padding:16px 18px 18px}
.so-ind-body strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.so-ind-body small{font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-muted)}
.so-ind-more{align-content:center;gap:8px;padding:24px;border-style:dashed!important;background:var(--pak-surface)}
.so-ind-more strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.so-ind-more small{font-size:var(--pak-fs-label);line-height:1.55;color:var(--pak-muted)}
.so-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ev-industry-page .ev-boq-layout>div>p{color:var(--pak-muted)}
.so-head{display:flex;gap:24px;align-items:flex-start}
.so-head .actions{margin-top:20px}
/* Tin tức */
.nw-note{margin-top:28px}
.nw-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.nw-card{display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms,box-shadow 200ms}
.nw-card:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.nw-card-big .nw-img{aspect-ratio:1.9}
.nw-side{display:grid;gap:16px}
.nw-side .nw-card{grid-template-columns:52px minmax(0,1fr)}
.nw-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--pak-surface-2);color:var(--pak-brand)}
.nw-body{display:grid;gap:6px}
.nw-body small{font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-muted)}
.nw-body strong{font-size:var(--pak-fs-card-sm);line-height:1.4;color:var(--pak-text)}
.nw-card-big .nw-body strong{font-size:var(--pak-fs-card)}
.nw-body span{font-size:var(--pak-fs-label);color:var(--pak-muted)}
.nw-article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding-top:clamp(28px,3.5vw,48px)}
.nw-article article{max-width:760px}
.nw-article .nw-img{aspect-ratio:1.9;margin-bottom:24px}
.nw-article h2{margin:0 0 12px}
.nw-article p{margin-bottom:14px;font-size:var(--pak-fs-body);line-height:1.8}
.nw-mini{display:grid;gap:10px}
.nw-mini .nw-card{grid-template-columns:44px minmax(0,1fr);padding:12px}
.nw-mini .nw-icon{width:44px;height:44px}
.nw-mini .nw-body span{display:none}
/* Chính sách */
.lg-meta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border-radius:16px;background:var(--pak-action-tint);font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-notice-ink)}
.lg-meta .icon{width:15px;height:15px}
.lg-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 280px;gap:clamp(24px,3.5vw,48px);align-items:start;padding-top:clamp(28px,3.5vw,48px)}
.lg-toc{position:sticky;top:calc(var(--pak-sticky-top) + 24px);display:grid;gap:2px;padding-left:14px;border-left:2px solid var(--pak-border)}
.lg-toc strong{margin-bottom:6px;font-size:var(--pak-fs-eyebrow);letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-muted)}
.lg-toc a{padding:6px 0;font-size:var(--pak-fs-label);color:var(--pak-text);line-height:1.45}
.lg-toc a:hover{color:var(--pak-link)}
.lg-body{max-width:760px}
.lg-body section{padding-bottom:28px;scroll-margin-top:calc(var(--pak-sticky-top) + 24px)}
.lg-body section+section{padding-top:28px;border-top:1px solid var(--pak-border)}
.lg-body h2{margin-bottom:12px;font-size:var(--pak-fs-card)}
.lg-body p,.lg-body li{font-size:var(--pak-fs-body);line-height:1.8}
.lg-body ol{padding-left:22px;color:var(--pak-muted)}
.lg-body .pk-spec-table{margin-top:14px}
.lg-draft{padding:12px 14px;border-left:3px solid var(--pak-action);border-radius:0 var(--pak-r) var(--pak-r) 0;background:var(--pak-action-tint);color:var(--pak-notice-ink)!important;font-size:var(--pak-fs-body-sm)!important}
.lg-contact{border-top:0!important}
.lg-aside{position:sticky;top:calc(var(--pak-sticky-top) + 24px)}
.lg-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.lg-list a{display:block;padding:8px 0;border-bottom:1px solid var(--pak-border);font-size:var(--pak-fs-label);color:var(--pak-link)}
/* Trang lỗi */
.sy-wrap{max-width:860px;padding-top:clamp(48px,7vw,104px);text-align:center}
.sy-mark{display:grid;place-items:center;margin:0 auto 18px}
.sy-mark span{font-size:clamp(88px,10vw,148px);font-weight:700;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:3px var(--pak-brand);background:linear-gradient(180deg,transparent 58%,var(--pak-action) 58%,var(--pak-action) 82%,transparent 82%);-webkit-background-clip:text;background-clip:text}
.sy-mark>.icon{width:72px;height:72px;color:var(--pak-brand)}
.sy-wrap h1{font-size:var(--pak-fs-title)}
.sy-wrap .pk-hero-lead{margin-inline:auto}
.sy-search{max-width:620px;margin:28px auto 0}
.sy-actions{justify-content:center}
.sy-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px;text-align:left}
.sy-links a{display:grid;gap:4px;padding:18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);transition:border-color 200ms,box-shadow 200ms}
.sy-links a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.sy-links strong{font-size:var(--pak-fs-card-sm);color:var(--pak-text)}
.sy-links small{font-size:var(--pak-fs-label);color:var(--pak-muted)}

@media (max-width:1199px){
  .ab-values,.ab-fields,.ab-team,.ab-certs,.ab-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-ind{grid-template-columns:repeat(3,minmax(0,1fr))}
  .so-ind-more{grid-column:span 2}
  .lg-layout{grid-template-columns:200px minmax(0,1fr)}
  .lg-aside{display:none}
}
@media (max-width:1023px){
  .ab-split,.ab-two,.ab-flow,.ab-locs,.nw-grid,.nw-article{grid-template-columns:1fr}
  .ab-gallery{grid-template-columns:1fr 1fr}
  .ab-gallery .ab-g1{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:1.9}
  .ab-proj{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-needs{grid-template-columns:1fr 1fr}
  .so-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-layout{grid-template-columns:1fr}
  .lg-toc{position:static}
  .sy-links{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .ab-tabs a{min-height:48px;padding:0 12px}
  .ab-tabs a.ab-tabs-extra{margin-left:0}
  .ab-facts{grid-template-columns:1fr 1fr;gap:0 12px}
  .ab-facts div:nth-child(3){padding-left:0;border-left:0}
  .ab-vision,.ab-values,.ab-fields,.ab-more,.ab-team,.ab-rooms,.ab-rooms-3,.ab-steps,.ab-flow .ab-steps:has(li:nth-child(3):last-child),.so-needs,.so-ind{grid-template-columns:1fr}
  .ab-brand-row,.ab-proj{grid-template-columns:1fr 1fr}
  .ab-certs{grid-template-columns:1fr;gap:12px}
  .ab-cert{grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:12px}
  .ab-cert-img{grid-row:1/span 3}
  .ab-cert strong,.ab-cert small,.ab-cert em{grid-column:2;padding:0}
  .ab-gallery{grid-template-columns:1fr}
  .ab-bars div{grid-template-columns:1fr;gap:4px}
  .ab-loc-body{grid-template-columns:1fr;gap:10px}
  .ab-loc .actions{display:grid}
  .so-head{flex-direction:column;gap:14px}
  .so-cat-grid{grid-template-columns:1fr}
  .so-ind-more{grid-column:auto}
  .so-ind{gap:12px}
  .so-ind a:not(.so-ind-more){grid-template-columns:116px minmax(0,1fr);column-gap:14px}
  .so-ind-img{aspect-ratio:auto;min-height:120px}
  .so-ind-img img{position:absolute;inset:0}
  .so-ind-img b{left:8px;top:8px}
  .so-ind-body{padding:14px 14px 14px 0}
  .sy-links{grid-template-columns:1fr}
}

/* ==========================================================================
   Bước 4 · Chuyển động toàn site (01/10/2026)
   - Mở trang: phần đầu trang hiện lần lượt, thân trang trồi lên sau (CSS, chạy một lần;
     site-motion.js thêm .pak-entered để trang vẽ lại không chạy lại).
   - Cuộn: phần tử .pak-rv hiện khi vào màn hình (site-motion.js thêm .is-in), thẻ cùng hàng lệch nhịp;
     ảnh lớn mở từ trái sang, ảnh trong thẻ thu nhẹ về cỡ thật, thanh số dự án chạy dài ra.
   - Rê chuột / bấm: thẻ có liên kết nhấc nhẹ, mũi tên nhích, ảnh trong thẻ phóng nhẹ, gạch chân tab trượt.
   - Chuyển trang: mờ dần giữa hai trang (trình duyệt hỗ trợ View Transitions), thanh đầu trang đứng yên.
   - Giảm chuyển động: không chạy gì (quy tắc chung ở trên + mọi hiệu ứng ở đây nằm trong no-preference).
   ========================================================================== */
:root{--pak-ease-out:cubic-bezier(.16,1,.3,1);--pak-dur-reveal:780ms;--pak-rise:22px;--pak-shadow-lift:0 2px 4px rgb(18 53 74 / 6%),0 16px 36px rgb(18 53 74 / 13%)}
@keyframes pak-in-up{from{opacity:0;translate:0 var(--pak-rise)}}
@keyframes pak-in-fade{from{opacity:0}}
@keyframes pak-in-rise{from{translate:0 16px}}
@keyframes pak-in-scale{from{opacity:0;scale:.96}}
@keyframes pak-in-soft{from{scale:.975}}
@keyframes pak-wipe{from{clip-path:inset(0 100% 0 0 round var(--pak-r-lg))}to{clip-path:inset(0 0 0 0 round var(--pak-r-lg))}}
@keyframes pak-img-settle{from{scale:1.12}}
@keyframes pak-bar{from{clip-path:inset(0 100% 0 0 round 6px)}}
@keyframes pak-grow-x{from{transform:scaleX(0)}}
@keyframes pak-pop-in{0%{opacity:0;scale:.4}60%{opacity:1;scale:1.14}100%{scale:1}}
@keyframes pak-draw{from{stroke-dashoffset:24}}
@keyframes pak-bump{0%,100%{scale:1}35%{scale:1.45}}
@keyframes pak-toast-in{from{opacity:0;translate:0 18px}}
@keyframes pak-fill{from{background-size:0 100%}}
@keyframes pak-vt-out{to{opacity:0}}
@keyframes pak-vt-in{from{opacity:0}}
@keyframes pak-parallax{from{translate:0 -4.5%}to{translate:0 4.5%}}

@media (prefers-reduced-motion:no-preference){
  /* 1. Mở trang: breadcrumb → nhãn → tiêu đề → đoạn dẫn → nút, mỗi lớp cách 70ms */
  html:not(.pak-entered) :is(
    .pk-hero>.wrap>:not(.pk-brand-head,.pk-cat-head,.pk-hero-grid,.so-head),
    :is(.pk-brand-head,.pk-cat-head,.pk-hero-grid,.so-head)>div>*,.pk-hero-grid>form,
    .kb-hub-head>.wrap>:not(.kb-hub-intro),.kb-hub-intro>div:first-child>*,.kb-hub-intro>.kb-search,
    .sy-wrap>*,.pf-thanks-main>:not(.pf-done),.page-intro>*,
    .pk-detail-page>.wrap>.breadcrumb,.pk-info>*,.dl-detail>.breadcrumb,.dl-detail-info>*,
    .evidence-home>.breadcrumb,.ev-section-heading>div>*,.ev-section-heading>.btn,.ev-industry-page>.wrap>.breadcrumb,.ev-solution-hero>div>*
  ){animation:pak-in-up 760ms var(--pak-ease-out) calc(var(--hd,0) * 70ms + var(--hb,0ms)) backwards}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>*{--hd:0}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(2){--hd:1}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(3){--hd:2}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(4){--hd:3}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(5){--hd:4}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(6){--hd:5}
  html:not(.pak-entered) :is(.pk-hero>.wrap,.pk-brand-head>div,.pk-cat-head>div,.pk-hero-grid>div,.so-head>div,.kb-hub-head>.wrap,.kb-hub-intro>div,.kb-head,.sy-wrap,.pf-thanks-main,.page-intro,.pk-info,.dl-detail-info,.ev-section-heading>div,.ev-solution-hero>div)>:nth-child(n+7){--hd:6}
  /* Khối lồng trong lưới đầu trang (logo + chữ, biểu tượng + chữ) chạy sau breadcrumb */
  html:not(.pak-entered) :is(:is(.pk-brand-head,.pk-cat-head,.pk-hero-grid,.so-head)>div>*,.pk-hero-grid>form,.kb-hub-intro>div:first-child>*,.kb-hub-intro>.kb-search,.pk-info>*){--hb:90ms}
  html:not(.pak-entered) :is(.pk-brand-head,.pk-cat-head,.so-head)>:not(div){animation:pak-in-scale 720ms var(--pak-ease-out) 60ms backwards}
  /* Bài viết (nguồn chính từ Google): phần đầu bài chỉ trồi nhẹ, không mờ, để chữ hiện ngay từ khung hình đầu */
  html:not(.pak-entered) .kb-head>*{animation:pak-in-rise 700ms var(--pak-ease-out) calc(var(--hd,0) * 60ms) backwards}
  html:not(.pak-entered) .pk-hero>.ab-tabs{animation:pak-in-fade 700ms var(--pak-ease) 380ms backwards}
  html:not(.pak-entered) .ab-tabs a[aria-current="page"]::after{animation:pak-grow-x 760ms var(--pak-ease-out) 560ms backwards}
  html:not(.pak-entered) .pk-detail>.pk-gallery{animation:pak-in-soft 1s var(--pak-ease-out) backwards}
  html:not(.pak-entered) :is(.dl-detail-cover,.ev-solution-hero>img){animation:pak-in-scale 900ms var(--pak-ease-out) 120ms backwards}
  /* Thân trang trồi lên sau phần đầu (không áp cho bài viết để ảnh đầu bài hiện ngay) */
  html:not(.pak-entered) :is(.pk-page>.pk-hero+*,.kb-hub>.kb-hub-head+*,.dl-page>.dl-head+*,.pf-thanks-grid>.pf-aside,.evidence-home>.ev-filter,.evidence-home>.ev-result,.evidence-home>.ev-project-grid){animation:pak-in-up 900ms var(--pak-ease-out) 300ms backwards}
  /* Trang cảm ơn: dấu tích tự vẽ, vòng sóng lan; trang lỗi: dải vàng quét qua số 404/500 */
  .pf-done{position:relative}
  .pf-done .icon path{stroke-dasharray:24;animation:pak-draw 650ms var(--pak-ease-out) 420ms backwards}
  .pf-done::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--pak-success);opacity:0;pointer-events:none;animation:pak-wave 1.8s ease-out 900ms 2}
  .sy-mark span{background-repeat:no-repeat;background-size:100% 100%;animation:pak-fill 1.3s var(--pak-ease-out) 420ms backwards}

  /* 2. Hiện khi cuộn tới */
  .pak-rv:not(.is-in){opacity:0}
  .pak-rv.is-in{animation:pak-in-up var(--pak-dur-reveal) var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .pak-rv.is-in[data-rv="scale"]{animation-name:pak-in-scale}
  .pak-rv.is-in.ab-photo{animation:pak-wipe 1.15s var(--pak-ease-out) var(--rv-d,0ms) backwards}
  :is(.so-ind,.ab-proj,.kb-grid,.ev-project-grid,.pk-grid,.pk-art-list,.nw-grid)>.pak-rv.is-in img{animation:pak-img-settle 1.4s var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .ab-bars>.pak-rv.is-in b{animation:pak-bar 1.2s var(--pak-ease-out) calc(var(--rv-d,0ms) + 150ms) backwards}
  .ab-steps>.pak-rv.is-in>span>b{animation:pak-pop-in 650ms var(--pak-ease-out) calc(var(--rv-d,0ms) + 320ms) backwards}

  /* 3. Chuyển trang: nội dung mờ dần, thanh đầu trang và nút liên hệ đứng yên */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:pak-vt-out 180ms var(--pak-ease) both}
  ::view-transition-new(root){animation:pak-vt-in 340ms var(--pak-ease-out) both}
}
.pak-header{view-transition-name:pak-header}
.pak-float{view-transition-name:pak-float}

/* 4. Ảnh lớn trôi chậm hơn nội dung khi cuộn (trình duyệt hỗ trợ scroll-driven animation) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :is(.ab-photo-lg,.ab-g1) img{scale:1.1;animation:pak-parallax linear both;animation-timeline:view();animation-range:cover}
  }
}

/* 5. Rê chuột và bấm */
.icon[data-i="arrow"],.icon[data-i="external"],.icon[data-i="download"],.icon[data-i="upload"]{transition:translate 280ms var(--pak-ease-out)}
:is(.pk-cat-card,.pk-card,.pk-line,.pk-brand-card,.pk-art-list a,.pk-doc-list a,.ab-fields a,.ab-more a,.ab-brand-row a,.ab-proj a,a.ab-room,.ab-cert,.so-needs a,.so-ind a,.sy-links a,.nw-card){transition:border-color 220ms var(--pak-ease),box-shadow 280ms var(--pak-ease),background-color 220ms var(--pak-ease),translate 320ms var(--pak-ease-out)}
:is(.ab-proj,.so-ind-img,.nw-card-big .ab-photo,.pk-art-list a) img{transition:scale 700ms var(--pak-ease-out)}
@media (hover:hover){
  :is(a,button):hover .icon[data-i="arrow"]{translate:3px 0}
  :is(a,button):hover .icon[data-i="external"]{translate:2px -2px}
  :is(a,button):hover .icon[data-i="download"]{translate:0 2px}
  :is(a,button):hover .icon[data-i="upload"]{translate:0 -2px}
  :is(.pk-cat-card,.pk-card,.pk-line,.pk-brand-card,.pk-art-list a,.pk-doc-list a,.ab-fields a,.ab-more a,.ab-brand-row a,.ab-proj a,a.ab-room,.ab-cert,.so-needs a,.so-ind a,.sy-links a,.nw-card):hover{translate:0 -4px;box-shadow:var(--pak-shadow-lift)}
  :is(.ab-proj a,.so-ind a,.nw-card-big,.pk-art-list a):hover img{scale:1.06}
}
/* Gạch chân tab trượt ra khi rê chuột, tab đang xem giữ gạch vàng */
.ab-tabs a{position:relative}
.ab-tabs a[aria-current="page"]{border-bottom-color:transparent}
.ab-tabs a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--pak-border-input);transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--pak-ease-out),background-color 200ms}
.ab-tabs a:hover::after{transform:scaleX(1)}
.ab-tabs a[aria-current="page"]::after{transform:scaleX(1);background:var(--pak-action)}
.ab-tabs a.ab-tabs-extra::after{display:none}
@media (max-width:767px){.ab-tabs a::after{left:12px;right:12px}}
/* Số lượng danh sách tư vấn nảy khi thêm/bớt; thông báo nhỏ trồi lên */
@media (prefers-reduced-motion:no-preference){
  [data-list-count].is-bump{animation:pak-bump 480ms var(--pak-ease-out)}
  .toast:not([hidden]){animation:pak-toast-in 380ms var(--pak-ease-out)}
}
@media print{.pak-rv{opacity:1!important;animation:none!important}}

/* ==========================================================================
   Trang chủ liền mạch (01/10/2026)
   - Nhịp chung toàn site: hiện 0,6 giây, trồi 20px, thẻ vào màn hình cùng lúc cách nhau 60ms,
     bắt đầu hiện khi mép trên vừa chạm đáy màn hình (site-motion.js). Trang chủ dùng chung, không còn hệ riêng.
   - A. Sửa giao diện: nền trắng sau tiêu đề Chứng nhận; số 03/04 dính chữ trên điện thoại; thẻ Kho hàng dùng
     biểu tượng lớn; dải logo đứng yên trên máy tính; thẻ trang chủ nhấc nhẹ khi rê chuột như trang con.
   - B. Nối các section: dải thương hiệu bo góc trượt lên phủ mép dưới hero; khối tối Gửi BOQ mở rộng từ khung
     bo góc ra tràn màn hình; gạch vàng ở nhãn mỗi section vẽ ra trước tiêu đề; chân trang hiện lần lượt.
   - C. Điểm nhấn: 4 lĩnh vực sáng dần, đường nối 4 bước theo độ cuộn, ảnh dự án mở theo hàng, chứng nhận
     nổi lên, bảng tài liệu trượt vào, ảnh showroom trôi chậm, nút gọi có vòng sóng.
   ========================================================================== */
:root{--pak-dur-reveal:600ms;--pak-rise:20px}
@keyframes pak-in-left{from{opacity:0;translate:36px 0}}
@keyframes pak-in-lift{from{opacity:0;translate:0 28px;scale:.95}}
@keyframes pak-wipe-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pak-pulse{from{box-shadow:0 0 0 0 rgb(255 203 5 / 60%)}to{box-shadow:0 0 0 16px rgb(255 203 5 / 0%)}}

/* A. Sửa giao diện */
.hp-certs .evidence-home,.hp-projects .evidence-home{background:transparent}
.hp-cap-fields b{flex:none}
.hp-pillar-glyph{display:grid;color:var(--pak-brand)}
.hp-pillar-glyph .icon{width:clamp(48px,3.2vw + 12px,64px);height:clamp(48px,3.2vw + 12px,64px);stroke-width:1.5}
@media (max-width:767px){.hp-pillar-glyph .icon{width:40px;height:40px}}
/* Dải logo: máy tính đứng yên một hàng (9 logo vừa khung); máy tính bảng và điện thoại chạy ngang, dừng khi khuất */
@media (min-width:1024px){
  .hp-marquee{width:min(1240px,calc(100% - 64px));margin:auto;-webkit-mask-image:none;mask-image:none}
  .hp-marquee-track{flex:1 1 100%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;padding:6px 0 10px;animation:none}
  .hp-marquee-track[aria-hidden]{display:none}
  .hp-marquee li a{width:auto;height:88px;padding:16px 14px}
  .hp-marquee img{max-height:48px}
  .hp-marquee-toggle{display:none}
}
.hp-trust.is-offscreen .hp-marquee-track{animation-play-state:paused}
/* Thẻ có liên kết ở trang chủ nhấc nhẹ khi rê chuột, giống trang con */
:is(.hp-ind-card,.hp-kb-card,.hp-certs .ev-cert,.hp-marquee li a){transition:border-color 220ms var(--pak-ease),box-shadow 280ms var(--pak-ease),background-color 220ms var(--pak-ease),translate 320ms var(--pak-ease-out)}
@media (hover:hover){:is(.hp-ind-card,.hp-kb-card,.hp-certs .ev-cert,.hp-marquee li a):hover{translate:0 -4px;box-shadow:var(--pak-shadow-lift)}}

/* B. Nối các section */
/* Hero → dải thương hiệu: dải bo góc trên, nằm đè mép dưới hero; khi cuộn, nội dung hero trôi chậm nên dải như trượt lên phủ */
.hp-hero{padding-bottom:28px}
.hp-trust{position:relative;z-index:1;margin-top:-28px;border-radius:28px 28px 0 0;box-shadow:0 -16px 36px -12px rgb(6 27 43 / 30%)}
@media (max-width:767px){.hp-hero{padding-bottom:20px}.hp-trust{margin-top:-20px;border-radius:20px 20px 0 0}}
/* Khối tối Gửi BOQ: nền tối là lớp riêng, mở rộng từ khung bo góc ra tràn màn hình (--xp do home-motion.js đặt, mặc định tràn) */
.hp-process{position:relative;isolation:isolate;background:var(--pak-surface)}
.hp-process::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pak-brand-deep);clip-path:inset(0 calc((1 - var(--xp,1)) * clamp(12px,4vw,64px)) round calc((1 - var(--xp,1)) * 32px) calc((1 - var(--xp,1)) * 32px) 0 0)}
/* Gạch vàng ở nhãn: vẽ ra trước, tiêu đề theo sau */
.hp-kicker::before{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  :is(.pak-rv.is-in .hp-kicker,.pak-rv.is-in.hp-kicker)::before{animation:pak-grow-x 560ms var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .pak-rv.is-in.hp-head h2{animation:pak-in-up var(--pak-dur-reveal) var(--pak-ease-out) calc(var(--rv-d,0ms) + 140ms) backwards}
  html:not(.pak-entered) .pk-hero .hp-kicker::before{animation:pak-grow-x 700ms var(--pak-ease-out) calc(var(--hd,0) * 70ms + 80ms) backwards}

  /* C. Điểm nhấn từng section */
  .ev-project-grid>.pak-rv.is-in .ev-project-image{animation:pak-wipe-x 900ms var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .ev-certs>.pak-rv.is-in{animation-name:pak-in-lift}
  .pak-rv.is-in[data-rv="right"]{animation-name:pak-in-left}
  :is(.hp-rail>.pak-rv.is-in .hp-ind-media,.hp-kb-articles>.pak-rv.is-in .hp-kb-media) img{animation:pak-img-settle 1.3s var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .pak-rv.is-in.hp-visit-photo{animation:pak-wipe 1.15s var(--pak-ease-out) var(--rv-d,0ms) backwards}
  .hp-visit-copy>.pak-rv.is-in.actions .btn[href^="tel:"]{animation:pak-pulse 1.5s ease-out calc(var(--rv-d,0ms) + 450ms) 2}
  /* 3 cam kết ở dải thương hiệu: dấu tích bật lên lần lượt */
  .hp-trust-head p>.pak-rv.is-in .icon{animation:pak-pop-in 520ms var(--pak-ease-out) calc(var(--rv-d,0ms) + 120ms) backwards}
}
/* Đường nối 4 bước chạy theo độ cuộn (--line do home-motion.js đặt, mặc định đầy); bước đã tới thì sáng */
.hp-steps::after{transform:scaleY(var(--line,1))}
.hp-step-icon{transition:border-color 300ms var(--pak-ease),box-shadow 300ms var(--pak-ease)}
.hp-live .hp-steps li.is-lit .hp-step-icon{border-color:var(--pak-action);box-shadow:0 0 0 6px rgb(255 203 5 / 14%)}
/* Năng lực tổng kho (cột trái dính, từ 1024px): 4 lĩnh vực sáng dần khi cuộn qua 4 thẻ năng lực */
@media (min-width:1024px){
  .hp-cap-fields li{position:relative}
  .hp-cap-fields li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pak-action);transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--pak-ease-out)}
  .hp-live .hp-cap-fields li{color:var(--pak-muted);transition:color 300ms var(--pak-ease)}
  .hp-live .hp-cap-fields li.is-lit{color:var(--pak-text)}
  .hp-live .hp-cap-fields li.is-lit b{color:var(--pak-brand)}
  .hp-live .hp-cap-fields li.is-lit::after{transform:scaleX(1)}
}
/* Ảnh showroom trôi chậm hơn nội dung khi cuộn (trình duyệt hỗ trợ scroll-driven animation) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hp-visit-photo img{scale:1.1;animation:pak-parallax linear both;animation-timeline:view();animation-range:cover}
  }
}

/* ===== Hero "Dẫn lối" (02/10/2026) — đi cùng hero-dan-loi.js =====
   Mọi cỡ màn hình: ảnh cảnh 1 (dãy showroom), đồng tiền trong logo ở dòng chữ nhỏ, tiêu đề "từ Quảng Ngãi đến 34 tỉnh thành".
   Điện thoại: ảnh thành dải 4:3 phía trên, chữ ở dưới trên nền tối; đường vàng đi từ dòng chữ nhỏ lên cửa showroom.
   Máy tính (html.dl-story, do đoạn script nhỏ trong <head> trang chủ đặt): hero ghim, cuộn tới đâu kể tới đó 6 cảnh của một chuyến hàng.
   Tọa độ của cảnh (đồng tiền, đường vàng, cửa sổ chuyển cảnh) tính theo khung 1600×900, khớp với object-position 70% 50% của ảnh. */
.hp-hero-pin{position:relative;isolation:isolate}
.hp-dl .hp-hero-media{inset:0}
.hp-hero-media picture{display:block;width:100%;height:100%}
.hp-dl .hp-hero-img{object-position:70% 50%}
html:not(.pak-hero-done) .hp-dl .hp-hero-img{animation:none}
.hp-coin{flex:none;width:26px;height:26px;overflow:visible;color:var(--pak-action)}
html:not(.pak-hero-done) .hp-coin{animation:hp-coin-in .9s .15s cubic-bezier(.2,1.25,.35,1) both}
@keyframes hp-coin-in{from{opacity:0;transform:rotate(-140deg) scale(.3)}}
.hp-dl-skip,.hp-dl-end{display:none}

/* Nhãn tại điểm đến (dùng cả trên điện thoại) */
.dl-label{position:absolute;left:0;top:0;display:grid;gap:1px;padding:8px 14px 9px 13px;border:1px solid rgb(255 255 255 / 18%);border-radius:var(--pak-r);background:rgb(11 34 50 / 86%);box-shadow:0 8px 24px rgb(6 27 43 / 35%);white-space:nowrap;visibility:hidden;opacity:0;pointer-events:none}
.dl-label b{font-size:15px;font-weight:600;line-height:1.3;color:var(--pak-on-dark)}
.dl-label span{font-size:12.5px;line-height:1.35;color:var(--pak-on-dark-muted)}
.dl-label::before{content:"";position:absolute;width:12px;height:2px;background:var(--pak-action)}
.dl-label.r{transform-origin:0 50%}
.dl-label.r::before{left:-13px;top:50%;margin-top:-1px}
.dl-label.l{transform-origin:100% 50%}
.dl-label.l::before{right:-13px;top:50%;margin-top:-1px}
.dl-label.t{transform-origin:50% 100%}
.dl-label.t::before{left:50%;bottom:-13px;width:2px;height:12px;margin-left:-1px}
.dl-pulse{fill:none;stroke:var(--pak-action);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.dl-mk.is-on .dl-pulse,.dl-still-mk.is-on .dl-pulse{animation:dl-pulse 2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes dl-pulse{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.3)}}

/* Điện thoại: dải ảnh 4:3, chữ phía dưới */
@media (max-width:767px){
  .hp-dl .hp-hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;overflow:hidden;will-change:auto}
  .hp-dl .hp-hero-media::after{content:"";position:absolute;inset:auto 0 0;height:44%;background:linear-gradient(0deg,var(--pak-brand-deep),rgb(16 45 64 / 0%))}
  .hp-dl .hp-hero-img{object-position:50% 50%}
  .hp-dl .hp-hero-shade{display:none}
  .hp-dl .hp-hero-grid{position:relative;z-index:1;margin-top:-30px;padding-top:0}
  .dl-still{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
  .dl-still path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .dl-still .u{stroke:rgb(6 27 43 / 45%);stroke-width:5}
  .dl-still .b{stroke:#ffd84a;stroke-width:2.4;filter:drop-shadow(0 0 4px rgb(255 203 5 / 70%))}
  .dl-still-mk,.dl-still-head{position:absolute;left:-15px;top:-15px;z-index:3;width:30px;height:30px;color:var(--pak-action);pointer-events:none;filter:drop-shadow(0 0 5px rgb(255 203 5 / 60%)) drop-shadow(0 1px 2px rgb(6 27 43 / 50%))}
  .dl-still-mk svg,.dl-still-head svg{display:block;width:100%;height:100%;overflow:visible}
  .dl-still-head{opacity:0}
  .dl-still-mk{opacity:0;transform:scale(1.5);transition:opacity .25s,transform .45s cubic-bezier(.2,1.3,.4,1)}
  .dl-still-mk.is-on{opacity:1;transform:none}
  .hp-dl .dl-label{z-index:3;padding:6px 11px 7px 10px}
  .hp-dl .dl-label b{font-size:13px}
  .hp-dl .dl-label span{font-size:12px}
  .hp-dl .dl-label.is-on{visibility:visible;opacity:1;transition:opacity .4s .1s}
  /* Tiêu đề giữ đủ 3 dòng trên điện thoại hẹp: dòng dài nhất rộng khoảng 9,4 lần cỡ chữ */
  .hp-dl h1{font-size:min(var(--pak-fs-display),calc((100vw - 32px) / 9.6))}
}
@media (max-width:359px){.hp-dl .hp-hero-eyebrow{letter-spacing:.05em}}

/* Máy tính: hero ghim, 6 cảnh theo độ cuộn */
html.dl-story .hp-dl{overflow:visible;height:calc(100vh - var(--pak-sticky-top) + 260vh + 28px);height:calc(100svh - var(--pak-sticky-top) + 260svh + 28px)}
html.dl-story .hp-dl .hp-hero-pin{position:sticky;top:var(--pak-sticky-top);height:calc(100vh - var(--pak-sticky-top));height:calc(100svh - var(--pak-sticky-top));overflow:hidden;background:var(--pak-brand-deep)}
html.dl-story .hp-dl .hp-hero-media{z-index:0}
html.dl-story .hp-dl .hp-hero-shade{z-index:2;background:linear-gradient(90deg,rgb(6 27 43 / 94%) 0%,rgb(6 27 43 / 80%) 30%,rgb(6 27 43 / 36%) 56%,rgb(6 27 43 / 0%) 76%),linear-gradient(0deg,rgb(11 34 50 / 72%) 0%,rgb(11 34 50 / 0%) 34%)}
html.dl-story .hp-dl .hp-hero-grid{position:relative;z-index:5;height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;padding-top:0}
html.dl-story .hp-dl .hp-hero-copy{position:relative;align-self:center;max-width:760px;padding-bottom:76px}
html.dl-story .hp-dl :is(.hp-hero-proof,.hp-metrics){display:none}
.dl-scenes,.dl-draw,.dl-end-coins{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;pointer-events:none}
.dl-scenes{z-index:1}
.dl-sc{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:var(--pak-brand-deep)}
.dl-cam{position:absolute;inset:0;will-change:transform}
.dl-cam img{display:block;width:100%;height:100%;object-fit:cover}
/* Video lặp của từng cảnh (03/10/2026): phủ lên ảnh tĩnh khi đã chạy */
.dl-sc.dl-sc-v0{background:none}
.dl-vid{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .45s ease}
.dl-vid.is-on{opacity:1}
.hp-hero-vid{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hp-hero-vid.is-on{opacity:1}
@media (max-width:767px){.hp-dl .hp-hero-vid{object-position:50% 50%}}
.dl-shade-cap{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;opacity:0;background:linear-gradient(0deg,rgb(6 27 43 / 90%) 0%,rgb(6 27 43 / 62%) 24%,rgb(6 27 43 / 0%) 52%),linear-gradient(90deg,rgb(6 27 43 / 58%) 0%,rgb(6 27 43 / 0%) 48%)}
.dl-draw{z-index:3;overflow:visible}
.dl-route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.dl-route .u{stroke:rgb(6 27 43 / 42%);stroke-width:7}
.dl-route .a{stroke:var(--pak-action);stroke-width:3;opacity:.62}
.dl-route .b{stroke:#ffd84a;stroke-width:3.2;filter:drop-shadow(0 0 5px rgb(255 203 5 / 75%))}
.dl-mini{color:var(--pak-action);filter:drop-shadow(0 0 6px rgb(255 203 5 / 60%)) drop-shadow(0 1px 2px rgb(6 27 43 / 50%))}
.dl-iris{fill:none;stroke:var(--pak-action);stroke-linejoin:miter;visibility:hidden}
.dl-iris.a{stroke-width:3}
.dl-iris.b{stroke-width:1.4;opacity:.7}
.dl-pipe-wall{fill:none;stroke:#18232d;visibility:hidden}
.dl-pipe-gold{fill:none;stroke:var(--pak-action);stroke-width:2.4;visibility:hidden}
.dl-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.dl-caps{position:absolute;inset:0;z-index:5;pointer-events:none}
.dl-caps>.wrap{position:relative;height:100%}
.dl-cap{position:absolute;left:0;bottom:max(12%,96px);max-width:min(780px,64%);visibility:hidden;opacity:0;color:var(--pak-on-dark)}
.dl-cap .k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-action)}
.dl-cap .k::before{content:"";width:8px;height:8px;background:var(--pak-action);transform:rotate(45deg)}
.dl-cap .t{margin:0 0 14px;font-size:clamp(40px,3.9vw,60px);font-weight:700;line-height:1.07;letter-spacing:-.022em;color:var(--pak-on-dark)}
.dl-cap .d{max-width:620px;margin:0;font-size:var(--pak-fs-lead);line-height:1.6;color:var(--pak-on-dark-muted)}
.dl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dl-chips span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 4px;border:1px solid rgb(255 255 255 / 20%);border-radius:var(--pak-r);background:rgb(11 34 50 / 72%);font-size:var(--pak-fs-label);font-weight:600}
.dl-chips img{width:54px;height:30px;border-radius:5px;object-fit:cover}
.dl-hint{position:absolute;left:0;bottom:22px;display:flex;align-items:center;gap:10px;margin:0;font-size:var(--pak-fs-label);font-weight:600;letter-spacing:.03em;white-space:nowrap;color:var(--pak-on-dark-muted);visibility:hidden;opacity:0}
.dl-hint i{width:10px;height:10px;border:2px solid var(--pak-action);transform:rotate(45deg);animation:dl-hint 1.6s ease-in-out infinite}
@keyframes dl-hint{0%,100%{translate:0 -3px}50%{translate:0 4px}}
.dl-nav{position:absolute;right:20px;top:50%;z-index:6;display:grid;justify-items:center;gap:14px;transform:translateY(-50%)}
.dl-dots{display:grid;gap:16px;padding:14px 11px;border-radius:20px;background:rgb(11 34 50 / 50%);visibility:hidden;opacity:0}
.dl-dots i{display:block;width:9px;height:9px;border:1.6px solid rgb(255 255 255 / 55%);transform:rotate(45deg);transition:background-color .3s,border-color .3s,scale .3s}
.dl-dots i.on{background:var(--pak-action);border-color:var(--pak-action);scale:1.25}
html.dl-story .hp-dl .hp-dl-skip{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 12px;border:1px solid rgb(255 255 255 / 30%);border-radius:17px;background:rgb(11 34 50 / 64%);color:var(--pak-on-dark);font:inherit;font-size:var(--pak-fs-caption);font-weight:600;white-space:nowrap;cursor:pointer;visibility:hidden;opacity:0;transition:background-color .2s,border-color .2s}
.hp-dl-skip .icon{width:16px;height:16px}
.hp-dl-skip:hover{border-color:var(--pak-action);background:rgb(11 34 50 / 88%)}
.dl-end-bg{position:absolute;inset:0;z-index:7;pointer-events:none;visibility:hidden;opacity:0;background:radial-gradient(120% 90% at 50% 40%,rgb(16 45 64 / 90%) 0%,rgb(8 26 39 / 97%) 78%)}
.dl-end-coins{z-index:8;overflow:visible}
html.dl-story .hp-dl .hp-dl-end{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 32px;text-align:center;visibility:hidden;pointer-events:none}
.hp-dl-end>*{pointer-events:auto}
.hp-dl-logo{--dl-logo:clamp(104px,20vh,188px);width:calc(var(--dl-logo) * 880 / 537);height:var(--dl-logo);pointer-events:none}
.hp-dl-name{margin:clamp(16px,3vh,30px) 0 0;font-size:clamp(32px,3vw,46px);font-weight:700;line-height:1.05;letter-spacing:.07em;text-transform:uppercase;color:var(--pak-on-dark)}
.hp-dl-tag{margin:12px 0 0;font-size:clamp(17px,1.4vw,21px);font-weight:500;color:var(--pak-on-dark-muted)}
.hp-dl-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(880px,100%);margin-top:clamp(20px,4vh,40px);border-top:1px solid rgb(255 255 255 / 16%)}
.hp-dl-metrics>div{padding:18px 12px 0}
.hp-dl-metrics>div+div{border-left:1px solid rgb(255 255 255 / 12%)}
.hp-dl-metrics strong{display:block;font-size:clamp(32px,2.9vw,44px);line-height:1.1;color:var(--pak-action);font-variant-numeric:tabular-nums}
.hp-dl-metrics>div>span{display:block;margin-top:4px;font-size:var(--pak-fs-label);color:var(--pak-on-dark-muted)}
.hp-dl-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,4vh,40px)}
.hp-dl-cta .btn{min-height:52px}
html.dl-story .hp-dl :is(.hp-dl-name,.hp-dl-tag,.hp-dl-metrics,.hp-dl-cta){visibility:hidden;opacity:0}
@media (prefers-reduced-motion:reduce){.dl-mk.is-on .dl-pulse,.dl-still-mk.is-on .dl-pulse,.dl-hint i{animation:none}}

/* ===== Landing hồ sơ năng lực "Mạch ngầm" (03/10/2026) — đi cùng ho-so-nang-luc.js và capabilityLanding() trong app.js =====
   Máy tính (html.cl-story, do đoạn script nhỏ trong <head> đặt): mỗi chương ghim một đoạn phim, cuộn tới đâu phim chạy tới đó.
   Điện thoại (html.cl-phone): phim dọc tự chạy ở đầu trang. Còn lại: ảnh tĩnh và nút xem phim. */
.cl-page{--cl-ink:#050d14;background:var(--pak-page)}
.cl-crumb{padding:14px 20px 0}
.cl-page .breadcrumb{margin:0 0 12px}
/* Sân khấu phim. --cl-bar-h: chiều cao thanh dưới trên máy tính (ho-so-nang-luc.js đọc biến này ở <html>) */
:root{--cl-bar-h:48px}
.cl-pin{position:relative}
.cl-stage-wrap{position:relative;background:var(--cl-ink);color:var(--pak-on-dark)}
.cl-frame{position:relative;margin:0 auto}
.cl-stage{display:none}
html.cl-story .cl-pin{height:calc(100vh - var(--pak-sticky-top) + var(--cl-d,0px));height:calc(100svh - var(--pak-sticky-top) + var(--cl-d,0px))}
html.cl-story .cl-stage-wrap{position:sticky;top:var(--pak-sticky-top);display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--pak-sticky-top));height:calc(100svh - var(--pak-sticky-top));overflow:hidden;padding-bottom:var(--cl-bar-h)}
html.cl-story .cl-frame{position:relative;z-index:1;flex:none;width:min(100%,calc((100vh - var(--pak-sticky-top) - var(--cl-bar-h)) * 16 / 9));width:min(100%,calc((100svh - var(--pak-sticky-top) - var(--cl-bar-h)) * 16 / 9));aspect-ratio:16/9;container-type:size;box-shadow:0 0 80px rgb(0 0 0 / 55%)}
html.cl-story .cl-stage{display:block;aspect-ratio:16/9}
/* Ánh nền hai bên khung phim: màu của cảnh đang chiếu, làm mờ (ho-so-nang-luc.js vẽ vào canvas nhỏ) */
.cl-ambient{position:absolute;left:-80px;top:-80px;width:calc(100% + 160px);height:calc(100% + 160px);z-index:0;filter:blur(40px) saturate(1.3) brightness(.62);opacity:0;transition:opacity .5s;pointer-events:none}
html.cl-story .cl-hero .cl-pin{min-height:calc(100vh - var(--pak-sticky-top));min-height:calc(100svh - var(--pak-sticky-top))}
/* Tiêu đề trang: trên máy tính nằm đè lên sân khấu và hiện khi phim tới cảnh phòng tắm; điện thoại nằm dưới phim */
.cl-title .wrap{padding-top:28px;padding-bottom:36px}
.cl-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:var(--pak-fs-eyebrow);font-weight:700;letter-spacing:var(--pak-track-caps);text-transform:uppercase;color:var(--pak-action)}
.cl-kicker::before{content:"";flex:none;width:9px;height:9px;background:var(--pak-action);transform:rotate(45deg)}
.cl-title h1{max-width:14ch;margin:0;font-size:var(--pak-fs-display);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--pak-on-dark)}
.cl-title h1 em{font-style:normal;color:var(--pak-action)}
.cl-lead{max-width:640px;margin:18px 0 0;font-size:var(--pak-fs-lead);line-height:1.6;color:var(--pak-on-dark-muted)}
.cl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cl-btn-note{margin-left:8px;font-size:var(--pak-fs-caption);font-weight:500;opacity:.78}
.cl-hint{display:none;align-items:center;gap:6px;margin-left:auto;font-size:var(--pak-fs-caption);font-weight:600;color:var(--pak-on-dark-subtle)}
html.cl-story .cl-hint{display:inline-flex}
.cl-hint .icon{width:16px;height:16px;transform:rotate(90deg);animation:cl-hint 1.6s ease-in-out infinite}
@keyframes cl-hint{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(4px)}}
html.cl-story .cl-title{position:absolute;left:0;right:0;bottom:var(--cl-sb,0px);z-index:6;padding-top:14cqh;background:linear-gradient(0deg,rgb(5 13 20 / 94%) 0%,rgb(5 13 20 / 76%) 58%,rgb(5 13 20 / 0%) 100%);opacity:0;pointer-events:none}
html.cl-story .cl-title .wrap{max-width:none;padding:0 6cqw clamp(18px,5cqh,48px)}
html.cl-story .cl-kicker{margin-bottom:2.2cqh}
html.cl-story .cl-title h1{max-width:17ch;font-size:clamp(28px,7.6cqh,62px)}
html.cl-story .cl-lead{max-width:min(680px,64cqw);margin-top:2.6cqh;font-size:clamp(14px,2.9cqh,17px);line-height:1.55}
html.cl-story .cl-title .cl-actions{margin-top:3.6cqh}
html.cl-story .cl-title .btn{min-height:0;height:clamp(40px,8cqh,48px)}
html.cl-story .cl-title.is-on{pointer-events:auto}
.cl-title .btn.secondary{color:var(--pak-on-dark);border-color:rgb(255 255 255 / 42%);background:rgb(16 45 64 / 50%)}
.cl-title .btn.secondary:hover{background:rgb(16 45 64 / 80%)}
/* Phim dọc trên điện thoại, ảnh tĩnh trên màn hình rộng không ghim được */
.cl-mobile{display:none;position:relative;background:#000}
.cl-mvideo{display:block;width:100%;max-height:min(82vh,900px);max-height:min(82svh,900px);object-fit:contain;background:#000}
.cl-sound{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid rgb(255 255 255 / 40%);border-radius:999px;background:rgb(5 13 20 / 72%);color:var(--pak-on-dark);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.cl-sound .icon{width:18px;height:18px}
.cl-sound[aria-pressed="true"]{background:var(--pak-action);border-color:var(--pak-action);color:var(--pak-brand)}
.cl-still{position:relative;display:block;aspect-ratio:16/9;max-height:min(80vh,900px);margin:0 auto;background:#000}
.cl-still img,.cl-still video{display:block;width:100%;height:100%;object-fit:contain}
.cl-still .cl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px rgb(0 0 0 / 40%)}
.cl-still .cl-play .icon{order:-1}
html.cl-story .cl-mobile,html.cl-story .cl-still,html.cl-phone .cl-still{display:none}
html.cl-phone .cl-mobile{display:block}
/* Thanh dưới trên máy tính: hai nút luôn hiện, nút Bỏ qua phim */
.cl-bar{display:none}
html.cl-story .cl-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;border-top:1px solid rgb(255 255 255 / 10%);background:rgb(5 13 20 / 90%);color:var(--pak-on-dark);backdrop-filter:blur(10px);transform:translateY(100%);visibility:hidden;transition:transform .3s var(--pak-ease),visibility 0s linear .3s}
html.cl-story.cl-film .cl-bar{transform:none;visibility:visible;transition-delay:0s}
html.cl-film .pak-float>a,html.cl-film .pak-float-right>*{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}
.cl-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--cl-bar-h)}
.cl-bar-chap{font-size:var(--pak-fs-label);font-weight:600;color:var(--pak-on-dark-muted);font-variant-numeric:tabular-nums}
.cl-bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cl-bar .btn{min-height:0;height:34px;padding:0 14px;font-size:var(--pak-fs-label)}
.cl-bar .btn.secondary{color:var(--pak-on-dark);border-color:rgb(255 255 255 / 40%);background:transparent}
.cl-bar .btn.secondary:hover{background:rgb(255 255 255 / 10%)}
.cl-skip{display:inline-flex;align-items:center;gap:6px;height:34px;margin-left:8px;padding:0 6px;border:0;background:none;color:var(--pak-on-dark-muted);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer}
.cl-skip .icon{width:16px;height:16px;transform:rotate(90deg)}
.cl-skip:hover{color:var(--pak-on-dark)}
.cl-bar:not(.is-film) .cl-skip{visibility:hidden}
/* Đường dẫn trang: ở chế độ kể chuyện nằm đè lên góc trên sân khấu để phim chiếm trọn màn hình ngay khi mở trang */
html.cl-story .cl-page{position:relative}
html.cl-story .cl-crumb{position:absolute;left:0;right:0;top:0;z-index:7;padding-top:10px;pointer-events:none}
html.cl-story .cl-crumb .breadcrumb{margin:0;color:var(--pak-on-dark-subtle);pointer-events:auto}
html.cl-story .cl-crumb .breadcrumb a{color:var(--pak-on-dark-muted)}
html.cl-story .cl-crumb .breadcrumb [aria-current]{color:var(--pak-on-dark)}
/* Nội dung thật dưới mỗi chương */
.cl-content{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--pak-border);background:var(--pak-page)}
.cl-chap:nth-child(even) .cl-content{background:var(--pak-surface)}
.cl-head{max-width:860px;margin-bottom:30px}
.cl-head h2{font-size:var(--pak-fs-section);font-weight:700;line-height:1.15;letter-spacing:var(--pak-track-tight);color:var(--pak-brand)}
.cl-intro{margin:14px 0 0;font-size:var(--pak-fs-lead);line-height:1.6;color:var(--pak-muted)}
.cl-content .cl-actions{margin-top:32px}
.cl-inline{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--pak-link);text-decoration:none}
.cl-inline:hover{text-decoration:underline}
.cl-inline .icon{width:16px;height:16px}
.cl-note{display:flex;gap:10px;align-items:flex-start;max-width:860px;margin:22px 0 0;font-size:var(--pak-fs-body-sm);line-height:1.6;color:var(--pak-muted)}
.cl-note .icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--pak-brand)}
.cl-note .cl-inline .icon{width:16px;height:16px;margin:0;color:inherit}
/* Ô soi xuyên tường */
.cl-lens{margin:0 0 40px}
.sm{position:relative;overflow:hidden;border-radius:var(--pak-r-lg);background:#000;aspect-ratio:16/9;cursor:crosshair;touch-action:pan-y;outline-offset:4px}
.sm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sm-ring{fill:none;stroke:var(--pak-action);stroke-width:2.5}
.sm-ring2{fill:none;stroke:var(--pak-action);stroke-width:1.2;opacity:.6}
.cl-lens-note{position:absolute;right:12px;top:12px;padding:4px 11px;border-radius:13px;background:rgb(7 22 33 / 70%);font-size:var(--pak-fs-caption);font-weight:600;letter-spacing:.03em;color:var(--pak-on-dark-muted);pointer-events:none}
.sm-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.sm-ctl span{flex:1 1 100%;font-size:var(--pak-fs-body-sm);color:var(--pak-muted)}
.sm-ctl span b{color:var(--pak-text)}
.sm-ctl button{height:36px;padding:0 13px;border:1px solid var(--pak-border-input);border-radius:var(--pak-r);background:transparent;color:var(--pak-text);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer}
.sm-ctl button[aria-pressed="true"]{border-color:var(--pak-brand);background:var(--pak-brand);color:var(--pak-on-dark)}
.cl-page .ab-fields{margin-top:0}
/* 9 thương hiệu */
.cl-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.cl-brands a{display:grid;gap:12px;place-items:center;align-content:center;min-height:132px;padding:18px 14px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);color:var(--pak-text);font-size:var(--pak-fs-caption);font-weight:600;line-height:1.35;text-align:center;text-decoration:none;transition:border-color 200ms,box-shadow 200ms}
.cl-brands a:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.cl-brands img{height:40px;width:auto;max-width:100%;object-fit:contain}
/* Kho, showroom và quy trình BOQ */
.cl-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.cl-places{display:grid;gap:14px;align-content:start}
.cl-place{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page)}
.cl-place-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--pak-action-tint);color:var(--pak-brand)}
.cl-place-icon .icon{width:22px;height:22px}
.cl-place h3{margin:0 0 6px;font-size:var(--pak-fs-card);font-weight:700;color:var(--pak-brand)}
.cl-place p{margin:0 0 6px;color:var(--pak-text)}
.cl-place-note{font-size:var(--pak-fs-body-sm);color:var(--pak-muted)}
.cl-place-note b{color:var(--pak-text)}
.cl-route-photo{min-height:280px}
.cl-process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;margin-top:40px;padding:clamp(28px,4vw,44px);border-radius:var(--pak-r-lg);background:var(--pak-brand-deep);color:var(--pak-on-dark)}
.cl-process .hp-kicker{color:var(--pak-action-bright)}
.cl-process h3{margin:0 0 14px;font-size:var(--pak-fs-panel);font-weight:700;line-height:1.2;letter-spacing:var(--pak-track-tight)}
.cl-process p{margin:0;color:var(--pak-on-dark-muted)}
.cl-process .btn.secondary{color:var(--pak-on-dark);border-color:rgb(255 255 255 / 40%);background:transparent}
.cl-process .btn.secondary:hover{background:rgb(255 255 255 / 10%)}
.cl-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cl-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:14px 16px;border:1px solid rgb(255 255 255 / 12%);border-radius:var(--pak-r);background:rgb(255 255 255 / 5%)}
.cl-step-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgb(255 255 255 / 8%)}
.cl-step-icon .icon{width:22px;height:22px}
.cl-step-icon b{position:absolute;right:-4px;top:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pak-action);color:var(--pak-brand);font-size:12px}
.cl-steps h4{margin:4px 0 4px;font-size:var(--pak-fs-card-sm);font-weight:700}
.cl-steps p{font-size:var(--pak-fs-body-sm)}
/* 48 công trình */
.cl-filter{display:flex;flex-wrap:wrap;gap:8px}
.cl-filter button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--pak-border-input);border-radius:999px;background:var(--pak-page);color:var(--pak-text);font:inherit;font-size:var(--pak-fs-label);font-weight:600;cursor:pointer}
.cl-filter button b{font-size:var(--pak-fs-caption);font-weight:700;color:var(--pak-muted)}
.cl-filter button[aria-pressed="true"]{border-color:var(--pak-brand);background:var(--pak-brand);color:var(--pak-on-dark)}
.cl-filter button[aria-pressed="true"] b{color:var(--pak-action)}
.cl-result{margin:14px 0 0;font-size:var(--pak-fs-body-sm);color:var(--pak-muted)}
.cl-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.cl-project{display:grid;overflow:hidden;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);color:inherit;text-decoration:none;transition:border-color 200ms,box-shadow 200ms}
.cl-project:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.cl-project img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--pak-surface-2)}
.cl-project span{display:grid;gap:3px;padding:12px 14px 14px}
.cl-project strong{font-size:var(--pak-fs-card-sm);font-weight:700;line-height:1.3;color:var(--pak-brand)}
.cl-project small{font-size:var(--pak-fs-caption);color:var(--pak-muted)}
.cl-project[hidden]{display:none}
.cl-projects[data-more] .cl-project.is-more{display:none}
.cl-more{margin-top:18px}
.cl-certs{margin-top:52px}
.cl-certs h3{margin:0 0 18px;font-size:var(--pak-fs-panel);font-weight:700;line-height:1.2;color:var(--pak-brand)}
.cl-certs .ev-certs{gap:16px}
.cl-certs .ev-cert{display:block;padding:12px 12px 18px;border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page);color:inherit;text-decoration:none;transition:border-color 250ms,box-shadow 250ms}
.cl-certs .ev-cert:hover{border-color:var(--pak-border-input);box-shadow:var(--pak-shadow)}
.cl-certs .ev-cert>div{padding:0;border-radius:var(--pak-r);overflow:hidden;background:var(--pak-surface-2)}
.cl-certs .ev-cert h3{margin:14px 6px 4px;font-size:var(--pak-fs-card-sm);line-height:1.3;color:var(--pak-brand)}
.cl-certs .ev-cert p{min-height:0;margin:0 6px;font-size:var(--pak-fs-label);line-height:1.5;color:var(--pak-muted)}
.cl-certs .ev-cert>span{display:inline-flex;align-items:center;gap:6px;margin:10px 6px 0;font-size:var(--pak-fs-label);font-weight:700;color:var(--pak-link)}
.cl-certs .ev-cert>span .icon{width:16px;height:16px}
/* Kết: PDF và phòng dự án */
.cl-end-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cl-card{padding:clamp(24px,3vw,34px);border:1px solid var(--pak-border);border-radius:var(--pak-r-lg);background:var(--pak-page)}
.cl-card-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:50%;background:var(--pak-action-tint);color:var(--pak-brand)}
.cl-card-icon .icon{width:22px;height:22px}
.cl-card h3{margin:0 0 10px;font-size:var(--pak-fs-card);font-weight:700;color:var(--pak-brand)}
.cl-card p{margin:0 0 8px;color:var(--pak-muted)}
.cl-card .cl-actions{margin-top:20px}
.cl-card-pdf{background:var(--pak-brand);color:var(--pak-on-dark)}
.cl-card-pdf h3,.cl-card-pdf .cl-tel{color:var(--pak-on-dark)}
.cl-card-pdf p{color:var(--pak-on-dark-muted)}
.cl-card-pdf .cl-card-icon{background:rgb(255 255 255 / 10%);color:var(--pak-action)}
.cl-card-pdf .btn.secondary{color:var(--pak-on-dark);border-color:rgb(255 255 255 / 40%);background:transparent}
.cl-card-pdf .btn.secondary:hover{background:rgb(255 255 255 / 10%)}
.cl-tel{font-size:var(--pak-fs-panel);font-weight:700;color:var(--pak-brand);text-decoration:none}
.cl-source{max-width:900px;margin:30px 0 0;font-size:var(--pak-fs-caption);line-height:1.6;color:var(--pak-muted)}
@media (max-width:980px){
  .cl-route,.cl-process,.cl-end-grid{grid-template-columns:1fr}
  .cl-route-photo{min-height:220px}
}
@media (max-width:767px){
  .cl-crumb{padding-top:10px}
  .cl-title .wrap{padding-top:22px;padding-bottom:28px}
  .cl-title h1{max-width:none}
  .cl-brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-brands a{min-height:100px;padding:14px 8px}
  .cl-brands img{height:30px}
  .cl-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cl-project span{padding:10px 12px 12px}
  .sm-ctl button{height:34px;padding:0 11px}
}

/* --- Sân khấu phim (mang từ design/video-ho-so-nang-luc/assets/mach-ngam.css; tọa độ 1600×900 thu phóng bằng --mn-k) --- */
.mn-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#050d14;isolation:isolate}
.mn-stage{position:absolute;left:0;top:0;width:1600px;height:900px;overflow:hidden;transform-origin:0 0;transform:scale(var(--mn-k,1));font-family:var(--pak-font);color:#fff;background:#050d14;-webkit-font-smoothing:antialiased;user-select:none;pointer-events:none}
.mn-stage *{box-sizing:border-box}
.mn-sc{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.mn-cam{position:absolute;inset:0;will-change:transform,filter}
.ph-vid{position:absolute;inset:0;transform-origin:0 0}
.ph-vid img,.ph-vid video{position:absolute;left:0;top:0;display:block;width:1600px;height:900px;object-fit:fill}
.mn-dark{position:absolute;inset:0;opacity:0}
.mn-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(0deg,rgb(4 14 22/.9) 0%,rgb(4 14 22/.55) 26%,rgb(4 14 22/0) 54%),linear-gradient(90deg,rgb(4 14 22/.5) 0%,rgb(4 14 22/0) 50%)}
.mn-shade.top{background:linear-gradient(180deg,rgb(4 14 22/.82) 0%,rgb(4 14 22/.4) 30%,rgb(4 14 22/0) 56%),linear-gradient(90deg,rgb(4 14 22/.45) 0%,rgb(4 14 22/0) 55%)}
.mn-svg{position:absolute;inset:0;width:1600px;height:900px;overflow:visible}
.mn-iris{fill:none;stroke:#ffcb05;stroke-linejoin:miter}
.mn-iris.a{stroke-width:3}
.mn-iris.b{stroke-width:1.4;opacity:.7}
.mn-lead{stroke:rgb(255 255 255/.75);stroke-width:1.4;fill:none}
.mn-pin{fill:#ffcb05;stroke:#0b2232;stroke-width:1.5}
.mn-pin.b{fill:#5cc8ff}
.mn-tag{position:absolute;display:grid;gap:1px;padding:calc(8px * var(--ui)) calc(14px * var(--ui)) calc(9px * var(--ui)) calc(13px * var(--ui));border:1px solid rgb(255 255 255/.2);border-radius:8px;background:rgb(7 22 33/.84);box-shadow:0 8px 24px rgb(2 10 16/.45);white-space:nowrap;opacity:0;color:#fff;text-decoration:none;pointer-events:auto;will-change:transform,opacity}
.mn-tag:hover,.mn-tag:focus-visible{border-color:#ffcb05;background:rgb(7 22 33/.96)}
.mn-tag b{font-size:calc(20px * var(--ui));font-weight:600;line-height:1.3}
.mn-tag span{font-size:calc(16.5px * var(--ui));font-weight:600;line-height:1.35;color:#ffcb05}
.mn-tag.b span{color:#7fdcff}
.mn-tally{position:absolute;right:110px;bottom:calc(56px + var(--sb));display:flex;align-items:center;gap:calc(11px * var(--ui));padding:calc(10px * var(--ui)) calc(16px * var(--ui)) calc(10px * var(--ui)) calc(18px * var(--ui));border:1px solid rgb(255 255 255/.18);border-radius:8px;background:rgb(7 22 33/.78);opacity:0}
.mn-tally i{display:block;width:calc(13px * var(--ui));height:calc(13px * var(--ui));border:1.6px solid rgb(255 255 255/.5);transform:rotate(45deg)}
.mn-tally i.on{border-color:#ffcb05;background:#ffcb05}
.mn-tally b{margin-left:8px;font-size:calc(21px * var(--ui));font-weight:700;color:#ffcb05;font-variant-numeric:tabular-nums}
.mn-tally span{font-size:calc(16px * var(--ui));font-weight:600;color:#d8e4eb}
.mn-cap{position:absolute;left:110px;max-width:860px;opacity:0;will-change:transform,opacity}
.mn-stage{--sb:0px;--ui:1} /* --ui: phóng nhãn và số liệu khi khung phim nhỏ (màn hình laptop thấp), ho-so-nang-luc.js đặt */
.mn-cap.bl{bottom:calc(112px + var(--sb))}
.mn-cap.tl{top:104px}
.mn-cap.c{left:0;right:0;top:calc(50% - var(--sb) / 2);max-width:none;text-align:center;transform:translateY(-50%)}
.mn-cap.c p{font-size:66px}
.mn-cap p{margin:0;font-size:60px;font-weight:700;line-height:1.1;letter-spacing:-.022em;text-shadow:0 2px 18px rgb(2 10 16/.55)}
.mn-cap p em{font-style:normal;color:#ffcb05}
.mn-cap.s p{font-size:50px}
.mn-note{position:absolute;right:28px;top:22px;padding:calc(4px * var(--ui)) calc(11px * var(--ui));border-radius:13px;background:rgb(7 22 33/.7);font-size:calc(14px * var(--ui));font-weight:600;letter-spacing:.04em;color:#b9c9d4;opacity:0}
.mn-count{position:absolute;left:110px;top:56px;display:flex;align-items:flex-end;gap:20px;opacity:0}
.mn-count strong{font-size:132px;font-weight:700;line-height:.86;letter-spacing:-.04em;color:#ffcb05;font-variant-numeric:tabular-nums}
.mn-count span{padding-bottom:8px;font-size:25px;font-weight:600;line-height:1.3;color:#e9f0f4}
.mn-stats{position:absolute;right:110px;top:72px;display:flex;gap:10px;opacity:0}
.mn-stats i{padding:calc(9px * var(--ui)) calc(15px * var(--ui));border:1px solid rgb(255 255 255/.2);border-radius:8px;background:rgb(7 22 33/.78);font-style:normal;font-size:calc(17.5px * var(--ui));font-weight:600;color:#d8e4eb}
.mn-stats i b{color:#ffcb05}
.mn-groups{position:absolute;right:110px;bottom:calc(58px + var(--sb));display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(680px * var(--ui))}
.mn-groups i{display:inline-flex;align-items:baseline;gap:8px;padding:calc(8px * var(--ui)) calc(14px * var(--ui));border:1px solid rgb(255 255 255/.2);border-radius:8px;background:rgb(7 22 33/.82);font-style:normal;font-size:calc(17.5px * var(--ui));font-weight:600;color:#d8e4eb;opacity:0}
.mn-groups i b{font-size:calc(25px * var(--ui));color:#ffcb05;font-variant-numeric:tabular-nums}
.mn-proj{position:absolute;display:flex;align-items:center;gap:10px;height:50px;padding:0 15px 0 5px;border:1px solid rgb(255 255 255/.22);border-radius:8px;background:rgb(7 22 33/.86);box-shadow:0 8px 22px rgb(2 10 16/.5);font-size:17px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,-100%)}
.mn-proj img{width:64px;height:40px;border-radius:5px;object-fit:cover}
.mn-proj::after{content:"";position:absolute;left:50%;bottom:-9px;width:2px;height:8px;margin-left:-1px;background:#ffcb05}
.mn-end{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 90% at 50% 40%,rgb(13 40 58/.92) 0%,rgb(5 16 24/.98) 78%)}
.mn-endtx{position:absolute;inset:0;text-align:center}
.mn-endsvg,.mn-endtx{transform-origin:800px 462px;transform:scale(var(--ui))} /* khung kết phóng cùng nhãn khi khung phim nhỏ */
.mn-endtx .w{position:absolute;left:0;right:0;top:470px;font-size:52px;font-weight:700;letter-spacing:.07em;line-height:1;opacity:0}
.mn-endtx .m{position:absolute;left:0;right:0;top:546px;font-size:28px;font-weight:600;color:#ffcb05;opacity:0}
.mn-endtx .s{position:absolute;left:0;right:0;top:602px;font-size:21px;font-weight:500;color:#b9c9d4;opacity:0}
.mn-endtx .c{position:absolute;left:0;right:0;top:690px;display:flex;justify-content:center;gap:14px;opacity:0}
.mn-btn{display:inline-flex;align-items:center;gap:10px;height:62px;padding:0 26px;border-radius:8px;font-size:19px;font-weight:700;white-space:nowrap;text-decoration:none;pointer-events:auto}
.mn-btn.y{background:#ffcb05;color:#12354a}
.mn-btn.y small{font-size:14.5px;font-weight:500;opacity:.8}
.mn-btn.g{border:1px solid rgb(255 255 255/.42);background:rgb(16 45 64/.5);color:#fff}
.mn-btn:hover{filter:brightness(1.06)}
/* Trang giải pháp (Cung ứng dự án): phân lớp nền theo Design System — trắng chủ đạo, #F5F8FA phân lớp section, xanh đậm cho vùng B2B.
   Đầu trang #F5F8FA như các trang con khác; sản phẩm #F5F8FA; khối báo giá xanh đậm như khối BOQ trang chủ; "Các giải pháp khác" #F5F8FA.
   Các khối nằm trong .wrap nên nền được kéo tràn hết bề ngang bằng border-image (không đổi bố cục, không làm tràn ngang). */
.ev-industry-page>.wrap>.breadcrumb{border-image:conic-gradient(var(--pak-surface) 0 0) fill 0//0 100vmax}
.ev-industry-page .ev-solution-hero{padding:30px 0 56px;border-image:linear-gradient(var(--pak-surface) calc(100% - 1px),var(--pak-border) 0) fill 0//0 100vmax}
.ev-industry-page .so-products{border-image:conic-gradient(var(--pak-surface) 0 0) fill 0//0 100vmax}
.ev-industry-page .so-products .pk-line:hover{background:var(--pak-page);box-shadow:var(--pak-shadow)}
.ev-industry-page .ev-solution-needs{border:0}
.ev-industry-page .ev-boq-layout{color:var(--pak-on-dark-muted);border-image:conic-gradient(var(--pak-brand-deep) 0 0) fill 0//0 100vmax}
.ev-industry-page .ev-boq-layout>div{--pak-focus:var(--pak-action)}
.ev-industry-page .ev-boq-layout>div h2{color:var(--pak-on-dark)}
.ev-industry-page .ev-boq-layout>div>p{color:var(--pak-on-dark-muted)}
.ev-industry-page .ev-boq-layout .eyebrow{color:var(--pak-action)}
.ev-industry-page .ev-boq-layout>div .text-link{color:var(--pak-on-dark);text-decoration:underline;text-decoration-color:rgb(255 255 255 / 45%);text-underline-offset:4px}
.ev-industry-page .ev-boq-layout>div .text-link:hover{text-decoration-color:currentColor}
.ev-industry-page .ev-boq-layout .pr-form{color:var(--pak-text);box-shadow:0 30px 60px -20px rgb(0 0 0 / 45%)}
.ev-industry-page .ev-boq-layout .pr-form h2{color:var(--pak-text)}
.ev-industry-page .ev-cross{background:var(--pak-surface)}
@media (max-width:767px){.ev-industry-page .ev-solution-hero{padding:24px 0 38px}}