/* ====== Thành An TMT — Sidebar + Responsive Layout ====== */
:root{
  --brand-primary:#0b2f5b;
  --brand-primary-2:#123f76;
  --brand-primary-soft:#eaf2fb;
  --brand-accent:#f97316;
  --brand-accent-2:#fb923c;
  --brand-bg:#ffffff;
  --brand-page:#f6f9fd;
  --brand-text:#0f172a;
  --brand-muted:#64748b;
  --brand-border:#dbe5f0;

  --sb-bg:var(--brand-primary);
  --sb-bg2:#061a35;
  --sb-fg:#f8fafc;
  --sb-fg-dim:#cbd5e1;
  --sb-primary:var(--brand-accent);
  --sb-accent:var(--brand-accent-2);
  --sb-sep:rgba(255,255,255,.18);
  --sb-w:264px;
  --radius:12px;
}

/* ===== Reset ===== */
*{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
  width:100%;
}

body{
  margin:0;
  background:var(--brand-page);
  color:var(--brand-text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:auto;
}

/* ===== Layout ===== */
.app{
  display:grid;
  grid-template-columns:var(--sb-w) minmax(0,1fr);
  min-height:100vh;
  width:100%;
  max-width:100%;
}

main{
  background:var(--brand-page);
  padding:0;
  min-width:0;
  width:100%;
  overflow-x:visible;
}

.page-head{
  max-width:none;
  width:auto;
  margin:18px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  min-width:0;
}

.page-head h1{
  margin:0 0 12px;
}

/* ===== Sidebar ===== */
.kero-aside{
  width:var(--sb-w);
  height:100vh;
  position:sticky;
  top:0;
  align-self:start;
  overflow:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));
  color:var(--sb-fg);
  padding:14px 10px 16px;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(11,47,91,.28);
}

.kero-brand{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px 16px;
  margin:0 4px 8px;
  border-bottom:1px dashed var(--sb-sep);
}

.kero-brand__dot{
  width:34px;
  height:34px;
  border-radius:12px;
  flex:0 0 34px;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));
  box-shadow:0 8px 18px rgba(249,115,22,.28);
  position:relative;
}

.kero-brand__dot::after{
  content:"TA";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
}

.kero-brand__title{
  display:block;
  white-space:normal;
  line-height:1.25;
  font-size:14px;
  font-weight:800;
  color:#fff;
  letter-spacing:.2px;
}

.kero-nav{
  padding:6px 4px 8px;
}

.kero-top{
  margin:2px 2px 8px;
  padding-bottom:6px;
  border-bottom:1px dashed var(--sb-sep);
}

/* ===== Sidebar Section ===== */
.kero-section{
  margin:10px 6px 6px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  backdrop-filter:blur(3px);
  transition:background .18s,border-color .18s,transform .18s;
}

.kero-section:hover,
.kero-section.open{
  background:rgba(249,115,22,.18);
  border-color:rgba(249,115,22,.36);
  transform:translateX(2px);
}

.kero-section .kero-caret{
  font-size:12px;
  color:var(--sb-fg-dim);
  transition:transform .25s,color .18s;
}

.kero-section.open .kero-caret{
  transform:rotate(180deg);
  color:var(--sb-accent);
}

.kero-section span:first-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Sidebar Sub ===== */
.kero-sub{
  max-height:0;
  overflow:hidden;
  overflow-x:hidden;
  opacity:0;
  transform:translateY(-2px);
  margin:0 2px;
  transition:max-height .28s ease,opacity .2s ease,transform .2s ease;
}

.kero-sub.open{
  max-height:700px;
  opacity:1;
  transform:translateY(0);
}

/* ===== Sidebar Item ===== */
.kero-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:0 14px;
  margin:4px;
  color:var(--sb-fg);
  text-decoration:none;
  border-radius:10px;
  transition:background .18s,color .18s,transform .1s;
}

.kero-item:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  transform:translateX(2px);
}

.kero-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  opacity:.95;
}

.kero-lbl{
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
}

/* Accent bar */
.kero-item::before{
  content:"";
  position:absolute;
  left:10px;
  top:11px;
  width:6px;
  height:24px;
  border-radius:6px;
  background:transparent;
  transition:background .18s,height .18s,top .18s;
}

