/* ============================================================
   Shieldix — bố cục thay thế (phương án B)
   Nạp SAU assets/site-v2.css, chỉ dùng cho các trang thử bố cục mới.
   Dùng lại toàn bộ token màu, font, nút của site-v2.css — chỉ đổi
   cách sắp xếp khối, không đổi nhận diện.
   ============================================================ */

/* ---------- Hero 2 cột: chữ trái, ảnh phải tràn ra mép ---------- */
.hero-split { overflow: hidden; }
.hero-split > .container {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 52px; align-items: center;
}
.hero-split .hero-copy .lead { color: #B6C6D6; }

/* Ảnh dashboard nền sáng trên nền tối rất dễ trôi lơ lửng. Quầng sáng cyan phía
   sau làm lớp trung gian, viền cyan mảnh nối ảnh với bảng màu thương hiệu. */
.hero-split .hero-shot { position: relative; }
.hero-split .hero-shot::before {
  content: ""; position: absolute; z-index: 0;
  left: -5%; right: -5%; top: 4%; bottom: -10%;
  background: radial-gradient(56% 62% at 50% 50%, rgba(0, 212, 255, .28), transparent 72%);
  filter: blur(56px); pointer-events: none;
}
.hero-split .hero-shot .shot-zoom,
.hero-split .hero-shot .shot { position: relative; z-index: 1; width: 100%; }
.hero-split .hero-shot .shot-img {
  border-radius: 14px;
  box-shadow: 0 26px 66px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 212, 255, .16);
}
.hero-split .hero-shot .shot {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 27, 42, .55);
  min-height: 340px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--muted); font-size: 14px;
}

@media (max-width: 980px) {
  /* Màn hẹp: xếp dọc, chữ trước ảnh sau */
  .hero-split > .container { grid-template-columns: 1fr; gap: 30px; }
  .hero-split .hero-shot::before { filter: blur(32px); }
  .hero-split .hero-shot .shot { min-height: 190px; }
}

.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(8, 18, 33, .55);
}
.stat-strip > div { padding: 28px 20px; text-align: center; position: relative; }
.stat-strip > div + div::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line);
}
.stat-strip b {
  display: block; font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-strip span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }

/* Hai biến thể gradient xen kẽ cho con số, lấy đúng .gradient-text và
   .gradient-text-green của trang chủ. Chỉ ghi đè background vì .stat-strip b
   ở trên đã có background-clip: text và color: transparent. */
