/* ==========================================================================
   EPS Minh Phú — thành phần giao diện (SaaS glass, chỉ chế độ sáng)
   ========================================================================== */

/* Mặt kính dùng chung. Ba lớp: nền mờ, viền sáng, gờ highlight phía trên. */
.glass,
.hero__art figure,
.statbar,
.bento > article,
.partners li,
.spec,
.cta,
.form,
.info-list > div,
.product__media {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* ------------------------------------------------------------------ nút -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--teal-500), var(--teal-700));
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}

.btn .ico {
  transition: transform var(--dur) var(--ease);
}

.btn:hover {
  filter: saturate(1.1) brightness(1.04);
  box-shadow: 0 14px 38px -12px rgba(0, 120, 137, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.btn:hover .ico {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

/* Nút phụ: kính trong suốt */
.btn--ghost {
  background: var(--glass-bg);
  color: var(--fg);
  border-color: var(--glass-bd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

.btn--ghost:hover {
  color: var(--accent);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-hi);
  filter: none;
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: none;
}

.btn--sm {
  padding: 0.62rem 1.05rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--accent);
  transition: gap var(--dur-fast) var(--ease);
}

.link-arrow:hover {
  gap: 0.75rem;
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 0.85rem;
  padding-bottom: 0.35rem;
  background: transparent;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 62px;
  padding-inline: 0.85rem 0.85rem;
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck .site-header__bar {
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  padding-left: 0.35rem;
}

.brand img {
  width: 128px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}

.nav {
  display: none;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav a {
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.nav a:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.65);
}

.nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px var(--glass-bd);
}

.header-cta {
  display: none;
}

@media (min-width: 1000px) {
  .nav,
  .header-cta {
    display: block;
  }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem)
    clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }
}

.hero h1 {
  margin-block: 1.15rem 1.2rem;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--teal-600), var(--teal-500) 60%, var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero__art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

.hero__art figure {
  margin: 0;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.hero__art figure:hover {
  transform: translateY(-5px);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-hi);
}

.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(0.85rem, 0.6rem + 0.9vw, 1.5rem);
  mix-blend-mode: multiply;
}

.hero__art .a1 {
  grid-row: span 2;
  aspect-ratio: 4 / 5.1;
}

.hero__art .a2,
.hero__art .a3 {
  aspect-ratio: 4 / 2.45;
}

.hero__art .a2 {
  margin-top: clamp(1rem, 0.6rem + 2vw, 2.5rem);
}

/* ------------------------------------------------------------- dải số --- */

.statbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

@media (min-width: 760px) {
  .statbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.statbar > div {
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem) clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.statbar > div:nth-child(2n) {
  border-right: 0;
}

.statbar > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

@media (min-width: 760px) {
  .statbar > div:nth-child(2n) {
    border-right: 1px solid var(--line);
  }

  .statbar > div:last-child {
    border-right: 0;
  }

  .statbar > div {
    border-bottom: 0;
  }
}

.statbar dt {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.4;
}

.statbar dd {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 0.3rem;
}

/* --------------------------------------------------------------- bento -- */

.bento {
  display: grid;
  gap: var(--gap);
}

/* Duoi 1000px: 2 the moi hang, o cuoi chiem ca hang. Luoi 6 cot chi bat khi
   that su du rong, boi o ~760px moi cot con ~150px, tieu de vo bon dong. */
@media (min-width: 340px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-6 {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .b-1,
  .b-2 {
    grid-column: span 3;
  }

  .b-3,
  .b-4,
  .b-5 {
    grid-column: span 2;
  }

  .b-6 {
    grid-column: span 6;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  .b-6 .b-media {
    aspect-ratio: 16 / 6;
    order: 2;
  }
}

/* The: khung anh tren, chu duoi, cach nhau mot khoang ro rang de tieu de
   khong dinh vao anh. align-content:start de tieu de cac the cung hang
   bat dau o cung mot do cao. */
.bento > article {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  align-content: start;
  padding: clamp(0.75rem, 0.5rem + 1vw, 2rem);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Vet sang di theo con tro, toa do do main.js ghi vao --mx/--my */
.bento > article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.55),
    transparent 60%
  );
  transition: opacity var(--dur) var(--ease);
}

.bento > article:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-hi);
}

.bento > article:hover::after {
  opacity: 1;
}

.bento > article > * {
  position: relative;
  z-index: 1;
}

.bento h3 {
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.7rem);
  margin-bottom: 0.4rem;
}

