/* FAQ accordion answer padding */
.accordion__item--content__copy {
  padding: 1rem 1.5rem 1.5rem;
}

/* Fix button--text-arrow: display as inline text link */
#main a.button.button--text-arrow,
#main a.media-items-list__link-arrow {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  color: rgb(0, 94, 184) !important;
}

/* Reset inner span */
#main a.button.button--text-arrow > span,
#main a.media-items-list__link-arrow > span {
  display: inline !important;
  white-space: nowrap !important;
  word-break: normal !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* SVG arrow: show full arrow shape, small size */
#main a.button.button--text-arrow svg,
#main a.media-items-list__link-arrow svg {
  display: inline !important;
  height: 0.75em !important;
  width: auto !important;
  vertical-align: middle !important;
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Remove Tailwind-variable-based transform on paths (show full arrow) */
#main a.button.button--text-arrow svg path,
#main a.media-items-list__link-arrow svg path {
  transform: none !important;
}

/* ============================================================
   Translogi header height — fixes breadcrumb / sticky-nav spacing
   ============================================================ */

/* Avigilon CSS uses --header-height for .sticky-navigation top position
   and scroll-padding-top. Set it to match Translogi's 60px site header. */
:root {
  --header-height: 60px;
  /* Override Avigilon's broken calc(var(--header-height) - 20px)
     which evaluates to -20px when --header-height was undefined. */
  scroll-padding-top: 70px;
}

/* WordPress admin bar adds 32px fixed bar → header sticks at top:32px,
   so effective blocked zone is 32 + 60 = 92px. */
body.admin-bar {
  --header-height: 92px;
}

/* Breathing room so breadcrumb doesn't press against sticky site header */
#overview {
  padding-top: 1.5rem;
}

/* All anchor sections need scroll-margin-top matching the sticky header height */
#features, #products, #appliances, #integrations,
#key-features, #cloud-services, #software-editions, #how-it-works,
#side-tabs, #industries, #cameras-and-sensors, #video-infrastructure,
#software, #related-products, #vms-solutions, #plans, #compare-table,
#downloads, #contact-us {
  scroll-margin-top: 70px;
}
body.admin-bar #features, body.admin-bar #products, body.admin-bar #appliances,
body.admin-bar #integrations, body.admin-bar #key-features,
body.admin-bar #cloud-services, body.admin-bar #software-editions,
body.admin-bar #how-it-works, body.admin-bar #side-tabs,
body.admin-bar #industries, body.admin-bar #cameras-and-sensors,
body.admin-bar #video-infrastructure, body.admin-bar #software,
body.admin-bar #related-products, body.admin-bar #vms-solutions,
body.admin-bar #plans, body.admin-bar #compare-table,
body.admin-bar #downloads, body.admin-bar #contact-us {
  scroll-margin-top: 102px;
}

/* ============================================================
   Bảo vệ #main khỏi bị Elementor global / kit CSS ghi đè
   Đặt TRƯỚC các rule Avigilon để không cần !important ở mọi nơi
   ============================================================ */

/* Đảm bảo body không bị ẩn scroll khi có theme normalize load */
body.tprod-product-page,
body.tprod-archive-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Match Avigilon body text color (--color-gray-700) */
  color: rgb(77, 77, 77);
  /* font-family được override bởi rule brand bên dưới (var(--tprod-font)) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset lại các thuộc tính mà Elementor kit / global CSS có thể override
   bên trong khu vực nội dung sản phẩm */
#main {
  font-size: 16px;
  line-height: 1.6;
  color: rgb(77, 77, 77);
  box-sizing: border-box;
}

/* Breadcrumb links: override browser a:link specificity (0,1,1) với (1,2,0) */
#breadcrumbs a.breadcrumbs__link,
#breadcrumbs a.breadcrumbs__link:link,
#breadcrumbs a.breadcrumbs__link:visited {
  color: inherit;
  text-decoration: none;
}
#main *,
#main *::before,
#main *::after {
  box-sizing: border-box;
}

/* ============================================================
   Bảo vệ Elementor CSS khỏi tự bị ghi đè bởi avigilon CSS
   bên ngoài #main (header, footer)
   ============================================================ */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
  box-sizing: border-box;
}

