:root{
  --night:    #1A1228;
  --night-2:  #0E0918;
  --ember:    #FF7A3D;
  --ember-2:  #FFB07A;
  --glow:     #FFD9A0;
  --ink:      #F3ECE0;
  --muted:    #A293B0;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

body{
  min-height:100svh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% 118%,
      rgba(255,122,61,0.55) 0%,
      rgba(255,122,61,0.18) 26%,
      rgba(26,18,40,0) 58%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 64%, #241632 100%);
  color:var(--ink);
  font-family:"Be Vietnam Pro", system-ui, sans-serif;
  position:relative;
}
/* trang danh sách cần cuộn được */
body.scrolly{ overflow:auto; }
body.locked{ overflow:hidden; }

.embers{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.embers span{
  position:absolute; bottom:-10px;
  width:3px; height:3px; border-radius:50%;
  background:var(--ember-2); opacity:0;
  filter:blur(0.4px); box-shadow:0 0 8px var(--ember);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.7; }
  88%{ opacity:.5; }
  100%{ transform:translateY(-104svh) translateX(var(--drift,20px)); opacity:0; }
}

.halo{
  position:fixed; left:50%; top:48%;
  transform:translate(-50%,-50%);
  width:min(78vw,720px); height:min(78vw,720px);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,160,90,0.28) 0%,
    rgba(255,122,61,0.10) 38%,
    rgba(255,122,61,0) 70%);
  z-index:0; pointer-events:none;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:translate(-50%,-50%) scale(0.92); opacity:.75; }
  50%    { transform:translate(-50%,-50%) scale(1.06); opacity:1; }
}

header{
  position:relative; z-index:2;
  padding:34px clamp(20px,5vw,56px) 0;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:"Be Vietnam Pro", sans-serif;
  font-weight:600; letter-spacing:.16em;
  font-size:15px; text-transform:lowercase; color:var(--ink);
  text-decoration:none;
}
.wordmark::after{ content:"·"; color:var(--ember); margin-left:.18em; }
.toplink{
  font-size:12.5px; letter-spacing:.04em; color:var(--muted);
  text-decoration:none; transition:color .18s ease;
}
.toplink:hover{ color:var(--ember-2); }

main{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:24px clamp(22px,6vw,64px);
}

.eyebrow{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin-bottom:30px;
}

.quote{
  font-family:"Cormorant", Georgia, serif;
  font-style:italic; font-weight:500;
  font-size:clamp(28px, 5.6vw, 58px);
  line-height:1.24; max-width:16ch;
  text-wrap:balance; color:var(--ink);
  transition:opacity .5s ease, transform .5s ease;
}
.quote .mark{ color:var(--ember); font-style:normal; }
.quote.is-out{ opacity:0; transform:translateY(10px); }

.controls{ margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:18px; }

.again, .nav a{
  appearance:none; border:0; cursor:pointer;
  font-family:"Be Vietnam Pro", sans-serif;
  font-weight:500; font-size:15px; letter-spacing:.01em;
  text-decoration:none;
}
.again{
  color:#1A1228;
  background:linear-gradient(180deg, var(--glow), var(--ember));
  padding:13px 26px; border-radius:999px;
  box-shadow:0 8px 30px rgba(255,122,61,0.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.again:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(255,122,61,0.5); filter:brightness(1.05); }
.again:active{ transform:translateY(0); }
.again:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }
.again .arrow{ display:inline-block; transition:transform .18s ease; }
.again:hover .arrow{ transform:translateX(3px); }

/* điều hướng câu trước / câu sau trên trang đơn */
.nav{
  margin-top:14px; display:flex; gap:26px; align-items:center; justify-content:center;
}
.nav a{
  color:var(--muted); font-size:13px;
  transition:color .18s ease; padding:6px 4px;
}
.nav a:hover{ color:var(--ember-2); }
.nav a:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; border-radius:6px; }

.counter{ font-size:12px; letter-spacing:.06em; color:var(--muted); }
.counter b{ color:var(--ember-2); font-weight:600; }

footer{
  position:relative; z-index:2; text-align:center;
  padding:0 20px 26px; font-size:12.5px;
  color:var(--muted); letter-spacing:.02em;
}
footer a{ color:var(--ink); text-decoration:none; font-weight:500; }
footer a:hover{ color:var(--ember-2); }

/* ---- trang "tất cả câu nói" ---- */
.list-wrap{
  position:relative; z-index:2;
  max-width:760px; margin:0 auto;
  padding:60px clamp(22px,5vw,40px) 80px;
}
.list-title{
  font-family:"Cormorant", Georgia, serif;
  font-style:italic; font-weight:600;
  font-size:clamp(34px,6vw,52px); line-height:1.15;
  text-align:center; margin-bottom:14px;
}
.list-sub{
  text-align:center; color:var(--muted);
  font-size:14px; margin-bottom:48px;
}
.qlist{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.qlist li a{
  display:flex; gap:18px; align-items:baseline;
  padding:20px 18px; border-radius:14px;
  text-decoration:none; color:var(--ink);
  transition:background .18s ease, transform .18s ease;
}
.qlist li a:hover{ background:rgba(255,122,61,0.08); transform:translateX(4px); }
.qlist li a:focus-visible{ outline:2px solid var(--glow); outline-offset:2px; }
.qlist .n{
  font-family:"Be Vietnam Pro",sans-serif; font-size:13px; font-weight:600;
  color:var(--ember); min-width:2.4ch; text-align:right;
}
.qlist .t{
  font-family:"Cormorant", Georgia, serif; font-style:italic;
  font-size:clamp(19px,2.6vw,24px); line-height:1.4;
}
.qlist .t .mark{ font-style:normal; color:var(--ember-2); }

@media (max-width:520px){
  .quote{ max-width:14ch; }
  .controls{ margin-top:38px; }
  header{ padding-top:26px; }
}

@media (prefers-reduced-motion: reduce){
  .halo{ animation:none; }
  .embers{ display:none; }
  .quote{ transition:opacity .25s ease; }
  .quote.is-out{ transform:none; }
}

/* Pull to refresh */
.ptr-active {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ptr-indicator {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(26, 18, 40, 0.9);
  border: 1px solid rgba(255, 122, 61, 0.35);
  box-shadow: 0 4px 20px rgba(255, 122, 61, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.1s ease, opacity 0.1s ease, border-color 0.2s, box-shadow 0.2s;
}

.ptr-indicator svg {
  width: 20px;
  height: 20px;
  fill: var(--ember-2);
  transition: transform 0.15s ease, fill 0.15s ease;
}

.ptr-indicator.ptr-ready {
  border-color: var(--ember);
  box-shadow: 0 4px 25px rgba(255, 122, 61, 0.55);
}

.ptr-indicator.ptr-ready svg {
  fill: var(--ember);
  transform: scale(1.1) rotate(180deg);
}

.ptr-indicator.ptr-refreshing svg {
  animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}