/* ============================================================
   AI ACTION LAB — New Era base (v2.1)  ·  design-system/newera.css
   ทุกค่ามาจากโทเคนชั้นนี้ที่เดียว — หน้าไหนก็แก้สีทั้งเว็บได้จากไฟล์นี้
   คู่มือ: ~/.claude/skills/ai-action-lab-design-system
   Light variant: newera-light.css (remap โทเคนเท่านั้น ห้ามเขียน component ซ้ำ)
   ============================================================ */

:root{
  /* palette */
  --canvas:#070708;
  --canvas-3d:#09090A;
  --copper:#E8935F;
  --copper-soft:#F2B28A;
  --steel:#4D8194;
  --steel-soft:#8FB4C4;
  --text:#F7E3D6;
  --muted:#9B958F;
  --on-accent:#09090A;

  /* glass */
  --gb:rgba(255,255,255,0.12);           /* ขอบแก้ว */
  --gbs:rgba(255,255,255,0.15);          /* ขอบแก้วเด่น */
  --divider:rgba(255,255,255,0.08);      /* เส้นแบ่งใน */
  --glass:rgba(19,14,11,0.55);           /* พื้นแก้วการ์ด */
  --glass-deep:rgba(14,11,9,0.5);        /* พื้นแก้วลึก (list/faq) */
  --tint:rgba(255,255,255,0.04);         /* แก้วใสจาง */
  --tint-hover:rgba(255,255,255,0.08);
  --menu-bg:rgba(12,10,9,0.97);          /* เมนูลอย/มือถือ */
  --bar-bg:rgba(9,9,10,0.42);            /* แถบ nav โปร่ง */
  --copper-tint:rgba(232,147,95,0.08);
  --copper-line:rgba(232,147,95,0.55);
  --shadow:0 8px 32px rgba(0,0,0,0.2);
  --shadow-pop:0 18px 50px rgba(0,0,0,0.55);
  --glow:0 8px 40px rgba(232,147,95,0.12);

  /* gradient ประจำแบรนด์ */
  --grad:linear-gradient(90deg,var(--copper-soft),var(--steel-soft));

  /* type */
  --sans:'Noto Sans Lao','Noto Sans Thai',system-ui,sans-serif;
  --mono:'Noto Sans Lao','IBM Plex Mono',ui-monospace,monospace;

  /* radius */
  --r-card:24px;
  --r-row:14px;
  --r-input:14px;
  --r-pill:9999px;

  /* บรรยากาศ */
  --aurora-a:rgba(232,147,95,.5);
  --aurora-b:rgba(77,129,148,.45);
  --dust-opacity:.13;
  --dust-a:rgba(247,227,214,.7);
  --dust-b:rgba(232,147,95,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--canvas)}
/* body โปร่ง — ให้ aurora (z-index:-1) ทะลุขึ้นมาเหนือพื้นมืดของ html ไม่งั้นพื้นทึบทับบรรยากาศ */
body{margin:0;background:transparent;color:var(--text);
  font-family:var(--sans);line-height:1.8;overflow-x:hidden}
:lang(lo) body,body:lang(lo){line-height:1.8}
::selection{background:var(--copper);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
h1,h2{font-weight:600;line-height:1.55}
.fade-mask{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.25) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.25) 100%)}

/* ── บรรยากาศ: aurora + ฝุ่นดาว (CSS ล้วน — หน้ารองทุกหน้าต้องมี) ── */
.bgfx{position:fixed;inset:-22%;z-index:-1;pointer-events:none;filter:blur(90px)}
.bgfx i{position:absolute;border-radius:50%;width:56vw;height:56vw;display:block}
.bgfx .b1{background:radial-gradient(circle,var(--aurora-a),transparent 62%);
  top:-16%;right:-14%;animation:ne-drift1 26s ease-in-out infinite alternate}
.bgfx .b2{background:radial-gradient(circle,var(--aurora-b),transparent 62%);
  bottom:-18%;left:-16%;animation:ne-drift2 34s ease-in-out infinite alternate}
@keyframes ne-drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,9%) scale(1.18)}}
@keyframes ne-drift2{from{transform:translate(0,0) scale(1.12)}to{transform:translate(8%,-7%) scale(1)}}
.dust{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--dust-opacity);
  background-image:radial-gradient(var(--dust-a) 1px,transparent 1.7px),
                   radial-gradient(var(--dust-b) 1px,transparent 1.7px);
  background-size:210px 180px,300px 260px;background-position:0 0,90px 70px}

