/* ============================================================
   post.css — CSS riêng cho trang single post
   Chỉ load khi xem bài viết
   ============================================================ */

/* ── Share sidebar (sticky, chỉ desktop) ─────────────────── */
.share-sidebar {
  position: fixed;
  top: 50%;
  left: calc(50% - 400px - 64px);
  transform: translateY(-50%) translateX(-8px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.share-sidebar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.share-btn svg {
  width: 18px;
  height: 18px;
}
.share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
}
.share-fb:hover {
  background: #1877f2;
}
.share-x:hover {
  background: #000;
}
.share-li:hover {
  background: #0a66c2;
}
.share-wa:hover {
  background: #25d366;
}
.share-copy:hover {
  background: var(--green);
}
.share-copy.copied {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* Ẩn hoàn toàn trên tablet/phone — không đủ chỗ hiển thị */
@media (max-width: 1180px) {
  .share-sidebar {
    display: none;
  }
}

/* ── Padding mobile cho wrap-sm ──────────────────────────── */
.wrap-sm {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .wrap-sm {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Post title */
  .post-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 14px;
  }

  /* Meta bar wrap xuống */
  .post-meta-bar {
    gap: 10px;
    font-size: 14px;
  }

  /* Hero image đầy màn hình */
  .post-hero {
    border-radius: 10px;
    max-height: 240px;
  }

  /* Prose padding mobile */
  .prose {
    font-size: 16px;
  }
  .prose h2 {
    font-size: 21px;
  }
  .prose h3 {
    font-size: 18px;
  }
  .prose pre {
    font-size: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    margin-left: -18px;
    margin-right: -18px;
    border-radius: 0;
  }
  .prose table {
    font-size: 14px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Rating card */
  .rating-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 16px;
  }

  /* Author box */
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    gap: 14px;
  }
  .author-box img {
    width: 56px;
    height: 56px;
  }
  .ab-socials {
    justify-content: center;
  }

  /* Breadcrumb ẩn bớt trên mobile */
  .bc {
    font-size: 12px;
    gap: 4px;
  }

  /* Tags */
  .post-tags a {
    font-size: 12px;
    padding: 3px 10px;
  }

  /* Related posts 1 col */
  .grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .wrap-sm {
    padding-left: 14px;
    padding-right: 14px;
  }
  .post-title {
    font-size: 23px;
  }
  .prose pre {
    margin-left: -14px;
    margin-right: -14px;
  }
}

/* ========================================================================
   aeo-article-styles.css 
   ======================================================================== */

:root {
  --aeo-bg-soft: #f3f2ec;
  --aeo-line: #e4e1d8;
  --aeo-ink: #1a1d1a;
  --aeo-ink-soft: #4a4f49;
  --aeo-accent: #c8f135;
  --aeo-accent-ink: #2b3a0a;
  --aeo-code-bg: #1f2118;
  --aeo-code-ink: #e8f0c8;
  --aeo-warn: #b5562e;
  --aeo-warn-bg: #fdf6ee;
  --aeo-good: #3a7d44;
  --aeo-good-bg: #eef6ef;
}

/* ========================================================================
   DÙNG CHO MỌI LOẠI BÀI
   ======================================================================== */

/* ---------- Quick Answer card ---------- */
.aeo-qa-card {
  border: 1.5px solid var(--aeo-ink);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 30px;
  background: #fff;
}
.aeo-qa-label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--aeo-ink);
}
.aeo-qa-card p:last-child {
  margin: 0;
  font-size: 16.5px;
}

/* ---------- Image / Video placeholder ---------- */
.aeo-img-placeholder {
  margin: 22px 0;
}
.aeo-img-box {
  border: 2px dashed var(--aeo-line);
  border-radius: var(--radius);
  background: var(--aeo-bg-soft);
  padding: 36px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.aeo-img-emoji {
  font-size: 30px;
}
.aeo-img-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aeo-ink-soft);
}
.aeo-img-desc {
  font-size: 13.5px;
  color: var(--muted2);
  max-width: 460px;
}
.aeo-img-placeholder figcaption {
  font-size: 14px;
  color: var(--muted2);
  margin-top: 8px;
  padding: 0 4px;
  text-align: center;
}
.aeo-img-placeholder figcaption strong {
  color: var(--aeo-ink-soft);
}
.aeo-img-placeholder-video .aeo-img-box {
  background: #efeee6;
  border-color: #c8c4b0;
}

/* ---------- Table (dùng chung: specs, so sánh, danh sách tool...) ---------- */
.aeo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.aeo-table th,
.aeo-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--aeo-line);
  vertical-align: top;
}
.aeo-table thead th {
  background: var(--aeo-bg-soft);
  font-weight: 700;
}
.aeo-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Callout boxes (cảnh báo / lưu ý) ---------- */
.aeo-callout {
  border-left: 3px solid var(--aeo-ink);
  padding: 14px 18px;
  margin: 18px 0;
  background: #fff;
}
.aeo-callout-title {
  font-weight: 700;
  margin: 0 0 4px;
}
.aeo-callout p:last-child {
  margin: 0;
}
.aeo-callout-warn {
  border-left-color: var(--aeo-warn);
  background: var(--aeo-warn-bg);
}
.aeo-callout-warn .aeo-callout-title {
  color: var(--aeo-warn);
}

