/* Cẩm nang Cân bằng chuyển hóa — cùng bảng màu với maithuyhang.com (tím mận, hồng thủy tiên, lá) */
:root{
  --nen:#F8F1F0;--nen-2:#F1E3E2;--the:#FFFFFF;
  --muc:#3B2730;--muc-nhat:#6E5961;
  --hong:#B4536A;--hong-nhat:#E6B8C1;--la:#5C7D60;--la-nhat:#E3EDE2;
  --vien:#E3D0D1;--man:#46283A;--man-chu:#F7E9EC;--man-phu:#D9B9C3;--man-hong:#F0A2B3;
  --canh:#FFF6E5;--canh-vien:#E8C98A;--canh-chu:#6B4B12;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tay:"Dancing Script","Segoe Script",cursive;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --nen:#1D1418;--nen-2:#291D23;--the:#241A1F;--muc:#F4E6E9;--muc-nhat:#C8B2B9;--hong:#EC9CAD;--hong-nhat:#6A3A47;
  --la:#9DBE9E;--la-nhat:#22302A;--vien:#3D2C33;--man:#2E1A26;--canh:#2D2516;--canh-vien:#7A6230;--canh-chu:#F1DDB0;color-scheme:dark}}
:root[data-theme="dark"]{
  --nen:#1D1418;--nen-2:#291D23;--the:#241A1F;--muc:#F4E6E9;--muc-nhat:#C8B2B9;--hong:#EC9CAD;--hong-nhat:#6A3A47;
  --la:#9DBE9E;--la-nhat:#22302A;--vien:#3D2C33;--man:#2E1A26;--canh:#2D2516;--canh-vien:#7A6230;--canh-chu:#F1DDB0;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--nen);color:var(--muc);font-family:var(--sans);font-size:17.5px;line-height:1.75;font-weight:300;margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--hong);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--hong);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;text-wrap:balance;margin:0}
strong{font-weight:600}
.trong{max-width:1120px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.hep{max-width:720px;margin:0 auto;padding-inline:16px}

/* Thanh đầu (dính trên cùng khi cuộn) */
.thanh{background:var(--man);color:var(--man-chu);position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.12)}
html{scroll-padding-top:76px}
/* Thanh quà dính đáy (điện thoại) */
.thanh-qua{display:none}
/* Khối nhận quà ngay đầu trang Nhận quà */
.cta-dau{margin:22px 0 4px;border-radius:20px;background:var(--man);color:var(--man-chu);padding:22px;display:grid;gap:10px;text-align:center}
.cta-dau .nut{font-size:1.08rem;padding:16px 22px;background:var(--man-hong);color:#3A1E2B;font-weight:600}
.cta-dau p{margin:0;color:var(--man-phu);font-size:.92rem}
.cta-dau b{color:var(--man-chu)}
.thanh .trong{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap;padding-block:8px}
.logo{color:inherit;text-decoration:none;display:grid;line-height:1.15}
.logo b{font-family:var(--serif);font-size:1.35rem;font-weight:600}
.logo span{font-family:var(--tay);color:var(--man-hong);font-size:1.05rem}
.thanh nav{display:flex;gap:6px;flex-wrap:wrap}
.thanh nav a{color:var(--man-chu);text-decoration:none;font-size:.92rem;padding:6px 12px;border-radius:999px}
.thanh nav a:hover{background:rgba(255,255,255,.1)}
.thanh nav a.qua{background:var(--man-hong);color:#3A1E2B;font-weight:500}

/* Vụn bánh mì */
.vun{font-size:.85rem;color:var(--muc-nhat);padding-top:22px}
.vun ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vun li+li::before{content:"›";margin-right:6px;opacity:.6}
.vun a{color:inherit}

/* Đầu bài */
.dau-bai{padding-block:18px 8px}
.dau-bai .nhom{font-family:var(--tay);color:var(--hong);font-size:1.4rem}
.dau-bai h1{font-size:clamp(2.2rem,5.6vw,3.4rem);margin:4px 0 14px}
.dau-bai .sapo{font-size:1.12rem;color:var(--muc-nhat)}
.tacgia-nho{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.88rem;color:var(--muc-nhat)}
.tacgia-nho img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.tacgia-nho b{color:var(--muc);font-weight:500}
.anh-bai{margin:26px 0 6px}
.anh-bai img{border-radius:20px;width:100%;max-height:520px;object-fit:cover}
.anh-bai figcaption,.anh-giua figcaption{font-size:.84rem;color:var(--muc-nhat);font-style:italic;margin-top:8px}

/* Thân bài */
.than{padding-bottom:20px}
.than > *{margin:0 0 1.1em}
.than h2{font-size:clamp(1.7rem,3.6vw,2.2rem);margin:1.8em 0 .55em}
.than h3{font-size:1.4rem;margin:1.4em 0 .4em;font-weight:600}
.than ul,.than ol{padding-left:1.3em}
.than li{margin-bottom:.45em}
.than blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--hong);font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.45}
.anh-giua{margin:1.6em 0}
.anh-giua img{border-radius:16px;width:100%}
.hop{border-radius:16px;padding:18px 20px;border:1px solid var(--vien);background:var(--the)}
.hop > *{margin:0 0 .6em}.hop > *:last-child{margin-bottom:0}
.hop.la{background:var(--la-nhat);border-color:transparent}
.hop.canh{background:var(--canh);border-color:var(--canh-vien);color:var(--canh-chu)}
.hop .tieu{font-weight:600;font-family:var(--sans);font-size:1rem}
.bang-wrap{overflow-x:auto;border:1px solid var(--vien);border-radius:14px;background:var(--the)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:520px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--vien);vertical-align:top}
th{font-weight:600;background:var(--nen-2)}
tr:last-child td{border-bottom:0}
.muc-luc{border:1px solid var(--vien);border-radius:16px;padding:14px 20px;background:var(--the);font-size:.95rem}
.muc-luc summary{cursor:pointer;font-weight:500}
.muc-luc ol{margin:.6em 0 0}

/* Hỏi đáp */
.hoi-dap details{border-bottom:1px solid var(--vien);padding:12px 0}
.hoi-dap summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.hoi-dap summary::after{content:"+";color:var(--hong);font-size:1.3rem;line-height:1}
.hoi-dap details[open] summary::after{content:"−"}
.hoi-dap details p{margin:.6em 0 0;color:var(--muc-nhat)}
.nguon{font-size:.9rem;color:var(--muc-nhat)}
.nguon ol{padding-left:1.2em}

/* Hộp quà */
.hop-qua{background:var(--man);color:var(--man-chu);border-radius:24px;padding:clamp(24px,5vw,40px);display:grid;gap:14px;margin:36px 0}
.hop-qua .nhan{font-family:var(--tay);color:var(--man-hong);font-size:1.5rem;line-height:1.1}
.hop-qua h2{font-size:clamp(1.7rem,4vw,2.3rem)}
.hop-qua p{color:var(--man-phu);margin:0}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 1rem var(--sans);text-decoration:none;padding:13px 24px;border-radius:999px;border:1px solid transparent;transition:transform .2s}
.nut:hover{transform:translateY(-2px)}
.nut.chinh{background:var(--hong);color:#fff}
.hop-qua .nut.chinh{background:var(--man-hong);color:#3A1E2B}
.nut.vien{border-color:currentColor;color:inherit}
.hang-nut{display:flex;flex-wrap:wrap;gap:10px}

/* Tác giả */
.tac-gia{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start;border-top:1px solid var(--vien);padding-top:26px;margin-top:10px}
.tac-gia img{width:88px;height:88px;border-radius:50%;object-fit:cover}
.tac-gia h2{font-size:1.5rem;margin-bottom:4px}
.tac-gia p{font-size:.95rem;color:var(--muc-nhat);margin:0 0 .5em}

/* Thẻ bài */
.luoi-bai{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.the-bai{display:grid;gap:6px;align-content:start;padding:20px;border:1px solid var(--vien);border-radius:18px;background:var(--the);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.the-bai:hover{transform:translateY(-3px);border-color:var(--hong-nhat)}
.the-bai .so{font-family:var(--serif);color:var(--hong);font-size:1.1rem;font-weight:600}
.the-bai h3{font-size:1.35rem;font-weight:600}
.the-bai p{font-size:.92rem;color:var(--muc-nhat);margin:0}
.lien-quan{padding-block:30px 10px}
.lien-quan > h2{font-size:1.8rem;margin-bottom:16px}

/* Trang mục lục */
.mo-dau{background:var(--man);color:var(--man-chu);padding-block:clamp(44px,8vw,90px)}
.mo-dau .trong{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,60px);align-items:center}
.mo-dau .nhan{font-family:var(--tay);color:var(--man-hong);font-size:1.6rem}
.mo-dau h1{font-size:clamp(2.5rem,6.5vw,4.4rem);margin:6px 0 16px}
.mo-dau h1 em{color:var(--man-hong)}
.mo-dau p{color:var(--man-phu);font-size:1.08rem;max-width:56ch}
.mo-dau figure{margin:0}
.mo-dau figure img{border-radius:24px;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.mo-dau figcaption{font-size:.82rem;color:var(--man-phu);font-style:italic;margin-top:8px}
.mo-dau .hang-nut{margin-top:22px}
.mo-dau .nut.chinh{background:var(--man-hong);color:#3A1E2B}
.dai-van-de{background:var(--hong);color:#fff}
.dai-van-de .trong{display:flex;flex-wrap:wrap;gap:8px 10px;padding-block:18px;justify-content:center}
.dai-van-de a{color:#fff;text-decoration:none;font-size:.92rem;padding:6px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px}
.dai-van-de a:hover{background:rgba(255,255,255,.15)}
.khoi{padding-block:clamp(44px,7vw,80px)}
.khoi.mo{background:var(--nen-2)}
.khoi-dau{display:grid;gap:8px;max-width:62ch;margin-bottom:26px}
.khoi-dau .nhan{font-family:var(--tay);color:var(--hong);font-size:1.4rem}
.khoi-dau h2{font-size:clamp(2rem,4.4vw,2.8rem)}
.khoi-dau p{color:var(--muc-nhat);margin:0}

/* Chân trang */
.chan{background:var(--man);color:var(--man-phu);font-size:.88rem;padding-block:36px;margin-top:40px}
.chan .trong{display:grid;gap:12px}
.chan a{color:var(--man-chu)}
.chan .mien-tru{border-left:2px solid var(--man-hong);padding-left:14px;max-width:80ch}

@media (max-width:760px){
  /* Chữ cho điện thoại: to, đậm vừa, dễ đọc với người 35+ */
  body{font-size:18px;font-weight:400;line-height:1.72}
  .dau-bai h1{font-size:2.15rem}
  .dau-bai .sapo{font-size:1.06rem}
  .than h2{font-size:1.85rem}
  .than h3{font-size:1.35rem}
  .than blockquote{font-size:1.3rem}
  .tacgia-nho,.vun,.anh-bai figcaption,.anh-giua figcaption,.mo-dau figcaption{font-size:.95rem}
  table{font-size:1rem;min-width:480px}
  th,td{padding:10px 12px}
  .nguon,.muc-luc,.hop,.chan{font-size:.95rem}
  .the-bai h3{font-size:1.4rem}
  .the-bai p,.khoi-dau p,.mo-dau p{font-size:1rem}
  .hoi-dap summary{font-size:1.04rem}
  .nut{font-size:1.02rem}
  .mo-dau .trong{grid-template-columns:1fr}
  .mo-dau figure{max-width:340px}
  .tac-gia{grid-template-columns:64px minmax(0,1fr)}
  .tac-gia img{width:64px;height:64px}
  .thanh .trong{flex-wrap:nowrap;min-height:54px;gap:8px}
  .logo span{display:none}
  .logo b{font-size:1.05rem;white-space:nowrap}
  .thanh nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px}
  .thanh nav::-webkit-scrollbar{display:none}
  .thanh nav a{padding:7px 10px;font-size:.95rem;white-space:nowrap}
  .thanh nav a.qua{order:-1}
  .thanh nav a.an-nho{display:none}
  .thanh-qua{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:70;align-items:center;justify-content:center;gap:8px;background:var(--hong);color:#fff;text-decoration:none;font-weight:500;font-size:1.05rem;white-space:nowrap;padding:13px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(59,39,48,.28)}
  body{padding-bottom:76px}
}