/* ═════════════════════════════════════════════════════════════════════════════
   หน้าแรกระบบรับสมัคร (admission/index.php) · 24 ต.ค. 2569
   ทุกสีและฟอนต์อ่านจากชุดกลางของเว็บ (includes/tb1_theme.php, fonts/tb1-fonts.css)
   จึงเปลี่ยนตามโหมดมืดและขนาดตัวอักษรที่ผู้ใช้เลือกเอง · ชื่อคลาสขึ้นต้น al- ไม่ชนกับหน้าอื่น
   รอบสอง (ครูหนึ่ง: "padding ยังห่างมากเกินไป ... เพิ่มเติม แอนิเมชั่น ให้น่าสนใจ"):
     ระยะห่างทุกส่วนลดลงราวหนึ่งในสาม · ภาพเคลื่อนไหวทั้งหมดอยู่ในหัวข้อ "ภาพเคลื่อนไหว" ท้ายไฟล์
     ใช้ transform/opacity เท่านั้น (ลื่นบนแท็บเล็ตของโรงเรียน) และไม่ทำงานเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว
   ═════════════════════════════════════════════════════════════════════════════ */

/* ตัวแปรของหน้า: .al-dock (ปุ่มสมัครติดขอบล่างจอ) อยู่นอก <main class="al"> จึงต้องได้ชุดเดียวกัน
   .al-scope = <body> ของหน้าสมัคร ตรวจสถานะ ส่งใบสมัครสำเร็จ (admission-public.css ใช้ตัวแปรชุดนี้กับแบบฟอร์มเดิม)
   .admission-admin-ui = <body> ของหน้าผู้ดูแล (admission-admin-theme.css) */
