/* Sam Education production UI polish - 2026-07-01
   Scope: visual-only overrides for samnguyen.vn homepage/app shell. */
:root {
  --sam-polish-ink: #161411;
  --sam-polish-muted: #625b52;
  --sam-polish-line: rgba(22, 20, 17, .12);
  --sam-polish-gold: #b97a28;
  --sam-polish-blue: #0b4fb3;
  --sam-polish-paper: #faf8f3;
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--sam-polish-paper);
}

body header.fixed {
  border-bottom: 1px solid rgba(22, 20, 17, .08);
  background: rgba(250, 248, 243, .86) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 42px rgba(22, 20, 17, .05);
}

body header.fixed > div {
  min-height: 64px;
}

body header.fixed .font-display {
  color: var(--sam-polish-ink) !important;
  letter-spacing: 0;
}

body header.fixed button {
  letter-spacing: .04em !important;
}

body header.fixed input {
  border-color: rgba(22, 20, 17, .12) !important;
  background: rgba(255, 255, 255, .74) !important;
}

body main section:first-of-type {
  min-height: min(760px, 92vh);
  display: flex;
  align-items: center;
  margin-bottom: clamp(72px, 10vw, 132px) !important;
}

body main section:first-of-type > div {
  width: 100%;
}

body main section:first-of-type h1 {
  max-width: 780px;
  color: var(--sam-polish-ink);
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body main section:first-of-type p {
  color: var(--sam-polish-muted);
  font-size: clamp(16px, 1.24vw, 19px) !important;
}

body main section:first-of-type img {
  border-radius: 2px;
  box-shadow: 0 28px 80px rgba(22, 20, 17, .14);
}

body main section[id="hoc-thu-onchup"] {
  border-top: 1px solid rgba(22, 20, 17, .06);
  border-bottom: 1px solid rgba(22, 20, 17, .06);
}

body main section[id="hoc-thu-onchup"] h2,
body main section[id="faq"] h2 {
  color: var(--sam-polish-ink);
  letter-spacing: 0 !important;
}

body main section[id="hoc-thu-onchup"] button.group > div:first-child {
  border: 1px solid rgba(22, 20, 17, .08);
  box-shadow: 0 18px 44px rgba(22, 20, 17, .08);
}

body main section[id="hoc-thu-onchup"] button.group img {
  transform-origin: center;
}

body main section[id="hoc-thu-onchup"] h3 {
  color: var(--sam-polish-ink);
  letter-spacing: 0 !important;
}

body main section[id="hoc-thu-onchup"] button.group:hover h3 {
  color: var(--sam-polish-gold);
}

body main section[id="khoa-hoc"] {
  background: linear-gradient(180deg, #fffaf0 0%, #fbf7ef 100%);
}

body .editorial-gradient,
body .sam-cta-shine,
body button.bg-art-accent {
  background: linear-gradient(135deg, #0b4fb3 0%, #176bd7 100%) !important;
  box-shadow: 0 18px 38px rgba(11, 79, 179, .22);
}

body .editorial-gradient:hover,
body .sam-cta-shine:hover,
body button.bg-art-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(11, 79, 179, .28);
}

body footer {
  border-top-color: var(--sam-polish-line) !important;
  background: #fffdf8 !important;
}

body #faq .divide-y > div,
body main section[id="faq"] .bg-surface-lowest {
  border-color: rgba(22, 20, 17, .1) !important;
}

body main section[id="faq"] .bg-surface-lowest {
  box-shadow: 0 16px 42px rgba(22, 20, 17, .05);
}

body .sam-home-sticky-cta {
  background: rgba(16, 20, 28, .92) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 52px rgba(16, 20, 28, .24);
}

@media (max-width: 1023px) {
  body header.fixed {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body main section:first-of-type {
    min-height: auto;
    align-items: flex-start;
    padding-top: 96px !important;
    margin-bottom: 72px !important;
  }

  body main section:first-of-type h1 {
    font-size: clamp(44px, 14vw, 72px) !important;
    line-height: .96 !important;
  }
}

@media (max-width: 640px) {
  body main section:first-of-type {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body main section:first-of-type img {
    max-height: 430px;
    object-position: 50% 18%;
  }

  body main section[id="hoc-thu-onchup"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body main section[id="hoc-thu-onchup"] button.group > div:first-child {
    box-shadow: 0 12px 30px rgba(22, 20, 17, .08);
  }
}