.df-*/.dfp-*/.dq-*/.dr-*/.drs-* define ở đây. Hue nền = hồng 338; ring duyên đổi màu theo tone. */ .duyen-home{text-align:center}.duyen-home .title{margin-bottom:14px}.duyen-home .lede{max-width:600px;margin-left:auto;margin-right:auto}.duyen-form{max-width:560px;margin:24px auto 6px;padding:22px 20px;display:flex;flex-direction:column;gap:16px}.df-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.df-person{display:flex;flex-direction:column;gap:8px;text-align:left}.dfp-tag{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.dfp-a{color:#f0a8c2}.dfp-b{color:#a0d4ee}.df-person input{width:100%;border-radius:12px;padding:11px 13px;font-family:inherit;font-size:.95rem;color:var(--text);background:#351d266b;border:1px solid hsl(338 45% 58% / .3);outline:0;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}.df-person input::placeholder{color:var(--text-faint)}.df-person input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #e9c98426}.df-heart{font-size:1.6rem;color:#ee8baf;filter:drop-shadow(0 0 10px hsl(338 70% 60% / .7));animation:df-beat 1.8s var(--ease) infinite;align-self:center;margin-top:18px}@keyframes df-beat{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.duyen-submit{align-self:center;font-size:1.02rem;padding:13px 28px}.duyen-hint{font-size:.8rem;color:var(--text-faint);text-align:center;margin:0}.duyen-quick{max-width:560px;margin:30px auto 0;padding:18px;border-radius:18px;border:1px solid hsl(42 45% 56% / .2);background:#352e1d38}.duyen-quick-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-align:center;margin:0 0 4px}.duyen-quick-sub{font-size:.84rem;color:var(--text-muted);text-align:center;margin:0 0 14px}.dq-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.dq-sel{font-family:inherit;font-size:.92rem;color:var(--text);background:#3b212a99;border:1px solid hsl(338 45% 58% / .32);border-radius:10px;padding:9px 12px;outline:0}.dq-x{color:var(--text-muted)}.dq-go{padding:9px 16px;font-size:.9rem}.duyen-disc{max-width:600px;margin:34px auto 0}.duyen-result{max-width:720px;margin:0 auto;text-align:center;--rc1: #f4dca0;--rc2: #e87da3}.duyen-result.tone-kha{--rc1: #e9c984;--rc2: #e0a85e}.duyen-result.tone-hoa{--rc1: #b9a3f0;--rc2: #8ba0ee}.duyen-back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-muted);background:transparent;border:0;cursor:pointer;padding:6px 4px;margin-bottom:12px;transition:color .2s var(--ease);font-family:inherit}.duyen-back:hover{color:var(--gold-bright)}.dr-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px}.dr-names{font-size:.95rem;color:var(--text-dim)}.dr-amp{color:#ee8baf;margin:0 4px}@property --pct{syntax: "<number>"; inherits: false; initial-value: 0;}@keyframes drFill{0%{--pct: 0}}.dr-ring{position:relative;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;margin:6px auto 4px;background:conic-gradient(from -90deg,var(--rc1),var(--rc2) calc(var(--pct) * 1%),hsl(338 26% 26% / .45) 0);animation:drFill 1.2s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){.dr-ring{animation:none}}.dr-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1a1030,#0c0a1e)}.dr-ring-num{position:relative;font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:#fff;line-height:1}.dr-ring-num i{font-style:normal;font-size:1rem;color:var(--text-muted);margin-left:1px}.dr-band{font-family:var(--font-display);font-size:clamp(1.7rem,5.5vw,2.4rem);font-weight:700;line-height:1.1;margin:2px 0 4px}.dr-ids{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;font-size:.82rem;color:var(--text-dim)}.dr-vs{color:var(--text-faint)}.dr-synthesis{font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:#f4ecf2;line-height:1.6;max-width:580px;margin:12px auto 0;text-wrap:pretty}.dr-block{margin-top:26px;text-align:left}.dr-h{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;margin:0 0 16px;text-align:center}.dr-systems{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dr-sys{padding:16px 18px;border-radius:16px;display:flex;flex-direction:column;gap:10px}.drs-head{display:flex;align-items:center;gap:10px}.drs-glyph{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:1.05rem;color:#f2b0c8;background:#68273f80;border:1px solid hsl(338 55% 62% / .36)}.drs-headtext{display:flex;flex-direction:column;line-height:1.2}.drs-label{font-weight:700;font-size:.96rem;color:#fff}.drs-rel{font-size:.76rem;color:var(--text-muted)}.drs-score{margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:#f1b1c9}.drs-bar{height:6px;border-radius:999px;background:#60394766;overflow:hidden}.drs-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f4dca0,#e87da3)}.drs-text{margin:0;font-size:.92rem;color:var(--text-dim);line-height:1.65}.drs-link{font-size:.84rem;color:#eeaac3;transition:color .2s var(--ease)}.drs-link:hover{color:#fff}.duyen-result .actions{justify-content:center;margin-top:24px}.duyen-result .disclaimer{max-width:580px;margin-left:auto;margin-right:auto}@media(max-width:560px){.df-pair{grid-template-columns:1fr}.df-heart{margin:4px auto;transform:rotate(90deg)}.dr-systems{grid-template-columns:1fr}}