/* ============================================================
   landing.css — ใช้เฉพาะหน้าแรก /organization/index.php เท่านั้น
   ห้ามให้หน้าอื่นโหลดไฟล์นี้ และห้ามแก้ assets/index.css แทนกัน
   (index.css ใช้ร่วมกับหน้าแบบประเมินทุกหน้า + หน้า login ผู้ดูแล)

   คลาสทุกตัวขึ้นต้น ld- ตามแบบแผนเดียวกับ administrator/assets/console.css
   ที่ใช้ mc- เพื่อไม่ให้ชนกับของเดิม

   เขียนแบบ mobile-first เพราะทางเข้าหลักของหน้านี้คือมือถือ
   (คนสแกน QR ของหน่วยงานตัวเองเข้ามา)
   ============================================================ */

:root {
  /* พื้นและเส้น — โทนครีมอุ่น */
  --ld-ground: #fbf7f1;
  --ld-surface: #ffffff;
  --ld-surface-warm: #fffdf9;
  --ld-band: #f3efe6;
  --ld-line: #ece3d6;
  --ld-line-2: #dfd5c6;
  --ld-line-3: #f0e8dc;

  /* ตัวอักษร — ตัวเลขคือคอนทราสต์บนพื้นครีม เกณฑ์ 4.5:1 */
  --ld-ink: #23253d;    /* 14.02:1 */
  --ld-ink-2: #575d7c;  /*  6.03:1 */
  --ld-ink-3: #6b7090;  /*  4.53:1 — ตัวเล็กสุดที่ยังใช้เป็นตัวอักษรได้ */

  /* สีแบรนด์ — คงไว้เท่าเดิมกับ index.css เพื่อให้รอยต่อไป register.php ไม่สะดุด */
  --ld-brand: #1e3a8a;      /* ขาวบนน้ำเงิน 10.36:1 */
  --ld-brand-2: #2f52c4;
  --ld-brand-soft: #e9edfa;
  --ld-thaid: #030650;      /* สีทางการของ ThaID */
  --ld-thaid-hover: #0c1580;

  /* สีบรรยากาศ — ใช้เป็นพื้นไอคอนและป้าย ไม่ใช่สีปุ่ม และไม่ใช่สีบอกความรุนแรง */
  --ld-peach: #e07a4e;
  --ld-peach-ink: #a8482a;  /* 5.43:1 */
  --ld-peach-soft: #fdeade;
  --ld-sage: #35786c;       /* 4.85:1 บนครีม — บนพื้นเซจอ่อนได้ 4.40:1 ใช้เป็นไอคอนเท่านั้น */
  --ld-sage-soft: #e3efec;

  --ld-foot: #1c2138;

  --ld-r-card: 20px;
  --ld-r-btn: 14px;
  --ld-r-lg: 16px;
  --ld-shadow: 0 10px 30px rgba(60, 44, 30, .06);
  --ld-shadow-btn: 0 14px 32px rgba(30, 58, 138, .20);

  --ld-font-head: Anuphan, Sarabun, "Noto Sans Thai", system-ui, sans-serif;
  --ld-font-body: Sarabun, "Noto Sans Thai", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ld-ground);
  color: var(--ld-ink);
  font-family: var(--ld-font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--ld-font-head);
  font-weight: 600;
  line-height: 1.3;
  /* ห้ามใส่ letter-spacing กับข้อความไทย สระและวรรณยุกต์จะหลุดจากพยัญชนะ */
}

p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--ld-brand); text-decoration: none; }
a:hover { color: var(--ld-brand-2); }

:focus-visible {
  outline: 2px solid var(--ld-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── ข้ามไปเนื้อหาหลัก ── */
.ld-skip {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ld-surface);
  color: var(--ld-brand);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(60, 44, 30, .16);
  transition: top .18s ease;
}
.ld-skip:focus { top: 16px; }

/* ── แถบบน ── */
.ld-nav {
  background: rgba(255, 253, 249, .9);
  border-bottom: 1px solid var(--ld-line-3);
}
.ld-nav-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ld-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;   /* เป้าแตะบนมือถือ */
  color: var(--ld-ink);
}
.ld-brand:hover { color: var(--ld-ink); }
.ld-brand img { height: 26px; width: auto; }
.ld-brand-div { display: none; width: 1px; height: 22px; background: #e2d8c9; }
.ld-brand-txt { font-family: var(--ld-font-head); font-weight: 600; font-size: 13.5px; }

.ld-navlogin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ld-line-2);
  border-radius: var(--ld-r-btn);
  background: var(--ld-surface-warm);
  color: var(--ld-ink-2);
  font-size: 14px;
  font-weight: 500;
}
.ld-navlogin:hover { color: var(--ld-brand); border-color: var(--ld-brand); }
.ld-navlogin span { display: none; }

