/* ============================================================
   SALE — chuỗi trang bán hàng của HuongUp
   purchase · add-offer · create-account · login · subscriptions

   Khung xương sao lại từ /purchase và /add-offer của DanceFitme
   (nguồn: wiki/nguon/phieu-dancefitme-32-man.md mục 3–4)
   và trang Subscriptions (df-app-tai-khoan-goi.md mục 2).

   File này là file CSS DUY NHẤT do chuỗi bán hàng tạo mới.
   Nạp SAU tokens.css + base.css.

   LUẬT MÀU (theo tokens.css): lime là NỀN SÁNG, chữ đè lên
   luôn là --ink. Không một mã màu cứng nào trong file này —
   mọi màu đều lấy từ biến của tokens.css.
   ============================================================ */

/* ---------------- Khung trang ---------------- */

.sale-body { background: var(--white); color: var(--ink-2); }

.sale-wrap {
  width: 100%;
  max-width: 560px;          /* mobile-first, giống khung điện thoại của app */
  margin-inline: auto;
  padding: var(--s-6) var(--s-5) var(--s-16);
}

.sale-head {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5) var(--s-5) 0;
}

.sale-sec { margin-top: var(--s-12); }
.sale-sec > h2 { font-size: var(--fs-h2); text-align: center; margin-bottom: var(--s-6); }

.sale-lead {
  text-align: center; color: var(--ink-3);
  font-size: var(--fs-sm); max-width: 34em; margin: 0 auto var(--s-6);
}

/* ---------------- Thanh ưu đãi chạy ngang + đồng hồ ---------------- */

.promo {
  position: sticky; top: 0; z-index: 40;
  background: var(--lime);              /* nền lime -> chữ --ink */
  color: var(--ink);
  border-bottom: 2px solid var(--lime-deep);
}
.promo__marquee {
  overflow: hidden; white-space: nowrap;
  padding: var(--s-2) 0 0;
  font-size: var(--fs-xs); font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}
.promo__track {
  display: inline-block; padding-left: 100%;
  animation: promo-run 18s linear infinite;
}
.promo__track span { padding-inline: var(--s-5); }
@keyframes promo-run { to { transform: translateX(-100%); } }

.promo__row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) var(--s-4) var(--s-3);
}
.promo__label { font-size: var(--fs-sm); font-weight: 800; }
.promo__off {
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-pill); padding: 2px var(--s-3);
  font-size: var(--fs-xs); font-weight: 900;
}

/* Đồng hồ đếm ngược — khối số trên nền than, chữ lime */
.clock { display: flex; align-items: center; gap: var(--s-1); }
.clock__cell {
  min-width: 34px; padding: 2px var(--s-2);
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body); font-weight: 900; text-align: center;
}
.clock__sep { color: var(--ink); font-weight: 900; }
.clock.is-done .clock__cell { background: var(--danger); color: var(--white); }

/* ---------------- Khối tóm tắt kế hoạch (Now vs Your Goal) ---------------- */

.plan-sum {
  background: var(--cream); border-radius: var(--r-lg);
  padding: var(--s-6); margin-top: var(--s-8);
}
.plan-sum > h2 { font-size: var(--fs-h3); text-align: center; margin-bottom: var(--s-5); }

