@charset "UTF-8";
/* CSS Document */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #f6f8fa; /* fallback nếu không có ảnh */
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    color: #222;
	    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex: 1 0 auto;
}
.header-bar {
    background: linear-gradient(90deg, #1976d2, #00c6ff 90%);
    color: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 14px 0 rgba(25, 118, 210, 0.06);
}


.header-bar .logo {
    height: 54px;
    width: 54px;
    object-fit: contain;
    margin-right: 10px;
}

.main-title {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.right-menu-link {
    color: #fff;
    margin-left: 16px;
    text-decoration: none;
    font-weight: 500;
}
.right-menu-link:hover { text-decoration: underline; }

.card {
    border-radius: 12px;
    border: 0;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
}

.card-body {
    padding: 1.2rem 1.4rem;
}

.form-control, .form-select {
    border-radius: 8px;
    min-height: 42px;
    font-size: 1rem;
}

.btn {
    border-radius: 8px !important;
    font-size: 1rem;
    padding: 0.65rem 1.2rem;
}
.btn:active { box-shadow: none; }

.menu-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
}

.table td, .table th {
    vertical-align: middle !important;
    font-size: 1rem;
    padding: 0.6rem 0.5rem;
}

.disabled-panel {
    pointer-events: none;
    opacity: 0.6;
}

.main-footer {
    background: #eee;
    color: #555;
    text-align: center;
    font-size: 15px;
    padding: 16px 0 10px 0;
    margin-top: 40px;
    border-top: 1px solid #ddd;
}


@media (max-width: 767px) {
    .header-bar, .main-footer {
        font-size: 1rem;
        padding: 10px 8px;
    }
    .main-title { font-size: 1rem; }
    .header-bar .logo { height:32px; width:32px;}
    .container, .container-fluid { padding-left: 5px !important; padding-right: 5px !important; }
    .card-body { padding: 0.9rem 0.6rem; }
    .row {
        flex-direction: column;
    }
    .col-md-4, .col-md-8 {
        max-width: 100%;
        flex: 100%;
    }
    .btn, .form-control, .form-select {
        font-size: 1rem !important;
    }
    .menu-thumb { width:44px; height:44px;}
    #orderModal .modal-dialog {
        max-width: 95vw;
        margin: 1.2rem auto;
    }
    #menu-list table { font-size: 0.98rem;}
    #menu-list td, #menu-list th { padding: 0.35rem 0.25rem;}
}

@media (max-width: 400px) {
    .main-title { font-size: 0.98rem; }
    .menu-thumb { width:32px; height:32px;}
}
/* Get menu */
.menu-table {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 14px 0 rgba(30,60,90,0.07);
    overflow: hidden;
    margin-bottom: 20px;
}
.menu-table th, .menu-table td {
    vertical-align: middle;
    font-size: 1.08rem;
    padding: 0.58rem 0.44rem;
    border-color: #e3e7f2;
    text-align: center;
}
.menu-table th {
    background: #e8f2fb;
    color: #185fb7;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.menu-table td {
    background: #fff;
}
.menu-table td:first-child, .menu-table th:first-child {
    width: 64px;
}
.menu-table td input[type="number"] {
    width: 60px;
    border-radius: 7px;
    border: 1px solid #c6d6e9;
    padding: 4px 8px;
    font-size: 1.01rem;
    background: #f9fbfe;
    outline: none;
    transition: border 0.18s;
}
.menu-table td input[type="number"]:focus {
    border: 1.5px solid #66b9fa;
    background: #f2fbff;
}
.menu-img-hover {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid #e3e3e3;
    transition: box-shadow 0.16s, border-color 0.16s;
    cursor: pointer;
    background: #fafafa;
}

.menu-img-preview {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 18px 44px 0 rgba(30,60,180,0.21);
    border-radius: 14px;
    border: 2px solid #0b86e8;
    background: #fff;
    width: 180px;
    height: 180px;
    object-fit: cover;
    transition: opacity 0.12s;
    opacity: 0.97;
}

