/**
 * site-prose.css — bo sung bo cuc bai viet dai (.prose / .prose-lg).
 *
 * Vi sao co file nay: CSS chunk da compile cua site (1p2lvqzwjiqbw.css +
 * 01194b713pn5g.css) khong con rule .prose (plugin Tailwind Typography bi
 * tree-shake), trong khi 3 bai trong /tin-tuc/ van dung class
 * "prose prose-lg prose-headings:font-serif prose-a:text-amber-700 ...".
 * Truoc khi co file: doan van margin 0, link khong gach chan, ~1000 chu
 * dinh thanh mot khoi.
 *
 * Ve specificity: phan tu (.prose) nam trong :where() nen ca rule chi con
 * (0,0,1) — vua du de thang reset cua Tailwind Preflight (p{margin:0},
 * a{color:inherit}...), vua thua utility viet thang trong markup
 * (.mt-6, .text-2xl...) de tac gia bai viet van quyet dinh duoc.
 */

:where(.prose) {
  line-height: 1.85;
  overflow-wrap: break-word;
}
/* markup dat .text-gray-800 len chinh khoi .prose; o dark phai doi sang mau sang,
   cac khoi co nen sang rieng (hop goi von, bang) van tu giu mau chu cua chung */
.dark :where(.prose) { color: #e7e5e4; }
:where(.prose.prose-lg) { font-size: 1.0625rem; }
@media (min-width: 640px) {
  :where(.prose.prose-lg) { font-size: 1.125rem; }
}

/* khoang cach giua cac khoi */
:where(.prose) p { margin: 1.05em 0; }
:where(.prose) > div { margin: 1.15em 0; }
:where(.prose) h2 { margin: 1.7em 0 .6em; }
:where(.prose) h3 { margin: 1.5em 0 .5em; }
:where(.prose) h4 { margin: 1.35em 0 .4em; }
:where(.prose) ul,
:where(.prose) ol { margin: 1.05em 0; padding-left: 1.55em; }
:where(.prose) ul { list-style: disc; }
:where(.prose) ol { list-style: decimal; }
:where(.prose) li { margin: .45em 0; padding-left: .25em; }
:where(.prose) li::marker { color: #792836; }
:where(.prose) li > ul,
:where(.prose) li > ol { margin: .45em 0; }
.dark :where(.prose) li::marker { color: #e7c26a; }
:where(.prose) > :first-child { margin-top: 0; }
:where(.prose) > :last-child { margin-bottom: 0; }

/* tieu de: serif giong tieu de site (prose-headings:font-serif) */
:where(.prose) h2,
:where(.prose) h3,
:where(.prose) h4 {
  font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.3;
  color: #692332;
  letter-spacing: -.015em;
  scroll-margin-top: 92px;
}
:where(.prose) h2 { font-size: 1.5em; }
:where(.prose) h3 { font-size: 1.22em; }
:where(.prose) h4 { font-size: 1.06em; }
.dark :where(.prose) h2,
.dark :where(.prose) h3,
.dark :where(.prose) h4 { color: #efc88e; }

/* link: gach chan mau ho phach (prose-a:text-amber-700 + hover:prose-a:text-amber-900) */
:where(.prose) a {
  color: #b45309;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #d9c6a5;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
:where(.prose) a:hover { color: #78350f; text-decoration-color: #b45309; }
/* bo qua link tu dat mau chu (nut CTA text-gray-900 tren nen amber, link text-amber-200...)
   de khong bi doi thanh vang tren nen vang */
.dark :where(.prose) a:not([class*="text-"]) { color: #fbbf24; text-decoration-color: #6b4e2a; }
.dark :where(.prose) a:not([class*="text-"]):hover { color: #fcd34d; text-decoration-color: #fbbf24; }
.dark :where(.prose) a[class*="text-amber-700"] { color: #fbbf24; }
.dark :where(.prose) a[class*="text-amber-700"]:hover { color: #fcd34d; }

/* trich dan, hinh, anh, duong ke, bang, code */
:where(.prose) blockquote {
  margin: 1.3em 0;
  border-left: 3px solid #792836;
  background: #fdf6e6;
  padding: .55em 1.1em;
  border-radius: 0 10px 10px 0;
  color: #6b5a45;
  font-style: italic;
}
.dark :where(.prose) blockquote { border-left-color: #e7c26a; background: #241b0f; color: #d6c7a8; }

:where(.prose) figure { margin: 1.6em 0; }
:where(.prose) img,
:where(.prose) video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 12px; /* prose-img:rounded-xl */
}
:where(.prose) figcaption {
  margin-top: .65em;
  text-align: center;
  font-size: .86em;
  line-height: 1.55;
  color: #8a7761;
}
.dark :where(.prose) figcaption { color: #b9a882; }

:where(.prose) hr { margin: 2.2em 0; border: 0; border-top: 1px solid #d9c6a5; }
.dark :where(.prose) hr { border-top-color: #6b4e2a; }

:where(.prose) strong,
:where(.prose) b { font-weight: 700; }
:where(.prose) em,
:where(.prose) i { font-style: italic; }

:where(.prose) code {
  font-size: .9em;
  background: #f4ebd8;
  padding: .15em .4em;
  border-radius: 5px;
}
.dark :where(.prose) code { background: #2a2013; }

:where(.prose) table { width: 100%; border-collapse: collapse; font-size: .95em; }
:where(.prose) th,
:where(.prose) td { border: 1px solid #e0d3bb; padding: .5em .7em; text-align: left; }
:where(.prose) th { background: #f7eeda; font-weight: 700; }
/* markup to bang bang utility nen sang (bg-gray-50, bg-amber-100/70): o dark doi bang
   sang nen toi de khong con o trang xen giua trang */
.dark :where(.prose) table { border-color: #5b4a33; }
.dark :where(.prose) th,
.dark :where(.prose) td { color: #e7e5e4; border-color: #5b4a33; background-color: transparent; }
.dark :where(.prose) th { background-color: #3a2c1c; color: #f3d9a8; }

/* the noi dung nen nhat (amber/red 40-90% hoac dac): nen mo tren nen toi thanh xam duc,
   o dark doi thanh mat giay dac va tra chu ve mau dam cua tac gia */
.dark :where(.prose) :is([class~="bg-amber-50"], [class*="bg-amber-50/"]) {
  background-color: #fffbeb;
  border-color: #ead9b6;
  color: #374151;
}
.dark :where(.prose) :is([class~="bg-red-50"], [class*="bg-red-50/"]) {
  background-color: #fef2f2;
  border-color: #f3cfcf;
  color: #374151;
}
.dark :where(.prose) :is([class~="bg-amber-50"], [class*="bg-amber-50/"]) :where(h2, h3, h4) { color: #78350f; }
.dark :where(.prose) :is([class~="bg-red-50"], [class*="bg-red-50/"]) :where(h2, h3, h4) { color: #7f1d1d; }
.dark :where(.prose) :is([class~="bg-amber-50"], [class*="bg-amber-50/"], [class~="bg-red-50"], [class*="bg-red-50/"]) a:not([class*="text-"]) {
  color: #b45309;
  text-decoration-color: #d9c6a5;
}
.dark :where(.prose) :is([class~="bg-amber-50"], [class*="bg-amber-50/"], [class~="bg-red-50"], [class*="bg-red-50/"]) a:not([class*="text-"]):hover {
  color: #78350f;
  text-decoration-color: #b45309;
}

/* khung bai viet: breadcrumb, h1, khoi "Bai viet cung chu de" nam truc tiep tren nen
   toi va dat text-gray-800/900 khong kem dark: — chi sua dung cac khoi nay, khong
   cham vao the noi dung co nen sang rieng */
.dark article > nav .text-gray-800 { color: #e7e5e4; }
.dark article > nav { color: #b8b0a4; }
.dark article > header h1 { color: #f5efdf; }
.dark article > header > p.text-gray-700 { background-color: #fffbeb; color: #374151; }
.dark article > header > div.text-gray-600 { color: #b8b0a4; }
.dark article > figure figcaption { color: #b8b0a4; }
.dark article > div.mt-12 :where(h3, h4).text-gray-900 { color: #f5efdf; }
.dark article > div.mt-12 .text-gray-600 { color: #b8b0a4; }
.dark :where(.prose) > p.text-gray-700 { color: #d6d3d1; }

/* utility dùng trong trang tin xuất bản từ CMS nhưng không có trong bundle Tailwind gốc */
.hover\:bg-stone-200\/60:hover { background-color: rgba(231, 229, 228, 0.6); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-amber-100\/90 { color: rgba(254, 243, 199, 0.9); }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: 0.25rem; }
.mt-auto { margin-top: auto; }