/* ═════════════════════════════════════════════════════════════════════════════
   ธีมหน้าผู้สมัคร: สมัครเรียน (apply.php) ตรวจสถานะ (status.php) ส่งใบสมัครสำเร็จ (thankyou.php) · 24 ต.ค. 2569
   ครูหนึ่ง: "ปรับปรุงเว็บเพจ admission ให้ใช้ theme เดียวกับ admission/index.php ปรับปรุง padding ไม่ให้ห่างกว้างมากเกินไป
             แบบฟอร์มให้สวยงามกระชับ เพิ่มแอนิเมชั่น เพื่อการนำเสนอที่น่าสนใจ"
   โหลดต่อจาก admission-landing.css (ตัวแปร --al-* ปุ่ม ส่วนหัว เมนู ภาพเคลื่อนไหว) ผ่าน admission_public_assets()
   ไม่แก้โครง HTML/สคริปต์ของแบบฟอร์ม: ทุกกฎเป็นชั้นหน้าตาที่ทับ CSS เดิม (admission-apply*.css admission-status*.css)
   ด้วย body.admission-theme.al-scope ซึ่งเจาะจงเท่ากับกฎเดิมและโหลดทีหลัง
   ภาพเคลื่อนไหวทั้งหมดอยู่ใน prefers-reduced-motion: no-preference และใช้ transform/opacity เท่านั้น
   ═════════════════════════════════════════════════════════════════════════════ */

body.admission-theme.al-scope { background: var(--al-page); }

