/**
 * bridge.css — CSS bespoke DUY NHẤT của site (hàng native+css:{class} của conversion map §3). Port từ HTML/assets/css/style.css.
 * Luật (references/style-ownership-and-css-bridge.md):
 *  1. Alias màu kit trên body[class*="elementor-kit-"] (kit khai --e-global-color-* trên .elementor-kit-N, không phải :root).
 *  2. Token ngoài kit (radius, shadow, nhịp section, gutter, chiều cao header) ở :root — copy từ :root nguồn.
 *  3. Shim gutter: padding mặc định của kit chỉ thuộc container top-level.
 *  4. Selector bắc cầu: class nằm trên WRAPPER (.e-con / .elementor-widget-*) → nhắm phần tử thật (.elementor-heading-title, img,
 *     .elementor-button…); không combinator `>` từ container boxed xuống widget; container dùng biến của Elementor (--padding-*, --gap…).
 *  5. Không đè property mà control đã bind trong spec (màu/typography/padding nút…); thứ control không có (grid, pseudo, mask,
 *     min-height, keyframes) mới ở đây. Mốc 1180/720 của nguồn viết media query riêng (kit: tablet ≤960, mobile ≤767).
 *  6. Data-URI SVG luôn có xmlns; lớp phủ trang trí pointer-events:none.
 */

/* 1. Alias var kit (token-map map §4 — _id custom = sha1(tên)[:7]) */
body[class*="elementor-kit-"] {
  --ink: var(--e-global-color-text);
  --ink-2: var(--e-global-color-b326dd6);
  --ink-3: var(--e-global-color-1dd8b9f);
  --line: var(--e-global-color-264f39c);
  --line-strong: var(--e-global-color-32147e9);
  --control: var(--e-global-color-2aeede8);
  --ground: var(--e-global-color-cd12af9);
  --tint: var(--e-global-color-cd12af9);
  --paper: var(--e-global-color-950593b);
  --brand: var(--e-global-color-primary);
  --brand-hover: var(--e-global-color-bc53b9c);
  --accent: var(--e-global-color-accent);
  --dark: var(--e-global-color-secondary);
  --on-dark-2: var(--e-global-color-9f397c7);
  --dark-line: var(--e-global-color-93b1a2b);
}

/* 2. Token ngoài kit — từ :root nguồn (+ override ≤960) */
:root {
  --radius: 6px;
  --shadow: 0 1px 2px rgba(16, 15, 36, 0.06), 0 12px 32px rgba(16, 15, 36, 0.1);
  --section-y: 96px;
  --gutter: 40px;
  --header-h: 80px;
}

@media (max-width: 960px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --section-y: 56px;
  }
}

/* 3. Gutter chỉ thuộc top-level container */
.e-con .e-con:not(.e-con-boxed) {
  --container-default-padding-top: 0;
  --container-default-padding-right: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
}

/* 4. Nền chung của nguồn: link kế thừa màu, focus cam, cuộn mượt dưới header dính */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body[class*="elementor-kit-"] {
  -webkit-font-smoothing: antialiased;
}

body[class*="elementor-kit-"] a {
  color: inherit;
}

body[class*="elementor-kit-"] a:hover {
  color: var(--brand);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Đoạn văn/danh sách/bảng trong text-editor: nguồn reset margin, khoảng cách do khối cha. Chỉ danh sách kiểu nguồn (`ul.features` —
   chấm tròn vẽ bằng ::before) bỏ chấm/thụt lề mặc định; danh sách thường nhân viên chèn thêm giữ chấm của trình duyệt (audit A-11) */
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor table {
  margin: 0;
}

.elementor-widget-text-editor ul.features {
  padding: 0;
  list-style: none;
}

/* Link trong nội dung (đoạn văn, bảng thông tin): gạch chân như mặc định trình duyệt của nguồn (`a { color: inherit }`, không bỏ gạch
   chân) — reset.css của theme cha đặt `a { text-decoration: none }` (đo ở QA B3: email trang Liên hệ, link CEO/HAMEE trang Giới thiệu) */
.elementor-widget-text-editor a {
  text-decoration: underline;
}

/* Heading thẻ span: hiển thị khối — span inline trong wrapper div bị dòng 1.65 × 16px của wrapper kéo cao (lệch nhịp chữ nhỏ) */
.elementor-widget-heading span.elementor-heading-title {
  display: block;
}

/* Nút: chiều cao tối thiểu + căn giữa chữ như .btn nguồn (không có control min-height) */
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper {
  align-items: center;
  gap: 8px;
}

/* Nút kiểu chữ (.link nguồn) */
.elementor-widget-button.link .elementor-button {
  min-height: 0;
  text-underline-offset: 3px;
}

/* Nút Zalo / Gọi: hình bằng CSS (map §12 — Zalo = nguyên file HTML/assets/img/icons/zalo.svg làm nền data-URI, điện thoại = mask) */
.btn-zalo .elementor-button-text::before,
.btn-call .elementor-button-text::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  pointer-events: none;
}

.btn-zalo .elementor-button-text::before {
  background: url("data:image/svg+xml;utf8,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.782 0.166016H27.199C33.2653 0.166016 36.8103 1.05701 39.9572 2.74421C43.1041 4.4314 45.5875 6.89585 47.2557 10.0428C48.9429 13.1897 49.8339 16.7347 49.8339 22.801V27.1991C49.8339 33.2654 48.9429 36.8104 47.2557 39.9573C45.5685 43.1042 43.1041 45.5877 39.9572 47.2559C36.8103 48.9431 33.2653 49.8341 27.199 49.8341H22.8009C16.7346 49.8341 13.1896 48.9431 10.0427 47.2559C6.89583 45.5687 4.41243 43.1042 2.7442 39.9573C1.057 36.8104 0.166016 33.2654 0.166016 27.1991V22.801C0.166016 16.7347 1.057 13.1897 2.7442 10.0428C4.43139 6.89585 6.89583 4.41245 10.0427 2.74421C13.1707 1.05701 16.7346 0.166016 22.782 0.166016Z' fill='%230068FF'/%3E %3Cpath opacity='0.12' fill-rule='evenodd' clip-rule='evenodd' d='M49.8336 26.4736V27.1994C49.8336 33.2657 48.9427 36.8107 47.2555 39.9576C45.5683 43.1045 43.1038 45.5879 39.9569 47.2562C36.81 48.9434 33.265 49.8344 27.1987 49.8344H22.8007C17.8369 49.8344 14.5612 49.2378 11.8104 48.0966L7.27539 43.4267L49.8336 26.4736Z' fill='%23001A33'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.779 43.5892C10.1019 43.846 13.0061 43.1836 15.0682 42.1825C24.0225 47.1318 38.0197 46.8954 46.4923 41.4732C46.8209 40.9803 47.1279 40.4677 47.4128 39.9363C49.1062 36.7779 50.0004 33.22 50.0004 27.1316V22.7175C50.0004 16.629 49.1062 13.0711 47.4128 9.91273C45.7385 6.75436 43.2461 4.28093 40.0877 2.58758C36.9293 0.894239 33.3714 0 27.283 0H22.8499C17.6644 0 14.2982 0.652754 11.4699 1.89893C11.3153 2.03737 11.1636 2.17818 11.0151 2.32135C2.71734 10.3203 2.08658 27.6593 9.12279 37.0782C9.13064 37.0921 9.13933 37.1061 9.14889 37.1203C10.2334 38.7185 9.18694 41.5154 7.55068 43.1516C7.28431 43.399 7.37944 43.5512 7.779 43.5892Z' fill='white'/%3E %3Cpath d='M20.5632 17H10.8382V19.0853H17.5869L10.9329 27.3317C10.7244 27.635 10.5728 27.9194 10.5728 28.5639V29.0947H19.748C20.203 29.0947 20.5822 28.7156 20.5822 28.2606V27.1421H13.4922L19.748 19.2938C19.8428 19.1801 20.0134 18.9716 20.0893 18.8768L20.1272 18.8199C20.4874 18.2891 20.5632 17.8341 20.5632 17.2844V17Z' fill='%230068FF'/%3E %3Cpath d='M32.9416 29.0947H34.3255V17H32.2402V28.3933C32.2402 28.7725 32.5435 29.0947 32.9416 29.0947Z' fill='%230068FF'/%3E %3Cpath d='M25.814 19.6924C23.1979 19.6924 21.0747 21.8156 21.0747 24.4317C21.0747 27.0478 23.1979 29.171 25.814 29.171C28.4301 29.171 30.5533 27.0478 30.5533 24.4317C30.5723 21.8156 28.4491 19.6924 25.814 19.6924ZM25.814 27.2184C24.2785 27.2184 23.0273 25.9672 23.0273 24.4317C23.0273 22.8962 24.2785 21.645 25.814 21.645C27.3495 21.645 28.6007 22.8962 28.6007 24.4317C28.6007 25.9672 27.3685 27.2184 25.814 27.2184Z' fill='%230068FF'/%3E %3Cpath d='M40.4867 19.6162C37.8516 19.6162 35.7095 21.7584 35.7095 24.3934C35.7095 27.0285 37.8516 29.1707 40.4867 29.1707C43.1217 29.1707 45.2639 27.0285 45.2639 24.3934C45.2639 21.7584 43.1217 19.6162 40.4867 19.6162ZM40.4867 27.2181C38.9322 27.2181 37.681 25.9669 37.681 24.4124C37.681 22.8579 38.9322 21.6067 40.4867 21.6067C42.0412 21.6067 43.2924 22.8579 43.2924 24.4124C43.2924 25.9669 42.0412 27.2181 40.4867 27.2181Z' fill='%230068FF'/%3E %3Cpath d='M29.4562 29.0944H30.5747V19.957H28.6221V28.2793C28.6221 28.7153 29.0012 29.0944 29.4562 29.0944Z' fill='%230068FF'/%3E %3C/svg%3E") center / contain no-repeat;
}

