/* ============================================================================
   CHỮ NỘI DUNG — lượt làm lại 6/10/2026 (about.html + 3 trang service)
   Chủ site: chữ đoạn văn "quá chìm, khó đọc, nhìn quê, không sang" + tiêu đề 2 vế thì mỗi vế phải 1 dòng.
   File này nạp SAU CÙNG trong <head> nên đè lên service-content.css và <style> inline của từng trang;
   không sửa các file kia. Chuyển động (chữ sáng dần theo cuộn): assets/content-type.js.
     1. Chữ đoạn văn: Manrope, sáng hơn (≈.86–.9 thay vì .62–.74), giãn dòng rộng hơn.
     2. Đoạn mở đầu (.sc-lead): câu dẫn serif Cormorant cỡ lớn + cụm chữ đầu in hoa vàng; đoạn 2 sans,
        ngăn bằng vạch chỉ vàng; vạch dọc bên trái tự "vẽ" xuống khi cuộn tới.
     3. Tiêu đề 2 vế (.ct-2l): mỗi vế trọn MỘT dòng trên desktop.
   ========================================================================== */
.sc{
  --ct-body:'Manrope','Archivo',Arial,sans-serif;
  --ct-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --ct-ink:rgba(245,241,232,.9);
  --ct-ink-2:rgba(245,241,232,.84);
}

/* ---------- 1. chữ đoạn văn ---------- */
.sc p{ font-family:var(--ct-body); color:var(--ct-ink); letter-spacing:.004em; }
.sc .sc-grid p,.sc .sc-steps p,.sc .sc-tags p{ font-size:.98rem; line-height:1.76; color:var(--ct-ink-2); }
.sc .sc-two p{ font-size:1.03rem; line-height:1.82; color:var(--ct-ink-2); }
.sc .sc-faq-list .ans p{ font-size:1.04rem; line-height:1.82; color:var(--ct-ink); }
.sc .sc-work .tag{ color:#D9B373; }
/* chữ phụ dạng <span> ở các khối số liệu / chú thích (không phải <p>) */
.sc .sub,.sc .ab-stats .lbl{ font-family:var(--ct-body); color:var(--ct-ink-2); }
.sc .ab-stats .lbl{ font-size:.95rem; line-height:1.6; }
/* câu dưới tiêu đề CTA: serif nghiêng, sáng */
.sc .sc-cta p{ font-family:var(--ct-serif); font-style:italic; font-weight:500; letter-spacing:.005em;
  font-size:clamp(1.28rem,1.85vw,1.6rem); line-height:1.5; color:rgba(245,241,232,.94); max-width:44ch; }

/* ---------- 2. đoạn mở đầu ---------- */
/* câu dẫn */
.sc .sc-lead .sc-wrap > div:nth-child(2) > p:first-of-type{
  font-family:var(--ct-serif); font-weight:500; letter-spacing:0;
  font-size:clamp(1.45rem,2.05vw,1.92rem); line-height:1.4; color:#F7F2E7;
  text-wrap:pretty;
}
/* cụm chữ đầu: in hoa nhỏ, giãn chữ, màu vàng — kiểu câu dẫn tạp chí */
.sc .sc-lead .ct-lead-in,
.sc .sc-lead .sc-wrap > div:nth-child(2) > p:first-of-type .co-name{
  font-family:'Archivo',Arial,sans-serif; font-weight:600; font-size:.5em; letter-spacing:.2em; text-transform:uppercase;
  color:#E8C284; white-space:nowrap; vertical-align:.2em; margin-right:.2em;
}
/* đoạn 2: sans, ngăn với câu dẫn bằng một vạch chỉ vàng ngắn */
.sc .sc-lead .sc-wrap > div:nth-child(2) > p + p{
  position:relative; margin-top:clamp(1.5rem,2.6vw,2.1rem); padding-top:clamp(1.3rem,2.2vw,1.8rem);
  font-size:1.06rem; line-height:1.86; color:var(--ct-ink); max-width:54ch;
}
.sc .sc-lead .sc-wrap > div:nth-child(2) > p + p::before{
  content:''; position:absolute; left:0; top:0; width:46px; height:1px;
  background:linear-gradient(90deg,#E8C284,rgba(232,194,132,.2));
}
/* vạch dọc bên trái khối chữ: thay viền tĩnh bằng một nét vàng tự vẽ xuống khi khối hiện ra */
.sc .sc-lead .sc-wrap > div:nth-child(2){ position:relative; border-left-color:transparent; }
.sc .sc-lead .sc-wrap > div:nth-child(2)::before{
  content:''; position:absolute; left:-1px; top:0; bottom:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg,#F5D9A8 0%,#E8C284 30%,rgba(180,136,77,.18) 100%);
  transform:scaleY(0); transform-origin:50% 0; transition:transform 1.5s cubic-bezier(.2,.75,.2,1) .3s;
}
.sc .sc-lead .sc-wrap > div:nth-child(2).is-in::before,
.sc.no-js .sc-lead .sc-wrap > div:nth-child(2)::before{ transform:none; }

/* từng chữ của câu dẫn sáng dần theo cuộn (content-type.js bọc chữ + đặt --ct-p 0→1).
   Mặc định --ct-p:1 → không có JS thì chữ sáng đủ ngay. Cửa sổ chuyển tiếp rộng 6 chữ. */
.ct-words .ct-w{
  opacity:clamp(.26, calc((var(--ct-p,1) * (var(--ct-n,0) + 6) - var(--i,0)) / 6), 1);
  transition:opacity .28s linear;
}

/* câu CTA nhiều vế (.ct-lines): mỗi vế một dòng, ngắt bằng <br> trong HTML. Trên desktop bỏ giới hạn bề rộng 44ch và cấm tự
   xuống dòng để vế dài vẫn trọn một dòng; màn hẹp thì cho chữ tự gãy lại, không tràn ngang. */
@media(min-width:900px){ .sc .sc-cta p.ct-lines{ max-width:none; white-space:nowrap; } }

/* ---------- 3. tiêu đề 2 vế: mỗi vế một dòng ---------- */
@media(min-width:1000px){
  /* tiêu đề một vế: nới bề rộng tối đa (19ch → 26ch) để câu ngắn nằm trọn một dòng, câu dài vẫn tự chia cân 2 dòng */
  .sc h2{ max-width:26ch; }
  .sc h2.ct-2l{ max-width:none; white-space:nowrap; }   /* KHÔNG kèm text-wrap: nó là một nửa của white-space, đặt lại sẽ huỷ nowrap */
  /* tiêu đề 2 vế nằm trong cột trái hẹp của khối mở đầu: thu cỡ chữ vừa đủ để mỗi vế vẫn trọn một dòng */
  .sc .sc-lead h2.ct-2l{ font-size:clamp(1.9rem,3.45vw,3rem); }
}

@media(prefers-reduced-motion:reduce){
  .ct-words .ct-w{ opacity:1; transition:none; }
  .sc .sc-lead .sc-wrap > div:nth-child(2)::before{ transform:none; transition:none; }
}