/* Landing page sách — chỉ dùng token trong tokens.css, không mã màu cứng.
   Nhịp: dày (hero) → thở → dày → thở; nền xen kẽ xanh ngọc / ngọc đêm. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--mau-nen);
  color: var(--mau-chu);
  font-family: var(--font-chu);
  font-size: 1.0625rem;
  line-height: 1.65;
  padding-bottom: 72px; /* chừa chỗ nút dính dưới trên điện thoại */
}
::selection { background: var(--chon-nen); color: var(--chon-chu); }
:focus-visible { outline: none; box-shadow: var(--focus-vong); border-radius: var(--bo-nho); }
a { color: var(--lien-ket); }
.an { display: none !important; }
.khung { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--k-4); }

h1, h2 { font-family: var(--font-tieu-de); font-weight: 700; line-height: 1.2; color: var(--mau-nhan); margin: 0 0 var(--k-4); }
h1 { font-size: clamp(2rem, 6vw, 3rem); color: var(--mau-chu); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }

.dai { margin: 0; padding: var(--k-2) var(--k-4); text-align: center; font-weight: 600; background: var(--nut-nen); color: var(--nut-chu); }

/* ---- Hero ---- */
.hero { display: grid; gap: var(--k-6); align-items: center; padding-top: var(--k-8); padding-bottom: var(--k-12); }
@media (min-width: 760px) { .hero { grid-template-columns: 1.3fr 1fr; padding-top: var(--k-12); } }
.logo { width: 64px; height: auto; }
.tien-de { color: var(--mau-chu-phu); font-size: var(--co-chu-nho); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--k-3) 0; }
.tagline { font-family: var(--font-tieu-de); font-size: 1.75rem; color: var(--mau-nhan); margin: 0 0 var(--k-2); }
.phu { color: var(--mau-chu-phu); margin: 0 0 var(--k-6); }
.tin-cay { font-size: var(--co-chu-nho); color: var(--mau-chu-phu); margin: var(--k-3) 0 0; }
.bia { width: 100%; max-width: 320px; height: auto; justify-self: center; border-radius: var(--bo-nho); box-shadow: var(--bong); }

/* ---- Khối nội dung ---- */
.doan { padding-top: var(--k-12); padding-bottom: var(--k-12); }
/* Nền tràn toàn màn hình, nội dung vẫn thẳng cột 928px */
.nen-toi { background: var(--mau-nen-sau); max-width: none; padding-left: max(var(--k-4), calc((100% - 928px) / 2)); padding-right: max(var(--k-4), calc((100% - 928px) / 2)); }
.dau-hieu, .goi { padding-left: 1.2em; margin: 0; }
.dau-hieu li, .goi li { margin-bottom: var(--k-3); }
/* Ảnh + chữ hai cột (ảnh minh hoạ trong sách gánh câu chuyện, chữ chỉ chốt ý) */
.hai-cot { display: grid; gap: var(--k-6); align-items: center; }
.hai-cot > img { width: 100%; max-width: 420px; height: auto; justify-self: center; border-radius: var(--bo-vua); box-shadow: var(--bong); }
@media (min-width: 760px) { .hai-cot { grid-template-columns: 1fr 1.2fr; } }
@media (max-width: 759px) { .hai-cot > img[height='1135'] { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; } }
.video video { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: var(--bo-vua); background: var(--mau-nen); }
.video h2 { text-align: center; }
/* 6 tầng: lưới thẻ ảnh — 2 cột điện thoại, 3 cột máy tính */
.sau-tang { list-style: none; padding: 0; margin: 0 0 var(--k-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-4); }
@media (min-width: 760px) { .sau-tang { grid-template-columns: repeat(3, 1fr); } }
.sau-tang li { display: flex; flex-direction: column; gap: var(--k-1); }
.sau-tang img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bo-vua); margin-bottom: var(--k-1); }
.sau-tang b { color: var(--mau-nhan); font-family: var(--font-tieu-de); font-size: 1.125rem; }
.sau-tang span { color: var(--mau-chu-phu); font-size: var(--co-chu-nho); line-height: 1.4; }
.doc-thu { margin: var(--k-6) 0 0; padding: var(--k-4) var(--k-6); border-left: 3px solid var(--mau-nhan); font-family: var(--font-tieu-de); font-size: 1.25rem; }
.doc-thu p { margin: 0; }
.doc-thu footer { font-family: var(--font-chu); font-size: var(--co-chu-nho); color: var(--mau-chu-phu); margin-top: var(--k-2); }
.gia { font-family: var(--font-tieu-de); font-size: 2rem; color: var(--mau-nhan); margin: var(--k-4) 0 0; }
.gia span { font-family: var(--font-chu); font-size: var(--co-chu-nho); color: var(--mau-chu-phu); margin-left: var(--k-2); }
details { border-bottom: 1px solid var(--mau-vien); padding: var(--k-3) 0; }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--mau-chu-phu); margin: var(--k-2) 0 0; }

