/* Bói Cá — lớp hoàn thiện dùng chung cho 8 trang (gộp các đợt sửa 2026-10-17) */

/* ---------- Nút & form ---------- */
button{font-family:inherit}
/* Nút cam: var(--ember) với chữ màu mực (4.9:1). Chữ trắng trên màu này chỉ đạt 2.8:1. */
.btn-primary,.plan.feat .btn-primary,.nav-cta,.f-call,.feat-tag,.mobile-bar .btn-primary{background:var(--ember);color:var(--ink)}
.btn-primary:hover,.plan.feat .btn-primary:hover,.nav-cta:hover{background:var(--ember-hover);color:var(--ink)}
.f-call svg{color:var(--ink)}
.hero-ctas .btn{border-radius:var(--r)}
.f-back{min-height:44px;display:inline-flex;align-items:center;padding:0 8px;margin-left:-8px}

/* ---------- Màu chữ ---------- */
.svc .ix,.reason .ix,.post .tag,.nav-links .ix,.faq summary .q,.case .tag{color:var(--river-deep)}
.band-dark .eyebrow,.book .eyebrow,.book-side .eyebrow{color:var(--river-light)}
.marquee,.cf-chart-labels span{color:var(--muted)}
.demo-flag{color:var(--ember-text)}
.stat-box.accent b,.case .metric,.hero h1 .dot-accent,.cf .dot-accent,.proc .n,.cf-stat b{color:var(--ember-strong)}

/* ---------- Font phụ (mono) cho nhãn ---------- */
.eyebrow,.ph-stat .lbl,.stat-box .lbl,.cf-stat .lbl,.nav-links .ix,.faq summary .q,.post .tag,.inc .tag,.case .tag,.feat-tag,.step-ind,.form-step-label,.cf-tag,.cf-col .n{font-family:var(--font-mono)}
.eyebrow{letter-spacing:.06em}

/* ---------- Cỡ chữ ---------- */
.stat-box .lbl,.post .tag,.case .tag,.inc .tag,.feat-tag,.demo-flag,.cf-stat .lbl,.cf-chart-labels span{font-size:12px}
.mobile-bar .mb-ico{font-size:12px}
@media (max-width:600px){.included{grid-template-columns:1fr}}
@media (max-width:600px){
  .inc p,.reason p,.svc p{font-size:15px}
  .f-step label,.f-row label,.row2 label,.cfrm label{font-size:15px}
  .form-note{font-size:13.5px}
  .updated{font-size:15px}
  .rd,.cf-back{font-size:15px}
}
@media (min-width:601px){
  .eyebrow,.cf-tag,.pill,.capacity{font-size:13.5px}
  .stat-box .lbl,.cf-stat .lbl,.post .tag,.case .tag,.inc .tag,.feat-tag,.demo-flag,.cf-chart-labels span,.step-ind,.form-step-label,.foot h4{font-size:13.5px}
  .marquee,.foot-bottom,.cf-col .n,.testi-who span,.reason .ix,.svc .ix,.faq summary .q{font-size:13.5px}
  .reason p,.svc p,.inc p,.case p,.proc p,.principle p,.plan-list li,.plan-note,.cfrm .thanks p{font-size:15px}
  .plan-tiers div{font-size:15px}
  .f-step label,.f-row label,.row2 label,.cfrm label,.f-back{font-size:15px}
  .form-note,.cfrm .form-note,.build-note,.cfrm .err{font-size:13.5px}
  .rd,.case .rd,.post .rd,.cf-back,.updated,.foot p,.foot ul{font-size:15px}
}

/* ---------- Đường kẻ nằm trong cột nội dung ---------- */
.foot-bottom{border-top:none;position:relative}
.foot-bottom::before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:1px solid rgba(255,255,255,.14)}
.cf-grid{border-bottom:none}
.cf-chart{border-top:none}

/* ---------- Hệ chữ ---------- */
.wrap h2,h2.t{line-height:1.2}
.wrap h3{line-height:1.35}
.hero h1,.cf h2.cf-title,.cta-band h2.t{line-height:1.2}
@media (min-width:601px){.wrap h3{font-size:17px}}
@media (max-width:600px){.wrap h3{font-size:17px}}
.wrap h3.r-title{font-size:17px;line-height:1.35}
.wrap .plan h3{font-size:15px}
[style*="text-align:center"] p,.qual p,.inner p,.cta p{margin-left:auto;margin-right:auto}
@media (min-width:601px){.post p,.plan p,.callout p,.faq p,details p,.principle p{font-size:15px}}
@media (max-width:600px){.principle p,.proc p,.plan-note,.plan-list li,.post p,.cf-chart .dek{font-size:15px}.cfrm .form-note{font-size:13.5px}}
h2.t + .dek,h1.t + .dek{margin-top:20px}
.cta-band h2.t + .dek{margin-top:22px}

