/* ═══ pa_modern.css — 🎨 ธีมโมเดิร์นของโมดูลแผนการสอน วPA (Gen ใหม่) ═══
 * โหลด "ท้ายหน้า" เพื่อทับสไตล์เดิมของแต่ละหน้า (planpa / pa1 / plan_view / planpa_guide)
 * แนวทาง: พื้นออโรร่านุ่ม · การ์ดกระจก (glassmorphism) · ปุ่ม-ชิพมนเต็มแบบ pill · ไล่สีม่วง-ฟ้า-เขียว
 * ไฟล์นี้แตะเฉพาะ "หน้าตา" — ไม่แตะโครงสร้าง/ระบบใด ๆ ลบไฟล์นี้ = กลับธีมเดิมทันที */

:root{--pmv:#7B5CFF;--pms:#65C9FF;--pml:#D8F26A;--pmink:#17151f;
      --pmgrad:linear-gradient(135deg,#7B5CFF,#65C9FF);
      --pmgo:linear-gradient(135deg,#18b26b,#7ed957);
      --pmcard:rgba(255,255,255,.82);--pmline:rgba(123,92,255,.16);}

/* ── 🌈 พื้นหลังออโรร่า (จางกว่าหน้าบอร์ด — หน้าใช้งานยาว) ── */
body{background:#f5f4fb !important;}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(600px 400px at 6% -8%,rgba(123,92,255,.14),transparent 62%),
  radial-gradient(540px 380px at 98% 2%,rgba(101,201,255,.14),transparent 60%),
  radial-gradient(680px 460px at 50% 110%,rgba(216,242,106,.16),transparent 58%);}

/* ── 🧰 แถบเครื่องมือ builder (planpa + pa1 ใช้ .top ร่วมกัน) ── */
.pa .top{background:rgba(255,255,255,.78) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--pmline) !important;border-radius:0 0 18px 18px;}
.pa .top select,.pa .top button,.pa .top a.bt{border-radius:999px !important;border:1.5px solid var(--pmline) !important;
  background:#fff !important;transition:.15s;}
.pa .top select:hover,.pa .top button:hover,.pa .top a.bt:hover{border-color:var(--pmv) !important;transform:translateY(-1px);}
.pa .top .doc{background:var(--pmgo) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 5px 16px rgba(24,178,107,.35);font-weight:800;}
/* pmwhite — ผู้ใช้สั่งพื้นขาวทั้งหัว (3 ก.ย. 2026): แถบเข้มเดิมยกเป็นขาวทุกหน้า planpa/pa1 */
body>.pa>.top{background:#fff !important;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--pmline) !important;box-shadow:0 4px 18px rgba(60,40,140,.08);}
body>.pa>.top .bt{background:#fff !important;border-color:var(--pmline) !important;color:var(--pmink) !important;}
body>.pa>.top .bt:hover{background:#f6f4ff !important;border-color:var(--pmv) !important;}
body>.pa>.top .bt.doc{background:var(--pmgo) !important;color:#fff !important;box-shadow:0 5px 16px rgba(24,178,107,.35);}
body>.pa>.top select{background:#fff !important;color:var(--pmink) !important;border-color:var(--pmline) !important;}
body>.pa>.top b,body>.pa>.top .st{color:var(--pmink) !important;}

/* ── ✅ แถบเช็คลิสต์ 8 ตชว. ── */
.pa .chk{background:#fff !important;color:var(--pmink) !important;border-radius:0 0 18px 18px;}
.pa .chk .c{border-radius:999px;}
.pa .chk .c.ok{background:var(--pmgo) !important;}

/* ── 🃏 การ์ดเนื้อหา ── */
.pa .sec,.sec{background:var(--pmcard) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7) !important;border-radius:20px !important;box-shadow:0 6px 22px rgba(90,61,240,.07);}
.pa .stg{border-radius:16px !important;border:1px solid var(--pmline) !important;background:rgba(255,255,255,.6) !important;}
.pa .tip,.tip{background:rgba(123,92,255,.06) !important;border:1.5px dashed rgba(123,92,255,.45) !important;
  color:#463a80 !important;border-radius:14px !important;}
.pa .warn{border-radius:14px !important;}

/* ── ⌨️ ช่องกรอก ── */
.pa input[type=text],.pa input[type=number],.pa input[type=date],.pa select,.pa textarea,
input[type=text],input[type=number],textarea,select{border-radius:12px;}
.pa input[type=text]:focus,.pa input[type=number]:focus,.pa input[type=date]:focus,.pa select:focus,.pa textarea:focus,
input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--pmv) !important;box-shadow:0 0 0 4px rgba(123,92,255,.14);}

/* ── 🔘 ปุ่มย่อยใน builder ── */
.pa .add{border-radius:999px !important;border:1.5px dashed rgba(123,92,255,.45) !important;color:#5a3df0 !important;transition:.15s;}
.pa .add:hover{background:rgba(123,92,255,.07) !important;transform:translateY(-1px);}
.pa .del{border-radius:11px !important;transition:.15s;}
.pa .tag{border-radius:999px !important;transition:.15s;}
.pa .tag:hover{transform:translateY(-1px);border-color:var(--pmv) !important;}
.pa .tag.on{background:var(--pmgrad) !important;border-color:transparent !important;color:#fff !important;
  box-shadow:0 4px 12px rgba(123,92,255,.35);}
.pa select.pickbar{border-radius:12px !important;border:1.5px dashed rgba(123,92,255,.45) !important;
  background:rgba(123,92,255,.05) !important;color:#5a3df0 !important;}
.pa table.ms th{background:rgba(123,92,255,.08) !important;}
.pa table.ms{border-radius:12px;overflow:hidden;}

/* ── 🪟 โมดัล (คลังแผน/แผนของฉัน) ── */
#libModal,#myModal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#libModal>div,#myModal>div{border-radius:22px !important;box-shadow:0 24px 70px rgba(20,10,60,.35) !important;}

/* ── 👑 หน้าขาย VIP (planpa ก่อนสมัคร) ── */
.p-hero{background:var(--pmcard) !important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7) !important;
  border-radius:22px !important;box-shadow:0 10px 34px rgba(90,61,240,.08);}
.p-hero h1{background:linear-gradient(100deg,#17151f 25%,#7B5CFF 65%,#65C9FF 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800 !important;}
.p-hero .chip{border-radius:999px !important;box-shadow:0 2px 8px rgba(90,61,240,.08);border-color:transparent !important;transition:.15s;}
.p-hero .chip:hover{transform:translateY(-1px);}
.p-feat{border-radius:18px !important;border:1px solid rgba(255,255,255,.7) !important;background:var(--pmcard) !important;transition:.15s;}
.p-feat:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,61,240,.12);}
.p-feat .no{background:var(--pmgrad) !important;border-radius:12px !important;}
.buycard{background:linear-gradient(150deg,#17151f 30%,#33285e 100%) !important;border:1px solid rgba(123,92,255,.35) !important;
  border-radius:22px !important;box-shadow:0 16px 44px rgba(30,15,80,.35);}
.bc-buy{background:var(--pmgrad) !important;border:none !important;border-radius:999px !important;
  box-shadow:0 8px 24px rgba(123,92,255,.45);transition:.16s;}
.bc-buy:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(123,92,255,.55);}
.vipbox{border-radius:18px !important;border:1.5px dashed rgba(123,92,255,.5) !important;background:rgba(255,255,255,.85) !important;}
.vipbox input{border-radius:12px !important;}
.vipbox button,.vipbox .vb-login{border-radius:999px !important;background:var(--pmink) !important;transition:.15s;}
.vipbox button:hover,.vipbox .vb-login:hover{transform:translateY(-1px);}

/* ── 👁 หน้าดูแผน (plan_view) — ปุ่มแอ็กชัน ── */
.b{border-radius:999px !important;transition:.15s;}
.b:hover{transform:translateY(-1px);}
.b.pr{background:var(--pmgo) !important;border-color:transparent !important;color:#fff !important;
  box-shadow:0 6px 18px rgba(24,178,107,.35);}

/* ── 📖 คู่มือ (planpa_guide) ── */
.pg-feat{border-radius:16px;transition:.15s;}
.pg-feat:hover{transform:translateY(-1px);}
.pg-feat .ic{background:var(--pmgrad);color:#fff;border-radius:12px;}

/* ── 📋 pa1.php — การ์ด 3 ด้าน + ตัวเลือกตัวอย่าง ── */
.area{border-radius:16px !important;border:1px solid var(--pmline) !important;background:rgba(255,255,255,.65) !important;}
.pick{border-radius:12px !important;border:1.5px dashed rgba(123,92,255,.45) !important;
  background:rgba(123,92,255,.05) !important;color:#5a3df0 !important;}
.ck{border-radius:12px;}

/* ── ♿ โฟกัสคีย์บอร์ด + ลดการเคลื่อนไหว ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(123,92,255,.4);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

/* ═══════════ 🎮 GAME MODE — หน้าสร้างแผนสไตล์เกม (ด่าน · เควสต์ · XP) ═══════════ */

/* ── 🗺 แผนที่ด่าน (วิซาร์ด 6 ขั้น) ── */
.pa .stepper{gap:10px;padding:14px 4px 8px;}
.pa .stepper .stp{position:relative;border:2px solid #e3ddf5 !important;border-radius:16px !important;
  background:#fff !important;box-shadow:0 4px 0 #e3ddf5;transition:.14s;}
.pa .stepper .stp:hover{border-color:var(--pmv) !important;box-shadow:0 4px 0 rgba(123,92,255,.45);transform:translateY(-2px);}
.pa .stepper .stp .sn{display:inline-flex;align-items:center;gap:5px;color:#8a83a8;}
.pa .stepper .stp .sn::before{content:"🎯";font-size:11px;}
.pa .stepper .stp.cur{border-color:var(--pmv) !important;box-shadow:0 5px 0 #5a3df0,0 0 0 4px rgba(123,92,255,.18) !important;
  transform:translateY(-2px);background:linear-gradient(180deg,#fff,#f4f0ff) !important;}
.pa .stepper .stp.cur .sn{color:#5a3df0;} .pa .stepper .stp.cur .sn::before{content:"👉";}
.pa .stepper .stp.done{background:linear-gradient(180deg,#f2fff5,#e2fbe9) !important;border-color:#35c46f !important;
  box-shadow:0 4px 0 #2aa65c;}
.pa .stepper .stp.done .sn::before{content:"✅";}
.pa .stepper .stp.done::after{content:"★";position:absolute;top:-9px;right:-6px;font-size:15px;color:#ffb43a;
  text-shadow:0 1px 0 #d98f00;transform:rotate(18deg);}
.pa .stepper .stp .sp{color:#18a45c !important;}

/* ── ⚔️ HUD เควสต์ 8 ตัวชี้วัด ── */
.pa .chk{background:#fff !important;color:var(--pmink) !important;box-shadow:0 8px 24px rgba(60,40,140,.1);
  border:1px solid var(--pmline);}
.pa .chk .c{background:#f1eefb;border:1px solid rgba(123,92,255,.2);color:#4a4468;transition:.15s;}
.pa .chk .c[data-go]:hover{transform:translateY(-1px);background:#e6e0fa;}
.pa .chk .c.ok{background:var(--pmgo) !important;border-color:transparent;
  box-shadow:0 0 10px rgba(126,217,87,.6),0 0 22px rgba(126,217,87,.25);}
/* แถบ XP — ไล่สีวิ่ง */
.pa .chk .c.prog{background:#fff !important;border-color:rgba(123,92,255,.25) !important;}
.pa .chk .c.prog i{background:#e8e4f8 !important;height:9px !important;}
.pa .chk .c.prog i b{background:linear-gradient(90deg,#7ed957,#65C9FF,#7B5CFF) !important;background-size:200% 100%;
  animation:pmxp 2.4s linear infinite;box-shadow:0 0 8px rgba(101,201,255,.55);}
@keyframes pmxp{0%{background-position:0 0;}100%{background-position:200% 0;}}

/* ── 🕹 ปุ่มสไตล์เกม — เงาแข็ง กดแล้วยุบจริง ── */
.pa .stepnav{border-radius:999px !important;background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 12px 34px rgba(60,30,140,.18) !important;}
.pa .stepnav button{border-radius:999px !important;border:2px solid #d9d3ee !important;box-shadow:0 4px 0 #d9d3ee;transition:.12s;}
.pa .stepnav button:hover:not(:disabled){transform:translateY(-1px);}
.pa .stepnav button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #d9d3ee;}
.pa .stepnav button.pr{background:var(--pmgrad) !important;border-color:transparent !important;color:#fff !important;
  box-shadow:0 4px 0 #4a2fd6;}
.pa .stepnav button.pr:active:not(:disabled){box-shadow:0 1px 0 #4a2fd6;}
.pa .top .doc{box-shadow:0 4px 0 #128a52 !important;transition:.12s;}
.pa .top .doc:active{transform:translateY(3px);box-shadow:0 1px 0 #128a52 !important;}
.pa .add:active,.pa .tag:active,.btn1:active{transform:translateY(2px);}

/* ── ✨ ของเล็กที่ทำให้มีชีวิต ── */
.pa .sec h2{display:flex;align-items:center;gap:8px;}
.pa .sec:hover{box-shadow:0 10px 30px rgba(90,61,240,.12);}
.pa .stepnav .pos{background:rgba(123,92,255,.1);color:#5a3df0;border-radius:999px;padding:4px 14px;font-weight:900;}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ═══ 🎮 v3 — HUD เลเวล/XP + แผนที่ด่านมีเส้นทาง + ปุ่มเกมหนักขึ้น ═══ */
.pgx-hud{display:flex;gap:14px;align-items:center;margin:14px 0 4px;padding:13px 18px;border-radius:20px;
  background:linear-gradient(120deg,#1b1730,#3a2c6e);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(35,20,90,.35);color:#fff;position:relative;overflow:visible;}
.pgx-badge{flex:0 0 auto;}
.pgx-lv{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:58px;border-radius:16px;
  background:var(--pmgrad);font-weight:900;font-size:16px;letter-spacing:.5px;
  box-shadow:0 5px 0 #4a2fd6,0 0 18px rgba(123,92,255,.55);transform:rotate(-3deg);}
.pgx-mid{flex:1;min-width:0;}
.pgx-title{font-size:13px;font-weight:800;margin-bottom:7px;letter-spacing:.2px;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.pgx-bar{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.14);overflow:visible;}
.pgx-bar b{display:block;height:100%;width:0;border-radius:99px;transition:width .6s cubic-bezier(.2,.9,.3,1.2);
  background:linear-gradient(90deg,#7ed957,#65C9FF,#7B5CFF);background-size:200% 100%;animation:pmxp 2.2s linear infinite;
  box-shadow:0 0 12px rgba(101,201,255,.65);}
.pgx-bar i{position:absolute;top:-6px;left:-11px;width:24px;height:26px;transition:left .6s cubic-bezier(.2,.9,.3,1.2);
  background:radial-gradient(circle at 50% 45%,#fff 0 4px,rgba(255,255,255,.25) 5px,transparent 11px);}
.pgx-bar i::after{content:"⚡";position:absolute;inset:0;text-align:center;font-size:15px;line-height:26px;filter:drop-shadow(0 0 5px #65C9FF);}
.pgx-pct{flex:0 0 auto;font-size:23px;font-weight:900;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#D8F26A,#65C9FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pgx-hud.pgx-full{box-shadow:0 10px 34px rgba(35,20,90,.4),0 0 0 3px rgba(216,242,106,.6),0 0 34px rgba(216,242,106,.4);}
.pgx-hud.pgx-full .pgx-lv{transform:rotate(-3deg) scale(1.06);}
.pgx-pop{position:absolute;right:16px;top:-12px;font-weight:900;font-size:15px;color:#D8F26A;
  text-shadow:0 0 10px rgba(216,242,106,.8);animation:pgxpop .95s ease-out forwards;pointer-events:none;}
@keyframes pgxpop{0%{opacity:0;transform:translateY(8px) scale(.7);}25%{opacity:1;transform:translateY(-4px) scale(1.15);}100%{opacity:0;transform:translateY(-30px) scale(1);}}
.pgx-cf{position:fixed;inset:0;z-index:5000;pointer-events:none;}
/* แผนที่ด่าน: เส้นทางเชื่อม + เม็ดเลขด่าน */
.pa .stepper{position:relative;}
.pa .stepper::before{content:"";position:absolute;left:3%;right:3%;top:50%;height:4px;border-radius:99px;
  background:repeating-linear-gradient(90deg,#cfc7ee 0 12px,transparent 12px 22px);z-index:0;}
.pa .stepper .stp{position:relative;z-index:1;}
/* ปุ่มหลักหนักขึ้น */
.pa .stepnav button.pr{font-size:14px !important;padding:12px 22px !important;box-shadow:0 5px 0 #4a2fd6;}
.pa .top .doc{border-radius:999px !important;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ═══ 🎯 การ์ดนับถอยหลังยื่นวิทยฐานะ ═══ */
.crCard{padding:0 !important;overflow:hidden;}
.crHead{display:flex;gap:10px;align-items:center;width:100%;border:none;background:linear-gradient(120deg,#1b1730,#3a2c6e);
  color:#fff;padding:14px 18px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;text-align:left;}
.crHead:hover{filter:brightness(1.12);}
.crIco{font-size:19px;} .crSum{flex:1;min-width:0;line-height:1.55;} .crCaret{opacity:.8;}
.crBody{padding:16px 20px 18px;}
.crCk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;font-weight:600;margin-top:9px;cursor:pointer;line-height:1.6;}
.crOut{margin-top:14px;}
.crBig{font-family:"Sarabun",sans-serif;font-size:15px;color:var(--muted,#6f6a80);}
.crBig b{font-size:44px;font-weight:900;line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums;
  background:var(--pmgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.crBig.ok b{background:var(--pmgo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:30px;letter-spacing:0;}
.crTgt{font-size:13.5px;margin-top:4px;line-height:1.8;}
.crBarW{display:flex;gap:12px;align-items:center;margin-top:10px;}
.crBarW span{font-size:11.5px;font-weight:800;color:#5a3df0;white-space:nowrap;}
.crBar{flex:1;height:12px;border-radius:99px;background:rgba(123,92,255,.14);overflow:hidden;}
.crBar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7ed957,#65C9FF,#7B5CFF);
  background-size:200% 100%;animation:pmxp 2.4s linear infinite;box-shadow:0 0 10px rgba(101,201,255,.5);}
.crNote{margin-top:13px;font-size:11.5px;line-height:1.8;color:var(--muted,#6f6a80);border-top:1px dashed var(--pmline);padding-top:10px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}