/*
Theme Name: So Sánh Deal
Description: Child theme nhẹ dành cho website nội dung công nghệ.
Author: So Sánh Deal
Template: twentytwentyfive
Version: 1.2.2
Text Domain: sosanhdeal
*/

:root {
  --ssd-accent: #0b66d6;
  --ssd-accent-dark: #074a9d;
  --ssd-ink: #142033;
  --ssd-muted: #5e6878;
  --ssd-surface: #f5f8fc;
  --ssd-border: #dce4ef;
}

html {
  scroll-behavior: smooth;
  background: #edf4fc;
}
body {
  color: var(--ssd-ink);
  background-color: #f4f8fd;
  background-image:
    radial-gradient(circle at 8% 8%, rgb(43 132 255 / 16%) 0, transparent 26rem),
    radial-gradient(circle at 92% 28%, rgb(39 199 170 / 12%) 0, transparent 24rem),
    radial-gradient(circle at 12% 72%, rgb(137 92 246 / 9%) 0, transparent 28rem),
    linear-gradient(180deg, #f7faff 0%, #ffffff 20%, #f4f8fd 62%, #eef5fc 100%);
  background-attachment: fixed;
}
.wp-site-blocks { overflow: clip; }
a { text-underline-offset: .16em; }

.ssd-article-hero {
  margin-block: clamp(24px, 4vw, 40px);
  overflow: hidden;
  border: 1px solid rgb(164 194 229 / 72%);
  border-radius: 22px;
  background: #eaf2fb;
  box-shadow: 0 18px 48px rgb(37 79 130 / 14%);
}
.ssd-article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ssd-site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--ssd-border);
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 4px 24px rgb(20 32 51 / 7%);
  backdrop-filter: blur(16px);
}
.ssd-brand a { text-decoration: none; }

.ssd-hero {
  position: relative;
  background:
    radial-gradient(circle at 8% 12%, rgb(11 102 214 / 19%), transparent 34%),
    radial-gradient(circle at 94% 86%, rgb(35 196 167 / 18%), transparent 32%),
    linear-gradient(135deg, #e8f3ff 0%, #f9fbff 52%, #e8f9f4 100%);
  border: 1px solid rgb(164 194 229 / 72%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgb(37 79 130 / 14%);
}
.ssd-hero::before,
.ssd-hero::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.ssd-hero::before {
  width: 190px;
  height: 190px;
  right: -70px;
  top: -78px;
  border: 30px solid rgb(255 255 255 / 48%);
}
.ssd-hero::after {
  width: 90px;
  height: 90px;
  left: 48%;
  bottom: -62px;
  background: rgb(43 132 255 / 10%);
}
.ssd-eyebrow, .ssd-section-kicker {
  margin-bottom: .55rem;
  color: var(--ssd-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .11em;
}
.ssd-hero h1 { max-width: 13ch; line-height: 1.04; }
.ssd-hero-visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(11 102 214 / 12%);
  border-radius: 22px;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 14px 32px rgb(20 32 51 / 12%);
  transform: rotate(1deg);
}
.ssd-hero-visual img {
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
}

.ssd-principles {
  margin-top: -20px !important;
  padding: 26px 34px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgb(62 139 255 / 28%), transparent 32%),
    linear-gradient(130deg, #0e1d35, #142c51);
  color: #fff;
  box-shadow: 0 16px 38px rgb(16 34 63 / 18%);
}
.ssd-principles .wp-block-columns { margin-bottom: 0; }
.ssd-principle { padding: 4px 22px; border-left: 1px solid rgb(255 255 255 / 16%); }
.ssd-principle:first-child { border-left: 0; }
.ssd-principle h3 { margin: 0 0 5px; font-size: 1.05rem; }
.ssd-principle p:last-child { margin: 0; color: #c7d5e8; font-size: .9rem; }
.ssd-principle-number { margin: 0 0 10px; color: #72b6ff; font-size: .76rem; font-weight: 800; }

.ssd-editorial, .ssd-section, .ssd-needs, .ssd-latest { margin-top: clamp(56px, 8vw, 92px) !important; }
.ssd-section h2, .ssd-needs h2, .ssd-latest h2 { margin-top: 0; }
.ssd-section-intro { margin-top: -.5rem; color: var(--ssd-muted); }

.ssd-editorial {
  position: relative;
  min-height: 620px;
  padding: 18px;
  border: 1px solid rgb(184 207 232 / 72%);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 94%) 39%, rgb(255 255 255 / 32%) 64%, rgb(255 255 255 / 4%) 100%),
    url("https://sosanhdeal.com/wp-content/uploads/2026/07/sosanhdeal-editorial-guidance-v1.webp") 64% center / cover no-repeat;
  box-shadow: 0 18px 54px rgb(37 79 130 / 12%);
  backdrop-filter: blur(12px);
}
.ssd-editorial-layout {
  min-height: 584px;
  margin-bottom: 0;
  gap: clamp(26px, 5vw, 64px);
  flex-direction: row-reverse;
}
.ssd-editorial-image {
  margin: 0;
  overflow: hidden;
  border-radius: 19px;
  opacity: 0;
}
.ssd-editorial-image img {
  display: block;
  width: 100% !important;
  min-height: 560px;
  object-fit: cover !important;
  object-position: 100% 50% !important;
}
.ssd-editorial-copy { padding: 36px 0 36px 34px; }
.ssd-editorial-copy h2 { margin-top: 0; line-height: 1.12; }
.ssd-check-list { padding-left: 0; list-style: none; }
.ssd-check-list li { position: relative; margin: 13px 0; padding-left: 30px; }
.ssd-check-list li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dff4e5;
  color: #11753a;
  content: "✓";
  font-size: .76rem;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}
.ssd-text-link { margin-top: 24px; font-weight: 750; }
.ssd-text-link a { color: var(--ssd-accent); text-decoration: none; }

.ssd-section {
  position: relative;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgb(194 214 237 / 70%);
  border-radius: 28px;
  background:
    linear-gradient(rgb(255 255 255 / 86%), rgb(255 255 255 / 86%)),
    radial-gradient(circle at 8px 8px, rgb(11 102 214 / 16%) 1.4px, transparent 1.5px);
  background-size: auto, 22px 22px;
  box-shadow: 0 18px 56px rgb(40 82 132 / 9%);
}
.ssd-section::after {
  position: absolute;
  right: -58px;
  bottom: -58px;
  z-index: -1;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(82 155 255 / 18%), rgb(48 201 169 / 12%));
  content: "";
}

