/* Mass-RO · ธีมสว่าง (แบบเว็บใหม่) สำหรับหน้าคู่มือ pc/ mobile/ fix/
   โหลดต่อท้าย guide.css / สไตล์ในหน้า เพื่อเปลี่ยนสีเป็น ทอง-น้ำตาล บนพื้นสว่าง เส้นทอง 2px ปุ่มทองไล่สี */

body.ms-body{color:#6c5a2d;font-family:Tahoma,sans-serif}
.ms-content{background:transparent!important;font-size:17px;line-height:1.6}
.ms-content a{color:#8e6c0b}
.ms-content .wrap{max-width:980px;padding:0 4px 30px}
.ms-card{background:transparent!important;box-shadow:none!important;border:0!important}

/* หัวหน้า: ซ่อนโลโก้ (มีในแถบบนแล้ว) */
.hd img{display:none!important}
.hd{padding:6px 0 4px}
.ms-content h1{color:#8e6c0b!important;text-shadow:none!important}
.ms-content h1 small{color:#705b29!important}
.back{color:#8e6c0b!important}

/* แถบขั้นตอน / แท็บเครื่อง: ไม่ติดบนจอ (มีแถบเมนูบนแล้ว) */
.prog{position:static!important;background:rgba(255,255,255,.7)!important;border:2px solid #E0B236!important;border-radius:14px;margin:4px 0 10px;backdrop-filter:none!important}
.prog .in{padding:8px 10px!important}
.prog .bar{background:rgba(224,178,54,.18)!important;border-radius:0 0 12px 12px;overflow:hidden}
.prog .home{display:none!important}
.prog .cnt{color:#8e6c0b!important}
.pill{color:#8e6c0b!important;border-color:#E0B236!important;background:#fff}
.pill.on{background:linear-gradient(180deg,#FFE9A8,#E0B236)!important;color:#241a08!important}
.pill.done{color:#23793a!important;border-color:rgba(63,174,85,.6)!important}
.tabs{position:static!important;background:transparent!important}
.tab{background:rgba(255,255,255,.75)!important;color:#8e6c0b!important;border:2px solid #E0B236!important;transition:transform .2s,box-shadow .2s}
.tab:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(150,100,20,.18)}
.tab.on{background:linear-gradient(180deg,#FFE9A8,#E0B236 60%,#c99a2e)!important;color:#241a08!important}
.tab.home{display:none!important}
.tabs{grid-template-columns:1fr 1fr!important}
.pill[style],.ms-content .pill{font-family:"Kanit",Tahoma,sans-serif}

/* หัวข้อส่วน */
.ms-content h2{color:#8e6c0b!important}
.ms-content h2 small{color:#705b29!important}
h2 .tag{background:linear-gradient(180deg,#FFE9A8,#E0B236)!important;color:#241a08!important}

/* กล่องเตือน / ข้อมูล / สำเร็จ */
.warn{background:#fff3f0!important;border:2px solid #e8846c!important;color:#85361e}
.warn b{color:#a3341f!important}
.tags span{background:#fff!important;border-color:rgba(224,102,74,.55)!important;color:#a3341f!important}
.info{background:rgba(255,255,255,.72)!important;border:2px dashed #E0B236!important;color:#6c5a2d}
.info b{color:#8e6c0b!important}
.ok{background:#f0faf1!important;border:2px solid #5cbf6f!important;color:#2f5e37}
.ok b{color:#23793a!important}

/* การ์ดขั้นตอน */
.step,.card{background:rgba(255,255,255,.75)!important;border:2px solid #E0B236!important;box-shadow:0 6px 18px rgba(150,100,20,.08);transition:transform .2s,box-shadow .2s}
.step:hover,.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(150,100,20,.15)}
.step.hot{border-color:#4a90e2!important;box-shadow:0 0 0 3px rgba(74,144,226,.15)}
.step.stop{border-color:#e8846c!important;box-shadow:0 0 0 3px rgba(232,132,108,.15)}
.stepn,.n{background:linear-gradient(180deg,#FFE9A8,#E0B236 60%,#c99a2e)!important;color:#241a08!important;box-shadow:0 2px 6px rgba(150,100,20,.3)}
.step.hot .stepn{background:#4a90e2!important;color:#fff!important}
.step .sub,.card span{color:#6b5a2e!important}
.step .th{color:#8a6a22!important}
.card b{color:#8e6c0b!important}
.card span em{color:#a3341f!important}
.ar{color:#b07d14!important}
.stopnote{background:#fff3f0!important;color:#a3341f!important}
.shot{border-top:1px solid rgba(224,178,54,.4)!important}
.shots2{background:rgba(224,178,54,.4)!important}
.shots2 figure{background:#fff!important}
.shots2 figcaption{color:#23793a!important}
.shots2 .alt figcaption{color:#a3341f!important}
.shots2 .alt figcaption b{color:#8e6c0b!important}

/* QR / เคล็ดลับ / พับเปิด (มือถือ) */
.qr{background:rgba(255,255,255,.75)!important;border:2px solid #E0B236!important}
.qr .url{border:1px solid #E0B236}
.qr .w{color:#a3341f!important}
.tips div{background:rgba(255,255,255,.72)!important;border:1px dashed #E0B236!important;color:#6c5a2d}
.tips b{color:#8e6c0b!important}
details{background:#fff3f0!important;border:2px solid #e8846c!important}
summary{color:#a3341f!important}
details .in{color:#6c5a2d}
details .in b{color:#a3341f!important}

/* ปุ่มเลือกอาการ */
.sym a{background:rgba(255,255,255,.78)!important;border:2px solid #E0B236!important;color:#6c5a2d!important;transition:transform .2s,box-shadow .2s}
.sym a b{color:#8e6c0b!important}
.sym a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(150,100,20,.18);background:#fffaf0!important}

/* ปุ่มใหญ่ */
.bigbtn,.btn{background:linear-gradient(180deg,#FFE9A8,#E0B236 55%,#c99a2e)!important;color:#241a08!important;border:1px solid #FFD866;box-shadow:0 6px 16px rgba(150,100,20,.22)!important;transition:transform .2s,box-shadow .2s}
.bigbtn:hover,.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(150,100,20,.3)!important}
.bigbtn.ghost,.backs a{background:rgba(255,255,255,.8)!important;color:#8e6c0b!important;border:2px solid #E0B236!important}
.foot{color:#705b29!important}
.foot a{color:#8e6c0b}

/* แสดงในกรอบหน้าศูนย์ช่วยเหลือ: ซ่อนหัวหน้า/ปุ่มกลับซ้ำ */
html.ms-embedded .hd,html.ms-embedded .backs,html.ms-embedded .foot,html.ms-embedded .prog .home{display:none!important}
html.ms-embedded .ms-content .wrap{padding:0}
html.ms-embedded .rv{opacity:1!important;transform:none!important}
html.ms-embedded .step:hover,html.ms-embedded .card:hover{transform:none}

@media (max-width:640px){
  .ms-content{font-size:16px}
  .ms-content .wrap{padding:0 0 24px}
}