/* Service landing pages (inc/service-page.php → patterns dich-vu-<slug>). Loaded on pages with a block of class
   "sv-lp". Styles hang on our own classes and plain elements (li, strong), never on core blocks' inner markup. */
.sv-lp{--sv-line:1px;--sv-fit-w:calc(var(--page) * .62);--sv-slip-w:calc(var(--page) * .5);--sv-tick:var(--s-5);padding:var(--gap-section) var(--s-4)} /* the same gap above and below as every section of the site: neighbours sit two gaps apart, and the drawn divider fits between */
.sv-lp__page{max-width:var(--page);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-head)}
.sv-lp__page > *,.sv-lp__page .sec-head > *{margin:0}
.sv-lp__lede{max-width:var(--measure);font-size:var(--t-l);color:var(--ink-2)}
.sv-lp__more{justify-content:flex-start}

/* 1 · hero: copy left, live demo right */
.sv-lp-hero{padding-top:var(--s-7)}
.sv-lp-hero .sv-lp__page{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gap-col);align-items:center}
.sv-lp-hero__copy{display:grid;gap:var(--s-5);align-content:start}
.sv-lp-hero__copy > *{margin:0}
.sv-lp-hero__title{font-size:clamp(32px, 4.2vw, 54px);line-height:1.06;text-wrap:balance} /* ds-ok: hero title scale of the landing pages */
.sv-lp-hero__title strong,.sv-lp h2 strong{font-weight:inherit;color:var(--accent)}
.sv-lp-hero__proof{font-size:var(--t-xs);color:var(--ink-2)}
.sv-lp-hero__proof strong{font:600 var(--t-s)/1 var(--font-mono);color:var(--ink)}

/* 2 · phù hợp khi: a checklist the visitor ticks (sv-lp.js); without the script it stays a plain list */
.sv-lp-fit .sv-lp__page{max-width:var(--sv-fit-w);justify-items:center;text-align:center;gap:var(--s-5)}
.sv-fit{display:grid;gap:var(--s-2);width:100%;margin:0;padding:0;list-style:none;text-align:left}
.sv-fit li{position:relative;display:flex;align-items:center;gap:var(--s-4);min-height:calc(var(--ctl) + var(--s-3));padding:var(--s-3) var(--s-5);border:var(--sv-line) solid var(--rule);border-radius:var(--r-board);background:var(--card);transition:border-color var(--dur),background-color var(--dur)}
.sv-fit li::before{content:"";flex:none;width:var(--sv-tick);height:var(--sv-tick);border:var(--sv-line) solid var(--ink-3);border-radius:var(--r);background:var(--card);transition:background-color var(--dur),border-color var(--dur)}
.sv-fit li::after{content:"";position:absolute;left:calc(var(--s-5) + var(--sv-tick) * .15);width:calc(var(--sv-tick) * .7);height:calc(var(--sv-tick) * .7);background:var(--on-accent);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;transform:scale(0);transition:transform var(--dur) var(--ease-out)}
.sv-fit li[aria-checked="true"]::after{transform:scale(1)}
.sv-fit.is-live li{cursor:pointer}
.sv-fit.is-live li:hover{border-color:var(--accent-fill)}
.sv-fit li[aria-checked="true"]{border-color:var(--accent-fill);background:var(--accent-tint)}
.sv-fit li[aria-checked="true"]::before{border-color:var(--accent-fill);background-color:var(--accent-fill)}
.sv-fit__res{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-3) var(--s-5);min-height:var(--ctl);margin:0}
.sv-fit__meter{display:flex;gap:var(--s-1)}
.sv-fit__meter i{width:var(--s-6);height:var(--s-1);border-radius:var(--r);background:var(--rule);transition:background-color var(--dur-m)}
.sv-fit__meter i.on{background:var(--accent-fill)}

/* 3 · website gồm những gì: a printed handover slip */
.sv-lp-slip{background:var(--paper-2)}
.sv-lp-slip .sv-lp__page{justify-items:center}
.sv-lp-slip .sec-head{flex-direction:column;align-items:center;text-align:center} /* .sec-head (base.css) is a flex row: stack it here */
.sv-lp-slip .sec-head h2{max-width:none}
.sv-lp-slip .sec-head p{max-width:var(--measure)}
.sv-slip{display:grid;gap:var(--s-4);width:min(100%, var(--sv-slip-w));padding:var(--s-6) var(--s-6) var(--s-7);border-inline:var(--sv-line) solid var(--rule);background:var(--card);box-shadow:0 30px 60px -40px var(--shadow);
  mask:radial-gradient(circle at 50% 100%, transparent var(--s-2), var(--ink) calc(var(--s-2) + .5px)) 50% 100% / var(--s-5) var(--s-5) repeat-x, linear-gradient(var(--ink), var(--ink)) top / 100% calc(100% - var(--s-2)) no-repeat}
