/* ─────────────────────────────────────────────
 *  Robot Layout Classic — Frontend Styles
 *  Desktop : 2 cột (hình + nội dung)
 *  Mobile  : hình trên, nội dung dưới
 * ───────────────────────────────────────────── */

.rlc-section {
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* ── 2 cột ── */
.rlc-two-col {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  align-items: flex-start;
}

.rlc-two-col .rlc-col {
  box-sizing: border-box;
}

.rlc-col-image .rlc-img-pc,
.rlc-col-image .rlc-img-mobile {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* ── Ảnh PC/Mobile riêng: mặc định ảnh mobile ẩn, chỉ hiện khi có ảnh mobile và ở màn nhỏ ── */
.rlc-col-image .rlc-img-mobile {
  display: none;
}

.rlc-col-content .rlc-content-inner {
  height: 100%;
}

.rlc-content-inner p:first-child { margin-top: 0; }
.rlc-content-inner p:last-child  { margin-bottom: 0; }

/* ── 1 cột ── */
.rlc-full-col .rlc-content-inner {
  width: 100%;
}

/* ── Hình 1 cột (PC + Mobile) ── */
.rlc-image-only {
  text-align: center;
}
.rlc-image-only .rlc-img-pc,
.rlc-image-only .rlc-img-mobile {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}
.rlc-image-only .rlc-img-pc {
  display: block;
}
.rlc-image-only .rlc-img-mobile {
  display: none;
}

/* ── Mobile (≤ 767px) ── */
@media screen and (max-width: 767px) {
  .rlc-two-col {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Hình luôn lên trên dù desktop là trái hay phải */
  .rlc-two-col .rlc-col-image {
    order: -1 !important;
    width: 100% !important;
  }

  .rlc-two-col .rlc-col-content {
    order: 0 !important;
    width: 100% !important;
  }

  /* Nếu có ảnh mobile riêng: ẩn ảnh PC, hiện ảnh mobile (áp dụng cho cả 2-col và image-only) */
  .has-mobile-img .rlc-img-pc {
    display: none;
  }
  .has-mobile-img .rlc-img-mobile {
    display: block;
  }
}

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