/* ===========================================================
   JENNA RAIN SOUNDS  ·  youtube.com/@Jennarainsounds
   Nội dung lấy từ trang Notion của chủ kênh và từ kênh thật.
   Tagline chính thức: "Where restful nights begin" (Notion ghi rõ:
   phải dùng font viết tay → Kalam).
   Một chế độ tối duy nhất, có chủ đích.
   Giao diện port 1:1 từ design/jenna.html (bản đã chốt).
   =========================================================== */
:root{
  --night:#151C2B;
  --surface:#1D2735;
  --ocean:#28374F;
  --indigo:#3F4B60;
  /* Nền trang: indigo của design-system nhưng hạ sâu để chữ mờ vẫn đạt 4.5:1
     (design-system.md yêu cầu ngưỡng này). #292A76 nguyên bản chỉ đạt ~4:1. */
  --backdrop:#293141;
  --accent:#619DE5;
  --muted:#97A7BC;
  --ink:#fff;
  --ink-2:#D0D9E5;
  --ink-3:#B9C4D4;
  --line:rgba(151,167,188,.22);
  --line-2:rgba(151,167,188,.13);
  --live:#DC2A20;
  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Kalam','Bradley Hand',cursive;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Nền trang = indigo (#3F4B60) theo design-system.md; #141C2C chỉ dành cho
   hero và các "vùng tối nhất" (mục Sleep). Thẻ #1E2939 nhờ vậy tách khỏi nền. */
body{margin:0;background:var(--backdrop);color:var(--ink);font-family:var(--display);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}

/* Bỏ qua thanh điều hướng, tới thẳng nội dung — a11y bàn phím */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--night);
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:0 0 10px 0;font-weight:800;font-size:13px}
.skip:focus{left:0}

/* ---------- CHỮ ----------
   Giãn ký tự theo cỡ chữ: cỡ càng lớn mới càng siết được.
   Ở cỡ vừa và nhỏ, siết âm mạnh làm chữ dính vào nhau. */
.tt{font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.9;margin:0;text-wrap:balance}
.ts{font-family:var(--hand);margin:.14em 0 0;transform:skewX(-8deg);transform-origin:left;color:var(--ink-2)}
.k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.k.q{color:var(--muted)}
/* .shell bám cột nội dung, và không chui vào tai thỏ khi máy xoay ngang */
.shell{max-width:1240px;margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}

/* ================= NAV ================= */
nav{position:sticky;top:0;z-index:60;background:rgba(20,28,44,.8);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
nav .in{display:flex;align-items:center;gap:12px;height:66px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.brand img{width:36px;height:36px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand .nm{display:flex;flex-direction:column;line-height:1}
.brand b{font-weight:900;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.brand i{font-family:var(--hand);font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}
/* gap + padding-inline cùng nhau: mỗi link vẫn đạt bề rộng chạm ≥44px
   mà khoảng cách nhìn thấy giữa các nhãn không đổi nhiều. */
.links{display:flex;gap:12px;align-items:center}
.links a{text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);transition:color .18s;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 9px}
.links a:hover{color:var(--ink)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;
  border-radius:11px;cursor:pointer;color:var(--ink-2);align-items:center;justify-content:center}
.burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.burger .x{display:none}
.burger[aria-expanded="true"] .m{display:none}
.burger[aria-expanded="true"] .x{display:block}

@media(max-width:899px){
  .burger{display:flex}
  .links{position:absolute;top:calc(100% + 1px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--night);border-bottom:1px solid var(--line-2);
    box-shadow:0 22px 44px -18px rgba(0,0,0,.85);
    padding:6px var(--pad) calc(14px + env(safe-area-inset-bottom));display:none}
  .links.open{display:flex}
  .links a{min-height:52px;display:flex;align-items:center;justify-content:flex-start;
    padding-inline:0;font-size:14px;
    border-bottom:1px solid var(--line-2);letter-spacing:.09em}
  .links a:last-child{border-bottom:0}
}

/* ================= HERO ================= */
header.hero{position:relative;min-height:min(92dvh,900px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;padding-block:clamp(56px,10vh,110px) 0}
#rain{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
/* Mặt trăng — mô-típ trong design-system.md ("mặt trăng, mây, sao, mặt nước phản chiếu"),
   xuất hiện ở cả hai ảnh tham chiếu. Đĩa sáng mềm, dịu, không phải mảng trắng gắt. */
.moon{position:absolute;top:clamp(-80px,-5vw,-30px);right:clamp(-50px,-3vw,0px);
  width:clamp(150px,24vw,300px);aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    rgba(245,248,252,.82) 0%,rgba(215,224,236,.46) 30%,
    rgba(166,183,206,.2) 50%,rgba(139,158,186,.07) 64%,transparent 72%);
  opacity:.42}
@media(max-width:560px){.moon{opacity:.34;right:-46px;top:-70px;width:170px}}
.scene{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 130% 62% at 50% 2%,rgba(96,170,192,.32),transparent 64%),
    linear-gradient(178deg,#123c4c 0%,#1E2936 34%,#19222E 60%,var(--night) 86%,var(--backdrop) 100%)}
.scene::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 40% 76% at -6% 16%,rgba(4,20,22,.93),transparent 70%),
    radial-gradient(ellipse 40% 76% at 106% 10%,rgba(4,18,24,.9),transparent 70%),
    linear-gradient(180deg,transparent 46%,rgba(20,28,44,.82) 82%,transparent 100%)}
.scene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,rgba(30,86,110,.34),rgba(20,28,44,0));
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 5px);
          mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 5px)}