/* ── accessibility ── */
.skip-link{position:fixed;left:-9999px;top:12px;z-index:200;background:var(--copper);color:var(--on-accent);
  padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── eyebrow pill + วงแหวนแสงวิ่ง ── */
.top-label{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);
  background:var(--tint);padding:10px 20px;font-size:clamp(13px,0.95vw,14px);font-weight:500;
  color:var(--text);backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.top-label svg{width:14px;height:14px}
.ring{position:absolute;inset:0;padding:1px;border-radius:inherit;background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ring.soft{background-image:linear-gradient(90deg,rgba(255,255,255,0.08),rgba(255,255,255,0.35),rgba(255,255,255,0.08));
  animation:ne-ringmove 3000ms linear infinite}
.ring.accent{background-image:linear-gradient(90deg,var(--copper-soft),var(--steel-soft),var(--copper-soft));
  animation:ne-ringmove 4000ms linear infinite}
@keyframes ne-ringmove{from{background-position:0% 0%}to{background-position:200% 0%}}

/* ── ปุ่มแก้ว ── */
.btn-primary,.btn-secondary{position:relative;height:56px;border-radius:var(--r-pill);
  font-size:clamp(15px,1.1vw,16px);font-weight:500;cursor:pointer;transition:all .2s;border:none;
  font-family:inherit;display:inline-flex;align-items:center}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}
.btn-primary{padding:0 16px 0 32px;color:#fff;gap:12px;backdrop-filter:blur(24px) saturate(1.5);
  background:rgba(26,20,16,0.45);
  box-shadow:inset 0 2px 10px rgba(255,255,255,0.35),inset 0 -6px 16px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,0.4)}
.btn-primary:hover{background:rgba(42,26,20,0.55)}
.arrow-badge{position:relative;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.02);
  display:flex;align-items:center;justify-content:center}
.arrow-badge .ring2{position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(135deg,var(--copper-soft),var(--steel-soft));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.arrow-badge svg{width:12px;height:12px}
.btn-secondary{padding:0 32px;border:1px solid var(--divider);background:var(--tint);
  color:var(--muted);backdrop-filter:blur(12px)}
.btn-secondary:hover{background:var(--tint-hover);color:var(--text);border-color:var(--gbs)}
.btnrow2{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── การ์ดแก้ว ── */
.gcards{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:900px){.gcards{grid-template-columns:repeat(3,1fr)}}
.gcards.two{max-width:920px;margin:0 auto}
@media(min-width:820px){.gcards.two{grid-template-columns:1fr 1fr}}
.gcard{border-radius:var(--r-card);border:1px solid var(--gbs);background:var(--glass);
  padding:40px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.gcard .kick{font-family:var(--mono);font-size:clamp(12px,0.9vw,13px);font-weight:500;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text);margin-bottom:26px}
.gcard .num{font-size:clamp(40px,4.4vw,64px);font-weight:600;line-height:1.1;margin-bottom:18px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gcard .num.sm{font-size:clamp(30px,3.2vw,44px)}
.gcard .d{font-size:clamp(14px,1.15vw,17px);line-height:1.7;color:var(--muted)}
.gcard .src{margin-top:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);opacity:.75}
.gcard ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:22px 0 26px;
  border-top:1px solid var(--divider);padding-top:22px;padding-left:0}
.gcard li{display:flex;gap:12px;color:var(--muted);font-size:.95rem;align-items:baseline}
.gcard li::before{content:"—";color:var(--copper);font-family:var(--mono);flex:none}
.gcard.open{border-color:var(--copper-line);box-shadow:var(--glow),var(--shadow)}
.chip{display:inline-flex;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--gb);border-radius:var(--r-pill);padding:6px 12px;color:var(--muted);background:var(--tint)}
.chip.hot{color:var(--on-accent);background:var(--copper);border-color:var(--copper)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* ── รายการขั้นตอน ── */
.glist{border-radius:var(--r-card);border:1px solid var(--gb);background:var(--glass-deep);
  backdrop-filter:blur(16px);overflow:hidden;box-shadow:var(--shadow)}
.glist .row{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:26px 30px;
  border-bottom:1px solid var(--divider);align-items:baseline}
.glist .row:last-child{border-bottom:none}
.glist .n{font-family:var(--mono);color:var(--copper);font-size:.8rem}
.glist .dtag{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--copper);text-transform:uppercase;margin-bottom:6px}
.glist h3{font-size:1.08rem;font-weight:700;margin:0}
.glist p{color:var(--muted);font-size:.94rem;grid-column:2;margin:4px 0 0}