/* ---------- Code blocks ---------- */
.aeo-qa-card code,
article code {
  background: #eef0e3;
  color: #2b3a0a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14.5px;
}
pre code {
  background: none;
  color: inherit;
  padding: 0;
}
pre {
  background: var(--aeo-code-bg);
  color: var(--aeo-code-ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
  margin: 16px 0;
}

/* ---------- Verified strip (cuối bài) ---------- */
.aeo-verified-strip {
  text-align: center;
  font-size: 13px;
  color: var(--muted2);
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--aeo-line);
}

/* ========================================================================
   DÙNG CHO BÀI REVIEW (single product)
   ======================================================================== */

/* ---------- Verdict summary box (đầu bài review: rating + pros/cons rút gọn) ---------- */
.aeo-verdict {
  border: 1.5px solid var(--aeo-ink);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 30px;
  background: #fff;
}
.aeo-verdict-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.aeo-verdict-stars {
  font-size: 20px;
  letter-spacing: 2px;
}
.aeo-verdict-score {
  font-weight: 800;
  font-size: 15px;
}

/* ---------- Pros & Cons ---------- */
.aeo-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.aeo-pros,
.aeo-cons {
  border-radius: var(--radius);
  padding: 16px 18px;
}
.aeo-pros {
  background: var(--aeo-good-bg);
  border: 1px solid #cfe6d2;
}
.aeo-cons {
  background: var(--aeo-warn-bg);
  border: 1px solid #f0ddc8;
}
.aeo-pros-title,
.aeo-cons-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.aeo-pros-title {
  color: var(--aeo-good);
}
.aeo-cons-title {
  color: var(--aeo-warn);
}
.aeo-pros ul,
.aeo-cons ul {
  margin: 0;
  padding-left: 20px;
}
.aeo-pros li,
.aeo-cons li {
  margin: 6px 0;
}
@media (max-width: 600px) {
  .aeo-pros-cons {
    grid-template-columns: 1fr;
  }
}

/* ---------- Specs table (thông số sản phẩm) ---------- */
.aeo-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border: 1px solid var(--aeo-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.aeo-specs tr {
  border-bottom: 1px solid var(--aeo-line);
}
.aeo-specs tr:last-child {
  border-bottom: none;
}
.aeo-specs th {
  text-align: left;
  width: 38%;
  padding: 11px 14px;
  background: var(--aeo-bg-soft);
  font-weight: 700;
  font-size: 14px;
}
.aeo-specs td {
  padding: 11px 14px;
}

/* ---------- Price / affiliate CTA box ---------- */
.aeo-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1.5px solid var(--aeo-ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 22px 0;
  background: #fff;
}
.aeo-price-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aeo-price-label {
  font-size: 12.5px;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.aeo-price-value {
  font-size: 22px;
  font-weight: 800;
}
.aeo-price-cta {
  display: inline-block;
  background: var(--aeo-accent);
  color: var(--aeo-accent-ink);
  font-weight: 800;
  padding: 11px 22px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14.5px;
  white-space: nowrap;
}

/* ========================================================================
   DÙNG CHO BÀI COMPARISON (so sánh 2+ sản phẩm)
   ======================================================================== */

/* ---------- Side-by-side comparison table ---------- */
.aeo-vs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.aeo-vs-table th,
.aeo-vs-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--aeo-line);
  text-align: left;
  vertical-align: top;
}
.aeo-vs-table thead th {
  background: var(--aeo-bg-soft);
  font-weight: 700;
  font-size: 14px;
}
.aeo-vs-table .aeo-vs-winner {
  background: var(--aeo-good-bg);
  font-weight: 700;
}

/* ---------- Winner badge ---------- */
.aeo-winner-badge {
  display: inline-block;
  background: var(--aeo-accent);
  color: var(--aeo-accent-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-left: 8px;
}

/* ========================================================================
   DÙNG CHO BÀI LISTICLE ("Top 10 X")
   ======================================================================== */

/* ---------- Item card có số thứ tự ---------- */
.aeo-list-item {
  display: flex;
  gap: 16px;
  border: 1px solid var(--aeo-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0;
  background: #fff;
}
.aeo-list-rank {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--aeo-ink);
  color: var(--aeo-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.aeo-list-item-body h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.aeo-list-item-body p {
  margin: 0;
}

/* ---------- Responsive cơ bản ---------- */
@media (max-width: 600px) {
  .aeo-table,
  .aeo-vs-table,
  .aeo-specs {
    font-size: 14px;
  }
  .aeo-img-box {
    padding: 28px 16px;
  }
  .aeo-price-box {
    flex-direction: column;
    align-items: flex-start;
  }
}