/* ==================================================================
   SONBDS — THƯƠNG HIỆU TRANG BÀI VIẾT
   Đặt 26/08/2026. Nạp bởi mu-plugin sonbds-bai-viet.php
   Bảng màu: navy #0b1f3a · gold #b8892b · kem #f7f4ee
   ================================================================== */
:root{
  --sb-navy:#0b1f3a;
  --sb-gold:#b8892b;
  --sb-gold-nhat:#e8d9b5;
  --sb-kem:#f7f4ee;
  --sb-muc:#1b1f27;
  --sb-mo:#5b6472;
  --sb-vien:#e2dccd;
}

/* ---------- DỌN PHẦN ĐẦU BÀI (09/09/2026) ----------
   Anh Sơn báo đọc rối trên điện thoại. Đo ra: trong vòng một màn hình đầu tiên có
   BA thứ bị nhắc hai lần — chuyên mục, ngày, và tiêu đề. Cộng thêm bốn nút chia sẻ
   chắn ngang giữa tiêu đề và nội dung.

   Đã xử ở sonbds-bai-viet.php: bỏ mục cuối breadcrumb (lặp h1), dòng "Cập nhật ngày"
   chỉ hiện khi bài thật sự được sửa sau khi đăng.
   Hai luật dưới đây xử nốt phần nằm trong tay theme.                                */

/* 1 · Cả dòng tác giả · ngày · chuyên mục dưới tiêu đề navy — anh Sơn yêu cầu bỏ hẳn.
   Bỏ được gì mà KHÔNG mất gì:
     · chuyên mục → breadcrumb ngay dưới đã có, kèm link về đúng chuyên mục
     · tác giả    → schema vẫn khai `author`, và cuối bài vẫn còn hộp .postauthor
                    có ảnh + mô tả (phần E-E-A-T)
   Chỗ DUY NHẤT thật sự mất: NGÀY ĐĂNG với người đọc. Schema vẫn có datePublished nên
   Google biết, nhưng người đọc không đọc schema — mà bài hạ tầng/tiến độ thì câu hỏi
   đầu tiên của khách là "viết hồi nào, còn đúng không".

   MUỐN BẬT LẠI RIÊNG NGÀY: đổi luật này thành
       .single-full-header .post-info .theauthor,
       .single-full-header .post-info .thecategory{display:none !important;}
   là dòng chỉ còn mỗi ngày tháng.                                                   */
.single-full-header .post-info{display:none !important;}

/* 2 · Nút chia sẻ ở ĐẦU bài: chưa đọc chữ nào thì chưa ai chia sẻ. Theme vốn đã in
   một khối y hệt ở CUỐI bài — giữ khối đó, ẩn khối đầu. Dùng :first-child chứ
   không ẩn .shareit chung, kẻo mất luôn khối cuối. */
.entry-content > .shareit:first-child{display:none !important;}

/* ==================================================================
   THANH ĐẦU TRANG & KHỐI TIÊU ĐỀ NAVY — ĐỌC TRƯỚC KHI SỬA SỐ
   ==================================================================
   `#site-header #header` (logo + menu) neo `position:absolute`, top 0 — nó NỔI ĐÈ
   lên khối navy chứ không đẩy khối navy xuống. Nên khối navy BẮT BUỘC phải có
   `padding-top` lớn hơn chiều cao thanh đó, không thì menu in chồng lên tiêu đề.

   ĐÃ DÍNH THẬT 09/09/2026: trước đó web không có menu nào nên thẻ <nav> cao 0px,
   thanh header coi như vô hình, đặt padding-top 52px vẫn nhìn ổn. Vừa dựng menu 6 mục
   xong thì thanh cao 152px, menu đè thẳng lên tiêu đề trên máy tính (anh Sơn chụp lại).

   Số hiện tại (đo ở 1280px):
     · #header padding 14px trên/dưới  →  cao 84px
     · khối navy padding-top 98px      →  tiêu đề bắt đầu ở 98px, an toàn 14px
   Ở khổ ≤600px thanh chỉ còn nút ☰ nên cao 28px, khối navy dùng 62px là đủ.

   ĐỔI MỘT SỐ THÌ PHẢI ĐO LẠI SỐ KIA. Cách đo nhanh trong Console:
     nav=document.querySelector('nav.navigation').getBoundingClientRect()
     h1=document.querySelector('.single-full-header .single-title').getBoundingClientRect()
     nav.bottom > h1.top   // true là đang đè
   ================================================================== */