/* ── ฮีโร่ ── */
.ld-hero { position: relative; overflow: hidden; }
.ld-hero-in {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ld-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ld-blob-a {
  top: -90px; right: -110px; width: 320px; height: 320px;
  background: radial-gradient(circle at 40% 40%, rgba(224, 122, 78, .18), rgba(224, 122, 78, 0) 68%);
}
.ld-blob-b {
  top: 190px; left: -140px; width: 320px; height: 320px;
  background: radial-gradient(circle at 50% 50%, rgba(47, 82, 196, .14), rgba(47, 82, 196, 0) 68%);
}

.ld-copy { position: relative; display: flex; flex-direction: column; gap: 16px; }

.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--ld-surface);
  border: 1px solid var(--ld-line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ld-ink-2);
}
.ld-eyebrow svg { color: var(--ld-sage); }

.ld-h1 { font-size: clamp(30px, 6.4vw, 52px); color: var(--ld-ink); }
.ld-lead { font-size: 15.5px; color: var(--ld-ink-2); max-width: 520px; text-wrap: pretty; }

.ld-visual {
  position: relative;
  width: 230px;
  height: 230px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}
.ld-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ปุ่มหลักของฮีโร่ อยู่นอก .ld-copy เพื่อให้บนมือถือเรียงต่อจากโลโก้ */
.ld-cta { display: flex; flex-direction: column; gap: 12px; }
.ld-symbol { position: relative; width: 116px; height: 116px; }

/* ── ปุ่ม ── */
.ld-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 24px;
  border-radius: var(--ld-r-btn);
  font-family: var(--ld-font-head);
  font-weight: 600;
  font-size: 16px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ld-btn-primary {
  background: var(--ld-brand);
  color: #fff;
  border-radius: var(--ld-r-lg);
  font-size: 17px;
  box-shadow: var(--ld-shadow-btn);
}
.ld-btn-primary:hover { background: var(--ld-brand-2); color: #fff; }

.ld-btn-thaid { background: var(--ld-thaid); color: #fff; }
.ld-btn-thaid:hover { background: var(--ld-thaid-hover); color: #fff; }

/* ทางลงทะเบียนสำรอง — ต้องเป็นปุ่ม ไม่ใช่ลิงก์ตัวหนังสือ
   หน่วยงานจำนวนมากไม่มี ThaiD ถ้าเป็นลิงก์เล็ก ๆ จะหาไม่เจอ */
.ld-btn-alt {
  border: 1.5px solid var(--ld-brand);
  background: var(--ld-surface);
  color: var(--ld-brand);
  font-size: 15.5px;
}
.ld-btn-alt:hover { background: var(--ld-brand-soft); color: var(--ld-brand); }

.ld-btn-ghost {
  border: 1px solid var(--ld-line-2);
  background: var(--ld-surface-warm);
  color: var(--ld-ink);
  font-size: 15.5px;
}
.ld-btn-ghost:hover { border-color: var(--ld-brand); color: var(--ld-brand); }
.ld-btn-ghost svg { color: var(--ld-ink-2); }

/* ปุ่มคู่มือ — พื้นฟ้าอ่อนแบรนด์ เด่นกว่าลิงก์ตัวหนังสือเดิม แต่ไม่แข่งกับปุ่ม ThaID/ลงทะเบียน */
.ld-btn-manual {
  background: var(--ld-brand-soft);
  color: var(--ld-brand);
  border: 1px solid #d3dcf5;
}
.ld-btn-manual:hover { background: #dbe3f8; color: var(--ld-brand); }
.ld-btn-manual svg { color: var(--ld-brand); }

.ld-btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ld-brand);
}

/* ── แถบสำหรับหน่วยงาน ── */
.ld-org {
  background: var(--ld-band);
  border-top: 1px solid #eae1d4;
  border-bottom: 1px solid #eae1d4;
}
.ld-org-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* ลำดับบนมือถือคือ หัวข้อ → การ์ดปุ่ม → 4 ขั้นตอน
   ตั้งใจให้ปุ่มลงทะเบียนมาก่อนคำอธิบายขั้นตอน */
.ld-org-head { display: flex; flex-direction: column; gap: 9px; }

.ld-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ld-surface);
  border: 1px solid #e4dbcc;
  font-size: 12px;
  font-weight: 600;
  color: var(--ld-peach-ink);
}

.ld-h2 { font-size: clamp(22px, 3.4vw, 30px); }
.ld-sub { font-size: 14px; color: var(--ld-ink-2); max-width: 540px; }