.kero-item:hover::before{
  background:linear-gradient(180deg,var(--brand-accent),var(--brand-accent-2));
  top:9px;
  height:28px;
}

/* Active */
.kero-item.is-active{
  background:linear-gradient(90deg,rgba(249,115,22,.24),rgba(255,255,255,.08));
  color:#fff;
  box-shadow:0 12px 24px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.04);
  border:1px solid rgba(249,115,22,.42);
}

.kero-item.is-active::before{
  background:linear-gradient(180deg,var(--brand-accent),var(--brand-accent-2));
}

.kero-item.is-active::after{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid rgba(255,255,255,.95);
}

/* ===== Topbar ===== */
.kero-topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(160px,auto);
  align-items:center;
  gap:14px;
  background:#fff;
  border-bottom:1px solid var(--brand-border);
  box-shadow:0 6px 20px rgba(11,47,91,.08);
  padding:10px 18px;
  color:var(--brand-text);
  position:sticky;
  top:0;
  z-index:20;
}

.kero-topbar__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--brand-primary);
  font-size:15px;
  line-height:1.25;
}

.kero-topbar__brand strong{
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kero-topbar__logo{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-2));
  border:2px solid var(--brand-accent);
  font-weight:900;
  font-size:12px;
}

.kero-topbar__date{
  justify-self:center;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  border:1px solid #c9d9ec;
  border-radius:999px;
  padding:7px 14px;
  font-weight:800;
  white-space:nowrap;
}

.kero-topbar__account{
  justify-self:end;
  color:var(--brand-muted);
  font-size:14px;
  white-space:nowrap;
}

.ktb-date{
  color:var(--brand-accent);
  font-weight:900;
  font-size:14px;
}

/* Giữ tương thích nếu layout cũ còn dùng 3 cụm */
.kero-topbar__left,
.kero-topbar__right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.kero-topbar__left{
  flex:1;
}

.kero-topbar__center{
  color:#fff;
  background-color:var(--brand-primary);
  border-color:var(--brand-primary-2);
  padding:6px 12px;
  flex:2;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13.5px;
  border-radius:8px;
}

.kero-topbar__center strong{
  font-weight:700;
}

.kero-topbar__right{
  flex:1;
  justify-content:flex-end;
}

/* ===== Content / Bootstrap Override ===== */
.card,
.table,
.modal-content,
.dropdown-menu{
  border-color:var(--brand-border) !important;
}

.card{
  border-radius:14px;
  box-shadow:0 6px 20px rgba(11,47,91,.05);
}

.card-body{
  min-width:0;
}