.btn-call .elementor-button-text::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>") center / contain no-repeat;
}

/* cụm liên hệ ở chân trang = .chip-link nguồn: icon → chữ 6px (nút kiểu .btn ở trang Liên hệ + thanh CTA di động giữ 8px như nguồn)
   — REVIEW B5: nút Zalo/Gọi chân trang rộng hơn nguồn 2px (đo: nguồn 79.3/72.4px, dựng 81.3/74.4px) */
.footer-main .btn-zalo .elementor-button-text::before,
.footer-main .btn-call .elementor-button-text::before {
  margin-right: 6px;
}

/* ---------- Breadcrumb + đầu trang (page-intro) ---------- */
.elementor-widget-breadcrumbs.breadcrumb {
  padding: 20px 0;
}

.breadcrumb #breadcrumbs > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.breadcrumb #breadcrumbs > span > span + span::before {
  content: '/';
  margin-right: 10px;
  color: var(--line-strong);
}

.breadcrumb #breadcrumbs a {
  text-decoration: none;
}

.e-con.page-head {
  --padding-top: 24px;
  --padding-bottom: 40px;
}

.page-lead .elementor-heading-title {
  max-width: 720px;
}

.e-con.narrow {
  --content-width: min(100%, calc(880px - 2 * var(--gutter)));
}

.elementor-widget-image.page-photo {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
}

.page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ghi chú nội dung mẫu (chính sách hỗ trợ kỹ thuật / thanh toán) — màu 1 chỗ dùng ở bridge (map §4) */
.e-con .elementor-element.elementor-widget-text-editor.draft-note {
  margin-bottom: 8px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: #fff3eb;
  color: #8a3a12;
  font-size: 14.5px;
}

/* ---------- Trang chính sách ---------- */
.e-con.policy-body {
  --padding-bottom: 72px;
}

.e-con.policy-block {
  --padding-top: 32px;
}

.elementor-widget-text-editor ul.features li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  font-size: inherit;
}

.elementor-widget-text-editor ul.features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  pointer-events: none;
}

.elementor-widget-text-editor ul.features li.sub {
  padding: 20px 0 6px;
  font-weight: 600;
  border-bottom: 0;
}

.elementor-widget-text-editor ul.features li.sub::before {
  display: none;
}

.elementor-widget-text-editor ul.features li.sub:first-child {
  padding-top: 0;
}

/* Bảng thông tin (dl.spec-list nguồn → table.spec-list trong text-editor — khách sửa ô chữ). Hàng = lưới 2 cột như nguồn
   (minmax(120px,.9fr) / minmax(0,1.6fr), gap 24): bề rộng ô bảng tính bằng calc(% + px) bị Chrome coi là auto → cột chia đôi (đo được).
   Chữ trong ô theo ô panel của widget (màu · cỡ · đậm · căn lề kế thừa — audit A-11); cột nhãn nhạt hơn màu chữ đang đặt (pha 22% trắng:
   với màu chữ ink của kit = đúng ink-2 nguồn, đổi màu ở panel thì nhãn đổi theo) */
.elementor-widget-text-editor table.spec-list,
.elementor-widget-text-editor table.spec-list tbody {
  display: block;
  width: 100%;
  border: 0;
  border-collapse: collapse;
}

.elementor-widget-text-editor table.spec-list {
  border-top: 1px solid var(--ink);
  font-size: inherit; /* theme cha đặt `table { font-size: .9em }` — bảng theo cỡ chữ của widget (ô Typography) */
}

.elementor-widget-text-editor table.spec-list tr {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.6fr);
  gap: 4px 24px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

.elementor-widget-text-editor table.spec-list th,
.elementor-widget-text-editor table.spec-list td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}

.elementor-widget-text-editor table.spec-list th {
  color: color-mix(in srgb, currentColor 78%, #fff);
}

.elementor-widget-text-editor table.spec-list td {
  overflow-wrap: anywhere;
}

/* ---------- Chương (trang chủ, giới thiệu) ---------- */
.e-con.chapter {
  --padding-top: var(--section-y);
  --padding-bottom: var(--section-y);
}

.e-con.chapter:not(.chapter--tint) + .e-con.chapter:not(.chapter--tint) {
  --padding-top: 0;
}

.e-con.chapter-head {
  --row-gap: 12px;
  --column-gap: 32px;
  --margin-bottom: 32px;
  --padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.chapter-head .elementor-widget-button.link .elementor-button,
.chapter-split-text .elementor-widget-button.link .elementor-button {
  min-height: 44px;
}

.e-con.chapter-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  --padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.chapter-split-text .elementor-widget-text-editor p {
  max-width: 52ch;
}

.chapter-split-text .elementor-widget-text-editor p + p {
  margin-top: 16px;
}

.e-con .elementor-element.elementor-widget-heading.motto {
  margin-top: 8px;
}

.elementor-widget-image.chapter-split-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
}

.chapter-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.e-con.chapter-split--fill {
  align-items: stretch;
}

.chapter-split--fill .elementor-widget-image.chapter-split-media {
  position: relative;
  aspect-ratio: auto;
}

.chapter-split--fill .chapter-split-media img {
  position: absolute;
  inset: 0;
}

/* Ảnh hoạt động (mosaic) */
.e-con.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: 12px;
}

.mosaic .elementor-widget-image.mosaic-item {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
}

.mosaic .elementor-widget-image.mosaic-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaic .mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.mosaic .mosaic-item:hover img {
  transform: scale(1.03);
}

.e-con.mosaic--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
}

.mosaic--wide .elementor-widget-image.mosaic-item:first-child {
  grid-column: auto;
  grid-row: auto;
}

/* Báo chí: lưới hairline, logo xám tới khi rê chuột */
.e-con.press-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.press-logos .elementor-widget-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s;
}

.press-logos .elementor-widget-image a:hover {
  background: var(--ground);
}