.sv-slip > *{margin:0}
.sv-slip__head{padding-bottom:var(--s-3);border-bottom:var(--sv-line) dashed var(--rule)}
.sv-slip__title{font-size:var(--t-xl)}
.sv-slip__k{color:var(--accent)}
.sv-slip__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.sv-slip__chips li{padding:var(--s-1) var(--s-2);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--paper);font-size:var(--t-xs)}
.sv-slip__feats{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.sv-slip__feats li{display:grid;gap:var(--s-1);padding-left:var(--s-6);position:relative;font-size:var(--t-xs);color:var(--ink-2)}
.sv-slip__feats li::before{content:"";position:absolute;left:0;top:var(--s-1);width:var(--s-4);height:var(--s-4);background:var(--accent-fill);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}
.sv-slip__feats strong{font-size:var(--t-s);color:var(--ink)}

/* 4 · projects and templates reuse the site's own cards (pj, hm-templates) */
.sv-lp-proj .sec-head,.sv-lp-tpl .sec-head{margin:0}
@media (min-width: 768px) and (max-width: 1023px){
  .sv-lp-proj .pj-grid > li:last-child:nth-child(odd){display:none} /* two columns (pj.css): an odd last card would leave a hole */
}

/* 5 · hosting steps (the other services use the shared process section) */
.sv-lp-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-grid);margin:0;padding:0;list-style:none;counter-reset:sv-step}
.sv-lp-steps li{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-5);border:var(--sv-line) solid var(--rule);border-radius:var(--r-board);background:var(--card);font-size:var(--t-s);color:var(--ink-2);counter-increment:sv-step}
.sv-lp-steps li::before{content:counter(sv-step, decimal-leading-zero);font:600 var(--t-xs)/1 var(--font-mono);color:var(--accent)}
.sv-lp-steps strong{font:700 var(--t-l)/1.25 var(--font-display);color:var(--ink)}

/* 6 · chi phí */
.sv-cost{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:var(--sv-line) solid var(--rule);border-radius:var(--r-card);background:var(--card);overflow:hidden}
.sv-cost > *{margin:0}
.sv-cost__price{display:grid;gap:var(--s-4);align-content:start;padding:var(--gap-card);background:var(--accent-tint)}
.sv-cost__price > *{margin:0}
.sv-cost__price p{font-size:var(--t-s);color:var(--ink-2)}
.sv-cost__f,.sv-next{margin:0;padding:var(--gap-card);list-style:none;display:grid;gap:var(--s-5);counter-reset:sv-n}
.sv-cost__f li,.sv-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-4);font-size:var(--t-s);color:var(--ink-2);counter-increment:sv-n}
.sv-cost__f li::before,.sv-next li::before{content:counter(sv-n);grid-row:span 2;display:grid;place-items:center;width:var(--s-6);height:var(--s-6);border-radius:50%;background:var(--paper-2);font:600 var(--t-xs)/1 var(--font-mono);color:var(--accent)}
.sv-cost__f strong,.sv-next strong{font:700 var(--t-m)/1.3 var(--font-display);color:var(--ink)}
.sv-next{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}

/* 10 · further reading */
.sv-lp-reads .sv-lp__page{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gap-col);align-items:start}
.sv-reads__box,.sv-reads__side{display:grid;gap:var(--s-3);align-content:start}
.sv-reads__box > *,.sv-reads__side > *{margin:0}
.sv-reads__box{padding:var(--gap-card);border:var(--sv-line) solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.sv-reads__list,.sv-reads__rel{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.sv-reads__list a,.sv-reads__rel a{display:grid;gap:var(--s-1);padding:var(--s-4);border:var(--sv-line) solid var(--rule);border-radius:var(--r-board);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;transition:border-color var(--dur)}
.sv-reads__rel a{font-weight:400;font-size:var(--t-xs);color:var(--ink-2)}
.sv-reads__rel strong{font-size:var(--t-s);color:var(--ink)}
.sv-reads__list a:hover,.sv-reads__rel a:hover{border-color:var(--accent-fill)}
.sv-reads__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.sv-reads__chips a{display:inline-flex;align-items:center;min-height:var(--ctl);padding-inline:var(--s-4);border:var(--sv-line) solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);text-decoration:none;font-size:var(--t-s)}
.sv-reads__chips a:hover{border-color:var(--accent-fill);color:var(--accent)}

@media (max-width: 991px){
  .sv-lp{padding-block:var(--s-8)}
  .sv-lp-hero .sv-lp__page,.sv-cost,.sv-lp-reads .sv-lp__page,.sv-next{grid-template-columns:minmax(0,1fr)}
  .sv-lp-steps{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .sv-slip{padding-inline:var(--s-5)}
}