/* =========================================================
   THẾ GIỚI GIẤY — Blog module (listing + article detail)
   New components only — reuses tokens & base classes from style.css
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.crumb a{color:var(--blue-600);font-weight:600;}
.crumb a:hover{text-decoration:underline;}

/* ---------- Title band ---------- */
.blog-title-band{padding:48px 0 8px;}
.blog-title-band h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.01em;margin-bottom:14px;max-width:880px;}
.blog-title-band p{color:var(--ink-500);font-size:16px;max-width:760px;}

/* ---------- Listing layout ---------- */
.blog-layout{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start;}
.blog-main{min-width:0;}

/* ---------- Sidebar blocks (shared listing + article) ---------- */
.side-block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px;margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.side-block h3{font-size:15.5px;font-weight:800;color:var(--navy-900);margin-bottom:16px;}

.side-cta{
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff;
  border-radius:var(--radius-md);padding:26px 22px;margin-bottom:24px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.side-cta::after{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,180,255,.28),transparent 70%);pointer-events:none;
}
.side-cta span.eyebrow{color:#8fb8f5;margin-bottom:10px;}
.side-cta h3{color:#fff;font-size:18px;font-weight:800;margin-bottom:8px;position:relative;z-index:1;}
.side-cta p{color:rgba(255,255,255,.78);font-size:13.5px;margin-bottom:18px;position:relative;z-index:1;line-height:1.6;}
.side-cta .btn{position:relative;z-index:1;}

.side-cat-list{display:flex;flex-direction:column;gap:2px;}
.side-cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 4px;font-size:14px;font-weight:600;color:var(--ink-700);
  border-bottom:1px solid var(--line);transition:.15s;
}
.side-cat-list a:last-child{border-bottom:none;}
.side-cat-list a:hover{color:var(--blue-600);padding-left:8px;}
.side-cat-list a svg{flex:none;width:14px;height:14px;color:var(--ink-300);transition:transform .15s;}
.side-cat-list a:hover svg{transform:translateX(3px);color:var(--blue-600);}

.side-product-list{display:flex;flex-direction:column;gap:14px;}
.side-product-item{display:flex;align-items:center;gap:12px;}
.side-product-thumb{
  flex:none;width:52px;height:52px;border-radius:10px;
  background:linear-gradient(160deg,var(--blue-50),var(--blue-100));color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
}
.side-product-thumb svg{width:26px;height:26px;}
.side-product-item a{font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.4;}
.side-product-item a:hover{color:var(--blue-600);}

.side-search{display:flex;gap:8px;}
.side-search input{
  flex:1;min-width:0;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-size:14px;font-family:var(--font-body);background:var(--surface-alt);
}
.side-search input:focus{outline:none;border-color:var(--blue-600);background:#fff;}
.side-search button{
  flex:none;width:42px;border-radius:10px;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.side-search button:hover{background:var(--navy-900);}
.side-search button svg{width:18px;height:18px;}

.side-post-list{display:flex;flex-direction:column;gap:14px;}
.side-post-list li a{font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.5;display:block;}
.side-post-list li a:hover{color:var(--blue-600);}
.side-post-list li{padding-bottom:14px;border-bottom:1px solid var(--line);}
.side-post-list li:last-child{padding-bottom:0;border-bottom:none;}

.side-mini-form .form-field{margin-bottom:12px;}
.side-mini-form .form-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-700);margin-bottom:5px;}
.side-mini-form .form-field input{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;
  font-family:var(--font-body);background:var(--surface-alt);
}
.side-mini-form .form-field input:focus{outline:none;border-color:var(--blue-600);background:#fff;}

/* ---------- Tag sections (listing page) ---------- */
.tag-section{margin-bottom:52px;}
.tag-section:last-child{margin-bottom:0;}
.tag-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px;
}
.tag-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-600);margin-bottom:8px;
}
.tag-pill::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--blue-600);flex:none;}
.tag-section-head h2{font-size:clamp(19px,2.2vw,24px);font-weight:800;margin:0;}
.tag-section-head a.btn-ghost{flex:none;}

.blog-grid.blog-grid-3{grid-template-columns:repeat(3,1fr);}

/* ---------- Article layout ---------- */
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
.article-main{min-width:0;}

.article-header{margin-bottom:26px;}
.article-header h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.01em;margin-bottom:16px;}
.article-meta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-500);font-weight:500;
}
.article-meta .meta-sep{color:var(--ink-300);}
.meta-chip{display:inline-flex;align-items:center;gap:6px;color:var(--ink-500);}
.meta-chip svg{width:16px;height:16px;color:var(--ink-300);}

.article-feature-img{
  height:400px;border-radius:var(--radius-lg);margin:24px 0 32px;
  background:linear-gradient(160deg,var(--blue-100),var(--blue-50));color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
}
.article-feature-img svg{width:96px;height:96px;}

.article-toc{
  background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 24px;margin-bottom:32px;
}
.article-toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy-900);font-weight:800;margin-bottom:14px;}
.article-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:9px;}
.article-toc li{counter-increment:toc;}
.article-toc a{
  display:flex;align-items:baseline;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-700);transition:.15s;
}
.article-toc a::before{
  content:counter(toc);flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.article-toc a:hover{color:var(--blue-600);}

.article-body{font-size:16px;color:var(--ink-700);line-height:1.85;}
.article-body p{margin-bottom:20px;}
.article-body h2{
  font-size:clamp(20px,2.4vw,26px);font-weight:800;margin:40px 0 16px;padding-top:6px;
  scroll-margin-top:100px;
}
.article-body .article-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 8px;}

/* ---------- Comments ---------- */
.comment-section{margin-top:52px;padding-top:36px;border-top:1px solid var(--line);}
.comment-section h2{font-size:22px;font-weight:800;margin-bottom:22px;}
.comment-form{display:flex;gap:14px;margin-bottom:32px;align-items:flex-start;}
.comment-form textarea{
  flex:1;min-height:80px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--font-body);font-size:14.5px;color:var(--ink-900);background:var(--surface-alt);resize:vertical;
}
.comment-form textarea:focus{outline:none;border-color:var(--blue-600);background:#fff;}
.comment-form button{flex:none;}
.comment-list{display:flex;flex-direction:column;gap:22px;}
.comment-item{display:flex;gap:14px;}
.comment-avatar{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:16px;
}
.comment-body{flex:1;}
.comment-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
.comment-head strong{font-size:14.5px;color:var(--navy-900);font-weight:700;}
.comment-head span{font-size:12.5px;color:var(--ink-300);}
.comment-body p{font-size:14.5px;color:var(--ink-700);line-height:1.7;}

/* ---------- Sticky share rail (left, desktop only) ---------- */
.share-rail{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:390;
  display:flex;flex-direction:column;gap:12px;
}
.share-rail .icon-btn{
  width:44px;height:44px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--navy-800);
}
.share-rail .icon-btn:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600);}
.share-rail .icon-btn svg{width:18px;height:18px;}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .share-rail{display:none;}
}
@media (max-width:1080px){
  .blog-layout,.article-layout{grid-template-columns:1fr;}
  .blog-grid.blog-grid-3{grid-template-columns:repeat(2,1fr);}
  .article-main{order:1;}
  .side-rail{order:2;}
}
@media (max-width:640px){
  .blog-grid.blog-grid-3{grid-template-columns:1fr;}
  .comment-form{flex-direction:column;}
  .comment-form button{width:100%;}
  .article-feature-img{height:220px;}
  .article-feature-img svg{width:64px;height:64px;}
  .tag-section-head{flex-direction:column;align-items:flex-start;}
}