/* ---- Nút ---- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: var(--k-3) var(--k-6); border-radius: var(--bo-tron); font: inherit; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color 150ms ease;
}
.nut-chinh { background: var(--nut-nen); color: var(--nut-chu); }
.nut-chinh:hover { background: var(--nut-nen-hover); }
.nut-chinh:active { background: var(--nut-nen-active); }
.nut-chinh:disabled { background: var(--nut-disabled-nen); color: var(--nut-disabled-chu); cursor: progress; }
.nut-phu { color: var(--nut-phu-chu); border-color: var(--nut-phu-vien); }
.nut-phu:hover { background: var(--nut-phu-nen-hover); }
.nut-dinh { position: fixed; left: var(--k-4); right: var(--k-4); bottom: var(--k-3); z-index: 10; box-shadow: var(--bong); }
@media (min-width: 760px) { .nut-dinh { display: none; } body { padding-bottom: 0; } }

/* ---- Form ---- */
#form-dat { display: grid; gap: 0 var(--k-4); }
@media (min-width: 760px) { #form-dat { grid-template-columns: 1fr 1fr; } #form-dat > .chon, #form-dat > .o-rong, #form-dat > .tong, #form-dat > button, #form-dat > .loi { grid-column: 1 / -1; } }
.o label { display: block; font-weight: 600; margin-bottom: var(--k-1); }
.o .tuy-chon { font-weight: 400; color: var(--mau-chu-phu); font-size: var(--co-chu-nho); }
.o input::placeholder { color: var(--o-nhap-goi-y); opacity: 1; }
.o input, .o select {
  width: 100%; min-height: 48px; padding: var(--k-3) var(--k-4); font: inherit;
  color: var(--o-nhap-chu); background: var(--o-nhap-nen); border: 2px solid var(--o-nhap-vien); border-radius: var(--bo-vua);
}
.o input:focus-visible, .o select:focus-visible { border-color: var(--o-nhap-vien-focus); box-shadow: none; }
.o input[aria-invalid='true'] { border-color: var(--o-nhap-vien-loi); }
.loi { color: var(--mau-loi); font-size: var(--co-chu-nho); font-weight: 600; margin: var(--k-1) 0 var(--k-3); min-height: 1.2em; }
.chon { display: flex; gap: var(--k-2); align-items: flex-start; margin: var(--k-2) 0; }
.chon input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--mau-nhan); flex-shrink: 0; }
.tong { margin: var(--k-3) 0; }
.tong strong { color: var(--mau-nhan); font-size: 1.25rem; }
.thong-bao { font-weight: 600; color: var(--mau-nhan); margin-top: var(--k-4); }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Chân trang ---- */
.chan { padding-top: var(--k-8); padding-bottom: var(--k-8); font-size: var(--co-chu-nho); color: var(--mau-chu-phu); }

/* Ô Turnstile (chống đơn ảo) — căn giữa trong form */
.o-turnstile { grid-column: 1 / -1; display: flex; justify-content: center; min-height: 65px; margin: 12px 0; }

/* Trang Chính sách bảo mật */
.chinh-sach { max-width: 760px; }
.chinh-sach h2 { margin-top: 2rem; }
.ban-nhap { background: var(--gold-100); color: var(--gold-900); font-weight: 700; padding: 8px 12px; border-radius: 8px; }