/* ══════════════════════════════════════════════════════
   KHOẺ 365 — giao diện cho người lớn tuổi
   Ba luật cứng khi sửa file này:
   1. Không có chữ nào nhỏ hơn 15px.
   2. Không có nút nào thấp hơn 56px — ngón tay người già to và run.
   3. Không dùng màu nhạt trên nền nhạt. Tương phản là ưu tiên số một.
   ══════════════════════════════════════════════════════ */

:root{
  /* ── NỀN & CHỮ (nền giấy, giữ nguyên) ── */
  --nen:        #F6F4EE;
  --nen-the:    #FFFFFF;
  --nen-nhat:   #EFEBE0;
  --chu:        #1F2421;
  --chu-nhat:   #5B6560;
  --vien:       #DED8C8;

  /* ══ BẢNG MÀU HỌC TỪ WHOOP ══
     WHOOP có HAI bảng màu, không phải một. Mình cũng vậy:
       · bảng NEON  → CHỈ dùng trên thẻ tối. Trên nền giấy nó tàng hình (đo được 1,2–1,5:1).
       · bảng ĐẬM   → CHỈ dùng trên nền giấy. Giữ nguyên màu sắc của WHOOP, chỉ hạ độ sáng
                      cho tới khi đạt 6:1 (cao hơn chuẩn 4,5:1 vì mắt người già đục thuỷ tinh thể).
     🚫 ĐỪNG bao giờ đặt màu neon lên nền sáng, hay màu đậm lên thẻ tối. */

  /* bảng NEON — nguyên bản WHOOP, chỉ sống trên thẻ tối */
  --neon-tot:   #16EC06;   /* WHOOP High Recovery 100–67% */
  --neon-vua:   #FFDE00;   /* WHOOP Medium Recovery 66–34% */
  --neon-kem:   #FF0026;   /* WHOOP Low Recovery 33–0% */
  --neon-teal:  #00F19F;   /* WHOOP Teal — nút bấm, điểm nhấn */
  --neon-so:    #0093E7;   /* WHOOP Strain — số KHÔNG phán xét */
  --neon-ngu:   #7BA1BB;   /* WHOOP Sleep */

  /* nền tối của WHOOP — gradient #283339 → #101518 */
  --toi-tren:   #283339;
  --toi-duoi:   #101518;
  --chu-tren-toi:      #FFFFFF;
  --chu-nhat-tren-toi: #A8B4BA;   /* 7,6:1 trên thẻ tối */

  /* bảng ĐẬM — cùng màu sắc WHOOP, đủ tối để đọc trên giấy (đều ≥6:1) */
  --tot:        #0A6C03;   --tot-nhat:  #E7F8E6;
  --chuy:       #6A5C00;   --chuy-nhat: #F6F4E1;   /* thay cho vàng: vàng không làm chữ được */
  --kem:        #BD001C;   --kem-nhat:  #FBF2F3;
  --so:         #006199;   --so-nhat:   #EDF5FA;   /* số trung tính: huyết áp, bước chân */
  --ngu:        #3E6078;   --ngu-nhat:  #EFF4F7;

  /* tên cũ — giữ nguyên để mọi class đang chạy không gãy */
  --xanh:       #006A46;   /* WHOOP Teal hạ tối 6,06:1 — nút, tab, dấu tích */
  --xanh-nhat:  #E5F7F1;
  --cam:        #92490A;   /* 6,00:1 — trước là #C4610E chỉ 3,77:1, chưa đạt */
  --cam-nhat:   #FBEDDF;
  --do:         #BD001C;
  --do-nhat:    #FBF2F3;

  --co-chu:     18px;
  --bo-goc:     16px;
  --bong:       0 1px 3px rgba(31,36,33,.08), 0 4px 14px rgba(31,36,33,.05);
  --bong-toi:   0 2px 6px rgba(16,21,24,.20), 0 10px 28px rgba(16,21,24,.16);
}
html[data-co="lon"]     { --co-chu: 21px; }
html[data-co="rat-lon"] { --co-chu: 25px; }

*{ box-sizing:border-box; margin:0; padding:0; }