/* ============================================================
   Contact section spacing (archive page: section is py-0, needs breathing room)
   ============================================================ */
body.tprod-archive-page #contact-us {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* ============================================================
   Contact form response messages
   ============================================================ */
.tprod-form-response {
  min-height: 0;
  transition: all .2s;
}
.tprod-form-response--success {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  color: #15803d;
  font-size: 0.9375rem;
  border-radius: 2px;
}
.tprod-form-response--error {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  color: #b91c1c;
  font-size: 0.9375rem;
  border-radius: 2px;
}

/* ============================================================
   Plans / Comparison Table
   ============================================================ */
.tprod-plans-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.tprod-plans-header {
  text-align: center;
  margin-bottom: 2rem;
}
.tprod-plans-desc {
  max-width: 720px;
  margin: 0.75rem auto 0;
  color: rgb(77, 77, 77);
}
.tprod-plans-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.tprod-plans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.tprod-plans-table thead tr {
  background: #fff;
  border-bottom: 2px solid #e5e7eb;
}
.tprod-plans-table thead th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #111827;
  white-space: nowrap;
}
.tprod-plans-table thead th:not(.tprod-plans-table__feature-col) {
  text-align: center;
  min-width: 120px;
}
.tprod-plans-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}
.tprod-plans-table tbody tr:nth-child(odd) {
  background: #f9fafb;
}
.tprod-plans-table tbody tr:nth-child(even) {
  background: #fff;
}
.tprod-plans-table tbody tr:last-child {
  border-bottom: none;
}
.tprod-plans-table td {
  padding: 0.875rem 1.25rem;
  vertical-align: middle;
  text-align: center;
  color: rgb(77, 77, 77);
}
.tprod-plans-table__feature {
  text-align: left !important;
  font-weight: 600;
  color: #111827 !important;
  min-width: 200px;
}
.tprod-plans-check {
  color: #16a34a;
  font-size: 1.1rem;
  font-weight: 700;
}
.tprod-plans-empty::after {
  content: '—';
  color: #d1d5db;
}

/* ============================================================
   Benefits / Media with Text section
   ============================================================ */
.tprod-benefits-section {
  margin-top: 50px !important;
}

/* ============================================================
   Hide download filters that should be hidden by Alpine.js x-show=false
   ============================================================ */
.js-assetType-wrapper,
.js-productSuite-wrapper,
.js-productCategory-wrapper,
.js-documentCategory-wrapper,
.js-softwareType-wrapper,
.js-hidden-wrapper {
  display: none !important;
}

/* ============================================================
   Side Tabs layout fix
   ============================================================ */
/* Prevent flex children from overflowing their tracks */
@media (min-width: 1024px) {
  .side-tabs__tabs    { min-width: 0; }
  .side-tabs__contents { min-width: 0; }
}

/* withIcon: wrapper fills space after icon so label stays flush-left */
.side-tabs__tab.withIcon .side-tabs__tab--wrapper {
  flex: 1;
}

/* Mega menu CSS đã chuyển sang translogi-global.css (load trên tất cả trang) */
/*

/* Mega panel: cố định bên dưới header, full-width */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu {
  position: fixed !important;
  top: var(--header-height, 60px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;

  /* Căn nội dung vào giữa khớp container site */
  padding: 28px max(32px, calc((100vw - 1240px) / 2)) !important;

  /* Hiển thị các cột ngang */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;

  /* Kiểu dáng */
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10) !important;
  border-top: 3px solid #43baff !important;
  border-radius: 0 !important;
  z-index: 9999 !important;

  /* Tắt animation translateY (không cần vì position:fixed) */
  transform: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Cột cấp-2 */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li {
  flex: 1 1 0 !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  border-right: 1px solid #f3f4f6 !important;
}
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li:last-child {
  border-right: none !important;
}

/* Link cấp-2: tiêu đề cột */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > a {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #1a1b1e !important;
  padding: 0 0 10px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid #e5e7eb !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > a:hover {
  color: #43baff !important;
}

/* Ẩn mũi tên dropdown ở tiêu đề cột */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li.menu-item-has-children > a::after {
  display: none !important;
}

/* Sub-menu cấp-3: luôn hiển thị inline trong cột */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
}