.stat-strip b.so-tim { background: linear-gradient(135deg, #00D4FF 0%, #1A73E8 50%, #8B5CF6 100%); -webkit-background-clip: text; background-clip: text; }
.stat-strip b.so-luc { background: linear-gradient(135deg, #00FF88 0%, #00D4FF 100%); -webkit-background-clip: text; background-clip: text; }
/* Đang đếm thì chữ số nhảy liên tục; bề rộng chữ số cố định cho khỏi giật */
.stat-strip b[data-dem] { font-variant-numeric: tabular-nums; }

/* ---------- Hero có bảng số liệu: chữ trái, số xếp dọc bên phải ----------
   Trước đây dải 4 số nằm thành một băng riêng ngay dưới hero, đọc thành hai
   khối rời và để trống nửa phải màn hình. Gom vào hero cho cân, giống cách
   trang chủ đang làm. */
.hero-so-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
  gap: 46px; align-items: center;
}
.hero-so-grid .hero-copy .lead { max-width: none; }
.hero-so-grid .stat-strip { grid-template-columns: 1fr; background: rgba(8, 18, 33, .55); }
.hero-so-grid .stat-strip > div { padding: 13px 16px; }
/* vạch ngăn đổi từ dọc sang ngang cho cột một hàng */
.hero-so-grid .stat-strip > div + div::before { display: none; }
.hero-so-grid .stat-strip > div + div { border-top: 1px solid var(--line); }
.hero-so-grid .stat-strip b { font-size: clamp(22px, 1.9vw, 27px); }
.hero-so-grid .stat-strip span { font-size: 13px; }

@media (max-width: 980px) {
  /* Xếp dọc: chữ trước, bảng số quay lại 2x2 cho khỏi dài */
  .hero-so-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-so-grid .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-so-grid .stat-strip > div + div { border-top: 0; }
  .hero-so-grid .stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-so-grid .stat-strip > div:nth-child(even)::before { display: block; }
}

/* ---------- Danh sách rủi ro đánh số, thay cho 3 thẻ ---------- */
.risk-list { counter-reset: r; max-width: 860px; margin: 34px auto 0; }
.risk-list > li {
  counter-increment: r; list-style: none; position: relative;
  padding: 0 0 26px 66px; border-left: 2px solid var(--line); margin-left: 21px;
}
.risk-list > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.risk-list > li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: -22px; top: -4px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 2px solid var(--line-strong);
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 800; font-size: 14px; color: var(--cyan);
}
.risk-list h3 { margin-bottom: 6px; }
.risk-list p { font-size: 15.5px; }

/* ---------- Lưới tính năng 2x2, thay cho 4 mục 2 cột kèm ảnh ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.feature-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); opacity: 0; transition: opacity .2s;
}
.feature-card:hover { border-color: rgba(0, 212, 255, .35); box-shadow: var(--shadow-lg); }
.feature-card:hover::after { opacity: .85; }
.feature-card .icon {
  width: 46px; height: 46px; border-radius: 10px; background: rgba(0, 212, 255, .1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0;
}
.feature-card .icon svg { width: 24px; height: 24px; stroke: var(--cyan); }
.feature-card h3 { font-size: 19px; margin-bottom: 12px; }
.feature-card p { font-size: 14.5px; line-height: 1.7; }
.feature-card p + p { margin-top: 10px; }
/* Biểu tượng đứng cạnh tiêu đề chứ không nằm trên: thẻ 2 cột, ô biểu tượng và
   h3 chung hàng đầu, đoạn mô tả xuống dưới trải hết bề ngang. Nhờ vậy thẻ thấp
   hơn và mắt bắt được cặp biểu tượng - tiêu đề trong một nhịp. */
.feature-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  /* align-content: start là bắt buộc: các thẻ trong lưới cao bằng nhau, mặc định
     lưới con giãn các hàng ra cho đầy, nên thẻ nào chữ ngắn thì hàng biểu tượng
     bị đẩy xuống — đo được lệch tới 20px giữa các thẻ cùng hàng ở /compliance. */
  align-content: start;
}
/* Biểu tượng dính mép trên của hàng, tiêu đề mới canh giữa: tiêu đề 1 dòng và
   2 dòng cho hàng cao khác nhau, canh giữa cả hai sẽ lệch vài pixel. */
.feature-card .icon { align-self: start; }
.feature-card h3 { grid-column: 2; margin-bottom: 0; }
.feature-card p { grid-column: 1 / -1; margin-top: 14px; }
.feature-card p + p { margin-top: 10px; }


/* Thẻ tính năng dạng liên kết. <a> mặc định là inline nên nền, viền và padding
   của .feature-card sẽ vỡ nếu không đổi sang block. Chép cách xử lý của a.card. */
/* Thẻ dạng liên kết vẫn dùng chung bố cục lưới ở trên, chỉ cần thừa kế màu chữ.
   Trước đây đặt display:block ở đây (0,1,1) nên thắng .feature-card (0,1,0)
   và làm biểu tượng tụt xuống dòng riêng. */
a.feature-card { color: inherit; }
a.feature-card:hover { text-decoration: none; }
.feature-card .more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--cyan); }

/* Thẻ dịch vụ có thật nhưng chưa hiện trên cổng quản trị, phải liên hệ để được
   bật. Không trỏ về trang dịch vụ (chưa dựng) mà trỏ thẳng tới form đăng ký
   trong cùng trang, nên vẫn là thẻ bấm được bình thường. Chỉ khác ở huy hiệu và
   chữ gọi hành động, không làm mờ hay gạch đứt để tránh hiểu nhầm là dở dang. */