:is(.al, .al-dock, .al-scope, .admission-admin-ui) {
    --al-ink: var(--tb1-ink-1, #0F172A);
    --al-ink-2: var(--tb1-ink-2, #334155);
    --al-muted: var(--tb1-ink-3, #5A697F);
    --al-brand: var(--tb1-brand, #1D4ED8);
    --al-brand-strong: var(--tb1-brand-strong, #1E3A8A);
    --al-brand-50: var(--tb1-brand-50, #EFF6FF);
    --al-brand-100: var(--tb1-brand-100, #DBEAFE);
    --al-accent: var(--tb1-accent, #0EA5E9);
    --al-page: var(--tb1-page, #F8FAFC);
    --al-surface: var(--tb1-surface, #FFFFFF);
    --al-surface-alt: var(--tb1-surface-alt, #F1F5F9);
    --al-border: var(--tb1-border, #E2E8F0);
    --al-border-bold: var(--tb1-border-bold, #CBD5E1);
    --al-display: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    --al-radius: var(--tb1-radius-md, 16px);
    --al-ease: cubic-bezier(.2, .7, .2, 1);
    --al-section-y: clamp(40px, 5vw, 64px);
    /* ระยะจากเมนูเว็บด้านบนถึงแถบ "ระบบรับสมัครนักเรียน" ในส่วนหัว: ปรับค่านี้ค่าเดียว (0 = ชิดเมนูเว็บ) */
    --al-menu-top: 12px;
    /* ★ 28 ต.ค. 2569: เงาและมุมชุดเดียวกับทั้งเว็บ (includes/tb1_theme.php) */
    --al-shadow: var(--tb1-shadow-card, 0 0 16px rgba(15, 23, 42, .05));
    --al-shadow-lg: 0 24px 48px -30px rgba(15, 23, 42, .45);
}
.al {
    display: block;
    color: var(--al-ink);
    background: var(--al-page);
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.7;
    overflow-x: clip;
}
.al *, .al *::before, .al *::after { box-sizing: border-box; }
.al :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.al :is(h1, h2, h3, h4) { font-family: var(--al-display); color: var(--tb1-heading, var(--al-ink)); }
.al a { color: inherit; }
.al :is(a, button, summary):focus-visible { outline: 3px solid var(--al-accent); outline-offset: 3px; border-radius: var(--tb1-radius-sm, 10px); }

.al-wrap {
    width: min(var(--tb1-page-max-width, 1280px), calc(100% - 2 * max(16px, var(--tb1-shell-gutter, 24px))));
    margin-inline: auto;
}

/* แถบความคืบหน้าการอ่านบนสุดของจอ (สคริปต์ตั้ง --p) */
.al-progress { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.al-progress > span {
    display: block;
    height: 100%;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--tb1-brand, #1D4ED8), var(--tb1-accent, #0EA5E9));
}

/* ── ปุ่ม ─────────────────────────────────────────────────────────────────── */
.al-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid var(--al-border-bold);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface);
    color: var(--al-ink);
    font-weight: 600;
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
.al-btn i { font-size: .95em; transition: transform .25s var(--al-ease); }
.al-btn:hover { border-color: var(--al-brand); color: var(--al-brand); }
.al-btn:hover i { transform: translateX(2px) scale(1.08); }
.al-btn.is-primary {
    border-color: transparent;
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    box-shadow: 0 12px 24px -14px var(--al-brand);
}
.al-btn.is-primary:hover { color: var(--tb1-on-brand, #fff); filter: brightness(1.08); box-shadow: 0 16px 30px -14px var(--al-brand); }
.al-btn.is-primary::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: translateX(-160%) skewX(-20deg);
    pointer-events: none;
}

/* ── ① หัวหน้า: สถานะและช่วงรับสมัคร ───────────────────────────────────────── */
.al-hero {
    position: relative;
    padding: var(--al-menu-top) 0 clamp(24px, 3vw, 36px);
    background:
        radial-gradient(60% 70% at 0% 0%, var(--al-brand-50), transparent 70%),
        var(--al-page);
    border-bottom: 1px solid var(--al-border);
    overflow: clip;
}
.al-hero > .al-wrap { position: relative; z-index: 1; }
.al-hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.al-hero-deco span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--c), transparent 68%);
}
.al-hero-deco span:nth-child(1) { --c: rgba(59, 130, 246, .16); width: 520px; height: 520px; top: -180px; left: -140px; }
.al-hero-deco span:nth-child(2) { --c: rgba(14, 165, 233, .14); width: 440px; height: 440px; top: -60px; right: -120px; }
.al-hero-deco span:nth-child(3) { --c: rgba(245, 158, 11, .10); width: 360px; height: 360px; bottom: -160px; left: 38%; }
/* เมนูระบบรับสมัครในส่วนหัว (รอบสาม: แทนแถบ admission_public_nav ที่อยู่ใต้เมนูเว็บ) */
.al-subnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: clamp(20px, 3vw, 32px);
    padding: 8px 8px 8px 10px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-lg, 22px);
    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 -22px rgba(15, 23, 42, .35);
}
.al-subnav-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding-right: 6px;
    text-decoration: none;
}
.al-subnav-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--tb1-banner-1, #1D4ED8), var(--tb1-banner-3, #60A5FA));
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 10px 20px -12px var(--tb1-banner-1, #1D4ED8);
}
.al-subnav-copy { display: grid; line-height: 1.35; }
.al-subnav-title { font-family: var(--al-display); font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; color: var(--al-ink); }
.al-subnav-sub { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); }
.al-subnav-links { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.al-subnav-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.al-subnav-links a i { font-size: .92em; transition: transform .25s var(--al-ease); }
.al-subnav-links a:hover { background: var(--al-brand-50); color: var(--al-brand); }
.al-subnav-links a:hover i { transform: translateY(-1px) scale(1.1); }
.al-subnav-links a.is-current { background: var(--al-brand-50); color: var(--al-brand); box-shadow: inset 0 0 0 1px var(--al-brand-100); }
.al-subnav-links a.is-primary { background: var(--al-brand); color: var(--tb1-on-brand, #fff); box-shadow: 0 10px 20px -12px var(--al-brand); }
.al-subnav-links a.is-primary:hover { filter: brightness(1.08); }

.al-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
}
.al-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 10px;
    border: 1px solid var(--al-border);
    border-radius: 999px;
    background: var(--al-surface);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.al-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--tb1-ink-4, #94A3B8);
}
.al-pulse.is-open { background: var(--tb1-success, #10B981); }
.al-pulse:is(.is-soon, .is-next) { background: var(--al-accent); }
.al-pulse.is-paused { background: var(--tb1-warning, #F59E0B); }
.al-pulse:is(.is-open, .is-soon, .is-next)::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    color: var(--al-accent);
    opacity: 0;
}
.al-pulse.is-open::after { color: var(--tb1-success, #10B981); }
.al-title {
    margin-top: 16px;
    font-size: var(--tb1-fs-hero, clamp(2rem, 1.05rem + 3.1vw, 3.75rem));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.al-title-line { display: block; }
.al-title-accent {
    display: block;
    color: var(--al-brand-strong);
    background: linear-gradient(100deg, var(--al-brand-strong) 0%, var(--al-brand) 25%, var(--tb1-accent-strong, #0284C7) 50%, var(--al-brand) 75%, var(--al-brand-strong) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: .08em; /* ไม่ตัดสระล่างของอักษรไทยใต้ไล่สี */
}
.al-nowrap { white-space: nowrap; }
.al-lead {
    margin-top: 14px;
    max-width: 34em;
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.7;
    text-wrap: pretty;
}
.al-lead strong { color: var(--al-ink); font-weight: 700; }
.al-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.al-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 22px;
    padding: 14px 0 0;
    border-top: 1px solid var(--al-border);
    list-style: none;
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
}
.al-trust li { display: inline-flex; align-items: center; gap: 8px; }
.al-trust i { color: var(--al-brand); }
.al-trust i.is-gold { color: var(--tb1-warning-deep, #D97706); }

.al-hero-media { position: relative; padding: 0 0 30px 28px; }
.al-hero-media::before {
    content: '';
    position: absolute;
    inset: 18px -14px 48px 48px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--al-brand-100), transparent 75%);
}
.al-photo {
    position: relative;
    z-index: 1;
    aspect-ratio: 5 / 4;
    border-radius: 26px;
    overflow: hidden;
    background: var(--al-surface-alt);
    box-shadow: var(--al-shadow-lg);
}
.al-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.al-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .28));
    pointer-events: none;
}
.al-status {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    width: min(380px, 86%);
    padding: 18px 20px;
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: var(--al-shadow-lg);
}
.al-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 10px;
    border-radius: 999px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--al-ink-2);
    background: var(--al-surface-alt);
}
.al-status.is-open .al-chip { color: var(--tb1-text-success, #047857); background: rgba(16, 185, 129, .14); }
.al-status:is(.is-soon, .is-next) .al-chip { color: var(--tb1-text-info, #0E7490); background: rgba(14, 165, 233, .14); }
.al-status.is-paused .al-chip { color: var(--tb1-text-warning, #B45309); background: rgba(245, 158, 11, .16); }
.al-status-title {
    margin-top: 10px;
    font-family: var(--al-display);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
}
.al-status-range {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    color: var(--al-brand);
    font-weight: 600;
    font-size: var(--tb1-fs-sm, 1rem);
}
.al-status-detail { margin-top: 6px; color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); line-height: 1.6; }
.al-status-prev {
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--al-border);
    color: var(--al-muted);
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.5;
}
.al-status-prev a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--al-brand);
    font-weight: 600;
    text-decoration: none;
}
.al-status-prev a:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-meters { display: grid; gap: 8px; margin-top: 14px; padding: 12px 0 0; border-top: 1px solid var(--al-border); list-style: none; }
.al-meters li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--tb1-fs-xs, .875rem); }
.al-meter-label { font-weight: 700; }
.al-meter { height: 8px; border-radius: 999px; background: var(--al-surface-alt); overflow: hidden; }
.al-meter > span {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--al-brand), var(--al-accent));
    transform-origin: 0 50%;
}
.al-meter-value { color: var(--al-muted); font-variant-numeric: tabular-nums; }

.al-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-top: clamp(24px, 3vw, 36px);
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
    overflow: hidden;
}
.al-facts > div { padding: 16px 22px; border-left: 1px solid var(--al-border); }
.al-facts > div:first-child { border-left: 0; }
.al-facts dt { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-facts dd {
    margin-top: 2px;
    font-family: var(--al-display);
    font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--al-ink);
    font-variant-numeric: tabular-nums;
}
.al-facts small { font-family: var(--tb1-font-body, inherit); font-size: max(var(--tb1-fs-xs, .875rem), .55em); font-weight: 600; color: var(--al-muted); }

/* ── หัวข้อของแต่ละส่วน ─────────────────────────────────────────────────── */
.al-section { padding: var(--al-section-y) 0; }
.al-section-alt { background: var(--al-surface); border-block: 1px solid var(--al-border); }
.al-head { max-width: 720px; margin: 0 auto clamp(20px, 2.5vw, 28px); text-align: center; }
.al-head.is-left { margin: 0; text-align: left; }
.al-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--al-brand);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
}
.al-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: right center; }
.al-kicker.is-light { color: rgba(255, 255, 255, .86); }
.al-head h2 {
    margin-top: 6px;
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}
.al-head > p:not(.al-kicker) { margin-top: 8px; color: var(--al-muted); text-wrap: pretty; }
.al-head > p.al-refnote {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: var(--tb1-radius-sm, 10px);
    background: var(--al-brand-50);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    text-align: left;
}
.al-refnote i { color: var(--al-brand); }
.al-head .al-btn { margin-top: 18px; }

/* ── ② ระดับชั้นและแผนการเรียน ──────────────────────────────────────────── */
.al-level + .al-level { margin-top: clamp(28px, 3.5vw, 40px); }
.al-level-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--al-border);
}
.al-level-badge {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: var(--tb1-radius-md, 16px);
    background: linear-gradient(140deg, var(--tb1-banner-1, #1D4ED8), var(--tb1-banner-3, #60A5FA));
    color: #fff;
    font-family: var(--al-display);
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow: 0 14px 28px -16px var(--tb1-banner-1, #1D4ED8);
}
.al-level-copy h3 { font-size: var(--tb1-fs-xl, 1.5rem); font-weight: 700; line-height: 1.35; }
.al-level-copy p { margin-top: 2px; color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); }
.al-level-meta { display: flex; gap: 8px; }
.al-level-meta > div {
    min-width: 104px;
    padding: 8px 14px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface);
}
.al-level-meta dt { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-level-meta dd { font-family: var(--al-display); font-size: var(--tb1-fs-lg, 1.25rem); font-weight: 700; font-variant-numeric: tabular-nums; }

.al-programs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.al-programs.is-collapsed > li:nth-child(n+7) { display: none; }
.al-prog {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--al-border);
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.al-programs.is-single { grid-template-columns: minmax(0, 1fr); }
.al-programs.is-single .al-prog { padding: 20px 24px; }
.al-prog-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-size: 1.15rem;
}
.al-prog-no { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-prog-title { margin-top: 1px; font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; line-height: 1.45; }
.al-prog-en { margin-top: 1px; color: var(--al-brand); font-size: var(--tb1-fs-xs, .875rem); font-weight: 500; line-height: 1.45; }
.al-prog-desc { margin-top: 8px; color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); line-height: 1.6; }
.al-prog-subs { margin-top: 6px; color: var(--al-ink-2); font-size: var(--tb1-fs-sm, 1rem); }
.al-prog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.al-prog.is-full { background: var(--al-surface-alt); }
.al-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--al-surface-alt);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.al-tag.is-note { background: var(--tb1-warning-bg, #FEF3C7); color: var(--tb1-text-warning, #B45309); }
.al-tag.is-full { background: rgba(239, 68, 68, .12); color: var(--tb1-text-danger, #DC2626); }
.al-tag.is-required { background: var(--al-brand-50); color: var(--al-brand); }
.al-more {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 16px auto 0;
    padding: 0 22px;
    border: 1px solid var(--al-border-bold);
    border-radius: 999px;
    background: var(--al-surface);
    color: var(--al-ink);
    font: inherit;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.al-more:hover { border-color: var(--al-brand); color: var(--al-brand); box-shadow: 0 8px 20px -14px var(--al-brand); }
.al-more i { transition: transform .3s var(--al-ease); }
.al-more[aria-expanded="true"] i { transform: rotate(180deg); }
.al-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--tb1-radius-md, 16px);
    background: var(--al-surface-alt);
    color: var(--al-ink-2);
}
.al-empty i { color: var(--al-brand); }

/* ── ลิงก์รายวิชาของระดับชั้น (หัวการ์ด ม.1/ม.4) ─────────────────────────── */
.al-level-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-top: 2px;
    color: var(--al-brand);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    text-decoration: none;
}
.al-level-link i:last-child { font-size: .8em; transition: transform .25s var(--al-ease); }
.al-level-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-level-link:hover i:last-child { transform: translateX(3px); }

/* ── ②½ หลักสูตรการศึกษา (ข้อมูลจาก course_st.php) ─────────────────────────
   ต่อจากส่วนแผนการเรียน (พื้นเดียวกัน คั่นด้วยเส้น) · ทั้งการ์ดกดได้ (ลิงก์ยืดเต็มการ์ดด้วย ::after) */
.al-curriculum { border-top: 1px solid var(--al-border); }
.al-curriculum .al-head .al-btn { margin-top: 16px; }
.al-cur-stage {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: clamp(18px, 2.5vw, 26px) 0 12px;
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 700;
}
.al-cur-stage small { color: var(--al-muted); font-family: var(--tb1-font-body, inherit); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-cur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.al-cur-grid.is-single { grid-template-columns: minmax(0, 560px); }
.al-cur {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 14px;
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s ease, box-shadow .25s ease;
}
.al-cur:hover { border-color: var(--tb1-brand-300, #93C5FD); box-shadow: 0 16px 34px -24px var(--al-brand); }
.al-cur:focus-within { outline: 3px solid var(--al-accent); outline-offset: 2px; }
.al-cur-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.al-cur-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-size: 1.1rem;
    transition: transform .3s var(--al-ease), background-color .2s ease, color .2s ease;
}
.al-cur:hover .al-cur-icon { transform: rotate(-6deg) scale(1.06); background: var(--al-brand); color: var(--tb1-on-brand, #fff); }
.al-cur-title { margin-top: 12px; font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; line-height: 1.4; }
.al-cur-focus { margin-top: 1px; color: var(--al-brand); font-size: var(--tb1-fs-sm, 1rem); font-weight: 600; line-height: 1.45; }
.al-cur-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
    padding: 10px 0;
    border-block: 1px dashed var(--al-border);
}
.al-cur-meta dt { color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; line-height: 1.4; }
.al-cur-meta dd { font-family: var(--al-display); font-size: var(--tb1-fs-md, 1.125rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.al-cur-meta small { color: var(--al-muted); font-family: var(--tb1-font-body, inherit); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-cur-sub { margin-top: 10px; color: var(--al-muted); font-size: var(--tb1-fs-xs, .875rem); font-weight: 600; }
.al-cur-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.al-cur-chips li {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--al-surface-alt);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 500;
    line-height: 1.6;
}
.al-cur-chips li.is-more { background: transparent; color: var(--al-muted); }
.al-cur-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--al-brand);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    text-decoration: none;
}
.al-cur-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.al-cur-link:focus-visible { outline: none; }
.al-cur-link i { font-size: .8em; transition: transform .25s var(--al-ease); }
.al-cur:hover .al-cur-link i { transform: translateX(4px); }

/* ── ③ ขั้นตอน ──────────────────────────────────────────────────────────── */
.al-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.al-steps::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--al-brand), var(--al-accent));
    opacity: .45;
    transform-origin: 0 50%;
}
.al-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 18px;
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-page);
}
.al-step-no {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--al-brand);
    color: var(--tb1-on-brand, #fff);
    font-family: var(--al-display);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 700;
    box-shadow: 0 0 0 6px var(--al-page), 0 10px 20px -12px var(--al-brand);
}
.al-steps h3 { margin-top: 14px; font-size: var(--tb1-fs-lg, 1.25rem); font-weight: 700; line-height: 1.45; }
.al-steps p { margin-top: 6px; color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); line-height: 1.6; }
.al-steps a, .al-step-note { margin-top: auto; padding-top: 10px; font-size: var(--tb1-fs-sm, 1rem); font-weight: 600; }
.al-steps a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--al-brand); text-decoration: none; }
.al-steps a i { transition: transform .25s var(--al-ease); }
.al-steps a:hover { text-decoration: underline; text-underline-offset: 4px; }
.al-steps a:hover i { transform: translateX(4px); }
.al-step-note { color: var(--al-muted); }
.al-code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--al-surface-alt);
    color: var(--al-ink);
    font-family: var(--tb1-font-mono, ui-monospace, monospace);
    font-size: .88em;
    white-space: nowrap;
}