/* ⚠ PHẢI CÓ DÒNG NÀY, ĐỪNG XOÁ.
   Thuộc tính hidden của HTML chỉ là display:none ở mức trình duyệt, nên bất kỳ
   class nào đặt display (grid, flex, block...) đều ghi đè nó — phần tử vẫn hiện
   ra dù JS đã đặt hidden = true. Đã vấp thật ngày 03/09/2026: màn đồng ý và nút
   "Gửi đi" không bao giờ ẩn được. */
[hidden]{ display:none !important; }

body{
  font-family:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:var(--co-chu);
  line-height:1.65;
  color:var(--chu);
  background:var(--nen);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}

h1{ font-size:1.5em; line-height:1.3; margin-bottom:.3em; }
h2{ font-size:1.1em; }
h3{ font-size:1.05em; margin:1.2em 0 .4em; }
p { margin-bottom:.7em; }
strong{ font-weight:700; }

/* ── đầu trang ── */
.dau-trang{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  background:rgba(246,244,238,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vien);
}
.ten-app{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.15em; letter-spacing:-.01em; }
.cham-xanh{ width:14px; height:14px; border-radius:50%; background:var(--xanh); box-shadow:0 0 0 4px var(--xanh-nhat); flex:none; }
.ngay-hom-nay{ font-size:.85em; color:var(--chu-nhat); background:var(--nen-the); border:1px solid var(--vien); border-radius:999px; padding:5px 13px; white-space:nowrap; }

/* ── khung màn ── */
main{ padding:18px 16px 24px; max-width:640px; margin:0 auto; }
.man{ animation:hien .25s ease; }
@keyframes hien{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.loi-phu{ color:var(--chu-nhat); margin-bottom:1.1em; }
.loi-chao-hop{ margin-bottom:18px; }

/* ── khối thẻ ── */
.khoi{
  background:var(--nen-the);
  border:1px solid var(--vien);
  border-radius:var(--bo-goc);
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--bong);
}
.khoi-nhat{ background:var(--nen-nhat); box-shadow:none; }
.khoi-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.ghi-chu-nho{ font-size:.85em; color:var(--chu-nhat); margin:10px 0 0; }

/* ── thẻ khẩn cấp ── */
.the-khan{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--do-nhat); border:2px solid var(--do); color:var(--do);
  border-radius:var(--bo-goc); padding:16px; margin-bottom:16px;
  font:inherit; cursor:pointer;
}
.the-khan:active{ transform:scale(.99); }
.khan-icon{ font-size:1.7em; flex:none; }
.khan-chu{ flex:1; display:flex; flex-direction:column; }
.khan-chu strong{ font-size:1.02em; }
.khan-chu small{ font-size:.82em; opacity:.85; }
.mui-ten{ font-size:1.5em; flex:none; }