.btn-primary,
.btn.btn-primary{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover{
  background:var(--brand-primary-2) !important;
  border-color:var(--brand-primary-2) !important;
}

.btn-warning,
.btn.btn-warning,
.btn-orange{
  background:var(--brand-accent) !important;
  border-color:var(--brand-accent) !important;
  color:#fff !important;
}

.btn-warning:hover,
.btn.btn-warning:hover,
.btn-orange:hover{
  background:var(--brand-accent-2) !important;
  border-color:var(--brand-accent-2) !important;
  color:#fff !important;
}

a{
  color:var(--brand-primary);
}

a:hover{
  color:var(--brand-accent);
}

.form-control:focus,
.form-select:focus{
  border-color:var(--brand-accent) !important;
  box-shadow:0 0 0 .2rem rgba(249,115,22,.18) !important;
}

.table thead th,
.table-light th{
  background:var(--brand-primary-soft) !important;
  color:var(--brand-primary) !important;
}

.table{
  width:100% !important;
  margin-bottom:0;
}

.table th,
.table td{
  vertical-align:middle;
}

/* ===== Fix Table / Grid Scroll ===== */
.table-responsive,
.grid-responsive,
.kero-grid-responsive,
.mobile-scroll,
.scroll-x{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  border-radius:12px;
}

.table-responsive > table,
.table-responsive > .table{
  width:100% !important;
  min-width:100% !important;
  white-space:normal;
}

.grid-responsive > table,
.kero-grid-responsive > table,
.mobile-scroll > table,
.scroll-x > table{
  width:100% !important;
  min-width:100% !important;
  white-space:normal;
}

/* Nếu dùng div dạng grid */
.data-grid,
.list-grid,
.report-grid{
  width:100%;
  min-width:100%;
}

.grid-responsive .data-grid,
.grid-responsive .list-grid,
.grid-responsive .report-grid,
.kero-grid-responsive .data-grid,
.kero-grid-responsive .list-grid,
.kero-grid-responsive .report-grid{
  width:100%;
  min-width:100%;
}

/* ===== Mobile Overlay ===== */
.kero-hamburger,
.kero-backdrop{
  display:none;
}

/* ===== Tablet ===== */
@media (max-width:1024px){
  .app{
    display:block;
    width:100%;
    overflow-x:visible;
  }

  .kero-aside{
    position:fixed;
    left:0;
    top:0;
    z-index:60;
    height:100vh;
    width:var(--sb-w);
    transform:translateX(-100%);
    transition:transform .28s ease;
  }

  body.aside-open .kero-aside{
    transform:translateX(0);
  }

  .kero-hamburger{
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    position:fixed;
    left:14px;
    top:14px;
    z-index:70;
    width:42px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid #c9d9ec;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.1);
  }

  .kero-hamburger span{
    display:block;
    width:20px;
    height:2px;
    background:var(--brand-primary);
  }

  .kero-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:55;
    background:rgba(2,6,23,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  body.aside-open .kero-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.aside-open{
    overflow:hidden;
  }

  .kero-brand__title,
  .kero-lbl{
    display:inline;
  }

  .kero-item.is-active::after{
    display:none;
  }

  main{
    padding:68px 12px 20px;
    overflow-x:visible;
    min-width:0;
    width:100%;
  }

  .kero-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    min-height:58px;
    grid-template-columns:1fr auto;
    padding:9px 12px 9px 64px;
    gap:8px;
  }

  .kero-topbar__brand{
    font-size:13px;
  }

  .kero-topbar__logo{
    display:none;
  }

  .kero-topbar__date{
    padding:5px 10px;
    font-size:12px;
  }

  .kero-topbar__account{
    grid-column:1 / -1;
    justify-self:start;
    font-size:12px;
    line-height:1.1;
  }

  .page-head{
    max-width:none;
    width:100%;
    margin:0;
    padding:12px;
    background:#fff;
    border:1px solid var(--brand-border);
    border-radius:14px;
    box-shadow:0 8px 24px rgba(11,47,91,.06);
    overflow-x:visible;
  }

  .card{
    overflow:visible;
  }

  .card-body{
    overflow-x:visible;
  }

  .table-responsive > table,
  .table-responsive > .table{
    width:100% !important;
    min-width:100% !important;
  }
}

/* ===== Mobile nhỏ ===== */
@media (max-width:576px){
  html,
  body{
    width:100%;
    max-width:100%;
  }

  body{
    overflow-x:auto;
  }

  .kero-topbar{
    grid-template-columns:1fr;
    padding-left:62px;
  }

  .kero-topbar__brand strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    white-space:normal;
  }

  .kero-topbar__date{
    justify-self:start;
  }

  .kero-topbar__account{
    display:none;
  }

  main{
    padding-top:82px;
    padding-left:8px;
    padding-right:8px;
    overflow-x:visible;
    width:100%;
  }

  .page-head{
    padding:10px;
    overflow-x:visible;
  }

  .card{
    border-radius:14px;
    overflow:visible;
  }

  .card-body{
    padding:10px;
    overflow-x:visible;
  }

  .btn{
    width:auto;
    max-width:100%;
  }

  .row{
    --bs-gutter-x:.75rem;
  }

  .table{
    font-size:13px;
  }

  .table-responsive,
  .grid-responsive,
  .kero-grid-responsive,
  .mobile-scroll,
  .scroll-x{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }

  .table-responsive > table,
  .table-responsive > .table,
  .grid-responsive > table,
  .kero-grid-responsive > table,
  .mobile-scroll > table,
  .scroll-x > table{
    width:max-content !important;
    min-width:850px !important;
    white-space:nowrap;
  }

  .data-grid,
  .list-grid,
  .report-grid{
    width:max-content;
    min-width:850px;
  }

  .grid-responsive .data-grid,
  .grid-responsive .list-grid,
  .grid-responsive .report-grid,
  .kero-grid-responsive .data-grid,
  .kero-grid-responsive .list-grid,
  .kero-grid-responsive .report-grid{
    width:max-content;
    min-width:850px;
  }
}