/* Li cấp-3 */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu > li {
  display: block !important;
  padding: 0 !important;
  position: static !important;
}

/* Link cấp-3 */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu > li > a {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #4b5563 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 5px 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  border: none !important;
  transition: color 0.15s ease, padding-left 0.15s ease !important;
}
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu > li > a:hover {
  color: #43baff !important;
  padding-left: 5px !important;
}

/* Ẩn decoration "//" trước link cấp-3 */
.main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu > li > a::before {
  display: none !important;
}

/* Mobile (≤1024px): fallback về dropdown thông thường */
@media (max-width: 1024px) {
  .main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: -40px !important;
    width: auto !important;
    min-width: 280px !important;
    flex-direction: column !important;
    padding: 25px 0 !important;
    border-top: none !important;
    transform: translateY(30px) !important;
    transition: all 0.3s ease-in-out !important;
  }
  .main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children):hover > ul.sub-menu {
    transform: translateY(0) !important;
  }
  .main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li {
    flex: none !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }
  .main-navigation > ul > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu > li > ul.sub-menu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
*/

/* ============================================================
   BRAND OVERRIDE — đồng bộ với website Engitech/Translogi
   Main color #075793 (xanh đậm) — Secondary #43baff (xanh nhạt)
   Font: Poppins
   Pattern: chữ xanh nền trắng + chữ trắng nền xanh
   ============================================================ */

:root {
  --tprod-primary:        #075793;
  --tprod-primary-hover:  #053e6b;
  --tprod-secondary:      #43baff;
  --tprod-secondary-hover: #1ea2ed;
  --tprod-text:           #1a1b1e;
  --tprod-text-muted:     #4b5563;
  --tprod-font:           "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Font: Poppins cho toàn bộ plugin pages ───────────────── */
/* QUAN TRỌNG: KHÔNG dùng * selector vì sẽ đè font icon (Flaticon, FontAwesome).
   Chỉ áp dụng cho body + form elements (không inherit mặc định).
   Các element text khác (p, h1-h6, span, div...) tự inherit từ body. */
body.tprod-product-page,
body.tprod-archive-page {
  font-family: var(--tprod-font);
}
/* Form elements không inherit font mặc định → cần override riêng */
body.tprod-product-page button,
body.tprod-product-page input,
body.tprod-product-page select,
body.tprod-product-page textarea,
body.tprod-archive-page button,
body.tprod-archive-page input,
body.tprod-archive-page select,
body.tprod-archive-page textarea {
  font-family: var(--tprod-font);
}
/* Icon font (Flaticon trong Engitech) KHÔNG bị động vào — pseudo-element giữ nguyên */

/* ── Primary buttons (GET PRICING, Submit, CTA chính) ─────── */
/* Pattern: chữ trắng nền xanh, hover đậm hơn */
body.tprod-product-page #main .button.button--primary,
body.tprod-archive-page #main .button.button--primary,
body.tprod-product-page #main button.button--primary,
body.tprod-archive-page #main button.button--primary,
body.tprod-product-page #main a.button.button--primary,
body.tprod-archive-page #main a.button.button--primary {
  background: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}
body.tprod-product-page #main .button.button--primary:hover,
body.tprod-archive-page #main .button.button--primary:hover,
body.tprod-product-page #main button.button--primary:hover,
body.tprod-archive-page #main button.button--primary:hover,
body.tprod-product-page #main a.button.button--primary:hover,
body.tprod-archive-page #main a.button.button--primary:hover {
  background: var(--tprod-primary-hover) !important;
  border-color: var(--tprod-primary-hover) !important;
  color: #ffffff !important;
}

/* ── Secondary / outline buttons (View Model, Add card...) ── */
/* Pattern: chữ xanh nền trắng, hover đảo lại */
body.tprod-product-page #main .button.button--secondary,
body.tprod-archive-page #main .button.button--secondary,
body.tprod-product-page #main a.button.button--secondary,
body.tprod-archive-page #main a.button.button--secondary {
  background: #ffffff !important;
  border: 1px solid var(--tprod-primary) !important;
  color: var(--tprod-primary) !important;
}
body.tprod-product-page #main .button.button--secondary:hover,
body.tprod-archive-page #main .button.button--secondary:hover,
body.tprod-product-page #main a.button.button--secondary:hover,
body.tprod-archive-page #main a.button.button--secondary:hover {
  background: var(--tprod-primary) !important;
  color: #ffffff !important;
}