#site-header #header{
  padding-top:14px !important;
  padding-bottom:14px !important;
}

.single-full-header{
  background-color:var(--sb-navy) !important;
  /* Ảnh đại diện của bài là ẢNH CHIA SẺ 1200x630 — chữ tiêu đề đã in sẵn
     trong ảnh. Theme lấy nó làm ảnh nền cho hero rồi in thêm <h1> lên trên
     → hai tiêu đề chồng nhau, đọc không nổi (anh Sơn báo 05/09/2026).
     background-color KHÔNG đè được background-image, phải tắt riêng. */
  background-image:none !important;
  min-height:0 !important;
  height:auto !important;
  padding:98px 0 42px !important;   /* xem khối chú thích ngay trên */
  border-bottom:3px solid var(--sb-gold);
  position:relative;
}
.single-full-header .overlay{background:transparent !important;}
.single-full-header .single-featured-content{padding:0 !important;}
.single-full-header .title.single-title{
  font-size:clamp(1.7rem,4.2vw,2.6rem) !important;
  line-height:1.18 !important;
  margin:0 auto !important;
  max-width:22ch;
  text-wrap:balance;
  color:#fff !important;
}
.single-full-header .post-info,
.single-full-header .post-info a,
.single-full-header .post-info span{
  color:var(--sb-gold-nhat) !important;
  font-size:13px !important;
  letter-spacing:.02em;
}
.single-full-header .post-info a:hover{color:#fff !important;}

/* ---------- ĐƯỜNG DẪN (breadcrumb) ---------- */
.sonbds-breadcrumb{
  font-size:13px;color:var(--sb-mo);
  margin:0 0 6px;padding-bottom:10px;
  border-bottom:1px solid var(--sb-vien);
  line-height:1.9;
}
.sonbds-breadcrumb a{color:var(--sb-navy);text-decoration:none;}
.sonbds-breadcrumb a:hover{color:var(--sb-gold);text-decoration:underline;}
.sonbds-breadcrumb .sep{margin:0 8px;color:var(--sb-gold);}
.sonbds-breadcrumb span[aria-current]{color:var(--sb-mo);}

.sonbds-ngay{
  font-size:12.5px !important;color:var(--sb-mo) !important;
  margin:0 0 26px !important;letter-spacing:.02em;
}
/* Không có dòng "Cập nhật ngày" thì breadcrumb tự lo khoảng cách xuống nội dung. */
.sonbds-breadcrumb:last-of-type{margin-bottom:22px;}

/* ---------- THÂN BÀI ---------- */
.entry-content{
  font-size:17.5px;
  line-height:1.78;
  color:var(--sb-muc);
}
.entry-content p{margin-bottom:1.15em;}
.entry-content strong{color:var(--sb-navy);font-weight:700;}

/* ---------- SỐ THỨ TỰ MỤC TRƯỚC MỖI H2 (13/09/2026) ----------
   Anh Sơn khen cách trình bày của datnenhoalac.com/ban-dat-hoa-lac/... — mỗi mục lớn
   có một số tròn navy đứng trước tiêu đề, mắt bắt nhịp nhanh hơn hẳn so với chỉ có
   thanh gold bên trái. Đây là bản mượn LAYOUT đó, giữ nguyên bảng màu của mình.

   Làm bằng CSS counter thuần — KHÔNG cần sửa lại một bài nào trong hơn 90 bài đã đăng,
   tự áp dụng cho mọi <h2> trong .entry-content kể từ lúc file này lên web.
   Số đếm lại từ 1 ở mỗi bài (counter-reset đặt trên .entry-content).

   Đã thử display:flex trên chính thẻ <h2> (không bọc thêm span) — chữ trong h2 tự
   thành một "anonymous flex item" đứng cạnh ::before, mọi trình duyệt hiện đại đều
   render đúng, không cần sửa PHP sinh ra thẻ.

   CHỈ ÁP DỤNG CHO BÀI VIẾT (.entry-content). 6 trang dự án tĩnh (/du-an/...) là file
   HTML dựng tay riêng, không đọc file CSS này — muốn đồng bộ số thứ tự bên đó thì
   phải sửa từng file, chưa làm trong đợt này.                                        */
.entry-content{counter-reset:sb-muc;}
.entry-content h2{
  counter-increment:sb-muc;
  font-size:clamp(1.35rem,2.9vw,1.72rem) !important;
  line-height:1.28 !important;
  color:var(--sb-navy) !important;
  margin:2.1em 0 .6em !important;
  padding-left:0 !important;
  border-left:none !important;
  display:flex !important;
  align-items:flex-start;
  gap:14px;
  text-wrap:balance;
  scroll-margin-top:90px;
}
.entry-content h2::before{
  content:counter(sb-muc);
  flex:0 0 34px;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--sb-navy);
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:34px;
  text-align:center;
  margin-top:.15em;
}
.entry-content h3{
  font-size:1.14rem !important;
  color:var(--sb-navy) !important;
  margin:1.7em 0 .45em !important;
  scroll-margin-top:90px;
}

