/* BCSHP AI Product Optimizer v1.5.1 — Renderer 2.3 / BCSHP v1.2.1 Classic Editor Safe. */
.bcshp-ai-product,
article[data-bcshp-ai] {
  --bcshp-bg: #0a0e13;
  --bcshp-surface: #111820;
  --bcshp-surface-2: #151d26;
  --bcshp-text: #eaf0f5;
  --bcshp-muted: #aeb9c5;
  --bcshp-cyan: #4de3ff;
  --bcshp-gold: #ffd54a;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--bcshp-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.86;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
}

/* Legacy v1.4.x used inline presentation. These scoped overrides are intentional. */
article[data-bcshp-ai].is-legacy { background: transparent !important; overflow: visible !important; }
article[data-bcshp-ai] > .bcshp-ai-container,
article[data-bcshp-ai] > .uk-container.uk-container-large {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: clamp(14px, 2.3vw, 28px) !important;
  box-sizing: border-box;
}

.bcshp-ai-product .bcshp-ai-intro {
  margin: 0 0 clamp(26px, 4vw, 42px) !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid rgba(77,227,255,.17) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(17,24,32,.92), rgba(10,14,19,.72)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}
.bcshp-ai-intro-p { margin: 0 0 15px; color: #f0f5f8; font-size: 18px; line-height: 1.86; }
.bcshp-ai-intro-p:last-child { margin-bottom: 0; }
.bcshp-ai-intro-p.is-lead { font-size: clamp(18.5px, 2vw, 21px); }

.bcshp-ai-product .bcshp-ai-section {
  margin: clamp(34px, 5vw, 58px) 0 !important;
  scroll-margin-top: 90px;
  box-sizing: border-box;
}
.bcshp-ai-product .bcshp-ai-story,
.bcshp-ai-product.is-legacy .bcshp-ai-story {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bcshp-ai-heading-wrap { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px; }
.bcshp-ai-heading-wrap > span { flex: 0 0 3px; width: 3px; height: 30px; margin-top: 4px; border-radius: 999px; background: var(--bcshp-gold); }
.bcshp-ai-heading-wrap.is-gold > span { background: var(--bcshp-cyan); }
.bcshp-ai-heading-wrap.is-cyan > .bcshp-ai-heading { color: var(--bcshp-cyan); }
.bcshp-ai-heading-wrap.is-gold > .bcshp-ai-heading { color: var(--bcshp-gold); }
.bcshp-ai-product .bcshp-ai-heading {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: clamp(27px, 2.7vw, 36px) !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}
/* Legacy heading wrappers had inline flex styling; keep it but remove any bar-like background. */
.bcshp-ai-product.is-legacy .bcshp-ai-section > div:has(> .bcshp-ai-heading) { background: transparent !important; }

.bcshp-ai-p,
.bcshp-ai-product .bcshp-ai-story > p {
  max-width: 1080px;
  margin: 0 0 16px;
  color: #e7edf2;
  font-size: 18px;
  line-height: 1.86;
  overflow-wrap: anywhere;
}
.bcshp-ai-list { margin: 10px 0 0; padding-left: 24px; color: #e7edf2; }
.bcshp-ai-list li { margin: 7px 0; line-height: 1.78; }

.bcshp-ai-toc {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 24px 0 clamp(32px, 4vw, 44px) !important;
  padding: 0 !important;
  background: transparent !important;
}
.bcshp-ai-toc a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 999px !important;
  background: #111821 !important;
  color: #f4f8fb !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  box-sizing: border-box;
}
.bcshp-ai-toc a:hover,
.bcshp-ai-toc a:focus-visible { border-color: rgba(77,227,255,.55) !important; color: var(--bcshp-cyan) !important; }

.bcshp-ai-specs {
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid rgba(255,213,74,.28) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #131a22, #0d1218) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
}
.bcshp-ai-facts { margin: 4px 0 18px; }
.bcshp-ai-fact-card { height: 100%; padding: 15px; border: 1px solid rgba(77,227,255,.14); border-radius: 15px; background: var(--bcshp-surface-2); box-sizing: border-box; }
.bcshp-ai-fact-card strong { display: block; margin-bottom: 5px; color: #75eaff; font-size: 12.5px; line-height: 1.35; text-transform: uppercase; letter-spacing: .045em; }
.bcshp-ai-fact-card span { display: block; color: #fff; font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.45; font-weight: 800; overflow-wrap: anywhere; }
.bcshp-ai-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.10); border-radius: 15px; background: #0d1218; }
.bcshp-ai-table { width: 100%; min-width: 660px; border-collapse: collapse; margin: 0; color: #eaf0f5; font-size: 17px; line-height: 1.68; }
.bcshp-ai-table th,
.bcshp-ai-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.bcshp-ai-table th { width: 35%; color: var(--bcshp-gold); font-weight: 800; }

.bcshp-ai-features { margin: 12px 0 0; }
.bcshp-ai-feature { height: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--bcshp-cyan); border-radius: 12px; background: rgba(255,255,255,.025); color: #e7edf2; line-height: 1.72; box-sizing: border-box; }
.bcshp-ai-features.is-gold .bcshp-ai-feature { border-left-color: var(--bcshp-gold); }
.bcshp-ai-more { margin: 15px 0 0; color: #cfd8df; }
.bcshp-ai-more a { color: var(--bcshp-cyan); text-decoration: underline; text-underline-offset: 3px; }

.bcshp-ai-usage,
.bcshp-ai-buyer,
.bcshp-ai-tradeoffs,
.bcshp-ai-faq,
.bcshp-ai-gallery {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.bcshp-ai-care {
  padding: 20px 22px !important;
  border: 1px solid rgba(255,213,74,.16) !important;
  border-left: 3px solid var(--bcshp-gold) !important;
  border-radius: 15px !important;
  background: rgba(255,213,74,.035) !important;
}
.bcshp-ai-step { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: var(--bcshp-surface); box-sizing: border-box; }
.bcshp-ai-step > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--bcshp-gold); color: #111; font-weight: 900; line-height: 1; }
.bcshp-ai-step p { margin: 1px 0 0; color: #eef3f8; font-size: 17px; line-height: 1.72; }
.bcshp-ai-decision { height: 100%; padding: 17px; border: 1px solid rgba(255,255,255,.09); border-top: 3px solid var(--bcshp-cyan); border-radius: 15px; background: var(--bcshp-surface); box-sizing: border-box; }
.bcshp-ai-decision.is-gold { border-top-color: var(--bcshp-gold); }
.bcshp-ai-decision h3 { margin: 0 0 8px; color: var(--bcshp-cyan); font-size: 20px; line-height: 1.4; }
.bcshp-ai-decision.is-gold h3 { color: var(--bcshp-gold); }

.bcshp-ai-media-group { margin: clamp(24px, 3vw, 34px) 0 !important; }
.bcshp-ai-lightbox-group { margin: clamp(24px, 3vw, 34px) 0 !important; }
.bcshp-ai-lightbox-group > .bcshp-ai-media-group { margin: 0 !important; }
.bcshp-ai-media { margin: 0; }
.bcshp-ai-media > a { display: block; width: 100%; margin: 0 auto; padding: 6px; border: 1px solid rgba(77,227,255,.13); border-radius: 16px; background: #070b10; box-sizing: border-box; text-decoration: none; }
.bcshp-ai-media-group.is-hero .bcshp-ai-media > a { max-width: 1080px; }
.bcshp-ai-image { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center; margin: 0 auto; border-radius: 12px; background: #030405; }
.bcshp-ai-video-wrap { width: 100%; margin: 0 auto; padding: 0; background: transparent; }
.bcshp-ai-video,
.bcshp-ai-product.is-legacy video.bcshp-ai-video {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  background: #000 !important;
}
.bcshp-ai-product.is-legacy .bcshp-ai-media-group > div > div { max-width: 1080px; margin-inline: auto; }
.bcshp-ai-media figcaption,
.bcshp-ai-media-group p { margin: 8px 2px 0; color: var(--bcshp-muted); font-size: 14px; line-height: 1.55; }

.bcshp-ai-trust { margin: clamp(34px, 5vw, 54px) 0 !important; padding: 16px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 17px !important; background: #10161d !important; }
.bcshp-ai-trust-card { height: 100%; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.02); }
.bcshp-ai-trust-card strong { display: block; margin-bottom: 4px; color: var(--bcshp-gold); font-size: 15px; line-height: 1.4; }
.bcshp-ai-trust-card span { display: block; color: #dce5eb; font-size: 14.5px; line-height: 1.62; }
.bcshp-ai-cta { margin: clamp(34px, 5vw, 54px) 0 !important; padding: clamp(20px, 3vw, 28px) !important; border: 1px solid rgba(255,213,74,.22) !important; border-left: 3px solid #e53935 !important; border-radius: 17px !important; background: linear-gradient(145deg, #15191e, #0d1217) !important; }
.bcshp-ai-cta > strong { display: block; margin-bottom: 8px; color: var(--bcshp-gold); font-size: 21px; line-height: 1.35; }
.bcshp-ai-cta > p { margin: 0 0 13px; color: #eef3f8; font-size: 17px; line-height: 1.75; }
.bcshp-ai-cta-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.bcshp-ai-cta-actions a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 13px; border: 1px solid rgba(77,227,255,.30); border-radius: 999px; background: #163039; color: #73eaff; font-weight: 800; text-decoration: none; }
.bcshp-ai-cta-actions a.is-primary { border-color: transparent; background: var(--bcshp-gold); color: #111; }
.bcshp-ai-faq-item { margin: 0 0 11px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: var(--bcshp-surface); }
.bcshp-ai-faq-item h3 { margin: 0 0 6px; color: var(--bcshp-gold); font-size: clamp(18px, 2vw, 21px); line-height: 1.42; }
.bcshp-ai-faq-item p { margin: 0; color: #e8eef3; font-size: 16.5px; line-height: 1.74; }
.bcshp-ai-conclusion { padding-top: 20px !important; border-top: 1px solid rgba(255,255,255,.09) !important; }

@media (max-width: 767px) {
  .bcshp-ai-product,
  article[data-bcshp-ai] { font-size: 16.5px; line-height: 1.82; }
  article[data-bcshp-ai] > .bcshp-ai-container,
  article[data-bcshp-ai] > .uk-container.uk-container-large { padding: 12px 14px 20px !important; }
  .bcshp-ai-product .bcshp-ai-intro { padding: 17px !important; border-radius: 16px !important; }
  .bcshp-ai-intro-p { font-size: 16.5px; line-height: 1.82; }
  .bcshp-ai-product .bcshp-ai-section { margin: 32px 0 !important; }
  .bcshp-ai-product .bcshp-ai-heading { font-size: clamp(25px, 7.2vw, 29px) !important; line-height: 1.3 !important; }
  .bcshp-ai-p,
  .bcshp-ai-product .bcshp-ai-story > p { font-size: 16.5px; line-height: 1.82; }
  .bcshp-ai-toc { gap: 7px !important; margin-bottom: 30px !important; }
  .bcshp-ai-toc a { min-height: 36px !important; padding: 6px 10px !important; font-size: 13px !important; }
  .bcshp-ai-specs { padding: 15px !important; border-radius: 16px !important; }

  /* Mobile quick facts: 2 columns only for compact values; long Vietnamese labels fall back to one readable card per row. */
  .bcshp-ai-facts {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 4px 0 16px !important;
    margin-left: 0 !important;
  }
  .bcshp-ai-facts.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .bcshp-ai-facts > * {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }
  .bcshp-ai-fact-card { padding: 13px 14px !important; border-radius: 13px !important; }
  .bcshp-ai-fact-card strong { font-size: 12px !important; line-height: 1.35 !important; }
  .bcshp-ai-fact-card span { font-size: 17px !important; line-height: 1.5 !important; }

  /* Mobile specifications: remove the 620/680px desktop min-width and turn rows into stacked spec cards. */
  .bcshp-ai-table-wrap { overflow-x: visible !important; border-radius: 13px !important; }
  .bcshp-ai-table,
  .bcshp-ai-table tbody,
  .bcshp-ai-table tr,
  .bcshp-ai-table th,
  .bcshp-ai-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bcshp-ai-table {
    table-layout: auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    overflow: visible !important;
  }
  .bcshp-ai-table tr {
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
  }
  .bcshp-ai-table tr:last-child { border-bottom: 0 !important; }
  .bcshp-ai-table th {
    padding: 0 0 4px !important;
    border: 0 !important;
    color: var(--bcshp-gold) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .bcshp-ai-table td {
    padding: 0 !important;
    border: 0 !important;
    color: #f3f6f8 !important;
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* v1.4.0-v1.4.3 content has no renderer classes on these inner elements and contains inline min-width:680px.
     Override the known legacy DOM structurally so old products are fixed without re-running AI or editing post_content. */
  .bcshp-ai-product.is-legacy #thong-so-san-pham > div[uk-grid] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 4px 0 16px !important;
    margin-left: 0 !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham > div[uk-grid] > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham > div[uk-grid] > div > div {
    height: auto !important;
    min-width: 0 !important;
    padding: 13px 14px !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham > div[uk-grid] strong {
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham > div[uk-grid] span {
    font-size: 17px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table,
  .bcshp-ai-product.is-legacy #thong-so-san-pham tbody,
  .bcshp-ai-product.is-legacy #thong-so-san-pham tr,
  .bcshp-ai-product.is-legacy #thong-so-san-pham th,
  .bcshp-ai-product.is-legacy #thong-so-san-pham td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table {
    table-layout: auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table tr {
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table tr:last-child { border-bottom: 0 !important; }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table th {
    padding: 0 0 4px !important;
    border: 0 !important;
    color: var(--bcshp-gold) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table td {
    padding: 0 !important;
    border: 0 !important;
    color: #f3f6f8 !important;
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .bcshp-ai-product.is-legacy #thong-so-san-pham table:only-child { margin: 0 !important; }
  .bcshp-ai-product.is-legacy #thong-so-san-pham div:has(> table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
  }

  .bcshp-ai-care { padding: 17px !important; }
  .bcshp-ai-media-group { margin: 22px 0 !important; }
  .bcshp-ai-video { width: 100% !important; max-width: 100% !important; border-radius: 12px !important; }
  .bcshp-ai-cta { padding: 18px !important; }
  .bcshp-ai-cta-actions { display: grid; grid-template-columns: 1fr; }
  .bcshp-ai-cta-actions a { justify-content: center; width: 100%; box-sizing: border-box; }
}

/* Fallback when a theme prints post_content without running the_content compatibility filter. */
article[data-bcshp-ai] nav[aria-label="Mục lục sản phẩm"] { flex-wrap: wrap; gap: 8px; }
article[data-bcshp-ai] nav[aria-label="Mục lục sản phẩm"] a { min-height: 38px; font-size: 14px; }
article[data-bcshp-ai] video { width: 100% !important; max-width: 1080px !important; height: auto !important; max-height: none !important; margin-inline: auto !important; }
article[data-bcshp-ai] h2 { max-width: 100%; overflow-wrap: anywhere; }