:root{
  --cds-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cds-focus:0 0 0 3px rgba(37,99,235,.22);
}

/*
 * Lớp nền tảng không xâm lấn.
 * Không đặt cỡ chữ, màu tiêu đề, kích thước icon, card, bảng, form hoặc nút.
 * Mỗi module tiếp tục dùng đúng mật độ và bố cục riêng; Nội trú là chuẩn tham chiếu.
 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--cds-font)!important;overflow-wrap:break-word}
main{min-width:0}
img,svg,video,canvas{max-width:100%}
.table-responsive{max-width:100%;-webkit-overflow-scrolling:touch}

/* Focus rõ ràng nhưng không thay đổi kích thước thành phần. */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:0;
  box-shadow:var(--cds-focus);
}

/*
 * Tương phản cho các vùng nền đậm phổ biến.
 * Chỉ tác động bên trong đúng vùng màu, không ép màu chữ toàn trang.
 */
.navbar-dark,
.cds-nav,
.bg-dark,
.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-info.text-white,
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-danger,
.cm-desktop-sidebar,
.cm-mobile-more .offcanvas-header{
  color:#fff;
}

.navbar-dark h1,.navbar-dark h2,.navbar-dark h3,.navbar-dark h4,.navbar-dark h5,.navbar-dark h6,
.cds-nav h1,.cds-nav h2,.cds-nav h3,.cds-nav h4,.cds-nav h5,.cds-nav h6,
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5,.bg-dark h6,
.bg-primary h1,.bg-primary h2,.bg-primary h3,.bg-primary h4,.bg-primary h5,.bg-primary h6,
.bg-secondary h1,.bg-secondary h2,.bg-secondary h3,.bg-secondary h4,.bg-secondary h5,.bg-secondary h6,
.bg-success h1,.bg-success h2,.bg-success h3,.bg-success h4,.bg-success h5,.bg-success h6,
.bg-danger h1,.bg-danger h2,.bg-danger h3,.bg-danger h4,.bg-danger h5,.bg-danger h6,
.card-header.bg-primary,.card-header.bg-secondary,.card-header.bg-success,.card-header.bg-danger,
.cm-desktop-sidebar h1,.cm-desktop-sidebar h2,.cm-desktop-sidebar h3,.cm-desktop-sidebar h4,.cm-desktop-sidebar h5,.cm-desktop-sidebar h6,
.cm-mobile-more .offcanvas-header h1,.cm-mobile-more .offcanvas-header h2,.cm-mobile-more .offcanvas-header h3,.cm-mobile-more .offcanvas-header h4,.cm-mobile-more .offcanvas-header h5,.cm-mobile-more .offcanvas-header h6{
  color:#fff!important;
}

.navbar-dark .text-muted,.navbar-dark small,.navbar-dark .small,
.cds-nav .text-muted,.cds-nav small,.cds-nav .small,
.bg-dark .text-muted,.bg-dark small,.bg-dark .small,
.bg-primary .text-muted,.bg-primary small,.bg-primary .small,
.bg-secondary .text-muted,.bg-secondary small,.bg-secondary .small,
.bg-success .text-muted,.bg-success small,.bg-success .small,
.bg-danger .text-muted,.bg-danger small,.bg-danger .small,
.cm-desktop-sidebar .text-muted,.cm-desktop-sidebar small,.cm-desktop-sidebar .small,
.cm-mobile-more .offcanvas-header .text-muted,.cm-mobile-more .offcanvas-header small,.cm-mobile-more .offcanvas-header .small{
  color:rgba(255,255,255,.8)!important;
}

.navbar-dark a:not(.dropdown-item),.cds-nav a:not(.dropdown-item),
.cm-desktop-sidebar a,.cm-mobile-more .offcanvas-header a{
  color:#fff;
}

/* Bootstrap warning là nền sáng, phải dùng chữ tối. */
.bg-warning,.btn-warning,.alert-warning{color:#5b3900!important}

/* Tiến trình dùng chung cho các thao tác POST chưa có giao diện xử lý riêng. */
.cds-action-progress{
  position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;
  padding:20px;background:rgba(15,23,42,.46);backdrop-filter:blur(2px)
}
.cds-action-progress[hidden]{display:none!important}
.cds-action-progress__card{
  width:min(430px,calc(100vw - 32px));padding:24px;border:1px solid rgba(148,163,184,.28);
  border-radius:18px;background:#fff;color:#172033;box-shadow:0 24px 70px rgba(15,23,42,.24)
}
.cds-action-progress__head{display:flex;align-items:center;gap:14px;margin-bottom:17px}
.cds-action-progress__spinner{
  width:42px;height:42px;flex:0 0 42px;border:4px solid #dbeafe;border-top-color:#1677ff;
  border-radius:50%;animation:cds-action-spin .85s linear infinite
}
.cds-action-progress__title{margin:0;font-size:18px;font-weight:750;line-height:1.3}
.cds-action-progress__detail{margin:4px 0 0;color:#64748b;font-size:14px;line-height:1.4}
.cds-action-progress__track{height:10px;overflow:hidden;border-radius:999px;background:#e8eef7}
.cds-action-progress__bar{height:100%;width:5%;border-radius:inherit;background:linear-gradient(90deg,#1677ff,#22c1f1);transition:width .35s ease}
.cds-action-progress__meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#64748b;font-size:13px}
.cds-action-progress__percent{color:#1265d6;font-weight:750;font-variant-numeric:tabular-nums}
@keyframes cds-action-spin{to{transform:rotate(360deg)}}

.cds-result-toast{
  position:fixed;right:22px;bottom:22px;z-index:2147483001;display:flex;align-items:flex-start;gap:11px;
  width:min(420px,calc(100vw - 32px));padding:14px 16px;border:1px solid #a7e5c2;border-radius:14px;
  background:#edfff4;color:#14532d;box-shadow:0 16px 45px rgba(15,23,42,.18);
  animation:cds-toast-in .22s ease-out
}
.cds-result-toast[hidden]{display:none!important}
.cds-result-toast__icon{font-size:21px;line-height:1}
.cds-result-toast__text{font-size:14px;line-height:1.45}
.cds-result-toast__text strong{display:block;margin-bottom:2px;font-size:15px}
@keyframes cds-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Giữ điều khiển cảm ứng dễ dùng mà không đổi cỡ chữ hoặc mật độ bố cục. */
@media(max-width:767.98px){
  input,select,textarea{max-width:100%}
  .table-responsive{overflow-x:auto}
  .cds-result-toast{right:16px;bottom:16px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}