.press-logos .elementor-widget-image img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}

.press-logos .elementor-widget-image:hover img {
  filter: none;
  opacity: 1;
}

/* Giới thiệu: đoàn HAMEE + 3 ảnh theo tỉ lệ ảnh */
.e-con .elementor-element.elementor-widget-text-editor.visit-text {
  max-width: 720px;
  margin: 40px 0 20px;
}

.e-con.visit-photos {
  display: grid;
  grid-template-columns: 16fr 12fr 12fr;
  gap: 12px;
}

.visit-photos .elementor-widget-image.photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
}

.visit-photos .elementor-widget-image.photo:first-child {
  aspect-ratio: 16 / 9;
}

.visit-photos .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.e-con .elementor-element.elementor-widget-text-editor.about-facts {
  max-width: 760px;
}

.about-facts.elementor-widget-text-editor table.spec-list {
  border-top: 0;
}

/* ---------- Trang chủ: hero toàn màn hình (video nền + ảnh cổng) ---------- */
.e-con.hero-full {
  --padding-left: 0;
  --padding-right: 0;
  --position: relative;
  --height: min(90svh, 880px);
  --min-height: 560px;
  --overflow: hidden;
  --margin-top: calc(-1 * var(--header-h) - 1px);
  background-color: var(--dark);
  color: var(--paper);
}

.hero-full .elementor-background-video-container {
  z-index: 0;
}

/* Video phóng nhẹ cho nhãn mép của YouTube nằm ngoài khung (như nguồn) — giữ translate căn giữa của Elementor */
.hero-full .elementor-background-video-embed {
  transform: translate(-50%, -50%) scale(1.2);
}

.e-con.hero-full .elementor-element.elementor-widget-image.hero-full-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  transition: opacity 0.8s;
}

.hero-full-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Ảnh cổng che tới khi trình phát YouTube sẵn sàng: JS của Elementor tạo iframe, gắn elementor-loading lên khung video rồi gỡ khi
   trình phát báo trạng thái bắt đầu (chunks/background-video.js) — chưa có iframe (trước JS) hoặc còn loading = ảnh hiện */
.e-con.hero-full:has(.elementor-background-video-container:not(.elementor-loading) iframe) .hero-full-media {
  opacity: 0;
}

/* Lớp tối 2 gradient — trang trí, không nhận chuột */
.e-con.hero-full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 15, 36, 0.45) 0%, rgba(16, 15, 36, 0.05) 22%, rgba(16, 15, 36, 0.18) 55%, rgba(16, 15, 36, 0.85) 100%), linear-gradient(90deg, rgba(16, 15, 36, 0.72) 0%, rgba(16, 15, 36, 0.45) 40%, rgba(16, 15, 36, 0.12) 62%, rgba(16, 15, 36, 0) 78%);
  pointer-events: none;
}

@media (max-width: 1180px) {
  .e-con.hero-full::after {
    background: linear-gradient(180deg, rgba(16, 15, 36, 0.49) 0%, rgba(16, 15, 36, 0.36) 28%, rgba(16, 15, 36, 0.62) 55%, rgba(16, 15, 36, 0.9) 100%);
  }
}

.e-con.hero-full-content {
  --position: relative;
  --z-index: 2;
  --width: 100%;
  max-width: 1200px;
  --margin-left: auto;
  --margin-right: auto;
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  --padding-bottom: 136px;
}

.hero-full-content .elementor-widget-heading h1.elementor-heading-title {
  max-width: 780px;
}

.hero-lead .elementor-heading-title {
  max-width: 600px;
}

.e-con.hero-full-actions {
  --margin-top: 6px;
}

.hero-full-actions .elementor-widget-button .elementor-button {
  min-height: 52px;
}

.btn-quote .elementor-button:hover,
.btn-quote .elementor-button:focus {
  background-color: #e9e8f3;
  border-color: #e9e8f3;
}

.e-con .elementor-element.elementor-widget-icon-list.hero-points {
  margin-top: 8px;
}

.hero-points .elementor-icon-list-item::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

.hero-points .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-full .elementor-background-video-container {
    display: none;
  }

  .e-con.hero-full .hero-full-media {
    opacity: 1;
  }
}

/* ---------- Trang chủ: danh mục đè mép dưới hero ---------- */
.e-con.home-index {
  --position: relative;
  --z-index: 2;
  --margin-top: -56px;
  --padding-bottom: var(--section-y);
}

.e-con.cat-menu {
  --border-radius: var(--radius);
  --overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.e-con.cat-menu-head {
  --padding-top: 14px;
  --padding-bottom: 14px;
  --padding-left: 24px;
  --padding-right: 24px;
  background: var(--brand);
}

.cat-menu-head .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-menu-head .elementor-heading-title::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

.e-con.cat-menu-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  --margin-bottom: -1px;
}

.e-con.cat-menu-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-content: start;
  gap: 6px 12px;
  height: 100%;
  --padding-top: 20px;
  --padding-right: 24px;
  --padding-bottom: 22px;
  --padding-left: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.e-con.cat-menu-link:nth-child(4n) {
  border-right: 0;
}

.e-con.cat-menu-link:hover {
  background: var(--tint);
  color: var(--brand);
}

.e-con.cat-menu-link--all {
  color: var(--brand);
}

.cat-menu-link .cat-menu-thumb {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 88px;
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ground);
  color: var(--brand);
}

