/*
 * ShowerKit — theme trang ban (01/11/2026). Sage + dat nung, nen kem, tieu de Fraunces (serif
 * nghieng nhe, gan voi do in tiec). Nap SAU scrollstop-sales.css: chi doi bien + them khoi sk-*.
 * Anh tren trang deu la trang that do app xuat ra (scripts/showerkit/sales-images.mjs).
 */
.sk {
  --blue: #4F6F53;          /* nhan: kicker, link */
  --sky: #8FB08F;
  --ink: #26332A;
  --ink-2: #3E4B41;
  --muted: #66746A;
  --line: #E4E8DF;
  --mist: #F5F3EC;
  --tint: #EEF3EC;
  --grad: linear-gradient(135deg, #C8643F 0%, #E07A5F 100%);
  --display: "Fraunces", Georgia, serif;
}
.sk h1, .sk h2, .sk .ss-amount, .sk .v3-strip-price b { font-family: var(--display); letter-spacing: -.015em; font-weight: 700; }
.sk .ss-btn, .sk .sales-buy { box-shadow: 0 10px 24px -10px rgba(200, 100, 63, .65); }
.sk .ss-btn:hover { box-shadow: 0 14px 28px -10px rgba(200, 100, 63, .75); }
.sk .v4-hero, .sk .v5-hero {
  background: radial-gradient(760px 460px at 88% 30%, rgba(143, 176, 143, .22), transparent 65%),
              radial-gradient(620px 420px at 12% 85%, rgba(224, 122, 95, .12), transparent 65%), #FBF9F4;
}
.sk .v4-eyebrow { color: var(--blue); background: #EEF3EC; border-color: #D9E4D5; }
.sk .v4-eyebrow i { background: conic-gradient(#8FB08F, #E8A0B0, #E07A5F, #8FB08F); }
.sk .v4-mk { background: linear-gradient(transparent 64%, rgba(224, 122, 95, .26) 64%); }
.sk .v3-dark { background: #26332A; }
.sk .v3-dark .ss-kicker { color: #B9D3B4; }
.sk a:focus-visible, .sk button:focus-visible, .sk summary:focus-visible { outline-color: rgba(79, 111, 83, .5); }

/* ------------------------------------------------------------- hero 2 cot */
.sk-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.sk-hero-grid .v4-head { text-align: left; align-items: flex-start; margin: 0; }
.sk .sk-hero-grid h1 { max-width: 16ch; }
.sk-hero-img { border-radius: 18px; box-shadow: var(--shadow); background: #fff; }
@media (max-width: 880px) { .sk-hero-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ------------------------------------------------------------- anh + chu thich */
.sk-fig { margin: 0; }
.sk-fig img { border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.sk-fig figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.sk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sk-scroll img { max-width: none; width: 1100px; }

/* ------------------------------------------------------------- 3 buoc */
.sk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: sk; }
.sk-steps li { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.sk-steps li::before { counter-increment: sk; content: counter(sk); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: var(--blue); font-weight: 800; margin-bottom: 10px; }
.sk-steps { padding: 0; margin: 0; }
@media (max-width: 760px) { .sk-steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- danh sach game */
.sk-games { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sk-games li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .9rem; color: var(--ink-2); }
.sk-games li.pack { background: var(--tint); border-color: #D9E4D5; }

/* ------------------------------------------------------------- "khong lam" */
.sk-not { background: #FFF8F3; border: 1px solid #F3D9CB; border-radius: var(--r); padding: 22px 24px; }
.sk-not li { margin: 6px 0; }
.sk-src { font-size: .85rem; color: var(--muted); }

/* Anh ban dien thoai (trang OTO3): giu dung be ngang dien thoai, khong phong to theo cot */
.sk .sk-fig.sk-phone img { display: block; max-width: 300px; margin: 0 auto; border-radius: 28px; border: 8px solid #26332A; box-shadow: 0 18px 40px rgba(38, 51, 42, .18); }
.sk .sk-fig.sk-phone figcaption { text-align: center; }