/* Đồng bộ typography của toàn bộ template product theo cảm giác bản Standard.
   Mục tiêu: sửa ở tầng hiển thị cuối cùng, không phụ thuộc từng template CSS.
   File này được nạp SAU product-tiktok.css / product-vando.css.
*/

:root{
  --pdp-sync-font: Arial, Helvetica, sans-serif;
}

/* 1) Ghim cùng font family cho toàn bộ 4 template */
.stdp-page,
.shp-wrap,
.tkp-page,
.vando-wrap{
  font-family: var(--pdp-sync-font) !important;
  font-size: 14px;
  line-height: 1.4;
  color: #111;
}

.stdp-page :where(button, input, select, textarea, .btn, .form-control, .form-select, .accordion-button),
.shp-wrap :where(button, input, select, textarea, .btn, .form-control, .form-select, .accordion-button),
.tkp-page :where(button, input, select, textarea, .btn, .form-control, .form-select, .accordion-button),
.vando-wrap :where(button, input, select, textarea, .btn, .form-control, .form-select, .accordion-button){
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

/* 2) Đồng bộ rich text vì nội dung từ editor/paste rất dễ giữ lại font lạ */
.stdp-page :where(.rte-content, .content, .stdp-rte),
.shp-wrap :where(.rte-content, .content),
.tkp-page :where(.tkp-richtext, .rte-content, .content),
.vando-wrap :where(.vando-content, .rte-content, .content){
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.stdp-page :where(.rte-content, .content, .stdp-rte) *,
.shp-wrap :where(.rte-content, .content) *,
.tkp-page :where(.tkp-richtext, .rte-content, .content) *,
.vando-wrap :where(.vando-content, .rte-content, .content) *{
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

/* 3) Đồng bộ “cảm giác font” của title/headline theo Standard
   - bỏ letter-spacing âm của TikTok
   - hạ 800/900 giả-bold về 700
*/
.shp-wrap h1.h4,
.tkp-page .tkp-title,
.vando-wrap .vando-title{
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  color: #111827;
}

.shp-wrap h1.h4{
  font-size: 20px !important;
  margin-bottom: 10px !important;
}

.tkp-page .tkp-title{
  font-size: 20px !important;
}

.vando-wrap .vando-title{
  font-size: 16px !important;
}

/* Các heading phụ của Vando đang đậm quá nên nhìn như khác font */
.vando-wrap .vando-section h2,
.vando-wrap .vando-order .label,
.vando-wrap .vando-price .now,
.vando-wrap .vando-order .pricebox .price,
.vando-wrap .btn-buy{
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* TikTok: kéo phần meta/phụ về cùng nhịp với Standard */
.tkp-page :where(.tkp-rating-row, .tkp-shipping-note-row, .tkp-ship-time-row, .tkp-trust-row, .tkp-shipping-note, .tkp-chip, .tkp-spec-label, .tkp-spec-value){
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.tkp-page .tkp-chip{
  font-weight: 700 !important;
}

/* Shopee: tab/faq/review/qa */
.shp-wrap :where(.nav-link, .tab-pane, .accordion-button, .accordion-body, .shp-review-content, .shp-qa-question, .shp-qa-answer-body){
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

/* Responsive title scale bám gần Standard */
@media (max-width: 991.98px){
  .shp-wrap h1.h4,
  .tkp-page .tkp-title{
    font-size: 18px !important;
  }
}

@media (max-width: 575.98px){
  .shp-wrap h1.h4,
  .tkp-page .tkp-title{
    font-size: 16px !important;
  }

  .vando-wrap .vando-title{
    font-size: 14px !important;
  }
}


/* Vando: nút hỏi đáp/đánh giá vẫn còn ăn weight 900 từ CSS gốc nên nhìn lệch font */
.vando-wrap :where(.btn-submit, .vando-orderbtn, #vandoQaToggleBtn){
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}



/* 4) Nâng cấp thumb video: poster giả + overlay + play + badge */
:root{
  --pdp-video-thumb-overlay: linear-gradient(180deg, rgba(12,18,28,.08) 0%, rgba(12,18,28,.34) 100%);
  --pdp-video-thumb-badge-bg: rgba(255,255,255,.92);
  --pdp-video-thumb-badge-color: #111827;
  --pdp-video-thumb-play-bg: rgba(255,255,255,.92);
  --pdp-video-thumb-play-color: #ef4444;
}

.stdp-thumb-video,
.shp-thumb-video,
.tkp-thumb.is-video,
.vando-gallery .thumbVideo{
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg,#f8fafc 0%, #e5e7eb 100%) !important;
}

.stdp-thumb-video .pdp-video-thumb__poster,
.shp-thumb-video .pdp-video-thumb__poster,
.tkp-thumb.is-video .pdp-video-thumb__poster,
.vando-gallery .thumbVideo .pdp-video-thumb__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.stdp-thumb-video::after,
.shp-thumb-video::after,
.tkp-thumb.is-video::after,
.vando-gallery .thumbVideo::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pdp-video-thumb-overlay);
  z-index: 1;
  pointer-events: none;
}

.stdp-thumb-video .pdp-video-thumb__badge,
.shp-thumb-video .pdp-video-thumb__badge,
.tkp-thumb.is-video .pdp-video-thumb__badge,
.vando-gallery .thumbVideo .pdp-video-thumb__badge{
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pdp-video-thumb-badge-bg);
  color: var(--pdp-video-thumb-badge-color);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15,23,42,.12);
}

.stdp-thumb-video .pdp-video-thumb__play,
.shp-thumb-video .pdp-video-thumb__play,
.tkp-thumb.is-video .pdp-video-thumb__play,
.vando-gallery .thumbVideo .pdp-video-thumb__play{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 42%, 34px);
  height: clamp(24px, 42%, 34px);
  border-radius: 999px;
  background: var(--pdp-video-thumb-play-bg);
  color: var(--pdp-video-thumb-play-color);
  box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.stdp-thumb-video .pdp-video-thumb__play i,
.shp-thumb-video .pdp-video-thumb__play i,
.tkp-thumb.is-video .pdp-video-thumb__play i,
.vando-gallery .thumbVideo .pdp-video-thumb__play i{
  font-size: clamp(12px, 22%, 18px);
  line-height: 1;
}

/* Tắt style cũ của play icon để không bị đè chồng */
.stdp-thumb-video .stdp-thumb-play,
.shp-thumb-video .shp-thumb-video-inner,
.tkp-thumb.is-video .tkp-thumb-play,
.vando-gallery .thumbVideo .thumbVideoInner{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  position: static !important;
}

.tkp-thumb.is-video,
.shp-thumb-video,
.vando-gallery .thumbVideo,
.stdp-thumb-video{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Badge nhỏ hơn ở thumb dọc của Standard */
.stdp-thumb-video .pdp-video-thumb__badge{
  left: 5px;
  bottom: 5px;
  font-size: 9px;
  padding: 2px 5px;
}

@media (max-width: 575.98px){
  .stdp-thumb-video .pdp-video-thumb__badge,
  .shp-thumb-video .pdp-video-thumb__badge,
  .tkp-thumb.is-video .pdp-video-thumb__badge,
  .vando-gallery .thumbVideo .pdp-video-thumb__badge{
    font-size: 9px;
    padding: 2px 5px;
    left: 5px;
    bottom: 5px;
  }
}