.entry-content ul li,
.entry-content ol li{margin-bottom:.5em;}

/* ---------- MỤC LỤC ---------- */
.sonbds-mucluc{
  background:var(--sb-kem);
  border:1px solid var(--sb-vien);
  border-left:4px solid var(--sb-gold);
  border-radius:3px;
  padding:20px 24px 18px;
  margin:26px 0 30px;
}
.sonbds-mucluc-nhan{
  font-size:11.5px !important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb-gold) !important;font-weight:700;margin:0 0 10px !important;
}
.sonbds-mucluc ol{margin:0 0 0 18px;padding:0;}
.sonbds-mucluc li{margin-bottom:7px;font-size:15px;line-height:1.55;}
.sonbds-mucluc a{color:var(--sb-navy);text-decoration:none;border-bottom:1px solid transparent;}
.sonbds-mucluc a:hover{color:var(--sb-gold);border-bottom-color:var(--sb-gold);}

/* ---------- BẢNG ----------
   13/09/2026: đổi viền ngang mỗi dòng từ nét liền sang nét chấm — mượn cảm giác
   "bảng thông số nhẹ" của datnenhoalac.com. Giữ nguyên header navy và vệt zebra
   vì bảng của mình nhiều bảng rộng hơn 2 cột, bỏ hẳn viền/nền dễ rối hơn là gọn. */
