/* ═══════════════════════════════════════════════════════════════════════════════
   🎨 สกินรอบ 3 (2026-08-25) — user: "ไม่ชอบขอบมนเหลืองๆ · สีไล่เฉด มันดูเป็น AI มาก ·
   เหลืองทั้งเว็บ เหมือนกันทุกหน้า ไม่ok"
   โหลด **หลัง** site.css (ทับของเดิม) · กฎของสกินนี้:
      ⛔ ห้าม linear-gradient กับพื้นผิว UI — เหลือได้แค่ผ้าคลุมทับภาพวาด
      ⛔ ห้ามขอบทองมน — ขอบเป็นเส้นคมสีกลาง มุม 3-4px
      ⛔ ห้ามใช้ทองเป็นสีหลักทุกหน้า — ทองเหลือแค่ปุ่มหลัก (สีแบรนด์)
      ✅ ทุกหน้ามี **สีประจำตัว** (`--acc`) จากคลาสที่ <body> + ภาพหัวหน้าเลื่อนตำแหน่งไม่ซ้ำกัน
   ═════════════════════════════════════════════════════════════════════════════ */
:root{
  --acc:#2f5d8a;          /* สีประจำหน้า (ค่าเริ่มต้น) */
  --acc-soft:#eef3f8;     /* พื้นอ่อนของสีประจำหน้า */
  --headpos:50%;          /* ตำแหน่งภาพในแถบหัวหน้า */
  --edge:#d7dee6;         /* เส้นขอบกลาง — ไม่ใช่ทอง */
  --edge2:#c3ccd6;
}

