:root{
  --bg:#f7f4ec;
  --card:#fffefb;
  --ink:#31260f;
  --muted:#766b55;
  --line:#eadfca;
  --gold-900:#6f4e00;
  --gold-700:#9d7200;
  --gold-500:#d4a825;
  --gold-300:#efd879;
  --gold-100:#fff5cc;
  --cream:#fffaf0;
  --ok:#147a3f;
  --bad:#b3261e;
  --blue:#2563a6;
  --shadow:0 10px 28px rgba(91,66,12,.08);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:"Segoe UI",Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#fffaf0 0,#f7f4ec 260px);color:var(--ink);line-height:1.45}
a{color:var(--gold-700);text-decoration:none}
.top-shell{position:sticky;top:0;z-index:20;background:linear-gradient(100deg,#775400 0%,#c99b17 30%,#f2dc83 60%,#bc8910 100%);box-shadow:0 5px 18px rgba(72,48,0,.18);border-bottom:1px solid rgba(91,58,0,.25)}
.top{max-width:1600px;margin:auto;min-height:72px;padding:8px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;min-width:190px;color:#3e2b00!important;padding:10px 8px 10px 0}
.brand b{display:block;font-size:18px;line-height:1.15;white-space:nowrap;letter-spacing:.1px}
.nav-main,.nav-tools{display:flex;align-items:center;gap:4px}
.nav-main{flex:1}
.nav-tools{padding-left:12px;border-left:1px solid rgba(91,58,0,.25)}
.top nav{}.top a:not(.brand){color:#4b3500;padding:10px 11px;border-radius:9px;font-size:13px;font-weight:650;white-space:nowrap;transition:.18s ease}
.top a:not(.brand):hover{background:rgba(255,255,255,.45);transform:translateY(-1px)}
.top a.active{background:#fff9e2;color:#6d4c00;box-shadow:0 3px 10px rgba(82,52,0,.14),inset 0 0 0 1px rgba(128,84,0,.15)}
.top .nav-logout{background:rgba(95,52,0,.14);color:#563600!important}
.wrap{max-width:1500px;margin:28px auto;padding:0 20px 50px}
h1{font-size:29px;line-height:1.2;margin:0 0 18px;color:#4d3700;letter-spacing:-.4px}
h2{color:#5f4505;font-size:19px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.card{background:linear-gradient(180deg,#fffefb,#fffdf8);border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow)}
.kpi{position:relative;overflow:hidden;min-height:112px}
.kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--gold-300),var(--gold-700))}
.kpi small{color:var(--muted);font-weight:600}
.kpi strong{display:block;font-size:26px;margin-top:10px;color:#4b3500;letter-spacing:-.3px}
.grid>.kpi:nth-child(2):before{background:linear-gradient(#f0ca45,#bd8700)}
.grid>.kpi:nth-child(3):before{background:linear-gradient(#57b77b,#167742)}
.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;color:#5a4b31}
input,select,textarea,button{width:100%;padding:10px 11px;border:1px solid #d9cdb7;border-radius:9px;background:#fff;color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:#c29112;box-shadow:0 0 0 3px rgba(212,168,37,.18)}
textarea{min-height:78px}
button,.btn{display:inline-block;width:auto;background:linear-gradient(180deg,#d4aa29,#a87700);color:#fff;border:0;cursor:pointer;padding:10px 16px;border-radius:9px;font-weight:700;box-shadow:0 4px 10px rgba(135,91,0,.18);transition:.18s ease}
button:hover,.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn.secondary{background:linear-gradient(#7b7f86,#5f6368)}
.btn.danger{background:linear-gradient(#cf443b,#a91f18)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fffefb;font-size:13px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:10px 11px;border-bottom:1px solid #eee4d2;text-align:left;vertical-align:top}
th{background:linear-gradient(180deg,#fff0b9,#f5dfa0);color:#5a4100;font-weight:750;border-bottom-color:#d9c185}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fffaf0}
.right{text-align:right}.muted{color:var(--muted)}.ok{color:var(--ok)!important;font-weight:750}.bad{color:var(--bad)!important;font-weight:750}
.flash{padding:12px 15px;border-radius:10px;margin-bottom:14px;border:1px solid transparent}.flash.success{background:#e9f7ee;color:#137333;border-color:#bfe5cc}.flash.error{background:#fff0ee;color:#a61e18;border-color:#efc7c3}
.section{margin-top:20px}.section h2{margin-top:0}.login{max-width:430px;margin:80px auto}.filters{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.filters>div{min-width:160px}.tag{display:inline-block;border:1px solid #decfae;border-radius:999px;padding:4px 8px;background:#fff9e8;color:#745200}
.return-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:320px}.return-form label{font-size:12px}.return-form input{min-width:0}.return-form button{grid-column:1/-1}
.owner-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.no-margin{margin:0}.inline-filter{display:flex;gap:8px;align-items:end}.nested-card{margin:14px 0;background:#fffaf0}.compact-card{margin:12px 0}.subheading{margin-top:10px}.narrow-card{max-width:520px}.price-link-wrap{margin-top:6px}.is-hidden{display:none!important}.checkbox-line{display:flex;align-items:center;gap:8px;font-weight:normal}.checkbox-line input{width:auto}.compact-card button{margin-top:10px}
@media(max-width:1250px){.top{flex-wrap:wrap}.brand{min-width:190px}.nav-main{order:3;width:100%}.nav-tools{margin-left:auto}.top-shell{position:relative}}
@media(max-width:900px){.grid,.row{grid-template-columns:1fr 1fr}.top{padding:10px 14px}.nav-main,.nav-tools{width:100%;overflow:auto;padding-bottom:4px}.nav-tools{padding-left:0;border-left:0}.wrap{margin-top:20px}}
@media(max-width:600px){.grid,.row,.row2{grid-template-columns:1fr}.wrap{padding:0 9px 35px}.table-wrap{overflow:auto}.brand{min-width:0}.brand b{font-size:15px}.top a:not(.brand){padding:8px 9px}.return-form{grid-template-columns:1fr;min-width:240px}.return-form button{grid-column:auto}}



/* Khung bảng */
.table-wrap{
  width:100%;
  overflow:auto;
}
.table-wrap table{
  min-width:max-content;
}

/* Bảng Tổng quan: tiêu đề nằm đúng phía trên dữ liệu, không ghim cột */
.dashboard-table-wrap{
  margin-top:16px;
}
.dashboard-table-wrap thead th{
  white-space:nowrap;
  background:linear-gradient(180deg,#fff0b9,#f3d985);
  color:#543b00;
  box-shadow:inset 0 -2px 0 #d1aa38;
}

/* Tài sản mua: cuộn bằng trang, hàng tiêu đề dính ngay dưới menu */
.lots-table-wrap{
  width:100%;
  overflow:visible;
  padding:0;
}
.lots-table{
  width:100%;
  min-width:1180px;
  border-collapse:separate;
  border-spacing:0;
  overflow:visible;
}
.lots-table thead{
  position:relative;
  z-index:20;
}
.lots-table thead th{
  position:sticky;
  top:var(--sticky-nav-height, 72px);
  z-index:25;
  white-space:nowrap;
  background:linear-gradient(180deg,#f8e7a3,#ddb436);
  color:#493100;
  border-top:1px solid #e0bd52;
  border-bottom:2px solid #bd9217;
  box-shadow:0 3px 8px rgba(74,48,0,.14);
}
.lots-table tbody td{
  position:relative;
  z-index:1;
  background:#fff;
}
.lots-table tbody tr:nth-child(even) td{
  background:#fffdf8;
}
.lots-table tbody tr:hover td{
  background:#fff8df;
}
.sort-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
}
.right .sort-button{
  justify-content:flex-end;
}
.sort-button:hover,
.sort-button:focus{
  background:transparent;
  color:#402c00;
  outline:none;
}
.sort-icon{
  min-width:12px;
  font-size:10px;
  line-height:1;
  opacity:.45;
}
.sort-button.is-active .sort-icon{
  opacity:1;
  color:#7b5600;
}
@media(max-width:1250px){
  .lots-table thead th{
    top:var(--sticky-nav-height, 118px);
  }
}
@media(max-width:700px){
  .lots-table-wrap{
    overflow-x:auto;
    overflow-y:visible;
  }
}


/* Báo cáo chi tiết: cuộn bằng trang, hàng tiêu đề dính ngay dưới menu */
.report-table-wrap{
  width:100%;
  overflow:visible;
  padding:0;
}
.report-table{
  width:100%;
  min-width:1540px;
  border-collapse:separate;
  border-spacing:0;
  overflow:visible;
}
.report-table thead{
  position:relative;
  z-index:20;
}
.report-table thead th{
  position:sticky;
  top:var(--sticky-nav-height, 72px);
  z-index:25;
  white-space:nowrap;
  background:linear-gradient(180deg,#f8e7a3,#ddb436);
  color:#493100;
  border-top:1px solid #e0bd52;
  border-bottom:2px solid #bd9217;
  box-shadow:0 3px 8px rgba(74,48,0,.14);
}
.report-table tbody td{
  position:relative;
  z-index:1;
  background:#fff;
}
.report-table tbody tr:nth-child(even) td{
  background:#fffdf8;
}
.report-table tbody tr:hover td{
  background:#fff8df;
}
@media(max-width:1250px){
  .report-table thead th{
    top:var(--sticky-nav-height, 118px);
  }
}
@media(max-width:700px){
  .report-table-wrap{
    overflow-x:auto;
    overflow-y:visible;
  }
}


/* Tiêu đề trang và nút thêm lô thu gọn */
.page-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.page-heading-row h1{
  margin:0;
}
.icon-add-button{
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.lot-create-panel{
  overflow:hidden;
  max-height:1200px;
  opacity:1;
  transform:translateY(0);
  transition:max-height .25s ease,opacity .2s ease,transform .2s ease,padding .2s ease,margin .2s ease,border-width .2s ease;
}
.lot-create-panel.is-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  margin-bottom:0;
  border-width:0;
  pointer-events:none;
}
.panel-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.panel-heading-row h2{
  margin:0 0 14px;
}
.panel-close-button{
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  font-size:24px;
  line-height:1;
  background:linear-gradient(180deg,#e8d28a,#b88a12);
}

/* Báo cáo chi tiết dùng thanh cuộn ngoài trang */
.report-table-wrap{
  width:100%;
  overflow:visible;
}
.report-table{
  min-width:1540px;
}


/* Làm rõ tiêu đề có thể bấm sắp xếp */
table[data-sort-table] thead th{
  padding:0;
}
table[data-sort-table] .sort-button{
  min-height:42px;
  padding:10px 11px;
}
table[data-sort-table] .sort-button:hover{
  background:rgba(255,255,255,.28);
}
table[data-sort-table] .sort-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(103,72,0,.08);
  opacity:.72;
}
table[data-sort-table] .sort-button.is-active .sort-icon{
  background:#8c6500;
  color:#fff;
  opacity:1;
}


/* Form nhập liệu chỉ mở khi bấm nút + */
.collapsible-entry-panel{
  position:relative;
  overflow:hidden;
  max-height:1800px;
  opacity:1;
  transform:translateY(0);
  transition:max-height .25s ease,opacity .2s ease,transform .2s ease,padding .2s ease,margin .2s ease,border-width .2s ease;
}
.collapsible-entry-panel.is-collapsed{
  max-height:0!important;
  opacity:0;
  transform:translateY(-8px);
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  border-width:0!important;
  pointer-events:none;
}
.floating-panel-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:5;
}
.profit-percent{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:650;
  opacity:.82;
}


/* v1.28 - Cân lại Dashboard và Báo cáo chi tiết */
.dashboard-money-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.dashboard-money-grid .kpi{
  min-height:144px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:20px 18px;
}
.dashboard-money-grid .kpi small{
  margin:0;
  line-height:1.35;
}
.dashboard-money-grid .kpi strong{
  display:block;
  margin:0;
  line-height:1.1;
}
@media(max-width:1100px){
  .dashboard-money-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:650px){
  .dashboard-money-grid{
    grid-template-columns:1fr;
  }
}

.card > h2 + .grid,
.card > h2 + .dashboard-money-grid{
  margin-top:12px;
}
.card .grid + .table-wrap,
.card .dashboard-money-grid + .table-wrap{
  margin-top:18px;
}

/* Kéo phần bảng trong khối kim loại lên gọn hơn */
.section.card .grid{
  margin-bottom:18px;
}
.section.card .table-wrap{
  margin-top:14px;
}

/* Báo cáo chi tiết */
.compact-title-row{
  margin-bottom:10px;
}
.report-table-wrap{
  overflow-x:auto;
  overflow-y:visible;
}
.report-table{
  width:100%;
  min-width:1380px;
  table-layout:fixed;
}
.report-table col.col-code{width:68px;}
.report-table col.col-date{width:92px;}
.report-table col.col-owner{width:68px;}
.report-table col.col-product{width:150px;}
.report-table col.col-company{width:76px;}
.report-table col.col-description{width:auto;}
.report-table col.col-qty{width:68px;}
.report-table col.col-money{width:122px;}
.report-table col.col-profit{width:128px;}

.report-table thead th{
  height:42px;
  vertical-align:middle;
}
.report-table .sort-button{
  min-height:42px;
  padding:8px 8px;
  gap:4px;
  justify-content:flex-start;
  font-size:13px;
  line-height:1.15;
}
.report-table th.right .sort-button{
  justify-content:flex-end;
}
.report-table td{
  padding:8px 9px;
  line-height:1.35;
  vertical-align:middle;
}
.report-table td:nth-child(7),
.report-table td:nth-child(8),
.report-table td:nth-child(9),
.report-table td:nth-child(10),
.report-table td:nth-child(11){
  text-align:center;
  white-space:nowrap;
}
.report-table td:nth-child(12),
.report-table td:nth-child(13),
.report-table td:nth-child(14){
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.report-table td:nth-child(14) small{
  display:block;
  margin-top:2px;
  font-size:11px;
  line-height:1;
}
.report-table td:nth-child(6){
  overflow-wrap:anywhere;
}
@media(max-width:1500px){
  .report-table{
    min-width:1320px;
  }
  .report-table col.col-product{width:138px;}
  .report-table col.col-money{width:116px;}
  .report-table col.col-profit{width:120px;}
}


/* v1.29 - Gộp KPI và sửa sticky Báo cáo */
.metal-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  align-items:stretch;
  margin-bottom:14px;
}
.metal-kpi-grid .kpi{
  min-height:106px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.metal-kpi-grid .combined-kpi strong{
  white-space:nowrap;
}
@media(max-width:900px){
  .metal-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:600px){
  .metal-kpi-grid{
    grid-template-columns:1fr;
  }
}

/* Không để khung cuộn ngang làm sticky header tách khỏi thân bảng */
.report-table-wrap{
  width:100%;
  overflow:visible!important;
  padding:0;
  border-radius:12px;
}
.report-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  overflow:visible;
}

/* Dính nguyên khối hàng tiêu đề thay vì dính từng ô */
.report-table thead{
  position:sticky!important;
  top:var(--sticky-nav-height,72px);
  z-index:40;
}
.report-table thead th{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  height:42px;
  padding:0;
  vertical-align:middle;
  background:linear-gradient(180deg,#f8e7a3,#ddb436);
  border-top:1px solid #e0bd52;
  border-bottom:2px solid #bd9217;
  box-shadow:none;
}
.report-table thead tr{
  box-shadow:0 3px 8px rgba(74,48,0,.16);
}
.report-table tbody{
  position:relative;
  z-index:1;
}
.report-table tbody td{
  position:static!important;
  z-index:auto!important;
}

/* Cân lại 14 cột để vừa khung */
.report-table col.col-code{width:5%;}
.report-table col.col-date{width:7%;}
.report-table col.col-owner{width:5%;}
.report-table col.col-product{width:12%;}
.report-table col.col-company{width:6%;}
.report-table col.col-description{width:18%;}
.report-table col.col-qty{width:5%;}
.report-table col.col-money{width:9%;}
.report-table col.col-profit{width:10%;}

.report-table .sort-button{
  width:100%;
  min-height:42px;
  padding:7px 7px;
  gap:3px;
  font-size:12px;
  line-height:1.15;
  white-space:normal;
}
.report-table th.right .sort-button{
  justify-content:flex-end;
  text-align:right;
}
.report-table td{
  padding:8px 8px;
  font-size:12px;
  line-height:1.3;
}
.report-table td:nth-child(1),
.report-table td:nth-child(2),
.report-table td:nth-child(3),
.report-table td:nth-child(5),
.report-table td:nth-child(7),
.report-table td:nth-child(8),
.report-table td:nth-child(9),
.report-table td:nth-child(10),
.report-table td:nth-child(11),
.report-table td:nth-child(12),
.report-table td:nth-child(13),
.report-table td:nth-child(14){
  white-space:nowrap;
}
.report-table td:nth-child(4),
.report-table td:nth-child(6){
  overflow-wrap:anywhere;
}

/* Chỉ màn hình nhỏ mới cho cuộn ngang và tắt sticky để không lệch */
@media(max-width:1050px){
  .report-table-wrap{
    overflow-x:auto!important;
    overflow-y:visible!important;
  }
  .report-table{
    min-width:1260px!important;
  }
  .report-table thead{
    position:static!important;
  }
}


/* v1.30 - Gộp Công ty & sản phẩm vào Thiết lập */
.settings-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.settings-block{
  display:block;
}
.settings-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
}
.settings-section-heading > div{
  min-width:0;
}
.settings-section-heading h2{
  margin:0;
}
.settings-section-heading small{
  display:block;
  margin-top:4px;
  opacity:.72;
}
.settings-block > .section.card:first-of-type{
  margin-top:16px;
}
@media(max-width:650px){
  .settings-section-heading{
    align-items:flex-start;
  }
}

/* v1.31 - Chi tiết từng anten cập nhật giá */
.sync-run-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.sync-run-heading small{display:block;margin-top:4px;opacity:.72}
.sync-detail-table td,.sync-detail-table th{vertical-align:middle}
.sync-detail-table td:last-child{max-width:420px;white-space:normal}
.sync-status{display:inline-flex;align-items:center;white-space:nowrap;font-weight:700}


/* v1.34 - Log anten gọn */
.sync-detail-table{
  table-layout:fixed;
  width:100%;
}
.sync-detail-table th:nth-child(1){width:12%;}
.sync-detail-table th:nth-child(2){width:12%;}
.sync-detail-table th:nth-child(3){width:15%;}
.sync-detail-table th:nth-child(4){width:12%;}
.sync-detail-table th:nth-child(5),
.sync-detail-table th:nth-child(6){width:11%;}
.sync-detail-table th:nth-child(7){width:27%;}
.sync-detail-cell{
  max-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sync-detail-cell small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