/* ── FAQ ── */
details.gfaq{border:1px solid var(--gb);border-radius:18px;background:var(--glass-deep);
  backdrop-filter:blur(12px);margin-bottom:14px;overflow:hidden}
details.gfaq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:52px 1fr 30px;
  gap:12px;padding:22px 26px;font-weight:700;font-size:1.02rem;align-items:baseline}
details.gfaq summary::-webkit-details-marker{display:none}
details.gfaq .n{font-family:var(--mono);color:var(--copper);font-size:.75rem}
details.gfaq .plus{font-family:var(--mono);color:var(--muted);text-align:right;transition:.2s}
details.gfaq[open] .plus{transform:rotate(45deg);color:var(--copper)}
details.gfaq .a{padding:0 26px 24px;color:var(--muted);max-width:46rem}
@media(min-width:768px){details.gfaq .a{padding-left:78px}}

/* ── แผง CTA / ฟอร์ม ── */
.gpanel{position:relative;border-radius:var(--r-card);border:1px solid rgba(232,147,95,.4);
  background:var(--glass);backdrop-filter:blur(16px);padding:52px 36px;text-align:center;
  box-shadow:var(--glow),var(--shadow)}
.gpanel h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:700;margin:0 0 12px}
.gpanel p{color:var(--muted);max-width:34rem;margin:0 auto 30px}
.note{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);opacity:.75;text-align:center;margin-top:24px}
.gfield{margin-bottom:20px;text-align:left}
.gfield label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.ginput{width:100%;padding:16px 18px;border-radius:var(--r-input);border:1px solid var(--gb);
  background:var(--tint);color:var(--text);font-family:inherit;font-size:1rem;backdrop-filter:blur(8px)}
.ginput:focus{border-color:var(--copper);outline:none;box-shadow:0 0 0 3px rgba(232,147,95,.15)}
.gtabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}
.gtab{padding:14px;border-radius:12px;border:1px solid var(--gb);text-align:center;
  color:var(--muted);font-weight:600;background:rgba(255,255,255,0.02);cursor:pointer;font-family:inherit;font-size:1rem}
.gtab.on{border-color:var(--copper-line);color:var(--copper);background:var(--copper-tint)}

/* ── ตัวสลับภาษา (ไม่พึ่ง JS) ── */
.lsel{position:relative}
.lsel summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--gb);border-radius:var(--r-pill);padding:8px 14px;background:var(--tint);
  backdrop-filter:blur(8px);transition:all .2s}
.lsel summary::-webkit-details-marker{display:none}
.lsel summary:hover{color:var(--text);border-color:var(--gbs)}
.lsel[open] summary{color:var(--copper);border-color:var(--copper-line)}
.lsel summary svg{width:10px;height:10px;transition:transform .2s}
.lsel[open] summary svg{transform:rotate(180deg)}
.lmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:132px;padding:8px;
  border-radius:16px;border:1px solid var(--gb);background:var(--menu-bg);
  backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:2px}
.lmenu a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  padding:11px 13px;border-radius:10px;transition:.2s;text-decoration:none;text-transform:uppercase}
.lmenu a:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.lmenu a.on{color:var(--copper);background:var(--copper-tint)}

/* ============================================================
   ชั้นสมาชิก (member area) — แถบเมนูคอร์ส + แท็บส่วน + อินพุต
   ============================================================ */

/* แถบเมนูคอร์สลอย (ใช้ markup เดิม .app-tabs ของหน้า member) */
.app-tabs{position:sticky;top:10px;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;width:min(860px,calc(100% - 24px));margin:0 auto 16px;padding:7px;
  background:var(--bar-bg);border:1px solid var(--gb);border-radius:var(--r-card);
  backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--shadow);font-family:var(--sans)}
.app-tabs a{display:grid;place-items:center;min-width:0;min-height:50px;padding:8px 12px;
  color:var(--muted);text-decoration:none;text-align:center;border-radius:16px;font-weight:700;
  line-height:1.35;transition:.2s}
.app-tabs a:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.app-tabs a.active{color:var(--copper);background:var(--copper-tint);
  box-shadow:inset 0 0 0 1px var(--copper-line)}
