/* ==========================================================================
   GIAO DIỆN APP Ms.Pi
   Thiết kế cho điện thoại trước. Chữ đủ to để đọc khi đang ở phòng tập.
   ========================================================================== */

:root{
  --hong:#D62F63;
  --hong-dam:#A81E4B;
  --hong-nhat:#FBE6EE;
  --den:#17121A;
  --xam:#6B606A;
  --xam-nhat:#9C8F98;
  --vien:#EADFE6;
  --vien-mo:#F4EDF1;
  --nen:#FBF7F9;
  --the:#FFFFFF;
  --the-2:#F6EFF3;
  --xanh:#1F7A5C;
  --xanh-nhat:#E3F3EC;
  --vang:#A16400;
  --vang-nhat:#FBF0DC;
  --do:#BE2F26;
  --do-nhat:#FBE7E4;
  --bong:0 1px 2px rgba(23,18,26,.05), 0 8px 24px -12px rgba(23,18,26,.15);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--nen); color:var(--den);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.so{font-variant-numeric:tabular-nums}

/* ---------- khung ---------- */
.man{display:none; flex-direction:column; min-height:100vh}
.man.hien{display:flex}

.thanh-tren{
  position:sticky; top:0; z-index:10; background:var(--the);
  border-bottom:1px solid var(--vien-mo);
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  display:flex; align-items:center; gap:12px;
}
.thanh-tren h1{margin:0; font-size:19px; font-weight:750; letter-spacing:-.02em; flex:1}
.thanh-tren .phu{font-size:12.5px; color:var(--xam-nhat); font-weight:500}

.noi-dung{flex:1; padding:16px; display:flex; flex-direction:column; gap:14px; max-width:640px; width:100%; margin:0 auto}

/* ---------- thanh tab dưới ---------- */
.thanh-duoi{
  position:sticky; bottom:0; z-index:10; display:flex;
  background:var(--the); border-top:1px solid var(--vien);
  padding-bottom:env(safe-area-inset-bottom);
}
.thanh-duoi button{
  flex:1; appearance:none; border:0; background:none; font:inherit; cursor:pointer;
  color:var(--xam-nhat); font-size:11px; font-weight:650;
  padding:10px 2px 12px; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.thanh-duoi button[aria-selected="true"]{color:var(--hong)}
.thanh-duoi .bt{font-size:17px; line-height:1}

/* ---------- thẻ ---------- */
.the{background:var(--the); border:1px solid var(--vien); border-radius:14px; padding:15px}
.the.mo{background:var(--the-2)}
.nhan{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--xam-nhat); display:block}

/* ---------- nút ---------- */
.nut{
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:650; font-size:15px;
  background:var(--hong); color:#fff; border-radius:12px; padding:14px 16px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
}
.nut:active{opacity:.85}
.nut:disabled{opacity:.5; cursor:default}
.nut.vien{background:transparent; color:var(--hong-dam); border:1px solid var(--vien)}
.nut.nho{padding:9px 14px; font-size:13.5px; width:auto}
.nut:focus-visible{outline:2px solid var(--hong); outline-offset:2px}

/* ---------- ô nhập ---------- */
label.o{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600}
label.o span.goi-y{font-weight:400; font-size:12px; color:var(--xam)}
input,select,textarea{
  font:inherit; font-size:16px; /* 16px để iPhone không tự phóng to */
  padding:12px 14px; border:1px solid var(--vien); border-radius:11px;
  background:var(--the); color:var(--den); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hong); outline-offset:-1px; border-color:transparent}
.hang{display:flex; gap:10px}
.hang > *{flex:1; min-width:0}

label.tich{
  display:flex; align-items:flex-start; gap:11px; font-size:14px; font-weight:500;
  padding:11px 13px; border:1px solid var(--vien); border-radius:11px; background:var(--the);
  cursor:pointer;
}
label.tich input{width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:var(--hong)}

/* ---------- vòng calo ---------- */
.vong{display:flex; align-items:center; gap:16px}
.vong .lon{font-size:32px; font-weight:400; line-height:1; font-family:Georgia,serif}
.vong .duoi{font-size:13px; color:var(--xam); margin-top:4px}
.vong .con{font-size:13px; font-weight:650; margin-top:6px}