.hbadges{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.live{display:inline-flex;align-items:center;gap:8px;background:var(--live);color:#fff;
  border-radius:5px;padding:5px 11px 5px 9px;font-size:12px;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase}
.live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 2.1s infinite}
@keyframes blink{0%,42%{opacity:1}62%,100%{opacity:.28}}
.hbadges .b{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 11px}

.hero h1{font-size:clamp(44px,10.8vw,140px);letter-spacing:-.028em;margin:.18em 0 0;word-spacing:.04em}
/* Inter 900 hoa siết âm mạnh chỉ đẹp ở cỡ rất lớn — ở màn hẹp nới lại kẻo dính chữ */
@media(max-width:560px){.hero h1{letter-spacing:-.004em;word-spacing:.1em}}
.hero .ts{font-size:clamp(24px,5vw,54px);color:rgba(255,255,255,.94)}
.hero .blurb{max-width:47ch;color:var(--ink-2);font-size:clamp(15px,1.6vw,17.5px);margin:24px 0 0}
/* Bọc trong .shell để bám đúng mép phải của CỘT NỘI DUNG,
   không bám mép cửa sổ — nếu không, màn càng rộng chữ càng trôi ra xa. */
.hero-top{position:absolute;top:clamp(72px,10vh,116px);left:0;right:0;z-index:1;pointer-events:none}
.corner{text-align:right;margin:0;
  font-weight:900;text-transform:uppercase;letter-spacing:-.008em;line-height:.94;
  font-size:clamp(14px,2.2vw,25px);color:rgba(255,255,255,.92);text-shadow:0 2px 20px rgba(0,0,0,.55)}
.corner span{display:block;font-family:var(--hand);font-weight:400;font-size:.74em;letter-spacing:0;
  color:rgba(255,255,255,.74);text-transform:none;transform:skewX(-8deg)}

/* Màn hẹp: đưa "REAL RAIN 4K" trở lại luồng.
   Khi còn absolute nó nằm ngoài luồng, nên hàng pill xuống dòng là đè lên nó. */
@media(max-width:899px){
  .hero-top{position:static;margin:0 0 18px}
  .corner{text-align:left;font-size:clamp(13px,3.8vw,19px);text-shadow:none}
  .corner span{font-size:.78em}
  .hbadges{gap:7px}
  .hbadges .b{font-size:11px;padding:5px 10px;letter-spacing:.1em}
}

.cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  padding:0 24px;border-radius:12px;border:0;cursor:pointer;font-family:var(--display);
  font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:transform .16s,background .18s,border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-yt{background:var(--live);color:#fff}
.btn-pri{background:var(--accent);color:var(--night)}
.btn-gh{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid rgba(255,255,255,.24)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{transform:none}

.strip{margin-top:clamp(34px,6vh,64px);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding:15px 0;
  font-size:13px;color:var(--ink-2)}
.strip b{color:var(--ink);font-weight:700}
.strip .eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:15px;margin-right:9px}
.strip .eq i{width:3px;background:var(--accent);border-radius:1px;animation:eq 1.15s ease-in-out infinite}
.strip .eq i:nth-child(1){height:40%;animation-delay:-.5s}
.strip .eq i:nth-child(2){height:100%;animation-delay:-.25s}
.strip .eq i:nth-child(3){height:65%}
.strip .eq i:nth-child(4){height:85%;animation-delay:-.4s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ================= SECTIONS ================= */
section{padding-block:clamp(66px,10vh,116px)}
.shead{margin-bottom:clamp(28px,4.6vh,48px);max-width:60ch}
.shead h2{font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.98;
  font-size:clamp(28px,5vw,50px);margin:0;text-wrap:balance}
/* Tiêu đề tiếng Việt: dấu mũ/móc/nặng chồng cao hơn chữ Latin,
   line-height siết chặt sẽ làm dấu của dòng dưới chạm dòng trên. */
.tt.vi{line-height:1.14;padding-top:.06em}
.shead .ts{font-size:clamp(18px,2.9vw,27px)}
.shead p{color:var(--ink-3);margin:18px 0 0;font-size:15.5px;max-width:56ch}

/* ---------- thư viện ---------- */
.grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(276px,100%),1fr))}
.card{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s;min-width:0;
  box-shadow:0 18px 40px -22px rgba(10,13,20,.75)}