.bento p {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Khung anh: ty le co dinh theo hang de anh dong nhat, anh luon nam gon
   ben trong (contain) va can giua, khong bao gio trai ra ngoai khung. */
.b-media {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.b-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem);
  mix-blend-mode: multiply;
  transition: transform var(--dur-slow) var(--ease);
}

.bento > article:hover .b-media img {
  transform: scale(1.045);
}

.b-1 .b-media,
.b-2 .b-media {
  aspect-ratio: 16 / 9;
}

.b-3 .b-media,
.b-4 .b-media,
.b-5 .b-media {
  aspect-ratio: 4 / 3;
}

.b-6 .b-media {
  aspect-ratio: 16 / 7;
}

/* Một ô nền tối để lưới kính không phẳng lì */
.bento .is-dark {
  background: linear-gradient(160deg, var(--teal-900), var(--teal-950));
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--fg-invert);
}

.bento .is-dark h3 {
  color: #fff;
}

.bento .is-dark p {
  color: var(--fg-invert-soft);
}

.bento .is-dark::after {
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    rgba(124, 203, 216, 0.22),
    transparent 60%
  );
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-muted);
}

.is-dark .tag {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-invert-soft);
}

a.tag {
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

a.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------- khối tiêu chí -- */

.stance {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 920px) {
  .stance {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(3rem, 2rem + 4vw, 5.5rem);
  }
}

.stance__list {
  display: grid;
  gap: var(--gap);
}

.stance__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition: transform var(--dur) var(--ease);
}

.stance__list li:hover {
  transform: translateX(4px);
}

.stance__list .ico {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--teal-500), var(--teal-700));
  color: #fff;
  box-shadow: var(--glow);
}

.stance__list h3 {
  font-size: var(--text-lg);
  margin-bottom: 0.35rem;
}

.stance__list p {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------------------------------------------------- khối tối bo góc --- */

.slab {
  position: relative;
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--teal-900), var(--teal-950) 70%);
  color: var(--fg-invert);
  overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(4, 38, 45, 0.75);
}

.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  background-size: 76px 132px;
  opacity: 0.5;
  mask-image: radial-gradient(80% 75% at 12% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 75% at 12% 0%, #000, transparent 72%);
  pointer-events: none;
}

