@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;0,900;1,800;1,900&display=swap');

/* 1. CSS Custom Properties (:root) defining all brand variables */
:root {
  --wt-blue: #005B96;
  --wt-gold: #FCAF28;
  --wt-accent: #FA5F22;
  --wt-white: #FFFFFF;
  --wt-gray-bg: #F4F6F9;
  --wt-text: #333333;
  --wt-text-muted: #6C757D;
  --wt-navy: #004473;
}

/* 1.1 Page Main Titles (.title) World Trans Override */
.title,
.section0 .title {
  color: #005B96 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: 0.5px;
}

/* 1.2 WT Logo Mini Top-Left Style Override */
.wt-logo-mini {
  font-family: 'Montserrat', 'Trebuchet MS', 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -1px !important;
}

.wt-logo-mini .wt-w {
  color: #005B96 !important;
}

.wt-logo-mini .wt-t {
  color: #FCAF28 !important;
}

/* 1.3 Smooth Transition for Logo Collapsing/Expanding (World Trans -> WT) */
.main-header .logo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.3s ease !important;
}

/* Expanded State (Sidebar Open) */
.main-header .logo .logo-lg {
  opacity: 1 !important;
  transform: scale(1) !important;
  visibility: visible !important;
}

.main-header .logo .logo-mini {
  opacity: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.5) !important;
  visibility: hidden !important;
}

/* Collapsed State (Sidebar Closed) */
.sidebar-collapse .main-header .logo .logo-lg {
  opacity: 0 !important;
  transform: scale(0.5) !important;
  visibility: hidden !important;
}

.sidebar-collapse .main-header .logo .logo-mini {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  visibility: visible !important;
}

/* 2. AdminLTE Skin Override - Soft Gray Navbar (Worldtrans Style) */
.skin-blue .main-header .navbar {
  background-color: #F0F4F8;
  border-bottom: 1px solid #D9E2EC;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.skin-blue .main-header .logo {
  background-color: #F0F4F8;
  color: #005B96;
  border-bottom: 1px solid #D9E2EC;
  border-right: 1px solid #D9E2EC;
}

.skin-blue .main-header .logo:hover {
  background-color: #f8f9fa;
  color: #004473;
}

.skin-blue .main-header .logo .logo-mini b {
  color: #005B96;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #005B96;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #f4f6f9;
  color: #004473;
}

.skin-blue .main-header .navbar .nav > li > a {
  color: #333333;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
  background-color: #f4f6f9;
  color: #005B96;
}

