/* ============================================================
   GorPass — Redesign stylesheet (navy + gold)
   Self-contained. All classes are gp- prefixed so this file
   does NOT collide with the existing exam-engine classes
   (.qcard .choice .timer .scorecard …) used on exam.html.
   Link this ONLY on index.html and exams.html.
   ============================================================ */

:root{
  --gp-navy-900:#0A1A33;
  --gp-navy-800:#0c2143;
  --gp-navy-700:#102444;
  --gp-navy-600:#15315E;
  --gp-navy-500:#1c4178;
  --gp-gold:#F4B71E;
  --gp-gold-hi:#ffc835;
  --gp-gold-deep:#C8881A;
  --gp-ink:#1f2a3d;
  --gp-slate:#51607A;
  --gp-slate-2:#7B889E;
  --gp-line:#E6EBF2;
  --gp-line-2:#EBEFF5;
  --gp-bg:#ffffff;
  --gp-bg-soft:#F5F7FB;
  --gp-green:#1E9E6A;
  --gp-green-deep:#1E7D4F;
  --gp-shadow-card:0 1px 3px rgba(16,36,68,0.05);
  --gp-shadow-hover:0 20px 40px -18px rgba(16,36,68,0.28);
  --gp-r-lg:24px;
  --gp-r-md:18px;
  --gp-r-sm:12px;
  --gp-maxw:1200px;
  --gp-pad-x:clamp(18px,5vw,40px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--gp-bg);
  color:var(--gp-ink);
  font-family:'Sarabun',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.gp-kanit{font-family:'Kanit',sans-serif;}

/* ---------- layout helpers ---------- */
.gp-wrap{max-width:var(--gp-maxw);margin:0 auto;padding-left:var(--gp-pad-x);padding-right:var(--gp-pad-x);}
.gp-section{padding-top:clamp(56px,8vw,94px);padding-bottom:clamp(56px,8vw,94px);}
.gp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Kanit',sans-serif;font-weight:600;font-size:13px;letter-spacing:.07em;color:var(--gp-gold-deep);text-transform:uppercase;}
.gp-h2{margin:14px 0 0;font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(26px,4vw,41px);line-height:1.2;color:var(--gp-navy-700);text-wrap:balance;}
.gp-lead{margin:16px 0 0;font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--gp-slate);}

