/* =========================================================================
   หน้าสมัครเวิร์กช็อป Enersys คอร์ส A
   Bulma 1.0.4 วางไว้ที่ static/vendor/bulma/bulma.min.css แล้วปรับด้วย
   ตัวแปร CSS ของ Bulma 1.0 ในไฟล์นี้ ไม่ใช้ Sass ไม่มีขั้นตอน build
   ไฟล์นี้ต้องโหลดหลัง bulma.min.css เพราะทับค่าด้วยลำดับใน stylesheet

   ที่มาของแบบ
   Tomz ขอหน้าตาแบบ bulma.io  ("Tomz asked for the bulma.io look")
   รอบก่อนเป็นธีมกระดาษอุ่น ปิดเงา ปิดมุมโค้ง ทำเป็นเอกสารการเงิน
   รอบนี้ตัดทิ้งทั้งชุด แล้วปล่อยให้ Bulma เป็นตัวเอง คือพื้นขาว
   สเกลตัวอักษรของ Bulma เอง เว้นช่วงกว้าง hero สีทึบ title/subtitle
   box ที่มีเงานุ่มค่าเริ่มต้น tag เทา ๆ notification message และมุมโค้ง
   ค่าปกติของ Bulma  ไฟล์นี้จึงเหลือเฉพาะสามเรื่อง
     1 ตัวอักษรไทย  IBM Plex Sans Thai ตัวเนื้อความ 1.05rem บรรทัด 1.75
       ให้วรรณยุกต์กับสระบนไม่ชนกัน
     2 ของที่ Bulma ไม่มีให้ คือแถบล่างบนมือถือ ตารางเวลา ขั้นตอน 1-4
       FAQ แบบ details บรรทัดยอดเงิน และหน้ายืนยันผล
     3 การเข้าถึง  กรอบโฟกัส พื้นที่กดอย่างน้อย 44px ข้อความช่วยใต้ช่อง
       และสถานะ aria-invalid

   สี  primary เป็นเขียวน้ำทะเลเข้ม hsl(184 79% 26%) ตัวเดียวทั้งเว็บ
   ตัวหนังสือขาวบนสีนี้ได้อัตราส่วนความต่างประมาณ 5.9:1
   ที่เหลือใช้เทากลางของ Bulma ไม่มีไล่สี ไม่มีอิโมจิ ไม่มีชุดไอคอน
   กฎเรื่องถ้อยคำของ de-ai ยังใช้เหมือนเดิม เปลี่ยนเฉพาะหน้าตา
   ========================================================================= */

:root {
  /* ---- สีหลัก เขียวน้ำทะเลเข้ม ----
     Bulma คำนวณ --bulma-primary-invert-l จาก primary-05-l (6%) ซึ่งเป็นค่า
     ที่เหมาะกับ turquoise สว่างของค่าเริ่มต้น พอเปลี่ยนเป็นสีเข้มต้องบังคับ
     ตัวหนังสือบนพื้น primary ให้เป็นสีขาวเอง ไม่งั้นจะเข้มบนเข้ม */
  --bulma-primary-h: 184deg;
  --bulma-primary-s: 79%;
  --bulma-primary-l: 26%;
  --bulma-primary-invert-l: 100%;
  --bulma-primary-on-scheme-l: 22%;   /* ใช้ตอนวางตัวอักษร primary บนพื้นขาว */

  --bulma-link-h: 184deg;
  --bulma-link-s: 79%;
  --bulma-link-l: 26%;
  --bulma-link-invert-l: 100%;
  --bulma-link-on-scheme-l: 22%;
  --bulma-link-text-l: 22%;

  /* กรอบโฟกัสใช้สีหลักเช่นกัน */
  --bulma-focus-h: 184deg;
  --bulma-focus-s: 79%;
  --bulma-focus-l: 26%;

  /* ---- ตัวอักษรไทย ---- */
  --bulma-family-primary: "IBM Plex Sans Thai", "IBM Plex Sans",
    "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --bulma-family-secondary: var(--bulma-family-primary);
  --bulma-body-family: var(--bulma-family-primary);
  --bulma-body-line-height: 1.75;

  /* ---- โทเคนเฉพาะหน้านี้ ---- */
  --reading-width: 46rem;
  --dock-height: 4.75rem;
}

/* หน้านี้ทำโทนสว่างโทนเดียว ยังไม่ได้ออกแบบคู่โหมดมืดไว้
   ล็อกไว้ที่สว่าง ไม่งั้นชุดตัวแปรโหมดมืดของ Bulma จะเข้ามาเอง */
html { color-scheme: light; }