.cat-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ô "Tất cả sản phẩm": hình lưới 4 ô = mask (::after — ::before của container là lớp phủ nền của Elementor) */
.e-con.cat-menu-thumb--all::after {
  content: '';
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='6.5' height='6.5' rx='1'/><rect x='13.5' y='4' width='6.5' height='6.5' rx='1'/><rect x='4' y='13.5' width='6.5' height='6.5' rx='1'/><rect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='6.5' height='6.5' rx='1'/><rect x='13.5' y='4' width='6.5' height='6.5' rx='1'/><rect x='4' y='13.5' width='6.5' height='6.5' rx='1'/><rect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

.cat-menu-link .cat-menu-name {
  grid-column: 1;
  grid-row: 2;
}

.cat-menu-link .cat-menu-models {
  grid-column: 1;
  grid-row: 3;
}

/* Mũi tên của ô = pseudo của ô link (đổi cam + dịch nhẹ khi rê chuột) */
.e-con.cat-menu-link::after {
  content: '';
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: background 0.15s, transform 0.15s;
  pointer-events: none;
}

.e-con.cat-menu-link:hover::after {
  background: var(--accent);
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .e-con.cat-menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-con.cat-menu-link:nth-child(4n) {
    border-right: 1px solid var(--line);
  }

  .e-con.cat-menu-link:nth-child(2n) {
    border-right: 0;
  }

  .e-con.cat-menu-link {
    grid-template-columns: 76px minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 4px 20px;
    --padding-top: 16px;
    --padding-bottom: 16px;
  }

  .cat-menu-link .cat-menu-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 76px;
    margin: 0;
  }

  .cat-menu-link .cat-menu-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .cat-menu-link .cat-menu-models {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .e-con.cat-menu-link::after {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }
}

@media (max-width: 720px) {
  .e-con.cat-menu-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .e-con.cat-menu-link,
  .e-con.cat-menu-link:nth-child(4n) {
    border-right: 0;
  }
}

/* ---------- Trang chủ: Máy tiêu biểu (nested-carousel — nút tròn/màu/vị trí đi control của widget) ---------- */
/* Hàng tiêu đề cao bằng nút 44px như nguồn (nút nằm trong vùng của carousel, kéo lên bằng control vị trí) */
.e-con.chapter--tint .e-con.chapter-head {
  --min-height: 65px;
}

.slider .elementor-swiper-button {
  transition: border-color 0.2s, color 0.2s, transform 0.1s;
}

.slider .elementor-swiper-button.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.e-con.card {
  text-decoration: none;
}

.e-con.card-media {
  aspect-ratio: 1 / 1;
  --overflow: hidden;
  --border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color 0.2s;
}

.e-con.card:hover .card-media {
  border-color: var(--line-strong);
}

/* ảnh máy vừa khung thẻ: ảnh sản phẩm của thẻ máy (loop-item) · ảnh của thẻ Máy tiêu biểu (.has-mark) — không áp cho widget ảnh huy hiệu
   của thẻ máy (cỡ theo control Width của nó) */
.card-media .elementor-widget-theme-post-featured-image,
.has-mark .elementor-widget-image {
  height: 100%;
}

.card-media .elementor-widget-theme-post-featured-image img,
.has-mark .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Huy hiệu 18 năm góc ảnh máy ở thẻ Máy tiêu biểu của trang chủ — trang trí (map §3 HM3; chỉ khi thẻ có ảnh). Trang máy + thẻ máy
   của trang danh mục: huy hiệu là widget ảnh (M-11 — khối «Trang máy» bên dưới) */
.e-con.has-mark {
  --position: relative;
}

.e-con.has-mark::after {
  content: '';
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: clamp(32px, 15%, 60px);
  aspect-ratio: 1 / 1;
  background: url("../img/badge-18-nam.webp") center / contain no-repeat;
  pointer-events: none;
}

.khong-huy-hieu .e-con.has-mark::after,
.e-con.khong-huy-hieu .has-mark::after,
.e-con.has-mark:not(:has(img))::after {
  display: none;
}

/* Khung chờ ảnh: logo mờ trên tên máy */
.e-con.placeholder {
  width: 100%;
  height: 100%;
  --padding-top: 12px;
  --padding-right: 12px;
  --padding-bottom: 12px;
  --padding-left: 12px;
  background: var(--tint);
  text-align: center;
}

.e-con.placeholder::after {
  content: '';
  order: -1;
  width: 32%;
  max-width: 120px;
  aspect-ratio: 67 / 48;
  margin-bottom: 6px;
  background: url("../img/logo-anphatech.png") center / contain no-repeat;
  opacity: 0.25;
  pointer-events: none;
}

/* ---------- Liên hệ ---------- */
.e-con.contact-split {
  --padding-bottom: 72px;
}

.e-con.contact-split > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: stretch;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.e-con .elementor-element.elementor-widget-heading.contact-h2 {
  margin-bottom: 6px;
}

.e-con .elementor-element.elementor-widget-heading.contact-subhead {
  margin-top: 40px;
}

.contact-info .elementor-widget-text-editor table.spec-list {
  border-top: 0;
}

.e-con.hotline {
  --padding-top: 14px;
  --padding-bottom: 14px;
  border-top: 1px solid var(--line);
}

.e-con.hotline:first-child {
  border-top: 0;
}

/* tên/số và cặp nút rộng theo nội dung (container lồng mặc định rộng 100% → 2 khối chia đôi hàng) */
.e-con.hotline-who,
.e-con.hotline-acts {
  --width: auto;
}

.hotline-acts .elementor-widget-button .elementor-button {
  min-height: 42px;
}

.e-con.contact-map-col {
  --justify-content: flex-start;
}

.e-con .elementor-element.elementor-widget-google_maps.contact-map {
  flex: 1;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
}

.contact-map .elementor-custom-embed,
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map-col .elementor-widget-button.link {
  align-self: flex-start;
}

.contact-map-col .elementor-widget-button.link .elementor-button {
  min-height: 44px;
}

/* ---------- Header (Theme Builder — HD1) ---------- */
/* Màu menu/nút/nút Menu ở header đi bridge vì header có 2 trạng thái (trong suốt ở đầu trang chủ ↔ nền trắng khi cuộn/trang khác):
   control màu của widget chỉ giữ 1 giá trị — ghi bảng bàn giao "màu header chỉnh ở bridge.css" */
.e-con.site-header {
  --z-index: 10;
  --padding-top: 0;
  --padding-bottom: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s, border-color 0.25s;
}

.e-con.header-bar {
  --min-height: var(--header-h);
}

.e-con.logo,
.e-con.header-actions {
  --width: auto;
  flex: none;
}

.site-header .logo-dark img,
.site-header .logo-light img,
.site-header .warranty-badge img,
.footer-logo img {
  width: auto;
}

.site-header .elementor-widget-image.logo-light {
  display: none;
}

.e-con.header-bar .elementor-widget-nav-menu.site-nav {
  flex: 1;
}

.e-con.site-header .site-nav .elementor-nav-menu--main .elementor-item {
  color: var(--ink-2);
  fill: var(--ink-2);
}

.e-con.site-header .site-nav .elementor-nav-menu--main .elementor-item:hover,
.e-con.site-header .site-nav .elementor-nav-menu--main .elementor-item:focus {
  color: var(--ink);
}

.e-con.site-header .site-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.e-con.site-header .btn-quote-header .elementor-button {
  min-height: 42px;
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

.e-con.site-header .btn-quote-header .elementor-button:hover,
.e-con.site-header .btn-quote-header .elementor-button:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--paper);
}

/* Huy hiệu bảo hành: nhịp sáng + vệt sáng (tắt khi người dùng giảm chuyển động) */
.e-con .elementor-element.elementor-widget-image.warranty-badge {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius);
  animation: badge-pulse 1.6s ease-in-out infinite;
}

.warranty-badge a {
  display: block;
}

.e-con .elementor-element.elementor-widget-image.warranty-badge::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: skewX(-18deg);
  animation: badge-shine 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(255, 190, 40, 0);
  }

  50% {
    transform: scale(1.12);
    filter: brightness(1.2);
    box-shadow: 0 0 18px rgba(255, 190, 40, 0.8);
  }
}

@keyframes badge-shine {
  0% {
    left: -60%;
  }

  55%,
  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e-con .elementor-element.elementor-widget-image.warranty-badge,
  .e-con .elementor-element.elementor-widget-image.warranty-badge::after {
    animation: none;
  }
}

