/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* HEADER */
#htx-header {
    width: 100%;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 12px 20px;
    display: flex;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
}

#htx-logo {
    height: 70px;
    margin-right: 15px;
}

.header-text {
    line-height: 22px;
}

.htx-title-red {
    color: #d40000;
    font-size: 26px;
    font-weight: 700;
}

.htx-sub-blue {
    color: #0070c7;
    font-size: 15px;
}

/* MENU */
#htx-menu {
    width: 100%;
    background: white;
    padding: 12px 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-light);
}

.menu-btn {
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: 0.2s;
}

.menu-btn.orange {
    background: #ff9800;
    color: white;
}

.menu-btn:hover {
    filter: brightness(1.05);
}

.primary { background: var(--primary); }
.secondary { background: var(--primary-light); }
.danger { background: var(--danger); }
.success { background: var(--success); }
.gray { background: var(--gray); }
.warning { background: var(--warning); color: black; }
.yellow { background: var(--warning); color: black; }

/* SECTIONS */
.htx-section {
    display: none;
    padding: 20px;
}

.htx-section.active {
    display: block;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* TABLE WRAPPER */
.table-wrapper {
    background: white;
    border-radius: var(--radius-large);
    padding: 15px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    overflow-x: auto;
}

/* TOP STATS */
.stats-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.stat-card {
    background: white;
    padding: 18px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    min-width: 250px;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 14px;
    color: var(--text-gray);
    margin-top: 4px;
}

/* STAT TITLES */
.stat-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 10px;
}

/* BUTTONS */
.action-btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
    font-weight: 600;
    cursor: pointer;
    color: white;
    margin-top: 10px;
    box-shadow: var(--shadow);
}

.action-btn.primary { background: var(--primary); }

/* POPUP SMALL (User + Log + Search) */
.popup-small {
    width: 400px;
    background: white;
    border-radius: var(--radius-large);
    padding: 20px;
    box-shadow: var(--shadow);
}

.popup-header-small {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.popup-btn {
    padding: 10px 18px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-weight: 600;
    margin-right: 10px;
}

.popup-btn.primary { background: var(--primary); color:white; }
.popup-btn.cancel { background: var(--gray); color:white; }

.input {
    width: 100%;
    border: 1px solid var(--border-light);
    padding: 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

/* ====== BẢNG DANH SÁCH TỔNG – CHUẨN ĐẸP ====== */

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
}

.htx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* tạo khoảng cách giữa các dòng */
    font-size: 15px;
}

.htx-table thead tr {
    background: #f1f5f9;
    font-weight: bold;
}

.htx-table th {
    padding: 12px 16px;
    text-align: left;
    color: #1e293b;
    font-weight: 600;
}

.htx-table td {
    background: #ffffff;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}


/* Làm bảng thoáng hơn */
.htx-table td:nth-child(1) { width: 60px; }      /* TT */
.htx-table td:nth-child(2) { width: 160px; }     /* Biển số */
.htx-table td:nth-child(3) { width: 200px; }     /* Chủ xe */
.htx-table td:nth-child(4) { width: 170px; }     /* Tuyến */
.htx-table td:nth-child(5) { width: 80px; text-align: center; } /* Đội */
.htx-table td:nth-child(6) { width: 120px; text-align: center; } /* Ghế */
.htx-table td:nth-child(7) { width: 150px; text-align: center; } /* Hạn phù hiệu */
.htx-table td:nth-child(8) { width: 150px; text-align: center; } /* Tùy chọn */

/* Nút Xem – Sửa – Xóa */
.action-btn {
    padding: 4px 10px;
    margin: 0 3px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn-view { background: #475569; }
.btn-edit { background: #1d4ed8; }
.btn-delete { background: #dc2626; }

/* ============================
   TABLE STYLE – HTX Thống Nhất
   ============================ */

.htx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 15px;
}

.htx-table thead th {
    background: #1C4BAA;
    color: white;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
}

.htx-table tbody tr {
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.htx-table td {
    padding: 10px 12px;
}

.htx-table tbody tr:hover {
    background: #f1f6ff;
}

/* Căn giữa cột TT */
.htx-table td:first-child,
.htx-table th:first-child {
    text-align: center;
    width: 55px;
}

/* Cột Tùy chọn */
.htx-table td:last-child {
    white-space: nowrap;
}

/* Nút trong bảng */
.tbl-btn {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-right: 4px;
    font-size: 13px;
}

.tbl-btn.gray { background: #555; color: white; }
.tbl-btn.primary { background: #1C4BAA; color: white; }
.tbl-btn.danger { background: #cc0000; color: white; }


#popup-full.hidden {
    display: none !important;
}

.badge-warning {
    background: #f4c430;
    color: #000;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.badge-danger {
    background: #e53935;
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* Thu nhỏ cột Loại */
.col-loai {
    width: 100px;
    white-space: nowrap;
}

/* Thu nhỏ cột Nội dung */
.col-noidung {
    width: 280px;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mở rộng cột Đơn vị */
.col-donvi {
    width: 320px;
}