@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-Black.ttf") format("truetype"); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/BeVietnamPro-BlackItalic.ttf") format("truetype"); font-style: italic; font-weight: 900; font-display: swap; }
:root { --bs-font-sans-serif: "Be Vietnam Pro", sans-serif; --bs-body-font-family: "Be Vietnam Pro", sans-serif; }
body, button, input, select, textarea { font-family: "Be Vietnam Pro", sans-serif; }
body { background: #fff; color: #1b2b36; }
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.home-container { max-width: 1160px; }
.learner-content { max-width: 760px; min-height: 60vh; }
.learner-content-wide { max-width: 1080px; }
.learner-content .btn { min-height: 52px; font-size: 1.125rem; }
.learner-content .form-control { min-height: 50px; font-size: 1.125rem; }
.site-header { border-bottom: 1px solid #e9ecef; }
.site-brand { color: #24313a; display: inline-flex; align-items: center; gap: 1rem; font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; }
.site-brand:hover, .site-header nav a:hover { color: #d32f2f; }
.site-logo { display: block; width: 215px; height: auto; max-height: 72px; object-fit: contain; }
.admin-header { background: #fff; border-bottom: 2px solid #c62828; }
.admin-header .navbar-brand { color: #a91e24; }
.home-banner { width: 100%; background: #c62828; }
.home-banner picture { display: block; }
.home-banner-image { display: block; width: 100%; height: auto; }
.site-header nav a { color: #46525b; text-decoration: none; font-weight: 600; }
.site-nav { align-items: center; }
.section-kicker { color: #b71c1c; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
.course-summary { border-left: 4px solid #c62828; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.3rem; background: #fff; border-radius: 0 .8rem .8rem 0; color: #46525b; font-weight: 650; }
.course-summary-number { font-size: 3rem; font-weight: 800; line-height: 1; color: #b71c1c; }
.attendance-section { background: #f8f9fa; }
.session-card { display: flex; flex-direction: column; padding: 1.5rem; background: #fff; border: 1px solid #e5e8eb; border-radius: 1.2rem; box-shadow: 0 10px 25px rgba(20,32,40,.045); transition: transform .2s ease, box-shadow .2s ease; }
.session-card-open { border-color: #dfaaaa; box-shadow: 0 14px 32px rgba(170,30,36,.10); }
.session-card-open:hover { transform: translateY(-3px); }
.exam-card { background: #fff; }
.session-number { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: #ffe9e9; color: #b71c1c; font-weight: 800; font-size: 1.3rem; margin-bottom: 1.5rem; }
.session-card .session-number { margin-bottom: 0; }
.exam-number { background: #f0f2f4; color: #5d6872; }
.status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.status-open { background: #fff0f0; color: #a91e24; }
.status-locked { background: #f1f3f5; color: #56616c; }
.session-card .btn { border-radius: .7rem; min-height: 50px; display: grid; place-items: center; font-weight: 700; }
.session-card .btn:disabled { opacity: 1; background: #f1f3f5; border-color: #e6e9ec; color: #59636d; }
.btn-primary { background: #c62828; border-color: #c62828; }
.btn-primary:hover, .btn-primary:focus { background: #a91e24; border-color: #a91e24; }
.btn-outline-primary { color: #b71c1c; border-color: #b71c1c; }
.btn-outline-primary:hover { background: #b71c1c; border-color: #b71c1c; }
.help-strip { background: #f8f9fa; border-radius: 1.25rem; padding: 2rem; }
.site-footer { background: #fff; color: #46525b; border-top: 1px solid #e9ecef; font-size: .92rem; }
@media (max-width: 767px) {
    .site-header .home-container { min-height: 66px; padding-top: .65rem !important; padding-bottom: .65rem !important; }
    .site-logo { width: 155px; max-height: 50px; }
    .site-nav { order: 3; width: 100%; justify-content: space-between; gap: .25rem !important; padding-top: .55rem; border-top: 1px solid #edf0f2; }
    .site-nav a { flex: 1; padding: .35rem .2rem; font-size: .84rem; text-align: center; }
    .learner-content, .learner-content-wide { padding-left: 1rem; padding-right: 1rem; }
    .session-card { padding: 1.25rem; }
    .help-strip { padding: 1.35rem; }
    .site-footer { font-size: .86rem; text-align: center; }
    .site-footer .home-container { align-items: center; }
    .home-banner-has-mobile .home-banner-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
}
@media (max-width: 380px) {
    .site-logo { width: 140px; }
    .learner-content, .learner-content-wide { padding-left: .75rem; padding-right: .75rem; }
}