.plan-sum__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: stretch; }
.plan-sum__col {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4); text-align: center;
}
.plan-sum__col--goal { background: var(--lime-wash); border-color: var(--lime-deep); }
.plan-sum__cap {
  display: block; font-size: var(--fs-xs); font-weight: 900; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-2);
}
.plan-sum__col--goal .plan-sum__cap { color: var(--ink); }
.plan-sum__big { font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.plan-sum__big small { font-size: var(--fs-body); font-weight: 800; }
.plan-sum__arrow { display: grid; place-items: center; font-size: 22px; color: var(--ink-4); font-weight: 900; }

.plan-sum__rows { margin-top: var(--s-5); }
.plan-sum__row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.plan-sum__row:last-child { border-bottom: 0; }
.plan-sum__row span { color: var(--ink-3); }
.plan-sum__row b { color: var(--ink); text-align: right; }

/* ---------------- Ba gói giá ---------------- */

.plans { display: grid; gap: var(--s-3); margin-top: var(--s-8); }

.plan {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  /* Phải chừa chỗ bên phải cho cột "mỗi ngày" (định vị tuyệt đối),
     nếu không thì khi có giá VNĐ thật hai cụm số sẽ đè lên nhau. */
  padding: var(--s-5) 108px var(--s-5) calc(var(--s-5) + 34px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.plan:hover { border-color: var(--lime-deep); }

/* Gói ĐANG CHỌN: viền lime đậm dày + nền lime nhạt + quầng sáng */
.plan.is-on {
  border-color: var(--lime-deep);
  background: var(--lime-wash);
  box-shadow: var(--sh-lime);
}

/* Nút tròn chọn gói */
.plan__dot {
  position: absolute; left: var(--s-5); top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 2px solid var(--ink-4); background: var(--white);
}
.plan.is-on .plan__dot { border-color: var(--ink); background: var(--ink); }
.plan.is-on .plan__dot::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: var(--r-pill); background: var(--lime);
}

.plan__name { display: block; font-size: var(--fs-h3); font-weight: 900; color: var(--ink); }
.plan__old {
  display: inline-block; margin-top: var(--s-1);
  font-size: var(--fs-sm); color: var(--ink-3); text-decoration: line-through;
}
.plan__price { margin-top: var(--s-1); font-size: 24px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.plan__price small { font-size: var(--fs-sm); font-weight: 800; }

/* Cột "quy ra mỗi ngày" nằm bên phải */
.plan__perday {
  position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%);
  text-align: right; width: 88px;
}
.plan__perday b { display: block; font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.plan__perday span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.plan__perday del { display: block; font-size: var(--fs-xs); color: var(--ink-4); }

/* Nhãn 🎉 PHỔ BIẾN NHẤT nằm vắt trên viền thẻ */
.plan__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-pill); padding: 3px var(--s-4);
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .06em;
  white-space: nowrap;
}
.plan--tagged { margin-top: var(--s-4); }

/* ---------------- Huy hiệu bảo đảm hoàn tiền ---------------- */

.guarantee {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--lime-soft); border: 2px solid var(--lime-deep);
  border-radius: var(--r-lg); padding: var(--s-5); margin-top: var(--s-6);
}
.guarantee__seal {
  flex: 0 0 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--white); border: 2px dashed var(--lime-deep);
  display: grid; place-items: center; font-size: 24px; color: var(--ink);
}
.guarantee b { display: block; color: var(--ink); font-size: var(--fs-body); }
.guarantee p { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------------- Nút mua + chữ nhỏ tự động gia hạn ---------------- */

.buybox { margin-top: var(--s-6); }
.buybox .btn { width: 100%; }

.fineprint {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3);
  text-align: center;
}
.fineprint a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Bạn sẽ nhận được gì ---------------- */

.gets { display: grid; gap: var(--s-3); }
.get {
  display: flex; gap: var(--s-4); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4);
}
.get__ico {
  flex: 0 0 40px; height: 40px; border-radius: var(--r-md);
  background: var(--lime-wash); display: grid; place-items: center; font-size: 18px;
}
.get b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.get p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------------- Testimonial ---------------- */

.tst { display: grid; gap: var(--s-3); }
.tstcard { background: var(--cream); border-radius: var(--r-lg); padding: var(--s-5); }
.tstcard__stars { color: var(--warn); font-size: var(--fs-sm); letter-spacing: .1em; }
.tstcard__quote { margin: var(--s-2) 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.65; }
.tstcard__who { display: flex; align-items: center; gap: var(--s-3); }
.tstcard__ava {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: var(--fs-sm);
}
.tstcard__who b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.tstcard__who span { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------------- FAQ ---------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: center;
  padding: var(--s-4) 0;
  font-weight: 800; color: var(--ink); font-size: var(--fs-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--ink-4); font-weight: 900; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------------- Thanh 3 bước (add-offer / create-account) ---------------- */

.steps {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-4);
  background: var(--cream); border-bottom: 1px solid var(--line);
}
.step { display: flex; align-items: center; gap: var(--s-2); }
.step__n {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--line); color: var(--ink-3);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 900;
}
.step__t { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-4); white-space: nowrap; }
.step.is-on .step__n { background: var(--lime); color: var(--ink); }
.step.is-on .step__t { color: var(--ink); }
.step.is-done .step__n { background: var(--ink); color: var(--lime); }
.step.is-done .step__t { color: var(--ink-2); }
.step__line { width: 18px; height: 2px; background: var(--line); }

@media (max-width: 400px) {
  .steps { gap: var(--s-1); }
  .step__t { font-size: 10px; }
  .step__line { width: 10px; }
}

/* ---------------- Thẻ ưu đãi thêm (add-offer) ---------------- */

.offers { display: grid; gap: var(--s-4); margin-top: var(--s-6); }