@media (max-width: 700px) {
    .menu-table th, .menu-table td { font-size: 0.96rem; padding: 0.35rem 0.15rem;}
    .menu-img-hover { width: 38px; height: 38px;}
    .menu-table td input[type="number"] { width: 36px; font-size: 0.96rem;}
}
.menu-table td:nth-child(2), .menu-table th:nth-child(2) {
    text-align: left;
    font-weight: 500;
    max-width: 210px;
    word-break: break-word;
}
.menu-table tr:hover { background: #f7fafd;}

/* ------------ */  
.header-bar {
    background: linear-gradient(95deg, #1976d2, #00c6ff 95%);
    color: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 14px 0 rgba(25, 118, 210, 0.16);
}

        .header-bar .logo {
            height: 48px; width: 48px; object-fit: contain; margin-right: 10px;
        }
        .main-title {
            font-size: 1.45rem; font-weight: bold; letter-spacing: 1px;
        }
        .main-footer {
            background: #eee; color: #444;
            text-align: center; font-size: 15px;
            padding: 15px 0; margin-top:40px;
        }
        .disabled-panel {
            pointer-events: none;
            opacity: 0.55;
        }
        .right-menu-link { color: #fff; margin-left: 16px; text-decoration: blink; font-weight: 600;}
        .right-menu-link:hover { color: #FFFF66; text-decoration: blink;}
.modal-content { border-radius: 15px; }
.modal-header { background: #f7f9fc; }
.modal-title { color: #1976d2; font-weight: 600; }
        @media (max-width: 600px) {
            .header-bar .main-title { font-size: 1.05rem;}
            .header-bar .logo {height:32px;width:32px;}
        }
		@media (max-width:600px){
  #order-status-content { font-size:0.98rem;padding:10px 2px;}
  .modal-lg { max-width:99vw; }
}
.right-menu-link { 
	margin-right: 10px; 
		  
    margin-left: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s;
		}
#order-status-content {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}
#order-status-content h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
#order-status-content .badge {
    font-size: 1em;
    padding: 3px 10px;
}
@media (max-width:600px){
    #order-status-content { font-size:0.99rem;padding:7px 1px;}
}

/* css cho bảng thực đơn ngày trên cột trái*/  
/* Khung cuộn cao 300px */
  /* Khung cuộn cao 300px */
.today-menu-scroll{
  max-height:300px;
  overflow:auto;
  padding:4px 2px;
}
/* Tiêu đề nhỏ cho nhóm */
.mini-section{
  font-weight:600;
  font-size:0.95rem;
  margin:4px 6px 8px;
  color:#0b5ed7;
}
/* Lưới item nhỏ gọn */
.mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px 10px;
}
@media (min-width: 480px){
  .mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 768px){
  .mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.mini-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #eef2f7;
  border-radius:10px;
  background:#fff;
  position: relative;
  z-index: 1;
}
.mini-thumb{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:10px;
  overflow:visible; /* Cho phép ảnh tràn ra ngoài */
  background:#f3f6fa;
  border:1px solid #e7eef7;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.mini-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 0.25s ease, z-index 0.25s ease;
  z-index: 2;
  transform-origin: left center; /* Điểm phóng to lệch sang phải */
}
.mini-thumb img:hover{
  transform: scale(2);
  z-index: 99;
  position: relative;
}
.mini-placeholder{
  font-size:20px;
  line-height:1;
}
.mini-name{
  font-size:0.95rem;
  font-weight:500;
  color:#1d2736;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* CSS cho video cột trái */
/* Panel tổng: cao 300px, chia player + dải thumb */
.video-ads-card .video-ads-panel{
  height:300px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Khu player chiếm ~2/3 chiều cao */
.video-ads-card .video-ads-player{
  flex: 1 1 auto;
  min-height: 180px;
  background: linear-gradient(135deg, #8aa9ec 0%, #a4c3f4 50%, #c8d8f9 100%);
  border:1px solid #e9eef6;
  border-radius:10px;
  overflow:hidden;
}

/* Dải thumbnail chiếm ~1/3 chiều cao, trượt ngang */
.video-ads-card .video-ads-thumbs{
  flex: 0 0 96px;
  border:1px solid #e9eef6;
  border-radius:10px;
  padding:6px 8px;
  background:#fff;
  overflow:hidden;
}
.video-ads-card .thumbs-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
}
.video-ads-card .thumb-item{
  flex:0 0 auto;
  width:140px;
  cursor:pointer;
  border:1px solid #eef2f7;
  border-radius:10px;
  background:#fff;
  transition: box-shadow .2s ease, transform .15s ease;
}
.video-ads-card .thumb-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08);
}
.video-ads-card .thumb-item.active{
  border-color:#0d6efd;
  box-shadow: 0 0 0 2px rgba(13,110,253,.15) inset;
}
.video-ads-card .thumb-media{
  width:60%;
  height:46px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  overflow:hidden;
  background:#f3f6fa;
  display:flex;align-items:center;justify-content:center;
}
.video-ads-card .thumb-media img,
.video-ads-card .thumb-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-ads-card .thumb-name{
  font-size:11px;
  line-height:1.2;
  padding:6px 6px 7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.video-ads-card .thumb-item.disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Mặc định giữ nguyên PC */

/* Mobile: menu 2 dòng */
@media (max-width: 768px) {
    .header-bar {
        padding: 8px 10px;
        display: flex;
        flex-wrap: wrap; /* Cho phép xuống dòng */
        align-items: center;
        justify-content: space-between;
    }

    .header-bar .logo {
        height: 42px;
        width: 42px;
        margin-right: 6px;
    }

    .main-title {
        font-size: 1rem;
        letter-spacing: 0.5px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hàng đầu tiên: logo + tiêu đề */
    .header-bar-top {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 4px;
    }

    /* Hàng thứ hai: menu */
    .header-bar-bottom {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }

    .right-menu-link {
        color: #fff;
        font-size: 0.9rem;
        text-decoration: none;
        font-weight: 500;
        padding: 4px 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.15);
    }
    .right-menu-link:hover {
        background: rgba(255, 255, 255, 0.25);
        text-decoration: none;
    }
}

/* Mobile nhỏ hơn */
@media (max-width: 480px) {
    .main-title {
        font-size: 0.95rem;
    }
    .right-menu-link {
        font-size: 0.85rem;
        padding: 3px 5px;
    }
}

/* ============================
   Tối ưu thêm cho Mobile
============================ */

/* Giới hạn chiều rộng để nội dung không tràn */
.container, .container-fluid {
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/* Nút bấm, input => đủ lớn để dễ chạm */
@media (max-width: 768px) {
  .btn, .form-control, .form-select {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .btn { padding: 0.55rem 1rem; }
}

/* Card trên mobile: sát nhau hơn, ít bóng đổ */
@media (max-width: 768px) {
  .card {
    margin-bottom: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  }
  .card-body {
    padding: 0.85rem 0.75rem;
  }
}

/* Bảng trên mobile => scroll ngang mượt */
@media (max-width: 768px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
  .table td, .table th {
    font-size: 0.9rem;
    padding: 0.45rem 0.35rem;
  }
}

/* Nếu màn hình cực nhỏ thì bảng hiển thị dạng block (stacked) */
@media (max-width: 480px) {
  .menu-table,
  .menu-table thead,
  .menu-table tbody,
  .menu-table tr,
  .menu-table th,
  .menu-table td {
    display: block;
    width: 100%;
  }
  .menu-table thead { display: none; }
  .menu-table tr {
    background: #fff;
    margin-bottom: 12px;
    border: 1px solid #e3e7f2;
    border-radius: 10px;
    padding: 8px;
  }
  .menu-table td {
    padding: 6px 4px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #1976d2;
    flex: 0 0 40%;
    text-align: left;
  }
}

/* Sticky footer menu/nút hành động */
@media (max-width: 768px) {
  .sticky-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    border-top: 1px solid #e3e7f2;
    padding: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    z-index: 99;
  }
  .sticky-actions .btn {
    flex: 1 0 auto;
  }
}

/* Footer: chữ nhỏ hơn, đệm gọn lại */
@media (max-width: 480px) {
  .main-footer {
    font-size: 0.85rem;
    padding: 10px 0;
  }
}

 .hint-blink { animation: hintBlink 1.6s ease-in-out infinite; }
  @keyframes hintBlink { 0%,100%{opacity:.6} 50%{opacity:1} }

/* CSS cho bảng Emoji */
.emoji-panel {
    position: absolute;
    z-index: 1085; /* cao hơn modal-content/backdrop */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 8px;
    width: 300px;
    max-height: 260px;
    overflow: auto;
    display: none;
  }
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
  }
  .emoji-item {
    font-size: 20px;
    line-height: 32px;
    width: 32px;
    height: 32px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
  }
  .emoji-item:hover {
    background: #f1f5f9;
  }
  .emoji-search {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px;
    width: 100%;
    margin-bottom: 8px;
    font-size: 13px;
  }