.card:hover{border-color:rgba(88,139,200,.5)}
.art{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden}
.art::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,19,26,.10) 0%,rgba(15,21,29,.26) 60%,rgba(15,21,29,.58) 100%)}
.cbody{padding:13px 14px 0;min-width:0}
.cbody .tt{font-size:clamp(20px,2vw,25px);letter-spacing:-.004em}
.cbody .ts{font-size:16.5px;color:rgba(255,255,255,.82);margin-top:1px}
.tag{position:absolute;z-index:2;bottom:11px;right:11px;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:rgba(14,18,25,.78);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:4px 10px;font-variant-numeric:tabular-nums}
.tag.on-air{background:var(--live);border-color:transparent;letter-spacing:.1em;
  display:flex;align-items:center;gap:6px}
.tag.on-air i{width:6px;height:6px;border-radius:50%;background:#fff;display:block}
.meta{display:flex;align-items:center;gap:8px;padding:9px 14px 0;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.foot{display:flex;gap:9px;padding:11px 14px 14px;margin-top:auto}
.foot .btn{flex:1;min-height:44px;padding:0 10px;font-size:11.5px;border-radius:10px;letter-spacing:.05em}

.a1,.a2,.a3,.a4,.a5,.a6{position:absolute;inset:0;z-index:-3}
.art .cover{position:absolute;inset:0;z-index:-2;display:block}
.art .cover img{width:100%;height:100%;object-fit:cover;display:block}
.streak::before,.streak::after{content:"";position:absolute;inset:-30%}
.streak::before{opacity:.2;
  background:repeating-linear-gradient(75deg,transparent 0 15px,rgba(217,231,244,.85) 15px 16.5px)}
.streak::after{opacity:.11;
  background:repeating-linear-gradient(78deg,transparent 0 27px,rgba(217,231,244,.7) 27px 28.5px)}
.a1{background:linear-gradient(163deg,#14424f,#19222C 56%,#121922)}
.a2{background:linear-gradient(168deg,#2C3641,#202834 58%,#121820)}
.a3{background:linear-gradient(172deg,#123a2c,#0a2422 60%,#0D1319)}
.a4{background:linear-gradient(160deg,#25323E,#202935 55%,#11161F)}
.a5{background:linear-gradient(168deg,#253342,#212D3C 58%,#131A25)}
.a6{background:linear-gradient(165deg,#3d3320,#22262D 62%,#12161E)}
.a4::after{background:radial-gradient(ellipse 62% 42% at 60% 20%,rgba(197,215,238,.34),transparent 62%);
  opacity:1;inset:0}
.a6::after{background:radial-gradient(ellipse at 46% 90%,rgba(255,186,96,.5),transparent 58%);
  opacity:1;inset:0}

/* danh sách phát */
.lists{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.lists a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border:1px solid var(--line-2);border-radius:999px;text-decoration:none;font-size:13px;
  font-weight:700;color:var(--ink-2);transition:border-color .18s,color .18s}
.lists a:hover{border-color:rgba(88,139,200,.55);color:var(--ink)}

/* lời nhắn nhỏ */
.aside-note{display:flex;gap:14px;align-items:flex-start;margin-top:30px;padding:18px 20px;
  border:1px solid var(--line);border-radius:15px;background:var(--night)}
.aside-note .ic{font-size:20px;line-height:1.2}
.aside-note p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:60ch}

/* ---------- letters ---------- */
.posts{display:grid;border-top:1px solid var(--line-2)}
.post{display:grid;gap:5px 30px;padding:24px 0;border-bottom:1px solid var(--line-2);
  text-decoration:none;transition:padding-left .22s}
@media(min-width:820px){.post{grid-template-columns:136px 1fr auto;align-items:baseline}}
.post:hover{padding-left:10px}
.post .date{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post .date time{display:block;color:var(--ink-3)}
.post .date em{display:block;font-style:normal;font-weight:600;margin-top:3px;opacity:.78}
.post .ttl{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(19px,2.4vw,27px);margin:0;transition:color .18s}
.post .ts{font-size:17px;color:var(--ink-3)}
.post .read{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;white-space:nowrap}
.post:hover .ttl{color:var(--accent)}
.soon{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* ---------- chế độ ngủ ---------- */
/* "Vùng tối nhất" — hoà dần từ indigo ở hai mép để không nhảy tối↔sáng đột ngột */
.sleep{background:
  radial-gradient(ellipse 88% 58% at 50% 0%,rgba(63,75,96,.55),transparent 66%),
  linear-gradient(180deg,var(--backdrop) 0%,var(--night) 12%,#0F1521 50%,var(--night) 88%,var(--backdrop) 100%)}
/* Flex chứ không phải grid: 5 mốc thời lượng chia không hết hàng, flex cho thẻ
   cuối giãn kín hàng thay vì đứng lẻ. */
.modes{display:flex;flex-wrap:wrap;gap:11px}
.mode{flex:1 1 232px;min-width:0;display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:15px;padding:15px 16px;transition:border-color .2s;
  box-shadow:0 14px 34px -22px rgba(10,13,20,.8)}
.mode:hover{border-color:rgba(88,139,200,.5)}
.mode .t{flex:1;min-width:0}
.mode .dur{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.mode .t b{display:block;font-size:16px;font-weight:800;letter-spacing:0;margin-top:1px}
.mode .t span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* Nút "Start" dạng pill có chữ — theo mockup Sleepdeep, không phải nút tròn chỉ-icon */
.go{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;
  min-height:44px;padding:0 17px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--night);font-family:var(--display);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .16s,background .18s}
.go:hover{transform:translateY(-1px);background:#6695CD}
.go svg{width:12px;height:12px;fill:currentColor;flex:none}
.custom{display:flex;align-items:center;gap:14px;margin-top:11px;padding:14px 16px;
  border:1px dashed var(--line);border-radius:15px}
.custom .t{flex:1;min-width:0}
.custom .t b{display:block;font-size:15px;font-weight:800;color:var(--ink-2)}
.custom .t span{display:block;font-size:12.5px;color:var(--ink-3)}
.custom .go{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.custom .go:hover{background:rgba(122,142,167,.12)}
.custom .go svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fineprint{margin-top:22px;font-size:13.5px;color:var(--muted);max-width:64ch}

/* ---------- giới thiệu ---------- */
.about{display:grid;gap:clamp(28px,4.6vw,60px)}
/* Ô lưới mặc định có min-width:auto nên không co được dưới kích thước
   nội dung tối thiểu → tràn ngang trên màn rất hẹp. */
.about > *{min-width:0}
.about h2,.about p,.about .ts{overflow-wrap:break-word}
@media(min-width:920px){.about{grid-template-columns:1.22fr .92fr;align-items:start}}
.about h2{font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.98;
  font-size:clamp(28px,5vw,50px);margin:0}
.about p{color:var(--ink-2);font-size:16.5px;line-height:1.8;margin:0 0 18px;max-width:62ch}
.about .pull{font-family:var(--hand);font-size:clamp(19px,2.4vw,26px);color:var(--ink);
  border-left:2px solid var(--accent);padding-left:20px;margin:26px 0;line-height:1.5}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;
  box-shadow:0 22px 50px -26px rgba(10,13,20,.7)}
.gear{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.gear span{font-size:13px;color:var(--ink-3)}
.gear b{font-size:14px;font-weight:700;text-align:right}
.social{display:grid;gap:8px;margin-top:20px}
.social a{display:flex;align-items:center;gap:11px;min-height:46px;padding:0 14px;border-radius:11px;
  border:1px solid var(--line-2);text-decoration:none;font-size:13.5px;font-weight:700;
  color:var(--ink-2);transition:border-color .18s,color .18s}
.social a:hover{border-color:rgba(88,139,200,.55);color:var(--ink)}
.social svg{width:17px;height:17px;flex:none;fill:currentColor}
.social .h{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}

/* ---------- hợp tác ---------- */
.collab{display:grid;gap:clamp(26px,4vw,52px)}
.collab > *{min-width:0}
.collab h2,.collab p,.collab .ts{overflow-wrap:break-word}
@media(min-width:920px){.collab{grid-template-columns:1.15fr .85fr;align-items:start}}
.collab h2{font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.98;
  font-size:clamp(28px,5vw,50px);margin:0}
.collab p{color:var(--ink-2);font-size:16.5px;line-height:1.8;margin:0 0 18px;max-width:60ch}
.collab .cta{margin-top:22px}
.figs{display:grid;margin:0}
.fig{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.fig:last-child{border-bottom:0}
.fig span{font-size:13px;color:var(--ink-3)}
.fig b{font-size:15px;font-weight:800;text-align:right}

footer{border-top:1px solid var(--line-2);
  padding-block:40px calc(52px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;
  gap:16px 30px;align-items:center;color:var(--muted);font-size:13px}
footer .brand{margin-right:auto}
footer a{text-decoration:none;color:var(--ink-3);display:inline-flex;align-items:center;min-height:44px}
footer a:not(.brand){justify-content:center;min-width:44px;padding:0 8px}
footer a:hover{color:var(--ink)}

/* ---------- trang thư (letters/*.html) ----------
   Cột chữ CĂN GIỮA màn hình, không dồn trái: bài đọc dài thì mắt
   cần một cột cân đối, còn lề hai bên phải bằng nhau ở mọi khổ. */
.lwrap{max-width:38em;margin:0 auto;padding-inline:clamp(20px,5vw,26px);
  padding-inline:max(clamp(20px,5vw,26px),env(safe-area-inset-left))}

/* Ảnh bìa tràn hết chiều ngang, hoà dần xuống nền đêm ở mép dưới */
.lhero{position:relative;height:clamp(210px,40vh,400px);overflow:hidden;isolation:isolate}
.lhero picture{position:absolute;inset:0;z-index:0;display:block}
.lhero picture img{width:100%;height:100%;object-fit:cover;display:block}
.lhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(20,28,44,.34) 0%,rgba(20,28,44,.12) 34%,rgba(20,28,44,.72) 78%,var(--backdrop) 100%)}
.lhero .back{position:absolute;z-index:2;top:14px;left:0;right:0;margin:0 auto;max-width:38em;
  padding-inline:clamp(20px,5vw,26px)}

.back{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  text-shadow:0 1px 10px rgba(10,13,20,.7)}
.back:hover{color:var(--ink)}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.letter{padding-bottom:clamp(56px,9vh,104px)}
.lhead{margin:clamp(22px,3.6vh,38px) 0 clamp(30px,4.6vh,46px)}
.lhead h1{font-weight:900;text-transform:uppercase;letter-spacing:-.014em;line-height:1;
  font-size:clamp(29px,4.6vw,46px);margin:0;text-wrap:balance}
.lhead .ts{font-size:clamp(17px,2.1vw,21px);margin-top:.34em}
.lmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line-2);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.lmeta .st{color:var(--accent)}

.prose{font-size:clamp(16.5px,1.75vw,18.5px);line-height:1.8;color:var(--ink-2)}
.prose > p{margin:0 0 1.35em}
.prose > p:first-of-type{font-size:1.1em;line-height:1.68;color:var(--ink)}
.prose h2{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--ink);
  letter-spacing:-.006em;line-height:1.08;font-size:clamp(19px,2.3vw,24px);
  margin:2.3em 0 .8em;padding-top:1.1em;border-top:1px solid var(--line-2)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--accent)}

/* Câu trích — canh giữa, để mắt nghỉ giữa các mảng chữ */
.pull{margin:2.2em 0;text-align:center}
.pull p{font-family:var(--hand);transform:skewX(-8deg);color:var(--ink);
  font-size:clamp(20px,2.7vw,27px);line-height:1.46;margin:0;text-wrap:balance}

/* Dấu kết bài */
.lsig{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:2.6em 0 0;color:var(--line-2)}
.lsig::before,.lsig::after{content:"";height:1px;flex:1;max-width:70px;background:currentColor}
.lsig img{width:26px;height:26px;opacity:.65}

/* Khối cuối bài — người đọc xong thì đẩy sang YouTube (mục tiêu #2 của site) */
.lend{margin-top:clamp(38px,6vh,58px);background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3.4vw,28px);
  box-shadow:0 18px 40px -22px rgba(10,13,20,.75);text-align:center}
.lend p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px;line-height:1.62}
.lend .btn{width:100%}

.lnav{display:grid;gap:11px;margin-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--line-2);padding-top:24px}
@media(min-width:660px){.lnav{grid-template-columns:1fr 1fr}}
.lnav a{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:44px;
  text-decoration:none;padding:14px 16px;border:1px solid var(--line-2);border-radius:13px;
  transition:border-color .2s,background .2s}
.lnav a:hover{border-color:rgba(88,139,200,.5);background:rgba(88,139,200,.05)}
.lnav a:only-child{grid-column:1/-1}
.lnav .dir{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lnav b{font-weight:800;text-transform:uppercase;letter-spacing:-.004em;line-height:1.14;
  font-size:15px;color:var(--ink)}