/* ── ส่วนหัวของหน้า (admission_public_top) ─────────────────────────────────── */
.al-hero.al-hero-page { padding-bottom: clamp(18px, 2.5vw, 28px); }
.al-hero-page .al-subnav { margin-bottom: clamp(14px, 2vw, 22px); }
.al-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 40px;
    align-items: end;
}
.al-page-head.has-facts { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.al-page-copy { position: relative; }
.al-page-title.al-title { margin-top: 10px; font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem)); line-height: 1.25; }
.al-page-head .al-lead { margin-top: 8px; font-size: var(--tb1-fs-md, 1.125rem); }
.al-page-facts {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--tb1-surface-veil, rgba(255, 255, 255, .92));
    box-shadow: var(--al-shadow);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.5;
    list-style: none;
}
.al-page-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.al-page-facts i { color: var(--al-brand); text-align: center; }
.al-page-badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--tb1-success-deep, #059669), var(--tb1-success, #10B981));
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 16px 30px -16px var(--tb1-success-deep, #059669);
}
.al-page-badge::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--tb1-success, #10B981);
    opacity: 0;
}
.al-pulse.is-done { background: var(--tb1-success, #10B981); }
/* หน้าส่งใบสมัครสำเร็จ: ส่วนหัวกึ่งกลางเหนือการ์ดเลขที่ใบสมัคร */
.al-hero-page.has-badge .al-page-copy { display: grid; justify-items: center; text-align: center; }
.al-hero-page.has-badge .al-lead { max-width: 36em; }

/* ── พื้นที่เนื้อหา: กว้างเท่าส่วนหัว ระยะกระชับ ─────────────────────────────
   admission-theme.css ตั้ง max-width/padding ของ .page-wrap แบบ !important จึงต้องทับด้วย !important เช่นกัน */
body.admission-theme.al-scope .page-wrap {
    width: min(var(--tb1-page-max-width, 1280px), calc(100% - 2 * max(16px, var(--tb1-shell-gutter, 24px))));
    max-width: none !important;
    margin: 0 auto !important;
    padding: clamp(14px, 2vw, 22px) 0 clamp(28px, 4vw, 44px) !important;
}
body.admission-theme.al-scope :is(.form-main, .main-area) { max-width: none; margin: 0; }

/* ── การ์ด ───────────────────────────────────────────────────────────────── */
body.admission-theme.al-scope .gc {
    margin-bottom: 14px;
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
    overflow: hidden;
    transition: border-color .2s ease;
}
body.admission-theme.al-scope .gc:hover { background: var(--al-surface); border-color: var(--al-border); box-shadow: var(--al-shadow); }
body.admission-theme.al-scope .gc-head {
    gap: 10px;
    padding: 14px 18px 0;
    border-bottom: 0;
    background: transparent;
}
body.admission-theme.al-scope .gc-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: .95rem;
    box-shadow: none;
    color: var(--al-brand);
    background: var(--al-brand-50);
}
body.admission-theme.al-scope .gc:hover .gc-icon { transform: none; }
body.admission-theme.al-scope .gc-icon.violet { color: #7C3AED; background: rgba(124, 58, 237, .12); }
body.admission-theme.al-scope .gc-icon.teal { color: var(--tb1-text-success, #047857); background: rgba(16, 185, 129, .14); }
body.admission-theme.al-scope .gc-icon.amber { color: var(--tb1-text-warning, #B45309); background: rgba(245, 158, 11, .16); }
body.admission-theme.al-scope .gc-icon.sky { color: var(--tb1-accent-strong, #0284C7); background: rgba(14, 165, 233, .14); }
body.admission-theme.al-scope .gc-icon.rose { color: #E11D48; background: rgba(225, 29, 72, .12); }
body.admission-theme.al-scope .gc-title { font-family: var(--al-display); font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; color: var(--al-ink); }
body.admission-theme.al-scope .gc-body { padding: 14px 18px 18px; }

/* ── หัวข้อแต่ละขั้น ─────────────────────────────────────────────────────── */
body.admission-theme.al-scope .s-head { margin-bottom: 12px; }
body.admission-theme.al-scope .s-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    color: var(--al-brand);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    letter-spacing: .06em;
}
body.admission-theme.al-scope .s-eyebrow .bar { width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
body.admission-theme.al-scope .s-title { font-family: var(--al-display); font-size: var(--tb1-fs-xl, 1.5rem); font-weight: 700; color: var(--al-ink); line-height: 1.4; }
body.admission-theme.al-scope .s-desc { color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); }

/* ── ช่องกรอก ───────────────────────────────────────────────────────────── */
body.admission-theme.al-scope .fg { gap: 12px 14px; }
body.admission-theme.al-scope .fl { margin-bottom: 5px; color: var(--al-ink-2); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; line-height: 1.5; }
body.admission-theme.al-scope .fl.req::after { color: var(--tb1-text-danger, #DC2626); }
body.admission-theme.al-scope .fl i { color: var(--al-brand); margin-right: 4px; }
/* :not() สามตัวทำให้เจาะจงกว่ากฎช่องกรอกของ admission-theme.css (input:not(checkbox/radio/hidden)) */
body.admission-theme.al-scope :is(.fi, .fs):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1.5px solid var(--al-border-bold);
    border-radius: var(--tb1-radius-sm, 10px);
    background-color: var(--al-surface);
    color: var(--al-ink);
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.admission-theme.al-scope .fs:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { padding-right: 38px; }
/* ★ 28 ต.ค. 2569: จอสัมผัส ช่องกรอกไม่เล็กกว่า 16 px — iPhone/iPad ซูมทั้งหน้าเมื่อแตะช่องที่เล็กกว่านี้
   (หน้าสาธารณะใช้ตัวอักษรราก 90% ช่องกรอก 1rem จึงเหลือ 14.4 px) จอคอมพิวเตอร์คงขนาดเดิม */
@media (max-width: 1024px), (pointer: coarse) {
    body.admission-theme.al-scope :is(.fi, .fs):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { font-size: max(16px, 1rem); }
}
body.admission-theme.al-scope :is(.fi, .fs):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover { border-color: var(--tb1-brand-300, #93C5FD); }
body.admission-theme.al-scope :is(.fi, .fs):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    outline: none;
    border-color: var(--al-brand);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}
body.admission-theme.al-scope :is(.fi, .fs):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):user-invalid { border-color: var(--tb1-danger, #EF4444); }
body.admission-theme.al-scope .fi:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])[readonly] { background-color: var(--al-surface-alt); color: var(--al-muted); }
body.admission-theme.al-scope .fhint { margin-top: 4px; color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }

/* ── ปุ่ม: แบบเดียวกับหน้าแรก ───────────────────────────────────────────── */
body.admission-theme.al-scope :is(.btn, .btn-upload) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--al-border-bold);
    border-radius: var(--tb1-radius-md, 16px);
    font-family: inherit;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
body.admission-theme.al-scope .btn::before { display: none; }
body.admission-theme.al-scope :is(.btn, .btn-upload) i { transition: transform .25s var(--al-ease); }
body.admission-theme.al-scope :is(.btn-primary, .btn-upload) {
    border-color: transparent;
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    box-shadow: 0 12px 24px -14px var(--al-brand);
}
body.admission-theme.al-scope .btn-secondary { background: var(--al-surface); color: var(--al-ink); }
body.admission-theme.al-scope .btn-secondary:hover { border-color: var(--al-brand); color: var(--al-brand); background: var(--al-surface); }
body.admission-theme.al-scope .btn-green {
    border-color: transparent;
    background: linear-gradient(135deg, var(--tb1-success-deep, #059669), var(--tb1-success, #10B981));
    color: #fff;
    box-shadow: 0 12px 24px -14px var(--tb1-success-deep, #059669);
}
body.admission-theme.al-scope :is(.btn-primary, .btn-green, .btn-upload):hover { filter: brightness(1.08); }
body.admission-theme.al-scope :is(.btn, .btn-upload):hover i.fa-arrow-right { transform: translateX(3px); }
body.admission-theme.al-scope :is(.btn, .btn-upload):hover i.fa-arrow-left { transform: translateX(-3px); }
body.admission-theme.al-scope :is(.btn, .btn-upload):disabled { opacity: .55; cursor: not-allowed; filter: none; }
body.admission-theme.al-scope .btn-sm { min-height: 42px; padding: 0 16px; font-size: var(--tb1-fs-sm, 1rem); }

/* ── หน้าสมัคร: แถบขั้นตอน ────────────────────────────────────────────────── */
body.admission-theme.al-scope .admission-form-help {
    border: 0;
    background: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 10px;
    padding: 0 4px;
    color: var(--al-muted);
    font-size: var(--tb1-fs-xs, .875rem);
}
body.admission-theme.al-scope .admission-form-help strong { color: var(--al-ink-2); }
body.admission-theme.al-scope .admission-form-help i { color: var(--al-brand); }
body.admission-theme.al-scope .wizard-wrap { margin: 0 0 14px; padding: 0; }
body.admission-theme.al-scope .wizard-bar {
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--tb1-surface-veil, rgba(255, 255, 255, .92));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -24px rgba(15, 23, 42, .35);
}
body.admission-theme.al-scope .wz-step { padding: 8px 10px; border-radius: 13px; transition: background-color .3s ease; }
body.admission-theme.al-scope .wz-num {
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--al-surface-alt);
    color: var(--al-muted);
    font-weight: 700;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
body.admission-theme.al-scope .wz-label { color: var(--al-muted); font-weight: 600; }
body.admission-theme.al-scope .wz-step.active { background: var(--al-brand-50); }
body.admission-theme.al-scope .wz-step.active .wz-num { background: var(--al-brand); color: var(--tb1-on-brand, #fff); box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
body.admission-theme.al-scope .wz-step.active .wz-label { color: var(--al-brand); }
body.admission-theme.al-scope .wz-step.done .wz-num { background: var(--tb1-success, #10B981); color: #fff; box-shadow: none; }
body.admission-theme.al-scope .wz-step.done .wz-label { color: var(--tb1-text-success, #047857); }

/* ── ข้อความแจ้ง ────────────────────────────────────────────────────────── */
body.admission-theme.al-scope .info-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: none;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--al-brand-100);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand-50);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.6;
}
body.admission-theme.al-scope .info-bar > i { margin-top: 3px; color: var(--al-brand); font-size: 1rem; }
body.admission-theme.al-scope .info-bar.admission-availability {
    border-color: rgba(245, 158, 11, .45);
    background: var(--tb1-warning-bg, #FEF3C7);
    color: var(--al-ink-2);
}
body.admission-theme.al-scope .info-bar.admission-availability > i { color: var(--tb1-text-warning, #B45309); }
body.admission-theme.al-scope .admission-inline-error {
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid rgba(239, 68, 68, .4);
    border-radius: var(--tb1-radius-md, 16px);
    background: rgba(239, 68, 68, .08);
    color: var(--tb1-text-danger, #DC2626);
    font-size: var(--tb1-fs-sm, 1rem);
}

/* ── เลือกระดับชั้นและแผนการเรียน (การ์ดเลือกได้) ──────────────────────────── */
body.admission-theme.al-scope .lvl-row { gap: 12px; }
body.admission-theme.al-scope :is(.lvl, .prog) {
    position: relative;
    border: 1.5px solid var(--al-border);
    background: var(--al-surface);
    backdrop-filter: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
body.admission-theme.al-scope .lvl {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--tb1-radius-md, 16px);
    text-align: left;
}
body.admission-theme.al-scope .lvl::before { display: none; }
body.admission-theme.al-scope :is(.lvl, .prog):hover { border-color: var(--tb1-brand-300, #93C5FD); transform: none; box-shadow: 0 10px 24px -20px var(--al-brand); }
body.admission-theme.al-scope :is(.lvl, .prog).on {
    border-color: var(--al-brand);
    background: var(--al-brand-50);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
body.admission-theme.al-scope :is(.lvl, .prog).on::after {
    content: '\f00c';
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .7rem;
}
body.admission-theme.al-scope .lvl-emoji {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-size: var(--tb1-fs-lg, 1.25rem);
    transition: transform .3s var(--al-ease);
}
body.admission-theme.al-scope .lvl.on .lvl-emoji { background: var(--al-brand); color: var(--tb1-on-brand, #fff); }
body.admission-theme.al-scope .lvl:hover .lvl-emoji { transform: rotate(-6deg) scale(1.06); }
body.admission-theme.al-scope .lvl-name { font-family: var(--al-display); font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; color: var(--al-ink); }
body.admission-theme.al-scope .lvl.on .lvl-name { color: var(--al-brand); }
body.admission-theme.al-scope .lvl-sub { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }
body.admission-theme.al-scope .prog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 10px;
    max-height: none;
    overflow: visible;
    padding: 0;
}
body.admission-theme.al-scope .prog {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 40px 12px 14px;
    border-radius: var(--tb1-radius-md, 16px);
    opacity: 1;
}
/* วงกลมเลือกของเดิมซ่อนไว้ (ยังกดด้วยคีย์บอร์ดได้) การ์ดทั้งใบแสดงว่าเลือกแล้ว/กำลังโฟกัสแทน */
body.admission-theme.al-scope :is(.lvl, .prog) input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
body.admission-theme.al-scope :is(.lvl, .prog):has(input:focus-visible) { outline: 3px solid var(--al-accent); outline-offset: 2px; }
body.admission-theme.al-scope .prog-emoji {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tb1-radius-sm, 10px);
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-size: var(--tb1-fs-md, 1.125rem);
}
body.admission-theme.al-scope .prog.on .prog-emoji { background: var(--al-brand); color: var(--tb1-on-brand, #fff); }
body.admission-theme.al-scope .prog-name { color: var(--al-ink); font-size: var(--tb1-fs-sm, 1rem); font-weight: 700; line-height: 1.4; }
body.admission-theme.al-scope .prog-en { color: var(--al-brand); font-size: var(--tb1-fs-xs, .875rem); line-height: 1.4; }
body.admission-theme.al-scope .prog-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 4px 6px 0 0;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--tb1-warning-bg, #FEF3C7);
    color: var(--tb1-text-warning, #B45309);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
}
body.admission-theme.al-scope .auto-block {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px;
    border: 1.5px solid var(--al-brand);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand-50);
    text-align: center;
}
body.admission-theme.al-scope .auto-block .emoji {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    font-size: 1.3rem;
}
body.admission-theme.al-scope .auto-block h3 { margin: 4px 0 0; color: var(--al-ink); font-family: var(--al-display); font-size: var(--tb1-fs-lg, 1.25rem); }
body.admission-theme.al-scope .auto-block p { margin: 0; color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); }
body.admission-theme.al-scope .auto-block .pill { background: rgba(16, 185, 129, .14); color: var(--tb1-text-success, #047857); }
body.admission-theme.al-scope .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px dashed var(--tb1-brand-300, #93C5FD);
    border-radius: var(--tb1-radius-sm, 10px);
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-family: inherit;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
body.admission-theme.al-scope .copy-btn:hover { border-style: solid; border-color: var(--al-brand); }

/* ── อัปโหลดเอกสาร ─────────────────────────────────────────────────────── */
body.admission-theme.al-scope .upload-grid { gap: 12px; }
body.admission-theme.al-scope :is(.uz, .upload-zone) {
    position: relative;
    padding: 16px 12px;
    border: 1.5px dashed var(--tb1-brand-300, #93C5FD);
    border-radius: var(--tb1-radius-md, 16px);
    background: linear-gradient(180deg, var(--al-brand-50), var(--al-surface));
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.admission-theme.al-scope .uz { min-height: 132px; }
body.admission-theme.al-scope :is(.uz, .upload-zone):hover { border-color: var(--al-brand); transform: none; box-shadow: 0 12px 26px -20px var(--al-brand); }
body.admission-theme.al-scope :is(.uz, .upload-zone) .uz-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    border-radius: 14px;
    background: var(--al-surface);
    color: var(--al-brand);
    font-size: 1.2rem;
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .4);
    transition: transform .3s var(--al-ease);
}
body.admission-theme.al-scope :is(.uz, .upload-zone):hover .uz-icon { transform: translateY(-3px); }
body.admission-theme.al-scope .uz-label { color: var(--al-ink); font-size: var(--tb1-fs-sm, 1rem); font-weight: 600; overflow-wrap: anywhere; }
body.admission-theme.al-scope .uz-hint { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }
body.admission-theme.al-scope .uz.ok { border-style: solid; border-color: var(--tb1-success, #10B981); background: rgba(16, 185, 129, .08); }
body.admission-theme.al-scope .uz.ok .uz-icon { background: var(--tb1-success, #10B981); color: #fff; }
body.admission-theme.al-scope .terms-card {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface-alt);
    box-shadow: none;
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.6;
}
body.admission-theme.al-scope .terms-card label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
body.admission-theme.al-scope .terms-card input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--al-brand); }
body.admission-theme.al-scope .nav-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 14px 0 0;
    border-top: 1px solid var(--al-border);
}

/* ── หน้าตรวจสถานะ ─────────────────────────────────────────────────────── */
body.admission-theme.al-scope .search-row { gap: 12px; }
body.admission-theme.al-scope .status-search-button { min-height: 46px; margin-top: calc(1.32rem + 5px); }
body.admission-theme.al-scope .alert { border-radius: var(--tb1-radius-sm, 10px); }
body.admission-theme.al-scope .result-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--al-border); }
body.admission-theme.al-scope .sect-head { color: var(--al-ink); font-family: var(--al-display); font-weight: 700; }
body.admission-theme.al-scope .sect-head i { color: var(--al-brand); }
body.admission-theme.al-scope .admission-next-action {
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--al-brand-100);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand-50);
}
body.admission-theme.al-scope .info-item { border: 1px solid var(--al-border); border-radius: var(--tb1-radius-md, 16px); background: var(--al-surface-alt); }
body.admission-theme.al-scope .info-item:hover { transform: none; }
body.admission-theme.al-scope :is(.prog-sec, .upload-sec) { border: 1px solid var(--al-border); border-radius: var(--tb1-radius-md, 16px); background: var(--al-surface-alt); }
body.admission-theme.al-scope .tl-item { border: 1px solid var(--al-border); border-radius: var(--tb1-radius-md, 16px); background: var(--al-surface); }
body.admission-theme.al-scope .tl-item:hover { transform: none; }
body.admission-theme.al-scope .tl-item.done { border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .06); }
body.admission-theme.al-scope .tl-item.active { border-color: var(--al-brand); background: var(--al-brand-50); }
body.admission-theme.al-scope .tl-item.error { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .06); }
body.admission-theme.al-scope .tl-icon { border-radius: 50%; }
body.admission-theme.al-scope .action-row { border-top: 1px solid var(--al-border); }
body.admission-theme.al-scope .btn-upload { width: 100%; margin-top: 12px; }
body.admission-theme.al-scope .contact-foot,
body.admission-theme.al-scope .footer-contact { margin-top: 14px; color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); text-align: center; }
body.admission-theme.al-scope :is(.contact-foot, .footer-contact) a { color: var(--al-brand); font-weight: 600; text-decoration: none; }
body.admission-theme.al-scope :is(.contact-foot, .footer-contact) a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── หน้าส่งใบสมัครสำเร็จ ──────────────────────────────────────────────── */
body.admission-theme.al-scope.admission-thanks .main-content { max-width: 860px; margin: 0 auto; padding: clamp(14px, 2vw, 22px) 16px clamp(28px, 4vw, 44px); }
body.admission-theme.al-scope.admission-thanks .card {
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
}
body.admission-theme.al-scope.admission-thanks .card-body { padding: clamp(18px, 3vw, 26px); }
body.admission-theme.al-scope.admission-thanks .app-number-box {
    margin-bottom: 18px;
    padding: 18px;
    border: 1.5px dashed var(--tb1-brand-300, #93C5FD);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-brand-50);
    text-align: center;
}
body.admission-theme.al-scope.admission-thanks .app-number-label { color: var(--al-ink-2); font-weight: 600; }
body.admission-theme.al-scope.admission-thanks .app-number-value {
    margin: 4px 0;
    color: var(--al-brand-strong);
    font-family: var(--tb1-font-mono, ui-monospace, monospace);
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 700;
    letter-spacing: .04em;
}
body.admission-theme.al-scope.admission-thanks .app-number-hint { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }
body.admission-theme.al-scope.admission-thanks .section-title { margin: 0 0 10px; color: var(--al-ink); font-family: var(--al-display); font-weight: 700; }
body.admission-theme.al-scope.admission-thanks .section-title i { color: var(--al-brand); }
body.admission-theme.al-scope.admission-thanks .steps-list { display: grid; gap: 8px; }
body.admission-theme.al-scope.admission-thanks .step-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface-alt);
}
body.admission-theme.al-scope.admission-thanks .step-number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    font-weight: 700;
}
body.admission-theme.al-scope.admission-thanks .step-title { color: var(--al-ink); font-weight: 700; }
body.admission-theme.al-scope.admission-thanks .step-desc { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }
body.admission-theme.al-scope.admission-thanks .action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
body.admission-theme.al-scope.admission-thanks .notice {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--tb1-warning-bg, #FEF3C7);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
}
body.admission-theme.al-scope.admission-thanks .notice > i { margin-top: 3px; color: var(--tb1-text-warning, #B45309); }

/* ══ ภาพเคลื่อนไหว ════════════════════════════════════════════════════════
   เปลี่ยนขั้นในแบบฟอร์ม: ขั้นใหม่เลื่อนเข้าจากขวา การ์ดในขั้นทยอยขึ้น · เลือกระดับ/แผน: เครื่องหมายถูกเด้ง
   แผนการเรียนทยอยขึ้นทีละใบ · แนบไฟล์สำเร็จ: ไอคอนเด้ง · ผลตรวจสถานะ: ข้อมูลและไทม์ไลน์ทยอยขึ้น
   ส่งใบสมัครสำเร็จ: วงกลมถูกเด้งพร้อมวงแสง เลขที่ใบสมัครเด่นขึ้น ขั้นตอนต่อไปทยอยขึ้น */
@keyframes al-step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes al-ring { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: no-preference) {
    body.admission-theme.al-scope .step-content.active { animation: al-step-in .45s var(--al-ease) both; }
    body.admission-theme.al-scope .step-content.active > .gc { animation: al-rise .55s var(--al-ease) both; }
    body.admission-theme.al-scope .step-content.active > .gc:nth-of-type(2) { animation-delay: .08s; }
    body.admission-theme.al-scope .step-content.active > .gc:nth-of-type(3) { animation-delay: .16s; }
    body.admission-theme.al-scope :is(.lvl, .prog).on::after { animation: al-pop .4s var(--al-ease) both; }
    body.admission-theme.al-scope .prog { animation: al-rise .45s var(--al-ease) both; animation-delay: 0s; }
    body.admission-theme.al-scope .prog:nth-child(2) { animation-delay: .03s; }
    body.admission-theme.al-scope .prog:nth-child(3) { animation-delay: .06s; }
    body.admission-theme.al-scope .prog:nth-child(4) { animation-delay: .09s; }
    body.admission-theme.al-scope .prog:nth-child(5) { animation-delay: .12s; }
    body.admission-theme.al-scope .prog:nth-child(6) { animation-delay: .15s; }
    body.admission-theme.al-scope .prog:nth-child(n+7) { animation-delay: .18s; }
    body.admission-theme.al-scope .auto-block { animation: al-card-in .5s var(--al-ease) both; }
    body.admission-theme.al-scope .uz.ok .uz-icon { animation: al-pop .45s var(--al-ease) both; }
    body.admission-theme.al-scope .wizard-wrap { animation: al-rise .7s var(--al-ease) .35s both; }
    body.admission-theme.al-scope .page-wrap > :is(.info-bar, .admission-form-help) { animation: al-rise .6s var(--al-ease) .3s both; }
    body.admission-theme.al-scope .main-area > .gc { animation: al-rise .7s var(--al-ease) .35s both; }
    body.admission-theme.al-scope .result-section.show { animation: al-rise .5s var(--al-ease) both; }
    body.admission-theme.al-scope .result-section.show :is(.info-item, .tl-item) { animation: al-rise .5s var(--al-ease) both; }
    body.admission-theme.al-scope .result-section.show :is(.info-item, .tl-item):nth-child(2) { animation-delay: .07s; }
    body.admission-theme.al-scope .result-section.show :is(.info-item, .tl-item):nth-child(3) { animation-delay: .14s; }
    body.admission-theme.al-scope .result-section.show .info-item:nth-child(4) { animation-delay: .21s; }
    body.admission-theme.al-scope .upload-sec.show { animation: al-card-in .5s var(--al-ease) both; }
    .al-page-badge { animation: al-pop .7s var(--al-ease) .1s both; }
    .al-page-badge::after { animation: al-ring 1.8s ease-out .8s 3; }
    body.admission-theme.al-scope.admission-thanks .card { animation: al-card-in .7s var(--al-ease) .4s both; }
    body.admission-theme.al-scope.admission-thanks .app-number-value { animation: al-pop .6s var(--al-ease) .9s both; }
    body.admission-theme.al-scope.admission-thanks .step-item { animation: al-rise .5s var(--al-ease) both; }
    body.admission-theme.al-scope.admission-thanks .step-item:nth-child(1) { animation-delay: 1s; }
    body.admission-theme.al-scope.admission-thanks .step-item:nth-child(2) { animation-delay: 1.1s; }
    body.admission-theme.al-scope.admission-thanks .step-item:nth-child(3) { animation-delay: 1.2s; }
}

/* ── ขนาดจอ ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .al-page-head.has-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .al-page-title.al-title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); }
    .al-page-facts { padding: 12px 14px; font-size: var(--tb1-fs-xs, .875rem); }
    .al-page-badge { width: 54px; height: 54px; font-size: 1.35rem; }
    body.admission-theme.al-scope .gc-head { padding: 12px 14px 0; }
    body.admission-theme.al-scope .gc-body { padding: 12px 14px 14px; }
    body.admission-theme.al-scope .wz-step { padding: 6px 2px; }
    body.admission-theme.al-scope .wz-num { width: 28px; height: 28px; }
    /* ปุ่มย้อนกลับ/ถัดไปติดขอบล่างจอระหว่างกรอกบนมือถือ */
    body.admission-theme.al-scope .nav-row {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 8px -14px 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--al-border);
        background: var(--tb1-surface-veil, rgba(255, 255, 255, .94));
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    body.admission-theme.al-scope .nav-row .btn { flex: 1 1 0; padding: 0 12px; }
    body.admission-theme.al-scope .status-search-button { margin-top: 2px; }
}

@media print {
    .al-top, .al-progress { display: none !important; }
}