/* ==========================================================================
   mymyPOS - Quản Lý Bán Hàng & Thực Đơn Trọn Đời
   Phong cách: Web Văn Phòng Cổ Điển (AdminLTE v2 / Bootstrap 3) - Thân thiện với người lớn tuổi
   ========================================================================== */

body {
    font-family: 'Roboto', 'Tahoma', 'Arial', sans-serif;
    background-color: #ecf0f5;
    color: #222222;
    font-size: 16px;
    line-height: 1.5;
}

/* Khung thẻ có viền màu phía trên + Bo viền mềm mại thân thiện */
.box-panel {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #d2d6de;
    margin-bottom: 20px;
    overflow: hidden;
}
.box-primary { border-top: 5px solid #3c8dbc; }
.box-success { border-top: 5px solid #00a65a; }
.box-warning { border-top: 5px solid #f39c12; }
.box-danger  { border-top: 5px solid #dd4b39; }
.box-purple  { border-top: 5px solid #605ca8; }

/* Bảng kẻ ô rõ nét + Zebra striping */
.table-classic {
    width: 100%;
    border-collapse: collapse;
}
.table-classic th {
    background-color: #d9edf7;
    color: #1b4f72;
    font-weight: 700;
    border: 1px solid #a6c9e2;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
}
.table-classic td {
    border: 1px solid #cccccc;
    padding: 12px 14px;
    vertical-align: middle;
}
.table-classic tbody tr:nth-child(even) {
    background-color: #f5f9fc;
}
.table-classic tbody tr:hover {
    background-color: #fff8dc;
}

/* Nút bấm phẳng, bo tròn góc mềm mại */
.btn-classic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid rgba(0,0,0,0.18);
    border-bottom-width: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.btn-classic:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
}
.btn-blue { background-color: #3c8dbc; color: #fff; border-color: #2c6c94; }
.btn-blue:hover { background-color: #337ab7; }

.btn-green { background-color: #00a65a; color: #fff; border-color: #00733e; }
.btn-green:hover { background-color: #008d4c; }

.btn-orange { background-color: #f39c12; color: #fff; border-color: #c87f0a; }
.btn-orange:hover { background-color: #e08e0b; }

.btn-red { background-color: #dd4b39; color: #fff; border-color: #b53221; }
.btn-red:hover { background-color: #d73925; }

.btn-gray { background-color: #e6e6e6; color: #333; border-color: #adadad; }
.btn-gray:hover { background-color: #d4d4d4; }

/* 4 Tab điều hướng chính thiết kế bo viền tròn mềm mại, nổi bật */
.nav-tab-btn {
    padding: 12px 22px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 12px;
    border: 2px solid #3d5159;
    color: #e2eef3;
    background-color: #2c3b41;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.nav-tab-btn:hover {
    background-color: #384b53;
    border-color: #5b7783;
    color: #ffffff;
    transform: translateY(-1px);
}
.nav-tab-btn.active {
    background-color: #ffffff;
    color: #1b4f72;
    border: 2px solid #f39c12;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Hiệu ứng nhấp nháy nhẹ cho khu vực mới mở */
@keyframes highlightBox {
    0% { background-color: #fff9db; }
    100% { background-color: #ffffff; }
}
.animate-highlight {
    animation: highlightBox 1.2s ease-out;
}