/* Bài toán tiền mặt bằng phòng gym - style chính */
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url("fonts/BeVietnamPro-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

:root{
  --bg:#101214; --panel:#1B1E21; --track:#22262A; --line:#2C3034;
  --ink:#F4F1EC; --muted:#CFC9BF; --muted2:#B8B2A8; --muted3:#9E988E;
  --paper:#F4F1EC; --paper2:#E6E1D8; --dark:#141414; --sub:#4A463F; --sub2:#5C574F;
  --accent:#FF7A2F; --accent-deep:#C2410C; --dot-off:#D6D0C6; --chip-line:#BDB6AB;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:clamp(28px,7vw,80px) clamp(18px,7vw,80px) clamp(28px,6vw,64px);display:flex;flex-direction:column;gap:clamp(28px,4.5vw,48px)}
h1{margin:0;font-size:clamp(44px,8vw,84px);line-height:1.02;font-weight:900;letter-spacing:-.025em}
.lead{margin:0;font-size:clamp(17px,2.6vw,28px);line-height:1.45;color:var(--muted);max-width:860px}
.stats{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vw,24px)}
.stat{background:var(--panel);border-radius:clamp(18px,2.6vw,28px);padding:clamp(20px,3.4vw,36px);display:flex;flex-direction:column;gap:10px}
.stat .k{font-size:clamp(14px,2vw,22px);color:var(--muted2);font-weight:500}
.stat .v{white-space:nowrap;font-size:clamp(28px,7.6vw,88px);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .u{font-size:clamp(15px,2.4vw,26px);font-weight:600}
.stat .s{font-size:clamp(13px,1.9vw,20px);color:var(--muted3)}
.accent{color:var(--accent)}

.calc{background:var(--paper);color:var(--dark);border-radius:clamp(20px,3vw,32px);padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px)}
.calc h2{margin:0;font-size:clamp(26px,3.7vw,40px);font-weight:800;letter-spacing:-.02em}
.calc .hint{font-size:clamp(14px,1.9vw,20px);color:var(--sub2)}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.group{display:flex;flex-direction:column;gap:12px}
.glabel{font-size:clamp(14px,1.9vw,20px);font-weight:600;color:var(--sub2)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{min-height:48px;padding:0 clamp(16px,2.6vw,28px);border-radius:999px;font:inherit;font-size:clamp(15px,2vw,22px);font-weight:700;border:2px solid var(--chip-line);background:transparent;color:var(--dark);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.9vw,20px)}
.res{border-radius:clamp(16px,2vw,22px);padding:clamp(18px,2.6vw,28px);display:flex;flex-direction:column;gap:6px}
.res.a{background:var(--paper2)} .res.b{background:var(--dark);color:var(--paper)}
.res .k{font-size:clamp(14px,1.9vw,20px);font-weight:600}
.res.a .k,.res.a .s{color:var(--sub)} .res.b .k,.res.b .s{color:var(--muted)}
.res .n{font-size:clamp(44px,7vw,76px);font-weight:900;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.res .s{font-size:clamp(13px,1.9vw,20px)}
.legend{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-size:clamp(13px,1.7vw,18px);color:var(--sub)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.sw{width:14px;height:14px;border-radius:50%;display:inline-block}
.dots{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:clamp(3px,.75vw,8px)}
.dot{aspect-ratio:1;border-radius:50%;background:var(--dot-off);transform:scale(.7);transition:background-color .5s ease,transform .5s ease}
.dot.on-a{background:var(--dark);transform:scale(1)}
.dot.on-b{background:var(--accent-deep);transform:scale(1)}


.foot{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:24px}
.foot p{margin:0;font-size:clamp(13px,1.9vw,20px);line-height:1.5;color:var(--muted2)}
.foot .src{font-size:clamp(12px,1.7vw,18px);color:var(--muted3)}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.fu{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.35s}.d3{animation-delay:.6s}.d4{animation-delay:.85s}.d5{animation-delay:1.1s}

@media (max-width:560px){
  .stats,.results{grid-template-columns:minmax(0,1fr)}
  .dots{grid-template-columns:repeat(20,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fu{opacity:1}
}
.foot em{font-style:italic}