.sonbds-bang-cuon{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:1.6em 0;border:1px solid var(--sb-vien);border-radius:3px;
}
.entry-content .sonbds-bang-cuon table{
  width:100%;min-width:520px;border-collapse:collapse;margin:0;
  font-size:15px;line-height:1.6;
}
.entry-content .sonbds-bang-cuon th{
  background:var(--sb-navy);color:#fff;font-weight:600;
  text-align:left;padding:12px 15px;
  font-size:13px;letter-spacing:.03em;
  border:none;
}
.entry-content .sonbds-bang-cuon td{
  padding:12px 15px;border:none;
  border-bottom:1px dotted var(--sb-vien);
  vertical-align:top;
}
.entry-content .sonbds-bang-cuon tbody tr:last-child td{border-bottom:none;}
.entry-content .sonbds-bang-cuon tbody tr:nth-child(even) td{background:#fbfaf7;}
.entry-content .sonbds-bang-cuon td ul{margin:0 0 0 16px;}
.entry-content .sonbds-bang-cuon small{color:var(--sb-mo);}

/* ---------- ẢNH + DÒNG GHI NGUỒN ----------
   CHÚ Ý: KHÔNG dùng `p > em:only-child` cho chú thích.
   Trong `<p>Chữ <em>trích</em>. Chữ nữa</p>` thì em VẪN là con duy nhất
   (chữ thường không tính là phần tử con) — luật đó sẽ ăn nhầm vào câu
   trích giữa đoạn văn, làm nó tụt xuống dòng và teo nhỏ. Đã dính lỗi này
   thật ngày 26/08/2026. Chỉ nhắm đoạn NGAY SAU ảnh và đoạn CUỐI bài. */
.entry-content img{
  border-radius:3px;
  margin:1.5em auto .5em;
  display:block;
}
.entry-content img + p{
  text-align:center;
  margin-top:0 !important;
  margin-bottom:2em !important;
}
.entry-content img + p em,
.entry-content > p:last-of-type > em{
  display:block;font-size:12.5px;color:var(--sb-mo);
  font-style:italic;line-height:1.5;
}

/* ---------- LIÊN KẾT TRONG BÀI ---------- */
.entry-content a{
  color:var(--sb-navy);
  text-decoration:underline;
  text-decoration-color:var(--sb-gold);
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.entry-content a:hover{color:var(--sb-gold);}

/* ---------- HỘP TÁC GIẢ (E-E-A-T) ----------
   Đây là chỗ giữ tên anh Sơn sau khi đã bỏ dòng tác giả ở khối navy — đừng ẩn nó. */
.postauthor{
  background:var(--sb-kem) !important;
  border:1px solid var(--sb-vien) !important;
  border-top:3px solid var(--sb-gold) !important;
  border-radius:3px;
  padding:26px 28px !important;
  margin:40px 0 0 !important;
  overflow:hidden;
}
.postauthor img.avatar{
  float:left;width:84px !important;height:84px !important;
  border-radius:50%;margin:0 22px 12px 0 !important;
  border:2px solid var(--sb-gold);
}
.postauthor h5.vcard{margin:0 0 4px !important;font-size:1.1rem !important;}
.postauthor h5.vcard a{color:var(--sb-navy) !important;text-decoration:none !important;}
.postauthor h5.vcard:after{
  content:"Người viết";
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb-gold);font-weight:700;margin-top:2px;
}
.postauthor p{
  font-size:14.5px !important;line-height:1.65 !important;
  color:var(--sb-mo) !important;margin:8px 0 0 !important;
}

/* ---------- CHÂN TRANG ---------- */
.site-footer{background-color:var(--sb-navy) !important;}
.site-footer .widget-title{
  color:#fff !important;
  font-size:1.05rem !important;
  letter-spacing:.01em;
  padding-bottom:10px;
  margin-bottom:16px !important;
  border-bottom:2px solid var(--sb-gold);
  display:inline-block;
}
.site-footer .textwidget,
.site-footer .textwidget p{
  color:#c3cdda !important;
  font-size:14.5px !important;
  line-height:1.75 !important;
}
.site-footer .textwidget a{
  color:#dbb463 !important;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.site-footer .textwidget a:hover{color:#fff !important;border-bottom-color:var(--sb-gold);}

/* Dòng bản quyền: theme tự in một dòng, anh Sơn điền thêm một dòng
   → thành hai dòng chồng nhau. Ẩn dòng của theme, giữ dòng của anh. */
.copyrights{
  background-color:#071528 !important;
  border-top:1px solid rgba(184,137,43,.28);
}
#copyright-note > span{display:none !important;}
#copyright-note .to-top{
  float:none !important;
  display:block !important;
  text-align:center !important;
  width:100% !important;
  color:#8c99ab !important;
  font-size:13px !important;
  letter-spacing:.02em;
}
#copyright-note .to-top a{color:#dbb463 !important;}

/* ---------- FORM BÌNH LUẬN ---------- */
#respond .sonbds-ghichu{font-size:14px;color:var(--sb-mo);margin:0 0 18px;}
#commentsAdd input[type="text"],
#commentsAdd input[type="email"],
#commentsAdd input[type="url"],
#commentsAdd textarea{
  border:1px solid var(--sb-vien) !important;
  border-radius:3px !important;
  background:#fbfaf7 !important;
}
#commentsAdd input[type="text"]:focus,
#commentsAdd input[type="email"]:focus,
#commentsAdd input[type="url"]:focus,
#commentsAdd textarea:focus{
  border-color:var(--sb-gold) !important;
  outline:none !important;
}
#commentsAdd input[type="submit"],
#commentsAdd .submit,
#commentsAdd button[type="submit"]{
  background:var(--sb-navy) !important;
  color:#fff !important;
  border:1px solid var(--sb-navy) !important;
  border-radius:3px !important;
  letter-spacing:.12em !important;
  transition:background .15s ease,border-color .15s ease;
}
#commentsAdd input[type="submit"]:hover,
#commentsAdd .submit:hover,
#commentsAdd button[type="submit"]:hover{
  background:var(--sb-gold) !important;
  border-color:var(--sb-gold) !important;
}

@media(max-width:600px){
  /* Ở khổ này thanh header chỉ còn nút ☰ nên cao 28px — khối navy 62px là đủ chỗ.
     Xem khối chú thích "THANH ĐẦU TRANG" phía trên trước khi đổi hai số này. */
  #pull.toggle-mobile-menu{top:16px !important;}
  .single-full-header{padding:62px 0 28px !important;}
  .entry-content{font-size:16.5px;}
  .entry-content h2::before{
    width:26px;height:26px;line-height:26px;flex-basis:26px;font-size:12.5px;
  }
  .sonbds-mucluc{padding:16px 18px;}
  .postauthor img.avatar{float:none;margin:0 0 14px !important;}
  /* Đường dẫn phải nằm gọn MỘT dòng trên điện thoại — dài quá thì cắt bằng dấu ba chấm
     chứ đừng xuống dòng, vì xuống dòng là đẩy nội dung xuống cả trăm pixel. */
  .sonbds-breadcrumb{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.7;
  }
}