/* * Ký túc xá HCMUE - giao diện web đồng bộ với app (màu, bo góc, font, sáng/tối). * Phủ lên AdminLTE 2 / Bootstrap 3 (admin ACP + trang sinh viên) và ace (đăng nhập, đăng ký, tra cứu). * Nạp SAU các file CSS khác. Thẻ cần class "ktx". Chế độ tối: (js/hcmue-theme.js). */ /* ================================ Màu & kích thước ================================ */ :root, :root[data-theme="light"] { --brand: #1552A5; --brand-2: #2F6FD0; --brand-deep: #0B2F66; --brand-light: #3B82F6; --primary: #1552A5; --on-primary: #ffffff; --primary-hover: #0F4389; --primary-tint: rgba(21, 82, 165, .09); --primary-tint-2: rgba(21, 82, 165, .16); --bg: #F3F6FB; --surface: #ffffff; --surface-2: #F9FAFD; --surface-3: #E9EEF6; --field: #ffffff; --field-disabled: #EEF2F8; --text: #1A2433; --text-2: #3B4656; --muted: #64748B; --outline: #DCE3EE; --outline-2: #E8EDF4; --success: #15803D; --success-bg: rgba(21, 128, 61, .10); --warning: #B45309; --warning-bg: rgba(180, 83, 9, .10); --danger: #C62828; --danger-bg: rgba(198, 40, 40, .09); --info: #1552A5; --info-bg: rgba(21, 82, 165, .09); --neutral: #64748B; --neutral-bg: rgba(100, 116, 139, .12); --btn-success: #16A34A; --btn-danger: #D64545; --btn-warning: #D97706; --btn-info: #0EA5E9; --gradient: linear-gradient(135deg, #1552A5 0%, #2F6FD0 100%); --gradient-deep: linear-gradient(135deg, #0B2F66 0%, #1552A5 55%, #2F6FD0 100%); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow: 0 4px 16px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05); --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14); --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --sidebar-w: 248px; --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } :root[data-theme="dark"] { --brand: #8AB4FF; --brand-2: #5B8DEF; --primary: #8AB4FF; --on-primary: #062150; --primary-hover: #A9C8FF; --primary-tint: rgba(138, 180, 255, .14); --primary-tint-2: rgba(138, 180, 255, .24); --bg: #0E131A; --surface: #18202A; --surface-2: #1B2430; --surface-3: #222C39; --field: #1D2733; --field-disabled: #1A222C; --text: #E6EBF2; --text-2: #C7D0DC; --muted: #A3AEBD; --outline: #2E3A48; --outline-2: #26313D; --success: #5BD68E; --success-bg: rgba(91, 214, 142, .14); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, .14); --danger: #FF8A80; --danger-bg: rgba(255, 138, 128, .14); --info: #8AB4FF; --info-bg: rgba(138, 180, 255, .14); --neutral: #A3AEBD; --neutral-bg: rgba(163, 174, 189, .14); --btn-success: #1F9D55; --btn-danger: #D45151; --btn-warning: #C98A0B; --btn-info: #0B8FC7; --gradient: linear-gradient(135deg, #123A78 0%, #0B2552 100%); --gradient-deep: linear-gradient(135deg, #0A1E40 0%, #123A78 60%, #1A4C96 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5); color-scheme: dark; } /* ================================ Nền & chữ ================================ */ body.ktx { font-family: var(--font); background: var(--bg) !important; color: var(--text); font-size: 14.5px; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; } .ktx h1, .ktx h2, .ktx h3, .ktx h4, .ktx h5, .ktx h6, .ktx .h1, .ktx .h2, .ktx .h3, .ktx .h4, .ktx .h5, .ktx .h6 { font-family: var(--font); color: var(--text); letter-spacing: -.01em; } .ktx a { color: var(--primary); } .ktx a:hover, .ktx a:focus { color: var(--primary-hover); } .ktx .text-muted, .ktx .help-block { color: var(--muted) !important; } .ktx .text-red, .ktx .text-danger, .ktx .red { color: var(--danger) !important; } .ktx .text-green, .ktx .text-success, .ktx .green { color: var(--success) !important; } .ktx .text-yellow, .ktx .text-warning { color: var(--warning) !important; } .ktx .text-blue, .ktx .text-info, .ktx .text-aqua, .ktx .text-primary { color: var(--info) !important; } .ktx hr { border-color: var(--outline); } .ktx code { background: var(--primary-tint); color: var(--primary); border-radius: 6px; padding: 1px 6px; } .ktx ::selection { background: var(--primary-tint-2); } .ktx *::-webkit-scrollbar { width: 10px; height: 10px; } .ktx *::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .ktx *::-webkit-scrollbar-track { background: transparent; } /* ================================ Khung AdminLTE ================================ */ .ktx .wrapper, .ktx .content-wrapper, .ktx .right-side { background: var(--bg) !important; } .ktx .content-wrapper { min-height: calc(100vh - 60px) !important; } .ktx .content { padding: 20px 22px 28px; } .ktx .content-header { padding: 18px 22px 0; } .ktx .content-header > h1 { font-size: 22px; font-weight: 700; } .ktx .content-header > .breadcrumb { background: transparent; top: 18px; font-size: 12.5px; color: var(--muted); } .ktx .content-header > .breadcrumb > li > a { color: var(--muted); } .ktx .breadcrumb { background: transparent; border-radius: var(--r-sm); } /* ---- Thanh trên ---- */ .ktx .main-header { box-shadow: none; } .ktx.skin-blue .main-header .navbar, .ktx .main-header .navbar { background: var(--surface) !important; border-bottom: 1px solid var(--outline); min-height: 60px; } .ktx.skin-blue .main-header .logo, .ktx .main-header .logo { background: var(--gradient) !important; height: 60px; line-height: 60px; color: #fff !important; border-bottom: 0 !important; font-family: var(--font); padding: 0 12px; text-align: left; width: var(--sidebar-w); } .ktx .main-header .logo .logo-lg { display: flex; align-items: center; gap: 10px; height: 60px; font-size: 16px; } .ktx .main-header .logo .logo-mini { display: none; } .ktx .ktx-logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 4px 6px; height: 38px; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); } .ktx .ktx-logo-chip img { height: 30px; width: auto; display: block; } .ktx .ktx-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .ktx .ktx-brand-text b { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; } .ktx .ktx-brand-text small { font-size: 11.5px; opacity: .85; font-weight: 500; white-space: nowrap; } .ktx .main-header .navbar { margin-left: var(--sidebar-w); } .ktx.skin-blue .main-header .navbar .sidebar-toggle, .ktx .main-header .navbar .sidebar-toggle { color: var(--text-2) !important; padding: 20px 18px; height: 60px; line-height: 20px; } .ktx .main-header .navbar .sidebar-toggle:hover { background: var(--primary-tint) !important; color: var(--primary) !important; } .ktx .main-header .navbar .sidebar-toggle:before { content: "\f0c9"; font-family: FontAwesome; font-size: 18px; } .ktx.skin-blue .main-header .navbar .nav > li > a, .ktx .main-header .navbar .nav > li > a { color: var(--text-2) !important; padding-top: 14px; padding-bottom: 14px; height: 60px; display: flex; align-items: center; gap: 8px; } .ktx.skin-blue .main-header .navbar .nav > li > a:hover, .ktx .main-header .navbar .nav > li > a:hover, .ktx .main-header .navbar .nav .open > a, .ktx .main-header .navbar .nav > .active > a { background: var(--primary-tint) !important; color: var(--primary) !important; } .ktx .navbar-nav > .user-menu > a { gap: 10px; } .ktx .navbar-nav > .user-menu .user-image { width: 34px; height: 34px; margin: 0; border-radius: 50%; object-fit: cover; border: 2px solid var(--outline); float: none; } .ktx .ktx-user-name { display: flex; flex-direction: column; line-height: 1.2; font-size: 13.5px; font-weight: 600; color: var(--text); } .ktx .ktx-user-name small { font-size: 11.5px; font-weight: 500; color: var(--muted); } .ktx .ktx-theme-btn { cursor: pointer; } .ktx .ktx-theme-btn .fa { font-size: 17px; width: 18px; text-align: center; } /* ---- Menu trái ---- */ .ktx .main-sidebar, .ktx .left-side { width: var(--sidebar-w); padding-top: 60px; } .ktx.skin-blue .main-sidebar, .ktx.skin-blue .left-side, .ktx .main-sidebar, .ktx .left-side { background: var(--surface) !important; border-right: 1px solid var(--outline); box-shadow: none; } .ktx .content-wrapper, .ktx .right-side, .ktx .main-footer { margin-left: var(--sidebar-w); } .ktx .sidebar { padding: 10px 10px 24px; } .ktx.skin-blue .user-panel, .ktx .user-panel { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 0 10px; background: var(--primary-tint); border-radius: var(--r); overflow: hidden; } .ktx .user-panel > .image { float: none; flex: 0 0 auto; } .ktx .user-panel > .image > img { width: 42px; height: 42px; max-width: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); } .ktx .user-panel > .info { position: static; float: none; padding: 0; line-height: 1.3; min-width: 0; left: auto; } .ktx.skin-blue .user-panel > .info, .ktx.skin-blue .user-panel > .info > a, .ktx .user-panel > .info, .ktx .user-panel > .info > a, .ktx .user-panel > .info p { color: var(--text) !important; margin: 0; } .ktx .user-panel > .info p { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ktx .user-panel > .info a, .ktx .user-panel > .info small { font-size: 12px; color: var(--muted) !important; } .ktx .ktx-role-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--primary-tint-2); color: var(--primary) !important; margin-bottom: 2px; } .ktx .sidebar-menu { padding: 0; } .ktx.skin-blue .sidebar-menu > li.header, .ktx .sidebar-menu > li.header { background: transparent !important; color: var(--muted) !important; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px 12px 6px; } .ktx .sidebar-menu > li.header:empty { display: none; } .ktx .sidebar-menu > li { margin: 2px 0; } .ktx.skin-blue .sidebar-menu > li > a, .ktx .sidebar-menu > li > a { color: var(--text-2) !important; border-left: 0 !important; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 14px; } .ktx .sidebar-menu > li > a > .fa, .ktx .sidebar-menu > li > a > .glyphicon, .ktx .sidebar-menu > li > a > .ion { width: 20px; text-align: center; font-size: 16px; color: var(--muted); flex: 0 0 20px; } .ktx .sidebar-menu > li > a > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ktx .sidebar-menu > li > a > .pull-right, .ktx .sidebar-menu > li > a > .fa-angle-left { margin-left: auto; position: static !important; margin-top: 0 !important; } .ktx.skin-blue .sidebar-menu > li:hover > a, .ktx .sidebar-menu > li:hover > a { background: var(--surface-3) !important; color: var(--text) !important; } .ktx.skin-blue .sidebar-menu > li.active > a, .ktx .sidebar-menu > li.active > a { background: var(--primary-tint-2) !important; color: var(--primary) !important; font-weight: 700; } .ktx .sidebar-menu > li.active > a > .fa { color: var(--primary); } .ktx.skin-blue .sidebar-menu > li > .treeview-menu, .ktx .sidebar-menu > li > .treeview-menu { background: transparent !important; margin: 2px 0 4px 20px !important; padding: 0 0 0 10px; border-left: 2px solid var(--outline); } .ktx.skin-blue .treeview-menu > li > a, .ktx .treeview-menu > li > a { color: var(--muted) !important; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; display: block; } .ktx.skin-blue .treeview-menu > li > a:hover, .ktx.skin-blue .treeview-menu > li.active > a, .ktx .treeview-menu > li > a:hover, .ktx .treeview-menu > li.active > a { color: var(--primary) !important; background: var(--primary-tint) !important; } .ktx .treeview-menu > li > a > .fa { width: 16px; font-size: 12px; } .ktx .sidebar-menu .label, .ktx .sidebar-menu .badge { border-radius: 20px; font-size: 11px; } .ktx .sidebar-form { border-radius: var(--r) !important; border: 1px solid var(--outline) !important; margin: 8px 0 !important; } /* thu gọn menu (sidebar-mini) trên máy tính */ @media (min-width: 768px) { .ktx.sidebar-mini.sidebar-collapse .main-header .logo { width: 64px; padding: 0 10px; } .ktx.sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 64px; } .ktx.sidebar-mini.sidebar-collapse .main-header .logo .ktx-brand-text { display: none; } .ktx.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg { display: flex !important; } .ktx.sidebar-mini.sidebar-collapse .main-header .logo .ktx-logo-chip { padding: 3px; height: 40px; width: 44px; overflow: hidden; justify-content: flex-start; } .ktx.sidebar-mini.sidebar-collapse .main-sidebar { width: 64px !important; } .ktx.sidebar-mini.sidebar-collapse .content-wrapper, .ktx.sidebar-mini.sidebar-collapse .right-side, .ktx.sidebar-mini.sidebar-collapse .main-footer { margin-left: 64px !important; } .ktx.sidebar-mini.sidebar-collapse .user-panel { padding: 6px; justify-content: center; } .ktx.sidebar-mini.sidebar-collapse .user-panel > .image > img { width: 34px; height: 34px; } .ktx.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 10px 0; } .ktx.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .ktx.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right { display: none !important; } .ktx.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview):hover > a > span { display: block !important; position: absolute; left: 64px; top: 0; padding: 10px 14px; margin: 0; background: var(--surface) !important; color: var(--text); border: 1px solid var(--outline); border-radius: 0 12px 12px 0; box-shadow: var(--shadow); width: 200px; } .ktx.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { background: var(--surface) !important; border: 1px solid var(--outline); border-radius: 0 0 12px 12px; left: 64px; margin: 0 !important; padding: 6px; width: 200px; box-shadow: var(--shadow); } } /* điện thoại: menu trượt */ @media (max-width: 767px) { .ktx.skin-blue .main-header .logo, .ktx .main-header .logo { width: 100%; } .ktx .main-header .navbar { margin-left: 0; } .ktx .content-wrapper, .ktx .right-side, .ktx .main-footer { margin-left: 0; } .ktx .main-sidebar { padding-top: 120px; transform: translate(calc(-1 * var(--sidebar-w)), 0); box-shadow: var(--shadow-lg); } .ktx.sidebar-open .main-sidebar { transform: translate(0, 0); } .ktx.sidebar-open .content-wrapper, .ktx.sidebar-open .main-footer { transform: translate(var(--sidebar-w), 0); } .ktx .content { padding: 14px 12px 22px; } .ktx .content-header { padding: 14px 12px 0; } .ktx .ktx-user-name { display: none; } } /* chân trang */ .ktx .main-footer { background: var(--surface) !important; color: var(--muted); border-top: 1px solid var(--outline); padding: 14px 22px; font-size: 13px; } .ktx .main-footer a { color: var(--primary); } .ktx .control-sidebar, .ktx .control-sidebar-bg { background: var(--surface) !important; border-left: 1px solid var(--outline); } /* ================================ Thẻ (box) ================================ */ .ktx .box, .ktx .nav-tabs-custom, .ktx .panel, .ktx .well, .ktx .thumbnail, .ktx .card { background: var(--surface) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm); color: var(--text); } .ktx .box { margin-bottom: 18px; border-top-width: 1px !important; } .ktx .box.box-primary, .ktx .box.box-info, .ktx .box.box-success, .ktx .box.box-warning, .ktx .box.box-danger, .ktx .box.box-default { border-top-color: var(--outline) !important; } .ktx .box.box-solid > .box-header, .ktx .box > .box-header { color: var(--text); background: transparent !important; } .ktx .box > .box-header { padding: 16px 18px 12px; border-radius: var(--r-lg) var(--r-lg) 0 0; } .ktx .box > .box-header.with-border { border-bottom: 1px solid var(--outline-2); } .ktx .box > .box-header > .box-title, .ktx .box > .box-header .box-title { font-size: 16.5px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .ktx .box > .box-header > .box-title > .fa { color: var(--primary); } .ktx .box > .box-header > .box-tools { top: 12px; right: 14px; } .ktx .box-body { padding: 16px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg); } .ktx .box-footer { background: var(--surface-2) !important; border-top: 1px solid var(--outline-2) !important; padding: 14px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg); } .ktx .box .btn-box-tool { color: var(--muted); border-radius: 8px; } .ktx .box .btn-box-tool:hover { color: var(--primary); background: var(--primary-tint); } .ktx .box .overlay { border-radius: var(--r-lg); background: rgba(255, 255, 255, .6); } .ktx[data-theme="dark"] .box .overlay, [data-theme="dark"] .ktx .box .overlay { background: rgba(0, 0, 0, .4); } .ktx .panel-heading { border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent !important; border-color: var(--outline-2) !important; color: var(--text) !important; font-weight: 700; } .ktx .panel-footer { background: var(--surface-2); border-color: var(--outline-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } /* ô thống kê */ .ktx .info-box { background: var(--surface) !important; border: 1px solid var(--outline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); min-height: 84px; padding: 12px; display: flex; align-items: center; gap: 12px; color: var(--text); } .ktx .info-box-icon { float: none; width: 56px; height: 56px; line-height: 56px; font-size: 24px; border-radius: 16px !important; flex: 0 0 56px; background: var(--primary-tint) !important; color: var(--primary) !important; } .ktx .info-box-icon.bg-aqua, .ktx .info-box-icon.bg-blue, .ktx .info-box-icon.bg-light-blue, .ktx .info-box-icon.bg-primary { background: var(--primary-tint) !important; color: var(--primary) !important; } .ktx .info-box-icon.bg-green, .ktx .info-box-icon.bg-olive { background: var(--success-bg) !important; color: var(--success) !important; } .ktx .info-box-icon.bg-yellow, .ktx .info-box-icon.bg-orange { background: var(--warning-bg) !important; color: var(--warning) !important; } .ktx .info-box-icon.bg-red, .ktx .info-box-icon.bg-maroon { background: var(--danger-bg) !important; color: var(--danger) !important; } .ktx .info-box-icon.bg-gray, .ktx .info-box-icon.bg-black { background: var(--neutral-bg) !important; color: var(--neutral) !important; } .ktx .info-box-content { margin-left: 0; padding: 0; min-width: 0; } .ktx .info-box-text { font-size: 12.5px; color: var(--muted); text-transform: none; font-weight: 500; } .ktx .info-box-number { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.2; } .ktx .small-box { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .ktx .small-box > .small-box-footer { background: rgba(0, 0, 0, .08); } .ktx .small-box.bg-aqua, .ktx .small-box.bg-blue, .ktx .small-box.bg-light-blue { background: var(--gradient) !important; } /* nền màu của AdminLTE (bg-*) dịu lại cho hợp tông */ .ktx :not(.info-box-icon).bg-light-blue, .ktx :not(.info-box-icon).bg-blue, .ktx :not(.info-box-icon).bg-aqua, .ktx :not(.info-box-icon).bg-primary { background-color: #1552A5 !important; color: #fff !important; } /* ================================ Nút ================================ */ .ktx .btn { border-radius: 12px; font-weight: 600; font-size: 14px; padding: 8px 16px; min-height: 38px; border-width: 1px; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1.3; box-shadow: none; } .ktx .btn.btn-block { display: flex; } .ktx .btn.pull-right { float: right; } .ktx .btn-xs { min-height: 26px; padding: 3px 9px; font-size: 12px; border-radius: 8px; gap: 4px; } .ktx .btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: 10px; gap: 5px; } .ktx .btn-lg { min-height: 48px; padding: 11px 22px; font-size: 16px; border-radius: 14px; } .ktx .btn-flat { border-radius: 12px; } .ktx .btn:focus, .ktx .btn:active:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-tint-2); } .ktx .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--on-primary); } .ktx .btn-primary:hover, .ktx .btn-primary:focus, .ktx .btn-primary:active { background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); } .ktx .btn-success { background-color: var(--btn-success); border-color: var(--btn-success); color: #fff; } .ktx .btn-danger { background-color: var(--btn-danger); border-color: var(--btn-danger); color: #fff; } .ktx .btn-warning { background-color: var(--btn-warning); border-color: var(--btn-warning); color: #fff; } .ktx .btn-info { background-color: var(--btn-info); border-color: var(--btn-info); color: #fff; } .ktx .btn-success:hover, .ktx .btn-danger:hover, .ktx .btn-warning:hover, .ktx .btn-info:hover, .ktx .btn-success:focus, .ktx .btn-danger:focus, .ktx .btn-warning:focus, .ktx .btn-info:focus { color: #fff; } .ktx .btn[style*="background"] { border-color: transparent; color: #fff; } .ktx .btn-success:hover, .ktx .btn-danger:hover, .ktx .btn-warning:hover, .ktx .btn-info:hover { filter: brightness(.93); } .ktx .btn-default { background-color: var(--surface); border-color: var(--outline); color: var(--text-2); } .ktx .btn-default:hover, .ktx .btn-default:focus, .ktx .btn-default.active, .ktx .open > .btn-default.dropdown-toggle { background-color: var(--surface-3); border-color: var(--outline); color: var(--text); } .ktx .btn-link { color: var(--primary); } .ktx .btn[disabled], .ktx .btn.disabled { opacity: .55; } .ktx .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .ktx .btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ktx .btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ktx .btn-app { border-radius: var(--r); background: var(--surface-2); border-color: var(--outline); color: var(--text-2); } /* ================================ Form ================================ */ .ktx label { font-weight: 600; color: var(--text-2); font-size: 13.5px; margin-bottom: 6px; } .ktx .radio label, .ktx .checkbox label, .ktx label.form-check-label { font-weight: 500; } .ktx .form-control, .ktx .select2-container--default .select2-selection--single, .ktx .select2-container--default .select2-selection--multiple, .ktx .input-group .input-group-addon { background-color: var(--field) !important; border: 1px solid var(--outline) !important; color: var(--text) !important; border-radius: 12px !important; box-shadow: none !important; font-size: 14.5px; } .ktx .form-control { height: 42px; padding: 9px 14px; transition: border-color .15s, box-shadow .15s; } .ktx textarea.form-control { height: auto; min-height: 42px; } .ktx select.form-control { padding-right: 34px; } .ktx .input-sm, .ktx .form-group-sm .form-control { height: 34px; padding: 5px 10px; font-size: 13px; border-radius: 10px !important; } .ktx .form-control:focus, .ktx .select2-container--default.select2-container--focus .select2-selection--multiple, .ktx .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-tint-2) !important; } .ktx .form-control::placeholder { color: var(--muted); opacity: .8; } .ktx .form-control[readonly], .ktx .form-control[disabled], .ktx fieldset[disabled] .form-control { background-color: var(--field-disabled) !important; color: var(--muted) !important; cursor: default; } .ktx .form-control[readonly].hasDatepicker, .ktx .form-control[readonly][data-date-format], .ktx .datepicker.form-control[readonly] { cursor: pointer; color: var(--text) !important; } .ktx div.form-control { height: auto; min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; } .ktx .input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .ktx .input-group .form-control:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .ktx .input-group .input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; color: var(--muted) !important; } .ktx .input-group .input-group-addon:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; color: var(--muted) !important; } .ktx .input-group-btn > .btn { min-height: 42px; } .ktx .input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ktx .has-error .form-control { border-color: var(--danger) !important; } .ktx .has-error .help-block, .ktx .field-validation-error, .ktx .text-danger.field-validation-error { color: var(--danger) !important; font-size: 12.5px; } .ktx .form-group { margin-bottom: 16px; } .ktx input[type=checkbox], .ktx input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; vertical-align: -3px; } .ktx .select2-container--default .select2-selection--single { height: 42px !important; display: flex; align-items: center; } .ktx .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; line-height: 40px; padding-left: 14px; } .ktx .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; } .ktx .select2-dropdown { background: var(--surface) !important; border-color: var(--outline) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--shadow-lg); color: var(--text); } .ktx .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary) !important; color: var(--on-primary) !important; } .ktx .select2-container--default .select2-results__option[aria-selected=true] { background: var(--primary-tint) !important; color: var(--text); } .ktx .select2-search--dropdown .select2-search__field { background: var(--field); color: var(--text); border: 1px solid var(--outline) !important; border-radius: 8px; } .ktx .bootstrap-select .dropdown-toggle { border-radius: 12px; } /* ================================ Bảng ================================ */ .ktx .table { color: var(--text); background: transparent; margin-bottom: 8px; } .ktx .table > thead > tr > th, .ktx .table > tbody > tr > th, .ktx .table > tfoot > tr > th { background: var(--surface-2) !important; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--outline) !important; vertical-align: bottom; white-space: nowrap; } .ktx .table > tbody > tr > th { text-transform: none; font-size: 13.5px; letter-spacing: 0; color: var(--text-2); white-space: normal; } .ktx .table > thead > tr > th, .ktx .table > tbody > tr > td, .ktx .table > tbody > tr > th, .ktx .table > tfoot > tr > td { border-top: 1px solid var(--outline-2) !important; padding: 10px 12px; vertical-align: middle; } .ktx .table-bordered, .ktx .table-bordered > thead > tr > th, .ktx .table-bordered > tbody > tr > th, .ktx .table-bordered > tfoot > tr > th, .ktx .table-bordered > thead > tr > td, .ktx .table-bordered > tbody > tr > td, .ktx .table-bordered > tfoot > tr > td { border-color: var(--outline-2) !important; } .ktx .table-bordered { border-radius: var(--r); overflow: hidden; border-collapse: separate; border-spacing: 0; } .ktx .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2) !important; } .ktx .table-hover > tbody > tr:hover, .ktx .table > tbody > tr:hover { background: var(--primary-tint) !important; } .ktx .table > tbody > tr.active > td, .ktx .table > tbody > tr > td.active { background: var(--primary-tint-2) !important; } .ktx .table > tbody > tr.danger > td, .ktx .table > tbody > tr > td.danger { background: var(--danger-bg) !important; } .ktx .table > tbody > tr.warning > td, .ktx .table > tbody > tr > td.warning { background: var(--warning-bg) !important; } .ktx .table > tbody > tr.success > td, .ktx .table > tbody > tr > td.success { background: var(--success-bg) !important; } .ktx .table-responsive { border: 0; border-radius: var(--r); } .ktx .box-body.no-padding .table, .ktx .box-body.table-responsive.no-padding .table { margin-bottom: 0; } .ktx .dataTables_wrapper .dataTables_filter input, .ktx .dataTables_wrapper .dataTables_length select { border-radius: 10px; border: 1px solid var(--outline); background: var(--field); color: var(--text); height: 34px; padding: 4px 10px; } .ktx .table img { border-radius: 10px; } /* ================================ Nhãn / thông báo ================================ */ .ktx .label, .ktx .badge { border-radius: 20px; font-weight: 700; font-size: 11.5px; padding: .3em .75em; letter-spacing: .01em; display: inline-block; line-height: 1.3; } .ktx .label-default, .ktx .badge { background: var(--neutral-bg) !important; color: var(--neutral) !important; } .ktx .label-primary, .ktx .label-info { background: var(--info-bg) !important; color: var(--info) !important; } .ktx .label-success { background: var(--success-bg) !important; color: var(--success) !important; } .ktx .label-warning { background: var(--warning-bg) !important; color: var(--warning) !important; } .ktx .label-danger { background: var(--danger-bg) !important; color: var(--danger) !important; } .ktx .sidebar-menu .label, .ktx .main-header .label { background: var(--danger) !important; color: #fff !important; } .ktx .callout, .ktx .alert { border-radius: var(--r) !important; border: 1px solid transparent !important; border-left: 4px solid !important; padding: 14px 16px; margin-bottom: 16px; color: var(--text) !important; box-shadow: none; } .ktx .callout h4, .ktx .alert h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: inherit; } .ktx .callout a, .ktx .alert a { color: inherit; text-decoration: underline; } .ktx .callout.callout-info, .ktx .alert-info { background: var(--info-bg) !important; border-left-color: var(--info) !important; } .ktx .callout.callout-success, .ktx .alert-success { background: var(--success-bg) !important; border-left-color: var(--success) !important; } .ktx .callout.callout-warning, .ktx .alert-warning { background: var(--warning-bg) !important; border-left-color: var(--warning) !important; } .ktx .callout.callout-danger, .ktx .alert-danger, .ktx .alert-error { background: var(--danger-bg) !important; border-left-color: var(--danger) !important; } .ktx .callout.callout-info h4, .ktx .alert-info h4 { color: var(--info); } .ktx .callout.callout-success h4, .ktx .alert-success h4 { color: var(--success); } .ktx .callout.callout-warning h4, .ktx .alert-warning h4 { color: var(--warning); } .ktx .callout.callout-danger h4, .ktx .alert-danger h4 { color: var(--danger); } .ktx .alert .close { color: var(--text); opacity: .5; } /* ================================ Điều hướng khác ================================ */ .ktx .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; } .ktx .pagination > li > a, .ktx .pagination > li > span { border-radius: 10px !important; border: 1px solid var(--outline) !important; background: var(--surface) !important; color: var(--text-2) !important; min-width: 36px; height: 36px; padding: 0 10px; margin: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .ktx .pagination > li > a:hover { background: var(--primary-tint) !important; color: var(--primary) !important; } .ktx .pagination > .active > a, .ktx .pagination > .active > span, .ktx .pagination > .active > a:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } .ktx .pagination > .disabled > a, .ktx .pagination > .disabled > span { opacity: .5; } .ktx .nav-tabs { border-bottom: 1px solid var(--outline); } .ktx .nav-tabs > li > a { border-radius: 12px 12px 0 0; color: var(--muted); font-weight: 600; } .ktx .nav-tabs > li.active > a, .ktx .nav-tabs > li.active > a:hover { background: var(--surface); color: var(--primary); border-color: var(--outline) var(--outline) transparent; } .ktx .nav-tabs-custom > .nav-tabs { border-bottom-color: var(--outline-2); } .ktx .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--primary); } .ktx .nav-tabs-custom > .nav-tabs > li.active > a { background: var(--surface); color: var(--text); } .ktx .nav-tabs-custom > .tab-content { background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); } .ktx .nav-pills > li > a { border-radius: 12px; color: var(--text-2); } .ktx .nav-pills > li.active > a { background: var(--primary); color: var(--on-primary); } .ktx .dropdown-menu { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; color: var(--text); } .ktx .dropdown-menu > li > a { color: var(--text-2); border-radius: 10px; padding: 8px 12px; } .ktx .dropdown-menu > li > a:hover, .ktx .dropdown-menu > li > a:focus { background: var(--primary-tint); color: var(--primary); } .ktx .dropdown-menu .divider { background: var(--outline-2); } .ktx .navbar-nav > .user-menu > .dropdown-menu { width: 260px; padding: 0; overflow: hidden; border-radius: var(--r-lg); } .ktx .navbar-nav > .user-menu > .dropdown-menu > li.user-header { background: var(--gradient) !important; height: auto; padding: 18px 14px; display: flex; align-items: center; gap: 12px; text-align: left; } .ktx .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img { width: 56px; height: 56px; margin: 0; border: 3px solid rgba(255, 255, 255, .5); object-fit: cover; flex: 0 0 56px; } .ktx .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p { color: #fff; margin: 0; font-size: 15px; font-weight: 700; } .ktx .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p small { color: rgba(255, 255, 255, .85); font-weight: 500; } .ktx .navbar-nav > .user-menu > .dropdown-menu > .user-footer { background: var(--surface) !important; padding: 12px; display: flex; gap: 8px; justify-content: space-between; } .ktx .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after, .ktx .navbar-nav > .user-menu > .dropdown-menu > .user-footer:before { display: none; } .ktx .navbar-nav > .user-menu > .dropdown-menu > .user-footer > div { float: none; } .ktx .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn { min-height: 34px; } .ktx .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--outline); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .ktx .modal-header { border-bottom-color: var(--outline-2); padding: 16px 20px; } .ktx .modal-title { font-weight: 700; } .ktx .modal-footer { border-top-color: var(--outline-2); background: var(--surface-2); } .ktx .close { color: var(--text); text-shadow: none; } .ktx .modal-backdrop.in { opacity: .45; } .ktx .progress { border-radius: 20px; background: var(--surface-3); box-shadow: none; overflow: hidden; } .ktx .progress-bar { background-color: var(--primary); } .ktx .list-group-item { background: var(--surface); border-color: var(--outline-2); color: var(--text); } .ktx .list-group-item:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); } .ktx .list-group-item:last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); } .ktx .img-circle { object-fit: cover; } .ktx .tooltip-inner { border-radius: 8px; } .ktx .popover { border-radius: var(--r); background: var(--surface); border-color: var(--outline); } /* datepicker / sweetalert / toastr */ .ktx .datepicker.dropdown-menu { padding: 8px; } .ktx .datepicker table tr td, .ktx .datepicker table tr th { border-radius: 8px; color: var(--text); } .ktx .datepicker table tr td.active, .ktx .datepicker table tr td.active:hover, .ktx .datepicker table tr td.active.active { background: var(--primary) !important; color: var(--on-primary) !important; text-shadow: none; } .ktx .datepicker table tr td.day:hover, .ktx .datepicker table tr td span:hover { background: var(--primary-tint); } .ktx .datepicker table tr td.old, .ktx .datepicker table tr td.new { color: var(--muted); } .sweet-alert { border-radius: 24px !important; font-family: var(--font) !important; background: var(--surface) !important; } .sweet-alert h2 { color: var(--text) !important; font-weight: 700 !important; } .sweet-alert p { color: var(--text-2) !important; } .sweet-alert button { border-radius: 12px !important; font-weight: 600 !important; } .sweet-alert button.confirm { background: var(--primary) !important; box-shadow: none !important; color: var(--on-primary) !important; } .sweet-alert button.cancel { background: var(--surface-3) !important; color: var(--text) !important; } #toast-container > div { border-radius: 14px; box-shadow: var(--shadow-lg); opacity: .98; } /* ================================ Thành phần riêng ================================ */ /* khối tiêu đề gradient (giống thẻ đầu trang trong app) */ .ktx .ktx-hero { background: var(--gradient); color: #fff; border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); } .ktx .ktx-hero h1, .ktx .ktx-hero h2, .ktx .ktx-hero h3, .ktx .ktx-hero h4 { color: #fff; margin: 0; } .ktx .ktx-hero p, .ktx .ktx-hero small { color: rgba(255, 255, 255, .85); margin: 2px 0 0; } .ktx .ktx-hero img.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .45); } .ktx .ktx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--primary-tint); color: var(--primary); } .ktx .ktx-chip.success { background: var(--success-bg); color: var(--success); } .ktx .ktx-chip.warning { background: var(--warning-bg); color: var(--warning); } .ktx .ktx-chip.danger { background: var(--danger-bg); color: var(--danger); } .ktx .ktx-chip.neutral { background: var(--neutral-bg); color: var(--neutral); } /* nút đổi giao diện nổi (dùng ở trang không có thanh menu) */ .ktx .ktx-theme-fab { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--outline); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); } .ktx .ktx-theme-fab:hover { color: var(--primary); background: var(--primary-tint); } /* ================================ Trang đăng nhập / tra cứu (ace) ================================ */ .ktx.no-skin, .ktx.ktx-auth { background: var(--bg) !important; } .ktx .ktx-auth-bar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--outline); } .ktx .ktx-auth-bar .ktx-brand { display: flex; align-items: center; gap: 12px; color: var(--text) !important; text-decoration: none !important; min-width: 0; } .ktx .ktx-auth-bar .ktx-brand .ktx-logo-chip { height: 44px; box-shadow: none; border: 1px solid var(--outline-2); } .ktx .ktx-auth-bar .ktx-brand .ktx-logo-chip img { height: 36px; } .ktx .ktx-auth-bar .ktx-brand b { font-size: 16.5px; font-weight: 800; display: block; color: var(--text); } .ktx .ktx-auth-bar .ktx-brand small { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ktx .ktx-auth-bar .ktx-auth-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .ktx .ktx-auth-bar .ktx-auth-actions a.btn { min-height: 38px; } .ktx .ktx-auth-hero { background: var(--gradient-deep); color: #fff; padding: 34px 20px 110px; text-align: center; position: relative; overflow: hidden; } .ktx .ktx-auth-hero:before, .ktx .ktx-auth-hero:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); } .ktx .ktx-auth-hero:before { width: 420px; height: 420px; right: -120px; top: -180px; } .ktx .ktx-auth-hero:after { width: 260px; height: 260px; left: -80px; bottom: -120px; } .ktx .ktx-auth-hero h1 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 6px; position: relative; z-index: 1; } .ktx .ktx-auth-hero p { color: rgba(255, 255, 255, .85); margin: 0; position: relative; z-index: 1; } .ktx .ktx-auth-main { margin-top: -86px; position: relative; z-index: 2; padding: 0 14px 40px; } @media (max-width: 600px) { .ktx .ktx-auth-bar { padding: 8px 12px; } .ktx .ktx-auth-bar .ktx-brand small { display: none; } .ktx .ktx-auth-bar .ktx-auth-actions .btn span { display: none; } .ktx .ktx-auth-hero { padding: 24px 16px 100px; } .ktx .ktx-auth-hero h1 { font-size: 21px; } } /* ẩn phần đầu cũ của ace */ .ktx.ktx-auth > #navbar, .ktx.ktx-auth > .header.clearfix { display: none !important; } /* các khối ace trong trang đăng nhập / đăng ký / tra cứu */ .ktx .main-container, .ktx .main-content, .ktx .page-content, .ktx .main-content-inner { background: transparent !important; } .ktx .page-content { padding: 0; } .ktx .breadcrumbs { display: none; } .ktx .widget-box, .ktx .login-box, .ktx .widget-body { background: var(--surface) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow) !important; color: var(--text); } .ktx .widget-box .widget-body, .ktx .login-box .widget-body { border: 0 !important; box-shadow: none !important; background: transparent !important; } .ktx .widget-main { padding: 26px 26px 22px !important; background: transparent !important; } .ktx .widget-box.visible, .ktx .login-box.visible { overflow: hidden; } .ktx .widget-header { background: transparent !important; border-bottom: 1px solid var(--outline-2) !important; color: var(--text) !important; } .ktx .login-box .header, .ktx .widget-main .header, .ktx .widget-main > h4.header, .ktx .widget-main h3.header, .ktx .widget-main h4 { color: var(--text) !important; border-bottom: 0 !important; font-weight: 800 !important; font-size: 22px !important; text-transform: none; text-align: center; margin: 0 0 16px !important; padding: 0 !important; } .ktx .input-icon > input, .ktx .input-icon > .form-control { padding-left: 40px !important; padding-right: 14px !important; } .ktx .input-icon.input-icon-right > input { padding-left: 14px !important; padding-right: 40px !important; } .ktx .input-icon > .ace-icon { line-height: 42px !important; top: 0 !important; color: var(--muted) !important; font-size: 15px !important; } .ktx .input-icon.input-icon-right > .ace-icon { right: 12px !important; left: auto !important; } .ktx .input-icon:not(.input-icon-right) > .ace-icon { left: 13px !important; } .ktx .block.clearfix { margin-bottom: 12px; } .ktx .width-login, .ktx .width-guide { margin-left: auto !important; margin-right: auto !important; } .ktx .top-40 { margin-top: 0 !important; } .ktx .space-6, .ktx .space-4, .ktx .space { max-height: 8px; } .ktx .toolbar { background: var(--surface-2) !important; border-top: 1px solid var(--outline-2) !important; } .ktx .img-loading-wrap { background: rgba(0, 0, 0, .35); } .ktx .btn-scroll-up { border-radius: 12px !important; background: var(--primary) !important; border: 0 !important; } /* ================================ Trang công khai (Porto, Bootstrap 5) ================================ */ body.ktx-public { font-family: var(--font) !important; background: var(--bg) !important; color: var(--text); -webkit-font-smoothing: antialiased; } .ktx-public h1, .ktx-public h2, .ktx-public h3, .ktx-public h4, .ktx-public h5 { font-family: var(--font) !important; letter-spacing: -.01em; color: var(--text); } .ktx-public a { color: var(--primary); } .ktx-public p { color: var(--text-2); } .ktx-public .kp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* nút */ .kp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 18px; border-radius: 12px; font-weight: 600; font-size: 14.5px; line-height: 1.2; border: 1px solid var(--outline); background: var(--surface); color: var(--text) !important; text-decoration: none !important; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; white-space: nowrap; } .kp-btn:hover { background: var(--surface-3); } .kp-btn:active { transform: translateY(1px); } .kp-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary) !important; } .kp-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .kp-btn-light { background: #fff; border-color: #fff; color: #0B2F66 !important; } .kp-btn-light:hover { background: #EAF1FC; } .kp-btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff !important; } .kp-btn-ghost:hover { background: rgba(255,255,255,.2); } .kp-icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--outline); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 16px; } .kp-icon-btn:hover { background: var(--surface-3); color: var(--text); } .kp-logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 4px 8px; height: 46px; border: 1px solid var(--outline-2); } .kp-logo-chip img { height: 36px; width: auto; display: block; } .kp-logo-chip.kp-logo-lg { height: 92px; padding: 10px 16px; border-radius: 18px; } .kp-logo-chip.kp-logo-lg img { height: 72px; } /* header */ .kp-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--outline); transition: box-shadow .2s; } .kp-header.scrolled { box-shadow: var(--shadow); } .kp-header-inner { max-width: 1280px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; } .kp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; min-width: 0; flex-shrink: 0; } .kp-brand-text b { display: block; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.2; } .kp-brand-text small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; } .kp-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .kp-nav > a { padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--text-2) !important; text-decoration: none !important; white-space: nowrap; } .kp-nav > a:hover { background: var(--surface-3); color: var(--text) !important; } .kp-nav > a.active { background: var(--primary-tint); color: var(--primary) !important; } .kp-nav-mobile-actions { display: none; } .kp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .kp-burger { display: none; } .kp-menu { position: relative; } .kp-menu > summary { list-style: none; } .kp-menu > summary::-webkit-details-marker { display: none; } .kp-menu .kp-caret { font-size: 11px; opacity: .8; transition: transform .15s; } .kp-menu[open] .kp-caret { transform: rotate(180deg); } .kp-menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 10; } .kp-menu-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text) !important; text-decoration: none !important; font-weight: 500; } .kp-menu-list a i { width: 18px; text-align: center; color: var(--primary); } .kp-menu-list a:hover { background: var(--surface-3); } /* hero trang chủ */ .kp-hero { background: var(--gradient-deep); color: #fff; position: relative; overflow: hidden; } .kp-hero:before, .kp-hero:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); } .kp-hero:before { width: 520px; height: 520px; right: -160px; top: -220px; } .kp-hero:after { width: 320px; height: 320px; left: -120px; bottom: -180px; } .kp-hero-inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px 72px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; } .kp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 600; color: #fff; } .kp-hero h1 { color: #fff !important; font-size: 46px; font-weight: 800; margin: 16px 0 12px; line-height: 1.1; letter-spacing: -.02em; } .kp-hero p { color: rgba(255,255,255,.85) !important; font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0; } .kp-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .kp-hero-cta .kp-btn { min-height: 48px; padding: 12px 22px; font-size: 15px; } .kp-hero-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; padding: 26px; backdrop-filter: blur(6px); } .kp-hero-card ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; } .kp-hero-card li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; } .kp-hero-card li i { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; } /* section */ .kp-section { padding: 48px 0; } .kp-section-alt { background: var(--surface-2); border-top: 1px solid var(--outline-2); border-bottom: 1px solid var(--outline-2); } .kp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .kp-section-head h2 { font-size: 28px; font-weight: 800; margin: 2px 0 0; } .kp-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); } .kp-link { font-weight: 600; text-decoration: none !important; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } .kp-quick { padding-top: 0; margin-top: -34px; position: relative; z-index: 2; } .kp-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kp-quick-item { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--surface); border: 1px solid var(--outline); border-radius: 18px; text-decoration: none !important; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; } .kp-quick-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .kp-quick-item b { color: var(--text); font-size: 15.5px; margin-top: 10px; } .kp-quick-item small { color: var(--muted); font-size: 13px; } .kp-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } [data-theme="dark"] .kp-ico { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 28%, transparent); } /* thẻ tin */ .kp-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kp-news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--outline); border-radius: 18px; overflow: hidden; text-decoration: none !important; transition: transform .15s, box-shadow .15s; } .kp-news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kp-news-img { aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; } .kp-news-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .kp-news-img.noimg { background: var(--gradient); } .kp-news-body { padding: 16px 18px 18px; } .kp-news-date { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; } .kp-news-body h3 { text-transform: none !important; font-size: 16.5px; font-weight: 700; margin: 6px 0 6px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kp-news-body p { font-size: 14px; color: var(--muted) !important; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kp-empty { text-align: center; padding: 40px 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--outline); border-radius: 18px; } .kp-empty i { font-size: 32px; opacity: .6; } .kp-empty p { margin: 8px 0 0; color: var(--muted) !important; } .kp-map { border-radius: 18px; overflow: hidden; border: 1px solid var(--outline); background: var(--surface-3); } .kp-map iframe { display: block; } [data-theme="dark"] .kp-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.8); } /* footer */ .kp-footer { background: var(--gradient-deep); color: rgba(255,255,255,.85); margin-top: 0; } .kp-footer-inner { max-width: 1200px; margin: 0 auto; padding: 44px 20px 28px; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 32px; } .kp-footer h4 { color: #fff !important; font-size: 15px; font-weight: 700; margin: 4px 0 14px; text-transform: none; } .kp-footer a { color: rgba(255,255,255,.85) !important; text-decoration: none !important; } .kp-footer a:hover { color: #fff !important; } .kp-footer-col > a { display: block; padding: 4px 0; } .kp-footer p { color: rgba(255,255,255,.78) !important; font-size: 14px; line-height: 1.6; margin: 0 0 8px; } .kp-footer p i { width: 18px; opacity: .85; } .kp-footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .kp-footer-logo b { display: block; color: #fff; font-size: 17px; } .kp-footer-logo small { display: block; color: rgba(255,255,255,.7); font-size: 12px; } .kp-social { display: flex; gap: 8px; margin-top: 14px; } .kp-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; } .kp-social a:hover { background: rgba(255,255,255,.22); } .kp-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 14px 20px; font-size: 13px; color: rgba(255,255,255,.65); } /* trang tin tức (giữ cấu trúc cũ, đổi màu) */ .ktx-public .page-header { border-radius: 0 0 24px 24px; margin-bottom: 24px !important; padding: 72px 0 !important; border: 0; } .ktx-public .page-header.overlay:before { background: linear-gradient(135deg, rgba(11,47,102,.88), rgba(21,82,165,.72)) !important; opacity: 1 !important; } .ktx-public .title-home { color: var(--text); font-weight: 800; } .ktx-public .page-header .title-home { color: #fff !important; } .ktx-public .news-items { background: var(--surface); border: 1px solid var(--outline); border-radius: 18px; padding: 16px; margin-bottom: 16px; } .ktx-public .news-items .img-thumbnail { border-radius: 12px; border: 0; padding: 0; overflow: hidden; background: var(--surface-3); } .ktx-public .news-items .title a, .ktx-public .news-item .title a, .ktx-public .title-news-detail { color: var(--text) !important; font-weight: 700; } .ktx-public .news-items .title a:hover, .ktx-public .news-item .title a:hover { color: var(--primary) !important; } .ktx-public .date, .ktx-public .post-date { color: var(--muted) !important; font-size: 13px; } .ktx-public .box { background: var(--surface); border: 1px solid var(--outline); border-radius: 18px; overflow: hidden; margin-bottom: 18px; } .ktx-public .box .title-bar-top { background: var(--surface-2); border-bottom: 1px solid var(--outline-2); padding: 12px 16px; } .ktx-public .box .title-bar-top h3, .ktx-public .box .title-bar-top .tde { margin: 0; font-size: 15px; font-weight: 700; color: var(--text) !important; background: none !important; } .ktx-public .box .title-bar-top h3 span { background: none !important; color: var(--text) !important; padding: 0 !important; } .ktx-public .box-content { padding: 12px 16px; } .ktx-public .breadcrumb { background: transparent; padding: 14px 0 0; margin: 0; } .ktx-public .breadcrumb-item a { color: var(--primary); } .ktx-public .content-text, .ktx-public .content-text p, .ktx-public .description p { color: var(--text-2) !important; } .ktx-public .pages a, .ktx-public .pages span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--outline); margin: 2px; background: var(--surface); color: var(--text) !important; } .ktx-public .btn { border-radius: 12px; font-weight: 600; } .ktx-public .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } .ktx-public .form-control { border-radius: 12px; background: var(--field); color: var(--text); border-color: var(--outline); } .ktx-public main { min-height: 50vh; } [data-theme="dark"] .ktx-public .bg-light, [data-theme="dark"] .ktx-public .bg-white { background: var(--surface) !important; } [data-theme="dark"] .ktx-public .text-dark { color: var(--text) !important; } /* responsive */ @media (max-width: 1100px) { .kp-nav > a { padding: 8px 9px; font-size: 14px; } .kp-brand-text small { display: none; } } @media (max-width: 991px) { .kp-burger { display: inline-flex; } .kp-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--outline); padding: 10px 14px 16px; box-shadow: var(--shadow-lg); } .kp-nav.open { display: flex; } .kp-nav > a { padding: 12px 14px; font-size: 15px; } .kp-nav-mobile-actions { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--outline-2); } .kp-nav-mobile-actions .kp-btn { justify-content: center; } .kp-menu { display: none; } .kp-header-inner { position: relative; } .kp-hero-inner { grid-template-columns: 1fr; padding: 40px 20px 64px; gap: 24px; } .kp-hero h1 { font-size: 34px; } .kp-hero-card { display: none; } .kp-quick-grid { grid-template-columns: repeat(2, 1fr); } .kp-news-grid { grid-template-columns: repeat(2, 1fr); } .kp-footer-inner { grid-template-columns: 1fr 1fr; } .kp-footer-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .kp-header-inner { padding: 8px 14px; gap: 10px; } .kp-brand-text b { font-size: 15.5px; } .kp-logo-chip { height: 40px; } .kp-logo-chip img { height: 30px; } .kp-hero h1 { font-size: 30px; } .kp-hero p { font-size: 15.5px; } .kp-hero-cta .kp-btn { flex: 1 1 100%; justify-content: center; } .kp-quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .kp-quick-item { padding: 14px; } .kp-news-grid { grid-template-columns: 1fr; } .kp-section { padding: 34px 0; } .kp-section-head h2 { font-size: 23px; } .kp-footer-inner { grid-template-columns: 1fr; gap: 22px; } } /* ================================ Bổ sung cho ace (các trang dùng _Layout_sv) ================================ */ /* ace đặt màu nút bằng !important nên phải phủ lại tương tự */ .ktx.ktx-auth .btn { border-width: 1px !important; text-shadow: none !important; border-radius: 12px !important; } .ktx.ktx-auth .btn-primary, .ktx.ktx-auth .btn-primary:hover, .ktx.ktx-auth .btn-primary:focus, .ktx.ktx-auth .btn-primary:active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } .ktx.ktx-auth .btn-primary:hover { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } .ktx.ktx-auth .btn-success, .ktx.ktx-auth .btn-success:hover, .ktx.ktx-auth .btn-success:focus { background-color: var(--btn-success) !important; border-color: var(--btn-success) !important; color: #fff !important; } .ktx.ktx-auth .btn-danger, .ktx.ktx-auth .btn-danger:hover, .ktx.ktx-auth .btn-danger:focus { background-color: var(--btn-danger) !important; border-color: var(--btn-danger) !important; color: #fff !important; } .ktx.ktx-auth .btn-warning, .ktx.ktx-auth .btn-warning:hover, .ktx.ktx-auth .btn-warning:focus { background-color: var(--btn-warning) !important; border-color: var(--btn-warning) !important; color: #fff !important; } .ktx.ktx-auth .btn-info, .ktx.ktx-auth .btn-info:hover, .ktx.ktx-auth .btn-info:focus { background-color: var(--btn-info) !important; border-color: var(--btn-info) !important; color: #fff !important; } .ktx.ktx-auth .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-scroll-up):not(.btn-link) { background-color: var(--surface) !important; border-color: var(--outline) !important; color: var(--text-2) !important; } .ktx.ktx-auth .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-scroll-up):not(.btn-link):hover { background-color: var(--surface-3) !important; color: var(--text) !important; } .ktx.ktx-auth .form-control, .ktx.ktx-auth input[type=text], .ktx.ktx-auth input[type=password], .ktx.ktx-auth input[type=email], .ktx.ktx-auth select, .ktx.ktx-auth textarea { border-radius: 12px !important; background-color: var(--field) !important; border: 1px solid var(--outline) !important; color: var(--text) !important; font-weight: 500; } .ktx.ktx-auth .form-control:focus, .ktx.ktx-auth input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-tint-2) !important; } .ktx.ktx-auth .widget-main [style*="color"] { filter: none; } .ktx.ktx-auth .table { color: var(--text); } /* ảnh lỗi: không để chữ alt tràn khung */ .ktx .user-panel img, .ktx .user-image, .ktx .user-header img { font-size: 0; color: transparent; overflow: hidden; background: var(--surface-3); } /* ================================ Sửa nhỏ ================================ */ /* nền phủ kín trang ngắn (không lộ dải màu khác phía dưới) */ html { background: var(--bg); } .ktx .wrapper { background: var(--bg) !important; min-height: 100vh; } .ktx .content-wrapper, .ktx .right-side { min-height: calc(100vh - 60px) !important; } /* ace: tiêu đề khối có nền trắng cứng trong style.css */ .ktx .widget-main .header, .ktx .login-box .header, .ktx h1.header, .ktx h3.header, .ktx h4.header { background: transparent !important; } /* màu chữ đen / xanh cứng trong nội dung cũ -> theo theme ở chế độ tối */ [data-theme="dark"] .ktx [style*="color:black"], [data-theme="dark"] .ktx [style*="color: black"], [data-theme="dark"] .ktx [style*="color:#000"], [data-theme="dark"] .ktx [style*="color: #000"], [data-theme="dark"] .ktx [style*="color:#333"], [data-theme="dark"] .ktx [style*="color: #333"] { color: var(--text) !important; } [data-theme="dark"] .ktx [style*="color:#039be5"], [data-theme="dark"] .ktx [style*="color: #039be5"] { color: var(--primary) !important; } [data-theme="dark"] .ktx [style*="background: #fff"], [data-theme="dark"] .ktx [style*="background:#fff"], [data-theme="dark"] .ktx [style*="background-color: #fff"], [data-theme="dark"] .ktx [style*="background-color:#fff"], [data-theme="dark"] .ktx [style*="background: white"], [data-theme="dark"] .ktx [style*="background-color: white"] { background: var(--surface) !important; }