/*! @author Trần Thành (Tran Thanh) — labcare.com.vn · TT-LBC-2026 */

.detail-hero {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--line);
}
.detail-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.detail-hero h1 {
  font-size: var(--fs-9);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 600;
  max-width: 22ch;
}
.detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}

.split {
  display: grid;
  
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding-block: var(--s-10);
}
.split__main, .split__aside { min-width: 0; }
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
}

.split__main {
  display: grid;
  
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
  align-content: start;
}
.split__main > * { min-width: 0; }

.section-block { scroll-margin-top: 92px; }
.section-block__lbl {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.section-block__lbl::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--line-strong);
}
.section-block h2 {
  font-size: var(--fs-8);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-7);
  max-width: 24ch;
}
.section-block__lead {
  font-size: var(--fs-6);
  line-height: 1.6;
  color: var(--text);
  max-width: 68ch;
  margin: 0 0 var(--s-6);
  font-weight: 500;
}
.section-block p {
  font-size: var(--fs-5);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 0 var(--s-5);
}
.section-block p + p { margin-top: 0; }

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.gallery__main {
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-card);
}
.gallery__main .ph { position: absolute; inset: 0; border-radius: 0; }
.gallery__main .ph::after { border-radius: 0; }
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}
.gallery__thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-card);
}
.gallery__thumb.is-active { border-color: var(--text); }
.gallery__thumb .ph { position: absolute; inset: 0; border-radius: 0; }
.gallery__thumb .ph::after { display: none; }
.gallery__thumb .ph::before { background-size: 18px 18px; }
.gallery__thumb .ph__inner { padding: 4px; }
.gallery__thumb .ph__label { font-size: var(--fs-1); }
.gallery__thumb .ph__ratio { display: none; }

.spec-table {
  border-top: 1px solid var(--line-strong);
}
.spec-table > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  gap: var(--s-5);
}
.spec-table dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.spec-table dd {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-4);
  color: var(--text);
  font-weight: 500;
}
@media (max-width: 767px) {
  .spec-table > div { grid-template-columns: 1fr; gap: 4px; }
}

.split__aside {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: var(--s-5);
  height: fit-content;
}

.aside-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-7);
}
.aside-card__big {
  font-family: var(--ff-display);
  font-size: var(--fs-9);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-3);
}
.aside-card__big small { font-family: var(--ff-mono); font-size: var(--fs-2); color: var(--text-mute); font-weight: 400; margin-left: 4px; letter-spacing: 0; }
.aside-card__lbl {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.aside-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.aside-quick > div { display: grid; gap: 4px; }
.aside-quick dt { font-family: var(--ff-mono); font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.aside-quick dd { margin: 0; font-family: var(--ff-mono); font-size: var(--fs-4); font-weight: 500; }

.aside-cta {
  display: grid;
  gap: var(--s-2);
}
.aside-cta .btn { width: 100%; }

.aside-form { display: grid; gap: var(--s-3); }
.aside-form input,
.aside-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-4);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
}
.aside-form input:focus,
.aside-form textarea:focus {
  outline: none;
  border-color: var(--text);
}
.aside-form textarea { min-height: 80px; resize: vertical; }
.aside-form label {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.aside-form .field { display: grid; gap: 4px; }
.aside-form__small {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  color: var(--text-mute);
  text-align: center;
  margin-top: 4px;
}

.page-nav {
  display: flex;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 72px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  z-index: 10;
}
.page-nav::-webkit-scrollbar { display: none; }
.page-nav a { color: inherit; padding-block: 4px; white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.page-nav a:hover { color: var(--text); }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-4);
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table th {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.compare-table thead th {
  font-family: var(--ff-display);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  padding-top: 0;
  padding-bottom: var(--s-5);
}
.compare-table thead th small {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 400;
  margin-top: 4px;
}
.compare-table td { font-family: var(--ff-mono); font-weight: 500; }
.compare-table .is-this { background: var(--bg-card); }
.compare-table .is-this td:first-child { border-left: 2px solid var(--text); }

.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .related { grid-template-columns: 1fr; } }