/* Trang bán sách 135 đề tài — hệ màu và bộ chữ lấy nguyên của cuốn sách, để
   trang web và cuốn sách nhìn ra là một thứ chứ không phải hai thứ ghép lại.
   Ba màu và ba họ chữ dưới đây khớp với 3-dan-trang/style-vn.css. */

:root {
  --giay:      #F7F1E4;   /* màu giấy của sách */
  --giay-dam:  #EFE7D6;
  --muc:       #1B2C3E;   /* navy, màu chữ */
  --muc-nhat:  #4A5A6B;
  --vang:      #C08423;   /* vàng đất */
  --navy-dam:  #0E2A45;   /* tên chương */
  --vien:      #DDD2BC;
  --than:  "Noto Serif", Georgia, serif;
  --hep-chu: "Barlow Condensed", "Arial Narrow", sans-serif;
  --viet:  "Be Vietnam Pro", system-ui, sans-serif;
  --rong: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font: 400 17px/1.7 var(--than);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vang); text-underline-offset: 3px; }
a:hover { color: var(--navy-dam); }

h1, h2 { font-family: var(--viet); line-height: 1.22; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5.2vw, 50px); font-weight: 700; margin: 0 0 18px; }
h2 { font-size: clamp(23px, 3.4vw, 33px); font-weight: 600; margin: 0 0 20px; color: var(--navy-dam); }

.khung { width: min(var(--rong), 100% - 40px); margin-inline: auto; }
.hep { max-width: 720px; }
.khoi { padding: clamp(48px, 8vw, 86px) 0; }
.nen-nhat { background: var(--giay-dam); }
.nen-dam { background: var(--navy-dam); color: var(--giay); }
.nen-dam h2 { color: var(--giay); }

.bo-qua {
  position: absolute; left: -9999px;
  background: var(--navy-dam); color: var(--giay); padding: 12px 18px;
}
.bo-qua:focus { left: 12px; top: 12px; z-index: 99; }

/* ── Mở đầu ─────────────────────────────────────────────────────────── */
.hero { padding: clamp(34px, 6vw, 68px) 0 clamp(44px, 7vw, 76px); }
.hero-luoi {
  display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: 1fr 340px; align-items: center;
}
.nhan {
  font-family: var(--hep-chu); font-size: 15px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--vang);
  margin: 0 0 14px;
}
.dan { font-size: clamp(17px, 2vw, 19.5px); color: var(--muc-nhat); margin: 0 0 26px; max-width: 60ch; }

.hero-bia img {
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(14,42,69,.13), 0 18px 44px rgba(14,42,69,.2);
}
.hero-bia { margin: 0; }

