/* =====================================================================
 * CÁC BLOCK TRANG CHỦ – ngành phụ tùng ô tô
 * Đồng bộ design-system (biến --ds-*). Chuẩn SEO: chỉ style, không đổi cấu trúc heading.
 * ===================================================================== */

/* ---- Bề rộng đồng nhất với hero: bỏ giới hạn container của .row trong block ---- */
.ptc-sec .row{ max-width: 100% !important; }
.ptc-seo .row{ max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center; }
/* Ẩn dòng "Skin / Type / Size" thừa (chỉ trong các block trang chủ, không đụng shop) */
.ptc-sec .product-extra-info{ display: none !important; }
/* Khoảng cách giữa hàng tab và lưới sản phẩm bên dưới */
.ptc-sec .nav-tabs{ margin-bottom: 28px !important; }
/* Bỏ viền khung tab-panels (không còn khung hộp) */
.ptc-sec .tab-panels{ border: 0 !important; }

/* ---- Tiêu đề section: .ptc-h2 (H2 chuẩn SEO, gạch nhấn cam) ---- */
.ptc-h2{
  font-family: var(--ds-font); font-weight: 700; color: var(--ds-text,#11202E);
  font-size: 1.7rem; line-height: 1.25; text-align: center;
  position: relative; padding-bottom: 14px; margin: 0 0 22px;
}
.ptc-h2:after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width: 60px; height: 3px; background: var(--ds-secondary,#FF7A1A); border-radius: 3px;
}
.ptc-h2 .ptc-h2-sub{
  display:block; font-size: .9rem; font-weight: 500; color: var(--ds-muted,#5B6470);
  margin-top: 8px; text-transform: none; letter-spacing: 0;
}

/* =====================================================================
 * LƯỚI HÃNG XE  [ptc_brand_grid]
 * ===================================================================== */
.ptc-brandgrid{
  --pbg-cols: 6; --pbg-cols-sm: 3;
  display: grid; grid-template-columns: repeat(var(--pbg-cols), 1fr); gap: 14px;
  font-family: var(--ds-font);
}
.ptc-brandgrid__item{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 18px 10px;
  background: var(--ds-bg,#fff); border: 1px solid var(--ds-border,#E6EAF0);
  border-radius: var(--ds-radius,10px); text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.ptc-brandgrid__item:hover{
  transform: translateY(-3px); box-shadow: var(--ds-shadow,0 6px 20px rgba(11,32,46,.08));
  border-color: var(--ds-primary,#0A57C2);
}
.ptc-brandgrid__logo{
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ds-primary,#0A57C2), var(--ds-primary-dark,#073B82));
}
/* Logo dạng ẢNH đại diện thương hiệu (nền trắng, ảnh giữ nguyên tỷ lệ) */
.ptc-brandgrid__logo--img{
  width: 62px; height: 62px; padding: 5px;
  background: #fff; color: inherit;
  border: 1px solid var(--ds-border,#E6EAF0);
}
.ptc-brandgrid__img{
  width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%;
}
.ptc-brandgrid__name{ font-size: .92rem; font-weight: 700; color: var(--ds-text,#11202E); line-height: 1.2; }
.ptc-brandgrid__count{ font-size: .74rem; color: var(--ds-muted,#5B6470); }
.ptc-brandgrid--empty{
  grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--ds-muted,#5B6470);
  background: var(--ds-bg-soft,#F4F6F9); border: 1px dashed var(--ds-border,#E6EAF0); border-radius: var(--ds-radius,10px);
}

/* =====================================================================
 * ẢNH SẢN PHẨM ĐỒNG NHẤT TỶ LỆ (trong [ux_products] của các block)
 * Ép khung vuông; ảnh giữ nguyên tỷ lệ (contain), canh giữa -> card đều nhau.
 * ===================================================================== */
.ptc-sec .product-small .box-image{
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 8px;
}
.ptc-sec .product-small .box-image .image-fade_in_back{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}
.ptc-sec .product-small .box-image .image-fade_in_back a{
  display: block; width: 100%; height: 100%;
}
.ptc-sec .product-small .box-image .image-fade_in_back img{
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center;   /* phủ kín khung -> ảnh "full" */
}

/* =====================================================================
 * FEATURE BOXES  – "Vì sao chọn" (.ptc-feat trong [ux_text])
 * ===================================================================== */
.ptc-feat{
  background: var(--ds-bg,#fff); border: 1px solid var(--ds-border,#E6EAF0);
  border-radius: var(--ds-radius,10px); padding: 22px 18px; height: 100%;
  text-align: center; transition: transform .16s, box-shadow .16s;
}
.ptc-feat:hover{ transform: translateY(-3px); box-shadow: var(--ds-shadow,0 6px 20px rgba(11,32,46,.08)); }
.ptc-feat i{
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; margin-bottom: 12px;
  font-size: 1.5rem; color: var(--ds-primary,#0A57C2); background: var(--ds-primary-soft,#E8F0FB);
}
.ptc-feat h3{ font-size: 1rem; margin: 0 0 6px; color: var(--ds-text,#11202E); }
.ptc-feat p{ font-size: .88rem; line-height: 1.5; color: var(--ds-muted,#5B6470); margin: 0; }

/* =====================================================================
 * KHỐI GIỚI THIỆU / SEO  (.ptc-seo)
 * ===================================================================== */
.ptc-seo .ptc-seo-box{ font-family: var(--ds-font); }
.ptc-seo h2{ font-size: 1.55rem; margin: 0 0 12px; color: var(--ds-text,#11202E); }
.ptc-seo h3{ font-size: 1.08rem; margin: 20px 0 6px; color: var(--ds-primary-dark,#073B82); }
.ptc-seo p{ font-size: .95rem; line-height: 1.7; color: var(--ds-muted,#5B6470); margin: 0 0 10px; }
.ptc-seo a{ color: var(--ds-primary,#0A57C2); font-weight: 600; text-decoration: none; }
.ptc-seo a:hover{ text-decoration: underline; }
.ptc-seo-intro{
  text-align: center; max-width: 780px; margin: 0 auto 24px;
  color: var(--ds-muted,#5B6470); font-size: 1rem; line-height: 1.7;
}

/* =====================================================================
 * ACCORDION khối SEO  (.ptc-acc) – đẹp & mượt, đồng bộ design-system
 * ===================================================================== */
.ptc-acc{ max-width: 900px; margin: 0 auto; }
.ptc-acc .accordion-item{
  background: var(--ds-bg,#fff);
  border: 1px solid var(--ds-border,#E6EAF0);
  border-radius: var(--ds-radius,10px);
  margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ptc-acc .accordion-item:last-child{ margin-bottom: 0; }
.ptc-acc .accordion-item:hover{ border-color: #cfd8e6; }

.ptc-acc .accordion-title.plain{
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 16px 18px; border: 0;
  font-family: var(--ds-font); font-weight: 700; font-size: 1.03rem;
  color: var(--ds-text,#11202E); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ptc-acc .accordion-title.plain > span{ order: 1; flex: 1 1 auto; line-height: 1.35; }
.ptc-acc .accordion-title.plain:hover{ background: var(--ds-primary-soft,#E8F0FB); }
.ptc-acc .accordion-title .toggle{
  position: static !important;   /* Flatsome để absolute-left; ép về flow để đẩy sang phải */
  order: 2; margin-left: auto; flex: 0 0 34px; align-self: center;
  /* Ép vuông tuyệt đối -> tròn đều (Flatsome đặt min-height ~40px làm méo) */
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  max-width: 34px !important; max-height: 34px !important;
  padding: 0 !important; border: 0 !important; line-height: 1 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ds-primary-soft,#E8F0FB);
  color: var(--ds-primary,#0A57C2); box-shadow: none;
  transition: transform .3s ease, background .2s ease, color .2s ease;
}
.ptc-acc .accordion-title .toggle i{ margin: 0 !important; transform: none !important; font-size: .95rem; }

/* Trạng thái MỞ */
.ptc-acc .accordion-title.active{ color: var(--ds-primary-dark,#073B82); background: var(--ds-primary-soft,#E8F0FB); }
.ptc-acc .accordion-title.active .toggle{ background: var(--ds-secondary,#FF7A1A); color: #fff; transform: rotate(180deg); }
.ptc-acc .accordion-item:has(.accordion-title.active){
  border-color: var(--ds-primary,#0A57C2);
  box-shadow: var(--ds-shadow,0 6px 20px rgba(11,32,46,.08));
}

.ptc-acc .accordion-inner{
  padding: 6px 18px 18px; color: var(--ds-muted,#5B6470);
  font-size: .95rem; line-height: 1.7;
}
.ptc-acc .accordion-inner p{ margin: 0; }
.ptc-acc .accordion-inner a{ color: var(--ds-primary,#0A57C2); font-weight: 600; text-decoration: none; }
.ptc-acc .accordion-inner a:hover{ text-decoration: underline; }

/* =====================================================================
 * BANNER CTA  (.ptc-cta-sec)
 * ===================================================================== */
/* Full-bleed toàn màn hình (mọi kích thước) */
.ptc-cta-sec{
  width: auto !important; max-width: none !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}
.ptc-cta-sec .ptc-cta h2{ color:#fff; font-size: 1.6rem; margin: 0 0 8px; }
.ptc-cta-sec .ptc-cta p{ color: #eaf1fb; margin: 0 0 16px; font-size: .98rem; }

/* Nút CTA: cách đều + nút Zalo đổi thành trắng đặc chữ xanh (rõ, đẹp) */
.ptc-cta-sec .button{ margin: 6px 7px 0 !important; font-weight: 700; }
.ptc-cta-sec .button.is-outline{
  background: #fff !important; border: 2px solid #fff !important;
  color: var(--ds-primary-dark,#073B82) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.ptc-cta-sec .button.is-outline:hover{
  background: var(--ds-primary-soft,#E8F0FB) !important;
  color: var(--ds-primary-dark,#073B82) !important; transform: translateY(-2px);
}

/* =====================================================================
 * RESPONSIVE
 * ===================================================================== */
@media (max-width: 849px){
  /* Full-bleed các block trên mobile (đồng nhất với hero) – chừa lề nhỏ 12px.
     (.ptc-cta-sec full-bleed padding:0 xử lý riêng ở rule chung phía trên) */
  .ptc-sec{
    width: auto !important; max-width: none !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding-left: 12px !important; padding-right: 12px !important;
  }
  .ptc-sec .row{ margin-left: 0 !important; margin-right: 0 !important; }
  /* Sản phẩm full sát mép (đã bỏ viền + bỏ padding ngang khung tab) */
  .ptc-sec .tab-panels{ padding-left: 0 !important; padding-right: 0 !important; }

  /* 2 nút CTA xếp dọc: cùng bề rộng & thẳng hàng giữa (flex cho chắc) */
  .ptc-cta-sec .text-inner{ display: flex !important; flex-direction: column; align-items: center; }
  .ptc-cta-sec .ptc-cta{ width: 100%; }
  .ptc-cta-sec .button{
    display: block !important; width: 100% !important; max-width: 340px !important;
    margin: 8px 0 0 !important; float: none !important;
  }

  .ptc-brandgrid{ grid-template-columns: repeat(var(--pbg-cols-sm), 1fr); gap: 10px; }
  .ptc-brandgrid__item{ padding: 14px 8px; }
  .ptc-brandgrid__logo{ width: 44px; height: 44px; font-size: 1.15rem; }
  .ptc-brandgrid__name{ font-size: .82rem; }
  .ptc-seo h2{ font-size: 1.3rem; }
}