/**
 * brand.css — Lớp theme thương hiệu Soft Space (Mức 1, 2026-06-15)
 * Nạp SAU style.css (FlexStart) để hiện đại hoá giao diện mà KHÔNG sửa markup.
 * Chỉ áp dụng cho FRONTEND (qua HeadHome()). KHÔNG ảnh hưởng admin.
 * An toàn: chỉ tinh chỉnh màu/typography/shadow/bo góc/hiệu ứng — không đụng grid/layout.
 */
:root {
  --ssp-red: rgb(235, 41, 44);
  --ssp-red-600: rgb(214, 32, 35);
  --ssp-red-700: rgb(186, 26, 29);
  --ssp-ink: #1f2733;          /* chữ chính, dịu hơn đen tuyền */
  --ssp-muted: #5b6675;
  --ssp-soft: #f6f8fb;         /* nền section nhạt */
  --ssp-line: #e8edf3;
  --ssp-radius: 14px;
  --ssp-radius-sm: 10px;
  --ssp-shadow: 0 6px 24px rgba(20, 33, 61, .07);
  --ssp-shadow-md: 0 12px 36px rgba(20, 33, 61, .10);
  --ssp-shadow-red: 0 10px 28px rgba(235, 41, 44, .28);
  --bs-primary: var(--ssp-red);
  --bs-primary-rgb: 235, 41, 44;
  --bs-link-color: var(--ssp-red);
  --bs-link-hover-color: var(--ssp-red-700);
}

/* ---------- Typography ---------- */
body {
  color: var(--ssp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
h1, h2, h3, h4, h5, h6 { color: #121a26; font-weight: 700; line-height: 1.25; }
h1 { letter-spacing: -.4px; }
h2 { letter-spacing: -.3px; }
p { line-height: 1.7; }
::selection { background: rgba(235, 41, 44, .14); }
a { color: var(--ssp-red); transition: color .2s ease; }
a:hover { color: var(--ssp-red-700); }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: .62rem 1.4rem;
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary, .btn-danger {
  --bs-btn-bg: var(--ssp-red); --bs-btn-border-color: var(--ssp-red);
  --bs-btn-hover-bg: var(--ssp-red-700); --bs-btn-hover-border-color: var(--ssp-red-700);
  --bs-btn-active-bg: var(--ssp-red-700); --bs-btn-active-border-color: var(--ssp-red-700);
  box-shadow: var(--ssp-shadow-red);
}
.btn-outline-primary {
  --bs-btn-color: var(--ssp-red); --bs-btn-border-color: var(--ssp-red);
  --bs-btn-hover-bg: var(--ssp-red); --bs-btn-hover-border-color: var(--ssp-red);
  --bs-btn-active-bg: var(--ssp-red-700);
}
.btn-success {
  --bs-btn-bg: var(--ssp-red); --bs-btn-border-color: var(--ssp-red);
  --bs-btn-hover-bg: var(--ssp-red-700); --bs-btn-hover-border-color: var(--ssp-red-700);
}
/* Nút riêng của theme FlexStart -> đồng bộ pill + hover nâng */
.hero .btn-get-started, .about .btn-read-more, .btn-cta, a.btn-cta {
  border-radius: 999px !important;
  box-shadow: var(--ssp-shadow-red);
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease;
}
.hero .btn-get-started:hover, .about .btn-read-more:hover, .btn-cta:hover { transform: translateY(-2px); }

/* ---------- Forms: focus đỏ thay vì xanh ---------- */
.form-control:focus, .form-select:focus, .btn:focus, .btn:focus-visible, .form-check-input:focus {
  border-color: rgba(235, 41, 44, .55);
  box-shadow: 0 0 0 .2rem rgba(235, 41, 44, .18);
}
.form-check-input:checked { background-color: var(--ssp-red); border-color: var(--ssp-red); }
.form-control, .form-select { border-radius: var(--ssp-radius-sm); }

/* ---------- Cards / hộp nội dung (Bootstrap + FlexStart) ---------- */
.card {
  border: 1px solid var(--ssp-line);
  border-radius: var(--ssp-radius);
  box-shadow: var(--ssp-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ssp-shadow-md); }
.shadow-sm { box-shadow: var(--ssp-shadow) !important; }

.services .service-box,
.features .feature-box,
.features .feature-icons .content .icon-box,
.service-item, .feature-item {
  border-radius: var(--ssp-radius) !important;
  box-shadow: var(--ssp-shadow) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  border: 1px solid var(--ssp-line);
}
.services .service-box:hover,
.features .feature-box:hover,
.service-item:hover { transform: translateY(-6px); box-shadow: var(--ssp-shadow-md) !important; }
.services .service-box .icon i,
.features .feature-box i { color: var(--ssp-red); }

/* ---------- Section header / tiêu đề ---------- */
.section-header h2 { color: var(--ssp-red); }
.section-header h3, .section-header p {
  text-transform: none;
  color: #121a26;
  font-weight: 700;
}

/* ---------- Header / Navbar ---------- */
.header { transition: background-color .3s ease, box-shadow .3s ease; }
.header.header-scrolled, .header.sticked { box-shadow: 0 2px 18px rgba(20, 33, 61, .08); }
.navmenu a:hover, .navmenu .active, .navmenu li:hover > a { color: var(--ssp-red) !important; }

/* ---------- Badges / images / misc ---------- */
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--ssp-red) !important; }
img.rounded, .img-rounded { border-radius: var(--ssp-radius); }
blockquote { color: var(--ssp-muted); }
hr { border-color: var(--ssp-line); opacity: 1; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--ssp-line); }
.footer a:hover { color: var(--ssp-red); }

/* ---------- Mượt + ảnh không tràn ---------- */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }