/* 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;
}
/* Dòng tên tác giả ở đầu trang là đường về trang chủ. Giữ nguyên dáng chữ, chỉ
   hiện gạch chân khi rê chuột — nó là chỗ bấm được chứ không phải cái nút, đóng
   khung nó lên là cướp mất sự chú ý của nút "Mua ebook ngay" ngay bên dưới. */
.nhan a { color: inherit; text-decoration: none; }
.nhan a:hover { text-decoration: underline; text-underline-offset: 4px; }
.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; }

/* Ba quy tắc `.the` cũ đã bỏ ngày 20/08/2026, cùng lúc xoá khối năm mục trên
   trang bán hàng. Chúng dựng cái thẻ có viền vàng ở đầu, và từ khi khối ấy biến
   mất thì `.the` chỉ còn trang chuyển khoản dùng — mà ba quy tắc kia vẫn âm thầm
   đè lên nó: `.the p { margin: 0 }` làm mọi đoạn dính sát nhau, `.the b
   { display: block }` đẩy mã đơn xuống một dòng riêng, `.the p { font-size:
   15.5px }` thắng cả `.dan` vì cao điểm hơn một bậc.
   Nay thẻ của trang chuyển khoản tự định nghĩa ở mục dưới cùng tệp này. */

.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 li:last-child { margin-bottom: 0; }
.dau-cham::marker { color: var(--vang); }

/* Đáy khối bằng đúng đỉnh khối.
   Mỗi khối `.khoi` chừa lề trên dưới bằng nhau, nhưng phần tử cuối bên trong
   còn mang lề dưới của riêng nó, nên đáy luôn dày hơn đỉnh vài chục pixel. Trước
   thì không ai nhìn ra; xoá bớt đoạn văn cuối khối ngày 20/08/2026 là lộ ngay.
   Cắt lề dưới của phần tử cuối để hai đầu bằng nhau, ở mọi khối. */
.khoi .khung > :last-child { margin-bottom: 0; }