/* =========================== พื้นฐานของหน้า =========================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  scroll-padding-bottom: 7rem;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  font-size: 1.05rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 1 auto; }

a, button, input, label, select, summary, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--bulma-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* คอลัมน์อ่านหนังสือ ตัวเลือกที่สองเขียนให้ยาวเท่ากับของ Bulma
   ที่ตั้ง max-width 1152px ไว้ในจอกว้าง ไม่งั้นบรรทัดจะยาวเกินอ่าน */
.reading,
.container.reading:not(.is-max-desktop):not(.is-max-tablet) {
  max-width: var(--reading-width);
  margin-inline: auto;
  width: 100%;
}

.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 60;
  transform: translateY(-7rem);
  background: var(--bulma-text-strong);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--bulma-radius);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus { transform: translateY(0); }

/* =========================== ตัวอักษรไทย ===========================
   ใช้สเกลของ Bulma ตามเดิม แก้เฉพาะความสูงบรรทัดกับระยะห่างตัวอักษร
   เพราะไทยมีวรรณยุกต์ซ้อนบนสระ ถ้าใช้ 1.125 ของ Bulma จะชนบรรทัดบน */

.title { line-height: 1.4; }
.title.is-1, .title.is-2 { letter-spacing: -0.01em; }
.subtitle { line-height: 1.65; }
.content, .content p, .content li { line-height: 1.75; }
.notification, .message-body, .box { line-height: 1.75; }
.label, .help, .tag { line-height: 1.6; }

.nums { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-bottom: 0.85rem;
}
/* ขาวทึบ 90% บนพื้นเขียวเข้ม ได้อัตราส่วนความต่าง 5.1:1 ผ่านเกณฑ์ 4.5:1 */
.hero.is-primary .eyebrow { color: #fff; opacity: 0.9; }

/* =========================== เปลือกหน้า =========================== */

.navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--bulma-border-weak);
  min-height: 3.25rem;
}
.navbar > .container { padding-inline: 1.5rem; display: block; }
@media screen and (min-width: 769px) {
  .navbar > .container { padding-inline: 1.5rem; }
}
.navbar-line {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}
.navbar-course {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--bulma-text-weak);
}
.navbar-org {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bulma-primary-on-scheme);
}

/* เว้นช่วงกว้างแบบ bulma.io */
.section { padding: 3rem 1.5rem; }
@media screen and (min-width: 769px) {
  .section { padding: 4.5rem 1.5rem; }
}

.block-rule { margin-top: 3rem; }
@media screen and (min-width: 769px) {
  .block-rule { margin-top: 4rem; }
}

.site-footer {
  border-top: 1px solid var(--bulma-border-weak);
  background-color: var(--bulma-scheme-main-bis);
  font-size: 0.95rem;
  color: var(--bulma-text-weak);
  padding-bottom: 2.5rem;
}
.site-footer.has-dock { padding-bottom: calc(var(--dock-height) + 2.5rem); }
@media screen and (min-width: 769px) {
  .site-footer.has-dock { padding-bottom: 2.5rem; }
}

/* =========================== hero =========================== */

/* ค่า is-medium ของ Bulma คือ 9rem บนจอกว้าง สูงเกินไปสำหรับหน้าสมัคร
   ที่มีปุ่มอยู่ในนั้น ลดลงมาแต่ยังอยู่ในระดับ generous เดียวกัน */
.hero-body { padding: 3.5rem 1.5rem; }
@media screen and (min-width: 769px) {
  .hero.is-medium .hero-body { padding: 6.5rem 1.5rem; }
}
.hero .title.is-1 { margin-bottom: 1.1rem; }
.hero.is-primary .subtitle {
  color: #fff;
  opacity: 0.92;
  max-width: 38rem;
}
.hero .buttons { margin-top: 2.25rem; }
.hero .hero-note {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: #fff;
  opacity: 0.9;
}
/* จอมือถือ สเกล 3rem ของ Bulma ทำให้หัวเรื่องไทยยาว 5 บรรทัด ลดลงมา */
@media screen and (max-width: 768px) {
  .hero .title.is-1 { font-size: 2.15rem; }
  .hero .subtitle.is-4 { font-size: 1.2rem; }
}

/* =========================== แผงข้อมูลย่อ =========================== */

/* box ลอยคร่อมขอบล่างของ hero แบบที่ bulma.io ใช้กับแผงตัวเลข */
.facts-section { padding-top: 0; }
.facts-box { margin-top: -2.75rem; position: relative; z-index: 2; }
@media screen and (max-width: 768px) {
  .facts-box { margin-top: -2rem; }
}
/* .tags ของ Bulma ใส่ margin-bottom ให้ทุกตัวยกเว้นตัวสุดท้าย
   พอซ้อน .tags.has-addons ไว้ข้างใน คู่สุดท้ายจะตกลงมาไม่ตรงแนวกับคู่อื่น
   ล้าง margin ทิ้งแล้วจัดกึ่งกลางแนวตั้งเอง */
