/* =========================================================
   SUSI HAIR STUDIO — STYLE RIÊNG CHO TRANG DỊCH VỤ
   Dùng chung với ../bai-viet/blog-style.css (biến màu, header,
   footer, nút, modal đã định nghĩa ở đó — file này chỉ thêm
   phần riêng cho landing page dịch vụ).
   ========================================================= */

/* ---------- HERO DỊCH VỤ (ảnh lớn + tiêu đề đè lên) ---------- */
.svc-hero{position:relative;max-width:1000px;margin:0 auto 40px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.svc-hero img{width:100%;height:380px;object-fit:cover;object-position:center 18%;display:block}
.svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,48,31,.72) 0%,rgba(38,48,31,.15) 65%,transparent 100%)}
.svc-hero-text{position:absolute;left:0;right:0;bottom:0;padding:30px 34px;z-index:2}
.svc-hero-text .eyebrow{color:var(--rose);margin-bottom:10px}
.svc-hero-text .eyebrow::before{background:var(--rose)}
.svc-hero-text h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.35rem);max-width:640px}
.svc-hero-text p{color:#e7ece0;margin-top:10px;max-width:520px;font-size:.96rem}

/* ---------- LƯỚI LỢI ÍCH ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0}
.benefit-card{background:var(--white);border-radius:16px;padding:24px 22px;box-shadow:var(--shadow)}
.benefit-card .b-num{width:34px;height:34px;border-radius:10px;background:var(--gold-light);color:var(--rose-dark);font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:.9rem}
.benefit-card h4{font-size:1rem;color:var(--ink);margin-bottom:8px}
.benefit-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.55}

/* ---------- QUY TRÌNH (STEPS) ---------- */
.steps-list{margin:34px 0;display:flex;flex-direction:column;gap:0}
.steps-list .step{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--cream-dark)}
.steps-list .step:last-child{border-bottom:none}
.steps-list .step .num{
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:.92rem;
}
.steps-list .step .txt strong{display:block;font-size:.98rem;color:var(--ink);margin-bottom:4px}
.steps-list .step .txt span{font-size:.88rem;color:var(--ink-soft)}

/* ---------- BẢNG GIÁ RÚT GỌN TRONG TRANG DỊCH VỤ ---------- */
.mini-price{margin:34px 0;background:var(--white);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.mini-price .mp-head{padding:16px 22px;background:var(--cream-dark);font-weight:700;font-size:.9rem;color:var(--ink)}
.mini-price .mp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 22px;border-bottom:1px solid var(--cream-dark)}
.mini-price .mp-row:last-child{border-bottom:none}
.mini-price .mp-row .name{font-size:.92rem;color:var(--ink)}
.mini-price .mp-row .amount{font-weight:700;color:var(--rose-dark);font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-price-foot{padding:16px 22px;text-align:center}
.mini-price-foot a{font-size:.85rem;font-weight:700;color:var(--rose-dark)}

/* ---------- FAQ NHỎ (dùng lại kiểu details/summary) ---------- */
.mini-faq{max-width:720px;margin:34px 0}
.mini-faq details{border-bottom:1px solid var(--cream-dark)}
.mini-faq summary{list-style:none;cursor:pointer;padding:18px 4px;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:.96rem}
.mini-faq summary::-webkit-details-marker{display:none}
.mini-faq summary::after{content:"+";color:var(--rose-dark);font-weight:700;flex-shrink:0}
.mini-faq details[open] summary::after{content:"–"}
.mini-faq p{padding:0 4px 18px;color:var(--ink-soft);font-size:.92rem}

/* ---------- LIÊN KẾT SANG DỊCH VỤ KHÁC ---------- */
.svc-cross-links{max-width:720px;margin:40px auto 0;display:flex;gap:12px;flex-wrap:wrap}
.svc-cross-links a{
  padding:10px 18px;border-radius:100px;background:var(--gold-light);color:var(--rose-dark);
  font-size:.85rem;font-weight:700;
}
.svc-cross-links a:hover{background:var(--gold);color:#fff}

@media(max-width:980px){
  .benefit-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .svc-hero img{height:280px}
  .svc-hero-text{padding:20px 20px}
  .benefit-grid{grid-template-columns:1fr}
}