/* ============================================================
   CDL24H — Nâng cấp trải nghiệm đọc cho trang Case Study
   (thanh tiến độ, mục lục dính, scrollspy, nút lên đầu trang)
   Chỉ nạp trên is_singular('case_study').
   ============================================================ */

/* ---- Thanh tiến độ đọc ---- */
#cs-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:99999;
  background:linear-gradient(90deg,#16264A,#3A5BC7);
}

/* ---- Mục lục dính (tự sinh bằng JS, chèn vào sidebar .col-lg-4) ---- */
.cs-toc{
  position:sticky; top:20px;
  background:#fff; border:1px solid #e6e9ef; border-radius:14px;
  padding:14px 18px; margin:0 0 20px;
  box-shadow:0 12px 28px -20px rgba(18,30,60,.4);
}
.cs-toc .cs-toc-h{
  font-weight:700; color:#16264A; font-size:13px; letter-spacing:.4px;
  text-transform:uppercase; margin-bottom:10px;
}
.cs-toc ol{ list-style:none; counter-reset:cs; margin:0; padding:0; }
.cs-toc li{ counter-increment:cs; margin:2px 0; }
.cs-toc a{
  display:flex; gap:9px; align-items:baseline;
  color:#55607a; text-decoration:none; font-size:14px; line-height:1.35;
  padding:6px 10px; border-radius:8px; border-left:2px solid transparent;
}
.cs-toc a::before{
  content:counter(cs,decimal-leading-zero);
  flex:0 0 auto; color:#8790a6; font-weight:700; font-size:12px;
}
.cs-toc a:hover{ background:#f3f4f6; color:#16264A; }
.cs-toc a.active{
  background:#eaedf4; color:#16264A; border-left-color:#16264A; font-weight:600;
}

/* ---- Tinh chỉnh vùng đọc ---- */
.single-case_study .content-section h2{ scroll-margin-top:24px; }

/* ---- Nút lên đầu trang ---- */
#cs-top{
  position:fixed; right:22px; bottom:230px; width:46px; height:46px; z-index:9998;
  display:none; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:50%;
  background:#16264A; color:#fff; font-size:22px; line-height:1;
  box-shadow:0 10px 24px -8px rgba(15,27,53,.6);
}
#cs-top.show{ display:flex; }

/* ---- Mobile: mục lục không dính, xếp trên nội dung ---- */
@media (max-width:991px){
  .cs-toc{ position:static; }
}

/* ============================================================
   FONT + TYPOGRAPHY — khớp mockup (Be Vietnam Pro + Noto Serif)
   ============================================================ */
.single-case_study,
.single-case_study .content-section,
.single-case_study .cs-toc{
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif !important;
}

/* Tiêu đề dùng serif cho chất editorial */
.single-case_study .case-title,
.single-case_study .content-section h2,
.single-case_study .content-section h3{
  font-family:"Noto Serif",Georgia,serif !important;
  letter-spacing:-.2px;
}

/* Tiêu đề bài */
.single-case_study .case-title{
  color:#16264A; line-height:1.25;
}