/* Nút "Menu"/"Đóng" (≤960) — chữ đổi ở đây (bảng bàn giao); menu di động = dropdown của nav-menu «Menu di động» */
.menu-mobile .elementor-menu-toggle {
  width: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.menu-mobile .elementor-menu-toggle svg,
.menu-mobile .elementor-menu-toggle i {
  display: none;
}

.menu-mobile .elementor-menu-toggle::before {
  content: 'Menu';
}

.menu-mobile .elementor-menu-toggle.elementor-active::before {
  content: 'Đóng';
}

.menu-mobile .elementor-nav-menu--dropdown {
  border-top: 1px solid var(--line);
  background-color: var(--paper);
}

.menu-mobile .elementor-nav-menu--dropdown .elementor-nav-menu {
  padding: 8px var(--gutter) 16px;
}

.menu-mobile .elementor-nav-menu--dropdown .elementor-item {
  line-height: 1.65;
}

/* Trang chủ: header nằm trên video, chữ trắng; nền trắng khi đã cuộn (Pro Sticky → elementor-sticky--effects sau 4px) */
body.home .e-con.site-header:not(.elementor-sticky--effects) {
  background: linear-gradient(180deg, rgba(16, 15, 36, 0.5), rgba(16, 15, 36, 0)) border-box no-repeat;
  border-bottom-color: transparent;
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .logo-dark {
  display: none;
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .elementor-widget-image.logo-light {
  display: block;
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .site-nav .elementor-nav-menu--main .elementor-item {
  color: rgba(255, 255, 255, 0.88);
  fill: rgba(255, 255, 255, 0.88);
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .site-nav .elementor-nav-menu--main .elementor-item:hover {
  color: var(--paper);
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .btn-quote-header .elementor-button {
  background-color: var(--paper);
  border-color: var(--paper);
  color: var(--brand);
}

body.home .e-con.site-header:not(.elementor-sticky--effects) .menu-mobile .elementor-menu-toggle {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--paper);
}

/* ---------- Footer (Theme Builder — FT1 · FT2 · FT3) ---------- */
.e-con.footer-main {
  --padding-top: 72px;
  --padding-bottom: 56px;
  color: var(--paper);
}

.e-con.footer-main > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px 80px;
}

/* Trang Liên hệ: hotline đã nằm trong thân trang → ẩn khối kêu gọi của footer (body class page-lien-he do site-classes.php) */
.page-lien-he .e-con.footer-main {
  display: none;
}

.e-con.contact-list {
  border-top: 1px solid var(--dark-line);
}

.e-con.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 20px;
  --padding-top: 16px;
  --padding-bottom: 16px;
  border-bottom: 1px solid var(--dark-line);
}

.contact-row .num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact-row .num a {
  text-decoration: none;
}

.contact-row--email .num--email {
  grid-column: 2 / -1;
}

.contact-row .acts .elementor-button {
  min-height: 44px;
}

.e-con.footer-legal {
  --padding-top: 32px;
  --padding-bottom: 40px;
  border-top: 1px solid var(--dark-line);
}

.e-con.footer-legal > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.75fr);
  gap: 24px 40px;
}

/* Link website trong khối công ty: trắng như `.footer-legal a` nguồn (chữ quanh nó màu on-dark-2). (0,4,1) để thắng rule lõi
   `.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit}` (0,3,1) — selector cũ (0,2,1) thua,
   link ra màu xám của chữ quanh (đo computed ở QA B3); ô màu Tiêu đề của widget nhắm .elementor-heading-title, không nhắm thẻ a */
.e-con.footer-legal .footer-legal-text .elementor-heading-title a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links .elementor-icon-list-item a:hover .elementor-icon-list-text {
  text-decoration: underline;
}

/* Thanh CTA cố định đáy màn hình ≤960 (ẩn desktop bằng Responsive › Hide on desktop) */
.mobile-cta .elementor-button {
  min-height: 50px;
}

/* ---------- ≤960 (kit tablet) ---------- */
@media (max-width: 960px) {
  .elementor-widget-breadcrumbs.breadcrumb {
    padding: 10px 0;
  }

  .elementor-widget-image.page-photo {
    aspect-ratio: 4 / 3;
  }

  .e-con.policy-body,
  .e-con.contact-split {
    --padding-bottom: 56px;
  }

  .e-con.chapter-head {
    --margin-bottom: 24px;
  }

  .e-con.chapter-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .chapter-split--fill .elementor-widget-image.chapter-split-media {
    aspect-ratio: 4 / 3;
  }

  .chapter-split--fill .chapter-split-media img {
    position: static;
  }

  .e-con.mosaic,
  .e-con.mosaic--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
    gap: 8px;
  }

  .mosaic .elementor-widget-image.mosaic-item:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .e-con.press-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-logos .elementor-widget-image a {
    height: 84px;
    padding: 12px;
  }

  .press-logos .elementor-widget-image img {
    max-height: 44px;
  }

  .e-con .elementor-element.elementor-widget-text-editor.visit-text {
    margin: 28px 0 16px;
  }

  .e-con.visit-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .visit-photos .elementor-widget-image.photo:first-child {
    grid-column: 1 / -1;
  }

  .elementor-widget-text-editor table.spec-list tr {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2px 14px;
    padding: 11px 0;
  }

  .e-con.hero-full {
    --height: min(80svh, 700px);
    --min-height: 520px;
  }

  .e-con.hero-full-content {
    --padding-bottom: 68px;
  }

  .e-con.home-index {
    --margin-top: -28px;
  }

  .e-con.cat-menu-head {
    --padding-top: 12px;
    --padding-bottom: 12px;
    --padding-left: 16px;
    --padding-right: 16px;
  }

  .cat-menu-head .elementor-heading-title {
    gap: 10px;
  }

  .e-con.cat-menu-link {
    grid-template-columns: 60px minmax(0, 1fr) 20px;
    gap: 2px 14px;
    --padding-top: 12px;
    --padding-right: 16px;
    --padding-bottom: 12px;
    --padding-left: 16px;
  }

  .cat-menu-link .cat-menu-thumb {
    width: 60px;
  }

  /* map HM3: nút qua lại ẩn ≤960 (vuốt) — control vị trí mũi tên chỉ tác dụng trên desktop (ghi bảng bàn giao) */
  .slider .elementor-swiper-button {
    display: none;
  }

  .e-con.chapter--tint .e-con.chapter-head {
    --min-height: 0;
  }

  /* ~2,3 thẻ/màn như nguồn (44% bề ngang): vùng trượt hẹp 30px, thẻ thứ 3 ló trong khung widget. Offset của nested-carousel chỉ chạy khi
     bật lặp vô hạn (Pro: condition infinite=yes) mà map HM3 không lặp → làm bằng CSS (decision-log) */
  .elementor-widget-n-carousel.slider {
    overflow: hidden;
  }

  .slider .e-n-carousel.swiper {
    overflow: visible;
    margin-inline-end: 30px;
  }

  .e-con .elementor-element.elementor-widget-heading.contact-subhead {
    margin-top: 32px;
  }

  .e-con.contact-split > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* khoảng cách 10px ở ≤960 = ô Khoảng cách (tablet) của container trong spec — biến viết ở đây thua post-css của ô đó */
  .e-con.hotline {
    --flex-wrap: wrap;
  }

  .e-con.hotline-who,
  .e-con.hotline-acts {
    flex: 1 1 100%;
  }

  .e-con.hotline-acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotline-acts .elementor-widget-button .elementor-button {
    width: 100%;
  }

  .hotline-num .elementor-heading-title {
    white-space: nowrap;
  }

  .e-con .elementor-element.elementor-widget-google_maps.contact-map {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* header ≤960 */
  .e-con.header-actions {
    --margin-left: auto;
  }

  /* footer ≤960 */
  .e-con.footer-main {
    --padding-top: 48px;
  }

  .e-con.footer-main > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .e-con.contact-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .contact-row .who,
  .contact-row--email .num--email {
    grid-column: 1 / -1;
  }

  .e-con.footer-legal > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-con.footer-legal > .e-con-inner > .elementor-element:nth-child(-n+2) {
    grid-column: 1 / -1;
  }

  body[class*="elementor-kit-"] {
    padding-bottom: 76px;
  }

  .e-con.mobile-cta {
    --position: fixed;
    --z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    --padding-top: 10px;
    --padding-right: 12px;
    --padding-bottom: 14px;
    --padding-left: 12px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(16, 15, 36, 0.06);
  }
}

/* =====================================================================================================================
   Trang máy (template «Sản phẩm – chi tiết» CT1–CT3 — sản phẩm WooCommerce) · thẻ máy (loop-item «Thẻ sản phẩm» LC1) · trang danh
   mục (template «Dòng máy – danh sách» DM1–DM4) · tìm kiếm (Archive chung AC + loop-item LS1) — amend M-08 · M-09 · M-10 · M-11.
   Port từ HTML/assets/css/style.css nguồn (.product-* · .spec-* · .key-specs · .features · .video/.play · .parts-head · .photo-note ·
   .product-grid · .chips). Khoảng cách/màu/chữ có control thì đặt ở template; ở đây thứ control không có: lưới, tỉ lệ khung, ẩn khối
   rỗng bằng :has(), và KIỂU THEO THẺ cho HTML của Mô tả · Mô tả ngắn · Mô tả danh mục (nhân viên soạn trong khung kiểu Word — bảng/
   danh sách kẻ mới tự đúng kiểu, không cần class): `table` 2 cột (hàng `thead` = hàng tiêu đề nhỏ in hoa) · `ul` = danh sách chấm ·
   `li` chỉ có chữ đậm = tiêu đề nhỏ · `blockquote` mở bằng chữ đậm = hộp tóm tắt, không chữ đậm = ghi chú.
   Woo core (`woocommerce.css`) dùng selector `.woocommerce div.product div.images …` (0,4,3) → rule bộ ảnh bám đúng chuỗi đó + class
   khung của mẫu (woo-convert reference §1); bảng: theme cha kẻ ô + sọc nền (`table tbody>tr:nth-child(odd)>td`) → reset có độ ưu tiên.
   ===================================================================================================================== */

/* ---------- Trang máy: khung 2 cột ảnh / thông tin ---------- */
.e-con.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

/* Tên máy là mã model (class body `san-pham-ma-model` của site plugin — quy tắc theo tên, M-09): tiêu đề dùng token kit "H1 mã model"
   (50/38) thay "H1 máy" (36/28) — trỏ biến của token H1 máy sang biến của H1 mã model trong khung tiêu đề; control Typography của
   widget vẫn bind global "H1 máy" (không đè thuộc tính của control) */
body.san-pham-ma-model .e-con.product-title {
  --e-global-typography-d774b76-font-size: var(--e-global-typography-a147730-font-size);
  --e-global-typography-d774b76-line-height: var(--e-global-typography-a147730-line-height);
}

/* Khối ảnh = bộ ảnh của Woo (widget Product Images): ảnh chính trong khung vuông (≤960: 4:3) viền + bo góc như .product-photo nguồn,
   ảnh vừa khung chừa 5%; dải ảnh nhỏ bên dưới (bấm đổi ảnh lớn — flexslider của Woo). Woo giữ `opacity:0` chờ JS — hiện ngay
   (adapter note: không JS / headless vẫn thấy ảnh). Huy hiệu + nhãn "Ảnh minh họa" = widget đè góc khung ảnh chính bằng control
   Position/Offset/Margin (Margin % tính theo BỀ RỘNG khối ảnh = cạnh khung vuông → đúng góc dù máy có dải ảnh nhỏ bên dưới). */
.e-con.product-photo {
  --position: relative;
}

.woocommerce div.product .product-photo div.images {
  float: none;
  width: 100%;
  margin: 0;
  opacity: 1 !important;
}

.woocommerce div.product .product-photo div.images .flex-viewport,
.woocommerce div.product .product-photo div.images > .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.woocommerce div.product .product-photo div.images .woocommerce-product-gallery__image a {
  display: block;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}

.woocommerce div.product .product-photo div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
}