/* ── สีประจำแต่ละหน้า (คลาสมาจาก _Layout ตามชื่อหน้า Razor) ────────────────────── */
body.p-index   {--acc:#2f5d8a;--acc-soft:#eaf1f8;--headpos:50%}
body.p-news    {--acc:#b3382f;--acc-soft:#fbeeec;--headpos:12%}
body.p-download{--acc:#1a7a5e;--acc-soft:#e9f5f1;--headpos:26%}
body.p-register{--acc:#2b5fa8;--acc-soft:#eaf1fa;--headpos:38%}
body.p-login   {--acc:#2b5fa8;--acc-soft:#eaf1fa;--headpos:38%}
body.p-events  {--acc:#b5620d;--acc-soft:#fbf1e6;--headpos:74%}
body.p-shop    {--acc:#9a6a08;--acc-soft:#fbf4e4;--headpos:86%}
body.p-itemshop{--acc:#6f4a92;--acc-soft:#f3eff8;--headpos:8%}
body.p-orders  {--acc:#0d6d70;--acc-soft:#e8f4f4;--headpos:44%}
body.p-mailbox {--acc:#8a5a2b;--acc-soft:#f6efe7;--headpos:52%}
body.p-topup   {--acc:#1d6f4f;--acc-soft:#e8f4ef;--headpos:22%}
body.p-coin    {--acc:#9a6a08;--acc-soft:#fbf4e4;--headpos:56%}
body.p-ids     {--acc:#2f5d8a;--acc-soft:#eaf1f8;--headpos:68%}
body.p-guide   {--acc:#1a7a5e;--acc-soft:#e9f5f1;--headpos:18%}
body.p-rules   {--acc:#4a5568;--acc-soft:#eef0f3;--headpos:80%}
body.p-support {--acc:#a8442a;--acc-soft:#fbeee9;--headpos:32%}
body.p-privacy {--acc:#4a5568;--acc-soft:#eef0f3;--headpos:92%}

/* ── พื้นหลังภาพวาด (user บอกว่าอันนี้ดีขึ้น เก็บไว้) ผ้าคลุม = สีทึบเรียบ ────────── */
body{background:url('/img/bg_site.jpg') center top / cover no-repeat fixed,#eef3f8}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(246,249,252,.90)}
.main,.pets,section.band{background:transparent}
.pets{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:rgba(255,255,255,.86)}
.main{padding:40px 0 66px}

/* ── แผง/การ์ด = พื้นเรียบ ขอบคม ─────────────────────────────────────────────── */
.panel,.card,.toc,.faq details,.tblwrap{background:#fff;border:1px solid var(--edge);
  border-radius:4px;box-shadow:0 1px 2px rgba(22,40,60,.05)}
.card{padding:20px}
.card:hover{border-color:var(--acc);box-shadow:0 2px 10px rgba(22,40,60,.10)}

/* หัวแผง: พื้นขาว + เส้นสีประจำหน้า 2px + บล็อกสีเหลี่ยมหน้าหัวข้อ */
.phead,.cityhead{background:#fff;border-bottom:2px solid var(--acc);border-radius:3px 3px 0 0}
.phead{padding:15px 20px}
.cityhead{padding:14px 18px 12px}
.phead h2,.cityhead h3{color:var(--ink);display:flex;align-items:center;gap:9px;text-shadow:none}
.phead h2::before,.cityhead h3::before{content:"";width:4px;height:1.05em;background:var(--acc);flex:none}
.cityhead div{color:var(--mute);font-weight:600}

/* ── แถบหัวหน้าใน: ภาพวาด + ผ้าคลุมทึบเรียบ · ตำแหน่งภาพต่างกันทุกหน้า ────────── */
.pagehead{position:relative;padding:44px 0 26px;overflow:hidden;
  background:url('/img/bg_strip.jpg') var(--headpos) 40% / cover no-repeat;
  border-bottom:3px solid var(--acc)}
.pagehead::before{content:"";position:absolute;inset:0;background:rgba(250,252,254,.88)}
.pagehead .wrap{position:relative}
.pagehead h1{text-shadow:none}
.pagehead h1::after{content:"";display:block;width:56px;height:3px;margin-top:10px;background:var(--acc)}
.crumb{color:var(--ink2)}
.crumb a{color:var(--acc)}

/* หัวข้อในเนื้อหา: ขีดสีประจำหน้า เหลี่ยม ไม่มน */
section.band h2,.docs article h3{position:relative;padding-left:13px}
section.band h2::before,.docs article h3::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;
  width:4px;background:var(--acc);border-radius:0}
.eyebrow,.shead .eye{color:var(--acc)}

/* ── ตาราง: หัวพื้นเรียบสีอ่อนของหน้านั้น ───────────────────────────────────── */
table.tbl{border-radius:0;box-shadow:none;border:0;background:transparent}
table.tbl th{background:var(--acc-soft);color:var(--ink);border-bottom:2px solid var(--acc);font-weight:700}
table.tbl td{border-bottom:1px solid #eef2f6}
table.tbl tr:hover td{background:#fafcfe}

/* ── ปุ่ม: พื้นเรียบ ขอบล่างทึบ (ไม่ไล่เฉด) ────────────────────────────────── */
.btn{border-radius:4px}
.btn-gold{background:var(--gold);color:#3d2600;box-shadow:0 3px 0 var(--gold-dk)}
.btn-gold:hover{background:var(--gold2)}
.btn-gold:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-dk)}
.btn-line{background:#fff;border:1px solid var(--edge2);color:var(--ink);box-shadow:0 2px 0 #e5eaf0}
.btn-line:hover{border-color:var(--acc);color:var(--acc);background:#fff}
.btn-line:active{transform:translateY(2px);box-shadow:0 1px 0 #e5eaf0}
.btn-xl{border-radius:5px}

/* ── แท็บ: เหลี่ยม พื้นเรียบ ตัวที่เลือก = สีประจำหน้า ───────────────────────── */
.tabs button{border-radius:3px;background:#fff;border:1px solid var(--edge);color:var(--ink2);box-shadow:none}
.tabs button:hover{border-color:var(--acc);color:var(--acc);background:#fff}
.tabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ── แถวรายการ / ปุ่มทางลัด ─────────────────────────────────────────────────── */
.crow{background:#fff;border:1px solid var(--edge);border-radius:3px}
.crow:hover{border-color:var(--acc);transform:none;background:var(--acc-soft)}
.crow.own{background:var(--acc-soft);border-color:var(--acc)}
.own-badge{background:var(--acc);border-radius:3px}
.free-badge{background:#fff;border:1px solid var(--edge);color:var(--mute);border-radius:3px}
.qb{background:#fff;border:1px solid var(--edge);border-radius:4px;box-shadow:0 2px 0 #e8edf2;
  color:var(--ink);transition:border-color .18s,color .18s,transform .18s}
.qb:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.qb:active{transform:translateY(0);box-shadow:0 1px 0 #e8edf2}

/* ── กล่องข้อความ: เหลี่ยม พื้นเรียบ ──────────────────────────────────────────── */
.note{border-radius:4px;box-shadow:none}
.note.warn{background:#fff8e8;border-color:#f0dca8;color:#6f4e00}
.note.info{background:#eef4fb;border-color:#cddeef;color:#1f4a7d}
.note.err{background:#fdf0f0;border-color:#f2caca;color:#8f2429}

/* ── แถบบน / ฟุตเตอร์: เรียบ เส้นเดียว ──────────────────────────────────────── */
.nav{background:rgba(255,255,255,.95);border-bottom:1px solid var(--edge);box-shadow:0 1px 6px rgba(22,40,60,.06)}
.nav menu a{color:var(--ink2)}
.nav menu a::after{background:var(--acc)}
.nav menu a.on{color:var(--acc)}
footer{background:rgba(255,255,255,.94);border-top:1px solid var(--edge);color:var(--ink2)}

/* ── ภาพเปิด: ผ้าคลุมทิศเดียว (ทับภาพวาด ⇒ ถ้าไม่คลุม ตัวหนังสืออ่านไม่ออก) ──── */
.hero{background:transparent}
.hero::after{background:linear-gradient(92deg,rgba(250,252,254,.96) 0%,rgba(250,252,254,.88) 34%,
  rgba(250,252,254,.35) 64%,transparent 82%)}
.hero h1,.hero p{text-shadow:none}
.tagpill{background:#fff;border:1px solid var(--edge);color:var(--acc);box-shadow:none;border-radius:3px}
.tagpill i{background:var(--red)}

/* ── ป้ายสถานะ / ขั้นตอน / อื่น ๆ: เหลี่ยม ใช้สีประจำหน้า ──────────────────── */
.pill{border-radius:3px}
.pill-soon{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.pill-live{background:#eafaf4;border-color:#4aa88a;color:#0a7a5c}
.pill-off{background:#f5f8fb;border-color:var(--edge);color:var(--mute)}
.steps .card::before{background:var(--acc);color:#fff;border-radius:0;box-shadow:none;
  width:28px;height:28px;font-size:14px;top:-13px;left:18px}
.faq summary::before{color:var(--acc)}
.pager a,.pager span{border-radius:3px}
.pager .on{background:var(--acc);border-color:var(--acc);color:#fff}
.toc a:hover{color:var(--acc)}
.coin-chip{border-radius:3px;background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.balance{border-radius:4px;border-color:var(--edge)}
.balance .num{color:var(--acc)}
.ni{border-radius:3px;background:#fff}
.ni:hover{background:#fff;border-color:var(--acc);transform:none;box-shadow:0 2px 10px rgba(22,40,60,.08)}
.ni .th{border-radius:2px}
.ni .tg{border-radius:2px}
.ni:hover h3{color:var(--acc)}
.divider{display:flex;align-items:center;gap:12px;justify-content:center;margin:32px 0;color:var(--edge2)}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:200px;background:var(--edge)}

@media(max-width:980px){
  /* ผ้าคลุมภาพเปิดบนจอแคบ (ทับกฎ media ของ site.css ที่ยังใช้ไล่เฉดสีเดิม) */
  .hero::after{background:linear-gradient(0deg,rgba(250,252,254,.97) 6%,rgba(250,252,254,.62) 40%,rgba(250,252,254,.30) 100%)}
}