/* page-solutions — Giới thiệu dịch vụ, dựng lại client_solutions của ceoacc.
 * Gốc là Bootstrap 4 (card / row / col / mb-* / py-* / h3 h4 h6 / lead / btn) phủ thêm ceo-glass-pages.css.
 * Ở đây dựng lại cùng cấu trúc bằng lớp riêng sv-*, giữ đúng đơn vị của luật thắng ở gốc:
 * rem cho mb-*, py-*, mr-2, cỡ chữ h3/h4/h6/lead, đệm nút; px cho đệm thẻ 20/16, bo góc, viền.
 * Mọi luật gói trong #page-solutions. */

#page-solutions {
  --sv-heading-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sv-heading: #213446;          /* màu h1/h3 mặc định của theme ceoacc */
  --sv-platform-title: #01041b;   /* .text-dark */
  --sv-platform-line: #f1f1f1;    /* .border */
  --sv-ic-primary: #3378ff;       /* .text-primary */
  --sv-ic-danger: #f42b3d;        /* .text-danger */
  --sv-ic-success: #3cb72c;       /* .text-success */
  --sv-ic-info: #19b3b3;          /* .text-info */
}
/* Chế độ tối: ceoacc giữ chữ tối trên nền tối ở trang này (khó đọc) — FunTools dùng token chữ sáng */
html.cg-dark #page-solutions {
  --sv-heading: var(--cg-text);
  --sv-platform-title: var(--cg-text);
  --sv-platform-line: var(--cg-line);
}

#page-solutions .sv-main { display: block; min-width: 0; }

/* .card .card-block (Bootstrap + glass) */
#page-solutions .sv-card {
  position: relative; display: flex; flex-direction: column; flex-grow: 1; min-width: 0;
  overflow-wrap: break-word; margin-bottom: 30px;
  color: var(--cg-text);
  background: linear-gradient(155deg, var(--cg-surface, #fff) 65%, var(--cg-soft, #f7f9fd));
  border: 1px solid var(--cg-line); border-radius: 24px;
  box-shadow: var(--cg-shadow, 0 8px 26px rgba(52,72,115,.055));
  font-size: 14px; line-height: 1.6;
}
#page-solutions .sv-card-body { flex: 1 1 auto; min-height: 1px; padding: 20px; }

/* Tiện ích khoảng cách Bootstrap (có !important ở gốc) */
#page-solutions .sv-mb-0 { margin-bottom: 0 !important; }
#page-solutions .sv-mb-2 { margin-bottom: .625rem !important; }
#page-solutions .sv-mb-3 { margin-bottom: 1.25rem !important; }
#page-solutions .sv-mb-4 { margin-bottom: 1.875rem !important; }
#page-solutions .sv-py-3 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
#page-solutions .sv-py-4 { padding-top: 1.875rem !important; padding-bottom: 1.875rem !important; }

/* Tiêu đề (backend.css: .h3 / .h4 / .h6, cỡ chữ co theo khung dưới 1200px) */
#page-solutions :is(.sv-h3, .sv-h4, .sv-h6) {
  margin: 0 0 .625rem; font-family: var(--sv-heading-font); font-weight: 600; line-height: 1.2;
}
#page-solutions .sv-h3 { color: var(--sv-heading); font-size: 1.953rem; }
#page-solutions .sv-h4 { color: var(--cg-text); font-size: 1.563rem; }
#page-solutions .sv-h6 { color: var(--sv-heading); font-size: 1rem; }
@media (max-width: 1200px) {
  #page-solutions .sv-h3 { font-size: calc(1.3203rem + .8436vw); }
  #page-solutions .sv-h4 { font-size: calc(1.2813rem + .3756vw); }
}
#page-solutions p { margin: 0 0 1rem; }
#page-solutions .sv-lead { color: var(--cg-text); font-size: 1.25rem; font-weight: 300; }
#page-solutions .sv-muted { color: var(--cg-muted); }