/* ── Đọc thử ────────────────────────────────────────────────────────── */
.lat { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* `perspective` phải đặt ở KHUNG chứ không ở tờ giấy: nó là điểm nhìn của người
   đọc, tờ giấy chỉ là vật được nhìn. Và tờ giấy đang lật nằm ở đây chứ không nằm
   trong `.lat-to`, vì tờ giấy có `overflow: hidden` — để bên trong thì trang vừa
   quét ra khỏi mép là bị cắt mất, thành ra biến mất chứ không phải lật. */
/* Bề ngang do KHUNG giữ, để dòng nhãn bên dưới luôn rộng đúng bằng trang sách.
   Một tờ thì hẹp, hai tờ thì gấp đôi — `:has()` cho khung tự biết bên trong đang
   bày mấy tờ, khỏi phải nhớ gắn thêm lớp ở hai chỗ rồi quên một chỗ. */
.lat-khung {
  flex: 0 1 auto; min-width: 0; position: relative; perspective: 1700px;
  --to: min(560px, 100%); width: var(--to);
}
.lat-khung:has(.lat-doi-doi) { --to: min(1040px, 100%); }

/* Tờ giấy đang lật. Nền màu giấy chính là MẶT SAU của trang: ảnh đặt ở mặt trước
   và bị ẩn khi tờ quay quá 90 độ, lúc ấy lộ ra nền giấy trơn — đúng như lật một
   trang sách thật, mặt sau không có chữ của mặt trước. */
.lat-giay {
  position: absolute; z-index: 4; pointer-events: none;
  background: var(--giay); border: 1px solid var(--vien); border-radius: 2px;
  overflow: hidden; will-change: transform;
}
.lat-giay img {
  width: 100%; height: 100%; object-fit: contain;
  backface-visibility: hidden;
}
/* Khung chứa một hoặc hai tờ. Hai tờ thì dán sát nhau, không có khe — gáy sách
   nằm ngay giữa, chừa khe ra là thành hai tờ giấy rời chứ không phải sách mở. */
.lat-doi {
  display: flex; justify-content: center; align-items: stretch; gap: 0;
  width: 100%;
}

.lat-to {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0;
  aspect-ratio: 850 / 1202; 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; cursor: zoom-in;
}
/* Gáy: hai tờ cạnh nhau thì bo góc phía gáy về vuông và làm mờ chỗ giáp nhau,
   cho ra cái bóng lõm của quyển sách đang mở. */
.lat-doi-doi .lat-to:first-child {
  border-right: none; border-radius: 2px 0 0 2px;
  box-shadow: inset -14px 0 22px -14px rgba(14,42,69,.34),
              0 2px 5px rgba(14,42,69,.1), 0 16px 38px rgba(14,42,69,.16);
}
.lat-doi-doi .lat-to:last-child {
  border-left: none; border-radius: 0 2px 2px 0;
  box-shadow: inset 14px 0 22px -14px rgba(14,42,69,.34),
              0 2px 5px rgba(14,42,69,.1), 0 16px 38px rgba(14,42,69,.16);
}
/* Bốn lớp của một tờ. Thứ tự chồng quyết định: vùng bấm PubMed phải nằm trên
   cùng, mẩu giấy gập phải không nhận chuột, không thì rê tới mép là mất luôn
   khả năng bấm vào tên bài báo. */
.lat-day, .lat-mat { position: absolute; inset: 0; }
.lat-day { z-index: 0; background: var(--giay); }
.lat-mat { z-index: 1; }
.lat-day img, .lat-mat img { width: 100%; height: 100%; object-fit: contain; }
/* Mẩu giấy gập. Bóng đổ XUỐNG DƯỚI PHẢI, tức là về phía trang vừa lộ ra — mẩu
   giấy đang nhấc khỏi mặt bàn nên bóng của nó phải rơi vào chỗ trũng ấy. Đổ
   ngược lên trên là thành cái vệt bẩn trên chính trang đang đọc. */
.lat-gap {
  position: absolute; z-index: 2; display: none; pointer-events: none;
  filter: drop-shadow(2px 2px 7px rgba(14,42,69,.42));
}
/* Nếp gấp: một vạch mảnh sẫm hơn chạy dọc mép gấp, cho mắt bắt được đường gãy.
   Không có nó thì mẩu gập trông như miếng giấy dán chứ không như giấy gập. */
.lat-to { --nep: rgba(14,42,69,.22); }
.lat-to a {
  position: absolute; z-index: 3; display: block; border-radius: 2px; cursor: pointer;
  background: rgba(192,132,35,.16); outline: 1px solid rgba(192,132,35,.42);
  transition: background .12s ease;
}
.lat-to a:hover { background: rgba(192,132,35,.34); }

/* Tấm bìa kết. Cố ý KHÔNG giống một trang sách — nền đậm, không viền giấy — để
   không ai tưởng trong sách có trang quảng cáo. */
.lat-ket {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  aspect-ratio: 850 / 1202; max-height: 70vh;
  background: var(--navy-dam); color: var(--giay);
  border-radius: 6px; padding: 32px 24px; text-align: center;
}
.lat-doi-doi .lat-ket { aspect-ratio: 1700 / 1202; }
.lat-ket-nhan {
  font-family: var(--hep-chu); font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .04em; margin: 0; color: #fff;
}
.lat-ket-chu { margin: 0; font-size: 16px; color: rgba(247,241,228,.82); max-width: 42ch; }

.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: 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); }

/* ── Khung lớn ──────────────────────────────────────────────────────────
   Cả bộ đọc được NHẤC vào đây chứ không dựng bản thứ hai, nên trong khung lớn
   vẫn đang là trang khách đang xem dở, đóng lại cũng vẫn đúng trang ấy. */
.lat-hop {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: var(--giay);
}
.lat-hop::backdrop { background: rgba(14,42,69,.72); }
.lat-noi {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.4vw, 34px);
}
/* Trong khung lớn thì trang cao hết cỡ màn hình chứ không bám bề ngang nữa —
   đọc sách là đọc theo chiều cao. */
.lat-hop .lat-khung { --to: auto; width: auto; }
.lat-hop .lat-to, .lat-hop .lat-ket { height: min(84dvh, 96vw * 1202 / 1700); width: auto; }
.lat-hop .lat-to { aspect-ratio: 850 / 1202; }
.lat-hop .lat-doi { width: auto; }
.lat-hop .lat-nhan { width: auto; justify-content: center; gap: 22px; }
.lat-hop .lat-to { cursor: zoom-out; }
.lat-dong {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--vien); background: #fff; color: var(--navy-dam);
  font-size: 18px; line-height: 1;
}
.lat-dong:hover { border-color: var(--navy-dam); }