/* ---------- Khung & bố cục ---------- */
.callout{border-radius:0;border-color:var(--line)}
@media (max-width:600px){.callout{padding:22px 20px}}
.wrap > p:not([class]),.wrap > ul > li{max-width:42em}
.cf-col p,.cf-lede,.inc p,.proc p,.reason p,.svc p,.principle p,.post p,.how p{max-width:none}
h1,h2,h3,.cf-title,.r-title{text-wrap:balance}
p,li,blockquote,summary{text-wrap:pretty}
.lbl,.eyebrow,.tag,.cf-tag,.k-lbl,.r-lbl{text-wrap:balance}
.book-grid,.build-note,.callout,.cfrm,.form-card,.founder,.founder .photo,.founder .photo img,.plan,.plan-tiers,.principle{border-radius:0}
main section > .wrap > a,main section > .wrap > .btn,main section > .wrap > .capacity,main section > .wrap > .pill{justify-self:start}
@media (min-width:601px) and (max-width:1024px){
  .principles,.how{grid-template-columns:repeat(3,1fr)}
  .cf-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
  .cf-right{border-top:none;border-left:1px solid var(--line);flex-direction:column}
  .cf-right .cf-stat,.cf-right.four .cf-stat{flex:none;border-right:none;border-bottom:1px solid var(--line)}
  .cf-right .cf-stat:last-child,.cf-right.four .cf-stat:last-child{border-bottom:none}
  .cf-breakdown{grid-template-columns:repeat(3,1fr)}
  .cf-col{padding:26px 22px}
}
@media (min-width:601px){
  .direct-list{flex-direction:row}
  .direct-list li{flex:1 1 0}
}
.cf-left{padding-top:32px}
@media (min-width:601px) and (max-width:1024px){.blog,.services,.reasons,.included{grid-template-columns:repeat(2,1fr)}}
.cf-right .cf-stat:first-child{padding-top:20px}
@media (min-width:601px){.cf-right .cf-stat:first-child{padding-top:32px}}
@media (min-width:1025px){.included:has(> :nth-child(6):last-child),.blog:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}}
@media (min-width:601px) and (max-width:1024px){.ph-stat .lbl,.stat-box .lbl{min-height:2.7em}}
@media (max-width:600px){.hero-ctas .btn{flex:1 1 100%;justify-content:center;margin-left:0}}

/* ---------- Sửa theo báo cáo audit 2026-10-17 ---------- */
/* T5 */ @media (min-width:601px) and (max-width:1024px){.process{grid-template-columns:repeat(2,1fr)}}
/* T5 */ .book-side p{max-width:34em}
/* A1: ô nhập có vòng focus rõ ràng, không chỉ đổi màu viền */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(30,156,199,.35)}
/* A2: vùng chạm tối thiểu 44px */
.nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (min-width:1025px){.nav-toggle{display:none}}
.btn{min-height:44px}
.foot-bottom a,.cf-back{display:inline-flex;align-items:center;min-height:44px}
.faq summary{min-height:44px;align-items:center}
/* chấm nhấn cuối tiêu đề lớn dùng cam đậm (đủ tương phản trên nền kem) */
main .cf .cf-title .dot-accent,main .cf h1 .dot-accent{color:var(--ember-strong)}
/* hai cột trong khối case bắt đầu chữ cùng độ cao */
@media (min-width:601px){.cf-grid .cf-right .cf-stat:first-child{padding-top:37px}}

/* 2026-10-17: tiêu đề + mô tả chạy hết chiều ngang khối nội dung (tablet + desktop) — bỏ giới hạn rộng và ngắt dòng "balance" */
@media (min-width:601px){
  main h1,main h2,main h3,main .cf-title,main .r-title{text-wrap:wrap!important}
  main h1.t,main h2.t,main .cf-title,main .dek,main .lede,main .cf-lede{max-width:none!important;text-wrap:wrap!important}
}
/* chữ trên biểu đồ không nhỏ hơn 12px trên điện thoại */
@media (max-width:600px){
  main .wk-chart em,main .wk-labels span,main .wk-chart.many em,main .wk-labels.many span{font-size:12px}
  main .wk-chart.many i.est em{display:none}
  main .wk-labels.many span:nth-child(even){visibility:hidden}
}
/* 2026-10-17: khung lưu ý (.callout) 1 cột — tiêu đề trên, nội dung dưới, chữ chạy hết khung */
.callout p{max-width:none!important}
/* 2026-10-17: tiêu đề trang chủ chạy hết dòng rồi mới xuống dòng ở mọi thiết bị */
.hero h1{text-wrap:wrap!important;max-width:none!important}
/* 2026-10-17: tiêu đề trang chủ — điện thoại & máy tính: 2 dòng "TĂNG TRƯỞNG KINH DOANH / BẰNG GOOGLE ADS.", cỡ chữ co theo khung; tablet giữ nguyên */
@media (max-width:600px),(min-width:1025px){.hero h1 .h1a,.hero h1 .h1b{display:block;white-space:nowrap}}
@media (max-width:600px){.hero h1{font-size:calc((100vw - 48px) / 15.2)!important}}
@media (min-width:1025px){.hero h1{font-size:min(43px,calc((62vw - 70px) / 15.2))!important}}