.offer {
  position: relative; display: block; width: 100%; text-align: left;
  border: 2px solid var(--line); border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 34px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.offer:hover { border-color: var(--lime-deep); }
.offer.is-on { border-color: var(--lime-deep); background: var(--lime-wash); box-shadow: var(--sh-lime); }
.offer__dot {
  position: absolute; left: var(--s-5); top: var(--s-6);
  width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 2px solid var(--ink-4); background: var(--white);
}
.offer.is-on .offer__dot { border-color: var(--ink); background: var(--ink); }
.offer.is-on .offer__dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: var(--r-pill); background: var(--lime);
}
/* Lựa chọn combo ở GIỮA — to hơn, viền dày hơn cho trông hời nhất */
.offer--hero { padding-block: var(--s-6); border-width: 3px; border-color: var(--lime-deep); }
.offer__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-pill); padding: 3px var(--s-4);
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .06em; white-space: nowrap;
}
.offer__name { display: block; font-size: var(--fs-body); font-weight: 900; color: var(--ink); line-height: 1.3; }
.offer--hero .offer__name { font-size: var(--fs-h3); }
.offer__desc { margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.offer__prices { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.offer__old { font-size: var(--fs-sm); color: var(--ink-3); text-decoration: line-through; }
.offer__new { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.offer__new small { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-3); }
.offer__off {
  background: var(--lime); color: var(--ink); border-radius: var(--r-pill);
  padding: 1px var(--s-3); font-size: var(--fs-xs); font-weight: 900;
}

.skiplink {
  display: block; margin: var(--s-5) auto 0; text-align: center;
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink-4);
  text-decoration: underline; text-underline-offset: 3px;
}
.skiplink:hover { color: var(--ink); }

/* ---------------- Dải "Thanh toán thành công!" ---------------- */

.paidbar {
  background: var(--ok); color: var(--white);
  text-align: center; padding: var(--s-4);
  font-weight: 900; font-size: var(--fs-body);
}
.paidbar span { font-size: 18px; }

.shout {
  text-align: center; color: var(--danger);
  font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.01em;
  margin: var(--s-8) 0 var(--s-3);
}

/* ---------------- Biểu mẫu ---------------- */

.field { margin-bottom: var(--s-4); }
.field > label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink);
}
.input {
  width: 100%; height: var(--h-input);
  padding-inline: var(--s-4);
  font-family: var(--font); font-size: var(--fs-body); color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--lime-deep); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.field__err { margin: var(--s-2) 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); }
.field__err[hidden] { display: none; }

.form-note {
  margin: var(--s-2) 0 var(--s-6);
  font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 380px) { .row2 { grid-template-columns: 1fr; } }

/* ---------------- Đăng nhập: hai cột ---------------- */

.login {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.login__art { position: relative; }
.login__art .ph { border-radius: 0; height: 100%; min-height: 100%; }
.login__side {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-10) var(--s-6);
}
.login__box { width: 100%; max-width: 380px; }
.login__box h1 { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.login__box .sale-lead { text-align: left; margin-inline: 0; }

.login__alt {
  display: block; width: 100%; text-align: center;
  margin-top: var(--s-4); padding: var(--s-3);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r-pill);
}
.login__alt:hover { border-color: var(--lime-deep); background: var(--lime-wash); }

.login__foot { margin-top: var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.login__foot a { font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Khổ điện thoại: bỏ cột ảnh, chỉ còn form */
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; min-height: 0; }
  .login__art { display: none; }
  .login__side { padding: var(--s-8) var(--s-5) var(--s-12); align-items: flex-start; }
}

/* ---------------- Trang Gói của tôi ---------------- */

.acct {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--cream); border-radius: var(--r-lg); padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.acct__ava {
  flex: 0 0 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: 18px;
}
.acct b { display: block; color: var(--ink); font-size: var(--fs-body); }
.acct span { font-size: var(--fs-sm); color: var(--ink-3); word-break: break-all; }