.ld-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ld-surface);
  border: 1px solid var(--ld-line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--ld-shadow);
}
.ld-clabel { font-size: 12px; font-weight: 600; color: var(--ld-ink-3); }
.ld-sep { height: 1px; background: var(--ld-line-3); margin: 8px 0 4px; border: 0; }

.ld-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;   /* เป็น <ol> เพื่อบอกลำดับให้โปรแกรมอ่านหน้าจอ แต่เลขวาดเอง */
}
.ld-step { display: flex; gap: 12px; align-items: flex-start; }
.ld-step-n {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: var(--ld-brand-soft);
  color: var(--ld-brand);
  font-family: var(--ld-font-head);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-step-t { display: block; font-family: var(--ld-font-head); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.ld-step-d { display: block; font-size: 12.5px; color: var(--ld-ink-3); line-height: 1.5; }

/* ── แบบประเมิน 5 ด้าน ── */
.ld-doms {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 20px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ld-doms-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }

.ld-domgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.ld-dom {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--ld-surface);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-lg);
  padding: 14px;
}
.ld-dom-ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-dom-ic.is-peach { background: var(--ld-peach-soft); color: var(--ld-peach-ink); }
.ld-dom-ic.is-brand { background: var(--ld-brand-soft); color: var(--ld-brand); }
.ld-dom-ic.is-sage  { background: var(--ld-sage-soft);  color: var(--ld-sage); }

/* body ต้องเป็น flex column และ flex:1 ไม่งั้น margin-top:auto ของ .ld-dom-n
   จะไม่ทำงาน แล้วบรรทัดชื่อแบบวัดจะไม่ตรงกันทั้งแถวบนเดสก์ท็อป */
