/* =====================================================================
   ส่วนเสริมของธีม Pre-Entrance — องค์ประกอบที่ไฟล์ต้นแบบ (style.css)
   ไม่มี แต่หน้า Blade ของ Laravel ต้องใช้
   โหลดหลัง style.css เสมอ เพื่อให้ override ได้จริง
   ===================================================================== */

/* ============ 1. แถบเมนู แถวเดียว (ตามไฟล์ต้นแบบ) ============
   วัดความกว้างจริงด้วย IBM Plex Sans Thai แล้วได้
   แบรนด์ 358 + เมนู 6 รายการ 778 + dropdown ภาษา 92 + ปุ่มทอง 112
   + gap 16 + padding 40 = 1,396px แต่พื้นที่ว่างใน --container (1180px)
   มีแค่ 1,140px → ขาด 257px

   ทางออกที่ปลอดภัยที่สุดโดยไม่ต้องตัดเนื้อหา:
   · ล็อกแบรนด์ไม่ให้ยุบ + เอา ellipsis ทิ้ง → ชื่อโปรแกรม/ชื่อโรงเรียนไม่โดนตัด
   · ปล่อยให้ .nav-links ตัดบรรทัดเอง → เมนูเรียงเป็น 2 แถว ไม่ล้นแนวนอน */
.nav-container {
    height: auto;
    min-height: 70px;
}

/* ตราโรงเรียนแนวตั้ง 192×350 — สูง 54px จะได้กว้าง ~30px */
.logo-emblem { height: 54px; }

/* ล็อกไม่ให้ถูกบีบ (ค่าเริ่มต้นของ flex คือ flex-shrink:1) */
.nav-container .logo-container { flex: none; }

