/* ============================================================
   OTOPRO — Content + Sidebar layout
   SEO-friendly, WordPress-standard class names.
   Shared by single.php (chi tiết tin tức) & page.php (trang nội dung).
   Brand tokens & chrome styles live in global.css.
   ============================================================ */

/* ---- Section wrapper + breadcrumb bar ---- */
.content-sidebar-section { padding: 30px 0 64px; }
.breadcrumb-bar { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 14px 0; }

/* Base .ap-breadcrumb styles live in global.css (always-on). */
.breadcrumb-bar .ap-breadcrumb { margin: 0; }

/* ---- Two-column grid: #primary content + #secondary sidebar ---- */
.content-sidebar-grid { display: grid; grid-template-columns: 1fr 332px; gap: 44px; align-items: start; }
.content-area { min-width: 0; }
.widget-area { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 18px; }

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.widget { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.widget-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  background: var(--red); color: var(--on-brand); padding: 13px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: .5px; text-transform: uppercase;
}
.widget-title svg { opacity: .9; flex-shrink: 0; }

/* widget_categories */
.widget_categories .cat-list { margin: 0; padding: 0; list-style: none; }
.widget_categories .cat-item { border-bottom: 1px solid var(--bg-soft); }
.widget_categories .cat-item:last-child { border-bottom: 0; }
.widget_categories .cat-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s, padding-left .15s;
}
.widget_categories .cat-link:hover,
.widget_categories .current-cat > .cat-link { background: var(--bg-soft); color: var(--red-ink); padding-left: 22px; }
.widget_categories .cat-marker { width: 7px; height: 7px; border: 2px solid var(--red); border-radius: 50%; flex-shrink: 0; }
.widget_categories .current-cat .cat-marker { background: var(--red); }
.widget_categories .post-count { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.widget_categories .cat-link:hover .post-count,
.widget_categories .current-cat .post-count { color: var(--red-ink); }

/* widget_recent_entries */
.widget_recent_entries .recent-posts { margin: 0; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.recent-post + .recent-post { border-top: 1px solid var(--bg-soft); padding-top: 16px; }
.recent-link { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.recent-thumb {
  aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #ececec 0 9px, #f5f5f5 9px 18px);
  display: grid; place-items: center; color: #c4c4c4;
}
.recent-thumb svg { width: 24px; height: 24px; }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-title {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.36; color: var(--ink); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recent-link:hover .recent-title { color: var(--red-ink); }
.recent-date { display: none; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }
.recent-more { margin-top: 3px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .4px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.recent-link:hover .recent-more { gap: 10px; }

/* widget_banners (image promos) */
.widget_banners { border: 0; background: transparent; overflow: visible; display: flex; flex-direction: column; gap: 16px; }
.promo-banner { display: block; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid var(--line); }
.promo-banner image-slot,
.promo-banner__media {
  display: block; width: 100%; aspect-ratio: 332 / 200;
  background: repeating-linear-gradient(45deg, #ececec 0 12px, #f5f5f5 12px 24px);
}
.promo-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-banner .banner-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 13px;
  background: linear-gradient(to top, rgba(20,22,26,.86) 0%, rgba(20,22,26,0) 100%); color: #fff;
  pointer-events: none;
}
.promo-banner .banner-kicker { display: inline-block; background: var(--red); color: var(--on-brand); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; margin-bottom: 7px; }
.promo-banner .banner-title { display: block; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.05; }

/* ============================================================
   ENTRY (article / page)
   ============================================================ */
.entry-header { margin-bottom: 26px; }
.entry-header .cat-links {
  display: inline-flex; white-space: nowrap; background: var(--red); color: var(--on-brand);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .8px; padding: 5px 12px; border-radius: 3px; margin-bottom: 16px;
}
.entry-header .cat-links a { color: var(--on-brand); }
.entry-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.16;
  margin: 0 0 20px; text-transform: uppercase; letter-spacing: -.4px; color: var(--ink); text-wrap: balance;
}
.entry-meta { display: flex; align-items: center; gap: 12px; }
.entry-meta .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(245, 166, 35,.1); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.entry-meta .byline { font-weight: 700; color: var(--ink); font-size: 14px; }
.entry-meta .byline a { color: inherit; }
.entry-meta .meta-line { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.entry-meta .meta-sep { width: 4px; height: 4px; background: #ccc; border-radius: 50%; flex-shrink: 0; }

.post-thumbnail {
  aspect-ratio: 16/9; border-radius: 8px; margin: 26px 0 30px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #ededed 0 16px, #f5f5f5 16px 32px);
  display: grid; place-items: center; color: #c4c4c4;
}
.post-thumbnail svg { width: 60px; height: 60px; }
.post-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.entry-content { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.entry-content > p { margin: 0 0 20px; text-wrap: pretty; }
.entry-content h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px;
  text-transform: uppercase; letter-spacing: -.2px; color: var(--ink);
  margin: 38px 0 16px; display: flex; align-items: center; gap: 12px;
}
.entry-content h2::before { content: ""; width: 5px; height: 24px; background: var(--red); border-radius: 1px; flex-shrink: 0; }
.entry-content h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px;
  text-transform: uppercase; letter-spacing: .2px; color: var(--ink); margin: 28px 0 12px;
}
.entry-content ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.entry-content ul li { position: relative; padding-left: 26px; }
.entry-content li > p { margin: 0; }
.entry-content ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border: 2px solid var(--red); border-radius: 50%; }
.entry-content b, .entry-content strong { color: var(--ink); font-weight: 700; }
.entry-content blockquote, .entry-content .wp-block-quote {
  margin: 26px 0; padding: 18px 24px; background: var(--bg-soft);
  border-left: 4px solid var(--red); border-radius: 0 6px 6px 0;
  font-size: 17px; line-height: 1.65; color: var(--ink); font-weight: 600; font-style: italic;
}
.entry-content blockquote p, .entry-content .wp-block-quote p { margin: 0; }
.entry-content .wp-block-image {
  margin: 26px 0;
}
.entry-content .wp-block-image img {
  height: auto;
  max-width: 100%;
  display: block;
}
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image .aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.entry-content img.ap-lightbox,
.entry-content .wp-block-image img.ap-lightbox {
  cursor: zoom-in;
}
.entry-content .ap-sc-products h2.ap-sc-products__title::before { display: none; }
.entry-content .ap-sc-products h3.name {
  font-family: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.4;
  text-transform: none; letter-spacing: 0; color: var(--ink); margin: 2px 0 4px;
}
.entry-content .ap-sc-products a.img { color: inherit; text-decoration: none; }
.tip-callout { margin: 26px 0; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; background: #fff; }
.tip-callout .tip-title { display: block; color: var(--ink); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.tip-callout p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* entry footer: share + tags */
.entry-share { display: flex; align-items: center; gap: 12px; margin: 36px 0 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.entry-share .share-label { font-weight: 700; font-size: 13px; color: var(--ink); margin-right: 4px; }
.entry-share a { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); color: var(--ink-2); display: grid; place-items: center; transition: all .15s; }
.entry-share a:hover { background: var(--red); color: var(--on-brand); }
.tags-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tags-links a { font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }
.tags-links a:hover { border-color: var(--red-ink); color: var(--red-ink); }

/* ============================================================
   RELATED POSTS
   ============================================================ */
.section-title {
  display: flex; align-items: center; gap: 14px; margin: 40px 0 22px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px;
  text-transform: uppercase; letter-spacing: -.2px; color: var(--ink);
}
.section-title::before { content: ""; width: 5px; height: 26px; background: var(--red); border-radius: 1px; }
.section-title .more-link { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .5px; font-family: 'Manrope', sans-serif; }
a.more-link { color: var(--red); }
.section-title .more-link:hover { text-decoration: underline; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.related-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s; }
.related-card:hover { border-color: var(--red-ink); transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(245, 166, 35,.5); }
.related-thumb {
  aspect-ratio: 16/10; position: relative;
  background: repeating-linear-gradient(45deg, #ededed 0 14px, #f5f5f5 14px 28px);
  display: grid; place-items: center; color: #c4c4c4;
}
.related-thumb svg { width: 40px; height: 40px; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-tag {
  position: absolute; top: 14px; left: 14px; white-space: nowrap; background: var(--red); color: var(--on-brand);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; padding: 5px 11px; border-radius: 3px;
}
.related-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.related-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .3px; display: flex; align-items: center; gap: 10px; }
.related-meta .meta-sep { width: 4px; height: 4px; background: #ccc; border-radius: 50%; }
.related-meta a { color: inherit; }
.related-meta a:hover { color: var(--red-ink); }
.related-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.18; margin: 0; color: var(--ink); text-wrap: balance; }
.related-title a { color: inherit; }
.related-card:hover .related-title { color: var(--red-ink); }
.related-body p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
a.read-more { margin-top: auto; font-weight: 700; font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 8px; }
.related-card:hover .read-more { gap: 12px; }

/* ---- Placeholder block for blank page template ---- */
.content-placeholder {
  border: 1px dashed #d0d0d0; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #f6f6f6 0 14px, #fafafa 14px 28px);
  padding: 64px 28px; text-align: center; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .5px; line-height: 1.7;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) { .content-sidebar-grid { grid-template-columns: 1fr 290px; gap: 32px; } }
@media (max-width: 980px) {
  .content-sidebar-grid { grid-template-columns: 1fr; gap: 40px; }
  .widget-area { position: static; }
}
@media (max-width: 768px) {
  .content-sidebar-section { padding: 28px 0 44px; }
  .related-grid { grid-template-columns: 1fr; gap: 20px; }
  .section-title { font-size: 22px; margin: 28px 0 18px; }
  .entry-title { font-size: 30px; }
  .entry-content { font-size: 15px; }
  .entry-content h2 { font-size: 24px; }
}