.card.card-yeu-cau .badge { background: rgba(95, 197, 197, .14); color: #7FD4D4; }

/* Nhấn từ khoá trong đoạn văn. Chữ đậm thôi thì chìm khi thân chữ đã sáng màu và
   cột lại hẹp; thêm nền mờ + gạch chân cùng tông cyan để mắt bắt được ngay.
   box-decoration-break: clone để cụm bị ngắt dòng vẫn có nền và bo góc ở cả hai
   đoạn, nếu không đoạn dưới sẽ mất padding trái. */
.nhan {
  color: #fff; font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .30);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Màu nhấn cho các khối của bố cục thay thế ----------
   feature-card, risk-list và timeline vốn khoá cứng màu cyan nên trang nào cũng
   một tông. Cho phép đặt --mau trên từng phần tử, giống .card-mau ở site-v2.css. */
.feature-card.card-mau .icon {
  background: rgba(255, 255, 255, .05);
  background: color-mix(in srgb, var(--mau) 13%, transparent);
  border: 1px solid rgba(255, 255, 255, .12);
  border-color: color-mix(in srgb, var(--mau) 30%, transparent);
}
.feature-card.card-mau .icon svg { stroke: var(--mau); }
.feature-card.card-mau::after { background: linear-gradient(90deg, var(--mau), transparent 88%); opacity: .9; }
.feature-card.card-mau:hover { border-color: color-mix(in srgb, var(--mau) 45%, transparent); }

.risk-list > li.card-mau::before { color: var(--mau); border-color: color-mix(in srgb, var(--mau) 55%, transparent); }
.timeline > div.card-mau .num { background: var(--mau); color: #03101C; }

/* Thẻ viền nhấn: đổi cả viền và huy hiệu theo màu, không chỉ riêng cyan */
.card.card-flag.card-mau {
  border-color: var(--mau);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mau) 8%, transparent), var(--surface));
}
.card.card-flag.card-mau .badge {
  background: color-mix(in srgb, var(--mau) 15%, transparent);
  color: var(--mau);
}

/* ---------- Dải cam kết SLA ---------- */
.pledge {
  text-align: center; padding: 8px 0;
}
.pledge .big {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(44px, 7vw, 76px);
  font-weight: 800; line-height: 1; letter-spacing: -2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pledge .big + p { max-width: 720px; margin: 18px auto 0; }
.pledge p + p { margin-top: 12px; }

/* ---------- Dòng thời gian các bước, nằm ngang ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; }
.timeline > div { position: relative; padding: 0 18px; text-align: center; }
.timeline > div::before {                       /* vạch nối giữa các bước */
  content: ""; position: absolute; top: 21px; left: 50%; right: -50%; height: 2px;
  background: var(--line);
}
.timeline > div:last-child::before { display: none; }
.timeline .num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #03101C;
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 800; font-size: 17px;
  box-shadow: 0 0 0 6px var(--bg);
}
.timeline p { font-size: 14.5px; line-height: 1.7; }

/* ---------- Ai nên dùng: danh sách 2 cột gọn ---------- */
.who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 34px; margin-top: 30px; }
.who-grid li {
  list-style: none; padding-left: 34px; position: relative;
  font-size: 15.5px; line-height: 1.65; color: var(--muted);
}
.who-grid li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 255, 136, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300FF88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.who-grid li strong { color: #fff; font-weight: 600; }

/* Biến thể bó trong container thay vì tràn hết bề ngang. Dùng cho trang có hero
   1 cột: dải tràn mép trông như một thanh phân cách của trình duyệt, còn khi bó
   lại nó đọc thành một khối nội dung cùng nhịp với các mục bên dưới.
   Viền trên/dưới của .stat-strip được thay bằng viền bao quanh + bo góc. */
.stat-strip-hop {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature-grid, .who-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div:nth-child(3)::before { display: none; }
  .stat-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .timeline { grid-template-columns: 1fr; gap: 26px; }
  .timeline > div { text-align: left; padding: 0 0 0 62px; }
  .timeline > div::before { top: 44px; bottom: -26px; left: 21px; right: auto; width: 2px; height: auto; }
  .timeline .num { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (max-width: 560px) {
  /* Trước đây xuống 1 cột: bốn ô xếp dọc, mỗi ô vẫn đệm 28px nên dải cao gần
     nửa màn hình mà chữ thưa thớt. Giữ 2 cột và bóp đệm lại cho đặc hơn. */
  .stat-strip > div { padding: 16px 10px; }
  .stat-strip b { font-size: 23px; }
  .stat-strip span { font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
  .risk-list > li { padding-left: 54px; }
}