/* modal.css — Modal overlay (Quản lý học sinh / Quản trị tài khoản) + panel quay-lại cho thao tác nhanh.
   Bố cục khớp ảnh Source-image/Giao diện/1-1.2 và 1-2. */

/* ===== Modal overlay ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(40, 10, 25, .45);
  z-index: 1050; display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 16px; overflow: auto;
  animation: fadeIn .22s ease both;
}
.modal-box {
  background: var(--d-surface, #fff); border-radius: 16px; width: 100%; max-width: 800px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden;
  animation: scaleInM .2s ease both;
}
.modal-box-wide { max-width: 1400px; }
.modal-overlay.closing {
  animation: fadeOut .18s ease forwards;
  pointer-events: none;
}
.modal-overlay.closing .modal-box {
  animation: scaleOutM .18s ease forwards;
}
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; color: #fff; }
.modal-head.pink { background: linear-gradient(90deg, #e91e63, #f06292); }
.modal-head.blue { background: linear-gradient(90deg, #1e88e5, #42a5f5); }
.modal-head.orange { background: linear-gradient(90deg, #FF9800, #F57C00); }
.modal-title { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.modal-tabs { display: flex; gap: 6px; margin-left: 12px; flex-wrap: wrap; }
.modal-tab { background: rgba(255, 255, 255, .22); color: #fff; border: none; border-radius: 20px; padding: 4px 13px; font-weight: 700; font-size: .8rem; cursor: pointer; }
.modal-head.pink .modal-tab.active { background: var(--d-surface, #fff); color: #e91e63; }
.modal-head.blue .modal-tab.active { background: var(--d-surface, #fff); color: #1e88e5; }
.modal-head.orange .modal-tab.active { background: var(--d-surface, #fff); color: #FF9800; }
.modal-close { margin-left: auto; background: transparent; border: none; color: #fff; font-size: 1.15rem; cursor: pointer; line-height: 1; }
.modal-body { padding: 16px 18px; }

/* form gọn trong modal */
.mform-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mform-row .fld { display: flex; flex-direction: column; gap: 3px; }
.mform-row .fld label { font-size: .72rem; color: #6b7280; font-weight: 600; }
.mform-row .fld input, .mform-row .fld select {
  border: 1px solid #f0c4d6; border-radius: 10px; padding: 7px 10px; font-size: .85rem; outline: none;
}
.mform-row .fld input:focus, .mform-row .fld select:focus { border-color: #e91e63; }
.mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-pill { border: none; border-radius: 16px; padding: 5px 14px; font-weight: 700; font-size: .8rem; cursor: pointer; background: #e5e7eb; color: #6b7280; }
.mode-pill.active { background: #43a047; color: #fff; }

.btn-save-pink { background: linear-gradient(135deg, #e91e63, #c2185b); color: #fff; border: none; border-radius: 14px; padding: 9px 22px; font-weight: 800; }
.btn-import { background: #ff7a18; color: #fff; border: none; border-radius: 18px; padding: 7px 16px; font-weight: 700; font-size: .85rem; }
.btn-del-multi { background: #ec4899; color: #fff; border: none; border-radius: 18px; padding: 7px 16px; font-weight: 700; font-size: .85rem; }
.btn-soft { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; border-radius: 14px; padding: 6px 14px; font-weight: 700; font-size: .82rem; }

.mtable { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mtable thead th { color: #be185d; font-size: .74rem; text-transform: uppercase; padding: 9px 10px; border-bottom: 2px solid #f3d3e0; text-align: left; }
.mtable.blue thead th { color: #1565c0; border-bottom-color: #bbdefb; }
.mtable tbody td { padding: 9px 10px; border-bottom: 1px solid #f5e3eb; font-size: .88rem; }
.mtable .empty { text-align: center; color: #c98aa8; padding: 22px 0; }

/* ===== Lưới thu/nợ (views/payments.js) — xanh = đã thu, trắng = chưa thu ===== */
.pay-cell {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid #d1d5db; background: var(--d-surface, #fff); color: transparent;
  font-weight: 800; line-height: 1; transition: transform .15s, background .15s;
}
.pay-cell:hover { transform: scale(1.12); border-color: #16a34a; }
.pay-cell.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.pay-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.pay-pill { border-radius: 20px; padding: 5px 14px; font-weight: 700; font-size: .82rem; }
.pay-pill.paid { background: #dcfce7; color: #15803d; }
.pay-pill.owe  { background: #fee2e2; color: #b91c1c; }
.pay-pill.old  { background: #ffedd5; color: #9a3412; }
/* ===== Hộp thoại xác nhận (thay confirm — confirm() bị auto-dismiss = trả false) ===== */
.confirm-overlay { z-index: 2100; align-items: center; }
.confirm-box { max-width: 460px; animation: scaleInM .18s ease both; }
.confirm-msg { font-size: .92rem; color: #374151; line-height: 1.55; white-space: pre-wrap; max-height: 52vh; overflow: auto; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ===== Toast (thay alert — luôn hiện, không bị môi trường chặn) ===== */
.toast-host {
  position: fixed; right: 16px; bottom: 84px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--d-surface, #fff); border-left: 5px solid #16a34a; border-radius: 12px;
  padding: 11px 16px; font-size: .88rem; font-weight: 600; color: #1f2937;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-width: 340px;
  animation: toastSlideIn .25s ease both;
}
.toast-item.error { border-left-color: #dc2626; }
.toast-item.info { border-left-color: #2563eb; }
@keyframes toastSlideOut { to { transform: translateX(120%); opacity: 0; } }

/* ===== Quick Menu ⚡ (nút nổi + bảng chức năng) ===== */
.qm-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: grab;
  background: var(--d-pill-grad, linear-gradient(135deg, #f06292, #ba68c8));
  color: #fff; font-size: 1.4rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); touch-action: none; user-select: none;
}
.qm-fab:active { cursor: grabbing; transform: scale(.94); }
.qm-sheet {
  position: fixed; inset: 0; z-index: 1250; background: rgba(40, 10, 25, .45);
  display: flex; align-items: flex-end; justify-content: center; padding: 20px;
}
.qm-panel {
  background: var(--d-surface, #fff); border-radius: 18px; width: 100%; max-width: 460px;
  max-height: 82vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  animation: slideUp .22s ease both;
}
.qm-head {
  position: sticky; top: 0; background: var(--d-pill-grad, linear-gradient(90deg, #e91e63, #f06292));
  color: #fff; font-weight: 800; padding: 12px 16px; display: flex; align-items: center; gap: 8px;
}
.qm-head small { font-weight: 600; opacity: .85; font-size: .74rem; }
.qm-close { margin-left: auto; background: transparent; border: none; color: #fff; font-size: 1.05rem; cursor: pointer; }
.qm-body { padding: 14px 16px 18px; }
.qm-group { margin-bottom: 14px; }
.qm-group-label { font-size: .78rem; font-weight: 800; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; }
.qm-count { background: #f3f4f6; color: #6b7280; border-radius: 10px; padding: 1px 7px; font-size: .68rem; }
.qm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qm-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid #eee; background: #fafafa; border-radius: 12px;
  padding: 10px 12px; font-size: .86rem; font-weight: 600; cursor: pointer; color: #374151;
}
.qm-item:hover { border-color: #f472b6; background: #fff5f9; }
.qm-hide { width: 100%; border: 1px dashed #fca5a5; background: #fff5f5; color: #b91c1c; border-radius: 12px; padding: 9px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.qm-note { font-size: .74rem; color: #9ca3af; text-align: center; margin-top: 8px; }

/* hàng lựa chọn xuất dữ liệu (tab XUẤT DATA) */
.exp-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid #d9f2ef; background: #f6fefc; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}

/* ===== Lịch dạy ===== */
.sc-grid .sc-head, .sc-grid .sc-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sc-grid .sc-head > div {
  text-align: center; font-weight: 800; font-size: .74rem; color: #be185d;
  text-transform: uppercase; padding: 6px 0;
}
.sc-cell {
  min-height: 84px; border: 1px solid #f5e3eb; border-radius: 10px; padding: 4px 5px;
  background: var(--d-surface, #fff); cursor: pointer; overflow: hidden;
}
.sc-cell:hover { border-color: #f472b6; }
.sc-cell.out { background: #fafafa; opacity: .55; }
.sc-cell.today { border-color: #e91e63; box-shadow: 0 0 0 2px rgba(233, 30, 99, .12); }
.sc-date { font-size: .72rem; font-weight: 800; color: #9ca3af; margin-bottom: 3px; }
.sc-chip {
  font-size: .68rem; border-radius: 6px; padding: 2px 5px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.sc-chip.st-todo { background: #fef3c7; color: #92400e; }
.sc-chip.st-done { background: #dcfce7; color: #15803d; }
.sc-chip.st-off  { background: #fee2e2; color: #b91c1c; text-decoration: line-through; }
.sc-grid.week .sc-cell { min-height: 190px; }
.sc-repeat { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 10px 14px; }
@media (max-width: 640px) {
  .sc-cell { min-height: 64px; }
  .sc-grid.week .sc-cell { min-height: 120px; }
}

/* ô nhập trong bảng Nhận xét */
.rv-in { width: 100%; border: 1px solid #f0c4d6; border-radius: 8px; padding: 5px 8px; font-size: .85rem; outline: none; }
.rv-in:focus { border-color: #e91e63; }
.rv-in.wide { min-width: 200px; }

/* ===== Điểm danh hàng loạt: lưới HS × ngày ===== */
.batch-hint { font-size: .8rem; color: #6b7280; margin: 10px 0 4px; }
.batch-wrap { overflow: auto; max-height: 52vh; border: 1px solid #f0d7e3; border-radius: 12px; }
.batch-table { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.batch-table th, .batch-table td { padding: 4px 5px; text-align: center; border-bottom: 1px solid #f5e3eb; }
.batch-table thead th { position: sticky; top: 0; background: #fdf2f8; color: #900C3F; font-weight: 800; z-index: 2; }
.batch-table thead th small { display: block; font-weight: 600; color: #c98aa8; font-size: .62rem; }
.batch-table th.sun, .batch-table td.sun { background: #fff1f2; }
.batch-table thead th.sun { color: #EF5350; }
.batch-table .sticky-col {
  position: sticky; left: 0; background: var(--d-surface, #fff); text-align: left; font-weight: 700;
  min-width: 120px; max-width: 150px; z-index: 3; border-right: 1px solid #f0d7e3;
}
.batch-table thead .sticky-col { z-index: 4; background: #fdf2f8; }
.bx {
  width: 34px; height: 34px; border-radius: 6px; cursor: pointer;
  border: 1px solid #F0F0F0; background: #FAFAFA; padding: 0;
  font-size: .75rem; color: #9ca3af; position: relative;
}
.bx:hover { border-color: #16a34a; }
.bx.on { background: #16a34a; border-color: #16a34a; }
.bx.on::after { content: '✓'; color: #fff; font-size: .82rem; font-weight: 800; }
.bx:not(.on)::after { content: '—'; color: #9ca3af; font-size: .75rem; }

/* ===== Cấu hình ngân hàng / QR (tab INFO) ===== */
.bank-box { border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.bank-box.primary { border-color: #16a34a; background: #f0fdf4; }
.bank-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; font-size: .9rem; }
/* Nút Lưu nằm TRÊN khu này, nên preview phình ra cũng không đẩy nút đi đâu. */
.qr-preview-title { font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: 4px; }
.qr-preview {
  text-align: center; padding: 6px 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.qr-preview img { border: 1px solid #e5e7eb; border-radius: 10px; background: var(--d-surface, #fff); padding: 4px; }

/* nhãn nhỏ cạnh học phí trong danh sách HS */
.fee-tag { border-radius: 10px; padding: 1px 7px; font-size: .68rem; font-weight: 800; }
.fee-tag.fixed { background: #ede9fe; color: #6d28d9; }
.fee-tag.b { background: #e0f2fe; color: #0369a1; }
/* badge chọn loại buổi A/B/Cả 2 khi điểm danh */
.ab-badge { border: none; border-radius: 10px; padding: 2px 9px; font-size: .7rem; font-weight: 800; cursor: pointer; margin-left: 6px; background: #e0f2fe; color: #0369a1; }
.ab-badge.b { background: #fef3c7; color: #92400e; }
.ab-badge.ab { background: #dcfce7; color: #15803d; }

/* badge nhắc nợ trên bảng dashboard */
.debt-badge { background: #fee2e2; color: #b91c1c; border-radius: 12px; padding: 1px 8px; font-size: .7rem; font-weight: 800; margin-left: 6px; white-space: nowrap; }

/* ===== Panel quay-lại (thao tác nhanh tại chỗ) ===== */
.btn-back { background: linear-gradient(135deg, var(--d-primary, #c2185b), var(--d-dark-pink, #e91e63)); color: #fff; border: none; border-radius: 50px; padding: 8px 22px; font-weight: 800; cursor: pointer; }
.panel-card {
  background: var(--d-surface, #fff); border: 1.5px solid var(--d-border, #f6c9db);
  border-radius: 18px; padding: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, .05); color: var(--d-text, #1f2937);
}
.theme-swatch {
  border-radius: 12px; padding: 12px 10px; cursor: pointer; border: 3px solid transparent;
  color: #fff; font-weight: 700; text-align: center; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.theme-swatch:hover { transform: translateY(-2px); }
.theme-swatch.selected { border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }

/* ===== Dashboard — khớp Home.html ===== */
.stats-row { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.stats-card { display: flex; align-items: center; border-radius: 60px; min-height: 100px; padding: 0 20px; height: 100%; position: relative; transition: transform .25s ease, box-shadow .25s ease; cursor: default; overflow: hidden; }
.stats-card:hover { transform: translateY(-2px); }
.stats-col-students { flex: 1 1 50%; max-width: 50%; min-width: 150px; transition: .3s; }
.stats-col-year { flex: 1 1 50%; min-width: 180px; transition: .3s; }
.stats-col-month, .stats-col-today { flex: 1 1 0; transition: .3s; }
.hs-count-section { display: flex; align-items: center; flex-shrink: 0; margin-right: 15px; padding-right: 5px; }
.hs-label { font-weight: 900; font-size: 1.4rem; letter-spacing: 1px; }
.hs-number-circle { width: 70px; height: 70px; background: rgba(255,255,255,.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 8px; box-shadow: 0 2px 8px rgba(0,0,0,.06); backdrop-filter: blur(4px); overflow: visible; }
.hs-number-circle span { font-size: 2.2rem; font-weight: 900; }
.class-pills-area { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; -ms-overflow-style: none; flex: 1; align-items: center; justify-content: flex-start; flex-grow: 1; overflow: hidden; flex-wrap: nowrap; }
.class-pills-area::-webkit-scrollbar { display: none; }
.class-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 45px; height: 85px; background: var(--d-surface, #fff); border-radius: 50px; padding: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.1); margin: 0 3px; position: relative; transition: transform .2s; flex-shrink: 0; }
.class-pill:hover { transform: translateY(-5px); }
.cp-val { font-weight: 900; font-size: .8rem; color: #555; position: absolute; top: 8px; margin-top: 0; }
.cp-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .6rem; box-shadow: 0 2px 5px rgba(0,0,0,.2); margin-bottom: 0; border: 2px dashed rgba(255,255,255,.5); }
.stats-icon-circle { width: 45px; height: 45px; background: var(--d-surface, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 2px 8px rgba(0,0,0,.1); margin-right: 12px; flex-shrink: 0; backdrop-filter: blur(4px); }
.stats-label { white-space: nowrap; letter-spacing: .5px; text-transform: uppercase; font-weight: 800; font-size: 1.02rem; opacity: 1; }
.stats-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; letter-spacing: -.5px; font-size: 2.2rem; font-weight: 900; }
.stats-text-content { flex: 1; min-width: 0; }
.dynamic-cal { width: 42px; height: 45px; background: var(--d-surface, #fff); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid white; box-shadow: 0 3px 8px rgba(0,0,0,.2); transform: rotate(-3deg); }
.cal-head { height: 12px; background: #E91E63; }
.cal-body { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; color: #333; }

.col-name { width: 30%; padding-left: 20px !important; text-align: left; }
.col-class { width: 8%; text-align: left; padding-left: 0 !important; }
.col-att { width: 20%; text-align: center; white-space: normal !important; }
.col-session { width: 15%; text-align: center; }
.col-price { width: 150px !important; text-align: center !important; padding-right: 0 !important; }
.vt-fee { color: var(--d-dark-pink, #D81B60); font-weight: 800; }
.vt-att.empty { color: transparent; }

.filter-area { border-radius: 25px; padding: 15px; border: 1.5px solid var(--d-pink, #FFD1DC) !important; background: var(--d-surface, rgba(255,255,255,.6)) !important; margin-top: 16px !important; margin-bottom: 16px !important; }

.qm-dots { border: none; background: none; font-size: 1.4rem; cursor: pointer; padding: 0 8px; color: rgba(123,31,162,.4); transition: color .3s; font-weight: 900; line-height: 1; vertical-align: middle; }
.qm-dots:hover { color: var(--d-att-theme, #7b1fa2); }

.dp-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; position: relative; transition: all .2s; }
.dp-trigger:hover { border-color: var(--primary, #E91E63); box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.mob-nav-row { display: contents; }
.sf-hidden { display: none !important; }
.pc-label { }

.btn-view, .btn-take, .btn-review, .btn-schedule { background: var(--d-primary-soft, rgba(194,24,91,.06)); color: var(--d-primary, #C2185B); border: 1.5px solid var(--d-border, rgba(194,24,91,.15)); border-radius: 50px; padding: 8px 20px; font-weight: 800; font-size: .88rem; transition: all .25s ease; cursor: pointer; }
.btn-view:active, .btn-take:active, .btn-review:active, .btn-schedule:active { transform: scale(.96); }
.btn-view:hover, .btn-take:hover, .btn-review:hover, .btn-schedule:hover { transform: translateY(-1px); }

.heartbeat-text { animation: heartbeat 1.8s ease-in-out infinite; display: inline-block; will-change: transform; transform-origin: center; }
@keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 56% { transform: scale(1); } 100% { transform: scale(1); } }

#btnQuickDots { display: none; }
@media (min-width: 601px) { #btnQuickDots { display: none; } }

@media (max-width: 600px) {
  .stats-card { border-radius: 40px; padding: 4px 6px; min-height: 60px; }
  .hs-number-circle, .stats-icon-circle { width: 40px; height: 40px; margin-right: 0; }
  .hs-number-circle span { font-size: 1.8rem; }
  .hs-label { font-size: .75rem; }
  .stats-col-students, .stats-col-year, .stats-col-month, .stats-col-today { min-width: 0; flex: 1 1 0; max-width: 50%; overflow: hidden; }
  .class-pills-area { display: none; }
  .stats-value { font-size: 5.5vw; }
  .dynamic-cal { width: 32px; height: 35px; transform: rotate(0); }
}
@keyframes cpFadeIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.take-panel-fadein {
  animation: cpFadeIn .22s ease both;
}

/* ===== Lịch Dạy — khớp lịch dạy.html ===== */
.sch-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.sch-btn-back { background: var(--d-primary, #e91e63); color: #fff; border: none; border-radius: 20px; padding: 8px 20px; cursor: pointer; font-weight: 700; font-size: .88rem; transition: opacity .2s; }
.sch-btn-back:hover { opacity: .85; }
.sch-btn-add { background: var(--d-sch-theme, #4caf50); color: #fff; border: none; border-radius: 20px; padding: 8px 20px; cursor: pointer; font-weight: 700; font-size: .88rem; transition: opacity .2s; }
.sch-btn-add:hover { opacity: .85; }

.schedule-container { background: var(--d-surface, #fff); border-radius: 20px; border: 2px solid #C8E6C9; padding: 14px; }
.schedule-nav { display: flex; align-items: center; border: 1px solid #E0F2F1; border-radius: 14px; padding: 8px 14px; margin-bottom: 14px; gap: 6px; flex-wrap: wrap; }

.sch-toggle { display: inline-flex; border: 1.5px solid #5D8A5E; border-radius: 20px; overflow: hidden; }
.sch-toggle-btn { background: var(--d-surface, #fff); color: #5d8a5e; border: none; padding: 5px 18px; cursor: pointer; font-weight: 700; font-size: .82rem; transition: all .15s; }
.sch-toggle-btn:hover { background: #e8f5e9; }
.sch-toggle-active { background: #5d8a5e; color: #fff; }
.sch-toggle-active:hover { background: #4a7a4d; }

.today-schedule-card { position: relative; overflow: hidden; border-radius: 20px; border: 2px solid #C8E6C9; padding: 20px; background: var(--d-surface, #fff); }
.today-schedule-card::before { content: "🌴"; position: absolute; right: -10px; top: -10px; font-size: 5rem; opacity: .05; transform: rotate(15deg); pointer-events: none; }
.today-card-empty { text-align: center; }

.week-grid-desktop { }
.week-tt-header { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.week-tt-th { text-align: center; padding: 8px 2px; background: #5d8a5e; border-radius: 10px; font-size: .8rem; font-weight: 700; color: #fff; cursor: pointer; transition: background .2s; }
.week-tt-th:first-child { background: transparent; cursor: default; }
.week-tt-th:not(:first-child):hover { background: #4a7a4d; }
.week-tt-th-today { background: #2e7d32 !important; box-shadow: 0 2px 6px rgba(46,125,50,.3); }
.week-tt-th small { display: block; font-weight: 400; opacity: .85; margin-top: 1px; }
.week-tt-row { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.week-tt-period { display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 700; font-size: .78rem; border-radius: 10px; padding: 6px 2px; min-height: 70px; text-align: center; line-height: 1.2; gap: 2px; }
.week-tt-period-sang { background: #fff8e1; color: #e65100; border: 1px solid #FFE082; }
.week-tt-period-chieu { background: #e3f2fd; color: #1565c0; border: 1px solid #90CAF9; }
.week-tt-period-toi { background: #ede7f6; color: #4527a0; border: 1px solid #B39DDB; }
.week-tt-cell { background: var(--d-surface, #fff); border: 1px solid #E0F2F1; border-radius: 8px; padding: 3px; min-height: 70px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: border-color .2s; }
.week-tt-cell:hover { border-color: #81c784; }
.week-tt-cell-today { background: #f6fbf4; border-color: #81c784; }
.week-tt-slot:hover { background: #e8f5e9; }

.schedule-slot-card { transition: all .2s; }
.schedule-slot-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(38,166,154,.15); border-color: var(--d-sch-theme, #4caf50); }

@media (max-width: 768px) {
  .sch-toolbar { flex-wrap: wrap !important; gap: 6px !important; padding: 8px !important; }
  .sch-btn-back, .sch-btn-add { font-size: .82rem !important; padding: 6px 12px !important; }
}

/* ===== Điểm Danh — khớp Điểm Danh.html / Điểm Danh- sổ xuống.html ===== */
.take-header-bar { padding: 12px; border-radius: 20px 20px 0 0; border: 3px solid var(--d-att-theme, #9C27B0); border-bottom: none; flex-wrap: wrap; align-items: center; justify-content: center; display: flex; flex-direction: column; gap: 6px; }
.table-container { background: var(--d-surface, #fff); border-radius: 25px; border: 4px solid var(--d-pink, #FFD1DC); overflow-x: auto; width: 100%; }

.cal-summary-bar { padding: 2px 40px 2px 0; position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.cal-summary-btn { padding: 6px 16px; border-radius: 20px; border: 1.5px solid var(--d-att-theme, #CE93D8); background: var(--d-surface, #fff); color: var(--d-att-theme, #7b1fa2); font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; white-space: nowrap; }
.cal-summary-btn:hover { background: var(--d-att-bg, #f3e5f5); transform: scale(1.03); }
.cal-summary-btn.active-pick { background: var(--d-att-bg, #e1bee7); border-color: var(--d-att-theme, #9c27b0); }
.cal-toggle-btn { width: 32px; height: 32px; border-radius: 13px; border: 1.5px solid var(--d-att-theme, #CE93D8); cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; flex-shrink: 0; margin-left: 6px; background: var(--d-surface, #fff); color: var(--d-att-theme, #7b1fa2); }
.cal-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.cal-toggle-btn.active { background: var(--d-att-theme, #9c27b0); color: #fff; border-color: var(--d-att-theme, #9c27b0); }
.cal-toggle-right { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; }

#takeNativeSelectors { transition: opacity .15s ease; position: relative; justify-content: center !important; padding-right: 40px; }
#takeNativeSelectors[style*="none"] { display: none !important; }

.bnav-view-active { animation: bnav-view-in .2s ease-out; }
@keyframes bnav-view-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

body.theme-classic .take-header-bar { background: var(--d-light-pink) !important; border-color: var(--d-pink) !important; }
body.theme-classic .btn-view, body.theme-classic .btn-review, body.theme-classic .btn-take, body.theme-classic .btn-schedule { background: var(--d-primary-soft, rgba(194,24,91,.06)) !important; color: var(--d-primary, #C2185B) !important; border: 1.5px solid var(--d-border, rgba(194,24,91,.15)) !important; border-radius: 50px !important; padding: 8px 20px !important; font-weight: 800 !important; font-size: .88rem !important; transition: all .25s ease !important; cursor: pointer !important; }
body.theme-classic .btn-view:active, body.theme-classic .btn-review:active, body.theme-classic .btn-take:active, body.theme-classic .btn-schedule:active { transform: scale(.96) !important; }
body.theme-classic .filter-area { border: 1.5px solid var(--d-pink) !important; background: var(--d-surface, rgba(255,255,255,.6)) !important; margin-top: 16px !important; margin-bottom: 16px !important; }

.att-stats-bar { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; background: linear-gradient(135deg, #F8F0FF, #FFF5F9); border-bottom: 2px solid #E1BEE7; }
.att-stats-count-lg { font-size: 21px; font-weight: 900; color: #5E35B1; }
.att-stats-label { font-size: 12.5px; color: #666; font-weight: 700; }
.att-stats-divider { width: 2px; height: 28px; background: #E1BEE7; }
.att-stats-bar { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; background: linear-gradient(135deg, #F8F0FF, #FFF5F9); border-bottom: 2px solid #E1BEE7; }
.att-stats-count-lg { font-size: 21px; font-weight: 900; color: #5E35B1; }
.att-stats-label { font-size: 12.5px; color: #666; font-weight: 700; }
.att-stats-divider { width: 2px; height: 28px; background: #E1BEE7; }
.att-stats-msg { color: #E65100; font-weight: 700; font-size: 12.5px; }
.att-stats-right { font-size: 12.5px; color: #666; font-weight: 700; }

.radio-group { display: flex; align-items: center; gap: 12px; }
.radio-item { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.radio-label { font-weight: 700; font-size: 13px; }
.tt-radio-present, .tt-radio-absent { accent-color: var(--d-primary, #C2185B); width: 24px; height: 24px; }

.take-row { }
.tt-row { }
.tt-name { font-weight: 700; color: #4A148C; font-size: 15px; }
.tt-class { }
.tt-btn-arrow { }
.reason-row { }
.tt-reason { }

@media (max-width: 600px) {
  .cal-toggle-pc-only { display: none !important; }
  .cal-summary-btn { font-size: .75rem; padding: 4px 10px; }
  .cal-summary-bar { gap: 6px; }
  #takeArea .take-header-bar { flex-direction: column !important; gap: 4px !important; padding: 8px 6px !important; align-items: center !important; text-align: center !important; }
  #takeArea .take-header-bar .d-flex { flex-wrap: wrap !important; gap: 3px !important; justify-content: center !important; width: auto !important; }
  #takeArea .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .cp-class-card { padding: 10px 6px; }
  .cp-class-name { font-size: .85rem; }
  .cp-class-grid { gap: 8px; }
}

@media (max-width: 480px) {
  .cp-class-card { width: 82px; height: 82px; padding: 6px; }
  .cp-class-name { font-size: .85rem; }
  .cp-class-grid { gap: 8px; }
}

.table-container { background: var(--d-surface, #fff); }

.cp-grid-wrap { width: 100%; padding: 12px 8px; animation: cpFadeIn .2s ease; display: flex; flex-direction: column; align-items: center; }
.cp-class-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 700px; }
.cp-class-card { background: var(--d-surface, #fff); border: 2px solid #E1BEE7; border-radius: 14px; padding: 10px; text-align: center; cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.06); width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; }
.cp-class-card:hover { transform: scale(1.04); border-color: var(--d-att-theme, #9c27b0); box-shadow: 0 4px 14px rgba(156,39,176,.2); }
.cp-class-card:active { transform: scale(.97); }
.cp-class-active { border-color: #9C27B0 !important; background: var(--d-att-bg, #f3e5f5) !important; box-shadow: 0 4px 14px rgba(156,39,176,.35) !important; }
.cp-class-name { font-weight: 800; font-size: 1rem; color: #4a148c; margin-bottom: 4px; line-height: 1.1; word-break: break-word; overflow: hidden; }
.cp-class-count { font-size: .72rem; color: #9c27b0; opacity: .7; }

@media (max-width: 480px) {
  .cp-class-card { width: 82px; height: 82px; padding: 6px; }
  .cp-class-name { font-size: .85rem; }
  .cp-class-grid { gap: 8px; }
}

.date-select { border: 1.5px solid var(--d-att-theme, #CE93D8); border-radius: 20px; padding: 6px 10px; font-size: 0.82rem; color: #7B1FA2; font-weight: 600; background: var(--d-surface, #fff); outline: none; }
.date-select:focus { border-color: #9C27B0; }

/* ===== Calendar popup (cp-date-*) — khớp Điểm Danh — lịch.html ===== */
.cp-date-wrap { width: 100%; max-width: 360px; margin: 0 auto; animation: cpFadeIn .2s ease; }
.cp-date-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; margin-bottom: 6px; }
.cp-date-nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--d-att-theme, #CE93D8); background: var(--d-surface, #fff); color: var(--d-att-theme, #7b1fa2); font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.cp-date-nav-btn:hover { background: var(--d-att-bg, #f3e5f5); transform: scale(1.1); }
.cp-date-title { font-weight: 800; font-size: 1rem; color: #4a148c; min-width: 150px; text-align: center; }
.cp-date-today-btn { padding: 4px 12px; border-radius: 14px; border: 1.5px solid var(--d-att-theme, #CE93D8); background: var(--d-surface, #fff); color: var(--d-att-theme, #7b1fa2); font-size: .75rem; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.cp-date-today-btn:hover { background: var(--d-att-bg, #f3e5f5); transform: scale(1.05); }
.cp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cp-cal-header { text-align: center; font-size: .7rem; font-weight: 800; color: #9c27b0; padding: 4px 0; opacity: .7; }
.cp-cal-cell { text-align: center; padding: 7px 2px; font-size: .85rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all .15s; color: #333; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.cp-cal-cell:hover { background: var(--d-att-bg, #f3e5f5); transform: scale(1.08); }
.cp-cal-cell.today { background: linear-gradient(135deg, var(--d-primary, #e91e63), var(--d-dark-pink, #f06292)); color: #fff; font-weight: 900; box-shadow: 0 2px 8px rgba(233,30,99,.3); }
.cp-cal-cell.selected { background: #9C27B0; color: #fff; }
.cp-cal-cell.empty { cursor: default; pointer-events: none; }
.cp-cal-cell.weekend { color: #e91e63; opacity: .8; }
@media (max-width: 600px) {
  .cp-date-wrap { max-width: 100%; }
  .cp-cal-cell { padding: 5px 1px; font-size: .78rem; min-height: 32px; }
  .cp-date-title { font-size: .9rem; min-width: 120px; }
}

/* ===== Batch Attendance (ba-*) — khớp Điểm Danh — Điểm danh hàng loạt.html ===== */
.ba-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.ba-modal { display: flex; flex-direction: column; overflow: hidden; background: var(--d-surface, #fff); border-radius: 20px; width: 98vw; max-width: 1400px; max-height: 92vh; border: 3px solid #E91E63; box-shadow: 0 15px 40px rgba(0,0,0,.3); animation: baSlideUp .3s ease; }
@keyframes baSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.ba-modal-header { background: linear-gradient(135deg, var(--d-primary, #e91e63), var(--d-dark-pink, #f06292)); color: #fff; padding: 18px 24px; position: relative; }
.ba-modal-header .btn-close { position: absolute; right: 20px; top: 20px; filter: invert(1) grayscale(100%) brightness(200%); }
.ba-modal-filter { background: var(--d-att-bg, #FCE4EC); padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-bottom: 1px solid #F8BBD0; }
.ba-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 24px; background: var(--d-att-bg, #fff0f5); border-bottom: 1px solid #FCE4EC; }
.ba-tool-btn { background: var(--d-surface, #fff); border: 1.5px solid #F48FB1; border-radius: 20px; padding: 4px 14px; font-size: .78rem; font-weight: 700; color: #c2185b; cursor: pointer; transition: all .15s; }
.ba-tool-btn:hover { background: #fce4ec; border-color: #e91e63; }
.ba-tool-btn:disabled { opacity: .5; cursor: not-allowed; }
.ba-hint { font-size: .72rem; color: #999; margin-left: auto; }
.heartbeat-text { animation: heartbeat 1.2s ease-in-out infinite; display: inline-block; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }
.ba-modal-body { overflow: auto; max-height: 55vh; background: var(--d-att-bg, #fff0f5); position: relative; user-select: none; -webkit-user-select: none; padding-bottom: 18px; }
.ba-modal-footer { padding: 14px 24px; background: #f8f9fa; border-top: 1px solid #F8BBD0; display: flex; align-items: center; gap: 12px; }
.ba-day-header { cursor: pointer; transition: background .15s; min-width: 32px; }
.ba-day-header:hover { background: #f48fb1 !important; color: #fff !important; }
.ba-day-weekend { color: #ef5350 !important; }
.ba-name-sticky { position: sticky; left: 0; background: #fce4ec; z-index: 5; font-weight: 800; min-width: 120px; max-width: 130px; text-align: left !important; border-right: 2px solid #E91E63 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-total-col { background: var(--d-att-bg, #fff0f5); font-weight: 900; text-align: center; border-left: 2px solid #E91E63 !important; }
.ba-cell { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; transition: all .12s; font-weight: 900; font-size: .85rem; border: 1.5px solid transparent; }
.ba-cell.ba-empty { background: #fafafa; color: #ddd; border-color: #f0f0f0; }
.ba-cell.ba-empty:hover { background: #fce4ec; border-color: #f48fb1; }
.ba-cell.ba-checked { background: #fff8e1; color: #f57f17; border-color: #ffd54f; font-weight: 700; }
#baTable th { font-weight: 800; text-align: center; border-color: #f8bbd0; white-space: nowrap; background: #fce4ec !important; color: #880e4f; }
#baTable td { border-color: #fce4ec; }
@media (max-width: 768px) { .ba-modal { max-width: 100%; border-radius: 12px; } .ba-modal-body { max-height: 45vh; } .ba-toolbar { padding: 6px 12px; } .ba-tool-btn { font-size: .7rem; padding: 3px 10px; } .ba-hint { display: none; } .ba-name-sticky { min-width: 100px; font-size: .75rem; } }

/* ===== Student Manager (stm-*) — khớp Quản lý danh sách học sinh.html ===== */
.stm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.stm-modal { background: var(--d-surface, #fff); border-radius: 20px; max-width: 1080px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.stm-header { color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 17px 17px 0 0; }
.stm-header h5 { margin: 0; font-weight: 800; font-size: 1.15rem; }
.stm-close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.stm-body { overflow-y: auto; flex: 1; }
.stm-form-card { padding: 16px 20px; border-bottom: 1px solid #C8E6C9; }
.stm-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 35px; }
.stm-field { display: flex; flex-direction: column; gap: 2px; }
.stm-field-name { flex: 1; min-width: 80px; max-width: 240px; }
.stm-field-class { width: 200px; }
.stm-field-fee, .stm-field-fee2 { width: 110px; position: relative; }
.stm-field-date { width: 144px; }
.stm-label { font-size: .75rem; font-weight: 700; }
.stm-input { border: 2px solid #A5D6A7; border-radius: 20px; padding: 7px 12px; font-size: .88rem; outline: none; }
.stm-input:focus { border-color: #2e7d32; }
.stm-input-bold { font-weight: 700; }
.stm-fee-mode-tabs { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 2px; white-space: nowrap; position: relative; left: 50%; transform: translate(-50%); width: max-content; }
.stm-fee-mode-tab { background: #e8f5e9; border: 1px solid #A5D6A7; color: #2e7d32; padding: 3px 6px; border-radius: 12px; font-size: .65rem; font-weight: 700; cursor: pointer; transition: all .2s ease; outline: none; user-select: none; }
.stm-fee-mode-tab:hover { background: #c8e6c9; }
.stm-fee-mode-tab.active { background: #2e7d32 !important; color: #fff !important; border-color: #2e7d32 !important; }
.stm-fee-help-icon { cursor: pointer; font-size: .65rem; margin-left: 2px; color: #e65100; font-weight: 700; user-select: none; }
.stm-fee-hint { font-size: .72rem; font-weight: 700; position: absolute; left: 12px; bottom: -28px; white-space: nowrap; color: #00c853 !important; }
.stm-field-save { flex-direction: row; margin-left: auto; }
.stm-btn-save { background: linear-gradient(135deg, #2e7d32, var(--d-sch-theme, #4caf50)); color: #fff; border: none; border-radius: 20px; font-weight: 700; cursor: pointer; order: 2; }
.stm-btn-save:hover { background: #1b5e20; }
.stm-btn-save:disabled { background: #999; cursor: not-allowed; }
.stm-btn-schedule { background: linear-gradient(135deg, #ff8f00, #ffa726); color: #fff; border: none; border-radius: 20px; font-size: .75rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity .2s; padding: 6px 14px; }
.stm-btn-schedule:hover { opacity: .85; }
body.theme-classic .stm-btn-save { background: #e91e63 !important; color: #fff !important; }
body.theme-classic .stm-btn-save:hover { background: #c2185b !important; }
body.theme-classic .stm-header { background: linear-gradient(135deg, var(--d-primary, #e91e63), var(--d-dark-pink, #f06292)) !important; }
body.theme-classic .stm-fee-mode-tab.active { background: #e91e63 !important; color: #fff !important; border-color: #e91e63 !important; }
body.theme-classic .stm-input { border-color: #F48FB1 !important; }
body.theme-classic .stm-input:focus { border-color: #e91e63 !important; }
body.theme-classic .stm-table th { color: #c2185b !important; border-bottom-color: #F48FB1 !important; }
body.theme-classic .stm-select { border-color: #F48FB1 !important; }
body.theme-classic .stm-dtl-card { border-color: #F48FB1 !important; }
body.theme-classic .stm-dtl-card:hover { border-color: #e91e63 !important; }
body.theme-classic .stm-dtl-card-name { color: #c2185b !important; }
body.theme-classic .stm-fee-mode-tab { background: var(--d-att-bg, #FCE4EC); border-color: #F48FB1; color: #c2185b; }
body.theme-classic .stm-fee-mode-tab:hover { background: #F8BBD0; }
body.theme-classic .stm-form-card { border-bottom-color: #F48FB1 !important; }
body.theme-classic .stm-table tbody tr:hover { background: #FFF5F7 !important; }
.stm-filter-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 20px; }
.stm-filter-group-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stm-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.stm-filter-label { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.stm-select { border: 2px solid #A5D6A7; border-radius: 8px; padding: 5px 10px; font-weight: 700; font-size: .82rem; min-width: 180px; }
.stm-btn-reset { background: #f1f8e9; border: 1px solid #c5e1a5; border-radius: 6px; font-size: .72rem; font-weight: 600; padding: 4px 8px; cursor: pointer; white-space: nowrap; transition: all .2s ease; display: flex; align-items: center; gap: 4px; }
.stm-btn-reset:hover { background: #dcedc8; }
.stm-table-wrap { overflow: auto; padding: 8px 12px; max-height: 480px; background: var(--d-surface, #fff); }
.stm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stm-table thead { position: sticky; top: 0; z-index: 1; }
.stm-table th { text-align: center; font-weight: 800; border-bottom: 2px solid #A5D6A7; font-size: .85rem; color: #2e7d32; padding: 10px 8px; }
.stm-table td { border-bottom: 1px solid #f0f0f0; padding: 10px 8px; }
.stm-table tbody tr:hover { background: #f1f8e9; }
.stm-col-stt { width: 6%; text-align: center; font-weight: 700; }
.stm-col-name { width: 28%; text-align: left; padding-left: 12px; }
.stm-table th.stm-col-name { text-align: left; padding-left: 12px; }
.stm-col-class { width: 14%; }
.stm-col-fee { width: 18%; }
.stm-col-actions { width: 100px; text-align: center; }
.stm-btn-import-trigger { background: #ff7a18; color: #fff; border: none; border-radius: 20px; font-size: .72rem; padding: 4px 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.stm-btn-bulk-trigger-main { background: var(--d-surface, #fff); border: 2px solid #D32F2F; color: #d32f2f; border-radius: 20px; font-size: .72rem; padding: 4px 10px; font-weight: 800; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(211,47,47,.1); }
.stm-btn-bulk-trigger-main:hover { background: #d32f2f; color: #fff; box-shadow: 0 4px 12px rgba(211,47,47,.3); transform: translateY(-1px); }
.stm-dtl-tab-active { background: #fff !important; color: #2e7d32 !important; }
.stm-dtl-card:hover { border-color: #2e7d32; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(46,125,50,.15); }
@media (max-width: 768px) {
  .stm-modal { width: 100% !important; max-width: 100% !important; height: 100vh !important; border-radius: 0 !important; margin: 0 !important; }
  .stm-header h5 { font-size: .85rem !important; }
  .stm-body { padding: 8px !important; }
  .stm-form-row { flex-direction: column !important; width: 100% !important; }
  .stm-field { width: 100% !important; min-width: 0 !important; flex: none !important; }
  .stm-field-name { max-width: 100% !important; }
  .stm-field-class { width: 100% !important; }
  .stm-filter-row { flex-direction: column !important; align-items: stretch !important; }
  .stm-toolbar-right { width: 100% !important; }
}

/* ===== Receipt Card — khớp Phiếu học phí.html ===== */
.slip-card { position: relative !important; border-radius: 20px !important; border: none !important; background: var(--d-surface, #fff); overflow: hidden; width: 100%; max-width: 400px; margin: auto; box-shadow: 0 10px 40px rgba(0,0,0,.15); font-family: Comfortaa, cursive !important; font-size: 0.92rem; }
.slip-teacher-name { display: block; text-transform: uppercase; opacity: .9; }
.wish-text { color: #8d6e63; font-weight: 400; font-size: .85rem; margin-top: 15px; text-align: center; font-style: italic; padding: 10px 20px 0; line-height: 1.6; border-top: 1px solid #fce4ec; }
#captureArea[id] {
  --mint: #4DB6AC !important; --light-mint: #B2DFDB !important;
  --pink: #FFCCD5 !important; --light-pink: #FFF5F7 !important; --dark-pink: #D81B60 !important;
  --text: #5D4037 !important; --att-theme: #9C27B0 !important;
  --border: #fce4ec !important; --border-color: #fce4ec !important;
  color: #333 !important; background: #fff !important;
  font-family: Comfortaa, cursive, -apple-system, Segoe UI, Roboto, sans-serif !important;
}
#captureArea[id] .slip-header { background: #4db6ac !important; color: #fff !important; padding: 20px 10px !important; text-align: center !important; }
#captureArea div[style*=\"border-bottom\"] { padding-left: 4px !important; padding-right: 4px !important; }
#captureArea[id] #pName, #captureArea[id] #pCount { font-family: Comfortaa, cursive !important; }
#pName { font-weight: 600 !important; text-transform: capitalize !important; }
#pCount { font-weight: 700 !important; font-size: .95rem; letter-spacing: .2px; }
#pTotal:after { content: \"đ\"; font-size: 1.275rem; font-weight: 700; color: inherit; position: absolute; left: 100%; top: 0; margin-left: 3px; }
#pTotal.guard-blocked:after { display: none; }

.theme-icon-student:after { content: \"👨‍🎓\"; }
.theme-icon-rate:after { content: \"💎\"; }
.theme-icon-count:after { content: \"📝\"; }
#captureArea.theme-strawberry .theme-icon-student:after { content: \"🍭\"; font-size: 1rem; }
#captureArea.theme-strawberry .theme-icon-rate:after { content: \"🍬\"; font-size: 1rem; }
#captureArea.theme-strawberry .theme-icon-count:after { content: \"🌸\"; font-size: 1rem; }
#captureArea.theme-lavender .theme-icon-student:after { content: \"🦄\"; font-size: 1rem; }
#captureArea.theme-lavender .theme-icon-rate:after { content: \"🔮\"; font-size: 1rem; }
#captureArea.theme-lavender .theme-icon-count:after { content: \"🎵\"; font-size: 1rem; }
#captureArea.theme-ocean .theme-icon-student:after { content: \"🐳\"; font-size: 1rem; }
#captureArea.theme-ocean .theme-icon-rate:after { content: \"🐚\"; font-size: 1rem; }
#captureArea.theme-ocean .theme-icon-count:after { content: \"🌊\"; font-size: 1rem; }
#captureArea.theme-luxury .theme-icon-student:after { content: \"🎩\"; font-size: 1rem; }
#captureArea.theme-luxury .theme-icon-rate:after { content: \"💳\"; font-size: 1rem; }
#captureArea.theme-luxury .theme-icon-count:after { content: \"🖋️\"; font-size: 1rem; }

/* Missing stm-* additions */
.stm-dtl-container { padding: 16px 12px; min-height: 200px; }
.stm-dtl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 8px 0; }
.stm-dtl-card { background: var(--d-surface, #fff); border: 2px solid #A5D6A7; border-radius: 14px; padding: 16px; cursor: pointer; transition: all .2s; display: flex; justify-content: space-between; align-items: center; }
.stm-dtl-card:hover { border-color: #2e7d32; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.stm-dtl-card-name { font-weight: 800; font-size: 1rem; color: #2e7d32; }
.stm-dtl-card-badge { font-size: .75rem; color: #888; margin-top: 4px; }
.stm-dtl-card-arrow { font-size: 1.5rem; color: #A5D6A7; }
.stm-dtl-class-view { }
.stm-dtl-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stm-dtl-table tbody tr:hover { background: #f1f8e9; }
.stm-btn-edit { background: #e8f5e9; border: 1px solid #A5D6A7; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: .8rem; }
.stm-btn-edit:hover { background: #c8e6c9; }
.stm-btn-del { background: var(--d-surface, #fff); border: 1px solid #ef9a9a; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: .8rem; color: #d32f2f; }
.stm-btn-del:hover { background: #ffebee; }
.stm-btn-bulk-exit { background: #f5f5f5; color: #424242; border: 1px solid #e0e0e0; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .2s; }
.stm-btn-bulk-exit:hover { background: #e0e0e0; }
.stm-btn-bulk-execute { background: #d32f2f; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .2s; }
.stm-btn-bulk-execute:hover { background: #b71c1c; }
.stm-custom-fee-btn { background: var(--d-surface, #fff); border: 1px solid #A5D6A7; border-radius: 12px; padding: 3px 6px; font-size: .65rem; font-weight: 600; cursor: pointer; color: #666; white-space: nowrap; transition: all .2s; }
.stm-custom-fee-btn:hover { background: #e8f5e9; }

/* Detail Profile & Edit Panel */
.stm-dtl-btn-view { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.stm-dtl-btn-view:hover { background: #E8F5E9; }
.stm-dtl-name-link { color: var(--d-sch-theme, #2E7D32); font-weight: 700; cursor: pointer; }
.stm-dtl-name-link:hover { text-decoration: underline; }
.stm-dtl-profile { animation: stmFadeIn .2s ease; }
@keyframes stmFadeIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.stm-dtl-profile-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.stm-dtl-btn-back { background: #f1f5f9; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .82rem; }
.stm-dtl-btn-back:hover { background: #e2e8f0; }
.stm-dtl-btn-profile-edit { background: #1976D2; color: #fff; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .78rem; }
.stm-dtl-btn-profile-edit:hover { background: #1565c0; }
.stm-dtl-edit-panel { background: var(--d-surface, #fff); border: 2px solid #1976D2; border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: 0 4px 16px rgba(25,118,210,.15); }
.stm-dtl-edit-section-title { font-size: .82rem; font-weight: 800; color: #1b5e20; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #E8F5E9; }
.stm-dtl-edit-section-title:first-child { margin-top: 0; }
.stm-dtl-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.stm-dtl-edit-field { display: flex; flex-direction: column; gap: 4px; }
.stm-dtl-edit-field label { font-size: .72rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .3px; }
.stm-dtl-edit-field input, .stm-dtl-edit-field select { border: 1px solid #C8E6C9; border-radius: 8px; padding: 8px 10px; font-size: .88rem; font-weight: 600; color: #333; outline: none; transition: border-color .2s; background: #fafffe; }
.stm-dtl-edit-field input:focus, .stm-dtl-edit-field select:focus { border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.15); }
.stm-dtl-edit-field-full { grid-column: 1 / -1; }
.stm-dtl-edit-field textarea { border: 1px solid #C8E6C9; border-radius: 8px; padding: 8px 10px; font-size: .88rem; font-weight: 600; color: #333; outline: none; resize: vertical; background: #fafffe; }
.stm-dtl-edit-field textarea:focus { border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.15); }
.stm-dtl-edit-actions { display: flex; gap: 10px; justify-content: flex-end; }
.stm-dtl-edit-save { background: #43a047; color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.stm-dtl-edit-save:hover { background: #2e7d32; }
.stm-dtl-edit-cancel { background: #f5f5f5; color: #666; border: 1px solid #ddd; border-radius: 8px; padding: 8px 20px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.stm-dtl-edit-cancel:hover { background: #eee; }
.stm-dtl-profile-header { background: var(--d-surface, #fff); border-radius: 14px; padding: 20px; border: 1px solid #E8F5E9; margin-bottom: 14px; }
.stm-dtl-profile-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.stm-dtl-avatar { width: 56px; height: 56px; border-radius: 50%; background: #E8F5E9; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.stm-dtl-profile-name { margin: 0; font-weight: 800; color: #1B5E20; font-size: 1.1rem; }
.stm-dtl-profile-meta { display: flex; gap: 6px; margin-top: 4px; }
.stm-dtl-profile-tag { background: #E8F5E9; color: var(--d-sch-theme, #2E7D32); padding: 2px 10px; border-radius: 12px; font-size: .72rem; font-weight: 700; }
.stm-dtl-profile-stats { display: flex; gap: 12px; }
.stm-dtl-stat-card { flex: 1; background: var(--d-sch-bg, #F1F8F1); border-radius: 10px; padding: 12px; text-align: center; }
.stm-dtl-stat-icon { font-size: 1.2rem; }
.stm-dtl-stat-value { font-weight: 800; color: #1B5E20; font-size: .85rem; }
.stm-dtl-stat-label { font-size: .7rem; color: #888; }
.stm-dtl-accordion { }
.stm-dtl-section { background: var(--d-surface, #fff); border: 1px solid #E8F5E9; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.stm-dtl-section-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; background: var(--d-sch-bg, #F1F8F1); font-weight: 700; font-size: .82rem; color: var(--d-sch-theme, #2E7D32); }
.stm-dtl-section-header:hover { background: #E8F5E9; }
.stm-dtl-section-chevron { margin-left: auto; font-size: .7rem; }
.stm-dtl-section-body { padding: 12px 14px; }
.stm-dtl-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stm-dtl-info-label { color: #888; font-size: .75rem; }
.stm-dtl-info-value { font-weight: 700; color: #333; font-size: .82rem; }
.stm-dtl-info-empty { color: #999 !important; font-weight: 400 !important; }
.stm-dtl-shell-empty { text-align: center; padding: 12px; color: #999; }
.stm-dtl-shell-empty-icon { font-size: 1.5rem; margin-bottom: 4px; }
.stm-dtl-shell-empty-text { font-size: .78rem; }
.stm-dtl-col-stt { padding: 10px 8px; text-align: center; width: 50px; }
.stm-dtl-col-name { padding: 10px 8px; text-align: left; }
.stm-dtl-col-fee { padding: 10px 8px; text-align: right; font-weight: 600; }
.stm-dtl-col-date { padding: 10px 8px; text-align: center; color: #888; }
.stm-dtl-col-edit { padding: 10px 8px; text-align: center; width: 70px; }

/* Merge Picker (ms-picker-*) — khớp Phiếu Học Phí - phiếu gộp.html */
.ms-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ms-picker-card { background: var(--d-surface, #fff); border-radius: 20px; width: 100%; max-width: 400px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: msSlideUp .25s ease; }
@keyframes msSlideUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.ms-picker-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, #1565c0, #42a5f5); color: #fff; font-weight: 800; font-size: .9rem; }
.ms-picker-close { background: rgba(255,255,255,.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.ms-picker-search { margin: 12px 16px 8px; padding: 10px 14px; border: 2px solid #e0e0e0; border-radius: 50px; font-size: .85rem; outline: none; width: calc(100% - 32px); }
.ms-picker-search:focus { border-color: #42a5f5; }
.ms-picker-list { flex: 1; overflow-y: auto; padding: 0 12px 8px; }
.ms-picker-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 4px 0; border-radius: 12px; cursor: pointer; border: 1.5px solid #f0f0f0; transition: all .15s; }
.ms-picker-item:has(input:checked) { background: #e3f2fd; border-color: #42a5f5; }
.ms-picker-name { font-weight: 700; font-size: .85rem; flex: 1; }
.ms-picker-class { font-size: .72rem; color: #888; background: #f5f5f5; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.ms-picker-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid #eee; }
.ms-picker-count { font-size: .78rem; font-weight: 600; color: #666; }
.ms-picker-confirm { background: #1565c0; color: #fff; border: none; padding: 8px 20px; border-radius: 50px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.ms-picker-confirm:disabled { opacity: .4; cursor: not-allowed; }
.ms-picker-classes { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 8px; }
.ms-class-pill { padding: 6px 12px; border: 1.5px solid #e0e0e0; border-radius: 50px; background: var(--d-surface, #fff); font-size: .75rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 28px; box-sizing: border-box; }
.ms-class-pill.active { background: #1565c0; color: #fff; border-color: #1565c0; }
.ms-picker-selected-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 16px 6px; }
.ms-selected-chip { background: #e3f2fd; border: 1px solid #90caf9; border-radius: 20px; padding: 2px 10px; font-size: .75rem; font-weight: 600; cursor: pointer; color: #1565c0; }
.ms-selected-chip:hover { background: #bbdefb; }
.ms-menu-item:hover { background: #fff3e0; }

.merged-slip-content { }

/* Theme preview classes (tp-*) cho Thiết lập trung tâm - Phiếu Học Phí */
.tp-default { background: linear-gradient(135deg,#1565C0,#42A5F5); }
.tp-strawberry { background: linear-gradient(135deg,#E91E63,#F06292); }
.tp-lavender { background: linear-gradient(135deg,#7B1FA2,#CE93D8); }
.tp-ocean { background: linear-gradient(135deg,#0277BD,#4DD0E1); }
.tp-luxury { background: linear-gradient(135deg,#3E2723,#8D6E63); }

/* Custom Fee Popup (fhp-*) — khớp Quản lý danh sách học sinh - tuỳ chọn học phí.html */
.fhp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 10002; transition: opacity .25s ease; }
.fhp-card { background: var(--d-surface, #fff); border-radius: 14px; max-width: 720px; width: 94%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06); }
.fhp-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid #e0e0e0; background: #f8faf8; border-radius: 14px 14px 0 0; }
.fhp-header-left { display: flex; align-items: center; gap: 12px; }
.fhp-icon { font-size: 1.4rem; }
.fhp-header h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #333; }
.fhp-sub { font-size: .78rem; color: #888; }
.fhp-close { background: none; border: none; font-size: 1.2rem; color: #999; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fhp-close:hover { background: #eee; color: #333; }
.fhp-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; gap: 10px; flex-wrap: wrap; background: #fafafa; border-bottom: 1px solid #eee; }
.fhp-toolbar-label { font-size: .8rem; font-weight: 700; color: #555; }
.fhp-year-select { padding: 5px 10px; border-radius: 6px; font-size: .82rem; background: var(--d-surface, #fff); color: #333; border: 1px solid #ccc; cursor: pointer; }
.fhp-toolbar-baseline { font-size: .78rem; color: #888; }
.fhp-table-wrap { overflow-y: auto; flex: 1; max-height: 440px; }
.fhp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.fhp-table th { padding: 10px 12px; text-align: left; font-weight: 700; color: #555; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 1; }
.fhp-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.fhp-month-num { font-weight: 700; color: #333; }
.fhp-badge-now { background: #E8F5E9; color: var(--d-sch-theme, #2E7D32); font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.fhp-input { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; font-size: .82rem; text-align: right; font-weight: 600; outline: none; }
.fhp-input:focus { border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.15); }
.fhp-mode-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.fhp-mode-fixed { background: #E3F2FD; color: #1565C0; }
.fhp-mode-session { background: #FFF3E0; color: #E65100; }
.fhp-hidden { display: none; }
.fhp-past { opacity: .70; }
.fhp-current { background: #f9fdf9; }
.fhp-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e0e0e0; }
.fhp-btn-save { background: #43a047; color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-weight: 700; cursor: pointer; font-size: .82rem; }
.fhp-btn-save:hover { background: #2e7d32; }
.fhp-btn-cancel { background: #eee; color: #666; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; font-size: .82rem; }
.fhp-btn-cancel:hover { background: #ddd; }
.merged-name-row { }
.merged-name { }
.merged-name.merged-3-people { font-size: 1.36rem !important; white-space: nowrap !important; }
.day-tag { display: inline-block; background: #e0f2f1; color: #00695c; border-radius: 8px; padding: 3px 9px; margin: 3px; font-size: 12px; font-weight: 600; }

/* Mini menu (💰 dropdown) — khớp reference */
.ms-mini-menu { position: absolute; right: 0; top: 28px; background: var(--d-surface, #fff); border: 2px solid #FF9800; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 20; min-width: 180px; padding: 6px; }
.ms-menu-item { display: block; width: 100%; border: none; background: var(--d-surface, #fff); padding: 8px 12px; text-align: left; font-size: 13px; cursor: pointer; border-radius: 6px; }
.ms-menu-item:hover { background: #FFF3E0; }
.ms-item-merge { color: #999; }

/* Surcharge popup — khớp reference */
#surchargePopup label:hover { background: #fff0e0 !important; transform: translate(5px); box-shadow: 0 4px 10px rgba(230,81,0,.1); }

/* Missing keyframes (used by modal animations) */
@keyframes modalSlideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes scaleInM { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes scSlideUp { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

#monthSelectPopup { animation: scSlideUp .3s cubic-bezier(.18,.89,.32,1.28); }
.month-sel-btn.btn-outline-secondary:hover { background: #e0f2f1; border-color: #26A69A; }