/*
 * TECOTEC - Product Page CSS (FIXED SVG VERSION)
 * Source: Figma Make B2B-Product-Page-Design
 * Enqueue tại: wp_enqueue_scripts (is_product only)
 *
 * Color tokens từ source:
 *   Blue primary : #146EB4
 *   Orange       : #FF9900
 *   Text dark    : #1A1A1A
 *   Text muted   : #6B7280
 *   BG page      : #F4F6F8
 *   BG white     : #ffffff
 *   Border       : rgba(0,0,0,0.1) / #E5E7EB
 *   Radius       : 8px
 */

/* =====================================================
   RESET / BASE
   ===================================================== */
#wrapper {
    background-color: #f4f6f8 !important;
}

#wpforms-submit-104621{
    width: 100%;
}

div.wpforms-container-full .wpforms-form .wpforms-head-container {
    padding: 0 !important;
}

.width-100{
    width: 100% !important;
    margin-bottom: 1rem !important;
}

#bao-gia{
    border-radius: 12px;
}


.tec-page, .tec-page * { box-sizing: border-box; }
.tec-page a { text-decoration: none; }
.tec-page button { cursor: pointer; font-family: inherit; margin: 0 !important}
.tec-page img { display: block; max-width: 100%; }

/* =====================================================
   LAYOUT
   ===================================================== */
.tec-page {
  background: #F4F6F8;
  /*font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;*/
  font-size: 16px;
  color: #1A1A1A;
}

.tec-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