.slab .wrap {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.slab h2,
.slab h3 {
  color: #fff;
}

.slab p,
.slab .section-head p {
  color: var(--fg-invert-soft);
}

.slab .label {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--accent-on-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.slab__grid {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  align-items: start;
}

@media (min-width: 940px) {
  .slab__grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  }
}

/* ---------------------------------------------------------- bảng thông số */

/* Chinh khoi cuon ngang o day, khong phai o .table-scroll ben ngoai: .spec
   bo goc nen phai clip, ma clip bang overflow:hidden thi phan tran bi cat
   truoc khi container ngoai kip thay -> khong bao gio cuon duoc. */
.spec {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Bang du lieu nhieu cot (co thead): tu gian rong roi cuon ngang.
   Bang khoa-gia tri 2 cot (khong thead): vua khung, chu tu xuong dong. */
.spec table {
  width: 100%;
}

.spec:has(thead) table {
  width: max-content;
  min-width: 100%;
}

.spec table:not(:has(thead)) th {
  white-space: nowrap;
  vertical-align: top;
}

/* O gia tri trong bang khoa-gia tri duoc phep xuong dong, ke ca o so */
.spec table:not(:has(thead)) td.n {
  white-space: normal;
}

.spec::-webkit-scrollbar {
  height: 8px;
}

.spec::-webkit-scrollbar-thumb {
  border-radius: var(--r-full);
  background: var(--line-strong);
}

.slab .spec::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
}

.spec table {
  font-size: var(--text-sm);
}

.spec caption {
  text-align: left;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.spec th,
.spec td {
  padding: 0.85rem 1.15rem;
  text-align: left;
  vertical-align: top;
}

.spec tbody tr + tr th,
.spec tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.spec thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid var(--line);
}

.spec tbody tr:hover {
  background: rgba(255, 255, 255, 0.45);
}

.spec td.n,
.spec th.n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spec tfoot td {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid var(--line-strong);
}

/* Bảng đặt trên nền tối */
.slab .spec {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.slab .spec caption,
.slab .spec th,
.slab .spec td {
  color: var(--fg-invert);
}

.slab .spec caption,
.slab .spec thead th,
.slab .spec tbody tr + tr th,
.slab .spec tbody tr + tr td,
.slab .spec tfoot td {
  border-color: rgba(255, 255, 255, 0.14);
}

.slab .spec thead th {
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent-on-dark);
}

.slab .spec tbody tr:hover,
.slab .spec tfoot td {
  background: rgba(255, 255, 255, 0.08);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Man hep thi noi ro bang con cot phia sau, khong ai doan duoc bang co the vuot */
@media (max-width: 760px) {
  .table-scroll::after {
    content: "Vuốt ngang để xem đủ cột";
    display: block;
    margin-top: 0.6rem;
    font-size: var(--text-xs);
    color: var(--fg-muted);
  }

  .slab .table-scroll::after {
    color: var(--fg-invert-soft);
  }
}

/* -------------------------------------------------------- dòng quy trình */

.timeline {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 700px) {
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.timeline li {
  position: relative;
  padding: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
  border-radius: var(--r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition: transform var(--dur) var(--ease);
}

.timeline li:hover {
  transform: translateY(-4px);
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 0;
  width: 3px;
  height: 26px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--teal-500), var(--teal-700));
}

.timeline h3 {
  font-size: var(--text-lg);
  margin-bottom: 0.45rem;
}

.timeline p {
  color: var(--fg-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* -------------------------------------------------------------- đối tác -- */

.partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 780px) {
  .partners {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.partners li {
  display: grid;
  place-items: center;
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem) 1rem;
  transition: transform var(--dur) var(--ease);
}

.partners li:hover {
  transform: translateY(-3px);
}

/* Logo để nguyên màu thương hiệu, không lọc xám: đây là phần bảo chứng nên
   để khách nhận ra ngay, không cần rê chuột */
.partners img {
  width: 100%;
  max-width: 140px;
  transition: transform var(--dur) var(--ease);
}

.partners li:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------------ CTA -- */

.cta {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 880px) {
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--teal-600),
    var(--teal-400) 55%,
    transparent
  );
}

.cta p {
  color: var(--fg-soft);
  max-width: 52ch;
}

/* --------------------------------------------------------------- trang --- */

.page-head {
  position: relative;
  padding-block: clamp(2rem, 1.6rem + 2.2vw, 3.25rem)
    clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-bottom: 1.1rem;
}

.crumbs ol {
  display: contents;
}

.crumbs a:hover {
  color: var(--accent);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--line-strong);
}

.prose {
  max-width: 68ch;
  display: grid;
  gap: 1.1rem;
}

.prose h2 {
  margin-top: 1.25rem;
}

.prose p,
.prose li {
  color: var(--fg-soft);
}

.prose ul {
  display: grid;
  gap: 0.6rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.55rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.slab .prose li,
.slab .prose p {
  color: var(--fg-invert-soft);
}

.slab .prose li::before {
  background: var(--accent-on-dark);
}

/* ------------------------------------------------------ sản phẩm chi tiết */

.product {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 1.4rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .product--flip .product__media {
    order: 2;
  }
}

.product__media {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.product__media img {
  mix-blend-mode: multiply;
}

.product__media--tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  place-items: stretch;
}

.product__media--tiles img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 0.4rem;
}

.product__body {
  display: grid;
  gap: 1.05rem;
  align-content: start;
}

.product__body h2 {
  font-size: var(--text-h3);
}

.product__body p {
  color: var(--fg-soft);
}

.specs-inline {
  display: grid;
  gap: 1px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 0.35rem;
  background: var(--line);
  border: 1px solid var(--glass-bd);
}

@media (min-width: 520px) {
  .specs-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.specs-inline div {
  background: var(--glass-bg-strong);
  padding: 0.85rem 1rem;
}

.specs-inline dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.specs-inline dd {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-top: 0.15rem;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 700px) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .tile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.tile-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 0.85rem;
  border-radius: var(--r-sm);
  background: var(--photo-plate);
  border: 1px solid var(--glass-bd);
  mix-blend-mode: multiply;
  transition: transform var(--dur) var(--ease);
}

.tile-grid li:hover img {
  transform: translateY(-3px) scale(1.03);
}

/* ------------------------------------------------------------- liên hệ --- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.info-list {
  display: grid;
  gap: 0.75rem;
}

.info-list > div {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.05rem 1.25rem;
}

.info-list .ico {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--teal-500), var(--teal-700));
  color: #fff;
  box-shadow: var(--glow);
}

.info-list dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.info-list dd {
  font-weight: 600;
  margin-top: 0.1rem;
}

.info-list dd a:hover {
  color: var(--accent);
}

.todo {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px dashed var(--warn-line);
  border-radius: var(--r-full);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.form {
  display: grid;
  gap: 1.05rem;
  padding: clamp(1.35rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--r-lg);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field label span {
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-muted);
}

.field textarea {
  min-height: 124px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 120, 137, 0.12);
}

.field-row {
  display: grid;
  gap: 1.05rem;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__note {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.form__note code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-soft);
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: linear-gradient(160deg, var(--teal-900), var(--teal-950) 65%);
  color: var(--fg-invert-soft);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem) 1.75rem;
}

.site-footer h2 {
  color: #fff;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

.footer-grid ul {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: var(--text-sm);
}

.footer-grid a:hover {
  color: #fff;
}

.site-footer p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.site-footer strong {
  color: #fff;
}

.site-footer__brand img {
  width: 140px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.94;
  margin-bottom: 1rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------ hành động nhanh -- */

.quick-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: grid;
  gap: 0.6rem;
}

