/* =======================================================================
   Taxi Lâm Đồng - Blog Style — CSS riêng cho trang danh sách/chi tiết blog.
   Scoped dưới .tld-scope. .hero/.sec-eyebrow/.sec-head/section/.soft/
   .fallback-cta dùng chung khái niệm với các plugin khác nhưng file này
   tự đủ (không phụ thuộc plugin Directory/Blocks) để có thể dùng độc lập.
   ======================================================================= */

.tld-scope .narrow{ max-width:760px; margin:0 auto; padding:0 22px; }

/* ---- hero ---- */
.tld-scope .hero{ padding:44px 0 30px; background:linear-gradient(180deg,#EAFBFC 0%, #FFFFFF 90%); text-align:center; }
.tld-scope .hero h1{ font-size:clamp(25px,3.8vw,38px); font-weight:800; margin:0 auto 12px; max-width:700px; }
.tld-scope .hero p.lead{ color:var(--muted); font-size:15px; max-width:580px; margin:0 auto 22px; }
.tld-scope .hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- category filter ---- */
.tld-scope .filter-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.tld-scope .fchip{ padding:9px 17px; border-radius:20px; border:1.5px solid var(--line); font-size:13px; font-weight:600; color:var(--muted); background:#fff; }
.tld-scope .fchip.on{ border-color:var(--cyan); color:var(--cyan-ink); background:var(--bg-soft); }

/* ---- featured post ---- */
.tld-scope .featured-post{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:36px; }
.tld-scope .featured-thumb{ background:linear-gradient(150deg,var(--cyan-ink),var(--cyan-deep) 60%,var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:64px; min-height:220px; position:relative; overflow:hidden; }
.tld-scope .featured-thumb::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.6px, transparent 1.6px); background-size:22px 22px; opacity:.6; }
.tld-scope .featured-thumb img{ width:100%; height:100%; object-fit:cover; position:relative; }
.tld-scope .featured-body{ padding:30px 32px; display:flex; flex-direction:column; justify-content:center; }
.tld-scope .cat-tag{ display:inline-flex; align-self:flex-start; font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; background:var(--bg-soft); color:var(--cyan-ink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.tld-scope .featured-body h2{ font-size:clamp(19px,2.4vw,24px); font-weight:700; margin-bottom:10px; line-height:1.35; }
.tld-scope .featured-body p{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.tld-scope .post-meta{ display:flex; gap:12px; font-size:12px; color:var(--muted); align-items:center; }
.tld-scope .post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); }
@media(max-width:760px){ .tld-scope .featured-post{ grid-template-columns:1fr; } .tld-scope .featured-thumb{ min-height:160px; } }

/* ---- blog grid ---- */
.tld-scope .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .tld-scope .blog-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .tld-scope .blog-grid{ grid-template-columns:1fr; } }
.tld-scope .blog-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.15s; display:flex; flex-direction:column; }
.tld-scope .blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.tld-scope .blog-thumb{ height:130px; background:linear-gradient(135deg,var(--bg-soft),#fff); display:flex; align-items:center; justify-content:center; font-size:36px; overflow:hidden; }
.tld-scope .blog-thumb img{ width:100%; height:100%; object-fit:cover; }
.tld-scope .blog-body{ padding:20px; display:flex; flex-direction:column; flex-grow:1; }
.tld-scope .blog-card h3{ font-size:14.5px; font-weight:700; margin-bottom:10px; line-height:1.4; flex-grow:1; }
.tld-scope .blog-card p.excerpt{ font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.tld-scope .empty-state{ text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px; }
.tld-scope .load-more-row{ text-align:center; margin-top:30px; }
.tld-scope .load-more-row a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:700; border:1.5px solid var(--line); background:#fff; color:var(--ink); margin:0 6px; }

/* ---- related posts (dùng lại .blog-card) ---- */
.tld-scope .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .tld-scope .related-grid{ grid-template-columns:1fr; } }

/* ---- fallback cta ---- */
.tld-scope .fallback-cta{ background:linear-gradient(150deg,#0E2126,#173A3F); border-radius:24px; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; color:#fff; }
.tld-scope .fallback-cta h3{ font-size:17px; font-weight:700; margin-bottom:6px; }
.tld-scope .fallback-cta p{ font-size:13px; color:#B7CBCD; }
.tld-scope .fallback-cta .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- breadcrumb ---- */
.tld-scope .breadcrumb{ font-size:12.5px; color:var(--muted); padding:20px 0 0; }
.tld-scope .breadcrumb a:hover{ color:var(--cyan-ink); }
.tld-scope .breadcrumb .sep{ margin:0 6px; }

/* ---- article head ---- */
.tld-scope .article-head{ padding:18px 0 26px; }
.tld-scope .article-head h1{ font-size:clamp(24px,4vw,36px); font-weight:800; line-height:1.25; margin-bottom:16px; }
.tld-scope .article-meta{ display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.tld-scope .article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); }
.tld-scope .author-chip{ display:flex; align-items:center; gap:8px; }
.tld-scope .author-avatar{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#8CE9EC,var(--cyan)); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }

.tld-scope .article-thumb-hero{ border-radius:24px; background:linear-gradient(150deg,var(--cyan-ink),var(--cyan-deep) 60%,var(--cyan)); min-height:220px; display:flex; align-items:center; justify-content:center; font-size:72px; position:relative; overflow:hidden; margin-bottom:8px; }
.tld-scope .article-thumb-hero::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.6px, transparent 1.6px); background-size:22px 22px; opacity:.6; }
.tld-scope .article-thumb-hero-img{ background:var(--bg-soft); }
.tld-scope .article-thumb-hero img{ width:100%; height:100%; object-fit:cover; position:relative; border-radius:24px; }

/* ---- article body typography ---- */
.tld-scope .article-body{ font-size:15px; color:var(--ink); }
.tld-scope .article-body p{ margin-bottom:18px; color:var(--ink); }
.tld-scope .article-body h2{ font-size:clamp(19px,2.4vw,23px); font-weight:700; margin:32px 0 14px; }
.tld-scope .article-body ul,
.tld-scope .article-body ol{ margin:0 0 18px 20px; }
.tld-scope .article-body li{ margin-bottom:9px; color:var(--ink); }
.tld-scope .article-body strong{ color:var(--ink); }
.tld-scope .article-body img{ max-width:100%; height:auto; border-radius:16px; margin:8px 0 18px; }
.tld-scope .article-body blockquote{ background:var(--bg-soft); border-left:4px solid var(--cyan); border-radius:14px; padding:18px 22px; margin:24px 0; font-size:14.5px; color:var(--cyan-ink); font-weight:600; }

.tld-scope .author-box{ display:flex; align-items:center; gap:14px; background:var(--bg-soft); border-radius:16px; padding:20px; margin-top:34px; }
.tld-scope .author-box .author-avatar{ width:44px; height:44px; font-size:16px; }
.tld-scope .author-box .name{ font-size:14px; font-weight:700; }
.tld-scope .author-box .role{ font-size:12.5px; color:var(--muted); }

.tld-scope .share-row{ display:flex; align-items:center; gap:10px; margin-top:20px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.tld-scope .share-row .btn{ padding:8px 14px; font-size:12px; }

/* ---- service nav (khối "Dịch vụ Taxi Lâm Đồng" trong bài viết) ---- */
.tld-scope .service-nav-wrap{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow); margin:34px 0; }
.tld-scope .service-nav-head{ margin-bottom:18px; }
.tld-scope .service-nav-head h3{ font-size:17px; font-weight:700; margin-bottom:6px; }
.tld-scope .service-nav-head p{ font-size:13px; color:var(--muted); }
.tld-scope .service-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:760px){ .tld-scope .service-nav{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .tld-scope .service-nav{ grid-template-columns:1fr; } }
.tld-scope .service-nav-card{ display:flex; align-items:flex-start; gap:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:16px; transition:.15s; }
.tld-scope .service-nav-card:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:var(--shadow-sm); background:#fff; }
.tld-scope .service-nav-card .ico{ width:38px; height:38px; border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; box-shadow:var(--shadow-sm); }
.tld-scope .service-nav-card h4{ font-size:13.5px; font-weight:700; margin-bottom:4px; }
.tld-scope .service-nav-card p{ font-size:11.5px; color:var(--muted); line-height:1.5; }
.tld-scope .service-nav-card .arrow{ margin-left:auto; align-self:center; color:var(--cyan-ink); font-size:15px; flex-shrink:0; }