/* ── Text-arrow link (View Model, Read more) ──────────────── */
/* Override màu rgb(0, 94, 184) Avigilon → brand */
body.tprod-product-page #main a.button.button--text-arrow,
body.tprod-archive-page #main a.button.button--text-arrow,
body.tprod-product-page #main a.media-items-list__link-arrow,
body.tprod-archive-page #main a.media-items-list__link-arrow {
  color: var(--tprod-primary) !important;
}
body.tprod-product-page #main a.button.button--text-arrow:hover,
body.tprod-archive-page #main a.button.button--text-arrow:hover {
  color: var(--tprod-secondary-hover) !important;
}

/* ── Links chung trong content ────────────────────────────── */
body.tprod-product-page #main a,
body.tprod-archive-page #main a {
  color: var(--tprod-primary);
}
body.tprod-product-page #main a:hover,
body.tprod-archive-page #main a:hover {
  color: var(--tprod-secondary-hover);
}

/* ── Card hover / focus state ─────────────────────────────── */
body.tprod-product-page #main .product-card:hover,
body.tprod-archive-page #main .product-card:hover {
  border-color: var(--tprod-primary) !important;
  box-shadow: 0 8px 24px rgba(7, 87, 147, 0.12) !important;
}

/* ── Tabs active state (Cloud Services, Software Editions...) ── */
body.tprod-product-page #main .tabs__tab.is-active,
body.tprod-archive-page #main .tabs__tab.is-active,
body.tprod-product-page #main [class*="tab"][class*="active"],
body.tprod-archive-page #main [class*="tab"][class*="active"] {
  border-color: var(--tprod-primary) !important;
  color: var(--tprod-primary) !important;
}

/* ── Filter chips / pills (selected state) ────────────────── */
body.tprod-archive-page #main .filter-chip.is-selected,
body.tprod-archive-page #main .product-suite-pill[aria-pressed="true"] {
  background: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}

/* ── Headings color cho consistency ───────────────────────── */
body.tprod-product-page #main h1,
body.tprod-product-page #main h2,
body.tprod-product-page #main h3,
body.tprod-archive-page #main h1,
body.tprod-archive-page #main h2,
body.tprod-archive-page #main h3 {
  color: var(--tprod-text);
}

/* ── Focus ring trên inputs ───────────────────────────────── */
body.tprod-product-page input:focus,
body.tprod-product-page select:focus,
body.tprod-product-page textarea:focus,
body.tprod-archive-page input:focus,
body.tprod-archive-page select:focus,
body.tprod-archive-page textarea:focus {
  outline: 2px solid var(--tprod-primary) !important;
  outline-offset: 2px !important;
  border-color: var(--tprod-primary) !important;
}

/* ── Specific Avigilon colors → brand ─────────────────────── */
/* Avigilon dùng #005eb8 (rgb 0,94,184) ở nhiều nơi */
body.tprod-product-page [style*="color: #005eb8"],
body.tprod-archive-page [style*="color: #005eb8"],
body.tprod-product-page [style*="color:rgb(0, 94, 184)"],
body.tprod-archive-page [style*="color:rgb(0, 94, 184)"] {
  color: var(--tprod-primary) !important;
}
body.tprod-product-page [style*="background: #005eb8"],
body.tprod-archive-page [style*="background: #005eb8"],
body.tprod-product-page [style*="background-color: #005eb8"],
body.tprod-archive-page [style*="background-color: #005eb8"] {
  background: var(--tprod-primary) !important;
}

/* ── Buttons broader selectors — bắt cả khi không có .button class prefix
   Avigilon dùng `#main .button--primary` (không có .button) ở nhiều chỗ.
   Selector mình cũ chỉ match `.button.button--primary` — bỏ sót → bị nền đen */
body.tprod-product-page #main .button--primary,
body.tprod-archive-page  #main .button--primary {
  background-color: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}