/* Vùng nội dung dễ đọc hơn */
.single-case_study .content-section{
  font-size:17.5px; line-height:1.82; color:#1f2838;
}
.single-case_study .content-section p{ margin:14px 0; }
.single-case_study .content-section h2{
  color:#16264A; font-size:26px; line-height:1.3; margin-top:34px;
}
.single-case_study .content-section h3{ color:#22376B; }

/* Chip số thứ tự tự động trên mỗi H2 (do JS thêm) */
.single-case_study .content-section h2 .cs-chip{
  display:inline-block; background:#e8ebf1; color:#16264A; border-radius:8px;
  padding:2px 9px; font-size:15px; font-weight:700; margin-right:8px;
  vertical-align:middle; font-family:"Be Vietnam Pro","Segoe UI",sans-serif;
  position:relative; top:-2px;
}

/* ============================================================
   HERO NAVY BAND — full width, dựng bằng JS (.cs-hero)
   ============================================================ */
.single-case_study .cs-hero{
  position:relative; overflow:hidden; color:#fff; margin-bottom:0;
  background:
    radial-gradient(900px 420px at 85% -30%, rgba(126,160,232,.33), transparent),
    linear-gradient(135deg, #0c1730, #16264a 60%, #22376b);
}
.single-case_study .cs-hero::after{
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.single-case_study .cs-hero-inner{
  position:relative; z-index:1; max-width:1140px; margin:0 auto;
  padding:30px 28px 70px;
}
.single-case_study .cs-hero-bc,
.single-case_study .cs-hero-bc *{
  color:#A7B4D6 !important; font-size:12.5px; text-decoration:none;
}
.single-case_study .cs-hero-bc{ margin-bottom:16px; }
.single-case_study .cs-hero-kicker{
  display:inline-block; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.26); color:#DCE4F5;
  font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:5px 14px; border-radius:30px; margin-bottom:16px;
}
.single-case_study .cs-hero .case-title{
  color:#fff !important; font-size:38px; line-height:1.22;
  margin:0 0 14px; max-width:22ch; letter-spacing:-.3px;
}
.single-case_study .cs-hero .meta-info,
.single-case_study .cs-hero .meta-info *{ color:#AAB6D4 !important; }

/* ---- Dải thẻ số liệu đè lên hero (floating) ---- */
.single-case_study .cs-stats-wrap{ position:relative; z-index:5; }
.single-case_study .cs-stats-wrap-inner{ max-width:1140px; margin:0 auto; padding:0 28px; }
.single-case_study .cs-stats-wrap-inner > div{ margin:-52px 0 26px !important; }

/* ---- 2 cột như mockup: Mục lục TRÁI · Nội dung PHẢI (rộng) ----
   Ẩn sidebar (Giải pháp + Cần Cứu Dữ Liệu Gấp) để bài gọn như bản mẫu. */
.single-case_study .cs-3col{ display:flex !important; flex-wrap:nowrap; gap:34px; align-items:flex-start; }
.single-case_study .cs-3col > .cs-toc{ flex:0 0 240px !important; max-width:240px !important; width:240px !important; margin:0 !important; }
.single-case_study .cs-3col > .content-section{ flex:1 1 0 !important; max-width:820px !important; width:auto !important; }
.single-case_study .cs-3col > [class*="col-lg-4"]{ display:none !important; }

/* ---- Chống TRÀN NGANG trên mobile ----
   Chuỗi dài không dấu cách (mã chip/serial như UDF255-2.0-SM3255-L-4L-2F,
   D27UBG8T2ATR, số ECC) làm cột nội dung không co được dưới min-content →
   cả trang rộng hơn màn, chữ bị cắt mép phải. Fix: cho chuỗi tự ngắt dòng,
   cho cột flex/grid co được (min-width:0), ảnh không vượt khung. */
.single-case_study .content-section{ overflow-wrap:anywhere; }
.single-case_study .cs-3col > *{ min-width:0 !important; }
.single-case_study .content-section img{ max-width:100% !important; height:auto; }
/* Khối mã/dump (ECC report, model...) tự ngắt thay vì đẩy rộng trang */
.single-case_study .content-section pre,
.single-case_study .content-section code{
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-width:100%;
}

@media (max-width:620px){
  .single-case_study .cs-hero-inner{ padding:22px 18px 26px; }
  .single-case_study .cs-hero .case-title{ font-size:28px; }
  .single-case_study .cs-stats-wrap-inner{ padding:0 16px; }
  /* Mobile: thẻ số xuống nhiều hàng -> BỎ đè âm để không che chữ hero,
     cho dải thẻ nằm gọn ngay dưới hero. */
  .single-case_study .cs-stats-wrap-inner > div{ margin:12px 0 20px !important; }
}
@media (max-width:991px){
  .single-case_study .cs-3col{ flex-wrap:wrap; }
  .single-case_study .cs-3col > *{ flex:1 1 100% !important; max-width:100% !important; }
  /* Ẩn mục lục trên mobile (xấu khi xếp dọc) */
  .single-case_study .cs-toc{ display:none !important; }
  /* Nút lên đầu hạ thấp hơn trên mobile cho vừa */
  #cs-top{ bottom:200px; right:16px; }
}