/* ── ④ เอกสาร ──────────────────────────────────────────────────────────── */
.al-docs { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.al-card {
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
}
.al-card h3 { display: flex; align-items: center; gap: 12px; font-size: var(--tb1-fs-lg, 1.25rem); font-weight: 700; }
.al-card h3 i { color: var(--al-brand); }
.al-doclist { margin-top: 6px; padding: 0; list-style: none; }
.al-doclist li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed var(--al-border);
}
.al-doclist li:last-child { border-bottom: 0; }
.al-doc-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--al-brand-50);
    color: var(--al-brand);
}
.al-doc-copy { display: grid; line-height: 1.5; }
.al-doc-copy strong { font-weight: 700; }
.al-doc-copy span { color: var(--al-muted); font-size: var(--tb1-fs-sm, 1rem); }
.al-docnote {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: var(--tb1-radius-sm, 10px);
    background: var(--al-surface-alt);
    color: var(--al-ink-2);
    font-size: var(--tb1-fs-sm, 1rem);
}
.al-docnote i { color: var(--al-brand); }
.al-checklist { display: grid; gap: 11px; margin-top: 14px; padding: 0; list-style: none; }
.al-checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--al-ink-2); }
.al-checklist i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .14);
    color: var(--tb1-text-success, #047857);
    font-size: .75rem;
}
.al-tip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    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);
    line-height: 1.6;
}
.al-tip i { margin-top: 3px; color: var(--tb1-text-warning, #B45309); }

/* ── ⑤ คำถามที่พบบ่อย ──────────────────────────────────────────────────── */
.al-faq-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.al-faq-grid .al-head { position: sticky; top: 24px; }
.al-faq { padding: 4px clamp(16px, 2.5vw, 26px); border: 1px solid var(--al-border); border-radius: var(--al-radius); background: var(--al-page); }
.al-qa { border-bottom: 1px solid var(--al-border); }
.al-qa:last-child { border-bottom: 0; }
.al-qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px 0;
    font-weight: 700;
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
}
.al-qa summary::-webkit-details-marker { display: none; }
.al-qa summary span { transition: color .2s ease; }
.al-qa summary i {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--al-brand-50);
    color: var(--al-brand);
    font-size: .85rem;
    transition: transform .3s var(--al-ease), background-color .2s ease, color .2s ease;
}
.al-qa[open] summary i { transform: rotate(135deg); background: var(--al-brand); color: var(--tb1-on-brand, #fff); }
.al-qa summary:hover span { color: var(--al-brand); }
.al-qa p { padding: 0 48px 16px 0; color: var(--al-ink-2); line-height: 1.7; }

/* ── ⑥ ติดต่อ ──────────────────────────────────────────────────────────── */
.al-contact-wrap { padding-top: clamp(28px, 4vw, 48px); }
.al-contact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(20px, 3.5vw, 44px);
    align-items: center;
    padding: clamp(24px, 4vw, 44px);
    border-radius: 26px;
    background:
        radial-gradient(50% 80% at 100% 0%, rgba(56, 189, 248, .30), transparent 70%),
        radial-gradient(40% 70% at 0% 100%, rgba(255, 255, 255, .10), transparent 70%),
        linear-gradient(135deg, var(--tb1-banner-1, #1D4ED8), var(--tb1-banner-2, #3B82F6));
    color: #fff;
    overflow: hidden;
    box-shadow: var(--al-shadow-lg);
}
.al-contact > * { position: relative; z-index: 1; }
.al-contact::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
    transform: translateX(-160%) skewX(-20deg);
    pointer-events: none;
}
.al-contact h2 { margin-top: 8px; color: #fff; font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem)); font-weight: 700; line-height: 1.3; }
.al-contact-copy > p:not(.al-kicker) { margin-top: 10px; color: rgba(255, 255, 255, .88); }
.al-hours { display: flex; align-items: baseline; gap: 10px; }
.al-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.al-contact-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--tb1-radius-md, 16px);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: background-color .2s ease, border-color .2s ease;
}
.al .al-contact-link { color: #fff; }
.al-contact-link:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.al-contact-link > i {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    transition: transform .3s var(--al-ease);
}
.al-contact-link:hover > i { transform: scale(1.1) rotate(-6deg); }
.al-contact-link span { display: grid; font-weight: 600; font-size: var(--tb1-fs-sm, 1rem); }
.al-contact-link small { color: rgba(255, 255, 255, .78); font-size: var(--tb1-fs-xs, .875rem); font-weight: 500; }

/* ── ปุ่มสมัครติดขอบล่างจอ (มือถือ ช่วงเปิดรับ) ─────────────────────────────── */
.al-dock { display: none; }

/* ══ ภาพเคลื่อนไหว ════════════════════════════════════════════════════════
   ตอนเปิดหน้า: ข้อความส่วนบนขึ้นทีละบรรทัด (.al-rise ตามลำดับ --d) รูปเผยจากกรอบ การ์ดสถานะเลื่อนขึ้น แถบผู้สมัครค่อย ๆ เต็ม
   ตลอดเวลา (ช้ามาก): แสงพื้นหลังลอย รูปขยายเข้าออกช้า ๆ หัวเรื่องไล่สี ปุ่มหลักมีแสงวิ่งผ่าน จุดสถานะกะพริบ
   ตอนเลื่อนถึง (สคริปต์ใส่ .is-in): หัวข้อเลื่อนขึ้น การ์ดทยอยขึ้นทีละใบ เส้นขั้นตอนลากจากซ้ายไปขวา ตัวเลขนับขึ้น
   ทั้งหมดอยู่ใน no-preference: ผู้ใช้ที่ตั้งลดการเคลื่อนไหวเห็นหน้าครบโดยไม่มีอะไรขยับ */
@keyframes al-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes al-photo-in {
    from { opacity: 0; transform: translateY(16px) scale(.95); clip-path: inset(10% 10% 10% 10% round 26px); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 26px); }
}
@keyframes al-kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes al-card-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes al-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes al-shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes al-pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes al-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }
@keyframes al-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 50px) scale(.92); } }
@keyframes al-drift-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-70px, -30px); } }
@keyframes al-shine { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(380%) skewX(-20deg); } }
@keyframes al-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes al-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes al-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
    .al-subnav { animation: al-fade-down .6s var(--al-ease) both; }
    .al-rise { animation: al-rise .8s var(--al-ease) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
    .al-title-accent.al-rise {
        animation: al-rise .8s var(--al-ease) calc(var(--d, 0) * 90ms + 60ms) both, al-shimmer 9s linear 1.6s infinite;
    }
    .al-photo { animation: al-photo-in 1s var(--al-ease) .15s both; }
    .al-photo img { animation: al-kenburns 22s ease-in-out 1.2s infinite alternate; }
    .al-hero-media::before { animation: al-rise 1.1s var(--al-ease) .35s both; }
    .al-status { animation: al-card-in .8s var(--al-ease) .55s both; }
    .al-meter > span { animation: al-grow 1.3s var(--al-ease) 1s both; }
    .al-pulse:is(.is-open, .is-soon, .is-next)::after { animation: al-pulse 2s ease-out infinite; }
    .al-hero-deco span:nth-child(1) { animation: al-drift-a 18s ease-in-out infinite; }
    .al-hero-deco span:nth-child(2) { animation: al-drift-b 22s ease-in-out infinite; }
    .al-hero-deco span:nth-child(3) { animation: al-drift-c 26s ease-in-out infinite; }
    .al-btn.is-primary::after { animation: al-shine 4.5s ease-in-out 2s infinite; }

    /* เลื่อนถึง: สคริปต์ใส่ .al-js ที่ <html> ก่อน (ไม่มีสคริปต์ = เห็นทุกอย่างทันที) */
    .al-js [data-al-reveal]:not([data-al-reveal="stagger"]) { transition: opacity .7s ease, transform .8s var(--al-ease); }
    .al-js [data-al-reveal]:not([data-al-reveal="stagger"]):not(.is-in) { opacity: 0; transform: translateY(24px); }
    .al-js [data-al-reveal="stagger"] > * {
        transition: opacity .6s ease, transform .7s var(--al-ease);
        transition-delay: calc(min(var(--i, 0), 8) * 70ms);
    }
    .al-js [data-al-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(20px) scale(.98); }
    .al-js .al-head.is-in .al-kicker::before { animation: al-line .6s var(--al-ease) .1s both; }
    .al-js .al-programs.is-in .al-prog-icon { animation: al-pop .55s var(--al-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 70ms + .2s); }
    .al-js .al-programs.is-expanded > li:nth-child(n+7) { animation: al-rise .55s var(--al-ease) both; animation-delay: calc((var(--i, 6) - 6) * 45ms); }
    .al-js .al-steps::before { transform: scaleX(0); transition: transform 1.2s var(--al-ease) .25s; }
    .al-js .al-steps.is-in::before { transform: scaleX(1); }
    .al-js .al-steps.is-in .al-step-no { animation: al-pop .6s var(--al-ease) both; animation-delay: calc(var(--i, 0) * 160ms + .2s); }
    .al-js .al-checklist.is-in i { animation: al-pop .5s var(--al-ease) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
    .al-js .al-doclist.is-in .al-doc-icon { animation: al-pop .5s var(--al-ease) both; animation-delay: calc(var(--i, 0) * 80ms + .15s); }
    .al-js .al-cur-grid.is-in .al-cur-icon { animation: al-pop .55s var(--al-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 70ms + .2s); }
    .al-js .al-contact.is-in::after { animation: al-shine 7s ease-in-out 1s infinite; }
    .al-qa[open] > p { animation: al-fade-down .35s var(--al-ease) both; }
}

/* ── ขนาดจอ ─────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    /* รูปแคบลง การ์ดสถานะย้ายลงใต้รูปเพื่อไม่บังหน้านักเรียน */
    .al-hero-media { padding: 0; }
    .al-hero-media::before { display: none; }
    .al-status { position: relative; width: auto; margin: -44px 14px 0; }
}
@media (max-width: 1100px) {
    .al-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-steps::before { display: none; }
    .al-level-head { grid-template-columns: auto minmax(0, 1fr); }
    .al-level-meta { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    .al-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .al-hero-media { max-width: 680px; }
    .al-photo { aspect-ratio: 16 / 10; }
    .al-docs, .al-faq-grid, .al-contact { grid-template-columns: minmax(0, 1fr); }
    .al-faq-grid .al-head { position: static; }
    .al-hero-deco span:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
    /* เมนูในส่วนหัว: ชื่อระบบแถวบน ลิงก์ 4 ปุ่มเป็นตารางไอคอนเหนือข้อความ (แบบแถบเดิมบนมือถือ) */
    .al-subnav { flex-direction: column; align-items: stretch; padding: 10px; border-radius: var(--tb1-radius-md, 16px); }
    .al-subnav-brand { padding: 0 4px; }
    .al-subnav-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .al-subnav-links a {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 58px;
        padding: 6px 4px;
        font-size: var(--tb1-fs-xs, .875rem);
        line-height: 1.3;
        text-align: center;
    }
    .al-subnav-links a i { font-size: 1.05rem; }
}
@media (max-width: 640px) {
    :is(.al, .al-dock) { --al-section-y: 36px; }
    .al { font-size: var(--tb1-fs-sm, 1rem); }
    .al-actions .al-btn { flex: 1 1 100%; }
    .al-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-facts > div { padding: 12px 16px; border-left: 0; border-top: 1px solid var(--al-border); }
    .al-facts > div:nth-child(-n+2) { border-top: 0; }
    .al-facts > div:nth-child(even) { border-left: 1px solid var(--al-border); }
    .al-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .al-level-head { gap: 12px 14px; }
    .al-level-badge { width: 52px; height: 52px; border-radius: 15px; font-size: var(--tb1-fs-lg, 1.25rem); }
    .al-level-meta > div { min-width: 0; flex: 1 1 0; }
    .al-prog { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .al-prog-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
    .al-cur-meta dd { font-size: var(--tb1-fs-sm, 1rem); }
    .al-doclist li { grid-template-columns: 40px minmax(0, 1fr); }
    .al-doclist .al-tag { grid-column: 2; justify-self: start; }
    .al-qa p { padding-right: 0; }
    .al-contact-actions { grid-template-columns: minmax(0, 1fr); }
    .al-status { margin-inline: 10px; padding: 16px; }
    .al-hero-deco span:nth-child(1) { width: 360px; height: 360px; }
    .al-hero-deco span:nth-child(2) { width: 300px; height: 300px; }

    body.al-has-dock { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .al-has-dock .al-dock {
        position: fixed;
        z-index: 40;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tb1-border, #E2E8F0);
        background: var(--tb1-surface-veil, rgba(255, 255, 255, .94));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .35);
    }
    .al-dock-copy { display: grid; color: var(--tb1-ink-3, #5A697F); font-size: var(--tb1-fs-xs, .875rem); line-height: 1.4; }
    .al-dock-copy strong { color: var(--tb1-text-success, #047857); font-size: var(--tb1-fs-sm, 1rem); }
    .al-dock .al-btn { min-height: 48px; padding: 0 20px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .al-has-dock .al-dock { animation: al-rise .6s var(--al-ease) 1.2s both; }
}

@media print {
    .al-progress, .al-hero-deco, .al-dock, .al-actions, .al-more, .al-contact-actions { display: none !important; }
    .al-programs.is-collapsed > li { display: grid !important; }
    .al *, .al *::before, .al *::after { animation: none !important; }
    .al-js [data-al-reveal], .al-js [data-al-reveal] > * { opacity: 1 !important; transform: none !important; }
}