body.tprod-product-page #main .button--primary:hover,
body.tprod-archive-page  #main .button--primary:hover {
  background-color: var(--tprod-primary-hover) !important;
  border-color: var(--tprod-primary-hover) !important;
  color: #ffffff !important;
}
body.tprod-product-page #main .button--secondary,
body.tprod-archive-page  #main .button--secondary {
  background-color: #ffffff !important;
  border-color: var(--tprod-primary) !important;
  color: var(--tprod-primary) !important;
}
body.tprod-product-page #main .button--secondary:hover,
body.tprod-archive-page  #main .button--secondary:hover {
  background-color: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}

/* ── Button --clear (filter CLEAR button trên trang archive) ──── */
body.tprod-archive-page  #main .button--clear,
body.tprod-product-page  #main .button--clear {
  background-color: transparent !important;
  border-color: var(--tprod-primary) !important;
  color: var(--tprod-primary) !important;
}
body.tprod-archive-page  #main .button--clear:hover,
body.tprod-product-page  #main .button--clear:hover {
  background-color: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}

/* ── Carousel nav dots (pagination dots dưới gallery) ──────── */
/* Avigilon mặc định dots màu đen opacity 25% → đổi sang brand */
body.tprod-product-page .carousel__nav button div,
body.tprod-product-page .carousel__gallery .carousel__nav button div,
body.tprod-product-page .carousel-option2__thumbs.is-current {
  background-color: var(--tprod-primary) !important;
}

/* ── Form submit buttons (contact form, hubspot form...) ────
   Avigilon mặc định submit button có background ĐEN (rgb(0 0 0))
   Override sang brand color để consistent với rest of site */
body.tprod-product-page .form__form [type="submit"],
body.tprod-archive-page  .form__form [type="submit"],
body.tprod-product-page form [type="submit"]:not(.button--secondary):not(.button-secondary),
body.tprod-archive-page  form [type="submit"]:not(.button--secondary):not(.button-secondary),
body.tprod-product-page input[type="submit"],
body.tprod-archive-page  input[type="submit"],
body.tprod-product-page button[type="submit"],
body.tprod-archive-page  button[type="submit"] {
  background-color: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}
body.tprod-product-page .form__form [type="submit"]:hover,
body.tprod-archive-page  .form__form [type="submit"]:hover,
body.tprod-product-page form [type="submit"]:hover:not(.button--secondary):not(.button-secondary),
body.tprod-archive-page  form [type="submit"]:hover:not(.button--secondary):not(.button-secondary),
body.tprod-product-page input[type="submit"]:hover,
body.tprod-archive-page  input[type="submit"]:hover,
body.tprod-product-page button[type="submit"]:hover,
body.tprod-archive-page  button[type="submit"]:hover {
  background-color: var(--tprod-primary-hover) !important;
  border-color: var(--tprod-primary-hover) !important;
  color: #ffffff !important;
}
/* HubSpot embedded form submit (nếu có) */
body.tprod-product-page .hs-button,
body.tprod-archive-page  .hs-button,
body.tprod-product-page .hs_submit input,
body.tprod-archive-page  .hs_submit input {
  background-color: var(--tprod-primary) !important;
  border-color: var(--tprod-primary) !important;
  color: #ffffff !important;
}
body.tprod-product-page .hs-button:hover,
body.tprod-archive-page  .hs-button:hover {
  background-color: var(--tprod-primary-hover) !important;
  color: #ffffff !important;
}

/* ── Header CTA (Plugin's custom header) ──────────────────── */
.tprod-header a.tprod-header__cta,
.tprod-header button.tprod-header__cta {
  background: var(--tprod-primary);
  color: #ffffff;
}
.tprod-header a.tprod-header__cta:hover,
.tprod-header button.tprod-header__cta:hover {
  background: var(--tprod-primary-hover);
}

/* ============================================================
   Single Product Page — bố cục mới theo feedback khách
   - Models: ABC line below title
   - 2 buttons (Get Pricing + Data Sheet) side-by-side
   - 4 doc icons row above buttons
   ============================================================ */

/* Models: ABC — 1 dòng text gọn dưới title */
body.tprod-product-page .product-detail-option2__models {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--tprod-text-muted);
}
body.tprod-product-page .product-detail-option2__models-label {
  font-weight: 600;
  color: var(--tprod-text);
}
body.tprod-product-page .product-detail-option2__models-value {
  font-weight: 500;
  color: var(--tprod-primary);
  letter-spacing: 0.2px;
}