/* Dải ảnh nhỏ: ô 84px vuông cách 10px (≤960: 64 · 8), ảnh vừa khung; ô đang xem viền xanh như .product-thumb.is-active */
.woocommerce div.product .product-photo div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.woocommerce div.product .product-photo div.images .flex-control-thumbs li {
  float: none;
  width: 84px;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .product-photo div.images .flex-control-thumbs li img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  opacity: 1;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce div.product .product-photo div.images .flex-control-thumbs li img:hover {
  border-color: var(--line-strong);
}

.woocommerce div.product .product-photo div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

/* Máy chưa có ảnh: Woo in ảnh giữ chỗ xám của Woo → ẩn, hiện khung chờ ảnh của nguồn (tên + "Ảnh đang cập nhật" + logo mờ) trong khung
   viền vuông */
.woocommerce div.product .product-photo div.images.woocommerce-product-gallery--without-images,
.product-photo:has(.woocommerce-product-gallery--with-images) .e-con.placeholder,
.card-media:has(.elementor-widget-theme-post-featured-image) .e-con.placeholder {
  display: none;
}

.e-con.product-photo .e-con.placeholder {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Huy hiệu chỉ khi máy có ảnh, và ẩn khi máy tick "Ẩn huy hiệu 18 năm" (class khong-huy-hieu của site plugin: body trang máy · post_class
   thẻ máy). Ẩn bằng visibility (widget nằm đè, không chiếm chỗ): vị trí của widget do control Position/Offset/Margin giữ — không đổi
   display/position của chính phần tử control định vị (style-ownership §8) */
.product-photo:not(:has(.woocommerce-product-gallery--with-images)) .product-badge,
.card-media:not(:has(.elementor-widget-theme-post-featured-image)) .card-badge,
body.khong-huy-hieu .product-badge,
.e-loop-item.khong-huy-hieu .card-badge {
  visibility: hidden;
}

/* Huy hiệu + nhãn "Ảnh minh họa" trang trí trên ảnh: ngoài trang thật không nhận chuột (bấm vào góc ảnh vẫn mở hộp xem ảnh như nguồn
   `pointer-events:none`); trong trình sửa vẫn bấm chọn được để đổi ảnh huy hiệu */
body:not(.elementor-editor-active) .e-con .elementor-element.product-badge,
body:not(.elementor-editor-active) .e-con .elementor-element.photo-note {
  pointer-events: none;
}

/* Nhãn "Ảnh minh họa" góc dưới phải ảnh (Chú thích của ảnh chính — M-09; vị trí = control; nền viên thuốc 1 chỗ dùng) */
.e-con .elementor-element.photo-note {
  width: auto;
  max-width: calc(100% - 20px);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 15, 36, 0.72);
}

/* Link "Xem video vận hành ↓": khối co theo chữ; chỉ khi trang có video (khối CT2) */
.elementor-widget-button.video-link .elementor-button {
  display: flex;
  width: fit-content;
}

.elementor-location-single:not(:has(.elementor-widget-video)) .video-link {
  display: none;
}

/* Ghi chú (.empty-note nguồn) + câu trống của lưới thẻ */
.e-con .elementor-element.empty-note,
.product-grid-list .e-loop-nothing-found-message {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--tint);
}

/* Nút "Yêu cầu báo giá" khối (.btn--block) */
.btn-quote-product .elementor-button {
  width: 100%;
  min-height: 52px;
}

/* ---------- Mô tả ngắn (cột thông tin): đoạn đầu = dòng phụ · blockquote có nhãn đậm = hộp tóm tắt · table = thông số nổi bật ·
   blockquote không nhãn = ghi chú. Các khối cách nhau như .product-info nguồn (22 · ≤960 16); dòng phụ cách tên máy 10 như
   .product-title nguồn (kéo lên bằng margin âm = khoảng cách khối của cột thông tin − 10). ≤960: hộp tóm tắt xuống sau bảng như nguồn. */
.product-short .woocommerce-product-details__short-description {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.product-short .woocommerce-product-details__short-description > * {
  margin: 0;
}

.product-short .woocommerce-product-details__short-description > p:first-child {
  margin-top: -12px;
  font-size: 17px;
  font-weight: 500;
}

.product-short blockquote {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ground);
  font-size: 16px;
  font-style: normal;
  quotes: none;
}

.product-short blockquote p {
  margin: 0;
}

.product-short blockquote > p:first-child:has(> strong:only-child) {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.product-short blockquote > p:first-child > strong:only-child {
  font-weight: inherit;
}

.product-short blockquote:not(:has(> p:first-child > strong:only-child)) {
  padding: 20px;
  background: var(--tint);
  color: var(--ink-2);
  font-size: 15px;
}

/* ---------- Bảng của Mô tả ngắn / Mô tả / Mô tả danh mục: vạch đen trên, mỗi hàng vạch xám dưới, cột tên xám + cột giá trị. Tỉ lệ cột
   = lưới .spec-row nguồn quy ra % (Chrome bỏ qua calc() có % ở bề rộng ô bảng): minmax(120px, .9fr) minmax(0, 1.6fr) + khoảng 24 trên
   khung 800 → cột tên 38% (gồm khoảng 24); bảng thông số nổi bật 1fr / 1.3fr → 46.5%, giá trị đậm căn phải. ≤960 theo lưới nguồn
   .85fr / 1.15fr + khoảng 14 → 44.8% · 46%. Theme cha kẻ ô + sọc nền + dòng 1.5 cho mọi `table td` → đặt lại ngay trên ô. */
.product-short table,
.product-content table,
.cat-description table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
}

.product-short table tbody,
.product-content table tbody,
.cat-description table tbody {
  border-top: 1px solid var(--ink);
}