.quick-actions a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--teal-500), var(--teal-700));
  color: #fff;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.quick-actions a:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(0, 120, 137, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.quick-actions .zalo {
  background: linear-gradient(180deg, #2b86ff, #0058d6);
  box-shadow: 0 10px 30px -10px rgba(0, 104, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.quick-actions .ico {
  width: 22px;
  height: 22px;
}

.quick-actions .up {
  background: var(--glass-bg-strong);
  color: var(--fg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.quick-actions .up.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 1000px) {
  .quick-actions {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* --------------------------------------------------- khung chứa ảnh ------
   Ảnh sản phẩm nền trắng dùng mix-blend-mode: multiply, nên khung phải là
   nền đặc. Đặt trên kính trong suốt thì aurora ăn xuyên qua và ảnh bạc màu. */

.hero__art figure,
.product__media,
.b-media,
.tile-grid img {
  background: var(--plate-gradient);
}

/* ------------------------------------------- dải đối tác ngay dưới hero --
   Ở vị trí này khối chỉ đóng vai bảo chứng, nên tiêu đề thu nhỏ lại để không
   giành chỗ với tiêu đề chính của trang. */

.section--strip {
  padding-block: 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem);
}

.strip-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-bottom: clamp(0.85rem, 0.7rem + 0.5vw, 1.25rem);
}

.section--strip .partners img {
  max-width: 118px;
}

.section--strip .partners li {
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem) 0.85rem;
}

/* ==========================================================================
   Chuyển động
   Mỗi chuyển động có một việc: dẫn mắt vào hero theo thứ tự, cho ảnh sản
   phẩm có chiều sâu, cho dải logo thể hiện độ rộng khách hàng, và phản hồi
   khi trỏ vào nút. Tất cả chỉ dùng transform và opacity.
   ========================================================================== */

/* Hero vào theo thứ tự: nhãn, tiêu đề, mô tả, nút */
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero .label,
.hero h1,
.hero .lede,
.hero__actions {
  animation: rise 0.7s var(--ease) backwards;
}

.hero h1 {
  animation-delay: 0.08s;
}

.hero .lede {
  animation-delay: 0.16s;
}

.hero__actions {
  animation-delay: 0.24s;
}

/* Ba khung ảnh hiện lệch nhau; fill "backwards" để sau khi xong, hover vẫn
   dùng được transform của riêng nó */
.hero__art figure {
  animation: rise 0.8s var(--ease) backwards;
}

.hero__art .a1 {
  animation-delay: 0.22s;
}

.hero__art .a2 {
  animation-delay: 0.36s;
}

.hero__art .a3 {
  animation-delay: 0.5s;
}

/* Sau khi vào, ảnh lơ lửng rất nhẹ; animate trên <picture> để không đụng
   transform hover của khung */

.hero__art picture {
  height: 100%;
  will-change: transform;
}

.hero__art .a2 picture {
  animation-duration: 8.2s;
  animation-delay: -2.6s;
}

/* Cuộn qua hero rồi thì ảnh không cần lơ lửng nữa; tab ẩn cũng dừng */
.hero__art.is-offscreen picture,
html[data-motion="paused"] .hero__art picture {
  animation-play-state: paused;
}

.hero__art .a3 picture {
  animation-duration: 6.6s;
  animation-delay: -4.4s;
}

/* Vệt sáng quét qua nút khi trỏ vào */
.btn {
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 65%
  );
  transform: translate3d(-130%, 0, 0);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

.btn:hover::after {
  transform: translate3d(130%, 0, 0);
}

/* Dải logo chạy ngang dưới hero. Ba bản sao nối tiếp, mỗi bản tự mang khoảng
   cách ở cuối nên dịch đúng một phần ba là khớp vòng lặp. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track,
.marquee.is-offscreen .marquee__track,
html[data-motion="paused"] .marquee__track {
  animation-play-state: paused;
}

.marquee .partners {
  display: flex;
  flex: none;
  gap: var(--gap);
  padding-right: var(--gap);
}

.marquee .partners li {
  width: 200px;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-33.3333%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .label,
  .hero h1,
  .hero .lede,
  .hero__actions,
  .hero__art figure,
  .hero__art picture,
  .marquee__track {
    animation: none !important;
  }

  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .marquee__track {
    width: auto;
  }

  .marquee .partners {
    flex-wrap: wrap;
    padding-right: 0;
  }

  .marquee__copy {
    display: none;
  }
}

/* Ảnh chi tiết sản phẩm: giới hạn bề rộng để ảnh nhỏ không bị kéo quá mờ,
   ảnh lớn không choán hết khung */
.product__media > picture,
.product__media > picture img {
  width: min(100%, 400px);
}

/* ------------------------------------------- dock di động dưới đáy ------
   Dưới 1000px, menu rời khỏi header và xuống thanh nổi dưới đáy: hamburger,
   nút chính, nút gọi. Bấm hamburger, sheet danh sách trang trượt lên ngay
   trên thanh. Trên 1000px dock ẩn, nav ngang trong header lo phần này. */

.dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 95;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.dock__bar,
.dock__sheet {
  pointer-events: auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 20px 44px -20px rgba(4, 38, 45, 0.5), inset 0 1px 0 var(--glass-hi);
}

.dock__bar {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-full);
}

.dock__menu,
.dock__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.dock__menu:active,
.dock__call:active,
.dock__primary:active {
  transform: scale(0.97);
}

.dock__menu {
  flex: 0 0 48px;
  width: 48px;
  flex-direction: column;
  gap: 5px;
  padding: 0 14px;
}

.dock__menu span {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.dock__menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.dock__menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.dock__menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.dock__primary {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--teal-500), var(--teal-700));
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur-fast) var(--ease);
}