/* Description block — spacing tốt hơn khi không có specs list */
body.tprod-product-page .product-detail-option2__description {
  margin-bottom: 24px;
}

/* 2-button dual layout — side-by-side */
body.tprod-product-page .product-detail-option2__buttons--dual {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;          /* specs-row đã có margin-bottom 20px → không cần margin-top thêm */
}
body.tprod-product-page .product-detail-option2__buttons--dual .product-detail-option2__button {
  flex: 1 1 calc(50% - 6px);
  min-width: 140px;
}
body.tprod-product-page .product-detail-option2__buttons--dual .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Primary button (Get pricing) — chữ trắng nền xanh */
body.tprod-product-page .product-detail-option2__buttons--dual .button--primary {
  background: var(--tprod-primary);
  color: #ffffff;
  border: 1px solid var(--tprod-primary);
}
body.tprod-product-page .product-detail-option2__buttons--dual .button--primary:hover {
  background: var(--tprod-primary-hover);
  border-color: var(--tprod-primary-hover);
  color: #ffffff;
}

/* Secondary button (Data sheet) — chữ xanh nền trắng, hover đảo */
body.tprod-product-page .product-detail-option2__buttons--dual .button--secondary {
  background: #ffffff;
  color: var(--tprod-primary);
  border: 1px solid var(--tprod-primary);
}
body.tprod-product-page .product-detail-option2__buttons--dual .button--secondary:hover {
  background: var(--tprod-primary);
  color: #ffffff;
}

/* Highlights/Specs row — CHỈ icon (không text), to và nổi bật
   Line ở DƯỚI icons (border-bottom) thay vì trên — theo yêu cầu khách */
body.tprod-product-page .product-detail-option2__specs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;                 /* icons gần nhau hơn (was 28px) */
  padding: 12px 0 16px;      /* gần text phía trên hơn (was 20px) */
  margin: 8px 0 16px;        /* sát description hơn (was 20px) */
  border-bottom: 1px solid #e5e7eb;
}

/* Bỏ background xám + border + border-radius của carousel slides
   Avigilon mặc định: bg #f7f7f7 + border 1px solid #e6e6e6 + radius 1rem
   → Để ảnh sản phẩm hiển thị "trần", không có khung xám bao quanh */