.product-short table tbody > tr:nth-child(n) > td,
.product-content table tbody > tr:nth-child(n) > td,
.cat-description table tbody > tr:nth-child(n) > td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: 16px;
  line-height: 1.65;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* cột tên: xám, rộng theo tỉ lệ lưới nguồn, khoảng cách tới cột giá trị = padding phải (bảng border-collapse không có gap).
   Menu Bảng của khung soạn thảo tự gắn style="width: 50%" vào MỌI ô của bảng nhân viên kẻ (đo B5 trên clone, vai Quản lý cửa hàng:
   cột tên 400/800px thay vì 304/800) → bề rộng cột đặt !important để thắng style trong ô; các cột sau `auto` chia phần còn lại. */
.product-content table tr > td,
.product-content table tr > th,
.cat-description table tr > td,
.cat-description table tr > th,
.product-short table tr > td,
.product-short table tr > th {
  width: auto !important;
}

.product-content table tbody > tr:nth-child(n) > td:first-child,
.cat-description table tbody > tr:nth-child(n) > td:first-child,
.product-content table thead > tr:nth-child(n) > th:first-child,
.cat-description table thead > tr:nth-child(n) > th:first-child,
.product-content table thead > tr:nth-child(n) > td:first-child,
.cat-description table thead > tr:nth-child(n) > td:first-child {
  width: 38% !important;
  padding-right: 24px;
}

.product-short table tbody > tr:nth-child(n) > td:first-child {
  width: 46.5% !important;
  padding-right: 24px;
}

.product-short table tbody > tr:nth-child(n) > td:first-child,
.product-content table tbody > tr:nth-child(n) > td:first-child,
.cat-description table tbody > tr:nth-child(n) > td:first-child {
  color: var(--ink-2);
}

.product-short table tbody > tr:nth-child(n) > td {
  line-height: 1.45;
}

.product-short table tbody > tr:nth-child(n) > td:last-child {
  text-align: right;
  font-weight: 600;
}

/* hàng tiêu đề (thead) = .parts-head nguồn: chữ nhỏ in hoa xám, không vạch. Ô là `th` (dữ liệu seed) hoặc `td` (nhân viên chọn
   Bảng › Dòng › Thuộc tính dòng › Kiểu dòng = Hàng tiêu đề: TinyMCE chuyển hàng vào thead nhưng giữ ô td — đo B5 trên clone). */
.product-content table thead > tr > th,
.cat-description table thead > tr > th,
.product-content table thead > tr > td,
.cat-description table thead > tr > td {
  padding: 0 0 8px;
  line-height: 1.65;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* reset của theme cha `table thead:first-child tr:first-child th { border-block-start: 1px … }` (0,2,4) thắng `border: 0` ở trên (0,1,4)
   → vạch xám thừa trên hàng tiêu đề bảng linh kiện (REVIEW B5, đo computed: 1px rgba(128,128,128,.5); nguồn .parts-head 0px) */
.product-content table thead:first-child > tr:first-child > th,
.cat-description table thead:first-child > tr:first-child > th,
.product-content table thead:first-child > tr:first-child > td,
.cat-description table thead:first-child > tr:first-child > td {
  border-block-start: 0;
}

/* ---------- Mô tả (phần chi tiết): mỗi h2 mở 1 mục như .section nguồn (cách khối trên 48, chữ 28/1.25) ---------- */
.product-content h2,
.cat-description h2 {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.product-content h2 {
  padding-top: 48px;
}

.product-content p,
.cat-description p {
  margin: 0 0 12px;
}

.product-content ul,
.cat-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Danh sách (.features nguồn): chấm tròn xám + vạch dưới; dòng chỉ có chữ đậm = tiêu đề nhỏ (li.sub nguồn) */
.product-content li,
.cat-description li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.product-content li::before,
.cat-description li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  pointer-events: none;
}

.product-content li:has(> strong:only-child),
.cat-description li:has(> strong:only-child) {
  padding: 20px 0 6px;
  border-bottom: 0;
  font-weight: 600;
}

.product-content li:first-child:has(> strong:only-child),
.cat-description li:first-child:has(> strong:only-child) {
  padding-top: 0;
}

.product-content li:has(> strong:only-child)::before,
.cat-description li:has(> strong:only-child)::before {
  display: none;
}

.product-content li > strong,
.cat-description li > strong {
  font-weight: 600;
}

/* ---------- Trang máy: khối video + phần chi tiết; khối không có dữ liệu thì ẩn; khoảng đáy theo khối cuối ---------- */
.e-con.product-video {
  --padding-top: 48px;
}

.e-con.product-video:not(:has(.elementor-widget-video)),
.e-con.product-body:not(:has(.product-content > *)) {
  display: none;
}

.e-con.product-body {
  --padding-bottom: 96px;
}

.elementor-location-single:not(:has(.product-body .product-content > *)) .e-con.product-video {
  --padding-bottom: 96px;
}

.elementor-location-single:not(:has(.product-body .product-content > *)):not(:has(.elementor-widget-video)) .e-con.product-top {
  --padding-bottom: 72px;
}

/* Video vận hành: khung 16:9 bo góc nền đen; ảnh bìa (thẻ động «Ảnh bìa video YouTube») phủ khung; nút play tròn trắng + chữ "Phát video"
   góc dưới trái (map CT2 — chữ ở bridge) */
.elementor-widget-video.video .elementor-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.video .elementor-custom-embed-image-overlay {
  background-size: cover;
  background-position: center;
}

.video .elementor-custom-embed-play {
  top: auto;
  left: 20px;
  bottom: 20px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.video .elementor-custom-embed-play svg {
  display: none;
}

.video .elementor-custom-embed-play::before {
  content: '';
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%231c1c1a'/%3E%3C/svg%3E") center / 40% no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.video .elementor-custom-embed-play::after {
  content: 'Phát video';
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--paper);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ---------- Trang danh mục ---------- */
.e-con.page-end {
  --padding-bottom: 72px;
}

/* Lưới thẻ: khoảng cách cột 16 (≤960: 12) như .product-grid nguồn — control "Gap between columns" của Loop Grid không có bản
   theo breakpoint trong catalog site (D-36), nên khoảng cách cột ở đây; khoảng cách hàng + số cột đi control */
.e-con .elementor-element.product-grid-list {
  --grid-column-gap: 16px;
}

.e-con.product-grid {
  --padding-top: 20px;
}

.e-con.product-grid:has(.e-loop-nothing-found-message) {
  --padding-top: 0px;
}

/* Nút nhóm = widget Product Categories của Woo (danh mục con của trang đang xem — DM2): viên thuốc viền xám, rê chuột viền đậm như
   .chips nguồn; ảnh + số đếm của widget ẩn (giữ dạng nút chữ); trang không có nhóm con thì khối không chiếm chỗ */
.e-con.chips {
  --padding-bottom: 32px;
}

.e-con.chips:not(:has(li.product-category)) {
  display: none;
}

/* khoảng cách giữa các nút = control Column/Row Gap của widget (8 · 8); ở đây chỉ đổi lưới cột đều của widget thành hàng nút co theo chữ */
.woocommerce .chips-list ul.products {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.woocommerce .chips-list ul.products::before,
.woocommerce .chips-list ul.products::after {
  display: none;
}

.woocommerce .chips-list ul.products li.product-category {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

.woocommerce .chips-list ul.products li.product-category a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  text-decoration: none;
}

.woocommerce .chips-list ul.products li.product-category a:hover {
  border-color: var(--ink);
}

.woocommerce .chips-list ul.products li.product-category a img,
.woocommerce .chips-list ul.products li.product-category mark.count {
  display: none;
}

.woocommerce .chips-list ul.products li.product-category .woocommerce-loop-category__title {
  margin: 0;
  padding: 0;
}

/* Phần riêng của dòng (Mô tả danh mục — bảng linh kiện Dòng A/B, M-10): sau lưới như nguồn (.group 32 + .section 48); danh mục không có
   mô tả thì khối không chiếm chỗ và lưới giữ lề cuối trang */
.e-con.parts-block {
  --padding-top: 48px;
  --padding-bottom: 72px;
}

.e-con.parts-block:not(:has(.term-description)) {
  display: none;
}

.elementor-location-archive:has(.parts-block .term-description) .e-con.product-grid.page-end {
  --padding-bottom: 32px;
}

.e-con.narrow-block {
  --width: min(100%, 880px);
}

/* ---------- Kết quả tìm kiếm (loop-item «Kết quả tìm kiếm» — kiểu dòng .cat-rows) ---------- */
.e-con.search-card {
  border-bottom: 1px solid var(--line);
}

.search-card-title .elementor-heading-title a {
  text-decoration: none;
}

.search-card-title .elementor-heading-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 960px) {
  .e-con.product-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce div.product .product-photo div.images .woocommerce-product-gallery__image a,
  .e-con.product-photo .e-con.placeholder {
    aspect-ratio: 4 / 3;
  }

  .woocommerce div.product .product-photo div.images .flex-control-thumbs {
    gap: 8px;
  }

  .woocommerce div.product .product-photo div.images .flex-control-thumbs li {
    width: 64px;
  }

  .product-short .woocommerce-product-details__short-description {
    gap: 16px;
  }

  .product-short .woocommerce-product-details__short-description > p:first-child {
    margin-top: -6px;
    font-size: 16px;
  }

  .product-short blockquote:has(> p:first-child > strong:only-child) {
    order: 1;
  }

  /* 44.8% = lưới nguồn .85fr / 1.15fr + khoảng 14 đúng từng px ở khung 350 (màn 390): cột tên 142.8 = nguồn (44.5% hụt 1px → chữ
     xuống dòng khác nguồn, REVIEW B5 «Chất liệu màng phù hợp» MD350); bề rộng khác của khung lệch < 1px tới 414, ≤ 8px ở tablet */
  .product-content table tbody > tr:nth-child(n) > td:first-child,
  .cat-description table tbody > tr:nth-child(n) > td:first-child,
  .product-content table thead > tr:nth-child(n) > th:first-child,
  .cat-description table thead > tr:nth-child(n) > th:first-child,
  .product-content table thead > tr:nth-child(n) > td:first-child,
  .cat-description table thead > tr:nth-child(n) > td:first-child {
    width: 44.8% !important;
    padding-right: 14px;
  }

  .product-short table tbody > tr:nth-child(n) > td:first-child {
    width: 46% !important;
    padding-right: 14px;
  }

  .product-content table tbody > tr:nth-child(n) > td,
  .cat-description table tbody > tr:nth-child(n) > td {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .product-short table tbody > tr:nth-child(n) > td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .product-content h2 {
    padding-top: 36px;
  }

  .product-content h2,
  .cat-description h2 {
    font-size: 23px;
  }

  .e-con.parts-block {
    --padding-top: 36px;
  }

  .e-con.product-video {
    --padding-top: 36px;
  }

  .e-con.product-body,
  .elementor-location-single:not(:has(.product-body .product-content > *)) .e-con.product-video,
  .e-con.page-end,
  .e-con.parts-block {
    --padding-bottom: 56px;
  }

  .elementor-location-single:not(:has(.product-body .product-content > *)):not(:has(.elementor-widget-video)) .e-con.product-top {
    --padding-bottom: 48px;
  }

  .e-con .elementor-element.product-grid-list {
    --grid-column-gap: 12px;
  }
}

/* =====================================================================================================================
   Trang Tất cả sản phẩm (template «Tất cả sản phẩm» SP1–SP3 — trang Shop của Woo, amend M-08 · M-10). Port từ HTML/assets/css/style.css
   nguồn (.search · .chips button · .empty-note · .cat-line · .cat-child h3 · .cat-rows li · .cat-name · .cat-info · .copy-btn).
   - Ô tìm + nút lọc + câu "không tìm thấy" = markup của widget «Tra cứu sản phẩm» (class nguồn, widget không có control kiểu dáng);
     trung hoà kiểu mặc định của Hello cho label/input/button (label line-height 1, nút viền hồng, nền hồng khi focus).
   - Danh sách dòng → nhóm → máy = HTML của shortcode [anpha_danh_muc] (site plugin): lưới, vạch, chữ, trạng thái lọc (thuộc tính hidden
     do widget gắn) và trạng thái "Đã sao chép" (class is-copied do widget gắn 1,8 giây).
   ===================================================================================================================== */

/* Bộ lọc ẩn bằng thuộc tính hidden (như [hidden] của nguồn) — hàng/nhóm/khối dòng của danh sách có display riêng (lưới, flex) nên phải ép */
.cat-line[hidden],
.cat-line [hidden],
.catalog-search [hidden] {
  display: none !important;
}

/* Ô tìm */
.catalog-search .search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
  margin-bottom: 24px;
}

.catalog-search .search label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  color: var(--ink);
}

.catalog-search .search input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: none;
}

