/* ============================================================================
   ts-shop-trangtinh.css — CSS RIÊNG CHO NHÓM "TÀI KHOẢN + TRANG TĨNH"
   File này CHỈ do nhóm Tài khoản/Trang tĩnh sửa (Views/TaiKhoan/DangNhap.cshtml,
   DangKy.cshtml, Views/Home/GioiThieu.cshtml, Views/Home/Privacy.cshtml,
   Views/Shared/Error.cshtml).

   Cần nhất: thẻ <details>/<summary> thay cho accordion Bootstrap của
   Home/GioiThieu.cshtml — style cho <details> ghi ở đây.
   Mọi lớp thêm mới đặt tiền tố (gợi ý: `tk-`) để không đụng trang khác.

   Nạp SAU ts-shop.css trong _LayoutShop.cshtml → rule ở đây đè được ts-shop.css.
   KHÔNG sửa ts-shop.css. Chỉ dùng token đã khai báo trong ts-shop.css
   (--paper, --paper-2, --white, --ink, --ink-2, --ink-3, --line, --blue, --sky,
    --glow, --r-box, --r-lg, --t-h2, --t-h3, --t-lead, --section-y).
   ========================================================================== */

/* ---------- 1) TIÊU ĐỀ CẤP 1 CỦA TRANG CON (Giới thiệu / Chính sách / Lỗi) ----------
   ts-shop.css chỉ định cỡ cho `.section-head h2` — trang con cần <h1> nên bổ sung. */
.tk-h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); }

/* Neo (anchor) của trang Chính sách: bù chiều cao .topbar sticky (64px) để tiêu đề
   không bị thanh menu che khi bấm mục lục hoặc link từ footer (?fragment=...). */
.tk-anchor { scroll-margin-top: 5.5rem; }

/* ---------- 2) THẺ NỘI DUNG (giá trị cốt lõi — Giới thiệu) ---------- */
.tk-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.tk-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: grid;
  gap: .6rem;
  align-content: start;
}
.tk-num { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 800; color: var(--blue); line-height: 1; }
.tk-card h3 { font-size: var(--t-h3); margin: 0; }
.tk-card > p { margin: 0; color: var(--ink-3); }

/* ---------- 3) DANH SÁCH GẠCH ĐẦU DÒNG (nội dung 5 mục chính sách) ----------
   ts-shop.css đặt `ul { list-style: none }` nên phải tự vẽ dấu đầu dòng. */
.tk-list { display: grid; gap: .65rem; }
.tk-list li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.tk-list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--blue);
}

/* ---------- 4) MỤC LỤC NEO (đầu trang Chính sách) ---------- */
.tk-toc {
  margin-top: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  display: grid;
  gap: .9rem;
}
.tk-toc-title {
  margin: 0; font-size: .82rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.tk-toc-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.tk-toc-list a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: .92rem; font-weight: 600;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.tk-toc-list a:hover { color: var(--blue); border-color: var(--blue); background: rgba(11, 92, 171, .06); transform: translateY(-1px); }
.tk-toc-num { color: var(--blue); font-weight: 800; }
.section-dark .tk-toc-list a { background: var(--night-2); color: var(--fg); }

/* ---------- 5) FAQ — <details>/<summary> GỐC HTML (thay accordion Bootstrap) ----------
   Layout shop KHÔNG nạp Bootstrap nên accordion cũ bấm vào là chết.
   <details> chạy sẵn bằng trình duyệt, KHÔNG cần JS. */
.tk-faq { display: grid; gap: .75rem; }
.tk-faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tk-faq summary {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.25rem;
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: color .2s ease, background .2s ease;
}
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-weight: 800; font-size: .95rem; line-height: 1;
  display: grid; place-items: center;
}
.tk-faq details[open] summary::before { content: "–"; }
.tk-faq details[open] summary { border-bottom: 1px solid var(--line); }
.tk-faq summary:hover { color: var(--blue); background: rgba(11, 92, 171, .04); }
.tk-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tk-faq-body { padding: 1rem 1.25rem 1.25rem; color: var(--ink-2); }
.tk-faq-body a { font-weight: 700; }

/* ---------- 6) DẢI SỐ LIỆU 4 Ô (Giới thiệu) ----------
   `.specstrip` có sẵn trong ts-shop.css chỉ chia 3 cột → thêm lớp sửa số cột.
   Dùng kèm section.specstrip-sec[data-bg="dark"] để có màu chữ sáng. */
.tk-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .tk-stats { grid-template-columns: repeat(2, 1fr); }
  .tk-stats .specstrip-item:nth-child(odd) { border-left: 0; }
}
@media (max-width: 520px) {
  .tk-stats { grid-template-columns: 1fr; }
  .tk-stats .specstrip-item + .specstrip-item { border-left: 0; }
}

/* ---------- 7) FORM TÀI KHOẢN (Đăng nhập / Đăng ký) ---------- */
.tk-auth { padding-block: var(--section-y); }
.tk-auth-khung { display: grid; justify-items: center; }
.tk-auth-card {
  width: min(32rem, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  display: grid;
  gap: 1rem;
}
.tk-auth-card .eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.tk-auth-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0; }
.tk-auth-sub { margin: 0; color: var(--ink-3); font-size: .96rem; }
.tk-form { display: grid; gap: 1rem; }

/* Thông báo lỗi validate — KHÔNG dùng `.field-err` của ts-shop.css vì rule
   `.field:not(.is-invalid) .field-err { display: none }` chỉ dành cho form tư vấn
   chạy JS; form này để máy chủ + jquery.validate tự hiện/ẩn nên phải luôn hiển thị. */
.tk-err { display: block; font-size: .85rem; color: #b00020; }
.tk-err:empty { display: none; }
.tk-form .field input.input-validation-error { border-color: #d0021b; box-shadow: 0 0 0 3px rgba(208, 2, 27, .14); }

/* Tóm tắt lỗi (asp-validation-summary="ModelOnly").
   Máy chủ + jquery.validate.unobtrusive gắn class validation-summary-valid /
   validation-summary-errors → ẩn khi không có lỗi, hiện khi có lỗi. */
.tk-alert { display: none; font-size: .95rem; }
.tk-alert.validation-summary-errors {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid #d0021b;
  border-radius: var(--r-box);
  background: rgba(208, 2, 27, .07);
  color: #8a0013;
  font-weight: 600;
}
.tk-alert.validation-summary-errors ul { display: grid; gap: .25rem; }

.tk-auth-alt { margin: 0; text-align: center; color: var(--ink-3); font-size: .95rem; }
.tk-auth-alt a { font-weight: 700; }

/* Nhóm nút hành động (trang Lỗi, khối CTA cuối trang con) */
.tk-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.section-head-c .tk-actions { justify-content: center; }

/* ---------- 8) TRANG LỖI (Views/Shared/Error.cshtml) ---------- */
.tk-code { margin: 0; font-size: .9rem; color: var(--ink-3); }
.tk-code code {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  padding: .15rem .45rem;
  font-size: .9em; color: var(--ink);
  word-break: break-all;
}

/* ---------- 9) TÔN TRỌNG prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tk-toc-list a { transition: none; }
  .tk-toc-list a:hover { transform: none; }
  .tk-faq summary { transition: none; }
}