@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap');

html,body,button,input,select,textarea,.brand>span,.login-brand>span,.brand b,.login-brand b,.page-head h1,.notice b,.metrics h2,.metrics h2 i,.panel-head h3,.form-section h3,.empty h2,.login-copy h1,.login-visual h2{font-family:'Bai Jamjuree',Arial,sans-serif!important}
body{font-weight:400}.brand b,.login-brand b,.page-head h1,.metrics h2,.panel-head h3,.form-section h3,.empty h2,.login-copy h1,.login-visual h2{font-weight:700}

/* Hệ thống cỡ chữ chuẩn cho màn hình quản trị */
html{font-size:16px}
body{font-size:14px;line-height:1.5}
.brand b,.login-brand b{font-size:19px}
.brand>span,.login-brand>span{font-size:12px!important;letter-spacing:-.3px}
.brand small,.login-brand small{font-size:9px}
.nav-label{font-size:11px}
.sidebar nav a{font-size:14px}
.system-ok b,.profile b{font-size:11px}
.system-ok small,.profile small,.profile>a{font-size:10px}
.topbar form input{font-size:13px}
.today{font-size:12px}
.page-head>div>small{font-size:11px}
.page-head h1{font-size:30px;line-height:1.25}
.page-head p{font-size:13px}
.btn{font-size:13px}
.flash{font-size:13px}
.notice b{font-size:15px}
.notice p,.notice a{font-size:12px}
.metrics small{font-size:11px}
.metrics h2{font-size:29px}
.metrics h2 i{font-size:14px}
.metrics p{font-size:11px}
.panel-head h3{font-size:16px}
.panel-head p,.panel-head>a{font-size:11px}
table{font-size:13px}
th{font-size:11px}
td b{font-size:13px}
td small{font-size:11px}
.badge{font-size:11px}
.quick-actions b{font-size:12px}
.quick-actions small{font-size:10px}
.filterbar input,.filterbar>span{font-size:12px}
.form-section h3{font-size:17px}
.form-grid label,.login-card label{font-size:12px}
.form-grid input,.form-grid select,.form-grid textarea,.login-card input{font-size:14px}
.empty h2{font-size:24px}
.empty p{font-size:13px}
footer{font-size:10px}
.login-copy>small{font-size:11px}
.login-copy h1{font-size:38px}
.login-copy p,.login-visual p{font-size:14px}
.login-note{font-size:10px}
.report-tabs{display:flex;gap:8px;margin:0 0 14px;border-bottom:1px solid #dfe5ed}.report-tabs a{padding:11px 16px;font-size:13px;font-weight:600;color:#68768b;border-bottom:2px solid transparent}.report-tabs a.active{color:#2866d7;border-bottom-color:#2866d7}.form-grid label.check{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:42px;padding:10px 12px;border:1px solid #dce2ea;border-radius:7px}.form-grid label.check input{width:17px;min-height:17px;margin:0}.form-grid label small{font-size:10px;font-weight:400;color:#7b8799}.sidebar{overflow-y:auto}.sidebar .nav-label{margin-top:16px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-title h3{margin:0}.entry-table{min-width:1280px}.entry-table input,.entry-table select{width:100%;min-width:120px;height:38px;border:1px solid #dce2ea;border-radius:6px;padding:0 9px;font-size:12px}.entry-table td{padding:8px}.entry-table td:first-child select{min-width:230px}.remove-line{width:30px;height:30px;border:0;border-radius:6px;background:#fde9ea;color:#bd3f47;font-size:18px;cursor:pointer}.upload-row{margin-top:16px;max-width:520px}
.select-actions{display:flex;align-items:center;gap:9px}.select-actions select{flex:1}.select-actions a{white-space:nowrap;color:#2866d7;font-size:11px;font-weight:600}.entry-table.compact-entry{min-width:1050px}.master-grid{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(620px,1.2fr);gap:16px;align-items:start}.master-grid .form-card{width:100%}.master-actions{display:flex;gap:10px;align-items:center}.master-actions>a{color:#2866d7;font-weight:600}.master-actions form{display:inline}.master-actions button{border:0;background:transparent;color:#bd3f47;padding:0;cursor:pointer;font-size:12px}.form-actions{gap:8px}
.receipt-detail-section .section-title>div p{margin:4px 0 0;color:#7b8799;font-size:11px}.receipt-lines{display:grid;gap:12px}.receipt-line{border:1px solid #e0e6ef;border-radius:10px;background:#fbfcfe;overflow:visible}.receipt-line-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f5f8fc;border-bottom:1px solid #e7ebf1;border-radius:10px 10px 0 0}.receipt-line-head strong{font-size:12px;color:#40506a}.receipt-line-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(4,minmax(130px,1fr));gap:12px;padding:14px}.receipt-line-grid label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:600;color:#536075;min-width:0}.receipt-line-grid input,.receipt-line-grid select{width:100%;min-width:0;height:40px;border:1px solid #dce2ea;border-radius:7px;background:#fff;padding:0 10px;color:#253149;outline:none}.receipt-line-grid input:focus,.receipt-line-grid select:focus{border-color:#7da2e5;box-shadow:0 0 0 3px #2866d711}.receipt-add-bottom{width:100%;height:43px;margin-top:12px;border:1px dashed #9ab5e6;border-radius:9px;background:#f5f8ff;color:#2866d7;font-weight:600;cursor:pointer}.receipt-add-bottom:hover{background:#edf3ff}.add-receipt-line{color:#2866d7;border-color:#b9cae7}
.chemical-picker{position:relative}.chemical-native-select{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0!important;pointer-events:none!important}.chemical-picker-control{width:100%;height:40px;border:1px solid #dce2ea;border-radius:7px;background:#fff;padding:0 11px;display:flex;align-items:center;justify-content:space-between;color:#6f7b8e;cursor:pointer;text-align:left}.chemical-picker-control.has-value{color:#253149}.chemical-picker-control i{font-style:normal;font-size:17px;transition:transform .15s}.chemical-picker.open .chemical-picker-control{border-color:#7da2e5;box-shadow:0 0 0 3px #2866d711}.chemical-picker.open .chemical-picker-control i{transform:rotate(180deg)}.chemical-dropdown{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;border:1px solid #d7deea;border-radius:9px;background:#fff;box-shadow:0 14px 32px #14233a22;overflow:hidden}.chemical-picker.open .chemical-dropdown{display:block}.chemical-dropdown-search{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:30px 1fr;align-items:center;padding:6px;background:#fff;border-bottom:1px solid #e8ecf2}.chemical-dropdown-search>span{text-align:center;color:#738198;font-size:17px}.receipt-line-grid .chemical-dropdown-search .chemical-search{height:36px;border:1px solid #dce2ea!important;border-radius:6px;box-shadow:none!important;padding:0 9px}.chemical-options{max-height:280px;overflow-y:auto;overscroll-behavior:contain;padding:5px}.chemical-option{display:block;width:100%;border:0;border-radius:6px;background:#fff;text-align:left;padding:10px 11px;color:#253149;font-size:12px;cursor:pointer}.chemical-option:hover,.chemical-option.selected{background:#edf3ff;color:#245fc8}.chemical-option-empty{padding:18px 11px;text-align:center;color:#7b8799;font-size:11px}.chemical-options::-webkit-scrollbar{width:8px}.chemical-options::-webkit-scrollbar-thumb{background:#bac5d5;border-radius:8px;border:2px solid #fff}
@media(max-width:1180px){.receipt-line-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.receipt-line-grid .chemical-field{grid-column:span 2}}

/* Giao diện điện thoại */
.mobile-menu-toggle,.sidebar-overlay{display:none}
@media(max-width:720px){
  body{font-size:14px;overflow-x:hidden}
  .sidebar{display:flex!important;width:286px!important;padding:18px 14px!important;transform:translateX(-105%);transition:transform .25s ease;box-shadow:12px 0 35px #0a142744;z-index:50}
  .menu-open{overflow:hidden}.menu-open .sidebar{transform:translateX(0)}
  .sidebar .brand{padding:0 8px}.sidebar .brand div,.sidebar .nav-label,.sidebar nav a:not(.active),.sidebar .system-ok,.sidebar .profile div,.sidebar .profile>a{display:flex!important}
  .sidebar .nav-label{display:block!important}.sidebar nav a{justify-content:flex-start!important;padding:0 12px!important;font-size:14px!important}.sidebar nav a i{font-size:18px!important}.sidebar .system-ok{margin-top:20px}.sidebar .profile{display:grid!important}
  .sidebar-overlay{display:block;position:fixed;inset:0;border:0;background:#0b172a99;opacity:0;visibility:hidden;transition:.25s;z-index:40}.menu-open .sidebar-overlay{opacity:1;visibility:visible}
  .workspace{margin-left:0!important;width:100%!important}
  .topbar{height:62px;width:100%;max-width:100%;min-width:0;padding:0 12px!important;gap:10px;overflow:hidden}
  .mobile-menu-toggle{display:flex;width:40px;height:40px;border:1px solid #dce2ea;border-radius:9px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex:0 0 40px}
  .mobile-menu-toggle i{width:18px;height:2px;border-radius:2px;background:#25354d}
  .topbar form{width:auto!important;min-width:0;flex:1;height:40px}.topbar form input{min-width:0}.topbar .today{display:none}.topbar>div{min-width:40px;flex:0 0 40px;gap:0}.top-action{width:40px;padding:0!important}.top-action b{display:none}.top-action span{font-size:18px}
  .content{padding:18px 12px 32px!important}
  .page-head{display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px;margin-bottom:18px}.page-head>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0!important}.page-head>div:last-child:only-child{display:block}.page-head>a,.page-head>button{width:100%;margin:0!important}.page-head h1{font-size:25px}.page-head p{font-size:13px;line-height:1.55}
  .notice{align-items:flex-start}.notice>a{display:none}.notice p{line-height:1.5}
  .metrics{grid-template-columns:1fr 1fr!important;gap:10px}.metrics article{padding:14px}.metrics h2{font-size:25px}.metrics small{font-size:10px}
  .dashboard-grid{grid-template-columns:1fr!important}.quick-actions{grid-template-columns:1fr!important}.quick-actions a{min-height:68px}
  .panel-head{height:auto;min-height:62px;padding:13px 14px}.panel-head h3{font-size:15px}
  .filterbar{align-items:stretch;gap:10px;flex-direction:column}.filterbar form{display:flex;width:100%}.filterbar input{width:100%;min-width:0;flex:1}.filterbar>span{text-align:right}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.table-wrap:after{content:'Vuốt ngang để xem thêm →';display:block;position:sticky;left:12px;width:max-content;padding:7px 0;color:#8290a5;font-size:10px}
  table{min-width:720px}th,td{padding:10px 12px}
  table th:last-child,table td:last-child{position:sticky;right:0;background:#fff;box-shadow:-8px 0 12px -12px #17223888;z-index:1}table th:last-child{background:#fafbfc;z-index:2}
  .form-card,.form-card.narrow{max-width:none;width:100%}.form-section{padding:17px 14px}.form-grid{grid-template-columns:1fr!important;gap:13px}.span-2{grid-column:auto!important}.form-actions{padding:14px}.form-actions .btn{width:100%;height:44px}
  .section-title{align-items:stretch;flex-direction:column;gap:10px}.section-title .btn{width:100%}.entry-table{min-width:1200px}.upload-row{max-width:none}.receipt-line-grid{grid-template-columns:1fr;padding:12px}.receipt-line-grid .chemical-field{grid-column:auto}.receipt-line-head{padding:9px 11px}
  .select-actions{align-items:stretch;flex-direction:column}.select-actions a{padding:4px 0}.entry-table.compact-entry{min-width:980px}.master-grid{grid-template-columns:1fr}.master-grid table{min-width:680px}
  .report-tabs{overflow-x:auto;white-space:nowrap;gap:0;-webkit-overflow-scrolling:touch}.report-tabs a{padding:10px 13px}.login-card{width:calc(100% - 32px)!important;padding:32px 0!important}.login-brand{margin-bottom:42px}.login-copy h1{font-size:32px}
  footer{padding:14px 12px;text-align:center}
}
@media(max-width:420px){.metrics{grid-template-columns:1fr!important}.page-head>div:last-child{grid-template-columns:1fr}.topbar form input::placeholder{color:transparent}.topbar form{max-width:none}.metric-icon{margin-right:12px}}

/* Đồng bộ kiểu chữ của lịch sử xuất kho với biểu mẫu */
.recent-issues,.recent-issues button,.recent-issues input,.recent-issues select,.recent-issues textarea{font-family:'Bai Jamjuree',Arial,sans-serif!important}
.recent-issues-head h3{font-family:'Bai Jamjuree',Arial,sans-serif!important;font-size:17px;font-weight:700;line-height:1.4}
.recent-issues-head p{font-size:10px;line-height:1.5}
.recent-issue-top a{font-size:12px}.recent-issue-top time{font-size:10px}
.recent-issue>strong{font-size:14px;font-weight:600}
.recent-issue-meta span,.recent-issue-meta b{font-size:12px}
.recent-issue>small{font-size:10px}.recent-issues-all{font-size:12px}
.recent-issues-empty b{font-size:12px}.recent-issues-empty p{font-size:10px}

/* Typography chuẩn cho điện thoại, bao gồm iPhone Pro Max */
@media(max-width:720px){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{font-size:16px;line-height:1.55}
  .brand b{font-size:19px}.brand small{font-size:10px}
  .nav-label{font-size:12px}.sidebar nav a{font-size:15px!important}
  .system-ok b,.profile b{font-size:13px}.system-ok small,.profile small,.profile>a{font-size:12px}
  .topbar form input{font-size:16px}.top-action{font-size:14px}
  .page-head>div>small{font-size:12px}.page-head h1{font-size:28px!important;line-height:1.3}.page-head p{font-size:15px!important;line-height:1.55}
  .btn{font-size:14px;line-height:1.3}.flash{font-size:14px}
  .notice b{font-size:16px}.notice p,.notice a{font-size:13px}
  .metrics small{font-size:12px;line-height:1.35}.metrics h2{font-size:28px}.metrics p{font-size:12px;line-height:1.45}
  .panel-head h3{font-size:17px!important}.panel-head p,.panel-head>a{font-size:12px}
  table{font-size:14px}th{font-size:12px}td b{font-size:14px}td small{font-size:12px}.badge{font-size:12px}
  .quick-actions b{font-size:14px}.quick-actions small{font-size:12px;line-height:1.4}
  .filterbar input,.filterbar select,.filterbar>span,.filterbar-advanced input,.filterbar-advanced select{font-size:16px}
  .form-section h3{font-size:18px}.form-grid label,.login-card label{font-size:14px}
  .form-grid input,.form-grid select,.form-grid textarea,.login-card input{font-size:16px;line-height:1.45}
  .form-grid label small{font-size:12px;line-height:1.45}
  .form-actions .btn{font-size:15px}.select-actions a{font-size:13px}
  .recent-issues-head h3{font-size:18px}.recent-issues-head p{font-size:12px}
  .recent-issue-top a{font-size:13px}.recent-issue-top time{font-size:12px}
  .recent-issue>strong{font-size:15px}.recent-issue-meta span,.recent-issue-meta b{font-size:13px}.recent-issue>small{font-size:12px}.recent-issues-all{font-size:13px}
  .issue-stock-control{font-size:16px}.form-grid .issue-stock-search input{font-size:16px}
  .issue-stock-name{font-size:15px}.issue-stock-detail{font-size:13px}.issue-stock-detail b{font-size:14px}.issue-stock-empty{font-size:13px}
  footer{font-size:12px}
}