/* ── việc hôm nay ── */
.dem-viec{ font-weight:800; color:var(--xanh); background:var(--xanh-nhat); border-radius:999px; padding:4px 14px; font-size:.9em; }
.ds-viec{ display:flex; flex-direction:column; gap:10px; }
.viec{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--nen); border:1px solid var(--vien); border-radius:14px;
  padding:15px 16px; min-height:64px; font:inherit; color:inherit; cursor:pointer;
}
.viec:active{ transform:scale(.99); }
.viec-icon{ font-size:1.5em; flex:none; width:1.5em; text-align:center; }
.viec-chu{ flex:1; }
.viec-chu small{ display:block; font-size:.8em; color:var(--chu-nhat); }
.o-tron{ width:32px; height:32px; border-radius:50%; border:2.5px solid var(--vien); flex:none; display:grid; place-items:center; font-size:.95em; color:#fff; }
.viec.xong{ background:var(--xanh-nhat); border-color:var(--xanh); }
.viec.xong .o-tron{ background:var(--xanh); border-color:var(--xanh); }
.viec.xong .viec-chu{ text-decoration:line-through; text-decoration-color:var(--xanh); opacity:.75; }

/* ── hàng số ── */
.hang-so{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.o-so{ background:var(--nen); border:1px solid var(--vien); border-radius:14px; padding:14px; text-align:center; }
.o-so b{ display:block; font-size:1.7em; line-height:1.2; color:var(--xanh); }
.o-so span{ font-size:.82em; color:var(--chu-nhat); }

/* ── ô nhập ── */
.luoi-nhap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:12px; margin-bottom:14px; }
.luoi-nhap label{ display:flex; flex-direction:column; gap:6px; font-size:.85em; color:var(--chu-nhat); }
input[type=number], input[type=text]{
  font:inherit; font-size:1.15em; font-weight:700; color:var(--chu);
  background:var(--nen); border:2px solid var(--vien); border-radius:12px;
  padding:13px 14px; width:100%; min-height:56px;
}
input:focus{ outline:none; border-color:var(--xanh); background:#fff; }

/* ── nút ── */
.nut-chinh, .nut-phu, .nut-nguy{
  display:block; width:100%; min-height:58px; font:inherit; font-weight:700; font-size:1.02em;
  border-radius:14px; cursor:pointer; padding:15px; border:2px solid transparent;
}
.nut-chinh{ background:var(--xanh); color:#fff; }
.nut-chinh:disabled{ background:var(--vien); color:var(--chu-nhat); cursor:not-allowed; }
.nut-phu{ background:var(--nen-the); color:var(--chu); border-color:var(--vien); margin-bottom:16px; }
.nut-nguy{ background:transparent; color:var(--do); border-color:var(--do); margin-top:12px; }
.nut-chinh:active, .nut-phu:active, .nut-nguy:active{ transform:scale(.99); }
.hang-nut{ display:flex; flex-direction:column; gap:10px; }
.hang-nut .nut-phu{ margin-bottom:0; }

.nhom-nut-nho{ display:flex; gap:8px; }
.nut-nho{ font:inherit; font-size:.85em; padding:9px 15px; min-height:44px; border-radius:999px; border:1.5px solid var(--vien); background:var(--nen); color:var(--chu-nhat); cursor:pointer; }
.nut-nho.dang-chon{ background:var(--xanh); border-color:var(--xanh); color:#fff; font-weight:700; }

.nhom-nut-chon{ display:flex; gap:9px; flex-wrap:wrap; }
.nut-chon{ font:inherit; flex:1; min-width:88px; min-height:56px; padding:13px 10px; border-radius:12px; border:2px solid var(--vien); background:var(--nen); color:var(--chu); cursor:pointer; }
.nut-chon.dang-chon{ background:var(--xanh-nhat); border-color:var(--xanh); color:var(--xanh); font-weight:700; }

/* ── cài đặt ── */
.o-cai-dat{ display:flex; flex-direction:column; gap:9px; padding:14px 0; border-bottom:1px solid var(--vien); }
.o-cai-dat:last-child{ border-bottom:none; padding-bottom:0; }
.o-cai-dat > span{ font-weight:600; }

/* ── lời khuyên sau khi ghi số ── */
.loi-khuyen{ margin-top:14px; padding:15px; border-radius:12px; font-size:.95em; border:1.5px solid; }
.loi-khuyen.xanh{ background:var(--xanh-nhat); border-color:var(--xanh); color:var(--tot); }
.loi-khuyen.cam { background:var(--cam-nhat); border-color:var(--cam); color:var(--cam); }
.loi-khuyen.do  { background:var(--do-nhat);  border-color:var(--do);  color:var(--kem); }
.loi-khuyen b{ display:block; margin-bottom:4px; }

/* ── biểu đồ ── */
.bieu-do{ width:100%; overflow-x:auto; }
.bieu-do svg{ width:100%; height:auto; display:block; min-width:280px; }
.tom-tat-so{ margin:12px 0 0; font-size:.95em; }

/* ── danh sách số đo ── */
.ds-so-do{ display:flex; flex-direction:column; gap:9px; }
.dong-so{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--nen); border:1px solid var(--vien); border-radius:12px; padding:13px 15px; }
.dong-so .ngay{ font-size:.85em; color:var(--chu-nhat); }
.dong-so .so{ font-weight:800; font-size:1.1em; }
.cham-mau{ width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:8px; }

/* ── mâm cơm ── */
.dong-mam{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--vien); }
.dong-mam:last-child{ border-bottom:none; padding-bottom:0; }
.mam-buoi{ font-size:.78em; font-weight:800; letter-spacing:.06em; color:var(--cam); text-transform:uppercase; flex:none; width:62px; padding-top:4px; }
.mam-mon{ flex:1; }
.ds-nguyen-lieu{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.vien-nl{ font:inherit; font-size:.92em; padding:11px 15px; min-height:50px; border-radius:999px; border:1.5px solid var(--vien); background:var(--nen); cursor:pointer; }
.vien-nl.dang-chon{ background:var(--cam-nhat); border-color:var(--cam); color:var(--cam); font-weight:700; }
.ket-qua-mon{ margin-top:14px; }
.ket-qua-mon ul{ padding-left:1.2em; }
.ket-qua-mon li{ margin-bottom:.4em; }

/* ── bài học ── */
.ds-bai-hoc{ display:flex; flex-direction:column; gap:11px; }
.the-bai{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--nen-the); border:1px solid var(--vien); border-radius:14px;
  padding:16px; min-height:70px; font:inherit; color:inherit; cursor:pointer; box-shadow:var(--bong);
}
.the-bai:active{ transform:scale(.99); }
.bai-icon{ font-size:1.6em; flex:none; }
.bai-chu{ flex:1; }
.bai-chu strong{ display:block; }
.bai-chu small{ font-size:.8em; color:var(--chu-nhat); }
.nhan-quan-trong{ font-size:.72em; font-weight:800; background:var(--do); color:#fff; border-radius:999px; padding:3px 10px; margin-left:8px; white-space:nowrap; }
.the-bai.da-doc .bai-chu strong::after{ content:" ✓"; color:var(--xanh); }

/* ── trang đọc bài ── */
.nut-quay-lai{ font:inherit; font-size:1em; font-weight:600; background:none; border:none; color:var(--xanh); cursor:pointer; padding:10px 0; margin-bottom:8px; min-height:48px; }
.noi-dung-bai{ background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-goc); padding:20px; margin-bottom:16px; box-shadow:var(--bong); }
.noi-dung-bai h1{ margin-bottom:.5em; }
.noi-dung-bai ul, .noi-dung-bai ol{ padding-left:1.3em; margin-bottom:.8em; }
.noi-dung-bai li{ margin-bottom:.45em; }
.o-nhan-manh{ background:var(--xanh-nhat); border-left:5px solid var(--xanh); border-radius:0 12px 12px 0; padding:15px 17px; margin:1.1em 0; }
.o-canh-bao{ background:var(--do-nhat); border-left:5px solid var(--do); border-radius:0 12px 12px 0; padding:15px 17px; margin:1.1em 0; }
.o-nhan-manh p:last-child, .o-canh-bao p:last-child{ margin-bottom:0; }

/* ── bản tóm tắt ── */
.ban-tom-tat{
  font-family:inherit; font-size:.95em; line-height:1.7; white-space:pre-wrap; word-wrap:break-word;
  background:var(--nen); border:1px solid var(--vien); border-radius:12px; padding:16px; margin-bottom:14px;
}
.bao-chep{ margin:12px 0 0; padding:13px 15px; background:var(--xanh-nhat); border-radius:12px; font-size:.9em; color:var(--tot); }

.mien-tru{ font-size:.85em; color:var(--chu-nhat); text-align:center; padding:16px 8px 4px; line-height:1.6; }

/* ── thanh dưới ── */
.thanh-duoi{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:2px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--vien);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
}
.nut-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  font:inherit; font-size:.68em; font-weight:600; line-height:1.25;
  background:none; border:none; color:var(--chu-nhat);
  padding:7px 2px; min-height:60px; border-radius:12px; cursor:pointer;
}
.nut-tab span{ font-size:1.55em; line-height:1; }
.nut-tab.dang-chon{ color:var(--xanh); background:var(--xanh-nhat); }