.mua-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.gia { display: flex; align-items: baseline; gap: 12px; font-family: var(--hep-chu); }
.gia-nay { font-size: 40px; font-weight: 700; color: var(--navy-dam); line-height: 1; }
.gia-nay sup { font-size: .5em; top: -.55em; }
.gia-cu { font-size: 23px; color: var(--muc-nhat); text-decoration: line-through; }
.nen-dam .gia-nay { color: var(--giay); }
.nen-dam .gia-cu { color: #9FB2C4; }
/* Hộp mua là mảng giấy đặt TRONG khối nền navy, nên phải kéo màu chữ trở lại,
   nếu không giá bị chữ kem trên nền kem và biến mất hẳn. */
.nen-dam .hop-mua .gia-nay { color: var(--navy-dam); }
.nen-dam .hop-mua .gia-cu { color: var(--muc-nhat); }
.gia-to { justify-content: center; margin-bottom: 6px; }
.gia-to .gia-nay { font-size: 54px; }

.nut {
  display: inline-block; font-family: var(--viet); font-weight: 600; font-size: 16px;
  padding: 13px 26px; border-radius: 4px; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nut-chinh {
  background: var(--vang); color: #fff;
  box-shadow: 0 2px 0 #96661a, 0 8px 20px rgba(192,132,35,.3);
}
.nut-chinh:hover { background: #cf9130; color: #fff; transform: translateY(-1px); }
.nut-chinh:active { transform: translateY(1px); box-shadow: 0 1px 0 #96661a; }
.nut-phu { border-color: var(--vien); color: var(--muc); background: transparent; }
.nut-phu:hover { border-color: var(--navy-dam); color: var(--navy-dam); background: rgba(14,42,69,.04); }
.rong { width: 100%; text-align: center; font-size: 17px; padding: 15px 26px; }
.nut[disabled] { opacity: .55; cursor: progress; }

.dong-ho {
  font-family: var(--hep-chu); font-size: 15.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vang); margin: 16px 0 0;
}
.dong-ho b { font-variant-numeric: tabular-nums; }
.dong-ho-to { text-align: center; font-size: 17px; margin: 0 0 22px; }
.ghi-nho { font-size: 14.5px; color: var(--muc-nhat); margin: 14px 0 0; }

/* ── Nội dung ───────────────────────────────────────────────────────── */
.to { font-size: clamp(18px, 2.2vw, 21px); }
.phu { color: var(--muc-nhat); margin: -8px 0 26px; }
.nho { font-size: 15px; color: var(--muc-nhat); }
.giua { text-align: center; }
.nhan-manh {
  border-left: 3px solid var(--vang); padding: 4px 0 4px 18px; margin-top: 26px;
}

/* `.the` vẫn dùng ở trang chuyển khoản, giữ lại. Lưới `.the-luoi` thì bỏ cùng
   khối năm mục ngày 20/08/2026. */
.the {
  background: var(--giay); border: 1px solid var(--vien); border-top: 3px solid var(--vang);
  border-radius: 3px; padding: 20px 22px;
}
.the b {
  display: block; font-family: var(--viet); font-weight: 600; font-size: 16.5px;
  color: var(--navy-dam); margin-bottom: 8px;
}
.the p { margin: 0; font-size: 15.5px; color: var(--muc-nhat); }

.khoa { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 34px; }
.khoa li {
  break-inside: avoid; padding: 7px 0 7px 26px; position: relative;
  border-bottom: 1px solid var(--vien); font-size: 16px;
}
.khoa li::before {
  content: counter(list-item); position: absolute; left: 0; top: 8px;
  font-family: var(--hep-chu); font-weight: 700; font-size: 13px; color: var(--vang);
}
.dau-cham { padding-left: 20px; }
.dau-cham li { margin-bottom: 10px; }
.dau-cham::marker { color: var(--vang); }

/* ── Đọc thử ────────────────────────────────────────────────────────── */
.lat { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lat-khung { flex: 0 1 auto; min-width: 0; }
.lat-anh {
  position: relative; width: min(560px, 100%); aspect-ratio: 850 / 1202;
  margin-inline: auto; background: var(--giay);
  border: 1px solid var(--vien); border-radius: 2px;
  box-shadow: 0 2px 5px rgba(14,42,69,.1), 0 16px 38px rgba(14,42,69,.16);
  overflow: hidden;
}
.lat-anh img { width: 100%; height: 100%; object-fit: contain; }
.lat-anh a {
  position: absolute; display: block; border-radius: 2px;
  background: rgba(192,132,35,.16); outline: 1px solid rgba(192,132,35,.42);
  transition: background .12s ease;
}
.lat-anh a:hover { background: rgba(192,132,35,.34); }
.lat-nhan {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--hep-chu); font-size: 14.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muc-nhat);
  margin: 12px auto 0; width: min(560px, 100%);
}
.lat-nut {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--vien); background: var(--giay); color: var(--navy-dam);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lat-nut:hover:not([disabled]) { border-color: var(--navy-dam); background: #fff; }
.lat-nut[disabled] { opacity: .3; cursor: default; }
.lat-cham { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.lat-cham button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--vien);
}
.lat-cham button[aria-current="true"] { background: var(--vang); transform: scale(1.3); }

/* ── Tác giả ────────────────────────────────────────────────────────── */
.tac-gia-luoi { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 46px); align-items: start; }
.chan-dung { margin: 0; }
.chan-dung img { border-radius: 50%; }

/* ── Mua ────────────────────────────────────────────────────────────── */
.hop-mua {
  background: var(--giay); color: var(--muc); border-radius: 6px;
  padding: clamp(24px, 4vw, 38px); box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.gom { list-style: none; padding: 0; margin: 0 0 26px; }
.gom li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px solid var(--vien); font-size: 16px; }
.gom li::before {
  content: "✓"; position: absolute; left: 4px; color: var(--vang); font-weight: 700;
}
#dat-mua label {
  display: block; font-family: var(--viet); font-weight: 500; font-size: 15px;
  color: var(--navy-dam); margin-bottom: 16px;
}
#dat-mua input {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  font: 400 16.5px var(--than); color: var(--muc);
  background: #fff; border: 1.5px solid var(--vien); border-radius: 4px;
}
#dat-mua input:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(192,132,35,.16); }
#dat-mua input[aria-invalid="true"] { border-color: #B3261E; }
#dat-mua small { display: block; margin-top: 5px; font-family: var(--than); font-weight: 400; font-size: 13.5px; color: var(--muc-nhat); }
.loi { color: #B3261E; font-size: 15px; margin: 0 0 14px; }

/* ── Hỏi đáp ────────────────────────────────────────────────────────── */
details { border-bottom: 1px solid var(--vien); padding: 14px 0; }
summary {
  cursor: pointer; font-family: var(--viet); font-weight: 500; font-size: 17px;
  color: var(--navy-dam); list-style: none; position: relative; padding-right: 30px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 4px; top: -2px;
  font-size: 22px; color: var(--vang);
}
details[open] summary::after { content: "−"; }
details p { margin: 12px 0 2px; color: var(--muc-nhat); }

/* ── Chân trang ─────────────────────────────────────────────────────── */
footer { background: var(--navy-dam); color: #C3D0DC; padding: clamp(38px, 6vw, 58px) 0 26px; font-size: 15.5px; }
footer a { color: #E0B563; }
footer p { margin: 5px 0; }
.chan-luoi { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; }
.chan-ten { font-family: var(--viet); font-weight: 600; font-size: 18px; color: var(--giay); margin-bottom: 10px !important; }
.chan-zalo { display: flex; gap: 16px; align-items: center; max-width: 380px; }
.chan-zalo img { border-radius: 4px; flex: 0 0 auto; }
.chan-zalo p { font-size: 14.5px; }
.ban-quyen {
  text-align: center; font-size: 13.5px; color: #8FA2B4;
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.11);
}

/* ── Màn hình hẹp ───────────────────────────────────────────────────── */
@media (max-width: 900px) { .khoa { columns: 2; } }
@media (max-width: 820px) {
  .hero-luoi { grid-template-columns: 1fr; }
  .hero-bia { order: -1; width: 210px; }
  .tac-gia-luoi { grid-template-columns: 1fr; }
  .chan-dung { width: 150px; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .khoa { columns: 1; }
  .lat-nut { width: 40px; height: 40px; font-size: 22px; }
  .lat { gap: 6px; }
  .mua-nhanh { gap: 12px; }
  .nut { width: 100%; text-align: center; }
  .gia { width: 100%; }
}

/* ══ Trang chuyển khoản ══════════════════════════════════════════════════
   Trang này khách mở ra lúc đang cầm điện thoại quét mã, nên chỉ có một cột
   và chữ to hơn trang bán hàng. Màu và bộ chữ dùng lại nguyên của trang chính
   để khách không thấy mình vừa bị đá sang một trang web khác. */

.trang-tra-tien { background: var(--giay); }
.khung-hep { max-width: 720px; margin-inline: auto; padding: 24px 20px 64px; }
.trang-tra-tien h1 { font-family: var(--hep-chu); font-size: clamp(26px, 6vw, 38px);
  color: var(--navy-dam); margin: 0 0 12px; }
.trang-tra-tien h2 { font-family: var(--hep-chu); font-size: 22px; color: var(--vang);
  margin: 28px 0 6px; }
.trang-tra-tien .the { background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 24px 22px; margin-top: 16px; }
.trang-tra-tien hr { border: 0; border-top: 1px solid var(--vien); margin: 28px 0 8px; }

.tra-luoi { display: grid; gap: 22px; align-items: start; margin: 18px 0 10px; }
@media (min-width: 620px) { .tra-luoi { grid-template-columns: 320px 1fr; } }
.tra-qr img { width: 100%; height: auto; border: 1px solid var(--vien); border-radius: 10px;
  background: #fff; }

.tra-so { margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 16px; align-items: baseline; }
.tra-so dt { font-family: var(--viet); font-size: 13px; color: var(--muc-nhat); }
.tra-so dd { margin: 0; font-weight: 600; word-break: break-word; }
.tra-so .to { font-family: var(--hep-chu); font-size: 30px; color: var(--vang); }

.chep { font: inherit; font-size: 12px; padding: 2px 8px; margin-left: 4px; cursor: pointer;
  border: 1px solid var(--vien); border-radius: 6px; background: var(--giay);
  color: var(--muc-nhat); }
.chep:hover { border-color: var(--vang); color: var(--vang); }

.cho-bao { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 12px 14px; border-radius: 10px; background: var(--giay-dam);
  font-size: 15px; color: var(--muc); }
.quay { flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--vien); border-top-color: var(--vang);
  animation: quay 0.9s linear infinite; }
@keyframes quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .quay { animation: none; } }