/* ==========================================================================
   SGCo 2026 — Trang dịch vụ chi tiết (page-dich-vu-chi-tiet.php)
   Nạp sau main.css + home.css + pages.css.
   ========================================================================== */

/* ---------- ①  HERO TỐI + FORM ---------- */
.svcd-hero{position:relative;overflow:hidden;background:#05131F}
.svcd-hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.02);
}
.svcd-hero__tint{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(3,14,26,.92) 0%,rgba(5,26,48,.78) 40%,
    rgba(6,40,70,.46) 70%,rgba(4,24,44,.4) 100%);
}
.svcd-hero__inner{
  position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:0 56px;
  align-items:start;padding-top:52px;padding-bottom:86px;
}
/* Breadcrumb chiếm trọn hàng đầu, phía trên cả tiêu đề lẫn form. */
.svcd-hero__inner > .hero-crumb{grid-column:1/-1;margin-bottom:30px}
/* Số liệu tự co theo số cột thực tế (3 hoặc 4 mục tuỳ trang). */
.svcd-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.svcd-badge{
  display:inline-flex;align-items:center;gap:9px;background:rgba(143,211,255,.18);
  border:1px solid rgba(143,211,255,.5);color:#A6DEFF;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:var(--radius-pill);
}
.svcd-hero__title{
  margin-top:20px;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.04;
  letter-spacing:-.032em;color:#fff;max-width:18ch;
  text-shadow:0 18px 44px rgba(0,0,0,.35);text-wrap:pretty;
}
.svcd-hero__lead{
  margin-top:20px;font-size:18.5px;line-height:1.75;color:#CFE5F5;
  max-width:52ch;text-wrap:pretty;
}
.svcd-points{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.svcd-point{
  display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;
  color:#EAF4FB;font-weight:500;background:rgba(4,20,36,.42);
  border:1px solid rgba(255,255,255,.18);border-radius:13px;padding:14px 16px;
}
.svcd-point svg{color:#8FD3FF;flex-shrink:0;margin-top:1px}
.svcd-hero__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.svcd-hero__actions .btn{font-size:16.5px;padding:18px 30px}
.svcd-btn-ghost{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-weight:600;
}
.svcd-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.svcd-stats{
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.svcd-stat{padding-left:16px;border-left:2px solid rgba(143,211,255,.45)}
.svcd-stat b{
  display:block;font-size:clamp(24px,2.6vw,34px);font-weight:800;
  color:#fff;letter-spacing:-.025em;
}
.svcd-stat span{margin-top:5px;display:block;font-size:13.5px;line-height:1.5;color:#9FBACD;font-weight:500}

/* Form báo giá trong hero */
.svcd-quote{position:relative}
.quoteform{
  background:var(--surface);border-radius:22px;padding:30px;
  box-shadow:0 46px 92px -30px rgba(3,16,32,.72);
}
.quoteform__head b{font-size:20px;font-weight:800;color:var(--ink-900);letter-spacing:-.01em}
.quoteform__head p{margin-top:7px;margin-bottom:18px;font-size:14px;line-height:1.65;color:#7C8FA0}
.quoteform__note{margin-top:12px;font-size:12.5px;line-height:1.6;color:#93A6B5;text-align:center}

/* ---------- ②  THANH TIN CẬY ---------- */
.svcd-trust{background:var(--surface);border-bottom:1px solid var(--border)}
.svcd-trust__inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding-top:26px;padding-bottom:26px;
}
.svcd-trust__item{display:flex;gap:13px;align-items:center}
.svcd-trust__icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.svcd-trust__item b{display:block;font-size:16px;font-weight:800;color:var(--ink-900);line-height:1.4}
.svcd-trust__item span span{font-size:13px;color:#7C8FA0;font-weight:600}

/* ---------- ③  RỦI RO ---------- */
.svcd-risks{padding:84px 0}
.svcd-risks__head{max-width:58ch}
.svcd-risks__list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.svcd-risk{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid #E9EFF5}
.svcd-risk__icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;background:#FFF4F2;
  display:flex;align-items:center;justify-content:center;color:#E0654A;
}
.svcd-risk b{font-size:16.5px;font-weight:700;color:var(--ink-900)}
.svcd-risk p{margin-top:6px;font-size:15px;line-height:1.75;color:#5A6E7C}

/* ---------- ④⑤⑧  LƯỚI THẺ (hạng mục / lợi ích / cam kết) ---------- */
.svcd-items,.svcd-reasons{
  background:linear-gradient(172deg,#FFFFFF 0%,#EAF6FF 46%,#F8FCFF 100%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:84px 0;
}
.svcd-benefits{padding:84px 0}
.svcd-items__head{max-width:58ch}
.svcd-items__grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svcd-item{
  background:var(--surface);border:1px solid #E2EDF5;border-radius:var(--radius-lg);
  padding:30px;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur);
}
.svcd-item:hover{
  transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(10,30,44,.22);
  border-color:var(--border-strong);
}
.svcd-item__icon{
  width:48px;height:48px;border-radius:14px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.svcd-item h3{margin-top:18px;font-size:19px;font-weight:700;color:var(--ink-900);line-height:1.34}
.svcd-item p{margin-top:10px;font-size:15px;line-height:1.75;color:#5A6E7C;flex:1}
.svcd-item__tags{
  margin-top:18px;padding-top:18px;border-top:1px solid #EDF3F8;
  display:flex;flex-wrap:wrap;gap:8px;
}
.svcd-item__tags span{
  background:#F2F8FD;border:1px solid #DDEBF6;color:#3E5568;
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;
}

/* ---------- ⑥  QUY TRÌNH ---------- */
.svcd-steps{padding:84px 0}
.svcd-steps__grid{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.svcd-step{
  background:var(--surface);border:1px solid #E2EDF5;border-radius:16px;padding:26px;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur);
}
.svcd-step:hover{
  transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(10,30,44,.22);
  border-color:var(--border-strong);
}
.svcd-step__n{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--radius-pill);background:#EAF6FD;color:var(--blue-600);
  font-size:14px;font-weight:800;
}
.svcd-step b{display:block;margin-top:16px;font-size:16.5px;font-weight:700;color:var(--ink-900)}
.svcd-step p{margin-top:9px;font-size:14.5px;line-height:1.7;color:#5A6E7C}

/* ---------- ⑦  KHÁCH HÀNG CHUẨN BỊ (nền tối) ---------- */
.svcd-needed{background:#0A2540;color:#fff;padding:76px 0}
.svcd-needed__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.svcd-needed__eyebrow{color:#8FD3FF}
.svcd-needed__title{
  margin-top:12px;font-size:clamp(24px,2.9vw,36px);font-weight:800;line-height:1.22;
  color:#fff;letter-spacing:-.02em;text-wrap:pretty;
}
.svcd-needed__list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svcd-needed__item{
  display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:16px 18px;
  font-size:15px;line-height:1.55;color:#EAF4FB;font-weight:500;
}
.svcd-needed__item svg{color:#8FD3FF;flex-shrink:0;margin-top:1px}

/* ---------- HÌNH ẢNH THỰC TẾ ---------- */
.svcd-shots{padding:84px 0;background:var(--surface);border-top:1px solid var(--border)}
.svcd-shots__inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.svcd-shots__desc{
  margin-top:16px;margin-bottom:22px;font-size:16px;line-height:1.85;
  color:var(--ink-500);max-width:44ch;
}
.svcd-shots__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svcd-shot{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#DCE9F3}
.svcd-shot img{
  width:100%;height:340px;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out);
}
.svcd-shot:hover img{transform:scale(1.05)}
.svcd-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;
  font-size:13px;line-height:1.5;color:#fff;font-weight:500;
  background:linear-gradient(to top,rgba(6,22,40,.88),transparent);
}

/* ---------- KHỐI RIÊNG CỦA TRANG TỔNG QUAN NHÓM ---------- */

/* Danh sách gạch đầu dòng trong thẻ "Loại hồ sơ" */
.svcd-item__points{
  margin-top:14px;padding-top:14px;border-top:1px solid #EDF3F8;
  list-style:none;display:flex;flex-direction:column;gap:8px;
}
.svcd-item__points li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.6;color:#5A6E7C}
.svcd-item__points svg{color:var(--blue-600);flex-shrink:0;margin-top:3px}

/* Thông số quan trắc */
.svcd-params{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svcd-param{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid #E2EDF5;border-radius:16px;padding:24px 26px;
}
.svcd-param__icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.svcd-param b{display:block;font-size:16.5px;font-weight:700;color:var(--ink-900)}
.svcd-param p{margin-top:7px;font-size:14.5px;line-height:1.7;color:#5A6E7C}

/* Đối tượng áp dụng */
.svcd-targets{padding:84px 0}
.svcd-targets__grid{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px}
.svcd-target{
  display:flex;gap:13px;align-items:center;background:var(--surface);
  border:1px solid #E2EDF5;border-radius:14px;padding:16px 20px;
  font-size:15.5px;line-height:1.5;color:var(--ink-800);font-weight:500;
}
.svcd-target__icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}

/* Khách hàng tiêu biểu */
.svcd-clients{padding:70px 0;background:var(--surface);border-top:1px solid var(--border)}
.svcd-clients__list{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.svcd-client{
  display:inline-flex;align-items:center;gap:9px;background:var(--blue-50);
  border:1px solid #DDEBF6;border-radius:var(--radius-pill);padding:11px 18px;
  font-size:14.5px;font-weight:600;color:var(--ink-800);
}
.svcd-client svg{color:var(--blue-600);flex-shrink:0}

/* ---------- ⑨  FAQ ---------- */
.svcd-faq{padding:84px 0}
.svcd-faq__list{margin-top:32px;max-width:900px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1150px){
  .svcd-hero__inner{grid-template-columns:1fr;gap:38px;padding-top:40px;padding-bottom:56px}
  .svcd-hero__title{max-width:22ch}
  .svcd-trust__inner{grid-template-columns:repeat(2,1fr)}
  .svcd-risks__list{grid-template-columns:1fr;gap:0}
  .svcd-items__grid{grid-template-columns:repeat(2,1fr)}
  .svcd-steps__grid{grid-template-columns:repeat(2,1fr)}
  .svcd-needed__inner{grid-template-columns:1fr;gap:32px}
  .svcd-risks,.svcd-items,.svcd-reasons,.svcd-benefits,.svcd-steps,.svcd-faq{padding:56px 0}
  .svcd-needed,.svcd-targets{padding:56px 0}
  .svcd-clients{padding:48px 0}
  .svcd-params,.svcd-targets__grid{grid-template-columns:1fr}
  .svcd-shots{padding:56px 0}
  .svcd-shots__inner{grid-template-columns:1fr;gap:32px}
  .svcd-shot img{height:280px}
}
@media (max-width:768px){
  .svcd-points{grid-template-columns:1fr}
  .svcd-stats{grid-template-columns:1fr;gap:16px}
  .svcd-needed__list{grid-template-columns:1fr}
  .quoteform{padding:24px}
  .svcd-hero__actions .btn{flex:1 1 100%;font-size:16px;padding:16px 24px}
}
@media (max-width:640px){
  .svcd-items__grid,.svcd-steps__grid{grid-template-columns:1fr}
  .svcd-trust__inner{grid-template-columns:1fr}
  .svcd-shots__grid{grid-template-columns:1fr}
}