@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea,
table, th, td, label, strong, small, li, div, span:not(.fa):not(.glyphicon) {
  font-family: 'Kanit', sans-serif !important;
}
body { background: #f6f5fa; color: #302a3d; }
.language-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; margin-right: 8px; vertical-align: middle; background: #f6f3fa; border: 1px solid #e6deef; border-radius: 15px; }
.language-switch .language-option { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; min-height: 36px; border-radius: 11px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #787083; text-decoration: none; }
.language-switch .language-option:hover { background: #eae2f3; color: #65438e; }
.language-switch .language-option.is-active { background: #65438e; color: #fff; box-shadow: 0 2px 5px rgba(70, 42, 104, .15); }
.language-option.is-active::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #d8e58a; flex-shrink: 0; }
#sidebar { background: #50396d; }
#sidebar h1 .logo { font-size: 21px; font-weight: 500; letter-spacing: 0; }
#sidebar ul.components { margin-bottom: 22px !important; }
#sidebar ul li a { display: flex; align-items: flex-start; gap: 9px; border-radius: 12px; padding: 12px 11px; font-size: 14px; line-height: 1.55; }
#sidebar ul li a .fa { flex: 0 0 17px; margin-top: 4px; text-align: center; font-size: 14px; }
#sidebar ul li.active > a { background: #fff; color: #50396d; }
#sidebar ul li a:hover { background: #675080; color: #fff; }
#sidebar ul li.active > a:hover { background: #eee7f6; color: #50396d; }
#sidebar .footer { opacity: 1; font-size: 12px; line-height: 1.6; color: #e7dff0; }
#sidebar .footer p { margin-bottom: 0; }
#sidebar ul.components.bg-light { padding: 12px !important; border-radius: 10px; font-size: 13px !important; line-height: 1.55; }
#sidebar ul.components.bg-light li { overflow-wrap: anywhere; }
#sidebar ul.components.bg-light .fa { color: #765297; margin-right: 4px; }
.portal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; margin: 0 0 14px; }
.portal-header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-header-brand .logo-cmu { display: block; flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; }
.portal-header-brand h1 { margin: 0; color: #39274d; font-size: clamp(19px, 2.4vw, 27px); font-weight: 500; line-height: 1.35; }
.portal-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.portal-header-actions > div { display: contents; }
.portal-header-actions .language-switch { margin: 0; }
.portal-header-actions .logout { padding: 8px 12px; border: 1px solid #e5d8bb; border-radius: 11px; background: #fff8e8; color: #806332; font-size: 13px; white-space: nowrap; }
.portal-header-divider { margin: 12px 0 22px; border-color: #e3dce9; opacity: 1; }
@media (max-width: 767px) {
  .portal-header { align-items: flex-start; gap: 8px; min-height: 0; margin-top: 8px; }
  .portal-header-brand { gap: 9px; }
  .portal-header-brand .logo-cmu { flex-basis: 54px; width: 54px; height: 54px; }
  .portal-header-brand h1 { font-size: 16px; line-height: 1.4; }
  .portal-header-actions { gap: 5px; }
  .portal-header-actions .language-switch .language-option { min-height: 32px; padding: 6px 8px; font-size: 11px; }
  .portal-header-actions .logout { padding: 7px 9px; font-size: 12px; }
  .portal-header-divider { margin: 10px 0 18px; }
}
.payment-page { max-width: 1400px; margin: 0 auto; }
.payment-page .bill-navbar { background: transparent !important; padding: 0; margin: 0 0 16px; box-shadow: none; border: 0; }
.bill-navbar > .container-fluid { padding: 0; }
.bill-navbar .navbar-toggler { display: none; }
.bill-navbar .navbar-collapse { display: flex !important; }
.bill-navbar .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; width: 100%; }
.bill-navbar .nav-item { position: relative; }
.bill-navbar .nav-link { display: flex; align-items: center; gap: 9px; padding: 10px 14px !important; border: 1px solid #e3daed; border-radius: 11px; background: #fff; color: #62447c !important; font-size: 14px; font-weight: 500; line-height: 1.5; }
.bill-navbar .nav-item:first-child > .nav-link::before { content: '\f02f'; font-family: FontAwesome; font-weight: normal; }
.bill-navbar .nav-item:last-child > .nav-link::before { content: '\f0f6'; font-family: FontAwesome; font-weight: normal; }
.bill-navbar .nav-link:hover, .bill-navbar .nav-link[aria-expanded="true"] { background: #eee7f6; border-color: #cbb8df; }
.bill-navbar .nav-link.dropdown-toggle { padding-right: 24px !important; }
.bill-navbar .dropdown-toggle::after { position: static !important; right: auto !important; margin-left: 8px; margin-right: 0; flex-shrink: 0; }
.bill-navbar .dropdown-menu { min-width: 300px; width: max-content; max-width: min(440px, calc(100vw - 48px)); max-height: 60vh; overflow-y: auto; padding: 6px; margin-top: 6px; border: 1px solid #e5dced; border-radius: 13px; background: #fff; box-shadow: 0 12px 32px rgba(49, 30, 70, .12); }
.bill-navbar .dropdown-item { white-space: normal; overflow-wrap: anywhere; border-radius: 7px; padding: 9px 11px; font-size: 13px; line-height: 1.6; color: #483953; margin: 0 !important; }
.bill-navbar a.dropdown-item:hover, .bill-navbar a.dropdown-item:focus { background: #f2edf8; color: #65438e; }
.bill-navbar .dropdown-menu .bg-success { background: #f1ecf7 !important; border-radius: 7px; margin: 3px 0; }
.bill-navbar .bg-success .dropdown-item { color: #73518e !important; font-size: 12px; font-weight: 500; padding: 7px 11px; }
.bill-navbar .dropdown-item.disabled { color: #8a8292 !important; font-size: 12px; }
.bill-navbar .dropdown-divider { margin: 5px 0; border-color: #eee8f4; }
@media (max-width: 600px) {
  .bill-navbar .nav-item { width: 100%; }
  .bill-navbar .nav-link { justify-content: flex-start; }
  .bill-navbar .dropdown-toggle::after { margin-left: auto; }
  .bill-navbar .dropdown-menu { position: static !important; transform: none !important; width: 100%; min-width: 0; max-width: 100%; margin-bottom: 6px; box-shadow: none; }
}
.payment-student { padding: 18px 22px; border: 1px solid #e3d9ee; border-left: 4px solid #8a64ae; border-radius: 12px; background: #eee7f6; color: #53396d; font-size: 16px; font-weight: 500; line-height: 1.7; margin: 0 0 24px; }
.payment-page > .row { display: grid; grid-template-columns: .85fr 1fr 1.15fr; gap: 16px; margin: 0; align-items: start; }
.payment-page > .row > [class*="col-"] { width: 100%; max-width: 100%; flex: none; min-width: 0; padding: 18px; border: 1px solid #e7e0ef; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(51, 31, 75, .03) !important; }
.payment-page .card > .mt-2 { text-align: left !important; font-size: 12px !important; font-weight: 500; color: #795691 !important; margin: 0 0 8px !important; }
.payment-page .titlemenu { font-size: 17px !important; line-height: 1.55; font-weight: 500; color: #3f2d54 !important; margin: 0 0 14px !important; padding: 0 0 12px !important; background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid #eee8f4; text-align: left !important; }
.payment-page .card .card { border: 0; border-radius: 10px; background: #f8f6fb; box-shadow: none; }
.payment-page .card .card-body { padding: 14px; }
.payment-page .card .card-body p { font-size: 13px; line-height: 1.65; margin-bottom: 10px !important; }
.payment-page .card .card-body label { font-size: 13px !important; margin-bottom: 4px !important; }
.payment-page .card .card-body > div[style*="font-size:20px"] { font-size: 16px !important; line-height: 1.6; }
.payment-page > .row > .card > p { font-size: 12px; line-height: 1.6; color: #81758b; margin: 8px 0 0; }
.payment-page .cmu-minimal-container { margin-top: 0 !important; }
.payment-page .btn { border-radius: 10px; padding: 10px 16px; white-space: normal; margin-top: 6px; margin-bottom: 6px; }
.payment-page .btn-primary { background: #765297; border-color: #765297; }
.payment-page .btn-primary:hover { background: #5e3d7e; border-color: #5e3d7e; }
.payment-page .cmu-select-soft { font-size: 14px !important; width: 100%; }
.payment-page .card label { font-size: 15px !important; }
.payment-page .card h5[style*="background-color:#FF0"] { background: #e9f6ee !important; color: #276744; padding: 8px 10px !important; margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.payment-page .card a { overflow-wrap: anywhere; }
.payment-page .card hr { border-color: #eee8f4; margin: 22px 0; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #b59bce; outline-offset: 3px; }
@media (max-width: 1100px) {
  .payment-page > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-page > .row > .card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .payment-page > .row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .payment-page > .row > [class*="col-"] { padding: 16px; }
}
#content { min-width: 0; }
.grade-page { max-width: 1200px; margin: 0 auto; }
.grade-heading { margin: 28px 0 24px; }
.grade-heading small { display: block; color: #806299; font-size: 12px; letter-spacing: .12em; margin-bottom: 8px; }
.grade-heading h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 600; margin: 0; color: #39274d; }
.grade-heading p { color: #766e83; margin: 8px 0 0; }
.grade-page .cmu-table { box-shadow: none; margin: 0; border: 0; font-size: 14px; }
.grade-page .cmu-table th, .grade-page .cmu-table td { padding: 14px 16px; vertical-align: middle; border: 0; border-bottom: 1px solid #eeeaf3; }
.grade-page .cmu-table thead th { background: #f2edf8; color: #62447c; font-weight: 500; white-space: nowrap; }
.grade-page .cmu-table tbody tr:last-child td { border-bottom: 0; }
.grade-page .cmu-table tbody tr:nth-of-type(even) { background: #fcfbfe; }
.grade-page .cmu-table tbody tr:hover { background: #f6f1fb; }
.grade-profile, .grade-term { background: #fff; border: 1px solid #e8e2ef; border-radius: 18px; overflow: hidden; box-shadow: 0 5px 24px rgba(51, 31, 75, .04); margin-bottom: 24px; }
.grade-profile .cmu-table td { padding: 10px 18px; }
.grade-profile .cmu-table td:first-child[rowspan] { text-align: center; background: #f7f3fb; }
.grade-profile .cmu-table td[align="right"] { color: #82758f; white-space: nowrap; }
.grade-profile strong { font-weight: 500; }
.grade-profile { border-color: #e8e0ef; border-radius: 18px; box-shadow: 0 8px 28px rgba(55, 35, 78, .055); }
.grade-profile .cmu-table td { padding: 13px 18px; border-bottom: 1px solid #f0ebf5; font-size: 14px; }
.grade-profile .cmu-table tr:nth-child(even) td:not([rowspan]) { background: #fcfbfd; }
.grade-profile .cmu-table td[align="right"] { width: 165px; padding-right: 10px; color: #887b95; font-size: 13px; }
.grade-profile .cmu-table td[rowspan] { width: 150px; min-width: 150px; background: linear-gradient(145deg, #f8f5fb, #f0eaf6); }
.grade-profile .cmu-table td[rowspan] img { width: 120px !important; max-width: 100%; height: 154px; object-fit: cover; object-position: center top; border: 3px solid #fff !important; border-radius: 14px !important; box-shadow: 0 4px 14px rgba(57, 39, 77, .14); }
.grade-profile .cmu-table td[rowspan] .cmu-student-photo--empty { display: inline-flex; width: 120px; height: 154px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px dashed #d5c8e0; border-radius: 14px; background: #fff; font-size: 12px; }
.grade-profile .cmu-table tr:first-child td:last-child strong { display: inline-block; padding: 4px 10px; border-radius: 8px; background: #f1ebf7; color: #5f407b; font-size: 15px; letter-spacing: .02em; }
.grade-profile .cmu-table tr:last-child td { border-bottom: 0; }
.grade-record-title { font-size: 21px; font-weight: 500; margin: 34px 0 18px; }
.grade-term-title { font-size: 18px; font-weight: 500; padding: 20px 22px; margin: 0; color: #51346d; border-bottom: 1px solid #eeeaf3; }
.grade-term-title .fa { margin-right: 8px; }
.grade-term-title { background: linear-gradient(180deg, #fff 0%, #fdfcff 100%); border-radius: 17px 17px 0 0; }
.grade-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.grade-courses { border-collapse: separate !important; border-spacing: 0; }
.grade-courses, .grade-courses thead, .grade-courses thead tr, .grade-courses thead th { border-radius: 0 !important; }
.grade-term .grade-table-scroll:first-of-type .grade-courses thead th { border-top: 0; }
.grade-term .grade-table-scroll:first-of-type { border-top: 1px solid #eee8f4; }
.grade-table-scroll:focus-visible { outline: 2px solid #806299; outline-offset: -2px; }
.grade-courses { min-width: 600px; }
.grade-summary { border-top: 1px solid #e8e2ef; border-radius: 0 0 17px 17px; overflow-x: auto; overflow-y: hidden; }
.grade-summary table { min-width: 680px; margin-bottom: 0; border-collapse: separate !important; border-spacing: 0; border-radius: 0 !important; }
.grade-summary thead, .grade-summary thead tr, .grade-summary thead th { border-radius: 0 !important; }
.grade-summary tbody tr:last-child td { background: #f7f3fb; border-bottom: 0; }
.grade-summary tbody tr:last-child td:first-child { border-bottom-left-radius: 0; }
.grade-summary tbody tr:last-child td:last-child { border-bottom-right-radius: 0; color: #65418a; font-weight: 600; }
.grade-empty { padding: 32px; text-align: center; background: white; border: 1px dashed #d9cde5; border-radius: 16px; color: #766484; }
@media (max-width: 600px) {
  #content { padding: 48px 16px 24px !important; }
  .grade-profile .cmu-table td { padding: 9px 8px; font-size: 12px; }
  .grade-profile .cmu-table td[align="right"] { white-space: normal; }
  .grade-profile .cmu-table td[rowspan] { width: 124px; min-width: 124px; }
  .grade-profile .cmu-table td[rowspan] img, .grade-profile .cmu-table td[rowspan] .cmu-student-photo--empty { width: 100px !important; height: 128px; }
  .grade-profile .cmu-table td[align="right"] { width: 90px; font-size: 11px; }
  .grade-profile .cmu-table td { padding: 10px 7px; }
  .grade-term-title { padding: 18px 16px; }
}