.ssd-category-card {
  position: relative;
  height: 100%;
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--ssd-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(31 72 122 / 9%);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ssd-category-card::after {
  position: absolute;
  right: -38px;
  top: -38px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--card-color, #e8f2ff);
  content: "";
}
.ssd-category-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgb(20 32 51 / 12%); }
.ssd-category-card h3 { position: relative; z-index: 1; }
.ssd-category-card a { color: var(--ssd-ink); text-decoration: none; }
.ssd-card-icon { position: relative; z-index: 1; color: var(--ssd-accent); font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.ssd-card-link { margin-top: 26px; font-size: .9rem; font-weight: 700; }
.ssd-card-link a { color: var(--ssd-accent); }
.ssd-card-blue { --card-color: #dcecff; }
.ssd-card-violet { --card-color: #ebe3ff; }
.ssd-card-cyan { --card-color: #d8f5f6; }
.ssd-card-orange { --card-color: #ffead6; }
.ssd-card-green { --card-color: #dff4e5; }
.ssd-card-rose { --card-color: #ffe1e8; }

.ssd-needs {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 50px);
  border: 1px solid rgb(179 205 235 / 72%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 8%, rgb(107 87 245 / 18%), transparent 29%),
    radial-gradient(circle at 4% 96%, rgb(34 195 168 / 15%), transparent 25%),
    linear-gradient(135deg, #e9f3ff, #f5f1ff);
  box-shadow: 0 18px 50px rgb(37 79 130 / 10%);
}
.ssd-need-grid { margin-top: 28px; margin-bottom: 0; }
.ssd-need-card {
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 16px;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 8px 24px rgb(38 72 117 / 7%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ssd-need-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(38 72 117 / 12%); }
.ssd-need-card span { font-size: 1.75rem; }
.ssd-need-card h3 { margin: 14px 0 18px; font-size: 1rem; }
.ssd-need-card p { margin: 0; font-size: .86rem; font-weight: 700; }
.ssd-need-card a { color: var(--ssd-accent); text-decoration: none; }

.ssd-latest {
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--ssd-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 15%, rgb(44 126 235 / 13%), transparent 28%),
    linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(240 247 255 / 94%));
  box-shadow: 0 16px 44px rgb(37 79 130 / 10%);
}
.ssd-footer {
  background: #0e1d35;
  color: #cbd7e8;
}
.ssd-footer .wp-block-site-title, .ssd-footer .wp-block-site-title a { color: #fff; text-decoration: none; }
.ssd-footer h3 { color: #79baff; letter-spacing: .09em; }
.ssd-footer a { color: #e9f1fb; text-decoration: none; line-height: 2; }
.ssd-footer a:hover { color: #79baff; }
.ssd-footer-brand p { max-width: 34rem; }
.ssd-footer-tag { margin-top: 24px; color: #79baff; font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.ssd-footer-rule { margin-top: 34px; border-color: rgb(255 255 255 / 18%); }
.wp-block-button__link { transition: background-color 160ms ease, transform 160ms ease; }
.wp-block-button__link:hover { background: var(--ssd-accent-dark); transform: translateY(-1px); }

@media (max-width: 720px) {
  body {
    background-attachment: scroll;
    background-image:
      radial-gradient(circle at 10% 8%, rgb(43 132 255 / 13%) 0, transparent 18rem),
      linear-gradient(180deg, #f7faff 0%, #fff 28%, #eef5fc 100%);
  }
  .ssd-hero { border-radius: 18px; }
  .ssd-hero-visual { margin-top: 20px; transform: none; }
  .ssd-principles { margin-top: 20px !important; padding: 22px; }
  .ssd-principle { padding: 16px 4px; border-left: 0; border-top: 1px solid rgb(255 255 255 / 16%); }
  .ssd-principle:first-child { border-top: 0; }
  .ssd-editorial { padding: 12px; }
  .ssd-editorial {
    min-height: 0;
    background:
      radial-gradient(circle at 96% 4%, rgb(82 155 255 / 13%), transparent 26%),
      rgb(255 255 255 / 92%);
  }
  .ssd-editorial-layout {
    min-height: 0;
    flex-direction: column;
  }
  .ssd-editorial-image { opacity: 1; }
  .ssd-editorial-image img {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain !important;
    object-position: center !important;
  }
  .ssd-editorial-copy { padding: 20px 10px 12px; }
  .ssd-section { padding: 26px 18px; border-radius: 22px; }
  .ssd-category-card { min-height: 0; }
  .ssd-site-header .wp-block-navigation { font-size: .95rem; }
}