.catalog-search .search input:focus,
.catalog-search .search input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 15, 36, 0.12);
}

.catalog-search .search-count {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* Nút lọc theo dòng: viên thuốc viền xám, rê chuột viền đậm, nút đang chọn nền thương hiệu */
.catalog-search .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.catalog-search .chips button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: none;
}

.catalog-search .chips button:focus {
  background: var(--paper);
  color: var(--ink);
}

.catalog-search .chips button:hover {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.catalog-search .chips button[aria-pressed="true"],
.catalog-search .chips button[aria-pressed="true"]:focus,
.catalog-search .chips button[aria-pressed="true"]:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper);
}

/* Câu "Không tìm thấy sản phẩm phù hợp." (.empty-note nguồn) */
.catalog-search .empty-note {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--tint);
  color: var(--ink-2);
  font-size: 15px;
}

/* Danh sách tự sinh dòng → nhóm → máy (shortcode [anpha_danh_muc] của site plugin — markup + class của nguồn, M-10): khối dòng cách
   nhau 40; tên dòng + số máy trên vạch đen; nhóm = chữ nhỏ in hoa xám; máy = lưới tên · thông tin ngắn · nút "Sao chép link", vạch xám
   dưới mỗi máy (≤960: thông tin xuống hàng 2, nút chiếm 2 hàng). HTML do site plugin in — không có control, chữ/màu theo nguồn;
   link tên dòng/nhóm/máy không gạch chân (rê chuột tên máy gạch chân). Tên là mã model (.mono) = chữ số đều. */
.cat-lines-list .cat-line {
  padding-top: 40px;
}

.cat-lines-list .cat-line h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cat-lines-list .cat-line h2 a,
.cat-lines-list .cat-child h3 a,
.cat-lines-list .cat-name {
  color: inherit;
  text-decoration: none;
}

.cat-lines-list .cat-line h2 .meta {
  font-size: 15px;
  color: var(--ink-2);
}

.cat-lines-list .cat-child h3 {
  margin: 0;
  padding: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cat-lines-list .cat-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-lines-list .cat-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.cat-lines-list .cat-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.cat-lines-list .cat-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cat-lines-list .cat-name.mono {
  font-variant-numeric: tabular-nums;
}

.cat-lines-list .cat-info {
  font-size: 14px;
  color: var(--ink-2);
}

.cat-lines-list .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cat-lines-list .copy-btn:hover {
  border-color: var(--ink);
}

/* trạng thái "Đã sao chép" (class is-copied do widget gắn 1,8 giây) */
.cat-lines-list .copy-btn.is-copied {
  border-color: var(--ink);
  background: var(--ground);
}

.cat-lines-list .cat-line p.muted {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 960px) {
  .cat-lines-list .cat-rows li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }

  .cat-lines-list .cat-info {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
  }

  .cat-lines-list .copy-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}