:root{
  --red:#B3121D; --red-velvet:#9E2A35; --red-deep:#7E0B12; --red-soft:#E39A97;
  --blush:#F5E1DC; --ivory:#FBF4F0; --ivory-2:#FAF8F6; --studio:#E3E5E8;
  --ink:#2A1714; --ink-2:#16110F; --mute:#8C8584; --gold:#C9A45C;

  --f-display:'Playfair Display', 'Times New Roman', serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --f-hand:'Dancing Script', cursive;
  --f-body:'Be Vietnam Pro', system-ui, sans-serif;

  --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .2  0 0 0 0 .15  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --ease-out: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--ivory); }
html.locked, html.locked body{ overflow:hidden; height:100%; overscroll-behavior:none; }
body{
  margin:0; min-height:100%;
  background:var(--ivory); color:var(--ink);
  font:300 16px/1.7 var(--f-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
[hidden]{ display:none !important; }
::selection{ background:var(--red); color:var(--ivory); }

/* Mask cho hiệu ứng chữ trượt lên */
.mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.mask .line{ display:block; will-change:transform; }

/* Nhãn mono dùng chung hai hồi */
.label{
  margin:0; font:500 11.5px/1.4 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--red);
}

/* Tem răng cưa: kích thước nên là bội số của --p để mép đều */
.perf{
  --p:12px; --r:3.6px;
  padding:calc(var(--p) / 2);
  -webkit-mask:
    radial-gradient(circle at 50% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) calc(var(--p) / -2) calc(var(--p) / -2) / var(--p) var(--p),
    linear-gradient(#000 0 0) content-box;
          mask:
    radial-gradient(circle at 50% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) calc(var(--p) / -2) calc(var(--p) / -2) / var(--p) var(--p),
    linear-gradient(#000 0 0) content-box;
}

/* Con dấu cao su đỏ (ĐÃ NHẬN, ĐÃ PHÁT, ĐÃ GỬI...) */
.rubber{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  opacity:0; visibility:hidden; pointer-events:none; z-index:3;
  padding:5px 10px 4px; border:2.5px solid var(--red); border-radius:5px;
  color:var(--red); background:transparent;
  font:600 13px/1 var(--f-mono); letter-spacing:.16em; white-space:nowrap;
  box-shadow:inset 0 0 0 2px var(--ivory), inset 0 0 0 3.5px var(--red);
  filter:url(#ink);
  mix-blend-mode:multiply;
}

/* Chữ đánh máy */
.typed::after{
  content:""; display:inline-block; width:.55em; height:1.05em; margin-left:2px; vertical-align:-.18em;
  background:currentColor; opacity:0;
}
.typed.typing::after{ animation:caret .8s steps(1) infinite; }
@keyframes caret{ 0%,49%{ opacity:.8 } 50%,100%{ opacity:0 } }

/* ===== Loader ===== */
.loader{
  position:fixed; inset:0; z-index:90; display:grid; place-content:center; justify-items:center; gap:18px;
  background:var(--ivory) var(--paper); color:var(--red);
}
.loader-mark{ width:112px; height:112px; color:var(--red); animation:spin 9s linear infinite; }
@keyframes spin{ to{ rotate:360deg } }
.loader-text{ margin:0; font:400 11px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink); opacity:.7; }
.loader-text b{ font-weight:600; color:var(--red); font-variant-numeric:tabular-nums; display:inline-block; min-width:4ch; text-align:right; }

/* ===== Nút nhạc ===== */
.music{
  position:fixed; z-index:80; left:max(14px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px;
  border:1px solid rgb(42 23 20 / .14); border-radius:999px;
  background:rgb(251 244 240 / .86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 10px/1 var(--f-mono); letter-spacing:.2em; color:var(--ink);
}
.music svg{ width:28px; height:28px; }
.music circle{ fill:none; stroke:var(--ink); stroke-width:1.2; }
.music circle:first-child{ fill:var(--ink); stroke:none; }
.music circle:nth-child(2){ fill:var(--red); stroke:none; }
.music circle:last-child{ fill:var(--ivory); stroke:none; }
.music.playing svg{ animation:spin 3.2s linear infinite; }
.music:not(.playing) span{ text-decoration:line-through; text-decoration-color:var(--red); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}