/* ============================================================================
   ACADEMIC.CSS — Hệ thiết kế "Nhà xuất bản Đại học"
   Nền giấy ngà · mực đậm · serif cổ điển (Fraunces + Newsreader)
   · điểm nhấn booc-đô (oxblood) + vàng cổ (antique gold).
   Nạp toàn cục trong layout.ejs (sau Bootstrap để override).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&display=swap');

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Giấy & mực */
  --paper:        #f5ecd9;   /* nền chính */
  --paper-raised: #fbf6ea;   /* thẻ/card nổi */
  --paper-deep:   #efe3c9;   /* vùng chìm, sọc bảng */
  --paper-edge:   #e7dabd;   /* mép giấy */

  --ink:        #2b2118;     /* chữ chính */
  --ink-soft:   #6b5d49;     /* chữ phụ */
  --ink-faint:  #9a8b72;     /* chú thích, mờ */

  /* Điểm nhấn */
  --oxblood:      #7a1f2b;
  --oxblood-deep: #5c141f;
  --oxblood-tint: #f3e1de;   /* nền nhạt cho badge/alert lỗi */
  --gold:         #b08d3f;
  --gold-deep:    #8a6d28;
  --gold-tint:    #f4ead0;

  /* Gáy sách (sidebar tối) */
  --spine:        #241a12;
  --spine-2:      #2f2317;
  --parchment:    #e8dcc0;   /* chữ trên gáy */
  --parchment-dim:#b6a585;   /* chữ phụ trên gáy */

  /* Kẻ / viền */
  --rule:        #d8cba9;
  --rule-strong: #c2b189;
  --rule-ink:    rgba(43, 33, 24, 0.14);

  /* Trạng thái (đổi sang bảng màu học thuật) */
  --forest:      #3f6f4e;   --forest-tint: #e3ecdf;
  --sienna:      #b5651d;   --sienna-tint: #f6e7cf;
  --error:       var(--oxblood);  --error-tint: var(--oxblood-tint);

  /* Hình học */
  --r-sm: 3px;  --r: 5px;  --r-lg: 8px;

  /* Bóng — mềm, thấp, ấm */
  --sh-hair: 0 1px 0 var(--rule);
  --sh-1: 0 1px 2px rgba(43,33,24,.06), 0 1px 0 var(--rule);
  --sh-2: 0 10px 26px -20px rgba(43,33,24,.55), 0 1px 0 var(--rule);
  --sh-3: 0 22px 48px -28px rgba(43,33,24,.6);

  /* Chữ */
  --serif-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --serif-body: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Bootstrap remap (để component BS ăn theme) */
  --bs-body-font-family: var(--serif-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--rule);
  --bs-primary: var(--oxblood);
  --bs-primary-rgb: 122, 31, 43;
  --bs-link-color: var(--oxblood);
  --bs-link-hover-color: var(--oxblood-deep);
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
::selection { background: var(--gold); color: #fff; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif-body);
  color: var(--ink);
  background-color: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "onum" 1, "pnum" 1, "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Họa tiết giấy: grain rất nhẹ phủ toàn trang */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
/* Giữ nội dung trên lớp grain (grain ở z-index âm; không đặt z-index ở đây
   để tránh tạo stacking context nhốt modal Bootstrap dưới .modal-backdrop) */
.app-container, .auth-wrapper { position: relative; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-feature-settings: "lnum" 1;
}

a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--oxblood-deep); }

strong, b { font-weight: 700; }

/* Số liệu thống kê: dùng chữ số đều (lining + tabular) */
.ac-tnum, .stat-card .val, .trend-score, table td, table th { font-feature-settings: "lnum" 1, "tnum" 1; }

/* Thanh cuộn */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 10px; border: 2px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* Focus ring học thuật */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   3. NGÔN NGỮ THỊ GIÁC HỌC THUẬT (helpers tái dùng)
   -------------------------------------------------------------------------- */

/* Nhãn small-caps kiểu mục lục */
.ac-eyebrow {
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.ac-eyebrow::before {
  content: "";
  width: 1.6em; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.ac-eyebrow.no-rule::before { display: none; }

/* Gạch ngang mảnh */
.ac-rule { border: 0; border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.ac-rule--double { border: 0; height: 4px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); margin: 1.5rem 0; }
.ac-rule--gold { border: 0; border-top: 2px solid var(--gold); width: 56px; margin: 1rem 0; }

/* Số mục § */
.ac-secno {
  font-family: var(--serif-display);
  color: var(--gold-deep);
  font-weight: 600;
  font-style: italic;
}

/* Vùng "trang" */
.ac-page { max-width: 1020px; margin: 0 auto; padding: 28px 22px 72px; }
.ac-page--narrow { max-width: 760px; }
.ac-page--wide { max-width: 1180px; }

/* Đầu trang: eyebrow + tiêu đề + rule */
.ac-page-head { margin: 6px 0 26px; }
.ac-page-head h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 600;
  margin: .35rem 0 0;
}
.ac-page-head .lead { color: var(--ink-soft); font-size: 1.05rem; margin: .5rem 0 0; max-width: 60ch; }
.ac-page-head .ac-rule { margin-top: 18px; }

/* ----------------------------------------------------------------------------
   4. CARD
   -------------------------------------------------------------------------- */
.ac-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: 22px 24px;
}
.ac-card--ruled { border-top: 3px solid var(--oxblood); }
.ac-card-title {
  font-family: var(--serif-display);
  font-size: 1.18rem; font-weight: 600;
  margin: 0 0 4px; display: flex; align-items: center; gap: .55rem;
}
.ac-card-title i { color: var(--oxblood); font-size: .95em; }
.ac-card-sub { color: var(--ink-soft); font-size: .92rem; margin: 0 0 16px; }

