/* Mass-RO · คู่มือแบบใหม่ (ธีมสว่าง) ใช้ร่วม: mobile/ fix/ (หน้า pc/ ใช้ชุดเดียวกันแบบฝังในหน้า) */
/* ===== หน้าติดตั้งบนคอม (จัดใหม่) ===== */
.pg{max-width:980px;margin:0 auto;padding:0 4px 30px;color:#6c5a2d}
.pg h2,.pg h3,.pg .map b,.pg .num{font-family:"Kanit",Tahoma,sans-serif}

/* แผนที่ 3 ส่วน */
.map{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px}
.map a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;text-decoration:none;color:#6c5a2d!important;
  background:rgba(255,255,255,.82);border:2px solid #E0B236;box-shadow:0 6px 18px rgba(150,100,20,.08);transition:transform .2s,box-shadow .2s}
.map a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(150,100,20,.18)}
.map .ic{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(180deg,#FFE9A8,#E0B236 60%,#c99a2e);box-shadow:0 3px 8px rgba(150,100,20,.3)}
.map b{display:block;font-size:18px;color:#8e6c0b;line-height:1.2}
.map small{display:block;font-size:13.5px;color:#8a7a52}

/* หัวส่วน */
.part{margin:24px 0 0;scroll-margin-top:90px}
.part > h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;font-size:23px;color:#8e6c0b!important}
.part > h2 .tag{font-size:15px;padding:2px 13px;border-radius:99px}
.part > h2 small{font-size:15px;font-weight:400;color:#8a7a52}

/* การ์ดขั้นตอน */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.85);border:2px solid #E0B236;
  box-shadow:0 6px 18px rgba(150,100,20,.08);transition:transform .2s,box-shadow .2s}
.st:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(150,100,20,.16)}
.st.wide{grid-column:1/-1}
.st .tx{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;flex:1;font-size:16.5px;line-height:1.55}
.st .num{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#241a08;
  background:linear-gradient(180deg,#FFE9A8,#E0B236 60%,#c99a2e);box-shadow:0 2px 6px rgba(150,100,20,.3)}
.st .tx b{color:#5a4410}
.st .sub{display:block;font-size:14px;color:#8a7a52;margin-top:2px}
.st.stop{border-color:#e8846c}
.st .note{display:block;margin-top:6px;padding:4px 10px;border-radius:10px;background:#fff3f0;color:#a3341f;font-size:14.5px}
.st .note b{color:#a3341f}

/* รูป: กรอบสูงเท่ากัน ครอบให้เห็นจุดที่ต้องกด แตะเพื่อดูเต็ม */
.pic{position:relative;display:block;height:150px;background:#fff;border-top:1px solid rgba(224,178,54,.45);cursor:zoom-in;overflow:hidden}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic.fit img{object-fit:contain}
.pic.tall{height:200px}
.pic.dk{background:#16110a}
.pic::after{content:"🔍 แตะดูรูปเต็ม";position:absolute;right:8px;bottom:8px;font:500 12px "Kanit",Tahoma,sans-serif;color:#fff;background:rgba(36,26,8,.6);padding:1px 9px;border-radius:99px;opacity:0;transition:opacity .2s}
.pic:hover::after{opacity:1}
.pics2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(224,178,54,.45)}
.pics2 figure{margin:0;display:flex;flex-direction:column}
.pics2 figure + figure{border-left:1px solid rgba(224,178,54,.45)}
.pics2 figcaption{padding:7px 12px;font-size:14.5px;line-height:1.45;background:#f0faf1;color:#23793a}
.pics2 .alt figcaption{background:#fff3f0;color:#a3341f}
.pics2 .alt figcaption b{color:#a3341f}
.pics2 .pic{height:240px;border-top:0}

/* แอนตี้ไวรัส */
.why{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:14px;background:#fff3f0;border:2px solid #e8846c;color:#85361e;font-size:15.5px;line-height:1.55;margin-bottom:14px}
.why > span:first-child{font-size:24px;line-height:1.2}
.why b{color:#a3341f}
.why .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.why .tags span{font-size:13px;padding:1px 10px;border-radius:99px;background:#fff;border:1px solid rgba(224,102,74,.55);color:#a3341f}
.st .tb{height:auto;flex:1;min-height:200px;border-top:1px solid rgba(224,178,54,.45)}
.path{list-style:none;margin:0;padding:2px 14px 10px 62px;counter-reset:p}
.path li{position:relative;padding:8px 0;border-top:1px dashed rgba(224,178,54,.55);font-size:15.5px;line-height:1.6;counter-increment:p}
.path li:first-child{border-top:0}
.path li::before{content:counter(p);position:absolute;left:-30px;top:12px;width:20px;height:20px;border-radius:50%;background:#4a90e2;color:#fff;font:700 12px/20px "Kanit",sans-serif;text-align:center}
.path .th{display:block;font-size:13px;color:#8a7a52}
.path .ar{color:#b07d14;margin:0 3px}
.pg .k{font-size:15px;padding:0 8px}
.tip{margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.78);border:2px dashed #E0B236;font-size:14.5px;line-height:1.6}
.tip b{color:#8e6c0b}

/* จบ */
.done{margin-top:24px;padding:18px;border-radius:18px;text-align:center;background:#f0faf1;border:2px solid #5cbf6f;color:#2f5e37}
.done h3{margin:0 0 4px;font-size:22px;color:#23793a}
.done p{margin:2px 0;font-size:15.5px}
.done .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.done .btns a{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:12px;text-decoration:none;font:600 16px "Kanit",Tahoma,sans-serif;
  color:#241a08!important;background:linear-gradient(180deg,#FFE9A8,#E0B236 55%,#c99a2e);border:1px solid #FFD866;box-shadow:0 6px 16px rgba(150,100,20,.22);transition:transform .2s,box-shadow .2s}
.done .btns a:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(150,100,20,.3)}
.done .btns a.gh{background:#fff;color:#8e6c0b!important;border:2px solid #E0B236}

html.ms-embedded .st:hover,html.ms-embedded .map a:hover{transform:none}
@media (max-width:640px){
  .map{grid-template-columns:1fr;gap:8px}
  .map a{padding:10px 14px}
  .grid{grid-template-columns:1fr}
  .pic{height:140px}
  .pics2{grid-template-columns:1fr}
  .pics2 figure + figure{border-left:0;border-top:1px solid rgba(224,178,54,.45)}
  .pics2 .pic{height:210px}
  .part > h2{font-size:20px}
  .path{padding-left:52px}
}

/* v2: กรอบใหญ่ + ป้ายน้ำเงิน · พื้นในกรอบใส · รูปขั้น 10–11 ครอบพอดีอยู่แถวเดียวกัน */
.ms-card{background:transparent!important;box-shadow:none!important;border:0!important}
.ms-content{background:transparent!important}
.pg{margin-top:6px;padding:20px 20px 22px;border:2px solid #E0B236;border-radius:20px;background:rgba(255,255,255,.45);box-shadow:0 10px 30px rgba(150,100,20,.1)}
.st,.map a{background:transparent}
.pic,.pic.dk,.pics2 figcaption,.pics2 .alt figcaption{background:transparent}
.pic.nat{height:auto;display:flex;align-items:center;justify-content:center;padding:10px}
.pic.nat img{width:auto;height:auto;max-width:100%;max-height:250px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.pics2 .pic.nat{height:auto}
.gc{grid-template-columns:2fr 1fr;align-items:stretch}
.gc .st{justify-content:flex-start}
.gc .st .tx{flex:none}
.gc .st > .pic.nat{flex:1}
@media (max-width:640px){
  .pg{padding:14px 10px 16px}
  .gc{grid-template-columns:1fr}
  .pic.nat img{max-height:230px}
}
/* v3: ของข้างในการ์ดแสดงทันที (เลขขั้นตอนไม่หาย) — เด้งเฉพาะตัวการ์ด */
.pg .rv .rv:not(.in){transform:none}  /* ของในการ์ดค่อย ๆ จางเข้าที่เดิม (ไม่เลื่อนออกนอกการ์ด จะได้ไม่ค้างหาย) */

/* ===== ส่วนเสริมสำหรับหน้ามือถือ / เปิดเกมไม่ได้ ===== */
.pg p.lead{margin:0 0 12px;font-size:16px}
.pg a{color:#8e6c0b}
/* QR */
.qrc{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;border:2px solid #E0B236;margin-bottom:14px}
.qrc img{width:120px;height:120px;flex:none;border-radius:10px;background:#fff;padding:5px;box-shadow:0 4px 12px rgba(150,100,20,.15)}
.qrc .url{display:inline-block;margin:6px 0;padding:3px 14px;border-radius:10px;border:2px solid #E0B236;background:#fff;color:#1d4fb8;font:700 18px "Kanit",Tahoma,sans-serif;text-decoration:none}
.qrc .w{display:block;margin-top:4px;font-size:14px;color:#a3341f}
.qrc .ok1{display:inline-block;margin-bottom:4px;padding:1px 12px;border-radius:99px;background:#e9f7ec;border:1px solid #5cbf6f;color:#23793a;font:500 14px "Kanit",Tahoma,sans-serif}
/* ปุ่มเลือกเครื่อง */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 4px}
.seg a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;text-decoration:none;font:700 19px "Kanit",Tahoma,sans-serif;
  color:#8e6c0b!important;border:2px solid #E0B236;transition:transform .2s,box-shadow .2s}
.seg a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(150,100,20,.18)}
.seg a.on{color:#241a08!important;background:linear-gradient(180deg,#FFE9A8,#E0B236 60%,#c99a2e);box-shadow:0 6px 16px rgba(150,100,20,.25)}
.panel{display:none}.panel.on{display:block}
.g3{grid-template-columns:repeat(3,1fr)}
.st .sub em{font-style:normal;color:#8e6c0b;font-weight:bold}
/* เคล็ดลับ */
.tips3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.tips3 div{padding:10px 14px;border-radius:12px;border:2px dashed #E0B236;font-size:14.5px;line-height:1.5}
.tips3 b{display:block;color:#8e6c0b;font:600 15.5px "Kanit",Tahoma,sans-serif}
/* กล่องพับเปิด */
details.det{margin-top:14px;border-radius:14px;border:2px solid #e8846c}
details.det summary{cursor:pointer;padding:10px 14px;font:600 17px "Kanit",Tahoma,sans-serif;color:#a3341f!important;list-style:none}
details.det summary::-webkit-details-marker{display:none}
details.det summary::after{content:" ▾"}
details.det[open] summary::after{content:" ▴"}
details.det .in{padding:0 14px 10px;font-size:15px;color:#6c5a2d}
details.det .in p{margin:0 0 8px}
details.det .in b{color:#a3341f}
/* เลือกอาการ (หน้าเปิดเกมไม่ได้) */
.sym2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.sym2 a{display:block;padding:10px 14px;border-radius:14px;border:2px solid #E0B236;text-decoration:none;color:#6c5a2d!important;font-size:13.5px;line-height:1.45;transition:transform .2s,box-shadow .2s}
.sym2 a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(150,100,20,.18)}
.sym2 a b{display:block;color:#8e6c0b;font:600 16px "Kanit",Tahoma,sans-serif}
.sym2 a.m b{color:#1d4fb8}
.lst{display:flex;flex-direction:column;gap:10px}
.lst .st .tx{flex:none}
.inf{padding:9px 14px;border-radius:12px;border:2px dashed #E0B236;font-size:15px;margin-bottom:10px}
.inf b{color:#8e6c0b}
.subh{margin:14px 0 8px;font:600 17px "Kanit",Tahoma,sans-serif;color:#8e6c0b}
.okl{margin-top:10px;padding:9px 14px;border-radius:12px;border:2px solid #5cbf6f;color:#2f5e37;font-size:15px}
.okl b{color:#23793a}
.warnl{margin-top:20px;padding:10px 14px;border-radius:12px;border:2px solid #e8846c;color:#85361e;font-size:15px}
@media (max-width:640px){
  .qrc{gap:12px;padding:12px}
  .qrc img{width:96px;height:96px}
  .seg a{font-size:16px;padding:10px 6px}
  .g3{grid-template-columns:1fr}
  .tips3{grid-template-columns:1fr}
  .sym2{grid-template-columns:1fr 1fr}
}
.st > .pic.nat{flex:1}
/* แถบงาน Windows จำลอง: โทนสว่าง (ไม่ใช้พื้นดำ) */
.pg .tb{background:linear-gradient(180deg,#eaf2fd,#d7e6fa)!important}
.pg .tb .bar{background:#f7f7f9!important;color:#333!important;border-top:1px solid #d5d9e2}
.pg .tb .srch{background:#e9ebf0!important;color:#555!important}
.pg .tb .up{color:#222;background:#fff}
.pg .tb .clk{color:#333}
.pg .tb .pop{background:#fff!important;box-shadow:0 6px 18px rgba(0,0,0,.18)!important;border:1px solid #d5d9e2}
.pg .tb .ic.hot{background:#eef4ff!important}
.st > .tx{flex:none}
/* v2: กรอบรูปสูงเท่ากันทั้งแถว (ครอบพอดี ไม่มีที่ว่าง) — .fh + --h, .cov = ครอบเต็มกรอบ */
.pic.fh{height:var(--h,220px);display:flex;align-items:center;justify-content:center;padding:8px;flex:none!important}
.pic.fh img{width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.pic.fh.cov img{width:100%}
.pic.fh.cov img{object-fit:cover}
.grid + .grid{margin-top:14px}
@media (max-width:640px){.pic.fh{height:auto;max-height:none}.pic.fh img{height:auto;max-height:240px}.pic.fh.cov img{height:120px}}
.pic.fh{margin-top:auto}