/* KB 07/11/2026: giao dien moi cho MOI trang Sendy, ngay tren link cu (giao-dien-moi/GHI-CHU.md).
   Theo mockup: teal Tkim Yoga, Be Vietnam Pro + Inter, the trang vien nhat, nhan mau theo nghia.
   Chi nap o che do sang (includes/header.php). Go: xoa dong <link> kb-giao-dien.css trong header.php. */
:root {
  --kb-chu-dao: #0F766E; --kb-chu-dao-dam: #115E59; --kb-chu-dao-nhat: #F0FDFA;
  --kb-nen: #F3F6F5; --kb-the: #FFFFFF; --kb-chu: #16231F; --kb-phu: #4A5B57; --kb-mo: #5B6B67;
  --kb-vien: #E1E8E6; --kb-vien-nhat: #EDF2F1; --kb-o: #C9D4D1;
  --kb-loi: #A8232C; --kb-loi-nen: #FCEBEC; --kb-lam: #9A4A06; --kb-lam-nen: #FDF0E1;
  --kb-cho: #1D5A99; --kb-cho-nen: #E8F1FB; --kb-on: #17663A; --kb-on-nen: #E5F5EC;
  --kb-xam: #4D5B58; --kb-xam-nen: #EEF2F1;
}

/* ---------- Nen, chu ---------- */
body { background-color: var(--kb-nen); color: var(--kb-chu); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.55; padding-top: 76px; }
h1, h2, h3, h4, h5, .lead, .navbar .brand { font-family: "Be Vietnam Pro", Inter, sans-serif; color: var(--kb-chu); }
h2 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 4px 0 6px; }
h3 { font-size: 18px; font-weight: 600; }
h4, h5 { font-weight: 600; }
a { color: var(--kb-chu-dao); }
a:hover, a:focus { color: var(--kb-chu-dao-dam); }
p.lead { font-size: 13px; line-height: 1.4; font-weight: 600; margin-bottom: 4px; letter-spacing: .02em; }
p.lead a { color: var(--kb-mo); }
p.lead a:hover { color: var(--kb-chu-dao); }
hr { border-top-color: var(--kb-vien); border-bottom: 0; }
::selection { background: #CCEFEA; }

/* ---------- Dau trang ---------- */
.navbar .separator { display: none; }
.navbar-inner, .navbar-fixed-top .navbar-inner {
  min-height: 56px; background: var(--kb-the); background-image: none; filter: none;
  border: 0; border-bottom: 1px solid var(--kb-vien); border-radius: 0;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.navbar .brand { padding: 18px 20px 16px; font-size: 17px; font-weight: 700; line-height: 22px; color: var(--kb-chu); text-shadow: none; }
.navbar .brand:hover { color: var(--kb-chu-dao); }
.navbar .brand .main-gravatar { width: 22px; height: 22px; margin: 0 9px 0 0; border-radius: 7px; }
.navbar .btn, .navbar .btn-group { margin-top: 11px; }
.navbar .btn-group .btn { margin-top: 0; }
.navbar .btn-group.pull-right { margin-left: 8px; }
.navbar .btn-navbar { background: var(--kb-the); border: 1px solid var(--kb-vien); }
.navbar .btn-navbar .icon-bar { background-color: var(--kb-phu); box-shadow: none; }
.navbar .btn-inverse { background: var(--kb-the); color: var(--kb-chu); border: 1px solid var(--kb-vien); }
.navbar .btn-inverse:hover, .navbar .btn-inverse.active, .navbar .open .btn-inverse { background: var(--kb-chu-dao-nhat); color: var(--kb-chu-dao-dam); border-color: #99D5CD; }
.navbar .btn-inverse .icon-white, .navbar .btn-inverse [class^="icon-"] { color: var(--kb-phu); }
.navbar .btn-inverse .caret { border-top-color: var(--kb-phu); }

/* ---------- Menu ben trai ---------- */
.sidebar-box, .sidebar-box:hover {
  background: var(--kb-the); border: 1px solid var(--kb-vien); border-radius: 14px;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.sidebar-nav.sidebar-box { padding: 10px 8px 12px; }
.sidebar-box .nav-list { padding-left: 0; padding-right: 0; margin: 0; }
.sidebar-box .nav-list > li > a, .sidebar-box .nav-list .nav-header { margin-left: 0; margin-right: 0; text-shadow: none; }
.sidebar-box .nav-list .nav-header { padding: 12px 12px 4px; margin-top: 0; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 16px; color: var(--kb-mo); }
.sidebar-box .nav-list > li > a { display: block; padding: 9px 12px; margin-top: 2px; border-radius: 10px; color: #33443F; font-weight: 500; line-height: 20px; }
.sidebar-box .nav-list > li > a [class^="icon-"], .sidebar-box .nav-list > li > a [class*=" icon-"] { width: 18px; margin-right: 6px; text-align: center; color: var(--kb-mo); }
.sidebar-box .nav-list > li > a:hover { background: var(--kb-chu-dao-nhat); color: var(--kb-chu-dao-dam); }
.sidebar-box .nav-list > li > a:hover [class^="icon-"], .sidebar-box .nav-list > li > a:hover [class*=" icon-"] { color: var(--kb-chu-dao); }
.sidebar-box.sidebar-box ul li.active a, .sidebar-box .nav-list > .active > a, .sidebar-box .nav-list > .active > a:hover { background: var(--kb-chu-dao) !important; color: #fff; font-weight: 600; text-shadow: none; }
.sidebar-box .nav-list > .active > a [class^="icon-"], .sidebar-box .nav-list > .active > a [class*=" icon-"] { color: #fff; }

/* ---------- Nut ---------- */
.btn {
  background: var(--kb-the); background-image: none; filter: none; color: var(--kb-chu);
  border: 1px solid var(--kb-o); border-radius: 10px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; line-height: 20px; text-shadow: none;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.btn:hover, .btn:focus { background: var(--kb-chu-dao-nhat); background-image: none; border-color: #99D5CD; color: var(--kb-chu-dao-dam); }
.btn:active, .btn.active { background: #CCEFEA; background-image: none; border-color: var(--kb-chu-dao); color: var(--kb-chu-dao-dam); -webkit-box-shadow: none; box-shadow: none; }
.btn.disabled, .btn[disabled] { background: var(--kb-xam-nen); color: var(--kb-mo); border-color: var(--kb-vien); opacity: .8; }
.btn-primary, .btn-inverse, .btn-info { background: var(--kb-chu-dao); background-image: none; border: 1px solid var(--kb-chu-dao); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-inverse:hover, .btn-inverse:focus, .btn-info:hover, .btn-info:focus,
.btn-primary.active, .btn-inverse.active, .btn-info.active { background: var(--kb-chu-dao-dam); border-color: var(--kb-chu-dao-dam); color: #fff; }
.btn-success { background: #17663A; background-image: none; border: 1px solid #17663A; color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success.active { background: #0F4F2C; border-color: #0F4F2C; color: #fff; }
.btn-danger { background: var(--kb-loi); background-image: none; border: 1px solid var(--kb-loi); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger.active { background: #861B22; border-color: #861B22; color: #fff; }
.btn-warning { background: #B45309; background-image: none; border: 1px solid #B45309; color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning.active { background: #92400E; border-color: #92400E; color: #fff; }
.btn-primary [class^="icon-"], .btn-inverse [class^="icon-"], .btn-info [class^="icon-"], .btn-success [class^="icon-"], .btn-danger [class^="icon-"], .btn-warning [class^="icon-"] { color: #fff; }
.btn-mini { padding: 2px 8px; font-size: 12px; border-radius: 8px; }
.btn-small { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-large { padding: 10px 20px; font-size: 15px; border-radius: 12px; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.btn-group > .btn.large:first-child, .btn-group > .btn-large:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.btn-group > .btn-mini:first-child, .btn-group > .btn-small:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.btn-group > .btn-mini:last-child, .btn-group > .btn-small:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.btn .caret { border-top-color: currentColor; }

/* ---------- Bang ---------- */
.table { background: var(--kb-the); border: 1px solid var(--kb-vien); border-collapse: separate; border-spacing: 0; border-radius: 14px; font-size: 13.5px; }
.table th, .table td { padding: 10px 12px; border-top: 1px solid var(--kb-vien-nhat); line-height: 20px; }
.table thead th { background-color: #F7FAF9; color: var(--kb-phu); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--kb-vien); white-space: nowrap; }
.table thead:first-child tr:first-child th:first-child { border-top-left-radius: 14px; }
.table thead:first-child tr:first-child th:last-child { border-top-right-radius: 14px; }
.table tbody:last-child tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.table tbody:last-child tr:last-child td:last-child { border-bottom-right-radius: 14px; }
.table thead + tbody tr:first-child td { border-top: 0; }
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: var(--kb-the); }
.table-striped tbody tr:nth-child(even) td, .table-striped tbody tr:nth-child(even) th { background-color: #FAFCFB; }
.table tbody tr:hover td, .table tbody tr:hover th { background-color: var(--kb-chu-dao-nhat) !important; }
.table-bordered { border-collapse: separate; }
.table-bordered th, .table-bordered td { border-left: 1px solid var(--kb-vien-nhat); }
.table-wrapper, .table-wrapper .scrollable { border-radius: 14px; }

/* ---------- Nhan, so dem ---------- */
.label, .badge { font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 16px; text-shadow: none; border: 0; background-color: var(--kb-xam-nen); color: var(--kb-xam); }
.label { padding: 3px 9px; border-radius: 999px; }
.badge { padding: 3px 10px; border-radius: 999px; }
.label-success, .badge-success { background-color: var(--kb-on-nen); color: var(--kb-on); }
.label-important, .badge-important { background-color: var(--kb-loi-nen); color: var(--kb-loi); }
.label-warning, .badge-warning { background-color: var(--kb-lam-nen); color: var(--kb-lam); }
.label-info, .badge-info { background-color: var(--kb-cho-nen); color: var(--kb-cho); }
.label-inverse, .badge-inverse { background-color: var(--kb-chu-dao); color: #fff; }
.label[href]:hover, .badge[href]:hover { filter: brightness(.96); }
.label .icon-white, .badge .icon-white { color: inherit; }
/* Sendy to link trong nhan bang style="color:white" (vd so Chuoi TD o trang Danh sach): theo mau chu cua nhan */
.label a, .badge a { color: inherit !important; text-decoration: none; }

/* ---------- O nhap, khung ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="datetime"], input[type="date"], textarea, select, .uneditable-input {
  border-color: var(--kb-o); color: var(--kb-chu); -webkit-box-shadow: none; box-shadow: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--kb-chu-dao) !important; outline: 0; -webkit-box-shadow: 0 0 0 3px rgba(15,118,110,.16) !important; box-shadow: 0 0 0 3px rgba(15,118,110,.16) !important; }
.input-prepend .add-on, .input-append .add-on { background: var(--kb-xam-nen); border-color: var(--kb-o); color: var(--kb-phu); text-shadow: none; }
.well { background: var(--kb-the); border: 1px solid var(--kb-vien); border-radius: 14px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.alert { border-radius: 12px; text-shadow: none; border: 1px solid #F3D9A4; background: #FFF8E8; color: #6B4A0B; }
.alert-success { background: var(--kb-on-nen); border-color: #BFE3CD; color: var(--kb-on); }
.alert-error, .alert-danger { background: var(--kb-loi-nen); border-color: #F2C4C7; color: var(--kb-loi); }
.alert-info { background: var(--kb-cho-nen); border-color: #C3D9F2; color: var(--kb-cho); }
.dropdown-menu { border: 1px solid var(--kb-vien); border-radius: 12px; -webkit-box-shadow: 0 12px 32px -12px rgba(22,35,31,.28); box-shadow: 0 12px 32px -12px rgba(22,35,31,.28); }
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { background: var(--kb-chu-dao-nhat); background-image: none; color: var(--kb-chu-dao-dam); }
.dropdown-menu li > a:hover [class^="icon-"], .dropdown-menu li > a:hover [class*=" icon-"] { color: var(--kb-chu-dao); }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: var(--kb-chu-dao-dam); font-weight: 600; }
.nav-pills > .active > a, .nav-pills > .active > a:hover { background-color: var(--kb-chu-dao); }
.pagination a { color: var(--kb-chu-dao); border-color: var(--kb-vien); }
.pagination a:hover, .pagination .active a { background-color: var(--kb-chu-dao-nhat); color: var(--kb-chu-dao-dam); }
.progress .bar { background-color: var(--kb-chu-dao); background-image: none; }
.modal { border-radius: 16px; border: 0; }
.modal-header { border-bottom-color: var(--kb-vien); }
.modal-footer { background: #F7FAF9; border-top-color: var(--kb-vien); border-radius: 0 0 16px 16px; -webkit-box-shadow: none; box-shadow: none; }
.tooltip-inner { background: var(--kb-chu); border-radius: 8px; }

/* ---------- Chan trang ---------- */
footer { color: var(--kb-mo); }
footer a { color: var(--kb-phu); }
footer .btn { padding: 4px 10px; }

/* ---------- Man hinh nho ---------- */
@media (max-width: 979px) {
  body { padding-top: 0; }
  .navbar-fixed-top { margin-top: 0; margin-bottom: 16px; }
}
@media (max-width: 767px) {
  /* Sendy de menu va noi dung cung troi trai nen trang tran ngang tren dien thoai: xep menu len tren, noi dung xuong duoi */
  body > .container-fluid > .row-fluid > .span2, body > .container-fluid > .row-fluid > .span10 { float: none; width: auto; }
  .sidebar-nav.sidebar-box { margin-bottom: 16px; }
}