/* .row + các cột Bootstrap */
#page-solutions .sv-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
#page-solutions :is(.sv-col-plat, .sv-col-6, .sv-col-4, .sv-col-md-4) { position: relative; width: 100%; padding: 0 15px; }
#page-solutions .sv-col-plat { margin-bottom: 1.25rem; }                 /* col-sm-6 col-lg-4 col-xl-3 mb-3 */
@media (min-width: 576px) { #page-solutions .sv-col-plat { flex: 0 0 50%; max-width: 50%; } }
@media (min-width: 768px) { #page-solutions .sv-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } }
@media (min-width: 992px) {
  #page-solutions .sv-col-plat, #page-solutions .sv-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  #page-solutions .sv-col-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1200px) { #page-solutions .sv-col-plat { flex: 0 0 25%; max-width: 25%; } }

/* Thẻ nền tảng: a.card.h-100.border — cao bằng cột, lề dưới 30px của .card nằm trong cột
 * nên đáy thẻ có thêm 30px trống như gốc */
#page-solutions .sv-plat-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%;
  margin-bottom: 30px; overflow-wrap: break-word;
  color: var(--cg-text); text-decoration: none;
  background: linear-gradient(155deg, var(--cg-surface, #fff) 65%, var(--cg-soft, #f7f9fd));
  border: 1px solid var(--sv-platform-line); border-radius: 20px; box-shadow: none;
  font-size: 14px; line-height: 1.6;
}
#page-solutions .sv-plat-card:hover { text-decoration: none; }
#page-solutions .sv-plat-card .sv-h6 { margin-bottom: .3125rem; color: var(--sv-platform-title); }   /* text-dark mb-1 */
#page-solutions .sv-small { color: var(--cg-muted); font-size: 80%; font-weight: 400; }

/* Icon đứng trước tiêu đề: .mr-2 + màu text-* */
#page-solutions :is(.sv-h4, .sv-h6) > i { margin-right: .625rem; }
#page-solutions .sv-h6 > i { color: var(--sv-ic-primary); }
#page-solutions .sv-ic-primary { color: var(--sv-ic-primary); }
#page-solutions .sv-ic-danger { color: var(--sv-ic-danger); }
#page-solutions .sv-ic-success { color: var(--sv-ic-success); }
#page-solutions .sv-ic-info { color: var(--sv-ic-info); }

/* Bốn khối dịch vụ: .card.card-block.card-stretch.card-height — cao bằng cột trừ 30px lề dưới */
#page-solutions .sv-card-stretch { align-items: stretch; height: calc(100% - 30px); }

/* Nút (.btn của Bootstrap + glass: 14px/500, bo 12px) */
#page-solutions .sv-btn {
  display: inline-block; padding: .625rem 1.25rem;
  border: 1px solid transparent; border-radius: 12px; background-color: transparent;
  font-family: var(--sv-heading-font); font-size: 14px; font-weight: 500; line-height: 1.5;
  text-align: center; vertical-align: middle; text-decoration: none; cursor: pointer; user-select: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#page-solutions .sv-btn:hover { text-decoration: none; }
#page-solutions .sv-btn:focus { box-shadow: none; }
#page-solutions .sv-btn-primary { color: #fff; background-color: var(--cg-primary-fill); border-color: var(--cg-primary-fill); box-shadow: 0 4px 8px rgba(255,255,255,.05); }
#page-solutions .sv-btn-primary:hover { color: #fff; }      /* gốc: nền giữ nguyên khi rê chuột */
#page-solutions .sv-btn-primary:focus { box-shadow: none; }
#page-solutions .sv-btn-primary:active { background-color: #0056ff; border-color: #0052f2; box-shadow: none; }
#page-solutions .sv-btn-outline-primary { color: var(--cg-primary); border-color: var(--cg-line-strong); }
#page-solutions .sv-btn-outline-primary:hover { color: var(--cg-primary); background-color: var(--cg-blue-soft); border-color: var(--cg-primary); }
#page-solutions .sv-btn-outline-primary:active { color: #fff; background-color: #3378ff; border-color: #3378ff; }
#page-solutions .sv-btn-outline-success { color: var(--sv-ic-success); border-color: var(--sv-ic-success); }
#page-solutions .sv-btn-outline-success:is(:hover, :active) { color: #fff; background-color: var(--sv-ic-success); border-color: var(--sv-ic-success); }
#page-solutions .sv-btn-outline-info { color: var(--sv-ic-info); border-color: var(--sv-ic-info); }
#page-solutions .sv-btn-outline-info:is(:hover, :active) { color: #fff; background-color: var(--sv-ic-info); border-color: var(--sv-ic-info); }

/* Khung focus bàn phím: dùng luật chung `.content :is(button, a, …):focus-visible` trong base.css */

/* Điện thoại (≤600px, ceo-glass-pages.css): bo 20px, đệm thân thẻ 16px (py-* vẫn giữ) */
@media (max-width: 600px) {
  #page-solutions .sv-card { border-radius: 20px; }
  #page-solutions .sv-card-body { padding: 16px; }
}