/* =========================================================
   TRANG ĐĂNG NHẬP
   Áp dụng khi main.php gắn class "is-guest" vào thẻ body.
   Phần này đặt cuối file để ghi đè layout quản trị trên
   màn hình đăng nhập mà không ảnh hưởng các trang bên trong.
   ========================================================= */

body.is-guest{
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  background:#061a35;
}

body.is-guest .app{
  display:block;
  width:100%;
  max-width:none;
  min-height:100vh;
  min-height:100dvh;
}

body.is-guest main{
  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent;
}

body.is-guest .kero-topbar,
body.is-guest .kero-aside,
body.is-guest .kero-hamburger,
body.is-guest .kero-backdrop,
body.is-guest .page-head{
  display:none !important;
}

.login-page{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 12%,rgba(249,115,22,.24),transparent 32%),
    radial-gradient(circle at 88% 88%,rgba(59,130,246,.20),transparent 34%),
    linear-gradient(135deg,#041426 0%,#0b2f5b 48%,#123f76 100%);
}

.login-page::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
}

.login-decoration{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}

.login-decoration--one{
  width:300px;
  height:300px;
  top:-130px;
  right:-100px;
  background:rgba(249,115,22,.16);
}

.login-decoration--two{
  width:360px;
  height:360px;
  bottom:-180px;
  left:-150px;
  background:rgba(59,130,246,.14);
}

.login-card{
  position:relative;
  width:100%;
  max-width:440px;
  padding:34px;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.45);
  border-radius:22px;
  box-shadow:
    0 30px 80px rgba(2,6,23,.42),
    0 8px 24px rgba(2,6,23,.18);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.login-card::before{
  content:"";
  position:absolute;
  top:0;
  left:32px;
  right:32px;
  height:4px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-accent-2));
}

.login-brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--brand-border);
}

.login-logo{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:.5px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));
  box-shadow:0 12px 26px rgba(249,115,22,.30);
}

.login-brand__content{
  min-width:0;
}

.login-brand h1{
  margin:0 0 4px;
  color:var(--brand-primary);
  font-size:22px;
  line-height:1.2;
  font-weight:850;
}

.login-brand p{
  margin:0;
  color:var(--brand-muted);
  font-size:14px;
}

.login-heading{
  margin-bottom:22px;
}

.login-heading h2{
  margin:0 0 7px;
  color:var(--brand-text);
  font-size:27px;
  line-height:1.2;
  font-weight:850;
}

.login-heading p{
  margin:0;
  color:var(--brand-muted);
  font-size:14px;
}

.login-alert{
  margin-bottom:20px;
  padding:12px 14px;
  font-size:14px;
  border-radius:11px;
}

.login-form .form-label{
  margin-bottom:7px;
  color:var(--brand-text);
  font-size:14px;
  font-weight:700;
}

.login-input-group{
  position:relative;
  display:flex;
  align-items:center;
}

.login-input-icon{
  position:absolute;
  z-index:3;
  left:15px;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7b8ba0;
  transform:translateY(-50%);
  pointer-events:none;
}

.login-input-group .form-control{
  width:100%;
  min-height:52px;
  padding:11px 15px 11px 46px;
  color:var(--brand-text);
  font-size:15px;
  border:1px solid #cfdae7;
  border-radius:12px;
  background:#fafdff;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}

.login-input-group .form-control::placeholder{
  color:#9aa8b8;
}

.login-input-group .form-control:focus{
  background:#fff;
}

.login-input-group .login-password-input{
  padding-right:72px;
}

.login-password-toggle{
  position:absolute;
  z-index:4;
  top:50%;
  right:7px;
  min-width:57px;
  height:38px;
  padding:0 10px;
  color:var(--brand-primary);
  font-size:13px;
  font-weight:750;
  border:0;
  border-radius:8px;
  background:var(--brand-primary-soft);
  transform:translateY(-50%);
  cursor:pointer;
}

.login-password-toggle:hover{
  color:#fff;
  background:var(--brand-primary);
}

.login-password-toggle:focus-visible{
  outline:3px solid rgba(249,115,22,.25);
  outline-offset:2px;
}

.login-submit,
.btn.login-submit{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  color:#fff;
  font-size:15px;
  font-weight:800;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(11,47,91,.20);
  transition:transform .18s,box-shadow .18s,background-color .18s;
}

.login-submit:hover,
.btn.login-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 28px rgba(11,47,91,.25);
}

