/* Cụm ba trang Trúc Lâm, mặc đúng bộ màu và mặt chữ của ứng dụng.

   Vì sao có tệp này, Bao 04:20 ngày 18/08/2026: "website tab about us, a muốn
   design lại theo design style của app." Trước đó cụm này dùng
   assets/styles.css, tệp dùng chung cho mọi sản phẩm trong repo, nên trang giới
   thiệu một ứng dụng kinh sách đang mang màu hồng tím và mặt chữ của trang
   portfolio. Ai bấm nút trong ứng dụng ra tới đây là thấy một sản phẩm khác.

   Token lấy nguyên từ app, không phải đoán lại: giấy #FFFEFF, nền phụ #F7F5F0,
   chữ #2C2A26, vàng cổ #D4B783, vàng chữ #8A6520, kẻ mờ 12%, nhuộm tranh
   #F2E9DA. Ban đêm là sơn then #090908 với chữ #F6F4E8 và vàng #C2A35E, cùng
   bảng app dùng ở chế độ tối.

   Tên biến (--bg, --ink, --ink-soft) giữ đúng như assets/styles.css, vì
   truclam-contact.css đọc chúng. Đổi tên biến ở đây là làm trống form gửi thư. */

:root {
  color-scheme: light dark;

  --bg: #fffeff;
  --bg-deep: #f7f5f0;
  --surface: #ffffff;
  --ink: #2c2a26;
  --ink-soft: #6a6459;
  --accent: #d4b783;
  --accent-ink: #8a6520;
  --tint: #f2e9da;
  --line: rgb(44 42 38 / 12%);
  --shadow: 0 10px 30px rgb(44 42 38 / 8%);

  --serif: "Alegreya", ui-serif, Georgia, "Times New Roman", serif;
  --body-serif: ui-serif, Georgia, "Times New Roman", serif;
  --content-max: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090908;
    --bg-deep: #12110f;
    --surface: #16150f;
    --ink: #f6f4e8;
    --ink-soft: #b5ae99;
    --accent: #c2a35e;
    --accent-ink: #d8bd7c;
    --tint: #1c1a14;
    --line: rgb(246 244 232 / 14%);
    --shadow: none;
  }
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  /* Cùng một vệt vàng rất mờ ở góc trên như nền sơn mài của app, không phải một
     khối gradient: trang này là giấy, không phải poster. */
  background:
    radial-gradient(circle at 88% 0%, rgb(212 183 131 / 22%), transparent 26rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--body-serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-ink); }

.site-header {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Bao 04:20 ngày 18/08: "a không muốn khi ấn vào biểu tượng rawdestiny thì nó
   chuyển qua trang chủ." Nên chữ này là một <span>, không phải <a>. Kiểu chữ
   giữ nguyên để đầu trang vẫn có tên, chỉ bỏ đường dẫn. Bỏ link cũng làm cụm ba
   trang Apple bớt đúng một tầng nhấn dẫn ra ngoài. */
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark .dot { color: var(--accent-ink); }

.header-nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.95rem;
}

.header-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.header-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* Đường "trở về" ở đầu hai trang privacy và support. */
.doc .back {
  display: inline-block;
  margin: 2rem 0 0.25rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.doc .back:hover { color: var(--ink); }

.doc .back + h1 { margin-top: 0.5rem; }

.doc h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.15;
  margin: 2.25rem 0 0.75rem;
  color: var(--ink);
}

.doc .doc-meta {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.doc .doc-meta div { margin: 0.15rem 0; }
.doc .doc-meta strong { color: var(--ink); font-weight: 600; }

.prose h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 2.4rem 0 0.6rem;
  color: var(--ink);
}

.prose h2::before {
  /* Vạch vàng ngắn trước tên mục, đúng nét kẻ vàng cổ app dùng để mở một mục. */
  content: "";
  display: block;
  width: 2.1rem;
  height: 2px;
  margin-bottom: 0.7rem;
  background: var(--accent);
}