/* ---------- macro ---------- */
.macro{display:flex; flex-direction:column; gap:6px; margin-top:11px}
.macro .dong{display:flex; justify-content:space-between; align-items:baseline; font-size:13px}
.thanh{height:7px; border-radius:99px; background:var(--vien); overflow:hidden}
.thanh i{display:block; height:100%; border-radius:99px; transition:width .3s}

/* ---------- danh sách ---------- */
.dong-mon{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--vien-mo)}
.dong-mon:last-child{border-bottom:0; padding-bottom:0}
.dong-mon .ten{flex:1; min-width:0}
.dong-mon .ten b{display:block; font-size:14px; font-weight:650}
.dong-mon .ten span{font-size:12px; color:var(--xam)}
.dong-mon .kc{font-size:13.5px; white-space:nowrap; color:var(--xam); font-variant-numeric:tabular-nums}
.dong-mon .xoa{
  appearance:none; border:0; background:none; color:var(--xam-nhat); font-size:18px;
  cursor:pointer; padding:0 2px; line-height:1;
}

.the-nguoi{
  display:flex; gap:11px; align-items:center; width:100%; text-align:left;
  appearance:none; border:1px solid var(--vien); background:var(--the); border-radius:13px;
  padding:12px; cursor:pointer; font:inherit; color:inherit;
}
.the-nguoi.co-do{border-color:var(--do); background:var(--do-nhat)}
.anh-dai-dien{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--hong-nhat); color:var(--hong-dam); font-weight:750; font-size:14px;
}
.the-nguoi .ten{flex:1; min-width:0}
.the-nguoi .ten b{display:block; font-size:14.5px; font-weight:650}
.the-nguoi .ten span{font-size:12px; color:var(--xam)}

/* ---------- huy hiệu ---------- */
.hh{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:99px; white-space:nowrap}
.hh.tot{background:var(--xanh-nhat); color:var(--xanh)}
.hh.nhac{background:var(--vang-nhat); color:var(--vang)}
.hh.nguy{background:var(--do-nhat); color:var(--do)}
.hh.hong{background:var(--hong-nhat); color:var(--hong-dam)}

/* ---------- cảnh báo ---------- */
.canh-bao{border-radius:13px; padding:14px; display:flex; flex-direction:column; gap:8px}
.canh-bao.nguy{background:var(--do-nhat); border:1px solid var(--do)}
.canh-bao.nhac{background:var(--vang-nhat); border:1px solid var(--vang)}
.canh-bao h4{margin:0; font-size:14px; font-weight:750}
.canh-bao.nguy h4{color:var(--do)}
.canh-bao.nhac h4{color:var(--vang)}
.canh-bao p{margin:0; font-size:13px; line-height:1.5}
.canh-bao ul{margin:2px 0 0; padding-left:18px; font-size:13px; display:flex; flex-direction:column; gap:5px}

/* ---------- bảng chỉ số ---------- */
table.cs{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:9px}
table.cs td{padding:8px 0; border-bottom:1px solid var(--vien-mo)}
table.cs td:last-child{text-align:right; font-weight:650; font-variant-numeric:tabular-nums}
table.cs tr:last-child td{border-bottom:0}

/* ---------- mã mời ---------- */
.ma-moi{
  font-family:ui-monospace,Menlo,monospace; font-size:34px; font-weight:700;
  letter-spacing:.16em; text-align:center; color:var(--hong-dam);
  background:var(--hong-nhat); border-radius:13px; padding:20px 12px; margin:10px 0 0;
}

/* ---------- linh tinh ---------- */
.trong{text-align:center; color:var(--xam-nhat); font-size:14px; padding:28px 12px; line-height:1.6}
.loi{background:var(--do-nhat); color:var(--do); border-radius:11px; padding:12px 14px; font-size:13.5px; font-weight:600}
.bao{background:var(--xanh-nhat); color:var(--xanh); border-radius:11px; padding:12px 14px; font-size:13.5px; font-weight:600}
.nho-mo{font-size:11.5px; color:var(--xam-nhat); line-height:1.55}
.giua{display:flex; flex-direction:column; justify-content:center; flex:1; gap:16px; padding:22px; max-width:420px; margin:0 auto; width:100%}
.logo{text-align:center; margin-bottom:6px}
.logo b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--hong)}
.logo span{display:block; font-size:13.5px; color:var(--xam); margin-top:2px}

.dang-tai{text-align:center; padding:40px; color:var(--xam-nhat); font-size:14px}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}