/* 3. Sidebar (Option B — keep dark background, brand color accents) */
.skin-blue .sidebar-menu > li.active > a { border-left: 3px solid #FCAF28; }
.skin-blue .sidebar-menu > li > a:hover { background: #1e282c; border-left-color: #FCAF28; }
.skin-blue .sidebar-menu > li.active > a > .fa, 
.skin-blue .sidebar-menu > li.active > a > .glyphicon, 
.skin-blue .sidebar-menu > li.active > a > .ion { color: #FCAF28; }
.skin-blue .treeview-menu > li.active > a, 
.skin-blue .treeview-menu > li > a:hover { color: #FCAF28; }

/* 4. Bootstrap Button Override */
/* Áp dụng màu vàng cam (#FCAF28) cho tất cả các nút ngoại trừ .btn-success (xanh lá) */
.btn-primary, 
.btn-warning, 
.btn-danger, 
.btn-info, 
.btn-default,
.btn:not(.btn-success):not(.close),
button:not(.close):not(.btn-success),
input[type="submit"]:not(.btn-success),
input[type="button"]:not(.btn-success) { 
  background-color: #FCAF28 !important; 
  border-color: #e99d1a !important; 
  color: #ffffff !important; 
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:active:focus,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:active:focus,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:active:focus,
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active:focus,
.btn:not(.btn-success):not(.close):hover,
.btn:not(.btn-success):not(.close):focus,
.btn:not(.btn-success):not(.close):active { 
  background-color: #e99d1a !important; 
  border-color: #d18d15 !important;
  color: #ffffff !important; 
}

/* Giữ nguyên màu xanh lá cho nút .btn-success */
.btn-success { 
  background-color: #28a745 !important; 
  border-color: #218838 !important; 
  color: #ffffff !important; 
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:active:focus { 
  background-color: #218838 !important; 
  border-color: #1e7e34 !important; 
  color: #ffffff !important; 
}

/* 5. Bootstrap Nav-Tabs Override */
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { background-color: #FCAF28; color: #FFFFFF; border-color: #FCAF28; }
.nav-tabs > li > a { color: #005B96; }
.nav-tabs > li > a:hover { background-color: #FFF3E0; border-color: #FCAF28; }

/* 6. AdminLTE Box/Card Override */
.box.box-primary { border-top-color: #005B96; }
.box.box-warning { border-top-color: #FCAF28; }
.box.box-danger { border-top-color: #FA5F22; }

/* 7. Modal Override - Soft Gray Header (#F0F4F8) with Yellow-Orange Text (#FCAF28) */
.modal-header { 
  background-color: #F0F4F8 !important; 
  color: #FCAF28 !important; 
  border-bottom: 1px solid #D9E2EC !important;
}
.modal-header .modal-title,
.modal-header .modal-title *,
.modal-header h4,
.modal-header h5,
.modal-header #dialogMaVN,
.modal-header strong { 
  color: #FCAF28 !important; 
  font-weight: 700 !important;
}
.modal-header .close { 
  color: #FCAF28 !important; 
  opacity: 0.8 !important; 
  text-shadow: none !important;
}
.modal-header .close:hover { 
  color: #D97706 !important; 
  opacity: 1 !important; 
}

/* 8. Content Wrapper */
.content-wrapper { background-color: #FFFFFF !important; }

/* 9. Link Colors */
a { color: #005B96; }
a:hover, a:focus { color: #004473; }

/* 10. Select2 Override */
.select2-container--default .select2-selection--single:focus, 
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #005B96; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #005B96; }

/* 11. Alert & Callout Override */
.callout.callout-info { border-left-color: #005B96; }
.callout.callout-warning { border-left-color: #FCAF28; }
.callout.callout-danger { border-left-color: #FA5F22; }
.alert-info { background-color: #e8f4fc; border-color: #005B96; color: #005B96; }
.alert-warning { background-color: #fff8ec; border-color: #FCAF28; color: #b37a00; }
.alert-danger { background-color: #fef0ec; border-color: #FA5F22; color: #FA5F22; }

/* 12. Label & Badge Override */
.label-primary, .bg-light-blue { background-color: #005B96 !important; }
.label-warning { background-color: #FCAF28 !important; }
.label-danger { background-color: #FA5F22 !important; }

/* 13. Progress Bar Override */
.progress-bar-primary { background-color: #005B96; }
.progress-bar-warning { background-color: #FCAF28; }
.progress-bar-danger { background-color: #FA5F22; }

/* 14. Rich-text Content Isolation (CRITICAL) */
.rich-text-content *, 
.rich-text-content a, 
.rich-text-content table { all: revert !important; }
.cke_wrapper a, .cke_top a, .cke_bottom a { color: inherit; }

/* 15. Login page styles */
.card-title { color: #005B96; }

/* 16. AdminLTE footer */
.main-footer { background-color: #fff; border-top: 1px solid #d2d6de; }

/* 17. Table World Trans Style Override (Only Colors, No Layout/Padding Changes) */
.table {
  background-color: #FFFFFF;
}

/* Header Xanh dương đậm (#005B96), chữ trắng */
.table > thead > tr > th,
.table-bordered > thead > tr > th {
  background-color: #005B96 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Link sắp xếp tiêu đề (nếu có) màu trắng */
.table > thead > tr > th a {
  color: #FFFFFF !important;
  text-decoration: underline;
}

/* Thân bảng với đường viền xám nhạt */
.table-bordered,
.table-bordered > tbody > tr > th, 
.table-bordered > tfoot > tr > th, 
.table-bordered > tbody > tr > td, 
.table-bordered > tfoot > tr > td {
  border: 1px solid #EEEEEE !important;
}

/* Zebra Striping (Dòng xám nhạt đan xen) */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #F8FAFC !important;
}

/* Hiệu ứng Hover dòng (Màu vàng cam nhạt #FFF3E0 tiệp màu button mới) */
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
  background-color: #FFF3E0 !important;
}

/* 18. Table Footer (.tb-foot), Header (.tb-head), & Legend Table Headers World Trans Override */
.tb-head,
.tb-head > th,
.tb-head > td,
.tb-foot,
.tb-foot > th,
.tb-foot > td,
tr[style*="#1b80c8"],
tr[style*="#1b80c8"] > th,
tr[style*="#1b80c8"] > td {
  background-color: #005B96 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

.tb-foot strong,
.tb-head strong,
tr[style*="#1b80c8"] strong {
  color: #FFFFFF !important;
}

/* 19. Global Table Border Radius (8px Rounded Corners) Override */
.table,
table,
.table-bordered,
.display-table,
.table1 {
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.table-responsive,
.table-body,
.hm {
  border-radius: 8px !important;
}

/* Xử lý viền trong cho border-collapse: separate để không bị trùng viền */
.table-bordered > thead > tr > th {
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid #FFFFFF !important;
  border-bottom: 1px solid #FFFFFF !important;
}

.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid #EEEEEE !important;
  border-bottom: 1px solid #EEEEEE !important;
}

/* Bỏ viền phải cho cột cuối cùng ở góc trên bên phải */
.table-bordered > thead > tr:first-child > th:last-child,
.table-bordered > tbody > tr > td:last-child,
.table-bordered > tbody > tr > th:last-child,
.table-bordered > tfoot > tr > td:last-child,
.table-bordered > tfoot > tr > th:last-child {
  border-right: none !important;
}

/* Bỏ viền dưới cho hàng cuối cùng */
.table-bordered > tbody > tr:last-child > td,
.table-bordered > tfoot > tr:last-child > td {
  border-bottom: none !important;
}

/* Bo góc 4 đỉnh cho bảng (Kể cả bảng tiêu đề 2 tầng rowspan/colspan) */
.table > thead > tr:first-child > th:first-child,
.table-bordered > thead > tr:first-child > th:first-child,
table > thead > tr:first-child > th:first-child {
  border-top-left-radius: 5px !important;
}

.table > thead > tr:first-child > th:last-child,
.table-bordered > thead > tr:first-child > th:last-child,
table > thead > tr:first-child > th:last-child {
  border-top-right-radius: 5px !important;
}

.table > tbody > tr:last-child > td:first-child,
.table > tfoot > tr:last-child > td:first-child,
.table-bordered > tbody > tr:last-child > td:first-child,
table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 5px !important;
}

.table > tbody > tr:last-child > td:last-child,
.table > tfoot > tr:last-child > td:last-child,
.table-bordered > tbody > tr:last-child > td:last-child,
table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 5px !important;
}

/* 20. Pagination Active Page Highlight Override - Synchronized with Table Header (#005B96) */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
.page-item.active .page-link {
  background-color: #005B96 !important;
  border-color: #005B96 !important;
  color: #FFFFFF !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #005B96 !important;
}