/* ตัด overflow/ellipsis ออก — ต้องแสดงชื่อเต็มเสมอ */
.nav-container .logo-text h1,
.nav-container .logo-text p {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* ชื่อโปรแกรม : หนา สีขาว / ชื่อโรงเรียน : เล็กกว่า สีอ่อนกว่า
   ให้สองบรรทัดมีลำดับชัดเจน ไม่ดูเหมือนกันไปหมด */
.nav-container .logo-text h1 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.nav-container .logo-text p {
    font-size: 14.5px;
    font-weight: 500;
    color: #a9bcd8;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

/* โลโก้ + ชื่อโปรแกรม + ชื่อโรงเรียน เป็นลิงก์กลับหน้าแรก
   องค์ประกอบนี้เปลี่ยนจาก <div> เป็น <a> จึงต้องกดสีตัวอักษรกับเส้นใต้
   ตอน hover ของ anchor ทิ้ง ไม่งั้นชื่อสองบรรทัดจะเปลี่ยนสีตามสไตล์ลิงก์ */
.nav-container a.logo-container {
    color: inherit;
    text-decoration: none;
}

.nav-container a.logo-container:hover,
.nav-container a.logo-container:focus {
    color: inherit;
    text-decoration: none;
}

/* เมนู : ปล่อยตัดบรรทัดได้ (ธีมต้นแบบล็อก height:70px ไม่ยอมห่อ ทำให้ล้น) */
.nav-links {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 1024px) {
    .nav-container { min-height: 64px; }
}

/* ============ 1b. ปักหมุดแถบเมนูไว้บนสุดขณะเลื่อน (sticky) ============
   ธีมตั้ง .navbar เป็น position: relative → เลื่อนลง เมนูหายจากจอ
   เปลี่ยนเป็น sticky แทน fixed เพื่อไม่ต้องชดเชย padding-top ของ body
   และไม่ต้องใช้ JS เพิ่มเติม

   ข้อกำหนดของ sticky ที่ตรวจแล้ว:
   · ห้ามมี ancestor ตั้ง overflow (hidden/auto/scroll) — body/html ไม่ได้ตั้ง ✓
   · z-index ต้องอยู่เหนือเนื้อหา — .content-grid/.sidebar = 10, .hero = auto
     ดังนั้น navbar = 30 (กำหนดไว้ใน style.css) จึงอยู่เหนือเนื้อหา ✓
     ส่วนปุ่มเลื่อนขึ้นบน = 70 ยังอยู่เหนือ navbar ตามเดิม ✓
   · เส้นทองใต้ header (.navbar::after) เป็น position: absolute
     ซึ่งยึดกับบรรทัดศูนย์ของ element ที่ positioned → ติดตาม navbar ไปด้วย ✓

   ปัญหา: เพราะ navbar อยู่ "บนสุดของ document" อยู่แล้ว มันจึงค้างอยู่ที่เดียว
   ตั้งแต่ scrollY = 0 → ไม่มีจังหวะเปลี่ยนแปลงอะไรเลย ดูไม่ต่างจาก fixed
   วิธีแก้คือ JS (main.js → initStickyNav) เติม class .is-stuck ตอนเลื่อนเกินความสูง
   แล้วค่อยเปลี่ยนสถานะ 3 อย่างนี้แบบมี transition:

   ข้อสำคัญ — ห้ามเปลี่ยน "ความสูง/ขนาด" ของ navbar เพราะ element นี้ยังอยู่ใน normal flow
   ถ้าความสูงเปลี่ยนตอนค้างอยู่ เนื้อหาด้านล่างจะกระโดดทันทีทุกครั้งที่เปลี่ยนสถานะ
   จึงเปลี่ยนเฉพาะ property ที่ไม่กระทบ layout : สีพื้นหลัง / เงา / ความหนาเส้นทอง */
.navbar {
    position: sticky;
    top: 0;
    transition: background-color 0.28s ease, box-shadow 0.28s ease;
}

.navbar::after {
    transition: height 0.28s ease;
}

/* ยังไม่ได้ปักหมุด : ตามค่าเดิมของ style.css */

/* กำลังปักหมุด : พื้นหลังเข้มขึ้น + เงาลึกขึ้น + เส้นทองหนาขึ้น */
.navbar.is-stuck {
    background-color: #0b1c3e;          /* เข้มกว่า --navy (#1a2e5a) ให้เห็นชัด */
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.navbar.is-stuck::after {
    height: 6px;
}

/* ============ 2. ลิงก์หัวข้อข่าวในแถบข้าง ============ */
.news-title a { color: inherit; }

.news-title a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ============ 3. honeypot ของฟอร์มสมัครสอบ ============ */
.hp-field { display: none !important; }

/* ============ 4. ข้อความแจ้งเตือน / ข้อผิดพลาดจากการตรวจสอบ ============ */
.alert {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    line-height: 1.7;
}

.alert-success {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    color: #166534;
}

.alert-danger {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}

.alert-danger ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.form-control.is-invalid {
    border-color: #dc2626;
    background-color: #fff;
}

.invalid-feedback {
    display: block;
    margin-top: 5px;
    color: #b91c1c;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ข้อความอธิบายใต้ช่องกรอก (คำใบ้/เงื่อนไขของไฟล์ที่แนบ) */
.form-text {
    display: block;
    margin-top: 5px;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ============ 5. Pagination (Laravel สร้าง markup ของ Bootstrap) ============ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 20px 18px;
    padding: 0;
    list-style: none;
}

.pagination .page-link {
    display: block;
    padding: 7px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
    font-size: 13.5px;
}

.pagination .page-link:hover {
    border-color: #c19741;
    text-decoration: none;
}

.pagination .page-item.active .page-link {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #94a3b8;
    pointer-events: none;
}

/* view pagination ของ Laravel (bootstrap-5) ใส่ชุดปุ่ม « ก่อนหน้า / ถัดไป »
   สำหรับจอเล็กไว้ใน .d-sm-none แล้วให้ Bootstrap ซ่อนเมื่อจอ >= 576px
   หน้าสาธารณะไม่ได้โหลด Bootstrap จึงต้องซ่อนเอง — ชุดปุ่มตัวเลขด้านล่าง
   ครอบคลุมทุกขนาดจออยู่แล้ว (ตัวเลขตัดบรรทัดได้เพราะ flex-wrap) */
nav > div.d-sm-none { display: none; }

/* ============ 6. ตัวกรองระดับชั้น (หน้าข่าว) ============ */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 16px;
}

.chip {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.chip:hover {
    border-color: #c19741;
    color: #1f2a44;
    text-decoration: none;
}

.chip.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ============ 7. รายการข่าวแบบเต็มความกว้าง (หน้ารวมข่าว) ============ */
.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
}

.news-item .news-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.news-summary {
    margin: 5px 0 8px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.8;
}

/* ============ 8. ช่องกรอกแบบมีปุ่มปิด/เปิดแสดงรหัสผ่าน ============ */
.input-affix { position: relative; }

.input-affix .form-control { padding-right: 42px; }

.affix-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #64748b;
    font-family: inherit;
    cursor: pointer;
}

.affix-btn:hover { color: var(--navy); }

/* ============ 9. แถบความแรงรหัสผ่าน (Alpine ในหน้า register) ============ */
.strength {
    display: flex;
    gap: 4px;
    margin-top: 7px;
}

.strength span {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
}

.bg-danger { background-color: #dc2626; }
.bg-warning { background-color: #f59e0b; }
.bg-info { background-color: #0ea5e9; }
.bg-success { background-color: #16a34a; }

.field-hint {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ============ 10. fieldset ของฟอร์มสมัครสอบ ============ */
fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    margin-bottom: 8px;
    padding: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

/* ============ 11. ของจุกจิกที่ใช้ร่วมกัน ============ */
.req { color: #dc2626; }

.stack {
    display: grid;
    gap: 8px;
}

/* ไอคอนประจำแผง (ใช้แทนรูป/สี inline ในหน้าที่ยังไม่มีเนื้อหา) */
.panel-icon {
    display: block;
    margin-bottom: 12px;
    color: #c19741;
    font-size: 34px;
}

/* เว้นระยะระหว่างย่อหน้าในแผง — ธีมต้นแบบรีเซ็ต margin ของทุก element */
.panel-body p { margin-bottom: 14px; }

/* ============ 12. Hero ที่แอดมินแก้ไขได้ ============
   แอดมินตั้งได้ : ข้อความ / ขนาดตัวอักษร / สี / พื้นหลังนิ่งหรือ carousel
                         / ความสูงขั้นต่ำ / ความเข้มของไล่เฉด

   ต้องย้ายภาพออกจาก shorthand `background` ของ style.css แล้วแยกเป็น 2 ชั้น:
     .hero-slides = รูป (หรือสไลด์ที่ไล่ fade ใส่กัน)
     .hero-overlay = ไล่เฉดสีน้ำเงิน ให้ข้อความอ่านออกทั้งซ้าย-ขวา
   ถ้าปล่อยไว้ใน shorthand จะสั่งซ้อนรูปทีละชั้นไม่ได้และ carousel ทำไม่ได้ */
.hero { background-image: none; }

.hero-slides,
.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-slides { z-index: 0; }

.hero-overlay { z-index: 1; }

.hero-inner { z-index: 2; }

.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active { opacity: 1; }

/* ข้อความ — รับค่าจาก CSS variable ที่ public-hero.blade.php ตั้งไว้
   ทำไมไม่ใช้ font-size ตรง ๆ ใน inline style:
   เพราะ inline มีน้ำหนักสูงกว่า media query แล้วจะทำให้จอแคบไม่ย่อตัวอักษร */
.hero-title {
    font-size: var(--hero-title-size, 34px);
    color: var(--hero-title-color, #ffffff);
}

.hero-subtitle {
    font-size: var(--hero-subtitle-size, 27px);
    color: var(--hero-subtitle-color, #f6c445);
}

.hero-tagline {
    font-size: var(--hero-tagline-size, 19px);
    color: var(--hero-tagline-color, #e8eef7);
}

/* จุดบอกตำแหน่งสไลด์ (แสดงเฉพาะตอนเป็น carousel ที่มีมากกว่า 1 ภาพ) */
.hero-dots {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-dot:hover { background-color: rgba(255, 255, 255, 0.78); }

.hero-dot.is-active {
    background-color: var(--gold);
    transform: scale(1.3);
}

@media (max-width: 900px) {
    /* คงพฤติกรรมเดิมของธีม — จอมือถือไม่ล็อกความสูง hero */
    .hero-inner { min-height: 0; }

    /* ย่อตามสัดส่วนเดิมของไฟล์ต้นแบบ 26/34, 21/27, 16/19
       เพื่อให้แอดมินตั้งขนาดใหญ่ขึ้น/เล็กลงแล้วยังย่อต่อบนจอแคบได้ต่อ */
    .hero-title { font-size: calc(var(--hero-title-size, 34px) * 0.765); }
    .hero-subtitle { font-size: calc(var(--hero-subtitle-size, 27px) * 0.78); }
    .hero-tagline { font-size: calc(var(--hero-tagline-size, 19px) * 0.84); }
}

@media (max-width: 520px) {
    .hero-title { font-size: calc(var(--hero-title-size, 34px) * 0.65); }
}

/* ============ 13. เนื้อหา Rich Text ที่แก้ผ่าน Quill ============
   ค่าเริ่มต้นเลียนแบบ .page-intro ของธีม (14.5px / 1.8 / #475569)
   และ blockquote เลียนแบบ .note (กรอบสีเหลืองอำพัน) */
.rich-body {
    padding: 18px 20px 6px;
    font-size: 14.5px;
    /* ค่าที่แอดมินตั้งใน "กล่องเนื้อหาหน้าแรก" ถูกส่งผ่าน inline style ที่ element
     ค่า fallback ด้านหลังใช้เมื่อ element นั้นไม่ได้ถูกเรนเดอร์โดย content-block.blade.php */
    line-height: var(--rich-line-height, 1.8);
    color: #475569;
    text-align: left;
    overflow-wrap: break-word;
}

.rich-body > *:first-child { margin-top: 0; }

.rich-body > *:last-child { margin-bottom: 0; }

.rich-body p { margin-bottom: 12px; }

.rich-body h1,
.rich-body h2,
.rich-body h3,
.rich-body h4 {
    margin: 18px 0 8px;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.4;
}

.rich-body h1 { font-size: 22px; }
.rich-body h2 { font-size: 19.5px; }
.rich-body h3 { font-size: 17px; }
.rich-body h4 { font-size: 15.5px; }

.rich-body ul,
.rich-body ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.rich-body li { margin-bottom: 6px; }

.rich-body a {
    color: #1d4ed8;
    text-decoration: underline;
}

.rich-body a:hover { color: #1e40af; }

.rich-body strong { color: #0f172a; }

.rich-body blockquote {
    margin: 14px 0 4px;
    padding: 10px 14px;
    background: #fffbeb;
    border-left: 4px solid #eab308;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.75;
    color: #78350f;
}

.rich-body pre {
    overflow-x: auto;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #0f172a;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
}

.rich-body code {
    padding: 1px 5px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 0.92em;
}

.rich-body pre code {
    padding: 0;
    background: none;
}

.rich-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    /* คลิกได้ — lightbox.js จะเปิดภาพต้นฉบับจาก data-full */
    cursor: zoom-in;
}

.rich-body hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

/* การจัดตำแหน่งข้อความจากปุ่ม ชิดซ้าย/กึ่งกลาง/ขวา/justify ในตัวแก้
   Quill 2 เก็บ format นี้เป็น "class" ql-align-* ไม่ใช่ inline style
   แต่ CSS ของ Quill ผูกไว้กับ .ql-editor ซึ่งมีเฉพาะในหน้าแอดมินเท่านั้น
   ถ้าไม่ประกาศซ้ำที่นี่ หน้าสาธารณะจะเห็นข้อความชิดซ้ายตลอดเวลา
   เพราะ .rich-body ด้านบนสั่ง text-align: left แล้วลูก ๆ inherit กันมา */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ขนาดตัวอักษรจาก dropdown ในตัวแก้ — Quill เก็บเป็น class ql-size-*
   และผูก CSS ไว้กับ .ql-editor เหมือนกับ ql-align- ด้านบน
   ครอบด้วย .rich-body เพราะกฎ .rich-body h1..h4 ด้านบนมี font-size ของตัวเอง
   ถ้าไม่ครอบ selector จะสู้ไม่ไหวแล้วหัวข้อไม่ยอมเปลี่ยนขนาด */
.rich-body .ql-size-small { font-size: 0.75em; }
.rich-body .ql-size-large { font-size: 1.5em; }
.rich-body .ql-size-huge { font-size: 2.5em; }

/* แถบข้างแคบกว่า จึงต้องย่อฟอนต์และ padding ลง */
.side-card .rich-body {
    padding: 14px 14px 6px;
    font-size: 13.5px;
    line-height: var(--rich-line-height, 1.75);
}

/* การ์ด "ข่าวประกาศล่าสุด" คร่อมขอบล่างของ hero อยู่
   หัวการ์ดสีน้ำเงินเข้มกับพื้นหลัง hero เป็นโทนเดียวกัน ขอบบนจึงดูจมหาย
   เพิ่มเส้นขอบขาวเฉพาะด้านบนเพื่อแย่งสายตา ให้เห็นว่าการ์ดเริ่มตรงไหน
   (เจาะจงเฉพาะ news_list — การ์ดอื่นอยู่ต่ำกว่าขอบ hero อยู่แล้ว ขอบขาวจะไม่เห็น) */
.side-card.has-top-accent {
    border-top: 3px solid #ffffff;
}

/* ============ 14. โลโก้ที่แอดมินอัปโหลด ============
   รูปที่อัปโหลดอาจหน้ากว้าง (โลโก้แนวนอน) จึงต้องจำกัดความกว้างด้วย
   object-fit: contain ของ style.css จะทำให้บีบสัดส่วนแทนการยืด */
.logo-emblem {
    max-width: 200px;
    object-fit: contain;
}

/* ============ 15. Lightbox รูปในกล่องเนื้อหา ============
   หน้าเว็บโหลดภาพขนาดย่อมาแสดง (ดู SiteImage::withThumbnails) แล้วเก็บ
   ไฟล์ต้นฉบับไว้ที่ data-full — คลิกที่รูปจึงเปิดภาพเต็มจาก overlay
   ได้โดยไม่ต้องโหลดไฟล์ใหญ่ตั้งแต่ตอนเปิดหน้า */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 15, 32, 0.9);
    cursor: zoom-out;
}

/* ต้องเขียนทับเอง — ไม่งั้น display:flex ด้านบนจะชนะ [hidden] ของเบราว์เซอร์
   แล้ว overlay จะโผล่มาทั้งที่ซ่อนอยู่ */
.lightbox[hidden] { display: none; }

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(1120px, 100%);
    margin: 0;
    cursor: default;
}

.lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 190px);
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.lightbox-caption {
    max-width: 720px;
    margin: 0;
    color: #cbd5e1;
    font-size: 14.5px;
    line-height: 1.7;
    text-align: center;
}

.lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.lightbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
    background: #f6c445;
    border-color: #f6c445;
    color: #10203f;
}

@media (max-width: 640px) {
    .lightbox { padding: 14px; }
    .lightbox-img { max-height: calc(100vh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-btn { transition: none; }
}

/* ===== กล่อง "ตรวจสอบข้อมูลการสมัคร" (content block: status_lookup) ===== */
.lookup-form { padding: 16px 20px 6px; }

.lookup-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.lookup-row { display: flex; flex-wrap: wrap; gap: 10px; }

.lookup-row .form-control {
    flex: 1 1 220px;
    min-width: 0;
    padding: 11px 14px;
    font-size: 16px;
    letter-spacing: 1px;
}

.lookup-row .btn-cta {
    border: 0;
    padding: 11px 26px;
    font-family: inherit;
    cursor: pointer;
}

.lookup-error {
    margin-top: 8px;
    font-size: 13px;
    color: #b91c1c;
}

.lookup-form .hint { padding: 10px 0 12px; }

/* หน้าสรุปผลการสมัครจากเลขบัตร: การ์ดหลายรายการ + แถวปุ่ม */
.lookup-results .result-card { margin-bottom: 14px; }

.lookup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px 16px;
}

.lookup-actions form { margin: 0; }

.lookup-actions .btn-cta {
    border: 0;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
}

@media (max-width: 900px) {
    .lookup-form { padding: 14px 16px 4px; }
}

@media (max-width: 520px) {
    .lookup-row .btn-cta { width: 100%; }
}