.app-tabs small{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;opacity:.72}
@media(max-width:620px){
  .app-tabs{top:6px;width:calc(100% - 12px)}
  .app-tabs a{padding-inline:3px;font-size:11px;min-height:46px}
  .app-tabs small{display:none}
}

/* แท็บส่วนในหน้า (กล่องแก้วเดียว ปุ่มโค้งใน) */
.tabs,.lesson-subtabs{display:flex;gap:6px;overflow-x:auto;margin:12px 0;padding:7px;
  border:1px solid var(--gb);border-radius:18px;background:var(--glass-deep);
  backdrop-filter:blur(16px);box-shadow:var(--shadow);scrollbar-width:none}
.tabs::-webkit-scrollbar,.lesson-subtabs::-webkit-scrollbar{display:none}
.tabs button,.lesson-subtabs button{flex:1;min-width:150px;min-height:48px;padding:8px 14px;border:0;
  border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;font:inherit;
  font-size:13px;line-height:1.35;font-weight:700;text-align:center;transition:.2s}
.tabs button:hover,.lesson-subtabs button:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.tabs button.on,.tabs button.active,.lesson-subtabs button.active{color:var(--copper);
  background:var(--copper-tint);box-shadow:inset 0 0 0 1px var(--copper-line)}

/* อินพุตค้นหา (ให้ตรงสูตร ginput) */
.search{width:100%;padding:14px 18px;border:1px solid var(--gb);border-radius:var(--r-input);
  background:var(--tint);color:var(--text);font:inherit;outline:0;backdrop-filter:blur(8px)}
.search:focus{border-color:var(--copper);box-shadow:0 0 0 3px rgba(232,147,95,.15)}

/* กล่องแจ้งเตือนเมื่อไม่มี JS */
.noscript-note{display:block;margin:14px auto;max-width:640px;padding:16px 20px;
  border:1px solid var(--copper-line);border-radius:16px;background:var(--copper-tint);
  color:var(--text);text-align:center}

/* ============================================================
   Override เปลือก topbar ที่ nav.js ฉีด (เฉพาะหน้าที่โหลด newera.css)
   nav.js ใช้ !important — ที่นี่จึงต้อง !important + specificity สูงกว่า
   ============================================================ */
body .global-topbar.ailab-global-nav{border:1px solid var(--gb)!important;border-radius:20px!important;
  background:var(--bar-bg)!important;backdrop-filter:blur(24px) saturate(1.4)!important;
  box-shadow:var(--shadow)!important}
body .ailab-menu-trigger,body .ailab-menu-close{border:1px solid var(--gb)!important;border-radius:12px!important;
  background:var(--tint)!important;color:var(--text)!important}
body .ailab-menu-trigger:hover,body .ailab-menu-close:hover{border-color:var(--copper-line)!important;
  background:var(--copper-tint)!important;color:var(--copper)!important}
body .ailab-current-page>span{color:var(--copper)!important;font-family:var(--mono)!important;font-weight:500!important}
body .ailab-current-page>strong{color:var(--text)!important}
body .ailab-current-page>small{color:var(--muted)!important}
body .language-select{border:1px solid var(--gb)!important;border-radius:9999px!important;
  background:var(--tint)!important;color:var(--muted)!important}
body .language-select:hover{border-color:var(--gbs)!important;color:var(--text)!important}
body .ailab-nav-drawer{border-right:1px solid var(--gb)!important;border-radius:0 24px 24px 0!important;
  background:var(--menu-bg)!important;backdrop-filter:blur(24px) saturate(1.4)!important}
body .ailab-drawer-head{border-bottom:1px solid var(--divider)!important}
body .ailab-drawer-head span{color:var(--copper)!important;font-family:var(--mono)!important}
body .ailab-drawer-head strong{color:var(--text)!important}
body .ailab-primary-tabs a{border-radius:14px!important;color:var(--muted)!important}
body .ailab-primary-tabs a:hover{border-color:var(--gb)!important;background:var(--tint-hover)!important;color:var(--text)!important}
body .ailab-primary-tabs a.active,body .ailab-primary-tabs a.on{border-color:transparent!important;
  background:var(--copper-tint)!important;color:var(--copper)!important;
  box-shadow:inset 0 0 0 1px var(--copper-line)!important}
body .ailab-primary-tabs a small{color:var(--muted)!important;font-family:var(--mono)!important}