/* sonsongkhoe.com — thiết kế cho người 50–70 tuổi đọc trên điện thoại.
   Chữ to, tương phản cao, không hoa mỹ. */
:root{
  --nen:#FBFCFA; --the:#FFFFFF; --chim:#F0F3EE;
  --chu:#141C17; --chu-2:#3F4C44; --chu-3:#6E7C73;
  --ke:#DCE3DB; --ke-2:#C3CDC2;
  --nhan:#186A52; --nhan-nen:#E6F1EC;
  --canh:#8C4A1E; --canh-nen:#F7EDE5;
  --chan:#9B3427;
  --tieu:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --than:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --trich:"Lora",Georgia,serif;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nen:#0E120F; --the:#151B16; --chim:#1B2219;
    --chu:#EDF1EA; --chu-2:#BAC5BB; --chu-3:#87948A;
    --ke:#27302A; --ke-2:#3A453C;
    --nhan:#6DC3A3; --nhan-nen:#122A21;
    --canh:#D79A62; --canh-nen:#2A2016;
    --chan:#E08476;
  }
}
:root[data-theme="dark"]{
  --nen:#0E120F; --the:#151B16; --chim:#1B2219;
  --chu:#EDF1EA; --chu-2:#BAC5BB; --chu-3:#87948A;
  --ke:#27302A; --ke-2:#3A453C;
  --nhan:#6DC3A3; --nhan-nen:#122A21;
  --canh:#D79A62; --canh-nen:#2A2016;
  --chan:#E08476;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--nen); color:var(--chu);
  font-family:var(--than); font-size:19px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.khung{max-width:660px;margin:0 auto;padding-inline:22px;padding-block:52px 90px}

a{color:var(--nhan);text-decoration:none;border-bottom:1.5px solid currentColor}
a:hover{color:var(--chu)}
a:focus-visible{outline:2.5px solid var(--nhan);outline-offset:3px;border-radius:2px}

.nhan-tren{
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chu-3);font-weight:600;margin-bottom:14px;
}
h1{
  font-family:var(--tieu);font-size:clamp(38px,9vw,56px);font-weight:800;
  line-height:1.06;letter-spacing:-.03em;margin-bottom:12px;text-wrap:balance;
}
.chuc-danh{font-size:clamp(19px,4vw,22px);color:var(--chu-2);font-weight:500;text-wrap:balance}

.tuyen-bo{
  font-family:var(--trich);font-size:clamp(19px,4vw,21px);line-height:1.68;
  font-style:italic;color:var(--chu);background:var(--chim);
  border-left:4px solid var(--nhan);padding:24px 24px 24px 22px;
  margin-top:38px;border-radius:0 4px 4px 0;
}

section{margin-top:56px}
h2{
  font-family:var(--tieu);font-size:clamp(25px,5.5vw,31px);font-weight:700;
  line-height:1.2;letter-spacing:-.02em;margin-bottom:20px;text-wrap:balance;
}
h3{font-family:var(--tieu);font-size:21px;font-weight:700;margin-bottom:6px;text-wrap:balance}
p+p{margin-top:17px}
.dan{color:var(--chu-2);margin-bottom:24px;text-wrap:pretty}

/* cách làm việc — 3 bước */
.buoc{display:flex;flex-direction:column;gap:0}
.mot-buoc{
  display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start;
  padding:22px 0;border-top:1px solid var(--ke);
}
.mot-buoc:last-child{border-bottom:1px solid var(--ke)}
.so{
  font-family:var(--tieu);font-size:15px;font-weight:700;color:var(--nhan);
  background:var(--nhan-nen);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
}
.mot-buoc p{color:var(--chu-2);font-size:18px;margin-top:4px}

/* điều không làm */
.khong{background:var(--the);border:1px solid var(--ke-2);border-radius:5px;padding:26px}
.khong ul{list-style:none;margin-top:6px}
.khong li{
  padding:13px 0 13px 32px;border-top:1px solid var(--ke);position:relative;
  font-size:18px;color:var(--chu-2);
}
.khong li:first-child{border-top:0;padding-top:0}
.khong li::before{
  content:"";position:absolute;left:4px;top:19px;width:14px;height:2.5px;
  background:var(--chan);border-radius:2px;
}
.khong li:first-child::before{top:11px}
.khong li b{color:var(--chu);font-weight:600}

/* bài viết */
.bai{display:flex;flex-direction:column;gap:2px}
.mot-bai{
  display:block;background:var(--the);border:1px solid var(--ke);
  padding:22px;border-bottom:0;color:var(--chu);
}
.mot-bai:last-of-type{border-bottom:1px solid var(--ke)}
.mot-bai:hover{background:var(--chim);color:var(--chu)}
.mot-bai .tieu-de{font-family:var(--tieu);font-size:20px;font-weight:700;line-height:1.3;text-wrap:balance}
.mot-bai .tom{color:var(--chu-3);font-size:17px;margin-top:7px}
.mot-bai .di{color:var(--nhan);font-size:15px;font-weight:600;margin-top:12px;display:inline-block}

/* liên hệ */
.lien-he{background:var(--nhan-nen);border-radius:5px;padding:30px;text-align:center;margin-top:12px}
.lien-he h2{margin-bottom:12px}
.lien-he p{color:var(--chu-2);max-width:30em;margin-inline:auto}
.nut{
  display:inline-block;background:var(--nhan);color:#fff;border:0;
  font-family:var(--tieu);font-weight:700;font-size:19px;
  padding:16px 32px;border-radius:4px;margin-top:22px;
}
.nut:hover{background:var(--chu);color:#fff}

/* cảnh báo an toàn */
.khan{
  background:var(--canh-nen);border:1.5px solid var(--canh);border-radius:5px;
  padding:24px;margin-top:20px;
}
.khan .tieu{font-family:var(--tieu);font-weight:700;font-size:19px;color:var(--canh);margin-bottom:10px}
.khan ul{list-style:none;margin:12px 0}
.khan li{padding:7px 0 7px 24px;position:relative;font-size:18px;font-weight:600}
.khan li::before{content:"•";position:absolute;left:6px;color:var(--canh);font-weight:700}
.khan .cuoi{font-size:18px;margin-top:12px}

chan,footer{
  display:block;margin-top:70px;padding-top:26px;border-top:1px solid var(--ke-2);
  font-size:16px;color:var(--chu-3);line-height:1.8;
}
footer a{color:var(--chu-3)}

/* trang bài viết */
.ve{font-size:16px;font-weight:600;margin-bottom:28px;display:inline-block}
article p{margin-top:18px;color:var(--chu-2)}
article p:first-of-type{margin-top:0}
article .to{font-size:21px;color:var(--chu);font-weight:500}
article ol{margin:20px 0 20px 0;list-style:none;counter-reset:d}
article ol li{
  counter-increment:d;display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--ke);color:var(--chu-2);font-size:18px;
}
article ol li::before{
  content:counter(d);font-family:var(--tieu);font-weight:700;font-size:15px;color:var(--nhan);padding-top:2px;
}
article ol li:last-child{border-bottom:1px solid var(--ke)}
.ngay{font-size:15px;color:var(--chu-3);margin-bottom:26px}

@media(max-width:480px){
  body{font-size:18px}
  .khung{padding-inline:18px;padding-block:40px 70px}
  .tuyen-bo{padding:20px 18px}
  .khong,.lien-he,.khan{padding:20px}
  .mot-buoc{grid-template-columns:32px 1fr;gap:14px}
}
@media(prefers-reduced-motion:no-preference){
  a,.mot-bai,.nut{transition:background .15s ease,color .15s ease}
}