/* ── màn đồng ý ── */
.man-che{
  position:fixed; inset:0; z-index:100; background:var(--nen);
  display:grid; place-items:center; padding:24px; overflow-y:auto;
}
.hop-dong-y{ max-width:460px; width:100%; text-align:center; }
.dong-y-icon{ font-size:3.4em; margin-bottom:10px; }
.dong-y-loi{ text-align:left; background:var(--nen-the); border:1px solid var(--vien); border-radius:14px; padding:16px; margin-bottom:12px; }
.o-tich-lon{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--nen-the); border:2px solid var(--vien); border-radius:14px;
  padding:17px; margin:16px 0; cursor:pointer; min-height:64px;
}
.o-tich-lon input{ width:28px; height:28px; flex:none; accent-color:var(--xanh); }
.dong-y-chan{ font-size:.82em; color:var(--chu-nhat); margin-top:16px; line-height:1.6; }

@media (min-width:700px){
  .thanh-duoi{ max-width:640px; margin:0 auto; border-radius:18px 18px 0 0; border:1px solid var(--vien); border-bottom:none; }
}

/* ══════════════════════════════════════════════════════
   THEME HỌC TỪ WHOOP — thẻ điểm, nhãn hoa, số liệu
   Nguồn: WHOOP Brand & Design Guidelines (developer.whoop.com)
   Ba thứ mượn: (1) nền tối để màu neon sống được · (2) một con số to
   duy nhất · (3) nhãn IN HOA giãn chữ 10%. Số liệu tương phản đã đo,
   xem "05 - Theme hoc tu WHOOP.md".
   ══════════════════════════════════════════════════════ */

