/* Trang tarot và xem độ hợp. Cùng bộ màu với trang chủ; chỉ giữ phần hai trang này thật sự dùng. */
:root{
  --bg:#140D18; --bg2:#1B1221; --surface:#20152A; --surface2:#2B1D36; --line:#3A2946;
  --ink:#F6ECEF; --muted:#C2ADBE; --accent:#F4A3A8; --on-accent:#2A0F1A; --coral:#FF9E7A;
  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --body:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);
  background-image:radial-gradient(90% 50% at 15% 0%,rgba(244,163,168,.20),transparent 60%),
                   radial-gradient(70% 40% at 100% 20%,rgba(255,158,122,.12),transparent 60%);
  background-repeat:no-repeat}
a{color:var(--accent)}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--display);font-style:italic;font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6.5vw,58px)}
h2{font-size:clamp(24px,4vw,34px)}
p{margin:0}
.wrap{max-width:720px;margin:0 auto;padding-inline:20px}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.note{font-size:12px;color:var(--muted)}

header{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(20,13,24,.72);
  border-bottom:1px solid rgba(58,41,70,.6);padding-top:env(safe-area-inset-top,0px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:62px;gap:12px;max-width:1080px}
.logo{font:italic 600 30px var(--display);text-decoration:none;color:var(--ink)}
@media (max-width:420px){.logo{font-size:24px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 24px;
  border-radius:999px;border:0;cursor:pointer;background:var(--accent);color:var(--on-accent);font-weight:600;
  text-decoration:none;transition:transform .15s ease-out}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
header .btn{min-height:40px;padding:8px 16px;font-size:14px}

main{padding-block:36px 56px}
.intro{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.intro p{color:var(--muted);max-width:46ch}

.panel{border:1px solid var(--line);border-radius:22px;padding:22px;
  background:linear-gradient(160deg,rgba(32,21,42,.95),rgba(43,29,54,.8));display:flex;flex-direction:column;gap:14px}
.panel + .panel{margin-top:18px}

/* lá bài */
.la{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
/* Lá phải đủ nhỏ để cả lá lẫn lời giải cùng nằm trong một màn điện thoại. Lá to hơn thì
   đẹp hơn, nhưng đẩy phần chữ xuống dưới fold và người ta bỏ đi trước khi đọc. */
.mat{width:min(168px,42vw);aspect-ratio:3/4.4;border-radius:18px;display:grid;place-items:center;
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 25%,rgba(244,163,168,.30),transparent 70%),linear-gradient(160deg,#2a1631,#0d0710);
  transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.mat .ky{font-size:46px;line-height:1;color:var(--accent);font-variant-emoji:text}
.mat.lat{transform:rotateY(180deg) scaleX(-1)}
.mat.nguoc .ky{transform:rotate(180deg)}
/* Kết quả cũng phải là flex-column căn giữa, không thì cái nhãn "Lá xuôi" kéo dài hết bề ngang. */
.la #ket-qua{display:flex;flex-direction:column;align-items:center;gap:6px}
.la .so{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.la .ten{font:italic 600 clamp(30px,6vw,42px)/1.05 var(--display)}
.la .goc{font-size:13px;color:var(--muted)}
.la .chieu{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 12px;color:var(--muted)}
.la .loi{font-size:17px;max-width:44ch;line-height:1.55;margin-top:2px}

/* thẻ cung */
.zcard{border:1px solid var(--line);border-radius:22px;padding:20px;
  background:linear-gradient(160deg,rgba(32,21,42,.95),rgba(43,29,54,.8));display:flex;flex-direction:column;gap:10px}
.zcard .eyebrow{display:flex;gap:8px;align-items:center}
.zcard .sym{font-size:20px;color:var(--accent);font-variant-emoji:text;letter-spacing:0}
.zcard p.line{font:italic 600 clamp(24px,4.5vw,32px)/1.15 var(--display)}
.facets{display:flex;flex-wrap:wrap;gap:6px}
.facets span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.facets em{font-style:normal;color:var(--muted);margin-right:4px}

/* nhập liệu */
.hang{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.o{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0}
.o label{font-size:13px;color:var(--muted)}
.o input{min-height:50px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink);width:100%}
.err{font-size:13px;color:var(--coral);min-height:20px}

/* điểm hợp */
.diem{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vong{--p:0;flex:none;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.vong b{width:88px;height:88px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;
  font:italic 600 32px var(--display)}
.cap{display:flex;gap:10px;flex-wrap:wrap}
.cap span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.cap i{font-style:normal;color:var(--accent);margin-right:6px}

/* mời sang trò chuyện */
.moi{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.moi .hoi{font:italic 600 clamp(20px,3.6vw,26px)/1.2 var(--display)}
.moi .cta{display:flex;flex-wrap:wrap;gap:10px}

footer{border-top:1px solid var(--line);padding-block:22px;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted);max-width:1080px}