/* ----------------------------------------------------------------------------
   5. NÚT
   -------------------------------------------------------------------------- */
.ac-btn {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--rule-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--serif-body);
  font-weight: 600; font-size: .96rem;
  line-height: 1; letter-spacing: .01em;
  padding: .72em 1.25em;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ac-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--_fg); }
.ac-btn:active { transform: translateY(0); }
.ac-btn--solid { --_bg: var(--oxblood); --_fg: #fdf6ec; --_bd: var(--oxblood-deep); }
.ac-btn--solid:hover { --_bg: var(--oxblood-deep); --_fg: #fff; }
.ac-btn--gold { --_bg: var(--gold); --_fg: #2b2118; --_bd: var(--gold-deep); }
.ac-btn--gold:hover { --_bg: var(--gold-deep); --_fg: #fff; }
.ac-btn--ghost { --_bg: transparent; --_fg: var(--oxblood); --_bd: var(--rule-strong); }
.ac-btn--ghost:hover { --_bg: var(--oxblood); --_fg: #fff; --_bd: var(--oxblood-deep); }
.ac-btn--sm { padding: .5em .85em; font-size: .85rem; }
.ac-btn--lg { padding: .85em 1.6em; font-size: 1.05rem; }
.ac-btn--block { width: 100%; }

/* ----------------------------------------------------------------------------
   6. BADGE / PILL
   -------------------------------------------------------------------------- */
.ac-badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--serif-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .28em .7em; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--ink-soft); background: var(--paper-deep);
}
.ac-badge--oxblood { color: var(--oxblood); background: var(--oxblood-tint); border-color: #e3b9b6; }
.ac-badge--forest  { color: var(--forest); background: var(--forest-tint); border-color: #c2d6bd; }
.ac-badge--sienna  { color: var(--sienna); background: var(--sienna-tint); border-color: #e6caa0; }
.ac-badge--gold    { color: var(--gold-deep); background: var(--gold-tint); border-color: #e2cd97; }

/* ----------------------------------------------------------------------------
   7. THANH/METER
   -------------------------------------------------------------------------- */
.ac-meter { height: 9px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.ac-meter > i { display: block; height: 100%; background: var(--oxblood); border-radius: 999px; transition: width .5s ease; }

/* ----------------------------------------------------------------------------
   8. TRÍCH DẪN
   -------------------------------------------------------------------------- */
.ac-quote {
  border-left: 3px solid var(--gold);
  background: var(--gold-tint);
  padding: .8rem 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ----------------------------------------------------------------------------
   9. EMPTY STATE
   -------------------------------------------------------------------------- */
.ac-empty {
  text-align: center; padding: 60px 22px;
  background: var(--paper-raised); border: 1px dashed var(--rule-strong); border-radius: var(--r);
}
.ac-empty i { font-size: 2.6rem; color: var(--rule-strong); margin-bottom: 14px; }
.ac-empty h2 { font-size: 1.3rem; margin: 0 0 8px; }
.ac-empty p { color: var(--ink-soft); margin: 0 0 20px; }

/* ----------------------------------------------------------------------------
   10. BẢNG (class .ac-table + override Bootstrap .table)
   -------------------------------------------------------------------------- */
.ac-table { width: 100%; border-collapse: collapse; background: var(--paper-raised); }
.ac-table thead th {
  font-family: var(--serif-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oxblood); text-align: left;
  padding: 12px 14px; border-bottom: 2px solid var(--rule-strong);
  background: var(--paper-deep);
}
.ac-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.ac-table tbody tr:nth-child(even) td { background: rgba(43,33,24,.025); }
.ac-table tbody tr:hover td { background: var(--gold-tint); }

/* ----------------------------------------------------------------------------
   11. OVERRIDE BOOTSTRAP (Bootstrap nạp toàn cục)
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--serif-body);
  --bs-btn-border-radius: var(--r);
  font-weight: 600; letter-spacing: .01em;
}
.btn-primary {
  --bs-btn-bg: var(--oxblood); --bs-btn-border-color: var(--oxblood-deep);
  --bs-btn-hover-bg: var(--oxblood-deep); --bs-btn-hover-border-color: var(--oxblood-deep);
  --bs-btn-active-bg: var(--oxblood-deep); --bs-btn-active-border-color: var(--oxblood-deep);
  --bs-btn-color: #fdf6ec; --bs-btn-hover-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--paper-deep); --bs-btn-border-color: var(--rule-strong);
  --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--paper-edge);
  --bs-btn-hover-border-color: var(--rule-strong); --bs-btn-hover-color: var(--ink);
}
.btn-success { --bs-btn-bg: var(--forest); --bs-btn-border-color: var(--forest); --bs-btn-hover-bg: #345c41; --bs-btn-hover-border-color: #345c41; }
.btn-warning { --bs-btn-bg: var(--sienna); --bs-btn-border-color: var(--sienna); --bs-btn-color: #fff; --bs-btn-hover-bg: #9c5618; --bs-btn-hover-color:#fff; }
.btn-danger  { --bs-btn-bg: var(--oxblood); --bs-btn-border-color: var(--oxblood); --bs-btn-hover-bg: var(--oxblood-deep); }
.btn-outline-primary {
  --bs-btn-color: var(--oxblood); --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-bg: var(--oxblood); --bs-btn-hover-border-color: var(--oxblood-deep); --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft); --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-bg: var(--paper-deep); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--rule-strong);
}

.card {
  --bs-card-bg: var(--paper-raised);
  --bs-card-border-color: var(--rule);
  --bs-card-border-radius: var(--r);
  --bs-card-cap-bg: var(--paper-deep);
  box-shadow: var(--sh-1);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: rgba(43,33,24,.025);
  --bs-table-hover-bg: var(--gold-tint);
  vertical-align: middle;
}
.table > thead th, .table > thead td {
  font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oxblood); background: var(--paper-deep);
  border-bottom: 2px solid var(--rule-strong);
}

.form-control, .form-select {
  font-family: var(--serif-body);
  background-color: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
  background-color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176,141,63,.22);
  color: var(--ink);
}
.form-label { font-weight: 600; color: var(--ink); font-size: .9rem; }

.badge { font-family: var(--serif-body); font-weight: 600; letter-spacing: .04em; border-radius: 999px; }
.badge.bg-primary { background: var(--oxblood) !important; }
.badge.bg-success { background: var(--forest) !important; }
.badge.bg-warning { background: var(--sienna) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--oxblood) !important; }
.badge.bg-secondary { background: var(--ink-soft) !important; }

.alert { border-radius: var(--r); border: 1px solid var(--rule-strong); font-family: var(--serif-body); }
.alert-primary, .alert-info { background: var(--gold-tint); border-color: #e2cd97; color: var(--ink); }
.alert-success { background: var(--forest-tint); border-color: #c2d6bd; color: #2c5239; }
.alert-warning { background: var(--sienna-tint); border-color: #e6caa0; color: #7a4413; }
.alert-danger  { background: var(--oxblood-tint); border-color: #e3b9b6; color: var(--oxblood-deep); }

.modal-content {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-title { font-family: var(--serif-display); }
.modal-header { border-top: 4px solid var(--oxblood); border-radius: var(--r-lg) var(--r-lg) 0 0; }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--rule);
  --bs-nav-tabs-link-active-bg: var(--paper-raised);
  --bs-nav-tabs-link-active-color: var(--oxblood);
  --bs-nav-tabs-link-active-border-color: var(--rule) var(--rule) var(--paper-raised);
}
.nav-tabs .nav-link { font-family: var(--serif-body); font-weight: 600; color: var(--ink-soft); }
.nav-tabs .nav-link.active { border-top: 2px solid var(--oxblood); }

.pagination {
  --bs-pagination-color: var(--oxblood);
  --bs-pagination-bg: var(--paper-raised);
  --bs-pagination-border-color: var(--rule);
  --bs-pagination-hover-bg: var(--gold-tint);
  --bs-pagination-hover-color: var(--oxblood-deep);
  --bs-pagination-active-bg: var(--oxblood);
  --bs-pagination-active-border-color: var(--oxblood-deep);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(176,141,63,.22);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--paper-raised);
  --bs-dropdown-border-color: var(--rule-strong);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--gold-tint);
  --bs-dropdown-link-active-bg: var(--oxblood);
  font-family: var(--serif-body);
}

hr { border-top: 1px solid var(--rule); opacity: 1; }

.text-primary { color: var(--oxblood) !important; }
.text-muted { color: var(--ink-soft) !important; }
.bg-light { background: var(--paper-deep) !important; }
.border { border-color: var(--rule) !important; }

/* ----------------------------------------------------------------------------
   12. TIỆN ÍCH NHỎ
   -------------------------------------------------------------------------- */
.ac-display { font-family: var(--serif-display); }
.ac-italic { font-style: italic; }
.ac-muted { color: var(--ink-soft); }
.ac-center { text-align: center; }