/*!
 * Share123 Core — Public pages CSS (article / archive / page)
 * CafeF-inspired information-rich layout
 */

/* ═══════════════════════════════════════════════════════════
 * LAYOUT SHELL — match header/footer 1280px, clear fixed header
 * ═══════════════════════════════════════════════════════════ */
body.single,
body.archive,
body.category,
body.tag,
body.author,
body.search,
body.page {
    background: #fff;
}
.s-content-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 20px 80px; /* top: 58px fixed header + 32px breathing; bottom: gap before footer */
    background: #fff;
}
@media (max-width: 900px) {
    .s-content-wrap { padding: 80px 16px 60px; }
}

/* Main + sidebar grid */
.s-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .s-article-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════
 * BREADCRUMB
 * ═══════════════════════════════════════════════════════════ */
.s-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.s-breadcrumb a { color: #64748b; text-decoration: none; }
.s-breadcrumb a:hover { color: #ff5722; }
.s-breadcrumb .sep { color: #cbd5e1; }
.s-breadcrumb .current { color: #0c1322; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
 * ARTICLE (single)
 * ═══════════════════════════════════════════════════════════ */
.s-article {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.s-article-cat {
    display: inline-block;
    background: #fff5f1;
    color: #ff5722;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 14px;
}
.s-article-cat:hover { background: #ff5722; color: #fff; }
.s-article h1 {
    font-size: 32px;
    font-weight: 900;
    color: #0c1322;
    line-height: 1.3;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
@media (max-width: 700px) {
    .s-article h1 { font-size: 24px; }
}
.s-article-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #334155;
    font-weight: 500;
    margin-bottom: 20px;
    padding-left: 16px;
    border-left: 4px solid #ff5722;
}
.s-article-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #e4e8f1;
    border-bottom: 1px solid #e4e8f1;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.s-article-meta-item { display: flex; align-items: center; gap: 5px; }
.s-article-meta .material-symbols-outlined { font-size: 16px; }
.s-article-author-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 11px;
}
.s-article-featured {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}
.s-article-featured img {
    width: 100%;
    height: auto;
    display: block;
}
.s-article-body {
    font-size: 16px;
    line-height: 1.75;
    color: #1a2332;
}
.s-article-body p { margin: 0 0 18px; }
.s-article-body h2 {
    font-size: 24px;
    font-weight: 800;
    color: #0c1322;
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e8f1;
}
.s-article-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0c1322;
    margin: 26px 0 10px;
}
.s-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px auto;
    display: block;
}
.s-article-body blockquote {
    margin: 22px 0;
    padding: 16px 22px;
    background: #fff5f1;
    border-left: 4px solid #ff5722;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #334155;
}
.s-article-body a { color: #ff5722; }
.s-article-body ul,
.s-article-body ol {
    padding-left: 4px;
    margin: 16px 0 22px;
    list-style: none;
}
.s-article-body ul li,
.s-article-body ol li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    line-height: 1.7;
}
.s-article-body ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5722;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}
.s-article-body ol { counter-reset: ol-counter; }
.s-article-body ol li {
    counter-increment: ol-counter;
    padding-left: 32px;
}
.s-article-body ol li::before {
    content: counter(ol-counter);
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.s-article-body ul ul,
.s-article-body ol ol,
.s-article-body ul ol,
.s-article-body ol ul {
    margin: 8px 0 8px;
}
.s-article-body ul ul li::before {
    background: transparent;
    border: 2px solid #ff5722;
    box-shadow: none;
    width: 6px; height: 6px;
    top: 13px;
}
.s-article-body code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: #dc2626;
}
.s-article-body pre {
    background: #0c1322;
    color: #a3e635;
    padding: 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
    margin: 20px 0;
}
.s-article-body pre code { background: none; color: inherit; padding: 0; }
.s-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 14px;
}
.s-article-body table th,
.s-article-body table td {
    padding: 10px 14px;
    border: 1px solid #e4e8f1;
    text-align: left;
}
.s-article-body table th { background: #f8fafc; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
 * TAGS + SHARE
 * ═══════════════════════════════════════════════════════════ */
.s-article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 20px 0 14px;
    border-top: 1px solid #e4e8f1;
    margin-top: 24px;
}
.s-article-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.s-article-tag:hover { background: #ff5722; color: #fff; }
.s-share {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px 0 20px;
    border-top: 1px dashed #e4e8f1;
    flex-wrap: wrap;
}
.s-share-label { font-size: 12.5px; font-weight: 700; color: #64748b; margin-right: 6px; }
.s-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: transform .15s;
}
.s-share-btn:hover { transform: translateY(-2px); }
.s-share-btn.fb { background: #1877f2; }
.s-share-btn.tw { background: #1da1f2; }
.s-share-btn.zalo { background: #0180c7; }
.s-share-btn.copy { background: #64748b; }

/* ═══════════════════════════════════════════════════════════
 * AUTHOR BOX
 * ═══════════════════════════════════════════════════════════ */
.s-author-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fff5f1, #fef3c7);
    border-radius: 12px;
    margin: 24px 0;
}
.s-author-box-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    flex-shrink: 0;
}
.s-author-box-info h4 {
    font-size: 15px;
    font-weight: 800;
    color: #0c1322;
    margin: 0 0 4px;
}
.s-author-box-info p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
 * SIDEBAR
 * ═══════════════════════════════════════════════════════════ */
.s-sidebar { position: sticky; top: 20px; }
@media (max-width: 900px) {
    .s-sidebar { position: static; }
}
.s-widget {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
    border: 1px solid #e4e8f1;
}
.s-widget-cta { margin-bottom: 28px; }
.s-widget h3 {
    font-size: 13px;
    font-weight: 800;
    color: #0c1322;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ff5722;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.s-widget h3 .material-symbols-outlined { font-size: 18px; color: #ff5722; }

/* Related posts list */
.s-related-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
}
.s-related-item:last-child { border-bottom: none; padding-bottom: 0; }
.s-related-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-related-thumb .material-symbols-outlined { font-size: 32px; color: #94a3b8; }
.s-related-body { flex: 1; min-width: 0; }
.s-related-title {
    font-size: 13px;
    font-weight: 700;
    color: #0c1322;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-related-item:hover .s-related-title { color: #ff5722; }
.s-related-meta { font-size: 11px; color: #8392a5; }

/* Numbered ranking (hot articles) */
.s-rank-list { counter-reset: rank-counter; }
.s-rank-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    counter-increment: rank-counter;
}
.s-rank-item::before {
    content: counter(rank-counter);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #e4e8f1;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    letter-spacing: -1px;
}
.s-rank-item:nth-child(1)::before { color: #ff5722; }
.s-rank-item:nth-child(2)::before { color: #f59e0b; }
.s-rank-item:nth-child(3)::before { color: #64748b; }

/* Category/tag widget */
.s-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-cat-chip {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.s-cat-chip:hover { background: #ff5722; color: #fff; }

/* CTA widget (promote a tool) */
.s-widget-cta {
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    color: #fff;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
}
.s-widget-cta h3 { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.s-widget-cta p { font-size: 13px; opacity: .95; margin: 8px 0 16px; line-height: 1.5; }
.s-widget-cta a {
    display: inline-block;
    background: #fff;
    color: #ff5722;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
 * ARCHIVE (category/tag listing) — CafeF simple style
 * ═══════════════════════════════════════════════════════════ */
.s-archive-head {
    border-bottom: 3px solid #ff5722;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.s-archive-head .s-breadcrumb { margin-bottom: 8px; }
.s-archive-head h1 {
    font-size: 24px;
    font-weight: 900;
    color: #0c1322;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.s-archive-head p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    max-width: 800px;
}
.s-archive-count {
    display: inline-block;
    background: #fff5f1;
    color: #ff5722;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

/* Featured post — first item, full-width with side-by-side layout */
.s-featured {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #e4e8f1;
    transition: box-shadow .2s;
}
.s-featured:hover { box-shadow: 0 8px 24px rgba(12,19,34,.08); }
@media (max-width: 700px) { .s-featured { grid-template-columns: 1fr; } }
.s-featured-img {
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 64px;
    overflow: hidden;
}
.s-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.s-featured-body { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.s-featured-body .s-article-cat { margin-bottom: 10px; }
.s-featured-body h2 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 10px;
    color: #0c1322;
}
.s-featured-body h2 a { color: inherit; text-decoration: none; }
.s-featured-body h2 a:hover { color: #ff5722; }
.s-featured-body p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
 * POST LIST (CafeF style — thumb left + text right, horizontal row)
 * ═══════════════════════════════════════════════════════════ */
.s-post-list { display: flex; flex-direction: column; gap: 0; }
.s-post-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #e4e8f1;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.s-post-row:first-child { padding-top: 0; }
.s-post-row:last-child { border-bottom: none; }
.s-post-row:hover { background: #fafbfc; }
.s-post-row:hover h3 { color: #ff5722; }
@media (max-width: 600px) {
    .s-post-row { grid-template-columns: 120px 1fr; gap: 12px; padding: 14px 0; }
}

.s-post-row-thumb {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s-post-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.s-post-row:hover .s-post-row-thumb img { transform: scale(1.05); }
.s-post-row-thumb .material-symbols-outlined { font-size: 40px; color: #cbd5e1; }

.s-post-row-body { display: flex; flex-direction: column; min-width: 0; }
.s-post-row-cat {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ff5722;
    margin-bottom: 6px;
    text-decoration: none;
}
.s-post-row h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
    color: #0c1322;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .s-post-row h3 { font-size: 14px; -webkit-line-clamp: 3; }
}
.s-post-row p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) { .s-post-row p { display: none; } }
.s-post-row-meta {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: #8392a5;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #f1f5f9;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .s-post-row-meta { padding-top: 6px; gap: 10px; font-size: 10.5px; }
}

/* Legacy grid (kept for single-post related bottom section) */
.s-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.s-post-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e4e8f1;
    transition: all .2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.s-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(12,19,34,.08);
    border-color: #ffb699;
}
.s-post-card-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.s-post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.s-post-card-img .material-symbols-outlined { font-size: 48px; color: #cbd5e1; }
.s-post-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.s-post-card-cat {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ff5722;
    margin-bottom: 8px;
}
.s-post-card h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #0c1322;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-post-card p {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-post-card-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #8392a5;
    padding-top: 10px;
    border-top: 1px dashed #e4e8f1;
}

/* Pagination */
.s-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
    flex-wrap: wrap;
    align-items: center;
}
.s-pagination .page-numbers {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: #475569;
    border: 1px solid #e4e8f1;
    transition: all .15s;
    min-width: 40px;
    text-align: center;
}
.s-pagination a.page-numbers:hover { border-color: #ff5722; color: #ff5722; }
.s-pagination .page-numbers.current { background: #ff5722; color: #fff; border-color: #ff5722; }
.s-pagination .page-numbers.dots { border: none; background: transparent; padding: 9px 4px; }

/* ═══════════════════════════════════════════════════════════
 * STATIC PAGE (page.php)
 * ═══════════════════════════════════════════════════════════ */
.s-page {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    padding: 36px 40px;
    border-radius: 12px;
    border: 1px solid #e4e8f1;
}
@media (max-width: 700px) { .s-page { padding: 24px 20px; } }
.s-page h1 {
    font-size: 28px;
    font-weight: 900;
    color: #0c1322;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.s-page-updated {
    font-size: 12px;
    color: #8392a5;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e8f1;
}

/* Reading progress bar (single articles) */
.s-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff5722, #ff8a50);
    z-index: 999;
    transition: width .1s;
}