@media (min-width: 768px) {
  .tec-wrap { padding: 0 24px; }
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.tec-bc {
  /*background: #fff;*/
  /*border-bottom: 1px solid rgba(0,0,0,0.08);*/
  padding-top: 10px;
  font-size: 13px;
}

.tec-bc .woocommerce-breadcrumb,
.tec-bc nav { color: #6B7280; }

.tec-bc a { color: #146EB4; }
.tec-bc a:hover { text-decoration: underline; }

/* =====================================================
   CARD
   ===================================================== */
.tec-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-top: 16px;
}

@media (min-width: 768px) {
  .tec-card {
    padding: 24px;
    margin-top: 16px;
  }
}

/* =====================================================
   PRODUCT GRID (Gallery + Info)
   ===================================================== */
.tec-pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .tec-pgrid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* =====================================================
   GALLERY
   ===================================================== */
.tec-gal { display: flex; flex-direction: column; gap: 16px; }

.tec-gal__main {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.tec-gal__img {
  width: 100%;
  height: 364px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}

/* Zoom button */
.tec-gal__zoom {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 8px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  padding: 0;
  flex-shrink: 0;
}

.tec-gal__zoom svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: #146EB4;
  color: #146EB4;
  flex-shrink: 0;
}
.tec-gal__main:hover .tec-gal__zoom { opacity: 1; }

/* Nav arrows - FIXED */
.tec-gal__arr {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.tec-gal__arr:hover { background: #fff; }
.tec-gal__arr--l { left: 8px; }
.tec-gal__arr--r { right: 8px; }

.tec-gal__arr svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: #146EB4;
  color: #146EB4;
  flex-shrink: 0;
}

/* Thumbnails */
.tec-gal__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }

.tec-gal__th {
  width: 64px; height: 64px;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  padding: 0;
  background: #fff;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.tec-gal__th.is-active { border-color: #146EB4; }
.tec-gal__th:hover { border-color: #146EB4; }
.tec-gal__th-img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================
   PRODUCT INFO
   ===================================================== */
.tec-info { display: flex; flex-direction: column; }

.tec-info__h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #1A1A1A;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .tec-info__h1 { font-size: 22px; }
}

/* =====================================================
   META (Brand, SKU, Category, Tags)
   ===================================================== */
.tec-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.tec-meta__r { display: flex; align-items: flex-start; gap: 36px; }

.tec-meta__k {
  color: #146EB4;
  font-size: 14px;
  min-width: 144px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.tec-meta__v { font-size: 14px; color: #1A1A1A; }
.tec-meta__v a:hover { text-decoration: underline; color: #ff9900 !important}



.tec-meta__brand { color: #1A1A1A; font-weight: 700; }
.tec-meta__brand:hover { text-decoration: underline; }

.tec-meta__more { color: #146EB4; font-size: 13px; margin-left: 4px; }
.tec-meta__more:hover { text-decoration: underline; }

.tec-meta__v--tags a { color: #146EB4; }
.tec-meta__v--tags a:hover { text-decoration: underline; color: #ff9900 !important}

/* Tags: bottom spacing */
.tec-meta__r:last-child { margin-bottom: 8px; }

/* =====================================================
   PRICE BOX (has price) - UPDATED
   ===================================================== */
.tec-pricebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F4F6F8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  gap: 12px;
}

.tec-pricebox__lbl {
  font-size: 14px;
  color: #6B7280;
  flex-shrink: 0;
}

.tec-pricebox__prices {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tec-pricebox__sale {
  font-size: 20px;
  font-weight: 700;
  color: #EF4444;
}

.tec-pricebox__regular {
  font-size: 16px;
  color: #FF9900;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.tec-pricebox__val {
  font-size: 20px;
  font-weight: 700;
  color: #FF9900;
}

.tec-pricebox__regular,
.tec-pricebox__regular span{
  color:#146eb4;
}

/* =====================================================
   QUANTITY
   ===================================================== */
.tec-cart-form { margin-bottom: 0; }

.tec-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.tec-qty__lbl { font-size: 14px; color: #1A1A1A; flex-shrink: 0; }

.tec-qty__ctrl {
  display: flex;
  align-items: center;
  border: 1.5px solid #146EB4;
  border-radius: 8px;
  overflow: hidden;
}

.tec-qty__btn {
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: #1A1A1A;
  transition: background 0.15s;
  flex-shrink: 0;
}
.tec-qty__btn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: #1A1A1A;
  color: #1A1A1A;
  flex-shrink: 0;
}
.tec-qty__btn:hover { background: #F4F6F8; }

.tec-qty__input {
  width: 52px; height: 40px;
  border: none !important;
  box-shadow: none !important;
  border-left: 1.5px solid #146EB4;
  border-right: 1.5px solid #146EB4;
  text-align: center;
  font-size: 16px;
  color: #1A1A1A;
  -moz-appearance: textfield;
  outline: none !important;
  margin: 0;
  background: transparent;
}
.tec-qty__input::-webkit-inner-spin-button,
.tec-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* =====================================================
   BUTTONS
   ===================================================== */
.tec-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.tec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  text-transform: inherit !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5 !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1.5px solid transparent;
  text-align: center;
  margin-right: 0 !important;
}


.tec-btn--blue {
  flex: 1;
  background: #146EB4;
  color: #fff;
  border-color: #146EB4;
}
.tec-btn--blue:hover { background: #0f5a94; border-color: #0f5a94; color: #fff; }

.tec-btn--orange {
  /*flex: 1;*/
  background: #FF9900;
  color: #fff;
  border-color: #FF9900;
  width: 50% !important;
  margin-bottom: 0 !important;
}
.tec-btn--orange:hover { background: #e68a00; border-color: #e68a00; color: #fff; }

.tec-btn--outline {
  background: transparent;
  color: #146EB4;
  border-color: #146EB4;
}
.tec-btn--outline:hover { background: #146EB4; color: #fff; }

.tec-btn--block {
  width: 100%;
  display: flex;
  margin-bottom: 16px;
}



.tec-btn--sm {
  padding: 8px 16px;
  font-size: 14px;
  width: 100%;
  margin-top: 12px;
}

/* =====================================================
   NO PRICE: LIÊN HỆ BOX
   ===================================================== */
.tec-lien-he-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #F4F6F8;
  border-left: 4px solid #FF9900;
  border-radius: 0 8px 8px 0;
  padding: 16px;
  margin-bottom: 20px;
}

.tec-lien-he-box__title {
  font-size: 18px;
  font-weight: 700;
  color: #FF9900;
}

.tec-lien-he-box__sub {
  font-size: 14px;
  color: #6B7280;
}

/* =====================================================
   TRUST BAR
   ===================================================== */
.tec-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border-top: 1px solid #E5E7EB;
  padding-top: 16px;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .tec-trust { grid-template-columns: repeat(4, 1fr); }
}

.tec-trust__i {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tec-trust__i span {
  font-size: 13px;
  color: #1A1A1A;
  line-height: 1.4;
}

/* =====================================================
   TABS
   ===================================================== */
.tec-tabs-wrap { padding-top: 4px; }

.tec-tabs-nav-wrap {
  position: relative;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 0;
}

.tec-tabs-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tec-tabs-nav::-webkit-scrollbar { display: none; }

.tec-tabs-nav__btn {
  position: relative;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  background: none;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

@media (min-width: 768px) {
  .tec-tabs-nav__btn { font-size: 14px; padding: 12px 24px; }
}

.tec-tabs-nav__btn:hover { color: #1A1A1A; }

.tec-tabs-nav__btn.is-active {
  color: #1A1A1A;
  font-weight: 600;
}

.tec-tabs-nav__btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 3px;
  background: #FF9900;
  border-radius: 3px 3px 0 0;
}

/* Panels */
.tec-panel { display: none; padding: 16px 0; }
.tec-panel.is-active { display: block; }

@media (min-width: 768px) {
  .tec-panel { padding: 24px 0; }
}

/* WYSIWYG content */
.tec-wysiwyg { font-size: 15px; line-height: 1.7; color: #1A1A1A; }
.tec-wysiwyg h3 { color: #146EB4; font-size: 17px; margin-bottom: 8px; margin-top: 20px; }
.tec-wysiwyg h3:first-child { margin-top: 0; }
.tec-wysiwyg p { color: #6B7280; margin-bottom: 12px; }
.tec-wysiwyg ul { list-style: disc; padding-left: 24px; color: #6B7280; }
.tec-wysiwyg li { margin-bottom: 6px; }

/* Table thong so (WYSIWYG nếu user nhập bảng) */
.tec-wysiwyg table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; }
.tec-wysiwyg table thead tr { background: #146EB4; }
.tec-wysiwyg table thead th { color: #fff; padding: 10px 16px; text-align: left; font-size: 14px; }
.tec-wysiwyg table tbody tr:nth-child(odd) { background: #F4F6F8; }
.tec-wysiwyg table tbody tr:nth-child(even) { background: #fff; }
.tec-wysiwyg table td { padding: 10px 16px; font-size: 14px; color: #1A1A1A; }
.tec-wysiwyg table td:last-child { color: #6B7280; }

/* Table thong tin bo sung */
.tec-table-scroll { overflow-x: auto; }
.tec-table { width: 100%; border-collapse: collapse; }
.tec-table--ttbs tr { border-bottom: 1px solid #F3F4F6; }
.tec-table__k { padding: 12px 16px; font-size: 13px; font-weight: 700; color: #1A1A1A; width: 33%; }
.tec-table__v { padding: 12px 16px; font-size: 14px; color: #6B7280; }

/* Doclist */
.tec-doclist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tec-doclist__item { display: flex; align-items: center; gap: 8px; }
.tec-doclist__dot { color: #333; margin-top: 3px; flex-shrink: 0; }
.tec-doclist__link { color: #146EB4; font-size: 14px; line-height: 1.5; word-break: break-all; }
.tec-doclist__link:hover { text-decoration: underline; }

/* =====================================================
   RELATED PRODUCTS
   ===================================================== */
.tec-related {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .tec-related {
    margin-top: 40px;
  }
}

.tec-related__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .tec-related__hd {
    margin-bottom: 12px;
  }
}

.tec-related__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
}

.tec-related__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tec-related__arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #146eb4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tec-related__arrow:hover {
  border-color: #146eb4;
  background: #f5fbff;
}

.tec-related__arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tec-related__arrow svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}

.tec-related__arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* khung scroll */
.tec-related__scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.tec-related__scroll::-webkit-scrollbar {
  display: none;
}

/* card */
.tec-rel-card {
  flex: 0 0 calc((100% - 96px) / 5);
  min-width: calc((100% - 96px) / 5);
  max-width: calc((100% - 96px) / 5);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  flex:0 0 auto;
}

.tec-rel-card__img-wrap {
  display: block;
  background: #fff;
}

.tec-rel-card__img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  display: block;
  background: #fff;
}

.tec-rel-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tec-rel-card__name {
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.5;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 46px;
}

.tec-rel-card__name a {
  color: #1a1a1a;
  text-decoration: none;
}

.tec-rel-card__name a:hover {
  color: #146eb4;
}

.tec-rel-card__price {
  margin-bottom: 16px;
  font-size: 14.4px;
  font-weight: 700;
  color: #146eb4;
}


.tec-rel-card .tec-btn {
  margin-top: auto;
}

.tec-related__scroll{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.tec-related__scroll::-webkit-scrollbar{
  display:none;
}


/* tablet */
@media (max-width: 991px) {
  .tec-related__scroll {
    gap: 16px;
  }

  .tec-rel-card {
    flex: 0 0 calc((100% - 32px) / 3); /* 3 cột */
    min-width: calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
  }

  .tec-rel-card__img {
    height: 180px;
  }
}


/* =====================================================
   QUICK SUPPORT
   ===================================================== */
.tec-support {
  margin-top: 24px;
  background: #146EB4;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
}

.tec-sc[href] {
  text-decoration: none !important;
  color: inherit !important;
}

.tec-support__grid a.tec-sc {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  position: relative;
}

.tec-support__grid a.tec-sc:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateY(-4px);
}

.tec-support__grid a.tec-sc:hover .tec-sc__icon {
  background: #FF9900;
}

.tec-support__h2{
  color:#fff;
  font-size:18px;
  font-weight:500;
  margin:0 0 8px;
  line-height:1.5;
}

.tec-support__sub{
  color:rgba(255,255,255,.7);
  font-size:13px;
  margin:0 0 24px;
}

.tec-support__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

@media (min-width:768px){

  .tec-support{
    margin-top:40px;
    padding:32px 24px;
  }

  .tec-support__grid a.tec-sc{
    padding:20px;
    gap:12px;
  }

  .tec-support__h2{
    font-size:20px;
  }

  .tec-support__sub{
    font-size:14px;
    margin-bottom:32px;
  }

}

@media (min-width:1024px){

  .tec-support__grid{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }

}

/* Support card */
.tec-sc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: default;
}

@media (min-width: 768px) { .tec-sc { padding: 20px; gap: 12px; } }

.tec-sc:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateY(-4px);
}

/* Orange accent top bar */
.tec-sc__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #FF9900;
}

.tec-sc__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #146EB4;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s;
  flex-shrink: 0;
}

.tec-sc:hover .tec-sc__icon { background: #FF9900; }

.tec-sc__type { font-size: 13px; color: #6B7280; }
.tec-sc__val  { font-size: 15px; font-weight: 600; color: #1A1A1A; text-align: center; }
.tec-sc__sub  { font-size: 12px; color: #9CA3AF; text-align: center; line-height: 1.4; }

/* =====================================================
   LIGHTBOX - UPDATED (Next/Prev Buttons)
   ===================================================== */

.tec-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.tec-lb[hidden] {
  display: flex;
  opacity: 0;
  pointer-events: none;
}

.tec-lb__img {
  max-width: 60vw;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.tec-lb__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease-in-out, transform 0.15s ease-in-out;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 10;
}

.tec-lb__close:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(90deg) scale(1.08);
}

.tec-lb__close svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* Navigation Arrows */
.tec-lb__prev,
.tec-lb__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease-in-out, transform 0.15s ease-in-out;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0;
}

.tec-lb__prev:hover,
.tec-lb__next:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.08);
}

.tec-lb__prev {
  left: 20px;
}

.tec-lb__next {
  right: 20px;
}

.tec-lb__prev svg,
.tec-lb__next svg {
  width: 24px;
  height: 24px;
  display: block;
  color: white;
  flex-shrink: 0;
}

/* Image Counter */
.tec-lb__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .tec-lb__prev,
  .tec-lb__next {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
  }

  .tec-lb__prev {
    left: 12px;
  }

  .tec-lb__next {
    right: 12px;
  }

  .tec-lb__prev svg,
  .tec-lb__next svg {
    width: 20px;
    height: 20px;
  }

  .tec-lb__close {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }

  .tec-lb__close svg {
    width: 20px;
    height: 20px;
  }

  .tec-lb__counter {
    bottom: 16px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* =====================================================
   WOOCOMMERCE OVERRIDES (reviews, breadcrumb)
   ===================================================== */
.tec-page .woocommerce-breadcrumb { font-size: 13px; color: #6B7280; }
.tec-page .woocommerce-breadcrumb a { color: #146EB4; }

/* Reviews */
.tec-page .woocommerce-Reviews { font-size: 15px; }
.tec-page .comment-respond { margin-top: 24px; }

/* mobile */
@media (max-width: 767px) {
  .tec-related__title {
    font-size: 18px;
  }
  
  .tec-gal__img {height: 250px;}

  .tec-related__arrow {
    width: 36px;
    height: 36px;
  }

  .tec-related__scroll {
    gap: 12px;
  }

  .tec-rel-card {
    flex: 0 0 calc((100% - 12px) / 2); /* 2 cột */
    min-width: calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }

  .tec-rel-card__img {
    height: 150px;
  }

  .tec-rel-card__body {
    padding: 12px;
  }

  .tec-rel-card__name {
    font-size: 14px;
    min-height: 42px;
  }

  .tec-rel-card__price {
    font-size: 15px;
  }
  
  .tec-pricebox {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tec-pricebox__prices {
    width: 100%;
    justify-content: space-between;
  }

  .tec-pricebox__sale {
    font-size: 18px;
  }

  .tec-pricebox__regular {
    font-size: 14px;
  }
}

/* Tablet */
@media (min-width:768px) and (max-width:1023px){
  .tec-gal__img{
    height:530px;
  }
}