/* Trang công khai. Nav và hero nằm trên dải thương hiệu, cùng dải với header của app
   (luật 1 ở tokens.css). Thẻ ví dụ trắng chở dữ liệu, đè xuống mép dải, mẫu PayPal trên Mobbin. */

.landing {
  overflow-x: clip;
  background: var(--paper);
}

/* ---- Nav trên nền xanh. Trang chủ vẽ nền ở hero, các trang công khai khác vẽ nền ở header. ---- */
.public > header {
  background: var(--brand-band);
}

.public > header .nav {
  border-bottom: 0;
}

:is(.landing, .public) .nav {
  position: relative;
  z-index: 1;
  border-bottom-color: oklch(100% 0 0 / 0.14);
}

:is(.landing, .public) .nav .nav__brand {
  color: var(--surface);
}

:is(.landing, .public) .nav__links a:not(.btn) {
  color: var(--on-brand);
}

:is(.landing, .public) .nav__links a:not(.btn):hover {
  color: var(--surface);
  background: var(--on-brand-fill);
}

:is(.landing, .public) .nav__links a:not(.btn):active {
  background: var(--on-brand-fill-hover);
}

:is(.landing, .public) .nav__links a:not(.btn):focus-visible {
  outline-color: var(--surface);
}

:is(.landing, .public) .nav .btn {
  border-color: transparent;
  background: var(--surface);
  color: var(--brand);
}

:is(.landing, .public) .nav .btn:hover {
  background: var(--brand-soft);
}

/* ---- Hero. Nền xanh là lớp ::before kéo lên sau nav 72px và tràn hết bề ngang. ---- */
.landing .hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  padding-block: var(--sp-8) var(--sp-8);
  color: var(--surface);
}

.landing .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -72px calc(50% - 50vw) 0;
  background:
    radial-gradient(60rem 30rem at 85% 110%, var(--brand-glow), transparent 70%),
    var(--brand-band);
}

.landing .hero h1 {
  max-width: 13ch;
}

.landing .hero__sub {
  color: var(--on-brand);
}

.landing .hero__form {
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}

.landing .hero__form:focus-within {
  border-color: transparent;
  outline: 3px solid var(--on-brand);
  outline-offset: 2px;
}

/* Vòng focus nằm ở cả form, ô nhập bên trong không vẽ thêm viền đen. */
.landing .hero__form input:focus-visible {
  outline: none;
}

/* Kết quả dán link và báo lỗi đăng nhập nằm trên nền xanh, nên luôn có nền trắng. */
.landing .hero .estimate > .estimate__hint,
.landing .hero .estimate > .estimate__error {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-inner);
  background: var(--surface);
}

/* ---- Thẻ ví dụ: đè xuống mép dải trên màn rộng ---- */
.landing .hero__demo {
  width: 100%;
  margin-bottom: calc(-1 * var(--sp-8) - var(--sp-6));
  color: var(--ink);
}

.landing .hero__demo > .label {
  color: var(--on-brand);
}

.landing .estimate__card {
  box-shadow: var(--shadow-float);
}

.demo__head:has(.demo__img) {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: center;
}

.demo__img {
  grid-row: span 2;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-inner);
  outline: 1px solid var(--line-hair);
  outline-offset: -1px;
}

.demo__head .estimate__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-base);
}

@media (prefers-reduced-motion: no-preference) {
  .landing .hero__demo {
    animation: demo-rise 700ms var(--ease-out-expo) 120ms both;
  }
}

@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Mục đầu tiên sau hero chừa chỗ cho thẻ ví dụ đè xuống, và bỏ vạch kẻ trên. */
.landing .hero + .section {
  border-top: 0;
  padding-top: var(--sp-8);
}

@media (max-width: 900px) {
  .landing .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--sp-6);
  }

  .landing .hero__demo {
    margin-bottom: 0;
  }

  .landing .hero + .section {
    padding-top: var(--sp-6);
  }
}

/* "Hoàn nhiều hôm nay" ở trang chủ chỉ giữ một hàng, ảnh banner của shop rất nhiều chữ nên
   mười ô liền làm trang rối. Màn hẹp hai cột thì giữ hai hàng. Muốn xem hết thì bấm "Xem thêm". */
#featured .pgrid > :nth-child(n + 5) {
  display: none;
}

@container (min-width: 560px) {
  #featured .pgrid > :nth-child(n + 4) { display: none; }
}

@container (min-width: 760px) {
  #featured .pgrid > :nth-child(4) { display: revert; }
}

@container (min-width: 960px) {
  #featured .pgrid > :nth-child(5) { display: revert; }
}

/* ---- Khối mời bạn đầu trang (#201) ---- */
.moi-ban {
  margin-bottom: var(--sp-5);
}

.moi-ban__sheet {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Chữ trong hero mặc định trắng; khối mời nằm trên nền sáng nên lấy màu chữ thường. */
.moi-ban h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}

.moi-ban__text,
.moi-ban__zalo {
  color: var(--ink-2);
}

.moi-ban__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}