body.tprod-product-page .carousel-option2__slide,
body.tprod-product-page .carousel-option2__slides {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Carousel scroll behavior — JS custom (templates/single-product.php) handle smooth scroll 600ms
   với cubic-ease-in-out qua requestAnimationFrame.
   Set scroll-behavior auto để KHÔNG xung đột với JS animation.
   scroll-snap proximity (nhẹ hơn mandatory) để snap nhẹ sau khi animation xong */
body.tprod-product-page .carousel-option2__slides {
  scroll-behavior: auto !important;
  scroll-snap-type: x proximity !important;
}

/* Slide nội bộ — transition mượt khi hover/scroll */
body.tprod-product-page .carousel-option2__slide {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Thumbnail nav active state — transition mượt */
body.tprod-product-page .carousel-option2__thumbs {
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
body.tprod-product-page .carousel-option2__thumbs:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Arrow buttons — hover effect mượt
   QUAN TRỌNG: Avigilon flip prev arrow qua rotate(-180deg) → hover transform
   PHẢI giữ rotate(-180deg) nếu không mũi tên prev sẽ quay ngược. */
body.tprod-product-page .carousel-option2__arrow-button {
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
/* Next arrow — hover chỉ đổi màu (không zoom) */
body.tprod-product-page .carousel-option2__arrow-button.js-next-o2 {
  color: inherit;
}
body.tprod-product-page .carousel-option2__arrow-button.js-next-o2:hover {
  color: var(--tprod-primary);
}
/* Prev arrow — phải giữ rotate(-180deg) để mũi tên không xoay ngược, đổi màu */
body.tprod-product-page .carousel-option2__arrow-button.js-previous-o2:hover {
  transform: rotate(-180deg);
  color: var(--tprod-primary);
}

/* Respect prefers-reduced-motion — tắt animation cho user có chế độ giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  body.tprod-product-page .carousel-option2__slides {
    scroll-behavior: auto !important;
  }
  body.tprod-product-page .carousel-option2__slide,
  body.tprod-product-page .carousel-option2__thumbs,
  body.tprod-product-page .carousel-option2__arrow-button {
    transition: none !important;
  }
}

/* Bố cục 3:4 — gallery 3 phần / content 4 phần (yêu cầu khách)
   Override Avigilon mặc định 60/40 → 42.86/57.14 */
@media (min-width: 1024px) {
  body.tprod-product-page .product-detail-option2 {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem;
    align-items: flex-start;
  }
  body.tprod-product-page .product-detail-option2__gallery {
    width: 42.857% !important;   /* 3/(3+4) */
    flex: 0 0 42.857% !important;
  }
  body.tprod-product-page .product-detail-option2__content-wrap {
    width: 57.143% !important;   /* 4/(3+4) */
    flex: 1 1 57.143% !important;
  }
}

/* Ẩn Avigilon's dotted separator nếu xuất hiện giữa specs row và buttons */
body.tprod-product-page .product-detail-option2__specs-row + hr,
body.tprod-product-page .product-detail-option2__specs-row + .product-detail-option2__divider,
body.tprod-product-page .product-detail-option2__specs-row + .product-detail-option2__separator {
  display: none !important;
}

/* Bỏ dotted border-bottom của Avigilon content wrapper
   (Avigilon set: .product-detail-option2__content { border-style:dotted; padding-bottom:2rem })
   Chính line dotted này là line RED BOX khách muốn xóa */
body.tprod-product-page .product-detail-option2__content {
  border-bottom: 0 !important;
  border-style: none !important;
  padding-bottom: 0 !important;
}
body.tprod-product-page .product-detail-option2__spec-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.tprod-product-page .product-detail-option2__spec-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;             /* nhỏ hơn chút (was 64) — gần nhau hơn */
  height: 56px;
  padding: 8px;
  border-radius: 10px;     /* VUÔNG BO CẠNH (was 50% circle) — giống icon hãng */
  background: rgba(7, 87, 147, 0.06);
  transition: transform 0.18s ease, background 0.18s ease;
  cursor: help;
}
body.tprod-product-page .product-detail-option2__spec-icon:hover {
  background: rgba(7, 87, 147, 0.12);
  transform: translateY(-2px);
}
body.tprod-product-page .product-detail-option2__spec-icon img {
  width: 36px;             /* phù hợp với container 56px (was 40 trong 64) */
  height: 36px;
  object-fit: contain;
  display: block;
}

/* Flex auto-wrap — không cần rule riêng cho 1/2/3/4 items */

/* Mobile: buttons stack vertical, specs row co lại icons nhỏ hơn chút */
@media (max-width: 640px) {
  body.tprod-product-page .product-detail-option2__buttons--dual {
    flex-direction: column;
  }
  body.tprod-product-page .product-detail-option2__buttons--dual .product-detail-option2__button {
    flex: 1 1 100%;
  }
  body.tprod-product-page .product-detail-option2__specs-row {
    gap: 16px;
    padding: 16px 0;
  }
  body.tprod-product-page .product-detail-option2__spec-icon {
    width: 52px;
    height: 52px;
  }
  body.tprod-product-page .product-detail-option2__spec-icon img {
    width: 32px;
    height: 32px;
  }
}

/* ── Load More button (product listing pagination) ────────── */
.tprod-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 8px;
  width: 100%;
}
.tprod-load-more-btn {
  display: inline-block;
  background: var(--tprod-primary);
  color: #ffffff;
  border: 1px solid var(--tprod-primary);
  border-radius: 6px;
  padding: 12px 36px;
  font-family: var(--tprod-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
  line-height: 1.4;
}
.tprod-load-more-btn:hover {
  background: var(--tprod-primary-hover);
  color: #ffffff;
}
.tprod-load-more-btn:active {
  transform: translateY(1px);
}
.tprod-load-more-btn:focus-visible {
  outline: 2px solid var(--tprod-secondary);
  outline-offset: 3px;
}