.login-footer{
  margin-top:25px;
  padding-top:19px;
  color:var(--brand-muted);
  font-size:12px;
  text-align:center;
  border-top:1px solid var(--brand-border);
}

@media (max-width:1024px){
  body.is-guest main{
    min-height:100vh;
    min-height:100dvh;
    padding:0;
  }
}

@media (max-width:576px){
  body.is-guest{
    overflow-x:hidden;
  }

  body.is-guest main{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    padding:0;
    overflow:hidden;
  }

  .login-page{
    min-height:100vh;
    min-height:100dvh;
    align-items:center;
    padding:18px 14px;
  }

  .login-card{
    max-width:100%;
    padding:27px 20px 22px;
    border-radius:18px;
  }

  .login-card::before{
    left:22px;
    right:22px;
  }

  .login-brand{
    gap:12px;
    padding-bottom:20px;
    margin-bottom:21px;
  }

  .login-logo{
    width:52px;
    height:52px;
    flex-basis:52px;
    border-radius:15px;
    font-size:15px;
  }

  .login-brand h1{
    font-size:19px;
  }

  .login-brand p{
    font-size:13px;
  }

  .login-heading h2{
    font-size:24px;
  }

  .login-input-group .form-control{
    min-height:50px;
    font-size:16px;
  }

  .login-submit,
  .btn.login-submit{
    width:100%;
    min-height:50px;
  }
}

@media (max-height:650px) and (max-width:576px){
  .login-page{
    align-items:flex-start;
    overflow-y:auto;
  }

  .login-card{
    margin:auto 0;
  }

  .login-brand{
    padding-bottom:15px;
    margin-bottom:15px;
  }

  .login-heading{
    margin-bottom:16px;
  }

  .login-footer{
    margin-top:18px;
    padding-top:14px;
  }
}
/* ===== Chi phí gần đây trên Dashboard ===== */

.expense-table {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.expense-title-row th {
    padding: 13px 16px !important;
    background: #eaf2fb !important;
}

.expense-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #123d6a;
    font-weight: 700;
    text-transform: uppercase;
}

.expense-heading a {
    color: #1266b1;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
}

.expense-heading a:hover {
    text-decoration: underline;
}

.expense-vehicle-row > td {
    background-color: var(--vehicle-bg) !important;
    border-bottom-color: rgba(15, 46, 78, 0.1);
    transition: filter 0.15s ease;
}

.expense-vehicle-row:hover > td {
    filter: brightness(0.97);
}

.expense-vehicle-row > td:first-child {
    border-left: 5px solid rgba(18, 69, 115, 0.35);
}

.vehicle-plate {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(15, 53, 87, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    color: #123d6a;
    font-weight: 700;
    white-space: nowrap;
}

.expense-description {
    color: #172b3a;
    font-weight: 500;
}

.expense-category {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    color: #607080;
    font-size: 12px;
}

.expense-amount {
    color: #c62828;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .expense-title-row th {
        padding: 11px 12px !important;
    }

    .expense-heading {
        font-size: 14px;
    }

    .expense-vehicle-row td {
        padding: 9px 7px;
    }

    .vehicle-plate {
        padding: 4px 7px;
        font-size: 12px;
    }

    .expense-amount {
        font-size: 14px;
    }
}
/* =========================================================
   DOANH THU TRONG NGÀY
   Layout giống Chi phí gần đây
   ========================================================= */

.daily-revenue-section {
    width: 100%;
    margin: 22px 0 28px;
}