.dock__call {
  flex: 0 0 auto;
  padding: 0 1rem;
}

.dock__call .ico {
  width: 1.1em;
  height: 1.1em;
}

/* Sheet: trượt lên từ thanh, đóng mở bằng data-open */
.dock__sheet {
  display: grid;
  gap: 2px;
  padding: 8px 18px 12px;
  border-radius: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  transform-origin: 50% 100%;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.dock[data-open="true"] .dock__sheet {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.dock__sheet a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}

.dock__sheet a:last-child {
  border-bottom: 0;
}

.dock__sheet a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

.dock__zalo {
  color: #0058d6 !important;
}

.dock__zalo .ico {
  width: 1.3em;
  height: 1.3em;
}

/* Lớp mờ phía sau để chạm ra ngoài là đóng */
.dock__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  border: 0;
  padding: 0;
  background: rgba(4, 38, 45, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.dock[data-open="true"] .dock__scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (max-width: 999px) {
  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Header cuộn đi cùng trang: dock dưới đáy đã lo phần điều hướng, giữ
     thêm thanh dính trên đỉnh chỉ tổ ăn mất chiều cao màn hình */
  .site-header {
    position: static;
  }

  /* Dock đã có nút gọi, các nút tròn nổi nhường chỗ */
  .quick-actions {
    display: none;
  }
}

@media (min-width: 1000px) {
  .dock {
    display: none;
  }
}

/* --------------------------------------------- nut bao gia theo kho man --
   Duoi 1000px khach bam la mo thang chat Zalo, tu 1000px tro len thi vao
   trang lien he co form. Mot the <a> khong doi duoc href theo kho man nen
   dung hai the, CSS an bot mot cai. */

.btn--quote-zalo {
  display: none;
}

@media (max-width: 999px) {
  .btn--quote-form {
    display: none;
  }

  .btn--quote-zalo {
    display: inline-flex;
  }
}

/* ------------------------------------------ mobile: vung cham va co chu --
   Duoi 1000px: moi link trong footer, breadcrumb, danh sach lien he va
   the nhan nhay muc phai cao it nhat 44px de ngon tay bam trung. Nhan mono
   khong duoc nho hon 12px. */
@media (max-width: 999px) {
  .footer-grid ul {
    gap: 0;
  }

  .footer-grid ul a,
  .footer-grid ul li {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .crumbs a,
  .crumbs li[aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .info-list dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .brand {
    min-height: 44px;
  }

  a.tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.9rem;
  }

  .label,
  .tag,
  .spec thead th,
  .specs-inline dt,
  .info-list dt,
  .statbar dt,
  .todo,
  .form__note {
    font-size: 0.78rem;
  }

  .crumbs {
    font-size: 0.8rem;
  }
}