/**
 * YogiBee Theme — Blog CSS
 * Blog post layout · TOC desktop sticky · TOC mobile fixed bar (no scroll-jitter).
 * @package YogiBee
 */

/* ═══════════════════════════════════════════
   POST HEADER
══════════════════════════════════════════ */
.post-hd{padding:36px 20px 16px;max-width:var(--wrap,1200px);margin:0 auto}
/* Hero image — 16:6 */
.phi{position:relative;overflow:hidden;border-radius:var(--rl);margin-bottom:24px}
.phi::before{content:'';display:block;padding-bottom:37.5%} /* 16:6 */
.phi.phi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phi.bg-dark{background:linear-gradient(145deg,#0A1A10,#1E3828,#3A6858);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);font-size:32px}
.pcat{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);margin-bottom:9px}
.psh1{font-family:var(--fh);font-size:clamp(21px,5vw,32px);font-weight:500;font-style:italic;color:var(--j2);line-height:1.28;margin-bottom:16px}
.psm{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--tx3);flex-wrap:wrap}

/* ═══════════════════════════════════════════
   POST LAYOUT GRID
══════════════════════════════════════════ */
.post-grid{display:grid;grid-template-columns:1fr;max-width:var(--wrap,1200px);margin:0 auto;padding:0 0 48px}
.post-content{padding:24px 20px;min-width:0}
/* Khoảng cách share→H2 cộng dồn từ .post-hd + .post-content + margin-top của
   heading/đoạn đầu tiên, dễ thành một khoảng trắng rất rộng — bỏ margin-top
   của phần tử ĐẦU TIÊN trong .pcnt để chỉ còn đúng 1 lớp đệm. */
.pcnt > *:first-child{margin-top:0}

/* ═══════════════════════════════════════════
   TOC MOBILE — stays in normal flow, NEVER toggles (= no scroll jitter)
══════════════════════════════════════════ */
.toc-mobile{border:1px solid var(--bd);border-radius:var(--r);margin-bottom:28px;overflow:hidden;background:var(--s0)}
.toc-mobile-title{padding:13px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--jade);display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--bd2)}
.toc-mobile-body{padding:8px 16px 14px}

/* Mini sticky TOC bar — position:fixed, does NOT shift page layout */
.toc-mini-bar{
  display:none;
  position:fixed;
  top:calc(var(--abh) + var(--nav-h));
  left:0;right:0;z-index:120;
  background:rgba(244,250,240,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:none;border-bottom:2px solid var(--s2);
  box-shadow:0 2px 8px rgba(26,92,72,.09);
  padding:11px 20px;
  font-size:13px;font-weight:600;color:var(--jade);
  text-align:left;align-items:center;justify-content:space-between;
  font-family:var(--fb);cursor:pointer;width:100%;
}
.toc-mini-bar.show{display:flex;transform:translateY(0);transition:transform .25s ease}
/* Cuộn xuống → thu lên giấu sau thanh nav; cuộn lên hoặc chạm vào là hiện lại */
.toc-mini-bar.show.retract{transform:translateY(-120%)}
.toc-mini-bar span:last-child{font-size:11px;color:var(--tx3);transition:transform var(--tr)}
.toc-mini-bar.dd-open span:last-child{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){
  .toc-mini-bar.show{transition:none}
}
.toc-mini-dd{
  display:none;
  position:fixed;
  top:calc(var(--abh) + var(--nav-h) + 44px);
  left:0;right:0;z-index:119;
  background:var(--w);max-height:55vh;overflow-y:auto;
  box-shadow:var(--sh2);padding:10px 20px 16px;
  border-bottom:1px solid var(--bd);
}
.toc-mini-dd.open{display:block}

/* Desktop TOC sidebar */
.toc-sidebar{display:none;padding:24px 20px}
.toc-sticky-box{
  position:sticky;
  top:calc(var(--abh) + var(--nav-h) + 16px);
  background:var(--s1);border-radius:var(--rl);
  padding:20px;border:1px solid var(--bd);
}
.toct{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--jade);margin-bottom:14px;padding-bottom:10px;border-bottom:1.5px solid var(--amb)}
.tocl{display:flex;flex-direction:column;gap:2px}
.tocl a{
  font-size:var(--fs-sm);color:var(--tx2);
  display:flex;align-items:flex-start;gap:7px;
  padding:5px 8px;border-radius:6px;
  transition:all var(--tr);line-height:1.5;cursor:pointer;text-decoration:none;
}
.tocl a::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--tx3);flex-shrink:0;margin-top:8px}
.tocl a:hover,.tocl a.active{color:var(--jade);background:var(--s2)}
.tocl a.active::before{background:var(--amb)}