/* ---------- nav ---------- */
.gp-nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid #E8ECF3;}
.gp-nav__inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px;}
.gp-brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.gp-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#235aa3,#0d2347 60%,#0a1a33);display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:800;font-size:21px;color:#FFC637;border:1px solid rgba(244,183,30,.45);box-shadow:0 4px 14px rgba(10,26,51,.32),inset 0 0 10px rgba(255,198,55,.12);text-shadow:0 0 10px rgba(255,198,55,.45);}
.gp-brand__name{font-family:'Kanit',sans-serif;font-weight:600;font-size:19px;color:var(--gp-navy-700);line-height:1.1;}
.gp-brand__sub{font-size:11px;color:var(--gp-slate-2);letter-spacing:.02em;}
.gp-navlinks{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;}
.gp-navlink{padding:8px 14px;border-radius:9px;font-family:'Kanit',sans-serif;font-weight:500;font-size:14.5px;color:#3a4a64;cursor:pointer;text-decoration:none;transition:background .15s,color .15s;}
.gp-navlink:hover{background:#F2F5FA;color:var(--gp-navy-600);}
.gp-navlink.is-active{background:#EEF2F9;color:var(--gp-navy-600);}

/* ---------- buttons ---------- */
.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:13px;font-family:'Kanit',sans-serif;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;}
.gp-btn--gold{background:var(--gp-gold);color:var(--gp-navy-900);box-shadow:0 12px 28px rgba(244,183,30,.34);}
.gp-btn--gold:hover{background:var(--gp-gold-hi);transform:translateY(-2px);}
.gp-btn--navy{background:var(--gp-navy-600);color:#fff;}
.gp-btn--navy:hover{background:var(--gp-navy-500);}
.gp-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28);}
.gp-btn--ghost:hover{background:rgba(255,255,255,.13);}
.gp-btn--lg{padding:15px 28px;font-size:16.5px;}
.gp-btn--sm{padding:10px 18px;font-size:14.5px;border-radius:10px;}
.gp-btn--full{width:100%;padding:14px;border-radius:13px;font-size:15.5px;}
.gp-btn--nav{padding:10px 18px;border-radius:10px;font-size:14.5px;background:var(--gp-gold);color:var(--gp-navy-900);box-shadow:0 6px 16px rgba(244,183,30,.3);}
.gp-btn--nav:hover{background:var(--gp-gold-hi);transform:translateY(-1px);}

/* ---------- hero ---------- */
.gp-hero{position:relative;overflow:hidden;background:radial-gradient(120% 130% at 80% 0%,#143665 0%,var(--gp-navy-800) 45%,#0a1730 100%);}
.gp-hero__glow1{position:absolute;top:-130px;right:-70px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,183,30,.22),transparent 70%);}
.gp-hero__glow2{position:absolute;bottom:-160px;left:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(64,120,210,.28),transparent 70%);}
.gp-hero__inner{position:relative;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px);align-items:center;padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(48px,7vw,86px);}
.gp-hero__left{flex:1 1 440px;min-width:300px;}
.gp-hero__right{flex:1 1 360px;min-width:300px;display:flex;justify-content:center;}
.gp-badge-urgent{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;background:rgba(244,183,30,.14);border:1px solid rgba(244,183,30,.35);color:#F8D277;font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;}
.gp-hero__h1{margin:22px 0 0;font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(31px,5.2vw,53px);line-height:1.14;color:#fff;letter-spacing:-.01em;text-wrap:balance;}
.gp-hero__h1 .gp-accent{color:var(--gp-gold);}
.gp-hero__p{margin:20px 0 0;font-size:clamp(15px,1.7vw,18px);line-height:1.75;color:#B9C6DE;max-width:540px;}
.gp-hero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;}
.gp-hero__stats{margin-top:38px;display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,46px);}
.gp-stat__num{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(23px,3.5vw,30px);line-height:1;color:#fff;}
.gp-stat__num--gold{color:var(--gp-gold);}
.gp-stat__label{margin-top:5px;font-size:13px;color:#9DB0CC;}
.gp-stat__div{width:1px;background:rgba(255,255,255,.13);}

/* ---------- countdown card ---------- */
.gp-cdcard{width:100%;max-width:430px;background:#fff;border-radius:var(--gp-r-lg);padding:clamp(22px,3vw,30px);box-shadow:0 36px 70px -24px rgba(4,12,33,.6);}
.gp-cdcard__title{display:flex;align-items:center;gap:9px;color:var(--gp-navy-600);font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;}
.gp-cdcard__date{margin-top:6px;font-size:14px;color:var(--gp-slate-2);}
.gp-countdown{margin-top:18px;display:flex;gap:10px;}
.gp-cd-box{flex:1;min-width:0;background:var(--gp-navy-900);border-radius:15px;padding:16px 6px;text-align:center;}
.gp-cd-box__num{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(25px,6vw,37px);line-height:1;color:#fff;}
.gp-cd-box:first-child .gp-cd-box__num{color:var(--gp-gold);}
.gp-cd-box__unit{margin-top:7px;font-size:11.5px;color:#9DB0CC;}
.gp-cdcard__note{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:var(--gp-slate-2);}

/* ---------- criteria cards ---------- */
.gp-center-head{text-align:center;max-width:720px;margin:0 auto;}
.gp-grid-3{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;}
.gp-card{background:#fff;border:1px solid var(--gp-line);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:15px;box-shadow:var(--gp-shadow-card);transition:transform .18s,box-shadow .18s;}
.gp-card:hover{transform:translateY(-5px);box-shadow:var(--gp-shadow-hover);}
.gp-ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;}
.gp-ico--blue{background:#EAF1FF;color:#1E4FA3;}
.gp-ico--teal{background:#E6F6F3;color:#137A66;}
.gp-ico--navy{background:#ECEFF6;color:#27406E;}
.gp-card__title{font-family:'Kanit',sans-serif;font-weight:600;font-size:20px;color:var(--gp-navy-700);}
.gp-card__body{font-size:14.5px;line-height:1.65;color:var(--gp-slate);flex:1;}
.gp-pill-pass{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;padding:11px 20px;border-radius:999px;background:linear-gradient(180deg,#F4B71E,#e0a40c);color:#102444;font-family:'Kanit',sans-serif;font-weight:700;font-size:17.5px;letter-spacing:.01em;box-shadow:0 8px 18px rgba(244,183,30,.38);}
.gp-eyebrow--badge{padding:8px 18px;border-radius:999px;background:linear-gradient(90deg,#F4B71E,#e0a40c);color:#102444;font-weight:700;font-size:14.5px;letter-spacing:.06em;box-shadow:0 7px 18px rgba(244,183,30,.34);}
.gp-note{margin-top:24px;display:flex;align-items:flex-start;gap:13px;padding:18px 22px;border-radius:16px;background:#FFF8E8;border:1px solid #F4E3B6;}
.gp-note svg{flex:none;margin-top:1px;}
.gp-note p{margin:0;font-size:14.5px;line-height:1.65;color:#6B5A2A;}
.gp-note strong{color:#9A6B00;}

/* ---------- features ---------- */
.gp-features{background:var(--gp-bg-soft);border-top:1px solid var(--gp-line-2);}
.gp-grid-feat{margin-top:42px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;}
.gp-fcard{background:#fff;border:1px solid #E9EDF4;border-radius:var(--gp-r-md);padding:26px;transition:transform .18s,box-shadow .18s;}
.gp-fcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(16,36,68,.22);}
.gp-fico{width:48px;height:48px;border-radius:13px;background:rgba(244,183,30,.13);color:var(--gp-gold-deep);display:flex;align-items:center;justify-content:center;}
.gp-fcard__title{margin-top:16px;font-family:'Kanit',sans-serif;font-weight:600;font-size:18px;color:var(--gp-navy-700);}
.gp-fcard__body{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--gp-slate);}

/* ---------- stats band ---------- */
.gp-band{background:linear-gradient(135deg,var(--gp-navy-800),var(--gp-navy-600));}
.gp-band__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;text-align:center;padding-top:clamp(44px,6vw,68px);padding-bottom:clamp(44px,6vw,68px);}
.gp-band__num{font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(30px,5vw,46px);line-height:1;color:#fff;}
.gp-band__num--gold{color:var(--gp-gold);}
.gp-band__label{margin-top:9px;font-size:14.5px;color:#B9C6DE;}

/* ---------- final cta ---------- */
.gp-cta{position:relative;overflow:hidden;border-radius:28px;background:radial-gradient(120% 140% at 85% 0%,#163a6e,#0a1730);padding:clamp(40px,6vw,68px) clamp(26px,5vw,60px);text-align:center;}
.gp-cta__glow{position:absolute;top:-90px;right:-50px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(244,183,30,.22),transparent 70%);}
.gp-cta__h2{margin:0;font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(25px,4vw,40px);line-height:1.22;color:#fff;text-wrap:balance;}
.gp-cta__p{margin:16px auto 0;max-width:560px;font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:#B9C6DE;}
.gp-cta__row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- footer ---------- */
.gp-footer{background:var(--gp-navy-900);color:#B9C6DE;}
.gp-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;padding-top:clamp(46px,6vw,64px);padding-bottom:clamp(46px,6vw,64px);}
.gp-footer__brand{display:flex;align-items:center;gap:11px;}
.gp-footer__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(150deg,var(--gp-navy-500),var(--gp-navy-900));display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:700;font-size:20px;color:var(--gp-gold);}
.gp-footer__name{font-family:'Kanit',sans-serif;font-weight:600;font-size:18px;color:#fff;}
.gp-footer__desc{margin:16px 0 0;font-size:14px;line-height:1.7;color:#8FA0BC;max-width:340px;}
.gp-footer__h{font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;color:#fff;}
.gp-footer__col{display:flex;flex-direction:column;gap:11px;margin-top:15px;font-size:14px;}
.gp-footer__link{color:#8FA0BC;cursor:pointer;text-decoration:none;transition:color .15s;}
.gp-footer__link:hover{color:var(--gp-gold);}
.gp-footer__bar{border-top:1px solid rgba(255,255,255,.08);}
.gp-footer__bar-inner{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;font-size:12.5px;color:#6E7E9A;}
.gp-footer__legal{display:flex;gap:18px;}
.gp-line-id{color:var(--gp-gold);}

/* ============================================================
   EXAMS PAGE
   ============================================================ */
.gp-examspage{background:var(--gp-bg-soft);min-height:80vh;}
.gp-exams-head{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;}
.gp-exams-head__left{flex:1 1 380px;min-width:280px;}
.gp-exams-head__h1{margin:13px 0 0;font-family:'Kanit',sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.18;color:var(--gp-navy-700);}

/* readiness summary (NOTE: needs new logic — see HANDOFF-NOTES.md) */
.gp-ready{flex:1 1 320px;min-width:280px;max-width:400px;background:#fff;border:1px solid var(--gp-line);border-radius:20px;padding:24px;box-shadow:0 12px 32px -20px rgba(16,36,68,.3);}
.gp-ready__head{display:flex;align-items:center;justify-content:space-between;}
.gp-ready__title{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;color:var(--gp-navy-700);}
.gp-ready__meta{font-size:12px;color:var(--gp-slate-2);}
.gp-ready__rows{margin-top:18px;display:flex;flex-direction:column;gap:16px;}
.gp-ready__rowtop{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;}
.gp-ready__name{color:#3a4a64;}
.gp-ready__val{font-family:'Kanit',sans-serif;font-weight:600;}
.gp-ready__val.is-pass{color:var(--gp-green-deep);}
.gp-ready__val.is-pending{color:#94A0B4;}
.gp-bar{margin-top:6px;height:8px;border-radius:99px;background:#EEF1F6;overflow:hidden;}
.gp-bar__fill{height:100%;border-radius:99px;background:var(--gp-green);}
.gp-bar__fill.is-pending{background:#CBD3DF;}
.gp-ready__hint{margin-top:18px;display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:12px;background:#FFF8E8;border:1px solid #F4E3B6;font-size:13px;line-height:1.5;color:#6B5A2A;}
.gp-ready__hint svg{flex:none;margin-top:1px;}

/* filter tabs */
.gp-tabs{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;}
.gp-tab{padding:10px 20px;border-radius:999px;font-family:'Kanit',sans-serif;font-weight:500;font-size:14px;cursor:pointer;white-space:nowrap;background:#fff;color:var(--gp-slate);border:1px solid #E0E6EF;transition:all .15s;}
.gp-tab:hover{border-color:#C7D1E0;}
.gp-tab.is-active{background:var(--gp-navy-600);color:#fff;border-color:var(--gp-navy-600);}

/* exam list grid */
.gp-examlist{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}

/* exam card (template) */
.gp-ecard{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--gp-line);border-radius:var(--gp-r-md);padding:22px;box-shadow:var(--gp-shadow-card);transition:transform .18s,box-shadow .18s;}
.gp-ecard:hover{transform:translateY(-4px);box-shadow:0 20px 38px -20px rgba(16,36,68,.26);}
.gp-ecard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.gp-tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 13px;border-radius:999px;font-family:'Kanit',sans-serif;font-weight:500;font-size:13px;white-space:nowrap;}
.gp-tag--analyze{background:#EAF1FF;color:#1E4FA3;}
.gp-tag--english{background:#E6F6F3;color:#137A66;}
.gp-tag--law{background:#FBF1DC;color:#9A6B00;}
.gp-tag--full{background:#ECEFF6;color:#27406E;}
.gp-tag--trial{background:#E9F7EE;color:var(--gp-green-deep);}
.gp-tag--free{background:#E9F7EE;color:var(--gp-green-deep);}
.gp-tag--premium{background:#FBF1DC;color:#9A6B00;}
.gp-tag--done{background:#ECEFF6;color:#27406E;}
.gp-ecard__title{font-family:'Kanit',sans-serif;font-weight:600;font-size:18px;line-height:1.35;color:var(--gp-navy-700);min-height:50px;}
.gp-ecard__meta{display:flex;flex-wrap:wrap;gap:16px;padding-bottom:16px;border-bottom:1px solid #EEF1F6;}
.gp-meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5A6A85;}
.gp-meta svg{stroke:#97A6BF;}
.gp-ecard__score{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gp-slate);}
.gp-ecard__score b{font-family:'Kanit',sans-serif;font-size:16px;color:var(--gp-green-deep);}
.gp-ecard__cta{margin-top:auto;}

/* sidebar (optional) */
.gp-exams-layout{margin-top:22px;display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;}
.gp-examside{position:sticky;top:80px;background:#fff;border:1px solid var(--gp-line);border-radius:var(--gp-r-md);padding:18px;}
@media(max-width:820px){.gp-exams-layout{grid-template-columns:1fr;}.gp-examside{display:none;}}

@media(max-width:600px){
  .gp-navlinks{gap:2px;}
  .gp-navlink{padding:7px 10px;font-size:13.5px;}
}

/* ===== เพิ่มโดยทีม integrate: รองรับ element ที่ app.js สร้าง ===== */
.disclaimer-strip{background:#fff7e6;border-bottom:1px solid #f3d98a;color:#7a5b12;
  text-align:center;font-size:12.5px;line-height:1.5;padding:8px 14px;font-family:'Sarabun',sans-serif}
.line-fab{position:fixed;right:16px;bottom:16px;z-index:90;background:#06c755;color:#fff;
  display:flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;font-weight:600;
  font-size:15px;box-shadow:0 6px 20px rgba(6,199,85,.4);text-decoration:none;font-family:'Sarabun',sans-serif}
.line-fab:hover{filter:brightness(.96)}
@media(max-width:600px){.line-fab{padding:11px 15px;font-size:14px}}

/* ---------- วิธีสั่งซื้อ 4 ขั้นตอน (how to buy) ---------- */
.gp-buy{background:var(--gp-bg-soft);border-top:1px solid var(--gp-line-2);}
.gp-steps{margin-top:42px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.gp-step{position:relative;background:#fff;border:1px solid var(--gp-line);border-radius:var(--gp-r-md);padding:26px 22px 24px;box-shadow:var(--gp-shadow-card);}
.gp-step__no{width:42px;height:42px;border-radius:50%;background:var(--gp-gold);color:var(--gp-navy-900);font-family:'Kanit',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(244,183,30,.35);}
.gp-step__title{margin-top:15px;font-family:'Kanit',sans-serif;font-weight:600;font-size:17px;color:var(--gp-navy-700);}
.gp-step__body{margin-top:7px;font-size:14px;line-height:1.6;color:var(--gp-slate);}
.gp-step__body b{color:var(--gp-navy-700);}
.gp-buy-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.gp-buy-note{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--gp-slate-2);}
.gp-step--clickable{cursor:pointer;}
.gp-step--clickable:hover{transform:translateY(-3px);box-shadow:var(--gp-shadow-hover);border-color:var(--gp-gold);transition:transform .15s,box-shadow .15s,border-color .15s;}
.gp-step__link{margin-top:13px;font-family:'Kanit',sans-serif;font-weight:600;font-size:14px;color:var(--gp-gold-deep);}

/* ---------- popup แอดไลน์ (QR + เปิดแอป) ---------- */
.gp-modal[hidden]{display:none;}
.gp-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.gp-modal__backdrop{position:absolute;inset:0;background:rgba(8,18,36,.62);}
.gp-modal__card{position:relative;background:#fff;border-radius:var(--gp-r-lg);padding:28px 24px 24px;max-width:340px;width:100%;text-align:center;box-shadow:0 30px 70px -20px rgba(4,12,33,.6);}
.gp-modal__close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--gp-slate-2);cursor:pointer;}
.gp-modal__title{font-family:'Kanit',sans-serif;font-weight:700;font-size:20px;color:var(--gp-navy-700);}
.gp-modal__sub{font-size:13.5px;color:var(--gp-slate);margin-top:6px;line-height:1.55;}
.gp-qrbox{margin:18px auto 12px;width:200px;height:200px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--gp-line);border-radius:14px;}
.gp-qrbox img,.gp-qrbox canvas{display:block;}
.gp-modal__id{font-family:'Kanit',sans-serif;font-weight:600;font-size:16px;color:var(--gp-gold-deep);margin-bottom:14px;}

/* ============================================================
   MOBILE TUNING (เสริมความเป็นมิตรกับมือถือ)
   ============================================================ */
@media(max-width:760px){
  /* nav: เลื่อนแนวนอนแทนการตัดบรรทัดมั่ว แตะง่ายขึ้น */
  .gp-nav__inner{gap:10px;}
  .gp-navlinks{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none;}
  .gp-navlinks::-webkit-scrollbar{display:none;}
  .gp-navlink{flex:none;padding:10px 13px;}
  .gp-btn--nav{flex:none;}
  /* ปุ่มหลักเต็มความกว้าง กดด้วยนิ้วง่าย */
  .gp-hero__cta .gp-btn,.gp-cta__row .gp-btn,.gp-buy-cta .gp-btn{flex:1 1 100%;}
}
@media(max-width:480px){
  /* แถบสถิติ 2 คอลัมน์ ไม่ต้องเลื่อนยาว */
  .gp-band__grid{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .gp-hero__stats{gap:16px 24px;}
  .gp-hero__stats .gp-stat__div{display:none;}
  .gp-btn--lg{padding:14px 20px;font-size:15.5px;}
  .gp-step{padding:22px 18px;}
  /* นับถอยหลัง: ตัวเลขพอดีจอเล็ก */
  .gp-countdown{gap:8px;}
  .gp-cd-box{padding:14px 4px;}
}

/* ---------- nav dropdown: คลังข้อสอบ (commercial) ---------- */
.gp-nav-dd{position:relative;display:inline-flex}
.gp-navlink--dd{display:inline-flex;align-items:center;gap:5px}
.gp-navlink--dd::after{content:"\25BE";font-size:10px;opacity:.65}
.gp-nav-dd__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--gp-line);border-radius:14px;box-shadow:0 18px 44px -12px rgba(16,36,68,.32);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:80}
.gp-nav-dd:hover .gp-nav-dd__menu{opacity:1;visibility:visible;transform:translateY(0)}
.gp-nav-dd__cap{font-family:'Kanit',sans-serif;font-size:11px;color:var(--gp-slate-2);letter-spacing:.04em;padding:6px 12px 4px}
.gp-nav-dd__item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-family:'Kanit',sans-serif;font-weight:500;font-size:14px;color:#3a4a64;text-decoration:none;white-space:nowrap}
.gp-nav-dd__item:hover{background:#f2f5fa;color:var(--gp-navy-700)}
.gp-nav-dd__item--hot{background:linear-gradient(90deg,#fff6e0,#fffdf7);color:var(--gp-navy-700);font-weight:600}
.gp-nav-dd__item--hot:hover{background:linear-gradient(90deg,#ffeec2,#fffdf7)}
.gp-nav-dd__item .tag{margin-left:auto;font-size:10.5px;font-weight:700;color:#7a2e00;background:linear-gradient(90deg,#F4B71E,#e0a40c);border-radius:999px;padding:2px 9px}
.gp-nav-dd__row{display:flex;gap:4px}
.gp-nav-dd__row .gp-nav-dd__item{flex:1;justify-content:center;padding:8px 6px;font-size:13px;gap:5px}
.gp-nav-dd__sep{height:1px;background:var(--gp-line);margin:6px 8px}
@media(max-width:760px){.gp-nav-dd__menu{display:none!important}.gp-navlink--dd::after{display:none}}

/* ---------- social proof (มุมซ้ายล่าง) ---------- */
#gpsp{position:fixed;left:18px;bottom:20px;z-index:9998;width:312px;max-width:calc(100vw - 36px);
  background:radial-gradient(135% 135% at 0% 0%,#1d4a86 0%,#102c57 55%,#0a1f3e 100%);
  border:1px solid #2f5288;border-left:5px solid #2fe08a;border-radius:14px;
  box-shadow:0 20px 46px -10px rgba(6,16,34,.62),0 0 0 1px rgba(47,224,138,.18);padding:14px 17px 13px;font-family:'Sarabun',sans-serif;
  transform:translateY(20px);opacity:0;transition:transform .35s,opacity .35s;pointer-events:auto}
#gpsp.show{transform:translateY(0);opacity:1}
.gpsp-x{position:absolute;top:7px;right:10px;background:none;border:none;font-size:17px;color:rgba(255,255,255,.55);cursor:pointer;line-height:1}
.gpsp-act{font-size:13.5px;color:#eaf1ff;line-height:1.5;padding-right:14px;transition:opacity .28s ease,transform .28s ease}
.gpsp-act.gpsp-swap{opacity:0;transform:translateX(10px)}
.gpsp-act b{color:#FFD36B}
.gpsp-meta{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.18);font-size:12.5px;color:#aec0dd;display:flex;flex-wrap:wrap;gap:4px 12px}
.gpsp-meta b{color:#5fe6a6}
.gpsp-live{display:inline-flex;align-items:center;gap:5px}
.gpsp-dot{width:8px;height:8px;border-radius:50%;background:#27d07a;box-shadow:0 0 0 3px rgba(39,208,122,.22);animation:gpsppulse 1.6s infinite}
@keyframes gpsppulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:600px){#gpsp{width:264px;left:10px;bottom:14px;padding:11px 14px}}