/* =========================================================================
   Trang tài liệu (Chính sách / Điều khoản) — đồng bộ tông hồng với web chính
   ========================================================================= */
.doc {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(18px, 5vw, 40px) 18px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nút quay lại — dạng pill hồng giống nút trên web */
.doc-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--purple-600);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  border: 1.5px solid rgba(236,72,153,.1);
  transition: transform .2s, box-shadow .2s;
}
.doc-back:hover { transform: translateX(-3px); box-shadow: 0 12px 24px rgba(236,72,153,.22); }

/* Header thương hiệu mini (giống banner trang chủ) */
.doc-head {
  width: 100%;
  text-align: center;
  padding: 22px 20px;
  margin-bottom: 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #ffd9ec 0%, #ffcfe4 45%, #ffe4f1 100%);
  border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
}
.doc-logo {
  width: 54px; height: 54px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: grid; place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  box-shadow: 0 6px 14px rgba(236,72,153,.3);
  font-family: var(--font-head);
  font-weight: 700;
  color: #fff;
  font-size: 19px;
}
.doc-logo img { width: 100%; height: 100%; object-fit: cover; }
.doc-brand {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.1;
  color: var(--purple-700);
  margin: 0 0 2px;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.doc-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--purple-600); opacity: .85; }

/* Card nội dung */
.doc-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 5vw, 36px);
}
.doc-card h1 {
  font-family: var(--font-head);
  color: var(--purple-600);
  font-size: clamp(24px, 6vw, 32px);
  margin: 0 0 6px;
}
.doc-updated {
  display: inline-block;
  color: var(--purple-700);
  background: var(--purple-100);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 22px;
}
.doc-card h2 {
  font-family: var(--font-head);
  color: var(--purple-700);
  font-size: 19px;
  margin: 26px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-card h2::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  flex: 0 0 auto;
}
.doc-card p { line-height: 1.75; color: var(--ink); font-size: 15px; margin: 0 0 12px; }
.doc-card strong { color: var(--purple-700); }

/* Footer giống trang chủ */
.doc-foot { margin-top: 26px; text-align: center; }
.doc-foot .foot-heart { display: inline-block; color: var(--purple-400); }
.doc-foot .foot-heart svg { width: 20px; height: 20px; animation: beat 1.6s ease-in-out infinite; }
.doc-foot .copyright {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--purple-600);
  margin: 6px 0 6px;
  font-size: 14.5px;
}
.doc-foot .foot-links { margin: 0; font-size: 13px; color: var(--ink-soft); display: flex; gap: 10px; justify-content: center; }
.doc-foot .foot-links a { color: var(--ink-soft); text-decoration: none; }
.doc-foot .foot-links a:hover { color: var(--purple-600); text-decoration: underline; }