.facts-box > .tags { align-items: center; row-gap: 0.75rem; margin-bottom: 0; }
.facts-box .tags { margin-bottom: 0; }
.facts-box .tag { font-size: 0.95rem; height: auto; padding: 0.4em 0.9em; }
.facts-box .tag:first-child { font-weight: 600; }
.facts-box .tag.is-light { border: 1px solid var(--bulma-border-weak); border-left: 0; }
/* บนมือถือ ป้ายคู่ label/value กว้างเกินหนึ่งบรรทัด ถ้าปล่อยให้ตัดบรรทัด
   ในคู่เดียวกัน มันจะแยกเป็นสองเม็ดลอย ๆ จับเรียงเป็นแถวละคู่แทน
   แล้วให้ข้อความในเม็ดค่าตัดบรรทัดได้เอง */
@media screen and (max-width: 768px) {
  .facts-box > .tags { flex-direction: column; align-items: stretch; row-gap: 0.6rem; }
  .facts-box .tags.has-addons { flex-wrap: nowrap; align-items: stretch; }
  .facts-box .tag:first-child { flex: 0 0 auto; }
  .facts-box .tag.is-light { white-space: normal; text-align: start; }
}

/* =========================== ตารางเวลา 6 ช่วง =========================== */

.agenda { border-top: 1px solid var(--bulma-border-weak); }
.agenda .columns {
  margin: 0;
  border-bottom: 1px solid var(--bulma-border-weak);
  padding: 1rem 0;
}
.agenda .columns:last-child { border-bottom: 0; }
.agenda .columns.is-mobile > .column { padding: 0; }
.agenda .columns.is-mobile > .column.clock {
  flex: 0 0 7.8rem;
  width: 7.8rem;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--bulma-text-weak);
  line-height: 1.75;
  white-space: nowrap;
}
.agenda .columns.is-mobile > .column.what {
  flex: 1 1 0;
  width: auto;
  padding-inline-start: 1rem;
  line-height: 1.75;
}
@media screen and (max-width: 480px) {
  .agenda .columns.is-mobile > .column.clock { flex: 0 0 7.1rem; width: 7.1rem; font-size: 0.85rem; }
  .agenda .columns.is-mobile > .column.what { padding-inline-start: 0.75rem; }
}
.agenda .what p { margin-top: 0.35rem; }

/* =========================== รายการเนื้อหา =========================== */

.content ul { margin-inline-start: 1.15em; margin-top: 0.5rem; }
.content ul li + li { margin-top: 0.4rem; }
.content ul li::marker { color: var(--bulma-primary); }

/* ขั้นตอนการสมัคร ใช้ CSS counter ทำเลขในวงกลมสีหลัก
   Bulma ไม่มีคอมโพเนนต์ steps ในตัว จึงเขียนเองให้เข้าชุด */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.55rem 0;
  line-height: 1.75;
}
.steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bulma-radius-rounded);
  background: var(--bulma-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* =========================== ฟอร์ม =========================== */

.form-box { margin-top: 1.5rem; }

/* สามกลุ่มในฟอร์ม คั่นด้วยเส้นบางของ Bulma */
.form-group { border: 0; margin: 0 0 2.25rem; padding: 0; }
.form-group:last-of-type { margin-bottom: 1.75rem; }
.form-group + .form-group {
  border-top: 1px solid var(--bulma-border-weak);
  padding-top: 2rem;
}
.form-group::after { content: ""; display: table; clear: both; }
/* legend ปกติถูกวางคร่อมเส้นขอบบนของ fieldset เส้นจะพาดกลางตัวอักษร
   ให้ลอยเต็มความกว้างแทน เส้นคั่นกลุ่มจะได้เป็นเส้นเดียวเหนือหัวข้อ */
.form-group > legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bulma-text-strong);
}
.form-group > .group-note {
  font-size: 0.95rem;
  color: var(--bulma-text-weak);
  margin: 0.35rem 0 1.25rem;
  line-height: 1.7;
}

.label { font-weight: 600; }
.label-req {
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--bulma-primary-on-scheme);
  margin-inline-start: 0.35rem;
}

/* พื้นที่กดอย่างน้อย 44px */
.input.is-medium, .textarea.is-medium { min-height: 48px; }
.textarea.is-medium { line-height: 1.75; min-height: 96px; resize: vertical; }

