:root { --primary: #1877f2; --success: #28a745; --danger: #d9534f; --gray: #65676b; --light-gray: #f0f2f5; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; margin: 0; padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; }
        .app-container { max-width: 500px; width: 100%; padding: 15px; box-sizing: border-box; }
        
        .card { background: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 15px; }
        .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
        input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 14px; outline: none; }
        textarea { height: 60px; resize: none; grid-column: span 2; }
        .btn-post { background: var(--primary); color: white; border: none; padding: 12px; border-radius: 8px; width: 100%; font-weight: bold; cursor: pointer; margin-top: 5px; }
        
        .filter-box { background: white; border-radius: 25px; padding: 10px 20px; display: flex; gap: 10px; align-items: center; border: 1px solid #ddd; margin-bottom: 15px; width: 100%; box-sizing: border-box;}
        .filter-options { background: white; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid #eee; width: 100%; box-sizing: border-box;}

        .post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .status { font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: bold; }
        .status-wait { background: #e7f3ff; color: var(--primary); }
        .status-done { background: #e6ffed; color: var(--success); }
        .route { font-size: 17px; font-weight: bold; margin: 5px 0; }
        .info-line { font-size: 13px; color: var(--gray); margin: 3px 0; }
        .req-tag { font-size: 12px; color: #856404; background: #fff3cd; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 5px; }

        .driver-list { margin-top: 12px; border-top: 1px dashed #ccc; padding-top: 10px; }
        .driver-card { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 8px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #eee; }
        .btn-select { background: var(--success); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }

        .actions { display: flex; border-top: 1px solid #eee; margin-top: 10px; padding-top: 5px; }
        .actions button { flex: 1; background: none; border: none; color: var(--gray); padding: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
        
        .comment-section { background: #fcfcfc; border-top: 1px solid #f0f0f0; padding: 10px; border-radius: 0 0 12px 12px; }
        .comment-item { font-size: 13px; margin-bottom: 6px; padding: 6px 10px; background: #f0f2f5; border-radius: 15px; width: fit-content; max-width: 90%; }
        .comment-user { font-weight: bold; color: #050505; margin-right: 5px; }
        .comment-input-box { display: flex; gap: 8px; margin-top: 10px; }
        .comment-input-box input { border-radius: 20px; background: #f0f2f5; border: none; padding: 8px 15px; width: 100%;}

        .nav { position: fixed; bottom: 0; width: 100%; max-width: 500px; background: white; display: flex; border-top: 1px solid #ddd; height: 65px; align-items: flex-end;}
        .nav-item { flex: 1; padding: 10px 0; text-align: center; cursor: pointer; font-size: 11px; color: var(--gray); display: flex; flex-direction: column; align-items: center; justify-content: center;}
        .active { color: var(--primary); font-weight: bold; }
        .hidden { display: none !important; }

        .nav-item.post-center { position: relative; z-index: 10; }
        .nav-item.post-center .circle-btn { width: 55px; height: 55px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 30px; box-shadow: 0 4px 10px rgba(24, 119, 242, 0.4); margin-top: -30px; border: 4px solid white; }

        .post-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .user-info-group { display: flex; align-items: center; gap: 8px; flex: 1; }
        .user-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8a8d91; }
        .meta-dot { font-size: 8px; color: #ccc; }
        .text-warning { color: #f5a623; font-weight: bold; }
        .text-danger { color: #d9534f; }

        .more-menu { position: relative; cursor: pointer; padding: 0 8px; font-size: 20px; color: var(--gray); }
        .menu-dropdown { position: absolute; right: 0; top: 25px; background: white; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; min-width: 110px; overflow: hidden; }
        .menu-item { padding: 10px 15px; font-size: 13px; white-space: nowrap; }
        .menu-item:hover { background: #f5f5f5; }
        .status-canceled { background: #f8d7da; color: var(--danger); }
        .status-locked { background: #000; color: #fff; }
        .cancel-waiting { font-size: 12px; color: var(--danger); font-style: italic; margin-top: 5px; display: block; }
        .comments-container { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fcfcfc; border-top: 1px solid transparent; }
        .comments-container.show { max-height: 1000px; border-top: 1px solid #eee; }
        
        .contact-btn { text-decoration: none; background: var(--primary); color: white; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
    .star-icon { cursor: pointer; font-size: 25px; color: #ccc; transition: color 0.2s; }
.star-icon:hover { transform: scale(1.2); }
.rating-active { color: #f5a623 !important; }
/* Style cho nhãn loại dịch vụ nổi bật */
.service-tag {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(24, 119, 242, 0.3);
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.searching-text {
    animation: blink 1.5s infinite;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
/* Làm cho card bài đăng tách biệt rõ ràng */
.card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    /* Đổ bóng đậm hơn một chút để nổi bật trên nền xám */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    margin-bottom: 20px; /* Tăng khoảng cách giữa các bài */
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}


/* Nếu bài đã hoàn thành hoặc bị hủy thì đổi màu thanh bên trái */
.card[style*="opacity: 0.7"]::before {
    background: #999; /* Màu xám cho bài đã hủy */
}

/* Cách dòng giữa các thông tin quan trọng trong bài */
.post-content {
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
    padding: 10px 0;
    margin: 10px 0;
}
/* Hiệu ứng cho nút Lọc nâng cao */
#btn-adv.active { background: #1877f2 !important; color: white !important; transform: rotate(90deg); }

/* Thiết kế nút Thông báo kiểu "Capsule" */
.switch-notify {
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 8px 16px;
    background: #f0f2f5;
    border-radius: 20px;
    transition: 0.3s;
    border: 1px solid #ddd;
}
.switch-notify input { display: none; }
.switch-notify:has(input:checked) {
    background: #fff0f0;
    border-color: #ff4d4f;
    color: #ff4d4f;
}
.text-notify { font-size: 13px; font-weight: 500; margin-left: 5px; }

.hidden { display: none; }
.hidden { display: none; }

#btn-adv.active { 
    background: #1877f2 !important; 
    color: white !important; 
}

/* Nút thông báo dạng Capsule */
.switch-notify {
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px;
    background: #f0f2f5;
    border-radius: 25px;
    border: 1px solid #ddd;
    transition: 0.3s;
}
.switch-notify input { display: none; }
.switch-notify:has(input:checked) {
    background: #e7f3ff;
    border-color: #1877f2;
    color: #1877f2;
    box-shadow: 0 2px 5px rgba(24, 119, 242, 0.2);
}
.text-notify { font-size: 13px; font-weight: 500; }
.btn-tab { flex: 1; padding: 8px; border: none; border-radius: 20px; background: #e4e6eb; cursor: pointer; font-weight: 600; }
    .btn-tab.active { background: var(--primary); color: white; }
/* Thêm vào phần CSS của bạn */
.comment-box {
    display: none; /* Mặc định ẩn */
}

.comment-box.active {
    display: block !important; /* Hiện khi có class active */
}
.admin-section {
  margin-bottom: 40px;
}

.admin-card {
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
}
/* Nền mờ phía sau */
.post-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(3px);
}

/* Cửa sổ trượt lên (Bottom Sheet) */
.post-sheet {
    position: fixed;
    bottom: -100%; /* Giấu dưới cùng */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 10000;
    transition: bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Khi kích hoạt */
.post-sheet.active { bottom: 0; }
.post-backdrop.active { display: block; }

.sheet-handle {
    width: 40px; height: 5px; background: #ccc;
    border-radius: 10px; margin: 10px auto;
}

.sheet-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; border-bottom: 1px solid #eee;
}

.sheet-title { font-size: 16px; font-weight: 600; margin: 0; }

.btn-close-sheet { background: none; border: none; color: #666; font-size: 14px; cursor: pointer; }

.btn-post-main { 
    background: var(--primary); color: white; border: none; 
    padding: 6px 15px; border-radius: 20px; font-weight: bold; cursor: pointer;
}

.sheet-body { padding: 20px; overflow-y: auto; }

.lock-panel {
    margin: 15px 0; padding: 12px; background: #f8f9fa; 
    border-radius: 10px; border: 1px solid #eee; 
    display: flex; align-items: center;
}

#note { background: #f9f9f9; border: 1px dashed #ccc; }
.btn-refresh {
    background: #1877f2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    animation: slideDown 0.4s ease;
    position: fixed;
}
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* ===== TOP BAR ===== */
.top-bar {
    background: #ffffff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

/* Bên phải */
.right-auth {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nút */
.menu-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-outline {
    background: #f0f2f5;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-logout {
    background: #ff4d4f;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}
/* ===== GỘP KHỐI PHẦN TRÊN ===== */

/* Bỏ bo góc và khoảng cách */
#auth-bar,
.app-container > .card:first-of-type {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* Search card (card ngay sau auth) */
.app-container > .card:nth-of-type(2) {
    border-radius: 0 !important;
    margin-top: 0 !important;
}

/* Nếu còn viền vàng ở auth thì bỏ */
#auth-bar {
    border-radius: 0 !important;
}
#auth-bar {
    border-bottom: none !important;
}

.app-container > .card:nth-of-type(2) {
    border-top: none !important;
}
#auth-bar span,
#auth-bar div {
    color: white !important;
}
.route-start {
    color: #28a745;   /* xanh lá */
    font-weight: 600;
}

.route-arrow {
    color: #999;      /* xám */
    margin: 0 6px;
}

.route-end {
    color: #d9534f;   /* đỏ */
    font-weight: 600;
}
@keyframes shakeBell {
    0% { transform: rotate(0); }
    15% { transform: rotate(20deg); }
    30% { transform: rotate(-20deg); }
    45% { transform: rotate(10deg); }
    100% { transform: rotate(0); }
}
.shake-active {
    animation: shakeBell 0.5s ease-in-out infinite;
}
.noti-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.noti-item:hover { background: #f9f9f9; }
.nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* Chế độ trong suốt */
    background-color: rgba(255, 255, 255, 0.8) !important; /* Trắng trong suốt 80% */
    backdrop-filter: blur(10px); /* Hiệu ứng làm mờ kính cực sang trọng */
    -webkit-backdrop-filter: blur(10px);
    
    padding: 8px 4px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Giảm độ đậm của bóng */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Hệ thống căn giữa tuyệt đối */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%; 
    max-width: 500px; /* Khớp với độ rộng feed của bạn */
    
    box-sizing: border-box;
    z-index: 9999;
}
.floating-wrapper {
    position: fixed;
    bottom: 150px; /* Độ cao của chuông */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px; /* Phải khớp với app-container của bạn */
    height: 0; /* Để không che khuất các nút bấm bên dưới */
    z-index: 10000;
    pointer-events: none; /* Để có thể click xuyên qua vùng trống */
}

#floating-notif-btn, #noti-panel {
    pointer-events: auto; /* Kích hoạt lại click cho nút và bảng */
}
/* Header chính */
.main-header {
    width: 100%;
    background: white;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.header-content {
    width: 100%;
    max-width: 500px; /* Khớp với độ rộng app-container của bạn */
    display: flex;
    align-items: center;
    padding: 0 15px;
}

/* Định dạng Logo */
.app-logo {
    width: 30px;   /* chỉnh nhỏ lại theo ý bạn */
    height: 30px;
    object-fit: contain;
}
  /* Khung chứa dòng chữ */
  .marquee-box {
    width: 100%;
    overflow: hidden; /* Ẩn phần chữ dư thừa bên ngoài */
    background: #ffffff; /* Màu nền (đỏ) */
    color: rgb(56, 10, 223); /* Màu chữ */
    padding: 10px 0;
    font-family: Arial, sans-serif;
    font-weight: bold;
    position: top; /* Cố định ở trên cùng */
    top: 0;
    left: 0;
    z-index: 9999;
  }

  /* Hiệu ứng chuyển động */
  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Bắt đầu chạy từ mép phải */
    animation: scroll-left 15s linear infinite; /* 15 giây là tốc độ chạy */
  }

  /* Định nghĩa hướng chạy từ phải qua trái */
  @keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }
  .pwa-mini-btn {
    position: fixed !important;
    bottom: 100px !important; /* Tránh đè thanh menu dưới */
    left: 20px !important;    /* Sát lề trái */
    z-index: 9999999 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Vòng tròn chứa icon */
.pwa-icon-circle {
    width: 55px !important;
    height: 55px !important;
    background: linear-gradient(135deg, #1877f2, #0056b3) !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 25px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 2px solid white !important;
    animation: swing 3s ease-in-out infinite !important; /* Hiệu ứng vẫy nhẹ */
}

/* Nhãn nhỏ bên trên icon */
.pwa-badge {
    background: #ff3b30 !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-weight: bold !important;
    margin-bottom: -10px !important;
    z-index: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
}

/* Hiệu ứng vẫy gọi (swing) */
@keyframes swing {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Hiệu ứng tỏa tròn để tăng chú ý */
.pwa-mini-btn::after {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    bottom: 0;
    border-radius: 50%;
    background: rgba(24, 119, 242, 0.4);
    z-index: -1;
    animation: pwa-ripple 2s infinite;
}

@keyframes pwa-ripple {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
#pwa-install-container {
    display: none; /* Mặc định ẩn, script sẽ cho hiện sau nếu cần */
}
.service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.nav-mini {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}

.nav-icon {
    cursor: pointer;
    font-size: 14px;
}