.prose p { margin: 0 0 1.05rem; text-wrap: pretty; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.prose li { margin: 0.3rem 0; }

/* Lời mở đầu và lời nhắc cuối: nền nhuộm tranh, cùng sắc với thẻ trong app. */
.prose .lead {
  margin: 0 0 1.4rem;
  padding: 1rem 1.15rem;
  background: var(--tint);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  font-size: 1.05rem;
}

.prose .note {
  margin: 2rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.prose .callout {
  margin: 1.4rem 0;
  padding: 1rem 1.15rem;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.prose .callout p:last-child { margin-bottom: 0; }

@media (max-width: 30rem) {
  .site-header { padding-top: 1.1rem; }
  .header-nav { gap: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   Nâng bốn trang tài liệu lên một tầng nghệ thuật, kiểu "sổ tay giấy dó":
   một bức tranh đầu bài, một ấn son kết trang, và nhịp chữ chỉnh lại. Không
   thiết bị cuộn, không JS: người vào trang chính sách đang cần đọc.
   Thêm mới hoàn toàn, không sửa gì ở trên, vì truclam-contact.css đọc các
   biến cũ và đổi tên là làm trắng form. */

/* Tranh đầu bài. Mỗi trang tối đa một bức. */
.plate-doc {
  margin: 2rem 0;
  border-radius: 12px;
}

.plate-doc .plate-doc__frame {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--tint);
}

.plate-doc img { display: block; width: 100%; height: auto; }

.plate-doc figcaption {
  margin-top: 0.5rem;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Tranh dọc ở trang about-us: nằm cạnh hai mục đầu trên màn hình rộng, xuống
   full cột trên điện thoại. */
/* Cắt về khổ 4:5. Bản gốc là 2:3, để nguyên thì trên điện thoại một bức tranh
   ăn hết gần cả màn hình giữa một trang chữ. */
.plate-doc--side .plate-doc__frame { aspect-ratio: 4 / 5; }
.plate-doc--side img { height: 100%; object-fit: cover; }

@media (min-width: 46rem) {
  .plate-doc--side {
    float: right;
    width: 100%;
    /* Cột chữ ở đây chỉ rộng 44rem, tranh 22rem sẽ bóp chữ còn 35 ký tự một
       dòng. 17rem giữ dòng chữ quanh 45 ký tự, vẫn đọc được. */
    max-width: 17rem;
    margin: 0.5rem 0 1.5rem 2rem;
  }
}

/* Chữ cái mở đầu, đúng nhịp mở một chương sách in. */
p.opencap::first-letter {
  font-family: var(--serif);
  font-size: 3.2em;
  float: left;
  line-height: 0.85;
  padding-right: 0.08em;
  color: var(--accent-ink);
}

/* Hộp "đang chờ": cùng kiểu với .lead, dùng cho mục chưa điền xong. */
.prose .pending {
  margin: 1.2rem 0;
  padding: 1rem 1.15rem;
  background: var(--tint);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
}

.prose .pending p { margin: 0; }

/* Ấn son hoa sen kết trang. */
.seal {
  display: block;
  clear: both;
  margin-top: 3rem;
  color: var(--accent);
}

/* ============================================================================
   ĐẦU SÁCH (plate-head), bản 29/08/2026.
   Grammar riêng của bốn trang tài liệu: "trang lót sách". Mỗi trang mở bằng
   ĐÚNG MỘT tấm tranh ngang mép tới mép, tựa trang đứng ngay trên tranh, rồi
   toàn bộ văn bản đọc trên giấy như cũ. Không thiết bị cuộn, không JS mới.
   Cùng một tác phẩm với trang chủ (cùng token, cùng Alegreya, cùng tranh sơn
   mài) nhưng KHÔNG trình diễn.
   ========================================================================= */
.plate-head {
  position: relative;
  height: clamp(260px, 52vh, 560px);
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  overflow: clip;
}
.plate-head img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim là SIBLING của tựa, dải đáy, không phủ cả khung. */
.plate-head .veil {
  position: absolute; inset: auto 0 0 0; height: 72%;
  background: linear-gradient(to top, rgb(9 9 8 / .82), rgb(9 9 8 / .40) 52%, transparent 84%);
  pointer-events: none;
}
.plate-head h1 {
  position: absolute; left: clamp(1.25rem, 5vw, 4rem); right: clamp(1.25rem, 5vw, 4rem);
  bottom: 1.2rem; margin: 0; color: #F6F4E8;
  font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.06;
  text-wrap: balance;
}
/* Tựa đã nằm trên tranh, nên khối tựa cũ trong cột không còn lý do tồn tại. */
.doc > h1 { display: none; }