/* CI 2026 — โทนเดียวกับหน้าแรกใหม่ (สไตล์หน้า DSD): พื้นขาว/ลาเวนเดอร์ ม่วง #6944a8 ปุ่มหลักแดง #ff2e38 หัวข้อ Kanit เนื้อหา Bai Jamjuree
   ไฟล์นี้เปลี่ยนแค่หน้าตา — ไม่แตะช่องกรอก ข้อมูล หรือการทำงานของหน้าใด ๆ
   data-ci="public" = หน้าลูกค้า (สมัคร / ตรวจสอบสถานะ / ตั้งรหัสผ่าน) · data-ci="admin" = หลังบ้าน */
:root {
  --ci-red: #ff2e38; --ci-red-hover: #df1728; --ci-purple: #6944a8; --ci-purple-2: #7450b5; --ci-purple-dark: #513184;
  --ci-ink: #101025; --ci-muted: #655e73; --ci-soft: #f7f4ff; --ci-line: #e9e4f2;
  --ci-head: "Kanit", "Bai Jamjuree", "Segoe UI", sans-serif;
  --ci-body: "Bai Jamjuree", "Segoe UI", Tahoma, sans-serif;
}

/* ---------- หน้าลูกค้า ---------- */
body[data-ci="public"] {
  font-family: var(--ci-body);
  color: var(--ci-ink);
  background:
    radial-gradient(900px 480px at 88% -8%, #ffe6ea 0%, rgba(255, 230, 234, 0) 60%),
    radial-gradient(900px 520px at -5% 0%, #ece5ff 0%, rgba(236, 229, 255, 0) 62%),
    #f6f3fd;
  background-attachment: fixed;
}
body[data-ci="public"] input, body[data-ci="public"] select, body[data-ci="public"] textarea, body[data-ci="public"] button { font-family: inherit; }
body[data-ci="public"] h1, body[data-ci="public"] h2, body[data-ci="public"] h3,
body[data-ci="public"] .course-section-title, body[data-ci="public"] .course-title,
body[data-ci="public"] .price-amount, body[data-ci="public"] .step .num { font-family: var(--ci-head); }
body[data-ci="public"] .container, body[data-ci="public"] .card {
  border-radius: 22px; border: 1px solid #ebe5f5;
  box-shadow: 0 24px 60px rgba(16, 16, 37, 0.12), 0 2px 6px rgba(16, 16, 37, 0.04);
}
body[data-ci="public"] .header, body[data-ci="public"] .head, body[data-ci="public"] .modal-header {
  background: linear-gradient(135deg, var(--ci-purple) 0%, var(--ci-purple-2) 100%);
}
body[data-ci="public"] .header h1, body[data-ci="public"] .head h1, body[data-ci="public"] .modal-header h3 { font-weight: 600; letter-spacing: 0; }

/* ปุ่มหลัก = แดงแบบปุ่ม "สมัครอบรม" หน้าแรก */
body[data-ci="public"] .btn-primary, body[data-ci="public"] .btn-success, body[data-ci="public"] .course-btn,
body[data-ci="public"] .btn-modal, body[data-ci="public"] .btn-submit-big, body[data-ci="public"] .container > .body .btn,
body[data-ci="public"] .card button[type="submit"] {
  background: var(--ci-red); color: #fff; font-family: var(--ci-head); font-weight: 600;
  box-shadow: 0 10px 24px rgba(255, 46, 56, 0.26);
}
body[data-ci="public"] .btn-primary:hover, body[data-ci="public"] .btn-success:hover, body[data-ci="public"] .course-btn:hover,
body[data-ci="public"] .btn-modal:hover:not(:disabled), body[data-ci="public"] .btn-submit-big:hover, body[data-ci="public"] .container > .body .btn:hover,
body[data-ci="public"] .card button[type="submit"]:hover {
  background: var(--ci-red-hover);
}
body[data-ci="public"] .btn-primary:disabled, body[data-ci="public"] .btn-modal:disabled, body[data-ci="public"] .btn-submit-big:disabled,
body[data-ci="public"] .container > .body .btn:disabled, body[data-ci="public"] .card button[type="submit"]:disabled {
  background: #d9d2e6; color: #fff; box-shadow: none;
}
body[data-ci="public"] .btn-secondary { font-family: var(--ci-head); font-weight: 600; }
body[data-ci="public"] .price-summary-card { background: linear-gradient(135deg, #f7f4ff, #efe9ff); border-color: var(--ci-purple); }
body[data-ci="public"] input:focus, body[data-ci="public"] select:focus, body[data-ci="public"] textarea:focus { border-color: var(--ci-purple); }

/* ---------- หลังบ้าน ---------- */
body[data-ci="admin"] h1, body[data-ci="admin"] h2, body[data-ci="admin"] h3,
body[data-ci="admin"] .tab-btn, body[data-ci="admin"] .btn { font-family: var(--ci-head); font-weight: 600; letter-spacing: 0; }
body[data-ci="admin"] .login-wrap {
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(255, 46, 56, 0.22), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(138, 106, 214, 0.35), transparent 60%),
    linear-gradient(150deg, #2a1f5e 0%, #101025 75%);
}
body[data-ci="admin"] .login-header { background: linear-gradient(135deg, var(--ci-purple) 0%, var(--ci-purple-2) 100%); }