@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sarabun-400.woff2') format('woff2')}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/sarabun-500.woff2') format('woff2')}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sarabun-600.woff2') format('woff2')}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sarabun-700.woff2') format('woff2')}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/sarabun-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-thai-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-thai-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-thai-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-thai-700.woff2') format('woff2')}
/* ผู้สูงอายุท้องผูก.com — LOCKED Design System v3 · Caregiver Sky Blue
   Palette locked by มาย · By ส้ม */
:root{
  --ink:#17324D; --ink-soft:#4B647A; --paper:#F7FBFF; --card:#FFFFFF; --line:#DCE7F2;
  --brand:#1D6FB8; --brand-dark:#215D8F; --brand-tint:#EAF4FF;
  --accent:#5B67C8; --accent-tint:#EEF0FF; --warm-tint:#FFF1EE;
  --danger:#D92D20; --danger-tint:#FFF0EE; --danger-line:#F3C2BD;
  --warn:#B25E00; --warn-tint:#FFF4E5; --footer:#17324D; --line-green:#06C755;
  --ok:#1D6FB8;
  --radius:16px; --radius-sm:12px;
  --shadow:0 20px 45px -24px rgba(23,50,77,.35); --shadow-sm:0 6px 18px -10px rgba(23,50,77,.35);
  --maxw:900px; --wide:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(max-width:480px){body{font-size:18px}}
h1,h2,h3,h4,.display{font-family:"IBM Plex Sans Thai","Sarabun",sans-serif;font-weight:600;line-height:1.28;letter-spacing:-.005em}
a{color:var(--brand-dark)}
strong{font-weight:700}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.shell,.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.wide{max-width:var(--wide)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:10px 14px;border-radius:10px;z-index:99}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* top */
.alert-strip{background:var(--danger);color:#fff;text-align:center;font-weight:700;font-size:.92rem;padding:9px 16px}
.alert-strip a{color:#fff}
.top{position:sticky;top:0;z-index:50;background:rgba(247,251,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .bar{max-width:var(--wide);margin:0 auto;padding:0 clamp(20px,5vw,44px);display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo .mk{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--brand);border-radius:12px 12px 12px 4px}
.logo .mk svg{width:22px;height:22px}
.logo b{font:700 17px/1.1 "IBM Plex Sans Thai";display:block}
.logo small{color:var(--ink-soft);font-size:11.5px}
.topnav{display:flex;gap:4px;align-items:center}
.topnav a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:9px}
.topnav a:hover{color:var(--brand-dark);background:var(--brand-tint)}
.topnav a.cta{background:var(--brand);color:#fff}
.topnav a.cta:hover{background:var(--brand-dark)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;font-size:20px}
@media(max-width:960px){ .topnav{display:none} .topnav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:10px clamp(20px,5vw,44px)} .topnav.open a{padding:12px 8px;border-bottom:1px solid var(--line)} .burger{display:inline-grid;place-items:center} }

/* page hero (pillar band) */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--brand-tint);padding:clamp(28px,5vw,58px) 0 clamp(24px,4vw,42px)}
.phero .shell{position:relative;z-index:2;max-width:1000px}
.phero .crumb{font-size:13.5px;color:var(--ink-soft);margin-bottom:14px}
.phero .crumb a{color:var(--ink-soft)}
.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:12px}
.phero .eyebrow .pip{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.phero h1{font-size:clamp(27px,4.2vw,46px);font-weight:700;margin:0 0 12px;max-width:22ch}
.phero .lead{font-size:clamp(16px,1.8vw,20px);color:var(--ink-soft);max-width:62ch;margin:0}
.phero.t-danger{background:var(--danger-tint);border-color:var(--danger-line)}
.phero.t-danger .eyebrow{color:var(--danger)}
.phero.t-ink{background:#14283d}
.phero.t-ink .crumb,.phero.t-ink .crumb a,.phero.t-ink .lead{color:#c3d3e2}
.phero.t-ink .eyebrow{color:#8fb8dd}.phero.t-ink h1{color:#fff}
.phero.t-accent{background:var(--accent-tint)}
.phero.t-warm{background:var(--warm-tint)}

/* byline / meta trust */
.byline{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:16px 0 0;font-size:13.5px;color:var(--ink-soft)}
.byline .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.byline .chip b{color:var(--ink);font-weight:700}
.byline .rev{background:var(--warm-tint);border-color:#f3d3c8}

/* prose */
main .wrap{padding-top:clamp(24px,4vw,38px);padding-bottom:8px}
main .wrap h2{font-size:clamp(22px,2.8vw,31px);margin:1.7em 0 .5em}
main .wrap h3{font-size:1.22rem;margin:1.5em 0 .35em;color:var(--brand-dark)}
main .wrap p{margin:.7em 0}
main .wrap ul,main .wrap ol{padding-left:1.2em}
main .wrap li{margin:.42em 0}
.small{font-size:.9rem;color:var(--ink-soft)}
.lede{font-size:1.08rem;color:var(--ink-soft)}
hr{border:none;border-top:1px solid var(--line);margin:2em 0}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:18px 0}
.toc b{display:block;margin-bottom:6px;color:var(--brand-dark)}
.toc a{display:inline-block;margin:3px 14px 3px 0;font-size:.95rem}

/* figure / images */
figure{margin:22px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--brand-tint)}
figure.portrait img{aspect-ratio:4/5}
figure figcaption{font-size:.86rem;color:var(--ink-soft);padding:10px 16px;border-top:1px solid var(--line)}
figure figcaption .slot{font-weight:700;color:var(--brand-dark)}

/* answer / callouts */
.answer{background:var(--brand-tint);border:1px solid #cfe4f7;border-left:5px solid var(--brand);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-sm);margin:8px 0}
.answer .q{font-weight:700;font-size:1.12rem;margin:0 0 8px;color:var(--brand-dark);font-family:"IBM Plex Sans Thai"}
.answer p{margin:.35em 0}
.redflag{background:var(--danger-tint);border:1px solid var(--danger-line);border-left:6px solid var(--danger);border-radius:var(--radius);padding:20px 24px;margin:24px 0}
.redflag h2,.redflag h3{color:var(--danger);margin-top:0}
.redflag .tag{display:inline-block;background:var(--danger);color:#fff;font-weight:800;font-size:.76rem;padding:4px 11px;border-radius:999px;letter-spacing:.04em;margin-bottom:8px}
.note{background:var(--warn-tint);border:1px solid #f0d59c;border-left:6px solid var(--warn);border-radius:var(--radius);padding:18px 22px;margin:22px 0}
.note h3{color:var(--warn);margin-top:0}
.tip{background:var(--accent-tint);border:1px solid #d6d9f5;border-left:6px solid var(--accent);border-radius:var(--radius);padding:18px 22px;margin:22px 0}
.tip h3{color:var(--accent);margin-top:0}
.keyfact{background:#fff;border:1px dashed var(--brand);border-radius:var(--radius);padding:14px 20px;margin:18px 0;font-weight:600;color:var(--brand-dark)}

/* cards */
.cards{display:grid;gap:16px;grid-template-columns:1fr;margin:20px 0}
@media(min-width:640px){.cards.two{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);display:block;transition:.16s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)}
.card h3{margin:.1em 0 .3em;color:var(--ink)}
.card .k{font-size:.76rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.card .go{color:var(--brand-dark);font-weight:700;margin-top:.6em;display:inline-block}

/* tables */
.table-scroll{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:560px;background:#fff}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.97rem}
th{background:var(--brand-tint);color:var(--brand-dark);font-weight:700}
tr:last-child td{border-bottom:none}
caption{caption-side:top;text-align:left;font-weight:700;padding:10px 4px;color:var(--ink-soft)}

/* timeline / checklist / faq */
.timeline{list-style:none;padding:0;margin:20px 0}
.timeline li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:13px 0;border-left:6px solid var(--brand);box-shadow:var(--shadow-sm)}
.timeline .when{font-weight:700;color:var(--brand-dark);display:block;font-size:1.02rem;margin-bottom:2px}
.checklist{list-style:none;padding:0;margin:16px 0}
.checklist li{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:9px 0}
.checklist .box{flex:none;width:26px;height:26px;border:2px solid var(--brand);border-radius:7px;margin-top:2px}
.checklist.danger .box{border-color:var(--danger)}
details.faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2px 20px;margin:12px 0}
details.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;font-size:1.05rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"＋";float:right;color:var(--brand);font-weight:800}
details.faq[open] summary::after{content:"－"}
details.faq p{margin-top:0;padding-bottom:15px}

/* references */
.refs{font-size:.86rem;color:var(--ink-soft)}
.refs li{margin:.5em 0}
.reviewed{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:.9rem;color:var(--ink-soft);margin:18px 0}
.reviewed .ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);display:grid;place-items:center;font-weight:800}
.updated{font-size:.85rem;color:var(--ink-soft);margin-top:8px}

/* consult */
.consult{position:relative;overflow:hidden;background:var(--brand-dark);color:#eaf3fb;border-radius:20px;padding:30px 26px;margin:30px 0;text-align:center}
.consult::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:rgba(91,103,200,.28)}
.consult>*{position:relative;z-index:2}
.consult h3{color:#fff;font-size:1.4rem;margin:0 0 6px}
.consult p{color:#cfe2f2;margin:.3em auto 16px;max-width:56ch}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;border-radius:999px;padding:14px 26px;font-size:1.02rem}
.btn-line{background:var(--line-green);color:#053b1a}
.disclaim-inline{font-size:.85rem;color:#a9c6de;margin-top:12px}

/* footer */
footer.site-footer{background:var(--footer);color:#b9cbdd;margin-top:44px;padding:44px 0 40px}
footer.site-footer .wrap{max-width:var(--wide);display:flex;flex-wrap:wrap;gap:20px 28px}
footer.site-footer .wrap>div{flex:1 1 180px;min-width:150px}
footer.site-footer .wrap>div:first-child{flex:2 1 260px}
footer.site-footer .disclaimer{flex-basis:100%}
footer.site-footer h4{color:#fff;margin:0 0 8px;font-size:.98rem}
footer.site-footer a{color:#b9cbdd;text-decoration:none;display:block;padding:3px 0;font-size:14px}
footer.site-footer a:hover{color:#fff}
.disclaimer{grid-column:1/-1;border-top:1px solid #2a4763;margin-top:20px;padding-top:16px;font-size:.8rem;color:#8fa8c0}

/* print */
.print-actions{margin:18px 0}
.print-actions button{font:inherit;font-weight:700;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:12px 22px;cursor:pointer}
@media print{
  .top,.site-footer,.alert-strip,.consult,.print-actions,.burger,.no-print{display:none!important}
  body{font-size:12pt;background:#fff;color:#000}
  .phero{background:#fff;border-bottom:2px solid #000;padding:0 0 12px}
  .shell,.wrap{max-width:100%;padding:0}
  .card,.timeline li,.checklist li,.redflag,.note,.tip,.answer,figure{box-shadow:none;break-inside:avoid}
  table{min-width:0}
}
.diary td{height:44px}

/* tap targets + print A4 */
.btn{min-height:44px}
@media(max-width:960px){.topnav.open a{min-height:44px}}
@media print{
  @page{size:A4;margin:12mm}
  .top,.site-footer,.alert-strip,.consult,.print-actions,.burger,.no-print,.byline,.phero .crumb,.phero .eyebrow{display:none!important}
  .phero{background:#fff;border-bottom:2px solid #000;padding:0 0 8px}
  .phero h1{font-size:18pt;margin:0}
  body{font-size:11pt;background:#fff;color:#000}
  .shell,.wrap{max-width:100%;padding:0}
  .redflag,.note,.tip,.checklist li,.table-scroll,table,figure{break-inside:avoid}
  a[href]::after{content:""}
}
@media print{
  .print-actions,.toc,figure{display:none!important}
  @page{size:A4;margin:9mm}
  .phero{padding:0 0 4px}.phero h1{font-size:15pt}
  main .wrap{padding-top:6px}
  main .wrap h2{font-size:13pt;margin:.5em 0 .3em}
  .diary td{height:26px}
  table th,table td{padding:5px 8px;font-size:9.5pt}
  .checklist li{padding:5px 10px;margin:4px 0}
  .checklist .box{width:20px;height:20px}
  .tip,.note,.redflag{padding:9px 13px;margin:8px 0}
  .redflag ul,.note ul{margin:.2em 0}
  .small{font-size:8pt}
}
@media print{
  body[data-print] .alert-strip,body[data-print] .top,body[data-print] .site-footer,body[data-print] .phero{display:none!important}
  body[data-print="diary-print"] main .wrap>*:not(#diary-print){display:none!important}
  body[data-print="fridge-print"] main .wrap>*:not(#fridge-print){display:none!important}
  body[data-print] .printable-tool .print-actions{display:none!important}
  body[data-print] .printable-tool{break-inside:auto}
}