/* =========================================================================
   mechanical.css — LOP "BAN VE KY THUAT" PHU LEN GIAO DIEN

   Day la file lam nen phong cach co khi cua ca trang. Moi thu o day deu la
   TRANG TRI: bo het file nay di thi trang van chay, chi mat chat ban ve.
   Nho vay muon doi tong (vi du sang phong cach phang) chi can khong nap file.

   Bo manh ghep:
     .bp          nen luoi ban ve
     .corner      bon dau moc goc (nhu khung ban ve CAD)
     .dim         duong ghi kich thuoc co mui ten hai dau
     .tag         nhan chu ky thuat viet hoa, chu may danh
     .hazard      soc canh bao vang-den
     .rivet       hang dinh tan
     .gearset     cum banh rang xoay
     .hatch       mang gach cheo (mat cat)
   ========================================================================= */

/* ── Nen luoi ban ve ────────────────────────────────────────
   HAI lop chong nhau: o nho 12px va o lon 60px — dung nhu giay ke ky thuat.
   Luon di kem mask cho mo dan ra ria, khong thi trang rat "ret". */
.bp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--blue-line-2) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--blue-line-2) var(--hair), transparent var(--hair)),
    linear-gradient(to right,  var(--blue-line)   var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--blue-line)   var(--hair), transparent var(--hair));
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
}
.bp--fade {
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 80%);
}
.bp--top {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
          mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

/* ── Dau moc goc ────────────────────────────────────────────
   Ve bang 4 phan tu con <i> chu khong dung ::before/::after cua chinh khoi:
   nhieu khoi da dung hai pseudo do cho viec khac roi. */
.corner { position: relative; }
.corner > i {
  position: absolute;
  width: var(--tick); height: var(--tick);
  border: var(--hair) solid var(--accent);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease);
}
.corner > i:nth-child(1) { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.corner > i:nth-child(2) { top: -1px;    right: -1px; border-left: 0;  border-bottom: 0; }
.corner > i:nth-child(3) { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.corner > i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
/* Tro chuot vao thi moc dai ra — nhu dang "do" chi tiet. */
.corner:hover > i { opacity: 1; width: calc(var(--tick) + 8px); height: calc(var(--tick) + 8px); }

/* ── Nhan chu ky thuat ─────────────────────────────────────
   Chu may danh, viet hoa, gian chu rong — giong dong ghi chu tren ban ve. */
.tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.tag--accent { color: var(--accent); }
.tag--box {
  display: inline-block;
  border: var(--hair) solid var(--border-strong);
  border-radius: 3px;
  padding: 3px 8px;
}

/* Ma so chi tiet gia — dat o goc anh cho dung chat ban ve. */
.partno {
  position: absolute;
  right: 12px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--text-faint);
  background: var(--glass);
  border: var(--hair) solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  pointer-events: none;
}

/* ── Duong ghi kich thuoc ──────────────────────────────────
   Mot net ngang, hai vach dung o hai dau, chu so o giua. Dung de "do" be
   ngang cua anh trong khoi hero. */
.dim {
  position: relative;
  height: 26px;
  color: var(--steel);
}
.dim::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: var(--hair) solid currentColor;
  opacity: .6;
}
.dim > b,
.dim > u {
  position: absolute;
  top: 50%;
  width: var(--hair); height: 14px;
  margin-top: -7px;
  background: currentColor;
  opacity: .6;
}
.dim > b { left: 0; }
.dim > u { right: 0; }
.dim > span {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
}

/* ── Soc canh bao ──────────────────────────────────────────
   Dung TIET CHE: chi mot vach mong o vien khoi tai ve. Rai khap trang la
   thanh cong truong, khong con la san pham. */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hazard) 0 10px,
    transparent 10px 20px
  );
  opacity: .85;
}
:root[data-theme="dark"] .hazard { opacity: .7; }

/* ── Hang dinh tan ─────────────────────────────────────────
   Cham tron nho, co bong chim — nhin nhu dau dinh tren tam thep. */
.rivets {
  display: flex;
  gap: 14px;
  align-items: center;
  pointer-events: none;
}
.rivets i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .35);
}

/* ── Mang gach cheo (mat cat) ──────────────────────────────
   Dung lam nen cho khoi "truoc khi dung" — mang chua duoc gia cong. */
.hatch {
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch) 0 var(--hair),
    transparent var(--hair) 7px
  );
}

/* ── Cum banh rang ─────────────────────────────────────────
   Hai banh an khop: mot xoay xuoi, mot xoay nguoc. Toc do LE NHAU
   (26s va 20s) cho khong bao gio trung nhip — trung nhip nhin rat gia. */
.gearset { position: relative; color: var(--accent); pointer-events: none; }
.gearset svg { position: absolute; }

/* ── Duong dong tam (center line) ──────────────────────────
   Net gach-cham cua ban ve ky thuat. Dat sau tieu de khoi cho co lop nen. */
.centerline {
  height: var(--hair);
  background-image: repeating-linear-gradient(
    90deg,
    var(--steel) 0 14px,
    transparent 14px 20px,
    var(--steel) 20px 23px,
    transparent 23px 29px
  );
  opacity: .45;
}

/* ── Bang ten ban ve (title block) ─────────────────────────
   Goc duoi ban ve CAD luon co bang ten. Dung o chan trang va duoi hero cho
   "dung bai". */
.titleblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: var(--hair) solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
}
.titleblock > div {
  padding: 10px 14px;
  border-right: var(--hair) solid var(--border);
}
.titleblock > div:last-child { border-right: 0; }
.titleblock dt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.titleblock dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
}

/* ── Phu vao cac manh ghep san co ──────────────────────────
   Vai chinh sua nho cho components.css mang chat co khi hon. Giu o day de
   go file nay ra la ve nguyen ban. */

/* The: goc vuong hon, them net ke doc ben trai nhu ranh may. */
.card { border-radius: 6px; }
.shot, .video, .gallery__item, .lightbox__box { border-radius: 8px; }
.btn { border-radius: 4px; }
.eyebrow {
  border-radius: 3px;
  font-family: var(--font-mono);
  letter-spacing: .16em;
}
.badge { border-radius: 3px; font-family: var(--font-mono); letter-spacing: .08em; }
.icon-btn { border-radius: 5px; }
.brand__mark { border-radius: 5px; }
.step__num { border-radius: 5px; font-family: var(--font-mono); }
.plan__flag { border-radius: 3px; font-family: var(--font-mono); letter-spacing: .1em; }
.totop { border-radius: 5px; }

/* So lieu va gia: dung chu may danh cho ra chat do dac. */
.stat__num, .plan__price b, .dim > span { font-family: var(--font-mono); letter-spacing: -.02em; }
.stat__label { font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }