/* ============================================================
   WPE — Từ Điển Nhân Sinh & Trích Dẫn Nhân Sinh
   Bản 2 — 09/08/2026: dựng lại đúng THIẾT KẾ GỐC hai cột.
   ------------------------------------------------------------
   Khuôn gốc đo trên trang thật:
     lưới 12 cột khe 40px · 5 cột trái (tên khái niệm, DÍNH khi
     cuộn, có chữ cái khổng lồ mờ làm nền) · 7 cột phải (nội dung
     trên nền trắng, phân tách bằng ĐƯỜNG KẺ MẢNH — không phải thẻ
     bóng đổ) · đường kẻ dọc ngăn hai cột · thanh A–Z bọc trong
     một khung nền nhạt bo lớn.
   Màu / cỡ chữ / bo góc lấy từ khuôn trang công khai:
     tai-lieu/WPE-Khuon-Mau-Trang-Cong-Khai-2026-08-09.md
   ------------------------------------------------------------
   ☠️ MỘT CHỖ CỐ Ý KHÁC BẢN GỐC: dòng nguồn căn TRÁI.
      Bản gốc căn phải nên chữ đầu của nguồn không thẳng hàng với
      chữ đầu của lời trích, và lề trái bị răng cưa khi nguồn dài
      hai ba dòng. HNA yêu cầu sửa 09/08/2026.
   ------------------------------------------------------------
   ⚠️ KHÔNG hardcode mã màu. Mọi màu lấy từ tokens.css.
   ============================================================ */

:root{
  --td-r-btn:  6px;
  --td-r-khung:20px;
  --td-shadow: 0 6px 20px -12px rgba(27,27,33,.12);
}

.td-container{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ── Hero: nền ĐẶC, không gradient ── */
.td-hero{ background: var(--primary); color: var(--white); padding: 72px 0 64px; }
.td-hero.td-hero-nho{ padding: 48px 0 44px; }
.td-hero-divider{ width: 80px; height: 6px; background: var(--accent); margin-bottom: 28px; }
.td-hero h1{
  font-family: var(--font-head); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(38px, 4.9vw, 93px); line-height: 1.08; margin: 0; color: var(--white);
}
.td-hero.td-hero-nho h1{ font-size: clamp(28px, 3.2vw, 56px); }
.td-hero p{ margin: 20px 0 0; max-width: 680px; color: rgba(255,255,255,.82); font-size: 17px; }
.td-ve{
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-light); text-decoration: none; margin-bottom: 18px; transition: var(--tr);
}
.td-ve:hover{ color: var(--white); }

.td-than{ padding-top: 48px; padding-bottom: 96px; }

/* ── Thanh chữ cái A–Z: bọc trong một khung nền nhạt bo lớn ── */
.td-az-box{
  background: var(--bg-low); border-radius: var(--td-r-khung);
  padding: 14px 20px; margin-bottom: 64px;
}
.td-az{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-chu{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px;
  font-weight: 700; font-size: 15px; color: var(--text-3);
  background: transparent; text-decoration: none; transition: var(--tr);
}
.td-chu.tat-ca{
  background: var(--primary); color: var(--white); padding: 0 18px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.td-chu.co{ background: var(--white); color: var(--text); }
.td-chu.co:hover{ background: var(--primary); color: var(--white); box-shadow: var(--td-shadow); }
.td-chu.dang-mo{ background: var(--white); color: var(--primary); box-shadow: var(--td-shadow); }
/* Chữ chưa có khái niệm: thuần thông tin — không nền, không hover, không con trỏ tay */
.td-chu.rong{ opacity: .45; cursor: default; }

/* ── Một khái niệm: lưới 12 cột, 5 trái / 7 phải ── */
.td-kn{
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px;
  margin-bottom: 96px; position: relative;
}

/* Lớp bọc chữ cái nền: phủ đúng khối khái niệm và cắt phần chữ tràn ra.
   ☠️ KHÔNG đặt overflow:hidden lên chính .td-kn — làm thế thì TÊN khái niệm
   cũng bị xén (khối "Thế Giới Quan" cao 131px, tên vượt đáy 18px). Cắt phải
   đúng thứ cần cắt, không cắt cả khối. */
.td-kn-boc{
  /* Nới mép trên đúng bằng độ nhô của chữ bóng (top:-56px), nếu không
     overflow:hidden sẽ xén mất ĐẦU chữ. HNA phát hiện 16/08/2026. */
  position: absolute; inset: -56px 0 0 0; overflow: hidden;
  z-index: 0; pointer-events: none;
}
.td-kn:last-child{ margin-bottom: 0; }
.td-kn-trai{ grid-column: span 5; position: relative; }
.td-kn-phai{
  grid-column: span 7;
  border-left: 1px solid var(--border-light); padding-left: 40px;
}

/* Chữ cái khổng lồ mờ làm nền cột trái */
.td-kn-bong{
  position: absolute; left: -14px; top: -56px; z-index: 0;
  font-family: var(--font-head); font-size: 220px; font-weight: 900; line-height: 1;
  color: var(--bg-alt); pointer-events: none; user-select: none;
}
.td-kn-ten{
  position: relative; z-index: 1; display: inline-block; margin: 0;
  font-family: var(--font-head); font-weight: 800; color: var(--primary);
  font-size: clamp(24px, 2.4vw, 38px); line-height: 1.2; letter-spacing: -.01em;
  text-decoration: none; transition: var(--tr);
}
a.td-kn-ten:hover{ color: var(--accent); }
.td-kn-dan{
  position: relative; z-index: 1; margin: 10px 0 0;
  font-size: 10.88px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary);
}

/* ── Nhãn chia tầng trong cột phải ── */
.td-tang{ display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.td-tang:not(:first-child){ margin-top: 44px; }
.td-tang span{
  font-size: 10.88px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.td-tang::after{ content: ""; flex: 1; height: 1px; background: var(--border-light); }

/* ── Một đoạn: phân tách bằng đường kẻ mảnh, KHÔNG dùng thẻ bóng đổ ── */
.td-doan{ padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border-light); }
.td-doan:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.td-doan .loi{ margin: 0; font-size: 17px; line-height: 1.9; color: var(--text); }
.td-doan.la-trich-dan .loi{ font-style: italic; color: var(--primary); }
/* Số nghĩa như từ điển in — đậm, navy, không nghiêng kể cả trong lời trích */
.td-doan .loi .so{ font-weight: 800; color: var(--primary); font-style: normal; margin-right: 2px; }
/* Nội dung nay giữ nguyên các đoạn <p> bên trong (định nghĩa · ví dụ in nghiêng) */
.td-doan .loi p{ margin: 0 0 10px; }
.td-doan .loi p:last-child{ margin-bottom: 0; }
.td-doan .loi em, .td-doan .loi i{ color: var(--text-2); }
/* Nhãn nghĩa ("Động từ", "Nghĩa 1") đứng thành một dòng nhỏ trên câu định nghĩa.
   Trống thì không in gì — định nghĩa ngoài hệ đánh số của từ điển không bị ép nhãn. */
.td-doan .loi .so{ display: block; margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ── Phân trang trích dẫn (5 mục mỗi trang) ──
   Số px ghi thẳng: --sp-* bị style.css định nghĩa lại, xem chú thích đầu file. */
.td-phan-trang{
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 28px; padding-top: 20px;
	border-top: 1px solid var(--border-light);
}
.td-pt-dem{
	margin-right: auto;
	font-size: 13px; color: var(--text-3);
	letter-spacing: .04em;
}
.td-pt-so{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 0 10px;
	border: 1px solid var(--border-light); border-radius: var(--r-md);
	font-size: 14px; font-weight: 700; line-height: 1;
	color: var(--primary); text-decoration: none;
	transition: background var(--tr), border-color var(--tr);
}
/* Hover bao trọn cả ô, không chỉ con số — quy tắc giao diện số 1 của dự án */
a.td-pt-so:hover{ background: var(--bg-low); border-color: var(--accent); }
.td-pt-so.dang{ background: var(--primary); border-color: var(--primary); color: var(--white); }

@media (max-width: 768px){
	.td-phan-trang{ gap: 6px; margin-top: 20px; }
	.td-pt-dem{ width: 100%; margin-bottom: 4px; }
}
/* Dòng nguồn CĂN TRÁI — thẳng lề với chữ đầu của lời trích */
.td-doan .nguon{
  margin: 14px 0 0; font-size: 13px; line-height: 1.65;
  color: var(--text-3); text-align: left;
}
.td-doan .nguon a{ color: inherit; }

/* ── Từ khóa liên quan ── */
.td-tukhoa{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.td-tukhoa .nhan{ font-size: 12px; color: var(--text-3); }
.td-tukhoa a{
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700;
  color: var(--primary); background: var(--bg-low); border: 1px solid var(--border-light);
  padding: 5px 12px; border-radius: 99px; text-decoration: none; transition: var(--tr);
}
.td-tukhoa a:hover{ background: var(--primary); color: var(--white); border-color: var(--primary); }

/* ── Nút vào trang khái niệm ── */
.td-nut{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
  font-size: 13.12px; font-weight: 700; color: var(--primary);
  background: var(--white); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: var(--td-r-btn);
  text-decoration: none; transition: var(--tr);
}
.td-nut:hover{
  background: var(--primary); color: var(--white); border-color: var(--primary);
  box-shadow: var(--td-shadow);
}
.td-nut .so{ opacity: .7; font-weight: 600; }

.td-trong{
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 18px 22px; color: var(--text-3); font-size: 14.5px;
}

/* ── Dính lại khi cuộn: chỉ ở màn rộng, màn hẹp thì xếp dọc ── */
@media (min-width: 900px){
  .td-kn-trai{ position: sticky; top: 120px; align-self: start; }
}
@media (max-width: 899px){
  .td-kn{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
  .td-kn-trai, .td-kn-phai{ grid-column: 1 / -1; }
  .td-kn-phai{ border-left: 0; padding-left: 0; }
  .td-kn-bong{ font-size: 140px; top: -34px; left: -8px; }
  .td-kn-boc{ inset: -34px 0 0 0; }
}
@media (max-width: 768px){
  .td-hero{ padding: 48px 0 44px; }
  .td-container{ padding: 0 20px; }
  .td-az-box{ padding: 12px 14px; margin-bottom: 40px; }
}
@media (max-width: 375px){
  .td-chu{ min-width: 32px; height: 32px; font-size: 13px; padding: 0 6px; }
  .td-kn-bong{ font-size: 110px; }
}

/* ============================================================
   TRANG MỘT KHÁI NIỆM — khuôn MỘT CỘT (10/08/2026)
   ------------------------------------------------------------
   Theo mẫu HNA gửi. Mẫu dùng đúng bộ màu WPE nên ghép vào không
   lệch tông: #000666 · #b6171e · #fbf8ff · #f5f2fb · #c6c5d4.
   Khoảng cách ghi px thẳng — --sp-* bị style.css đè, xem đầu file.
   Nhóm .tdk-* CHỈ dùng cho trang khái niệm; trang A–Z giữ .td-*.
   ============================================================ */

.tdk-trang{ padding: 56px 0 96px; }
.tdk-container{ max-width: 1040px; margin: 0 auto; padding: 0 32px; }

.tdk-ve{
	display: inline-block; margin-bottom: 40px;
	font-size: 14px; font-weight: 700; color: var(--primary);
	text-decoration: none; letter-spacing: .02em;
}
.tdk-ve:hover{ color: var(--secondary); }

/* ── Đầu trang ── */
.tdk-dau{ margin-bottom: 72px; }
.tdk-mac{
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 18px;
	font-size: 12px; font-weight: 700; letter-spacing: .2em;
	text-transform: uppercase; color: var(--secondary);
}
.tdk-gach{ width: 32px; height: 1px; background: var(--secondary); display: inline-block; }
.tdk-ten{
	margin: 0 0 28px;
	font-family: var(--font-head);
	font-size: clamp(2.4rem, 5.2vw, 4.4rem);
	font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
	color: var(--primary);
}
.tdk-dan{
	margin: 0; max-width: 760px;
	font-size: 20px; line-height: 1.65; color: var(--text-2);
}

/* ── Mục ── */
.tdk-muc{ margin-bottom: 88px; }
.tdk-muc:last-child{ margin-bottom: 0; }
.tdk-muc-ten{
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 32px;
	font-family: var(--font-head);
	font-size: 28px; font-weight: 700; color: var(--primary);
}
.tdk-muc-ten .material-symbols-outlined{ font-size: 30px; color: var(--secondary); }

/* Tiêu đề "Trích dẫn" kèm đường kẻ kéo dài + số đếm */
.tdk-muc-ke{ display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.tdk-muc-ke .tdk-muc-ten{ margin: 0; }
.tdk-ke{ flex: 1; height: 1px; background: var(--border-light); }
.tdk-dem{
	min-width: 26px; height: 26px; padding: 0 8px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 99px; background: var(--bg-alt);
	font-size: 13px; font-weight: 700; color: var(--text-2);
}

/* ── Khối định nghĩa: nền nhạt, viền trái navy ── */
.tdk-dinh-nghia{
	padding: 36px 40px;
	/* HNA chốt 10/08/2026: nền TRẮNG. Mẫu dùng nền tím nhạt nhưng trên site WPE
	   nền trang đã là trắng, khối tím nổi lên thành một mảng lạ. */
	background: var(--white);
	border-left: 4px solid var(--primary);
	border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.tdk-dn-doan{ padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border-light); }
.tdk-dn-doan:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.tdk-dn-loi{ font-size: 17px; line-height: 1.9; color: #1b1b21; }
.tdk-dn-loi p{ margin: 0 0 12px; }
.tdk-dn-loi p:last-child{ margin-bottom: 0; }
.tdk-dn-loi em, .tdk-dn-loi i{ color: #454652; }

/* Nhãn nghĩa (Động từ · Nghĩa 1…) */
.tdk-nhan{
	display: block; margin-bottom: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--primary);
}

/* ── Dòng nguồn ── */
.tdk-nguon{
	margin: 14px 0 0;
	font-size: 14px; line-height: 1.65; color: #454652;
}
.tdk-nguon a{ color: inherit; }

/* ── Thẻ trích dẫn ── */
.tdk-luoi{ display: grid; gap: 28px; }
.tdk-the{
	position: relative;
	padding: 32px 36px;
	background: var(--white);
	border: 1px solid rgba(198, 197, 212, .3);
	border-radius: var(--r-lg);
	box-shadow: 0 30px 40px -15px rgba(27, 27, 33, .05);
	transition: background var(--tr), box-shadow var(--tr-slow), transform var(--tr-slow);
}
/* Hover bao trọn cả thẻ — quy tắc giao diện số 1 của dự án */
.tdk-the:hover{
	/* Nền giữ TRẮNG, chỉ đổi bóng và nhấc lên — đổi màu nền thì thẻ loé một
	   mảng tím giữa trang trắng. */
	box-shadow: 0 36px 48px -16px rgba(27, 27, 33, .12);
	border-color: rgba(0, 6, 102, .25);
	transform: translateY(-2px);
}
/* Dấu ngoặc kép: dùng ICON format_quote của Material Symbols đúng như mẫu —
   hai dấu phẩy đôi dày dặn. Ký tự &ldquo; của font chữ mảnh và lệch, không ra
   hình. Số đo theo mẫu: 60px, màu --border-light, thò ra ngoài mép thẻ. */
.tdk-ngoac{
	position: absolute; top: -16px; left: -16px;
	font-size: 60px; line-height: 1;
	color: var(--border-light); user-select: none; pointer-events: none; z-index: 0;
}
.tdk-the-trong{
	position: relative; z-index: 1;
	padding-left: 22px;
	border-left: 2px solid rgba(182, 23, 30, .2);
}
.tdk-loi{
	margin: 0;
	/* ☠️ Astra (main.min.css) đặt blockquote{ border-left: 5px } — sinh ra một
	   VẠCH XÁM thứ hai chạy song song vạch đỏ của .tdk-the-trong. HNA phát hiện
	   10/08/2026. Gỡ cả viền lẫn padding thừa. */
	border-left: 0; padding-left: 0;
	font-family: var(--font-head);
	font-size: 20px; font-weight: 500; line-height: 1.5;
	color: #1b1b21;
	/* Astra (main.min.css) đặt blockquote nghiêng. Mẫu thiết kế để chữ ĐỨNG —
	   đoạn trích dài mà nghiêng cả khối thì khó đọc. Ghi đè tại đây. */
	font-style: normal;
}
.tdk-loi p{ margin: 0 0 12px; }
.tdk-loi p:last-child{ margin-bottom: 0; }
.tdk-loi em, .tdk-loi i{ color: #454652; }

/* ── Khái niệm liên quan trong thẻ ── */
.tdk-tukhoa{
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 18px; padding-top: 16px;
	border-top: 1px solid var(--border-light);
}
.tdk-tukhoa .nhan{
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--text-3);
}
.tdk-tukhoa a{
	padding: 5px 12px;
	border: 1px solid var(--border-light); border-radius: 99px;
	font-size: 13px; font-weight: 600; color: var(--primary);
	text-decoration: none;
	transition: background var(--tr), border-color var(--tr);
}
.tdk-tukhoa a:hover{ background: var(--bg-low); border-color: var(--accent); }

/* ── Responsive: 1200 → 768 → 375 ── */
@media (max-width: 768px){
	.tdk-trang{ padding: 40px 0 64px; }
	.tdk-container{ padding: 0 20px; }
	.tdk-dau{ margin-bottom: 48px; }
	.tdk-dan{ font-size: 18px; }
	.tdk-muc{ margin-bottom: 56px; }
	.tdk-muc-ten{ font-size: 24px; }
	.tdk-dinh-nghia{ padding: 24px 22px; }
	.tdk-the{ padding: 24px 22px; }
	.tdk-loi{ font-size: 18px; }
}

@media (max-width: 375px){
	.tdk-the-trong{ padding-left: 14px; }
	.tdk-ngoac{ font-size: 64px; }
	.tdk-muc-ke{ flex-wrap: wrap; gap: 12px; }
}

/* ── Thanh dính: giữ mốc khi cuộn trang khái niệm (~4.900px) ──
   top 73px = chiều cao navbar sticky của theme (đo 10/08/2026).
   z-index 20 < 999 của navbar, để không bao giờ đè lên menu chính. */
.tdk-thanh{
	position: sticky; top: 73px; z-index: 20;
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 -1px; padding: 12px 0;
	background: var(--bg);
	border-bottom: 1px solid var(--border-light);
	opacity: 0; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.tdk-thanh.hien{ opacity: 1; transform: none; }
.tdk-thanh-chu{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 26px;
	border-radius: 6px; background: var(--primary); color: var(--white);
	font-family: var(--font-head); font-size: 13px; font-weight: 800;
}
.tdk-thanh-ten{
	font-family: var(--font-head); font-size: 16px; font-weight: 800;
	color: var(--primary); letter-spacing: -.01em;
}

/* ── Khái niệm liền kề ở cuối trang ── */
.tdk-lan{
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
	margin-top: 72px; padding-top: 32px;
	border-top: 1px solid var(--border-light);
}
.tdk-lan-o{
	display: flex; flex-direction: column; gap: 6px;
	padding: 20px 22px;
	border: 1px solid var(--border-light); border-radius: var(--r-lg);
	text-decoration: none;
	transition: background var(--tr), border-color var(--tr), transform var(--tr-slow);
}
/* Hover bao trọn cả ô — quy tắc giao diện số 1 của dự án */
.tdk-lan-o:hover{ background: var(--bg-low); border-color: var(--accent); transform: translateY(-2px); }
.tdk-lan-o.sau{ text-align: right; }
.tdk-lan-o .nhan{
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--text-3);
}
.tdk-lan-o .ten{
	font-family: var(--font-head); font-size: 17px; font-weight: 700;
	color: var(--primary); line-height: 1.35;
}

@media (max-width: 768px){
	.tdk-thanh{ top: 0; }
	.tdk-lan{ grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
	.tdk-lan-o.sau{ text-align: left; }
}