/* ═══════════════════════════════════════════
   POST CONTENT
══════════════════════════════════════════ */
/* ═══ TAB CHUYÊN MỤC BLOG ═══ */
.blog-tabs{
  background:var(--s1);border-bottom:1px solid var(--bd);
  padding:12px 20px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.blog-tabs::-webkit-scrollbar{display:none}
.blog-tabs-in{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.blog-tabs-n{
  margin-left:6px;padding:1px 6px;border-radius:9px;
  background:rgba(26,92,72,.1);color:var(--jade);
  font-size:11px;font-weight:700;
}
.ptag.on .blog-tabs-n{background:rgba(255,255,255,.25);color:#fff}

/* ═══ TRANG THƯƠNG HIỆU ═══ */
.brandpg{padding:36px 20px 64px}
.brandpg-empty{text-align:center;color:var(--tx3);padding:40px 0}
.brandpg-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.brandpg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.brandpg-grid{grid-template-columns:repeat(3,1fr)}}

.brandc{
  display:flex;flex-direction:column;
  background:var(--w);border:1px solid var(--bd);
  border-radius:var(--r-lg,16px);overflow:hidden;
  transition:transform var(--tr),box-shadow var(--tr);
}
.brandc:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.brandc-hd{
  display:flex;align-items:center;justify-content:center;
  min-height:132px;text-decoration:none;
}
.brandc-hd.bg1{background:linear-gradient(135deg,#0A1A10,#1A3828,#2A5040)}
.brandc-hd.bg2{background:linear-gradient(135deg,#1A180A,#363010,#504818)}
.brandc-hd.bg3{background:linear-gradient(135deg,#0A1018,#142030,#203848)}
.brandc-hd.bg4{background:linear-gradient(135deg,#180A10,#301020,#481828)}
.brandc-hd.bg5{background:linear-gradient(135deg,#0E1614,#1C2C22,#284038)}
.brandc-logo{max-width:64%;max-height:76px;width:auto;height:auto;object-fit:contain}
.brandc-mono{
  font-family:var(--fh);font-size:46px;font-style:italic;
  color:rgba(255,255,255,.9);line-height:1;
}
.brandc-bd{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.brandc-nm{font-family:var(--fh);font-size:20px;font-style:italic;font-weight:500;margin-bottom:7px}
.brandc-nm a{color:var(--j2);text-decoration:none}
.brandc-nm a:hover{color:var(--jade)}
.brandc-ds{font-size:var(--fs-sm);color:var(--tx2);line-height:1.65;margin-bottom:10px}
.brandc-mt{font-size:var(--fs-xs);color:var(--tx3);margin-top:auto;margin-bottom:12px}
.brandc-go{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-sm);font-weight:600;color:var(--jade);text-decoration:none;
}
.brandc-go:hover{color:var(--j2)}

.brandpg-body{margin-top:40px}
.brandpg-cta{
  margin-top:44px;padding:28px 20px;text-align:center;
  background:var(--s1);border-radius:var(--r-lg,16px);
}
.brandpg-cta p{font-size:var(--fs-md);color:var(--j2);margin-bottom:16px;font-weight:500}
.brandpg-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.pcnt h2{font-family:var(--fh);font-size:22px;font-style:italic;font-weight:500;color:var(--j2);margin:32px 0 12px;line-height:1.3;scroll-margin-top:calc(var(--abh) + var(--nav-h) + 60px)}
.pcnt h3{font-size:var(--fs-md);font-weight:600;color:var(--tx);margin:24px 0 10px;scroll-margin-top:calc(var(--abh) + var(--nav-h) + 60px)}
.pcnt h4{font-size:var(--fs-base);font-weight:600;color:var(--tx);margin:20px 0 8px}
.pcnt p{font-size:var(--fs-base);color:var(--tx2);line-height:1.8;margin-bottom:16px}
.pcnt ul,.pcnt ol{padding-left:22px;margin-bottom:16px}
.pcnt li{font-size:var(--fs-base);color:var(--tx2);line-height:1.8;margin-bottom:6px}
.pcnt strong{color:var(--tx);font-weight:600}
.pcnt em{color:var(--jade);font-style:italic}
/* Cùng 1 kiểu link với bài mô tả sản phẩm (.spec-link ở product.css): không
   gạch dưới, chỉ đổi màu đậm hơn + nền nhạt lúc hover — nổi bật mà không rối
   mắt giữa một đoạn văn dài. */
.pcnt a{
  color:var(--j2);font-weight:500;text-decoration:none;
  padding:1px 3px;margin:0 -3px;border-radius:3px;
  transition:background var(--tr),color var(--tr);
}
.pcnt a:hover{background:rgba(62,131,104,.12);color:var(--jade)}
.pcnt a:focus-visible{outline:2px solid var(--jade);outline-offset:1px;border-radius:3px}
/* Callout / blockquote */
.cal{background:var(--s1);border-left:3px solid var(--jade);padding:13px 16px;border-radius:0 var(--r) var(--r) 0;margin:22px 0}
.cal p{font-size:var(--fs-base);color:var(--tx);font-style:italic;margin:0;line-height:1.7}
/* Image in content */
.pcnt .wp-block-image{margin:24px 0;border-radius:var(--rl);overflow:hidden}
.pcnt .wp-block-image img{border-radius:var(--rl)}

/* ═══════════════════════════════════════════
   POST FOOTER (share, author, tags)
══════════════════════════════════════════ */
.shbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:28px 0}
.shl{font-size:var(--fs-sm);font-weight:600;color:var(--tx2)}
.shb{padding:7px 14px;border-radius:20px;font-size:var(--fs-sm);border:1px solid var(--bd);color:var(--tx2);cursor:pointer;background:transparent;font-family:var(--fb);transition:all var(--tr)}
.shb:hover{border-color:var(--jade);color:var(--jade)}

/* Share — dạng icon gọn, đứng ngay dưới tác giả/ngày/tg đọc */
.shbar-icons{display:flex;align-items:center;gap:8px;margin-top:12px}
.shb-ic{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--bd);color:var(--tx2);
  background:transparent;cursor:pointer;text-decoration:none;
  transition:all var(--tr);
}
.shb-ic svg{width:16px;height:16px}
.shb-ic:hover{border-color:var(--jade);color:var(--jade);background:var(--s1)}
.abox{background:var(--s1);border-radius:var(--rl);padding:18px;display:flex;gap:16px;margin:28px 0;border:1px solid var(--bd2)}
.aav{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:18px;font-style:italic;color:#fff;flex-shrink:0}
.anm{font-size:var(--fs-base);font-weight:600;color:var(--tx);margin-bottom:2px}
.atit{font-size:var(--fs-xs);color:var(--j3);margin-bottom:7px;font-weight:600}
.abio{font-size:var(--fs-sm);color:var(--tx2);line-height:1.75}
.tch{display:inline-flex;padding:5px 12px;background:var(--s1);border-radius:18px;font-size:var(--fs-sm);color:var(--tx2);text-decoration:none;border:1px solid var(--bd2)}
.tch:hover{border-color:var(--jade);color:var(--jade)}

/* ═══════════════════════════════════════════
   COMMENTS
══════════════════════════════════════════ */
.comments-area{margin-top:40px;padding-top:32px;border-top:1px solid var(--bd)}
.comments-area h2{font-family:var(--fh);font-style:italic;color:var(--j2);font-size:22px;margin-bottom:24px}
.comment-list{display:flex;flex-direction:column;gap:16px}
.comment-body{background:var(--s0);border-radius:var(--rl);padding:16px;border:1px solid var(--bd2)}
.comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.comment-author{font-weight:600;font-size:var(--fs-sm)}
.comment-date{font-size:var(--fs-xs);color:var(--tx3)}

/* ═══════════════════════════════════════════
   RESPONSIVE — Blog
══════════════════════════════════════════ */
@media(min-width:768px){
  .post-grid{grid-template-columns:1fr 280px}
  .toc-sidebar{display:block}
  .toc-mobile{display:none}
}
@media(min-width:1024px){
  .post-grid{grid-template-columns:1fr 300px}
}


/* Sản phẩm liên quan — thay chỗ "Bài viết liên quan" cuối bài, dùng chung
   khung .bgrid/.bc nhưng khung ảnh VUÔNG 1:1 như card sản phẩm thật (.pim ở
   trang chủ/archive/trang chi tiết sp) — .bim mặc định 16:9 (ảnh bài blog),
   sai tỉ lệ cho ảnh sản phẩm. Đè bằng .bim.rp-im để chắc thắng .bim::before. */
.bim.rp-im::before{padding-bottom:100%}
.rp-im img{object-fit:contain;background:var(--s1)}
/* Cùng lý do như .pim: ảnh sản phẩm nền trắng trên card nền trắng thì không
   thấy ranh giới, tên sản phẩm trông như dính vào ảnh. Nhạt hơn viền ngoài
   của card — đây chỉ là vạch ngăn nội bộ. */
.bim.rp-im{border-bottom:1px solid #ececec}
.rp-nm{
  font-family:var(--fb);font-size:var(--fs-base);font-weight:600;
  color:var(--tx);line-height:1.4;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.rp-pp{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap}
.rp-now{font-size:var(--fs-base);font-weight:700;color:var(--a2)}
.rp-was{font-size:var(--fs-sm);color:var(--tx3);text-decoration:line-through}