:root {
  --ink: #17324d; --ink-soft: #284d6d; --navy: #0868a8; --navy-deep: #07558d;
  --teal: #0877bd; --teal-bright: #5bb8e8; --teal-pale: #e8f3fb;
  --paper: #f3f7fb; --white: #ffffff; --line: #c9dbe9; --muted: #42627d;
  --green: #19734a; --red: #b33f3f; --shadow: 0 14px 35px rgba(24, 73, 111, .1);
  --font-display: 'Be Vietnam Pro', sans-serif; --font-body: 'Source Sans 3', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { max-width: 1160px; }
.portal-header { background: var(--navy); color: var(--white); border-bottom: 4px solid var(--teal-bright); }
.portal-header__inner { min-height: 76px; display: flex; align-items: center; gap: 24px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .02em; }
.brand-lockup strong, .brand-lockup small { display: block; line-height: 1.15; }
.brand-lockup strong { font: 700 14px/1.2 var(--font-display); letter-spacing: .08em; }
.brand-lockup small { margin-top: 4px; color: #e1c9aa; font-size: 12px; }
.brand-mark { width: 58px; height: 58px; min-width: 58px; flex: 0 0 58px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: #07558d; padding: 2px; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 50%; }
.header-meta { color: #e3c8a2; font-size: 14px; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #d8a04b; box-shadow: 0 0 0 4px rgba(216,160,75,.18); margin-right: 8px; }
.btn { border-radius: 3px; font-family: var(--font-display); font-weight: 600; transition: transform .2s, background-color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(209,138,61,.4); outline-offset: 3px; }
.btn-header { padding: 10px 14px; border: 1px solid rgba(255,255,255,.34); color: white; font-size: 13px; }
.btn-header:hover { background: var(--teal); color: white; border-color: var(--teal); }
.portal-main { padding-top: 64px; }
.page-intro, .dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.page-intro--public { align-items: center; min-height: 330px; margin-bottom: 30px; padding: 42px 0 48px; border-bottom: 1px solid var(--line); }
.public-title-block { max-width: 620px; }
.title-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--muted); font: 700 10px var(--font-display); letter-spacing: .16em; }
.title-line { width: 38px; height: 2px; background: var(--teal-bright); }
.page-intro--public h1 { font-size: clamp(3.8rem, 9vw, 7.5rem); }
.page-intro--public .intro-copy { max-width: 470px; font-size: 19px; line-height: 1.5; }
.intro-control-panel { width: min(100%, 280px); padding: 18px; border: 1px solid var(--line); border-top: 3px solid var(--teal); background: var(--white); box-shadow: var(--shadow); }
.intro-control-panel .intro-note { margin-bottom: 22px; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.intro-control-panel .form-label { display: block; margin-bottom: 7px; }
.public-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 58px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.public-summary > div { min-height: 116px; padding: 20px 22px; border-right: 1px solid var(--line); }
.public-summary > div:last-child { border-right: 0; }
.public-summary strong { display: block; color: var(--ink); font: 800 28px/1 var(--font-display); letter-spacing: -.04em; }

.eyebrow { margin: 0 0 10px; color: var(--teal); font: 700 11px var(--font-display); letter-spacing: .14em; }
h1, h2, h3, h4, h5 { color: var(--ink); font-family: var(--font-display); }
h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.03; letter-spacing: -.06em; }
h1 em { color: var(--teal); font-style: normal; }
.intro-copy, .dashboard-intro p { margin: 18px 0 0; color: var(--ink-soft); font-size: 18px; }
.intro-note, .date-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-left: 3px solid var(--teal); background: rgba(255,254,250,.7); color: var(--ink-soft); font-size: 13px; }
.intro-note strong, .intro-note small, .date-chip strong { display: block; }
.intro-note strong { font: 600 13px var(--font-display); color: var(--ink); }
.intro-note small { margin-top: 4px; color: var(--muted); }
.note-icon { color: var(--teal); border: 1px solid #d8a88c; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; font-weight: 700; }
.section-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.section-rule { height: 1px; background: var(--line); flex: 1; }
.section-helper { color: var(--muted); font-size: 14px; }
.ranking-section .section-heading { gap: 16px; }
.ranking-section .section-heading > div { flex-shrink: 0; }
.ranking-section .section-heading .eyebrow { margin-bottom: 7px; }
.ranking-section { animation: rise-in .55s ease both; }
#ranking-cards > div { animation: rise-in .55s ease both; }
#ranking-cards > div:nth-child(2) { animation-delay: .07s; } #ranking-cards > div:nth-child(3) { animation-delay: .14s; } #ranking-cards > div:nth-child(4) { animation-delay: .21s; }
.card-rank, .portal-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.card-rank { height: 100%; padding: 22px !important; border-top: 4px solid var(--teal); transition: transform .2s, box-shadow .2s; }
.card-rank:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,43,61,.14); }
.card-rank h5 { margin: 0; font-size: 15px; letter-spacing: .03em; }
.rank-card-top { display: flex; align-items: center; gap: 10px; }
.rank-number { color: var(--muted); font: 800 12px var(--font-display); letter-spacing: .08em; }
.rank-score { margin: 17px 0 9px; color: var(--ink); font: 800 30px/1 var(--font-display); letter-spacing: -.04em; }
.rank-score small { color: var(--muted); font: 500 11px var(--font-body); letter-spacing: 0; }
.rank-meter { height: 5px; overflow: hidden; border-radius: 99px; background: #dceaf4; }
.rank-meter span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.rank-stats { display: grid; gap: 5px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.rank-stats strong { color: var(--ink-soft); font-family: var(--font-display); }
.card-rank hr { border-color: var(--line); opacity: 1; }
.card-rank p { color: var(--ink-soft); font-size: 14px; }
.card-rank p.text-success { color: var(--green) !important; } .card-rank p.text-danger { color: var(--red) !important; }
.card-rank h6 { color: var(--teal); font-size: 18px; }
.card-rank p:last-of-type { margin-bottom: 0; }
#ranking-cards:empty::before { content: 'Đang tải kết quả xếp hạng...'; display: block; width: 100%; padding: 32px; color: var(--muted); border: 1px dashed #b8c9c5; background: rgba(255,254,250,.6); text-align: center; }
#top-thanh-tich:empty::before, #top-vi-pham:empty::before { content: 'Chưa có dữ liệu ghi nhận'; display: block; padding: 18px 0; color: var(--muted); font-size: 14px; }
.rank-1 { border-top-color: #07558d; } .rank-2 { border-top-color: #2185bd; } .rank-3 { border-top-color: #5bb8e8; } .rank-4 { border-top-color: #8dbbd2; }
.chart-grid { margin-top: 18px !important; }
.portal-card { padding: 25px; }
.card-heading { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 18px; }
.card-heading h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.card-heading .eyebrow { margin-bottom: 6px; }
.chart-tag { color: var(--muted); font: 700 10px var(--font-display); letter-spacing: .12em; }
.chart-card canvas { max-height: 285px; }
.chart-card { min-height: 350px; }
.list-card { min-height: 235px; margin-bottom: 18px; }
.list-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 19px var(--font-display); }
.positive { color: var(--green); background: #e8f3ed; } .negative { color: var(--red); background: #f7e9e6; }
.list-group-item { padding: 14px 0; background: transparent; border-color: var(--line); color: var(--ink-soft); }
.list-group-item:last-child { border-bottom: 0; }
.empty-result { color: var(--muted); font-style: italic; }
.list-group-item .badge { border-radius: 2px; font-family: var(--font-display); font-weight: 700; padding: 6px 8px; }
.bg-success { background: var(--green) !important; } .bg-danger { background: var(--red) !important; }
.portal-footer { padding: 22px 0; color: #365f73; border-top: 1px solid var(--line); font: 600 10px var(--font-display); letter-spacing: .12em; text-align: center; }
.portal-footer span { color: var(--teal); margin: 0 8px; }
.auth-page { min-height: 100vh; background: var(--paper); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 42%) 1fr; }
.auth-aside { padding: 38px clamp(28px, 6vw, 86px); background: var(--navy); color: white; display: flex; flex-direction: column; }
.auth-brand { align-self: start; }
.auth-message { margin: auto 0; max-width: 420px; }
.auth-message h1 { color: white; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.auth-message p:not(.eyebrow) { color: #b7cacc; font-size: 18px; line-height: 1.55; margin-top: 22px; }
.auth-aside-footer { color: #a8cbd0; font-size: 13px; } .auth-aside-footer span { color: var(--teal-bright); margin: 0 8px; }
.auth-panel { display: grid; place-items: center; padding: 40px 24px; }
.auth-form-wrap { width: min(100%, 410px); }
.auth-form-wrap h2 { margin: 0; font-size: 31px; letter-spacing: -.05em; }
.form-intro { color: var(--muted); margin: 10px 0 32px; }
.form-label { color: var(--ink); font: 600 13px var(--font-display); }
.form-control, .form-select { min-height: 47px; border: 1px solid #cbd6d3; border-radius: 3px; background: var(--white); color: var(--ink); }
.form-control::placeholder { color: #477085; }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(164,73,54,.16); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.password-toggle:hover { background: var(--teal-pale); color: var(--teal); }
.password-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.btn-primary { min-height: 48px; background: var(--teal); border-color: var(--teal); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
.back-link { display: block; margin-top: 28px; color: var(--teal); font-size: 14px; }
.back-link:hover { color: var(--navy); }
.dashboard-header { background: var(--navy-deep); }
.dashboard-user { display: flex; align-items: center; gap: 11px; margin-left: auto; color: #c7d5d6; font-size: 14px; }
.user-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: #b7d5d1; font: 700 10px var(--font-display); }
.btn-logout { margin-left: 16px; padding: 8px 12px; border: 1px solid #5f737a; color: white; font-size: 12px; }
.btn-logout:hover { border-color: var(--red); background: var(--red); }
.dashboard-main { padding-top: 48px; }
.dashboard-intro { align-items: center; margin-bottom: 34px; }
.dashboard-intro h1 { font-size: clamp(2rem, 4vw, 3rem); }
.dashboard-intro p { font-size: 16px; }
.date-chip { flex-direction: column; align-items: start; min-width: 190px; border-left: 0; border-top: 2px solid var(--teal); }
.date-chip strong { margin-top: 5px; color: var(--ink); font: 600 12px var(--font-display); }
/* ─── Report Panel (Báo cáo định kỳ) ─── */
.report-panel {
  border: 1px solid #a8cde4;
  border-left: 5px solid var(--teal);
  background: linear-gradient(135deg, #edf7fd 0%, #f5fbff 100%);
  box-shadow: 0 4px 16px rgba(8,104,168,.09);
  padding: 24px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.report-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.report-panel__header h2 { margin: 2px 0 4px; font-size: 19px; }
.report-panel__header .eyebrow { margin-bottom: 2px; }
.report-panel__header p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 14px; }

.report-body { display: flex; flex-direction: column; gap: 14px; }

.report-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.report-field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.report-field .form-label { margin-bottom: 0; }
.report-field .form-select,
.report-field .form-control { min-height: 44px; }
.report-field small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.report-field--grow { flex: 1; min-width: 200px; }

.report-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.report-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
  border-radius: 4px;
  letter-spacing: .01em;
}
.report-btn--blue { background: var(--teal); border-color: var(--teal); color: #fff; }
.report-btn--blue:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.report-btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.report-btn--red:hover { background: #9b1c1c; border-color: #9b1c1c; color: #fff; }
.report-btn--outline { background: transparent; border: 1.5px solid var(--teal); color: var(--teal); }
.report-btn--outline:hover { background: var(--teal-pale); }
.report-extra-btns { display: flex; gap: 6px; margin-left: 4px; }
.report-extra-btns .btn { min-height: 44px; font-size: 13px; }

/* ─── Period Panel (Tuần + Khóa) ─── */
.period-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px !important;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.period-field { min-width: 145px; }
.period-field .form-label { display: block; margin-bottom: 6px; }
.period-status { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.lock-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 10px; border-radius: 3px; font: 600 12px var(--font-display); }
.lock-badge--open { color: var(--green); background: #e8f3ed; } .lock-badge--locked { color: var(--red); background: #f7e9e6; }
.lock-meta { font-size: 12px; color: var(--muted); font-family: var(--font-body); }
.lock-meta.ms-2 { margin-left: 0.5rem; }
.class-week-setup { margin-top: 8px; }
.management-panel { margin-bottom: 38px !important; border-left: 4px solid var(--navy); }
.management-panel .section-heading { margin-bottom: 20px; }
.leader-form { display: grid; grid-template-columns: 110px minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; }
.leader-form .btn { min-height: 47px; white-space: nowrap; }
.leader-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.leader-chip { padding: 10px 12px; border: 1px solid var(--line); background: #f5f8f6; color: var(--ink-soft); font-size: 13px; }
.leader-chip strong { color: var(--ink); font-family: var(--font-display); }
.class-leader-management { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.subsection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.subsection-heading .eyebrow { margin: 0; }
.subsection-heading strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.class-leader-management .leader-form { grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(180px, 1fr) auto; }
.class-leader-management .leader-chip { margin-top: 14px; }
.import-students { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .import-students small { color: var(--muted); } .import-row { display: flex; gap: 10px; } .import-row .form-control { min-height: 47px; }
.attendance-panel { margin-bottom: 38px; }
.attendance-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px); gap: 14px; margin-bottom: 18px; }
.attendance-table-shell .table { min-width: 760px; }
.attendance-table-shell .table td { vertical-align: middle; }
.btn-danger { background: var(--red); border-color: var(--red); color: white; min-height: 47px; } .btn-danger:hover { background: var(--navy); border-color: var(--navy); color: white; }
.student-section { padding-bottom: 50px; }
/* Student section header với ô tìm kiếm tích hợp */
.student-section-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.student-section-header > div:first-child { flex: 0 0 auto; }
.student-section-header h2 { margin: 2px 0 0; font-size: 20px; }
.student-section-header .eyebrow { margin-bottom: 0; }
.student-search-wrap { flex: 1; min-width: 200px; max-width: 420px; margin-left: auto; }
.student-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.student-search-icon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  pointer-events: none;
  line-height: 1;
}
.student-search-input {
  padding-left: 36px !important;
  border-radius: 22px !important;
  background: var(--white);
  border-color: #c8d8d4;
  min-height: 42px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.student-search-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(50, 155, 135, .14);
}
.student-search-wrap small { display: block; margin-top: 4px; padding-left: 4px; }

.table-shell { overflow-x: auto; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.table { min-width: 980px; margin-bottom: 0 !important; }
.table > :not(caption) > * > * { padding: 15px 17px; border-bottom-color: var(--line); }
.table thead th { color: var(--muted); background: #edf2ef; border-bottom: 2px solid #cfdbd7; font: 700 11px var(--font-display); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { color: var(--ink-soft); font-size: 15px; } .table tbody tr:hover { background: #f1f7f5; }
.table tbody td strong { color: var(--ink); font-family: var(--font-display); font-size: 14px; }
.table .text-danger { color: var(--red) !important; } .table .text-success { color: var(--green) !important; }
.table .btn-outline-primary { color: var(--teal); border-color: #92c8c2; font-size: 12px; } .table .btn-outline-primary:hover { color: white; background: var(--teal); border-color: var(--teal); }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 190px; }
.group-select { min-width: 82px; }

/* Section spacing improvements */
.portal-card {
  margin-bottom: 28px;
}
.portal-card:last-child {
  margin-bottom: 40px;
}

/* Student section improvements */
.student-section {
  padding-bottom: 40px;
}
.student-section .table {
  min-width: 1100px;
}
.student-section .table th { white-space: nowrap; }
.student-section .table .badge { font: 600 11px var(--font-display); padding: 4px 8px; border-radius: 3px; }

/* Improved card layout for dashboard */
.dashboard-main > section {
  margin-bottom: 28px;
}

/* Better section heading spacing */
.section-heading {
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-heading > div {
  flex-shrink: 0;
}
.section-helper {
  color: var(--muted);
  font-size: 13px;
}

/* Enhanced mobile responsive for table shells */
@media (max-width: 767px) {
  .table-shell {
    margin: 0 -12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .student-section .table {
    min-width: 720px;
  }
  .attendance-stats-panel .table {
    min-width: 620px;
  }
  .dashboard-main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Dashboard intro responsive */
@media (max-width: 767px) {
  .dashboard-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }
  .dashboard-intro > div {
    width: 100%;
  }
  .date-chip {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .date-chip strong {
    margin-top: 0;
  }
}
.record-history-list { display: grid; gap: 10px; }
.record-history-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: var(--white); }
.record-history-item strong, .record-history-item small { display: block; }
.record-history-item strong { color: var(--ink); font-size: 14px; }
.record-type-vipham { color: var(--red) !important; }
.record-type-thanh_tich { color: var(--green) !important; }
.record-history-item small { margin-top: 4px; color: var(--muted); }
.record-history-actions { display: flex; gap: 6px; flex-shrink: 0; }
.empty-message { margin: 0; color: var(--muted); }
.audit-list { display: grid; gap: 8px; } .audit-item { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; } .audit-item strong { color: var(--ink); font-family: var(--font-display); } .audit-item small { color: var(--muted); }
.png-report { position: fixed; left: -10000px; top: 0; width: 794px; min-height: 1123px; padding: 66px 70px; background: #fff; color: #111; font-family: Arial, sans-serif; }
.png-report__top { display: grid; grid-template-columns: 1fr 1.8fr; gap: 30px; text-align: center; font-size: 14px; line-height: 1.45; }
.png-report__top div, .png-report__top strong, .png-report__top u { display: block; }
.png-report h1 { margin: 58px 0 5px; color: #111; font: 700 23px Arial, sans-serif; text-align: center; letter-spacing: 0; }
.png-report > p { margin: 0 0 24px; text-align: center; font-style: italic; font-size: 14px; }
.png-report table { width: 100%; border-collapse: collapse; font-size: 13px; }
.png-report th, .png-report td { border: 1px solid #333; padding: 9px 10px; text-align: left; }
.png-report th:last-child, .png-report td:last-child { width: 28%; text-align: center; }
.png-group { margin-top: 28px; } .png-group + .png-group { break-before: page; } .png-group h2, .png-summary h2 { margin: 0 0 10px; color: #111; font: 700 16px Arial, sans-serif; text-align: center; }
.png-group td:first-child, .png-group th:first-child, .png-group td:last-child, .png-group th:last-child { width: auto; text-align: center; }
.png-summary { break-before: page; margin-top: 30px; } .png-summary > p { text-align: center; font-size: 14px; font-weight: 700; }
.png-report h3 { margin: 25px 0 12px; color: #111; font: 700 14px Arial, sans-serif; }
.png-report__line { border-bottom: 1px dotted #444; margin: 14px 0; }
.png-report__signature { width: 42%; margin: 46px 0 0 auto; text-align: center; font-size: 13px; line-height: 1.6; }
.png-report__signature strong { display: block; margin-top: 13px; }
.png-report__signature span { font-style: italic; }
.modal-content { border: 0; border-radius: 4px; box-shadow: 0 24px 60px rgba(10,31,45,.2); }
.modal-header { padding: 22px 24px; border-bottom: 1px solid var(--line); } .modal-header .eyebrow { margin-bottom: 5px; }
.modal-title { font-size: 20px; } .modal-body { padding: 24px; background: #fbfcf9; } .modal-body .form-label { margin-bottom: 7px; }
.btn-close:focus { box-shadow: 0 0 0 3px rgba(164,73,54,.16); }
.app-notice { position: fixed; z-index: 1080; top: 22px; right: 22px; display: flex; align-items: center; gap: 10px; width: min(380px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 4px; background: var(--white); color: var(--ink); box-shadow: 0 14px 35px rgba(20,43,61,.18); font-family: var(--font-display); font-size: 13px; opacity: 0; transform: translateY(-12px); transition: opacity .22s, transform .22s; }
.app-notice.is-visible { opacity: 1; transform: translateY(0); }
.app-notice--success { border-left-color: var(--green); }
.app-notice__icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #f7e9e6; color: var(--red); font-weight: 800; }
.app-notice--success .app-notice__icon { background: #e8f3ed; color: var(--green); }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
  .portal-header__inner { min-height: 68px; gap: 12px; } .header-meta { display: none; } .btn-header { padding: 8px 9px; font-size: 11px; }
  .portal-main { padding-top: 38px; } .page-intro, .dashboard-intro { display: block; margin-bottom: 35px; } .page-intro--public { min-height: 0; padding: 20px 0 34px; } .page-intro--public h1 { font-size: clamp(3.4rem, 18vw, 5.2rem); } .title-kicker { margin-bottom: 22px; } .intro-note, .date-chip { margin-top: 24px; width: 100%; } .intro-control-panel { width: 100%; margin-top: 28px; }
  .public-summary { grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; } .public-summary > div:nth-child(2) { border-right: 0; } .public-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .public-summary strong { font-size: 24px; }
  .section-helper { display: none; } .chart-card { margin-bottom: 18px; } .chart-card canvas { max-height: 240px; }
  .portal-footer { text-align: center; font-size: 9px; }
  .auth-shell { display: block; } .auth-aside { min-height: 260px; padding: 28px 24px; } .auth-message { margin: 45px 0 0; } .auth-message h1 { font-size: 2.4rem; } .auth-message p:not(.eyebrow), .auth-aside-footer { display: none; }
  .auth-panel { min-height: calc(100vh - 260px); padding: 42px 24px; align-items: start; }
  .dashboard-header .brand-lockup small { display: none; } .brand-mark { width: 46px; height: 46px; min-width: 46px; flex-basis: 46px; } .dashboard-user { gap: 7px; font-size: 11px; } .user-avatar { display: none; } .btn-logout { margin-left: 4px; padding: 7px; font-size: 0; } .btn-logout span { font-size: 14px; }
  .dashboard-main { padding-top: 34px; } .report-panel, .management-panel, .period-panel, .attendance-panel { display: block; } .report-panel { padding: 20px; } .report-controls, .leader-form, .attendance-controls { display: grid; grid-template-columns: 1fr; margin-top: 18px; } .report-controls .col-auto:first-child { width: 100%; } .report-controls > .col-auto { width: 100%; } .report-controls > .col-auto:last-child { justify-content: stretch; } .report-controls > .col-auto:last-child .btn { flex: 1 1 100%; } .leader-form, .class-leader-management .leader-form, .attendance-controls { display: grid; grid-template-columns: 1fr; } .leader-form .btn { width: 100%; } .leader-list { grid-template-columns: 1fr; } .period-search { max-width: none; margin-top: 12px; } .period-status { justify-content: space-between; margin: 16px 0 0; } .import-row { display: grid; grid-template-columns: 1fr; } .subsection-heading { display: block; } .subsection-heading strong { display: block; margin-top: 6px; }
}

/* VNEDU-inspired public portal refresh */
:root { --ink:#172e67; --ink-soft:#526483; --navy:#2457c5; --navy-deep:#173b8f; --teal:#2f6fe4; --teal-bright:#78a8ff; --teal-pale:#eaf0ff; --paper:#f4f7ff; --line:#dbe5fb; --green:#15966b; --red:#d35268; --shadow:0 14px 34px rgba(27,70,157,.10); --font-display:'Be Vietnam Pro',sans-serif; --font-body:'Be Vietnam Pro',sans-serif; }
body { background:var(--paper); color:var(--ink); }
.portal-header { position:relative; overflow:hidden; background:linear-gradient(112deg,#173b8f 0%,#2457c5 58%,#2f6fe4 100%); border-bottom:0; box-shadow:0 2px 12px rgba(23,59,143,.2); }
.portal-header::after,.auth-aside::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.58) 1px,transparent 1.5px); background-size:18px 18px; mask-image:linear-gradient(90deg,transparent,black); }
.portal-header__inner { position:relative; z-index:1; min-height:78px; }.brand-lockup small { color:#d9e6ff; }.brand-mark { background:#fff; border:3px solid rgba(255,255,255,.42); box-shadow:0 5px 15px rgba(5,33,105,.24); }.header-meta { color:#e5edff; }.status-dot { background:#80e6c4; box-shadow:0 0 0 4px rgba(128,230,196,.18); }.btn-header { border-radius:8px; background:#fff; border-color:#fff; color:var(--navy-deep); box-shadow:0 4px 12px rgba(5,33,105,.15); }.btn-header:hover { background:#eaf0ff; border-color:#eaf0ff; color:var(--navy-deep); }
.portal-main { padding-top:34px; }.page-intro--public { position:relative; min-height:300px; padding:48px 44px; overflow:hidden; align-items:center; border:0; border-radius:16px; background:linear-gradient(116deg,#e9f0ff 0%,#f9fbff 50%,#e5edff 100%); box-shadow:inset 0 0 0 1px rgba(88,130,219,.12); }.page-intro--public::before { content:''; position:absolute; width:440px;height:440px;right:-130px;top:-200px;border-radius:50%;background:radial-gradient(circle,#85aeff 0 2px,transparent 3px);background-size:20px 20px;opacity:.65; }.public-title-block,.intro-control-panel{position:relative;z-index:1}.page-intro--public h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.13;letter-spacing:-.055em}.page-intro--public h1 em{color:var(--teal)}.eyebrow{color:var(--teal);letter-spacing:.1em;font-size:11px}.intro-copy{color:#405980;max-width:590px}.intro-control-panel{border:0;border-radius:12px;width:290px;padding:20px;background:rgba(255,255,255,.88);box-shadow:0 12px 30px rgba(31,76,164,.15)}.intro-control-panel .intro-note{margin:0;padding:0;border:0}.note-icon{color:var(--teal);border-color:#b9cdfa;background:#edf3ff}.network-strip{display:flex;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.network-strip span{height:6px;flex:1;border-radius:6px;background:#bfd2ff}.network-strip span:nth-child(2),.network-strip span:nth-child(4){background:var(--teal)}
.public-summary { border:0;border-radius:14px;box-shadow:var(--shadow);margin:0 0 48px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr); }.public-summary>div{border-color:var(--line);min-height:120px;border-right:1px solid var(--line);}.public-summary > div:last-child{border-right:0;}.public-summary strong{color:var(--navy-deep)}#summary-score strong, #summary-score small { color: var(--green) }#summary-positive strong, #summary-positive small { color: var(--green) }#summary-negative strong, #summary-negative small { color: var(--red) }.summary-label{color:var(--ink)}.section-heading h2,.card-heading h3{color:var(--navy-deep)}.section-rule{background:var(--line)}.card-rank,.portal-card{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.card-rank{border-top-width:4px}.rank-score{color:var(--navy-deep)}.rank-meter{background:#e9effc}.rank-meter span{background:linear-gradient(90deg,var(--teal),#78a8ff)}.rank-stats .text-success strong{color:var(--green)}.rank-stats .text-danger strong{color:var(--red)}.chart-tag{padding:5px 8px;background:#eef3ff;border-radius:5px;color:var(--teal)}.positive{background:#e6f7f0;color:var(--green)}.negative{background:#fff0f2;color:var(--red)}.accent-green{color:var(--green)}.accent-red{color:var(--red)}.bg-success{background:var(--green)!important}.bg-danger{background:var(--red)!important}.portal-footer{color:#64779b;border-color:var(--line)}
.auth-page{background:#f4f7ff}.auth-aside{position:relative;overflow:hidden;background:linear-gradient(145deg,#173b8f,#2457c5 58%,#3d76e5);}.auth-aside>*{position:relative;z-index:1}.auth-message h1 em{color:#b9d0ff}.auth-message p:not(.eyebrow){color:#dce8ff}.auth-network{width:260px;height:90px;margin-top:36px;position:relative;border-top:1px solid rgba(255,255,255,.38)}.auth-network::before{content:'';position:absolute;top:0;left:16px;width:190px;height:1px;background:rgba(255,255,255,.52);transform:rotate(18deg);transform-origin:left}.auth-network i{position:absolute;width:9px;height:9px;border-radius:50%;background:#8be4d1;box-shadow:0 0 0 6px rgba(139,228,209,.12)}.auth-network i:nth-child(1){top:-5px;left:15px}.auth-network i:nth-child(2){top:22px;left:66px}.auth-network i:nth-child(3){top:30px;left:132px}.auth-network i:nth-child(4){top:55px;left:195px}.auth-network i:nth-child(5){top:70px;left:232px}.auth-network i:nth-child(6){top:8px;left:220px;background:#fff}.auth-panel{background:linear-gradient(145deg,#fff,#f5f8ff)}.auth-form-wrap{padding:12px}.auth-panel-logo{display:flex;align-items:center;gap:9px;margin-bottom:34px;color:#63779c;font-size:10px;font-weight:700;letter-spacing:.1em}.auth-panel-logo img{width:30px;height:30px;object-fit:contain}.auth-form-wrap h2{font-size:32px;color:var(--navy-deep)}.form-control,.form-select{border-color:#cfdcf5;border-radius:8px}.form-control:focus,.form-select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,111,228,.14)}.btn-primary{border-radius:8px;background:var(--teal);border-color:var(--teal);box-shadow:0 8px 18px rgba(47,111,228,.24)}.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}.back-link{color:var(--teal)}
@media (max-width:767px){.page-intro--public{padding:34px 24px;border-radius:0;margin-left:-12px;margin-right:-12px}.public-summary{margin:-14px 0 40px}.intro-control-panel{width:100%}.auth-network{display:none}.auth-panel-logo{margin-bottom:25px}.auth-aside{min-height:245px}.auth-message{margin-top:35px}.auth-message h1{font-size:2.2rem}}

/* Keep the portal usable on narrow phones: every flex/grid child may shrink. */
html, body { max-width:100%; }
.auth-form-wrap { width:100%; max-width:410px; min-width:0; }
@media (max-width:767px) {
  .container, .portal-main, .auth-shell, .auth-panel, .auth-form-wrap,
  .page-intro--public, .public-title-block, .intro-control-panel,
  .public-summary, .portal-card, .card-rank, .row > * { min-width:0; max-width:100%; }
  .portal-header__inner { display:flex; min-height:72px; gap:8px; flex-wrap:nowrap; }
  .portal-header__inner .brand-lockup { min-width:0; flex:1 1 auto; gap:8px; }
  .portal-header__inner .brand-lockup > span:last-child { min-width:0; }
  .portal-header__inner .brand-lockup small { display:none; }
  .portal-header__inner .brand-mark { width:42px; height:42px; min-width:42px; flex-basis:42px; }
  .portal-header__inner .btn-header { flex:0 0 auto; min-height:44px; padding:10px 11px; font-size:12px; white-space:nowrap; }
  .page-intro--public { width:calc(100% + 24px); max-width:none; margin-left:-12px; margin-right:-12px; }
  .public-title-block, .intro-control-panel, .intro-note, .intro-note > span:last-child { min-width:0; max-width:100%; }
  .intro-copy, .intro-note small, .auth-message p, .form-intro, .back-link { overflow-wrap:anywhere; }
  .auth-panel { width:100%; padding:38px 24px; overflow:hidden; }
  .auth-form-wrap { padding:0; }
  .form-control, .form-select, .password-field, .btn-primary { width:100%; max-width:100%; }
  .row { --bs-gutter-x:1.25rem; }
  .chart-card canvas { width:100% !important; max-width:100%; }
}
@media (max-width:359px) {
  .portal-header__inner .brand-lockup strong { font-size:12px; }
  .portal-header__inner .btn-header { padding:10px 8px; font-size:11px; }
  .page-intro--public { padding-left:20px; padding-right:20px; }
  .auth-aside, .auth-panel { padding-left:20px; padding-right:20px; }
}

/* Phone layout is deliberately contained — no full-bleed math or implicit grid widths. */
@media (max-width:767px) {
  body.public-page, body.auth-page { width:100%; overflow-x:visible; }
  .public-page .container { width:100%; max-width:none; margin-left:auto; margin-right:auto; padding-left:12px; padding-right:12px; }
  .public-page .portal-main { width:100%; max-width:none; padding-left:12px; padding-right:12px; }
  .public-page .page-intro--public { display:block; width:auto; max-width:none; margin:0 0 35px; padding:34px 24px; border-radius:14px; }
  .public-page .intro-control-panel { display:block; width:100%; max-width:none; margin:24px 0 0; }
  .public-page .public-summary { display:grid; width:100%; max-width:none; margin:-14px 0 40px; }
  .public-page .row { width:auto; max-width:none; margin-left:-10px; margin-right:-10px; }
  .public-page .row > * { width:100%; max-width:100%; padding-left:10px; padding-right:10px; }
  .public-page .portal-header__inner { display:grid; grid-template-columns:minmax(0,1fr) max-content; width:100%; max-width:none; padding-left:12px; padding-right:12px; }
  .public-page .portal-header__inner .brand-lockup { width:auto; overflow:hidden; }
  .public-page .portal-header__inner .brand-lockup strong { white-space:nowrap; }
  .public-page .portal-header__inner .btn-header { display:inline-flex; align-items:center; justify-content:center; margin-left:0 !important; }
  .auth-shell, .auth-aside, .auth-panel { width:100%; max-width:none; min-width:0; }
  .auth-panel { display:block; padding:42px 24px; }
  .auth-form-wrap { width:100%; max-width:410px; margin:0 auto; }
}
@media (max-width:359px) {
  .public-page .portal-header__inner { grid-template-columns:minmax(0,1fr) 94px; }
  .public-page .portal-header__inner .btn-header { width:94px; }
  .public-page .portal-header__inner .brand-mark { width:38px; height:38px; min-width:38px; flex-basis:38px; }
}

/* ===== Period Timeline Attendance ===== */
.period-timeline {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.period-chip {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.period-chip:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}
.period-chip__time {
  display: block;
  color: var(--muted);
  font: 600 10px var(--font-display);
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.period-chip__label {
  display: block;
  color: var(--ink);
  font: 700 13px var(--font-display);
  margin-bottom: 6px;
}
.period-chip__status {
  display: inline-block;
  min-width: 70px;
  padding: 3px 8px;
  border-radius: 99px;
  font: 700 10px var(--font-display);
  text-align: center;
}
.period-chip--present { border-color: #b8e6d0; background: #f0faf5; }
.period-chip--present .period-chip__status { color: var(--green); background: #d9f2e6; }
.period-chip--late { border-color: #f5d9a8; background: #fffaf0; }
.period-chip--late .period-chip__status { color: #b07d1f; background: #fdf0d5; }
.period-chip--excused { border-color: #b8d4f0; background: #f2f8ff; }
.period-chip--excused .period-chip__status { color: #2f6fb0; background: #dcebfa; }
.period-chip--unexcused { border-color: #f0b8c0; background: #fff2f3; }
.period-chip--unexcused .period-chip__status { color: var(--red); background: #fadfe3; }

/* ===== Record Modal Redesign ===== */
.record-form { margin: 0; }
.record-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}
.record-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.record-type-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.type-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.type-btn {
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font: 600 13px var(--font-display);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.type-btn:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}
.type-btn.active {
  border-color: var(--teal);
  background: var(--teal-pale);
  color: var(--navy-deep);
}
.type-btn--vipham.active {
  border-color: var(--red);
  background: #fff0f2;
  color: var(--red);
}
.type-btn--thanh_tich.active {
  border-color: var(--green);
  background: #f0faf5;
  color: var(--green);
}
.record-presets {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.preset-btn {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font: 500 12px var(--font-display);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.preset-btn:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
  transform: translateY(-1px);
}
.preset-btn--success {
  border-color: #b8e6d0;
  background: #f0faf5;
}
.preset-btn--success:hover {
  border-color: var(--green);
  background: #d9f2e6;
}
.record-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.point-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.point-btn {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font: 600 13px var(--font-display);
  cursor: pointer;
  transition: all .15s;
}
.point-btn:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}
.point-btn.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}
.record-main .form-label {
  margin-bottom: 6px;
}
.record-main textarea {
  min-height: 80px;
  resize: vertical;
}

@media (max-width: 767px) {
  .period-timeline {
    flex-wrap: wrap;
  }
  .period-chip {
    min-width: calc(50% - 6px);
    flex: 1 1 calc(50% - 6px);
  }
  .record-layout {
    grid-template-columns: 1fr;
  }
  .record-sidebar {
    order: -1;
  }
  .preset-grid {
    grid-template-columns: 1fr 1fr;
  }
  .attendance-table-shell .table {
    min-width: 620px;
  }
}
.attendance-panel { position: relative; }
.session-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; font: 700 12px var(--font-display); letter-spacing: .04em; }
.session-badge--pe { color: #1a7a3c; background: #e8f3ed; border: 1px solid #b8dcc4; }
.session-badge--topic { color: #1f3864; background: #e8eef8; border: 1px solid #b8c8e0; }
.attendance-panel.session-pe { border-left: 4px solid #1a7a3c; }
.attendance-panel.session-topic { border-left: 4px solid #1f3864; }
.attendance-badge { display: inline-block; min-width: 80px; padding: 5px 10px; border-radius: 4px; font: 600 12px var(--font-display); cursor: pointer; transition: transform .15s; }
.attendance-badge:hover { transform: scale(1.05); }
.attendance-table-shell .table td { vertical-align: middle; cursor: pointer; }
.attendance-table-shell .table td input { cursor: text; }
.attendance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.attendance-tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; transition: border-color .2s, box-shadow .2s; }
.attendance-tile--present { border-left: 4px solid #1a7a3c; }
.attendance-tile--late { border-left: 4px solid #f0ad4e; }
.attendance-tile--excused { border-left: 4px solid #2f6fb0; }
.attendance-tile--unexcused { border-left: 4px solid #c0392b; }
.attendance-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.attendance-quick-input {
  flex: 1;
  min-width: 260px;
}
.attendance-quick-input .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}
.quick-input-row {
  display: flex;
  gap: 8px;
}
.quick-input-row .form-control {
  min-height: 40px;
  font-size: 13px;
}
.quick-input-row .btn {
  min-height: 40px;
  white-space: nowrap;
}
.attendance-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef3fb;
}
.btn-view {
  padding: 6px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 600 12px var(--font-display);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn-view:hover { color: var(--teal); }
.btn-view.active {
  background: var(--white);
  color: var(--teal);
  box-shadow: 0 2px 6px rgba(31,76,164,.12);
}
.attendance-grid-shell {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.attendance-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.attendance-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31,76,164,.1);
}
.attendance-tile strong {
  color: var(--ink);
  font: 600 13px var(--font-display);
  line-height: 1.3;
}
.attendance-tile small {
  color: var(--muted);
  font-size: 11px;
}
.attendance-tile__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font: 700 11px var(--font-display);
}
.attendance-tile__reason {
  margin-top: 6px;
  min-height: 34px;
  font-size: 12px;
}
.attendance-tile--present { border-color: #b8e6d0; background: #f0faf5; }
.attendance-tile--present .attendance-tile__status { color: var(--green); background: #d9f2e6; }
.attendance-tile--late { border-color: #f5d9a8; background: #fffaf0; }
.attendance-tile--late .attendance-tile__status { color: #b07d1f; background: #fdf0d5; }
.attendance-tile--excused { border-color: #b8d4f0; background: #f2f8ff; }
.attendance-tile--excused .attendance-tile__status { color: #2f6fb0; background: #dcebfa; }
.attendance-tile--unexcused { border-color: #f0b8c0; background: #fff2f3; }
.attendance-tile--unexcused .attendance-tile__status { color: var(--red); background: #fadfe3; }
.attendance-stats-panel {
  margin-bottom: 38px;
  border-left: 4px solid var(--teal);
}
.attendance-stats-panel .table { min-width: 720px; }
.attendance-stats-panel .text-warning { color: #b07d1f !important; }
.attendance-stats-panel .text-info { color: #2f6fb0 !important; }

/* Student table improvements */
.student-section .table { min-width: 1100px; }
.student-section .table th { white-space: nowrap; }
.student-section .table .badge { font: 600 11px var(--font-display); padding: 4px 8px; border-radius: 3px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 190px; }
.table-actions .btn { font-size: 12px; padding: 6px 10px; }

/* ===== Responsive mobile cải thiện ===== */
@media (max-width: 767px) {
  .attendance-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .attendance-quick-actions {
    width: 100%;
  }
  .attendance-quick-actions .btn {
    flex: 1 1 auto;
  }
  .attendance-quick-input {
    min-width: 0;
    width: 100%;
  }
  .quick-input-row {
    flex-direction: column;
  }
  .quick-input-row .btn {
    width: 100%;
  }
  .attendance-grid-shell {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .attendance-tile {
    padding: 10px 12px;
  }
  .attendance-stats-panel .table-shell {
    overflow-x: auto;
  }
  .attendance-stats-panel .table {
    min-width: 620px;
  }
  .dashboard-user {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .dashboard-user .btn-header {
    padding: 7px 9px;
    font-size: 11px;
  }
  .dashboard-user #user-info {
    width: 100%;
    text-align: right;
    order: -1;
  }
  .period-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .period-field {
    min-width: 0;
    width: 100%;
  }
  .period-status {
    justify-content: flex-start;
    margin: 4px 0 0;
  }
  .period-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .period-field {
    min-width: 0;
    width: 100%;
  }
  /* Report panel responsive */
  .report-panel { padding: 18px 16px; }
  .report-fields { flex-direction: column; }
  .report-field,
  .report-field--grow { width: 100%; min-width: 0; }
  .report-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .report-btn { width: 100%; justify-content: center; }
  .report-extra-btns { margin-left: 0; }
  .report-extra-btns .btn { flex: 1; }
  /* Student search responsive */
  .student-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .student-search-wrap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  /* Leader forms responsive */
  .leader-form,
  .class-leader-management .leader-form {
    grid-template-columns: 1fr;
  }
  .leader-form .btn {
    width: 100%;
  }
  .leader-list {
    grid-template-columns: 1fr;
  }
  .import-row {
    flex-direction: column;
  }
  .import-row .form-control,
  .import-row .btn {
    width: 100%;
  }
  .table-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .table-actions .btn {
    width: 100%;
  }
  .record-history-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .record-history-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .audit-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-header {
    padding: 18px;
  }
  .attendance-table-shell .table {
    min-width: 620px;
  }
  .student-section .table {
    min-width: 720px;
  }
  /* Dashboard intro responsive */
  .dashboard-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dashboard-intro .date-chip {
    width: 100%;
  }
  /* Management panel responsive */
  .management-panel .leader-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .management-panel .leader-form > div {
    width: 100%;
  }
  .leader-form .btn { width: 100%; }
  .leader-list { grid-template-columns: 1fr; }
  .class-leader-management .leader-form { grid-template-columns: 1fr; }
  .import-row { flex-direction: column; }
  .import-row .form-control, .import-row .btn { width: 100%; }
  /* Attendance panel responsive */
  .attendance-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .attendance-controls > div { width: 100%; }
}
@media (max-width: 480px) {
  .attendance-grid-shell {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .attendance-tile strong {
    font-size: 12px;
  }
  .attendance-tile small {
    font-size: 10px;
  }
  .dashboard-user .btn-header {
    font-size: 10px;
    padding: 6px 7px;
  }
  .dashboard-user .btn-logout {
    font-size: 0;
    padding: 7px;
  }
  .dashboard-user .btn-logout span {
    font-size: 13px;
  }
}

/* Mức Rèn Luyện (Thông tư 22 & Điều 4) */
.badge-rating-xuatsac {
  background: linear-gradient(135deg, #057a55, #0e9f6e);
  color: #ffffff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(14, 159, 110, 0.25);
}
.badge-rating-tot {
  background-color: #15966b;
  color: #ffffff;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 4px;
}
.badge-rating-kha {
  background-color: #0877bd;
  color: #ffffff;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 4px;
}
.badge-rating-dat {
  background-color: #d97706;
  color: #ffffff;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 4px;
}
.badge-rating-chuadat {
  background-color: #e02424;
  color: #ffffff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  animation: pulse 2s infinite;
}

/* Hộp xem trước Báo Cáo Sơ Kết */
.soket-report-preview-container {
  max-height: 600px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #c9dbe9;
  border-radius: 8px;
  padding: 24px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}
.soket-report-pre {
  margin: 0;
  font-family: 'Be Vietnam Pro', 'Source Sans 3', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1f2937;
}
.soket-report-pre h1 {
  font-size: 22px;
  font-weight: 800;
  color: #0868a8;
  text-align: center;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}
.soket-report-pre h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0868a8;
  margin: 16px 0 8px 0;
  border-bottom: 2px solid #0868a8;
  padding-bottom: 4px;
}
.soket-report-pre h3 {
  font-size: 14px;
  font-weight: 600;
  color: #17324d;
  margin: 12px 0 6px 0;
}
.soket-report-pre strong { font-weight: 700; }
.soket-report-pre em { font-style: italic; }
.soket-report-pre table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 12px;
}
.soket-report-pre th, .soket-report-pre td {
  border: 1px solid #c9dbe9;
  padding: 8px 10px;
  text-align: left;
}
.soket-report-pre th {
  background: #e8f3fb;
  font-weight: 700;
  color: #17324d;
}
.soket-report-pre td { color: #284d6d; }
.soket-report-pre tr:nth-child(even) td { background: #f8fbff; }
.soket-report-pre .text-success { color: #0e9f6e !important; font-weight: 600; }
.soket-report-pre .text-danger { color: #b33f3f !important; font-weight: 600; }
.soket-report-pre .text-warning { color: #d97706 !important; }
.soket-report-pre .text-primary { color: #0868a8 !important; }
.soket-report-pre ul { margin: 6px 0; padding-left: 20px; }
.soket-report-pre li { margin: 3px 0; }

/* Khóa gỡ điểm */
.disabled-lock {
  cursor: not-allowed !important;
  opacity: 0.65;
  border: 1px dashed #e02424 !important;
}