/* ช่องที่ผิด ผูกกับ aria-invalid ที่ฟอร์มฝั่ง Python ใส่ให้ */
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--bulma-danger);
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 0.25);
}
.help { line-height: 1.6; font-size: 0.9rem; }

/* ติ๊กขอใบกำกับภาษี พื้นที่กดทั้งแถบ สูงเกิน 44px */
.vat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--bulma-scheme-main-bis);
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius);
  padding: 0.9rem 1rem;
}
.vat-check {
  width: 22px;
  height: 22px;
  margin-top: 6px;
  flex-shrink: 0;
  accent-color: var(--bulma-primary);
}
.vat-row label { cursor: pointer; line-height: 1.7; }
.vat-row .help { margin-top: 0.15rem; }

/* บรรทัดยอดเงิน */
.money-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--bulma-border-weak);
  padding: 0.55rem 0;
}
.money-total {
  border-top: 1px solid var(--bulma-border);
  border-bottom: 1px solid var(--bulma-border);
  padding: 0.85rem 0;
  margin-top: 0.75rem;
}
.money-total .amount {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bulma-primary-on-scheme);
}

.bank-block { margin-top: 1.5rem; }
.bank-block .bank { margin-top: 0.5rem; }
.bank-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bulma-text-weak);
  margin: 0;
}

.bank {
  background: var(--bulma-scheme-main-bis);
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius);
  padding: 1rem 1.15rem;
  margin-top: 1.5rem;
}
.bank > div { display: flex; gap: 0.85rem; padding: 3px 0; }
.bank dt { flex: 0 0 6.5rem; font-size: 0.92rem; color: var(--bulma-text-weak); }
.bank dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* แนบสลิป ใช้ file has-name is-boxed ของ Bulma
   .file-input ของ Bulma ตั้ง outline:none ไว้ ต้องคืนกรอบโฟกัสให้ปุ่ม */
.file.is-boxed .file-cta { min-height: 88px; padding: 1rem 1.25rem; }
.file.is-boxed .file-name {
  max-width: none;
  font-size: 0.92rem;
  color: var(--bulma-text-weak);
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.file-input:focus-visible + .file-cta {
  outline: 2px solid var(--bulma-primary);
  outline-offset: 2px;
  border-color: var(--bulma-primary);
}
.file-hint {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--bulma-text-weak);
  margin-top: 0.2rem;
}
#slip-preview {
  margin-top: 0.85rem;
  max-width: 240px;
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius);
}

/* =========================== ปุ่ม =========================== */

.button.is-medium { min-height: 48px; }
.button { font-weight: 600; }
/* is-fullwidth ใช้กับปุ่มยืนยันบนมือถือ จอกว้างกว่านั้นปุ่มยาวเต็มคอลัมน์
   จะดูเป็นแถบมากกว่าปุ่ม */
@media screen and (min-width: 769px) {
  .button.is-primary.is-fullwidth { width: auto; min-width: 20rem; }
}

/* =========================== FAQ =========================== */

.faq { border-top: 1px solid var(--bulma-border-weak); }
.faq details { border-bottom: 1px solid var(--bulma-border-weak); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.9rem 0;
  font-weight: 600;
  line-height: 1.7;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--bulma-primary);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--bulma-primary); outline-offset: 2px; }
.faq .answer { padding-bottom: 1.1rem; color: var(--bulma-text-weak); line-height: 1.75; }

/* =========================== แถบล่างบนมือถือ =========================== */

.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-top: 1px solid var(--bulma-border-weak);
  box-shadow: 0 -2px 12px hsla(221, 14%, 4%, 0.08);
  padding: 0.7rem 1.25rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
}
.dock .dock-text { flex: 1 1 auto; line-height: 1.3; min-width: 0; }
.dock .dock-amount {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dock .dock-when { font-size: 0.82rem; color: var(--bulma-text-weak); }
.dock .button { flex-shrink: 0; min-height: 44px; padding-inline: 1.35rem; }
@media screen and (min-width: 769px) {
  .dock { display: none; }
}

/* =========================== หน้ายืนยันผล =========================== */

.receipt .code {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--bulma-primary-on-scheme);
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 640px) {
  .receipt .code { font-size: 2.5rem; }
}
.summary-list { border-top: 1px solid var(--bulma-border-weak); margin-top: 2rem; }
.summary-list > div {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--bulma-border-weak);
  padding: 0.6rem 0;
}
.summary-list dt { flex: 0 0 7.5rem; font-size: 0.92rem; color: var(--bulma-text-weak); }
.summary-list dd { margin: 0; flex: 1 1 auto; }