/* =========================== LOGIN THEME (namespaced) ใช้กับ =========================== */ /* =========================== LOGIN (cleaner, modern) ใช้กับ =========================== */ *, *::before, *::after { box-sizing: border-box; } body.login { background: radial-gradient(1200px 600px at 15% 10%, rgba(75, 119, 166, .18), transparent 60%), radial-gradient(900px 480px at 90% 30%, rgba(0, 0, 0, .08), transparent 55%), linear-gradient(180deg, #f6f7fb, #ffffff); min-height: 100vh; } /* wrapper */ body.login .page-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } /* card */ body.login .card-login { width: min(620px, 100%); background: rgba(255, 255, 255, .88); border: 1px solid rgba(0, 0, 0, .07); border-radius: 22px; box-shadow: 0 22px 70px rgba(0, 0, 0, .10); padding: 26px; overflow: hidden; backdrop-filter: blur(10px); } /* header brand */ body.login .login-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } body.login .login-logo { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f2f6fb); border: 1px solid rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; } body.login .login-logo img { width: 48px; height: 48px; object-fit: contain; } body.login .login-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.login .login-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .2px; line-height: 1.1; } body.login .login-sub { font-size: 13px; color: #5d6673; } /* alert */ body.login .alert { border-radius: 14px; padding: 12px 12px; margin: 12px 0 10px; } body.login .alert-error { background: #fff3f3; border: 1px solid #ffd0d0; color: #7a1d1d; } body.login .alert-error strong { display: block; font-weight: 900; margin-bottom: 2px; } /* fields */ body.login .login-field { margin-top: 14px; } body.login .login-label { display: block; font-weight: 800; font-size: 13px; margin-bottom: 8px; color: #1d2430; } body.login .login-control { position: relative; } /* ✅ ไอคอนใหญ่ขึ้น + อยู่กึ่งกลาง */ body.login .login-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; display: flex; align-items: center; justify-content: center; pointer-events: none; } body.login .login-icon svg { width: 20px; height: 20px; } /* ✅ input สวยขึ้น + นุ่มขึ้น */ body.login .login-input { width: 100%; border: 1px solid rgba(0, 0, 0, .12); border-radius: 14px; padding: 14px 48px 14px 46px; /* สูงขึ้น */ font-size: 15px; outline: none; background: #ffffff; transition: .15s ease; box-shadow: 0 1px 0 rgba(0, 0, 0, .02); } body.login .login-input::placeholder { color: #9aa3af; } body.login .login-input:focus { border-color: rgba(75, 119, 166, .85); box-shadow: 0 0 0 4px rgba(75, 119, 166, .16); } /* ✅ ปุ่มตาเป็นไอคอนจริง */ body.login .login-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: 10px; border-radius: 12px; cursor: pointer; color: #596170; display: flex; align-items: center; justify-content: center; } body.login .login-toggle:hover { background: #f3f4f8; } body.login .login-toggle.is-on { color: #4b77a6; } /* submit */ body.login .login-submit { width: 100%; margin-top: 18px; border: 1px solid #4b77a6; background: linear-gradient(180deg, #4b77a6, #3f6a98); color: #fff; border-radius: 14px; padding: 13px 14px; font-weight: 900; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .15s ease; box-shadow: 0 14px 28px rgba(75, 119, 166, .18); } body.login .login-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(75, 119, 166, .25); } /* footer */ body.login .login-foot { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; border-top: 1px dashed rgba(0, 0, 0, .10); padding-top: 14px; } body.login .login-foot .mini { color: #667085; font-size: 12.8px; line-height: 1.35; } @media (max-width: 520px) { body.login .card-login { padding: 20px; border-radius: 18px; } body.login .login-foot { flex-direction: column; align-items: flex-start; } } /* =========================== REPORT (match Word form) =========================== */ .rpt-page { width: 210mm; min-height: 297mm; margin: 18px auto; padding: 18mm 18mm 16mm; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; border: 1px solid #e6e6e6; } .rpt-header { margin-bottom: 8mm; } .rpt-brand { display: flex; align-items: center; gap: 4mm; } .rpt-logo { width: 50mm; height: 16mm; object-fit: contain; } .rpt-brand-text { font-size: 10pt; line-height: 1.15; } .rpt-title { margin-top: 8mm; font-size: 22pt; font-weight: 700; } .rpt-meta { margin-top: 6mm; display: grid; grid-template-columns: 1fr 1fr; gap: 20mm; align-items: end; } .rpt-meta-item { display: flex; align-items: center; gap: 4mm; } .rpt-meta-label { font-size: 10pt; min-width: 22mm; } .rpt-meta-box { flex: 1; border: 1px solid #000; padding: 2.6mm 3mm; font-size: 10pt; } .rpt-hr { margin-top: 6mm; border-top: 1px solid #000; } .rpt-section { margin-top: 10mm; } .rpt-sec-title { font-size: 10.5pt; font-weight: 700; } .rpt-sec-line { margin-top: 10mm; border-top: 1px solid #000; } .rpt-form { margin-top: 6mm; } .rpt-row { display: grid; grid-template-columns: 28mm 1fr; align-items: center; gap: 6mm; margin-top: 4mm; } .rpt-label { font-size: 10pt; } .rpt-box { border: 1px solid #000; min-height: 10mm; padding: 2.4mm 3mm; font-size: 10pt; } .rpt-results { margin-top: 7mm; display: grid; grid-template-columns: auto auto 1fr; /* ✅ 2 กลุ่มแรกชิด, ตัวสุดท้ายกินที่เหลือ */ column-gap: 15mm; /* ✅ ระยะ Listening ↔ Speaking (ลดได้อีก) */ align-items: center; } /* ดัน Overall ไปขวา */ .rpt-results .rpt-metric-wide { justify-self: end; /* ✅ ทำให้ Overall ไปชิดขวาของพื้นที่ */ } .rpt-metric { display: flex; align-items: center; /* justify-content: space-between; */ gap: 6mm; } .rpt-metric-wide .rpt-k { text-align: right; line-height: 1.05; } .rpt-k { font-size: 10pt; font-weight: 700; } .rpt-v { width: 14mm; height: 14mm; background: #cfcfcf; /* grey box like Word */ display: flex; align-items: center; justify-content: center; font-size: 10pt; font-weight: 700; } .rpt-note { margin-top: 6mm; font-size: 9pt; line-height: 1.35; } .rpt-note-label { font-style: italic; margin-bottom: 1mm; } /* footer signature: label ซ้าย + ลายเซ็นขวา (เหมือน PDF) */ .rpt-footer { margin-top: 18mm; /* ระยะจากส่วนบนลงมา (จูนได้) */ display: flex; justify-content: flex-end; } .rpt-sig-row { width: 110mm; /* ความกว้างรวมทั้งแถว */ display: flex; align-items: flex-start; gap: 10mm; /* ระยะห่าง label กับลายเซ็น */ } /* ซ้าย: Administrator’s Signature */ .rpt-sig-left { width: 34mm; /* กว้าง label (จูนได้) */ text-align: center; font-size: 10pt; line-height: 1.1; padding-top: 2mm; /* ให้กลางระดับเดียวกับลายเซ็น */ } /* ขวา: ลายเซ็น */ .rpt-sig-right { width: 70mm; /* เท่ากับใน PDF */ text-align: center; font-size: 10pt; } /* เส้นเซ็น */ .rpt-sig-line { border-top: 1px solid #000; margin: 0 0 3mm; height: 0; margin-top: -55px; } .rpt-sig-name { margin-top: 1mm; } .rpt-sig-title { margin-top: 1mm; } /* Print: exactly on paper */ @media print { body { background: #fff !important; } .rpt-page { margin: 0; border: none; padding: 18mm 18mm 16mm; } } /* =========================== TOPBAR (clean, non-print) =========================== */ .rpt-topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, .10); } .rpt-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .rpt-topbar-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rpt-topbar-title { font-weight: 800; letter-spacing: .2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpt-topbar-sub { font-size: 12px; color: #555; } .rpt-topbar-right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } .rpt-topbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; color: #111; text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; transition: .15s ease; } .rpt-topbar-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .10); } .rpt-topbar-btn-primary { background: #4b77a6; /* ธีมเดียวกับปุ่มหลักเดิม */ border-color: #4b77a6; color: #fff; } .rpt-topbar-btn-primary:hover { filter: brightness(.97); } /* mobile */ @media (max-width: 640px) { .rpt-topbar-inner { flex-direction: column; align-items: stretch; } .rpt-topbar-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; } } .rpt-sig { text-align: center; width: 70mm; } .rpt-signature { display: block; width: 55mm; height: auto; margin: 6mm auto 2mm; object-fit: contain; position: static; margin-top: -40px; /* สำคัญ */ } /* เผื่อที่ให้รูป ไม่ให้ชนเส้น */ .rpt-sig-label { margin-bottom: 16mm; /* ✅ mm จะนิ่งตอน print */ } /* เส้นคั่นแบบใน PDF (ใต้ข้อมูล/ใต้คะแนน) */ .rpt-close-line { margin-top: 10mm; /* เว้นจากกล่องคะแนน/กล่องข้อมูล */ border-top: 1px solid #000; } /* เส้นใต้ Note */ .rpt-note-line { margin-top: 6mm; border-top: 1px solid #000; }