:root{--green:#00a651;--green-dark:#07843f;--green-soft:#e9f8ef;--border:#e5e7eb;--text:#1f2937;--muted:#6b7280;--blue:#2563eb;--red:#dc2626;--orange:#f59e0b}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:var(--text);font-size:14px}.login-bg{min-height:100vh;background:linear-gradient(135deg,#008f45,#00b45a 45%,#f4fff7);display:flex;align-items:center;justify-content:center}.login-card{width:390px;background:#fff;border-radius:18px;padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.brand-logo{width:78px;height:78px;object-fit:contain}.topbar{height:48px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:14px}.topbar img{height:34px}.topbar .brand{font-weight:700;color:var(--green-dark);font-size:20px}.main-nav{background:var(--green);height:48px;display:flex;align-items:center;padding:0 14px;gap:2px;box-shadow:0 2px 4px rgba(0,0,0,.08)}.main-nav a{color:#fff;text-decoration:none;padding:15px 18px;height:48px;font-weight:600}.main-nav a:hover,.main-nav a.active{background:var(--green-dark)}.sell-btn{margin-left:auto;background:#fff!important;color:var(--green-dark)!important;border-radius:8px;height:34px!important;padding:8px 20px!important}.page{display:flex;min-height:calc(100vh - 96px)}.sidebar{width:250px;background:#fff;border-right:1px solid var(--border);padding:18px}.content{flex:1;padding:18px;overflow:auto}.panel{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)}.panel.pad{padding:18px}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}.search{max-width:520px}.btn-green{background:var(--green);border-color:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}.table-wrap{overflow:auto}.kv-table{width:100%;border-collapse:collapse;background:#fff}.kv-table th{background:#f2fbf5;color:#374151;font-weight:700;border-bottom:1px solid var(--border);padding:12px;white-space:nowrap}.kv-table td{border-bottom:1px solid var(--border);padding:12px;vertical-align:middle}.kv-table tr:hover{background:#fbfffc}.filters h6{font-weight:700;margin-top:18px}.pill{display:inline-block;background:var(--green-soft);color:var(--green-dark);border:1px solid #b8eccb;padding:5px 10px;border-radius:18px;margin:3px}.metric{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}.metric .label{color:var(--muted)}.metric .value{font-size:24px;font-weight:800}.pagination{margin:16px 0 0;justify-content:flex-end}.pos-page{height:100vh;display:flex;flex-direction:column;background:#eef1f4}.pos-nav{height:46px;background:var(--green);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff}.pos-search{width:360px}.pos-body{display:flex;flex:1;overflow:hidden}.pos-left{flex:1;padding:14px;overflow:auto}.pos-right{width:360px;background:#fff;border-left:1px solid var(--border);padding:18px}.product-line{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:14px;display:grid;grid-template-columns:80px 1fr 90px 90px 90px 34px;gap:12px;align-items:center}.invoice{max-width:980px;margin:auto;background:#fff;padding:34px;border:1px solid #ddd}.invoice h1{text-align:center;font-size:30px;font-weight:800}.invoice table{width:100%;border-collapse:collapse}.invoice th,.invoice td{border:1px solid #444;padding:7px;font-size:13px}.invoice th{background:#f3f4f6}.print-only{display:none}@media print{.topbar,.main-nav,.no-print{display:none!important}.page{display:block}.content{padding:0}.invoice{border:0}.print-only{display:block}}@media(max-width:900px){.sidebar{display:none}.main-nav{overflow:auto}.main-nav a{white-space:nowrap}.pos-right{width:320px}}

/* Mobile responsive fixes */
@media (max-width: 768px){
  body{font-size:13px;background:#f6f7f9;overflow-x:hidden}
  .topbar{height:auto;min-height:56px;padding:8px 10px;gap:8px;flex-wrap:wrap}
  .topbar img{height:38px;width:38px;object-fit:contain}
  .topbar .brand{font-size:16px;line-height:1.1;max-width:180px}
  .topbar .ms-auto{margin-left:0!important;width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .main-nav{height:auto;min-height:44px;padding:0 8px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;display:flex;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{height:44px!important;padding:13px 12px;font-size:13px;flex:0 0 auto}
  .sell-btn{margin-left:4px;height:32px!important;padding:8px 14px!important;border-radius:7px}

  .page{display:block;min-height:auto}
  .sidebar{display:block;width:auto;border-right:0;border-bottom:1px solid var(--border);padding:10px;background:#fff}
  .sidebar h4{font-size:18px;margin-bottom:8px}
  .filters h6{font-size:13px;margin:10px 0 6px}
  .filters .form-check,.filters .pill{display:inline-block;margin-right:6px;margin-bottom:6px}
  .filters select{max-width:100%}
  .content{padding:10px;overflow:visible}
  .toolbar{gap:8px;flex-wrap:wrap;align-items:stretch}
  .toolbar .search{max-width:none;width:100%;flex:1 0 100%}
  .toolbar .ms-auto{display:none}
  .toolbar .btn{flex:1 1 auto;padding:8px 10px;font-size:13px}
  .panel{border-radius:8px}
  .panel.pad{padding:12px}

  .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
  .kv-table{min-width:760px;font-size:12px}
  .kv-table th,.kv-table td{padding:9px 8px;white-space:nowrap}
  .panel>.d-flex{display:block!important;padding:10px!important}
  .panel .pagination{justify-content:flex-start;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;margin-top:8px;padding-bottom:4px}
  .page-link{padding:5px 9px}

  .metric{padding:12px;margin-bottom:10px}
  .metric .value{font-size:20px}
  .row.g-3>[class*='col-']{margin-bottom:8px}

  .pos-page{height:auto;min-height:100vh}
  .pos-nav{height:auto;min-height:50px;padding:8px;gap:8px;flex-wrap:wrap}
  .pos-search{width:100%;order:1}
  .pos-nav .fw-bold{order:0}
  .pos-body{display:block;overflow:visible}
  .pos-left{padding:10px;overflow:visible}
  .pos-right{width:auto;border-left:0;border-top:1px solid var(--border);padding:12px;position:sticky;bottom:0;z-index:10;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .product-line{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;font-size:13px}
  .product-line>*{min-width:0}
  .product-line .qty,.product-line .price,.product-line .total{grid-column:1 / -1;display:flex;justify-content:space-between;border-top:1px dashed var(--border);padding-top:6px}

  .invoice{padding:12px;margin:0;border:0;max-width:100%;overflow-x:auto}
  .invoice h1{font-size:22px}
  .invoice table{min-width:820px}
}

@media (max-width: 480px){
  .topbar .brand{font-size:15px}
  .main-nav a{padding-left:10px;padding-right:10px}
  .toolbar .btn{flex:1 1 46%}
  .kv-table{min-width:680px}
  .login-card{width:calc(100vw - 28px);padding:24px;border-radius:14px}
}

/* Real mobile hamburger menu */
.mobile-menu-btn{display:none;border:0;background:var(--green);color:#fff;width:40px;height:40px;border-radius:8px;font-size:22px;line-height:1}
.mobile-offcanvas{width:300px;max-width:86vw}.offcanvas-logo{width:46px;height:46px;object-fit:contain}.mobile-nav-list{display:flex;flex-direction:column;padding:8px}.mobile-nav-list a{display:flex;align-items:center;gap:10px;padding:13px 14px;margin:2px 0;border-radius:10px;text-decoration:none;color:#1f2937;font-weight:650}.mobile-nav-list a:hover,.mobile-nav-list a.active{background:var(--green-soft);color:var(--green-dark)}.mobile-nav-list .mobile-sell{background:var(--green);color:#fff;justify-content:center;margin-top:10px}.mobile-nav-list .mobile-sell:hover{background:var(--green-dark);color:#fff}
@media (max-width:768px){.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.main-nav{display:none!important}.topbar{flex-wrap:nowrap}.topbar-status{display:none}.topbar img{width:42px;height:42px}.topbar .brand{max-width:none;flex:1}}


/* UNA ASP.NET WebForms compatibility - giữ nguyên template gốc, chỉ bổ sung cho server controls */
.main-nav{position:relative;z-index:20}.nav-item-group{position:relative;height:48px}.nav-item-group>a{display:block}.nav-dropdown{display:none;position:absolute;top:48px;left:0;min-width:245px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 25px rgba(0,0,0,.12);border-radius:0 0 10px 10px;padding:8px;z-index:1000}.nav-item-group:hover .nav-dropdown{display:block}.nav-dropdown a{display:block;color:#1f2937!important;height:auto!important;padding:10px 12px!important;border-radius:8px;background:#fff!important;font-weight:600}.nav-dropdown a:hover,.nav-dropdown a.active{background:var(--green-soft)!important;color:var(--green-dark)!important}.hello-user{font-weight:600;color:#374151}.logout-link{color:#2563eb;text-decoration:none;font-weight:600}.content{width:100%}.page-title{font-size:24px;font-weight:800;margin:0 0 16px}.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:16px}.grid{width:100%;border-collapse:collapse;background:#fff}.grid th{background:#f2fbf5;color:#374151;font-weight:700;border-bottom:1px solid var(--border);padding:12px;white-space:nowrap}.grid td{border-bottom:1px solid var(--border);padding:12px;vertical-align:middle}.grid tr:hover{background:#fbfffc}.input,.aspNetDisabled{border:1px solid #d1d5db;border-radius:8px;padding:9px 10px;min-height:38px;background:#fff}.btn{border-radius:8px;padding:8px 13px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;font-weight:700}.btn-primary{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}.btn-primary:hover{background:var(--green-dark)!important}.btn-light{background:#fff!important;border-color:#d1d5db!important;color:#374151!important}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;margin-bottom:16px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}.stat-label{color:var(--muted);margin-bottom:8px}.stat-value{font-size:24px;font-weight:800}.hint{color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}.modal-mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:2000;align-items:center;justify-content:center;padding:18px}.modal-box{background:#fff;width:min(760px,96vw);border-radius:14px;padding:18px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin:-4px -4px 14px;padding:4px 4px 12px}.modal-head h2{font-size:20px;margin:0}.table-wrap-asp{overflow:auto}.login-card .input{width:100%;margin-bottom:10px}.text-danger{color:#dc2626}.alert-empty{padding:14px;border:1px dashed #cbd5e1;background:#f8fafc;border-radius:10px;color:#64748b}.mobile-nav-list .mobile-group-title{padding:13px 14px;color:#6b7280;font-weight:800;text-transform:uppercase;font-size:12px}.mobile-nav-list .mobile-child{padding-left:22px}@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}.nav-dropdown{position:static;box-shadow:none;border:0}.form-grid{grid-template-columns:1fr}}@media(max-width:600px){.stat-grid{grid-template-columns:1fr}.card{padding:12px}.page-title{font-size:20px}}

/* UNA layout làm lại theo mẫu Tôn An Phát / KiotViet */
html, body { font-family: Arial, Helvetica, sans-serif; color: #172b4d; }
body { background: #f4f6f8; }
.topbar { height: 48px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 16px; gap: 12px; }
.topbar img { height: 34px; width: 34px; object-fit: contain; }
.topbar .brand { color: #008f45; font-size: 20px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; }
.topbar-status { font-size: 13px; }
.main-nav { height: 48px; background: #00a651; display: flex; align-items: center; padding: 0 14px; gap: 0; box-shadow: 0 2px 5px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; }
.main-nav a, .nav-item-group > a { color: #fff; text-decoration: none; height: 48px; padding: 15px 18px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active, .nav-item-group:hover > a { background: #07843f; color: #fff; }
.nav-item-group { position: relative; height: 48px; }
.nav-dropdown { display: none; position: absolute; left: 0; top: 48px; min-width: 230px; background: #fff; border: 1px solid #dfe5ec; border-radius: 0 0 10px 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .16); padding: 7px 0; z-index: 200; }
.nav-item-group:hover .nav-dropdown { display: block; }
.nav-dropdown a { color: #172b4d !important; height: auto; padding: 10px 14px; font-weight: 600; display: block; }
.nav-dropdown a:hover { background: #e9f8ef; color: #07843f !important; }
.nav-sell { margin-left: auto; background: #fff !important; color: #07843f !important; border-radius: 8px; height: 34px !important; padding: 8px 18px !important; }
.content { padding: 0; min-height: calc(100vh - 96px); }
.una-page { display: flex; min-height: calc(100vh - 96px); }
.una-sidebar { width: 245px; background: #fff; border-right: 1px solid #e5e7eb; padding: 18px 14px; flex: 0 0 245px; }
.una-sidebar h4 { font-size: 20px; margin: 0 0 16px; font-weight: 700; }
.una-sidebar h6 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.una-sidebar .form-check { margin-bottom: 8px; }
.una-main { flex: 1; padding: 18px; min-width: 0; overflow: auto; }
.una-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.una-search { max-width: 520px; height: 38px; border-radius: 6px; border: 1px solid #d9dee7; padding: 7px 12px; }
.una-input, .input { height: 38px; border: 1px solid #d9dee7; border-radius: 6px; padding: 7px 10px; background: #fff; }
.una-panel, .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 0; }
.una-table-wrap { width: 100%; overflow-x: auto; }
.kv-table, .grid { width: 100%; border-collapse: collapse; background: #fff; margin: 0; }
.kv-table th, .grid th { background: #effaf3; color: #1f2937; font-weight: 800; border-bottom: 1px solid #e5e7eb; padding: 12px; white-space: nowrap; }
.kv-table td, .grid td { border-bottom: 1px solid #e5e7eb; padding: 12px; vertical-align: middle; }
.kv-table tr:hover, .grid tr:hover { background: #fbfffc; }
.grid a { color: #07843f; text-decoration: none; font-weight: 700; }
.status-pill { display: inline-block; background: #dcfce7; color: #07843f; border: 1px solid #a7f3d0; border-radius: 20px; padding: 5px 10px; font-weight: 700; font-size: 13px; }
.filter-pill { display: inline-block; background: #e9f8ef; color: #07843f; border: 1px solid #b8eccb; padding: 6px 10px; border-radius: 18px; margin: 3px; cursor: pointer; font-weight: 600; }
.filter-pill.active { background: #00a651; color: #fff; }
.btn-green, .btn-primary { background: #00a651 !important; border-color: #00a651 !important; color: #fff !important; font-weight: 700; }
.btn-green:hover, .btn-primary:hover { background: #07843f !important; border-color: #07843f !important; }
.btn-light, .btn-outline-secondary { border: 1px solid #cfd6df !important; background: #fff !important; color: #4b5563 !important; font-weight: 600; }
.una-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow: auto; }
.una-modal { width: min(1180px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.28); overflow: hidden; }
.una-modal-header { display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e5e7eb; }
.una-modal-title { font-size: 22px; font-weight: 800; margin: 0; }
.una-modal-body { padding: 18px 22px; }
.una-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e5e7eb; background: #fff; position: sticky; bottom: 0; }
.order-layout { display: grid; grid-template-columns: 1fr 330px; gap: 16px; }
.order-left { min-width: 0; }
.order-right { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; }
.product-add-row { display: grid; grid-template-columns: minmax(260px,1fr) 90px 110px 90px 120px; gap: 8px; align-items: end; margin-bottom: 12px; }
.total-box { background: #fff7d6; border-radius: 8px; padding: 12px; font-size: 18px; font-weight: 800; text-align: right; }
.empty-box { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4b5563; }
.empty-box .big-button { background: #0d6efd; color: #fff; border: 0; border-radius: 6px; padding: 12px 28px; font-size: 18px; font-weight: 800; margin-top: 18px; }
.mobile-group-title { padding: 12px 14px 5px; color: #07843f; font-weight: 800; font-size: 13px; text-transform: uppercase; }
.mobile-child { padding-left: 28px !important; }
@media(max-width: 992px) { .una-page { display: block; } .una-sidebar { width: auto; border-right: 0; border-bottom: 1px solid #e5e7eb; } .una-main { padding: 12px; } .order-layout { grid-template-columns: 1fr; } .product-add-row { grid-template-columns: 1fr 1fr; } }
@media(max-width: 768px) { .topbar-status { display: none; } .main-nav { display: none !important; } .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; } .topbar .brand { font-size: 16px; } .una-toolbar { flex-wrap: wrap; } .una-search { max-width: none; width: 100%; flex: 1 0 100%; } .una-toolbar .btn { flex: 1 1 auto; } .grid, .kv-table { min-width: 820px; } .una-sidebar { padding: 12px; } .una-modal-backdrop { padding: 0; align-items: stretch; } .una-modal { border-radius: 0; min-height: 100vh; } .product-add-row { grid-template-columns: 1fr; } }
@media(max-width: 480px) { .topbar { padding: 8px; } .topbar img { width: 38px; height: 38px; } .una-main { padding: 8px; } .una-modal-body { padding: 12px; } .una-modal-header, .una-modal-footer { padding-left: 12px; padding-right: 12px; } }

/* Fix popup ASP.NET WebForms */
.modal-mask.show,
body.una-modal-open .modal-mask.show {
    display: flex !important;
}
.una-modal-open {
    overflow: hidden;
}


/* Fix đóng popup: khi JS gỡ class show thì phải ẩn tuyệt đối */
.modal-mask:not(.show) {
    display: none !important;
}
.modal-mask.show {
    display: flex !important;
}
.modal-head .btn,
.una-modal-header .btn {
    min-width: 42px;
}

/* =========================================================
   FIX FONT TIẾNG VIỆT TOÀN HỆ THỐNG - 19/06/2026
   Dùng font quốc tế Nunito: chữ tròn hơn, đậm hơn, không bị mảnh/ảo.
   Đặt cuối file để ghi đè Bootstrap, style cũ và các trang con.
   ========================================================= */
:root {
    --una-font-main: "Nunito", "Segoe UI", Arial, Helvetica, sans-serif;
    --una-text-strong: #0f172a;
    --una-text-normal: #1e293b;
}

html,
body,
form,
button,
input,
select,
textarea,
label,
table,
th,
td,
a,
span,
div,
p,
small,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.select2-container,
.select2-container * {
    font-family: var(--una-font-main) !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
}

body {
    color: var(--una-text-normal) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.una-page-title,
.card-title,
.panel-title,
.una-modal-title,
.login-title,
.metric .value,
.stat-value,
.total-box,
.brand,
.topbar .brand {
    font-family: var(--una-font-main) !important;
    color: var(--una-text-strong) !important;
    font-weight: 900 !important;
    letter-spacing: 0.1px;
    line-height: 1.2;
}

h1,
.page-title,
.una-page-title {
    font-size: 28px;
}

h2,
.card-title,
.panel-title {
    font-size: 24px;
}

h3,
.una-modal-title,
.login-title {
    font-size: 22px;
}

label,
.form-label,
.fw-bold,
.filters h6,
.una-sidebar h4,
.una-sidebar h6,
.sidebar h4,
.sidebar h6,
.stat-label,
.metric .label,
.hello-user {
    font-weight: 800 !important;
    color: var(--una-text-strong) !important;
}

.grid th,
.kv-table th,
.table th,
.bill-table th,
.invoice th {
    font-weight: 900 !important;
    letter-spacing: 0.05px;
}

.grid td,
.kv-table td,
.table td,
.form-control,
.form-select,
input,
select,
textarea,
.select2-selection__rendered,
.select2-results__option {
    font-weight: 600 !important;
    color: var(--una-text-normal) !important;
}

.btn,
button,
input[type="submit"],
input[type="button"],
.main-nav a,
.mobile-nav-list a,
.nav-dropdown a,
.status-pill,
.badge,
.filter-pill,
.pill {
    font-weight: 800 !important;
}

.text-muted,
.hint,
small {
    font-weight: 600 !important;
    color: #64748b !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    font-family: var(--una-font-main) !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}

/* Các tiêu đề lớn màu đen trong dashboard/báo cáo nhìn tròn và chắc hơn */
.una-panel h1,
.una-panel h2,
.una-panel h3,
.card h1,
.card h2,
.card h3,
.panel h1,
.panel h2,
.panel h3,
.chart-title,
.report-title {
    color: #0f172a !important;
    font-weight: 900 !important;
    font-family: var(--una-font-main) !important;
}


/* =========================================================
   FONT TOÀN PROJECT + BẢN IN KIỂU MACBOOK - 01/07/2026
   Đặt cuối file và dùng !important để ghi đè CSS từng trang,
   kể cả các style cũ đang khai báo font nhỏ 12px/13px.
   ========================================================= */
:root {
    --tap-font-mac: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tap-font-size-web: 15.5px;
    --tap-font-size-table: 15px;
    --tap-font-size-small: 14px;
    --tap-font-size-print: 13px;
    --tap-font-size-print-table: 12.8px;
}

html,
body,
form,
main,
section,
article,
aside,
nav,
div,
span,
p,
a,
label,
small,
strong,
b,
i,
ul,
ol,
li,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.input,
.select,
.dropdown-menu,
.modal-box,
.modal-mask,
.offcanvas,
.card,
.panel,
.grid,
.kv-table,
.table,
.invoice,
.bill-table {
    font-family: var(--tap-font-mac) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

html,
body,
form {
    font-size: var(--tap-font-size-web) !important;
    line-height: 1.45 !important;
}

body,
p,
label,
div,
span,
a,
li,
.form-control,
.form-select,
.input,
.select,
input,
select,
textarea,
.btn,
button {
    font-size: var(--tap-font-size-web) !important;
}

small,
.small,
.text-muted,
.hint,
.topbar-status,
.status-pill,
.badge,
.pill,
.filter-pill,
.pagination,
.page-link {
    font-size: var(--tap-font-size-small) !important;
}

.grid,
.kv-table,
.table,
.grid th,
.grid td,
.kv-table th,
.kv-table td,
.table th,
.table td,
.aspNetDisabled,
select option {
    font-size: var(--tap-font-size-table) !important;
    line-height: 1.42 !important;
}

th,
.grid th,
.kv-table th,
.table th,
.fw-bold,
label,
.btn,
button,
input[type="submit"],
input[type="button"],
.main-nav a,
.nav-dropdown a,
.mobile-nav-list a {
    font-weight: 700 !important;
}

h1,
.page-title,
.una-page-title,
.invoice h1,
.report-title {
    font-family: var(--tap-font-mac) !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

h2,
.card-title,
.panel-title {
    font-family: var(--tap-font-mac) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

h3,
.login-title,
.una-modal-title,
.modal-head h2 {
    font-family: var(--tap-font-mac) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.topbar .brand,
.brand {
    font-family: var(--tap-font-mac) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

.main-nav a,
.nav-dropdown a,
.mobile-nav-list a {
    font-size: 15px !important;
}

input,
select,
textarea,
.form-control,
.form-select,
.input,
.select {
    min-height: 40px !important;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    min-height: 38px !important;
}

@media (max-width: 768px) {
    html,
    body,
    form {
        font-size: 15px !important;
    }

    body,
    p,
    label,
    div,
    span,
    a,
    li,
    .form-control,
    .form-select,
    .input,
    .select,
    input,
    select,
    textarea,
    .btn,
    button {
        font-size: 15px !important;
    }

    .grid,
    .kv-table,
    .table,
    .grid th,
    .grid td,
    .kv-table th,
    .kv-table td,
    .table th,
    .table td {
        font-size: 14.5px !important;
    }
}

@media print {
    @page {
        size: A4;
        margin: 8mm;
    }

    html,
    body,
    form,
    div,
    span,
    p,
    a,
    label,
    small,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    .invoice,
    .bill-table,
    .grid,
    .kv-table,
    .table,
    .page,
    .print-page,
    .print-area {
        font-family: var(--tap-font-mac) !important;
        font-size: var(--tap-font-size-print) !important;
        line-height: 1.38 !important;
        -webkit-font-smoothing: antialiased !important;
        text-rendering: optimizeLegibility !important;
    }

    th,
    td,
    .invoice th,
    .invoice td,
    .bill-table th,
    .bill-table td,
    .grid th,
    .grid td,
    .kv-table th,
    .kv-table td,
    .table th,
    .table td {
        font-size: var(--tap-font-size-print-table) !important;
        line-height: 1.34 !important;
    }

    h1,
    .invoice h1,
    .document-title h1,
    .report-title {
        font-family: var(--tap-font-mac) !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.22 !important;
    }

    h2,
    h3,
    .company-name,
    .document-title .code,
    .total-value,
    .grand-total {
        font-family: var(--tap-font-mac) !important;
        font-weight: 800 !important;
    }
}


/* =========================================================
   FIX MENU CON + GRID KHÔNG TÔ ĐẬM TOÀN BỘ - 01/07/2026
   Menu con và dữ liệu grid để nét chữ thường; chỉ tô đậm các cột
   cần nhấn mạnh như Quy cách, Ghi chú, Số tiền/Thành tiền/Đơn giá.
   ========================================================= */
.nav-dropdown a,
.nav-dropdown a span,
.nav-dropdown .dropdown-item,
.mobile-nav-list .mobile-child,
.mobile-nav-list .mobile-child a,
.mobile-nav-list .mobile-child span,
.mobile-nav-list a.mobile-child,
.mobile-nav-list .mobile-group-title + a {
    font-weight: 500 !important;
}

.nav-dropdown a:hover,
.nav-dropdown a.active,
.mobile-nav-list .mobile-child a:hover,
.mobile-nav-list .mobile-child a.active {
    font-weight: 500 !important;
}

.grid td,
.kv-table td,
.table td,
.table-wrap table td,
.table-wrap-asp table td,
.una-table-wrap table td,
.grid td a,
.kv-table td a,
.table td a,
.grid td span,
.kv-table td span,
.table td span,
.grid td label,
.kv-table td label,
.table td label,
.grid td .fw-bold,
.kv-table td .fw-bold,
.table td .fw-bold,
.grid td strong,
.kv-table td strong,
.table td strong,
.grid td b,
.kv-table td b,
.table td b {
    font-weight: 500 !important;
}

.grid th,
.kv-table th,
.table th,
.table-wrap table th,
.table-wrap-asp table th,
.una-table-wrap table th {
    font-weight: 650 !important;
}

.grid .money,
.grid .amount,
.grid .price,
.grid .total,
.grid .so-tien,
.grid .sotien,
.grid .thanh-tien,
.grid .thanhtien,
.grid .tong-tien,
.grid .tongtien,
.grid .don-gia,
.grid .dongia,
.grid .quy-cach,
.grid .quycach,
.grid .ghi-chu,
.grid .ghichu,
.grid .note,
.grid .spec,
.kv-table .money,
.kv-table .amount,
.kv-table .price,
.kv-table .total,
.kv-table .so-tien,
.kv-table .sotien,
.kv-table .thanh-tien,
.kv-table .thanhtien,
.kv-table .tong-tien,
.kv-table .tongtien,
.kv-table .don-gia,
.kv-table .dongia,
.kv-table .quy-cach,
.kv-table .quycach,
.kv-table .ghi-chu,
.kv-table .ghichu,
.kv-table .note,
.kv-table .spec,
.table .money,
.table .amount,
.table .price,
.table .total,
.table .so-tien,
.table .sotien,
.table .thanh-tien,
.table .thanhtien,
.table .tong-tien,
.table .tongtien,
.table .don-gia,
.table .dongia,
.table .quy-cach,
.table .quycach,
.table .ghi-chu,
.table .ghichu,
.table .note,
.table .spec,
.tap-grid-bold-col,
.tap-grid-bold-col a,
.tap-grid-bold-col span,
.tap-grid-bold-col label,
.tap-grid-bold-col strong,
.tap-grid-bold-col b {
    font-weight: 700 !important;
}

@media print {
    .grid td,
    .kv-table td,
    .table td,
    .invoice td,
    .bill-table td,
    .print-area td,
    .print-page td,
    .grid td a,
    .kv-table td a,
    .table td a,
    .invoice td a,
    .bill-table td a,
    .grid td span,
    .kv-table td span,
    .table td span,
    .invoice td span,
    .bill-table td span,
    .grid td strong,
    .kv-table td strong,
    .table td strong,
    .invoice td strong,
    .bill-table td strong,
    .grid td b,
    .kv-table td b,
    .table td b,
    .invoice td b,
    .bill-table td b {
        font-weight: 500 !important;
    }

    .grid th,
    .kv-table th,
    .table th,
    .invoice th,
    .bill-table th,
    .print-area th,
    .print-page th {
        font-weight: 650 !important;
    }

    .money,
    .amount,
    .price,
    .total,
    .so-tien,
    .sotien,
    .thanh-tien,
    .thanhtien,
    .tong-tien,
    .tongtien,
    .don-gia,
    .dongia,
    .quy-cach,
    .quycach,
    .ghi-chu,
    .ghichu,
    .note,
    .spec,
    .tap-grid-bold-col,
    .tap-grid-bold-col a,
    .tap-grid-bold-col span,
    .tap-grid-bold-col strong,
    .tap-grid-bold-col b {
        font-weight: 700 !important;
    }
}

/* An Lộc Phát - cập nhật 05/07/2026 */
.topbar img.brand-logo,
.topbar > img,
.login-card .brand-logo,
.offcanvas-logo {
    display: none !important;
}
.status-return {
    background: #cffafe !important;
    color: #0e7490 !important;
    border: 1px solid #67e8f9 !important;
}
.dashboard-alp-card {
    border: 1px solid #edf2f7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}