/* ── 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 .the p { margin: 0 0 12px; }
.trang-tra-tien .the p:last-child { margin-bottom: 0; }
/* Nút nằm trong thẻ cần thở ra hai phía, không dính vào đoạn văn trên dưới. */
.trang-tra-tien .the .nut { margin: 6px 0 10px; }
.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; }

/* Câu trấn an, đặt sát ngay dưới mã QR chứ không đặt trên đầu trang.
   Nỗi sợ của người sắp chuyển tiền sinh ra đúng lúc họ nhìn thấy dòng nội dung
   chuyển khoản: "có phải tự gõ cái mã kia không, gõ sai thì mất tiền à?". Câu
   trả lời phải nằm ngay chỗ ấy mới đỡ được, đặt xa là đọc xong lại quên. */
.tra-ok {
  display: flex; gap: 8px; margin: 10px 0 0;
  font-family: var(--viet); font-size: 13.5px; line-height: 1.45; color: #2E6B4A;
}
.tra-ok::before { content: "✓"; font-weight: 700; flex: none; }

/* Ngân hàng và chủ tài khoản xuống dòng dưới số tài khoản: số mới là thứ khách
   cần đối chiếu, hai cái kia chỉ để yên tâm là chuyển đúng người. */
.tra-phu { display: block; font-weight: 400; font-size: 13px; color: var(--muc-nhat); }

/* Lời dặn giữ nguyên nội dung chuyển khoản. Màu vàng đất chứ không đỏ: đây là
   nhắc nhở, không phải báo lỗi — người đang chuẩn bị chuyển tiền mà thấy chữ đỏ
   thì tưởng mình vừa làm sai gì. */
.tra-canh {
  display: block; margin-top: 4px; font-weight: 400;
  font-family: var(--viet); font-size: 12.5px; line-height: 1.45; color: #8a5f18;
}

/* Ba bước, đặt dưới cùng và cố ý nhạt: người quét được mã thì không cần đọc,
   người lúng túng mới tìm tới nó. */
.tra-buoc {
  margin: 14px 0 0; font-family: var(--viet); font-size: 13px; line-height: 1.55;
  color: var(--muc-nhat);
}

/* Mã đơn là thứ khách đọc cho tác giả nghe khi cần hỏi, không phải thứ họ dùng
   để chuyển tiền — nội dung chuyển khoản ở trên mới là thứ đó. Nên tách hẳn ra
   dưới cùng, kẻ một vạch, để không ai nhầm hai cái với nhau. */
.tra-ma {
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--vien);
  font-family: var(--viet); font-size: 13px; color: var(--muc-nhat);
}
.tra-ma b { font-family: var(--hep-chu); font-size: 16px; letter-spacing: 0.04em;
  color: var(--muc); margin-left: 4px; }

.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); }

/* Mã QR Zalo hỗ trợ. Nhỏ thôi — nó là lối thoát hiểm, không phải thứ mời gọi. */
.qr-zalo { margin: 4px 0 16px; }
.qr-zalo img { width: 132px; height: auto; display: block;
  border: 1px solid var(--vien); border-radius: 8px; background: #fff; padding: 6px; }
.qr-zalo figcaption { margin-top: 6px; font-family: var(--viet); font-size: 12.5px;
  color: var(--muc-nhat); }

/* Địa chỉ tải hiện ra khi không chép tự động được. Cho ngắt dòng ở bất cứ đâu
   vì token là một chuỗi 32 ký tự liền, không ngắt là nó tràn ra khỏi thẻ. */
.link-hien { word-break: break-all; font-size: 13px; color: var(--muc-nhat);
  background: var(--giay); border: 1px solid var(--vien); border-radius: 6px;
  padding: 8px 10px; }

.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); }
/* Đồng hồ đẩy sang mép phải: nó là con số phụ, không phải thứ đọc trước. */
.dem { margin-left: auto; flex: none; font-family: var(--hep-chu); font-size: 17px;
  letter-spacing: 0.03em; color: var(--vang); font-variant-numeric: tabular-nums; }
.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; } }