@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap");
/* Wireframe base — grayscale, one annotation color. ทุกไฟล์ wireframe ลิงก์ไฟล์นี้: <link rel="stylesheet" href="assets/wf.css"> */
:root{--g0:#fff;--g1:#f4f4f4;--g2:#e6e6e6;--g3:#cfcfcf;--g4:#9a9a9a;--g5:#5c5c5c;--g6:#222;--mark:#d9480f}
*{box-sizing:border-box}
body{margin:0;background:#dcdcdc;color:var(--g6);font:15px/1.55 system-ui,-apple-system,"Prompt","Noto Sans Thai",sans-serif}
.toolbar{position:sticky;top:0;z-index:10;background:var(--g6);color:#fff;padding:8px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.toolbar b{margin-right:auto}
.toolbar button{background:#444;color:#fff;border:0;padding:5px 12px;border-radius:4px;cursor:pointer}
.toolbar button[aria-pressed="true"]{background:var(--mark)}
.status{background:var(--mark);color:#fff;font-size:12px;padding:2px 8px;border-radius:3px}
.page{container-type:inline-size;background:var(--g0);margin:16px auto;width:var(--w,1280px);max-width:100%;border:1px solid var(--g3)}
/* numbered section = ตรงกับหมายเลขใน annotations.md */
.sec{position:relative;padding:28px 32px;border-top:1px dashed var(--g3)}
.sec::before{content:attr(data-n);position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--mark);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.sec.dark{background:var(--g5);color:#fff}
.sec.alt{background:var(--g1)}
h1,h2,h3{margin:0 0 10px;line-height:1.25}
h1{font-size:30px}h2{font-size:22px}h3{font-size:17px}
p{margin:0 0 10px}
.muted{color:var(--g5)}.small{font-size:13px}
.img{background:var(--g2);border:1px solid var(--g3);display:grid;place-items:center;color:var(--g4);font-size:13px;text-align:center;min-height:120px;position:relative;padding:8px}
.img::before{content:attr(data-label)}
.r16x9{aspect-ratio:16/9}.r4x3{aspect-ratio:4/3}.r1x1{aspect-ratio:1/1}
.btn{display:inline-block;padding:9px 18px;border:2px solid var(--g6);border-radius:4px;background:var(--g0);font-weight:600;font-size:14px}
.btn.primary{background:var(--g6);color:#fff}
.btn.cta{background:var(--mark);border-color:var(--mark);color:#fff}
.chip{display:inline-block;padding:2px 10px;border:1px solid var(--g4);border-radius:999px;font-size:12px;margin:0 6px 6px 0;background:var(--g0)}
.card{border:1px solid var(--g3);background:var(--g0);padding:14px;display:flex;flex-direction:column;gap:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g7{grid-template-columns:repeat(7,1fr)}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.side{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.lines i{display:block;height:9px;background:var(--g2);margin:0 0 8px;border-radius:2px}.lines i:nth-child(3n){width:70%}
/* header */
.hdr .util{display:flex;gap:16px;justify-content:flex-end;font-size:12px;background:var(--g1);padding:6px 32px}
.hdr .nav{display:flex;gap:20px;align-items:center;padding:14px 32px;border-bottom:1px solid var(--g3)}
.hdr .logo{font-weight:800;margin-right:auto;border:2px solid var(--g6);padding:2px 10px}
.hdr .nav a{font-size:14px}
.crumb{font-size:12px;color:var(--g5);padding:10px 32px;background:var(--g1)}
.ftr{background:var(--g6);color:#ddd;padding:28px 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;font-size:13px}
table.wf{border-collapse:collapse;width:100%;font-size:13px}table.wf th,table.wf td{border:1px solid var(--g3);padding:7px 10px;text-align:left}table.wf th{background:var(--g1)}
.note{border:1px dashed var(--mark);color:var(--mark);padding:8px 12px;font-size:12px;margin:8px 0}
/* responsive ตามความกว้างของ .page (ใช้ปุ่มสลับ Desktop/Tablet/Mobile) */
@container (max-width:900px){.g4,.g3,.g7{grid-template-columns:repeat(2,1fr)}.split,.side{grid-template-columns:1fr}.ftr{grid-template-columns:1fr 1fr}.hdr .nav a:not(.keep){display:none}.sec{padding:24px 20px}}
@container (max-width:520px){.g2,.g3,.g4,.g7{grid-template-columns:1fr}.ftr{grid-template-columns:1fr}.hdr .util{padding:6px 20px}.hdr .nav{padding:12px 20px}}

/* ===== Preview skin: อ่านง่ายสำหรับทีมที่ไม่ใช่ทีมเทคนิค · ไม่ใช่ดีไซน์ UI จริง (Stage 06) ===== */
:root{--ink:#1b2559;--acc:#f15a22;--mark:#f15a22;--soft:#fdeee6;--line:#e8e1d9}
body{background:#efeae3;font-family:"Prompt",system-ui,sans-serif;color:#231f20}
h1,h2,h3,.logo,.toolbar b{font-family:"Prompt","Prompt",system-ui,sans-serif}
.toolbar{background:var(--ink)}
.toolbar button{background:#2f3a78;border-radius:999px}
.toolbar button[aria-pressed="true"],.toolbar .tg[aria-pressed="true"]{background:var(--acc)}
.status{background:transparent;border:1px solid #8b93c9;color:#cfd4f2}
.page{border:0;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(27,37,89,.12)}
.chrome{display:flex;gap:7px;align-items:center;padding:10px 16px;background:#f6f3ef;border-bottom:1px solid var(--line)}
.chrome i{width:11px;height:11px;border-radius:50%;background:#d8d1c8;display:inline-block}
.chrome i:nth-child(1){background:#ee7d6b}.chrome i:nth-child(2){background:#f0c05a}.chrome i:nth-child(3){background:#6cc17a}
.chrome .url{margin-left:12px;flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 14px;font-size:12px;color:#6b625b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .util{background:var(--ink);color:#dfe3f7}
.hdr .nav{border-bottom:1px solid var(--line)}
.hdr .logo{border:0;color:var(--ink);font-weight:600;padding:0;letter-spacing:.5px}
.hdr .logo::before{content:"";display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--acc);margin-right:8px;vertical-align:-1px}
.hdr .nav a{cursor:pointer}.hdr .nav a:hover{color:var(--acc)}
.crumb{background:#faf7f3;border-bottom:1px solid var(--line)}
.sec{border-top:0;padding:40px 32px}
.sec.alt{background:#faf7f3}.sec.dark{background:var(--ink);color:#fff}
.sec::before{display:none}
.img{background:linear-gradient(135deg,#f3e6da,#e3e7f5);border:0;border-radius:12px;color:#8a7f76}
.card{border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(27,37,89,.05);transition:box-shadow .15s,transform .15s}
.card[data-go],.btn[data-go],a[data-go]{cursor:pointer}
.card[data-go]:hover{box-shadow:0 8px 20px rgba(27,37,89,.12);transform:translateY(-2px)}
.btn{border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:#fff}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.cta{background:var(--acc);border-color:var(--acc);color:#fff}
.chip{border-color:#d6cec5;border-radius:999px}
table.wf{border-radius:10px;overflow:hidden}table.wf th{background:#f6f1eb}table.wf th,table.wf td{border-color:var(--line)}
.ftr{background:var(--ink)}
/* โน้ตทีม: ซ่อนไว้ก่อน กดปุ่ม "โน้ตทีม" ที่แถบบนเพื่อดู */
.note{display:none;border-radius:8px;background:#fff4ec}
body.show-notes .note{display:block}
body.show-notes .sec{box-shadow:inset 0 0 0 1px #f3c7b0}
body.show-notes .sec::before{display:grid}
.pend{display:inline-block;background:#fff1c9;color:#8a5a00;border-radius:999px;padding:0 9px;font-size:.8em;line-height:1.7;white-space:nowrap;cursor:help}
.lead-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lead-flow a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:500;cursor:pointer}
.lead-flow a:hover{border-color:var(--acc);color:var(--acc)}
.lead-flow span{color:#b3a99f}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--acc);text-decoration:underline}
body:not(.show-notes) .tm{display:none}

/* mega menu: เด้งลงมาใต้ปุ่ม "สินค้า" เมื่อวางเมาส์หรือกด */
.hdr{position:relative}
.mega{display:none;position:absolute;left:24px;right:24px;top:100%;z-index:20;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(27,37,89,.18);padding:22px 26px;grid-template-columns:1fr 1fr 1fr;gap:28px}
.hdr.mega-open .mega{display:grid}
.mega h4{margin:0 0 10px;font:600 13px/1.2 "Prompt",sans-serif;letter-spacing:.04em;color:#8a7f76}
.mega a{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;margin:0 -10px;border-radius:8px;font-size:14px;cursor:pointer}
.mega a:hover{background:var(--soft);color:var(--acc)}
.mega a small{color:#8a7f76;font-size:12px;white-space:nowrap}
.mega .hint{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:#8a7f76}
@container (max-width:900px){.mega{display:none!important}}

/* hero: ภาพใหญ่เต็มความกว้าง ข้อความอยู่บนรูป */
.hero{position:relative;min-height:580px;padding:0!important;color:#fff;overflow:hidden;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:linear-gradient(115deg,#7d5236 0%,#b98458 45%,#e5c9a6 100%)}
.hero-bg::before{content:attr(data-label);position:absolute;right:22px;bottom:16px;font-size:12px;color:rgba(255,255,255,.75)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,24,66,.82) 0%,rgba(19,24,66,.45) 45%,rgba(19,24,66,.05) 100%)}
.hero-copy{position:relative;z-index:2;max-width:640px;padding:56px 64px;display:grid;gap:14px}
.hero-copy .eyebrow{font-size:13px;letter-spacing:.14em;color:#ffc9ad;font-weight:500}
.hero-copy h1{font-size:clamp(30px,4.4vw,52px);line-height:1.2;color:#fff;margin:0}
.hero-copy p{color:#f1ece6;font-size:17px;margin:0}
.hero-copy .btn{background:transparent;border-color:#fff;color:#fff}
.hero-copy .btn.cta{background:var(--acc);border-color:var(--acc)}
.hero .note{margin-top:8px}
@container (max-width:900px){.hero{min-height:480px}.hero-copy{padding:40px 28px}}
.story{background:#faf7f3}
.story .eyebrow{display:block;font-size:13px;letter-spacing:.14em;color:var(--acc);font-weight:500;margin-bottom:6px}

.mega a.all{color:var(--acc);font-weight:500;margin-top:4px}
.mega .promo .pcard{display:grid;gap:6px;background:var(--soft);border-radius:12px;padding:16px;margin:0;cursor:pointer}
.mega .promo .pcard b{font-size:15px;color:var(--ink)}.mega .promo .pcard span{font-size:13px;color:#5c534c}.mega .promo .pcard u{color:var(--acc);text-decoration:none;font-weight:500;font-size:13px}
.mega h4 .pend{margin-left:6px}

.mega .promo{display:grid;gap:12px;align-content:start}
.mega .pcard.biz{background:var(--ink);cursor:default;gap:4px}
.mega .pcard.biz b{color:#fff}.mega .pcard.biz span{color:#cfd4f2;margin-bottom:6px}
.mega .pcard.biz a{color:#fff;margin:0;padding:6px 0;border-radius:0;font-weight:500;justify-content:flex-start;border-top:1px solid rgba(255,255,255,.18)}
.mega .pcard.biz a:hover{background:transparent;color:#ffc9ad}

/* สเกล Protein บนหน้าแรก */
.scale{display:grid;gap:12px;margin-top:6px}
.srow{display:grid;grid-template-columns:84px 150px 1fr 230px;gap:16px;align-items:center}
.srow b{font-weight:500}
.strack{position:relative;height:14px;background:#ece4da;border-radius:999px}
.sfill{position:absolute;top:0;bottom:0;background:var(--acc);border-radius:999px}
.sax{display:grid;grid-template-columns:150px 1fr 230px;gap:16px;font-size:12px;color:#8a7f76}
.sax{display:flex;justify-content:space-between;padding:0 246px 0 266px}
@container (max-width:700px){.srow{grid-template-columns:64px 1fr}.srow .strack{grid-column:1/-1}.srow>.small{grid-column:1/-1}.sax{padding:0}}

.th{min-height:0!important;width:84px;height:60px;padding:0!important;font-size:11px;line-height:1.2;border-radius:8px}
@container (max-width:700px){.th{width:64px;height:48px}}
/* หน้าคู่มือ: แถวแป้งแต่ละหมวด */
.gd{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.gd:first-child{border-top:0}
.gd .img{min-height:0;width:200px;height:140px;border-radius:12px}
.gd h3{margin:0 0 4px}.gd .small{margin:2px 0}
@container (max-width:700px){.gd{grid-template-columns:1fr}.gd .img{width:100%;height:160px}}

/* ===== แถบบนสุด: พื้นดำ โลโก้ Twd มุมซ้าย ฟอนต์ไม่มีหัว (Prompt) ===== */
.toolbar{background:#000;font-family:"Prompt",system-ui,sans-serif;gap:10px;padding:8px 18px}
.toolbar *{font-family:"Prompt",system-ui,sans-serif}
.toolbar .tlogo{height:32px;width:32px;display:block;object-fit:contain}
.toolbar b{font-weight:500;letter-spacing:.02em}
.toolbar button{background:#2a2a2a;color:#fff;font-size:13px}
.toolbar button:hover{background:#444}
.toolbar button[aria-pressed="true"]{background:#fff;color:#000}
.status{border:1px solid #777;color:#ddd;background:transparent}