/* Robot Product Layout v2.2 — Frontend CSS */

.rpl-wrapper { font-family: inherit; line-height: 1.75; color: inherit; }

/* ── Section spacing — cân bằng trên dưới ── */
.rpl-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.rpl-section:first-child { margin-top: 0; }
.rpl-section:last-child  { margin-bottom: 0; }

/* Divider nhẹ giữa các section */
.rpl-section + .rpl-section {
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

/* ── 2-col ── */
.rpl-two-col {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  align-items: center;
}
.rpl-col { box-sizing: border-box; }

/* Image col */
.rpl-col-image { text-align: center; }
.rpl-col-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
  transition: transform .3s, box-shadow .3s;
}
.rpl-col-image img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0,0,0,.13);
}

/* Caption */
.rpl-caption {
  font-size: .85rem;
  color: #6b7280;
  text-align: center;
  margin: .5rem 0 0;
  font-style: italic;
}

/* ── Ảnh PC/Mobile riêng biệt ──
   Mặc định (desktop): hiện ảnh PC, ẩn ảnh Mobile.
   Đặt SAU các rule "img" chung + dùng selector cụ thể (.rpl-col-image img.rpl-img-mobile)
   để đảm bảo specificity cao hơn, không bị ghi đè bởi ".rpl-col-image img".
*/
.rpl-col-image img.rpl-img-mobile,
.rpl-image-only img.rpl-img-mobile {
  display: none;
}
.rpl-col-image img.rpl-img-pc,
.rpl-image-only img.rpl-img-pc {
  display: block;
}

/* Content col typography */
.rpl-content-inner h2 { font-size:1.5rem; font-weight:700; margin:0 0 .75rem; line-height:1.3; color:#1a1a2e; }
.rpl-content-inner h3 { font-size:1.2rem; font-weight:600; margin:1rem 0 .5rem; color:#1a1a2e; }
.rpl-content-inner h4 { font-size:1.05rem; font-weight:600; margin:.85rem 0 .4rem; }
.rpl-content-inner p  { margin:0 0 .85rem; color:#374151; }
.rpl-content-inner p:first-child { margin-top:0; }
.rpl-content-inner p:last-child  { margin-bottom:0; }
.rpl-content-inner ul,
.rpl-content-inner ol { padding-left:1.4rem; margin:0 0 .85rem; }
.rpl-content-inner li { margin-bottom:.4rem; color:#374151; }
.rpl-content-inner strong { color:#111827; font-weight:600; }
.rpl-content-inner a  { color:#0073aa; text-decoration:none; }
.rpl-content-inner a:hover { text-decoration:underline; }

/* YouTube iframe */
.rpl-content-inner iframe {
  max-width: 100%;
  border: none;
  border-radius: 8px;
  display: block;
  margin: .75rem auto;
}

/* ── Full col ── */
.rpl-full-col .rpl-content-inner { width:100%; }

/* ── Hình 1 cột (PC + Mobile) ── */
.rpl-image-only {
  text-align: center;
}
.rpl-image-only img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
}

/* ── Mobile ≤ 767px ── */
@media screen and (max-width:767px) {
  .rpl-two-col { flex-direction:column!important; gap:16px!important; }
  .rpl-two-col .rpl-col-image   { order:-1!important; max-width:100%!important; flex:0 0 100%!important; }
  .rpl-two-col .rpl-col-content { order:0!important;  max-width:100%!important; flex:0 0 100%!important; }
  .rpl-content-inner h2 { font-size:1.2rem; }
  .rpl-section { margin-top:1rem; margin-bottom:1rem; }
  .rpl-section + .rpl-section { padding-top:1rem; }

  /* Block có ảnh mobile riêng: ẩn ảnh PC, hiện ảnh mobile (cả 2-col và image-only) */
  .rpl-col-image.has-mobile-img .rpl-img-pc     { display: none; }
  .rpl-col-image.has-mobile-img .rpl-img-mobile { display: block; }
  .rpl-image-only.has-mobile-img .rpl-img-pc     { display: none; }
  .rpl-image-only.has-mobile-img .rpl-img-mobile { display: block; }
}

/* ── Tablet ── */
@media screen and (min-width:768px) and (max-width:1023px) {
  .rpl-two-col { gap:24px; }
}