.daily-simple-table {
    width: 100%;
    margin-bottom: 0;
    background: #ffffff;
    border-color: #dce5ee;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(15, 38, 71, 0.06);
    overflow: hidden;
}

/* Tiêu đề */

.daily-simple-title-row th {
    padding: 0 !important;
    background: #ffffff;
    border: 0;
}

.daily-simple-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #075985, #0d7aa5);
}

.daily-simple-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.daily-simple-heading span {
    font-size: 17px;
    font-weight: 800;
}

.daily-simple-heading small {
    padding: 4px 8px;
    color: #075985;
    background: #ffffff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.daily-simple-heading a {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.daily-simple-heading a:hover {
    color: #fef3c7;
}

/* Tên cột */

.daily-simple-column-row th {
    padding: 12px 14px;
    color: #526274;
    background: #f5f8fb;
    border-color: #dce5ee;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.daily-simple-stt {
    width: 70px;
    text-align: center;
}

/* Dòng xe */

.daily-simple-vehicle-row {
    background: var(--daily-vehicle-bg);
}

.daily-simple-vehicle-row td {
    padding: 12px 14px;
    background: var(--daily-vehicle-bg);
    border-color: rgba(148, 163, 184, 0.25);
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
    transition: filter 0.15s ease;
}

.daily-simple-vehicle-row:hover td {
    filter: brightness(0.98);
}

.daily-simple-plate {
    color: #173f5f;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.daily-simple-trip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 3px 9px;
    color: #8a5100;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(217, 119, 6, 0.18);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
}

.daily-simple-amount {
    color: #08783e !important;
    font-size: 14px !important;
    font-weight: 800;
    white-space: nowrap;
}

/* Tổng cộng */

.daily-simple-total-row td {
    padding: 13px 14px;
    color: #26384d;
    background: #edf6fb;
    border-top: 2px solid #c7dfeb;
    font-size: 13px;
    font-weight: 800;
}

.daily-simple-total-row small {
    color: #718096;
    font-size: 10px;
    font-weight: 600;
}

.daily-simple-total-money {
    color: #dc2626 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
    .daily-revenue-section {
        width: 100%;
        max-width: 100%;
        margin: 14px 0 20px;
        overflow: hidden;
    }

    .daily-simple-table {
        width: 100%;
        table-layout: fixed;
        border-radius: 10px;
    }

    /* Header */

    .daily-simple-heading {
        padding: 13px 12px;
    }

    .daily-simple-heading > div {
        display: block;
    }

    .daily-simple-heading span {
        display: block;
        font-size: 15px;
    }

    .daily-simple-heading small {
        display: inline-block;
        margin-top: 4px;
        padding: 2px 7px;
        font-size: 9px;
    }

    .daily-simple-heading a {
        font-size: 10px;
        white-space: nowrap;
    }

    /* Độ rộng từng cột */

    .daily-simple-column-row th:nth-child(1),
    .daily-simple-vehicle-row td:nth-child(1) {
        width: 10%;
    }

    .daily-simple-column-row th:nth-child(2),
    .daily-simple-vehicle-row td:nth-child(2) {
        width: 30%;
    }

    .daily-simple-column-row th:nth-child(3),
    .daily-simple-vehicle-row td:nth-child(3) {
        width: 20%;
    }

    .daily-simple-column-row th:nth-child(4),
    .daily-simple-vehicle-row td:nth-child(4) {
        width: 40%;
    }

    .daily-simple-column-row th {
        padding: 9px 3px;
        font-size: 9px;
        white-space: normal;
    }

    .daily-simple-vehicle-row td {
        padding: 10px 4px;
        font-size: 11px;
    }

    .daily-simple-stt {
        width: auto;
    }

    .daily-simple-plate {
        font-size: 11px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .daily-simple-trip {
        min-width: 25px;
        padding: 2px 6px;
        font-size: 10px;
    }

    .daily-simple-amount {
        font-size: 11px !important;
        white-space: nowrap;
    }

    .daily-simple-total-row td {
        padding: 11px 4px;
        font-size: 10px;
    }

    .daily-simple-total-row small {
        display: none;
    }

    .daily-simple-total-money {
        font-size: 12px !important;
    }
}