/* ── nhãn IN HOA giãn 10% — luật headline của WHOOP.
   ⚠ CHỈ dùng cho nhãn NGẮN (1–3 chữ). Người già đọc câu dài viết hoa rất mệt. ── */
.nhan-hoa{
  font-size:.74em; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chu-nhat); margin:0 0 6px;
}
.the-diem .nhan-hoa{ color:var(--chu-nhat-tren-toi); }

/* ── số liệu: thay cho DINPro. Không tải font qua mạng vì app phải chạy
   offline (M3). Dùng chữ số đều bề ngang + đậm + siết khoảng cách. ── */
.so-lieu{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.02em; }

/* ── THẺ ĐIỂM: nền tối nguyên bản WHOOP, để dùng được màu neon thật ── */
.the-diem{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--toi-tren), var(--toi-duoi));
  color:var(--chu-tren-toi);
  border-radius:var(--bo-goc); padding:22px 20px; margin-bottom:16px;
  box-shadow:var(--bong-toi);
  display:flex; align-items:center; gap:20px;
}
.the-diem .vong{ flex:none; width:118px; height:118px; position:relative; }
.the-diem .vong svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.the-diem .vong .ray{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:11; }
.the-diem .vong .cung{ fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.the-diem .so-trong-vong{
  position:absolute; inset:0; display:grid; place-items:center; line-height:1;
  font-size:2.5em; font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.03em;
}
.the-diem .ben-phai{ flex:1; min-width:0; }
.the-diem .cau-khuyen{ font-size:1.02em; font-weight:700; line-height:1.4; margin:0 0 6px; }
.the-diem .cau-phu{ font-size:.86em; color:var(--chu-nhat-tren-toi); margin:0; line-height:1.5; }

/* màu điểm — đúng ba mốc của WHOOP: 100–67 · 66–34 · 33–0 */
.the-diem[data-muc="tot"] .cung,  .the-diem[data-muc="tot"] .so-trong-vong { stroke:var(--neon-tot); color:var(--neon-tot); }
.the-diem[data-muc="vua"] .cung,  .the-diem[data-muc="vua"] .so-trong-vong { stroke:var(--neon-vua); color:var(--neon-vua); }
.the-diem[data-muc="kem"] .cung,  .the-diem[data-muc="kem"] .so-trong-vong { stroke:var(--neon-kem); color:var(--neon-kem); }

/* ⚠ đỏ #FF0026 trên nền tối chỉ đạt 4,05:1 — CHỈ được dùng cho con số to
   trong vòng. Câu chữ thường trên thẻ tối phải để trắng. */

/* ── câu nhắc "đây không phải điểm sức khoẻ" — bắt buộc theo M2 ── */
.chu-thich-diem{ font-size:.84em; color:var(--chu-nhat); margin:-8px 0 16px; padding:0 4px; line-height:1.5; }

/* ── ô số trung tính: WHOOP dùng màu xanh dương cho dữ liệu KHÔNG phán xét ── */
.o-so.trung-tinh b{ color:var(--so); }

@media (max-width:380px){
  .the-diem{ flex-direction:column; text-align:center; gap:14px; }
}