.ld-dom-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ld-dom-t { font-family: var(--ld-font-head); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.ld-dom-m { display: none; font-size: 13.5px; color: var(--ld-ink-3); line-height: 1.55; }
.ld-dom-n { font-size: 12.5px; color: var(--ld-ink-3); line-height: 1.5; margin-top: 2px; }
.ld-dom-n b { color: var(--ld-ink-2); font-weight: 600; }

.ld-note { font-size: 12.5px; color: var(--ld-ink-3); margin-top: 2px; }
.ld-domfoot { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

/* ── ฟุตเตอร์ ── */
.ld-foot { background: var(--ld-foot); color: #fff; }
.ld-foot-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ld-hotline {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--ld-r-lg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.ld-hotline:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.ld-hotline svg { flex: 0 0 auto; color: #f7b48c; }
.ld-hotline-txt { display: flex; flex-direction: column; line-height: 1.3; }
.ld-hotline-lbl { font-size: 12px; color: rgba(255, 255, 255, .78); }  /* 10.09:1 */
.ld-hotline-num { font-family: var(--ld-font-head); font-weight: 700; font-size: 21px; }

.ld-foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ld-foot-brand img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.ld-foot-name { display: flex; flex-direction: column; line-height: 1.4; }
.ld-foot-name b { font-family: var(--ld-font-head); font-weight: 600; font-size: 13.5px; }
.ld-foot-name span { font-size: 12px; color: rgba(255, 255, 255, .72); }  /* 8.5:1 */
.ld-copyright { font-size: 12px; color: rgba(255, 255, 255, .66); }       /* 7.66:1 — ของเดิม .45 ได้ 4.25:1 ไม่ผ่าน AA */

/* ============================================================
   แท็บเล็ตขึ้นไป
   ============================================================ */
@media (min-width: 760px) {
  body { font-size: 16px; line-height: 1.7; }

  .ld-nav-in { padding: 16px 32px; }
  .ld-brand img { height: 30px; }
  .ld-brand-div { display: block; }
  .ld-brand-txt { font-size: 15px; }
  .ld-navlogin {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 999px;
  }
  .ld-navlogin span { display: inline; }

  .ld-hero-in { padding: 56px 32px 60px; }
  .ld-copy { gap: 20px; }
  .ld-lead { font-size: 17px; }
  .ld-visual { width: 300px; height: 300px; }
  .ld-symbol { width: 150px; height: 150px; }

  .ld-org-in { padding: 48px 32px; gap: 26px; }
  .ld-sub { font-size: 15.5px; }
  .ld-card { border-radius: var(--ld-r-card); padding: 26px 26px 24px; }
  .ld-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 34px;
  }
  .ld-step-n { width: 34px; height: 34px; border-radius: 12px; font-size: 15px; }
  .ld-step-t { font-size: 15.5px; }
  .ld-step-d { font-size: 13.5px; }

  .ld-doms { padding: 56px 32px 64px; gap: 16px; }
  .ld-domgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ld-dom {
    flex-direction: column;
    gap: 10px;
    border-radius: var(--ld-r-card);
    padding: 24px 20px 22px;
    box-shadow: 0 10px 30px rgba(60, 44, 30, .05);
  }
  .ld-dom-ic { width: 46px; height: 46px; border-radius: 14px; }
  .ld-dom-body { gap: 10px; }
  .ld-dom-t { font-size: 18px; }
  .ld-dom-m { display: block; }
  .ld-dom-n { margin-top: auto; padding-top: 12px; font-size: 13px; }
  .ld-domfoot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 14px;
  }
  .ld-domfoot .ld-note { margin-top: 0; font-size: 13.5px; }
  .ld-domfoot .ld-btn { flex: 0 0 auto; padding: 10px 30px; font-size: 16px; }

  .ld-foot-in { padding: 44px 32px 34px; }
  .ld-foot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .ld-foot-brand { padding-top: 0; border-top: 0; }
  .ld-foot-brand img { height: 34px; }
  .ld-foot-name b { font-size: 15px; }
  .ld-foot-name span { font-size: 13.5px; }
  .ld-hotline { padding: 14px 22px; gap: 14px; }
  .ld-hotline-lbl { font-size: 13px; }
  .ld-hotline-num { font-size: 22px; }
  .ld-copyright { padding-top: 22px; font-size: 13.5px; }
}

/* ============================================================
   เดสก์ท็อป — ฮีโร่และแถบหน่วยงานเป็นสองคอลัมน์ การ์ด 5 ใบเรียงแถวเดียว
   ============================================================ */
@media (min-width: 1040px) {
  .ld-nav-in { padding: 16px 20px; }
  .ld-hero-in {
    padding: 76px 20px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto;
    gap: 24px 64px;
    align-items: center;
  }
  .ld-copy   { grid-column: 1; grid-row: 1; align-self: end; }
  .ld-cta    { grid-column: 1; grid-row: 2; align-self: start; }
  .ld-visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; }
  .ld-blob-a { top: -130px; right: -60px; width: 520px; height: 520px; }
  .ld-blob-b { top: auto; bottom: -190px; left: -120px; width: 520px; height: 520px; }
  .ld-copy { gap: 22px; }
  .ld-lead { font-size: 18px; }
  .ld-visual { width: 380px; height: 380px; margin: 0; }
  .ld-symbol { width: 186px; height: 186px; }   /* ต้นฉบับ 512px — 186px ยังคมบนจอ Retina */

  /* สองปุ่มในฮีโร่: ทำแบบประเมิน แล้ว เข้าสู่ระบบผู้ดูแล ใต้ลงมา — กว้างเท่ากัน ชิดซ้าย */
  .ld-cta { align-items: stretch; max-width: 340px; }
  .ld-cta .ld-btn { padding: 16px 30px; font-size: 17px; }

  .ld-org-in {
    padding: 60px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto;
    gap: 26px 72px;
    align-items: start;
  }
  .ld-org-head { grid-column: 1; grid-row: 1; gap: 10px; }
  .ld-steps    { grid-column: 1; grid-row: 2; }
  .ld-card     { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

  .ld-doms { padding: 64px 20px 72px; }
  .ld-domgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .ld-foot-in { padding: 44px 20px 34px; }
}

/* ============================================================
   จอเล็กมาก — ปุ่มยังต้องแตะง่าย
   ============================================================ */
@media (max-width: 380px) {
  .ld-hero-in, .ld-org-in, .ld-doms, .ld-foot-in, .ld-nav-in { padding-left: 16px; padding-right: 16px; }
  .ld-btn { font-size: 15.5px; padding-left: 16px; padding-right: 16px; }
  .ld-visual { width: 200px; height: 200px; }
  .ld-symbol { width: 100px; height: 100px; }
}

/* ============================================================
   เคลื่อนไหวน้อยที่สุด และเคารพค่าที่ผู้ใช้ตั้งไว้
   ============================================================ */
/* ไหวครั้งเดียวทั้งก้อน ไม่ไล่ทีละบรรทัด — การไล่ทำให้ปุ่มเป็นสิ่งสุดท้ายที่โผล่
   ซึ่งขัดกับเป้าหมายของหน้านี้ที่ต้องการให้กดได้เร็วที่สุด */
@media (prefers-reduced-motion: no-preference) {
  .ld-copy,
  .ld-cta { animation: ld-rise .35s cubic-bezier(.4, 0, .2, 1) both; }
}

@keyframes ld-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   พิมพ์ — ตัดของประดับออก ให้เหลืออ่านได้
   ============================================================ */
@media print {
  .ld-blob, .ld-visual, .ld-skip { display: none; }
  body { background: #fff; }
  .ld-foot { background: #fff; color: #000; }
  .ld-foot-name span, .ld-copyright, .ld-hotline-lbl { color: #333; }
  .ld-foot-brand img { filter: none; }
}