/* Token và thành phần dùng chung cho mọi trang hoangthoughts.
   Mỗi trang nạp file này trước <style> riêng của trang; đổi màu, bo góc hay kiểu link ở đây là đổi ở mọi trang. */

:root{
  /* thang xám trung tính theo dark mode của Claude (đo từ ảnh chụp, 2026-11-01): nền #181818, chữ #EEEEEE, chữ đậm #FFFFFF,
     chữ phụ #A4A4A4, khối nền #252525. Trước đó là thang xám ấm (#262624 → #EEECE4) */
  --bg:#181818;       /* nền trang */
  --surface:#252525;  /* nền thẻ, khung ảnh, trạng thái rê chuột */
  --line:#2A2A2A;     /* đường kẻ chia phần */
  --edge:#3A3A3A;     /* viền thẻ, viền nút phụ */
  --rule:#474747;     /* gạch chân link, dấu phân cách trong breadcrumb */
  --mute:#5F5F5F;     /* chữ rất mờ, chi tiết phụ */
  --dim:#8F8F8F;      /* nhãn mono, chú thích (đạt AA: 5.5:1 trên --bg, 4.7:1 trên --surface) */
  --sub:#A4A4A4;      /* chữ phụ, mô tả */
  --body:#E6E6E6;     /* chữ nội dung dài */
  --fg:#EEEEEE;       /* chữ chính, tiêu đề */
  --hi:#FFFFFF;       /* điểm sáng nhất: chữ đậm, mục đang chọn, bài đang đọc */
  --acc:#FCB117;      /* màu nhấn duy nhất: rê chuột, gạch chân chạy */
  --r:3px;            /* bo góc dùng cho mọi khối; riêng ô tìm kiếm giữa vũ trụ ở trang chủ bo tròn hai đầu */

  /* thang chữ 10 bậc; chữ trong bài đọc (người đọc tự chỉnh A−/A+) và nhãn trong vũ trụ không theo thang này */
  --fs-1:10px;        /* nhãn mono viết hoa trong thẻ số liệu, sidebar */
  --fs-2:12px;        /* breadcrumb, menu, footer, nhãn section */
  --fs-3:13px;        /* link hành động, chú thích nhỏ */
  --fs-4:15px;        /* chữ trong thẻ, mô tả, danh sách */
  --fs-5:17px;        /* đoạn văn giao diện, phụ đề, intro */
  --fs-6:20px;        /* tiêu đề thẻ, tên chương */
  --fs-7:24px;        /* câu trích nổi, tiêu đề section trên điện thoại */
  --fs-8:30px;        /* tiêu đề section */
  --fs-9:40px;        /* tiêu đề trang */
  --fs-10:52px;       /* tiêu đề lớn nhất: tên sách, châm ngôn */
}

/* giãn chữ chung cho Manrope: mặc định Manrope khá khít, chữ nhỏ trên nền tối khó đọc. Mọi phần tử kế thừa giá trị này;
   chỗ nào tự đặt letter-spacing (nhãn mono, tiêu đề lớn) thì giữ giá trị riêng */
body{letter-spacing:.015em}

/* nút hành động (kiểu C): chữ thường, gạch chân mảnh, rê chuột thì gạch vàng chạy từ trái sang */
.act{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-3)/1.3 Manrope,sans-serif;color:var(--fg);text-decoration:none;cursor:pointer;padding-bottom:3px;border-bottom:1px solid var(--rule);background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:background-size .35s ease}
.act .arw{display:none}
.act:hover,a:hover .act{background-size:100% 1px}

/* header: cùng một khung ở mọi trang; mỗi trang chỉ tự chọn sticky hay fixed */
header{height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;z-index:5;border-bottom:1px solid var(--line);background:rgba(24,24,24,.86);backdrop-filter:blur(8px)}
header .brand{justify-self:start;display:flex;align-items:center}
header .mid,header .hud{text-align:center}
header .crumb{font:500 var(--fs-2) "JetBrains Mono",monospace;color:var(--dim)}
header .crumb a{color:var(--dim);text-decoration:none}header .crumb a:hover{color:var(--fg)}
header .crumb i{font-style:normal;color:var(--rule);margin:0 6px}
header .crumb span,header .crumb b{color:var(--fg);font-weight:500}
header .lv{margin-top:2px;font-size:var(--fs-2);color:var(--dim)}
header .right{justify-self:end}
/* menu các trang */
header .nav{justify-self:end;display:flex;align-items:center;gap:22px}
header .nav a{font:500 var(--fs-2) "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--sub);text-decoration:none;white-space:nowrap;transition:color .2s}
header .nav a:hover{color:var(--acc)}
header .nav a[aria-current]{color:var(--fg)}
@media (max-width:760px){header{padding:0 16px}header .lv,header .crumb a,header .crumb i{display:none}header .nav{gap:14px}header .nav a{font-size:var(--fs-2)}}
/* điện thoại: nhường chỗ cho menu, ẩn đường dẫn ở giữa header */
@media (max-width:560px){header .mid,header .hud,header #hud{display:none!important}header>.nav,header>.right{grid-column:3;justify-self:end}header .nav{gap:12px}}
/* tên dài trong menu: điện thoại hiện tên ngắn để menu không chạm logo */
header .nav .short{display:none}
@media (max-width:560px){header .nav .full{display:none}header .nav .short{display:inline}}

/* footer chung cuối các trang có cuộn */
footer.site{max-width:1120px;margin:0 auto;padding:28px 40px 40px;display:flex;justify-content:space-between;align-items:center;font:500 var(--fs-2) "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--dim)}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer.site nav a{color:var(--sub);text-decoration:none;transition:color .2s}footer.site nav a:hover{color:var(--acc)}
@media (max-width:760px){footer.site{padding:24px 16px 32px;flex-direction:column;align-items:flex-start;gap:14px}}

/* không để chữ mồ côi (một chữ đứng riêng ở dòng cuối) ở bất cứ trang nào; no-orphan.js lo phần trình duyệt chưa hỗ trợ */
*{text-wrap:pretty}
h1,h2,h3,h4,h5,h6{text-wrap:balance}