:root {
  --navy: #19324c; --navy-dark: #10253a; --blue: #2962ff; --blue-soft: #eaf0ff;
  --cream: #f6f7fb; --ink: #172033; --muted: #687385; --border: #e5e9f1;
  --success: #16876a; --danger: #d9435e; --warning: #c98012;
}
* { box-sizing: border-box; }
body { color: var(--ink); background: var(--cream); font-family: Inter, "Segoe UI", sans-serif; }
.app-body { min-height: 100vh; }
.app-shell { min-height: 100vh; display: flex; }
/* Menu dài hơn màn hình phải cuộn được, nếu không các mục cuối bị tràn khỏi khung nhìn. */
.sidebar { width: 255px; height: 100vh; position: fixed; top: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--navy-dark); color: #d7e4ee; padding: 20px 13px; z-index: 20; transition: transform .2s ease; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.brand { display: flex; gap: 10px; align-items: center; padding: 5px 9px 27px; text-decoration: none; color: #fff; }
.brand-mark, .login-brand > span, .portal-brand > span { width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #ffb703; color: var(--navy-dark); font-weight: 800; }
.brand strong { font-size: 15px; letter-spacing: 1.2px; display: block; }.brand small { color: #8fa6ba; font-size: 9px; display: block; letter-spacing: .7px; }
.sidebar .nav-link { color: #c5d4e0; border-radius: 8px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-size: 14px; margin: 2px 0; }.sidebar .nav-link:hover { color: white; background: rgba(255,255,255,.1); }.sidebar .nav-link span { width: 16px; text-align: center; }
.nav-section { margin: 22px 12px 7px; color: #6e89a1; font-size: 10px; letter-spacing: 1px; font-weight: 700; }.sidebar-footer { margin-top: auto; padding: 25px 11px 0; color: #7991a6; font-size: 11px; }
.main-content { min-width: 0; flex: 1; margin-left: 255px; }.topbar { height: 68px; border-bottom: 1px solid var(--border); background: white; display: flex; align-items: center; padding: 0 30px; gap: 16px; position: sticky; top: 0; z-index: 10; }.topbar-title { font-weight: 700; font-size: 17px; }.user-menu { margin-left: auto; display: flex; align-items: center; color: var(--muted); font-size: 14px; }.user-avatar { width: 31px; height: 31px; border-radius: 50%; color: white; background: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-right: 8px; }.sidebar-toggle { border: 0; background: transparent; font-size: 21px; display: none; }
.page-content { padding: 30px; max-width: 1500px; margin: auto; }.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 25px; }.page-heading h1 { font-size: 25px; font-weight: 750; margin: 0 0 5px; }.page-heading p { color: var(--muted); margin: 0; font-size: 14px; }.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.content-card { background: white; border: 1px solid var(--border); border-radius: 13px; padding: 20px; box-shadow: 0 1px 2px rgba(20,35,55,.025); }.card-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 17px; }.card-heading h2, .content-card h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }.card-heading p { color: var(--muted); margin: 0; font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }.stat-card { border-radius: 13px; padding: 18px; background: white; border: 1px solid var(--border); display: flex; flex-direction: column; min-height: 132px; }.stat-card span { font-size: 13px; color: var(--muted); }.stat-card strong { font-size: clamp(20px, 2vw, 28px); padding: 11px 0 8px; letter-spacing: -.8px; }.stat-card small { color: var(--muted); font-size: 11px; }.stat-primary { border-top: 3px solid var(--blue); }.stat-primary strong { color: var(--blue); }.stat-green { border-top: 3px solid var(--success); }.stat-green strong { color: var(--success); }.stat-amber { border-top: 3px solid #f0a229; }.stat-amber strong { color: #ce7c00; }.stat-red { border-top: 3px solid var(--danger); }.stat-red strong { color: var(--danger); }
.filter-bar, .filter-grid { display: flex; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 3px; align-items: center; }.filter-bar .form-control { max-width: 360px; }.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }.app-table thead th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .35px; padding: 13px 12px; white-space: nowrap; border-bottom-width: 1px; }.app-table tbody td { padding: 13px 12px; font-size: 14px; }.table-link { color: var(--blue); font-weight: 650; text-decoration: none; }.table-link:hover { text-decoration: underline; }.badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-info { padding: 5px 8px; border-radius: 20px; font-size: 11px; font-weight: 650; display: inline-block; }.badge-soft-success { color: #08785c; background: #e3f7ef; }.badge-soft-danger { color: #b62e48; background: #ffe8ed; }.badge-soft-warning { color: #9d6407; background: #fff2d8; }.badge-soft-info { color: #265ac7; background: #e9f0ff; }
.empty-state { text-align: center; padding: 30px; color: var(--muted); }.pagination-wrap { padding: 16px 0 0; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }.form-card { max-width: 900px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }.detail-list > div, .invoice-total > div, .portal-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--border); }.detail-list span, .invoice-total span { color: var(--muted); }.invoice-total { max-width: 350px; margin: 13px 0 0 auto; }.invoice-total .final { font-size: 17px; border-bottom: 0; }.timeline { list-style: none; padding: 0; margin: 0; }.timeline li { padding: 10px 0 10px 18px; border-left: 2px solid var(--blue); display: flex; flex-direction: column; gap: 3px; }.timeline span { color: var(--muted); font-size: 12px; }.quick-actions { display: grid; gap: 8px; }.quick-actions a { display: flex; gap: 13px; align-items: center; color: var(--ink); text-decoration: none; padding: 10px; border-radius: 9px; }.quick-actions a:hover { background: var(--blue-soft); }.quick-actions a > span { font-size: 21px; color: var(--blue); }.quick-actions strong, .quick-actions small { display: block; }.quick-actions small { color: var(--muted); font-size: 11px; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top left, #e7eeff, #f7f8fc 52%); }.login-card { width: min(440px, 100%); background: white; border: 1px solid var(--border); border-radius: 18px; padding: 36px; box-shadow: 0 14px 50px rgba(24,49,81,.12); }.login-brand { text-align: center; margin-bottom: 28px; }.login-brand > span { margin: 0 auto 10px; }.login-brand h1 { font-size: 18px; letter-spacing: 1px; margin: 0; color: var(--navy); }.login-brand p { color: var(--muted); font-size: 12px; margin: 4px 0; }.login-card h2 { font-weight: 720; font-size: 23px; }
.portal-body { padding-bottom: 88px; background: #f7f8fc; }.portal-header { height: 60px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 max(18px, calc((100vw - 720px) / 2)); }.portal-brand { color: white; text-decoration: none; font-size: 13px; font-weight: 750; display: flex; align-items: center; gap: 8px; }.portal-brand > span { width: 29px; height: 29px; border-radius: 7px; font-size: 11px; }.portal-content { max-width: 720px; margin: auto; padding: 18px; }.portal-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(720px, 100%); min-height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(23,32,51,.08); backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); }.portal-nav a { min-width: 0; color: var(--muted); text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 8px 3px; font-size: 19px; }.portal-nav a:hover, .portal-nav a:focus { color: var(--blue); background: var(--blue-soft); outline: none; }.portal-nav a span { font-size: 10px; font-weight: 650; white-space: nowrap; }.portal-hero { padding: 24px 20px; color: white; background: linear-gradient(135deg,#1b4168,#2962ff); border-radius: 16px; display: flex; justify-content: space-between; gap: 15px; }.portal-hero span, .portal-hero p { opacity: .75; font-size: 13px; }.portal-hero h1 { font-size: 23px; margin: 3px 0; }.portal-debt { text-align: right; align-self: end; }.portal-debt small, .portal-debt strong { display: block; }.portal-debt strong { font-size: 18px; }.portal-section { margin-top: 25px; }.portal-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.portal-section-title h1, .portal-section-title h2 { margin: 0; font-size: 18px; font-weight: 730; }.portal-section-title span, .portal-section-title a { color: var(--muted); font-size: 12px; text-decoration: none; }.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.product-card { background: white; border: 1px solid var(--border); border-radius: 13px; padding: 13px; }.product-visual { width: 37px; height: 37px; background: #fff0d3; color: #a66a03; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-bottom: 11px; }.product-card h3 { font-size: 14px; margin: 0 0 3px; }.product-card p { color: var(--muted); font-size: 11px; min-height: 20px; margin: 0 0 6px; }.product-card strong { color: var(--blue); font-size: 12px; }.portal-list { display: grid; gap: 8px; }.portal-list > a { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 13px; text-decoration: none; color: var(--ink); }.portal-list strong, .portal-list span { display: block; }.portal-list span { color: var(--muted); font-size: 11px; margin-top: 3px; }.back-link { color: var(--blue); text-decoration: none; display: inline-block; margin-bottom: 14px; }.portal-detail-head { display: flex; justify-content: space-between; align-items: start; }.portal-detail-head h1 { font-size: 22px; margin: 0 0 4px; }.portal-detail-head p { color: var(--muted); font-size: 12px; }.portal-info { margin: 15px 0; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }.portal-info div { padding: 7px 0; }.portal-info span, .portal-info strong { display: block; }.portal-info span { color: var(--muted); font-size: 11px; }.portal-info strong { font-size: 13px; }.portal-lines { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }.portal-lines > div { padding: 13px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }.portal-lines > div:last-child { border: 0; }.portal-lines strong, .portal-lines span { display: block; }.portal-lines span { color: var(--muted); font-size: 12px; }.portal-summary { margin-top: 15px; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; }.portal-summary .final { font-size: 17px; border: 0; }
@media (max-width: 991px) { .sidebar { transform: translateX(-100%); }.sidebar.open { transform: translateX(0); }.main-content { margin-left: 0; }.sidebar-toggle { display: block; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.filter-grid { grid-template-columns: repeat(2, 1fr); }.filter-grid .btn { grid-column: span 2; } }
@media (max-width: 576px) { .page-content { padding: 19px 14px; }.topbar { padding: 0 14px; }.page-heading { flex-direction: column; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { min-height: 110px; padding: 13px; }.stat-card strong { font-size: 18px; }.content-card { padding: 14px; }.filter-bar { flex-wrap: wrap; }.filter-bar .form-control { max-width: 100%; width: 100%; }.filter-grid { grid-template-columns: 1fr; }.filter-grid .btn { grid-column: auto; }.pagination-wrap { flex-direction: column; gap: 8px; }.product-grid { grid-template-columns: 1fr 1fr; }.login-card { padding: 27px 22px; } }

/* ===== Biểu đồ trang Tổng quan =====
   Vẽ bằng SVG/CSS thuần, không dùng thư viện ngoài để trang nhẹ và chạy được khi không có mạng.
   Bảng màu đã kiểm định độ tương phản cho người mù màu (xem chú thích ở view). */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.chart-grid .content-card { display: flex; flex-direction: column; }
.chart-wide { grid-column: 1 / -1; }
.chart-body { flex: 1; min-height: 0; }
.chart-note { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.chart-empty { text-align: center; color: var(--muted); padding: 34px 10px; font-size: 13px; }

/* Đường doanh thu */
.line-chart { width: 100%; height: 230px; display: block; overflow: visible; }
.line-chart .grid-line { stroke: var(--border); stroke-width: 1; }
.line-chart .axis-text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.line-chart .series-area { fill: url(#luoiDoanhThu); }
.line-chart .series-path { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .series-dot { fill: #2a78d6; stroke: white; stroke-width: 2; }
.line-chart .hover-band { fill: transparent; cursor: pointer; }
.line-chart .hover-band:hover + .hover-mark, .line-chart .hover-band:focus + .hover-mark { opacity: 1; }
.line-chart .hover-mark { opacity: 0; pointer-events: none; }
.line-chart .hover-mark line { stroke: #2a78d6; stroke-width: 1; stroke-opacity: .45; }

/* Cột ngang: sản phẩm bán chạy, công nợ */
.bar-rows { display: grid; gap: 13px; }
.bar-row-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 5px; }
.bar-row-label strong { font-weight: 620; }
.bar-row-label span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { height: 9px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: #2a78d6; display: block; }
.bar-fill.bar-warning { background: #eb6834; }

/* Vòng tròn trạng thái đơn hàng */
.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.donut-chart { width: 148px; height: 148px; flex: none; }
.donut-center-value { font-size: 25px; font-weight: 730; fill: var(--ink); }
.donut-center-label { font-size: 10px; fill: var(--muted); }
.donut-legend { flex: 1; min-width: 165px; display: grid; gap: 8px; }
.donut-legend > div { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.donut-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-legend span { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Bảng số liệu kèm theo biểu đồ (cho người đọc bằng trình đọc màn hình / in ra giấy) */
.chart-table-toggle { background: none; border: 0; color: var(--blue); font-size: 12px; padding: 0; margin-top: 12px; cursor: pointer; }
.chart-table-toggle:hover { text-decoration: underline; }
.chart-table { width: 100%; font-size: 12px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 5px 7px; border-bottom: 1px solid var(--border); text-align: left; }
.chart-table td:last-child, .chart-table th:last-child { text-align: right; }

/* ===== Giao diện đại lý (Portal) — dùng chung khung sidebar với trang quản trị ===== */
.portal-shell .sidebar { background: var(--navy-dark); }
.portal-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.portal-hero-wide { padding: 26px 28px; color: white; background: linear-gradient(135deg, #1b4168, #2962ff); border-radius: 15px; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.portal-hero-wide h1 { font-size: 26px; margin: 4px 0 0; font-weight: 740; }
.portal-hero-wide .hero-label { opacity: .8; font-size: 13px; }
.portal-hero-wide p { opacity: .8; font-size: 13px; margin: 6px 0 0; }
.portal-hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.portal-hero-stats > div small { display: block; opacity: .8; font-size: 12px; }
.portal-hero-stats > div strong { display: block; font-size: 21px; margin-top: 3px; }
.portal-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.portal-product-grid .product-card { display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease; }
.portal-product-grid .product-card:hover { border-color: #bcd0f5; box-shadow: 0 4px 16px rgba(41,98,255,.09); }
.portal-product-grid .product-card h3 { font-size: 15px; }
.portal-product-grid .product-card p { font-size: 12px; }
.portal-product-grid .product-card strong { font-size: 15px; }

@media (max-width: 991px) {
  .chart-grid { grid-template-columns: 1fr; }
  .portal-hero-wide { padding: 20px; }
  .portal-hero-wide h1 { font-size: 21px; }
  .portal-hero-stats { gap: 20px; }
}
@media (max-width: 576px) {
  .line-chart { height: 190px; }
  .donut-wrap { justify-content: center; }
  .portal-product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .portal-hero-stats > div strong { font-size: 18px; }
}

/* ==========================================================================
   GIAO DIỆN ĐIỆN THOẠI
   Chủ tiệm làm việc ngoài đường nhiều nên các màn hình chính phải dùng được
   bằng một tay, không phải cuộn ngang.

   Cách làm: bảng có class .bang-the sẽ tự xếp lại thành từng thẻ khi màn hình
   hẹp. Mỗi ô lấy tên cột từ thuộc tính data-nhan để hiện nhãn bên trái.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- Bảng biến thành thẻ --- */
  .bang-the thead { display: none; }
  .bang-the, .bang-the tbody, .bang-the tr, .bang-the td { display: block; width: 100%; }

  .bang-the tr {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(20,35,55,.04);
  }

  .bang-the td {
    border: 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
    font-size: 14px;
  }

  /* Nhãn cột hiện bên trái từng dòng trong thẻ */
  .bang-the td::before {
    content: attr(data-nhan);
    flex: none;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    font-weight: 600;
  }

  /* Ô không có nhãn (nút thao tác) thì chiếm cả dòng */
  .bang-the td:not([data-nhan]) { justify-content: flex-end; }
  .bang-the td[data-nhan=""]::before { content: none; }

  /* Ô đầu tiên làm tiêu đề thẻ: chữ to, không nhãn, kẻ ngăn bên dưới */
  .bang-the td.o-tieu-de {
    display: block;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .bang-the td.o-tieu-de::before { content: none; }

  /* Hàng nút thao tác: nút to, dàn đều, dễ bấm bằng ngón cái */
  .bang-the td.o-thao-tac {
    display: flex;
    gap: 8px;
    padding-top: 11px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
  .bang-the td.o-thao-tac::before { content: none; }
  .bang-the td.o-thao-tac .btn,
  .bang-the td.o-thao-tac form { flex: 1; }
  .bang-the td.o-thao-tac .btn { width: 100%; padding: 9px 10px; }

  .bang-the td.o-an-mobile { display: none; }

  /* Dòng "chưa có dữ liệu" giữ nguyên dạng khối */
  .bang-the td[colspan] { display: block; text-align: center; }
  .bang-the td[colspan]::before { content: none; }

  /* --- Vùng bấm đủ lớn cho ngón tay --- */
  .btn { min-height: 42px; padding: 9px 14px; }
  .btn-sm { min-height: 38px; padding: 7px 12px; font-size: 13px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; }  /* 16px: iOS không tự phóng to */
  .table td .btn-sm { min-height: 36px; }

  /* --- Bố cục chung --- */
  .page-content { padding: 14px 12px; }
  .page-heading { gap: 10px; margin-bottom: 16px; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 13px; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .heading-actions .btn-group { width: 100%; display: flex; }
  .heading-actions .btn-group .btn { flex: 1; }

  .content-card { padding: 14px; border-radius: 12px; }
  .card-heading { flex-direction: column; gap: 10px; }
  .card-heading .btn { width: 100%; }

  .form-actions { flex-direction: column-reverse; gap: 10px; }
  .form-actions .btn { width: 100%; }

  .detail-list > div, .invoice-total > div { font-size: 14px; }
  .invoice-total { max-width: 100%; }

  /* Thanh lọc: mỗi ô một dòng, nút tìm chiếm hết chiều ngang */
  .filter-bar, .filter-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .filter-bar .btn, .filter-grid .btn { width: 100%; }

  /* Thanh trên cùng gọn lại, chừa chỗ cho nút menu */
  .topbar { height: 58px; padding: 0 12px; gap: 10px; }
  .topbar-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu .user-avatar { margin-right: 0; }
  .portal-topbar-actions { gap: 6px; }

  /* Sidebar rộng gần hết màn hình khi mở, có lớp phủ để bấm ra ngoài đóng lại */
  .sidebar { width: min(280px, 84vw); }
  .sidebar .nav-link { padding: 12px 14px; font-size: 15px; }

  /* --- Trang tổng quan --- */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 96px; padding: 12px; }
  .stat-card span { font-size: 12px; }
  .stat-card strong { font-size: 17px; padding: 7px 0 5px; letter-spacing: -.4px; }
  .stat-card small { font-size: 10px; }

  .chart-grid { grid-template-columns: 1fr; gap: 12px; }
  .line-chart { height: 175px; }
  .donut-wrap { flex-direction: column; align-items: center; gap: 14px; }
  .donut-legend { width: 100%; min-width: 0; }
  .bar-row-label { font-size: 13px; }

  /* --- Cổng đại lý --- */
  .portal-hero-wide { padding: 16px; border-radius: 12px; }
  .portal-hero-wide h1 { font-size: 19px; }
  .portal-hero-stats { gap: 14px; width: 100%; }
  .portal-hero-stats > div { flex: 1; min-width: 92px; }
  .portal-hero-stats > div strong { font-size: 16px; }
  .portal-product-grid { grid-template-columns: 1fr 1fr; gap: 9px; }

  .quick-actions a { padding: 12px 10px; }
}

/* Màn hình rất hẹp (dưới 400px) */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .portal-product-grid { grid-template-columns: 1fr; }
  .bang-the td { font-size: 13px; }
}

/* Nút chỉ hiện trên điện thoại (trên máy tính đã có link ở cột đầu). */
.chi-tren-dt { display: none; }
@media (max-width: 767px) { .chi-tren-dt { display: inline-flex; } }

/* --- Bảng nhập liệu (lập hóa đơn, nhập bánh, nhập nguyên liệu) trên điện thoại
   Mỗi dòng hàng thành một thẻ có ô chọn và ô nhập xếp dọc, ngón tay bấm dễ. --- */
@media (max-width: 767px) {
  .bang-nhap thead { display: none; }
  .bang-nhap, .bang-nhap tbody, .bang-nhap tr, .bang-nhap td { display: block; width: 100%; }

  .bang-nhap tr {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
  }

  .bang-nhap td { border: 0; padding: 4px 0; }

  /* Ô chọn sản phẩm chiếm cả chiều ngang, chữ to dễ đọc */
  .bang-nhap td.o-chon .form-select { font-size: 15px; }

  /* Giá và tồn kho hiện cùng một dòng, có nhãn */
  .bang-nhap td.o-so,
  .bang-nhap td.o-tien {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .bang-nhap td.o-so::before,
  .bang-nhap td.o-tien::before {
    content: attr(data-nhan);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  .bang-nhap td.o-so .form-control { max-width: 130px; text-align: right; }

  /* Nút bỏ dòng thành nút chữ, không phải dấu ✕ bé tí */
  .bang-nhap td.o-xoa-cell { padding-top: 8px; }
  .bang-nhap td.o-xoa-cell .btn { width: 100%; }
}

/* Lớp phủ khi mở menu trên điện thoại — bấm ra ngoài để đóng, tránh phải
   với tay lên nút ☰ ở góc trên. */
.lop-phu-menu {
  position: fixed;
  inset: 0;
  background: rgba(16, 37, 58, .45);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.lop-phu-menu.hien { opacity: 1; pointer-events: auto; }
@media (min-width: 992px) { .lop-phu-menu { display: none; } }

/* Hàng mở rộng (form điều chỉnh kho) nằm trong bảng thẻ: giữ dạng khối bình
   thường, không kẻ khung thẻ riêng để nó dính liền với thẻ phía trên. */
@media (max-width: 767px) {
  .bang-the tr.hang-mo-rong {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: -6px 0 10px;
  }
  .bang-the tr.hang-mo-rong td { padding: 0; }
  .bang-the tr.hang-mo-rong td::before { content: none; }
}

/* ===== Thanh điều hướng dưới đáy cho cổng đại lý trên điện thoại =====
   Đại lý đặt hàng bằng một tay khi đang đứng bán: các mục hay dùng nhất phải
   nằm trong tầm ngón cái, không phải mở menu ☰ ở góc trên. Chỉ hiện ở khổ
   điện thoại; từ 992px trở lên sidebar đã luôn hiện nên thanh này bị ẩn. */
.portal-bottom-nav { display: none; }

@media (max-width: 991px) {
  .portal-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    background: white;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(16, 37, 58, .07);
    /* Chừa chỗ cho vạch home của iPhone, tránh nút bị vạch che. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .portal-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 56px: đủ lớn để bấm trúng bằng ngón tay. */
    min-height: 56px;
    padding: 7px 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
  }
  .portal-bottom-nav a span[aria-hidden] { font-size: 17px; line-height: 1; }
  .portal-bottom-nav a.dang-o { color: var(--blue); background: var(--blue-soft); }

  /* Chừa chỗ để thanh dưới không che nội dung cuối trang. */
  .portal-shell .page-content { padding-bottom: 86px; }
}