.subs { display: grid; gap: var(--s-4); }
.sub {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5);
}
.sub__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sub__state {
  background: var(--ok); color: var(--white);
  border-radius: var(--r-pill); padding: 2px var(--s-3);
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .04em;
}
.sub__amount { font-size: var(--fs-h3); font-weight: 900; color: var(--ink); }
.sub__name { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-body); font-weight: 800; color: var(--ink); line-height: 1.35; }
.sub__term { font-size: var(--fs-sm); color: var(--ink-3); }
.sub__renew {
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.sub__cancel {
  display: inline-block; margin-top: var(--s-3);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}

.support {
  margin-top: var(--s-10); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-3);
}
.support a { font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.empty {
  text-align: center; color: var(--ink-4); font-size: var(--fs-sm);
  padding: var(--s-10) var(--s-5);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* ---------------- Ghi chú "chưa chốt giá" ---------------- */
/* Hiện ngay trên trang để không ai tưởng chỗ ___ là lỗi hiển thị. */

.todo-price {
  margin-top: var(--s-6);
  border: 2px dashed var(--warn); border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--warn);
  background: var(--white);
}
.todo-price b { color: var(--warn); }

/* Ảnh cột trái trang đăng nhập */
.login__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Ảnh minh hoạ Hiện tại / Mục tiêu trên trang giá */
.plan-sum__img { width: 100%; aspect-ratio: 930 / 1536; object-fit: cover;
                 border-radius: var(--r-lg); display: block; margin: var(--s-2) 0; }

/* ============================================================
   TRANG PHÁP LÝ — dieu-khoan · rieng-tu · hoan-tien
   Ba trang này là VĂN BẢN THUẦN, không có ảnh, không có nút mua.
   Ưu tiên: dễ đọc trên màn 390px, chữ đủ to, xuống dòng thoáng.
   Vẫn theo LUẬT MÀU của tokens.css: nền lime -> chữ --ink.
   ============================================================ */

.legal { color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); }

.legal__meta {
  margin: calc(var(--s-2) * -1) 0 var(--s-5);
  font-size: var(--fs-sm); color: var(--ink-3);
}

/* Khối cảnh báo BẢN NHÁP ở đầu mỗi trang.
   Nền lime nhạt + viền lime đậm + chữ --ink: đập vào mắt nhưng vẫn đạt
   tương phản 16:1 (xem bảng cuối tokens.css). */
.legal-draft {
  background: var(--lime-wash);
  color: var(--ink);
  border: 2px solid var(--lime-deep);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-8);
  font-size: var(--fs-sm); line-height: 1.6;
}
.legal-draft b { color: var(--ink); }
.legal-draft p { margin: 0 0 var(--s-3); }
.legal-draft p:last-child { margin-bottom: 0; }

/* Khối miễn trừ sức khoẻ — cùng dạng nhưng tông cảnh báo */
.legal-warn {
  border: 2px solid var(--warn);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  background: var(--white);
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6;
}
.legal-warn b { color: var(--warn); }

/* Khối nhấn trung tính — dùng cho "không có gì để huỷ", tóm tắt gói */
.legal-note {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2);
}
.legal-note b { color: var(--ink); }

/* Mỗi điều khoản là một section đánh số */
.legal-sec { margin-top: var(--s-8); }
.legal-sec > h2 {
  font-size: var(--fs-h3);
  text-align: left;
  margin: 0 0 var(--s-3);
  color: var(--ink);
  line-height: 1.35;
}
.legal-sec > h3 {
  font-size: var(--fs-body); font-weight: 800; color: var(--ink);
  margin: var(--s-5) 0 var(--s-2);
}
.legal-sec p { margin: 0 0 var(--s-3); }
.legal-sec p:last-child { margin-bottom: 0; }

/* Danh sách có dấu chấm — base.css bỏ list-style nên phải bật lại */
.legal-list { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--s-3); }
.legal-list li { margin-bottom: var(--s-2); }
.legal-list li:last-child { margin-bottom: 0; }
.legal-list--num { list-style: decimal; }

/* Chỗ trống chờ thông tin thật: [TÊN ĐƠN VỊ], [EMAIL HỖ TRỢ]…
   Cố ý cho ngắt dòng được để không tràn ngang ở khổ 390px. */
.fill {
  background: var(--lime-wash);
  color: var(--ink);
  border-bottom: 2px dashed var(--lime-deep);
  border-radius: var(--r-sm);
  padding: 1px var(--s-2);
  font-weight: 800; font-size: .95em;
  overflow-wrap: anywhere;
}

/* Danh sách "sếp cần chốt" ở cuối trang */
.legal-todo {
  margin-top: var(--s-10); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2);
}
.legal-todo h2 { font-size: var(--fs-body); color: var(--warn); margin: 0 0 var(--s-3); text-align: left; }

/* Điều hướng qua lại giữa ba trang pháp lý */
.legal-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.legal-nav a {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.legal-nav a:hover { background: var(--lime-wash); border-color: var(--lime-deep); }
.legal-nav a[aria-current="page"] { background: var(--lime); border-color: var(--lime-deep); color: var(--ink); }