/* Auto-extracted Component CSS */

/* --- From: Component_ChatBot.html --- */
/* ═══ FAB BUTTON ═══ */
.chatbot-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 9980;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(135deg, #25478B, #1a3568));
    color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 71, 139, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chatbot-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 71, 139, 0.5);
}
.chatbot-fab.open { transform: rotate(180deg); }
.chatbot-fab-icon { font-size: 28px; transition: opacity 0.2s, transform 0.3s; }
.chatbot-fab-close { font-size: 24px; position: absolute; opacity: 0; transition: opacity 0.2s, transform 0.3s; }
.chatbot-fab.open .chatbot-fab-icon { opacity: 0; transform: scale(0.5); }
.chatbot-fab.open .chatbot-fab-close { opacity: 1; transform: scale(1); }

/* ═══ CHAT PANEL ═══ */
.chatbot-panel {
    position: fixed; bottom: 96px; right: 24px; z-index: 9979;
    width: 400px; height: 580px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0; transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chatbot-panel.open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* HEADER */
.chatbot-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px;
    background: var(--gradient-primary, linear-gradient(135deg, #25478B, #1a3568));
    color: white;
}
.chatbot-header-info { display: flex; align-items: center; gap: 12px; }
.chatbot-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
.chatbot-avatar .material-symbols-outlined { font-size: 22px; }
.chatbot-title { font-size: 14px; font-weight: 700; }
.chatbot-status { font-size: 11px; opacity: 0.8; }
.chatbot-close-btn, .chatbot-icon-btn {
    background: rgba(255,255,255,0.15); border: none; color: white;
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s;
}
.chatbot-close-btn:hover, .chatbot-icon-btn:hover { background: rgba(255,255,255,0.3); }
.chatbot-close-btn .material-symbols-outlined, .chatbot-icon-btn .material-symbols-outlined { font-size: 18px; }

/* ═══ QUOTA BAR ═══ */
.chatbot-quota-bar {
    padding: 8px 14px;
    background: var(--bg, #f8fafc);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    display: flex; align-items: center; gap: 10px;
}
.chatbot-quota-info {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text-muted, #94a3b8);
    white-space: nowrap;
}
.chatbot-quota-track {
    flex: 1; height: 4px; background: var(--border, #e2e8f0);
    border-radius: 2px; overflow: hidden;
}
.chatbot-quota-fill {
    height: 100%; width: 0%; border-radius: 2px;
    background: var(--success, #38a169);
    transition: width 0.3s;
}

/* MESSAGES AREA */
.chatbot-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}

.cb-msg { display: flex; max-width: 85%; }
.cb-msg.ai { align-self: flex-start; }
.cb-msg.user { align-self: flex-end; }

.cb-msg-bubble {
    padding: 10px 14px; border-radius: 12px;
    font-size: 13px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
}
.cb-msg.ai .cb-msg-bubble {
    background: var(--bg, #f8fafc);
    color: var(--text-main, #121417);
    border: 1px solid var(--border-light, #f0f0f0);
    border-top-left-radius: 4px;
}
.cb-msg.user .cb-msg-bubble {
    background: var(--primary, #25478B);
    color: white;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.cb-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cb-typing-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted, #94a3b8);
    animation: cbBounce 1.2s infinite;
}
.cb-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.cb-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes cbBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ═══ MODULE DRAWER ═══ */
.cb-drawer {
    display: none;
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    max-height: 200px; overflow-y: auto;
    animation: cbSlideUp 0.2s ease;
}
.cb-drawer.open { display: block; }
@keyframes cbSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.cb-drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px 4px; position: sticky; top: 0;
    background: var(--surface, #fff); z-index: 1;
}
.cb-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #94a3b8); padding: 2px;
    display: flex; align-items: center;
}
.cb-drawer-modules {
    padding: 4px 12px;
    display: flex; flex-wrap: wrap; gap: 4px;
}

.cb-module-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 16px;
    font-size: 11px; cursor: pointer; white-space: nowrap;
    background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
    color: var(--text-main, #121417);
    transition: all 0.15s; font-family: var(--font-main, sans-serif);
}
.cb-module-tab:hover {
    border-color: var(--primary, #25478B);
    color: var(--primary, #25478B);
}
.cb-module-tab.active {
    background: var(--primary, #25478B); color: white;
    border-color: var(--primary, #25478B);
}
.cb-module-tab .material-symbols-outlined { font-size: 14px; }

/* SUGGESTIONS inside drawer */
.cb-drawer-suggestions {
    padding: 4px 12px 8px;
    display: flex; flex-wrap: wrap; gap: 5px;
}
.cb-drawer-suggestions:empty { display: none; }

.cb-suggest {
    padding: 5px 10px; border-radius: 14px;
    font-size: 11px; cursor: pointer;
    background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
    color: var(--text-main, #121417);
    transition: all 0.15s; white-space: nowrap;
    font-family: var(--font-main, sans-serif);
}
.cb-suggest:hover {
    border-color: var(--primary, #25478B);
    color: var(--primary, #25478B);
    background: var(--primary-light, #eef2ff);
}

/* MENU BUTTON (☰) */
.cb-menu-btn {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
    color: var(--text-main, #121417); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.cb-menu-btn:hover {
    border-color: var(--primary, #25478B);
    color: var(--primary, #25478B);
}
.cb-menu-btn.active {
    background: var(--primary, #25478B); color: white;
    border-color: var(--primary, #25478B);
}
.cb-menu-btn .material-symbols-outlined { font-size: 20px; }

/* SOURCE BADGES */
.cb-source-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; padding: 3px 10px;
    border-radius: 10px; margin-top: 8px; font-weight: 600;
}
.cb-badge-ai {
    background: color-mix(in srgb, #4285F4 15%, var(--bg, #f8fafc));
    color: #4285F4;
}
.cb-badge-faq {
    background: color-mix(in srgb, #34A853 15%, var(--bg, #f8fafc));
    color: #34A853;
}

/* LINK BUTTON */
.cb-link-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; padding: 4px 10px; border-radius: 6px;
    font-size: 11px; cursor: pointer; font-weight: 600;
    background: color-mix(in srgb, var(--primary, #25478B) 10%, var(--bg, #f8fafc));
    color: var(--primary, #25478B);
    border: 1px solid color-mix(in srgb, var(--primary, #25478B) 20%, transparent);
    text-decoration: none; font-family: var(--font-main, sans-serif);
    transition: all 0.15s;
}
.cb-link-btn:hover {
    background: color-mix(in srgb, var(--primary, #25478B) 18%, var(--bg, #f8fafc));
}
.cb-link-btn .material-symbols-outlined { font-size: 14px; }

/* INPUT BAR */
.chatbot-input-bar {
    display: flex; gap: 8px; padding: 12px;
    border-top: 1px solid var(--border, #e2e8f0);
}
.chatbot-input-bar input {
    flex: 1; padding: 10px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px; font-size: 13px;
    background: var(--bg, #f8fafc);
    color: var(--text-main, #121417);
    outline: none; font-family: var(--font-main, sans-serif);
}
.chatbot-input-bar input:focus { border-color: var(--primary, #25478B); }

.chatbot-send-btn {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--gradient-primary, linear-gradient(135deg, #25478B, #1a3568));
    color: white; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s;
}
.chatbot-send-btn:hover { opacity: 0.85; }
.chatbot-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chatbot-send-btn .material-symbols-outlined { font-size: 20px; }

/* MOBILE */
@media (max-width: 480px) {
    .chatbot-panel {
        width: calc(100vw - 16px); right: 8px; bottom: 88px;
        height: 65vh;
    }
}

/* --- From: Component_Navbar.html --- */
/* Mobile Search Expanded State */
  .header-search.mobile-expanded {
    display: block !important;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .header-search.mobile-expanded input {
    max-width: 100%;
    height: 44px;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 12px;
  }

  /* Search Bar */
  .header-search {
    flex: 1;
    margin: 0 24px;
    max-width: 520px;
    position: relative;
    display: none;
  }
  @media (min-width: 768px) {
    .header-search {
      display: block;
    }
  }

  .header-search input {
    width: 100%;
    height: 40px;
    padding-left: 44px;
    padding-right: 16px;
    border-radius: 8px;
    border: none;
    background: #f1f2f4;
    color: var(--text-main);
    font-size: 14px;
    transition: box-shadow 0.2s;
  }
  body.dark .header-search input {
    background: #2a2e35;
    color: white;
  }

  .header-search input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-yellow);
    background: white;
  }
  body.dark .header-search input:focus {
    background: #333;
  }

  .header-search span {
    position: absolute;
    left: 12px;
    top: 10px;
    color: #677183;
    font-size: 20px;
  }

  /* User Profile & Dropdown */
  .user-profile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 4px 12px;
    cursor: pointer;
    border-left: 1px solid var(--border);
    padding-left: 16px;
    margin-left: 16px;
    height: 48px;
  }
  .u-role {
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 10px;
  }

  .user-dropdown {
    position: absolute;
    top: 56px;
    right: 0;
    width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    overflow: hidden;
  }
  .user-dropdown.active {
    display: block;
  }

  .user-dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.1s;
  }
  .user-dropdown-item:hover {
    background: var(--bg);
    color: var(--primary);
  }
  .user-dropdown-item .material-symbols-outlined {
    font-size: 20px;
  }
  .user-dropdown-item.text-danger {
    color: var(--danger);
  }
  .user-dropdown-item.text-danger:hover {
    background: #fff5f5;
  }

  .user-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }

  /* ===== NOTIFICATION ITEMS ===== */
  .noti-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    border-bottom: 1px solid var(--border);
  }
  .noti-item:hover {
    background: var(--bg);
  }
  .noti-item:last-child {
    border-bottom: none;
  }
  .noti-item.noti-unread {
    background: var(--amber-bg);
  }
  body.dark .noti-item.noti-unread {
    background: #1a1d23;
  }

  .noti-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .noti-icon .material-symbols-outlined {
    font-size: 18px;
  }

  .noti-content {
    flex: 1;
    min-width: 0;
  }
  .noti-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    margin-bottom: 2px;
  }
  .noti-body {
    font-size: 12px;
    color: var(--secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .noti-time {
    font-size: 11px;
    color: var(--neutral-400);
    margin-top: 4px;
  }
  .noti-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 6px;
  }
  .noti-list {
    max-height: 320px;
    overflow-y: auto;
  }

  /* Bell pulse animation */
  .has-noti .material-symbols-outlined {
    animation: bellPulse 2s ease-in-out infinite;
  }
  @keyframes bellPulse {
    0%,
    100% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(14deg);
    }
    20% {
      transform: rotate(-8deg);
    }
    30% {
      transform: rotate(6deg);
    }
    40% {
      transform: rotate(-4deg);
    }
    50% {
      transform: rotate(0deg);
    }
  }

  /* ===== SEARCH DROPDOWN ===== */
  .search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: none;
    max-height: 400px;
    overflow-y: auto;
  }
  .search-dropdown.active {
    display: block;
  }
  .search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-light);
    font-size: 13px;
  }
  .search-loading .spin {
    font-size: 20px;
  }
  .search-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
  }
  .search-group-label {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
  }
  .search-group-label:first-child {
    border-top: none;
  }
  .search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .search-item:hover {
    background: var(--bg);
  }
  .search-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-item-icon .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
  }
  .search-item-text {
    flex: 1;
    min-width: 0;
  }
  .search-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .search-item-sub {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 1px;
  }

/* --- From: Component_Pagination.html --- */
.pagination { 
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; 
}
.pagination.hidden { display: none; }
.page-btn {
    width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--border);
    background: white; color: var(--text-dark); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.page-btn:hover { background: var(--bg-hover); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-info { font-size: 13px; font-weight: 600; color: var(--text-light); min-width: 100px; text-align: center; }

/* --- From: Component_Popup_CompanyInfo.html --- */
/* Popup Styles matching Global Theme */
    .popup-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
        display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(4px);
    }
    .popup-overlay.hidden { display: none; }
    
    .popup-container {
        background: var(--bg); width: 600px; max-width: 95vw; max-height: 90vh;
        border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
        display: flex; flex-direction: column;
        border: 1px solid var(--border);
    }
    
    .popup-header {
        padding: 16px 24px; border-bottom: 1px solid var(--border);
        display: flex; justify-content: space-between; align-items: center;
    }
    .popup-title { font-size: 18px; font-weight: 700; color: var(--primary); margin: 0; }
    
    .popup-body { padding: 24px; overflow-y: auto; }
    
    .popup-footer {
        padding: 16px 24px; border-top: 1px solid var(--border);
        display: flex; justify-content: flex-end; gap: 12px;
        background: var(--gray-50); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
    }

    .section-title {
        font-size: 12px; text-transform: uppercase; font-weight: 700; color: var(--text-light);
        margin-bottom: 12px; letter-spacing: 0.05em;
    }

    .logo-preview-box {
        width: 64px; height: 64px; border: 2px dashed var(--border); border-radius: 8px;
        display: flex; align-items: center; justify-content: center; background: var(--gray-50);
        margin-top: 24px; /* Align with input */
    }
    .logo-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .logo-preview-box span { color: var(--text-light); font-size: 24px; }

    .color-picker-group { display: flex; gap: 8px; align-items: center; }
    input[type="color"] { width: 40px; height: 38px; padding: 0; border: none; cursor: pointer; background: none; }
    
    .helper-text { font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* --- From: Component_Popup_PrintTemplate.html --- */
.pt-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; animation: ptFadeIn 0.3s ease forwards;
}
@keyframes ptFadeIn { to { opacity: 1; } }
.pt-popup-overlay.hidden { display: none !important; }

.pt-popup-card {
    background: var(--surface, #fff); width: 90vw; max-width: 640px;
    border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden; animation: ptSlideUp 0.3s ease;
    max-height: 90vh; display: flex; flex-direction: column;
}
@keyframes ptSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pt-popup-hdr {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff; display: flex; justify-content: space-between; align-items: center;
}
.pt-popup-hdr h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.pt-popup-hdr p { font-size: 0.8rem; opacity: 0.85; margin: 4px 0 0; }
.pt-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; transition: all 0.2s;
}
.pt-close-btn:hover { background: rgba(255,255,255,0.3); }

.pt-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.pt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.pt-col-full { grid-column: span 2; }

.pt-label {
    display: block; font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-light); margin-bottom: 6px;
}
.pt-label .req { color: var(--red-500); margin-left: 2px; }
.pt-input {
    width: 100%; padding: 10px 14px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; color: var(--text-main);
    font-family: var(--font-main, 'Segoe UI', sans-serif);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pt-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
    background: var(--surface, #fff);
}
.pt-input[readonly] { background: var(--neutral-100); color: var(--text-light); cursor: default; }

.pt-drive-hint {
    margin-top: 6px; padding: 8px 12px; border-radius: 8px;
    background: var(--blue-bg); border: 1px solid var(--blue-border);
    font-size: 0.7rem; color: var(--primary); line-height: 1.5;
}
.pt-drive-hint code {
    background: var(--info-bg); padding: 2px 6px; border-radius: 4px;
    font-family: monospace; font-size: 0.7rem; word-break: break-all;
}
.pt-drive-link {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; font-size: 0.75rem; color: var(--primary);
    text-decoration: none; font-weight: 600;
}
.pt-drive-link:hover { text-decoration: underline; }
.pt-drive-link span { font-size: 14px; }

.pt-popup-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50);
}
.pt-btn-close {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem;
    background: transparent; color: var(--text-light); cursor: pointer; border: none;
}
.pt-btn-close:hover { background: var(--bg); color: var(--text-main); }
.pt-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: var(--primary); color: #fff; cursor: pointer; border: none;
    box-shadow: 0 4px 12px rgba(37, 71, 139, 0.3); transition: all 0.2s;
}
.pt-btn-save:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Column range inputs */
.pt-col-range {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
}
.pt-col-range-input {
    width: 60px; padding: 8px 12px;
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.9375rem; text-align: center;
    font-weight: 700; text-transform: uppercase;
    font-family: monospace;
}
.pt-col-range-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
}
.pt-col-range-arrow {
    font-size: 1.1rem; font-weight: 700; color: var(--primary);
}

/* Sections */
.pt-section {
    margin-top: 16px; padding: 14px;
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg);
}
.pt-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 700;
    color: var(--primary); cursor: pointer; user-select: none;
}
.pt-section-title .material-symbols-outlined { font-size: 18px; }
.pt-section-hint {
    font-size: 0.6875rem; color: var(--neutral-500);
    margin: 6px 0 8px; line-height: 1.5;
}

/* Margin inputs */
.pt-margin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-margin-input {
    width: 100%; padding: 8px 12px;
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.8125rem; text-align: center;
    font-family: var(--font-main, 'Segoe UI', sans-serif);
}
.pt-margin-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
}
.pt-orient-group { display: flex; gap: 14px; margin-bottom: 10px; }
.pt-orient-group label {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.8125rem; cursor: pointer;
}

/* --- From: Component_QRScanner.html --- */
/* ═══ Scanner Overlay ═══ */
.qrs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: qrs-fadein 0.25s ease;
}
.qrs-overlay.active { display: flex; }
@keyframes qrs-fadein { from { opacity: 0; } to { opacity: 1; } }

.qrs-container {
    width: 95%;
    max-width: 480px;
    background: var(--neutral-900);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

/* Header */
.qrs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    color: #fff;
}
.qrs-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qrs-header h3 .material-symbols-outlined { font-size: 22px; }
.qrs-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.qrs-close-btn:hover { background: rgba(255,255,255,0.35); }

/* Camera viewport */
.qrs-camera-area {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    overflow: hidden;
}
.qrs-camera-area video { width: 100%; height: 100%; object-fit: cover; }

/* Scan line animation */
.qrs-scan-line {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--blue-500), var(--blue-500), var(--blue-500), transparent);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(59,130,246,0.6);
    animation: qrs-scanmove 2.5s ease-in-out infinite;
}
@keyframes qrs-scanmove {
    0%, 100% { top: 15%; }
    50% { top: 85%; }
}

/* Corner markers */
.qrs-corners {
    position: absolute;
    inset: 12%;
    pointer-events: none;
}
.qrs-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--blue-500);
    border-style: solid;
    border-width: 0;
}
.qrs-corner.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-radius: 4px 0 0 0; }
.qrs-corner.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-radius: 0 4px 0 0; }
.qrs-corner.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 4px; }
.qrs-corner.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 4px 0; }

/* Manual input */
.qrs-manual {
    padding: 16px 20px;
    background: var(--neutral-800);
}
.qrs-manual-row {
    display: flex;
    gap: 8px;
}
.qrs-manual input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--neutral-700);
    border-radius: 10px;
    background: var(--neutral-900);
    color: var(--neutral-50);
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 0.2s;
}
.qrs-manual input:focus { border-color: var(--blue-500); }
.qrs-manual input::placeholder { color: var(--neutral-500); font-family: inherit; letter-spacing: 0; }
.qrs-manual-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--blue-500), var(--info));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.qrs-manual-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
.qrs-manual-btn:active { transform: scale(0.97); }

/* Result */
.qrs-result {
    padding: 12px 20px 16px;
    background: var(--neutral-800);
    border-top: 1px solid var(--neutral-700);
}
.qrs-result-card {
    display: none;
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 4px;
}
.qrs-result-card.success {
    display: block;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3);
}
.qrs-result-card.error {
    display: block;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
}
.qrs-result-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--neutral-50);
    word-break: break-all;
}
.qrs-result-detail {
    font-size: 0.8rem;
    color: var(--neutral-400);
    margin-top: 4px;
}
.qrs-result-detail strong { color: var(--neutral-300); }

/* History */
.qrs-history {
    padding: 0 20px 16px;
    background: var(--neutral-800);
    max-height: 140px;
    overflow-y: auto;
}
.qrs-history-title {
    font-size: 0.75rem;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.qrs-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--neutral-900);
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--neutral-300);
    cursor: pointer;
    transition: background 0.15s;
}
.qrs-history-item:hover { background: var(--neutral-800); }
.qrs-history-item .material-symbols-outlined { font-size: 16px; color: var(--neutral-500); }
.qrs-history-item .qhi-code { font-family: monospace; flex: 1; }
.qrs-history-item .qhi-time { color: var(--neutral-500); font-size: 0.7rem; }

/* Loading state */
.qrs-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.qrs-loading.active { display: flex; }
.qrs-loading-text {
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}
.qrs-loading-text .material-symbols-outlined {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
    animation: qrs-pulse 1.2s ease-in-out infinite;
}
@keyframes qrs-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Mode chip row */
.qrs-mode-row {
    display: flex;
    gap: 8px;
    padding: 12px 20px 0;
    background: var(--neutral-800);
}
.qrs-mode-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1.5px solid var(--neutral-700);
    background: transparent;
    color: var(--neutral-400);
    cursor: pointer;
    transition: all 0.2s;
}
.qrs-mode-chip.active {
    background: rgba(59,130,246,0.15);
    border-color: var(--blue-500);
    color: var(--blue-500);
}
.qrs-mode-chip:hover:not(.active) { border-color: var(--neutral-500); color: var(--neutral-300); }

/* --- From: Component_Sidebar.html --- */
.dynamic-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: white; padding: 2px; flex-shrink: 0; }
        .dynamic-logo.hidden { display: none; }

/* --- From: Component_VietQR.html --- */
/* VietQR Popup */
.vqr-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: vqr-fadein 0.2s ease;
}
.vqr-overlay.active { display: flex; }
@keyframes vqr-fadein { from { opacity:0; } to { opacity:1; } }

.vqr-card {
    width: 92%;
    max-width: 400px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Header */
.vqr-header {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.vqr-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vqr-header h3 .material-symbols-outlined { font-size: 22px; }
.vqr-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vqr-close-btn:hover { background: rgba(255,255,255,0.35); }

/* Body */
.vqr-body {
    padding: 20px;
    text-align: center;
}
.vqr-qr-wrap {
    display: inline-block;
    padding: 12px;
    background: var(--neutral-50);
    border-radius: 16px;
    border: 2px solid var(--neutral-200);
    margin-bottom: 16px;
}
.vqr-qr-wrap img {
    width: 280px;
    height: 280px;
    border-radius: 8px;
}

/* Info rows */
.vqr-info {
    text-align: left;
    border-top: 1px solid var(--neutral-200);
    padding-top: 12px;
}
.vqr-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.85rem;
}
.vqr-row-label { color: var(--neutral-500); }
.vqr-row-value { font-weight: 700; color: var(--neutral-800); }
.vqr-amount { color: var(--info) !important; font-size: 1.1rem; }

/* Footer */
.vqr-footer {
    padding: 12px 20px 16px;
    display: flex;
    gap: 8px;
}
.vqr-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.vqr-btn-copy {
    background: var(--neutral-50);
    color: var(--neutral-600);
}
.vqr-btn-copy:hover { background: var(--neutral-200); }
.vqr-btn-download {
    background: linear-gradient(135deg, var(--blue-500), var(--info));
    color: #fff;
}
.vqr-btn-download:hover { box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
.vqr-btn .material-symbols-outlined { font-size: 18px; }

/* Note */
.vqr-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 0 20px 12px;
    text-align: center;
}

/* Loading */
.vqr-loading {
    padding: 40px;
    text-align: center;
    color: var(--neutral-500);
}
.vqr-loading .material-symbols-outlined {
    font-size: 40px;
    animation: vqr-pulse 1.2s ease-in-out infinite;
    display: block;
    margin-bottom: 8px;
}
@keyframes vqr-pulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } }

/* --- From: Popup_NotificationSettings.html --- */
.noti-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
  }
  .noti-settings-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .noti-settings-popup {
    background: var(--surface);
    border-radius: 16px;
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
  }
  .noti-settings-overlay.active .noti-settings-popup {
    transform: translateY(0) scale(1);
  }
  .ns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
  }
  .ns-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ns-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.15s;
  }
  .ns-close:hover {
    background: var(--gray-200);
    color: var(--text-main);
  }
  .ns-body {
    padding: 16px 20px;
  }
  /* Channel Card */
  .ns-channel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: all 0.2s;
  }
  .ns-channel:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  }
  .ns-channel.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .ns-channel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ns-channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }
  .ns-channel-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .ns-channel-icon.in-app {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
  }
  .ns-channel-icon.email {
    background: color-mix(in srgb, #ea4335 12%, var(--surface));
    color: #ea4335;
  }
  .ns-channel-icon.telegram {
    background: color-mix(in srgb, #0088cc 12%, var(--surface));
    color: #0088cc;
  }
  .ns-channel-icon.zalo {
    background: color-mix(in srgb, #0068ff 12%, var(--surface));
    color: #0068ff;
  }
  .ns-channel-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-main);
  }
  .ns-channel-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 2px;
  }
  .ns-channel-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .ns-badge-always {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
  }
  .ns-badge-coming {
    background: color-mix(in srgb, var(--secondary) 12%, var(--surface));
    color: var(--secondary);
  }
  /* Toggle */
  .ns-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }
  .ns-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .ns-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #94a3b8;
    border-radius: 24px;
    transition: 0.25s;
  }
  .ns-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .ns-toggle input:checked + .ns-toggle-slider {
    background: var(--primary);
  }
  .ns-toggle input:checked + .ns-toggle-slider::before {
    transform: translateX(20px);
  }
  /* Channel setup panel */
  .ns-tg-setup {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: none;
  }
  .ns-tg-setup.show {
    display: block;
  }
  .ns-tg-steps {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .ns-tg-steps strong {
    color: var(--text-main);
  }
  .ns-tg-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .ns-tg-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--surface);
    color: var(--text-main);
    outline: none;
  }
  .ns-tg-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  }
  .ns-tg-btn {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    color: var(--text-main);
  }
  .ns-tg-btn:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
  }
  .ns-tg-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.7rem;
  }
  .ns-tg-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ns-tg-status .dot.online { background: var(--success); }
  .ns-tg-status .dot.offline { background: var(--secondary); }
  /* Quick Connect section */
  .ns-quick-connect {
    margin-top: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 10px;
  }
  .ns-qc-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .ns-qc-code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ns-qc-code-display {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--primary);
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 6px 14px;
    text-align: center;
    min-width: 120px;
    user-select: all;
  }
  .ns-qc-timer {
    font-size: 0.65rem;
    color: var(--text-light);
  }
  .ns-qc-bot-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.75rem;
  }
  .ns-qc-bot-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }
  .ns-qc-bot-link a:hover {
    text-decoration: underline;
  }
  .ns-btn-disconnect {
    font-size: 0.65rem;
    color: var(--danger);
    background: none;
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s;
  }
  .ns-btn-disconnect:hover {
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  }
  /* Collapsible guide accordion */
  .ns-guide-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
    user-select: none;
    border: none;
    background: none;
    padding: 0;
  }
  .ns-guide-toggle:hover {
    text-decoration: underline;
  }
  .ns-guide-toggle .material-symbols-outlined {
    font-size: 0.9rem;
    transition: transform 0.2s;
  }
  .ns-guide-toggle.open .material-symbols-outlined {
    transform: rotate(90deg);
  }
  .ns-guide-content {
    display: none;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--text-light);
  }
  .ns-guide-content.show {
    display: block;
  }
  .ns-guide-content ol {
    margin: 0;
    padding-left: 18px;
  }
  .ns-guide-content li {
    margin-bottom: 4px;
  }
  .ns-guide-content a {
    color: var(--primary);
    text-decoration: underline;
  }
  /* Notification types section — collapsible */
  .ns-types-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .ns-types-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }
  .ns-types-title .material-symbols-outlined.arrow {
    font-size: 1rem;
    transition: transform 0.2s;
    margin-left: auto;
  }
  .ns-types-title.open .arrow {
    transform: rotate(180deg);
  }
  .ns-types-list {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .ns-types-list.show {
    max-height: 300px;
    margin-top: 8px;
  }
  .ns-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  .ns-type-row:last-child { border-bottom: none; }
  .ns-type-label {
    font-size: 0.8125rem;
    color: var(--text-main);
  }
  .ns-type-cb {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
  }
  /* Footer */
  .ns-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .ns-btn-save {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
  }
  .ns-btn-save:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .ns-btn-cancel {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }
  .ns-btn-cancel:hover {
    background: var(--bg);
    color: var(--text-main);
  }

/* --- From: Template_Master_Popup.html --- */
/* Custom Scrollbar for Modal Body */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--neutral-300);
        border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--neutral-400);
    }

/* --- From: Page_Finance_Aging.html --- */
/* ══ Aging Page ══ */
.aging-page { padding: 24px; }

/* Breadcrumb */
.ag-bc { display:flex; align-items:center; gap:6px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); margin-bottom:16px; }
.ag-bc a { color:var(--text-light); text-decoration:none; transition:color .15s; cursor:pointer; }
.ag-bc a:hover { color:var(--primary); }
.ag-bc .ag-bc-current { color:var(--primary); }
.ag-bc .material-symbols-outlined { font-size:14px; }

/* Header */
.ag-page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:16px; }
.ag-page-header h1 { font-size:1.5rem; font-weight:700; color:var(--text-main); margin-bottom:4px; }
.ag-page-header p { font-size:0.8125rem; color:var(--text-light); }

/* Bucket cards */
.aging-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:28px; }
@media (max-width:900px) { .aging-summary { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .aging-summary { grid-template-columns:1fr 1fr; } }
.aging-bucket { border-radius:14px; padding:20px 22px; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.1); position:relative; overflow:hidden; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; }
.aging-bucket:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }
.aging-bucket--active { outline:3px solid rgba(255,255,255,0.6); outline-offset:2px; }
.aging-bucket.b-current { background:linear-gradient(135deg,#059669,#10b981); }
.aging-bucket.b-30 { background:linear-gradient(135deg,#d97706,#f59e0b); }
.aging-bucket.b-60 { background:linear-gradient(135deg,#ea580c,#f97316); }
.aging-bucket.b-90 { background:linear-gradient(135deg,#dc2626,#ef4444); }
.aging-bucket.b-120 { background:linear-gradient(135deg,#7c2d12,#b91c1c); }
.aging-bucket-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; opacity:0.85; margin-bottom:6px; }
.aging-bucket-value { font-size:1.4rem; font-weight:800; line-height:1.1; margin-bottom:6px; }
.aging-bucket-count { font-size:0.7rem; font-weight:600; opacity:0.8; }
.aging-bucket-icon { position:absolute; right:-8px; bottom:-10px; font-size:56px; opacity:0.08; }
@keyframes bucketIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.aging-bucket { animation:bucketIn 0.4s ease-out both; }
.aging-bucket:nth-child(2) { animation-delay:.05s; }
.aging-bucket:nth-child(3) { animation-delay:.1s; }
.aging-bucket:nth-child(4) { animation-delay:.15s; }
.aging-bucket:nth-child(5) { animation-delay:.2s; }

/* Amount color */
.aging-amount { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--red-600); }

/* Grand total bar */
.aging-grand { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:linear-gradient(135deg,var(--primary),#3b6fd4); color:#fff; border-radius:0 0 12px 12px; }
.aging-grand-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.aging-grand-value { font-size:1.25rem; font-weight:800; }

/* Guide section */
.ag-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.ag-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.ag-guide-header:hover { background:var(--bg); }
.ag-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.ag-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.ag-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.ag-guide.open .ag-guide-chevron { transform:rotate(180deg); }
.ag-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.ag-guide.open .ag-guide-body { max-height:1200px; }
.ag-guide-content { padding:0 20px 20px; }
.ag-guide-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.ag-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.ag-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.ag-def-title .material-symbols-outlined { font-size:16px; }
.ag-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.ag-def-formula { font-family:'Segoe UI', monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
/* Workflow steps */
.ag-workflow { margin-top:16px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.ag-workflow-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.ag-workflow-title .material-symbols-outlined { font-size:16px; }
.ag-wf-steps { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.ag-wf-step { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:0.75rem; color:var(--text-main); font-weight:600; }
.ag-wf-step .material-symbols-outlined { font-size:16px; }
.ag-wf-arrow { display:flex; align-items:center; padding:0 4px; color:var(--text-light); font-size:18px; }

/* Footer sync */
.ag-footer-sync { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--surface); border-radius:12px; border:1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,.04); gap:16px; }
.ag-footer-sync-info { display:flex; align-items:center; gap:14px; }
.ag-footer-sync-icon { width:40px; height:40px; border-radius:50%; background:rgba(37,71,139,0.08); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.ag-footer-sync-icon span { font-size:22px; }
.ag-footer-sync-text p { font-size:0.8125rem; font-weight:700; color:var(--text-main); margin:0; }
.ag-footer-sync-text small { font-size:0.6875rem; color:var(--text-light); }
.ag-footer-sync-actions { display:flex; gap:10px; }

/* --- From: Page_Finance_ChartOfAccounts.html --- */
/* ═══════════════════════════════════════════ */
/*  Chart of Accounts — Tree Table Page       */
/* ═══════════════════════════════════════════ */
.coa-page { max-width: 1200px; margin: 0 auto; }

/* ── Seed button (unique gradient) ── */
.coa-btn-seed { background:var(--amber-500, #F59E0B); color:#fff; border-color:var(--amber-500); border-radius:8px; }
.coa-btn-seed:hover { filter:brightness(1.1); }

/* ─── Tree Table ─── */
.coa-table-wrap { background:var(--surface); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.coa-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.coa-table thead th {
    background:var(--bg); color:var(--text-light); font-size:0.6875rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    padding:10px 14px; text-align:left; border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:1;
}
.coa-table tbody td {
    padding:10px 14px; border-bottom:1px solid var(--border-light, rgba(0,0,0,0.04));
    vertical-align:middle;
}
.coa-table tbody tr:hover { background:rgba(37,71,139,0.03); }
.coa-table tbody tr.coa-parent { font-weight:600; background:rgba(37,71,139,0.02); }
.coa-table tbody tr.coa-hidden { display:none; }

/* Toggle expand */
.coa-toggle {
    width:24px; height:24px; border-radius:6px; border:none;
    background:transparent; cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; transition:all 0.2s;
    color:var(--text-light); margin-right:4px; flex-shrink:0;
}
.coa-toggle:hover { background:var(--bg); color:var(--primary); }
.coa-toggle.open span { transform:rotate(90deg); }
.coa-toggle span { font-size:18px; transition:transform 0.2s; }

.coa-cell-name { display:flex; align-items:center; gap:2px; }

/* Account code badge */
.coa-code {
    font-family:'Cascadia Code','Fira Code',monospace; font-weight:700;
    padding:2px 8px; border-radius:6px; font-size:12px;
    background:rgba(37,71,139,0.08); color:var(--primary);
}

/* Type badges */
.coa-type {
    display:inline-block; padding:2px 8px; border-radius:12px;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
}
.coa-type-no { background:var(--blue-bg, rgba(59,130,246,0.1)); color:var(--blue-600, #2563EB); }
.coa-type-co { background:var(--green-bg, rgba(16,185,129,0.1)); color:var(--green-600, #059669); }
.coa-type-lk { background:var(--amber-bg, rgba(245,158,11,0.1)); color:var(--amber-600, #D97706); }

/* Status toggle */
.coa-status-active { color:var(--green-500); }
.coa-status-inactive { color:var(--text-muted); opacity:0.5; }

/* Action buttons */
.coa-act-btn {
    width:28px; height:28px; border-radius:6px; border:none;
    background:transparent; cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; transition:all 0.15s;
    color:var(--text-light);
}
.coa-act-btn:hover { background:var(--bg); color:var(--primary); }
.coa-act-btn.danger:hover { color:var(--danger); }

/* Button styles */
.coa-btn {
    padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600;
    cursor:pointer; border:1px solid var(--border); background:var(--surface);
    color:var(--text-main); display:inline-flex; align-items:center; gap:6px;
    transition:all 0.2s;
}
.coa-btn:hover { background:var(--bg); }
.coa-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.coa-btn-primary:hover { filter:brightness(1.1); }
.coa-btn-seed { background:var(--amber-500, #F59E0B); color:#fff; border-color:var(--amber-500); }
.coa-btn-seed:hover { filter:brightness(1.1); }

/* ─── Toolbar ─── */
.coa-toolbar {
    display:flex; align-items:center; gap:10px;
    padding:12px 0; flex-wrap:wrap;
}
.coa-search {
    width:100%; padding:8px 12px 8px 34px; border-radius:8px;
    border:1px solid var(--border); font-size:13px;
    background:var(--bg); color:var(--text-main); outline:none;
    transition:border-color 0.2s;
}
.coa-search:focus { border-color:var(--primary); }
.coa-filter-select {
    padding:8px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--bg); color:var(--text-main);
    cursor:pointer; outline:none; min-width:140px;
}
.coa-filter-select:focus { border-color:var(--primary); }

/* Empty & Loading use tp-empty from Style_TablePage */

/* ─── Inline Add/Edit Form ─── */
.coa-form-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; animation:khFadeIn 0.2s ease forwards;
}
.coa-form-overlay.hidden { display:none !important; }
.coa-form-card {
    background:var(--surface); width:480px; max-width:92vw;
    border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.2); overflow:hidden;
}
.coa-form-hdr {
    padding:16px 20px; background:var(--primary); color:#fff;
    display:flex; justify-content:space-between; align-items:center;
}
.coa-form-hdr h3 { margin:0; font-size:1rem; font-weight:700; }
.coa-form-body { padding:20px; display:flex; flex-direction:column; gap:14px; }
.coa-form-row { display:flex; flex-direction:column; gap:4px; }
.coa-form-row label { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); }
.coa-form-row input, .coa-form-row select {
    padding:9px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--bg); color:var(--text-main);
}
.coa-form-row input:focus, .coa-form-row select:focus { border-color:var(--primary); outline:none; }
.coa-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.coa-form-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

@media (max-width:768px) {
    .coa-toolbar { flex-direction:column; }
    .coa-search { width:100%; }
    .coa-form-row-2 { grid-template-columns:1fr; }
}

/* --- From: Page_Finance_Dashboard.html --- */
/* =========================================================
   FINANCE DASHBOARD — KPIs, Charts, Tables
   ========================================================= */
.fin-dash { padding: 32px; max-width: 1360px; margin: 0 auto; font-family: var(--font-family, 'Inter', sans-serif); }

/* --- HEADER --- */
.fin-header { margin-bottom: 24px; }
.fin-header h1 { font-size: 1.75rem; font-weight: 800; color: var(--text-main, #121417); margin: 0 0 4px; }
.fin-header p { font-size: 0.875rem; color: var(--text-light, #677183); margin: 0; }
.fin-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fin-header-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.fin-period-select { padding: 8px 14px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-main); cursor: pointer; outline: none; }
.fin-period-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,71,139,0.1); }

/* --- KPI CARDS --- */
.fin-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 1100px) { .fin-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .fin-kpi-grid { grid-template-columns: 1fr 1fr; } }

.fin-kpi { position: relative; overflow: hidden; border-radius: 14px; padding: 22px 24px; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.fin-kpi--income { background: linear-gradient(135deg, var(--green-500), #10b981); }
.fin-kpi--expense { background: linear-gradient(135deg, var(--red-600), var(--red-500)); }
.fin-kpi--balance { background: linear-gradient(135deg, var(--primary), #3b6fd4); }
.fin-kpi--ar { background: linear-gradient(135deg, var(--warning), var(--amber-500)); }
.fin-kpi--ap { background: linear-gradient(135deg, var(--purple-600), #a78bfa); }

.fin-kpi-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: 8px; }
.fin-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.fin-kpi-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 20px; }
.fin-kpi-icon { position: absolute; right: -8px; bottom: -10px; font-size: 64px; opacity: 0.08; }
@keyframes kpiIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
.fin-kpi { animation: kpiIn 0.5s ease-out both; }
.fin-kpi:nth-child(2) { animation-delay: 0.05s; }
.fin-kpi:nth-child(3) { animation-delay: 0.1s; }
.fin-kpi:nth-child(4) { animation-delay: 0.15s; }
.fin-kpi:nth-child(5) { animation-delay: 0.2s; }

/* --- CHARTS ROW --- */
.fin-charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 900px) { .fin-charts-row { grid-template-columns: 1fr; } }

.fin-card { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.fin-card-title { font-size: 0.875rem; font-weight: 700; color: var(--text-main, #121417); margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.fin-card-title .material-symbols-outlined { font-size: 20px; color: var(--primary); }

/* --- CASH FLOW CHART --- */
.cf-chart { display: flex; flex-direction: column; gap: 14px; }
.cf-row { display: flex; align-items: center; gap: 12px; }
.cf-label { width: 60px; font-size: 0.75rem; font-weight: 600; color: var(--text-light, #677183); text-align: right; flex-shrink: 0; }
.cf-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cf-bar-wrap { height: 18px; border-radius: 6px; background: var(--bg); overflow: hidden; position: relative; }
.cf-bar { height: 100%; border-radius: 6px; transition: width 0.8s ease; min-width: 4px; }
.cf-bar--in { background: linear-gradient(90deg, var(--green-500), #34d399); }
.cf-bar--out { background: linear-gradient(90deg, var(--red-600), #f87171); }
.cf-val { font-size: 0.65rem; font-weight: 600; color: var(--text-light); white-space: nowrap; min-width: 60px; text-align: right; }
.cf-legend { display: flex; gap: 20px; margin-top: 10px; justify-content: center; }
.cf-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: var(--text-light); }
.cf-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* --- AGING DONUT --- */
.aging-wrap { display: flex; flex-direction: column; align-items: center; }
.aging-donut { position: relative; width: 180px; height: 180px; margin-bottom: 20px; }
.aging-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aging-donut circle { fill: none; stroke-width: 28; }
.aging-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aging-center-val { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
.aging-center-lbl { font-size: 0.65rem; color: var(--text-light); font-weight: 600; }
.aging-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; }
.aging-leg-item { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-main); font-weight: 500; }
.aging-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.aging-leg-val { margin-left: auto; font-weight: 700; }

/* --- TABLES ROW --- */
.fin-tables-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .fin-tables-row { grid-template-columns: 1fr; } }

.fin-mini-table { width: 100%; border-collapse: collapse; }
.fin-mini-table th { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light, #677183); padding: 10px 12px; border-bottom: 2px solid var(--border); text-align: left; }
.fin-mini-table td { font-size: 0.8rem; padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-main); }
.fin-mini-table tr:last-child td { border-bottom: none; }
.fin-mini-table tr { transition: background 0.15s; }
.fin-mini-table tr:hover { background: var(--bg); }

.fin-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; }
.fin-tag--thu { background: var(--success-bg); color: #166534; }
.fin-tag--chi { background: var(--danger-bg); color: var(--red-700); }
.fin-tag--pending { background: var(--warning-bg); color: var(--amber-700); }
.fin-tag--approved { background: var(--info-bg); color: var(--blue-700); }

.fin-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-amount--pos { color: var(--green-500); }
.fin-amount--neg { color: var(--red-600); }

.fin-more-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 0.8rem; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: none; }
.fin-more-link:hover { text-decoration: underline; }

/* --- QUICK ACTIONS --- */
.fin-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
@media (max-width: 600px) { .fin-quick-grid { grid-template-columns: repeat(2, 1fr); } }
.fin-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface, #fff); cursor: pointer; transition: all 0.2s; text-decoration: none; }
.fin-quick-btn:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(37,71,139,0.1); transform: translateY(-2px); }
.fin-quick-btn .material-symbols-outlined { font-size: 28px; color: var(--primary); }
.fin-quick-btn span:last-child { font-size: 0.78rem; font-weight: 600; color: var(--text-main); }

/* --- LOADING --- */
.fin-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; color: var(--text-light); gap: 10px; }
.fin-loading .material-symbols-outlined { font-size: 24px; }

/* --- FORMULA GUIDE --- */
.fin-formula-card { margin-top: 28px; background: var(--surface, #fff); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); overflow: hidden; font-family: var(--font-family, 'Inter', sans-serif); }
.fin-formula-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.fin-formula-hdr:hover { background: var(--bg); }
.fin-formula-title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--text-main); }
.fin-formula-title .material-symbols-outlined { color: var(--primary); font-size: 20px; }
.fin-formula-body { padding: 20px 24px; }
.fin-formula-group { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; padding-bottom: 6px; font-family: var(--font-family, 'Inter', sans-serif); color: var(--text-main); }
.fin-formula-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; margin-bottom: 24px; }
.fin-formula-item { background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.fin-formula-item-title { font-size: 0.8125rem; font-weight: 700; margin-bottom: 6px; font-family: var(--font-family, 'Inter', sans-serif); color: var(--text-main); }
.fin-formula-item-body { font-size: 0.78rem; color: var(--text-main); line-height: 1.8; font-family: var(--font-family, 'Inter', sans-serif); }
.fin-formula-item-body code { font-family: var(--font-family, 'Inter', sans-serif); font-size: 0.72rem; font-weight: 700; color: var(--primary); background: rgba(37,71,139,0.06); padding: 1px 5px; border-radius: 4px; }
.fin-formula-item-body b { color: var(--text-main); font-weight: 700; }
/* Tabs */
.fin-guide-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); padding: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fin-guide-tab { padding: 12px 20px; font-size: 0.78rem; font-weight: 700; color: var(--text-light); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all 0.2s; font-family: var(--font-family, 'Inter', sans-serif); display: flex; align-items: center; gap: 6px; }
.fin-guide-tab:hover { color: var(--primary); background: rgba(37,71,139,0.03); }
.fin-guide-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.fin-guide-tab .material-symbols-outlined { font-size: 18px; }
.fin-guide-panel { display: none; }
.fin-guide-panel.active { display: block; }
@media (max-width:600px) { .fin-guide-tabs { padding: 0 16px; } .fin-guide-tab { padding: 10px 14px; font-size: 0.72rem; } .fin-formula-body { padding: 16px; } }

/* --- FILTER BAR (copy pattern from Sales Dashboard) --- */
.dash-filter-bar { position: relative; display: inline-flex; margin-bottom: 24px; }
.dash-filter-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); font-size: 0.8125rem; font-weight: 700; color: var(--text-main); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.dash-filter-trigger:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,71,139,0.12); }
.dash-filter-trigger .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.dash-filter-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 380px; padding: 16px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.dash-filter-panel.show { display: block; }
@media (max-width: 768px) { .dash-filter-panel { min-width: calc(100vw - 80px); left: 0; right: 0; } }
.fp-section { padding: 10px 0; border-bottom: 1px solid var(--border); }
.fp-section:last-child { border-bottom: none; padding-bottom: 4px; }
.fp-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin-bottom: 8px; }
.fp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fp-btn { padding: 7px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-main); transition: all 0.15s; text-align: center; font-family: inherit; }
.fp-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.fp-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fp-custom-row { display: flex; align-items: center; gap: 6px; }
.fp-custom-row input[type="date"] { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 0.75rem; border: 1px solid var(--border); font-family: inherit; color: var(--text-main); background: var(--bg); outline: none; }
.fp-custom-row input[type="date"]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,71,139,0.1); }
.fp-apply { padding: 7px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer; border: none; background: var(--primary); color: #fff; transition: all 0.2s; font-family: inherit; flex-shrink: 0; }
.fp-apply:hover { filter: brightness(1.1); }

/* --- NEW CHARTS ROW 2 --- */
.fin-charts-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 900px) { .fin-charts-row-2 { grid-template-columns: 1fr; } }

/* --- BAR CHART HORIZONTAL (Top debtors) --- */
.fin-hbar-chart { display: flex; flex-direction: column; gap: 10px; }
.fin-hbar-row { display: flex; align-items: center; gap: 10px; }
.fin-hbar-label { width: 100px; font-size: 0.72rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; flex-shrink: 0; }
.fin-hbar-track { flex: 1; height: 22px; background: var(--bg); border-radius: 6px; overflow: hidden; position: relative; }
.fin-hbar-fill { height: 100%; border-radius: 6px; transition: width 0.8s ease; min-width: 4px; }
.fin-hbar-val { min-width: 60px; font-size: 0.68rem; font-weight: 700; color: var(--text-main); text-align: right; }

/* --- DONUT CHART 2 (Expense structure) --- */
.fin-donut-wrap { display: flex; flex-direction: column; align-items: center; }
.fin-donut-svg { width: 180px; height: 180px; transform: rotate(-90deg); }
.fin-donut-svg circle { fill: none; stroke-width: 28; }
.fin-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin-donut-center-val { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
.fin-donut-center-lbl { font-size: 0.6rem; color: var(--text-light); font-weight: 600; }
.fin-donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; margin-top: 16px; }
.fin-donut-leg-item { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-main); font-weight: 500; }
.fin-donut-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.fin-donut-leg-val { margin-left: auto; font-weight: 700; }

/* --- TREND LINE CHART --- */
.fin-trend-chart { position: relative; padding: 10px 0; }
.fin-trend-svg { width: 100%; height: 200px; }
.fin-trend-legend { display: flex; gap: 20px; justify-content: center; margin-top: 10px; }
.fin-trend-leg { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: var(--text-light); }
.fin-trend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* --- AR vs AP BAR --- */
.fin-arAp-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.fin-arAp-bar-group { width: 100%; }
.fin-arAp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fin-arAp-label { width: 80px; font-size: 0.78rem; font-weight: 700; text-align: right; flex-shrink: 0; }
.fin-arAp-track { flex: 1; height: 28px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.fin-arAp-fill { height: 100%; border-radius: 8px; transition: width 0.8s ease; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; font-size: 0.68rem; font-weight: 700; color: #fff; }
.fin-arAp-net { text-align: center; font-size: 0.85rem; font-weight: 700; padding: 10px; border-radius: 10px; background: var(--bg); }

/* --- FOOTER SYNC --- */
.fin-footer-sync { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.fin-footer-sync-info { display: flex; align-items: center; gap: 12px; }
.fin-footer-sync-icon .material-symbols-outlined { font-size: 22px; color: var(--primary); }
.fin-footer-sync-text p { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); margin: 0; }
.fin-footer-sync-text small { font-size: 0.72rem; color: var(--text-light); }
.fin-footer-sync-actions { display: flex; gap: 8px; }
.fin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; font-family: inherit; }
.fin-btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
.fin-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* --- From: Page_Finance_Debt.html --- */
/* ══ Debt Page ══ */
.debt-page { padding: 24px; }

/* Breadcrumb */
.debt-bc { display:flex; align-items:center; gap:6px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); margin-bottom:16px; }
.debt-bc a { color:var(--text-light); text-decoration:none; transition:color .15s; cursor:pointer; }
.debt-bc a:hover { color:var(--primary); }
.debt-bc .debt-bc-current { color:var(--primary); }
.debt-bc .material-symbols-outlined { font-size:14px; }

/* Header */
.debt-page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:16px; }
.debt-page-header h1 { font-size:1.5rem; font-weight:700; color:var(--text-main); margin-bottom:4px; }
.debt-page-header p { font-size:0.8125rem; color:var(--text-light); }

/* KPI gradient cards */
.debt-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:768px) { .debt-kpi-row { grid-template-columns:repeat(2,1fr); } }
.debt-kpi { border-radius:14px; padding:20px 22px; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.1); position:relative; overflow:hidden; }
.debt-kpi--ar { background:linear-gradient(135deg, #f59e0b, #d97706); }
.debt-kpi--ap { background:linear-gradient(135deg, #7c3aed, #a78bfa); }
.debt-kpi--overdue { background:linear-gradient(135deg, #dc2626, #ef4444); }
.debt-kpi--net { background:linear-gradient(135deg, var(--primary), #3b6fd4); }
.debt-kpi-lbl { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; opacity:0.85; margin-bottom:6px; }
.debt-kpi-val { font-size:1.5rem; font-weight:800; line-height:1.1; }
.debt-kpi-sub { font-size:0.7rem; opacity:0.7; margin-top:6px; }
.debt-kpi-icon { position:absolute; right:-8px; bottom:-10px; font-size:58px; opacity:0.08; }

/* Tabs */
.debt-tabs { display:flex; gap:0; margin-bottom:0; background:var(--surface); border-radius:12px 12px 0 0; border:1px solid var(--border); border-bottom:none; overflow:hidden; }
.debt-tab { flex:1; padding:14px 24px; font-size:0.875rem; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--text-light); transition:all 0.2s; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-main); }
.debt-tab:hover { background:var(--bg); }
.debt-tab.active { background:var(--primary); color:#fff; }
.debt-tab .material-symbols-outlined { font-size:20px; }
.debt-tab-badge { font-size:0.65rem; font-weight:800; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,0.2); }

/* Amount colors */
.debt-amt { font-weight:700; font-variant-numeric:tabular-nums; }
.debt-amt--danger { color:var(--red-600); }
.debt-amt--success { color:var(--green-500); }

/* Aging section */
.aging-summary-section { padding:24px; }
.aging-summary-title { font-size:0.875rem; font-weight:700; color:var(--text-main); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.aging-summary-title .material-symbols-outlined { font-size:20px; color:var(--primary); }
.aging-bands { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:600px) { .aging-bands { grid-template-columns:repeat(2,1fr); } }
.aging-band { padding:16px; border-radius:10px; border:1px solid var(--border); text-align:center; transition:transform .15s, box-shadow .15s; }
.aging-band:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.aging-band-label { font-size:0.7rem; font-weight:600; color:var(--text-light); margin-bottom:6px; }
.aging-band-value { font-size:1.1rem; font-weight:800; }
.aging-band-bar { height:4px; border-radius:2px; margin-top:8px; }

/* Guide section */
.debt-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.debt-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.debt-guide-header:hover { background:var(--bg); }
.debt-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.debt-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.debt-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.debt-guide.open .debt-guide-chevron { transform:rotate(180deg); }
.debt-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.debt-guide.open .debt-guide-body { max-height:800px; }
.debt-guide-content { padding:0 20px 20px; }
.debt-guide-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.debt-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.debt-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.debt-def-title .material-symbols-outlined { font-size:16px; }
.debt-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.debt-def-formula { font-family:'Segoe UI', monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }

/* Footer sync */
.debt-footer-sync { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--surface); border-radius:12px; border:1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,.04); gap:16px; }
.debt-footer-sync-info { display:flex; align-items:center; gap:14px; }
.debt-footer-sync-icon { width:40px; height:40px; border-radius:50%; background:rgba(37,71,139,0.08); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.debt-footer-sync-icon span { font-size:22px; }
.debt-footer-sync-text p { font-size:0.8125rem; font-weight:700; color:var(--text-main); margin:0; }
.debt-footer-sync-text small { font-size:0.6875rem; color:var(--text-light); }
.debt-footer-sync-actions { display:flex; gap:10px; }

/* --- From: Page_Finance_Journal.html --- */
/* ══ Journal Page ══ */
.jour-page { padding: 24px; }

/* Breadcrumb */
.jour-bc { display:flex; align-items:center; gap:6px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); margin-bottom:16px; }
.jour-bc a { color:var(--text-light); text-decoration:none; transition:color .15s; cursor:pointer; }
.jour-bc a:hover { color:var(--primary); }
.jour-bc .jour-bc-current { color:var(--primary); }
.jour-bc .material-symbols-outlined { font-size:14px; }

/* Header */
.jour-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:16px; }
.jour-header h1 { font-size:1.5rem; font-weight:700; color:var(--text-main); margin-bottom:4px; }
.jour-header p { font-size:0.8125rem; color:var(--text-light); }

/* Amount colors */
.jour-amount { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jour-amount--debit { color:var(--primary); }
.jour-amount--credit { color:var(--green-500); }

/* KPI */
.jour-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-bottom:20px; }
.jour-kpi { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 20px; text-align:center; }
.jour-kpi-val { font-size:1.25rem; font-weight:800; margin-bottom:2px; }
.jour-kpi-label { font-size:0.6875rem; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.04em; }

/* Guide section */
.jour-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.jour-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.jour-guide-header:hover { background:var(--bg); }
.jour-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.jour-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.jour-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.jour-guide.open .jour-guide-chevron { transform:rotate(180deg); }
.jour-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.jour-guide.open .jour-guide-body { max-height:800px; }
.jour-guide-content { padding:0 20px 20px; }
.jour-def-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.jour-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.jour-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.jour-def-title .material-symbols-outlined { font-size:16px; }
.jour-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.jour-def-formula { font-family:'Segoe UI', monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }

/* Footer sync */
.jour-footer-sync { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--surface); border-radius:12px; border:1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,.04); gap:16px; }
.jour-footer-sync-info { display:flex; align-items:center; gap:14px; }
.jour-footer-sync-icon { width:40px; height:40px; border-radius:50%; background:rgba(37,71,139,0.08); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.jour-footer-sync-icon span { font-size:22px; }
.jour-footer-sync-text p { font-size:0.8125rem; font-weight:700; color:var(--text-main); margin:0; }
.jour-footer-sync-text small { font-size:0.6875rem; color:var(--text-light); }
.jour-footer-sync-actions { display:flex; gap:10px; }

/* --- From: Page_Finance_Reimbursement_List.html --- */
.reimb-page { padding: 24px; }
/* Breadcrumb */
.r-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); margin-bottom: 16px; }
.r-breadcrumb a { color: var(--text-light); text-decoration: none; transition: color 0.15s; }
.r-breadcrumb a:hover { color: var(--primary); }
.r-breadcrumb .r-bc-current { color: var(--primary); }
.r-breadcrumb span.material-symbols-outlined { font-size: 14px; }
/* Header */
.reimb-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.reimb-page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.reimb-page-header p { font-size: 0.8125rem; color: var(--text-light); }
.reimb-header-actions { display: flex; align-items: center; gap: 10px; }
.btn-hdr { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.btn-hdr-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-light); }
.btn-hdr-ghost:hover { background: var(--bg); color: var(--text-main); }
.btn-hdr-primary { background: var(--primary); border: none; color: var(--text-inverse); font-weight: 700; box-shadow: 0 4px 12px rgba(37,71,139,0.3); }
.btn-hdr-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-hdr span { font-size: 18px; }
/* KPI Cards */
.r-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.r-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.15s, box-shadow 0.15s; }
.r-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.r-kpi-card.r-kpi-accent { border-bottom: 3px solid var(--primary); }
.r-kpi-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 6px; }
.r-kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.r-kpi-value.r-kpi-green { color: var(--green-500); }
.r-kpi-value.r-kpi-yellow { color: var(--warning); }
.r-kpi-value.r-kpi-blue { color: var(--info); }
.r-kpi-sub { font-size: 0.6875rem; color: var(--text-light); margin-top: 4px; }
@media(max-width:768px) { .r-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Status Tabs */
.r-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.r-status-tab { padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-light); transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.r-status-tab:hover { background: var(--bg); color: var(--text-main); }
.r-status-tab.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.r-status-tab .r-tab-count { background: rgba(0,0,0,0.08); padding: 1px 7px; border-radius: 10px; font-size: 0.625rem; font-weight: 700; }
.r-status-tab.active .r-tab-count { background: rgba(255,255,255,0.25); }
/* Toolbar */
.reimb-toolbar { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.reimb-search-box { flex: 1; min-width: 180px; position: relative; }
.reimb-search-box span.material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-light); }
.reimb-search-box input { width: 100%; padding: 10px 12px 10px 40px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; font-family: var(--font-main); }
.reimb-search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.tb-sep { width: 1px; height: 24px; background: var(--border); }
.tb-select { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; color: var(--text-light); font-family: var(--font-main); cursor: pointer; }
/* Table */
.reimb-table-wrap { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.reimb-table-scroll { overflow-x: auto; }
.reimb-table { width: 100%; border-collapse: collapse; text-align: left; }
.reimb-table thead { background: var(--neutral-50); border-bottom: 1px solid var(--border); }
.reimb-table thead th { padding: 12px 16px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); white-space: nowrap; cursor: pointer; user-select: none; }
.reimb-table thead th:hover { background: #EEF1F6; }
.reimb-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.15s; cursor: pointer; }
.reimb-table tbody tr:hover { background: var(--surface-hover); }
.reimb-table tbody td { padding: 10px 16px; font-size: 0.8125rem; color: var(--text-main); white-space: nowrap; }
.td-c { text-align: center; } .td-r { text-align: right; }
.th-c { text-align: center; } .th-r { text-align: right; }
.cell-code { font-weight: 600; color: var(--primary); cursor: pointer; }
.cell-code:hover { text-decoration: underline; }
.cell-money { font-family: 'Segoe UI', monospace; font-weight: 600; }
.cell-date { font-family: monospace; font-size: 0.75rem; color: var(--text-light); }
.r-badge { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; }
.r-cho-duyet { background: var(--warning-bg); color: var(--warning); } .r-da-duyet { background: var(--success-bg); color: var(--green-500); }
.r-tu-choi { background: var(--danger-bg); color: var(--red-600); } .r-huy { background: var(--neutral-100); color: var(--neutral-500); }
/* act-group, act-btn: now styled globally in Style_TablePage.html */
.reimb-empty { padding: 50px 20px; text-align: center; color: var(--text-light); }
.reimb-empty span { font-size: 48px; color: var(--border); display: block; margin-bottom: 10px; }
/* Diff coloring */
.diff-positive { color: var(--green-500); font-weight: 600; }
.diff-negative { color: var(--red-600); font-weight: 600; }
.diff-zero { color: var(--text-light); }
/* Footer sync */
.r-footer-sync { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); gap: 16px; }
.r-footer-sync-info { display: flex; align-items: center; gap: 14px; }
.r-footer-sync-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(37,71,139,0.08); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.r-footer-sync-icon span { font-size: 22px; }
.r-footer-sync-text p { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); }
.r-footer-sync-text small { font-size: 0.6875rem; color: var(--text-light); }
.r-footer-sync-actions { display: flex; gap: 10px; }
/* Guide */
.r-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.r-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.r-guide-header:hover { background:var(--bg); }
.r-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.r-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.r-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.r-guide.open .r-guide-chevron { transform:rotate(180deg); }
.r-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.r-guide.open .r-guide-body { max-height:1200px; }
.r-guide-content { padding:0 20px 20px; }
.r-def-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.r-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.r-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.r-def-title .material-symbols-outlined { font-size:16px; }
.r-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.r-def-formula { font-family:'Segoe UI',monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
.r-wf { margin-top:16px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.r-wf-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.r-wf-title .material-symbols-outlined { font-size:16px; }
.r-wf-steps { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.r-wf-step { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:0.75rem; color:var(--text-main); font-weight:600; }
.r-wf-step .material-symbols-outlined { font-size:16px; }
.r-wf-arrow { display:flex; align-items:center; padding:0 4px; color:var(--text-light); font-size:18px; }

/* --- From: Page_Finance_Reimbursement_List.html --- */
.reimb-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .25s ease;pointer-events:none}
.reimb-popup-overlay.active{opacity:1;pointer-events:auto}
.reimb-popup-overlay.active .reimb-popup{transform:translateY(0) scale(1)}
.reimb-popup{background:var(--surface);border-radius:16px;width:580px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.25);transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.reimb-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--gradient-primary);color:var(--text-inverse)}
.reimb-popup-header h3{font-size:1.125rem;font-weight:700;margin:0}
.reimb-popup-header .close-btn{width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.2);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
.reimb-popup-header .close-btn:hover{background:rgba(255,255,255,.3)}
.reimb-popup-body{padding:24px;overflow-y:auto;flex:1}
.rfg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.rfg.single{grid-template-columns:1fr}
.rf{display:flex;flex-direction:column;gap:4px}
.rf label{font-size:.75rem;font-weight:600;color:var(--text-main)}
.rf label .req{color:var(--red-500)}
.rf input,.rf select{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.8125rem;background:var(--surface);color:var(--text-main);transition:border .2s}
.rf input:focus,.rf select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.reimb-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);background:var(--surface-alt)}
.rbtn{padding:9px 20px;border-radius:8px;font-size:.8125rem;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:all .2s}
.rbtn-p{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.rbtn-p:hover{opacity:.9}
.rbtn-s{background:var(--surface);color:var(--text-main)}.rbtn-s:hover{background:var(--surface-alt)}

/* --- From: Page_Finance_Report.html --- */
.rpt-page { padding: 32px; max-width: 1360px; margin: 0 auto; }
.rpt-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.rpt-header-left h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.rpt-header-left p { font-size:0.8125rem; color:var(--text-light); margin:0; }
.rpt-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rpt-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:0.8125rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-main); transition:all 0.2s; }
.rpt-btn:hover { border-color:var(--primary); color:var(--primary); }
.rpt-select { padding:7px 12px; border-radius:10px; border:1px solid var(--border); font-size:0.8125rem; font-weight:600; background:var(--surface); color:var(--text-main); cursor:pointer; }

/* TABS */
.rpt-tabs { display:flex; gap:4px; margin-bottom:24px; background:var(--bg); padding:4px; border-radius:12px; }
.rpt-tab { flex:1; text-align:center; padding:10px 16px; border-radius:10px; font-size:0.8125rem; font-weight:700; cursor:pointer; transition:all 0.2s; color:var(--text-light); display:flex; align-items:center; justify-content:center; gap:6px; }
.rpt-tab:hover { color:var(--text-main); }
.rpt-tab--active { background:var(--surface); color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.rpt-tab .material-symbols-outlined { font-size:18px; }

/* PANELS */
.rpt-panel { display:none; }
.rpt-panel--active { display:block; animation:rptFadeIn 0.3s ease; }
@keyframes rptFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* SECTION CARD */
.rpt-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin-bottom:20px; }
.rpt-card-header { padding:18px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.rpt-card-title { font-size:0.9375rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.rpt-card-title .material-symbols-outlined { font-size:20px; color:var(--primary); }
.rpt-card-subtitle { font-size:0.75rem; color:var(--text-light); font-weight:500; }

/* TABLE */
.rpt-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.rpt-table th { padding:10px 20px; text-align:left; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-light); background:var(--bg); border-bottom:1px solid var(--border); }
.rpt-table td { padding:12px 20px; border-bottom:1px solid var(--border); color:var(--text-main); }
.rpt-table tr:last-child td { border-bottom:none; }
.rpt-table tr:hover { background:rgba(37,71,139,0.02); }
.rpt-table .rpt-amount { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.rpt-table .rpt-amount--positive { color:var(--green-500); }
.rpt-table .rpt-amount--negative { color:var(--red-600); }
.rpt-table .rpt-count { font-size:0.6875rem; color:var(--text-light); margin-left:6px; }

/* TOTAL ROW */
.rpt-total-row td { font-weight:800 !important; background:var(--bg); border-top:2px solid var(--border); }
.rpt-grand-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-radius:0 0 14px 14px; }
.rpt-grand-bar--positive { background:linear-gradient(135deg,var(--green-500),#10b981); color:#fff; }
.rpt-grand-bar--negative { background:linear-gradient(135deg,var(--red-600),var(--red-500)); color:#fff; }
.rpt-grand-bar--neutral { background:linear-gradient(135deg,var(--primary),#3b6fd4); color:#fff; }
.rpt-grand-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.rpt-grand-value { font-size:1.25rem; font-weight:800; }

/* BALANCE SHEET GRID */
.bs-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:768px) { .bs-grid { grid-template-columns:1fr; } }
.bs-section-title { font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; padding:12px 20px; margin:0; }
.bs-section-title--assets { color:var(--green-500); background:linear-gradient(90deg,var(--success-bg),transparent); }
.bs-section-title--liab { color:var(--red-600); background:linear-gradient(90deg,var(--danger-bg),transparent); }
.bs-section-title--equity { color:var(--purple-600); background:linear-gradient(90deg,var(--purple-border),transparent); }
.bs-item { display:flex; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); }
.bs-item:last-child { border-bottom:none; }
.bs-item-label { font-size:0.8125rem; color:var(--text-main); }
.bs-item-value { font-size:0.8125rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* CASH FLOW CHART-LIKE TABLE */
.cf-bar-cell { position: relative; height:32px; }
.cf-bar { position:absolute; top:4px; height:24px; border-radius:4px; min-width:2px; transition:width 0.4s ease; }
.cf-bar--in { background:linear-gradient(90deg,var(--green-500),#10b981); left:0; }
.cf-bar--out { background:linear-gradient(90deg,var(--red-600),var(--red-500)); left:0; }

/* LOADING */
.rpt-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; color:var(--text-light); gap:12px; }
.rpt-loading .spin { font-size:32px; opacity:0.3; animation:rptSpin 1s linear infinite; }
@keyframes rptSpin { to { transform:rotate(360deg); } }

/* PERIOD INFO */
.rpt-period-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:20px; font-size:0.6875rem; font-weight:700; background:var(--primary); color:#fff; }
.rpt-timestamp { font-size:0.6875rem; color:var(--text-light); font-style:italic; margin-top:12px; text-align:right; }

/* BREADCRUMB */
.rpt-bc { display:flex; align-items:center; gap:6px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); margin-bottom:16px; }
.rpt-bc a { color:var(--text-light); text-decoration:none; cursor:pointer; transition:color .15s; }
.rpt-bc a:hover { color:var(--primary); }
.rpt-bc .rpt-bc-current { color:var(--primary); }
.rpt-bc .material-symbols-outlined { font-size:14px; }

/* GUIDE */
.rpt-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.rpt-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; cursor:pointer; user-select:none; transition:background .15s; }
.rpt-guide-header:hover { background:var(--bg); }
.rpt-guide-header h3 { font-size:0.9375rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.rpt-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.rpt-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.rpt-guide.open .rpt-guide-chevron { transform:rotate(180deg); }
.rpt-guide-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.rpt-guide.open .rpt-guide-body { max-height:2000px; }
.rpt-guide-content { padding:0 24px 24px; }
.rpt-guide-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; margin-bottom:16px; }
.rpt-def { padding:14px 18px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.rpt-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.rpt-def-title .material-symbols-outlined { font-size:16px; }
.rpt-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.rpt-def-formula { font-family:'Segoe UI',monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
.rpt-wf { margin-top:16px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.rpt-wf-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.rpt-wf-title .material-symbols-outlined { font-size:16px; }
.rpt-wf-steps { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.rpt-wf-step { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:0.75rem; color:var(--text-main); font-weight:600; }
.rpt-wf-step .material-symbols-outlined { font-size:16px; }
.rpt-wf-arrow { display:flex; align-items:center; padding:0 4px; color:var(--text-light); font-size:18px; }

/* FOOTER SYNC */
.rpt-footer-sync { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--surface); border-radius:14px; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.04); gap:16px; }
.rpt-footer-sync-info { display:flex; align-items:center; gap:14px; }
.rpt-footer-sync-icon { width:40px; height:40px; border-radius:50%; background:rgba(37,71,139,0.08); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.rpt-footer-sync-icon span { font-size:22px; }
.rpt-footer-sync-text p { font-size:0.8125rem; font-weight:700; color:var(--text-main); margin:0; }
.rpt-footer-sync-text small { font-size:0.6875rem; color:var(--text-light); }
.rpt-footer-sync-actions { display:flex; gap:10px; }

/* --- From: Page_Finance_VAT_List.html --- */
.vat-page { padding: 24px; }
/* Breadcrumb */
.v-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); margin-bottom: 16px; }
.v-breadcrumb a { color: var(--text-light); text-decoration: none; transition: color 0.15s; }
.v-breadcrumb a:hover { color: var(--primary); }
.v-breadcrumb .v-bc-current { color: var(--primary); }
.v-breadcrumb span.material-symbols-outlined { font-size: 14px; }
/* Header */
.vat-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.vat-page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.vat-page-header p { font-size: 0.8125rem; color: var(--text-light); }
.vat-header-actions { display: flex; align-items: center; gap: 10px; }
.btn-hdr { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.btn-hdr-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-light); }
.btn-hdr-ghost:hover { background: var(--bg); color: var(--text-main); }
.btn-hdr-primary { background: var(--primary); border: none; color: var(--text-inverse); font-weight: 700; box-shadow: 0 4px 12px rgba(37,71,139,0.3); }
.btn-hdr-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-hdr span { font-size: 18px; }
/* KPI Cards */
.v-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.v-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.15s, box-shadow 0.15s; }
.v-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.v-kpi-card.v-kpi-accent { border-bottom: 3px solid var(--primary); }
.v-kpi-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 6px; }
.v-kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.v-kpi-value.v-kpi-green { color: var(--green-500); }
.v-kpi-value.v-kpi-yellow { color: var(--warning); }
.v-kpi-value.v-kpi-blue { color: var(--info); }
.v-kpi-sub { font-size: 0.6875rem; color: var(--text-light); margin-top: 4px; }
@media(max-width:768px) { .v-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Status Tabs */
.v-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.v-status-tab { padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-light); transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.v-status-tab:hover { background: var(--bg); color: var(--text-main); }
.v-status-tab.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.v-status-tab .v-tab-count { background: rgba(0,0,0,0.08); padding: 1px 7px; border-radius: 10px; font-size: 0.625rem; font-weight: 700; }
.v-status-tab.active .v-tab-count { background: rgba(255,255,255,0.25); }
/* Date filter */
.v-date-filter { position: relative; }
.v-date-filter-btn { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; color: var(--text-light); font-family: var(--font-main); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; }
.v-date-filter-btn:hover { border-color: var(--primary); color: var(--text-main); }
.v-date-filter-btn span { font-size: 18px; }
.v-date-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; min-width: 220px; display: none; }
.v-date-dropdown.open { display: block; }
.v-date-opt { padding: 8px 12px; border-radius: 8px; font-size: 0.8125rem; cursor: pointer; transition: background 0.1s; color: var(--text-main); }
.v-date-opt:hover { background: var(--bg); }
.v-date-opt.active { background: rgba(37,71,139,0.08); color: var(--primary); font-weight: 600; }
.v-date-custom { padding: 8px 12px; border-top: 1px solid var(--border); margin-top: 4px; }
.v-date-custom label { font-size: 0.6875rem; font-weight: 600; color: var(--text-light); display: block; margin-bottom: 4px; }
.v-date-custom input[type="date"] { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.75rem; background: var(--bg); color: var(--text-main); font-family: var(--font-main); margin-bottom: 6px; }
.v-date-custom .v-date-apply { width: 100%; padding: 7px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; margin-top: 4px; }
/* Toolbar */
.vat-toolbar { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.vat-search-box { flex: 1; min-width: 180px; position: relative; }
.vat-search-box span.material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-light); }
.vat-search-box input { width: 100%; padding: 10px 12px 10px 40px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; font-family: var(--font-main); }
.vat-search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.tb-sep { width: 1px; height: 24px; background: var(--border); }
.tb-select { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; color: var(--text-light); font-family: var(--font-main); cursor: pointer; }
/* Table */
.vat-table-wrap { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.vat-table-scroll { overflow-x: auto; }
.vat-table { width: 100%; border-collapse: collapse; text-align: left; }
.vat-table thead { background: var(--neutral-50); border-bottom: 1px solid var(--border); }
.vat-table thead th { padding: 12px 16px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); white-space: nowrap; cursor: pointer; user-select: none; }
.vat-table thead th:hover { background: #EEF1F6; }
.vat-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.15s; cursor: pointer; }
.vat-table tbody tr:hover { background: var(--surface-hover); }
.vat-table tbody td { padding: 10px 16px; font-size: 0.8125rem; color: var(--text-main); white-space: nowrap; }
.td-c { text-align: center; } .td-r { text-align: right; }
.th-c { text-align: center; } .th-r { text-align: right; }
.cell-code { font-weight: 600; color: var(--primary); cursor: pointer; }
.cell-code:hover { text-decoration: underline; }
.cell-money { font-family: 'Segoe UI', monospace; font-weight: 600; }
.cell-date { font-family: monospace; font-size: 0.75rem; color: var(--text-light); }
.v-badge { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; }
.v-chua-gui { background: var(--warning-bg); color: var(--warning); } .v-da-gui { background: var(--info-bg); color: var(--info); }
.v-chap-nhan { background: var(--success-bg); color: var(--green-500); } .v-huy { background: var(--danger-bg); color: var(--red-600); }
/* act-group, act-btn: now styled globally in Style_TablePage.html */
/* Pagination */
.vat-empty { padding: 50px 20px; text-align: center; color: var(--text-light); }
.vat-empty span { font-size: 48px; color: var(--border); display: block; margin-bottom: 10px; }
/* Footer sync */
.v-footer-sync { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); gap: 16px; }
.v-footer-sync-info { display: flex; align-items: center; gap: 14px; }
.v-footer-sync-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(37,71,139,0.08); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.v-footer-sync-icon span { font-size: 22px; }
.v-footer-sync-text p { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); }
.v-footer-sync-text small { font-size: 0.6875rem; color: var(--text-light); }
.v-footer-sync-actions { display: flex; gap: 10px; }
/* Guide */
.v-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.v-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.v-guide-header:hover { background:var(--bg); }
.v-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.v-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.v-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.v-guide.open .v-guide-chevron { transform:rotate(180deg); }
.v-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.v-guide.open .v-guide-body { max-height:1200px; }
.v-guide-content { padding:0 20px 20px; }
.v-def-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.v-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.v-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.v-def-title .material-symbols-outlined { font-size:16px; }
.v-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.v-def-formula { font-family:'Segoe UI',monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
.v-wf { margin-top:16px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.v-wf-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.v-wf-title .material-symbols-outlined { font-size:16px; }
.v-wf-steps { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.v-wf-step { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:0.75rem; color:var(--text-main); font-weight:600; }
.v-wf-step .material-symbols-outlined { font-size:16px; }
.v-wf-arrow { display:flex; align-items:center; padding:0 4px; color:var(--text-light); font-size:18px; }

/* --- From: Page_Finance_VAT_List.html --- */
.vat-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .25s ease;pointer-events:none}
.vat-popup-overlay.active{opacity:1;pointer-events:auto}
.vat-popup-overlay.active .vat-popup{transform:translateY(0) scale(1)}
.vat-popup{background:var(--surface);border-radius:16px;width:640px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.25);transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.vat-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--gradient-primary);color:var(--text-inverse)}
.vat-popup-header h3{font-size:1.125rem;font-weight:700;margin:0}
.vat-popup-header .close-btn{width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.2);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
.vat-popup-header .close-btn:hover{background:rgba(255,255,255,.3)}
.vat-popup-body{padding:24px;overflow-y:auto;flex:1}
.vfg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.vfg.tri{grid-template-columns:1fr 1fr 1fr}.vfg.single{grid-template-columns:1fr}
.vf{display:flex;flex-direction:column;gap:4px}
.vf label{font-size:.75rem;font-weight:600;color:var(--text-main)}
.vf label .req{color:var(--red-500)}
.vf input,.vf select{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.8125rem;background:var(--surface);color:var(--text-main);transition:border .2s}
.vf input:focus,.vf select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.vat-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);background:var(--surface-alt)}
.vbtn{padding:9px 20px;border-radius:8px;font-size:.8125rem;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:all .2s}
.vbtn-p{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.vbtn-p:hover{opacity:.9}
.vbtn-s{background:var(--surface);color:var(--text-main)}.vbtn-s:hover{background:var(--surface-alt)}

/* --- From: Page_Finance_Voucher_List.html --- */
/* ══ Tab 2 levels ══ */
    .vch-tabs { display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
    .vch-tab-row { display:flex; gap:4px; padding:4px; background:var(--surface-2,#f1f5f9); border-radius:10px; }
    .vch-tab-row + .vch-tab-row { margin-top:6px; background:var(--surface-1,#f8fafc); border-radius:8px; flex-wrap:wrap; }
    .vch-tab-btn {
        padding:8px 18px; border:none; background:transparent; border-radius:8px;
        font-size:0.875rem; font-weight:500; cursor:pointer; color:var(--text-secondary,#64748b);
        transition:all .2s; white-space:nowrap; display:flex; align-items:center; gap:6px;
    }
    .vch-tab-btn:hover { background:rgba(255,255,255,.7); color:var(--text-primary,#1e293b); }
    .vch-tab-btn.active { background:#fff; color:var(--primary,#2563eb); box-shadow:0 1px 3px rgba(0,0,0,.1); font-weight:600; }
    .vch-tab-row:first-child .vch-tab-btn.active { background:var(--primary,#2563eb); color:#fff; }
    .vch-tab-count { font-size:0.75rem; background:rgba(0,0,0,.06); padding:1px 7px; border-radius:20px; font-weight:600; }
    .vch-tab-row:first-child .vch-tab-btn.active .vch-tab-count { background:rgba(255,255,255,.25); color:#fff; }
    /* ══ Disabled action buttons ══ */
    .btn-tbl-disabled { opacity:0.3; cursor:not-allowed !important; pointer-events:auto; }
    .btn-tbl-disabled:hover { background:transparent !important; }
    .btn-tbl-disabled span { color:var(--text-secondary,#94a3b8) !important; }
    /* ══ PDF Preview Overlay ══ */
    .pdf-preview-overlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(15,23,42,0.85); backdrop-filter:blur(6px); display:flex; flex-direction:column; animation:pdfFadeIn .25s ease; }
    @keyframes pdfFadeIn { from{opacity:0} to{opacity:1} }
    .pdf-preview-overlay.hidden { display:none !important; }
    .pdf-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:linear-gradient(135deg,#1e293b 0%,#334155 100%); border-bottom:1px solid rgba(255,255,255,0.08); }
    .pdf-toolbar-left { display:flex; align-items:center; gap:12px; }
    .pdf-toolbar-title { color:#fff; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
    .pdf-toolbar-badge { padding:3px 10px; border-radius:20px; font-size:0.7rem; font-weight:700; text-transform:uppercase; }
    .pdf-toolbar-right { display:flex; align-items:center; gap:8px; }
    .pdf-tb-btn { padding:8px 16px; border-radius:8px; border:none; font-size:0.8125rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .2s; }
    .pdf-tb-btn--print { background:rgba(255,255,255,0.12); color:#fff; }
    .pdf-tb-btn--print:hover { background:rgba(255,255,255,0.2); }
    .pdf-tb-btn--download { background:rgba(59,130,246,0.2); color:#93c5fd; }
    .pdf-tb-btn--download:hover { background:rgba(59,130,246,0.35); }
    .pdf-tb-btn--close { background:rgba(239,68,68,0.15); color:#fca5a5; }
    .pdf-tb-btn--close:hover { background:rgba(239,68,68,0.3); }
    .pdf-tb-btn .material-symbols-outlined { font-size:18px; }
    .pdf-iframe-wrap { flex:1; display:flex; justify-content:center; padding:20px; overflow:auto; background:var(--neutral-200,#e2e8f0); }
    .pdf-iframe-wrap iframe { width:100%; max-width:900px; height:100%; border:none; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.4); background:#fff; }
    @media (max-width:768px) { .pdf-toolbar { padding:10px 12px; flex-wrap:wrap; gap:8px; } .pdf-iframe-wrap { padding:8px; } .pdf-iframe-wrap iframe { max-width:100%; border-radius:4px; } .pdf-tb-btn span.btn-label { display:none; } }

/* --- From: Page_Finance_Voucher_List.html --- */
*{box-sizing:border-box}body{margin:0;padding:20px;font-family:"Times New Roman",serif;color:#000;background:#fff;overflow-x:hidden;max-width:100%}body>*{max-width:100%!important;overflow-x:hidden!important}table{width:100%!important;max-width:100%!important;table-layout:fixed!important;word-wrap:break-word;overflow-wrap:break-word}td,th{word-wrap:break-word;overflow-wrap:break-word;overflow:hidden}img{max-width:100%!important;height:auto!important}div,p,span{max-width:100%!important}@media print{body{padding:0}}

/* --- From: Page_Finance_Voucher_List.html --- */
body{margin:0;padding:20px;font-family:"Times New Roman",serif}

/* --- From: Page_Finance_Voucher_View.html --- */
body{margin:0;padding:16px;font-family:"Times New Roman",serif;color:#000;background:#fff}'
                        + '@media print{body{padding:0}}

/* --- From: Popup_Finance_Advance.html --- */
/* ===== ADVANCE POPUP ===== */
.adv-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; }
.adv-popup-card { background:var(--surface,#fff); border-radius:16px; width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:advPopIn 0.3s ease; }
@keyframes advPopIn { from { opacity:0; transform:scale(0.95) translateY(10px); } }

.adv-popup-hdr { padding:20px 24px; background:linear-gradient(135deg,var(--info),var(--blue-500)); border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; }
.adv-popup-hdr h3 { font-size:1.125rem; font-weight:800; color:#fff; margin:0; }
.adv-popup-hdr p { font-size:0.75rem; color:rgba(255,255,255,0.7); margin:4px 0 0; }
.adv-popup-close { width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.adv-popup-close:hover { background:rgba(255,255,255,0.25); color:#fff; }

.adv-popup-body { padding:24px; overflow-y:auto; flex:1; }
.adv-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:600px) { .adv-form-grid { grid-template-columns:1fr; } }

.adv-field { display:flex; flex-direction:column; gap:4px; }
.adv-field--full { grid-column:span 2; }
@media (max-width:600px) { .adv-field--full { grid-column:span 1; } }
.adv-field label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light,#677183); }
.adv-field label .req { color:var(--red-600); }
.adv-field input, .adv-field select, .adv-field textarea {
    padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:0.875rem;
    font-family:inherit; background:var(--bg); color:var(--text-main,#121417); outline:none; transition:border 0.2s;
}
.adv-field input:focus, .adv-field select:focus, .adv-field textarea:focus { border-color:var(--info); box-shadow:0 0 0 2px rgba(37,99,235,0.1); }
.adv-field-money { font-size:1.25rem !important; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

.adv-popup-sep { grid-column:span 2; border-top:1px solid var(--border-light); margin:4px 0; }
@media (max-width:600px) { .adv-popup-sep { grid-column:span 1; } }

.adv-popup-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; background:var(--bg); border-radius:0 0 16px 16px; }
.adv-btn-cancel { padding:10px 20px; border-radius:8px; font-size:0.875rem; font-weight:500; background:transparent; color:var(--text-light); border:none; cursor:pointer; }
.adv-btn-cancel:hover { background:var(--border-light); color:var(--text-main); }
.adv-btn-save { padding:10px 24px; border-radius:8px; font-size:0.875rem; font-weight:700; background:var(--info); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(37,99,235,0.3); transition:all 0.2s; }
.adv-btn-save:hover { background:#1d4ed8; transform:translateY(-1px); }
.adv-btn-save:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }

/* --- From: Popup_Finance_Payment.html --- */
/* ===== PAYMENT POPUP ===== */
.finp-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; }
.finp-popup-card { background:var(--surface,#fff); border-radius:16px; width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:finpPopIn 0.3s ease; }
@keyframes finpPopIn { from { opacity:0; transform:scale(0.95) translateY(10px); } }

.finp-popup-hdr { padding:20px 24px; background:linear-gradient(135deg,var(--red-600),var(--red-500)); border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; }
.finp-popup-hdr h3 { font-size:1.125rem; font-weight:800; color:#fff; margin:0; }
.finp-popup-hdr p { font-size:0.75rem; color:rgba(255,255,255,0.7); margin:4px 0 0; }
.finp-popup-close { width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.finp-popup-close:hover { background:rgba(255,255,255,0.25); color:#fff; }

.finp-popup-body { padding:24px; overflow-y:auto; flex:1; }
.finp-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:600px) { .finp-form-grid { grid-template-columns:1fr; } }

.finp-field { display:flex; flex-direction:column; gap:4px; }
.finp-field--full { grid-column:span 2; }
@media (max-width:600px) { .finp-field--full { grid-column:span 1; } }
.finp-field label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light,#677183); }
.finp-field label .req { color:var(--red-600); }
.finp-field input, .finp-field select, .finp-field textarea {
    padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:0.875rem;
    font-family:inherit; background:var(--bg); color:var(--text-main,#121417); outline:none; transition:border 0.2s;
}
.finp-field input:focus, .finp-field select:focus, .finp-field textarea:focus { border-color:var(--red-600); box-shadow:0 0 0 2px rgba(220,38,38,0.1); }
.finp-field-money { font-size:1.25rem !important; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

.finp-popup-sep { grid-column:span 2; border-top:1px solid var(--border-light); margin:4px 0; }
@media (max-width:600px) { .finp-popup-sep { grid-column:span 1; } }

.finp-popup-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; background:var(--bg); border-radius:0 0 16px 16px; }
.finp-btn-cancel { padding:10px 20px; border-radius:8px; font-size:0.875rem; font-weight:500; background:transparent; color:var(--text-light); border:none; cursor:pointer; }
.finp-btn-cancel:hover { background:var(--border-light); color:var(--text-main); }
.finp-btn-save { padding:10px 24px; border-radius:8px; font-size:0.875rem; font-weight:700; background:var(--red-600); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(220,38,38,0.3); transition:all 0.2s; }
.finp-btn-save:hover { background:#b91c1c; transform:translateY(-1px); }
.finp-btn-save:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }

/* Balance Warning */
.finp-balance-warn { padding:10px 14px; border-radius:8px; background:var(--warning-bg); border:1px solid #fcd34d; font-size:0.8rem; color:var(--amber-700); display:none; align-items:center; gap:8px; grid-column:span 2; }
@media (max-width:600px) { .finp-balance-warn { grid-column:span 1; } }
.finp-balance-warn .material-symbols-outlined { font-size:18px; }

/* PO Installment info bar */
.finp-installment-bar { padding:10px 24px; background:var(--warning-bg,#fffbeb); border-bottom:1px solid var(--border-light); font-size:0.78rem; color:var(--amber-700,#92400e); line-height:1.6; word-break:break-word; overflow-wrap:break-word; }
.finp-installment-bar b { color:var(--text-main); }
@media (max-width:600px) { .finp-installment-bar { padding:10px 16px; font-size:0.72rem; } }

/* Installment header override */
.finp-popup-hdr--dot1 { background:linear-gradient(135deg,#dc2626,#ef4444) !important; }
.finp-popup-hdr--dot2 { background:linear-gradient(135deg,#d97706,#f59e0b) !important; }

/* --- From: Popup_Finance_Receipt.html --- */
/* ===== RECEIPT POPUP ===== */
.fin-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; box-sizing:border-box; }
.fin-popup-card { background:var(--surface,#fff); border-radius:16px; width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:finPopIn 0.3s ease; overflow:hidden; }
@keyframes finPopIn { from { opacity:0; transform:scale(0.95) translateY(10px); } }

.fin-popup-hdr { padding:20px 24px; background:linear-gradient(135deg,var(--green-500),#10b981); border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; }
.fin-popup-hdr h3 { font-size:1.125rem; font-weight:800; color:#fff; margin:0; }
.fin-popup-hdr p { font-size:0.75rem; color:rgba(255,255,255,0.7); margin:4px 0 0; }
.fin-popup-close { width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.fin-popup-close:hover { background:rgba(255,255,255,0.25); color:#fff; }

.fin-popup-body { padding:24px; overflow-y:auto; overflow-x:hidden; flex:1; max-width:100%; box-sizing:border-box; }
.fin-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:100%; box-sizing:border-box; overflow:hidden; }
@media (max-width:600px) { .fin-form-grid { grid-template-columns:1fr; } }

.fin-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fin-field--full { grid-column:span 2; }
@media (max-width:600px) { .fin-field--full { grid-column:span 1; } }
.fin-field label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light,#677183); }
.fin-field label .req { color:var(--red-600); }
.fin-field input, .fin-field select, .fin-field textarea {
    padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:0.875rem;
    font-family:inherit; background:var(--bg); color:var(--text-main,#121417); outline:none; transition:border 0.2s;
    width:100%; box-sizing:border-box; min-width:0;
}
.fin-field input:focus, .fin-field select:focus, .fin-field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(5,150,105,0.1); }
.fin-field-money { font-size:1.125rem !important; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; width:100%; max-width:100%; box-sizing:border-box; }
.fin-money-display { font-size:0.8rem; font-weight:700; color:var(--green-500); text-align:right; padding:4px 14px 0; min-height:20px; }

.fin-popup-sep { grid-column:span 2; border-top:1px solid var(--border-light); margin:4px 0; }
@media (max-width:600px) { .fin-popup-sep { grid-column:span 1; } }

.fin-popup-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; background:var(--bg); border-radius:0 0 16px 16px; flex-wrap:wrap; }
.fin-btn-cancel { padding:10px 20px; border-radius:8px; font-size:0.875rem; font-weight:500; background:transparent; color:var(--text-light); border:none; cursor:pointer; }
.fin-btn-cancel:hover { background:var(--border-light); color:var(--text-main); }
.fin-btn-save { padding:10px 24px; border-radius:8px; font-size:0.875rem; font-weight:700; background:var(--green-500); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(5,150,105,0.3); transition:all 0.2s; }
.fin-btn-save:hover { background:var(--green-700); transform:translateY(-1px); }
.fin-btn-save:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; max-width:100%; box-sizing:border-box; }
.op-collapse .fin-form-grid { max-width:100%; overflow:hidden; box-sizing:border-box; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }

/* Installment bar responsive */
.fin-installment-bar { padding:10px 24px; background:var(--info-bg,#eff6ff); border-bottom:1px solid var(--border-light); font-size:0.78rem; color:var(--info,#1d4ed8); line-height:1.6; word-break:break-word; overflow-wrap:break-word; }
.fin-installment-bar b { color:var(--text-main); }
@media (max-width:600px) { .fin-installment-bar { padding:10px 16px; font-size:0.72rem; } }

/* TK công nợ highlight */
.fin-tk-info { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; background:rgba(37,71,139,0.04); border:1px solid rgba(37,71,139,0.1); margin-top:4px; font-size:0.72rem; color:var(--text-light); }
.fin-tk-info .material-symbols-outlined { font-size:16px; color:var(--primary); }

/* Installment header overrides */
.fin-popup-hdr--dot1 { background:linear-gradient(135deg,#059669,#10b981) !important; }
.fin-popup-hdr--dot2 { background:linear-gradient(135deg,#d97706,#f59e0b) !important; }

/* --- From: Page_HR_Dashboard.html --- */
/* =========================================================
   HR DASHBOARD — Clean, Modern, KPI-rich
   ========================================================= */
.hr-dash { padding:24px; max-width:1400px; margin:0 auto; }
.hr-dash-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.hr-dash-hdr h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.hr-dash-hdr p { font-size:0.8rem; color:var(--text-light); margin-top:2px; }

/* KPI Grid */
.hr-kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px; }
.hr-kpi { padding:20px; border-radius:14px; background:#fff; border:1px solid var(--border-light,#f0f0f0); position:relative; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.hr-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.hr-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.hr-kpi--total::before { background:linear-gradient(90deg,var(--blue-500),#60a5fa); }
.hr-kpi--active::before { background:linear-gradient(90deg,var(--green-500),#34d399); }
.hr-kpi--probation::before { background:linear-gradient(90deg,var(--amber-500),#fbbf24); }
.hr-kpi--resigned::before { background:linear-gradient(90deg,var(--neutral-500),var(--neutral-400)); }
.hr-kpi--leave::before { background:linear-gradient(90deg,var(--purple-500),#a78bfa); }
.hr-kpi--birthday::before { background:linear-gradient(90deg,#ec4899,#f472b6); }
.hr-kpi-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.hr-kpi--total .hr-kpi-icon { background:var(--blue-bg); color:var(--blue-500); }
.hr-kpi--active .hr-kpi-icon { background:var(--green-bg); color:var(--green-500); }
.hr-kpi--probation .hr-kpi-icon { background:var(--amber-bg); color:var(--amber-500); }
.hr-kpi--resigned .hr-kpi-icon { background:var(--neutral-100); color:var(--neutral-500); }
.hr-kpi--leave .hr-kpi-icon { background:var(--purple-bg); color:var(--purple-500); }
.hr-kpi--birthday .hr-kpi-icon { background:#fdf2f8; color:#ec4899; }
.hr-kpi-val { font-size:1.75rem; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; }
.hr-kpi-label { font-size:0.75rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }

/* Grid layout */
.hr-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
@media (max-width:900px) { .hr-grid { grid-template-columns:1fr; } }
.hr-grid--3 { grid-template-columns:repeat(3, 1fr); }
@media (max-width:1100px) { .hr-grid--3 { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .hr-grid--3 { grid-template-columns:1fr; } }

/* Card */
.hr-card { background:#fff; border-radius:14px; border:1px solid var(--border-light,#f0f0f0); overflow:hidden; }
.hr-card-hdr { padding:16px 20px; border-bottom:1px solid var(--border-light,#f0f0f0); display:flex; justify-content:space-between; align-items:center; }
.hr-card-hdr h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.hr-card-hdr h3 span { font-size:18px; }
.hr-card-body { padding:20px; }

/* Dept chart */
.hr-dept-bars { display:flex; flex-direction:column; gap:10px; }
.hr-dept-row { display:flex; align-items:center; gap:12px; }
.hr-dept-name { font-size:0.8rem; font-weight:600; color:var(--text-main); width:100px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr-dept-bar-bg { flex:1; height:24px; background:var(--neutral-100); border-radius:6px; overflow:hidden; position:relative; }
.hr-dept-bar-fill { height:100%; border-radius:6px; transition:width 0.6s ease; display:flex; align-items:center; padding-left:8px; }
.hr-dept-bar-fill span { font-size:0.7rem; font-weight:700; color:#fff; }
.hr-dept-count { font-size:0.8rem; font-weight:700; color:var(--text-main); width:24px; text-align:right; }

/* Table mini */
.hr-mini-tbl { width:100%; border-collapse:collapse; }
.hr-mini-tbl th { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); padding:8px 12px; text-align:left; border-bottom:1px solid var(--border-light,#f0f0f0); }
.hr-mini-tbl td { font-size:0.8rem; color:var(--text-main); padding:10px 12px; border-bottom:1px solid var(--neutral-50); }
.hr-mini-tbl tr:last-child td { border-bottom:none; }
.hr-mini-tbl tr:hover td { background:#f8faff; }

/* Badges */
.hr-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:0.7rem; font-weight:700; }
.hr-badge--green { background:var(--green-bg); color:var(--green-500); }
.hr-badge--yellow { background:var(--amber-bg); color:var(--warning); }
.hr-badge--red { background:var(--red-bg); color:var(--red-600); }
.hr-badge--gray { background:var(--neutral-100); color:var(--neutral-500); }
.hr-badge--blue { background:var(--blue-bg); color:var(--blue-500); }
.hr-badge--purple { background:var(--purple-bg); color:var(--purple-600); }

/* Empty state */
.hr-empty { padding:32px; text-align:center; color:var(--text-light); }
.hr-empty span { font-size:40px; display:block; margin-bottom:8px; opacity:0.3; }
.hr-empty p { font-size:0.8rem; }

/* Avatar */
.hr-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--blue-500),var(--purple-500)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; flex-shrink:0; }
.hr-name-cell { display:flex; align-items:center; gap:10px; }
.hr-name-cell .name { font-weight:600; }
.hr-name-cell .dept { font-size:0.7rem; color:var(--text-light); }

/* Loading */
.hr-loading { display:flex; align-items:center; justify-content:center; padding:60px; }
.hr-loading .spinner { width:32px; height:32px; border:3px solid var(--neutral-200); border-top-color:var(--blue-500); border-radius:50%; animation:hrSpin 0.8s linear infinite; }
@keyframes hrSpin { to { transform:rotate(360deg); } }

/* --- From: Page_HR_Employee_List.html --- */
.hr-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.hr-popup-overlay.active { display:flex; }
.hr-popup-box { background:#fff; border-radius:16px; width:96%; max-width:720px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 48px rgba(0,0,0,0.2); animation:hrPopIn 0.25s ease; }
@keyframes hrPopIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.hr-popup-hdr { padding:20px 24px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg, var(--primary), var(--info)); border-radius:16px 16px 0 0; }
.hr-popup-hdr h3 { font-size:1.1rem; font-weight:800; color:#fff; }
.hr-popup-hdr p { font-size:0.75rem; color:rgba(255,255,255,0.7); margin-top:2px; }
.hr-popup-close { background:rgba(255,255,255,0.15); border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.hr-popup-close:hover { background:rgba(255,255,255,0.3); }
.hr-popup-body { padding:24px; overflow-y:auto; flex:1; }
.hr-popup-footer { padding:16px 24px; border-top:1px solid var(--border-light); background:var(--neutral-50); border-radius:0 0 16px 16px; display:flex; justify-content:flex-end; gap:10px; }
.hr-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px) { .hr-form-grid { grid-template-columns:1fr; } }
.hr-form-group { display:flex; flex-direction:column; }
.hr-form-group.full-width { grid-column:1/-1; }
.hr-form-group label { font-size:0.72rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.hr-form-group label .req { color:var(--red-500); margin-left:2px; }
.hr-form-group input, .hr-form-group select { padding:10px 14px; border:1px solid var(--border-light); border-radius:10px; font-size:0.85rem; background:var(--neutral-50); outline:none; transition:border 0.2s, box-shadow 0.2s; }
.hr-form-group input:focus, .hr-form-group select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.1); background:#fff; }
.hr-form-group input[readonly] { background:var(--neutral-50); color:var(--text-light); cursor:not-allowed; }
.hr-form-sep { grid-column:1/-1; border-bottom:1px solid var(--border-light); margin:4px 0; }
.hr-form-section { grid-column:1/-1; font-size:0.75rem; font-weight:800; color:var(--text-main); text-transform:uppercase; letter-spacing:0.06em; padding-top:4px; display:flex; align-items:center; gap:6px; }
.hr-form-section span { font-size:16px; color:var(--primary); }
.hr-btn-save { padding:10px 24px; border:none; border-radius:10px; font-size:0.85rem; font-weight:700; color:#fff; background:var(--primary); cursor:pointer; transition:all 0.2s; }
.hr-btn-save:hover { filter:brightness(1.1); transform:translateY(-1px); }
.hr-btn-save:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.hr-btn-cancel { padding:10px 24px; border:1px solid var(--border-light); border-radius:10px; font-size:0.85rem; font-weight:600; color:var(--text-main); background:#fff; cursor:pointer; transition:background 0.2s; }
.hr-btn-cancel:hover { background:var(--neutral-100); }
/* Chức vụ combo */
.hr-chucvu-wrap { position:relative; }
.hr-chucvu-wrap select { width:100%; }
.hr-chucvu-wrap .hr-chucvu-add { display:none; gap:6px; margin-top:6px; }
.hr-chucvu-wrap .hr-chucvu-add.show { display:flex; }
.hr-chucvu-wrap .hr-chucvu-add input { flex:1; padding:8px 12px; border:1px dashed var(--primary); border-radius:8px; font-size:0.8rem; background:#f0f7ff; }
.hr-chucvu-wrap .hr-chucvu-add button { padding:8px 14px; border:none; border-radius:8px; font-size:0.75rem; font-weight:700; background:var(--primary); color:#fff; cursor:pointer; white-space:nowrap; }
.hr-auto-preview { font-size:0.7rem; color:var(--primary); font-weight:600; margin-top:2px; font-style:italic; }

/* --- From: Page_HR_Leave.html --- */
.lv-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; transition:opacity 0.25s; pointer-events:none; }
.lv-popup-overlay.active { opacity:1; pointer-events:auto; }
.lv-popup-overlay.active .lv-popup { transform:translateY(0) scale(1); }
.lv-popup { background:var(--surface,#fff); border-radius:16px; width:580px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,0.25); transform:translateY(20px) scale(0.95); transition:transform 0.3s cubic-bezier(.4,0,.2,1); overflow:hidden; }
.lv-popup-hdr { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); background:var(--gradient-primary); color:#fff; border-radius:16px 16px 0 0; }
.lv-popup-hdr h3 { font-size:1.1rem; font-weight:700; margin:0; }
.lv-popup-hdr .lv-subtitle { font-size:0.75rem; opacity:0.75; margin-top:2px; }
.lv-popup-hdr .close-btn { width:32px; height:32px; border-radius:8px; border:none; background:rgba(255,255,255,0.2); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.lv-popup-hdr .close-btn:hover { background:rgba(255,255,255,0.3); }
.lv-popup-body { padding:24px; overflow-y:auto; flex:1; }
.lv-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:500px) { .lv-grid { grid-template-columns:1fr; } }
.lv-field { display:flex; flex-direction:column; gap:4px; }
.lv-field.full { grid-column:1/-1; }
.lv-field label { font-size:0.75rem; font-weight:600; color:var(--text-main); }
.lv-field label .req { color:var(--red-600); }
.lv-field input,.lv-field select,.lv-field textarea { padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.8125rem; background:var(--surface,#fff); color:var(--text-main); outline:none; transition:border 0.2s,box-shadow 0.2s; }
.lv-field input:focus,.lv-field select:focus,.lv-field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.lv-field textarea { resize:vertical; min-height:70px; font-family:inherit; }
.lv-popup-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--border); background:var(--surface-alt); border-radius:0 0 16px 16px; }
.lv-btn { padding:9px 20px; border-radius:8px; font-size:0.8125rem; font-weight:600; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
.lv-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.lv-btn-primary:hover { opacity:0.9; }
.lv-btn-secondary { background:var(--surface,#fff); color:var(--text-main); }
.lv-btn-secondary:hover { background:var(--surface-alt); }
.lv-btn:disabled { opacity:0.5; cursor:not-allowed; }
.lv-days-info { font-size:0.75rem; color:var(--primary); font-weight:600; margin-top:4px; }

/* --- From: Page_HR_Payroll.html --- */
/* =========================================================
   PAYROLL PAGE
   ========================================================= */
.pay-page { padding:24px; max-width:1400px; margin:0 auto; }
.pay-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.pay-hdr h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.pay-hdr-right { display:flex; align-items:center; gap:10px; }
.pay-month-picker { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:6px 14px; }
.pay-month-picker select { border:none; background:transparent; font-size:0.875rem; font-weight:600; color:var(--text-main); outline:none; cursor:pointer; }
.pay-btn { padding:8px 18px; border-radius:8px; font-size:0.8rem; font-weight:700; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.pay-btn--calc { background:var(--blue-500); color:#fff; box-shadow:0 2px 8px rgba(59,130,246,0.3); }
.pay-btn--calc:hover { background:var(--info); transform:translateY(-1px); }
.pay-btn--approve { background:var(--green-500); color:#fff; box-shadow:0 2px 8px rgba(5,150,105,0.3); }
.pay-btn--approve:hover { background:var(--green-700); }

/* KPI row */
.pay-kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:20px; }
.pay-kpi { background:#fff; padding:18px; border-radius:12px; border:1px solid var(--border-light,#f0f0f0); }
.pay-kpi-val { font-size:1.25rem; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; }
.pay-kpi-label { font-size:0.7rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-top:4px; }
.pay-kpi--blue .pay-kpi-val { color:var(--blue-500); }
.pay-kpi--green .pay-kpi-val { color:var(--green-500); }
.pay-kpi--red .pay-kpi-val { color:var(--red-600); }

/* Table */
.pay-table-wrap { background:#fff; border-radius:14px; border:1px solid var(--border-light,#f0f0f0); overflow-x:auto; }
.pay-table { width:100%; border-collapse:collapse; min-width:1000px; }
.pay-table th { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); padding:12px 10px; text-align:right; background:#fafbfc; border-bottom:2px solid var(--border-light,#f0f0f0); position:sticky; top:0; }
.pay-table th:first-child, .pay-table th:nth-child(2) { text-align:left; }
.pay-table td { font-size:0.8rem; color:var(--text-main); padding:10px; border-bottom:1px solid #f5f5f5; text-align:right; font-variant-numeric:tabular-nums; }
.pay-table td:first-child, .pay-table td:nth-child(2) { text-align:left; }
.pay-table tr:hover td { background:#f8faff; }
.pay-table .total-row td { font-weight:800; background:#f0f7ff; border-top:2px solid var(--blue-500); }
.pay-table .col-name { font-weight:600; }
.pay-table .col-deduct { color:var(--red-600); }
.pay-table .col-net { color:var(--green-500); font-weight:800; font-size:0.875rem; }

.pay-badge { display:inline-flex; padding:2px 8px; border-radius:12px; font-size:0.65rem; font-weight:700; }
.pay-badge--approved { background:var(--green-bg); color:var(--green-500); }
.pay-badge--draft { background:var(--amber-bg); color:var(--warning); }

.pay-empty { padding:48px; text-align:center; color:var(--text-light); }
.pay-empty span { font-size:48px; display:block; margin-bottom:8px; opacity:0.3; }

/* --- From: Page_HR_Profile.html --- */
/* ═══ HR Profile Page ═══ */
.hrp-page { max-width: 1400px; margin: 0 auto; }

/* Header */
.hrp-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.hrp-header-left h1 {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.5rem; font-weight: 800; color: var(--text-main);
}
.hrp-header-left h1 .material-symbols-outlined {
    font-size: 28px; background: var(--gradient-primary);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hrp-header-left p { color: var(--text-light); font-size: 0.85rem; margin-top: 4px; }

.hrp-actions { display: flex; gap: 8px; }

/* Search & Filters */
.hrp-filters {
    display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
    background: var(--surface); border-radius: var(--radius-lg);
    border: 1px solid var(--border); padding: 16px;
}
.hrp-filter-group { flex: 1; min-width: 180px; }
.hrp-filter-group label {
    display: block; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-light); margin-bottom: 6px;
}
.hrp-filter-group input,
.hrp-filter-group select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 0.85rem;
    background: var(--neutral-50); color: var(--text-main);
    transition: border-color 0.2s;
}
.hrp-filter-group input:focus,
.hrp-filter-group select:focus {
    border-color: var(--primary); outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}
.hrp-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--text-muted);
}
.hrp-search-wrapper { position: relative; }
.hrp-search-wrapper input { padding-left: 36px; }

/* View toggle */
.hrp-view-toggle {
    display: flex; border-radius: var(--radius-sm);
    border: 1px solid var(--border); overflow: hidden;
    background: var(--surface);
}
.hrp-view-btn {
    padding: 8px 10px; border: none; background: transparent;
    color: var(--text-light); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center;
}
.hrp-view-btn.active {
    background: var(--primary-light); color: var(--primary);
}

/* Employee Grid */
.hrp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
@media (max-width: 768px) {
    .hrp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Employee Card */
.hrp-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}
.hrp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.hrp-card-body {
    padding: 24px; display: flex; flex-direction: column;
    align-items: center; text-align: center;
}

/* Avatar */
.hrp-avatar-wrap { position: relative; margin-bottom: 16px; }
.hrp-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; color: var(--primary);
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.hrp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hrp-status-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 3px solid var(--surface);
}
.hrp-status-dot.online { background: var(--success); }
.hrp-status-dot.offline { background: var(--neutral-400); }
.hrp-status-dot.leave { background: var(--warning); }

/* Info */
.hrp-card-name {
    font-size: 1.05rem; font-weight: 800; color: var(--text-main);
    margin-bottom: 2px;
}
.hrp-card:hover .hrp-card-name { color: var(--primary); }
.hrp-card-role {
    font-size: 0.7rem; font-weight: 700; color: var(--secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.hrp-card-dept {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--primary-light); color: var(--primary);
    font-size: 0.7rem; font-weight: 600; margin-bottom: 16px;
}
.hrp-card-dept .material-symbols-outlined { font-size: 14px; }

/* Card footer */
.hrp-card-footer {
    width: 100%; border-top: 1px solid var(--border-light);
    padding-top: 12px; display: flex; justify-content: space-between;
    align-items: center;
}
.hrp-badge {
    font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
    border-radius: var(--radius-pill); display: inline-block;
}
.hrp-badge-active { background: var(--success-bg); color: var(--green-600); }
.hrp-badge-leave { background: var(--warning-bg); color: var(--warning); }
.hrp-badge-trial { background: var(--info-bg); color: var(--info); }
.hrp-badge-quit { background: var(--danger-bg); color: var(--danger); }
.hrp-card-id { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }

/* Pagination */
.hrp-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 32px; flex-wrap: wrap; gap: 12px;
}
.hrp-pagination p { font-size: 0.85rem; color: var(--text-light); }
.hrp-pagination p strong { color: var(--text-main); }
.hrp-pagination-btns { display: flex; gap: 4px; }
.hrp-page-btn {
    width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; font-weight: 600; font-size: 0.85rem;
    color: var(--text-main); transition: all 0.2s;
}
.hrp-page-btn:hover:not(.active):not(:disabled) {
    background: var(--neutral-50); border-color: var(--primary);
}
.hrp-page-btn.active {
    background: var(--primary); color: var(--white);
    border-color: var(--primary); box-shadow: var(--shadow-sm);
}
.hrp-page-btn:disabled { opacity: 0.3; cursor: default; }

/* Loading & Empty */
.hrp-loading, .hrp-empty {
    text-align: center; padding: 60px 20px; color: var(--text-light);
}
.hrp-loading .material-symbols-outlined,
.hrp-empty .material-symbols-outlined {
    font-size: 48px; display: block; margin-bottom: 12px;
}
.hrp-loading .material-symbols-outlined { animation: pulse 1.5s infinite; }

/* --- From: Page_HR_Recruitment.html --- */
/* ===== HR RECRUITMENT ===== */
.rec-wrapper { padding: 24px; max-width: 1440px; margin: 0 auto; }

/* Header */
.rec-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.rec-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin: 0; display: flex; align-items: center; gap: 10px; }
.rec-header h1 .material-symbols-outlined { font-size: 28px; color: var(--primary); }
.rec-header p { font-size: 0.8125rem; color: var(--text-light); margin: 4px 0 0; }
.rec-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.rec-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,71,139,0.25); }
.rec-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.rec-btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text-main); }
.rec-btn-outline:hover { background: var(--bg); }
.rec-btn-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* KPI Strip */
.rec-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 900px) { .rec-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .rec-kpi-strip { grid-template-columns: 1fr; } }
.rec-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.rec-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec-kpi-icon .material-symbols-outlined { font-size: 22px; color: #fff; }
.rec-kpi-icon.ic-open { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.rec-kpi-icon.ic-interviewing { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.rec-kpi-icon.ic-hired { background: linear-gradient(135deg, #10b981, #34d399); }
.rec-kpi-icon.ic-total { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.rec-kpi-info {}
.rec-kpi-value { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
.rec-kpi-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }

/* View Toggle */
.rec-view-toggle { margin-bottom: 20px; display: flex; gap: 0; background: var(--bg); border-radius: 10px; padding: 3px; width: fit-content; border: 1px solid var(--border); }
.rec-view-btn { padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--text-light); transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.rec-view-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.rec-view-btn .material-symbols-outlined { font-size: 18px; }

/* ===== KANBAN ===== */
.kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-height: 500px; }
@media (max-width: 1200px) { .kanban-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .kanban-board { grid-template-columns: 1fr; } }

.kanban-col { background: var(--bg); border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; min-height: 300px; }
.kanban-col-hdr { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.kanban-col-title { font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-open { background: #3b82f6; }
.dot-interview { background: #f59e0b; }
.dot-evaluate { background: #8b5cf6; }
.dot-done { background: #10b981; }
.kanban-col-count { font-size: 0.7rem; font-weight: 700; background: var(--surface); padding: 2px 8px; border-radius: 20px; color: var(--text-light); border: 1px solid var(--border); }
.kanban-col-body { flex: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

/* Kanban Card */
.kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; transition: all 0.2s; position: relative; }
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.kanban-card-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.kanban-card-dept { font-size: 0.7rem; color: var(--text-light); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.kanban-card-dept .material-symbols-outlined { font-size: 14px; }
.kanban-card-meta { display: flex; align-items: center; justify-content: space-between; }
.kanban-card-tag { font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.tag-fulltime { background: rgba(59,130,246,0.1); color: #2563eb; }
.tag-parttime { background: rgba(245,158,11,0.1); color: #d97706; }
.tag-intern { background: rgba(139,92,246,0.1); color: #7c3aed; }
.tag-contract { background: rgba(16,185,129,0.1); color: #059669; }
.kanban-card-count { font-size: 0.7rem; color: var(--text-light); display: flex; align-items: center; gap: 4px; }
.kanban-card-count .material-symbols-outlined { font-size: 14px; }
.kanban-card-date { font-size: 0.65rem; color: var(--text-light); margin-top: 6px; }

/* ===== TABLE VIEW ===== */
.rec-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rec-table th { padding: 12px 14px; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); background: var(--bg); border-bottom: 2px solid var(--border); white-space: nowrap; }
.rec-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light, #f3f4f6); color: var(--text-main); }
.rec-table tr:hover td { background: var(--surface-hover, #f9fafb); }
.rec-table .td-right { text-align: right; }

/* Status Badge */
.rec-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
.rec-status.s-DANG_TUYEN { background: rgba(59,130,246,0.1); color: #2563eb; }
.rec-status.s-PHONG_VAN { background: rgba(245,158,11,0.1); color: #d97706; }
.rec-status.s-DANH_GIA { background: rgba(139,92,246,0.1); color: #7c3aed; }
.rec-status.s-NHAN_VIEC { background: rgba(16,185,129,0.1); color: #059669; }
.rec-status.s-TU_CHOI { background: rgba(239,68,68,0.1); color: #dc2626; }
.rec-status.s-HUY { background: rgba(107,114,128,0.1); color: #6b7280; }

/* Empty / Loading */
.rec-loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-light); font-size: 0.875rem; gap: 10px; }
.rec-loading .material-symbols-outlined { animation: rec-spin 1s linear infinite; }
@keyframes rec-spin { to { transform: rotate(360deg); } }
.rec-empty { text-align: center; padding: 32px; color: var(--text-light); font-size: 0.8125rem; }

/* ===== MODAL ===== */
.rec-modal-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; align-items: center; justify-content: center; }
.rec-modal-backdrop.open { display: flex; }
.rec-modal { background: var(--surface); border-radius: 16px; width: 95%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 48px rgba(0,0,0,0.15); }
.rec-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.rec-modal-hdr h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.rec-modal-close { background: none; border: none; cursor: pointer; color: var(--text-light); padding: 4px; border-radius: 6px; }
.rec-modal-close:hover { background: var(--bg); }
.rec-modal-body { padding: 24px; }
.rec-form-group { margin-bottom: 16px; }
.rec-form-group label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.rec-form-group label .req { color: #ef4444; }
.rec-form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; font-family: inherit; color: var(--text-main); background: var(--surface); outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.rec-form-input:focus { border-color: var(--primary); }
.rec-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rec-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }

/* Action buttons */
.kanban-card-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.kanban-card:hover .kanban-card-actions { display: flex; }
.kanban-card-actions button { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px; cursor: pointer; color: var(--text-light); }
.kanban-card-actions button:hover { background: var(--surface); color: var(--primary); }
.kanban-card-actions button .material-symbols-outlined { font-size: 16px; }

/* --- From: Page_HR_Timekeeping.html --- */
/* =========================================================
   TIMEKEEPING — Monthly Grid
   ========================================================= */
.tk-page { padding:24px; max-width:1400px; margin:0 auto; }
.tk-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.tk-hdr h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.tk-hdr-right { display:flex; align-items:center; gap:12px; }
.tk-month-picker { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:6px 14px; }
.tk-month-picker select { border:none; background:transparent; font-size:0.875rem; font-weight:600; color:var(--text-main); outline:none; cursor:pointer; }

/* KPI row */
.tk-kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:20px; }
.tk-kpi { background:#fff; padding:16px; border-radius:12px; border:1px solid var(--border-light,#f0f0f0); text-align:center; }
.tk-kpi-val { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.tk-kpi-label { font-size:0.7rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-top:4px; }

/* Table */
.tk-table-wrap { background:#fff; border-radius:14px; border:1px solid var(--border-light,#f0f0f0); overflow-x:auto; }
.tk-table { width:100%; border-collapse:collapse; min-width:800px; }
.tk-table th { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); padding:12px 14px; text-align:left; background:#fafbfc; border-bottom:2px solid var(--border-light,#f0f0f0); position:sticky; top:0; }
.tk-table th.num { text-align:center; }
.tk-table td { font-size:0.8125rem; color:var(--text-main); padding:10px 14px; border-bottom:1px solid #f5f5f5; }
.tk-table tr:hover td { background:#f8faff; }
.tk-table td.num { text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
.tk-table td.warn { color:var(--amber-500); }
.tk-table td.good { color:var(--green-500); }
.tk-table td.bad { color:var(--red-600); }

.tk-emp-cell { display:flex; align-items:center; gap:10px; }
.tk-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--blue-500),#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; flex-shrink:0; }
.tk-emp-name { font-weight:600; font-size:0.8125rem; }
.tk-emp-dept { font-size:0.7rem; color:var(--text-light); }

.tk-badge { display:inline-flex; padding:2px 8px; border-radius:12px; font-size:0.65rem; font-weight:700; }
.tk-badge--ok { background:var(--green-bg); color:var(--green-500); }
.tk-badge--draft { background:var(--amber-bg); color:var(--warning); }

.tk-empty { padding:40px; text-align:center; color:var(--text-light); }
.tk-empty span { font-size:48px; display:block; margin-bottom:8px; opacity:0.3; }

/* Import popup */
.tki-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity 0.25s;pointer-events:none; }
.tki-overlay.active { opacity:1;pointer-events:auto; }
.tki-overlay.active .tki-popup { transform:translateY(0) scale(1); }
.tki-popup { background:var(--surface,#fff);border-radius:16px;width:900px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.25);transform:translateY(20px) scale(0.95);transition:transform 0.3s cubic-bezier(.4,0,.2,1);overflow:hidden; }
.tki-header { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--gradient-primary);color:#fff; }
.tki-header h3 { font-size:1.125rem;font-weight:700;margin:0; }
.tki-header .tki-sub { font-size:0.75rem;opacity:0.75;margin-top:2px; }
.tki-close { width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,0.2);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background 0.2s; }
.tki-close:hover { background:rgba(255,255,255,0.3); }
.tki-body { padding:24px;overflow-y:auto;flex:1; }
.tki-footer { display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);background:var(--surface-alt); }
.tki-btn { padding:9px 20px;border-radius:8px;font-size:0.8125rem;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px; }
.tki-btn-primary { background:var(--primary,#4f46e5);color:#fff;border-color:var(--primary,#4f46e5); }
.tki-btn-primary:hover { opacity:0.9; }
.tki-btn-secondary { background:var(--surface,#fff);color:var(--text-main); }
.tki-btn-secondary:hover { background:var(--surface-alt); }
.tki-btn:disabled { opacity:0.5;cursor:not-allowed; }

/* Upload zone */
.tki-upload-zone { border:2px dashed var(--border);border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--surface-alt); }
.tki-upload-zone:hover,.tki-upload-zone.dragover { border-color:var(--primary,#4f46e5);background:#eef2ff; }
.tki-upload-zone .material-symbols-outlined { font-size:48px;color:var(--primary,#4f46e5);opacity:0.6; }
.tki-upload-zone p { margin:8px 0 0;font-size:0.8125rem;color:var(--text-light); }
.tki-upload-zone .tki-file-info { margin-top:12px;font-size:0.75rem;color:var(--primary,#4f46e5);font-weight:600; }

/* Preview table */
.tki-preview-wrap { margin-top:16px;border:1px solid var(--border-light);border-radius:12px;overflow-x:auto;max-height:400px;overflow-y:auto; }
.tki-preview-table { width:100%;border-collapse:collapse;min-width:700px;font-size:0.8rem; }
.tki-preview-table th { font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--text-light);padding:10px 12px;text-align:left;background:#fafbfc;border-bottom:2px solid #f0f0f0;position:sticky;top:0;z-index:1; }
.tki-preview-table td { padding:8px 12px;border-bottom:1px solid #f5f5f5;font-variant-numeric:tabular-nums; }
.tki-preview-table tr:hover td { background:#f8faff; }
.tki-preview-table td input { width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:4px;font-size:0.8rem;transition:border 0.2s; }
.tki-preview-table td input:focus { border-color:var(--primary,#4f46e5);outline:none;background:#fff; }
.tki-preview-table td input[type=number] { text-align:right;font-variant-numeric:tabular-nums; }
.tki-preview-stats { margin-top:12px;font-size:0.8rem;color:var(--text-light);display:flex;gap:16px; }
.tki-preview-stats strong { color:var(--text-main); }

/* --- From: Popup_HR_Contract.html --- */
.hdc-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.hdc-popup-overlay.active { opacity: 1; pointer-events: auto; }
.hdc-popup-overlay.active .hdc-popup { transform: translateY(0) scale(1); }
.hdc-popup {
    background: var(--surface, #fff); border-radius: 16px; width: 720px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.hdc-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); color: #fff;
}
.hdc-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.hdc-popup-header .hdc-subtitle { font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }
.hdc-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    transition: background 0.2s;
}
.hdc-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.hdc-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.hdc-section { margin-bottom: 20px; }
.hdc-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
}
.hdc-section-title span { font-size: 16px; }
.hdc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hdc-grid.single { grid-template-columns: 1fr; }
@media (max-width: 500px) { .hdc-grid { grid-template-columns: 1fr; } }
.hdc-field { display: flex; flex-direction: column; gap: 4px; }
.hdc-field.full-width { grid-column: 1 / -1; }
.hdc-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.hdc-field label .req { color: var(--red-600); }
.hdc-field input, .hdc-field select, .hdc-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface, #fff); color: var(--text-main);
    transition: border 0.2s, box-shadow 0.2s; outline: none;
}
.hdc-field input:focus, .hdc-field select:focus, .hdc-field textarea:focus {
    border-color: var(--primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.hdc-field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.hdc-field input[type=number] { font-variant-numeric: tabular-nums; text-align: right; }
.hdc-popup-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.hdc-footer-left { display: flex; gap: 8px; }
.hdc-footer-right { display: flex; gap: 8px; }
.hdc-btn {
    padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.hdc-btn-primary { background: var(--primary, #4f46e5); color: #fff; border-color: var(--primary, #4f46e5); }
.hdc-btn-primary:hover { opacity: 0.9; }
.hdc-btn-secondary { background: var(--surface, #fff); color: var(--text-main); }
.hdc-btn-secondary:hover { background: var(--surface-alt); }
.hdc-btn-renew { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.hdc-btn-renew:hover { opacity: 0.9; }
.hdc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Renew banner */
.hdc-renew-banner {
    display: none; padding: 12px 16px; border-radius: 10px;
    background: var(--green-bg); border: 1px solid var(--green-border); margin-bottom: 16px;
    font-size: 0.8rem; color: var(--green-700);
}
.hdc-renew-banner strong { font-weight: 700; }
/* Add-new dropdown input */
.hdc-select-wrap { display: flex; gap: 6px; }
.hdc-select-wrap select { flex: 1; }
.hdc-select-wrap .hdc-add-btn {
    padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface, #fff); cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all 0.2s;
    color: var(--primary); font-size: 18px;
}
.hdc-select-wrap .hdc-add-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Dynamic salary rows */
.hdc-salary-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hdc-salary-row label { font-size: 0.75rem; font-weight: 500; color: var(--text-main); min-width: 130px; white-space: nowrap; }
.hdc-salary-row input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; text-align: right; outline: none; }
.hdc-salary-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.hdc-salary-row .hdc-remove-field {
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: var(--red-50, #fff1f2); color: var(--red-500); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: all 0.2s;
}
.hdc-salary-row .hdc-remove-field:hover { background: var(--red-500); color: #fff; }
.hdc-add-field-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border: 1px dashed var(--border); border-radius: 8px;
    background: transparent; cursor: pointer; font-size: 0.75rem; color: var(--primary);
    transition: all 0.2s; margin-top: 4px;
}
.hdc-add-field-btn:hover { background: var(--primary); color: #fff; border-style: solid; }
/* File upload area */
.hdc-file-area { display: flex; flex-direction: column; gap: 8px; }
.hdc-file-upload-row { display: flex; gap: 8px; align-items: center; }
.hdc-file-upload-row input[type=url] { flex: 1; }
.hdc-upload-btn {
    padding: 8px 14px; border: 1px solid var(--primary); border-radius: 8px;
    background: var(--primary-bg, #eef2ff); color: var(--primary); cursor: pointer;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.hdc-upload-btn:hover { background: var(--primary); color: #fff; }
.hdc-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hdc-file-info { font-size: 0.72rem; color: var(--text-light); display: flex; align-items: center; gap: 4px; }
.hdc-file-info a { color: var(--primary); text-decoration: none; }
.hdc-file-info a:hover { text-decoration: underline; }

/* --- From: Popup_HR_HO_SO.html --- */
/* Collapsible sections */
.op-collapse { border:1px solid var(--border,#eee); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main,#1a1a2e); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt,#f7f8fa); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100,#eef0f2); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border,#eee); }

/* --- From: Component_ColumnManager.html --- */
/* ===== COLUMN MANAGER STYLES ===== */
.col-mgr-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; font-weight: 500; color: var(--text-light);
    cursor: pointer; transition: all 0.2s;
}
.col-mgr-btn:hover { background: var(--bg); color: var(--text-main); }
.col-mgr-btn span { font-size: 18px; }
.col-mgr-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--danger); color: #fff;
    border-radius: 10px; font-size: 0.625rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Panel Overlay */
.col-mgr-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.2); backdrop-filter: blur(2px);
    z-index: 900; display: none;
}
.col-mgr-overlay.active { display: block; }

/* Panel */
.col-mgr-panel {
    position: fixed; top: 0; right: -380px; bottom: 0;
    width: 360px; background: var(--surface);
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    z-index: 901; display: flex; flex-direction: column;
    transition: right 0.3s ease;
}
.col-mgr-panel.open { right: 0; }

.col-mgr-panel-hdr {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50);
}
.col-mgr-panel-hdr h4 {
    font-size: 0.9375rem; font-weight: 700; color: var(--text-main);
}
.col-mgr-panel-close {
    width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%; background: transparent;
    color: var(--text-light); cursor: pointer;
}
.col-mgr-panel-close:hover { background: var(--danger-bg); color: var(--danger); }

/* Search */
.col-mgr-search {
    padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.col-mgr-search input {
    width: 100%; padding: 8px 12px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.8125rem; font-family: var(--font-main);
}
.col-mgr-search input:focus { outline: none; border-color: var(--primary); }

/* Groups */
.col-mgr-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.col-mgr-group { border-bottom: 1px solid var(--border-light); }
.col-mgr-group-hdr {
    padding: 10px 20px; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; transition: background 0.15s;
}
.col-mgr-group-hdr:hover { background: var(--neutral-50); }
.col-mgr-group-title {
    font-size: 0.8125rem; font-weight: 600; color: var(--text-main);
    display: flex; align-items: center; gap: 6px;
}
.col-mgr-group-title .arrow {
    font-size: 16px; color: var(--text-light); transition: transform 0.2s;
}
.col-mgr-group.expanded .arrow { transform: rotate(90deg); }
.col-mgr-group-count {
    font-size: 0.6875rem; color: var(--text-light);
    padding: 2px 8px; background: var(--bg); border-radius: 10px;
}
.col-mgr-group-items {
    padding: 0 20px 8px 20px; display: none;
}
.col-mgr-group.expanded .col-mgr-group-items { display: block; }
.col-mgr-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; cursor: pointer;
}
.col-mgr-item input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer;
}
.col-mgr-item label {
    font-size: 0.8125rem; color: var(--text-main); cursor: pointer; flex: 1;
}
.col-mgr-item .col-mgr-field-key {
    font-size: 0.625rem; color: var(--text-light); font-family: monospace;
}

/* Footer */
.col-mgr-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; gap: 12px;
    background: var(--neutral-50);
}
.col-mgr-footer button {
    padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.col-mgr-btn-reset {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-light);
}
.col-mgr-btn-reset:hover { background: var(--bg); }
.col-mgr-btn-apply {
    background: var(--primary); border: none; color: var(--text-inverse);
    flex: 1;
}
.col-mgr-btn-apply:hover { background: var(--primary-hover); }

/* Header Context Menu */
.th-ctx-menu {
    position: absolute; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 180px;
    z-index: 800; padding: 4px 0; display: none;
}
.th-ctx-menu.active { display: block; }
.th-ctx-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 0.8125rem; color: var(--text-main);
    cursor: pointer; transition: background 0.15s;
}
.th-ctx-item:hover { background: #F0F4FF; }
.th-ctx-item span { font-size: 16px; color: var(--text-light); }
.th-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Sticky columns */
.sticky-col { position: sticky; left: 0; z-index: 2; background: inherit; }
.sticky-col-2 { position: sticky; left: 48px; z-index: 2; background: inherit; }

/* ===== INLINE SORT ICONS ===== */
.th-sort {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
}
.th-sort-arrows {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 0; line-height: 0; opacity: 0.35; transition: opacity 0.2s;
}
.th-sort:hover .th-sort-arrows { opacity: 0.7; }
.th-sort-arrows .arr-up, .th-sort-arrows .arr-down {
    font-size: 12px; line-height: 1; color: var(--text-light); transition: color 0.15s;
}
/* Active sort states */
.th-sort.sort-asc .th-sort-arrows { opacity: 1; }
.th-sort.sort-asc .arr-up { color: var(--primary); font-weight: 700; }
.th-sort.sort-desc .th-sort-arrows { opacity: 1; }
.th-sort.sort-desc .arr-down { color: var(--primary); font-weight: 700; }
th.th-sorted { background: var(--blue-bg) !important; }

/* ===== VIEW TOGGLE (Table/Card) ===== */
.view-toggle { display: flex; gap: 2px; background: var(--bg); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.view-toggle-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: transparent; color: var(--text-light);
    cursor: pointer; transition: all 0.2s; border: none;
}
.view-toggle-btn:hover { color: var(--text-main); }
.view-toggle-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.view-toggle-btn span { font-size: 20px; }

/* ===== CARD VIEW ===== */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px; padding: 20px;
}
.data-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 18px 20px; transition: all 0.2s; cursor: pointer; position: relative;
}
.data-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: var(--primary); }
.data-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.data-card-code { font-weight: 700; color: var(--primary); font-size: 0.9375rem; }
.data-card-body { display: flex; flex-direction: column; gap: 6px; }
.data-card-row { display: flex; justify-content: space-between; font-size: 0.8125rem; }
.data-card-label { color: var(--text-light); }
.data-card-val { color: var(--text-main); font-weight: 500; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); }

/* --- From: Component_DocView.html --- */
/* ====== LAYOUT ====== */
.dv-container {
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.dv-container.sidebar-collapsed { grid-template-columns: 40px 1fr 1fr; }
.dv-container.sidebar-collapsed .dv-sidebar { overflow: hidden; padding: 0; border: none; }
.dv-container.sidebar-collapsed .dv-sidebar > *:not(.dv-restore-inner) { display: none; }

/* ====== SIDEBAR ====== */
.dv-sidebar {
    display: flex; flex-direction: column; border-right: 1px solid var(--border);
    background: var(--surface, #fff); overflow: hidden; transition: all 0.3s;
}
.dv-sidebar-header { padding: 14px 12px 8px; display: flex; align-items: center; justify-content: space-between; }
.dv-sidebar-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-light); display: flex; align-items: center; gap: 6px;
}
.dv-sidebar-title span { font-size: 18px; }
.dv-sidebar-toggle {
    border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px;
    color: var(--text-light); font-size: 14px; flex-shrink: 0; transition: all 0.2s;
}
.dv-sidebar-toggle:hover { background: var(--bg-section); color: var(--primary); }

/* Restore toggle */
/* Restore button: shown inside sidebar when collapsed */
.dv-restore-inner {
    display: none; width: 100%; height: 100%;
    align-items: center; justify-content: center;
    cursor: pointer; background: transparent; border: none;
    color: var(--text-light); transition: all 0.2s;
}
.dv-restore-inner:hover { color: var(--primary); background: var(--bg-section, #F0F4FA); }
.dv-container.sidebar-collapsed .dv-restore-inner { display: flex; }
/* Hide old floating button */
.dv-restore-toggle { display: none !important; }

.dv-sidebar-search {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.75rem; background: var(--surface, #fff);
    outline: none; transition: border-color 0.2s;
}
.dv-sidebar-search:focus { border-color: var(--primary); }
.dv-sidebar-list { flex: 1; overflow-y: auto; padding: 8px; }

/* Sidebar card */
.dv-sidebar-card {
    padding: 12px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid transparent; margin-bottom: 6px;
    transition: all 0.2s; background: var(--bg-section, #F8FAFC);
}
.dv-sidebar-card:hover { border-color: var(--primary); background: #EFF4FB; }
.dv-sidebar-card.active { border-color: var(--primary); background: #E8EFF9; box-shadow: 0 2px 8px rgba(37,71,139,0.1); }
.dv-sidebar-card-code { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dv-sidebar-card-code span:first-child { font-size: 0.75rem; font-weight: 700; color: var(--text-main); font-family: 'Segoe UI', monospace; }
.dv-mini-badge { font-size: 0.5625rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.03em; }
.dv-mini-st-approved { background: var(--success-bg); color: #166534; }
.dv-mini-st-draft { background: var(--neutral-100); color: var(--neutral-500); }
.dv-mini-st-sent { background: var(--info-bg); color: var(--blue-700); }
.dv-mini-st-rejected { background: var(--danger-bg); color: var(--red-700); }
.dv-mini-st-warning { background: var(--warning-bg); color: var(--amber-700); }
.dv-sidebar-card-customer { font-size: 0.6875rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-sidebar-card-total { font-size: 0.8125rem; font-weight: 700; color: var(--primary); font-family: 'Segoe UI', monospace; }
.dv-sidebar-card-date { font-size: 0.625rem; color: var(--text-light); margin-top: 2px; opacity: 0.8; }
.dv-sidebar-empty { text-align: center; padding: 40px 16px; color: var(--text-light); font-size: 0.75rem; }
.dv-sidebar-empty span { font-size: 40px; display: block; margin-bottom: 8px; opacity: 0.3; }

/* ====== CENTER PANEL ====== */
.dv-center {
    overflow-y: auto; padding: 28px 24px; background: var(--bg-section, #F8FAFC);
    border-right: 1px solid var(--border);
}

/* Top bar */
.dv-topbar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.dv-back-btn {
    border: none; background: var(--surface, #fff); color: var(--text-light);
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; border: 1px solid var(--border);
}
.dv-back-btn:hover { color: var(--primary); border-color: var(--primary); }
.dv-title-group { flex: 1; }
.dv-title { font-size: 1.125rem; font-weight: 800; color: var(--text-main); }
.dv-subtitle { font-size: 0.6875rem; color: var(--text-light); margin-top: 2px; }
.dv-status-badge {
    font-size: 0.6875rem; font-weight: 700; padding: 4px 12px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.dv-st-approved { background: var(--success-bg); color: #166534; }
.dv-st-draft { background: var(--neutral-100); color: var(--neutral-500); }
.dv-st-sent { background: var(--info-bg); color: var(--blue-700); }
.dv-st-rejected { background: var(--danger-bg); color: var(--red-700); }
.dv-st-warning { background: var(--warning-bg); color: var(--amber-700); }

/* Section card */
.dv-section {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.dv-section-title {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--primary); margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.dv-section-title span { font-size: 18px; }

/* Info grid */
.dv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-info-item { min-width: 0; }
.dv-info-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 2px; }
.dv-info-value { font-size: 0.8125rem; color: var(--text-main); font-weight: 500; }
.dv-info-value.dv-money { font-family: 'Segoe UI', monospace; }
.dv-info-value.dv-highlight { color: var(--primary); font-weight: 700; font-size: 0.875rem; }

/* Product table */
.dv-product-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; overflow-x: auto; display: block; }
.dv-product-table th { text-align: left; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); padding: 10px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.dv-product-table td { padding: 10px; border-bottom: 1px solid var(--neutral-100); word-break: break-word; }
.dv-product-table tr:last-child td { border-bottom: none; }
.dv-product-table .dv-row-total { text-align: right; font-weight: 700; color: var(--primary); white-space: nowrap; }
.dv-product-total {
    display: flex; justify-content: flex-end; padding: 14px 10px; border-top: 2px solid var(--border);
    font-weight: 700; font-size: 1rem; color: var(--primary);
}
.dv-product-total > span:first-child { margin-right: 12px; color: var(--text-main); }

/* Action buttons */
.dv-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.dv-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface, #fff); cursor: pointer; font-size: 0.8125rem;
    font-weight: 600; transition: all 0.2s; color: var(--text-main);
}
.dv-action-btn:hover { border-color: var(--primary); color: var(--primary); background: #F0F4FA; }
.dv-action-btn span { font-size: 18px; }
.dv-btn-pdf { color: var(--red-600); } .dv-btn-pdf:hover { background: var(--red-bg); border-color: var(--red-600); }
.dv-btn-email { color: var(--green-500); } .dv-btn-email:hover { background: var(--green-bg); border-color: var(--green-500); }
.dv-btn-convert { color: var(--purple-600); } .dv-btn-convert:hover { background: var(--purple-bg); border-color: var(--purple-600); }
.dv-btn-confirm { color: #16a34a; } .dv-btn-confirm:hover { background: #dcfce7; border-color: #16a34a; }
.dv-btn-cancel-order { color: #dc2626; } .dv-btn-cancel-order:hover { background: #fef2f2; border-color: #dc2626; }
.dv-btn-reopen { color: #2563eb; } .dv-btn-reopen:hover { background: #eff6ff; border-color: #2563eb; }
.dv-btn-edit { color: var(--primary); }

/* ====== RIGHT PANEL: PDF ====== */
.dv-right { display: flex; flex-direction: column; background: #1A1D23; overflow: hidden; }
.dv-pdf-header {
    background: #2A2D35; color: #fff; border-bottom: 1px solid #3A3D45;
    padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
    font-size: 0.8125rem;
}
.dv-pdf-header-left { display: flex; align-items: center; gap: 8px; }
.dv-pdf-header span { font-size: 18px; }
.dv-pdf-zoom { display: flex; align-items: center; gap: 6px; }
.dv-pdf-zoom button {
    background: rgba(255,255,255,0.1); border: none; color: #fff; width: 30px; height: 30px;
    border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.2s;
}
.dv-pdf-zoom button:hover { background: rgba(255,255,255,0.2); }
.dv-pdf-content { flex: 1; overflow-y: auto; overflow-x: auto; padding: 20px; display: flex; justify-content: center; align-items: flex-start; }
.dv-pdf-page {
    background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border-radius: 4px;
    width: 100%; max-width: 210mm; min-height: 297mm; transition: transform 0.2s;
    overflow: visible;
}
/* Multi-page visual separator */
.pp-page-break {
    width: 100%; height: 20px; position: relative;
    background: #1A1D23;
    margin: 0 -24px; padding: 0; width: calc(100% + 48px);
    border-top: 2px dashed rgba(255,255,255,0.2);
    border-bottom: 2px dashed rgba(255,255,255,0.2);
}
.pp-page-break::after {
    content: '— Trang tiếp —';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #2A2D35; color: rgba(255,255,255,0.5); font-size: 0.625rem;
    padding: 0 12px; border-radius: 4px; white-space: nowrap;
}

/* PDF link section */
.dv-pdf-link-section {
    display: none; padding: 10px 16px; border-top: 1px solid #3A3D45; background: #2A2D35;
}
.dv-pdf-link-section a { color: var(--primary); text-decoration: none; font-weight: 500; font-size: 0.8125rem; }

/* ====== RICH PDF PREVIEW — OS.html Waffle Table Replica ====== */
/* Single table, 11 cols (A-K), matching Google Sheets export exactly */

.pp { font-family: 'Lexend', Arial, sans-serif; color: var(--black); line-height: 1.3; padding: 0; font-size: 10pt; background: var(--white); overflow: visible; box-sizing: border-box; }
.pp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pp td, .pp th { padding: 2px 3px; vertical-align: middle; box-sizing: border-box; word-wrap: break-word; }

/* Column widths — optimized for table-layout:fixed at ~794px */
.pp .os-col-a { width: 8%; }    /* A: Label left (Kính gửi, Công ty...) */
.pp .os-col-b { width: 1.5%; }  /* B: separator ":" */
.pp .os-col-c { width: 8%; }    /* C: Mã hàng / value */
.pp .os-col-d { width: 20.5%; } /* D: Tên hàng / value */
.pp .os-col-e { width: 10%; }   /* E: Hình ảnh */
.pp .os-col-f { width: 4.5%; }  /* F: ĐVT */
.pp .os-col-g { width: 9%; }    /* G: Số lượng / label right */
.pp .os-col-h { width: 8.5%; }  /* H: Đơn giá / label right */
.pp .os-col-i { width: 1%; }    /* I: separator */
.pp .os-col-j { width: 18%; }   /* J: Thành tiền / value */
.pp .os-col-k { width: 11%; }   /* K: Note */

/* Row 2: Blue bar */
.pp .os-bar td { background: var(--primary); height: 7px; padding: 0; }

/* Row 3: Banner/Logo */
.pp .os-logo td { border-bottom: 1px solid #999; padding: 4px 0; }
.pp .os-logo img { max-height: 100px; max-width: 100%; display: block; object-fit: scale-down; object-position: left center; }

/* Row 4: Title */
.pp .os-title td { text-align: center; font-family: 'Play', Arial, sans-serif; font-weight: 700; color: var(--primary); padding: 10px 3px 6px; font-size: 24pt; white-space: normal; }
.pp .os-title .os-subtitle { font-size: 10pt; }

/* Rows 5-10: Info section — NO overflow hidden, labels must be visible */
.pp .os-info td { background: var(--pdf-bg); font-size: 9pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .os-info .il { font-weight: 700; color: var(--black); white-space: nowrap; }
.pp .os-info .is { font-weight: 700; color: var(--black); text-align: center; }
.pp .os-info .iv { color: var(--pdf-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .os-info .iv-accent { color: var(--white); background: var(--primary); white-space: nowrap; }

/* Row 11: Intro */
.pp .os-intro td { background: var(--white); padding: 8px 3px; font-size: 10pt; }

/* Row 12: Product header */
.pp .os-th td { background: var(--primary); color: var(--white); text-align: center; font-family: 'Play', Arial, sans-serif; font-weight: 700; font-size: 10pt; padding: 6px 2px; white-space: normal; overflow: hidden; border-bottom: 1px solid var(--neutral-300); }

/* Row 13+: Product data */
.pp .os-td td { background: var(--white); text-align: center; border-bottom: 1px solid var(--neutral-300); padding: 4px 2px; white-space: normal; overflow: hidden; font-size: 9pt; }
.pp .os-td .td-l { text-align: left; }
.pp .os-td .td-r { text-align: right; font-weight: 500; }
.pp .os-td .pp-img { width: 50px; height: 50px; object-fit: cover; border: 1px solid var(--neutral-300); display: block; margin: 0 auto; }
.pp .os-td .pp-no-img { width: 50px; height: 50px; background: var(--neutral-100); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--neutral-300); font-size: 16px; }

/* Row 14: Policy title */
.pp .os-policy-hdr td { background: var(--white); font-weight: 700; font-size: 10pt; padding: 6px 3px 3px; border-bottom: 3px solid var(--pdf-accent-red); text-align: left; }

/* Rows 15-19: Policy + Totals side-by-side */
.pp .os-ptrow td { background: var(--white); padding: 2px 3px; vertical-align: middle; font-size: 9pt; }
.pp .os-ptrow .pl { font-style: italic; text-align: left; font-size: 8pt; overflow: hidden; text-overflow: ellipsis; }
.pp .os-ptrow .tl { text-align: right; font-weight: 700; font-size: 9pt; }
.pp .os-ptrow .ts { text-align: center; font-weight: 700; font-size: 9pt; }
.pp .os-ptrow .tv { text-align: right; font-weight: 700; white-space: nowrap; font-size: 9pt; }
.pp .os-ptrow .tv-normal { font-weight: normal; font-size: 8pt; }

/* Row 19: Final total bar — blue bg + red accent for value */
.pp .os-final .tl, .pp .os-final .ts { background: var(--primary); color: var(--white) !important; font-size: 9pt; }
.pp .os-final .tv { background: var(--pdf-accent-red); color: var(--white) !important; font-size: 9pt; }

/* Rows 22-23: Signatures */
.pp .os-sig td { background: var(--white); text-align: center; font-weight: 700; font-size: 10pt; vertical-align: top; padding: 10px 3px; }
.pp .os-sig-space td { height: 90px; background: var(--white); }

/* Row 25: Footer */
.pp .os-footer td { background: var(--white); text-align: center; padding: 8px 3px; font-size: 9pt; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1200px) {
    .dv-container { grid-template-columns: 220px 1fr; height: auto; }
    .dv-right { display: none; }
}
@media (max-width: 768px) {
    .dv-container { grid-template-columns: 1fr; height: auto; }
    .dv-sidebar { display: none; }
    .dv-center { border-right: none; border-bottom: 1px solid var(--border); }
    .dv-right { min-height: 600px; }
}
@keyframes dv-spin { to { transform: rotate(360deg); } }

/* --- From: Component_ImportExcel.html --- */
/* ===== IMPORT EXCEL OVERLAY ===== */
.import-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.35); backdrop-filter: blur(3px);
    z-index: 950; display: none; justify-content: center; align-items: center;
}
.import-overlay.active { display: flex; }

.import-panel {
    width: 90vw; max-width: 960px; max-height: 88vh;
    background: var(--surface); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    animation: importSlideIn 0.25s ease;
}
@keyframes importSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.import-panel-hdr {
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50); border-radius: 16px 16px 0 0;
}
.import-panel-hdr h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
.import-panel-hdr h3 span { font-size: 22px; color: var(--primary); }
.import-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: none; cursor: pointer;
    color: var(--text-light); transition: all 0.15s;
}
.import-close:hover { background: var(--bg); color: var(--text-main); }

.import-panel-body { flex: 1; overflow-y: auto; padding: 24px; }

/* Steps indicator */
.import-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.import-step {
    flex: 1; padding: 10px 14px; border-radius: 8px;
    font-size: 0.75rem; font-weight: 600; text-align: center;
    background: var(--bg); color: var(--text-light); border: 1px solid var(--border);
    transition: all 0.2s;
}
.import-step.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.import-step.done { background: var(--success-bg); color: var(--green-500); border-color: var(--green-border); }
.import-step-num { font-weight: 800; margin-right: 4px; }

/* Drop zone */
.import-dropzone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 48px 24px; text-align: center; cursor: pointer;
    transition: all 0.2s; background: var(--bg);
}
.import-dropzone:hover, .import-dropzone.dragover {
    border-color: var(--primary); background: rgba(37,71,139,0.04);
}
.import-dropzone span.material-symbols-outlined { font-size: 48px; color: var(--border); display: block; margin-bottom: 12px; }
.import-dropzone p { font-size: 0.875rem; color: var(--text-light); margin-bottom: 8px; }
.import-dropzone .import-browse { color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; }
.import-dropzone small { font-size: 0.6875rem; color: var(--text-light); display: block; margin-top: 12px; }
.import-file-info { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--blue-bg); border-radius: 8px; margin-top: 16px; }
.import-file-info span { color: var(--info); font-size: 20px; }
.import-file-info .file-name { font-weight: 600; color: var(--text-main); font-size: 0.8125rem; }
.import-file-info .file-meta { font-size: 0.6875rem; color: var(--text-light); }
.import-file-info .file-remove { margin-left: auto; cursor: pointer; color: var(--text-light); border: none; background: none; }
.import-file-info .file-remove:hover { color: var(--red-600); }

/* Mapping table */
.import-mapping-wrap { margin-top: 20px; }
.import-mapping-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.import-mapping-hdr h4 { font-size: 0.875rem; font-weight: 700; color: var(--text-main); }
.import-mapping-stats { font-size: 0.6875rem; color: var(--text-light); }
.import-mapping-stats .mapped { color: var(--green-500); font-weight: 700; }
.import-mapping-stats .skipped { color: var(--warning); font-weight: 700; }

.import-mapping-table { width: 100%; border-collapse: collapse; }
.import-mapping-table thead th {
    padding: 10px 12px; font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light);
    background: var(--neutral-50); border-bottom: 1px solid var(--border); text-align: left;
}
.import-mapping-table tbody td {
    padding: 8px 12px; font-size: 0.8125rem; border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.import-mapping-table tbody tr:hover { background: var(--surface-hover); }
.import-col-excel { font-weight: 600; color: var(--text-main); }
.import-col-sample { font-size: 0.6875rem; color: var(--text-light); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-confidence {
    display: inline-flex; padding: 2px 8px; border-radius: 10px;
    font-size: 0.625rem; font-weight: 700;
}
.import-confidence.high { background: var(--success-bg); color: var(--green-500); }
.import-confidence.medium { background: var(--warning-bg); color: var(--warning); }
.import-confidence.low { background: var(--danger-bg); color: var(--red-600); }
.import-map-select {
    width: 100%; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.75rem; background: var(--bg);
    color: var(--text-main); font-family: var(--font-main);
}

/* Preview table */
.import-preview-wrap { margin-top: 20px; }
.import-preview-info { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.8125rem; }
.import-preview-info span { color: var(--primary); font-size: 18px; }
.import-preview-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.import-preview-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.import-preview-table thead th {
    padding: 8px 10px; background: var(--neutral-50); border-bottom: 1px solid var(--border);
    font-weight: 700; color: var(--text-light); white-space: nowrap; text-align: left;
}
.import-preview-table tbody td {
    padding: 6px 10px; border-bottom: 1px solid var(--border-light);
    color: var(--text-main); white-space: nowrap; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis;
}
.import-preview-table tbody tr:nth-child(even) { background: var(--neutral-50); }

/* Defaults section */
.import-defaults { margin-top: 20px; padding: 16px; background: var(--amber-bg); border: 1px solid var(--warning-bg); border-radius: 8px; }
.import-defaults h4 { font-size: 0.8125rem; font-weight: 700; color: var(--amber-700); margin-bottom: 8px; }
.import-defaults p { font-size: 0.6875rem; color: var(--amber-700); margin-bottom: 12px; }
.import-defaults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.import-default-item label { font-size: 0.625rem; font-weight: 600; color: var(--text-light); display: block; margin-bottom: 2px; }
.import-default-item input, .import-default-item select {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.75rem; background: #fff;
}

/* Footer */
.import-panel-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50); border-radius: 0 0 16px 16px;
}
.import-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: 8px; font-size: 0.8125rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s; border: none;
}
.import-btn-ghost { background: var(--bg); border: 1px solid var(--border); color: var(--text-light); }
.import-btn-ghost:hover { background: var(--surface); color: var(--text-main); }
.import-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,71,139,0.25); }
.import-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.import-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.import-btn span { font-size: 18px; }

/* Progress bar */
.import-progress { display: none; align-items: center; gap: 12px; width: 100%; }
.import-progress.active { display: flex; }
.import-progress-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.import-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; width: 0; }
.import-progress-text { font-size: 0.6875rem; font-weight: 700; color: var(--text-light); min-width: 40px; text-align: right; }

/* Template download */
.import-template-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    background: var(--blue-bg); border: 1px solid var(--blue-border); border-radius: 8px;
    font-size: 0.75rem; font-weight: 600; color: var(--info); cursor: pointer;
    transition: all 0.15s; text-decoration: none;
}
.import-template-link:hover { background: var(--info-bg); }
.import-template-link span { font-size: 16px; }

/* --- From: Component_QuickView.html --- */
/* ===== QuickView Center Modal ===== */
.qv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
}
.qv-overlay.qv-open {
    display: flex;
}
.qv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    transition: opacity 0.2s;
}
.qv-modal {
    position: relative;
    z-index: 1;
    width: 640px;
    max-width: 92vw;
    max-height: 85vh;
    background: var(--surface, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    overflow: hidden;
}
.qv-overlay.qv-open .qv-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
/* Header */
.qv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: var(--surface-raised, #f8fafc);
    border-radius: 16px 16px 0 0;
}
.qv-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}
.qv-title .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--primary, #2563eb);
}
.qv-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--text-light, #64748b);
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.qv-close:hover {
    background: var(--hover, rgba(0,0,0,0.06));
}
/* Body */
.qv-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.qv-section {
    margin-bottom: 20px;
}
.qv-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary, #2563eb);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-bg, rgba(37, 99, 235, 0.1));
}
.qv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.qv-row {
    display: flex;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    padding: 7px 0;
    gap: 8px;
}
.qv-row:last-child { border-bottom: none; }
.qv-label {
    flex: 0 0 45%;
    font-size: 0.75rem;
    color: var(--text-light, #64748b);
    line-height: 1.4;
}
.qv-value {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text, #1e293b);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.4;
}
.qv-value:empty::after {
    content: '—';
    color: var(--text-lighter, #94a3b8);
    font-weight: 400;
}
.qv-value-money {
    font-variant-numeric: tabular-nums;
    color: var(--success, #16a34a);
    font-weight: 600;
}
/* Info Cards */
.qv-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.qv-card { background:var(--bg,#f6f7f8); border-radius:10px; padding:10px 14px; border:1px solid var(--border,#e2e8f0); }
.qv-card-full { grid-column:1/-1; }
.qv-card-label { font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light,#64748b); margin-bottom:4px; }
.qv-card-value { font-size:0.85rem; font-weight:700; color:var(--text,#1e293b); word-break:break-word; }
.qv-card-sub { font-size:0.7rem; color:var(--text-light,#64748b); margin-top:2px; }
.qv-card-highlight { background:linear-gradient(135deg,rgba(37,99,235,0.06),rgba(37,99,235,0.12)); border-color:rgba(37,99,235,0.2); }
.qv-card-highlight .qv-card-value { color:var(--primary,#2563eb); font-size:1rem; }
.qv-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:16px; font-size:0.6875rem; font-weight:700; }
.qv-badge-green { background:#dcfce7; color:#166534; }
.qv-badge-yellow { background:#fef9c3; color:#854d0e; }
.qv-badge-blue { background:#dbeafe; color:#1e40af; }
.qv-badge-red { background:#fee2e2; color:#991b1b; }
.qv-badge-gray { background:#f1f5f9; color:#475569; }
/* Sections */
.qv-sec { margin-bottom:14px; background:var(--bg,#f6f7f8); border-radius:10px; padding:12px 16px; border:1px solid var(--border,#e2e8f0); }
.qv-sec-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--primary,#2563eb); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.qv-sec-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 12px; }
.qv-sec-item .si-label { font-size:0.625rem; color:var(--text-light); font-weight:600; }
.qv-sec-item .si-val { font-size:0.8rem; font-weight:700; color:var(--text,#1e293b); }
/* Summary rows */
.qv-sum { background:var(--bg,#f6f7f8); border-radius:10px; padding:10px 16px; border:1px solid var(--border,#e2e8f0); margin-top:12px; }
.qv-sum-row { display:flex; justify-content:space-between; padding:3px 0; font-size:0.8rem; color:var(--text-light); }
.qv-sum-row .sv { font-weight:600; color:var(--text); }
.qv-sum-row.qv-sum-total { border-top:2px solid var(--primary); margin-top:6px; padding-top:8px; font-weight:800; font-size:0.9rem; color:var(--primary); }
.qv-sum-row.qv-sum-total .sv { color:var(--primary); font-size:1rem; }
@media (max-width:640px) { .qv-cards { grid-template-columns:1fr; } .qv-sec-grid { grid-template-columns:1fr 1fr; } }
/* Footer */
.qv-footer {
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--surface-raised, #f8fafc);
    border-radius: 0 0 16px 16px;
}
.qv-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text, #1e293b);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.qv-btn:hover { background: var(--hover, rgba(0,0,0,0.04)); }
.qv-btn-primary {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}
.qv-btn-primary:hover { background: var(--primary-dark, #1d4ed8); }
.qv-btn .material-symbols-outlined { font-size: 1rem; }
/* Active row highlight */
.tp-table tbody tr.qv-active-row {
    background: var(--primary-bg, rgba(37, 99, 235, 0.06)) !important;
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -2px;
}
/* Chi tiết sản phẩm */
.qv-detail-section { margin-top: 16px; border-top: 2px solid var(--border, #e2e8f0); padding-top: 12px; }
.qv-detail-title { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary, #475569); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.qv-detail-title .material-symbols-outlined { font-size: 1rem; }
.qv-detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.qv-detail-table th { background: var(--bg-secondary, #f1f5f9); padding: 6px 8px; text-align: left; font-weight: 600; color: var(--text-secondary, #475569); border-bottom: 1px solid var(--border, #e2e8f0); white-space: nowrap; }
.qv-detail-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-light, #f1f5f9); }
.qv-detail-table tr:hover { background: var(--bg-hover, #f8fafc); }
.qv-detail-table .text-right { text-align: right; }
.qv-detail-table .total-row { font-weight: 700; background: var(--bg-secondary, #f1f5f9); }
.qv-modal:has(.qv-detail-section) { width: min(800px, 95vw); }
/* Mobile */
@media (max-width: 640px) {
    .qv-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
    }
    .qv-grid { grid-template-columns: 1fr; }
}

/* --- From: Script_Global.html --- */
.gc-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay); display: flex; align-items: center;
    justify-content: center; z-index: 99999; animation: gc-fade-in 0.15s ease-out;
}
@keyframes gc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gc-popup {
    background: var(--surface); border-radius: var(--radius-xl); padding: 28px 24px 20px;
    min-width: 340px; max-width: 540px; width: 90%;
    box-shadow: var(--shadow-popup), 0 0 0 1px var(--border-light);
    animation: gc-pop-in 0.2s ease-out;
    font-family: var(--font-main);
}
@keyframes gc-pop-in { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.gc-icon-wrap {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.gc-icon-wrap span { font-size: 26px; }
.gc-type-info .gc-icon-wrap { background: var(--info-bg); color: var(--info); }
.gc-type-warning .gc-icon-wrap { background: var(--warning-bg); color: var(--warning); }
.gc-type-danger .gc-icon-wrap { background: var(--danger-bg); color: var(--danger); }
.gc-type-success .gc-icon-wrap { background: var(--success-bg); color: var(--success); }
.gc-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.gc-message { font-size: 0.8125rem; color: var(--text-light); line-height: 1.5; margin-bottom: 4px; }
.gc-detail { font-size: 0.75rem; color: var(--text-main); background: var(--neutral-50); padding: 8px 12px; border-radius: var(--radius-sm); margin: 10px 0; font-weight: 500; }
.gc-input-wrap { margin: 12px 0; }
.gc-input-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-light); margin-bottom: 4px; display: block; }
.gc-input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
    font-family: var(--font-main);
    box-sizing: border-box; transition: border-color 0.2s;
}
.gc-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
.gc-type-danger .gc-input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,53,69,0.1); }
.gc-btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.gc-btn {
    padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 0.8125rem; font-weight: 600;
    font-family: var(--font-main);
    transition: all 0.15s; color: var(--text-main); display: inline-flex; align-items: center; gap: 5px;
}
.gc-btn:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.gc-btn-confirm {
    border: none; color: var(--text-inverse); font-weight: 700;
}
.gc-type-info .gc-btn-confirm { background: var(--info); }
.gc-type-info .gc-btn-confirm:hover { background: var(--info-dark); }
.gc-type-warning .gc-btn-confirm { background: var(--warning); }
.gc-type-warning .gc-btn-confirm:hover { background: var(--warning-dark); }
.gc-type-danger .gc-btn-confirm { background: var(--danger); }
.gc-type-danger .gc-btn-confirm:hover { background: var(--danger-hover); }
.gc-type-success .gc-btn-confirm { background: var(--success); }
.gc-type-success .gc-btn-confirm:hover { background: var(--success-hover); }
.gc-btn-confirm span { font-size: 16px; }

/* --- From: Page_Inventory_Serial.html --- */
/* Serial/IMEI Management Styles */
.sr-product-card { padding:16px 20px; border-radius:12px; border:1px solid var(--border); background:var(--surface,#fff); margin-bottom:16px; display:flex; align-items:center; gap:16px; }
.sr-product-img { width:48px; height:48px; border-radius:10px; background:var(--bg-muted); display:flex; align-items:center; justify-content:center; }
.sr-product-img span { font-size:24px; color:var(--primary); }
.sr-product-info h3 { font-size:0.95rem; font-weight:700; color:var(--text-primary); margin:0 0 4px; }
.sr-product-info p { font-size:0.75rem; color:var(--text-light); margin:0; }
.sr-product-stats { margin-left:auto; display:flex; gap:20px; }
.sr-stat { text-align:center; }
.sr-stat-val { font-size:1.1rem; font-weight:700; }
.sr-stat-lbl { font-size:0.65rem; color:var(--text-light); }
.sr-stat-green { color:var(--green-500,#22c55e); }
.sr-stat-blue { color:var(--primary); }
.sr-stat-amber { color:var(--amber-500); }
.sr-stat-red { color:var(--red-500); }

.sr-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:99px; font-size:0.7rem; font-weight:600; }
.sr-badge-in { background:var(--success-bg); color:var(--green-600); }
.sr-badge-out { background:var(--info-bg); color:var(--info); }
.sr-badge-warranty { background:var(--warning-bg); color:var(--warning); }
.sr-badge-damaged { background:var(--danger-bg); color:var(--red-600); }

.sr-filter-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sr-filter-chip { padding:5px 14px; border-radius:99px; font-size:0.75rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface,#fff); color:var(--text-secondary); transition:all .2s; }
.sr-filter-chip:hover { border-color:var(--primary); color:var(--primary); }
.sr-filter-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }

@media(max-width:768px) {
    .sr-product-card { flex-direction:column; align-items:flex-start; }
    .sr-product-stats { margin-left:0; width:100%; justify-content:space-between; }
}

/* --- From: Page_Inventory_Transfer.html --- */
/* Transfer-specific styles */
.tr-flow { display:flex; align-items:center; gap:8px; margin:16px 0 24px; padding:20px; border-radius:14px; border:1px solid var(--border); background:var(--surface,#fff); flex-wrap:wrap; }
.tr-wh-box { flex:1; min-width:180px; padding:14px 18px; border-radius:10px; border:1px solid var(--border); background:var(--bg-muted); }
.tr-wh-box.source { border-left:4px solid var(--amber-500); }
.tr-wh-box.dest { border-left:4px solid var(--green-500,#22c55e); }
.tr-wh-label { font-size:0.7rem; font-weight:600; color:var(--text-light); text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:4px; }
.tr-wh-label span.material-symbols-outlined { font-size:14px; }
.tr-wh-select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.85rem; background:#fff; color:var(--text-primary); }
.tr-arrow { font-size:28px; color:var(--primary); flex-shrink:0; }
.tr-items-section { margin-top:16px; }
.tr-add-row { display:flex; gap:8px; margin-bottom:12px; align-items:flex-end; flex-wrap:wrap; }
.tr-add-row .form-group { flex:1; min-width:150px; }
.tr-add-row label { display:block; font-size:0.7rem; font-weight:600; color:var(--text-light); margin-bottom:4px; }
.tr-add-row input, .tr-add-row select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.85rem; }
.tr-table { width:100%; border-collapse:collapse; }
.tr-table th { font-size:0.7rem; font-weight:600; color:var(--text-light); text-align:left; padding:8px 12px; border-bottom:2px solid var(--border); }
.tr-table td { padding:10px 12px; font-size:0.85rem; border-bottom:1px solid var(--border-light,#f0f0f0); }
.tr-table .td-r { text-align:right; }
.tr-remove-btn { color:var(--red-500); cursor:pointer; border:none; background:none; font-size:18px; padding:2px; }
.tr-form-card { background:#fff; border-radius:14px; border:1px solid var(--border); padding:20px; margin-bottom:20px; }
.tr-form-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

@media(max-width:768px) {
    .tr-flow { flex-direction:column; }
    .tr-arrow { transform:rotate(90deg); }
    .tr-add-row { flex-direction:column; }
}

/* --- From: Page_Logistics_PO.html --- */
/* ====== Batch Countdown Bar ====== */
.lo-batch-bar { display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 20px; margin-bottom:16px; flex-wrap:wrap; }
.lo-batch-icon { font-size:28px; color:var(--primary); }
.lo-batch-info { flex:1; min-width:180px; }
.lo-batch-title { font-weight:600; font-size:0.875rem; }
.lo-batch-sub { font-size:0.75rem; color:var(--text-light); margin-top:2px; }
.lo-batch-cd { font-size:1.5rem; font-weight:700; color:var(--primary); background:rgba(37,71,139,0.08); padding:6px 18px; border-radius:10px; white-space:nowrap; }
.lo-batch-cd.urgent { color:var(--red-500,#ef4444); background:rgba(239,68,68,0.08); animation:lo-pulse 2s infinite; }
@keyframes lo-pulse { 0%,100%{opacity:1}50%{opacity:.65} }

/* ====== Stepper (full) ====== */
.lo-stepper { display:flex; align-items:center; gap:0; padding:8px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.lo-step-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.lo-step-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; border:2px solid var(--border); background:var(--bg-card); color:var(--text-light); cursor:pointer; transition:all .2s; }
.lo-step-dot.done { background:var(--green-500,#22c55e); border-color:var(--green-500,#22c55e); color:#fff; }
.lo-step-dot.active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px rgba(37,71,139,0.15); animation:lo-dot-pulse 2s infinite; }
.lo-step-dot.overdue { background:var(--red-500,#ef4444); border-color:var(--red-500,#ef4444); color:#fff; animation:lo-dot-pulse 1.5s infinite; }
@keyframes lo-dot-pulse { 0%,100%{box-shadow:0 0 0 4px rgba(37,71,139,0.15)}50%{box-shadow:0 0 0 8px rgba(37,71,139,0)} }
.lo-step-line { width:28px; height:2px; background:var(--border); flex-shrink:0; }
.lo-step-line.done { background:var(--green-500,#22c55e); }
.lo-step-lbl { font-size:0.6rem; text-align:center; margin-top:3px; max-width:56px; line-height:1.15; color:var(--text-light); }
.lo-step-lbl.active { color:var(--primary); font-weight:700; }
.lo-step-lbl.overdue { color:var(--red-500,#ef4444); font-weight:700; }
.lo-step-date { font-size:0.55rem; color:var(--text-light); margin-top:1px; }

/* ====== Mini dots (in table rows) ====== */
.lo-mini-dots { display:flex; align-items:center; gap:2px; }
.lo-mini-d { width:7px; height:7px; border-radius:50%; background:var(--border); }
.lo-mini-d.g { background:var(--green-500,#22c55e); }
.lo-mini-d.b { background:var(--primary); }
.lo-mini-d.r { background:var(--red-500,#ef4444); }
.lo-mini-d.y { background:var(--warning-dark,#f59e0b); }

/* ====== SLA badge ====== */
.lo-sla { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:600; }
.lo-sla.ok { background:rgba(34,197,94,0.1); color:var(--green-600,#16a34a); }
.lo-sla.warn { background:rgba(245,158,11,0.1); color:var(--warning-dark,#d97706); }
.lo-sla.late { background:rgba(239,68,68,0.1); color:var(--red-500,#ef4444); }

/* ====== Grouped Table ====== */
.lo-month-hdr { font-size:0.9rem; font-weight:700; padding:8px 14px; background:var(--bg-section,#f8fafc); border:1px solid var(--border); border-radius:10px 10px 0 0; border-bottom:none; display:flex; align-items:center; gap:6px; margin-top:16px; }
.lo-month-hdr:first-child { margin-top:0; }
.lo-batch-grp { border:1px solid var(--border); border-radius:0 0 10px 10px; background:var(--bg-card); margin-bottom:12px; overflow:hidden; }
.lo-batch-row { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid transparent; transition:background .15s; }
.lo-batch-row:hover { background:var(--bg-section,#f8fafc); }
.lo-batch-row.expanded { border-bottom-color:var(--border); background:var(--bg-section,#f8fafc); }
.lo-batch-name { font-weight:600; font-size:0.85rem; flex:1; }
.lo-batch-stats { font-size:0.75rem; color:var(--text-light); }
.lo-batch-tag { font-size:0.65rem; padding:2px 8px; border-radius:10px; font-weight:600; }
.lo-batch-tag.ok { background:#dcfce7; color:#166534; }
.lo-batch-tag.vc { background:#dbeafe; color:#1e40af; }
.lo-batch-tag.warn { background:#fef3c7; color:#92400e; }
.lo-batch-tag.late { background:#fef2f2; color:#991b1b; }
.lo-batch-chev { transition:transform .2s; color:var(--text-light); }
.lo-batch-chev.open { transform:rotate(180deg); }
.lo-batch-body { display:none; }
.lo-batch-body.open { display:block; }

/* PO rows */
.lo-po-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:0.8rem; flex-wrap:wrap; }
.lo-po-row:last-child { border-bottom:none; }
.lo-po-code { font-family:var(--font-mono,'JetBrains Mono',monospace); color:var(--primary); font-weight:600; min-width:85px; cursor:pointer; }
.lo-po-code:hover { text-decoration:underline; }
.lo-po-ncc { flex:1; min-width:100px; }
.lo-po-product { color:var(--text-light); font-size:0.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

/* ====== Detail Panel (slide right) ====== */
.lo-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:500; display:none; }
.lo-overlay.open { display:block; }
.lo-panel { position:fixed; top:0; right:-500px; width:500px; max-width:100vw; height:100vh; background:var(--bg-card); z-index:510; transition:right .3s ease; box-shadow:-4px 0 24px rgba(0,0,0,.12); display:flex; flex-direction:column; }
.lo-panel.open { right:0; }
.lo-panel-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.lo-panel-title { font-size:1rem; font-weight:700; }
.lo-panel-close { cursor:pointer; color:var(--text-light); font-size:24px; }
.lo-panel-body { flex:1; overflow-y:auto; padding:20px; }

/* ====== Timeline (in panel) ====== */
.lo-timeline { position:relative; padding-left:22px; }
.lo-timeline::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:var(--border); }
.lo-tl-item { position:relative; padding-bottom:18px; }
.lo-tl-dot { position:absolute; left:-17px; top:2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--border); background:var(--bg-card); }
.lo-tl-dot.done { background:var(--green-500,#22c55e); border-color:var(--green-500,#22c55e); }
.lo-tl-dot.active { background:var(--primary); border-color:var(--primary); }
.lo-tl-dot.overdue { background:var(--red-500); border-color:var(--red-500); }
.lo-tl-name { font-weight:600; font-size:0.8rem; }
.lo-tl-date { color:var(--text-light); font-size:0.7rem; margin-top:2px; }
.lo-tl-note { color:var(--text-light); font-size:0.7rem; font-style:italic; margin-top:3px; }

/* ====== Pay badge ====== */
.lo-pay { display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; padding:5px 12px; border-radius:8px; background:var(--bg-section,#f8fafc); border:1px solid var(--border); }
.lo-pay-dot { width:10px; height:10px; border-radius:50%; }
.lo-pay-dot.on { background:var(--green-500,#22c55e); }
.lo-pay-dot.off { background:var(--border); }

/* ====== Confirm Popup ====== */
.lo-confirm-bg { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:600; display:none; align-items:center; justify-content:center; }
.lo-confirm-bg.open { display:flex; }
.lo-confirm-card { background:var(--bg-card); border-radius:14px; width:440px; max-width:92vw; padding:24px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.lo-confirm-title { font-size:1rem; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.lo-cf-field { margin-bottom:12px; }
.lo-cf-field label { display:block; font-size:0.72rem; font-weight:600; margin-bottom:4px; color:var(--text-light); }
.lo-cf-field input,.lo-cf-field select,.lo-cf-field textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:7px; font-size:0.82rem; }
.lo-cf-field textarea { resize:vertical; min-height:56px; }
.lo-cf-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* ====== Smart Popup extras ====== */
.lo-cf-subtitle { font-size:0.75rem; color:var(--text-light); margin-bottom:16px; }
.lo-branch-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.lo-branch-btn { padding:12px; border-radius:10px; border:2px solid var(--border); background:var(--bg-card); cursor:pointer; text-align:center; transition:all .2s; font-size:0.85rem; }
.lo-branch-btn:hover { border-color:var(--primary); }
.lo-branch-btn.active-yes { border-color:var(--green-500,#22c55e); background:rgba(34,197,94,0.08); }
.lo-branch-btn.active-no { border-color:var(--red-500,#ef4444); background:rgba(239,68,68,0.06); }
.lo-branch-form { display:none; }
.lo-branch-form.open { display:block; }
.lo-checklist-item { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:0.82rem; }
.lo-checklist-item input[type=checkbox] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.lo-success-banner { background:rgba(34,197,94,0.08); border:1px solid var(--green-500,#22c55e); border-radius:12px; padding:20px; text-align:center; margin-top:16px; }
.lo-success-banner .lo-sb-icon { font-size:36px; color:var(--green-500,#22c55e); }
.lo-success-banner p { font-size:0.85rem; margin:8px 0; }
.lo-success-banner .lo-cta { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
.lo-success-banner .lo-cta:hover { opacity:0.85; }

/* ====== Filter bar ====== */
.lo-filter { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.lo-filter select { padding:6px 10px; border:1px solid var(--border); border-radius:7px; font-size:0.8rem; background:var(--bg-card); }
.lo-filter-search { display:flex; align-items:center; gap:4px; border:1px solid var(--border); border-radius:7px; padding:4px 8px; background:var(--bg-card); }
.lo-filter-search input { border:none; outline:none; font-size:0.8rem; background:transparent; width:160px; }

/* ====== Responsive ====== */
@media (max-width:768px) {
    .tp-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .lo-batch-bar { flex-direction:column; align-items:flex-start; }
    .lo-panel { width:100vw; right:-100vw; }
    .lo-po-row { gap:6px; }
}

/* --- From: Page_Ops_Dashboard.html --- */
/* =========================================================
   OPS DASHBOARD — Tabbed + Filter + Charts (Looker Style)
   ========================================================= */
              .dash-wrapper {
                padding: 32px;
                max-width: 1360px;
                margin: 0 auto;
                font-family: var(--font-family, "Inter", sans-serif);
              }

              /* --- HEADER --- */
              .dash-header {
                margin-bottom: 20px;
              }
              .dash-header h1 {
                font-size: 1.75rem;
                font-weight: 800;
                color: var(--text-main, #121417);
                margin: 0 0 4px;
              }
              .dash-header p {
                font-size: 0.875rem;
                color: var(--text-light, #677183);
                margin: 0;
              }
              .dash-header-row {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 16px;
                flex-wrap: wrap;
              }
              .dash-header-actions {
                display: flex;
                gap: 10px;
                flex-shrink: 0;
              }
              .dash-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                border-radius: 8px;
                font-size: 0.8125rem;
                font-weight: 600;
                cursor: pointer;
                border: none;
                transition: all 0.2s;
              }
              .dash-btn-outline {
                background: var(--surface, #fff);
                border: 1px solid var(--border);
                color: var(--text-main, #121417);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
              }
              .dash-btn-outline:hover {
                background: var(--bg);
              }

              /* --- MODULE TABS --- */
              .dash-module-tabs {
                display: flex;
                gap: 0;
                margin-bottom: 0;
                background: var(--surface, #fff);
                border-radius: 12px 12px 0 0;
                border: 1px solid var(--border);
                border-bottom: none;
                overflow: hidden;
              }
              .dash-module-tab {
                flex: 1;
                padding: 14px 24px;
                font-size: 0.875rem;
                font-weight: 700;
                cursor: pointer;
                border: none;
                background: transparent;
                color: var(--text-light, #677183);
                transition: all 0.2s;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                position: relative;
              }
              .dash-module-tab:hover {
                background: var(--bg);
                color: var(--text-main);
              }
              .dash-module-tab.active {
                background: var(--primary);
                color: #fff;
              }
              .dash-module-tab .material-symbols-outlined {
                font-size: 20px;
              }

              /* --- FILTER BAR (Dropdown Panel — like Sales Dashboard) --- */
              .dash-filter-bar {
                position: relative;
                display: inline-flex;
                margin-top: 16px;
                margin-bottom: 24px;
              }
              .dash-filter-trigger {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 20px;
                border-radius: 10px;
                background: var(--surface, #fff);
                border: 1px solid var(--border);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
                font-size: 0.8125rem;
                font-weight: 700;
                color: var(--text-main);
                cursor: pointer;
                transition: all 0.2s;
                font-family: inherit;
              }
              .dash-filter-trigger:hover {
                border-color: var(--primary);
                box-shadow: 0 2px 8px rgba(37, 71, 139, 0.12);
              }
              .dash-filter-trigger .material-symbols-outlined {
                font-size: 18px;
                color: var(--primary);
              }
              .dash-filter-panel {
                display: none;
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                z-index: 200;
                min-width: 380px;
                padding: 16px;
                background: var(--surface, #fff);
                border: 1px solid var(--border);
                border-radius: 14px;
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
              }
              .dash-filter-panel.show {
                display: block;
              }
              @media (max-width: 768px) {
                .dash-filter-panel {
                  min-width: calc(100vw - 80px);
                  left: 0;
                  right: 0;
                }
              }
              .fp-section {
                padding: 10px 0;
                border-bottom: 1px solid var(--border);
              }
              .fp-section:last-child {
                border-bottom: none;
                padding-bottom: 4px;
              }
              .fp-label {
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--text-light);
                margin-bottom: 8px;
              }
              .fp-row {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
              }
              .fp-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 4px;
              }
              .fp-btn {
                padding: 7px 12px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 600;
                cursor: pointer;
                border: 1px solid var(--border);
                background: transparent;
                color: var(--text-main);
                transition: all 0.15s;
                text-align: center;
                font-family: inherit;
              }
              .fp-btn:hover {
                background: var(--bg);
                border-color: var(--primary);
                color: var(--primary);
              }
              .fp-btn.active {
                background: var(--primary);
                color: #fff;
                border-color: var(--primary);
              }
              .fp-year-btn {
                padding: 4px 10px;
                border-radius: 6px;
                font-size: 0.65rem;
                font-weight: 700;
                border: 1px solid var(--border);
                background: transparent;
                color: var(--text-main);
                cursor: pointer;
                transition: all 0.15s;
                font-family: inherit;
              }
              .fp-year-btn:hover {
                background: var(--bg);
              }
              .fp-year-btn.active {
                background: var(--primary);
                color: #fff;
                border-color: var(--primary);
              }
              .fp-custom-row {
                display: flex;
                align-items: center;
                gap: 6px;
              }
              .fp-custom-row input[type="date"] {
                flex: 1;
                padding: 7px 10px;
                border-radius: 8px;
                font-size: 0.75rem;
                border: 1px solid var(--border);
                font-family: inherit;
                color: var(--text-main);
                background: var(--bg);
                outline: none;
              }
              .fp-custom-row input[type="date"]:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 2px rgba(37, 71, 139, 0.1);
              }
              .fp-apply {
                padding: 7px 16px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 700;
                cursor: pointer;
                border: none;
                background: var(--primary);
                color: #fff;
                transition: all 0.2s;
                font-family: inherit;
                flex-shrink: 0;
              }
              .fp-apply:hover {
                filter: brightness(1.1);
              }

              /* --- KPI SCORECARDS --- */
              .dash-kpi-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px;
                margin-bottom: 28px;
              }
              @media (max-width: 768px) {
                .dash-kpi-grid {
                  grid-template-columns: repeat(2, 1fr);
                }
              }
              @media (max-width: 480px) {
                .dash-kpi-grid {
                  grid-template-columns: 1fr;
                }
              }
              .dash-kpi {
                position: relative;
                overflow: hidden;
                border-radius: 14px;
                padding: 22px 24px;
                background: var(--primary);
                color: #fff;
                box-shadow: 0 4px 16px rgba(37, 71, 139, 0.18);
              }
              .dash-kpi-label {
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                opacity: 0.7;
                margin-bottom: 8px;
              }
              .dash-kpi-value {
                font-size: 1.75rem;
                font-weight: 800;
                line-height: 1.1;
                margin-bottom: 8px;
              }
              .dash-kpi-sub {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 0.7rem;
                font-weight: 600;
                background: rgba(255, 255, 255, 0.12);
                padding: 4px 10px;
                border-radius: 20px;
              }
              .dash-kpi-icon {
                position: absolute;
                right: -8px;
                bottom: -10px;
                font-size: 64px;
                opacity: 0.08;
              }
              .dash-kpi-accent {
                border-bottom: 3px solid var(--accent);
              }
              @keyframes countUp {
                from {
                  opacity: 0;
                  transform: translateY(8px);
                }
                to {
                  opacity: 1;
                  transform: translateY(0);
                }
              }
              .kpi-animated {
                animation: countUp 0.4s ease-out both;
              }

              /* --- CARDS --- */
              .dash-grid-2 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-bottom: 28px;
              }
              .dash-grid-3-1 {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 20px;
                margin-bottom: 28px;
              }
              @media (max-width: 900px) {
                .dash-grid-2,
                .dash-grid-3-1 {
                  grid-template-columns: 1fr;
                }
              }
              .dash-card {
                background: var(--surface, #fff);
                border-radius: 14px;
                border: 1px solid var(--border);
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
                overflow: hidden;
              }
              .dash-card-hdr {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 18px 24px;
                border-bottom: 1px solid var(--border);
              }
              .dash-card-title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 0.9375rem;
                font-weight: 700;
                color: var(--text-main);
              }
              .dash-card-title .material-symbols-outlined {
                color: var(--primary);
                font-size: 20px;
              }
              .dash-card-body {
                padding: 20px 24px;
              }
              .dash-card-link {
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--primary);
                text-decoration: none;
                cursor: pointer;
              }
              .dash-card-link:hover {
                text-decoration: underline;
              }

              /* --- ALERTS --- */
              .alert-row {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 0;
                border-bottom: 1px solid var(--border);
                font-size: 0.8125rem;
              }
              .alert-row:last-child {
                border-bottom: none;
              }
              .alert-icon {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 18px;
              }
              .alert-icon.danger {
                background: rgba(239, 68, 68, 0.1);
                color: var(--red-500);
              }
              .alert-icon.warning {
                background: rgba(245, 158, 11, 0.1);
                color: var(--amber-500);
              }
              .alert-icon.info {
                background: rgba(37, 71, 139, 0.08);
                color: var(--primary);
              }
              .alert-icon.success {
                background: rgba(16, 185, 129, 0.1);
                color: #10b981;
              }
              .alert-label {
                flex: 1;
                font-weight: 500;
                color: var(--text-main);
              }
              .alert-value {
                font-weight: 800;
                font-size: 1rem;
              }

              /* --- ACTIVITY --- */
              .activity-row {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 8px 0;
                border-bottom: 1px solid var(--border);
                font-size: 0.8rem;
              }
              .activity-row:last-child {
                border-bottom: none;
              }
              .activity-badge {
                padding: 3px 8px;
                border-radius: 6px;
                font-size: 0.65rem;
                font-weight: 700;
                white-space: nowrap;
              }
              .activity-badge.nhap {
                background: rgba(16, 185, 129, 0.1);
                color: #10b981;
              }
              .activity-badge.xuat {
                background: rgba(239, 68, 68, 0.1);
                color: var(--red-500);
              }
              .activity-badge.pr {
                background: rgba(245, 158, 11, 0.1);
                color: var(--amber-500);
              }
              .activity-badge.po {
                background: rgba(37, 71, 139, 0.1);
                color: var(--primary);
              }
              .activity-info {
                flex: 1;
              }
              .activity-ma {
                font-weight: 700;
                color: var(--text-main);
              }
              .activity-date {
                font-size: 0.7rem;
                color: var(--text-light);
              }
              .activity-val {
                font-weight: 700;
                color: var(--text-main);
                white-space: nowrap;
              }

              /* --- TAB CONTENT --- */
              .tab-content {
                display: none;
              }
              .tab-content.active {
                display: block;
              }

              /* --- EMPTY STATE --- */
              .dash-empty-state {
                text-align: center;
                padding: 48px 24px;
              }
              .dash-empty-icon {
                font-size: 64px;
                color: var(--text-light);
                opacity: 0.4;
                margin-bottom: 16px;
              }
              .dash-empty-title {
                font-size: 1.125rem;
                font-weight: 700;
                color: var(--text-main);
                margin-bottom: 8px;
              }
              .dash-empty-desc {
                font-size: 0.875rem;
                color: var(--text-light);
                max-width: 420px;
                margin: 0 auto 24px;
                line-height: 1.5;
              }
              .dash-empty-actions {
                display: flex;
                gap: 12px;
                justify-content: center;
                flex-wrap: wrap;
              }
              .dash-empty-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 10px 20px;
                border-radius: 10px;
                font-size: 0.8125rem;
                font-weight: 600;
                cursor: pointer;
                border: none;
                transition: all 0.2s;
              }
              .dash-empty-btn-primary {
                background: var(--primary);
                color: #fff;
                box-shadow: 0 4px 12px rgba(37, 71, 139, 0.25);
              }
              .dash-empty-btn-primary:hover {
                filter: brightness(1.1);
                transform: translateY(-1px);
              }
              .dash-empty-btn-outline {
                background: var(--surface);
                border: 1px solid var(--border);
                color: var(--text-main);
              }
              .dash-empty-btn-outline:hover {
                background: var(--bg);
              }

              /* --- LOADING / FOOTER --- */
              .dash-loading {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 40px;
                color: var(--text-light);
                font-size: 0.875rem;
              }

              .dash-spinner {
                margin-right: 8px;
              }
              .dash-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                flex-wrap: wrap;
                padding: 18px 24px;
                border-radius: 14px;
                background: var(--surface, #fff);
                border: 1px solid var(--border);
              }
              .dash-footer-info {
                display: flex;
                align-items: center;
                gap: 12px;
              }
              .dash-footer-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(37, 71, 139, 0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--primary);
              }
              .dash-footer-label {
                font-size: 0.8125rem;
                font-weight: 700;
                color: var(--text-main);
              }
              .dash-footer-time {
                font-size: 0.75rem;
                color: var(--text-light);
              }

/* --- From: Page_Ops_Inventory.html --- */
/* Stock-specific styles */
#stk-table thead th { white-space:nowrap; }
.tp-table-scroll { overflow-x:auto; }
.stk-bar { display:flex; align-items:center; gap:6px; min-width:120px; }
.stk-bar-bg { flex:1; height:8px; border-radius:4px; background:var(--border); overflow:hidden; position:relative; }
.stk-bar-fill { height:100%; border-radius:4px; transition:width .4s ease; }
.stk-bar-fill.ok { background:var(--green-500, #22c55e); }
.stk-bar-fill.low { background:var(--amber-500); }
.stk-bar-fill.out { background:var(--red-500); }
.stk-bar-fill.over { background:var(--blue-500); }
.stk-bar-txt { font-size:0.7rem; color:var(--text-light); white-space:nowrap; min-width:32px; text-align:right; }

.stk-chart-section { margin:16px 0 24px; padding:20px; background:var(--surface, #fff); border-radius:12px; border:1px solid var(--border); }
.stk-chart-title { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:0.875rem; font-weight:700; color:var(--text-primary); }
.stk-chart-title span { font-size:20px; color:var(--primary); }
.stk-chart-grid { display:flex; gap:24px; flex-wrap:wrap; }
.stk-chart-col { flex:1; min-width:280px; }
.stk-h-bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:0.75rem; }
.stk-h-name { width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.stk-h-track { flex:1; height:18px; border-radius:4px; background:var(--border); overflow:hidden; }
.stk-h-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.stk-h-fill.val { background:linear-gradient(90deg, var(--primary), var(--primary-action-bg)); }
.stk-h-fill.qty { background:linear-gradient(90deg, var(--green-500, #22c55e), var(--green-600)); }
.stk-h-val { min-width:70px; text-align:right; font-weight:600; font-size:0.75rem; }

.stk-region-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin-top:16px; }
.stk-region-card { padding:14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); text-align:center; }
.stk-region-name { font-size:0.75rem; color:var(--text-light); margin-bottom:4px; }
.stk-region-val { font-size:1.1rem; font-weight:700; color:var(--text-primary); }
.stk-region-sub { font-size:0.7rem; color:var(--text-muted); }

/* --- From: Page_Ops_NCC_Evaluation.html --- */
/* ═══════════════════════════════════════════ */
/*  NCC Evaluation — Tiêu chí & Đánh giá     */
/* ═══════════════════════════════════════════ */
.neval-page { max-width: 1200px; margin: 0 auto; }

/* ─── Header ─── */
.neval-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.neval-header h1 { font-size:1.25rem; font-weight:800; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.neval-header h1 .material-symbols-outlined { color:var(--amber-500, #F59E0B); font-size:28px; }
.neval-header-actions { display:flex; gap:8px; }

/* ─── Tabs ─── */
.neval-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--border); }
.neval-tab {
    padding:10px 24px; font-size:13px; font-weight:700; cursor:pointer; border:none;
    background:transparent; color:var(--text-light); position:relative; transition:all 0.2s;
    border-bottom:2px solid transparent; margin-bottom:-2px;
}
.neval-tab:hover { color:var(--text-main); }
.neval-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.neval-tab .material-symbols-outlined { font-size:16px; vertical-align:middle; margin-right:4px; }

/* ─── Tab panels ─── */
.neval-panel { display:none; }
.neval-panel.active { display:block; }

/* ─── KPI Strip ─── */
.neval-kpi { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.neval-kpi-card {
    background:var(--surface); border-radius:10px; padding:12px 18px;
    border:1px solid var(--border); min-width:120px; text-align:center; flex:1;
}
.neval-kpi-num { font-size:1.4rem; font-weight:800; color:var(--primary); }
.neval-kpi-label { font-size:0.6875rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* ─── Criteria Table ─── */
.neval-table-wrap { background:var(--surface); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.neval-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.neval-table thead th {
    background:var(--bg); color:var(--text-light); font-size:0.6875rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    padding:10px 14px; text-align:left; border-bottom:1px solid var(--border);
}
.neval-table tbody td {
    padding:10px 14px; border-bottom:1px solid var(--border-light, rgba(0,0,0,0.04));
    vertical-align:middle;
}
.neval-table tbody tr:hover { background:rgba(37,71,139,0.03); }

/* ─── Ranking badges ─── */
.neval-rank {
    display:inline-block; padding:3px 10px; border-radius:12px;
    font-size:11px; font-weight:700; min-width:32px; text-align:center;
}
.neval-rank-a { background:rgba(16,185,129,0.12); color:#059669; }
.neval-rank-b { background:rgba(59,130,246,0.12); color:#2563EB; }
.neval-rank-c { background:rgba(245,158,11,0.12); color:#D97706; }
.neval-rank-d { background:rgba(239,68,68,0.12); color:#DC2626; }

/* ─── Score bar ─── */
.neval-score-bar {
    display:flex; align-items:center; gap:8px;
}
.neval-score-track {
    flex:1; height:8px; background:var(--bg); border-radius:4px; overflow:hidden; min-width:80px;
}
.neval-score-fill { height:100%; border-radius:4px; transition:width 0.3s; }
.neval-score-num { font-weight:700; font-size:12px; min-width:32px; text-align:right; }

/* ─── Buttons ─── */
.neval-btn {
    padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600;
    cursor:pointer; border:1px solid var(--border); background:var(--surface);
    color:var(--text-main); display:inline-flex; align-items:center; gap:6px;
    transition:all 0.2s;
}
.neval-btn:hover { background:var(--bg); color:var(--text-main); }
.neval-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.neval-btn-primary:hover { background:var(--primary-hover, #1e3a6e); color:#fff; }
.neval-btn-amber { background:var(--amber-500, #F59E0B); color:#fff; border-color:var(--amber-500); }
.neval-btn-amber:hover { background:#E08E0B; color:#fff; }
.neval-act-btn {
    width:28px; height:28px; border-radius:6px; border:none; background:transparent;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    transition:all 0.15s; color:var(--text-light);
}
.neval-act-btn:hover { background:var(--bg); color:var(--primary); }
.neval-act-btn.danger:hover { color:var(--danger); }

/* ─── Toggle ─── */
.neval-toggle { position:relative; width:36px; height:20px; display:inline-block; }
.neval-toggle input { opacity:0; width:0; height:0; }
.neval-toggle-slider {
    position:absolute; top:0; left:0; right:0; bottom:0; background:var(--border);
    border-radius:10px; cursor:pointer; transition:0.3s;
}
.neval-toggle-slider::before {
    content:''; position:absolute; width:16px; height:16px; border-radius:50%;
    bottom:2px; left:2px; background:#fff; transition:0.3s;
}
.neval-toggle input:checked + .neval-toggle-slider { background:var(--success, #10B981); }
.neval-toggle input:checked + .neval-toggle-slider::before { transform:translateX(16px); }

/* ─── Empty & Loading ─── */
.neval-empty { text-align:center; padding:50px 20px; color:var(--text-light); }
.neval-empty .material-symbols-outlined { font-size:48px; opacity:0.2; display:block; margin-bottom:12px; }
.neval-loading { text-align:center; padding:40px; color:var(--text-light); }

/* ─── Popup ─── */
.neval-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:20px;
    z-index:9999; animation:khFadeIn 0.2s ease forwards; overflow-y:auto;
}
.neval-overlay.hidden { display:none !important; }
.neval-popup {
    background:var(--surface); width:580px; max-width:92vw; max-height:88vh;
    border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.2);
    overflow:hidden; display:flex; flex-direction:column;
}
.neval-popup select, .neval-popup input { width:100%; max-width:100%; box-sizing:border-box; }
.neval-popup-hdr {
    padding:16px 20px; background:var(--primary); color:#fff;
    display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.neval-popup-hdr h3 { margin:0; font-size:1rem; font-weight:700; }
.neval-popup-body { padding:20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
.neval-form-row { display:flex; flex-direction:column; gap:4px; }
.neval-form-row label { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); }
.neval-form-row input, .neval-form-row select {
    padding:9px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--bg); color:var(--text-main);
}
.neval-form-row input:focus, .neval-form-row select:focus { border-color:var(--primary); outline:none; }
.neval-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.neval-popup-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* ─── Scoring Grid ─── */
.neval-scoring-grid { display:flex; flex-direction:column; gap:12px; }
.neval-scoring-row {
    background:var(--bg); border-radius:8px; padding:12px; display:flex;
    justify-content:space-between; align-items:center; gap:12px;
}
.neval-scoring-name { font-weight:600; font-size:13px; flex:1; }
.neval-scoring-weight { font-size:11px; color:var(--text-light); min-width:60px; text-align:right; }
.neval-scoring-input {
    width:60px; padding:6px 8px; border-radius:6px; border:1px solid var(--border);
    font-size:14px; font-weight:700; text-align:center; background:var(--surface);
    color:var(--primary);
}
.neval-scoring-input:focus { border-color:var(--primary); outline:none; }

@media (max-width:768px) {
    .neval-kpi { flex-direction:column; }
    .neval-tabs { overflow-x:auto; }
    .neval-form-row-2 { grid-template-columns:1fr; }
    .neval-scoring-row { flex-wrap:wrap; }
}

/* --- From: Page_Ops_NCC_List.html --- */
.btn-status { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;border:1.5px solid;font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.2s;background:transparent; }
.btn-status-pause { color:var(--warning,#D97706);border-color:var(--warning,#D97706); }
.btn-status-pause:hover { background:rgba(217,119,6,0.08); }
.btn-status-activate { color:var(--success,#10B981);border-color:var(--success,#10B981); }
.btn-status-activate:hover { background:rgba(16,185,129,0.08); }

/* ★ Fix tp-filter-select: custom arrow, consistent height */
.tp-filter-select {
    appearance: none; -webkit-appearance: none;
    padding: 0 32px 0 12px !important;
    height: 36px; line-height: 36px;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background-color: var(--surface, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--text-main, #111827);
    font-size: 0.8125rem; font-weight: 500;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 130px;
}
.tp-filter-select:hover { border-color: var(--primary, #2563EB); }
.tp-filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light, rgba(37,99,235,0.12)); }

/* ★ NCC Guide section */
.ncc-guide-section { margin: 20px 0 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.ncc-guide-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; user-select: none; font-weight: 600; font-size: 0.875rem; color: var(--text-main); background: var(--bg-alt, #f9fafb); transition: background 0.15s; }
.ncc-guide-header:hover { background: var(--border-light, #f1f5f9); }
.ncc-guide-chevron { margin-left: auto; transition: transform 0.25s; opacity: 0.5; }
.ncc-guide-body { display: none; padding: 20px; }
.ncc-guide-body.open { display: block; }
.ncc-guide-step { display: flex; gap: 14px; align-items: flex-start; }
.ncc-guide-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-light, #dbeafe); color: var(--primary); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }
.ncc-guide-text h4 { font-size: 0.8125rem; font-weight: 700; margin: 0 0 4px; color: var(--text-main); }
.ncc-guide-text p { font-size: 0.75rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
/* Tab nav */
.ncc-guide-tab-nav { display: flex; gap: 6px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1.5px solid var(--border); }
.ncc-guide-tab-btn { padding: 6px 18px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 0.8rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--text-muted); transition: all 0.18s; }
.ncc-guide-tab-btn:hover { border-color: var(--primary); color: var(--primary); }
.ncc-guide-tab-btn.tab-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ★ Delete NCC */
.btn-delete-ncc { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1.5px solid transparent; background: transparent; color: var(--text-muted); cursor:pointer; transition: all 0.18s; }
.btn-delete-ncc:hover { background: rgba(220,38,38,0.08); border-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }
.btn-delete-ncc .material-symbols-outlined { font-size:16px; }

/* --- From: Page_Ops_PO_List.html --- */
.posla-banner { border-radius:12px; border:1px solid var(--border, #333); overflow:hidden; margin-bottom:16px; background:var(--surface, #1a1a2e); }
    .posla-banner-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; cursor:pointer; user-select:none; background:linear-gradient(135deg, rgba(59,130,246,0.06), rgba(244,63,94,0.04)); }
    .posla-banner-hdr:hover { background:linear-gradient(135deg, rgba(59,130,246,0.1), rgba(244,63,94,0.07)); }
    .posla-banner-hdr-left { display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; color:var(--text-main, #e2e8f0); }
    .posla-banner-hdr-left .posla-count { background:#dc2626; color:#fff; font-size:0.65rem; font-weight:800; padding:2px 8px; border-radius:10px; }
    .posla-banner-body { transition:max-height 300ms ease; overflow:hidden; }
    .posla-sec { border-top:1px solid var(--border, #2d2d44); }
    .posla-sec-hdr { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; cursor:pointer; font-size:0.8125rem; font-weight:600; color:var(--text-main, #e2e8f0); user-select:none; }
    .posla-sec-hdr:hover { background:rgba(255,255,255,0.03); }
    .posla-sec-body { max-height:0; overflow:hidden; transition:max-height 250ms ease; }
    .posla-sec-body.open { max-height:400px; overflow-y:auto; }
    .posla-card { display:flex; align-items:center; gap:10px; padding:8px 18px; border-left:3px solid transparent; font-size:0.8rem; cursor:pointer; }
    .posla-card:hover { background:rgba(255,255,255,0.02); }
    .posla-card.normal { border-left-color:#4CAF50; }
    .posla-card.warning { border-left-color:#FF9800; background:rgba(255,152,0,0.04); }
    .posla-card.expired { border-left-color:#F44336; background:rgba(244,67,54,0.04); }
    .posla-card-ma { font-weight:700; color:var(--primary, #6366f1); min-width:100px; }
    .posla-card-info { flex:1; color:var(--text-light, #94a3b8); }
    .posla-card-badge { font-size:0.7rem; font-weight:700; min-width:80px; text-align:right; }
    .posla-card-badge.danger { color:#F44336; }
    .posla-card-badge.warning { color:#FF9800; }
    .posla-card-badge.info { color:#3b82f6; }
    .posla-card-badge.success { color:#22c55e; }
    @media (max-width:768px) {
      .posla-card { flex-wrap:wrap; gap:6px; }
      .posla-card-ma { min-width:80px; }
    }
    /* ★ PO WORKFLOW GUIDE */
    .po-guide-section { border-radius:12px; border:1px solid var(--border); overflow:hidden; margin-top:20px; background:var(--surface); }
    .po-guide-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; cursor:pointer; user-select:none; background:linear-gradient(135deg, rgba(59,130,246,0.04), rgba(34,197,94,0.03)); }
    .po-guide-header:hover { background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(34,197,94,0.05)); }
    .po-guide-title { display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:700; color:var(--text-main); }
    .po-guide-body { display:none; padding:18px; border-top:1px solid var(--border); }
    .po-guide-flow { margin-bottom:16px; padding:16px; background:var(--bg-section, #f8fafc); border-radius:10px; }
    .po-flow-stepper { display:flex; align-items:center; gap:0; overflow-x:auto; padding:8px 0; }
    .po-flow-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; min-width:70px; }
    .po-flow-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:#fff; }
    .po-flow-dot.draft { background:#6b7280; }
    .po-flow-dot.warning { background:#f59e0b; }
    .po-flow-dot.success { background:#22c55e; }
    .po-flow-dot.info { background:#3b82f6; }
    .po-flow-dot.primary { background:var(--primary, #6366f1); }
    .po-flow-dot.accent { background:#8b5cf6; }
    .po-flow-dot.done { background:#16a34a; }
    .po-flow-label { font-size:.65rem; text-align:center; color:var(--text-light); line-height:1.3; }
    .po-flow-label small { color:var(--text-light); font-weight:600; }
    .po-flow-line { flex:1; height:2px; background:var(--border); min-width:16px; }
    .po-guide-details { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .po-guide-col h5 { margin:0 0 8px; font-size:.8rem; color:var(--text-main); }
    .po-guide-col ul { margin:0; padding:0 0 0 18px; font-size:.78rem; color:var(--text-light); line-height:1.7; }
    .po-guide-col code { background:rgba(99,102,241,0.1); color:var(--primary); padding:1px 6px; border-radius:4px; font-size:.7rem; }
    .po-guide-sla-tbl { width:100%; border-collapse:collapse; font-size:.78rem; }
    .po-guide-sla-tbl td { padding:5px 8px; border-bottom:1px solid var(--border-light, #e5e7eb); }
    .po-guide-sla-tbl .sla-val { font-weight:700; text-align:right; }
    .po-guide-sla-tbl .sla-val.warn { color:#d97706; }
    .po-guide-sla-tbl .sla-val.info { color:#3b82f6; }
    .po-guide-sla-tbl .sla-val.danger { color:#dc2626; }
    @media (max-width:768px) { .po-guide-details { grid-template-columns:1fr; } .po-flow-step { min-width:55px; } }

    /* ★ INLINE PO VIEW — CENTERED POPUP */
    .po-view-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10001; justify-content:center; align-items:center; }
    .po-view-overlay.open { display:flex; }
    .po-view-panel { width:720px; max-width:94vw; max-height:90vh; background:var(--surface, #fff); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.25); display:flex; flex-direction:column; animation:pvw-pop-in 0.2s ease; }
    @keyframes pvw-pop-in { from { transform:scale(0.95); opacity:0; } to { transform:scale(1); opacity:1; } }
    .po-view-panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); flex-shrink:0; border-radius:16px 16px 0 0; background:linear-gradient(135deg, rgba(99,102,241,0.04), rgba(34,197,94,0.03)); }
    .po-view-panel-header h3 { margin:0; font-size:1rem; font-weight:700; color:var(--text-main); }
    .po-view-close { background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; color:var(--text-light); }
    .po-view-close:hover { background:rgba(0,0,0,0.06); color:var(--text-main); }
    .po-view-panel-body { flex:1; overflow-y:auto; padding:24px; }
    /* PVW content styles */
    .pvw-header { margin-bottom:16px; }
    .pvw-status { margin-bottom:10px; }
    .pvw-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .pvw-meta-row { display:flex; flex-direction:column; gap:2px; }
    .pvw-label { font-size:.7rem; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:.03em; }
    .pvw-val { font-size:.8125rem; color:var(--text-main); }
    .pvw-section { margin-bottom:16px; padding:14px; border:1px solid var(--border-light, #e5e7eb); border-radius:10px; background:var(--bg-section, #f8fafc); }
    .pvw-sec-title { display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:var(--text-main); margin-bottom:10px; }
    .pvw-sec-title .material-symbols-outlined { font-size:18px; color:var(--primary); }
    .pvw-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .pvw-items-table { overflow-x:auto; }
    .pvw-items-table table { width:100%; border-collapse:collapse; font-size:.8rem; }
    .pvw-items-table th { padding:6px 8px; font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--text-light); text-align:left; border-bottom:2px solid var(--border); background:var(--surface); }
    .pvw-items-table td { padding:6px 8px; border-bottom:1px solid var(--border-light, #e5e7eb); }
    .pvw-items-table tfoot td { border-top:2px solid var(--border); }
    .pvw-actions { display:flex; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
    @media (max-width:768px) { .po-view-panel { width:100vw; max-width:100vw; } .pvw-meta, .pvw-grid { grid-template-columns:1fr; } }

/* --- From: Page_Ops_PO_View.html --- */
/* ====== PO Payment History Section ====== */
.po-pay-history {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.po-pay-history-title {
    display: flex; align-items: center; gap: 8px; font-size: 0.8125rem;
    font-weight: 700; color: var(--text-main); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.po-pay-history-title span { font-size: 20px; color: var(--primary); }
.po-pay-progress { margin-bottom: 16px; }
.po-pay-progress-bar {
    height: 10px; background: var(--border-light); border-radius: 99px; overflow: hidden;
}
.po-pay-progress-fill {
    height: 100%; border-radius: 99px; transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--primary), var(--green-500, #22c55e));
}
.po-pay-progress-text {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 0.75rem; color: var(--text-light);
}
.po-pay-timeline { display: flex; flex-direction: column; gap: 8px; }
.po-pay-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg-section, #F8FAFC); border-radius: 10px; font-size: 0.8125rem;
    border: 1px solid var(--border-light);
}
.po-pay-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.po-pay-dot.approved { background: var(--green-500, #22c55e); }
.po-pay-dot.pending { background: var(--warning-dark); }
.po-pay-dot.rejected { background: var(--red-500); }
.po-pay-info { flex: 1; }
.po-pay-label { font-weight: 600; color: var(--text-main); }
.po-pay-meta { font-size: 0.6875rem; color: var(--text-light); margin-top: 1px; }
.po-pay-amount { font-weight: 700; font-size: 0.875rem; white-space: nowrap; }
.po-pay-amount.credit { color: var(--green-600); }
.po-pay-empty {
    text-align: center; padding: 20px; color: var(--text-light); font-size: 0.8125rem;
}
.po-pay-empty span { font-size: 32px; display: block; margin-bottom: 6px; opacity: 0.3; }
.po-pay-add-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    background: var(--gradient-primary);
    color: var(--text-inverse, #fff); border: none; cursor: pointer;
    transition: all 0.2s;
}
.po-pay-add-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.po-pay-add-btn span { font-size: 16px; }

/* ====== PO Progress Workflow Section ====== */
.po-progress-section {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.po-progress-title {
    display: flex; align-items: center; gap: 8px; font-size: 0.8125rem;
    font-weight: 700; color: var(--text-main); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.po-progress-title span { font-size: 20px; color: var(--primary); }
.po-progress-stepper {
    display: flex; align-items: center; gap: 4px; margin-bottom: 20px;
    padding: 12px; background: var(--bg-section, #F8FAFC); border-radius: 10px;
}
.po-step-dot {
    width: 28px; height: 28px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 12px;
    font-weight: 700; color: #fff; flex-shrink: 0; transition: all 0.3s;
}
.po-step-dot.done { background: var(--green-500, #22c55e); }
.po-step-dot.active { background: var(--primary); animation: po-pulse 1.5s infinite; }
.po-step-dot.locked { background: var(--border); color: var(--text-light); }
@keyframes po-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4)} 50%{box-shadow:0 0 0 6px rgba(59,130,246,0)} }
.po-step-line { flex: 1; height: 2px; background: var(--border); }
.po-step-line.done { background: var(--green-500, #22c55e); }
.po-step-labels {
    display: flex; justify-content: space-between; font-size: 0.6875rem;
    color: var(--text-light); margin-top: -8px; margin-bottom: 16px;
    padding: 0 4px;
}
.po-step-labels span { text-align: center; flex: 1; }
.po-step-card {
    border: 1px solid var(--border); border-radius: 10px; padding: 16px;
    margin-bottom: 10px; background: var(--surface);
}
.po-step-card.active { border-color: var(--primary); background: rgba(59,130,246,0.03); }
.po-step-card.done { border-color: var(--green-500, #22c55e); background: rgba(34,197,94,0.03); }
.po-step-card.locked { opacity: 0.5; pointer-events: none; }
.po-step-card-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-weight: 600; font-size: 0.8125rem;
}
.po-step-card-header .material-symbols-outlined { font-size: 18px; }
.po-step-form { display: flex; flex-direction: column; gap: 10px; }
.po-step-form label { font-size: 0.75rem; color: var(--text-light); font-weight: 500; }
.po-step-form input, .po-step-form textarea {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; font-family: inherit; width: 100%; box-sizing: border-box;
}
.po-step-form textarea { min-height: 60px; resize: vertical; }
.po-step-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 8px; font-size: 0.8125rem; font-weight: 600; border: none;
    cursor: pointer; transition: all 0.2s; color: #fff;
}
.po-step-btn.primary { background: var(--primary); }
.po-step-btn.success { background: var(--green-500, #22c55e); }
.po-step-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.po-step-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ====== PO Payment Request Section ====== */
.po-tt-section {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.po-tt-title {
    display: flex; align-items: center; gap: 8px; font-size: 0.8125rem;
    font-weight: 700; color: var(--text-main); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.po-tt-title span { font-size: 20px; color: var(--warning-dark); }
.po-tt-dot {
    background: var(--bg-section, #F8FAFC); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 14px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.po-tt-dot-info { font-size: 0.8125rem; }
.po-tt-dot-label { font-weight: 600; color: var(--text-main); }
.po-tt-dot-amount { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }
.po-tt-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    border-radius: 20px; font-size: 0.6875rem; font-weight: 600;
}
.po-tt-badge.waiting { background: #FEF3C7; color: #92400E; }
.po-tt-badge.done { background: #D1FAE5; color: #065F46; }
.po-tt-badge.locked { background: var(--bg-section); color: var(--text-light); }

/* ====== Phase 04: Tab Đối Soát NCC VC ====== */
.po-ds-section {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.po-ds-title {
    display: flex; align-items: center; gap: 8px; font-size: 0.8125rem;
    font-weight: 700; color: var(--text-main); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.po-ds-title span { font-size: 20px; color: var(--info); }
.po-ds-form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: flex-end; }
.po-ds-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.po-ds-field label { font-size: 0.7rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; }
.po-ds-field input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; }
.po-ds-field input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
.po-ds-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.po-ds-table thead { background: var(--surface-alt); }
.po-ds-table th { padding: 8px 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-light); text-align: left; border-bottom: 1px solid var(--border); }
.po-ds-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.po-ds-table input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; }
.po-ds-table input:focus { border-color: var(--primary); outline: none; }
.po-ds-table .td-r { text-align: right; }
.po-ds-dev { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; }
.po-ds-dev.ok { background: #D1FAE5; color: #065F46; }
.po-ds-dev.warn { background: #FEF3C7; color: #92400E; }
.po-ds-dev.bad { background: #FEE2E2; color: #991B1B; }
.po-ds-footer-row { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: var(--bg-section); border-radius: 8px; margin-top: 4px; font-size: 0.8125rem; }
.po-ds-footer-row.total { font-weight: 700; border-top: 2px solid var(--text-main); }
.po-ds-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.po-ds-btn { padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.po-ds-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.po-ds-btn.confirm { background: var(--green-500, #22c55e); color: #fff; }
.po-ds-btn.cancel { background: var(--red-500, #ef4444); color: #fff; }
.po-ds-btn.upload { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); }

/* ★ PO Preview (English Purchase Order) */
.pp { font-size: 9pt; }
.pp table { width: 100%; border-collapse: collapse; }
.os-bar td { height: 5px; background: linear-gradient(90deg, #25478B, #1a3a6e); }
.os-logo td { padding: 10px 6px; }
.os-logo img { max-height: 60px; width: auto; }
.os-title td { text-align: center; font-size: 16pt; font-weight: 900; color: #25478B; padding: 14px 0 4px; letter-spacing: 2px; }
.os-subtitle { font-size: 9pt; font-weight: 400; color: #666; letter-spacing: 0; }
.os-info td { padding: 3px 6px; font-size: 8.5pt; }
.os-info .il { font-weight: 700; color: #333; white-space: nowrap; width: 85px; }
.os-info .is { width: 10px; text-align: center; color: #999; }
.os-info .iv { color: #444; }
.os-info .iv-accent { color: #25478B; font-weight: 600; }
.os-intro td { padding: 12px 6px 8px; font-size: 9pt; color: #333; }
.os-th td { background: #25478B; color: #fff; font-weight: 700; font-size: 7.5pt; text-transform: uppercase; padding: 6px 5px; text-align: center; border: 1px solid #1a3a6e; }
.os-td td { padding: 5px 5px; border: 1px solid #ddd; font-size: 8pt; text-align: center; vertical-align: middle; }
.os-td:nth-child(even) td { background: #f8fafc; }
.os-td .td-l { text-align: left; }
.os-td .td-r { text-align: right; font-family: 'Courier New', monospace; }
.pp-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; border: 1px solid #e2e8f0; }
.pp-no-img { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 4px; }
.pp-no-img .material-symbols-outlined { font-size: 16px; color: #cbd5e1; }
.os-policy-hdr td { padding: 10px 6px 4px; font-weight: 700; font-size: 9pt; color: #25478B; border-top: 2px solid #25478B; }
.os-ptrow td { padding: 3px 6px; font-size: 8pt; vertical-align: top; }
.os-ptrow .pl { color: #555; }
.os-ptrow .tl { font-weight: 700; text-align: right; color: #333; white-space: nowrap; }
.os-ptrow .ts { width: 10px; text-align: center; }
.os-ptrow .tv { text-align: right; font-family: 'Courier New', monospace; color: #25478B; font-weight: 600; }
.os-ptrow.os-final td { border-top: 2px solid #25478B; padding-top: 6px; }
.os-ptrow.os-final .tv { font-size: 11pt; font-weight: 900; color: #dc2626; }
.os-sig td { padding: 6px; font-size: 8pt; font-weight: 700; color: #555; text-align: center; }
.os-sig-space td { height: 50px; border-bottom: 1px dashed #ccc; }
.os-footer td { padding: 10px 6px; font-size: 9pt; font-style: italic; color: #666; }

/* --- From: Page_Ops_PrintLabel.html --- */
/* Print Label Page */
.lbl-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
@media (max-width: 900px) { .lbl-layout { grid-template-columns: 1fr; } }

/* Settings panel */
.lbl-panel { background: var(--surface, #fff); border-radius: 14px; border: 1px solid var(--border); padding: 20px; height: fit-content; position: sticky; top: 20px; }
.lbl-panel h3 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.lbl-panel h3 .material-symbols-outlined { font-size: 20px; color: var(--primary); }

.lbl-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.lbl-field label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light, #677183); }
.lbl-field input, .lbl-field select, .lbl-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem;
    background: var(--bg); color: var(--text-main); outline: none; font-family: inherit;
}
.lbl-field input:focus, .lbl-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.1); }
.lbl-sep { border-top: 1px solid var(--border-light); margin: 14px 0; }

/* Label Size presets */
.lbl-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.lbl-size-btn { padding: 8px 4px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg); text-align: center; cursor: pointer; transition: all 0.15s; }
.lbl-size-btn:hover { border-color: var(--primary); }
.lbl-size-btn.active { border-color: var(--primary); background: rgba(37,99,235,0.06); }
.lbl-size-btn strong { display: block; font-size: 0.75rem; color: var(--text-main); }
.lbl-size-btn span { font-size: 0.6rem; color: var(--text-light); }

/* Preview */
.lbl-preview { background: var(--surface, #fff); border-radius: 14px; border: 1px solid var(--border); padding: 20px; }
.lbl-preview h3 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 800; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lbl-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lbl-w, 200px), 1fr)); gap: 8px; }

/* Single label */
.lbl-item { border: 1px dashed #ccc; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; break-inside: avoid; page-break-inside: avoid; }
.lbl-item-name { font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 1.1; max-height: 2.2em; overflow: hidden; }
.lbl-item-sku { font-size: 0.6rem; color: #666; }
.lbl-item-price { font-size: 0.7rem; font-weight: 800; color: var(--red-600); }
.lbl-item canvas, .lbl-item svg { max-width: 100%; }

/* Action buttons */
.lbl-actions { display: flex; gap: 8px; margin-top: 16px; }
.lbl-btn { flex: 1; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 0.85rem; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.lbl-btn-ghost { background: var(--bg); color: var(--text-main); }
.lbl-btn-ghost:hover { background: var(--border-light); }
.lbl-btn-primary { background: linear-gradient(135deg, var(--blue-500), var(--info)); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.lbl-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,0.4); }
.lbl-btn .material-symbols-outlined { font-size: 18px; }

/* Print styles */
@media print {
    .app-sidebar-primary, .app-sidebar-secondary, .app-navbar-top, .sidebar-flyout-backdrop,
    .lbl-panel, .tp-breadcrumb, .tp-page-header, .lbl-actions, .lbl-preview h3 { display: none !important; }
    .app-main, .app-content-wrapper, .app-body, .tp-page { padding: 0 !important; margin: 0 !important; }
    .lbl-layout { display: block !important; }
    .lbl-preview { border: none !important; box-shadow: none !important; padding: 0 !important; }
    .lbl-preview-grid { gap: 2px !important; }
    .lbl-item { border: 1px solid #ccc !important; border-style: dashed !important; }
}

/* --- From: Page_Ops_PR_View.html --- */
/* ====== HIDE PDF PREVIEW (PR doesn't need it) ====== */
.dv-right { display: none !important; }
.dv-container { grid-template-columns: 260px 1fr !important; }

@media (min-width: 1025px) {
    .dv-container.dv-layout-quote,
    .dv-container.dv-layout-order {
        grid-template-columns: 260px minmax(520px, 1fr) minmax(520px, 1fr) !important;
    }
    .dv-container.dv-layout-quote .dv-right,
    .dv-container.dv-layout-order .dv-right {
        display: flex !important;
    }
}

/* ====== WORKFLOW TIMELINE ====== */
.pr-timeline {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 16px;
}
.pr-timeline-title {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-light); margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.pr-timeline-title span { font-size: 18px; color: var(--primary); }
.pr-timeline-track {
    display: flex; align-items: flex-start; gap: 0; position: relative;
    padding: 0 4px;
}
.pr-tl-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    position: relative; min-width: 0;
}
.pr-tl-dot {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 13px; font-weight: 700;
    border: 2px solid var(--border); background: var(--surface); color: var(--text-light);
    position: relative; z-index: 2; transition: all 0.3s;
}
.pr-tl-dot span { font-size: 16px; }
.pr-tl-step.done .pr-tl-dot { background: var(--success); border-color: var(--success); color: #fff; }
.pr-tl-step.active .pr-tl-dot {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 0 0 4px var(--primary-light);
    animation: pr-tl-pulse 2s ease-in-out infinite;
}
.pr-tl-step.rejected .pr-tl-dot { background: var(--danger); border-color: var(--danger); color: #fff; }
@keyframes pr-tl-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--primary-light); }
    50% { box-shadow: 0 0 0 8px rgba(59,130,246,0.1); }
}
.pr-tl-label {
    margin-top: 6px; font-size: 0.6rem; font-weight: 600; color: var(--text-light);
    text-align: center; line-height: 1.2; max-width: 72px;
}
.pr-tl-step.done .pr-tl-label { color: var(--success-dark); }
.pr-tl-step.active .pr-tl-label { color: var(--primary); font-weight: 700; }
.pr-tl-step.rejected .pr-tl-label { color: var(--danger); }
.pr-tl-line {
    position: absolute; top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px);
    height: 2px; background: var(--border); z-index: 1;
}
.pr-tl-step.done .pr-tl-line { background: var(--success); }
.pr-tl-step:last-child .pr-tl-line { display: none; }
/* Urgency badge */
.pr-urgency-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px;
    border-radius: 6px; font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.03em; margin-left: 8px;
}
.pr-urgency-gap { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; animation: pr-gap-blink 1.5s ease-in-out infinite; }
@keyframes pr-gap-blink { 50% { opacity: 0.7; } }
.pr-urgency-cap-bach { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.pr-urgency-binh-thuong { background: var(--neutral-100); color: var(--text-light); }

/* ====== INLINE EDIT MODE ====== */
.pr-inline-edit {
    padding: 20px 24px;
}
.pr-ie-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.pr-ie-header h2 {
    font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0; flex: 1;
    display: flex; align-items: center; gap: 8px;
}
.pr-ie-header h2 span { font-size: 22px; }
.pr-ie-cancel {
    background: var(--neutral-100); border: 1px solid var(--border); color: var(--text-light);
    padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.8125rem;
    font-weight: 600; transition: all 0.2s;
}
.pr-ie-cancel:hover { background: var(--neutral-200); color: var(--text-main); }
.pr-ie-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
}
.pr-ie-section-title {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--primary); margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.pr-ie-section-title span { font-size: 18px; }
.pr-ie-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.pr-ie-field label {
    display: block; font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 4px;
}
.pr-ie-field input, .pr-ie-field select, .pr-ie-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; background: var(--surface);
    outline: none; transition: border-color 0.2s;
}
.pr-ie-field input:focus, .pr-ie-field select:focus, .pr-ie-field textarea:focus {
    border-color: var(--primary);
}
.pr-ie-field.full { grid-column: 1 / -1; }
/* Items table */
.pr-ie-items-table {
    width: 100%; border-collapse: collapse; font-size: 0.8125rem;
}
.pr-ie-items-table th {
    text-align: left; font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-light); padding: 8px 6px; border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.pr-ie-items-table td {
    padding: 6px; border-bottom: 1px solid var(--neutral-100); vertical-align: middle;
}
.pr-ie-items-table input {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.78rem; background: var(--surface); outline: none;
}
.pr-ie-items-table input:focus { border-color: var(--primary); }
.pr-ie-items-table input:disabled {
    background: var(--neutral-50); color: var(--text-light);
}
.pr-ie-items-table .pr-ie-remove {
    background: none; border: none; color: var(--text-light); cursor: pointer;
    padding: 4px; border-radius: 6px; transition: all 0.2s;
}
.pr-ie-items-table .pr-ie-remove:hover { color: var(--danger); background: var(--danger-bg); }
.pr-ie-add-row {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
    padding: 6px 14px; border-radius: 8px; border: 1px dashed var(--border);
    background: transparent; cursor: pointer; font-size: 0.75rem;
    font-weight: 600; color: var(--primary); transition: all 0.2s;
}
.pr-ie-add-row:hover { background: var(--primary-light); border-color: var(--primary); }
.pr-ie-footer {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--border);
}
.pr-ie-btn {
    padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 0.8125rem; font-weight: 600; display: inline-flex;
    align-items: center; gap: 6px; transition: all 0.2s;
}
.pr-ie-btn span { font-size: 18px; }
.pr-ie-btn-secondary {
    background: var(--neutral-100); color: var(--text-main); border: 1px solid var(--border);
}
.pr-ie-btn-secondary:hover { background: var(--neutral-200); }
.pr-ie-btn-primary {
    background: var(--primary); color: #fff;
}
.pr-ie-btn-primary:hover { background: var(--primary-dark); }

/* ====== NCC POPOVER (Inline Edit) ====== */
.ie-ncc-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 0.7rem;
    font-weight: 600; color: var(--primary); transition: all 0.15s;
    white-space: nowrap;
}
.ie-ncc-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.ie-ncc-btn.selected { background: var(--success-bg); color: var(--success-dark); border-color: var(--success); }
.ie-ncc-btn.disabled { color: var(--text-light); cursor: default; opacity: 0.5; }
.ie-ncc-popover {
    position: fixed; z-index: 99999; background: var(--surface, #fff);
    border: 1.5px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18); min-width: 340px; max-width: 420px;
    animation: iePopIn 0.2s ease;
}
@keyframes iePopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ie-ncc-popover-header {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface-alt); border-radius: 12px 12px 0 0;
}
.ie-ncc-popover-header h4 { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--text-main); }
.ie-ncc-popover-close {
    width: 24px; height: 24px; border-radius: 6px; border: none;
    background: transparent; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-light);
}
.ie-ncc-popover-close:hover { background: var(--neutral-200); }
.ie-ncc-popover-body { padding: 8px; max-height: 260px; overflow-y: auto; }
.ie-ncc-popover table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.ie-ncc-popover th {
    text-align: left; padding: 5px 6px; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light);
    border-bottom: 1px solid var(--border);
}
.ie-ncc-popover td { padding: 6px; border-bottom: 1px solid var(--neutral-100); cursor: pointer; }
.ie-ncc-popover tr.ncc-row:hover td { background: var(--primary-light); }
.ie-ncc-popover tr.ncc-row.active td { background: var(--success-bg); }
.ie-ncc-popover .ncc-flag { font-size: 0.85rem; }
.ie-ncc-popover .ncc-suggest {
    padding: 8px 10px; border-top: 1px solid var(--border);
    font-size: 0.68rem; color: var(--text-light); background: var(--neutral-50);
    border-radius: 0 0 12px 12px;
}
.ie-ncc-popover .ncc-suggest b { color: var(--primary); }
.ie-ncc-popover .margin-pos { color: #16a34a; font-weight: 600; }
.ie-ncc-popover .margin-neg { color: #dc2626; font-weight: 600; }

/* ====== PR REVIEW SECTION ====== */
.pr-review {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px;
}
.pr-review-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; cursor: pointer; user-select: none;
}
.pr-review-title {
    font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--primary); display: flex; align-items: center; gap: 6px;
}
.pr-review-title span { font-size: 18px; }
.pr-review-toggle {
    border: none; background: var(--neutral-100); color: var(--text-light);
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.pr-review-toggle:hover { background: var(--primary-light); color: var(--primary); }
.pr-review-toggle span { font-size: 16px; transition: transform 0.2s; }
.pr-review-toggle.open span { transform: rotate(180deg); }
.pr-review-body { display: none; }
.pr-review-body.open { display: block; }

/* Smart Suggest Buttons */
.pr-suggest-bar {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 12px; background: var(--neutral-50);
    border-radius: 10px; border: 1px dashed var(--border);
}
.pr-suggest-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 0.75rem;
    font-weight: 600; transition: all 0.2s; color: var(--text-main);
}
.pr-suggest-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); }
.pr-suggest-btn.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.pr-suggest-btn .pr-s-icon { font-size: 16px; }
.pr-suggest-btn .pr-s-sub { font-size: 0.625rem; font-weight: 400; opacity: 0.7; margin-left: 4px; }

/* NCC Selection Table */
.pr-ncc-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-bottom: 16px; }
.pr-ncc-table th {
    text-align: left; font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light); padding: 8px 10px;
    border-bottom: 2px solid var(--border); background: var(--neutral-50);
}
.pr-ncc-table td { padding: 10px; border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.pr-ncc-table tr:last-child td { border-bottom: none; }
.pr-ncc-table .pr-sp-name { font-weight: 600; color: var(--text-main); }
.pr-ncc-table .pr-price { font-family: var(--font-main); font-weight: 700; white-space: nowrap; }
.pr-ncc-select {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.75rem; background: var(--surface); color: var(--text-main); cursor: pointer;
}
.pr-ncc-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-light); }
.pr-margin-badge {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700;
}
.pr-margin-green { background: var(--success-bg); color: var(--success-dark); }
.pr-margin-yellow { background: var(--warning-bg); color: var(--warning-dark); }
.pr-margin-red { background: var(--danger-bg); color: var(--danger-dark); }

/* PO Preview Cards */
.pr-po-preview { margin-top: 16px; }
.pr-po-preview-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--text-light); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.pr-po-card {
    background: var(--neutral-50); border: 1px solid var(--neutral-100);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.pr-po-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--neutral-100);
}
.pr-po-card-ncc { font-weight: 700; font-size: 0.8125rem; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.pr-po-card-meta { font-size: 0.6875rem; color: var(--text-light); }
.pr-po-card-items { font-size: 0.75rem; color: var(--text-main); }
.pr-po-card-items li { margin-bottom: 3px; }
.pr-po-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--neutral-100);
    font-size: 0.75rem;
}
.pr-ncc-flag {
    display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; gap: 3px;
}
.pr-ncc-flag.vn { background: var(--warning-bg); color: var(--warning-dark); }
.pr-ncc-flag.cn { background: var(--info-bg); color: var(--info-dark); }

/* Summary Bar */
.pr-summary {
    background: linear-gradient(135deg, var(--primary-light), var(--neutral-50));
    border: 1px solid var(--primary); border-radius: var(--radius-md); padding: 14px 16px;
    margin-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    justify-content: space-between;
}
.pr-summary-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.pr-summary-stat { font-size: 0.75rem; color: var(--text-main); }
.pr-summary-stat strong { color: var(--primary); font-size: 0.875rem; }
.pr-summary-stat small { display: block; font-size: 0.625rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.3px; }

/* Action Buttons */
.pr-actions {
    display: flex; gap: 10px; align-items: center; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--border);
}
.pr-actions-left { flex: 1; }
.pr-actions-right { display: flex; gap: 8px; }
.pr-reject-input {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.75rem; width: 260px; background: var(--surface); color: var(--text-main);
    font-family: var(--font-main);
}
.pr-reject-input:focus { border-color: var(--danger); outline: none; }
.pr-btn-reject {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--danger);
    background: transparent; color: var(--danger); cursor: pointer;
    font-size: 0.75rem; font-weight: 600; transition: all 0.2s;
}
.pr-btn-reject:hover { background: var(--danger); color: var(--text-inverse); }
.pr-btn-approve {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 20px; border-radius: var(--radius-sm); border: none;
    background: var(--success); color: var(--text-inverse); cursor: pointer;
    font-size: 0.75rem; font-weight: 700; transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}
.pr-btn-approve:hover { opacity: 0.9; transform: translateY(-1px); }
.pr-btn-approve:disabled, .pr-btn-reject:disabled { opacity: 0.5; cursor: not-allowed; }
.pr-btn-approve span, .pr-btn-reject span { font-size: 16px; }

/* Approved/Rejected State */
.pr-result-box {
    border-radius: 10px; padding: 16px; margin-top: 10px;
}
.pr-result-approved { background: var(--success-bg); border: 1px solid var(--green-border); }
.pr-result-rejected { background: var(--danger-bg); border: 1px solid var(--red-border); }
.pr-result-title { font-size: 0.8125rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pr-result-approved .pr-result-title { color: var(--success-dark); }
.pr-result-rejected .pr-result-title { color: var(--danger-dark); }
.pr-result-meta { font-size: 0.75rem; color: var(--text-main); margin-bottom: 4px; }
.pr-result-po-list { list-style: none; padding: 0; margin: 8px 0 0; }
.pr-result-po-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; background: var(--surface); border-radius: 6px; margin-bottom: 4px;
    font-size: 0.75rem;
}
.pr-result-po-list .pr-po-link {
    color: var(--primary); cursor: pointer; font-weight: 600;
    text-decoration: none; display: flex; align-items: center; gap: 3px;
}
.pr-result-po-list .pr-po-link:hover { text-decoration: underline; }

/* Success Popup */
.pr-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay); display: flex; align-items: center;
    justify-content: center; z-index: 9999;
}
.pr-popup {
    background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
    min-width: 360px; max-width: 480px; box-shadow: var(--shadow-popup);
    animation: pr-popup-in 0.25s ease-out; font-family: var(--font-main);
}
@keyframes pr-popup-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.pr-popup-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; color: var(--success-dark); }
.pr-popup-list { list-style: none; padding: 0; margin: 12px 0; }
.pr-popup-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: var(--neutral-50); border-radius: 8px;
    margin-bottom: 6px; font-size: 0.8125rem;
}
.pr-popup-btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.pr-popup-btn {
    padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 0.75rem; font-weight: 600;
    transition: all 0.2s; color: var(--text-main);
}
.pr-popup-btn:hover { border-color: var(--primary); color: var(--primary); }
.pr-popup-btn.primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }

@media (max-width: 768px) {
    .pr-suggest-bar { flex-direction: column; }
    .pr-actions { flex-direction: column; align-items: stretch; }
    .pr-actions-right { justify-content: stretch; }
    .pr-reject-input { width: 100%; }
}

/* --- From: Page_Report_XNT.html --- */
.xnt-filter-bar { display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--surface,#fff); border-radius:12px; border:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.xnt-filter-bar label { font-size:0.8rem; font-weight:600; color:var(--text-light); white-space:nowrap; }
.xnt-filter-bar input[type="date"] { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.85rem; font-family:inherit; color:var(--text-main); background:var(--bg); }
.xnt-filter-bar input[type="date"]:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,71,139,0.1); outline:none; }
.xnt-filter-bar .xnt-sep { width:1px; height:24px; background:var(--border); }
.xnt-quick-btn { padding:6px 14px; border-radius:8px; font-size:0.78rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-main); transition:all .15s; font-family:inherit; }
.xnt-quick-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--bg); }
.xnt-quick-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.xnt-apply-btn { padding:8px 20px; border-radius:8px; font-size:0.85rem; font-weight:700; cursor:pointer; border:none; background:var(--primary); color:#fff; transition:all .2s; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.xnt-apply-btn:hover { filter:brightness(1.1); }
.xnt-apply-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Highlight rows */
.xnt-row-increase td:nth-child(4) { color:var(--green-500); font-weight:700; }
.xnt-row-decrease td:nth-child(5) { color:var(--red-500); font-weight:700; }
.xnt-row-zero td { color:var(--text-light); }

/* Compact table header */
#xnt-table thead th { white-space:nowrap; }

/* --- From: Page_Report_XNT.html --- */
#xnt-history-drawer { display:flex !important; }
#xnt-history-overlay { display:block !important; pointer-events:none; }
#xnt-history-overlay.open { opacity:1; pointer-events:auto; }
#xnt-history-drawer.open { transform:translateX(0); }

/* --- From: Page_Service_Ticket_View.html --- */
/* Service Ticket View Styles */
.stv-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
.stv-back { display:inline-flex; align-items:center; gap:4px; color:var(--text-muted); font-size:.85rem; cursor:pointer; margin-bottom:16px; text-decoration:none; }
.stv-back:hover { color:var(--primary-action-bg); }

.stv-header { background:var(--card-bg); border:1px solid var(--border-default); border-radius:12px; padding:24px; margin-bottom:20px; }
.stv-h-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.stv-h-title { font-size:1.3rem; font-weight:700; color:var(--text-primary); }
.stv-h-code { font-size:.85rem; color:var(--text-muted); margin-top:2px; }
.stv-h-badge { padding:4px 12px; border-radius:20px; font-size:.8rem; font-weight:600; }
.stv-h-actions { display:flex; gap:8px; }
.stv-h-actions button { padding:8px 16px; border-radius:8px; border:1px solid var(--border-default); background:var(--card-bg); color:var(--text-primary); font-size:.85rem; cursor:pointer; display:flex; align-items:center; gap:4px; transition:all .2s; }
.stv-h-actions button:hover { border-color:var(--primary-action-bg); color:var(--primary-action-bg); }
.stv-h-actions .btn-primary { background:var(--primary-action-bg); color:var(--primary-action-text); border-color:var(--primary-action-bg); }
.stv-h-actions .btn-primary:hover { opacity:.9; }
.stv-h-actions .btn-success { background:var(--green-600); color:white; border-color:var(--green-600); }
.stv-h-actions .btn-success:hover { background:#15803d; }

.stv-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px 24px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-default); }
.stv-meta-item { font-size:.85rem; }
.stv-meta-label { color:var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
.stv-meta-value { color:var(--text-primary); font-weight:500; margin-top:2px; }

/* Tabs */
.stv-tabs { display:flex; gap:0; border-bottom:2px solid var(--border-default); margin-bottom:20px; }
.stv-tab { padding:10px 20px; font-size:.9rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.stv-tab:hover { color:var(--text-primary); }
.stv-tab.active { color:var(--primary-action-bg); border-bottom-color:var(--primary-action-bg); }
.stv-tab-content { display:none; }
.stv-tab-content.active { display:block; }

/* Info tab */
.stv-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:768px) { .stv-info-grid { grid-template-columns:1fr; } }
.stv-card { background:var(--card-bg); border:1px solid var(--border-default); border-radius:10px; padding:20px; }
.stv-card-title { font-size:.9rem; font-weight:600; color:var(--text-primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.stv-card-title .material-symbols-outlined { font-size:18px; color:var(--primary-action-bg); }
.stv-field { margin-bottom:10px; }
.stv-field-label { font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.stv-field-value { font-size:.9rem; color:var(--text-primary); margin-top:2px; }

/* Parts table */
.stv-parts { background:var(--card-bg); border:1px solid var(--border-default); border-radius:10px; padding:20px; }
.stv-parts-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.stv-parts-header h3 { font-size:.95rem; font-weight:600; margin:0; }
.stv-parts table { width:100%; border-collapse:collapse; font-size:.85rem; }
.stv-parts th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--border-default); font-weight:600; color:var(--text-muted); font-size:.75rem; text-transform:uppercase; }
.stv-parts td { padding:8px 10px; border-bottom:1px solid var(--border-default); }
.stv-parts .td-r { text-align:right; }
.stv-parts .td-c { text-align:center; }
.stv-parts tfoot td { font-weight:700; border-top:2px solid var(--border-default); }
.stv-parts .btn-del { background:none; border:none; color:var(--status-danger); cursor:pointer; padding:4px; }

/* Progress timeline */
.stv-timeline { position:relative; padding-left:28px; }
.stv-timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border-default); }
.stv-tl-item { position:relative; margin-bottom:24px; }
.stv-tl-dot { position:absolute; left:-24px; top:4px; width:12px; height:12px; border-radius:50%; border:2px solid var(--primary-action-bg); background:var(--card-bg); }
.stv-tl-item.completed .stv-tl-dot { background:var(--primary-action-bg); }
.stv-tl-date { font-size:.75rem; color:var(--text-muted); }
.stv-tl-content { background:var(--card-bg); border:1px solid var(--border-default); border-radius:8px; padding:12px; margin-top:4px; }
.stv-tl-percent { font-weight:600; color:var(--primary-action-bg); }
.stv-tl-note { font-size:.85rem; color:var(--text-primary); margin-top:4px; }

/* Add form */
.stv-add-form { background:var(--card-bg); border:1px solid var(--border-default); border-radius:10px; padding:16px; margin-bottom:16px; }
.stv-add-form h4 { font-size:.85rem; font-weight:600; margin:0 0 12px; }
.stv-add-row { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.stv-add-row .form-group { flex:1; min-width:120px; }
.stv-add-row label { display:block; font-size:.75rem; color:var(--text-muted); margin-bottom:4px; }
.stv-add-row input, .stv-add-row textarea, .stv-add-row select { width:100%; padding:8px; border:1px solid var(--border-default); border-radius:6px; font-size:.85rem; background:var(--input-bg); color:var(--text-primary); }
.stv-add-row button { padding:8px 16px; border-radius:6px; border:none; background:var(--primary-action-bg); color:var(--primary-action-text); cursor:pointer; font-size:.85rem; white-space:nowrap; height:36px; }

.stv-empty { text-align:center; padding:32px; color:var(--text-muted); font-size:.9rem; }
.stv-loading { text-align:center; padding:40px; color:var(--text-muted); }

/* --- From: Popup_DICH_VU_KY_THUAT.html --- */
/* Collapsible sections */
.op-collapse { border:1px solid var(--border,#eee); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main,#1a1a2e); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt,#f7f8fa); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100,#eef0f2); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border,#eee); }

/* --- From: Popup_GomLo.html --- */
/* ===== Gom Lô Overlay ===== */
.gomlo-overlay {
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.55);z-index:10002;align-items:center;justify-content:center;
    animation:gomlo-fadeIn 0.2s ease;
}
.gomlo-overlay.open { display:flex; }
@keyframes gomlo-fadeIn { from{opacity:0} to{opacity:1} }
@keyframes gomlo-slideUp { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }

.gomlo-modal {
    background:var(--surface);border-radius:20px;width:96%;max-width:780px;max-height:90vh;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,0.3);animation:gomlo-slideUp 0.25s ease;
}

/* Header */
.gomlo-header {
    background:linear-gradient(135deg,#1e3a5f,#0ea5e9);color:#fff;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between;
}
.gomlo-header-left { display:flex;align-items:center;gap:12px; }
.gomlo-header-left .material-symbols-outlined { font-size:1.5rem; }
.gomlo-header h2 { margin:0;font-size:1.1rem;font-weight:800; }
.gomlo-header .gomlo-period { font-size:0.8rem;opacity:0.85;font-weight:600; }
.gomlo-close { background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;padding:4px;border-radius:8px;transition:all 0.15s; }
.gomlo-close:hover { color:#fff;background:rgba(255,255,255,0.15); }

/* Info Banner */
.gomlo-info {
    display:flex;align-items:center;gap:8px;padding:10px 24px;
    background:rgba(14,165,233,0.06);border-bottom:1px solid var(--border);
    font-size:0.8rem;font-weight:600;color:var(--text-light);
}

/* Body */
.gomlo-body { padding:16px 24px;overflow-y:auto;flex:1; }

/* Select All */
.gomlo-select-all {
    display:flex;align-items:center;gap:8px;padding:8px 0;margin-bottom:8px;
    border-bottom:1px solid var(--border);font-size:.78rem;font-weight:700;color:var(--text-light);
}
.gomlo-select-all input[type="checkbox"] { width:16px;height:16px;cursor:pointer; }

/* PO Row */
.gomlo-row {
    display:grid;grid-template-columns:28px 1fr 120px 100px 80px;gap:8px;
    padding:10px 0;border-bottom:1px solid var(--border);align-items:center;
    font-size:.82rem;transition:background 0.15s;
}
.gomlo-row:hover { background:rgba(14,165,233,0.03); }
.gomlo-row input[type="checkbox"] { width:16px;height:16px;cursor:pointer; }
.gomlo-row .gomlo-po-code { font-weight:700;color:var(--primary);font-family:monospace;font-size:.8rem; }
.gomlo-row .gomlo-po-ncc { font-size:.76rem;color:var(--text-light); }
.gomlo-row .gomlo-po-donban { font-size:.72rem;color:var(--info,#2563eb); }
.gomlo-row .gomlo-po-amount { text-align:right;font-weight:600;font-family:monospace;font-size:.8rem; }
.gomlo-row .gomlo-po-date { text-align:right;font-size:.72rem;color:var(--text-light); }

/* Summary */
.gomlo-summary {
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    padding:14px 0;margin-top:8px;border-top:2px solid var(--primary);
}
.gomlo-sum-item { text-align:center; }
.gomlo-sum-label { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light); }
.gomlo-sum-value { font-size:1.1rem;font-weight:800;color:var(--primary);font-family:monospace;margin-top:2px; }

/* Footer */
.gomlo-footer {
    padding:14px 24px;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--surface);
}
.gomlo-btn {
    padding:10px 24px;border-radius:10px;font-weight:700;font-size:0.85rem;
    cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-main);transition:all 0.15s;
}
.gomlo-btn-primary { background:var(--primary);color:#fff; }
.gomlo-btn-primary:hover { opacity:0.9;box-shadow:0 4px 16px rgba(14,165,233,0.3); }
.gomlo-btn-primary:disabled { opacity:0.5;cursor:not-allowed; }
.gomlo-btn-cancel { background:var(--bg,#f1f2f4);color:var(--text-main);border:1px solid var(--border); }
.gomlo-btn-cancel:hover { background:var(--border); }

.gomlo-empty { text-align:center;padding:40px 20px;color:var(--text-light);font-size:.85rem; }
.gomlo-empty .material-symbols-outlined { font-size:3rem;opacity:.3;display:block;margin-bottom:12px; }

.gomlo-note { font-size:.72rem;color:var(--text-light);padding:6px 0;font-style:italic; }

@media(max-width:640px) {
    .gomlo-row { grid-template-columns:28px 1fr 90px;font-size:.76rem; }
    .gomlo-row .gomlo-po-date, .gomlo-row .gomlo-po-donban { display:none; }
    .gomlo-footer { flex-direction:column; }
    .gomlo-footer .gomlo-btn { width:100%;justify-content:center; }
}

/* --- From: Popup_PO_Approval_Review.html --- */
/* ===== PO Approval Overlay ===== */
.po-appr-overlay {
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.55);z-index:10002;align-items:center;justify-content:center;
    animation:po-appr-fadeIn 0.2s ease;
}
.po-appr-overlay.open { display:flex; }
@keyframes po-appr-fadeIn { from{opacity:0} to{opacity:1} }
@keyframes po-appr-slideUp { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===== Modal Shell ===== */
.po-appr-modal {
    background:var(--surface);border-radius:20px;width:96%;max-width:900px;max-height:92vh;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,0.3);animation:po-appr-slideUp 0.25s ease;
}

/* ===== Header ===== */
.po-appr-header {
    background:linear-gradient(135deg,#1e3a5f,#2563eb);color:#fff;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between;
}
.po-appr-header-left { display:flex;align-items:center;gap:12px; }
.po-appr-header-left .material-symbols-outlined { font-size:1.5rem; }
.po-appr-header h2 { margin:0;font-size:1.1rem;font-weight:800;letter-spacing:0.02em; }
.po-appr-header .po-appr-code { font-size:0.8125rem;opacity:0.85;font-weight:600; }
.po-appr-close { background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;padding:4px;border-radius:8px;transition:all 0.15s; }
.po-appr-close:hover { color:#fff;background:rgba(255,255,255,0.15); }

/* ===== Status Badge ===== */
.po-appr-status {
    display:inline-flex;align-items:center;gap:4px;padding:4px 12px;
    border-radius:20px;font-size:0.6875rem;font-weight:700;
    background:rgba(255,255,255,0.2);color:#fff;
}

/* ===== Body ===== */
.po-appr-body { padding:20px 24px;overflow-y:auto;flex:1; }

/* Info Grid */
.po-appr-info-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;
}
.po-appr-info-card {
    background:var(--bg,#f6f7f8);border-radius:12px;padding:12px 16px;
    border:1px solid var(--border);
}
.po-appr-info-label {
    font-size:0.625rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;color:var(--text-light,#677183);margin-bottom:4px;
}
.po-appr-info-value {
    font-size:0.85rem;font-weight:700;color:var(--text-main,#121417);
    word-break:break-word;
}
.po-appr-info-sub { font-size:0.72rem;color:var(--text-light);margin-top:2px; }

/* ===== Product Table ===== */
.po-appr-table-wrap {
    border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;
}
.po-appr-table-title {
    display:flex;align-items:center;gap:8px;padding:12px 18px;
    background:var(--bg,#f6f7f8);border-bottom:1px solid var(--border);
    font-size:0.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.06em;color:var(--text-light);
}
.po-appr-table {
    width:100%;border-collapse:collapse;font-size:0.8rem;
}
.po-appr-table th {
    padding:8px 12px;text-align:left;font-size:0.65rem;font-weight:700;
    text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);
    background:var(--bg,#f6f7f8);border-bottom:1px solid var(--border);
}
.po-appr-table td {
    padding:8px 12px;border-bottom:1px solid var(--border);
    color:var(--text-main);vertical-align:middle;
}
.po-appr-table tr:last-child td { border-bottom:none; }
.po-appr-table .th-r, .po-appr-table .td-r { text-align:right; }
.po-appr-table .td-name { font-weight:600; }
.po-appr-table .td-code { font-size:0.65rem;color:var(--text-light); }
.po-appr-table .td-mono { font-family:monospace;font-size:0.78rem; }

/* ===== NCC Comparison Section ===== */
.po-appr-ncc-compare {
    border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;
}
.po-appr-ncc-title {
    display:flex;align-items:center;gap:8px;padding:12px 18px;
    background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(34,197,94,.04));
    border-bottom:1px solid var(--border);font-size:.75rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);
}
.po-appr-ncc-product { padding:14px 18px;border-bottom:1px solid var(--border); }
.po-appr-ncc-product:last-child { border-bottom:none; }
.po-appr-ncc-sp-name { font-weight:700;font-size:.85rem;margin-bottom:8px;display:flex;align-items:center;gap:8px; }
.po-appr-ncc-grid { display:grid;grid-template-columns:1fr;gap:6px; }
.po-appr-ncc-row {
    display:grid;grid-template-columns:1fr 100px 100px 80px;gap:6px;
    padding:6px 10px;border-radius:8px;font-size:.78rem;align-items:center;
}
.po-appr-ncc-row.header-row { font-weight:700;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);padding-bottom:0; }
.po-appr-ncc-row.current-ncc { background:#dbeafe;border:1px solid #93c5fd;font-weight:600; }
.po-appr-ncc-row.other-ncc { background:var(--bg,#f6f7f8); }
.po-appr-ncc-row .ncc-label { display:flex;align-items:center;gap:4px; }
.po-appr-ncc-row .td-r { text-align:right;font-family:monospace; }

/* ===== Summary ===== */
.po-appr-summary {
    background:var(--bg,#f6f7f8);border-radius:12px;padding:14px 18px;
    border:1px solid var(--border);margin-bottom:4px;
}
.po-appr-sum-row {
    display:flex;justify-content:space-between;align-items:center;
    padding:3px 0;font-size:0.8rem;color:var(--text-light);
}
.po-appr-sum-row.total {
    border-top:2px solid var(--primary);margin-top:8px;padding-top:10px;
    font-size:1rem;font-weight:800;color:var(--primary);
}
.po-appr-sum-row .val { font-weight:700;color:var(--text-main);font-family:monospace; }
.po-appr-sum-row.total .val { color:var(--primary);font-size:1.05rem; }

/* ===== Margin indicator ===== */
.po-appr-margin-badge { display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:700; }
.po-appr-margin-badge.m-green { background:#dcfce7;color:#15803d; }
.po-appr-margin-badge.m-yellow { background:#fef9c3;color:#a16207; }
.po-appr-margin-badge.m-red { background:#fee2e2;color:#dc2626; }

/* ===== Footer Actions ===== */
.po-appr-footer {
    padding:14px 24px;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--surface);
}
.po-appr-btn {
    padding:10px 24px;border-radius:10px;font-weight:700;font-size:0.85rem;
    cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-main);transition:all 0.15s;
}
.po-appr-btn-approve { background:var(--green-600);color:#fff; }
.po-appr-btn-approve:hover { background:#15803D;box-shadow:0 4px 16px rgba(22,163,74,0.3); }
.po-appr-btn-reject { background:var(--red-600);color:#fff; }
.po-appr-btn-reject:hover { background:var(--red-700);box-shadow:0 4px 16px rgba(220,38,38,0.3); }
.po-appr-btn-cancel { background:var(--bg,#f1f2f4);color:var(--text-main);border:1px solid var(--border); }
.po-appr-btn-cancel:hover { background:var(--border); }
.po-appr-btn .material-symbols-outlined { font-size:1.1rem; }

/* ===== Sub-modals ===== */
.po-appr-sub-overlay {
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.4);z-index:10003;align-items:center;justify-content:center;
}
.po-appr-sub-overlay.open { display:flex; }
.po-appr-sub-panel {
    background:var(--surface);border-radius:16px;
    padding:24px 28px;max-width:480px;width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:po-appr-slideUp 0.2s ease;
}
.po-appr-sub-warn {
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    border-radius:10px;margin-bottom:16px;font-size:0.8125rem;font-weight:600;
}
.po-appr-sub-warn.reject-warn { background:var(--red-bg,#fef2f2);border:1px solid var(--red-border,#fca5a5);color:var(--red-700,#b91c1c); }
.po-appr-sub-warn.approve-info { background:#f0fdf4;border:1px solid #BBF7D0;color:#166534; }
.po-appr-chips { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.po-appr-chip {
    padding:6px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;
    background:var(--bg,#f1f2f4);border:1px solid var(--border);
    color:var(--text-main);cursor:pointer;transition:all 0.15s;
}
.po-appr-chip:hover { opacity:0.85; }
.po-appr-chip.reject-chip:hover, .po-appr-chip.reject-chip.active { background:var(--red-600);color:#fff;border-color:var(--red-600); }
.po-appr-chip.approve-chip:hover, .po-appr-chip.approve-chip.active { background:var(--green-600);color:#fff;border-color:var(--green-600); }
.po-appr-textarea {
    width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
    font-family:var(--font-main);font-size:0.875rem;resize:vertical;
    box-sizing:border-box;min-height:80px;
}

/* ===== Source Badge ===== */
.po-appr-source-badge {
    display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
    border-radius:8px;font-size:0.6875rem;font-weight:600;
}
.po-appr-source-badge.from-order { background:#dbeafe;color:#1e40af; }
.po-appr-source-badge.from-pr { background:#fef3c7;color:#92400e; }
.po-appr-source-badge.manual { background:#f3f4f6;color:#374151; }

/* ===== Responsive ===== */
@media(max-width:640px) {
    .po-appr-info-grid { grid-template-columns:1fr; }
    .po-appr-footer { flex-direction:column; }
    .po-appr-footer .po-appr-btn { width:100%;justify-content:center; }
    .po-appr-body { padding:14px; }
    .po-appr-header { padding:14px 16px; }
    .po-appr-footer { padding:12px 16px; }
    .po-appr-ncc-row { grid-template-columns:1fr 80px 80px 60px;font-size:.72rem; }
}

/* --- From: Popup_PO_Wizard.html --- */
/* ====== Wizard Overlay ====== */
.wiz-overlay {
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:9999;opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.wiz-overlay.active { opacity:1;pointer-events:auto; }
.wiz-overlay.active .wiz-panel { transform:translateY(0) scale(1); }
.wiz-panel {
    background:var(--surface);border-radius:16px;width:960px;max-width:95vw;
    max-height:92vh;display:flex;flex-direction:column;
    box-shadow:0 24px 80px rgba(0,0,0,.25);
    transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}
.wiz-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;
}
.wiz-header h3 { font-size:1.05rem;font-weight:700;margin:0;display:flex;align-items:center;gap:8px; }
.wiz-close { width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.2);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.wiz-close:hover { background:rgba(255,255,255,.3); }

/* Stepper */
.wiz-stepper { display:flex;align-items:center;padding:14px 24px;gap:0;border-bottom:1px solid var(--border);background:var(--surface-alt); }
.wiz-step { display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--text-light);padding:5px 12px;border-radius:20px;transition:all .2s; }
.wiz-step.active { background:var(--primary);color:#fff; }
.wiz-step.done { color:var(--green-500,#22c55e); }
.wiz-step-num { width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;background:var(--border);color:var(--text-light); }
.wiz-step.active .wiz-step-num { background:rgba(255,255,255,.3);color:#fff; }
.wiz-step.done .wiz-step-num { background:var(--green-500,#22c55e);color:#fff; }
.wiz-step-line { flex:1;height:2px;background:var(--border);margin:0 6px; }
.wiz-step-line.done { background:var(--green-500,#22c55e); }

/* Body */
.wiz-body { padding:16px 24px;overflow-y:auto;flex:1;min-height:280px; }
.wiz-section { display:none; }
.wiz-section.active { display:block; }

/* Footer */
.wiz-footer { display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--border);background:var(--surface-alt); }
.wiz-btn { padding:8px 18px;border-radius:8px;font-size:.8rem;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s; }
.wiz-btn:hover { opacity:.9;transform:translateY(-1px); }
.wiz-btn-ghost { background:var(--surface);color:var(--text-main);border:1px solid var(--border); }
.wiz-btn-primary { background:var(--primary);color:#fff; }
.wiz-btn-success { background:var(--green-500,#22c55e);color:#fff; }
.wiz-btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }
.wiz-empty { text-align:center;padding:40px;color:var(--text-light);font-size:.85rem; }
.wiz-empty .material-symbols-outlined { font-size:40px;display:block;margin-bottom:8px;opacity:.4; }

/* ====== Step 1: PR Table ====== */
.wiz-pr-table { width:100%;border-collapse:collapse;font-size:.8rem; }
.wiz-pr-table th { text-align:left;font-size:.7rem;text-transform:uppercase;color:var(--text-light);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--border);white-space:nowrap; }
.wiz-pr-table td { padding:8px 10px;border-bottom:1px solid var(--border-light,#f0f0f0);vertical-align:top; }
.wiz-pr-table tr:hover td { background:rgba(59,130,246,.02); }
.wiz-pr-table tr.selected td { background:rgba(59,130,246,.06); }
.wiz-pr-table input[type=checkbox] { width:16px;height:16px;accent-color:var(--primary);cursor:pointer; }
.wiz-pr-code { font-weight:700;font-family:monospace;color:var(--primary);font-size:.82rem;white-space:nowrap; }
.wiz-pr-ref { font-size:.72rem;color:var(--text-light);margin-top:2px; }
.wiz-pr-ref span { background:var(--surface-alt);padding:1px 6px;border-radius:4px;font-weight:500; }
.wiz-sp-toggle { color:var(--primary);cursor:pointer;font-size:.75rem;font-weight:600;white-space:nowrap;user-select:none; }
.wiz-sp-toggle:hover { text-decoration:underline; }
.wiz-sp-dropdown { display:none;margin-top:6px;background:var(--surface-alt);border-radius:6px;padding:6px 8px;font-size:.72rem;line-height:1.6; }
.wiz-sp-dropdown.open { display:block; }
.wiz-sp-item { display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--border-light,#f0f0f0); }
.wiz-sp-item:last-child { border-bottom:none; }
.wiz-pr-badge { padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:700;background:var(--success-bg);color:var(--green-500);white-space:nowrap; }
.wiz-merge-hint { margin-top:12px;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;font-size:.78rem;color:#9a3412; }
.wiz-merge-hint .merge-title { font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px; }
.wiz-merge-hint .merge-desc { font-size:.75rem;line-height:1.5; }
.wiz-merge-hint .merge-btn { display:inline-block;margin-top:6px;padding:4px 14px;background:#ea580c;color:#fff;border:none;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer; }
.wiz-merge-hint .merge-btn:hover { background:#c2410c; }

/* ====== Step 2: NCC Cards ====== */
.wiz-ncc-card { margin-bottom:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden; }
.wiz-ncc-card-hdr { padding:10px 14px;background:var(--surface-alt);display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;border-bottom:1px solid var(--border); }
.wiz-ncc-card-hdr .sp-icon { font-size:18px;color:var(--primary); }
.wiz-ncc-card-hdr .sp-name { font-weight:700;font-size:.85rem; }
.wiz-ncc-card-hdr .sp-meta { font-size:.72rem;color:var(--text-light);display:flex;gap:12px;flex-wrap:wrap; }
.wiz-ncc-card-hdr .sp-meta span { white-space:nowrap; }
.wiz-ncc-card-body { padding:10px 14px; }
.wiz-ncc-suggest-tbl { width:100%;border-collapse:collapse;font-size:.78rem;margin-bottom:8px; }
.wiz-ncc-suggest-tbl th { text-align:left;font-size:.65rem;text-transform:uppercase;color:var(--text-light);font-weight:700;padding:5px 8px;border-bottom:1px solid var(--border);white-space:nowrap; }
.wiz-ncc-suggest-tbl td { padding:6px 8px;border-bottom:1px solid var(--border-light,#f0f0f0);vertical-align:middle; }
.wiz-ncc-suggest-tbl tr:hover td { background:rgba(59,130,246,.03); }
.wiz-ncc-choose { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;background:var(--surface-alt);border-radius:8px;font-size:.78rem; }
.wiz-ncc-choose select { padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:.78rem;background:var(--surface);max-width:280px; }
.wiz-ncc-choose .ncc-price { font-family:monospace;font-weight:700;color:var(--primary); }
.wiz-ncc-choose .ncc-currency { font-size:.7rem;color:var(--text-light); }
.wiz-ncc-card-footer { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:8px 14px;border-top:1px dashed var(--border);font-size:.72rem;color:var(--text-light); }
.wiz-ncc-card-footer .ft-item { display:flex;align-items:center;gap:4px; }
.wiz-ncc-card-footer .ft-val { font-family:monospace;font-weight:700;color:var(--text-main); }
.wiz-ncc-best { font-size:.7rem;color:var(--green-500);font-weight:600; }
.wiz-ncc-warn { font-size:.7rem;color:#d97706;font-weight:500; }
.wiz-ncc-edit-btn { padding:3px 8px;font-size:.68rem;border:1px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;gap:2px; }
.wiz-ncc-edit-btn:hover { background:var(--surface-alt); }

/* ====== Step 3: Preview ====== */
.wiz-preview-group { margin-bottom:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden; }
.wiz-preview-group-hdr { padding:12px 14px;background:var(--surface-alt);font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:8px; }
.wiz-preview-items { border-top:1px solid var(--border); }
.wiz-preview-row { display:grid;grid-template-columns:1fr 50px 50px 100px 120px 110px;gap:6px;padding:8px 14px;font-size:.8rem;border-bottom:1px solid var(--border-light,#f0f0f0);align-items:center; }
.wiz-preview-row:last-child { border-bottom:none; }
.wiz-preview-total { display:flex;justify-content:space-between;padding:10px 14px;font-weight:700;font-size:.85rem;background:var(--surface);border-top:2px solid var(--border); }
/* Summary stats per PO group */
.wiz-preview-summary { display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:10px 14px;background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(59,130,246,.04));border-top:1px dashed var(--border);font-size:.78rem; }
.wiz-preview-summary-item { display:flex;justify-content:space-between;align-items:center;padding:2px 0; }
.wiz-preview-summary-item .lbl { color:var(--text-light);font-weight:500; }
.wiz-preview-summary-item .val { font-family:monospace;font-weight:700; }
/* Grand total bar */
.wiz-grand-total { margin-top:12px;padding:12px 16px;background:linear-gradient(135deg,var(--primary),#6366f1);border-radius:10px;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:.82rem; }
.wiz-grand-total .gt-label { font-weight:700;font-size:.9rem; }
.wiz-grand-total .gt-item { display:flex;align-items:center;gap:4px;opacity:.95; }
.wiz-grand-total .gt-val { font-family:monospace;font-weight:700;font-size:.95rem; }
.wiz-grand-total .gt-profit { background:rgba(255,255,255,.2);padding:2px 10px;border-radius:20px;font-weight:800;font-size:.85rem; }
.wiz-pr-source { font-size:.75rem;color:var(--text-light);margin-top:8px;padding:0 4px; }
/* ====== Step 3: Config Section (NCC VC + Delivery Date) ====== */
.wiz-config-section { margin-bottom:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface); }
.wiz-config-hdr { padding:10px 14px;background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(251,191,36,.04));border-bottom:1px solid var(--border);font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-main); }
.wiz-config-body { padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.wiz-config-field { display:flex;flex-direction:column;gap:5px; }
.wiz-config-field label { font-size:.75rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.03em; }
.wiz-config-field label .req { color:#ef4444;font-weight:800; }
.wiz-config-field select, .wiz-config-field input { padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;background:var(--surface);color:var(--text-main);transition:border-color .2s; }
.wiz-config-field select:focus, .wiz-config-field input:focus { outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1); }

/* --- From: Popup_SCM_Audit.html --- */
.aud-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay);z-index:9000;display:none;align-items:center;justify-content:center;animation:audFadeIn .2s}
.aud-popup{background:var(--surface);border-radius:var(--radius-xl);width:880px;max-width:95vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-popup);overflow:hidden}
.aud-header{background:var(--gradient-primary);color:var(--text-inverse);padding:20px 28px;display:flex;align-items:center;justify-content:space-between}
.aud-header h2{font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.aud-close{background:rgba(255,255,255,.2);border:none;color:var(--text-inverse);width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.aud-close:hover{background:rgba(255,255,255,.35)}
.aud-body{padding:24px 28px;overflow-y:auto;flex:1}
.aud-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.aud-field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-light);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.aud-field input,.aud-field select,.aud-field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;transition:.2s;background:var(--surface-alt)}
.aud-field input:focus,.aud-field select:focus{border-color:var(--purple-600);box-shadow:0 0 0 3px rgba(124,58,237,.12);outline:none;background:var(--surface)}
.aud-section{margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border-light);font-size:.8rem;font-weight:700;color:var(--purple-600);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.aud-load-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:var(--radius-md);background:var(--gradient-purple);color:var(--text-inverse);font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s;box-shadow:0 4px 12px rgba(124,58,237,.25)}
.aud-load-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,58,237,.35)}
.aud-table{width:100%;border-collapse:collapse;margin-top:12px}
.aud-table th{background:var(--purple-bg);padding:10px 12px;font-size:.7rem;font-weight:700;color:var(--purple-700);text-transform:uppercase;text-align:left;border-bottom:2px solid var(--purple-border)}
.aud-table td{padding:10px 12px;border-bottom:1px solid var(--border-light);vertical-align:middle;font-size:.85rem}
.aud-table input{width:80px;padding:7px 8px;border:1.5px solid var(--border);border-radius:8px;font-size:.85rem;text-align:right;background:var(--surface-alt)}
.aud-table input:focus{border-color:var(--purple-600);outline:none;background:var(--surface)}
.aud-diff-pos{color:var(--green-500);font-weight:700}
.aud-diff-neg{color:var(--red-500);font-weight:700}
.aud-diff-zero{color:var(--text-muted)}
.aud-summary{display:flex;gap:24px;padding:16px 0;margin-top:12px;border-top:2px solid var(--border-light);justify-content:flex-end}
.aud-summary .s-label{font-size:.75rem;color:var(--text-light);font-weight:600;text-transform:uppercase}
.aud-summary .s-value{font-size:1.1rem;font-weight:800;color:var(--purple-600)}
.aud-footer{padding:16px 28px;background:var(--surface-alt);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:10px}
.aud-btn{padding:10px 24px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:.2s}
.aud-btn-cancel{background:var(--border-light);color:var(--text-light)}.aud-btn-cancel:hover{background:var(--border)}
.aud-btn-save{background:var(--gradient-purple);color:var(--text-inverse);box-shadow:0 4px 12px rgba(124,58,237,.3)}.aud-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,58,237,.4)}
@keyframes audFadeIn{from{opacity:0}to{opacity:1}}

/* --- From: Popup_SCM_Inbound.html --- */
.inb-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay);z-index:9000;display:none;align-items:center;justify-content:center;animation:inbFadeIn .2s}
.inb-popup{background:var(--surface);border-radius:var(--radius-xl);width:920px;max-width:95vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-popup);overflow:hidden}
.inb-header{background:var(--gradient-primary);color:var(--text-inverse);padding:20px 28px;display:flex;align-items:center;justify-content:space-between}
.inb-header h2{font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.inb-close{background:rgba(255,255,255,.2);border:none;color:var(--text-inverse);width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:.2s}
.inb-close:hover{background:rgba(255,255,255,.35)}
.inb-body{padding:24px 28px;overflow-y:auto;flex:1}
.inb-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.inb-row.triple{grid-template-columns:1fr 1fr 1fr}
.inb-field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-light);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.inb-field input,.inb-field select,.inb-field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;transition:.2s;background:var(--surface-alt)}
.inb-field input:focus,.inb-field select:focus,.inb-field textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(5,150,105,.12);outline:none;background:var(--surface)}
.inb-section{margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border-light);font-size:.8rem;font-weight:700;color:var(--green-500);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.inb-items-table{width:100%;border-collapse:collapse;margin-top:8px}
.inb-items-table th{background:var(--border-light);padding:8px 10px;font-size:.7rem;font-weight:700;color:var(--text-light);text-transform:uppercase;text-align:left;border-bottom:2px solid var(--border)}
.inb-items-table td{padding:8px 10px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.inb-items-table input{width:100%;padding:7px 8px;border:1.5px solid var(--border);border-radius:8px;font-size:.825rem;background:var(--surface-alt)}
.inb-items-table input:focus{border-color:var(--green-500);outline:none;background:var(--surface)}
.inb-items-table input[readonly]{background:var(--border-light);color:var(--text-light);cursor:default}
.inb-add-row{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:1.5px dashed var(--green-500);border-radius:var(--radius-md);background:transparent;color:var(--green-500);font-size:.8rem;font-weight:600;cursor:pointer;margin-top:8px;transition:.2s}
.inb-add-row:hover{background:var(--green-bg)}
.inb-remove-row{background:none;border:none;color:var(--red-500);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:.15s}
.inb-remove-row:hover{background:var(--red-bg)}
.inb-total-bar{display:flex;justify-content:flex-end;gap:24px;padding:16px 0;margin-top:12px;border-top:2px solid var(--border-light)}
.inb-total-bar .tot-label{font-size:.75rem;color:var(--text-light);font-weight:600;text-transform:uppercase}
.inb-total-bar .tot-value{font-size:1.15rem;font-weight:800;color:var(--green-500)}
.inb-checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:8px}
.inb-chk-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border-light);transition:.2s;cursor:pointer}
.inb-chk-item:hover{border-color:var(--green-500);background:rgba(5,150,105,.04)}
.inb-chk-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--green-500);cursor:pointer;pointer-events:none}
.inb-chk-item label{font-size:.825rem;font-weight:500;color:var(--text-body);cursor:pointer;pointer-events:none}
.inb-footer{padding:16px 28px;background:var(--surface-alt);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:10px}
.inb-btn{padding:10px 24px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:.2s}
.inb-btn-cancel{background:var(--border-light);color:var(--text-light)}.inb-btn-cancel:hover{background:var(--border)}
.inb-btn-save{background:var(--gradient-green);color:var(--text-inverse);box-shadow:0 4px 12px rgba(5,150,105,.3)}.inb-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(5,150,105,.4)}
@keyframes inbFadeIn{from{opacity:0}to{opacity:1}}
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }
/* PO Search Dropdown */
.inb-po-wrap{position:relative}
.inb-po-search{width:100%;padding:10px 12px 10px 40px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;background:var(--surface-alt);transition:.2s}
.inb-po-search:focus{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(5,150,105,.12);outline:none;background:var(--surface)}
.inb-po-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:18px;pointer-events:none}
.inb-po-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);max-height:220px;overflow-y:auto;display:none;z-index:100;box-shadow:var(--shadow-lg)}
.inb-po-list.show{display:block}
.inb-po-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-light);font-size:.825rem;transition:.15s}
.inb-po-item:hover{background:var(--green-bg)}
.inb-po-item .po-ma{font-weight:700;color:var(--text-main)}
.inb-po-item .po-ncc{color:var(--text-light);font-size:.75rem}
.inb-po-item .po-tien{float:right;color:var(--green-500);font-weight:600;font-size:.75rem}
/* Scan buttons */
.inb-scan-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:1.5px solid var(--green-500);border-radius:var(--radius-md);background:transparent;color:var(--green-500);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s}
.inb-scan-btn:hover{background:var(--green-bg)}
/* Product image in table */
.inb-sp-img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--border-light);background:var(--surface-alt)}
/* Status badges */
.inb-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:700}
.inb-badge-du{background:rgba(5,150,105,.12);color:var(--green-500)}
.inb-badge-thieu{background:rgba(245,158,11,.12);color:#d97706}
.inb-badge-thua{background:rgba(59,130,246,.12);color:#2563eb}
/* PO Info card */
.inb-po-info{display:flex;gap:16px;padding:12px 16px;background:rgba(5,150,105,.06);border-radius:var(--radius-md);border:1px solid rgba(5,150,105,.15);margin-bottom:16px}
.inb-po-info-item{font-size:.8rem;color:var(--text-body)}
.inb-po-info-item strong{color:var(--green-500);font-weight:700}
/* Scanner overlay */
.inb-scanner-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9500;display:none;align-items:center;justify-content:center;flex-direction:column}
.inb-scanner-box{width:400px;max-width:90vw;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden}
.inb-scanner-header{padding:16px 20px;background:var(--gradient-primary);color:var(--text-inverse);display:flex;align-items:center;justify-content:space-between}
.inb-scanner-header h3{margin:0;font-size:1rem;display:flex;align-items:center;gap:8px}
#inb-scanner-reader{width:100%;min-height:280px}
.inb-scanner-footer{padding:12px 20px;text-align:center;color:var(--text-light);font-size:.8rem}
/* Product autocomplete dropdown */
.inb-ac-wrap{position:relative}
.inb-ac-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--green-500);border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:200;box-shadow:var(--shadow-lg);display:none}
.inb-ac-list.show{display:block}
.inb-ac-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--border-light);font-size:.8rem;display:flex;align-items:center;gap:8px;transition:.12s}
.inb-ac-item:hover{background:rgba(5,150,105,.06)}
.inb-ac-item .ac-img{width:28px;height:28px;border-radius:4px;object-fit:cover;border:1px solid var(--border-light);flex-shrink:0}
.inb-ac-item .ac-info{flex:1;min-width:0}
.inb-ac-item .ac-name{font-weight:600;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inb-ac-item .ac-meta{font-size:.68rem;color:var(--text-light)}
/* PO status badge */
.inb-po-status{display:inline-block;padding:1px 6px;border-radius:10px;font-size:.6rem;font-weight:700;margin-left:6px}
.inb-po-status-da-duyet{background:rgba(5,150,105,.12);color:#059669}
.inb-po-status-da-gom-lo{background:rgba(59,130,246,.12);color:#2563eb}
.inb-po-status-da-dat-hang{background:rgba(37,71,139,.12);color:#25478b}

/* --- From: Popup_SCM_NCC.html --- */
/* Font family defined in Style_Global.html */
.ncc-popup-overlay * { font-family: var(--font-main), sans-serif; }

.ncc-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    z-index: 11000; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;
}
.ncc-popup-overlay.active { opacity: 1; pointer-events: auto; }
.ncc-popup-overlay.active .ncc-popup { transform: translateY(0) scale(1); }

.ncc-popup {
    background: var(--surface); border-radius: var(--radius-lg); width: 850px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: var(--shadow-popup);
    transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden; border: 1px solid var(--border);
}

.ncc-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 32px; background: var(--gradient-primary);
    color: var(--text-inverse); position: relative; flex-shrink: 0;
}
.ncc-popup-header h3 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.ncc-popup-header .close-btn {
    width: 36px; height: 36px; border-radius: 12px; border: none;
    background: rgba(255, 255, 255, 0.15); color: var(--text-inverse); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
    font-size: 18px;
}
.ncc-popup-header .close-btn:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); }

/* Stepper Styles — flex-shrink: 0 to stay above scroll */
.ncc-stepper {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 40px; background: var(--neutral-50); border-bottom: 1px solid var(--border);
    gap: 16px; flex-shrink: 0;
}
.ncc-step-item { display: flex; align-items: center; gap: 10px; color: var(--text-muted); transition: all 0.3s; cursor: pointer; }
.ncc-step-item.active { color: var(--primary); }
.ncc-step-item.active .step-num { background: var(--primary); color: var(--text-inverse); }
.ncc-step-item.completed { color: var(--success); }
.ncc-step-item.completed .step-num { background: var(--success); color: var(--text-inverse); }
.step-num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--neutral-200);
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.step-label { font-size: 0.8125rem; font-weight: 600; }
.step-divider { flex: 0.5; height: 1px; background: var(--border); max-width: 60px; }

/* ★ KEY FIX: Body scrolls, footer stays pinned */
.ncc-popup-body {
    padding: 28px 32px; overflow-y: auto; flex: 1;
    scroll-behavior: smooth; min-height: 0; /* Required for flex overflow */
}

/* Tab Content Visibility */
.ncc-tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.ncc-tab-content.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ncc-form-section { margin-bottom: 28px; }
.ncc-form-section:last-child { margin-bottom: 0; }
.ncc-form-section-title {
    font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--border-light);
    display: flex; align-items: center; gap: 8px;
}

.ncc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ncc-form-grid.single { grid-template-columns: 1fr; }
.ncc-form-grid.triple { grid-template-columns: 1fr 1fr 1fr; }

.ncc-field { display: flex; flex-direction: column; gap: 6px; }
.ncc-field label { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); }
.ncc-field label .req { color: var(--danger); }
.ncc-field input, .ncc-field select, .ncc-field textarea {
    padding: 11px 16px; border: 1.5px solid var(--border); border-radius: 12px;
    font-size: 0.875rem; background: var(--surface); color: var(--text-main);
    transition: all 0.2s ease; font-family: var(--font-main), sans-serif;
}
.ncc-field input:focus, .ncc-field select:focus, .ncc-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}
.ncc-field input:disabled { background: var(--neutral-100); color: var(--text-muted); cursor: not-allowed; }
.ncc-field textarea { resize: vertical; min-height: 80px; }

/* ★ Media Cards — Premium Design */
.ncc-media-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ncc-media-card {
    background: var(--neutral-50); border: 1.5px dashed var(--neutral-300);
    border-radius: 16px; padding: 20px; text-align: center;
    transition: all 0.25s ease; position: relative;
}
.ncc-media-card:hover { border-color: var(--primary); background: var(--blue-bg, #eff6ff); }
.ncc-media-card .mc-preview {
    width: 100%; height: 120px; border-radius: 12px; background: var(--surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border);
}
.ncc-media-card .mc-preview img { width: 100%; height: 100%; object-fit: contain; }
.ncc-media-card .mc-placeholder { color: var(--text-muted); font-size: 0.75rem; }
.ncc-media-card .mc-placeholder .mc-icon { font-size: 36px; display: block; margin-bottom: 6px; }
.ncc-media-card .mc-label {
    font-size: 0.6875rem; font-weight: 700; color: var(--text-light);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.ncc-media-card .mc-input-row { display: flex; gap: 6px; }
.ncc-media-card .mc-input-row input {
    flex: 1; padding: 8px 12px; border: 1.5px solid var(--border);
    border-radius: 10px; font-size: 0.8125rem; background: var(--surface);
    font-family: var(--font-main), sans-serif;
}
.ncc-media-card .mc-input-row input:focus { border-color: var(--primary); outline: none; }
.ncc-media-card .mc-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: all 0.2s; font-size: 16px;
}
.ncc-media-card .mc-btn:hover { border-color: var(--primary); background: var(--blue-bg, #eff6ff); }

/* ★ Footer — Pinned at bottom */
.ncc-popup-footer {
    padding: 20px 32px; border-top: 1px solid var(--border); background: var(--neutral-50);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; /* ★ Prevents footer from being squished */
}
.ncc-btn {
    padding: 11px 24px; border-radius: 12px; font-size: 0.875rem; font-weight: 600;
    border: 1px solid var(--border); cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; gap: 8px;
}
.ncc-btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.ncc-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--primary-shadow); }
.ncc-btn-secondary { background: var(--surface); color: var(--text-light); }
.ncc-btn-secondary:hover { background: var(--neutral-100); border-color: var(--neutral-300); }

/* Evaluation card */
.ncc-eval-card {
    padding: 16px; background: var(--neutral-50); border-radius: 12px;
    border: 1px solid var(--border); margin-top: 24px;
}
.ncc-eval-title {
    font-size: 0.75rem; font-weight: 700; color: var(--text-light);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ★ Multi-select Dropdown */
.ncc-multisel { position: relative; }
.ncc-multisel-trigger { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); transition: border-color 0.2s; }
.ncc-multisel-trigger:focus-within, .ncc-multisel-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light, rgba(37,99,235,0.1)); }
.ncc-multisel-placeholder { font-size: 0.8125rem; color: var(--text-muted); }
.ncc-ms-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px; background: var(--primary-light, #dbeafe); color: var(--primary); font-size: 0.75rem; font-weight: 600; }
.ncc-ms-tag-x { cursor: pointer; opacity: 0.6; line-height: 1; font-size: 0.8rem; } .ncc-ms-tag-x:hover { opacity:1; }
.ncc-ms-search { border: none; outline: none; background: transparent; font-size: 0.8125rem; min-width: 80px; flex: 1; padding: 2px 0; color: var(--text-main); }
.ncc-ms-arrow { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); transition: transform 0.2s; flex-shrink:0; }
.ncc-ms-arrow.open { transform: rotate(180deg); }
.ncc-multisel-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.12)); display:none; max-height: 230px; overflow-y: auto; }
.ncc-multisel-panel.open { display: block; }
.ncc-ms-opt { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 0.8125rem; border-bottom: 1px solid var(--border-light, #f0f0f0); transition: background 0.1s; }
.ncc-ms-opt:last-child { border-bottom: none; }
.ncc-ms-opt:hover { background: var(--bg-alt, #f9fafb); }
.ncc-ms-opt.selected { background: var(--primary-light, #dbeafe); color: var(--primary); font-weight:600; }
.ncc-ms-opt input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink:0; }
.ncc-ms-free { padding: 8px 14px; font-size:0.8rem; color:var(--text-muted); border-top:1px dashed var(--border); }
.ncc-ms-free input { width:100%; border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:0.8125rem; outline:none; }

/* ★ Custom Fields Manager */
.ncc-cf-list { display: flex; flex-direction:column; gap: 10px; margin-bottom:10px; }
.ncc-cf-row { display: flex; gap: 10px; align-items: center; }
.ncc-cf-label { font-size: 0.75rem; font-weight:600; color: var(--text-muted); width: 140px; flex-shrink:0; }
.ncc-cf-input { flex:1; padding: 6px 10px; border: 1.5px solid var(--border); border-radius:8px; font-size:0.8125rem; outline:none; background:var(--surface); color:var(--text-main); }
.ncc-cf-input:focus { border-color:var(--primary); }
.ncc-cf-rm { cursor:pointer; color:var(--text-muted); font-size:1rem; padding:2px 4px; } .ncc-cf-rm:hover { color:var(--danger,#dc2626); }
.ncc-cf-add-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px dashed var(--border); border-radius:8px; font-size:0.8125rem; color:var(--primary); cursor:pointer; background:transparent; transition:all 0.2s; }
.ncc-cf-add-btn:hover { border-color:var(--primary); background:var(--primary-light,#dbeafe); }

/* ★ Tag Input — Danh mục SP / Nhóm SP */
.ncc-tag-wrap {
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 8px 12px; background: var(--surface);
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px;
    cursor: text; transition: all 0.2s; position: relative;
}
.ncc-tag-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.ncc-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 10px; border-radius: 20px;
    background: var(--primary-light, #eff6ff); color: var(--primary);
    font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.ncc-tag .tag-x { cursor: pointer; font-size: 15px; opacity: 0.6; transition: opacity 0.15s; }
.ncc-tag .tag-x:hover { opacity: 1; }
.ncc-tag-text { border: none; outline: none; background: transparent; font-size: 0.875rem; flex: 1; min-width: 120px; color: var(--text-main); font-family: var(--font-main), sans-serif; }
.ncc-tag-text::placeholder { color: var(--text-muted); }
.ncc-tag-sugg {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 999;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    max-height: 160px; overflow-y: auto;
}
.ncc-tag-sugg-item { padding: 8px 14px; cursor: pointer; font-size: 0.8125rem; border-bottom: 1px solid var(--border-light); color: var(--text-main); transition: background 0.15s; }
.ncc-tag-sugg-item:last-child { border-bottom: none; }
.ncc-tag-sugg-item:hover { background: var(--primary-light, #eff6ff); color: var(--primary); }

/* --- From: Popup_SCM_Outbound.html --- */
.out-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay);z-index:9000;display:none;align-items:center;justify-content:center;animation:outFadeIn .2s}
.out-popup{background:var(--surface);border-radius:var(--radius-xl);width:920px;max-width:95vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-popup);overflow:hidden}
.out-header{background:var(--gradient-red);color:var(--text-inverse);padding:20px 28px;display:flex;align-items:center;justify-content:space-between}
.out-header h2{font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.out-close{background:rgba(255,255,255,.2);border:none;color:var(--text-inverse);width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:.2s}
.out-close:hover{background:rgba(255,255,255,.35)}
.out-body{padding:24px 28px;overflow-y:auto;flex:1}
.out-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.out-row.triple{grid-template-columns:1fr 1fr 1fr}
.out-field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-light);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.out-field input,.out-field select,.out-field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;transition:.2s;background:var(--surface-alt)}
.out-field input:focus,.out-field select:focus,.out-field textarea:focus{border-color:var(--red-600);box-shadow:0 0 0 3px rgba(220,38,38,.12);outline:none;background:var(--surface)}
.out-section{margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border-light);font-size:.8rem;font-weight:700;color:var(--red-600);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.out-items-table{width:100%;border-collapse:collapse;margin-top:8px}
.out-items-table th{background:var(--red-bg);padding:8px 10px;font-size:.7rem;font-weight:700;color:var(--red-700);text-transform:uppercase;text-align:left;border-bottom:2px solid var(--red-border)}
.out-items-table td{padding:8px 10px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.out-items-table input{width:100%;padding:7px 8px;border:1.5px solid var(--border);border-radius:8px;font-size:.825rem;background:var(--surface-alt)}
.out-items-table input:focus{border-color:var(--red-600);outline:none;background:var(--surface)}
.out-items-table input[readonly]{background:var(--border-light);color:var(--text-light);cursor:default}
.out-add-row{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:1.5px dashed var(--red-600);border-radius:var(--radius-md);background:transparent;color:var(--red-600);font-size:.8rem;font-weight:600;cursor:pointer;margin-top:8px;transition:.2s}
.out-add-row:hover{background:var(--red-bg)}
.out-remove-row{background:none;border:none;color:var(--red-500);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:.15s}
.out-remove-row:hover{background:var(--red-bg)}
.out-total-bar{display:flex;justify-content:flex-end;gap:24px;padding:16px 0;margin-top:12px;border-top:2px solid var(--border-light)}
.out-total-bar .tot-label{font-size:.75rem;color:var(--text-light);font-weight:600;text-transform:uppercase}
.out-total-bar .tot-value{font-size:1.15rem;font-weight:800;color:var(--red-600)}
.out-checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:8px}
.out-chk-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border-light);transition:.2s;cursor:pointer}
.out-chk-item:hover{border-color:var(--red-600);background:rgba(220,38,38,.04)}
.out-chk-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--red-600);cursor:pointer}
.out-chk-item label{font-size:.825rem;font-weight:500;color:var(--text-body);cursor:pointer}
.out-footer{padding:16px 28px;background:var(--surface-alt);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:10px}
.out-btn{padding:10px 24px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:.2s}
.out-btn-cancel{background:var(--border-light);color:var(--text-light)}.out-btn-cancel:hover{background:var(--border)}
.out-btn-save{background:var(--gradient-red);color:var(--text-inverse);box-shadow:0 4px 12px rgba(220,38,38,.3)}.out-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(220,38,38,.4)}
@keyframes outFadeIn{from{opacity:0}to{opacity:1}}
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }
/* SO Search Dropdown */
.out-so-wrap{position:relative}
.out-so-search{width:100%;padding:10px 12px 10px 36px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;background:var(--surface-alt);transition:.2s}
.out-so-search:focus{border-color:var(--red-600);box-shadow:0 0 0 3px rgba(220,38,38,.12);outline:none;background:var(--surface)}
.out-so-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:18px;pointer-events:none}
.out-so-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);max-height:220px;overflow-y:auto;display:none;z-index:100;box-shadow:var(--shadow-lg)}
.out-so-list.show{display:block}
.out-so-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-light);font-size:.825rem;transition:.15s}
.out-so-item:hover{background:var(--red-bg)}
.out-so-item .so-ma{font-weight:700;color:var(--text-main)}
.out-so-item .so-kh{color:var(--text-light);font-size:.75rem}
.out-so-item .so-tien{float:right;color:var(--red-600);font-weight:600;font-size:.75rem}
/* Scan buttons */
.out-scan-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:1.5px solid var(--red-600);border-radius:var(--radius-md);background:transparent;color:var(--red-600);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s}
.out-scan-btn:hover{background:var(--red-bg)}
/* Product image */
.out-sp-img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--border-light);background:var(--surface-alt)}
/* Status badges */
.out-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:700}
.out-badge-du{background:rgba(5,150,105,.12);color:var(--green-500)}
.out-badge-thieu{background:rgba(245,158,11,.12);color:#d97706}
.out-badge-thua{background:rgba(59,130,246,.12);color:#2563eb}
/* SO Info card */
.out-so-info{display:flex;gap:16px;padding:12px 16px;background:rgba(220,38,38,.06);border-radius:var(--radius-md);border:1px solid rgba(220,38,38,.15);margin-bottom:16px;flex-wrap:wrap}
.out-so-info-item{font-size:.8rem;color:var(--text-body)}
.out-so-info-item strong{color:var(--red-600);font-weight:700}

/* --- From: Popup_SCM_Payment.html --- */
.pay-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.pay-popup-overlay.active { opacity: 1; pointer-events: auto; }
.pay-popup-overlay.active .pay-popup { transform: translateY(0) scale(1); }
.pay-popup {
    background: var(--surface); border-radius: 16px; width: 720px; max-width: 95vw;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.pay-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-green); color: var(--white);
}
.pay-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.pay-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.pay-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.pay-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.pay-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pay-form-grid.full { grid-template-columns: 1fr; }
.pay-field { display: flex; flex-direction: column; gap: 4px; }
.pay-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.pay-field label .req { color: var(--red-500); }
.pay-field input, .pay-field select, .pay-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
}
.pay-field input:focus, .pay-field select:focus, .pay-field textarea:focus {
    outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.pay-field input:disabled, .pay-field select:disabled {
    background: var(--bg-secondary); cursor: not-allowed;
}

/* PO Info Card */
.pay-po-info {
    background: linear-gradient(135deg, var(--green-bg), #f0fdf4); border: 1px solid var(--green-border);
    border-radius: 12px; padding: 16px; margin-bottom: 20px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.pay-po-info .info-item { display: flex; flex-direction: column; gap: 2px; }
.pay-po-info .info-item .info-label { font-size: 0.6875rem; color: var(--neutral-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.pay-po-info .info-item .info-value { font-size: 0.875rem; font-weight: 700; color: var(--green-700); }

/* Payment Timeline */
.pay-timeline { margin-bottom: 20px; }
.pay-timeline-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.pay-timeline-list { display: flex; flex-direction: column; gap: 8px; }
.pay-timeline-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.pay-timeline-item.paid { border-color: var(--green-500); background: var(--green-bg); }
.pay-timeline-item.pending { border-color: var(--amber-500); background: var(--amber-bg); }
.pay-timeline-item.rejected { border-color: var(--red-500); background: var(--red-bg); }
.pay-tl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pay-tl-dot.paid { background: var(--green-500); }
.pay-tl-dot.pending { background: var(--amber-500); }
.pay-tl-dot.new { background: var(--neutral-300); }
.pay-tl-dot.rejected { background: var(--red-500); }
.pay-tl-info { flex: 1; }
.pay-tl-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); }
.pay-tl-meta { font-size: 0.6875rem; color: var(--neutral-500); }
.pay-tl-amount { font-size: 0.875rem; font-weight: 700; }

/* Empty state */
.pay-empty { text-align: center; padding: 24px; color: var(--neutral-400); font-size: 0.8125rem; }

/* Footer */
.pay-popup-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.pay-btn {
    padding: 10px 20px; border: none; border-radius: 10px; font-size: 0.8125rem;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: all 0.2s ease;
}
.pay-btn-primary { background: var(--green-500); color: var(--white); }
.pay-btn-primary:hover { background: var(--green-600); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.pay-btn-secondary { background: var(--bg-secondary); color: var(--text-main); }
.pay-btn-secondary:hover { background: var(--neutral-200); }
.pay-btn-danger { background: var(--red-bg); color: var(--red-500); border: 1px solid var(--red-border); }
.pay-btn-danger:hover { background: var(--danger-bg); }
.pay-btn-approve { background: var(--info); color: var(--white); }
.pay-btn-approve:hover { background: var(--info-dark); }

/* Status Badge */
.pay-status-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border-radius: 20px; font-size: 0.6875rem; font-weight: 600;
}
.pay-status-badge.cho-duyet { background: var(--warning-bg); color: var(--warning-dark); }
.pay-status-badge.da-duyet { background: var(--info-bg); color: var(--info-dark); }
.pay-status-badge.da-tt { background: var(--success-bg); color: var(--success-dark); }
.pay-status-badge.tu-choi { background: var(--danger-bg); color: var(--danger-dark); }
.pay-status-badge.da-huy { background: var(--neutral-100); color: var(--neutral-500); }

/* --- From: Popup_SCM_PO.html --- */
.po-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.po-popup-overlay.active { opacity: 1; pointer-events: auto; }
.po-popup-overlay.active .po-popup { transform: translateY(0) scale(1); }
.po-popup {
    background: var(--surface); border-radius: 16px; width: 860px; max-width: 95vw;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.po-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); color: var(--text-inverse);
}
.po-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.po-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.po-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.po-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.po-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.po-form-grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
@media(max-width:860px) { .po-form-grid.g3 { grid-template-columns: 1fr 1fr; } }
.po-field { display: flex; flex-direction: column; gap: 4px; }
.po-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.po-field label .req { color: var(--red-500); }
.po-field input, .po-field select, .po-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
}
.po-field input:focus, .po-field select:focus, .po-field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
/* Line Items */
.po-items-section { margin-bottom: 16px; }
.po-items-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.po-items-header h4 { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); margin: 0; }
.po-add-item-btn {
    padding: 6px 14px; border-radius: 6px; border: 1px dashed var(--primary);
    background: var(--primary-light); color: var(--primary); font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.po-add-item-btn:hover { background: var(--info-bg); }
.po-items-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.po-items-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 500px; }
.po-items-table thead { background: var(--surface-alt); }
.po-items-table th { padding: 8px 10px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); text-align: left; border-bottom: 1px solid var(--border); }
.po-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.po-items-table input, .po-items-table select {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8125rem;
}
.po-items-table input:focus, .po-items-table select:focus { border-color: var(--primary); outline: none; }
.po-remove-row { background: none; border: none; color: var(--red-600); cursor: pointer; padding: 4px; }
.po-remove-row:hover { background: var(--red-bg); border-radius: 4px; }
.po-totals { display: flex; justify-content: flex-end; margin-top: 12px; }
.po-totals-box { min-width: 280px; }
.po-totals-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.8125rem; }
.po-totals-row.total { font-weight: 700; font-size: 0.9375rem; border-top: 2px solid var(--text-main); padding-top: 8px; margin-top: 4px; }
.po-popup-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-alt);
}
.po-btn { padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--border); cursor: pointer; }
.po-btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.po-btn-primary:hover { background: var(--primary-hover); }
.po-btn-secondary { background: var(--surface); color: var(--text-main); }
.po-btn-secondary:hover { background: var(--surface-alt); }
.po-currency-row { display:flex; align-items:center; gap:8px; margin-top:4px; padding:8px 12px; border-radius:8px; background:var(--surface-alt); font-size:.8rem; color:var(--text-light); }
.po-currency-row strong { color:var(--blue-500); font-weight:700; }
.po-pay-status { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:.7rem; font-weight:700; }
.po-pay-status.chua_tt { background:var(--neutral-100); color:var(--neutral-500); }
.po-pay-status.da_coc { background:var(--warning-bg); color:var(--warning); }
.po-pay-status.da_tt_du { background:var(--success-bg); color:var(--green-500); }
/* Tab bar */
.po-tab-bar { display:flex; border-bottom:2px solid var(--border); margin-bottom:18px; gap:0; }
.po-tab-btn { padding:10px 20px; font-size:.8125rem; font-weight:600; border:none; background:none; color:var(--text-light); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; display:flex; align-items:center; gap:6px; }
.po-tab-btn:hover { color:var(--text-main); background:var(--surface-alt); }
.po-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.po-tab-btn .material-symbols-outlined { font-size:16px; }
/* Import panel */
.po-import-panel { display:none; }
.po-import-panel.active { display:block; }
.po-import-empty { text-align:center; padding:32px; color:var(--text-light); }
.po-import-empty .material-symbols-outlined { font-size:40px; display:block; margin-bottom:8px; opacity:.5; }
/* Filter bar */
.po-filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); margin-bottom:14px; }
.po-filter-bar select, .po-filter-bar input[type=text] { padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:.78rem; background:var(--surface); min-width:130px; }
.po-filter-bar select:focus, .po-filter-bar input:focus { border-color:var(--primary); outline:none; }
.po-filter-bar label { font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:5px; cursor:pointer; }
.po-filter-bar label input[type=checkbox] { accent-color:var(--warning); width:15px; height:15px; }
/* View toggle */
.po-view-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-left:auto; }
.po-view-btn { padding:6px 14px; font-size:.72rem; font-weight:600; border:none; background:var(--surface); color:var(--text-light); cursor:pointer; border-right:1px solid var(--border); }
.po-view-btn:last-child { border-right:none; }
.po-view-btn:hover { background:var(--neutral-100); }
.po-view-btn.active { background:var(--primary); color:var(--text-inverse); }
/* Suggestion banner */
.po-suggest-banner { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; background:var(--info-bg); border:1px solid var(--info-border); margin-bottom:12px; font-size:.8rem; }
.po-suggest-banner .material-symbols-outlined { font-size:20px; color:var(--primary); }
.po-suggest-banner button { padding:5px 14px; border-radius:6px; border:1px solid var(--primary); background:var(--primary); color:white; font-size:.72rem; font-weight:700; cursor:pointer; margin-left:auto; white-space:nowrap; }
.po-suggest-banner button:hover { opacity:.9; }
/* NCC group card */
.po-ncc-group { margin-bottom:14px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.po-ncc-group-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surface-alt); font-size:.8rem; font-weight:600; }
.po-ncc-group-header:hover { background:var(--neutral-100); }
.po-ncc-group-header .ncc-info { display:flex; align-items:center; gap:8px; }
.po-ncc-group-header .ncc-badge { padding:3px 10px; border-radius:12px; font-size:.7rem; font-weight:700; background:var(--primary-light); color:var(--primary); }
.po-ncc-group-header .ncc-stats { font-size:.72rem; color:var(--text-light); font-weight:400; }
.po-ncc-create-btn { padding:5px 14px; border-radius:6px; border:1px solid var(--green-500); background:var(--green-500); color:white; font-size:.72rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px; }
.po-ncc-create-btn:hover { background:var(--green-600); }
.po-ncc-create-btn .material-symbols-outlined { font-size:14px; }
/* PR group card (existing, kept) */
.po-pr-group { margin-bottom:14px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.po-pr-group-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surface-alt); font-size:.8rem; font-weight:600; cursor:pointer; }
.po-pr-group-header:hover { background:var(--neutral-100); }
.po-pr-group-header .pr-info { display:flex; align-items:center; gap:8px; }
.po-pr-group-header .pr-badge { padding:2px 8px; border-radius:12px; font-size:.7rem; background:var(--primary-light); color:var(--primary); }
/* Shared item rows */
.po-pr-items-list { border-top:1px solid var(--border); }
.po-pr-item-row { display:grid; grid-template-columns:32px 1fr 70px 80px 100px; align-items:center; padding:8px 14px; font-size:.8rem; border-bottom:1px solid var(--border); gap:6px; }
.po-pr-item-row:last-child { border-bottom:none; }
.po-pr-item-row:hover { background:var(--surface-alt); }
.po-pr-item-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.po-ncc-warn { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:12px; font-size:.65rem; font-weight:700; background:var(--warning-bg); color:var(--warning); }
.po-urgent-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:12px; font-size:.65rem; font-weight:700; background:var(--red-bg); color:var(--red-600); }
.po-no-ncc-group .po-ncc-group-header { background:var(--warning-bg); }
.po-no-ncc-group .ncc-badge { background:var(--warning-bg); color:var(--warning); }
.po-import-actions { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:10px; }
.po-import-count { font-size:.8rem; color:var(--text-light); }
.po-import-count strong { color:var(--primary); }
/* NCC Comparison */
.po-compare-section { margin-top:16px; border:1px dashed var(--border); border-radius:10px; padding:14px; }
.po-compare-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--primary); background:none; border:none; padding:0; }
.po-compare-toggle:hover { opacity:.8; }
.po-compare-body { margin-top:12px; display:none; }
.po-compare-body.visible { display:block; }
.po-compare-product { margin-bottom:14px; }
.po-compare-product h5 { font-size:.8rem; font-weight:600; color:var(--text-main); margin:0 0 8px; }
.po-compare-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:600px) { .po-compare-cards { grid-template-columns:1fr; } }
.po-ncc-card { border:1px solid var(--border); border-radius:8px; padding:10px; font-size:.78rem; position:relative; transition:all .2s; }
.po-ncc-card:hover { border-color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.po-ncc-card.best { border-color:var(--green-500,#22c55e); background:var(--green-bg,#f0fdf4); }
.po-ncc-card .ncc-name { font-weight:700; color:var(--text-main); margin-bottom:4px; }
.po-ncc-card .ncc-price-avg { font-size:1.05rem; font-weight:800; color:var(--primary); }
.po-ncc-card .ncc-detail { color:var(--text-light); font-size:.72rem; margin-top:4px; line-height:1.6; }
.po-ncc-card .ncc-select { margin-top:8px; padding:4px 12px; border-radius:6px; border:1px solid var(--primary); background:transparent; color:var(--primary); font-size:.75rem; font-weight:600; cursor:pointer; }
.po-ncc-card .ncc-select:hover { background:var(--primary); color:var(--text-inverse); }
.po-compare-empty { text-align:center; padding:16px; color:var(--text-light); font-size:.8rem; }
.po-compare-loading { text-align:center; padding:16px; color:var(--text-light); font-size:.8rem; }
/* Collapsible sections */
.op-collapse { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.op-collapse-title { padding:12px 16px; font-size:.8125rem; font-weight:600; color:var(--text-main); cursor:pointer; display:flex; align-items:center; gap:8px; background:var(--surface-alt); list-style:none; transition:background .2s; }
.op-collapse-title:hover { background:var(--neutral-100); }
.op-collapse-title::-webkit-details-marker { display:none; }
.op-collapse-title::after { content:'expand_more'; font-family:'Material Symbols Outlined'; margin-left:auto; font-size:20px; transition:transform .2s; }
.op-collapse[open] .op-collapse-title::after { transform:rotate(180deg); }
.op-collapse[open] .op-collapse-title { border-bottom:1px solid var(--border); }

/* --- From: Popup_SCM_PR.html --- */
.pr-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.pr-popup-overlay.active { opacity: 1; pointer-events: auto; }
.pr-popup-overlay.active .pr-popup { transform: translateY(0) scale(1); }
.pr-popup {
    background: var(--surface); border-radius: 16px; width: 820px; max-width: 96vw;
    max-height: 94vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.pr-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); color: var(--text-inverse);
}
.pr-popup-header h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.pr-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pr-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
/* Mode selector */
.pr-mode-bar {
    display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.pr-mode-btn {
    flex: 1; padding: 12px 10px; border: none; background: none; cursor: pointer;
    font-size: 0.78rem; font-weight: 600; color: var(--text-light);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-bottom: 2px solid transparent; transition: all 0.2s;
}
.pr-mode-btn:hover { background: var(--primary-light); color: var(--primary); }
.pr-mode-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--surface); }
.pr-mode-btn .material-symbols-outlined { font-size: 18px; }
/* Body */
.pr-popup-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.pr-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pr-form-grid.g2 { grid-template-columns: 1fr 1fr; }
.pr-field { display: flex; flex-direction: column; gap: 3px; }
.pr-field label { font-size: 0.7rem; font-weight: 600; color: var(--text-main); }
.pr-field label .req { color: var(--red-500); }
.pr-field input, .pr-field select, .pr-field textarea {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
}
.pr-field input:focus, .pr-field select:focus, .pr-field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.pr-field input:disabled { background: var(--surface-alt); color: var(--text-light); }
/* Order picker */
.pr-order-picker { margin-bottom: 16px; position: relative; }
.pr-order-picker input {
    width: 100%; padding: 10px 14px; border: 1.5px dashed var(--primary); border-radius: 10px;
    font-size: 0.8125rem; background: var(--primary-light); color: var(--primary);
    font-weight: 600; cursor: pointer;
}
.pr-order-picker input:focus { border-style: solid; }
.pr-order-picker .pr-order-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 240px; overflow-y: auto; display: none;
}
.pr-order-picker .pr-order-dropdown.open { display: block; }
.pr-order-item {
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
    transition: background 0.1s; font-size: 0.8rem;
}
.pr-order-item:last-child { border-bottom: none; }
.pr-order-item:hover { background: var(--primary-light); }
.pr-order-item .pr-oi-code { font-weight: 700; color: var(--primary); }
.pr-order-item .pr-oi-meta { font-size: 0.72rem; color: var(--text-light); margin-top: 2px; }
/* Items table */
.pr-items-section { margin-top: 4px; }
.pr-items-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.pr-items-header h4 { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); margin: 0; }
.pr-add-item-btn {
    padding: 5px 12px; border-radius: 6px; border: 1px dashed var(--primary);
    background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.pr-add-item-btn:hover { background: var(--success-bg); }
.pr-items-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pr-items-table thead { background: var(--surface-alt); }
.pr-items-table th { padding: 7px 8px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); text-align: left; border-bottom: 1px solid var(--border); }
.pr-items-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pr-items-table input, .pr-items-table select {
    width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem;
}
.pr-items-table input:focus, .pr-items-table select:focus { border-color: var(--primary); outline: none; }
.pr-remove-row { background: none; border: none; color: var(--red-600); cursor: pointer; padding: 3px; }
.pr-remove-row:hover { background: var(--red-bg); border-radius: 4px; }
.pr-totals { display: flex; justify-content: flex-end; margin-top: 10px; }
.pr-totals-box { min-width: 220px; }
.pr-totals-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.8125rem; }
.pr-totals-row.total { font-weight: 700; font-size: 0.9rem; border-top: 2px solid var(--text-main); padding-top: 6px; margin-top: 4px; }
/* Product autocomplete */
.pr-item-autocomplete-wrap { position: relative; }
.pr-item-autocomplete-wrap .pr-ac-list {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--surface, #fff); border: 1.5px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 200px; overflow-y: auto; z-index: 9999; display: none;
}
.pr-item-autocomplete-wrap .pr-ac-list.open { display: block; }
.pr-ac-item {
    padding: 7px 10px; font-size: 0.8rem; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}
.pr-ac-item:last-child { border-bottom: none; }
.pr-ac-item:hover { background: var(--surface-alt, #f5f5f5); }
.pr-ac-item .pr-ac-name { font-weight: 500; flex: 1; }
.pr-ac-item .pr-ac-meta { font-size: 0.68rem; color: var(--text-light); }
/* Footer */
.pr-popup-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-alt);
}
.pr-footer-left { display: flex; gap: 8px; }
.pr-footer-right { display: flex; gap: 8px; }
.pr-btn { padding: 8px 18px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pr-btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.pr-btn-primary:hover { background: var(--primary-hover); }
.pr-btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.pr-btn-success:hover { opacity: 0.9; }
.pr-btn-secondary { background: var(--surface); color: var(--text-main); }
.pr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Selected order info card */
.pr-order-info-card {
    background: var(--primary-light); border: 1px solid var(--primary); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
}
.pr-order-info-card .pr-oic-left { flex: 1; }
.pr-order-info-card .pr-oic-code { font-weight: 700; color: var(--primary); font-size: 0.9rem; }
.pr-order-info-card .pr-oic-meta { font-size: 0.72rem; color: var(--text-light); margin-top: 2px; }
.pr-order-info-card .pr-oic-clear {
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--red-500);
    background: var(--red-bg); color: var(--red-600); font-size: 0.7rem; font-weight: 600; cursor: pointer;
}

/* --- From: Popup_SmartPO.html --- */
/* ★ Smart PO Overlay */
.spo-overlay {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.spo-overlay.active { opacity:1; pointer-events:auto; }
.spo-overlay.active .spo-popup { transform:translateY(0) scale(1); }
.spo-popup {
    background:var(--surface,#fff); border-radius:16px;
    width:min(860px,96vw); max-height:92vh;
    display:flex; flex-direction:column;
    box-shadow:0 24px 80px rgba(0,0,0,0.25);
    transform:translateY(20px) scale(0.95);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}
/* Header */
.spo-header {
    padding:20px 24px 16px;
    background:var(--gradient-primary,linear-gradient(135deg,#2563eb,#3b82f6));
    color:#fff;
}
.spo-header-top { display:flex; align-items:center; justify-content:space-between; }
.spo-header h3 { margin:0; font-size:1.1rem; font-weight:700; }
.spo-header p { margin:3px 0 0; font-size:.78rem; opacity:.85; }
.spo-close {
    width:32px; height:32px; border-radius:8px; border:none;
    background:rgba(255,255,255,0.2); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.spo-close:hover { background:rgba(255,255,255,0.35); }
/* Stepper */
.spo-stepper {
    display:flex; align-items:center; gap:0; margin-top:16px;
    position:relative; padding:0 8px;
}
.spo-step-dot {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:700; flex-shrink:0;
    background:rgba(255,255,255,0.25); color:rgba(255,255,255,0.7);
    transition:all .3s;
}
.spo-step-dot.active { background:#fff; color:var(--primary,#2563eb); }
.spo-step-dot.done { background:#22c55e; color:#fff; }
.spo-step-line {
    flex:1; height:3px; background:rgba(255,255,255,0.25);
    border-radius:2px; margin:0 8px; position:relative;
}
.spo-step-line .spo-step-fill {
    height:100%; border-radius:2px; background:#fff;
    width:0; transition:width .4s ease;
}
.spo-step-label {
    font-size:.7rem; margin-top:4px; opacity:.8; white-space:nowrap;
}
.spo-stepper-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
/* Info bar (order info + exchange rates) */
.spo-info-bar {
    padding:10px 24px; display:flex; align-items:center; flex-wrap:wrap;
    gap:12px; font-size:.78rem; color:var(--text-light,#64748b);
    background:var(--surface-alt,#f8fafc);
    border-bottom:1px solid var(--border,#e5e7eb);
}
.spo-info-bar .spo-ib-item { display:flex; align-items:center; gap:4px; }
.spo-info-bar .spo-ib-divider { width:1px; height:18px; background:var(--border); }
.spo-rate-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 8px; border-radius:12px;
    background:var(--info-bg,#eff6ff); color:var(--blue-600,#2563eb);
    font-size:.72rem; font-weight:600;
}
/* Body */
.spo-body { padding:20px 24px; overflow-y:auto; flex:1; }
/* Step 1: Product cards */
.spo-product-card {
    border:1px solid var(--border,#e5e7eb); border-radius:12px;
    margin-bottom:14px; overflow:hidden; transition:border-color .2s;
}
.spo-product-card.selected { border-color:var(--primary,#2563eb); }
.spo-product-card.missing-ncc { border-color:var(--warning,#f59e0b); background:var(--warning-bg,#fffbeb); }
.spo-pc-header {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; background:var(--surface-alt,#f8fafc);
    font-size:.82rem; flex-wrap:wrap;
}
.spo-pc-header .spo-pc-check { accent-color:var(--primary); width:18px; height:18px; cursor:pointer; }
.spo-pc-name { font-weight:700; color:var(--text-main,#1e293b); flex:1; min-width:140px; }
.spo-pc-meta { font-size:.72rem; color:var(--text-light); display:flex; gap:10px; flex-wrap:wrap; }
.spo-pc-meta span { white-space:nowrap; }
/* NCC comparison table */
.spo-ncc-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.spo-ncc-table th {
    padding:6px 12px; font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-light); text-align:left;
    border-bottom:1px solid var(--border);
}
.spo-ncc-table td { padding:8px 12px; border-bottom:1px solid var(--border); }
.spo-ncc-table tr:last-child td { border-bottom:none; }
.spo-ncc-table tr:hover { background:var(--surface-alt,#f8fafc); }
.spo-ncc-table tr.ncc-selected { background:var(--info-bg,#eff6ff); }
.spo-ncc-radio { accent-color:var(--primary); width:16px; height:16px; cursor:pointer; }
.spo-ncc-star { color:var(--warning,#f59e0b); font-size:.85rem; }
.spo-ncc-name { font-weight:600; color:var(--text-main); }
.spo-ncc-price { font-weight:700; color:var(--text-main); white-space:nowrap; }
.spo-ncc-nguyen-te { font-size:.72rem; color:var(--blue-600); white-space:nowrap; }
/* Manual NCC fallback */
.spo-manual-ncc {
    padding:10px 16px; background:var(--warning-bg,#fffbeb);
    border-top:1px dashed var(--warning,#f59e0b);
    font-size:.78rem;
}
.spo-manual-ncc select, .spo-manual-ncc input {
    padding:6px 10px; border:1px solid var(--border); border-radius:6px;
    font-size:.78rem; background:var(--surface);
}
.spo-manual-ncc select:focus, .spo-manual-ncc input:focus {
    outline:none; border-color:var(--primary);
}
/* Editable price row */
.spo-edit-price {
    padding:8px 16px; display:flex; align-items:center; gap:10px;
    border-top:1px solid var(--border); font-size:.78rem;
}
.spo-edit-price label { color:var(--text-light); white-space:nowrap; }
.spo-edit-price input {
    width:140px; padding:5px 10px; border:1px solid var(--border);
    border-radius:6px; font-size:.82rem; font-weight:600;
    text-align:right;
}
.spo-edit-price input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light,rgba(37,99,235,0.1)); }
.spo-edit-price .spo-nguyen-te-calc {
    font-size:.72rem; color:var(--blue-600); font-weight:600; min-width:80px;
}
/* Step 2: PO Summary */
.spo-po-group {
    border:1px solid var(--border); border-radius:12px;
    margin-bottom:16px; overflow:hidden;
}
.spo-po-group-header {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:var(--surface-alt); font-size:.85rem; font-weight:600;
    color:var(--text-main);
}
.spo-po-group-header .spo-po-icon { font-size:22px; }
.spo-po-group-header .spo-po-badge {
    padding:2px 10px; border-radius:12px; font-size:.68rem; font-weight:700;
    background:var(--primary-light,#dbeafe); color:var(--primary,#2563eb);
}
.spo-po-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.spo-po-table th {
    padding:7px 12px; font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-light); text-align:left;
    border-bottom:1px solid var(--border);
    background:var(--surface);
}
.spo-po-table th.r, .spo-po-table td.r { text-align:right; }
.spo-po-table td { padding:8px 12px; border-bottom:1px solid var(--border); }
.spo-po-total-row { font-weight:700; background:var(--surface-alt); }
.spo-po-total-row td { border-bottom:none; }
/* Grand total strip */
.spo-grand-total {
    display:flex; align-items:center; justify-content:center;
    gap:16px; flex-wrap:wrap;
    padding:14px 24px; font-size:.85rem; font-weight:700;
    color:var(--text-main);
    background:var(--surface-alt); border-top:2px solid var(--border);
}
.spo-grand-total .spo-gt-value {
    font-size:1.1rem; color:var(--primary);
}
.spo-grand-total .spo-gt-divider { width:1px; height:20px; background:var(--border); }
/* Note */
.spo-note {
    padding:10px 16px; margin-top:12px; border-radius:8px;
    background:var(--info-bg,#eff6ff); font-size:.75rem;
    color:var(--blue-700,#1d4ed8); display:flex; align-items:flex-start; gap:6px;
}
/* Footer */
.spo-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; border-top:1px solid var(--border);
    background:var(--surface-alt);
}
.spo-btn {
    padding:9px 22px; border-radius:8px; font-size:.82rem;
    font-weight:600; border:1px solid var(--border); cursor:pointer;
    display:inline-flex; align-items:center; gap:6px; transition:all .2s;
}
.spo-btn:disabled { opacity:.5; cursor:not-allowed; }
.spo-btn-ghost { background:var(--surface); color:var(--text-main); }
.spo-btn-ghost:hover:not(:disabled) { background:var(--surface-alt); }
.spo-btn-primary {
    background:var(--primary,#2563eb); color:#fff;
    border-color:var(--primary,#2563eb);
}
.spo-btn-primary:hover:not(:disabled) { background:var(--primary-hover,#1d4ed8); }
.spo-btn-success {
    background:var(--green-600,#16a34a); color:#fff;
    border-color:var(--green-600,#16a34a);
}
.spo-btn-success:hover:not(:disabled) { background:var(--green-700,#15803d); }
/* Loading overlay inside popup */
.spo-loading {
    position:absolute; inset:0; z-index:10;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.85); gap:8px; font-size:.85rem; color:var(--text-light);
}
.spo-loading .material-symbols-outlined { font-size:32px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* --- From: Popup_TIEP_NHAN_XE.html --- */
.tnx-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
    z-index:9000; display:none; align-items:center; justify-content:center;
    opacity:0; transition:opacity .25s;
}
.tnx-overlay.active { opacity:1; }
.tnx-popup {
    background:var(--card-bg,#fff); border-radius:16px; width:95%; max-width:640px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3); display:flex; flex-direction:column;
    max-height:90vh; overflow:hidden;
}
.tnx-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; background:var(--primary-action-bg); color:white; border-radius:16px 16px 0 0;
}
.tnx-header h3 { margin:0; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:6px; }
.tnx-header .close-btn {
    width:32px; height:32px; border:none; border-radius:8px;
    background:rgba(255,255,255,.2); color:white; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.tnx-header .close-btn:hover { background:rgba(255,255,255,.3); }
.tnx-body { padding:20px 24px; overflow-y:auto; flex:1; }
.tnx-section { margin-bottom:16px; }
.tnx-section-title { font-size:.85rem; font-weight:700; color:var(--text-primary,#1a1a2e); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.tnx-section-title .material-symbols-outlined { font-size:18px; color:var(--primary-action-bg); }

.tnx-field { margin-bottom:10px; }
.tnx-field label { display:block; font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.tnx-field input, .tnx-field textarea, .tnx-field select {
    width:100%; padding:8px 10px; border:1px solid var(--border-default); border-radius:6px;
    font-size:.85rem; background:var(--input-bg); color:var(--text-primary);
}
.tnx-field textarea { resize:vertical; min-height:60px; }
.tnx-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px) { .tnx-grid { grid-template-columns:1fr; } }

/* Checklist */
.tnx-checklist { list-style:none; padding:0; margin:0; }
.tnx-checklist li {
    display:flex; align-items:center; gap:8px; padding:8px 0;
    border-bottom:1px solid var(--border-default);
    font-size:.85rem; color:var(--text-primary);
}
.tnx-checklist li:last-child { border-bottom:none; }
.tnx-checklist input[type=checkbox] { width:18px; height:18px; accent-color:var(--primary-action-bg); cursor:pointer; }
.tnx-checklist label { cursor:pointer; flex:1; }
.tnx-checklist .note-inline { font-size:.75rem; color:var(--text-muted); display:block; margin-top:2px; }

/* Fuel Level */
.tnx-fuel { display:flex; align-items:center; gap:8px; margin-top:8px; }
.tnx-fuel label { font-size:.8rem; color:var(--text-primary); font-weight:500; }
.tnx-fuel input[type=range] { flex:1; accent-color:var(--primary-action-bg); }
.tnx-fuel-val { font-weight:700; color:var(--primary-action-bg); min-width:30px; text-align:right; }

.tnx-footer {
    display:flex; justify-content:flex-end; gap:8px;
    padding:12px 24px; border-top:1px solid var(--border-default); background:var(--surface-alt,#f8f9fa);
}
.tnx-btn { padding:8px 18px; border-radius:8px; font-size:.85rem; font-weight:600; border:1px solid var(--border-default); cursor:pointer; }
.tnx-btn-primary { background:var(--primary-action-bg); color:var(--primary-action-text,white); border-color:var(--primary-action-bg); }
.tnx-btn-primary:hover { opacity:.9; }
.tnx-btn-ghost { background:transparent; color:var(--text-primary); }
.tnx-btn-ghost:hover { background:var(--surface-alt,#f0f0f0); }

/* --- From: Page_Product_List.html --- */
/* === Product-specific styles === */
.prod-img-cell {
    width: 44px; height: 44px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.prod-img-cell img { width: 100%; height: 100%; object-fit: cover; }
.prod-img-cell .placeholder { font-size: 22px; color: var(--border); }

/* Card view product-specific */
.prod-card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px; padding: 20px; display: none;
}
.prod-card-grid.active { display: grid; }
.prod-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: all 0.2s; cursor: pointer; position: relative;
}
.prod-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: var(--primary); }
.prod-card-img {
    width: 100%; height: 160px; background: var(--neutral-50);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-bottom: 1px solid var(--border);
}
.prod-card-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-card-img .placeholder { font-size: 48px; color: var(--neutral-300); }
.prod-card-body { padding: 14px 16px; }
.prod-card-name { font-weight: 600; color: var(--text-main); font-size: 0.875rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-card-sku { font-size: 0.6875rem; color: var(--text-light); font-family: monospace; margin-bottom: 10px; }
.prod-card-meta { display: flex; justify-content: space-between; align-items: center; }
.prod-card-price { font-weight: 700; color: var(--primary); font-size: 0.875rem; }
.prod-card-stock { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.prod-card-stock.in-stock { background: var(--success-bg); color: var(--green-500); }
.prod-card-stock.low-stock { background: var(--warning-bg); color: var(--warning); }
.prod-card-stock.out-stock { background: var(--danger-bg); color: var(--red-600); }
.prod-card-cat { font-size: 0.6875rem; color: var(--text-light); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.prod-card-cat span { font-size: 14px; }
.prod-card-status {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 10px; border-radius: 12px; font-size: 0.625rem; font-weight: 700;
}

/* Image zoom lightbox */
.prod-lightbox {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    cursor: zoom-out;
}
.prod-lightbox.active { display: flex; }
.prod-lightbox img { max-width: 80%; max-height: 80%; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }

/* --- From: Page_Product_MasterData.html --- */
/* === MasterData Layout === */
.md-page { padding: 24px; }
.md-page-header { margin-bottom: 20px; }
.md-page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.md-page-header p { font-size: 0.8125rem; color: var(--text-light); }

.md-container {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-height: calc(100vh - 220px); overflow: hidden;
}

/* Tab count badges in header */
.md-tab-count {
    font-size: 0.625rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; background: var(--bg); color: var(--text-light);
    margin-left: 6px;
}

/* === Inline Add/Edit Popup === */
.md-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; opacity: 1; transition: opacity 0.2s;
}
.md-popup-overlay.hidden { display: none; }
.md-popup-card {
    background: var(--surface); border-radius: 14px;
    width: 460px; max-width: 95%; max-height: 80vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.md-popup-hdr {
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50); border-radius: 14px 14px 0 0;
}
.md-popup-hdr h4 { font-size: 1rem; font-weight: 700; color: var(--text-main); }
.md-popup-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.md-popup-field label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin-bottom: 5px; }
.md-popup-field input, .md-popup-field select, .md-popup-field textarea {
    width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; font-family: var(--font-main); color: var(--text-main);
}
.md-popup-field input:focus, .md-popup-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.md-popup-footer {
    padding: 14px 22px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--neutral-50); border-radius: 0 0 14px 14px;
}

/* === Right Content === */
.md-content { flex: 1; overflow-y: auto; }
.md-view { padding: 28px 32px; display: none; }
.md-view.active { display: block; }

.md-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.md-view-header h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-main); }
.md-view-header p { font-size: 0.8125rem; color: var(--text-light); margin-top: 2px; }

/* === View Toolbar === */
.md-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.md-search-box {
    position: relative; flex: 1; min-width: 160px; max-width: 300px;
}
.md-search-box span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-light); }
.md-search-box input {
    width: 100%; padding: 8px 10px 8px 34px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem;
    font-family: var(--font-main); color: var(--text-main);
}
.md-search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }

/* === MasterData Cards === */
.md-card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; display: none;
}
.md-card-grid.active { display: grid; }
.md-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px; transition: all 0.2s; cursor: pointer; position: relative;
}
.md-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: var(--primary); }
.md-card-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; font-size: 22px;
}
.md-card-icon.green { background: var(--success-bg); color: var(--green-500); }
.md-card-icon.blue { background: var(--info-bg); color: var(--info); }
.md-card-icon.amber { background: var(--warning-bg); color: var(--warning); }
.md-card-icon.purple { background: var(--purple-border); color: var(--purple-600); }
.md-card-icon.rose { background: #FFE4E6; color: #E11D48; }
.md-card-name { font-weight: 600; font-size: 0.875rem; color: var(--text-main); margin-bottom: 4px; }
.md-card-desc { font-size: 0.75rem; color: var(--text-light); line-height: 1.4; }
.md-card-badge {
    position: absolute; top: 12px; right: 12px;
    font-size: 0.625rem; font-weight: 700; padding: 3px 10px;
    border-radius: 10px; background: var(--bg); color: var(--text-light);
}
.md-card-actions {
    position: absolute; bottom: 12px; right: 12px;
    opacity: 0; transition: opacity 0.2s; display: flex; gap: 4px;
}
.md-card:hover .md-card-actions { opacity: 1; }

/* Brand logo card */
.md-brand-logo {
    width: 100%; height: 60px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; filter: grayscale(100%); transition: filter 0.3s;
}
.md-card:hover .md-brand-logo { filter: grayscale(0%); }
.md-brand-logo img { max-height: 40px; max-width: 100%; }
.md-brand-logo .placeholder { font-size: 36px; color: var(--neutral-300); }

/* Vehicle card */
.md-vehicle-brand { font-size: 0.6875rem; color: var(--primary); font-weight: 600; margin-bottom: 2px; }
.md-vehicle-segment {
    display: inline-block; font-size: 0.625rem; font-weight: 600;
    padding: 2px 8px; border-radius: 8px; margin-top: 6px;
}

/* === View Toggle Buttons (inline — Component_ColumnManager not loaded) === */
.view-toggle { display: flex; gap: 2px; background: var(--bg); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.view-toggle-btn {
    padding: 6px 8px; border: none; background: transparent; cursor: pointer;
    border-radius: 6px; color: var(--text-light); display: flex; align-items: center;
    transition: all 0.15s;
}
.view-toggle-btn:hover { color: var(--text-main); }
.view-toggle-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.view-toggle-btn span { font-size: 20px; }

/* Simple table in MasterData */
.md-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.md-table-wrap.hidden { display: none; }

/* --- From: Page_Product_Summary.html --- */
/* Summary-specific styles */
.sum-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
    white-space: nowrap; cursor: default;
}
.sum-badge-brand   { background: var(--blue-bg); color: #4338CA; }
.sum-badge-origin  { background: var(--warning-bg); color: var(--amber-700); }
.sum-badge-uom     { background: var(--green-bg); color: var(--green-500); }
.sum-badge-cat     { background: #FDF2F8; color: #BE185D; }
.sum-badge-vehicle { background: #F0F9FF; color: #0369A1; }
.sum-legend {
    display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
    background: var(--surface); border-radius: 10px; border: 1px solid var(--border);
    margin-bottom: 12px;
}
.sum-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-light); }
.sum-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
/* KPI Strip */
.sum-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .sum-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.sum-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; transition: box-shadow 0.2s; }
.sum-kpi:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.sum-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sum-kpi-icon .material-symbols-outlined { font-size: 22px; color: #fff; }
.sum-kpi-icon.ic-total { background: linear-gradient(135deg, #4F46E5, #7c3aed); }
.sum-kpi-icon.ic-active { background: linear-gradient(135deg, #10b981, #34d399); }
.sum-kpi-icon.ic-brands { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.sum-kpi-icon.ic-cats { background: linear-gradient(135deg, #BE185D, #ec4899); }
.sum-kpi-value { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
.sum-kpi-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }

/* --- From: Popup_SAN_PHAM.html --- */
/* ===== POPUP BASE (self-contained, same pattern as Popup_DON_BAN_HANG) ===== */
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  /* Secondary modal mode: appear ABOVE quote popup (z-index 10001) */
  .popup-overlay.pp-secondary-mode {
    z-index: 10002;
    background: rgba(0, 0, 0, 0.4);
  }
  .popup-card {
    background: var(--surface);
    border-radius: 16px;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: scale(1);
    transition: transform 0.25s ease;
  }
  .popup-hdr {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary);
    border-radius: 16px 16px 0 0;
  }
  .popup-hdr h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-inverse);
    margin-bottom: 2px;
  }
  .popup-hdr p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  .popup-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
  }
  .popup-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-inverse);
  }
  .popup-close-btn span {
    font-size: 20px;
  }

  .popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
  }

  .popup-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-50);
    border-radius: 0 0 16px 16px;
  }

  /* Form Grid */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 20px;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-8 {
    grid-column: span 8;
  }
  .col-12 {
    grid-column: span 12;
  }
  @media (max-width: 768px) {
    .col-3,
    .col-4,
    .col-6,
    .col-8 {
      grid-column: span 12;
    }
  }

  /* Form Fields */
  .field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
  }
  .field-label .required {
    color: var(--danger);
    margin-left: 2px;
  }
  .field-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-main);
    font-family: var(--font-main);
    transition:
      border-color 0.2s,
      box-shadow 0.2s;
  }
  .field-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
    background: var(--surface);
  }
  .field-input.field-money {
    font-family: "Segoe UI", monospace;
    text-align: right;
    font-weight: 600;
  }

  /* Buttons */
  .btn-close-popup {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-close-popup:hover {
    background: var(--bg);
    color: var(--text-main);
  }
  .btn-save-draft {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-save-draft:hover {
    background: var(--bg);
  }
  .btn-confirm-order {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--primary);
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 71, 139, 0.3);
  }
  .btn-confirm-order:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
  }

  /* ===== PRODUCT-SPECIFIC EXTRAS ===== */
  /* Section divider */
  .pp-section {
    grid-column: span 12;
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
    margin-top: 4px;
  }
  .pp-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pp-section-title span {
    font-size: 18px;
  }

  /* Barcode Scanner */
  .pp-barcode-scanner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f0f9ff 0%, var(--blue-bg) 100%);
    border: 2px dashed #93c5fd;
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s;
  }
  .pp-barcode-scanner:focus-within {
    border-color: var(--primary);
    border-style: solid;
  }
  .pp-barcode-scanner .scanner-icon {
    font-size: 28px;
    color: var(--blue-500);
    flex-shrink: 0;
  }
  .pp-barcode-scanner input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    font-family: "Segoe UI", monospace;
    letter-spacing: 1px;
  }
  .pp-barcode-scanner input::placeholder {
    color: #93c5fd;
    font-weight: 400;
    letter-spacing: 0;
  }
  .pp-barcode-scanner input:focus {
    outline: none;
  }
  .pp-barcode-scanner .scanner-hint {
    font-size: 0.65rem;
    color: var(--blue-500);
    white-space: nowrap;
  }
  .pp-barcode-found {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: none;
    white-space: nowrap;
    align-items: center;
    gap: 4px;
  }
  .pp-barcode-found.found {
    display: inline-flex;
    background: var(--green-bg);
    color: var(--green-500);
  }
  .pp-barcode-found.not-found {
    display: inline-flex;
    background: var(--red-bg);
    color: var(--red-600);
  }

  /* Upload Zone */
  .pp-img-upload-zone {
    width: 100%;
    min-height: 150px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--neutral-50);
  }
  .pp-img-upload-zone:hover {
    border-color: var(--primary);
    background: var(--blue-bg);
  }
  .pp-img-upload-zone .upload-icon {
    font-size: 36px;
    color: var(--neutral-300);
    transition: color 0.2s;
  }
  .pp-img-upload-zone:hover .upload-icon {
    color: var(--primary);
  }
  .pp-img-upload-zone p {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0;
  }
  .pp-img-upload-zone small {
    font-size: 0.65rem;
    color: var(--neutral-400);
  }

  /* URL Input */
  .pp-img-url-input {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .pp-img-url-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    background: var(--neutral-50);
    transition: all 0.2s;
  }
  .pp-img-url-input input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #fff;
  }
  .pp-img-url-input button {
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .pp-img-url-input button:hover {
    filter: brightness(1.1);
  }

  /* Preview area */
  .pp-img-preview-area {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--neutral-50);
    border: 1px solid var(--border);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .pp-img-preview-area img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: none;
  }
  .pp-img-preview-area .no-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    color: var(--neutral-300);
  }
  .pp-img-preview-area .no-img span {
    font-size: 40px;
  }
  .pp-img-preview-area .no-img p {
    font-size: 0.7rem;
    margin: 0;
  }

  /* Avatar badge */
  .pp-img-avatar-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--green-500);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    display: none;
    letter-spacing: 0.05em;
  }

  /* Remove button */
  .pp-img-remove-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s;
  }
  .pp-img-remove-btn:hover {
    background: rgba(239, 68, 68, 0.9);
  }

  /* ===== TABS ===== */
  .pp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    padding: 0 4px;
  }
  .pp-tab-btn {
    padding: 10px 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pp-tab-btn:hover {
    color: var(--text-main);
  }
  .pp-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
  .pp-tab-btn span {
    font-size: 18px;
  }
  .pp-tab-content {
    display: none;
  }
  .pp-tab-content.active {
    display: block;
  }

  /* NCC Price Table */
  .ncc-price-wrap {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .ncc-price-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
  }
  .ncc-price-toolbar h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ncc-price-toolbar h4 span {
    font-size: 18px;
    color: var(--primary);
  }
  .ncc-best-price {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--green-bg);
    color: var(--green-500);
  }
  .ncc-add-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
  }
  .ncc-add-btn:hover {
    background: var(--primary-hover);
  }
  .ncc-add-btn span {
    font-size: 16px;
  }
  .ncc-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
  }
  .ncc-price-table thead th {
    padding: 8px 10px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
  }
  .ncc-price-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
  }
  .ncc-price-table tbody tr:hover {
    background: var(--surface-hover);
  }
  .ncc-price-table .ncc-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--bg);
    font-family: var(--font-main);
  }
  .ncc-price-table .ncc-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
  }
  .ncc-price-table .ncc-input-money {
    text-align: right;
    font-weight: 600;
    font-family: "Segoe UI", monospace;
  }
  .ncc-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--neutral-300);
    transition: color 0.2s;
    padding: 2px;
  }
  .ncc-star-btn:hover {
    color: var(--amber-500);
  }
  .ncc-star-btn.preferred {
    color: var(--amber-500);
  }
  .ncc-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--neutral-300);
    transition: color 0.2s;
    padding: 2px;
  }
  .ncc-del-btn:hover {
    color: var(--red-500);
  }
  .ncc-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-light);
    font-size: 0.8125rem;
  }
  .ncc-empty span {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    color: var(--neutral-300);
  }
  /* NCC Group Headers */
  .ncc-group-header td {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 2px solid;
  }
  .ncc-group-header.nk td {
    background: #eff6ff;
    color: #2563eb;
    border-bottom-color: #93c5fd;
  }
  .ncc-group-header.nd td {
    background: #f0fdf4;
    color: #16a34a;
    border-bottom-color: #86efac;
  }
  .ncc-nguon-hang-badge {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
  }
  .ncc-nguon-hang-badge.nk { background: #dbeafe; color: #1e40af; }
  .ncc-nguon-hang-badge.nd { background: #dcfce7; color: #166534; }
  .ncc-nguon-hang-badge.gc { background: #fef3c7; color: #92400e; }
  .ncc-nguon-hang-badge.dv { background: #f3e8ff; color: #6b21a8; }

  /* ===== NGUON HANG MULTI-SELECT PICKER ===== */
  .pp-nguon-hang-picker { position: relative; }
  .pp-nh-tags {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    cursor: pointer;
    background: var(--white);
    transition: border-color 0.2s;
  }
  .pp-nh-tags:hover { border-color: var(--primary); }
  .pp-nh-placeholder { color: var(--text-light); font-size: 0.8125rem; }
  .pp-nh-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--blue-bg, #dbeafe);
    color: var(--primary, #2563eb);
    white-space: nowrap;
  }
  .pp-nh-tag .pp-nh-tag-x {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    margin-left: 2px;
  }
  .pp-nh-tag .pp-nh-tag-x:hover { opacity: 1; }
  .pp-nh-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    margin-top: 4px;
    padding: 4px 0;
  }
  .pp-nh-dropdown.open { display: block; }
  .pp-nh-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s;
  }
  .pp-nh-option:hover { background: var(--neutral-50, #f9fafb); }
  .pp-nh-option input[type="checkbox"] { accent-color: var(--primary); }
  /* ===== NCC SUMMARY CARD ===== */
  .ncc-summary-card {
    background: linear-gradient(135deg, #f0f9ff 0%, var(--blue-bg) 100%);
    border: 1px solid var(--blue-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .ncc-summary-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ncc-summary-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ncc-summary-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-500);
    font-family: "Segoe UI", monospace;
  }
  .ncc-summary-supplier {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  .ncc-summary-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .ncc-summary-count {
    font-size: 0.75rem;
    color: var(--text-light);
    background: #fff;
    padding: 4px 10px;
    border-radius: 8px;
  }
  /* NCC SEARCHABLE DROPDOWN */
  .ncc-select-wrap {
    position: relative;
    width: 100%;
  }
  .ncc-dd-trigger {
    width: 100%;
    padding: 5px 28px 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.75rem;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    color: var(--text);
    min-height: 28px;
    line-height: 1.4;
    position: relative;
  }
  .ncc-dd-trigger.disabled {
    cursor: not-allowed;
    background: #f3f4f6;
    color: #6b7280;
    padding-right: 8px;
    pointer-events: none;
  }
  .ncc-dd-trigger.disabled::after {
    display: none;
  }
  .ncc-dd-trigger::after {
    content: "\25BE";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.625rem;
    color: var(--text-light);
  }
  .ncc-dd-trigger:hover { border-color: var(--primary); }
  .ncc-dd-trigger.open { border-color: var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .ncc-dd-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px; /* Make it wider for easier viewing */
    background: #fff;
    border: 1px solid var(--primary);
    border-top: none;
    border-radius: 0 0 5px 5px;
    z-index: 1200;
    max-height: 220px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  .ncc-dd-panel.show { display: block; }
  .ncc-dd-search {
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    outline: none;
    box-sizing: border-box;
  }
  .ncc-dd-list {
    max-height: 170px;
    overflow-y: auto;
    padding: 2px 0;
  }
  .ncc-dd-item {
    padding: 6px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ncc-dd-item:hover { background: var(--primary-light, #e3f2fd); }
  .ncc-dd-item.selected { background: var(--primary-light, #e3f2fd); font-weight: 600; }
  .ncc-dd-item .ncc-dd-code {
    font-family: monospace;
    font-size: 0.65rem;
    color: var(--text-light);
    min-width: 60px;
  }
  .ncc-dd-item.ncc-dd-new {
    font-weight: 700;
    color: var(--primary);
    border-top: 1px solid var(--border);
    padding: 8px;
  }
  .ncc-dd-empty {
    padding: 8px;
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: center;
  }
  .ncc-dd-count {
    font-size: 0.6rem;
    color: var(--text-light);
    padding: 2px 8px;
    border-bottom: 1px solid var(--border);
    background: #f5f5f5;
  }
  /* NCC OVERLAY */
  .ncc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ncc-overlay.hidden {
    display: none;
  }
  .ncc-overlay-card {
    background: #fff;
    border-radius: 16px;
    width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
  .ncc-overlay-hdr {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ncc-overlay-hdr h4 {
    margin: 0;
    font-size: 1rem;
  }
  .ncc-overlay-body {
    padding: 20px 24px;
  }
  .ncc-overlay-body .field-group {
    margin-bottom: 14px;
  }
  .ncc-overlay-body .field-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
  }
  .ncc-overlay-body .field-group input,
  .ncc-overlay-body .field-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
  }
  .ncc-overlay-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

/* --- From: Page_Report_InventoryAging.html --- */
/* Inventory Aging specific: summary card color bars + aging badge colors */
.aging-card {
    background:var(--surface); border-radius:12px; padding:16px;
    border:1px solid var(--border); text-align:center; position:relative; overflow:hidden;
}
.aging-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.aging-card.green::before { background:var(--green-600); }
.aging-card.yellow::before { background:#EAB308; }
.aging-card.orange::before { background:#EA580C; }
.aging-card.red::before { background:var(--red-600); }
.aging-card.total::before { background:var(--primary); }
.aging-card-num { font-size:1.4rem; font-weight:800; color:var(--text-main); }
.aging-card-label { font-size:0.7rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.aging-card-value { font-size:0.75rem; color:var(--primary); font-weight:600; margin-top:4px; }

/* Tabs with color coding */
.aging-tabs { display:flex; gap:4px; margin-bottom:16px; background:var(--surface); border-radius:10px; padding:4px; border:1px solid var(--border); }
.aging-tab { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-light); transition:all 0.2s; }
.aging-tab.active { color:white; }
.aging-tab.green.active { background:var(--green-600); }
.aging-tab.yellow.active { background:#EAB308; color:#000; }
.aging-tab.orange.active { background:#EA580C; }
.aging-tab.red.active { background:var(--red-600); }
.aging-tab:hover:not(.active) { background:var(--primary-light); }

/* Aging badge colors */
.aging-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.aging-badge.green { background:var(--success-bg); color:var(--green-600); }
.aging-badge.yellow { background:#FEF9C3; color:#A16207; }
.aging-badge.orange { background:#FFEDD5; color:#EA580C; }
.aging-badge.red { background:var(--danger-bg); color:var(--red-600); }

/* --- From: Page_Report_SalesPerformance.html --- */
/* SalesPerf-specific: rank medals + conversion bar (not in tp-*) */
.sp-rank { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.sp-rank.r1 { background:linear-gradient(135deg, var(--amber-border), var(--amber-500)); color:#78350F; }
.sp-rank.r2 { background:linear-gradient(135deg, var(--neutral-200), var(--neutral-400)); color:var(--neutral-700); }
.sp-rank.r3 { background:linear-gradient(135deg, #FED7AA, #EA580C); color:#fff; }
.sp-rank.other { background:var(--neutral-100); color:var(--text-light); }
.sp-conv-bar { display:inline-block; height:6px; border-radius:3px; background:var(--success); min-width:4px; }
.sp-conv-text { font-size:11px; font-weight:700; margin-left:6px; }

/* --- From: Page_Lead_List.html --- */
/* Row Actions - Lead List (inline like Báo giá) */
.tp-row-action-cell { white-space: nowrap; text-align: right; }
.act-group { display: inline-flex; gap: 2px; align-items: center; }
.act-btn {
    background: none; border: none; cursor: pointer; padding: 4px 5px;
    color: var(--text-light); border-radius: 6px; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.act-btn:hover { background: var(--neutral-100); color: var(--primary); }
.act-btn .material-symbols-outlined { font-size: 18px; }
.act-btn.edit-btn:hover { color: var(--primary); }
.act-btn.convert-btn { color: var(--primary); font-weight: 600; }
.act-btn.convert-btn:hover { background: rgba(37,99,235,0.1); }
.act-btn.delete-btn:hover { color: var(--danger, #EF4444); background: rgba(239,68,68,0.08); }
.lr-converted-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
    background: rgba(5,150,105,0.08); color: #059669;
}
/* Inline Status Dropdown */
.lr-status-wrap { position: relative; display: inline-block; }
.lr-status-wrap .tp-badge { cursor: pointer; user-select: none; }
.lr-status-wrap .tp-badge::after {
    content: '▾'; margin-left: 4px; font-size: 0.65rem; opacity: 0.6;
}
.lr-st-menu {
    display: none; position: absolute; left: 0; top: calc(100% + 4px);
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 180px; z-index: 200; overflow: hidden;
    animation: lrStFade 0.12s ease;
}
.lr-st-menu.open { display: block; }
@keyframes lrStFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.lr-st-opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 14px; border: none; background: none;
    font-size: 0.8rem; color: var(--text-main); cursor: pointer;
    text-align: left; transition: background 0.12s; font-family: var(--font-main);
}
.lr-st-opt:hover { background: var(--neutral-100); }
.lr-st-opt.lr-st-active { font-weight: 700; color: var(--primary); background: rgba(37,99,235,0.06); }
.lr-st-opt .lr-st-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* --- From: Page_Sales_Customer_Lookup.html --- */
/* ===== CUSTOMER LOOKUP PAGE ===== */
.cl-container { max-width: 1000px; margin: 0 auto; padding: 32px 24px; overflow-x: hidden; box-sizing: border-box; width: 100%; }

/* Search Hero */
.cl-hero {
    text-align: center; padding: 40px 24px 32px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a3670 100%);
    border-radius: 16px; margin-bottom: 28px; color: #fff;
}
.cl-hero h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.cl-hero p { font-size: 0.875rem; opacity: 0.8; margin: 0 0 24px; }
.cl-search-wrap {
    position: relative; max-width: 600px; margin: 0 auto;
}
.cl-search-input {
    width: 100%; padding: 14px 50px 14px 20px; border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px; font-size: 1rem; color: #fff; background: rgba(255,255,255,0.15);
    font-family: var(--font-main); backdrop-filter: blur(4px);
    box-sizing: border-box;
}
.cl-search-input::placeholder { color: rgba(255,255,255,0.6); }
.cl-search-input:focus { outline: none; border-color: var(--secondary); background: rgba(255,255,255,0.2); }
.cl-search-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 10px; border: none;
    background: var(--secondary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.cl-search-btn:hover { filter: brightness(1.1); }
.cl-search-btn span { font-size: 22px; }

/* Results count */
.cl-results-count {
    font-size: 0.8125rem; color: var(--text-light); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.cl-results-count strong { color: var(--primary); }

/* Customer Card */
.cl-card {
    background: var(--surface, #fff); border: 1.5px solid var(--border);
    border-radius: 14px; padding: 24px; margin-bottom: 16px;
    cursor: pointer; transition: all 0.2s;
}
.cl-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,71,139,0.1); transform: translateY(-1px); }
.cl-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.cl-card-name { font-size: 1.125rem; font-weight: 700; color: var(--text-main); margin: 0 0 4px; }
.cl-card-code { font-size: 0.75rem; color: var(--text-light); font-family: monospace; }
.cl-card-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 20px; font-size: 0.6875rem; font-weight: 600;
}
.cl-badge-vip { background: var(--warning-bg); color: var(--amber-700); }
.cl-badge-ok { background: var(--success-bg); color: var(--green-700); }
.cl-badge-warn { background: var(--danger-bg); color: var(--red-700); }

/* Info grid */
.cl-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cl-info-item { }
.cl-info-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; color: var(--text-light); margin-bottom: 2px; }
.cl-info-value { font-size: 0.875rem; color: var(--text-main); font-weight: 500; }
.cl-info-value.cl-money { font-family: 'Segoe UI', monospace; font-weight: 700; color: var(--primary); }
.cl-info-value.cl-danger { color: var(--red-500); font-weight: 700; }

/* Credit Bar */
.cl-credit-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cl-credit-bar { height: 8px; background: var(--neutral-200); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.cl-credit-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.cl-credit-fill.cl-safe { background: var(--green-500); }
.cl-credit-fill.cl-caution { background: var(--amber-500); }
.cl-credit-fill.cl-danger { background: var(--red-500); }
.cl-credit-text { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--text-light); }

/* Warning Banner */
.cl-warning {
    background: var(--red-bg); border: 1px solid var(--red-border); border-radius: 10px;
    padding: 12px 16px; margin-top: 12px; display: flex; align-items: center; gap: 10px;
    font-size: 0.8125rem; color: var(--red-700);
}
.cl-warning span.material-symbols-outlined { font-size: 20px; color: var(--red-500); }

/* Action bar */
.cl-card-actions { display: flex; gap: 10px; margin-top: 16px; }
.cl-btn {
    padding: 8px 18px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.2s;
}
.cl-btn-primary { background: var(--primary); color: #fff; }
.cl-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cl-btn-secondary { background: transparent; border: 1.5px solid var(--border); color: var(--text-main); }
.cl-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.cl-btn span { font-size: 18px; }

/* Star display */
.cl-stars { color: var(--secondary); font-size: 14px; letter-spacing: 2px; }

/* Empty state */
.cl-empty {
    text-align: center; padding: 60px 24px; color: var(--text-light);
}
.cl-empty span.material-symbols-outlined { font-size: 56px; opacity: 0.3; display: block; margin-bottom: 12px; }
.cl-empty p { font-size: 0.9375rem; margin: 0 0 20px; }

/* Create New Customer Section */
.cl-create-section {
    text-align: center; padding: 24px; border: 2px dashed var(--border);
    border-radius: 14px; margin-top: 16px;
}
.cl-create-section p { font-size: 0.8125rem; color: var(--text-light); margin: 0 0 12px; }

/* Loading */
.cl-loading { text-align: center; padding: 40px; color: var(--text-light); }
.cl-loading .spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }


/* ========== Sub-Popup Overlay (Create New Customer) ========== */
.sub-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 24px;
}
.sub-popup-card {
    background: #fff; border-radius: 16px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden;
    max-height: 90vh; display: flex; flex-direction: column;
}
.sub-popup-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    background: var(--bg-section, #F8F9FB);
}
.sub-popup-hdr h4 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-main); }
.sub-popup-body {
    padding: 24px; overflow-y: auto; flex: 1;
}
.sub-popup-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border);
    background: var(--bg-section, #F8F9FB);
}
.sub-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.sub-col-6 { }
.sub-col-12 { grid-column: 1 / -1; }

/* Buttons */
.cl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: 10px; border: 1.5px solid var(--border);
    font-size: 0.875rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s; font-family: var(--font-main);
}
.cl-btn span.material-symbols-outlined { font-size: 18px; }
.cl-btn-primary {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37,71,139,0.25);
}
.cl-btn-primary:hover {
    background: var(--primary-dark, #1c3a6e); border-color: var(--primary-dark, #1c3a6e);
    box-shadow: 0 4px 16px rgba(37,71,139,0.35); transform: translateY(-1px);
}
.cl-btn-primary:active { transform: translateY(0); }
.cl-btn-secondary {
    background: var(--surface, #fff); color: var(--text-main);
}
.cl-btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: #F0F4FA; }

/* --- From: Page_Sales_Dashboard.html --- */
/* =========================================================
   SALES DASHBOARD — Advanced (Looker Studio Style)
   ========================================================= */
.dash-wrapper {
    padding: 32px; max-width: 1360px; margin: 0 auto;
    font-family: var(--font-family, 'Inter', sans-serif);
}

/* --- HEADER --- */
.dash-header { margin-bottom: 20px; }
.dash-header h1 { font-size: 1.75rem; font-weight: 800; color: var(--text-main, #121417); margin: 0 0 4px; }
.dash-header p { font-size: 0.875rem; color: var(--text-light, #677183); margin: 0; }
.dash-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-header-actions { display: flex; gap: 10px; flex-shrink: 0; }
.dash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.dash-btn-outline { background: var(--surface, #fff); border: 1px solid var(--border); color: var(--text-main, #121417); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.dash-btn-outline:hover { background: var(--bg); }
.dash-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,71,139,0.25); }
.dash-btn-primary:hover { filter: brightness(1.1); }

/* --- FILTER BAR (Single-trigger panel) --- */
.dash-filter-bar { position: relative; display: inline-flex; margin-bottom: 24px; }
.dash-filter-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); font-size: 0.8125rem; font-weight: 700; color: var(--text-main); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.dash-filter-trigger:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,71,139,0.12); }
.dash-filter-trigger .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.dash-filter-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 380px; padding: 16px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.dash-filter-panel.show { display: block; }
@media (max-width: 768px) { .dash-filter-panel { min-width: calc(100vw - 80px); left: 0; right: 0; } }
.fp-section { padding: 10px 0; border-bottom: 1px solid var(--border); }
.fp-section:last-child { border-bottom: none; padding-bottom: 4px; }
.fp-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin-bottom: 8px; }
.fp-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fp-label-row .fp-label { margin-bottom: 0; }
.fp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fp-btn { padding: 7px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-main); transition: all 0.15s; text-align: center; font-family: inherit; }
.fp-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.fp-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fp-year-btns { display: flex; gap: 4px; }
.fp-year-btn { padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.fp-year-btn:hover { background: var(--bg); }
.fp-year-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fp-custom-row { display: flex; align-items: center; gap: 6px; }
.fp-custom-row input[type="date"] { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 0.75rem; border: 1px solid var(--border); font-family: inherit; color: var(--text-main); background: var(--bg); outline: none; }
.fp-custom-row input[type="date"]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,71,139,0.1); }
.fp-apply { padding: 7px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer; border: none; background: var(--primary); color: #fff; transition: all 0.2s; font-family: inherit; flex-shrink: 0; }
.fp-apply:hover { filter: brightness(1.1); }

.dash-report-btn { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,71,139,0.25); }
.dash-report-btn:hover { filter: brightness(1.1); }
.quick-stat-vs { font-size: 0.6rem; color: var(--text-light); margin-left: 4px; font-weight: 500; }
.dash-show-more { display: block; width: 100%; padding: 10px; margin-top: 8px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--primary); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; }
.dash-show-more:hover { background: rgba(37,71,139,0.04); }

/* --- KPI SCORECARDS --- */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 768px) { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-kpi-grid { grid-template-columns: 1fr; } }
.dash-kpi { position: relative; overflow: hidden; border-radius: 14px; padding: 22px 24px; background: var(--primary); color: #fff; box-shadow: 0 4px 16px rgba(37,71,139,0.18); }
.dash-kpi-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 8px; }
.dash-kpi-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.dash-kpi-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 20px; }
.dash-kpi-icon { position: absolute; right: -8px; bottom: -10px; font-size: 64px; opacity: 0.08; }
.dash-kpi-accent { border-bottom: 3px solid var(--accent); }
.dash-kpi-change { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; margin-left: 6px; }
.dash-kpi-change.up { background: rgba(16,185,129,0.2); color: #10b981; }
.dash-kpi-change.down { background: rgba(239,68,68,0.2); color: var(--red-500); }
.dash-kpi-change.flat { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
@keyframes countUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.kpi-animated { animation: countUp 0.4s ease-out both; }

/* --- CARDS --- */
.dash-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; }
.dash-grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 900px) { .dash-grid-2, .dash-grid-2-equal { grid-template-columns: 1fr; } }
.dash-card { background: var(--surface, #fff); border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.04); overflow: hidden; }
.dash-card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.dash-card-title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--text-main); }
.dash-card-title .material-symbols-outlined { color: var(--primary); font-size: 20px; }
.dash-card-body { padding: 20px 24px; }
.dash-card-link { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-decoration: none; cursor: pointer; }
.dash-card-link:hover { text-decoration: underline; }

/* --- CHART TOOLBAR --- */
.chart-toolbar { display: flex; gap: 4px; }
.chart-toolbar button { padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-light); transition: all 0.2s; }
.chart-toolbar button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chart-legend { display: flex; gap: 16px; padding: 10px 0 0; font-size: 0.7rem; color: var(--text-light); }
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* --- FUNNEL (Clean inverted triangle via width) --- */
.funnel-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 0; }
.funnel-step {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 16px; height: 40px;
    color: #fff; font-weight: 700; font-size: 0.78rem;
    transition: transform 0.2s, filter 0.2s;
    cursor: default; position: relative; margin: 0 auto;
    border-radius: 4px;
}
.funnel-step:first-child { border-radius: 8px 8px 4px 4px; }
.funnel-step:last-child { border-radius: 4px 4px 8px 8px; }
.funnel-step:hover { transform: scale(1.03); z-index: 1; filter: brightness(1.1); }
.funnel-step-label { white-space: nowrap; }
.funnel-step-value { font-size: 0.95rem; font-weight: 800; white-space: nowrap; }

/* --- QUOTE STATUS LEGEND (replaces jittery pie chart) --- */
.quote-status-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.quote-status-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg); transition: background 0.15s; cursor: default; }
.quote-status-item:hover { background: rgba(37,71,139,0.06); }
.quote-status-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.quote-status-label { flex: 1; font-size: 0.8125rem; font-weight: 600; color: var(--text-main); }
.quote-status-count { font-size: 0.875rem; font-weight: 800; color: var(--text-main); min-width: 28px; text-align: right; }
.quote-status-pct { font-size: 0.72rem; font-weight: 600; color: var(--text-light); min-width: 40px; text-align: right; }
.quote-status-bar { flex: 1; max-width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.quote-status-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

/* --- QUICK STATS --- */
.quick-stat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.quick-stat-row:last-child { border-bottom: none; }
.quick-stat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-stat-label { flex: 1; font-size: 0.7rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; }
.quick-stat-value { font-size: 0.875rem; font-weight: 800; color: var(--text-main); text-align: right; }
.quick-stat-change { font-size: 0.6rem; font-weight: 700; margin-left: 6px; }
.quick-stat-change.up { color: #10b981; }
.quick-stat-change.down { color: var(--red-500); }
.quick-stat-change.flat { color: var(--text-light); }

/* --- LEADERBOARD --- */
.board-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.board-table th { padding: 10px 12px; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); background: var(--bg); border-bottom: 2px solid var(--border); }
.board-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-main); }
.board-table tr:hover { background: rgba(37,71,139,0.02); }
.board-rank { width: 36px; text-align: center; font-weight: 800; font-size: 1rem; }
.board-name { font-weight: 600; }
.board-amount { font-weight: 700; text-align: right; white-space: nowrap; }
.board-count { text-align: center; }
.board-bar-cell { padding: 10px 12px; }
.board-bar { height: 6px; border-radius: 3px; background: var(--primary); transition: width 0.4s ease; }
.tier-badge { font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.tier-vip { background: rgba(139,92,246,0.12); color: var(--purple-500); }
.tier-gold { background: rgba(245,158,11,0.12); color: var(--amber-500); }
.tier-silver { background: rgba(107,114,128,0.12); color: var(--neutral-500); }
.tier-bronze { background: rgba(180,83,9,0.12); color: var(--amber-700); }
.tier-standard { background: rgba(209,213,219,0.3); color: var(--neutral-400); }

/* --- TABLES (Google Charts) --- */
.dash-table-container { min-height: 120px; }
.dash-table-container .google-visualization-table-table { width: 100% !important; font-size: 0.8125rem !important; font-family: var(--font-family, 'Inter', sans-serif) !important; }
.dash-table-container .google-visualization-table-tr-head th { background: var(--bg) !important; font-weight: 700 !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--text-light, #677183) !important; padding: 10px 14px !important; border-bottom: 2px solid var(--border) !important; }
.dash-table-container .google-visualization-table-tr-even, .dash-table-container .google-visualization-table-tr-odd { background: var(--surface, #fff) !important; }
.dash-table-container .google-visualization-table-tr-over { background: rgba(37,71,139,0.04) !important; }
.dash-table-container td { padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; color: var(--text-main, #121417) !important; }

/* --- FOOTER --- */
.dash-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); }
.dash-footer-info { display: flex; align-items: center; gap: 12px; }
.dash-footer-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(37,71,139,0.08); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.dash-footer-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); }
.dash-footer-time { font-size: 0.75rem; color: var(--text-light); }
.dash-footer-actions { display: flex; gap: 10px; }

/* --- LOADING --- */
.dash-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-light); font-size: 0.875rem; }

.dash-spinner { margin-right: 8px; }

/* --- ORDER PIPELINE --- */
.pipeline-wrap { display: flex; flex-direction: column; gap: 6px; }
.pipeline-stage { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: default; }
.pipeline-stage:hover .pipeline-bar { filter: brightness(1.08); }
.pipeline-label { min-width: 100px; font-size: 0.7rem; font-weight: 600; color: var(--text-main); text-align: right; }
.pipeline-bar-wrap { flex: 1; height: 24px; background: var(--bg); border-radius: 6px; overflow: hidden; position: relative; }
.pipeline-bar { height: 100%; border-radius: 6px; transition: width 0.6s ease; display: flex; align-items: center; justify-content: center; min-width: 28px; }
.pipeline-bar span { font-size: 0.65rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.pipeline-count { min-width: 36px; font-size: 0.75rem; font-weight: 700; color: var(--text-main); }
.pipeline-value { font-size: 0.65rem; color: var(--text-light); min-width: 80px; }
.pipeline-summary { display: flex; gap: 16px; padding: 12px 0 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.pipeline-summary-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.pipeline-summary-val { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
.pipeline-summary-lbl { font-size: 0.625rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 768px) {
    .pipeline-label { min-width: 70px; font-size: 0.6rem; }
    .pipeline-value { display: none; }
}

/* --- CUSTOMER DEBT TABLE --- */
.debt-row-overdue { background: rgba(239,68,68,0.04) !important; }
.debt-amount-danger { color: #dc2626; font-weight: 700; }
.debt-badge-overdue { display: inline-flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(239,68,68,0.1); color: #dc2626; }
/* Quick Stats config panel (floating dropdown) */
.qs-config-wrap { position: relative; }
.qs-config-panel { display:none; position:absolute; top:100%; right:0; z-index:50; background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.12); padding:14px 16px; min-width:260px; max-width:320px; animation: fadeSlide 0.15s ease; }
.qs-config-panel.show { display:block; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.qs-config-panel .qs-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.qs-config-panel .qs-hdr-title { font-size:0.72rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:6px; }
.qs-config-panel .qs-actions { display:flex; gap:4px; }
.qs-config-panel .qs-act-btn { padding:3px 8px; border-radius:6px; font-size:0.6rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-light); transition:all 0.15s; }
.qs-config-panel .qs-act-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.qs-config-panel label { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:0.78rem; font-weight:500; cursor:pointer; border-radius:6px; transition:background 0.15s; color:var(--text-main); }
.qs-config-panel label:hover { background:var(--bg); }
.qs-config-panel input[type="checkbox"] { accent-color:var(--primary); width:15px; height:15px; flex-shrink:0; }
.dash-btn-icon { background:none; border:none; cursor:pointer; color:var(--text-light); padding:4px; border-radius:6px; transition:all 0.15s; }
.dash-btn-icon:hover { background:var(--bg); color:var(--primary); }
/* Pipeline SLA warning */
.sla-warn { color:#dc2626; font-size:0.65rem; font-weight:700; margin-left:4px; }
.sla-note { margin-top:12px; padding:12px; background:var(--bg); border-radius:8px; font-size:0.68rem; color:var(--text-light); line-height:1.7; }
.sla-note b { color:var(--text-main); }
/* Formula section system font fix */
#formula-body code { font-family: inherit; font-size: 0.68rem; font-weight: 700; color: var(--primary); background: rgba(37,71,139,0.06); padding: 1px 5px; border-radius: 4px; }
#formula-body b { color: var(--text-main); }
/* TreeMap tile text wrap */
.treemap-tile { word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
/* Scatter plot styles */
.scatter-wrap { position:relative; width:100%; height:400px; background:var(--bg); border-radius:10px; overflow:visible; padding:30px 10px 0 0; box-sizing:border-box; }
.scatter-grid { position:absolute; top:0; left:40px; right:0; bottom:28px; }
.scatter-gridline { position:absolute; left:52px; right:0; border-top:1px dashed var(--border); }
.scatter-gridline-v { position:absolute; top:0; bottom:0; border-left:1px dashed var(--border); }
.scatter-label-y { position:absolute; left:0; width:50px; font-size:0.56rem; color:var(--text-light); text-align:right; padding-right:6px; transform:translateY(-50%); font-weight:600; }
.scatter-label-x { position:absolute; bottom:0; font-size:0.56rem; color:var(--text-light); text-align:center; transform:translateX(-50%); height:26px; display:flex; align-items:flex-end; font-weight:600; }
.scatter-axis-title { position:absolute; font-size:0.55rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.04em; }
.scatter-dot { position:absolute; border-radius:50%; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.6); }
.scatter-dot:hover { transform:scale(1.25); box-shadow:0 4px 16px rgba(0,0,0,0.25); z-index:10 !important; }
.scatter-tooltip { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:0.68rem; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,0.12); z-index:20; pointer-events:none; }
.scatter-dot:hover .scatter-tooltip { display:block; }

/* --- From: Page_Sales_Lead.html --- */
/* Row Actions - Lead Cơ Hội (inline like Báo giá) */
.lead-act-cell { white-space: nowrap; text-align: right; }
.lead-act-group { display: inline-flex; gap: 2px; align-items: center; }
.lead-act-btn {
    background: none; border: none; cursor: pointer; padding: 4px 5px;
    color: var(--text-light); border-radius: 6px; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.lead-act-btn:hover { background: var(--neutral-100); color: var(--primary); }
.lead-act-btn .material-symbols-outlined { font-size: 18px; }
.lead-act-btn.lead-convert-btn { color: #7C3AED; font-weight: 600; }
.lead-act-btn.lead-convert-btn:hover { background: rgba(124,58,237,0.1); }
.lead-act-btn.lead-delete-btn:hover { color: var(--danger, #EF4444); background: rgba(239,68,68,0.08); }
.lead-converted-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
    background: rgba(5,150,105,0.08); color: #059669;
}

/* --- From: Page_Sales_OrderList.html --- */
.osla-banner { border-radius:12px; border:1px solid var(--border, #333); overflow:hidden; margin-bottom:16px; background:var(--surface, #1a1a2e); }
    .osla-banner-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; cursor:pointer; user-select:none; background:linear-gradient(135deg, rgba(20,184,166,0.06), rgba(99,102,241,0.04)); }
    .osla-banner-hdr:hover { background:linear-gradient(135deg, rgba(20,184,166,0.1), rgba(99,102,241,0.07)); }
    .osla-banner-hdr-left { display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; color:var(--text-main, #e2e8f0); }
    .osla-banner-hdr-left .osla-count { background:#dc2626; color:#fff; font-size:0.65rem; font-weight:800; padding:2px 8px; border-radius:10px; }
    .osla-banner-body { transition:max-height 300ms ease; overflow:hidden; }
    .osla-sec { border-top:1px solid var(--border, #2d2d44); }
    .osla-sec-hdr { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; cursor:pointer; font-size:0.8125rem; font-weight:600; color:var(--text-main, #e2e8f0); user-select:none; }
    .osla-sec-hdr:hover { background:rgba(255,255,255,0.03); }
    .osla-sec-body { max-height:0; overflow:hidden; transition:max-height 250ms ease; }
    .osla-sec-body.open { max-height:400px; overflow-y:auto; }
    .osla-card { display:flex; align-items:center; gap:10px; padding:8px 18px; border-left:3px solid transparent; font-size:0.8rem; }
    .osla-card.normal { border-left-color:#4CAF50; }
    .osla-card.warning { border-left-color:#FF9800; background:rgba(255,152,0,0.04); }
    .osla-card.expired { border-left-color:#F44336; background:rgba(244,67,54,0.04); }
    .osla-card-ma { font-weight:700; color:var(--primary, #6366f1); cursor:pointer; min-width:100px; }
    .osla-card-ma:hover { text-decoration:underline; }
    .osla-card-info { flex:1; color:var(--text-light, #94a3b8); }
    .osla-card-days { font-size:0.7rem; font-weight:700; min-width:80px; text-align:right; }
    .osla-card-days.warning { color:#FF9800; }
    .osla-card-days.expired { color:#F44336; }
    .osla-card-days.normal { color:#4CAF50; }
    /* --- INLINE SLA BADGE (in table rows) --- */
    .osla-inline { display:inline-flex; align-items:center; gap:3px; font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:8px; white-space:nowrap; margin-top:4px; vertical-align:middle; }
    .osla-inline.normal { background:rgba(34,197,94,0.1); color:#16a34a; }
    .osla-inline.warning { background:rgba(245,158,11,0.1); color:#d97706; animation:pulse-warn 2s ease-in-out infinite; }
    .osla-inline.expired { background:rgba(239,68,68,0.1); color:#dc2626; }
    @keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:0.7} }
    @media (max-width:768px) {
      .osla-card { flex-wrap:wrap; gap:6px; }
      .osla-card-ma { min-width:80px; }
      .osla-card-days { min-width:60px; }
      .osla-inline { display:inline-flex; }
    }

/* --- From: Page_Sales_Quote_List.html --- */
/* --- QUOTE EXPIRY BADGES --- */
.expiry-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:10px; white-space:nowrap; }
.expiry-active { background:rgba(34,197,94,0.1); color:#16a34a; }
.expiry-warning { background:rgba(245,158,11,0.1); color:#d97706; animation:pulse-warn 2s ease-in-out infinite; }
.expiry-expired { background:rgba(239,68,68,0.1); color:#dc2626; }
@keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:0.7} }

/* --- P3a: KH COLUMN WRAP --- */
td[data-col="ten_khach_hang_cache"] { max-width:200px; white-space:normal !important; word-break:break-word; overflow-wrap:break-word; }

/* --- STICKY HIGHLIGHT: persists until user clicks anywhere --- */
@keyframes sticky-pulse { 0%,100%{background:rgba(99,102,241,0.07)} 50%{background:rgba(99,102,241,0.13)} }
tr.row-sticky-highlight { animation:sticky-pulse 2s ease-in-out infinite; border-left:4px solid var(--primary,#6366f1); position:relative; }
tr.row-sticky-highlight td:first-child { padding-left:8px; }

/* --- P2: OVERFLOW ACTION MENU (teleported to body to escape sticky stacking context) --- */
.act-overflow { position:relative; display:inline-flex; }
.act-overflow-trigger { cursor:pointer; padding:4px; border-radius:var(--radius-sm,4px); border:none; background:none; color:var(--text-light); }
.act-overflow-trigger:hover { background:var(--neutral-100,#f3f4f6); color:var(--text-main); }
.act-overflow-src { display:none; } /* hidden source, content teleported to body */
#act-overflow-portal { display:none; position:fixed; z-index:99999; background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-md,8px); box-shadow:0 8px 30px rgba(0,0,0,0.18); min-width:170px; padding:4px; }
#act-overflow-portal.open { display:block; }
#act-overflow-portal .act-overflow-item { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:0.78rem; cursor:pointer; border-radius:var(--radius-sm,4px); white-space:nowrap; border:none; background:none; width:100%; color:var(--text-main); text-align:left; }
#act-overflow-portal .act-overflow-item:hover { background:var(--neutral-50,#f9fafb); }
#act-overflow-portal .act-overflow-item .material-symbols-outlined { font-size:16px; }

/* --- EXPIRY ALERT BANNER --- */
.quote-expiry-alerts { margin-bottom:16px; border-radius:12px; border:1px solid rgba(245,158,11,0.3); background:linear-gradient(135deg,rgba(245,158,11,0.04),rgba(239,68,68,0.04)); overflow:hidden; }
.expiry-alert-header { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; cursor:pointer; user-select:none; }
.expiry-alert-header:hover { background:rgba(245,158,11,0.06); }
.expiry-alert-title { display:flex; align-items:center; gap:8px; font-size:0.8125rem; font-weight:700; color:var(--text-main); }
.expiry-alert-count { background:#dc2626; color:#fff; font-size:0.65rem; font-weight:800; padding:2px 8px; border-radius:10px; }
.expiry-alert-body { padding:0 18px 14px; display:none; }
.expiry-alert-body.open { display:block; }
.expiry-alert-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.8125rem; }
.expiry-alert-item:last-child { border-bottom:none; }
.expiry-alert-icon { font-size:18px; flex-shrink:0; }
.expiry-alert-info { flex:1; }
.expiry-alert-code { font-weight:700; color:var(--primary); cursor:pointer; }
.expiry-alert-code:hover { text-decoration:underline; }
.expiry-alert-days { font-size:0.7rem; font-weight:700; min-width:70px; text-align:right; }
/* --- SLA BANNER ACCORDION --- */
/* ===== SLA CHIPS (v2 — compact summary) ===== */
.sla-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.sla-chip {
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
    border-radius:10px; border:1px solid var(--border, #333);
    background:var(--surface, #1a1a2e); cursor:pointer; user-select:none;
    font-size:0.8rem; font-weight:600; color:var(--text-main, #e2e8f0);
    transition:all 0.2s ease; position:relative;
}
.sla-chip:hover { border-color:var(--primary, #6366f1); background:rgba(99,102,241,0.08); transform:translateY(-1px); }
.sla-chip.active { border-color:var(--primary, #6366f1); background:rgba(99,102,241,0.12); box-shadow:0 2px 8px rgba(99,102,241,0.2); }
.sla-chip-icon { font-size:1rem; }
.sla-chip-count {
    background:#dc2626; color:#fff; font-size:0.65rem; font-weight:800;
    min-width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    border-radius:9px; padding:0 5px;
}
.sla-chip-count.zero { background:var(--text-light, #64748b); opacity:0.5; }
.sla-chip-count.warn { background:#f59e0b; }
@media (max-width:640px) {
    .sla-chips { gap:6px; }
    .sla-chip { padding:6px 10px; font-size:0.75rem; }
}
/* --- CUSTOMER FEEDBACK BADGES --- */
.kq-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.kq-badge.kq-tracking { background:rgba(59,130,246,0.12); color:#2563eb; }
.kq-badge.kq-considering { background:rgba(245,158,11,0.12); color:#d97706; }
.kq-badge.kq-revision { background:rgba(249,115,22,0.12); color:#ea580c; }
.kq-badge.kq-rejected { background:rgba(239,68,68,0.12); color:#dc2626; }
.kq-badge.kq-replaced { background:rgba(107,114,128,0.12); color:#6b7280; }
/* --- FEEDBACK MODAL --- */
.fb-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10002; align-items:center; justify-content:center; }
.fb-modal-overlay.open { display:flex; }
.fb-modal { background:var(--surface); border-radius:16px; padding:28px 32px; max-width:520px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.fb-radio-group { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.fb-radio-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all 0.15s; }
.fb-radio-item:hover { border-color:var(--primary); background:rgba(99,102,241,0.04); }
.fb-radio-item input[type=radio] { accent-color:var(--primary); }
.fb-radio-item label { cursor:pointer; font-size:0.8125rem; flex:1; }
.fb-form-section { display:none; margin-top:14px; }
.fb-form-section.active { display:block; }
.fb-textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:var(--font-main); font-size:0.8125rem; resize:vertical; box-sizing:border-box; min-height:60px; }
.fb-select { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:var(--font-main); font-size:0.8125rem; box-sizing:border-box; }
.fb-revision-opts { display:flex; gap:10px; margin-top:10px; }
.fb-revision-opts label { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:0.8rem; flex:1; text-align:center; justify-content:center; }
.fb-revision-opts label:hover { border-color:var(--primary); }
.fb-actions { display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }
.fb-btn { padding:10px 22px; border-radius:8px; cursor:pointer; font-family:var(--font-main); font-size:0.8125rem; font-weight:600; border:none; }
.fb-btn-cancel { background:var(--surface); border:1px solid var(--border) !important; color:var(--text-main); }
.fb-btn-save { background:var(--primary, #6366f1); color:#fff; }
.fb-btn-save:disabled { opacity:0.5; cursor:not-allowed; }
/* Feedback action button */
.act-btn.fb-act-btn { color:#8b5cf6; }

/* --- From: Popup_Approval_Review.html --- */
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Approval Overlay ===== */
.appr-overlay {
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.55);z-index:10002;align-items:center;justify-content:center;
    animation:appr-fadeIn 0.2s ease;
}
.appr-overlay.open { display:flex; }
@keyframes appr-fadeIn { from{opacity:0} to{opacity:1} }
@keyframes appr-slideUp { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===== Modal Shell ===== */
.appr-modal {
    background:var(--surface);border-radius:20px;width:94%;max-width:1100px;max-height:90vh;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,0.3);animation:appr-slideUp 0.25s ease;
}

/* ===== Header ===== */
.appr-header {
    background:var(--gradient-primary);color:#fff;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between;
}
.appr-header-left { display:flex;align-items:center;gap:12px; }
.appr-header-left .material-symbols-outlined { font-size:1.5rem; }
.appr-header h2 { margin:0;font-size:1.1rem;font-weight:800;letter-spacing:0.02em; }
.appr-header .appr-code { font-size:0.8125rem;opacity:0.85;font-weight:600; }
.appr-close { background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;padding:4px;border-radius:8px;transition:all 0.15s; }
.appr-close:hover { color:#fff;background:rgba(255,255,255,0.15); }

/* ===== Status Badge ===== */
.appr-status {
    display:inline-flex;align-items:center;gap:4px;padding:4px 12px;
    border-radius:20px;font-size:0.6875rem;font-weight:700;
    background:rgba(255,255,255,0.2);color:#fff;
}

/* ===== Body ===== */
.appr-body { padding:24px 28px;overflow-y:auto;flex:1; }

/* Info Grid */
.appr-info-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;
}
.appr-info-card {
    background:var(--bg,#f6f7f8);border-radius:12px;padding:14px 18px;
    border:1px solid var(--border);
}
.appr-info-label {
    font-size:0.625rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;color:var(--text-light,#677183);margin-bottom:6px;
}
.appr-info-value {
    font-size:0.875rem;font-weight:700;color:var(--text-main,#121417);
    word-break:break-word;
}
.appr-info-sub { font-size:0.75rem;color:var(--text-light);margin-top:2px; }

/* ===== ★ Customer YTD Section ===== */
.appr-ytd-card {
    background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;
    border-radius:12px;padding:16px 20px;margin-bottom:20px;
}
.appr-ytd-title {
    font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:#166534;margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.appr-ytd-grid {
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.appr-ytd-item { text-align:center; }
.appr-ytd-item .ytd-label { font-size:0.625rem;color:#4b5563;font-weight:600;text-transform:uppercase;letter-spacing:0.05em; }
.appr-ytd-item .ytd-val { font-size:1rem;font-weight:800;color:#121417;margin-top:2px; }
.appr-ytd-item .ytd-sub { font-size:0.6875rem;color:#6b7280;margin-top:1px; }
.appr-ytd-summary {
    margin-top:10px;padding-top:10px;border-top:1px solid #bbf7d0;
    display:flex;justify-content:space-between;align-items:center;
}
.appr-ytd-summary .ytd-total-label { font-size:0.75rem;font-weight:700;color:#166534; }
.appr-ytd-summary .ytd-total-val { font-size:1.05rem;font-weight:800;color:#166534; }

/* ===== Product Table ===== */
.appr-table-wrap {
    border:1px solid var(--border);border-radius:12px;overflow-x:auto;margin-bottom:20px;
}

.appr-table-title {
    display:flex;align-items:center;gap:8px;padding:12px 18px;
    background:var(--bg,#f6f7f8);border-bottom:1px solid var(--border);
    font-size:0.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.06em;color:var(--text-light);
}
.appr-table {
    width:100%;border-collapse:collapse;font-size:0.8125rem;table-layout:auto;
}
.appr-table th {
    padding:8px 10px;text-align:left;font-size:0.6875rem;font-weight:700;
    text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);
    background:var(--bg,#f6f7f8);border-bottom:1px solid var(--border);
    white-space:normal;word-break:keep-all;
}

.appr-table td {
    padding:8px 10px;border-bottom:1px solid var(--border);
    color:var(--text-main);vertical-align:middle;
}
.appr-table tr:last-child td { border-bottom:none; }
.appr-table .th-r, .appr-table .td-r { text-align:right; }
.appr-table .td-name { font-weight:600;word-break:break-word;line-height:1.35; }
.appr-table .td-sku { font-size:0.6875rem;color:var(--text-light);font-family:monospace;white-space:nowrap; }
.appr-table .td-code { font-size:0.6875rem;color:var(--text-light); }

/* ★ NCC Sub-row */
.appr-ncc-row td {
    padding:6px 14px 10px;border-bottom:1px solid var(--border);
    font-size:0.7rem;
}
.appr-ncc-row.ncc-profit td { background:#f0fdf4; }
.appr-ncc-row.ncc-loss td { background:#fef2f2; }
.appr-ncc-row.ncc-none td { background:#f9fafb; }
details.appr-formula-section summary::-webkit-details-marker { display:none; }
details.appr-formula-section[open] .appr-toggle-icon { transform:rotate(90deg); }
.appr-ncc-info {
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.appr-ncc-tag {
    display:inline-flex;align-items:center;gap:4px;font-weight:600;
}
.appr-ncc-tag .ncc-label { color:#6b7280; }
.appr-ncc-tag .ncc-val { color:#121417; }
.appr-ncc-tag .ncc-name { color:#6b7280;font-weight:400; }
.appr-rank-badge {
    display:inline-flex;align-items:center;gap:3px;padding:2px 10px;
    border-radius:12px;font-weight:700;font-size:0.6875rem;
}
.rank-good { background:#dcfce7;color:#166534; }
.rank-mid { background:#fef9c3;color:#854d0e; }
.rank-bad { background:#fee2e2;color:#991b1b; }
.profit-tag {
    font-weight:700;font-size:0.7rem;
}
.profit-tag.profit-pos { color:#16a34a; }
.profit-tag.profit-neg { color:#dc2626; }

/* ===== Summary ===== */
.appr-summary {
    background:var(--bg,#f6f7f8);border-radius:12px;padding:16px 20px;
    border:1px solid var(--border);margin-bottom:4px;
}
.appr-sum-row {
    display:flex;justify-content:space-between;align-items:center;
    padding:4px 0;font-size:0.8125rem;color:var(--text-light);
}
.appr-sum-row.total {
    border-top:2px solid var(--primary);margin-top:8px;padding-top:12px;
    font-size:1rem;font-weight:800;color:var(--primary);
}
.appr-sum-row .val { font-weight:700;color:var(--text-main); }
.appr-sum-row.total .val { color:var(--primary);font-size:1.1rem; }

/* ===== ★ Profit Analysis Section ===== */
.appr-profit-card {
    background:linear-gradient(135deg,#eff6ff,#f0f9ff);border:1px solid #bfdbfe;
    border-radius:12px;padding:16px 20px;margin-top:16px;margin-bottom:4px;
}
.appr-profit-title {
    font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:#1e40af;margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.appr-profit-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;
}
.appr-profit-row {
    display:flex;justify-content:space-between;align-items:center;
    padding:3px 0;font-size:0.8125rem;
}
.appr-profit-row .pl-label { color:#6b7280; }
.appr-profit-row .pl-val { font-weight:700;color:#121417; }
.appr-profit-main {
    grid-column:1/-1;border-top:1px solid #bfdbfe;margin-top:6px;padding-top:10px;
    display:flex;justify-content:space-between;align-items:center;
}
.appr-profit-badge {
    padding:4px 14px;border-radius:20px;font-weight:700;font-size:0.8125rem;
}
.profit-badge-green { background:#dcfce7;color:#166534; }
.profit-badge-yellow { background:#fef9c3;color:#854d0e; }
.profit-badge-red { background:#fee2e2;color:#991b1b; }
.appr-profit-warning {
    margin-top:10px;padding:8px 12px;border-radius:8px;
    background:#fef3c7;border:1px solid #fcd34d;
    font-size:0.75rem;color:#854d0e;font-weight:600;
    display:flex;align-items:center;gap:6px;
}

/* ===== Footer Actions ===== */
.appr-footer {
    padding:16px 28px;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--surface);
}
.appr-btn {
    padding:11px 28px;border-radius:10px;font-weight:700;font-size:0.875rem;
    cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-main);transition:all 0.15s;
}
.appr-btn-approve { background:var(--green-600);color:#fff; }
.appr-btn-approve:hover { background:#15803D;box-shadow:0 4px 16px rgba(22,163,74,0.3); }
.appr-btn-reject { background:var(--red-600);color:#fff; }
.appr-btn-reject:hover { background:var(--red-700);box-shadow:0 4px 16px rgba(220,38,38,0.3); }
.appr-btn-cancel { background:var(--bg,#f1f2f4);color:var(--text-main);border:1px solid var(--border); }
.appr-btn-cancel:hover { background:var(--border); }
.appr-btn .material-symbols-outlined { font-size:1.1rem; }

/* ===== Approve Sub-modal ===== */
.appr-approve-panel {
    display:none;background:var(--surface);border-radius:16px;
    padding:24px 28px;max-width:480px;width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:appr-slideUp 0.2s ease;
}
.appr-approve-panel.open { display:block; }
.appr-approve-info {
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    background:var(--green-bg);border:1px solid #BBF7D0;border-radius:10px;
    margin-bottom:16px;font-size:0.8125rem;color:#166534;font-weight:600;
}
.appr-approve-chip {
    padding:6px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;
    background:var(--bg,#f1f2f4);border:1px solid var(--border);
    color:var(--text-main);cursor:pointer;transition:all 0.15s;
}
.appr-approve-chip:hover { background:var(--green-600);color:#fff;border-color:var(--green-600); }
.appr-approve-chip.active { background:var(--green-600);color:#fff;border-color:var(--green-600); }

/* ===== Reject Sub-modal ===== */
.appr-reject-panel {
    display:none;background:var(--surface);border-radius:16px;
    padding:24px 28px;max-width:480px;width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:appr-slideUp 0.2s ease;
}
.appr-reject-panel.open { display:block; }
.appr-reject-warn {
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    background:var(--red-bg);border:1px solid var(--red-border);border-radius:10px;
    margin-bottom:16px;font-size:0.8125rem;color:var(--red-700);font-weight:600;
}
.appr-chips { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.appr-chip {
    padding:6px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;
    background:var(--bg,#f1f2f4);border:1px solid var(--border);
    color:var(--text-main);cursor:pointer;transition:all 0.15s;
}
.appr-chip:hover { background:var(--red-600);color:#fff;border-color:var(--red-600); }
.appr-chip.active { background:var(--red-600);color:#fff;border-color:var(--red-600); }
.appr-reject-ta {
    width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
    font-family:var(--font-main);font-size:0.875rem;resize:vertical;
    box-sizing:border-box;min-height:80px;
}

/* ===== Responsive ===== */
@media(max-width:640px) {
    .appr-info-grid { grid-template-columns:1fr; }
    .appr-ytd-grid { grid-template-columns:1fr; }
    .appr-profit-grid { grid-template-columns:1fr; }
    .appr-footer { flex-direction:column; }
    .appr-footer .appr-btn { width:100%;justify-content:center; }
}

/* --- From: Popup_CRM_BAO_GIA.html --- */
/* ===== QUOTE POPUP STYLES ===== */
.quote-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
    padding: 24px;
    box-sizing: border-box;
}
.quote-popup-overlay.active { opacity: 1; }
.quote-popup-card {
    background: var(--surface, #fff); width: min(100%, 1040px); max-width: 1040px;
    max-height: 92vh; border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column;
    transform: translateY(20px) scale(0.98); transition: transform 0.3s;
    position: relative; overflow: hidden;
}
.quote-popup-overlay.active .quote-popup-card { transform: translateY(0) scale(1); }
.quote-popup-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 28px 16px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); border-radius: 16px 16px 0 0;
}
.quote-popup-hdr h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 2px; }
.quote-popup-hdr p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; }
.qp-close-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: none;
    color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s;
}
.qp-close-btn:hover { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.quote-popup-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 28px; min-width: 0; width: 100%; box-sizing: border-box; }
.quote-popup-footer {
    display: flex; justify-content: flex-end; gap: 12px;
    padding: 16px 28px; border-top: 1px solid var(--border);
}

/* Form grid */
.qp-form-grid { display: flex; flex-wrap: wrap; gap: 16px; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; }
form.qp-form-grid { overflow-x: hidden; overflow-y: visible; } /* clip horizontal, allow dropdowns */
.qp-col-3 { flex: 0 0 calc(25% - 12px); min-width: 160px; }
.qp-col-4 { flex: 0 0 calc(33.33% - 11px); min-width: 180px; }
.qp-col-6 { flex: 0 0 calc(50% - 8px); min-width: 220px; }
.qp-col-12 { flex: 0 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.qp-section-title { flex: 0 0 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.qp-section-card { flex: 0 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: visible; }
.qp-divider { flex: 0 0 100%; min-width: 0; max-width: 100%; }
.qp-label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--primary); margin-bottom: 6px; }
.qp-label .req { color: var(--danger); }
.qp-input {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; color: var(--text-main);
    font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box; background: var(--surface, #fff);
}
.qp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.qp-input[readonly], .qp-input[disabled] { background: var(--neutral-100); color: var(--text-light); cursor: not-allowed; }
.qp-divider { flex: 0 0 100%; height: 1px; background: var(--border); margin: 4px 0; }

/* Section headers */
.qp-section-title {
    flex: 0 0 100%; display: flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 700; color: var(--primary);
    margin: 8px 0 0; text-transform: uppercase; letter-spacing: 0.5px;
}
.qp-section-title span { font-size: 18px; }
/* Section card wrapper */
.qp-section-card {
    flex: 0 0 100%; background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; margin: 4px 0;
}
.qp-section-card .qp-form-grid { gap: 14px; }

/* Status badge (read-only) */
.qp-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 20px; font-size: 0.8125rem; font-weight: 600;
}
.qp-status-badge.st-cho-duyet { background: var(--warning-bg); color: var(--amber-700); }
.qp-status-badge.st-da-duyet { background: var(--success-bg); color: var(--green-700); }
.qp-status-badge.st-tu-choi { background: var(--danger-bg); color: var(--red-700); }

/* Searchable dropdown */
.qp-search-select { position: relative; }
.qp-search-input {
    width: 100%; padding: 9px 36px 9px 12px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; color: var(--text-main);
    font-family: var(--font-main); box-sizing: border-box; background: var(--surface, #fff);
}
.qp-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.qp-search-icon {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--text-light); pointer-events: none;
}
.qp-dropdown-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface, #fff); border: 1.5px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 220px; overflow-y: auto; z-index: 1000; display: none;
}
.qp-dropdown-list.open { display: block; }
.qp-drop-item {
    padding: 10px 14px; font-size: 0.8125rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
}
.qp-drop-item:hover { background: var(--bg); }
.qp-drop-item.create-new {
    color: var(--primary); font-weight: 600;
    border-top: 1px solid var(--border); position: sticky; bottom: 0;
    background: var(--surface, #fff);
}
.qp-drop-item.create-new span { font-size: 18px; }

/* Product table */
.qp-product-hdr {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
    flex-wrap: wrap; gap: 8px; max-width: 100%; box-sizing: border-box;
}
.qp-product-btn-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qp-product-hdr label { font-weight: 700; font-size: 0.8125rem; color: var(--text-main); }
.qp-btn-add-row {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border: 1.5px dashed var(--primary); border-radius: 8px;
    background: transparent; color: var(--primary); font-size: 0.75rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.qp-btn-add-row:hover { background: rgba(37,71,139,0.06); }
.qp-btn-add-row span { font-size: 16px; }
.qp-product-wrap {
    background: var(--bg); border-radius: 8px;
    border: 1px solid var(--border); overflow-x: auto;
    min-height: 280px; max-width: 100%; box-sizing: border-box;
    /* ★ Always show scrollbar so user knows table is scrollable */
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
}
.qp-product-wrap::-webkit-scrollbar { height: 8px; }
.qp-product-wrap::-webkit-scrollbar-track { background: transparent; }
.qp-product-wrap::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }
.qp-product-wrap::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
/* Star Rating */
.qp-star-rating { display: flex; gap: 4px; align-items: center; }
.qp-star-rating .qp-star {
    font-size: 22px; cursor: pointer; color: var(--neutral-300); transition: color 0.15s;
    background: none; border: none; padding: 0; line-height: 1;
}
.qp-star-rating .qp-star.active { color: var(--secondary); }
.qp-star-rating .qp-star:hover { color: var(--secondary); }
.qp-star-label { font-size: 0.6875rem; color: var(--text-light); margin-left: 8px; font-weight: 500; }
.qp-product-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qp-product-table thead { background: var(--neutral-100); }
.qp-product-table thead th {
    padding: 10px 8px; font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--secondary); text-align: left; white-space: normal; word-break: break-word;
}
.qp-product-table thead th.qp-th-r { text-align: right; }
.qp-product-table thead th.qp-th-c { text-align: center; }
.qp-product-table tbody td { padding: 8px 8px; font-size: 0.8125rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
/* Product image thumbnail */
.qp-prod-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); background: var(--bg); cursor: pointer; transition: transform 0.2s; }
.qp-prod-thumb:hover { transform: scale(2.5); z-index: 10; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.qp-prod-thumb-empty { width: 36px; height: 36px; border-radius: 6px; border: 1px dashed var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 18px; }
.qp-drop-thumb { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.qp-grid-input {
    width: 100%; padding: 5px 6px; border: 1px solid transparent; background: transparent;
    font-size: 0.8125rem; border-radius: 6px; color: var(--text-main);
    transition: border-color 0.2s; box-sizing: border-box;
}
.qp-grid-input:focus { outline: none; border-color: var(--primary); }
.qp-grid-num { text-align: right; font-family: var(--font-main); font-weight: 600; min-width: 80px; }
.qp-uom { font-size: 0.75rem; color: var(--secondary); text-align: center; }
.qp-row-total { text-align: right; font-family: var(--font-main); font-weight: 700; color: var(--primary); white-space: nowrap; }
/* Product name column — scoped to product table only */
.qp-search-select { position: relative; }
.qp-product-table .qp-search-select { min-width: 140px; max-width: 220px; }
.qp-search-select .qp-prod-search {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qp-prod-name-display {
    padding: 4px 6px; font-size: 0.8125rem; color: var(--text-main);
    word-wrap: break-word; overflow-wrap: break-word; white-space: normal;
    line-height: 1.4; cursor: pointer; border-radius: 6px;
    border: 1px solid transparent; transition: background 0.2s;
    min-height: 28px;
}
.qp-prod-name-display:hover { background: var(--blue-bg); border-color: var(--border); }
.qp-btn-del {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; background: transparent; border: none;
    color: var(--text-light); cursor: pointer; transition: all 0.2s;
}
.qp-btn-del:hover { background: var(--danger-bg); color: var(--red-500); }
.qp-btn-del span { font-size: 18px; }
.qp-product-empty {
    padding: 32px; text-align: center; color: var(--text-light);
    font-size: 0.8125rem; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.qp-product-empty .material-symbols-outlined { font-size: 40px; opacity: 0.3; }
/* Product name wrap */
.qp-product-table .qp-prod-search { white-space: normal; word-wrap: break-word; word-break: break-word; }
.qp-product-table td { vertical-align: top; padding-top: 10px; }
.qp-product-table .qp-search-select { min-width: 160px !important; }
/* Responsive table: let product name column stretch */
.qp-product-table { table-layout: auto; }
.qp-product-table td:nth-child(3) { max-width: 220px; }
.qp-product-table .qp-grid-num { min-width: 80px; }

/* Money input with VND label */
.qp-money-wrap { position: relative; }
.qp-money-wrap .qp-input { padding-right: 52px; }
.qp-currency {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 0.6875rem; font-weight: 700; color: var(--text-light);
    pointer-events: none; letter-spacing: 0.5px;
}
.qp-highlight .qp-label { color: var(--primary); }
.qp-highlight .qp-input { background: var(--blue-bg); border-color: rgba(37,71,139,0.3); color: var(--primary); font-weight: 700; }

/* Footer buttons */
.qp-btn-cancel {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    background: transparent; border: none; color: var(--text-light); cursor: pointer; transition: all 0.2s;
}
.qp-btn-cancel:hover { background: var(--bg); color: var(--text-main); }
.qp-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.qp-btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }
.qp-btn-save span { font-size: 18px; }

/* ===== SUB-POPUP (Customer / Product) ===== */
.sub-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.sub-popup-card {
    background: var(--surface, #fff); width: 92vw; max-width: 720px;
    max-height: 85vh; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column;
}
.sub-popup-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px 14px; border-bottom: 1px solid var(--border);
}
.sub-popup-hdr h4 { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0; }
.sub-popup-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.sub-popup-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border);
}
.sub-form-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.sub-col-6 { flex: 0 0 calc(50% - 7px); min-width: 200px; }
.sub-col-12 { flex: 0 0 100%; }

/* Custom field button */
.qp-btn-add-field {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: 1.5px dashed var(--secondary);
    border-radius: 8px; background: transparent; color: var(--secondary);
    font-size: 0.75rem; font-weight: 600; cursor: pointer; margin-top: 12px;
    transition: all 0.2s;
}
.qp-btn-add-field:hover { border-color: var(--primary); color: var(--primary); }
.qp-btn-add-field span { font-size: 16px; }

/* ===== IMPORT EXCEL OVERLAY ===== */
.qp-btn-import-excel {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border: 1.5px solid var(--success-border, #34a853);
    border-radius: 8px; background: linear-gradient(135deg, rgba(52,168,83,0.08), rgba(52,168,83,0.02));
    color: var(--green-700, #137333); font-size: 0.75rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.qp-btn-import-excel:hover { background: rgba(52,168,83,0.15); box-shadow: 0 2px 8px rgba(52,168,83,0.2); }
.qp-btn-import-excel span { font-size: 16px; }
.qp-import-overlay {
    position: fixed; left: 0; right: 0; bottom: 0; top: 0;
    background: rgba(0,0,0,0.45); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px); animation: qpImpFadeIn 0.2s;
}
@keyframes qpImpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.qp-import-panel {
    background: var(--surface, #fff); width: 94%; max-width: 720px;
    max-height: 80vh; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; overflow: hidden;
    animation: qpImpSlideUp 0.25s ease-out;
}
@keyframes qpImpSlideUp { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.qp-import-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(52,168,83,0.06), transparent);
}
.qp-import-header h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.qp-import-header .qp-imp-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-light); padding: 4px; border-radius: 6px; }
.qp-import-header .qp-imp-close:hover { background: var(--neutral-100); }
.qp-import-body { flex: 1; overflow-y: auto; padding: 20px; }
.qp-import-dropzone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 40px 20px; text-align: center; cursor: pointer;
    transition: all 0.2s; background: var(--bg);
}
.qp-import-dropzone:hover, .qp-import-dropzone.dragover {
    border-color: var(--green-700, #137333); background: rgba(52,168,83,0.04);
}
.qp-import-dropzone .material-symbols-outlined { font-size: 40px; color: var(--green-700, #137333); display: block; margin-bottom: 8px; }
.qp-import-dropzone p { margin: 4px 0; font-size: 0.8125rem; color: var(--text-light); }
.qp-import-dropzone .browse-link { color: var(--primary); cursor: pointer; text-decoration: underline; font-weight: 600; }
.qp-import-dropzone .hint { font-size: 0.6875rem; color: var(--neutral-400); margin-top: 8px; }
.qp-import-loading { text-align: center; padding: 40px 20px; }
.qp-import-loading .material-symbols-outlined { font-size: 36px; color: var(--primary); }
@keyframes qpSpin { to { transform: rotate(360deg); } }
.qp-import-loading .spin { animation: qpSpin 1s linear infinite; display: inline-block; }
.qp-import-loading p { margin: 8px 0 0; font-size: 0.8125rem; color: var(--text-light); }
.qp-import-summary { font-size: 0.75rem; color: var(--text-light); margin-bottom: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.qp-import-mapping { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.qp-import-mapping label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 4px; }
.qp-import-mapping select { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.8125rem; min-width: 140px; background: var(--surface, #fff); }
.qp-import-preview { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-bottom: 12px; }
.qp-import-preview th { background: var(--neutral-100); padding: 6px 8px; text-align: left; font-weight: 600; color: var(--secondary); font-size: 0.625rem; text-transform: uppercase; }
.qp-import-preview td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.qp-import-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.qp-import-tabs button {
    padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--surface, #fff); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; color: var(--text-light);
}
.qp-import-tabs button.active { border-color: var(--primary); color: var(--primary); background: rgba(37,71,139,0.04); }
.qp-import-tabs button.tab-matched.active { border-color: var(--green-700, #137333); color: var(--green-700); background: rgba(52,168,83,0.06); }
.qp-import-tabs button.tab-suggested.active { border-color: var(--secondary); color: var(--secondary); background: rgba(234,179,8,0.06); }
.qp-import-tabs button.tab-unmatched.active { border-color: var(--danger); color: var(--danger); background: rgba(234,67,53,0.06); }
.qp-import-table-wrap { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.qp-import-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.qp-import-table thead { position: sticky; top: 0; z-index: 1; }
.qp-import-table th { background: var(--neutral-100); padding: 8px; text-align: left; font-weight: 600; font-size: 0.625rem; text-transform: uppercase; color: var(--secondary); }
.qp-import-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.qp-import-table tr:hover { background: var(--bg); }
.qp-import-table .sku-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; font-family: monospace; background: var(--neutral-100); color: var(--primary); }
.qp-import-selectall { padding: 6px 8px; font-size: 0.75rem; }
.qp-import-selectall label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-main); }
.qp-import-hint { font-size: 0.6875rem; color: var(--text-light); padding: 8px 12px; background: rgba(234,179,8,0.08); border-radius: 6px; margin-bottom: 8px; }
.qp-import-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border);
}
.qp-import-footer .qp-btn-cancel { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-light); font-size: 0.8125rem; cursor: pointer; }
.qp-import-footer .qp-btn-import {
    padding: 8px 20px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #34a853, #2d9249); color: #fff;
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.qp-import-footer .qp-btn-import:hover { box-shadow: 0 4px 12px rgba(52,168,83,0.3); }
.qp-import-footer .qp-btn-back { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-main); font-size: 0.8125rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

/* Custom field row */
.custom-field-row {
    display: flex; gap: 10px; align-items: flex-end;
    padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.custom-field-row input { flex: 1; }

/* NCC Price Hint (Phase: Quote NCC Suggest v3) */
.qp-price-cell { position: relative; display: flex; align-items: center; gap: 4px; }
.qp-ncc-hint-btn {
    flex-shrink: 0; width: 26px; height: 26px;
    border: 1.5px solid transparent; border-radius: 50%; background: transparent;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; font-size: 15px; line-height: 1;
}
.qp-ncc-hint-btn:hover { background: #fef3c7; border-color: #f59e0b; transform: scale(1.15); }
.qp-ncc-hint-btn.has-ncc { border-color: #fbbf24; background: #fffbeb; }
.qp-ncc-hint-btn.no-ncc { opacity: 0.3; cursor: default; }
.qp-ncc-hint-btn.no-ncc:hover { background: transparent; border-color: transparent; transform: none; }
.qp-ncc-mini-popup {
    position: fixed; z-index: 99999;
    background: #fff; border: none;
    border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 320px; max-width: 400px; animation: fadeIn 0.18s ease-out;
    overflow: hidden;
}
.qp-ncc-mini-header {
    padding: 12px 16px; font-size: 13px; font-weight: 700;
    color: #1e293b; background: linear-gradient(135deg, #fefce8, #fef3c7);
    border-bottom: 1px solid #fde68a;
    display: flex; align-items: center; gap: 8px;
}
.qp-ncc-mini-header .hdr-icon { font-size: 18px; }
.qp-ncc-mini-header .hdr-title { flex: 1; }
.qp-ncc-mini-header .hdr-count {
    font-size: 10px; background: #f59e0b; color: #fff;
    border-radius: 10px; padding: 2px 8px; font-weight: 600;
}
.qp-ncc-group-label {
    padding: 6px 16px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.qp-ncc-group-label.nk { background: #eff6ff; color: #2563eb; border-top: 2px solid #bfdbfe; }
.qp-ncc-group-label.nd { background: #f0fdf4; color: #16a34a; border-top: 2px solid #bbf7d0; }
.qp-ncc-mini-row {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
    cursor: pointer; transition: all 0.15s ease;
}
.qp-ncc-mini-row:last-child { border-bottom: none; }
.qp-ncc-mini-row:hover { background: #f8fafc; box-shadow: inset 3px 0 0 #3b82f6; }
.qp-ncc-mini-row.preferred { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }
.qp-ncc-mini-name {
    font-size: 12.5px; font-weight: 600; color: #1e293b;
    display: flex; align-items: center; gap: 6px;
}
.qp-ncc-mini-price {
    font-size: 13px; font-weight: 700; color: #0f766e;
    text-align: right; white-space: nowrap;
}
.qp-ncc-mini-detail {
    grid-column: 1 / -1; font-size: 10.5px; color: #64748b;
    display: flex; justify-content: space-between; padding-top: 2px;
}
.qp-ncc-mini-detail .suggest {
    color: #059669; font-weight: 700;
}
.qp-ncc-mini-badge {
    font-size: 9px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
    border-radius: 6px; padding: 2px 6px; font-weight: 700;
    letter-spacing: 0.3px;
}
.qp-ncc-mini-footer {
    padding: 8px 16px; font-size: 10px; color: #94a3b8;
    background: #f8fafc; border-top: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center;
}
/* ===== TOGGLE SECTIONS ===== */
.qp-toggle-section { flex: 0 0 100%; margin: 4px 0; }
.qp-toggle-btn {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 10px 0; border: none; background: none;
    font-size: 0.8125rem; font-weight: 600; color: var(--text-light);
    cursor: pointer; border-top: 1px dashed var(--border);
    font-family: var(--font-main); transition: color 0.2s;
}
.qp-toggle-btn:hover { color: var(--primary); }
.qp-toggle-btn .material-symbols-outlined { font-size: 18px; transition: transform 0.2s; }
.qp-toggle-section.open .qp-toggle-btn .material-symbols-outlined { transform: rotate(180deg); }
.qp-toggle-content { display: none; padding-bottom: 8px; }
.qp-toggle-section.open .qp-toggle-content { display: block; }
/* VAT virtual column */
.qp-vat-cell { text-align: center; }
.qp-vat-select {
    border: 1px solid var(--border); border-radius: 6px;
    background: #f0fdf4; color: #15803d; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.qp-vat-select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.qp-vat-select option[value=""] { color: var(--text-light); background: #fff; font-weight: 400; }
/* VAT amount virtual column */
.qp-vat-amount { text-align: right; font-size: 0.75rem; font-weight: 600; color: #0d9488; white-space: nowrap; }
/* Quick VAT buttons bar */
.qp-vat-quick-bar {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    flex-wrap: wrap; max-width: 100%; box-sizing: border-box;
}
.qp-vat-quick-label {
    font-size: 0.6875rem; font-weight: 600; color: var(--text-light);
    display: flex; align-items: center; gap: 4px;
}
.qp-vat-quick-btn {
    padding: 4px 12px; border-radius: 6px; font-size: 0.6875rem;
    font-weight: 600; cursor: pointer; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-main);
    transition: all 0.2s; font-family: var(--font-main);
    display: inline-flex; align-items: center; gap: 4px;
}
.qp-vat-quick-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.qp-vat-quick-btn.vat-10 { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.qp-vat-quick-btn.vat-10:hover { background: #dbeafe; }
.qp-vat-quick-btn.vat-8 { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.qp-vat-quick-btn.vat-8:hover { background: #dcfce7; }
.qp-vat-quick-btn.vat-clear { background: #fff; color: var(--text-light); }
.qp-vat-quick-btn.vat-clear:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
/* VAT footer breakdown rows */
.qp-vat-footer-row td { font-size: 0.75rem; color: var(--text-secondary); padding: 4px 6px !important; border-top: none !important; }
.qp-vat-footer-row .qp-vat-footer-label { text-align: right; font-weight: 500; }
.qp-vat-footer-row .qp-vat-footer-amount { text-align: right; font-weight: 700; color: #0d9488; }

/* ===== RESPONSIVE: TABLET (≤1024px) ===== */
@media (max-width: 1024px) {
    .quote-popup-card { max-width: 98vw; width: 98vw; }
    .quote-popup-body { padding: 16px 20px; }
    .quote-popup-hdr { padding: 16px 20px 12px; }
    .quote-popup-footer { padding: 12px 20px; }
    .qp-form-grid { gap: 12px; }
    .qp-col-3 { flex: 0 0 calc(50% - 6px); min-width: 140px; }
    .qp-col-4 { flex: 0 0 calc(50% - 6px); min-width: 140px; }
    .qp-section-card { padding: 14px; }
    .sub-popup-card { width: 96vw; max-width: 96vw; }
    .sub-col-6 { min-width: 160px; }
}

/* ===== RESPONSIVE: MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    /* Fullscreen popup */
    .quote-popup-card {
        width: 100vw; max-width: 100vw; max-height: 100vh;
        height: 100vh; border-radius: 0;
    }
    .quote-popup-hdr {
        padding: 12px 16px 10px; border-radius: 0;
    }
    .quote-popup-hdr h3 { font-size: 0.9375rem; }
    .quote-popup-hdr p { display: none; }
    .quote-popup-body { padding: 12px 14px; }
    .quote-popup-footer {
        padding: 10px 14px; flex-wrap: wrap; gap: 8px;
    }
    .qp-btn-save, .qp-btn-cancel { flex: 1; justify-content: center; min-width: 120px; }
    .qp-btn-save { font-size: 0.8125rem; padding: 10px 14px; }

    /* Form columns → full width */
    .qp-form-grid { gap: 10px; }
    .qp-col-3, .qp-col-4, .qp-col-6 {
        flex: 0 0 100% !important; min-width: 0 !important;
    }
    .qp-section-card { padding: 12px; margin: 2px 0; }
    .qp-section-title { font-size: 0.75rem; margin: 4px 0 0; }
    .qp-input { padding: 10px 12px; font-size: 0.875rem; } /* bigger touch targets */
    .qp-label { font-size: 0.625rem; margin-bottom: 4px; }

    /* Product header: stack buttons vertically on very small screens */
    .qp-product-hdr { flex-wrap: wrap; gap: 8px; }
    .qp-product-btn-group { flex-wrap: wrap; gap: 6px; }
    .qp-btn-add-row, .qp-btn-import-excel { font-size: 0.6875rem; padding: 6px 10px; }

    /* Product table → smaller */
    .qp-product-table { min-width: 1100px; font-size: 0.75rem; }
    .qp-product-table thead th { padding: 8px 6px; font-size: 0.5625rem; }
    .qp-product-table tbody td { padding: 6px; }
    .qp-product-wrap { min-height: 180px; }
    .qp-prod-thumb { width: 28px; height: 28px; }
    .qp-prod-thumb-empty { width: 28px; height: 28px; font-size: 14px; }
    .qp-grid-num { min-width: 60px; font-size: 0.75rem; }
    .qp-product-table .qp-search-select { min-width: 120px !important; max-width: 160px; }

    /* Sub-popup → fullscreen */
    .sub-popup-card {
        width: 100vw; max-width: 100vw; max-height: 100vh;
        height: 100vh; border-radius: 0;
    }
    .sub-popup-hdr { padding: 12px 16px 10px; }
    .sub-popup-body { padding: 14px 16px; }
    .sub-col-6 { flex: 0 0 100%; min-width: 0; }

    /* Import overlay */
    .qp-import-panel { width: 98%; max-width: 98vw; max-height: 85vh; border-radius: 10px; }
    .qp-import-header { padding: 12px 14px; }
    .qp-import-header h4 { font-size: 0.8125rem; }
    .qp-import-body { padding: 14px; }
    .qp-import-dropzone { padding: 30px 14px; }
    .qp-import-mapping { flex-direction: column; gap: 10px; }
    .qp-import-mapping select { width: 100%; min-width: 0; }
    .qp-import-footer { padding: 10px 14px; }
    .qp-import-tabs { flex-wrap: wrap; gap: 4px; }
    .qp-import-tabs button { font-size: 0.6875rem; padding: 6px 10px; }

    /* Star rating */
    .qp-star-rating .qp-star { font-size: 18px; }

    /* NCC hint panel */
    .qp-ncc-mini-row { grid-template-columns: 1fr; }
    .qp-ncc-mini-header { font-size: 12px; padding: 10px 12px; }

    /* VAT quick buttons */
    .qp-vat-quick-bar { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
    .qp-vat-quick-btn { font-size: 0.625rem; padding: 4px 8px; }
    .qp-vat-quick-label { font-size: 0.625rem; }
}

/* ===== RESPONSIVE: SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .quote-popup-body { padding: 10px 10px; }
    .qp-product-table { min-width: 580px; }
    .qp-form-grid { gap: 8px; }
    .qp-section-card { padding: 10px; }
    .qp-money-wrap .qp-input { font-size: 0.8125rem; }
}

/* ===== CUSTOMER INFO CARD ===== */
.qp-customer-card {
    flex: 0 0 100%; background: linear-gradient(135deg, rgba(37,71,139,0.04), rgba(37,71,139,0.01));
    border: 1px solid rgba(37,71,139,0.15); border-radius: 10px;
    padding: 12px 16px; margin: 4px 0;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    animation: qpCardSlideIn 0.25s ease-out;
}
@keyframes qpCardSlideIn {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0 16px; margin: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 100px; }
}
.qp-customer-card .qp-cc-label {
    font-size: 0.6875rem; font-weight: 700; color: var(--primary);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.qp-customer-card .qp-cc-field {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; color: var(--text-main);
}
.qp-customer-card .qp-cc-field .qp-cc-val {
    font-weight: 600; color: var(--text-main);
}
.qp-customer-card .qp-cc-divider {
    width: 1px; height: 24px; background: var(--border); flex-shrink: 0;
}
/* ===== COMMISSION DUAL CARDS ===== */
.qp-commission-row {
    flex: 0 0 100%; display: flex; gap: 16px; flex-wrap: wrap;
}
.qp-commission-card {
    flex: 1 1 calc(50% - 8px); min-width: 260px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; background: var(--bg);
}
.qp-commission-card .qp-cc-title {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--secondary); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.qp-commission-card .qp-cc-fields {
    display: flex; gap: 12px;
}
.qp-commission-card .qp-cc-fields > div { flex: 1; }
/* ===== FINANCIAL SUMMARY CARD ===== */
.qp-financial-summary {
    flex: 0 0 100%; border: 1.5px solid var(--border); border-radius: 12px;
    padding: 16px 20px; background: var(--bg); margin: 4px 0;
}
.qp-financial-summary .qp-fs-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 0.8125rem;
}
.qp-financial-summary .qp-fs-row.qp-fs-sub { color: var(--text-secondary); font-size: 0.75rem; padding-left: 12px; }
.qp-financial-summary .qp-fs-row.qp-fs-total {
    border-top: 2px solid var(--primary); margin-top: 6px; padding-top: 10px;
    font-weight: 700; font-size: 0.9375rem; color: var(--primary);
}
.qp-financial-summary .qp-fs-label { color: var(--text-secondary); }
.qp-financial-summary .qp-fs-value { font-weight: 600; font-family: var(--font-main); }
@media (max-width: 768px) {
    .qp-customer-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .qp-customer-card .qp-cc-divider { display: none; }
    .qp-commission-card { flex: 0 0 100%; }
}

/* --- From: Popup_CRM_CO_HOI.html --- */
/* ===== LEAD CƠ HỘI POPUP STYLES ===== */
#popup-crm-co-hoi {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px);
}
#popup-crm-co-hoi.active { opacity: 1; }
#popup-crm-co-hoi.hidden { display: none !important; }
#popup-content-crm-co-hoi {
    background: var(--surface, #fff); width: 94vw; max-width: 680px;
    max-height: 90vh; border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column;
    transform: translateY(20px) scale(0.95); transition: transform 0.3s;
}
#popup-crm-co-hoi.active #popup-content-crm-co-hoi { transform: translateY(0) scale(1); }
.opp-popup-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 28px 16px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); border-radius: 16px 16px 0 0;
}
.opp-popup-hdr h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 2px; }
.opp-popup-hdr p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; }
.opp-close-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: none;
    color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s;
}
.opp-close-btn:hover { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.opp-popup-body { padding: 24px 28px; overflow-y: auto; flex: 1; }
.opp-popup-body .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opp-popup-body .form-full { grid-column: 1 / -1; }
.opp-popup-body label {
    display: block; font-size: 0.7rem; font-weight: 600; color: var(--text-light);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.opp-popup-body label .req { color: var(--danger); }
.opp-popup-body input,
.opp-popup-body select,
.opp-popup-body textarea {
    width: 100%; padding: 10px 14px; font-size: 0.875rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main); outline: none; transition: border 0.2s;
    box-sizing: border-box;
}
.opp-popup-body input:focus,
.opp-popup-body select:focus,
.opp-popup-body textarea:focus { border-color: var(--primary); }
.opp-popup-body textarea { resize: none; }
.opp-popup-body .form-divider { grid-column: 1 / -1; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.opp-popup-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 28px; border-top: 1px solid var(--border);
    background: var(--bg); border-radius: 0 0 16px 16px;
}
.opp-footer-left { display: flex; gap: 8px; }
.opp-footer-right { display: flex; gap: 10px; }
.opp-btn-cancel {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    background: transparent; color: var(--text-light); border: 1px solid var(--border);
    cursor: pointer; transition: all 0.2s;
}
.opp-btn-cancel:hover { background: var(--bg); }
.opp-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: var(--primary); color: #fff; border: none;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.opp-btn-save:hover { filter: brightness(1.1); }
.opp-btn-action {
    padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
}
.opp-btn-convert { background: #059669; color: #fff; }
.opp-btn-convert:hover { filter: brightness(1.1); }
.opp-btn-delete { background: transparent; color: var(--danger, #EF4444); border: 1px solid var(--danger, #EF4444); }
.opp-btn-delete:hover { background: rgba(239,68,68,0.08); }
.opp-converted-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    border-radius: 8px; background: rgba(5,150,105,0.1); color: #059669;
    font-size: 0.8rem; font-weight: 600;
}

/* --- From: Popup_CRM_LEAD.html --- */
/* ===== LEAD POPUP STYLES ===== */
#popup-crm-lead {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px);
}
#popup-crm-lead.active { opacity: 1; }
#popup-crm-lead.hidden { display: none !important; }
#popup-content-crm-lead {
    background: var(--surface, #fff); width: 94vw; max-width: 680px;
    max-height: 90vh; border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column;
    transform: translateY(20px) scale(0.95); transition: transform 0.3s;
}
#popup-crm-lead.active #popup-content-crm-lead { transform: translateY(0) scale(1); }
.lead-popup-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 28px 16px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); border-radius: 16px 16px 0 0;
}
.lead-popup-hdr h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 2px; }
.lead-popup-hdr p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; }
.lead-close-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: none;
    color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s;
}
.lead-close-btn:hover { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.lead-popup-body { padding: 24px 28px; overflow-y: auto; flex: 1; }
.lead-popup-body .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lead-popup-body .form-full { grid-column: 1 / -1; }
.lead-popup-body label {
    display: block; font-size: 0.7rem; font-weight: 600; color: var(--text-light);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.lead-popup-body label .req { color: var(--danger); }
.lead-popup-body input,
.lead-popup-body select,
.lead-popup-body textarea {
    width: 100%; padding: 10px 14px; font-size: 0.875rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main); outline: none; transition: border 0.2s;
    box-sizing: border-box;
}
.lead-popup-body input:focus,
.lead-popup-body select:focus,
.lead-popup-body textarea:focus { border-color: var(--primary); }
.lead-popup-body textarea { resize: none; }
.lead-popup-body .form-divider { grid-column: 1 / -1; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.lead-popup-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 28px; border-top: 1px solid var(--border);
    background: var(--bg); border-radius: 0 0 16px 16px;
}
.lead-footer-left { display: flex; gap: 8px; }
.lead-footer-right { display: flex; gap: 10px; align-items: center; }
.lead-btn-cancel {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    background: transparent; color: var(--text-light); border: 1px solid var(--border);
    cursor: pointer; transition: all 0.2s;
}
.lead-btn-cancel:hover { background: var(--bg); }
.lead-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: var(--primary); color: #fff; border: none;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.lead-btn-save:hover { filter: brightness(1.1); }
.lead-btn-action {
    padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
}
.lead-btn-convert-kh { background: #7C3AED; color: #fff; }
.lead-btn-convert-kh:hover { filter: brightness(1.1); }
.lead-btn-delete { background: transparent; color: var(--danger, #EF4444); border: 1px solid var(--danger, #EF4444); }
.lead-btn-delete:hover { background: rgba(239,68,68,0.08); }

/* --- From: Popup_DON_BAN_HANG.html --- */
/* ===== ORDER POPUP STYLES ===== */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.popup-card {
    background: var(--surface);
    border-radius: 16px;
    width: min(100%, 1040px);
    max-width: 1040px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: scale(1);
    transition: transform 0.25s ease;
}

/* Popup Header */
.popup-hdr {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary);
    border-radius: 16px 16px 0 0;
}
.popup-hdr h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-inverse);
    margin-bottom: 2px;
}
.popup-hdr p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}
.popup-close-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
}
.popup-close-btn:hover { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.popup-close-btn span { font-size: 20px; }

/* Popup Body */
.popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 20px;
}
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
    .col-2, .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; }
}

/* Financial Section Boxes (like BG popup) */
.op-fin-box {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; background: var(--bg);
}
.op-fin-box-title {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--secondary); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.op-fin-row { display: flex; gap: 12px; }
.op-fin-row > div { flex: 1; }
.op-money-wrap { position: relative; }
.op-money-wrap .field-input { padding-right: 40px; }
.op-currency {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.625rem; font-weight: 700; color: var(--text-light);
    letter-spacing: 0.3px;
}

/* Form Fields */
.field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
}
.field-label .required { color: var(--danger); margin-left: 2px; }

.field-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-main);
    font-family: var(--font-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
    background: var(--surface);
}
.field-input[readonly] {
    background: var(--neutral-100);
    color: var(--text-light);
    cursor: default;
}
.field-input.field-money {
    font-family: var(--font-main);
    text-align: right;
    font-weight: 600;
}

/* Section Divider */
.section-divider {
    grid-column: span 12;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

/* Product Grid Section */
.product-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

/* ★ Import Excel button */
.qp-btn-import-excel {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border: 1.5px solid var(--success-border, #34a853);
    border-radius: 8px; background: linear-gradient(135deg, rgba(52,168,83,0.08), rgba(52,168,83,0.02));
    color: var(--green-700, #137333); font-size: 0.75rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.qp-btn-import-excel:hover { background: rgba(52,168,83,0.15); box-shadow: 0 2px 8px rgba(52,168,83,0.2); }
.qp-btn-import-excel span { font-size: 16px; }

/* ★ Import Excel Overlay */
.qp-import-overlay {
    position: fixed; left: 0; right: 0; bottom: 0; top: 0;
    background: rgba(0,0,0,0.45); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px); animation: opImpFadeIn 0.2s;
}
@keyframes opImpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.qp-import-panel {
    background: var(--surface, #fff); width: 94%; max-width: 720px;
    max-height: 80vh; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; overflow: hidden;
    animation: opImpSlideUp 0.25s ease-out;
}
@keyframes opImpSlideUp { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.qp-import-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(52,168,83,0.06), transparent);
}
.qp-import-header h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.qp-import-header .qp-imp-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-light); padding: 4px; border-radius: 6px; }
.qp-import-header .qp-imp-close:hover { background: var(--neutral-100); }
.qp-import-body { flex: 1; overflow-y: auto; padding: 20px; }
.qp-import-dropzone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 40px 20px; text-align: center; cursor: pointer;
    transition: all 0.2s; background: var(--bg);
}
.qp-import-dropzone:hover, .qp-import-dropzone.dragover {
    border-color: var(--green-700, #137333); background: rgba(52,168,83,0.04);
}
.qp-import-dropzone .material-symbols-outlined { font-size: 40px; color: var(--green-700, #137333); display: block; margin-bottom: 8px; }
.qp-import-dropzone p { margin: 4px 0; font-size: 0.8125rem; color: var(--text-light); }
.qp-import-dropzone .browse-link { color: var(--primary); cursor: pointer; text-decoration: underline; font-weight: 600; }
.qp-import-dropzone .hint { font-size: 0.6875rem; color: var(--neutral-400); margin-top: 8px; }
.qp-import-loading { text-align: center; padding: 40px 20px; }
.qp-import-loading .material-symbols-outlined { font-size: 36px; color: var(--primary); }
@keyframes opSpin { to { transform: rotate(360deg); } }
.qp-import-loading .spin { animation: opSpin 1s linear infinite; display: inline-block; }
.qp-import-loading p { margin: 8px 0 0; font-size: 0.8125rem; color: var(--text-light); }
.qp-import-summary { font-size: 0.75rem; color: var(--text-light); margin-bottom: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.qp-import-mapping { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.qp-import-mapping label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 4px; }
.qp-import-mapping select { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.8125rem; min-width: 140px; background: var(--surface, #fff); }
.qp-import-preview { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-bottom: 12px; }
.qp-import-preview th { background: var(--neutral-100); padding: 6px 8px; text-align: left; font-weight: 600; color: var(--secondary); font-size: 0.625rem; text-transform: uppercase; }
.qp-import-preview td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.qp-import-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.qp-import-tabs button {
    padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--surface, #fff); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; color: var(--text-light);
}
.qp-import-tabs button.active { border-color: var(--primary); color: var(--primary); background: rgba(37,71,139,0.04); }
.qp-import-tabs button.tab-matched.active { border-color: var(--green-700, #137333); color: var(--green-700); background: rgba(52,168,83,0.06); }
.qp-import-tabs button.tab-suggested.active { border-color: var(--secondary); color: var(--secondary); background: rgba(234,179,8,0.06); }
.qp-import-tabs button.tab-unmatched.active { border-color: var(--danger); color: var(--danger); background: rgba(234,67,53,0.06); }
.qp-import-table-wrap { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.qp-import-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.qp-import-table thead { position: sticky; top: 0; z-index: 1; }
.qp-import-table th { background: var(--neutral-100); padding: 8px; text-align: left; font-weight: 600; font-size: 0.625rem; text-transform: uppercase; color: var(--secondary); }
.qp-import-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.qp-import-table tr:hover { background: var(--bg); }
.qp-import-table .sku-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; font-family: monospace; background: var(--neutral-100); color: var(--primary); }
.qp-import-selectall { padding: 6px 8px; font-size: 0.75rem; }
.qp-import-selectall label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-main); }
.qp-import-hint { font-size: 0.6875rem; color: var(--text-light); padding: 8px 12px; background: rgba(234,179,8,0.08); border-radius: 6px; margin-bottom: 8px; }
.qp-import-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border);
}
.qp-import-footer .qp-btn-cancel { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-light); font-size: 0.8125rem; cursor: pointer; }
.qp-import-footer .qp-btn-import {
    padding: 8px 20px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #34a853, #2d9249); color: #fff;
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.qp-import-footer .qp-btn-import:hover { box-shadow: 0 4px 12px rgba(52,168,83,0.3); }
.qp-import-footer .qp-btn-back { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-main); font-size: 0.8125rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.product-section-header label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    color: var(--primary);
    border: 1px dashed var(--primary);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-add-row:hover {
    background: rgba(37, 71, 139, 0.06);
}
.btn-add-row span { font-size: 16px; }

/* Product Table — matching BG popup style */
.product-table-wrap {
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 280px;
}
.product-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
    table-layout: auto;
}
.product-table thead {
    background: var(--neutral-100);
}
.product-table thead th {
    padding: 10px 8px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--secondary);
    text-align: left;
    white-space: nowrap;
}
.product-table thead th.th-center { text-align: center; }
.product-table thead th.th-right { text-align: right; }
.product-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.product-table tbody tr:hover { background: var(--surface-hover); }
.product-table tbody td {
    padding: 8px 8px;
    font-size: 0.8125rem;
    vertical-align: top;
    padding-top: 10px;
    border-bottom: 1px solid var(--border);
}
.product-table td.td-center { text-align: center; }
.product-table td.td-right { text-align: right; }
.product-table td:nth-child(3) { max-width: 220px; }
/* Product image thumbnail */
.op-prod-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); background: var(--bg); cursor: pointer; transition: transform 0.2s; }
.op-prod-thumb:hover { transform: scale(2.5); z-index: 10; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.op-prod-thumb-empty { width: 36px; height: 36px; border-radius: 6px; border: 1px dashed var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 18px; }

/* Product table inputs — transparent border, focus highlight */
.grid-input {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.8125rem;
    border-radius: 6px;
    color: var(--text-main);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.grid-input:focus {
    outline: none;
    border-color: var(--primary);
}
.grid-input.grid-number {
    text-align: right;
    font-family: var(--font-main);
    font-weight: 600;
    min-width: 80px;
    font-variant-numeric: tabular-nums;
}
.grid-select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.8125rem;
    border-radius: 6px;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--font-main);
    min-width: 160px !important;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}
.grid-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Product table total */
.product-table tfoot {
    background: var(--neutral-50);
}
.product-table tfoot td {
    padding: 12px 8px;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-main);
}
.grid-total-value {
    color: var(--primary);
    font-family: var(--font-main);
    font-weight: 700;
    white-space: nowrap;
}
.grid-row-total {
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

/* Product Search-Select Widget */
.grid-search-select { position: relative; }
.grid-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface, #fff); border: 1.5px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 220px; overflow-y: auto; z-index: 100; display: none;
    min-width: 280px;
}
.grid-dropdown.open { display: block; }
.grid-drop-item {
    padding: 8px 12px; font-size: 0.8125rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}
.grid-drop-item:last-child { border-bottom: none; }
.grid-drop-item:hover { background: var(--bg); }
.op-prod-search { white-space: normal; word-wrap: break-word; word-break: break-word; }

/* Customer Search Dropdown */
.op-cust-search-wrap { position: relative; }
.op-cust-search-wrap .field-input { padding-right: 32px; }
.op-cust-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: none; cursor: pointer; color: var(--text-light);
    padding: 0; display: flex; align-items: center;
}
.op-cust-toggle:hover { color: var(--primary); }
.op-cust-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface, #fff); border: 1.5px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 200px; overflow-y: auto; z-index: 200; display: none;
}
.op-cust-dropdown.open { display: block; }
.op-cust-item {
    padding: 8px 12px; font-size: 0.8125rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}
.op-cust-item:last-child { border-bottom: none; }
.op-cust-item:hover { background: var(--bg); }
.op-cust-item .cust-sub { font-size: 11px; color: var(--text-light); margin-left: auto; }

/* Delete Row Button */
.btn-delete-row {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-delete-row:hover { background: var(--danger-bg); color: var(--danger); }
.btn-delete-row span { font-size: 18px; }

/* Empty product state */
.product-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.8125rem;
}
.product-empty span { font-size: 32px; display: block; margin-bottom: 8px; color: var(--border); }

/* Financial Summary */
.financial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .financial-grid { grid-template-columns: 1fr; }
}
.financial-box {
    position: relative;
}
.financial-box .field-input {
    padding-right: 44px;
}
.currency-tag {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-light);
    pointer-events: none;
}
.financial-box.highlight .field-label { color: var(--primary); }
.financial-box.highlight .field-input {
    background: var(--blue-bg);
    border-color: rgba(37, 71, 139, 0.3);
    color: var(--primary);
    font-weight: 700;
}

/* PO Section */
.po-section {
    background: #FFF7ED;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #FDBA74;
}
.po-section .field-label { color: #C2410C; }
.po-section .field-input {
    background: var(--surface);
    border-color: #FDBA74;
}

/* Popup Footer */
.popup-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-50);
    border-radius: 0 0 16px 16px;
}
.popup-footer-left,
.popup-footer-right {
    display: flex;
    gap: 10px;
}
.btn-close-popup {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-close-popup:hover { background: var(--bg); color: var(--text-main); }

.btn-save-draft {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-save-draft:hover { background: var(--bg); }

.btn-confirm-order {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 71, 139, 0.3);
}
.btn-confirm-order:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* UOM cell */
.grid-uom {
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
}

/* VAT per-product column */
.op-vat-cell { text-align: center; }
.op-vat-select {
    font-size: 0.75rem; padding: 4px 2px; min-width: 68px;
    border: 1px solid transparent; background: transparent; border-radius: 6px;
    color: var(--text-main); cursor: pointer; font-family: var(--font-main);
}
.op-vat-select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.op-vat-select option[value=""] { color: var(--text-light); background: #fff; font-weight: 400; }
/* VAT amount virtual column */
.op-vat-amount { text-align: right; font-size: 0.75rem; font-weight: 600; color: #0d9488; white-space: nowrap; }
/* Quick VAT buttons bar */
.op-vat-quick-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--neutral-50); border-radius: 8px; margin-bottom: 8px;
}
.op-vat-quick-label {
    font-size: 0.6875rem; font-weight: 700; color: var(--text-light);
    display: flex; align-items: center; gap: 4px; letter-spacing: 0.3px;
}
.op-vat-quick-btn {
    font-size: 0.6875rem; font-weight: 600; padding: 5px 12px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-main); cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.op-vat-quick-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.op-vat-quick-btn.vat-10 { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.op-vat-quick-btn.vat-10:hover { background: #dbeafe; }
.op-vat-quick-btn.vat-8 { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.op-vat-quick-btn.vat-8:hover { background: #dcfce7; }
.op-vat-quick-btn.vat-clear { background: #fff; color: var(--text-light); }
.op-vat-quick-btn.vat-clear:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
/* VAT footer breakdown rows */
.op-vat-footer-row td { font-size: 0.75rem; color: var(--text-secondary); padding: 4px 6px !important; border-top: none !important; }
.op-vat-footer-row .op-vat-footer-label { text-align: right; font-weight: 500; }
.op-vat-footer-row .op-vat-footer-amount { text-align: right; font-weight: 700; color: #0d9488; }

/* NCC Price Hint (ported from BG popup) */
.op-price-cell { position: relative; display: flex; align-items: center; gap: 4px; }
.op-ncc-hint-btn {
    flex-shrink: 0; width: 24px; height: 24px;
    border: none; border-radius: 50%; background: transparent;
    color: var(--secondary); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; font-size: 16px;
}
.op-ncc-hint-btn:hover { background: var(--neutral-100); color: var(--primary); }
.op-ncc-hint-btn.has-ncc { color: #d97706; }
.op-ncc-hint-btn.no-ncc { color: var(--neutral-300); cursor: default; }
.op-ncc-mini-popup {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 10010;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    min-width: 300px; max-width: 380px; animation: fadeIn 0.15s;
}
.op-ncc-mini-header {
    padding: 8px 12px; font-size: 11px; font-weight: 700;
    color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.op-ncc-group-label {
    padding: 5px 12px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.op-ncc-group-label.nk { background: #eff6ff; color: #2563eb; }
.op-ncc-group-label.nd { background: #f0fdf4; color: #16a34a; }
.op-ncc-mini-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 7px 12px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.12s;
}
.op-ncc-mini-row:last-child { border-bottom: none; }
.op-ncc-mini-row:hover { background: var(--neutral-50, #f9fafb); }
.op-ncc-mini-row.preferred { background: #fffbeb; }
.op-ncc-mini-name { flex: 1; font-size: 12px; font-weight: 600; min-width: 100px; }
.op-ncc-mini-price { font-size: 12px; color: var(--primary); font-weight: 700; }
.op-ncc-mini-detail {
    width: 100%; font-size: 10px; color: var(--text-light);
    display: flex; justify-content: space-between; padding-left: 2px;
}
.op-ncc-mini-detail .suggest {
    color: var(--success, #16a34a); font-weight: 700;
}
.op-ncc-mini-badge {
    font-size: 10px; background: #d97706; color: #fff;
    border-radius: 4px; padding: 1px 5px; font-weight: 600;
}
.op-ncc-mini-footer {
    padding: 5px 12px; font-size: 9px; color: var(--text-light);
    border-top: 1px solid var(--border); display: flex;
    justify-content: space-between; align-items: center;
}

/* Collapsible Sections */
.op-collapse {
    background: var(--neutral-50);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.op-collapse-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.2s;
}
.op-collapse-title::-webkit-details-marker { display: none; }
.op-collapse-title::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    margin-left: auto;
    transition: transform 0.2s;
}
.op-collapse[open] > .op-collapse-title {
    color: var(--primary);
    border-bottom: 1px solid var(--border);
}
.op-collapse[open] > .op-collapse-title::after {
    transform: rotate(180deg);
}
.op-collapse > .form-grid {
    padding: 16px;
}

/* --- From: Popup_Email_Compose.html --- */
/* ===== SELF-CONTAINED OVERLAY ===== */
.eml-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.eml-popup-overlay.active { opacity: 1; }

.eml-popup {
  background: #fff;
  border-radius: 12px;
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}
.eml-popup-overlay.active .eml-popup { transform: translateY(0); }

/* Header */
.eml-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #25478b, #1a3569);
  border-radius: 12px 12px 0 0;
  color: #fff;
}
.eml-header-left { display: flex; align-items: center; gap: 8px; }
.eml-header-title { font-weight: 600; font-size: 15px; }
.eml-close-btn {
  background: rgba(255,255,255,0.15); border: none; cursor: pointer; padding: 4px;
  border-radius: 50%; display: flex; color: #fff;
}
.eml-close-btn:hover { background: rgba(255,255,255,0.25); }

/* Body */
.eml-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

/* Fields */
.eml-field { margin-bottom: 12px; }
.eml-label { font-size: 12px; color: #555; font-weight: 600; display: block; margin-bottom: 4px; }
.eml-required { color: #e74c3c; }
.eml-input {
  width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px;
  font-size: 13px; outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
.eml-input:focus { border-color: #25478b; box-shadow: 0 0 0 2px rgba(37,71,139,0.1); }
.eml-textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px;
  font-size: 13px; resize: vertical; outline: none; font-family: inherit;
  box-sizing: border-box;
}
.eml-textarea:focus { border-color: #25478b; }

/* ★ Salutation row */
.eml-salutation-group {
  display: flex; gap: 8px; align-items: center;
}
.eml-salutation-select {
  width: 120px !important; flex-shrink: 0;
}
.eml-contact-name-input {
  flex: 1;
}

/* CC/BCC toggle */
.eml-cc-toggle { margin-bottom: 8px; }
.eml-link-btn {
  background: none; border: none; color: #25478b; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; gap: 2px; padding: 0;
}
.eml-link-btn:hover { text-decoration: underline; }

/* ★ HTML Preview */
.eml-preview-section { margin-bottom: 12px; }
.eml-preview-frame {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #f9f9f9;
  max-height: 350px;
  overflow-y: auto;
  font-size: 12px;
  transition: border-color 0.2s;
}
.eml-preview-frame.editing {
  border-color: #25478b;
  box-shadow: 0 0 0 2px rgba(37,71,139,0.15);
  background: #fff;
}
/* Edit toggle button */
.eml-edit-toggle {
  background: none; border: 1px solid #d0d5dd; cursor: pointer;
  font-size: 11px; display: flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 4px; color: #555;
  transition: all 0.15s;
}
.eml-edit-toggle:hover { border-color: #25478b; color: #25478b; }
.eml-edit-toggle.active { background: #25478b; color: #fff; border-color: #25478b; }
.eml-preview-frame .eml-pv-container {
  background: #fff; margin: 10px; border: 1px solid #ddd; border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #333;
}
.eml-pv-header {
  text-align: center; padding: 14px 10px; border-bottom: 2px solid #007bff;
}
.eml-pv-header img { max-width: 120px; height: auto; margin-bottom: 6px; display: block; margin-left: auto; margin-right: auto; }
.eml-pv-header h2 { font-size: 16px; color: #007bff; margin: 0; text-transform: uppercase; font-weight: bold; }
.eml-pv-greeting { font-size: 13px; padding: 12px 14px 4px; color: #333; }
.eml-pv-content { padding: 0 14px 14px; font-size: 12px; }
.eml-pv-content p { margin: 0 0 10px; }
.eml-pv-highlight {
  background: #f8f9fa; padding: 10px; margin: 10px 0; text-align: center;
  border: 1px solid #dee2e6; border-radius: 4px;
}
.eml-pv-highlight h4 { margin: 0 0 4px; color: #333; font-size: 13px; }
.eml-pv-highlight .eml-pv-btn {
  display: inline-block; padding: 6px 16px; background: #007bff; color: #fff;
  text-decoration: none; border-radius: 3px; font-size: 11px; font-weight: bold; margin-top: 6px;
}
.eml-pv-contact {
  background: #f1f3f5; padding: 10px; border-radius: 4px; margin-top: 12px; font-size: 11px;
}
.eml-pv-contact h5 { margin: 0 0 6px; color: #0056b3; font-size: 12px; }
.eml-pv-contact ul { list-style: none; padding: 0; margin: 0; }
.eml-pv-contact li { margin-bottom: 3px; }
.eml-pv-footer {
  background: #007bff; color: #fff; text-align: center; padding: 10px;
  font-size: 10px; border-radius: 0 0 4px 4px;
}

/* Attachment */
.eml-attachment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #f0f4ff; border-radius: 6px; margin-top: 8px;
}
.eml-attach-icon { font-size: 18px; color: #5b6abf; }
.eml-attach-name { font-size: 12px; color: #333; flex: 1; }
.eml-attach-badge {
  font-size: 10px; padding: 2px 6px; background: #25478b; color: #fff;
  border-radius: 3px; font-weight: 600;
}

/* Footer */
.eml-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
}
.eml-btn-cancel {
  padding: 8px 16px; border: 1px solid #d0d5dd; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #555;
}
.eml-btn-cancel:hover { background: #f5f5f5; }
.eml-btn-send {
  padding: 8px 20px; border: none; background: linear-gradient(135deg, #25478b, #1a3569);
  color: #fff; border-radius: 6px; cursor: pointer; font-size: 13px;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
  transition: all 0.15s ease;
}
.eml-btn-send:hover {
  box-shadow: 0 4px 12px rgba(37,71,139,0.4); transform: translateY(-1px);
}
.eml-btn-send:active { transform: translateY(0); }
.eml-btn-send:disabled { opacity:0.7; cursor:not-allowed; transform:none; }

/* --- From: Popup_HOP_DONG_BAN.html --- */
/* Contract Popup - Indigo theme */
.ct-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay, rgba(0,0,0,0.5));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: ctFadeIn 0.3s ease forwards;
}
@keyframes ctFadeIn { to { opacity: 1; } }
.ct-popup-overlay.hidden { display: none !important; }

.ct-popup-card {
    background: var(--surface, #fff);
    width: 92vw;
    max-width: 860px;
    max-height: 92vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: ctSlideUp 0.3s ease;
}
@keyframes ctSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ct-popup-hdr {
    padding: 20px 24px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ct-popup-hdr h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ct-popup-hdr p { font-size: 0.8rem; opacity: 0.85; margin: 4px 0 0; }
.ct-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; border: none;
}
.ct-close-btn:hover { background: rgba(255,255,255,0.3); }
.ct-close-btn span { font-size: 20px; }

.ct-popup-body { padding: 24px; overflow-y: auto; flex: 1; }

.ct-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 20px;
}
.ct-col-2 { grid-column: span 2; }
.ct-col-3 { grid-column: span 3; }
.ct-col-4 { grid-column: span 4; }
.ct-col-6 { grid-column: span 6; }
.ct-col-8 { grid-column: span 8; }
.ct-col-12 { grid-column: span 12; }

.ct-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
}
.ct-label .req { color: var(--danger); margin-left: 2px; }

.ct-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-main);
    font-family: var(--font-main, 'Segoe UI', sans-serif);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ct-input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: var(--surface, #fff);
}
.ct-input[readonly] { background: var(--neutral-100); color: var(--text-light); cursor: default; }
.ct-input.ct-money { font-family: var(--font-main); text-align: right; font-weight: 600; }

.ct-divider { grid-column: span 12; border-top: 1px solid var(--border-light); margin: 4px 0; }

.ct-section-title {
    grid-column: span 12;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: #4F46E5;
    padding-bottom: 4px; border-bottom: 2px solid #C7D2FE;
}
.ct-section-title span { font-size: 18px; }

/* ═══ Mode Selector ═══ */
.ct-mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.ct-mode-card {
    padding: 16px 20px; border: 2px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: all 0.25s; text-align: center; background: var(--surface, #fff);
}
.ct-mode-card:hover { border-color: #818CF8; background: #F5F3FF; }
.ct-mode-card.active {
    border-color: #4F46E5;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}
.ct-mode-card .ct-mode-icon { font-size: 28px; margin-bottom: 6px; }
.ct-mode-card .ct-mode-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); }
.ct-mode-card .ct-mode-desc { font-size: 0.6875rem; color: var(--text-light); margin-top: 4px; }

/* ═══ Info Card ═══ */
.ct-info-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE; border-radius: 12px;
    padding: 16px 20px; display: none;
}
.ct-info-card.visible { display: block; }
.ct-info-hdr {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: #4338CA; margin-bottom: 12px;
}
.ct-info-hdr span { font-size: 18px; }
.ct-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.ct-info-item { display: flex; flex-direction: column; gap: 2px; }
.ct-info-label { font-size: 0.6875rem; color: #6366F1; font-weight: 600; }
.ct-info-val { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); }
.ct-info-val.ct-money-val { font-family: var(--font-main); color: #4338CA; }

/* ═══ File chips ═══ */
.ct-file-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ct-file-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 8px;
    font-size: 0.75rem; font-weight: 600;
    background: rgba(79,70,229,0.08); color: #4F46E5;
    text-decoration: none; transition: all 0.2s; cursor: pointer; border: none;
}
.ct-file-chip:hover { background: rgba(79,70,229,0.15); }
.ct-file-chip span { font-size: 16px; }
.ct-file-chip.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Phụ lục sub-table */
.ct-phu-luc-wrap { background: var(--blue-bg); border-radius: 12px; padding: 16px; border: 1px solid #C7D2FE; }
.ct-phu-luc-wrap .ct-pl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ct-phu-luc-wrap .ct-pl-header label { font-size: 0.8125rem; font-weight: 700; color: #4338CA; }
.ct-pl-add {
    padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
    background: #4F46E5; color: #fff; border: none; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 4px;
}
.ct-pl-add:hover { background: #4338CA; }
.ct-pl-add span { font-size: 16px; }
.ct-pl-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ct-pl-table th {
    text-align: left; padding: 8px 10px; background: #E0E7FF; color: #4338CA;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.ct-pl-table td { padding: 6px 10px; border-bottom: 1px solid #C7D2FE; }
.ct-pl-table input { width: 100%; padding: 6px 8px; border: 1px solid #C7D2FE; border-radius: 6px; font-size: 0.8rem; background: #fff; }
.ct-pl-table input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.ct-pl-empty { text-align: center; padding: 20px; color: var(--text-light); font-size: 0.8rem; }
.ct-pl-del { background: none; border: none; cursor: pointer; color: var(--text-light); transition: all 0.15s; }
.ct-pl-del:hover { color: var(--danger); }

/* Footer */
.ct-popup-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50); border-radius: 0 0 16px 16px;
}
.ct-btn-close { padding: 10px 20px; border-radius: 8px; font-size: 0.875rem; background: transparent; color: var(--text-light); cursor: pointer; transition: all 0.2s; border: none; }
.ct-btn-close:hover { background: var(--bg); color: var(--text-main); }
.ct-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: #4F46E5; color: #fff; cursor: pointer; transition: all 0.2s; border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.ct-btn-save:hover { background: #4338CA; transform: translateY(-1px); }
.ct-footer-right { display: flex; gap: 8px; align-items: center; }
.ct-btn-action {
    padding: 10px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: 1px solid var(--border);
    background: var(--surface, #fff); color: var(--text-main);
    display: flex; align-items: center; gap: 6px;
}
.ct-btn-action:hover { background: var(--bg); border-color: #4F46E5; color: #4F46E5; }
.ct-btn-action span { font-size: 18px; }

@media (max-width: 768px) {
    .ct-popup-card { width: 98vw; max-height: 95vh; }
    .ct-col-4, .ct-col-3 { grid-column: span 6; }
    .ct-col-2 { grid-column: span 6; }
    .ct-mode-selector { grid-template-columns: 1fr; }
}

/* --- From: Popup_KHACH_HANG.html --- */
.kh-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay, rgba(0,0,0,0.5));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: khFadeIn 0.3s ease forwards;
}
@keyframes khFadeIn { to { opacity: 1; } }
.kh-popup-overlay.hidden { display: none !important; }

.kh-popup-card {
    background: var(--surface, #fff);
    width: 90vw;
    max-width: 820px;
    max-height: 90vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: khSlideUp 0.3s ease;
}
@keyframes khSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.kh-popup-hdr {
    padding: 20px 24px;
    background: var(--primary, #25478B);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kh-popup-hdr h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.kh-popup-hdr p { font-size: 0.8rem; opacity: 0.85; margin: 4px 0 0; }
.kh-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; border: none;
}
.kh-close-btn:hover { background: rgba(255,255,255,0.3); }
.kh-close-btn span { font-size: 20px; }

.kh-popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.kh-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 20px;
}
.kh-col-3 { grid-column: span 3; }
.kh-col-4 { grid-column: span 4; }
.kh-col-6 { grid-column: span 6; }
.kh-col-12 { grid-column: span 12; }

.kh-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
}
.kh-label .req { color: var(--danger); margin-left: 2px; }

.kh-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-main);
    font-family: var(--font-main, 'Segoe UI', sans-serif);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kh-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 71, 139, 0.1);
    background: var(--surface, #fff);
}
.kh-input[readonly] { background: var(--neutral-100); color: var(--text-light); cursor: default; }
.kh-input.kh-money {
    font-family: var(--font-main);
    text-align: right;
    font-weight: 600;
    padding-right: 50px;
}

/* ─── Contact Cards Section ─── */
.kh-contact-list { display:flex; flex-direction:column; gap:10px; }
.kh-contact-card {
    display:grid; grid-template-columns:1fr 140px 1fr 1fr auto; gap:8px; align-items:center;
    padding:10px 12px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg); transition:border-color 0.2s;
}
.kh-contact-card:hover { border-color:var(--primary); }
.kh-contact-card input, .kh-contact-card select {
    width:100%; padding:7px 10px; border-radius:6px; border:1px solid var(--border);
    font-size:12px; background:var(--surface); color:var(--text-main);
}
.kh-contact-card input:focus, .kh-contact-card select:focus { border-color:var(--primary); outline:none; }
.kh-contact-primary {
    padding:3px 8px; border-radius:10px; font-size:10px; font-weight:700;
    background:var(--success-bg, #DCFCE7); color:var(--green-700, #15803D);
    display:inline-flex; align-items:center; gap:3px; cursor:pointer;
    border:1px solid transparent; transition:all 0.2s;
}
.kh-contact-primary.active { background:var(--primary); color:#fff; }
.kh-contact-primary:hover { border-color:var(--primary); }
.kh-contact-remove {
    width:26px; height:26px; border-radius:6px; border:none;
    background:transparent; color:var(--text-light); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.kh-contact-remove:hover { background:var(--danger-bg); color:var(--danger); }
.kh-contact-header {
    display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px;
    padding:0 12px 4px; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text-light);
}
@media (max-width:768px) {
    .kh-contact-card { grid-template-columns:1fr; }
    .kh-contact-header { display:none; }
}

/* Custom Fields Section */
.kh-custom-fields-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kh-cf-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.kh-cf-row input {
    flex: 1;
}
.kh-cf-remove {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--danger-bg, #FEE2E2);
    color: var(--danger, #DC2626);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.kh-cf-remove:hover { background: var(--danger); color: #fff; }
.kh-cf-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.kh-cf-add:hover { background: rgba(37,71,139,0.05); border-color: var(--primary); }

.kh-divider {
    grid-column: span 12;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

.kh-section-title {
    grid-column: span 12;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(37, 71, 139, 0.2);
}
.kh-section-title span { font-size: 18px; }

.kh-popup-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-50);
    border-radius: 0 0 16px 16px;
}
.kh-btn-close {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem;
    background: transparent; color: var(--text-light); cursor: pointer; transition: all 0.2s; border: none;
}
.kh-btn-close:hover { background: var(--bg); color: var(--text-main); }
.kh-btn-delete {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: transparent; color: var(--danger); cursor: pointer; transition: all 0.2s; border: 1px solid var(--danger);
    display: none;
}
.kh-btn-delete:hover { background: var(--danger); color: #fff; }
.kh-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: var(--primary); color: #fff; cursor: pointer; transition: all 0.2s; border: none;
    box-shadow: 0 4px 12px rgba(37, 71, 139, 0.3);
}
.kh-btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Credit info badge */
.kh-credit-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px; font-size: 0.6875rem; font-weight: 700;
}
.kh-credit-ok { background: var(--success-bg); color: var(--green-700); }
.kh-credit-warn { background: var(--warning-bg); color: var(--amber-700); }
.kh-credit-danger { background: var(--danger-bg); color: var(--red-700); }

@media (max-width: 768px) {
    .kh-popup-card { width: 98vw; max-height: 95vh; }
    .kh-col-4, .kh-col-3 { grid-column: span 6; }
}

/* --- From: Popup_Liquidation_Wizard.html --- */
/* === LIQUIDATION WIZARD OVERLAY === */
.liq-overlay { display:none; position:fixed; inset:0; z-index:10003; background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); align-items:center; justify-content:center; }
.liq-overlay.open { display:flex; }
.liq-modal { background:var(--surface,#fff); border-radius:16px; max-width:960px; width:95%; max-height:92vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,0.25); }
.liq-header { padding:20px 24px 14px; border-bottom:1px solid var(--border,#e2e8f0); display:flex; align-items:center; gap:10px; }
.liq-header h3 { margin:0; font-size:1.05rem; flex:1; color:var(--text-main,#1e293b); }
.liq-close { border:none; background:none; cursor:pointer; color:var(--text-light,#94a3b8); font-size:22px; padding:4px; border-radius:6px; }
.liq-close:hover { background:var(--neutral-100,#f3f4f6); color:var(--text-main); }
.liq-body { padding:20px 24px; }
.liq-footer { padding:14px 24px 20px; border-top:1px solid var(--border,#e2e8f0); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; align-items:center; }
.liq-btn { padding:10px 22px; border-radius:10px; cursor:pointer; font-family:var(--font-main,inherit); font-size:0.8125rem; font-weight:600; border:none; display:inline-flex; align-items:center; gap:6px; transition:all 0.15s; }
.liq-btn-ghost { background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0) !important; color:var(--text-main); }
.liq-btn-ghost:hover { background:var(--neutral-50,#f9fafb); }
.liq-btn-primary { background:var(--primary,#6366f1); color:#fff; }
.liq-btn-primary:hover { background:#4f46e5; }
.liq-btn-success { background:#059669; color:#fff; }
.liq-btn-success:hover { background:#047857; }
.liq-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Step indicator */
.liq-steps { display:flex; gap:0; margin-bottom:20px; }
.liq-step { flex:1; text-align:center; padding:10px 0 8px; font-size:0.75rem; font-weight:600; border-bottom:3px solid var(--border,#e2e8f0); color:var(--text-light,#94a3b8); transition:all 0.2s; }
.liq-step.active { border-color:var(--primary,#6366f1); color:var(--primary,#6366f1); }
.liq-step.done { border-color:#059669; color:#059669; }

/* Commission inputs (Step 1) — 3 fields in a row */
.liq-rate-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.liq-rate-card { border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:16px; background:var(--bg,#fafafa); text-align:center; }
.liq-rate-card .liq-rate-icon { font-size:28px; margin-bottom:6px; }
.liq-rate-card label { display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-light,#94a3b8); margin-bottom:8px; }
.liq-rate-card input { width:100%; padding:10px 12px; border:1px solid var(--border,#e2e8f0); border-radius:8px; font-size:1rem; font-weight:700; text-align:center; box-sizing:border-box; font-family:var(--font-main,inherit); }
.liq-rate-card input:focus { border-color:var(--primary,#6366f1); outline:none; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }

/* Summary card (Step 2) */
.liq-summary { background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(16,185,129,0.06)); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:18px; }
.liq-summary-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--primary,#6366f1); margin-bottom:10px; }
.liq-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.liq-summary-item { display:flex; justify-content:space-between; font-size:0.8rem; padding:4px 0; }
.liq-summary-item .liq-sl { color:var(--text-light); }
.liq-summary-item .liq-sv { font-weight:700; color:var(--text-main); }
.liq-summary-total { grid-column:1/-1; border-top:2px solid var(--primary,#6366f1); margin-top:6px; padding-top:8px; display:flex; justify-content:space-between; font-size:0.95rem; font-weight:800; }
.liq-summary-total .liq-sv { color:var(--primary,#6366f1); }

/* Detail table (Step 2) */
.liq-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.liq-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.liq-table th { background:var(--neutral-50,#f8fafc); padding:8px 10px; font-weight:700; color:var(--text-light); text-align:left; white-space:nowrap; border-bottom:2px solid var(--border); }
.liq-table th.r { text-align:right; }
.liq-table th.c { text-align:center; }
.liq-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.liq-table td.r { text-align:right; font-variant-numeric:tabular-nums; }
.liq-table td.c { text-align:center; }
.liq-table tr:last-child td { border-bottom:none; }
.liq-table tfoot td { background:var(--neutral-50,#f8fafc); font-weight:700; border-top:2px solid var(--border); }
.liq-table .liq-img { width:36px; height:36px; border-radius:6px; object-fit:cover; background:#f1f5f9; }
.liq-money-pos { color:#059669; }

/* Mode selector (Mua hàng / Kỹ thuật) */
.liq-mode-tabs { display:flex; gap:0; margin-bottom:16px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.liq-mode-tab { flex:1; padding:10px 0; text-align:center; font-size:0.8rem; font-weight:600; cursor:pointer; background:var(--surface,#fff); color:var(--text-light); transition:all 0.15s; border:none; }
.liq-mode-tab:first-child { border-right:1px solid var(--border); }
.liq-mode-tab.active { background:var(--primary,#6366f1); color:#fff; }
.liq-mode-tab:hover:not(.active) { background:var(--neutral-50); }

/* Saved success banner */
.liq-saved-banner { display:none; margin-top:12px; padding:10px 14px; border:1px solid #bbf7d0; background:#f0fdf4; border-radius:8px; font-size:0.8rem; color:#059669; font-weight:600; text-align:center; }

@media (max-width:640px) {
    .liq-rate-grid { grid-template-columns:1fr; }
    .liq-summary-grid { grid-template-columns:1fr; }
    .liq-modal { width:98%; }
}

/* --- From: Popup_OrderConfirm.html --- */
/* ===== OVERLAY ===== */
.oc-popup-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; opacity: 0; transition: opacity 0.2s;
}
.oc-popup-overlay.active { opacity: 1; }
.oc-popup {
  background: #fff; border-radius: 14px; width: 540px; max-width: 95vw;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25); overflow: hidden;
  transform: translateY(20px); transition: transform 0.25s;
}
.oc-popup-overlay.active .oc-popup { transform: translateY(0); }

/* Header */
.oc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--primary, #007bff); color: #fff;
}
.oc-header-left { display: flex; align-items: center; gap: 10px; }
.oc-header-title { font-weight: 700; font-size: 15px; }
.oc-close-btn {
  background: rgba(255,255,255,0.15); border: none; cursor: pointer;
  width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 50%; display: flex; color: #fff;
}
.oc-close-btn:hover { background: rgba(255,255,255,0.25); }

/* Info bar */
.oc-info-bar {
  padding: 10px 18px; background: var(--bg-section, #f0f4fa);
  font-size: 12px; color: var(--text-light, #555);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #ddd);
}
.oc-info-bar span { font-weight: 600; }
.oc-info-sep { color: #ccc; }

/* Tabs */
.oc-tabs {
  display: flex; border-bottom: 2px solid var(--border, #e0e0e0);
  background: #fafbfc;
}
.oc-tab {
  flex: 1; padding: 10px 8px; border: none; background: none;
  cursor: pointer; font-size: 12px; font-weight: 600; color: #777;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all 0.15s;
}
.oc-tab:hover { color: var(--primary, #007bff); background: rgba(0,123,255,0.04); }
.oc-tab.active {
  color: var(--primary, #007bff);
  border-bottom-color: var(--primary, #007bff);
  background: rgba(0,123,255,0.06);
}
.oc-tab .material-symbols-outlined { font-size: 18px; }

/* Body */
.oc-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.oc-tab-content { display: none; }
.oc-tab-content.active { display: block; }
.oc-field { margin-bottom: 12px; }
.oc-label { font-size: 12px; color: #555; font-weight: 600; display: block; margin-bottom: 4px; }
.oc-req { color: #e74c3c; }
.oc-input {
  width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px;
  font-size: 13px; outline: none; box-sizing: border-box;
}
.oc-input:focus { border-color: var(--primary, #007bff); box-shadow: 0 0 0 3px rgba(0,123,255,0.1); }
.oc-input[readonly] { background: #f5f5f5; color: #888; }
.oc-textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px;
  font-size: 13px; outline: none; resize: vertical; box-sizing: border-box;
}
.oc-row { display: flex; gap: 12px; }

/* File upload */
.oc-file-zone {
  position: relative; border: 2px dashed #d0d5dd; border-radius: 8px;
  padding: 14px; text-align: center; cursor: pointer; transition: border-color 0.15s;
}
.oc-file-zone:hover { border-color: var(--primary, #007bff); }
.oc-file-input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.oc-file-hint { font-size: 12px; color: #888; display: flex; align-items: center; justify-content: center; gap: 6px; }
.oc-file-hint .material-symbols-outlined { font-size: 20px; color: var(--primary, #007bff); }
.oc-file-preview {
  margin-top: 6px; font-size: 12px; color: #16a34a; font-weight: 600;
}

/* Link row */
.oc-link-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.oc-link-label { font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.oc-link-input { flex: 1; font-size: 12px !important; padding: 6px 10px !important; border-style: dashed !important; }

/* File remove button */
.oc-file-remove {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 2px 8px; border: 1px solid #e74c3c;
  border-radius: 4px; background: #fff5f5; color: #e74c3c;
  font-size: 11px; cursor: pointer; font-weight: 600;
}
.oc-file-remove:hover { background: #e74c3c; color: #fff; }

/* Footer */
.oc-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--border, #e0e0e0);
  background: #fafbfc;
}
.oc-btn-cancel {
  padding: 8px 18px; border: 1px solid #d0d5dd; border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; color: #555;
}
.oc-btn-cancel:hover { background: #f5f5f5; }
.oc-btn-reject {
  padding: 8px 16px; border: 1px solid #e74c3c; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #e74c3c; background: #fff5f5;
  display: flex; align-items: center; gap: 6px; transition: all 0.15s;
}
.oc-btn-reject:hover { background: #e74c3c; color: #fff; }
.oc-btn-reject:disabled { opacity: 0.7; cursor: not-allowed; }
.oc-btn-confirm {
  padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(34,197,94,0.3);
  transition: all 0.15s;
}
.oc-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,197,94,0.4); }
.oc-btn-confirm:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* --- From: Popup_PhuLuc_ThayDoi_HH.html --- */
/* ═══ PL Change Popup Theme (Indigo-Amber) ═══ */
.plc-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; animation: plcFadeIn 0.3s ease forwards;
}
@keyframes plcFadeIn { to { opacity: 1; } }
.plc-overlay.hidden { display: none !important; }

.plc-card {
    background: var(--surface, #fff); width: 96vw; max-width: 1100px;
    max-height: 94vh; border-radius: 16px; display: flex; flex-direction: column;
    box-shadow: 0 25px 60px -12px rgba(0,0,0,0.3); overflow: hidden;
    animation: plcSlide 0.3s ease;
}
@keyframes plcSlide { from { transform: translateY(24px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.plc-hdr {
    padding: 20px 24px; background: linear-gradient(135deg, #4338CA 0%, #6366F1 100%);
    color: #fff; display: flex; justify-content: space-between; align-items: center;
}
.plc-hdr h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.plc-hdr p { font-size: 0.78rem; opacity: 0.85; margin: 3px 0 0; }
.plc-close {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; transition: background 0.2s;
}
.plc-close:hover { background: rgba(255,255,255,0.3); }

.plc-body { padding: 20px 24px; overflow-y: auto; flex: 1; }

/* Info bar */
.plc-info {
    display: flex; gap: 16px; margin-bottom: 16px; padding: 12px 16px;
    background: #EEF2FF; border-radius: 10px; border: 1px solid #C7D2FE;
    font-size: 0.8rem; color: #4338CA; flex-wrap: wrap;
}
.plc-info-item { display: flex; align-items: center; gap: 6px; }
.plc-info-item strong { font-weight: 700; }

/* Section headers */
.plc-section {
    display: flex; align-items: center; gap: 8px; font-size: 0.75rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    margin: 18px 0 10px; padding-bottom: 6px;
}
.plc-section-old { color: #6B7280; border-bottom: 2px solid #D1D5DB; }
.plc-section-new { color: #4338CA; border-bottom: 2px solid #818CF8; }

/* Tables */
.plc-tbl {
    width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 12px;
}
.plc-tbl th {
    text-align: left; padding: 8px 10px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.plc-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border-light, #E5E7EB); vertical-align: middle; }
.plc-tbl .td-r { text-align: right; }
.plc-tbl .td-c { text-align: center; }

/* OLD table */
.plc-old-wrap { background: #F9FAFB; border-radius: 10px; padding: 12px; border: 1px solid #E5E7EB; }
.plc-old-wrap th { background: #F3F4F6; color: #6B7280; }

/* NEW table */
.plc-new-wrap { background: #EEF2FF; border-radius: 10px; padding: 12px; border: 1px solid #C7D2FE; }
.plc-new-wrap th { background: #E0E7FF; color: #4338CA; }
.plc-new-wrap input, .plc-new-wrap select {
    width: 100%; padding: 6px 8px; border: 1px solid #C7D2FE; border-radius: 6px;
    font-size: 0.8rem; background: #fff; font-family: inherit;
}
.plc-new-wrap input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79,70,229,0.12); }
.plc-new-wrap .inp-money { text-align: right; font-weight: 600; }

/* Diff highlights */
.plc-diff-changed { background: #FEF3C7 !important; }
.plc-diff-added { background: #DCFCE7 !important; }
.plc-diff-removed { background: #FEE2E2 !important; text-decoration: line-through; color: #9CA3AF; }

/* Add/Remove buttons */
.plc-add-row {
    padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
    background: #4F46E5; color: #fff; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.plc-add-row:hover { background: #4338CA; }
.plc-del-row { background: none; border: none; cursor: pointer; color: #9CA3AF; transition: color 0.15s; padding: 2px; }
.plc-del-row:hover { color: #EF4444; }

/* Summary footer */
.plc-summary {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px;
}
.plc-sum-card {
    padding: 14px 16px; border-radius: 10px; text-align: center;
}
.plc-sum-card label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 4px; }
.plc-sum-card .plc-sum-val { font-size: 1.1rem; font-weight: 800; }
.plc-sum-old { background: #F3F4F6; color: #6B7280; }
.plc-sum-new { background: #EEF2FF; color: #4338CA; }
.plc-sum-diff { background: #FEF3C7; color: #92400E; }
.plc-sum-diff.positive { background: #DCFCE7; color: #166534; }
.plc-sum-diff.negative { background: #FEE2E2; color: #991B1B; }

/* Note */
.plc-note { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; resize: none; font-family: inherit; margin-top: 12px; }
.plc-note:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }

/* Footer */
.plc-footer {
    padding: 14px 24px; border-top: 1px solid var(--border, #E5E7EB);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--neutral-50, #F9FAFB); border-radius: 0 0 16px 16px;
}
.plc-btn { padding: 10px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.plc-btn-ghost { background: transparent; color: var(--text-light); }
.plc-btn-ghost:hover { background: var(--bg, #F3F4F6); }
.plc-btn-save { background: #4F46E5; color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,0.3); font-weight: 700; }
.plc-btn-save:hover { background: #4338CA; transform: translateY(-1px); }
.plc-btn-pdf { background: #F59E0B; color: #fff; box-shadow: 0 4px 12px rgba(245,158,11,0.3); font-weight: 700; }
.plc-btn-pdf:hover { background: #D97706; transform: translateY(-1px); }
.plc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* Empty + Loading */
.plc-empty { text-align: center; padding: 24px; color: var(--text-light); font-size: 0.85rem; }
.plc-loading { text-align: center; padding: 40px; }
.plc-loading .material-symbols-outlined { font-size: 32px; color: #4F46E5; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .plc-card { width: 99vw; max-height: 96vh; }
    .plc-summary { grid-template-columns: 1fr; }
    .plc-info { flex-direction: column; }
}

/* --- From: Popup_SALES_OS.html --- */
/* Reuse BG popup pattern - same structure, OS-specific colors */
.os-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay, rgba(0,0,0,0.5));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: osFadeIn 0.3s ease forwards;
}
@keyframes osFadeIn { to { opacity: 1; } }
.os-popup-overlay.hidden { display: none !important; }

.os-popup-card {
    background: var(--surface, #fff);
    width: 95vw;
    max-width: 960px;
    max-height: 92vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: osSlideUp 0.3s ease;
}
@keyframes osSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.os-popup-hdr {
    padding: 20px 24px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.os-popup-hdr h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.os-popup-hdr p { font-size: 0.8rem; opacity: 0.85; margin: 4px 0 0; }
.os-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; border: none;
}
.os-close-btn:hover { background: rgba(255,255,255,0.3); }
.os-close-btn span { font-size: 20px; }

/* Info bar */
.os-info-bar {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 10px 24px;
    background: var(--neutral-50, #f8fafc);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    font-size: 0.78rem; color: var(--text-light, #64748b);
}
.os-info-bar .os-info-item { display: flex; align-items: center; gap: 4px; }
.os-info-bar .os-info-item strong { color: var(--text-main, #1e293b); font-weight: 600; }
.os-info-bar.hidden { display: none; }

.os-popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Section titles */
.os-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0D9488;
    padding-bottom: 4px;
    border-bottom: 2px solid #99F6E4;
    margin-bottom: 16px;
}
.os-section-title span { font-size: 18px; }

/* Form fields */
.os-form-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px 16px;
    margin-bottom: 16px;
}
.os-col-3 { grid-column: span 3; }
.os-col-4 { grid-column: span 4; }
.os-col-6 { grid-column: span 6; }
.os-col-12 { grid-column: span 12; }

.os-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
}
.os-label .req { color: var(--danger); margin-left: 2px; }

.os-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-main);
    font-family: var(--font-main, 'Segoe UI', sans-serif);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.os-input:focus {
    outline: none;
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
    background: var(--surface, #fff);
}
.os-input[readonly] { background: var(--neutral-100); color: var(--text-light); cursor: default; }

.os-divider {
    border-top: 1px solid var(--border-light);
    margin: 20px 0;
}

/* Collapsible section */
.os-collapsible-header {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
    padding: 10px 0;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-light, #64748b);
    transition: color 0.2s;
}
.os-collapsible-header:hover { color: var(--text-main); }
.os-collapsible-header .os-chevron {
    font-size: 18px; transition: transform 0.2s;
}
.os-collapsible-header.open .os-chevron { transform: rotate(180deg); }
.os-collapsible-body {
    display: none; padding: 0 0 16px;
}
.os-collapsible-body.open { display: block; }

/* File link fields */
.os-file-group {
    background: #F0FDFA;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #99F6E4;
}
.os-file-group .os-label { color: #0F766E; margin-bottom: 4px; }
.os-file-group .os-input { font-size: 0.75rem; padding: 8px 10px; }

/* Detail section placeholder */
.os-detail-section { margin-top: 4px; }
.os-detail-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-light);
    font-size: 0.8125rem;
    background: var(--bg-main, #f8fafc);
    border-radius: 10px;
    border: 1px dashed var(--border);
}
.os-detail-empty .material-symbols-outlined {
    font-size: 40px; display: block; margin-bottom: 8px; opacity: 0.4;
}
.os-loading-spinner {
    text-align: center; padding: 30px; color: var(--text-light);
}
.os-loading-spinner .material-symbols-outlined {
    font-size: 28px; animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Footer */
.os-popup-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-50);
    border-radius: 0 0 16px 16px;
}
.os-btn-close {
    padding: 10px 20px; border-radius: 8px; font-size: 0.875rem;
    background: transparent; color: var(--text-light); cursor: pointer; transition: all 0.2s; border: none;
}
.os-btn-close:hover { background: var(--bg); color: var(--text-main); }
.os-btn-save {
    padding: 10px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    background: #0D9488; color: #fff; cursor: pointer; transition: all 0.2s; border: none;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
    display: flex; align-items: center; gap: 6px;
}
.os-btn-save:hover { background: #0F766E; transform: translateY(-1px); }
.os-btn-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ═══ Inline liq-* CSS (not available on OS List page) ═══ */
.liq-rate-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.liq-rate-card { border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:16px; background:var(--bg,#fafafa); text-align:center; }
.liq-rate-card .liq-rate-icon { font-size:28px; margin-bottom:6px; }
.liq-rate-card label { display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-light,#94a3b8); margin-bottom:8px; }
.liq-rate-card input { width:100%; padding:10px 12px; border:1px solid var(--border,#e2e8f0); border-radius:8px; font-size:1rem; font-weight:700; text-align:center; box-sizing:border-box; font-family:var(--font-main,inherit); }
.liq-rate-card input:focus { border-color:#0D9488; outline:none; box-shadow:0 0 0 3px rgba(13,148,136,0.1); }

.liq-mode-tabs { display:flex; gap:0; margin-bottom:16px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.liq-mode-tab { flex:1; padding:10px 0; text-align:center; font-size:0.8rem; font-weight:600; cursor:pointer; background:var(--surface,#fff); color:var(--text-light); transition:all 0.15s; border:none; }
.liq-mode-tab:first-child { border-right:1px solid var(--border); }
.liq-mode-tab.active { background:#0D9488; color:#fff; }
.liq-mode-tab:hover:not(.active) { background:var(--neutral-50); }

.liq-summary { background:linear-gradient(135deg,rgba(13,148,136,0.06),rgba(16,185,129,0.06)); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:18px; }
.liq-summary-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#0D9488; margin-bottom:10px; }
.liq-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.liq-summary-item { display:flex; justify-content:space-between; font-size:0.8rem; padding:4px 0; }
.liq-summary-item .liq-sl { color:var(--text-light); }
.liq-summary-item .liq-sv { font-weight:700; color:var(--text-main); }
.liq-summary-total { grid-column:1/-1; border-top:2px solid #0D9488; margin-top:6px; padding-top:8px; display:flex; justify-content:space-between; font-size:0.95rem; font-weight:800; }
.liq-summary-total .liq-sv { color:#0D9488; }

.liq-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.liq-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.liq-table th { background:var(--neutral-50,#f8fafc); padding:8px 10px; font-weight:700; color:var(--text-light); text-align:left; white-space:nowrap; border-bottom:2px solid var(--border); }
.liq-table th.r { text-align:right; }
.liq-table th.c { text-align:center; }
.liq-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.liq-table td.r { text-align:right; font-variant-numeric:tabular-nums; }
.liq-table td.c { text-align:center; }
.liq-table tr:last-child td { border-bottom:none; }
.liq-table tfoot td { background:var(--neutral-50,#f8fafc); font-weight:700; border-top:2px solid var(--border); }
.liq-table .liq-img { width:36px; height:36px; border-radius:6px; object-fit:cover; background:#f1f5f9; }
.liq-money-pos { color:#059669; }

@media (max-width: 768px) {
    .os-popup-card { width: 98vw; max-height: 95vh; }
    .os-col-4, .os-col-3 { grid-column: span 6; }
    .os-info-bar { flex-direction: column; gap: 4px; }
    .liq-rate-grid { grid-template-columns: 1fr !important; }
    .liq-summary-grid { grid-template-columns: 1fr; }
}

/* --- From: Component_Service_Timeline.html --- */
/* =========================================================
   SERVICE TIMELINE — Vertical step tracker
   ========================================================= */
.stl-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.stl-overlay.active { opacity: 1; pointer-events: auto; }
.stl-overlay.active .stl-panel { transform: translateX(0); }
.stl-panel {
    position: fixed; right: 0; top: 0; bottom: 0; width: 500px; max-width: 95vw;
    background: var(--surface,#fff); box-shadow: -8px 0 40px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.stl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg,#0ea5e9,#06b6d4); color: #fff;
}
.stl-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.stl-header .stl-sub { font-size: 0.75rem; opacity: 0.8; margin-top: 2px; }
.stl-close {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.stl-close:hover { background: rgba(255,255,255,0.3); }
.stl-body { flex: 1; overflow-y: auto; padding: 24px; }

/* Timeline items */
.stl-timeline { position: relative; padding-left: 32px; }
.stl-timeline::before {
    content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(to bottom, var(--blue-500) 0%, #06b6d4 50%, var(--border) 100%);
    border-radius: 2px;
}
.stl-item { position: relative; margin-bottom: 24px; }
.stl-item:last-child { margin-bottom: 0; }
.stl-dot {
    position: absolute; left: -28px; top: 4px; width: 16px; height: 16px;
    border-radius: 50%; border: 3px solid var(--blue-500); background: #fff;
    z-index: 1; transition: all 0.3s;
}
.stl-item.current .stl-dot { background: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,0.2); }
.stl-item.done .stl-dot { background: var(--green-500); border-color: var(--green-500); }
.stl-item.done .stl-dot::after {
    content: '✓'; position: absolute; top: -2px; left: 1px; font-size: 10px;
    color: #fff; font-weight: 700;
}
.stl-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.stl-item-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); }
.stl-item-time { font-size: 0.7rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.stl-item-desc { font-size: 0.8rem; color: var(--text-light); line-height: 1.5; }
.stl-item-user { font-size: 0.7rem; color: var(--primary,#4f46e5); font-weight: 600; margin-top: 4px; }

/* Empty state */
.stl-empty { text-align: center; padding: 40px 20px; color: var(--text-light); }
.stl-empty .material-symbols-outlined { font-size: 48px; opacity: 0.3; display: block; margin-bottom: 8px; }
.stl-empty p { font-size: 0.8125rem; margin: 0; }

/* Add progress form */
.stl-add-form {
    padding: 16px 24px; border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.stl-add-form-title {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.stl-add-form-title .material-symbols-outlined { font-size: 14px; }
.stl-add-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stl-add-field input, .stl-add-field textarea, .stl-add-field select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8rem; background: var(--surface); color: var(--text-main); transition: border 0.2s;
}
.stl-add-field input:focus, .stl-add-field textarea:focus, .stl-add-field select:focus {
    outline: none; border-color: var(--primary);
}
.stl-add-field textarea { resize: vertical; min-height: 50px; }
.stl-add-row { display: flex; gap: 8px; margin-top: 8px; }
.stl-btn-add {
    padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    background: #0ea5e9; color: #fff; transition: all 0.2s;
}
.stl-btn-add:hover { background: #0284c7; }
.stl-btn-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status chip inside timeline */
.stl-status-chip {
    display: inline-flex; padding: 2px 8px; border-radius: 10px;
    font-size: 0.65rem; font-weight: 700; margin-left: 6px;
}
.stl-status-chip.tiep_nhan { background: var(--blue-bg); color: var(--blue-500); }
.stl-status-chip.in_progress { background: #fff7ed; color: var(--amber-500); }
.stl-status-chip.completed { background: var(--green-bg); color: var(--green-500); }
.stl-status-chip.delivered { background: var(--neutral-100); color: var(--neutral-500); }

@media (max-width: 640px) {
    .stl-panel { width: 100%; }
}

/* --- From: Page_Service_Dashboard.html --- */
/* =========================================================
   SERVICE DASHBOARD — Workshop Management
   ========================================================= */
.sv-dash { padding:24px; max-width:1400px; margin:0 auto; }
.sv-dash-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.sv-dash-hdr h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.sv-dash-hdr p { font-size:0.8rem; color:var(--text-light); margin-top:2px; }
.sv-dash-actions { display:flex; gap:8px; }
.sv-btn { padding:8px 16px; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; border:none; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.sv-btn--primary { background:var(--primary); color:#fff; }
.sv-btn--primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.sv-btn--outline { background:#fff; color:var(--text-main); border:1px solid var(--border-light); }
.sv-btn--outline:hover { background:var(--neutral-50); }

/* KPI Grid */
.sv-kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(165px, 1fr)); gap:14px; margin-bottom:24px; }
.sv-kpi { padding:18px; border-radius:14px; background:#fff; border:1px solid var(--border-light,#f0f0f0); position:relative; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.sv-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.sv-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.sv-kpi--total::before { background:linear-gradient(90deg,var(--blue-500),#60a5fa); }
.sv-kpi--progress::before { background:linear-gradient(90deg,var(--amber-500),#fbbf24); }
.sv-kpi--done::before { background:linear-gradient(90deg,var(--green-500),#34d399); }
.sv-kpi--new::before { background:linear-gradient(90deg,var(--purple-500),#a78bfa); }
.sv-kpi--consign::before { background:linear-gradient(90deg,#ec4899,#f472b6); }
.sv-kpi--vehicle::before { background:linear-gradient(90deg,#14b8a6,#5eead4); }
.sv-kpi--revenue::before { background:linear-gradient(90deg,var(--green-500),#34d399); }
.sv-kpi-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.sv-kpi--total .sv-kpi-icon { background:var(--blue-bg); color:var(--blue-500); }
.sv-kpi--progress .sv-kpi-icon { background:var(--amber-bg); color:var(--amber-500); }
.sv-kpi--done .sv-kpi-icon { background:var(--green-bg); color:var(--green-500); }
.sv-kpi--new .sv-kpi-icon { background:var(--purple-bg); color:var(--purple-500); }
.sv-kpi--consign .sv-kpi-icon { background:#fdf2f8; color:#ec4899; }
.sv-kpi--vehicle .sv-kpi-icon { background:#f0fdfa; color:#14b8a6; }
.sv-kpi--revenue .sv-kpi-icon { background:var(--green-bg); color:var(--green-500); }
.sv-kpi-val { font-size:1.75rem; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; }
.sv-kpi-label { font-size:0.72rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }

/* Grid layout */
.sv-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
@media (max-width:900px) { .sv-grid { grid-template-columns:1fr; } }

/* Card */
.sv-card { background:#fff; border-radius:14px; border:1px solid var(--border-light,#f0f0f0); overflow:hidden; }
.sv-card-hdr { padding:16px 20px; border-bottom:1px solid var(--border-light,#f0f0f0); display:flex; justify-content:space-between; align-items:center; }
.sv-card-hdr h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.sv-card-hdr h3 span { font-size:18px; }
.sv-card-body { padding:20px; }
.sv-card-link { font-size:0.75rem; color:var(--primary); cursor:pointer; font-weight:600; text-decoration:none; }
.sv-card-link:hover { text-decoration:underline; }

/* Status chart bars */
.sv-status-bars { display:flex; flex-direction:column; gap:10px; }
.sv-status-row { display:flex; align-items:center; gap:12px; }
.sv-status-name { font-size:0.8rem; font-weight:600; color:var(--text-main); width:110px; flex-shrink:0; white-space:nowrap; }
.sv-status-bar-bg { flex:1; height:26px; background:var(--neutral-100); border-radius:6px; overflow:hidden; }
.sv-status-bar-fill { height:100%; border-radius:6px; transition:width 0.6s ease; display:flex; align-items:center; padding-left:8px; }
.sv-status-bar-fill span { font-size:0.7rem; font-weight:700; color:#fff; }
.sv-status-count { font-size:0.8rem; font-weight:700; color:var(--text-main); width:28px; text-align:right; }

/* Table */
.sv-mini-tbl { width:100%; border-collapse:collapse; }
.sv-mini-tbl th { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-light); padding:8px 12px; text-align:left; border-bottom:1px solid var(--border-light,#f0f0f0); }
.sv-mini-tbl td { font-size:0.8rem; color:var(--text-main); padding:10px 12px; border-bottom:1px solid var(--neutral-50); }
.sv-mini-tbl tr:last-child td { border-bottom:none; }
.sv-mini-tbl tr:hover td { background:#f8faff; }

/* Badges */
.sv-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:0.7rem; font-weight:700; }
.sv-badge--green { background:var(--green-bg); color:var(--green-500); }
.sv-badge--yellow { background:var(--amber-bg); color:var(--warning); }
.sv-badge--red { background:var(--red-bg); color:var(--red-600); }
.sv-badge--blue { background:var(--blue-bg); color:var(--blue-500); }
.sv-badge--gray { background:var(--neutral-100); color:var(--neutral-500); }

/* Empty */
.sv-empty { padding:32px; text-align:center; color:var(--text-light); }
.sv-empty span { font-size:40px; display:block; margin-bottom:8px; opacity:0.3; }
.sv-empty p { font-size:0.8rem; }

/* Loading */
.sv-loading { display:flex; align-items:center; justify-content:center; padding:60px; }
.sv-loading .spinner { width:32px; height:32px; border:3px solid var(--neutral-200); border-top-color:var(--blue-500); border-radius:50%; animation:svSpin 0.8s linear infinite; }
@keyframes svSpin { to { transform:rotate(360deg); } }
/* Date Filter */
.sv-filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.sv-filter-bar label { font-size:0.75rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.04em; }
.sv-filter-pill { padding:6px 14px; border-radius:20px; font-size:0.75rem; font-weight:600; cursor:pointer; border:1px solid var(--border-light,#e5e7eb); background:#fff; color:var(--text-main); transition:all .15s; }
.sv-filter-pill:hover { border-color:var(--primary); color:var(--primary); }
.sv-filter-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.sv-filter-custom { display:flex; align-items:center; gap:6px; }
.sv-filter-custom input { padding:5px 10px; border:1px solid var(--border-light,#e5e7eb); border-radius:8px; font-size:0.75rem; color:var(--text-main); }
.sv-period-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:20px; font-size:0.6875rem; font-weight:700; background:var(--primary); color:#fff; margin-left:auto; }
/* Footer Sync */
.sv-footer-sync { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-top:24px; }
.sv-footer-sync-info { display:flex; align-items:center; gap:12px; }
.sv-footer-sync-icon { width:36px; height:36px; border-radius:10px; background:var(--blue-bg); display:flex; align-items:center; justify-content:center; }
.sv-footer-sync-icon .material-symbols-outlined { font-size:20px; color:var(--blue-500); }
.sv-footer-sync-text p { font-size:0.8125rem; font-weight:700; color:var(--text-main); margin:0; }
.sv-footer-sync-text small { font-size:0.6875rem; color:var(--text-light); }
.sv-footer-sync-actions { display:flex; gap:10px; }
/* Guide */
.sv-guide { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sv-guide-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.sv-guide-header:hover { background:var(--bg); }
.sv-guide-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; margin:0; }
.sv-guide-header h3 .material-symbols-outlined { font-size:20px; color:var(--primary); }
.sv-guide-chevron { font-size:20px; color:var(--text-light); transition:transform .25s; }
.sv-guide.open .sv-guide-chevron { transform:rotate(180deg); }
.sv-guide-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.sv-guide.open .sv-guide-body { max-height:1400px; }
.sv-guide-content { padding:0 20px 20px; }
.sv-def-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.sv-def { padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.sv-def-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.sv-def-title .material-symbols-outlined { font-size:16px; }
.sv-def-desc { font-size:0.8125rem; color:var(--text-main); line-height:1.5; }
.sv-def-formula { font-family:'Segoe UI',monospace; font-size:0.75rem; color:var(--text-light); margin-top:6px; padding:6px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
.sv-wf { margin-top:16px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.sv-wf-title { font-size:0.75rem; font-weight:700; color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.sv-wf-title .material-symbols-outlined { font-size:16px; }
.sv-wf-steps { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.sv-wf-step { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:0.75rem; color:var(--text-main); font-weight:600; }
.sv-wf-step .material-symbols-outlined { font-size:16px; }
.sv-wf-arrow { display:flex; align-items:center; padding:0 4px; color:var(--text-light); font-size:18px; }

/* --- From: Page_Service_GolfCart.html --- */
/* Golf Cart specific */
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 0 0 16px; }
.gc-card { background: var(--surface, #fff); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; transition: all 0.2s; cursor: pointer; }
.gc-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,99,235,0.1); transform: translateY(-2px); }
.gc-card-hdr { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); }
.gc-avatar { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--blue-500), #1D4ED8); display: flex; align-items: center; justify-content: center; }
.gc-avatar .material-symbols-outlined { font-size: 26px; color: #fff; }
.gc-card-title { flex: 1; }
.gc-card-title h4 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-main, #121417); }
.gc-card-title span { font-size: 0.7rem; color: var(--text-light, #677183); }
.gc-card-body { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gc-stat { display: flex; flex-direction: column; gap: 2px; }
.gc-stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); font-weight: 600; }
.gc-stat-value { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }
.gc-card-foot { padding: 8px 16px 12px; display: flex; align-items: center; justify-content: space-between; }
.gc-status { padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
.gc-active { background: var(--success-bg); color: var(--green-600); }
.gc-maintenance { background: var(--warning-bg); color: var(--warning); }
.gc-inactive { background: var(--danger-bg); color: var(--red-600); }
.gc-card-actions { display: flex; gap: 4px; }
.gc-card-actions button { width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--bg); color: var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gc-card-actions button:hover { background: var(--primary); color: #fff; }
.gc-card-actions .material-symbols-outlined { font-size: 16px; }

/* Battery indicator */
.gc-battery { display: flex; align-items: center; gap: 4px; }
.gc-battery-bar { width: 40px; height: 10px; border-radius: 3px; background: var(--border-light); overflow: hidden; position: relative; }
.gc-battery-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.gc-battery-hi { background: linear-gradient(90deg, var(--success), var(--green-600)); }
.gc-battery-mid { background: linear-gradient(90deg, var(--amber-500), var(--warning)); }
.gc-battery-low { background: linear-gradient(90deg, var(--red-500), var(--red-600)); }
.gc-battery-pct { font-size: 0.7rem; font-weight: 700; min-width: 28px; }

/* View toggle */
.gc-view-toggle { display: flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 2px; }
.gc-view-btn { padding: 6px 10px; border-radius: 6px; border: none; background: transparent; cursor: pointer; color: var(--text-light); display: flex; align-items: center; }
.gc-view-btn.active { background: var(--primary); color: #fff; }
.gc-view-btn .material-symbols-outlined { font-size: 18px; }

/* Fix popup overlay */
#popup-golf-cart.fin-popup-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
#popup-golf-cart.hidden { display:none !important; }

/* --- From: Page_Service_Reception.html --- */
/* =========================================================
   SERVICE RECEPTION — Vehicle Intake Form
   ========================================================= */
.sv-rcpt { padding:24px; max-width:900px; margin:0 auto; }
.sv-rcpt-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.sv-rcpt-hdr h1 { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.sv-rcpt-hdr p { font-size:0.8rem; color:var(--text-light); margin-top:2px; }

.sv-form-card { background:#fff; border-radius:14px; border:1px solid var(--border-light,#f0f0f0); overflow:hidden; margin-bottom:20px; }
.sv-form-card-hdr { padding:14px 20px; border-bottom:1px solid var(--border-light,#f0f0f0); display:flex; align-items:center; gap:8px; }
.sv-form-card-hdr h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); }
.sv-form-card-hdr span { font-size:18px; color:var(--primary); }
.sv-form-body { padding:20px; }

.sv-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px) { .sv-form-grid { grid-template-columns:1fr; } }
.sv-form-grid--3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:768px) { .sv-form-grid--3 { grid-template-columns:1fr 1fr; } }
@media (max-width:500px) { .sv-form-grid--3 { grid-template-columns:1fr; } }

.sv-form-group { display:flex; flex-direction:column; gap:4px; }
.sv-form-group--full { grid-column:1 / -1; }
.sv-form-label { font-size:0.75rem; font-weight:600; color:var(--text-main); text-transform:uppercase; letter-spacing:0.03em; }
.sv-form-label .req { color:var(--red-600); margin-left:2px; }
.sv-form-input { padding:10px 14px; border:1px solid var(--border-light); border-radius:8px; font-size:0.85rem; color:var(--text-main); background:#fff; transition:border-color 0.2s, box-shadow 0.2s; outline:none; }
.sv-form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.sv-form-textarea { resize:vertical; min-height:80px; font-family:inherit; }

/* Checklist */
.sv-checklist { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.sv-check-item { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; background:var(--neutral-50); border:1px solid #f0f0f0; cursor:pointer; transition:all 0.2s; }
.sv-check-item:hover { background:#f0f5ff; border-color:var(--primary); }
.sv-check-item input[type=checkbox] { width:16px; height:16px; border-radius:4px; accent-color:var(--primary); cursor:pointer; }
.sv-check-item label { font-size:0.8rem; font-weight:500; color:var(--text-main); cursor:pointer; }

/* Fuel gauge */
.sv-fuel { display:flex; align-items:center; gap:12px; }
.sv-fuel-bar { flex:1; height:20px; background:var(--neutral-100); border-radius:10px; overflow:hidden; position:relative; }
.sv-fuel-fill { height:100%; background:linear-gradient(90deg,var(--amber-500),var(--green-500)); border-radius:10px; transition:width 0.3s; }
.sv-fuel-val { font-size:0.8rem; font-weight:700; color:var(--text-main); width:40px; text-align:right; }

/* Buttons */
.sv-actions { display:flex; gap:12px; justify-content:flex-end; padding:20px; border-top:1px solid var(--border-light,#f0f0f0); }
.sv-btn { padding:10px 20px; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; border:none; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.sv-btn--primary { background:var(--primary); color:#fff; }
.sv-btn--primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.sv-btn--outline { background:#fff; color:var(--text-main); border:1px solid var(--border-light); }
.sv-btn--outline:hover { background:var(--neutral-50); }
.sv-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Success message */
.sv-success { display:none; padding:32px; text-align:center; }
.sv-success span { font-size:60px; display:block; margin-bottom:12px; color:var(--green-500); }
.sv-success h2 { font-size:1.2rem; font-weight:700; color:var(--text-main); margin-bottom:4px; }
.sv-success p { font-size:0.85rem; color:var(--text-light); }

/* --- From: Popup_Service_Consignment.html --- */
.csg-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.csg-popup-overlay.active { opacity: 1; pointer-events: auto; }
.csg-popup-overlay.active .csg-popup { transform: translateY(0) scale(1); }
.csg-popup {
    background: var(--surface); border-radius: 16px; width: 700px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.csg-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); color: var(--text-inverse);
}
.csg-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.csg-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.csg-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.csg-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.csg-form-section { margin-bottom: 20px; }
.csg-form-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.csg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.csg-form-grid.single { grid-template-columns: 1fr; }
.csg-field { display: flex; flex-direction: column; gap: 4px; }
.csg-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.csg-field label .req { color: var(--red-500); }
.csg-field input, .csg-field select, .csg-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
    transition: border 0.2s;
}
.csg-field input:focus, .csg-field select:focus, .csg-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.csg-field textarea { resize: vertical; min-height: 60px; }
.csg-popup-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-alt);
}
.csg-btn {
    padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
}
.csg-btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.csg-btn-primary:hover { opacity: 0.9; }
.csg-btn-secondary { background: var(--surface); color: var(--text-main); }
.csg-btn-secondary:hover { background: var(--surface-alt); }

/* --- From: Popup_Service_Painting.html --- */
.pnt-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.pnt-popup-overlay.active { opacity: 1; pointer-events: auto; }
.pnt-popup-overlay.active .pnt-popup { transform: translateY(0) scale(1); }
.pnt-popup {
    background: var(--surface); border-radius: 16px; width: 700px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.pnt-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); color: var(--text-inverse);
}
.pnt-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.pnt-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pnt-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.pnt-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.pnt-form-section { margin-bottom: 20px; }
.pnt-form-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.pnt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pnt-form-grid.single { grid-template-columns: 1fr; }
.pnt-field { display: flex; flex-direction: column; gap: 4px; }
.pnt-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.pnt-field label .req { color: var(--red-500); }
.pnt-field input, .pnt-field select, .pnt-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
    transition: border 0.2s;
}
.pnt-field input:focus, .pnt-field select:focus, .pnt-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.pnt-field textarea { resize: vertical; min-height: 60px; }
.pnt-popup-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-alt);
}
.pnt-btn {
    padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
}
.pnt-btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.pnt-btn-primary:hover { opacity: 0.9; }
.pnt-btn-secondary { background: var(--surface); color: var(--text-main); }
.pnt-btn-secondary:hover { background: var(--surface-alt); }

/* --- From: Popup_Service_Repair.html --- */
.rpr-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.rpr-popup-overlay.active { opacity: 1; pointer-events: auto; }
.rpr-popup-overlay.active .rpr-popup { transform: translateY(0) scale(1); }
.rpr-popup {
    background: var(--surface); border-radius: 16px; width: 760px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.rpr-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg,#0ea5e9,var(--blue-500)); color: #fff;
}
.rpr-popup-header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.rpr-popup-header .rpr-sub { font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }
.rpr-popup-header .close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.2); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    transition: background 0.2s;
}
.rpr-popup-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.rpr-popup-body { padding: 24px; overflow-y: auto; flex: 1; }
.rpr-form-section { margin-bottom: 20px; }
.rpr-form-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
}
.rpr-form-section-title .material-symbols-outlined { font-size: 16px; }
.rpr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rpr-form-grid.single { grid-template-columns: 1fr; }
.rpr-form-grid.triple { grid-template-columns: 1fr 1fr 1fr; }
.rpr-field { display: flex; flex-direction: column; gap: 4px; }
.rpr-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.rpr-field label .req { color: var(--red-500); }
.rpr-field input, .rpr-field select, .rpr-field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8125rem; background: var(--surface); color: var(--text-main);
    transition: border 0.2s;
}
.rpr-field input:focus, .rpr-field select:focus, .rpr-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.rpr-field textarea { resize: vertical; min-height: 60px; }
.rpr-popup-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-alt);
}
.rpr-btn {
    padding: 9px 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.rpr-btn-primary { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.rpr-btn-primary:hover { background: #0284c7; }
.rpr-btn-secondary { background: var(--surface); color: var(--text-main); }
.rpr-btn-secondary:hover { background: var(--surface-alt); }

/* Priority badges */
.rpr-priority-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rpr-priority-chip {
    padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
    border: 2px solid var(--border); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 4px;
}
.rpr-priority-chip:hover { border-color: var(--primary); }
.rpr-priority-chip.active { border-color: currentColor; background: currentColor; }
.rpr-priority-chip.active span { color: #fff; }
.rpr-priority-chip[data-pri="NORMAL"] { color: var(--blue-500); }
.rpr-priority-chip[data-pri="NORMAL"].active { background: var(--blue-500); border-color: var(--blue-500); }
.rpr-priority-chip[data-pri="URGENT"] { color: var(--amber-500); }
.rpr-priority-chip[data-pri="URGENT"].active { background: var(--amber-500); border-color: var(--amber-500); }
.rpr-priority-chip[data-pri="CRITICAL"] { color: var(--red-500); }
.rpr-priority-chip[data-pri="CRITICAL"].active { background: var(--red-500); border-color: var(--red-500); }

@media (max-width:640px) {
    .rpr-form-grid { grid-template-columns: 1fr; }
    .rpr-form-grid.triple { grid-template-columns: 1fr; }
}

/* --- From: Page_Auth_Login.html --- */
/* RESET & BASE */
        * { box-sizing: border-box; }
        body { margin: 0; padding: 0; font-family: var(--font-main); color: var(--text-main); background-color: var(--surface); }

        /* LAYOUT & GLASSMORPHISM BACKGROUND */
        .login-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            width: 100%;
            /* PWA Safe Area */
            padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
            background: #f0f4f8; /* fallback solid color */
            overflow: hidden;
            z-index: 1;
        }

        /* Colorful blobs utilizing system variables */
        .login-container::before, .login-container::after, .blob-extra {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.6;
            animation: floatBlob 15s infinite alternate ease-in-out;
        }
        .login-container::before {
            top: -10vh;
            right: -10vw;
            width: 50vw;
            height: 50vw;
            min-width: 300px;
            min-height: 300px;
            background: var(--primary); /* Navy Blue */
        }
        .login-container::after {
            bottom: -15vh;
            left: -10vw;
            width: 60vw;
            height: 60vw;
            min-width: 400px;
            min-height: 400px;
            background: var(--secondary); /* Orange */
            animation-delay: -5s;
            opacity: 0.4;
        }
        .blob-extra {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40vw;
            height: 40vw;
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.6;
            background: #4A90E2; /* Lighter blue to bridge colors */
            animation: floatBlob 20s infinite alternate ease-in-out;
            animation-delay: -10s;
        }

        @keyframes floatBlob {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(50px, -50px) scale(1.1); }
        }

        /* GLASS CARD */
        .login-container .login-content {
            width: min(100%, 440px);
            max-width: 440px;
            flex: 0 0 auto;
            margin: 0 auto;
            min-width: 0;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            padding: 40px;
            border-radius: 24px;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }

        /* HEADER INSIDE CARD */
        .glass-header {
            text-align: center;
            margin-bottom: 32px;
        }
        .glass-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px auto;
            background: var(--surface);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255,255,255, 0.8);
        }
        .glass-logo img { max-width: 52px; max-height: 52px; object-fit: contain; }
        .glass-logo svg { width: 44px; height: 44px; fill: var(--primary); }

        .brand-title {
            font-size: 24px;
            font-weight: 900;
            margin: 0 0 4px 0;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: -0.5px;
        }
        
        .form-subtitle {
            font-size: 15px;
            color: var(--text-light);
            margin: 0;
            line-height: 1.5;
        }

        /* MOBILE ADJUSTMENTS */
        @media (max-width: 767px) {
            .login-content { padding: 32px 24px; border-radius: 24px; }
            .brand-title { font-size: 20px; }
        }

        /* FORM CONTROLS */
        .form-group { margin-bottom: 20px; }
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-main);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }
        
        .input-group { position: relative; width: 100%; }
        
        .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            pointer-events: none;
            transition: color 0.2s;
            fill: currentColor;
            display: block;
        }
        .input-icon use { fill: currentColor; }

        .form-input {
            width: 100%;
            height: 52px;
            padding: 0 16px 0 48px;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 16px;
            color: var(--text-main);
            background: var(--surface);
            transition: all 0.2s;
            font-family: inherit;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(37, 71, 139, 0.1);
        }
        .form-input:focus ~ .input-icon {
            color: var(--primary);
        }

        .password-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            display: flex;
            align-items: center;
        }
        .password-toggle svg, .password-toggle use { fill: currentColor; color: currentColor; }
        .password-toggle:hover { color: var(--primary); }

        /* BUTTON */
        .btn-submit {
            width: 100%;
            height: 52px;
            margin-top: 16px;
            background-color: var(--secondary);
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: opacity 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-submit:hover { opacity: 0.9; }
        .btn-submit:active { transform: scale(0.98); }
        .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: scale(1); }

        /* FOOTER */
        .form-footer {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--text-light);
            font-size: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .link-primary {
            color: var(--primary);
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
        }
        .link-divider { color: var(--border); }
        .link-primary:hover { text-decoration: underline; }
        .copyright { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); opacity: 0.7; }

        /* SUPPORT BUTTON */
        .login-container .fab-support {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 48px;
            height: 48px;
            background-color: var(--secondary);
            color: white;
            border-radius: 50%;
            border: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
            z-index: 100;
        }
        .login-container .fab-support svg,
        .login-container .fab-support use {
            display: block;
            color: #fff;
            fill: currentColor;
        }
        .fab-support:hover { transform: scale(1.1); }
        @media (max-width: 767px) {
            .fab-support { display: none; }
        }

        /* MODAL */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
        .modal-overlay.active { display: flex; }
        .login-container .modal-card {
            background: white;
            border-radius: 16px;
            width: min(calc(100vw - 32px), 400px);
            max-width: 400px;
            flex: 0 0 auto;
            margin: 0 auto;
            min-width: 0;
            padding: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes modalPop {
            0% { transform: scale(0.9); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 12px;
        }
        .modal-title { font-size: 20px; font-weight: 700; color: var(--primary); margin: 0; }
        .btn-close { background: none; border: none; cursor: pointer; color: var(--text-light); }
        .btn-close svg, .btn-close use { fill: currentColor; color: currentColor; }
        
        .admin-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 12px;
        }
        .admin-avatar {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex; align-items: center; justify-content: center;
            font-weight: bold;
        }
        .admin-info { flex: 1; }
        .admin-name { font-weight: bold; font-size: 14px; margin-bottom: 2px; }
        .admin-meta { font-size: 12px; color: var(--text-light); }
        
        .role-badge { 
            display: inline-block; padding: 2px 6px; 
            border: 1px solid var(--primary); color: var(--primary); 
            border-radius: 4px; font-size: 10px; font-weight: bold; margin-right: 4px; 
        }

        .admin-action-btn {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--zalo-bg);
            color: var(--zalo-blue);
            display: flex; align-items: center; justify-content: center;
            text-decoration: none;
            transition: background 0.2s;
        }
        .admin-action-btn:hover { background: #d0e9fc; }

        /* TOAST (lightweight — no Script_Global needed) */
        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
        .toast { padding: 12px 20px; border-radius: 8px; color: white; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: toastIn 0.3s ease; max-width: 400px; }
        .toast.success { background: #48bb78; }
        .toast.error { background: #f56565; }
        .toast.info { background: #4299e1; }
        @keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- From: Page_Dashboard.html --- */
/* ====== DASHBOARD DESIGN SYSTEM ====== */
.dash-page { padding: 28px; max-width: 1400px; margin: 0 auto; }

/* PAGE HEADER */
.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.dash-header-left { display:flex; align-items:center; gap:14px; }
.dash-header-icon { width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#3b6ec9);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px var(--primary-shadow,rgba(37,71,139,0.2)); }
.dash-header-icon .material-symbols-outlined { font-size:26px;color:#fff; }
.dash-header h1 { font-size:1.375rem;font-weight:800;color:var(--text-main);margin:0;line-height:1.2; }
.dash-header h1 small { display:block;font-size:0.8125rem;font-weight:500;color:var(--text-light);margin-top:2px; }
.dash-date-badge { display:flex;align-items:center;gap:8px;background:var(--surface);padding:8px 16px;border-radius:10px;border:1px solid var(--border);font-size:0.8125rem;font-weight:600;color:var(--text-light); }
.dash-date-badge .material-symbols-outlined { font-size:16px;color:var(--primary); }

/* MODULE TABS — pill design */
.dash-tabs { display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:14px;border:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin-bottom:28px; }
.dash-tabs::-webkit-scrollbar { display:none; }
.dash-tab { flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;font-size:0.8125rem;font-weight:600;color:var(--text-light);cursor:pointer;border:none;background:transparent;white-space:nowrap;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);min-width:120px; }
.dash-tab:hover { background:var(--primary-light,rgba(37,71,139,0.06));color:var(--primary); }
.dash-tab.active { background:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-shadow,rgba(37,71,139,0.25)); }
.dash-tab .material-symbols-outlined { font-size:20px; }

/* TAB PANELS */
.dash-panel { display:none;animation:dashFadeIn 0.35s cubic-bezier(0.4,0,0.2,1); }
.dash-panel.active { display:block; }
@keyframes dashFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* STATS ROW */
.dash-stats-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px; }
.dash-stat { background:var(--surface);border-radius:14px;padding:20px;border:1px solid var(--border);transition:all 0.25s ease;cursor:default; }
.dash-stat:hover { border-color:var(--primary-light,rgba(37,71,139,0.2));box-shadow:0 4px 16px rgba(0,0,0,0.04);transform:translateY(-2px); }
.dash-stat-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.dash-stat-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center; }
.dash-stat-icon .material-symbols-outlined { font-size:22px; }
.dash-stat-icon.blue { background:var(--info-bg);color:var(--info); }
.dash-stat-icon.orange { background:var(--warning-bg);color:var(--warning); }
.dash-stat-icon.green { background:var(--success-bg);color:var(--success); }
.dash-stat-icon.purple { background:var(--purple-border);color:var(--purple-600); }
.dash-stat-icon.red { background:var(--danger-bg);color:var(--danger); }
.dash-stat-change { font-size:0.6875rem;font-weight:700;display:flex;align-items:center;gap:2px; }
.dash-stat-change.up { color:var(--success); }
.dash-stat-change.down { color:var(--danger); }
.dash-stat-change .material-symbols-outlined { font-size:14px; }
.dash-stat-value { font-size:1.5rem;font-weight:800;color:var(--text-main);margin-bottom:4px; }
.dash-stat-label { font-size:0.75rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:0.3px; }

/* QUICK ACTIONS */
.dash-actions { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px; }
.dash-action-card { display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all 0.25s ease; }
.dash-action-card:hover { border-color:var(--primary);background:var(--primary-light,rgba(37,71,139,0.04));transform:translateX(4px); }
.dash-action-card .action-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.dash-action-card .action-text h4 { font-size:0.8125rem;font-weight:700;color:var(--text-main);margin:0 0 2px 0; }
.dash-action-card .action-text p { font-size:0.6875rem;color:var(--text-light);margin:0; }
.dash-action-card .action-arrow { margin-left:auto;color:var(--text-light);font-size:18px;opacity:0;transition:opacity 0.2s; }
.dash-action-card:hover .action-arrow { opacity:1; }

/* EMBEDDED CONTENT */
.dash-embed { background:var(--surface);border-radius:16px;border:1px solid var(--border);padding:24px;min-height:300px; }
.dash-embed-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border); }
.dash-embed-header h3 { font-size:1rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:8px;margin:0; }
.dash-embed-header h3 .material-symbols-outlined { font-size:20px;color:var(--primary); }
.dash-embed-header .embed-link { font-size:0.75rem;color:var(--primary);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none; }
.dash-embed-header .embed-link:hover { text-decoration:underline; }

/* LOADING STATE */
.dash-loading-state { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px;color:var(--text-light);gap:16px; }
.dash-loading-state .spin { font-size:36px;opacity:0.4;animation:dashSpin 1s linear infinite; }
@keyframes dashSpin { to{transform:rotate(360deg)} }

/* PLACEHOLDER */
.dash-placeholder { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;text-align:center;color:var(--text-light);background:var(--bg);border-radius:14px;border:1px dashed var(--border);padding:40px; }
.dash-placeholder .material-symbols-outlined { font-size:52px;opacity:0.25;margin-bottom:16px; }
.dash-placeholder h3 { font-size:0.9375rem;font-weight:700;color:var(--text-main);margin:0 0 6px 0; }
.dash-placeholder p { font-size:0.8125rem;max-width:340px;margin:0; }
.dash-placeholder .btn-go { margin-top:20px;padding:10px 24px;border-radius:10px;background:var(--primary);color:#fff;border:none;font-size:0.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s; }
.dash-placeholder .btn-go:hover { background:var(--primary-hover);box-shadow:0 4px 12px var(--primary-shadow,rgba(37,71,139,0.2)); }

@media (max-width: 768px) {
    .dash-page { padding: 16px; }
    .dash-tab { min-width:unset;padding:10px 12px;font-size:0.75rem; }
    .dash-stats-row { grid-template-columns:repeat(2,1fr); }
    .dash-actions { grid-template-columns:1fr; }
    .dash-header h1 { font-size:1.125rem; }
}

/* --- From: Page_Dashboard.html --- */
/* CEO Dashboard v2 — scoped under #panel-executive */
#panel-executive .ceo-v2 { max-width: 1400px; margin: 0 auto; }
#panel-executive .ceo-v2-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
#panel-executive .ceo-v2-header h2 { font-size:1.15rem; font-weight:800; color:var(--text-main); display:flex; align-items:center; gap:10px; margin:0; }
#panel-executive .ceo-v2-header h2 .material-symbols-outlined { color:var(--primary); font-size:24px; }
#panel-executive .ceo-period-tabs { display:flex; gap:4px; background:var(--surface); border-radius:10px; padding:4px; border:1px solid var(--border); }
#panel-executive .ceo-period-tab { padding:6px 16px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-light); transition:all 0.2s; }
#panel-executive .ceo-period-tab.active { background:var(--primary); color:white; }
#panel-executive .ceo-period-tab:hover:not(.active) { background:var(--primary-light); color:var(--primary); }
#panel-executive .ceo-summary-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-bottom:24px; }
@media (max-width: 1200px) { #panel-executive .ceo-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { #panel-executive .ceo-summary-grid { grid-template-columns: repeat(2, 1fr); } }
#panel-executive .ceo-summary-card { background:var(--surface); border-radius:12px; padding:16px 20px; border:1px solid var(--border); position:relative; overflow:hidden; transition: transform 0.2s, box-shadow 0.2s; }
#panel-executive .ceo-summary-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
#panel-executive .ceo-summary-card .card-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:20px; }
#panel-executive .ceo-summary-card .card-value { font-size:1.5rem; font-weight:800; color:var(--text-main); }
#panel-executive .ceo-summary-card .card-label { font-size:0.7rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }
#panel-executive .ceo-charts-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:24px; }
@media (max-width: 1024px) { #panel-executive .ceo-charts-grid { grid-template-columns: 1fr; } }
#panel-executive .ceo-chart-card { background:var(--surface); border-radius:14px; padding:20px; border:1px solid var(--border); }
#panel-executive .ceo-chart-title { font-size:0.85rem; font-weight:700; color:var(--text-main); margin-bottom:16px; display:flex; align-items:center; gap:6px; }
#panel-executive .ceo-chart-title .material-symbols-outlined { font-size:18px; color:var(--primary); }
#panel-executive .exec-chart-container { position:relative; height:280px; }
#panel-executive .exec-chart-container canvas { width:100% !important; max-height:280px; }
#panel-executive .ceo-top-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
#panel-executive .ceo-top-item:last-child { border-bottom:none; }
#panel-executive .ceo-top-rank { width:24px; height:24px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
#panel-executive .ceo-top-rank.gold { background:var(--warning-bg); color:var(--warning); }
#panel-executive .ceo-top-rank.silver { background:var(--neutral-100); color:var(--neutral-500); }
#panel-executive .ceo-top-rank.bronze { background:#FED7AA; color:#EA580C; }
#panel-executive .ceo-top-name { flex:1; margin-left:10px; font-size:13px; font-weight:600; color:var(--text-main); }
#panel-executive .ceo-top-value { font-size:13px; font-weight:700; color:var(--primary); }
#panel-executive .ceo-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 768px) { #panel-executive .ceo-bottom-grid { grid-template-columns: 1fr; } }
#panel-executive .ceo-exec-loading { text-align:center; padding:60px; color:var(--text-light); font-size:14px; }
#panel-executive .ceo-exec-loading span { display:block; font-size:36px; margin-bottom:12px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* --- From: Page_Notification_List.html --- */
/* Notification Page */
.ntf-page { max-width: 800px; margin: 0 auto; }
.ntf-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.ntf-hdr h1 { font-size:1.25rem; font-weight:800; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.ntf-hdr h1 .material-symbols-outlined { color:var(--primary); }
.ntf-actions { display:flex; gap:8px; }
.ntf-btn-mark {
    padding:6px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-main); font-size:12px; cursor:pointer;
    display:flex; align-items:center; gap:4px; font-weight:600;
}
.ntf-btn-mark:hover { background:var(--bg); border-color:var(--primary); color:var(--primary); }

/* Filter tabs */
.ntf-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--border); padding-bottom:0; }
.ntf-tab {
    padding:8px 16px; font-size:13px; font-weight:600; color:var(--text-light);
    cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
    transition:all 0.15s; background:none; border-top:none; border-left:none; border-right:none;
}
.ntf-tab:hover { color:var(--text-main); }
.ntf-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.ntf-tab .ntf-count {
    font-size:10px; font-weight:700; background:var(--danger); color:white;
    border-radius:10px; padding:1px 6px; margin-left:4px;
}

/* Notification items */
.ntf-list { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ntf-item {
    display:flex; align-items:flex-start; gap:14px; padding:16px 20px;
    border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s;
    position:relative;
}
.ntf-item:last-child { border-bottom:none; }
.ntf-item:hover { background:var(--bg); }
.ntf-item.unread { background:rgba(37,99,235,0.03); }
.ntf-item.unread::after {
    content:''; position:absolute; right:20px; top:50%; transform:translateY(-50%);
    width:8px; height:8px; border-radius:50%; background:var(--primary);
}

.ntf-icon {
    width:42px; height:42px; min-width:42px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}
.ntf-icon .material-symbols-outlined { font-size:20px; }
.ntf-icon.approval { background:rgba(245,158,11,0.1); color:var(--amber-500); }
.ntf-icon.approved { background:rgba(16,185,129,0.1); color:#10b981; }
.ntf-icon.rejected { background:rgba(239,68,68,0.1); color:var(--red-500); }
.ntf-icon.system   { background:rgba(59,130,246,0.1); color:var(--blue-500); }
.ntf-icon.reminder { background:rgba(139,92,246,0.1); color:var(--purple-500); }

.ntf-body { flex:1; min-width:0; }
.ntf-title { font-size:13.5px; font-weight:600; color:var(--text-main); line-height:1.3; margin-bottom:3px; }
.ntf-desc { font-size:12.5px; color:var(--text-light); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ntf-meta { display:flex; gap:12px; margin-top:6px; font-size:11px; color:var(--text-muted); }
.ntf-meta-item { display:flex; align-items:center; gap:3px; }
.ntf-meta-item .material-symbols-outlined { font-size:14px; }

/* Empty */
.ntf-empty { text-align:center; padding:60px 20px; color:var(--text-light); }
.ntf-empty .material-symbols-outlined { font-size:52px; opacity:0.15; display:block; margin-bottom:12px; }

/* Loading */
.ntf-loading { text-align:center; padding:40px; color:var(--text-light); }
.ntf-loading .spin { font-size: 28px; }

/* --- From: Page_System_ActivityLog.html --- */
/* Activity Log Page */
.alog-page { max-width: 1100px; margin: 0 auto; }

/* Filters */
.alog-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.alog-filter-select {
    padding:7px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--surface); color:var(--text-main); cursor:pointer;
}
.alog-filter-select:focus { border-color:var(--primary); outline:none; }
.alog-search-input {
    padding:7px 12px 7px 36px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--surface); color:var(--text-main); width:220px;
    position:relative;
}

/* Stats uses tp-kpi-grid + tp-kpi-card from Style_TablePage */

/* Timeline */
.alog-timeline { position:relative; padding-left:36px; }
.alog-timeline::before {
    content:''; position:absolute; left:15px; top:0; bottom:0;
    width:2px; background:var(--border); border-radius:1px;
}
.alog-day-group { margin-bottom:24px; }
.alog-day-label {
    font-size:0.7rem; font-weight:700; color:var(--text-light);
    text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px;
    padding:4px 10px; background:var(--bg); border-radius:4px; display:inline-block;
    position:relative;
}
.alog-day-label::before {
    content:''; position:absolute; left:-25px; top:50%; transform:translateY(-50%);
    width:10px; height:10px; background:var(--primary); border-radius:50%;
    border:2px solid var(--surface); z-index:1;
}

.alog-entry {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; margin-bottom:8px; display:flex; align-items:flex-start; gap:12px;
    transition:box-shadow 0.15s; position:relative;
}
.alog-entry:hover { box-shadow:var(--shadow-md); }
.alog-entry::before {
    content:''; position:absolute; left:-25px; top:18px;
    width:8px; height:8px; background:var(--border); border-radius:50%;
}

.alog-icon {
    width:36px; height:36px; min-width:36px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.alog-icon.create { background:var(--green-bg); color:var(--green-500); }
.alog-icon.update { background:var(--blue-bg); color:var(--blue-500); }
.alog-icon.delete { background:var(--red-bg); color:var(--red-500); }
.alog-icon.other  { background:var(--amber-bg); color:var(--amber-500); }

.alog-body { flex:1; min-width:0; }
.alog-body-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:2px; }
.alog-user { font-weight:600; font-size:13px; color:var(--text-main); }
.alog-time { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.alog-action {
    display:inline-block; padding:2px 8px; border-radius:4px;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
}
.alog-action.create { background:var(--green-bg); color:var(--green-500); }
.alog-action.update { background:var(--blue-bg); color:var(--blue-500); }
.alog-action.delete { background:var(--red-bg); color:var(--red-500); }
.alog-action.other  { background:var(--amber-bg); color:var(--amber-500); }

.alog-detail { font-size:12.5px; color:var(--text-light); margin-top:4px; line-height:1.4; }
.alog-module { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Empty & Pagination use tp-empty / tp-pagination from Style_TablePage */

@media (max-width:768px) {
    .alog-timeline { padding-left:24px; }
    .alog-timeline::before { left:8px; }
    .alog-day-label::before { left:-18px; width:8px; height:8px; }
    .alog-entry::before { left:-18px; width:6px; height:6px; }
}

/* ─── Page Tabs ─── */
.alog-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--border); }
.alog-tab {
    padding:10px 24px; font-size:13px; font-weight:700; cursor:pointer; border:none;
    background:transparent; color:var(--text-light); position:relative;
    border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s;
}
.alog-tab:hover { color:var(--text-main); }
.alog-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.alog-tab .material-symbols-outlined { font-size:16px; vertical-align:middle; margin-right:4px; }
.alog-panel { display:none; }
.alog-panel.active { display:block; }

/* ─── Audit Trail Table ─── */
.at-table-wrap { background:var(--surface); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.at-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.at-table thead th {
    background:var(--bg); color:var(--text-light); font-size:0.6875rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    padding:10px 12px; text-align:left; border-bottom:1px solid var(--border);
}
.at-table tbody td {
    padding:9px 12px; border-bottom:1px solid var(--border-light, rgba(0,0,0,0.04));
    vertical-align:top; font-size:12.5px;
}
.at-table tbody tr:hover { background:rgba(37,71,139,0.03); }
.at-badge {
    display:inline-block; padding:2px 8px; border-radius:4px;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
}
.at-badge.create { background:var(--green-bg); color:var(--green-500); }
.at-badge.update { background:var(--blue-bg); color:var(--blue-500); }
.at-badge.delete { background:var(--red-bg); color:var(--red-500); }
.at-diff { font-family:'Consolas','Monaco',monospace; font-size:11px; line-height:1.5; }
.at-diff-old { background:rgba(239,68,68,0.08); color:#DC2626; padding:1px 4px; border-radius:3px; text-decoration:line-through; }
.at-diff-new { background:rgba(16,185,129,0.08); color:#059669; padding:1px 4px; border-radius:3px; font-weight:600; }
.at-diff-arrow { color:var(--text-muted); margin:0 4px; }
.at-field-name { font-size:10px; color:var(--text-muted); font-weight:600; }
.at-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.at-filters select, .at-filters input {
    padding:7px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; background:var(--surface); color:var(--text-main);
}
.at-filters select:focus, .at-filters input:focus { border-color:var(--primary); outline:none; }
/* at-empty + at-pagination use tp-empty / tp-pagination from Style_TablePage */
.at-pagination { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.at-pagination button {
    padding:6px 14px; border-radius:6px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-main); font-size:13px; cursor:pointer;
}
.at-pagination button:hover { background:var(--bg); }
.at-pagination button:disabled { opacity:0.4; cursor:not-allowed; }

/* --- From: Page_System_FileManager.html --- */
.fm-page { max-width: 1200px; margin: 0 auto; }
.fm-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.fm-header h1 { font-size:1.25rem; font-weight:800; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.fm-header h1 .material-symbols-outlined { color:var(--primary); }
.fm-actions { display:flex; gap:8px; }

/* Upload Zone */
.fm-upload-zone {
    border:2px dashed var(--border); border-radius:14px; padding:32px; text-align:center;
    margin-bottom:24px; cursor:pointer; transition: all 0.3s; background:var(--surface);
}
.fm-upload-zone:hover, .fm-upload-zone.drag-over { border-color:var(--primary); background:var(--primary-light); }
.fm-upload-zone .material-symbols-outlined { font-size:40px; color:var(--primary); display:block; margin-bottom:8px; }
.fm-upload-zone p { font-size:13px; color:var(--text-light); margin:0; }
.fm-upload-zone p strong { color:var(--primary); }

/* DB stats bar */
.fm-stats {
    display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.fm-stat {
    background:var(--surface); border-radius:10px; padding:10px 16px;
    border:1px solid var(--border); display:flex; align-items:center; gap:8px;
}
.fm-stat-icon { font-size:20px; color:var(--primary); }
.fm-stat-num { font-size:1.1rem; font-weight:800; color:var(--primary); }
.fm-stat-label { font-size:0.6875rem; color:var(--text-light); }

/* File Grid */
.fm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
@media (max-width: 768px) { .fm-grid { grid-template-columns: repeat(2, 1fr); } }

.fm-card {
    background:var(--surface); border-radius:12px; border:1px solid var(--border);
    overflow:hidden; transition: transform 0.2s, box-shadow 0.2s; cursor:pointer;
}
.fm-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.fm-card.fm-active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,71,139,0.15); }

.fm-card-thumb {
    height:120px; background:var(--neutral-100); display:flex; align-items:center;
    justify-content:center; overflow:hidden; position:relative;
}
.fm-card-thumb img { width:100%; height:100%; object-fit:cover; }
.fm-card-thumb .material-symbols-outlined { font-size:44px; color:var(--text-light); }

/* DB tracking badge */
.fm-db-badge {
    position:absolute; bottom:6px; right:6px; padding:2px 6px; border-radius:4px;
    font-size:0.5625rem; font-weight:700; background:var(--success-bg); color:#166534;
    display:flex; align-items:center; gap:3px;
}
.fm-db-badge span { font-size:11px; }
.fm-db-badge.untracked { background:var(--neutral-100); color:var(--text-light); }

.fm-card-info { padding:12px; }
.fm-card-name { font-size:13px; font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-card-meta { font-size:11px; color:var(--text-light); margin-top:4px; display:flex; justify-content:space-between; }

.fm-card-actions {
    display:flex; gap:4px; padding:8px 12px; border-top:1px solid var(--border); justify-content:flex-end;
}
.fm-card-actions button {
    padding:4px 8px; border:none; background:transparent; cursor:pointer; border-radius:6px;
    font-size:12px; color:var(--text-light); transition:all 0.2s;
}
.fm-card-actions button:hover { background:var(--primary-light); color:var(--primary); }
.fm-card-actions button.danger:hover { background:var(--danger-bg); color:var(--danger); }

.fm-empty { text-align:center; padding:60px; color:var(--text-light); }
.fm-empty span { display:block; font-size:48px; margin-bottom:12px; }
.fm-loading { text-align:center; padding:60px; color:var(--text-light); }

/* ====== METADATA SIDEBAR ====== */
.fm-detail-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.3); z-index:900; animation: fm-fade-in 0.2s;
}
.fm-detail-overlay.open { display:block; }
@keyframes fm-fade-in { from { opacity:0; } to { opacity:1; } }

.fm-detail-panel {
    position:fixed; top:0; right:-420px; width:400px; max-width:90vw; height:100vh;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-4px 0 20px rgba(0,0,0,0.1); z-index:901;
    transition:right 0.3s ease; overflow-y:auto;
    display:flex; flex-direction:column;
}
.fm-detail-panel.open { right:0; }

.fm-detail-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border); background:var(--bg-section);
}
.fm-detail-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-main); margin:0; display:flex; align-items:center; gap:6px; }
.fm-detail-header h3 span { font-size:18px; color:var(--primary); }
.fm-detail-close {
    border:none; background:transparent; cursor:pointer; color:var(--text-light);
    width:32px; height:32px; border-radius:8px; display:flex; align-items:center;
    justify-content:center; transition:all 0.2s;
}
.fm-detail-close:hover { background:var(--neutral-100); color:var(--text-main); }

.fm-detail-body { flex:1; padding:20px; }
.fm-detail-preview {
    background:var(--neutral-100); border-radius:10px; overflow:hidden; margin-bottom:16px;
    height:160px; display:flex; align-items:center; justify-content:center;
}
.fm-detail-preview img { width:100%; height:100%; object-fit:cover; }
.fm-detail-preview .material-symbols-outlined { font-size:48px; color:var(--text-light); }

.fm-detail-info { margin-bottom:20px; }
.fm-detail-info-row {
    display:flex; justify-content:space-between; padding:8px 0;
    border-bottom:1px solid var(--neutral-50); font-size:0.8125rem;
}
.fm-detail-info-label { color:var(--text-light); font-size:0.6875rem; font-weight:600; text-transform:uppercase; }
.fm-detail-info-value { color:var(--text-main); font-weight:500; text-align:right; max-width:200px; overflow:hidden; text-overflow:ellipsis; }

/* DB metadata form */
.fm-meta-section {
    background:var(--bg-section); border:1px solid var(--border); border-radius:10px; padding:16px;
}
.fm-meta-title {
    font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--primary); margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.fm-meta-title span { font-size:16px; }
.fm-meta-field { margin-bottom:12px; }
.fm-meta-field label {
    font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--text-light); display:block; margin-bottom:4px;
}
.fm-meta-field input, .fm-meta-field select, .fm-meta-field textarea {
    width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px;
    font-size:0.8125rem; background:var(--surface); color:var(--text-main);
    font-family:inherit; resize:vertical;
}
.fm-meta-field input:focus, .fm-meta-field select:focus, .fm-meta-field textarea:focus { border-color:var(--primary); outline:none; }
.fm-meta-actions { display:flex; gap:8px; margin-top:14px; }
.fm-meta-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:8px 16px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); cursor:pointer; font-size:0.8125rem;
    font-weight:600; transition:all 0.2s; color:var(--text-main);
}
.fm-meta-btn:hover { border-color:var(--primary); color:var(--primary); }
.fm-meta-btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.fm-meta-btn.primary:hover { opacity:0.9; }
.fm-meta-btn span { font-size:16px; }
.fm-meta-saved {
    display:none; padding:8px 12px; background:var(--success-bg); color:#166534;
    border-radius:6px; font-size:0.75rem; font-weight:600; margin-top:8px;
    align-items:center; gap:4px;
}

/* --- From: Page_System_Help.html --- */
/* ═══ HELP CENTER STYLES ═══ */

/* TABS */
.help-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    border-bottom: 2px solid var(--border); padding-bottom: 0;
}
.help-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px; font-size: 14px; font-weight: 600;
    color: var(--text-light); background: none; border: none;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    cursor: pointer; transition: all 0.2s;
    font-family: var(--font-main);
}
.help-tab:hover { color: var(--primary); }
.help-tab.active {
    color: var(--primary); border-bottom-color: var(--primary);
}
.help-tab .material-symbols-outlined { font-size: 20px; }

/* TAB CONTENT */
.help-tab-content.hidden { display: none !important; }

/* SEARCH */
.help-search-bar {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 12px 16px; margin-bottom: 24px;
    transition: border-color 0.2s;
}
.help-search-bar:focus-within { border-color: var(--primary); }
.help-search-bar .material-symbols-outlined { color: var(--text-muted); font-size: 22px; }
.help-search-bar input {
    flex: 1; border: none; outline: none; font-size: 14px;
    background: transparent; color: var(--text-main);
    font-family: var(--font-main);
}

/* MODULE GRID */
.help-module-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 1024px) { .help-module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .help-module-grid { grid-template-columns: 1fr; } }

.help-module-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 24px;
    cursor: pointer; transition: all 0.25s;
    box-shadow: var(--shadow-sm);
}
.help-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.help-card-wide { grid-column: 1 / -1; }

.help-card-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.help-card-icon .material-symbols-outlined { font-size: 26px; }
.help-module-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--text-main); }
.help-card-sub { font-size: 12px; color: var(--text-light); margin: 0 0 12px; }
.help-card-count {
    display: inline-block; font-size: 11px; font-weight: 600;
    color: var(--text-muted); background: var(--bg);
    padding: 4px 10px; border-radius: 20px;
}

/* DETAIL VIEW */
.help-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; color: var(--primary);
    font-size: 14px; font-weight: 600; cursor: pointer;
    margin-bottom: 16px; padding: 0;
    font-family: var(--font-main);
}
.help-back-btn:hover { color: var(--primary-hover); }

.help-detail-banner {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.help-banner-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.help-banner-icon .material-symbols-outlined { font-size: 30px; }

/* SECTIONS */
.help-section-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); margin-bottom: 12px;
    overflow: hidden;
}
.help-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; cursor: pointer; transition: background 0.15s;
}
.help-section-header:hover { background: var(--bg); }
.help-section-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.help-sec-count { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.help-sec-chevron { color: var(--text-muted); transition: transform 0.2s; }
.help-section-card.open .help-sec-chevron { transform: rotate(180deg); color: var(--primary); }
.help-section-body {
    display: none; padding: 0 20px 20px;
    border-top: 1px solid var(--border);
}
.help-section-card.open .help-section-body { display: block; }

/* WORKFLOW DIAGRAM */
.help-workflow-diagram {
    display: flex; align-items: center; gap: 8px;
    padding: 20px 0; overflow-x: auto; flex-wrap: wrap;
}
.help-wf-step {
    padding: 8px 16px; border-radius: 8px; color: white;
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.help-wf-arrow { font-size: 18px; color: var(--text-muted); }

/* ACCORDION */
.help-accordion { border-bottom: 1px solid var(--border-light); }
.help-accordion:last-child { border-bottom: none; }
.help-acc-header {
    padding: 12px 0; cursor: pointer; font-size: 14px;
    font-weight: 500; color: var(--text-main);
    transition: color 0.15s;
}
.help-acc-header:hover { color: var(--primary); }
.help-acc-body {
    display: none; padding: 0 0 12px 16px;
}
.help-accordion.open .help-acc-body { display: block; }
.help-acc-body pre {
    white-space: pre-wrap; font-family: var(--font-main);
    font-size: 13px; line-height: 1.6; color: var(--text-light);
    margin: 0; background: var(--bg); padding: 12px 16px;
    border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}

/* ═══ AI CHAT ═══ */
.help-ai-layout {
    display: grid; grid-template-columns: 1fr 280px; gap: 20px;
    height: calc(100vh - 200px); min-height: 400px;
}
@media (max-width: 900px) { .help-ai-layout { grid-template-columns: 1fr; } .help-suggestions { display: none; } }

.help-chat-area {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
}
.help-chat-messages {
    flex: 1; overflow-y: auto; padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
}

/* CHAT BUBBLES */
.chat-bubble { display: flex; gap: 12px; max-width: 80%; }
.chat-bubble.ai { align-self: flex-start; }
.chat-bubble.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chat-avatar .material-symbols-outlined { font-size: 20px; }
.chat-content {
    background: var(--bg); padding: 14px 18px;
    border-radius: 12px 12px 12px 4px; font-size: 14px;
    line-height: 1.6; color: var(--text-main);
}
.chat-content p { margin: 4px 0; }
.chat-content strong { color: var(--primary); }
.chat-bubble.user .chat-content {
    background: var(--primary); color: white;
    border-radius: 12px 12px 4px 12px;
}

/* CHAT INPUT */
.help-chat-input-bar {
    display: flex; gap: 8px; padding: 16px;
    border-top: 1px solid var(--border);
}
.help-chat-input-bar input {
    flex: 1; padding: 12px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 14px;
    background: var(--bg); color: var(--text-main); outline: none;
    font-family: var(--font-main);
}
.help-chat-input-bar input:focus { border-color: var(--primary); }
.help-chat-send {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; transition: opacity 0.2s;
}
.help-chat-send:hover { opacity: 0.85; }

/* SUGGESTIONS */
.help-suggestions {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px;
}
.help-suggestions h4 { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--text-main); }
.help-suggest-list { display: flex; flex-direction: column; gap: 8px; }
.help-suggest-chip {
    padding: 10px 14px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; cursor: pointer; transition: all 0.15s;
    color: var(--text-main);
}
.help-suggest-chip:hover {
    border-color: var(--primary); background: var(--primary-light);
    color: var(--primary);
}

/* --- From: Page_System_Setting.html --- */
/* ─── Settings-Specific CSS Vars ─── */
              .settings-page {
                --s-sidebar-bg: var(--bg);
                --s-sidebar-border: var(--border);
                --s-card-bg: var(--bg);
                --s-card-border: var(--border);
                --s-text-heading: var(--text-main);
                --s-text-body: var(--text-light);
                --s-text-label: var(--text-muted);
                --s-hover-bg: var(--gray-200);
                --s-active-bg: color-mix(
                  in srgb,
                  var(--primary) 8%,
                  var(--surface)
                );
                --s-active-border: color-mix(
                  in srgb,
                  var(--primary) 30%,
                  transparent
                );
                --s-table-header-bg: var(--bg);
                --s-table-row-border: var(--gray-200);
                --s-radius: 10px;
              }
              /* ─── Content Views ─── */
              .setting-view {
                display: none;
              }
              .setting-view.active {
                display: block;
              }
              .view-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding-bottom: 20px;
                margin-bottom: 24px;
                border-bottom: 1px solid var(--border);
              }
              .view-header h3 {
                font-size: 1.25rem;
                font-weight: 700;
                color: var(--s-text-heading);
                margin: 0;
              }
              .view-header p {
                font-size: 0.813rem;
                color: var(--s-text-body);
                margin-top: 4px;
              }
              .info-card {
                background: var(--s-card-bg);
                border: 1px solid var(--s-card-border);
                border-radius: var(--s-radius);
                padding: 20px;
                transition: all 0.2s ease;
              }
              .info-card:hover {
                border-color: color-mix(
                  in srgb,
                  var(--border) 80%,
                  var(--text-main)
                );
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
              }
              .info-card label {
                display: block;
                font-size: 0.6875rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--s-text-label);
                margin-bottom: 8px;
              }
              .info-card .value {
                font-size: 0.9375rem;
                font-weight: 600;
                color: var(--s-text-heading);
              }
              .info-card .value.mono {
                font-family: monospace;
              }
              .info-card .value.link {
                color: var(--primary);
              }
              /* ─── Data Tables ─── */
              .data-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                font-size: 0.8125rem;
              }
              .data-table thead th {
                background: var(--s-table-header-bg);
                color: var(--s-text-body);
                font-weight: 700;
                font-size: 0.6875rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
                text-align: left;
              }
              .data-table tbody td {
                padding: 14px 16px;
                border-bottom: 1px solid var(--s-table-row-border);
                color: var(--text-main);
                vertical-align: middle;
              }
              .data-table tbody tr:last-child td {
                border-bottom: none;
              }
              /* ─── Action Buttons ─── */
              .btn-settings {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                border-radius: 8px;
                font-size: 0.8125rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                border: none;
                font-family: inherit;
              }
              .btn-settings.primary {
                background: var(--primary);
                color: var(--text-inverse);
              }
              .btn-settings.primary:hover {
                background: var(--primary-hover);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              }
              .btn-settings.secondary {
                background: var(--bg);
                color: var(--s-text-body);
                border: 1px solid var(--border);
              }
              .btn-settings.secondary:hover {
                background: var(--s-hover-bg);
              }
              /* ─── Permission Matrix ─── */
              .perm-matrix thead th {
                text-align: center;
                min-width: 90px;
              }
              .perm-matrix thead th:first-child {
                text-align: left;
                min-width: auto;
              }
              .perm-matrix .module-row {
                background: var(--s-card-bg);
                font-weight: 600;
              }
              .perm-matrix .child-row td:first-child {
                padding-left: 44px;
                color: var(--s-text-body);
                font-weight: 400;
              }
              .perm-matrix input[type="checkbox"] {
                width: 16px;
                height: 16px;
                accent-color: var(--primary);
                cursor: pointer;
              }
              /* ─── Timeline ─── */
              .timeline-item {
                display: flex;
                gap: 16px;
                align-items: flex-start;
                padding: 16px 0;
                border-bottom: 1px solid var(--s-table-row-border);
              }
              .timeline-item:last-child {
                border-bottom: none;
              }
              .timeline-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
              }
              .timeline-icon.login {
                background: color-mix(
                  in srgb,
                  var(--primary) 15%,
                  var(--surface)
                );
                color: var(--primary);
              }
              .timeline-icon.create {
                background: color-mix(
                  in srgb,
                  var(--success) 15%,
                  var(--surface)
                );
                color: var(--success);
              }
              .timeline-icon.update {
                background: color-mix(
                  in srgb,
                  var(--secondary) 15%,
                  var(--surface)
                );
                color: var(--secondary);
              }
              .timeline-icon.delete {
                background: color-mix(
                  in srgb,
                  var(--danger) 15%,
                  var(--surface)
                );
                color: var(--danger);
              }
              .timeline-meta {
                font-size: 0.75rem;
                color: var(--s-text-label);
                margin-top: 4px;
              }
              /* ─── Brand Preview ─── */
              .color-swatch {
                width: 56px;
                height: 56px;
                border-radius: 12px;
                border: 2px solid var(--surface);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              }
              /* ─── Empty State ─── */
              .empty-state {
                text-align: center;
                padding: 48px 24px;
              }
              .empty-state .icon-wrap {
                width: 64px;
                height: 64px;
                border-radius: 16px;
                background: var(--bg);
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 16px;
              }
              .empty-state .icon-wrap .material-symbols-outlined {
                font-size: 28px;
                color: var(--s-text-label);
              }
              /* ─── Badge ─── */
              .badge {
                display: inline-flex;
                align-items: center;
                padding: 3px 10px;
                border-radius: 6px;
                font-size: 0.6875rem;
                font-weight: 700;
                letter-spacing: 0.02em;
              }
              .badge-admin {
                background: #ede9fe;
                color: var(--purple-600);
              }
              .badge-manager {
                background: color-mix(
                  in srgb,
                  var(--primary) 12%,
                  var(--surface)
                );
                color: var(--primary);
              }
              .badge-staff {
                background: var(--bg);
                color: var(--s-text-body);
              }
              .badge-active {
                background: color-mix(
                  in srgb,
                  var(--success) 12%,
                  var(--surface)
                );
                color: var(--success);
              }
              .badge-inactive {
                background: color-mix(
                  in srgb,
                  var(--danger) 12%,
                  var(--surface)
                );
                color: var(--danger);
              }
              .badge-default {
                background: color-mix(
                  in srgb,
                  var(--success) 12%,
                  var(--surface)
                );
                color: var(--success);
              }
              /* ─── Toggle Switch ─── */
              .toggle-switch {
                position: relative;
                width: 40px;
                height: 22px;
              }
              .toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
              }
              .toggle-slider {
                position: absolute;
                cursor: pointer;
                inset: 0;
                background: #94a3b8;
                border-radius: 22px;
                transition: 0.25s;
              }
              .toggle-slider::before {
                content: "";
                position: absolute;
                height: 16px;
                width: 16px;
                left: 3px;
                bottom: 3px;
                background: #fff;
                border-radius: 50%;
                transition: 0.25s;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
              }
              .toggle-switch input:checked + .toggle-slider {
                background: var(--primary);
              }
              .toggle-switch input:checked + .toggle-slider::before {
                transform: translateX(18px);
              }
              /* ─── Row Action ─── */
              .row-action {
                opacity: 0;
                transition: opacity 0.15s;
              }
              tr:hover .row-action {
                opacity: 1;
              }
              .icon-btn-sm {
                padding: 4px;
                border-radius: 6px;
                border: none;
                background: transparent;
                cursor: pointer;
                color: var(--s-text-label);
                transition: all 0.15s;
              }
              .icon-btn-sm:hover {
                background: var(--bg);
                color: var(--primary);
              }
              .icon-btn-sm.danger:hover {
                background: color-mix(
                  in srgb,
                  var(--danger) 8%,
                  var(--surface)
                );
                color: var(--danger);
              }

              /* ─── Section Cards ─── */
              .section-card {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--s-radius);
                padding: 28px;
                margin-bottom: 24px;
              }
              .section-card:last-child {
                margin-bottom: 0;
              }
              .section-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 24px;
              }
              .section-header .section-icon {
                width: 44px;
                height: 44px;
                border-radius: 12px;
                background: color-mix(
                  in srgb,
                  var(--primary) 10%,
                  var(--surface)
                );
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                flex-shrink: 0;
              }
              .section-header .section-icon .material-symbols-outlined {
                font-size: 1.35rem;
                color: var(--primary);
              }
              .section-header .section-title-group {
                flex: 1;
              }
              .section-header h3 {
                font-size: 1.125rem;
                font-weight: 700;
                color: var(--s-text-heading);
                margin: 0;
                line-height: 1.3;
              }
              .section-header p {
                font-size: 0.8125rem;
                color: var(--s-text-body);
                margin-top: 4px;
              }
              .section-header .section-left {
                display: flex;
                align-items: flex-start;
              }
              /* ─── Table Container ─── */
              .table-container {
                border: 1px solid var(--border);
                border-radius: var(--s-radius);
                overflow: hidden;
              }
              /* ─── Filter Bar ─── */
              .filter-bar {
                display: flex;
                gap: 12px;
                margin-bottom: 20px;
              }
              .search-input-wrap {
                position: relative;
                flex: 1;
                max-width: 280px;
              }
              .search-input-wrap .material-symbols-outlined {
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 1.1rem;
                color: var(--s-text-label);
                pointer-events: none;
              }
              .search-input-wrap input {
                width: 100%;
                padding: 8px 12px 8px 38px;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 0.8125rem;
                font-family: inherit;
                outline: none;
                transition: border-color 0.2s;
                background: var(--surface);
                color: var(--s-text-heading);
              }
              .search-input-wrap input:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px
                  color-mix(in srgb, var(--primary) 10%, transparent);
              }
              .filter-select {
                padding: 8px 14px;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 0.8125rem;
                background: var(--surface);
                font-family: inherit;
                outline: none;
                color: var(--s-text-heading);
                cursor: pointer;
              }
              .filter-select:focus {
                border-color: var(--primary);
              }
              /* ─── Info Grid ─── */
              .info-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
              }
              .info-grid .full-width {
                grid-column: 1 / -1;
              }
              /* ─── Brand Section ─── */
              .brand-layout {
                display: grid;
                grid-template-columns: 1fr 2fr;
                gap: 24px;
              }
              .logo-preview-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 32px;
              }
              .logo-preview-card img {
                height: 96px;
                width: auto;
                object-fit: contain;
                margin-bottom: 12px;
              }
              .logo-preview-card .label {
                font-size: 0.6875rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--s-text-label);
              }
              .color-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
              }
              .color-card {
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
              /* ─── Hint Text ─── */
              .hint-text {
                font-size: 0.75rem;
                color: var(--s-text-label);
                margin-top: 12px;
                display: flex;
                align-items: center;
                gap: 4px;
              }
              .hint-text .material-symbols-outlined {
                font-size: 0.85rem;
              }

              /* ─── Loading Skeleton ─── */
              @keyframes shimmer {
                0% {
                  background-position: -400px 0;
                }
                100% {
                  background-position: 400px 0;
                }
              }
              .skeleton-row td {
                padding: 16px !important;
              }
              .skeleton-bar {
                height: 12px;
                border-radius: 6px;
                background: linear-gradient(
                  90deg,
                  var(--s-table-row-border) 25%,
                  color-mix(
                      in srgb,
                      var(--s-table-row-border) 40%,
                      var(--surface)
                    )
                    50%,
                  var(--s-table-row-border) 75%
                );
                background-size: 800px 100%;
                animation: shimmer 1.5s ease-in-out infinite;
              }
              .skeleton-bar.w-60 {
                width: 60%;
              }
              .skeleton-bar.w-40 {
                width: 40%;
              }
              .skeleton-bar.w-80 {
                width: 80%;
              }
              .skeleton-bar.w-24 {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }

              /* ─── Loading Spinner (uses global @keyframes spin) ─── */
              .loading-spinner {
                display: inline-block;
                width: 18px;
                height: 18px;
                border: 2px solid var(--border);
                border-top-color: var(--primary);
                border-radius: 50%;
                animation: spin 0.6s linear infinite;
                vertical-align: middle;
              }
              .loading-spinner.lg {
                width: 28px;
                height: 28px;
                border-width: 3px;
              }
              .loading-text {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                color: var(--s-text-label);
                font-size: 0.8125rem;
              }

              /* ─── Enhanced Table Row Hover ─── */
              .data-table tbody tr {
                transition:
                  background 0.15s ease,
                  box-shadow 0.2s ease;
              }
              .data-table tbody tr:hover {
                background: color-mix(
                  in srgb,
                  var(--primary) 3%,
                  var(--surface)
                );
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
              }

              /* ─── Empty State Icon Animation ─── */
              @keyframes gentle-bounce {
                0%,
                100% {
                  transform: translateY(0);
                }
                50% {
                  transform: translateY(-4px);
                }
              }
              .empty-state .icon-wrap {
                animation: gentle-bounce 2.5s ease-in-out infinite;
              }

              /* ─── Button Loading State ─── */
              .btn-settings.loading {
                pointer-events: none;
                opacity: 0.7;
                position: relative;
              }
              .btn-settings.loading::after {
                content: "";
                display: inline-block;
                width: 14px;
                height: 14px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-top-color: #fff;
                border-radius: 50%;
                animation: spin 0.6s linear infinite;
                margin-left: 6px;
              }

/* --- From: Page_System_Setting.html --- */
.df-card {
                    border: 1px solid var(--border);
                    border-radius: 10px;
                    background: var(--bg);
                    overflow: hidden;
                    transition: box-shadow 0.2s;
                    margin-bottom: 8px;
                  }
                  .df-card:hover {
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                  }
                  .df-row {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 14px 16px;
                  }
                  .df-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                  }
                  .df-info {
                    flex: 1;
                    min-width: 0;
                  }
                  .df-label {
                    font-weight: 700;
                    font-size: 0.8125rem;
                    color: var(--s-text-heading);
                    display: flex;
                    align-items: center;
                    gap: 6px;
                  }
                  .df-badge {
                    font-size: 0.5625rem;
                    padding: 1px 6px;
                    border-radius: 3px;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                  }
                  .df-path {
                    font-size: 0.6875rem;
                    color: var(--s-text-label);
                    margin-top: 2px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .df-path a {
                    color: var(--primary);
                    text-decoration: none;
                  }
                  .df-path a:hover {
                    text-decoration: underline;
                  }
                  .df-stat {
                    text-align: center;
                    flex-shrink: 0;
                    min-width: 48px;
                  }
                  .df-stat-num {
                    font-size: 1rem;
                    font-weight: 800;
                    color: var(--s-text-heading);
                    line-height: 1.2;
                  }
                  .df-stat-label {
                    font-size: 0.5625rem;
                    color: var(--s-text-label);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                  }
                  .df-actions {
                    display: flex;
                    gap: 4px;
                    flex-shrink: 0;
                  }
                  .df-btn {
                    padding: 5px 10px;
                    border-radius: 6px;
                    border: 1px solid var(--border);
                    background: var(--surface);
                    color: var(--s-text-body);
                    font-size: 0.6875rem;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    gap: 3px;
                    transition: all 0.15s;
                    font-family: inherit;
                  }
                  .df-btn:hover {
                    background: var(--bg);
                    border-color: var(--primary);
                    color: var(--primary);
                  }
                  .df-btn.primary {
                    background: var(--primary);
                    color: #fff;
                    border-color: var(--primary);
                  }
                  .df-btn.primary:hover {
                    background: var(--primary-hover);
                  }

                  /* Inline edit panel */
                  .df-edit-panel {
                    display: none;
                    padding: 12px 16px 16px;
                    background: color-mix(
                      in srgb,
                      var(--primary) 3%,
                      var(--surface)
                    );
                    border-top: 1px dashed
                      color-mix(in srgb, var(--primary) 20%, transparent);
                    animation: dfSlideDown 0.2s ease;
                  }
                  .df-edit-panel.open {
                    display: block;
                  }
                  @keyframes dfSlideDown {
                    from {
                      opacity: 0;
                      transform: translateY(-6px);
                    }
                    to {
                      opacity: 1;
                      transform: translateY(0);
                    }
                  }
                  .df-edit-row {
                    display: flex;
                    gap: 8px;
                    align-items: flex-end;
                  }
                  .df-edit-input {
                    flex: 1;
                    padding: 8px 12px;
                    border-radius: 6px;
                    border: 1.5px solid var(--border);
                    background: var(--surface);
                    font-size: 0.8125rem;
                    font-family: inherit;
                    color: var(--s-text-heading);
                    outline: none;
                    transition: border-color 0.2s;
                  }
                  .df-edit-input:focus {
                    border-color: var(--primary);
                    box-shadow: 0 0 0 3px
                      color-mix(in srgb, var(--primary) 10%, transparent);
                  }
                  .df-edit-input::placeholder {
                    color: var(--s-text-label);
                  }
                  .df-edit-hint {
                    font-size: 0.6875rem;
                    color: var(--s-text-label);
                    margin-top: 6px;
                    display: flex;
                    align-items: center;
                    gap: 4px;
                  }
                  .df-edit-hint .material-symbols-outlined {
                    font-size: 14px;
                  }
                  .df-edit-status {
                    font-size: 0.75rem;
                    margin-left: 8px;
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                  }

/* --- From: Page_System_Setting.html --- */
/* ── Main Tabs (Fields vs DanhMuc) ── */
                .cfv-main-tabs { display:flex; gap:4px; margin-bottom:20px; padding:4px; background:var(--bg); border-radius:10px; }
                .cfv-main-tab { padding:10px 20px; border:none; background:transparent; border-radius:8px; font-size:0.8125rem; font-weight:700; color:var(--text-light); cursor:pointer; transition:all 0.2s; }
                .cfv-main-tab.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(37,71,139,0.2); }
                .cfv-main-tab:hover:not(.active) { background:var(--surface); color:var(--text-main); }
                .cfv-panel { display:none; }
                .cfv-panel.active { display:block; }
                /* ── KPI Stats ── */
                .cfv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
                .cfv-stat { background:var(--surface); border-radius:12px; border:1px solid var(--border); padding:16px; text-align:center; }
                .cfv-stat-val { font-size:1.75rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:2px; }
                .cfv-stat-val.green { color:var(--success,#16a34a); }
                .cfv-stat-val.amber { color:#f59e0b; }
                .cfv-stat-lbl { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-light); }
                /* ── Module Tabs ── */
                .cfv-tabs { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; padding:5px; background:var(--bg); border-radius:10px; }
                .cfv-tab { padding:7px 12px; border-radius:7px; font-size:0.6875rem; font-weight:600; border:none; background:transparent; color:var(--text-light); cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:4px; }
                .cfv-tab:hover { background:var(--surface); }
                .cfv-tab.active { background:var(--primary); color:#fff; }
                .cfv-tab-cnt { font-size:0.5625rem; padding:1px 5px; border-radius:8px; background:rgba(0,0,0,0.06); }
                .cfv-tab.active .cfv-tab-cnt { background:rgba(255,255,255,0.2); }
                /* ── Field Items ── */
                .cfv-item { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; transition:all 0.15s; }
                .cfv-item:hover { border-color:var(--primary); }
                .cfv-item-info { flex:1; min-width:0; }
                .cfv-item-name { font-weight:700; font-size:0.8125rem; color:var(--text-main); }
                .cfv-item-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; font-size:0.6875rem; color:var(--text-light); }
                .cfv-badge { padding:1px 6px; border-radius:4px; font-size:0.625rem; font-weight:600; text-transform:uppercase; }
                .cfv-badge.text { background:#e0f2fe; color:#0369a1; }
                .cfv-badge.number { background:#fef3c7; color:#92400e; }
                .cfv-badge.date { background:#ecfdf5; color:#065f46; }
                .cfv-badge.select { background:#f3e8ff; color:#6b21a8; }
                .cfv-badge.checkbox { background:#fce7f3; color:#9d174d; }
                /* ── Add Field Form ── */
                .cfv-form { display:none; background:var(--surface); border:2px solid var(--primary); border-radius:12px; padding:20px; margin-bottom:16px; }
                .cfv-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
                .cfv-form-group label { display:block; font-size:0.6875rem; font-weight:700; color:var(--text-light); text-transform:uppercase; margin-bottom:4px; }
                .cfv-form-group input, .cfv-form-group select { width:100%; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:0.8125rem; background:var(--surface); }
                .cfv-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
                /* ── DanhMuc Items ── */
                .dmv-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; }
                .dmv-item:hover { border-color:var(--primary); }
                .dmv-item-order { width:24px; height:24px; border-radius:6px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; color:var(--text-light); flex-shrink:0; }
                .dmv-item-info { flex:1; min-width:0; }
                .dmv-item-label { font-weight:600; font-size:0.8125rem; color:var(--text-main); }
                .dmv-item-value { font-size:0.6875rem; color:var(--text-light); font-family:monospace; }
                .dmv-add-row { display:none; gap:8px; margin-bottom:12px; align-items:center; }
                .dmv-add-row input { flex:1; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:0.8125rem; }
                .cfv-empty { text-align:center; padding:40px; color:var(--text-light); }
                .cfv-empty .material-symbols-outlined { font-size:40px; opacity:0.3; display:block; margin-bottom:8px; }

/* --- From: Page_System_Welcome.html --- */
/* HEADER REFACTOR */
    .welcome-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
    .welcome-time-widget { text-align: right; }
    .welcome-clock { font-size: 48px; font-weight: 200; color: var(--primary); letter-spacing: -2px; line-height: 1; }
    .welcome-date { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
    
    .welcome-title { font-size: 32px; font-weight: 800; color: var(--text-main); letter-spacing: -0.5px; margin: 0; }
    .welcome-subtitle { font-size: 16px; color: var(--text-light); margin-top: 8px; margin-bottom: 0; }

    /* LAYOUT */
    .welcome-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
    @media (min-width: 1024px) { .welcome-grid { grid-template-columns: 2fr 1fr; } }
    
    .section-flex-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .section-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
    .btn-text { background: none; border: none; font-size: 14px; font-weight: 700; color: var(--primary); cursor: pointer; }
    .btn-text:hover { color: var(--secondary); text-decoration: underline; }

    /* SHORTCUTS */
    .shortcuts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    @media (min-width: 768px) { .shortcuts-grid { grid-template-columns: repeat(4, 1fr); } }
    
    .shortcut-card {
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
        padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .shortcut-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); border-color: var(--primary); }
    
    .shortcut-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .shortcut-icon span { font-size: 24px; }
    .shortcut-label { font-size: 13px; font-weight: 700; color: var(--text-main); text-align: center; }

    /* Colors */
    .icon-blue { background: var(--blue-bg); color: var(--info); }
    .icon-orange { background: #fff7ed; color: #ea580c; }
    .icon-green { background: #f0fdf4; color: var(--green-600); }
    .icon-purple { background: #faf5ff; color: #9333ea; }
    .icon-gray { background: var(--neutral-100); color: var(--neutral-600); }

    /* NOTIFICATIONS */
    .noti-panel {
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; display: flex; flex-direction: column; height: 100%;
        min-height: 300px;
    }
    .noti-item { padding: 20px; border-bottom: 1px solid var(--border); transition: background 0.2s; cursor: pointer; }
    .noti-item:hover { background: var(--bg); }
    .noti-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .dot-status { width: 8px; height: 8px; border-radius: 50%; }
    .bg-danger { background: var(--danger); }
    .bg-warning { background: var(--secondary); }
    .text-danger { color: var(--danger); }
    .text-warning { color: var(--secondary); }
    .noti-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
    .noti-time { font-size: 10px; color: var(--text-light); margin-left: auto; }
    .noti-title { font-size: 14px; font-weight: 700; margin: 0 0 4px 0; color: var(--text-main); }
    .noti-desc { font-size: 12px; color: var(--text-light); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    
    .btn-view-all {
        width: 100%; padding: 16px; border: none; background: none; border-top: 1px solid var(--border);
        font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1px;
        cursor: pointer; margin-top: auto;
    }
    .btn-view-all:hover { background: var(--bg); }

    /* BRAND FOOTER */
    .brand-footer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
    .brand-footer-content { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; gap: 16px; flex-wrap: wrap; }
    .brand-info { display: flex; align-items: center; gap: 16px; }
    .brand-logo-box { flex-shrink: 0; }
    .brand-icon-box { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; display: flex; align-items: center; justify-content: center; }
    .brand-icon-box span { font-size: 24px; }
    .brand-text h3 { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0; }
    .brand-actions { display: flex; align-items: center; gap: 12px; }
    .brand-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; background: #f0fdf4; color: var(--green-600); font-size: 12px; font-weight: 700; }
    /* MODAL */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
    .modal-overlay.active { display: flex; }
    .modal-card { background: var(--surface); width: 90%; max-width: 400px; border-radius: 12px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .modal-title { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 0; }
    .btn-close { background: none; border: none; cursor: pointer; color: var(--text-light); }
    
    .shortcut-checkbox-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
    .shortcut-checkbox-item:hover { background: var(--bg); }
    .checkbox-styled { accent-color: var(--primary); width: 18px; height: 18px; }
    .shortcut-group-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); padding: 12px 8px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
    .shortcut-group-header:first-child { border-top: none; margin-top: 0; }
    .icon-teal { background: #f0fdfa; color: #0d9488; }

    /* MODULE HUB */
    .module-hub-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; }
    @media (min-width: 768px) { .module-hub-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1200px) { .module-hub-grid { grid-template-columns: repeat(3, 1fr); } }
    
    .module-hub-card {
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
        padding: 20px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        border-top: 3px solid var(--border);
    }
    .module-hub-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
    
    .module-sales { border-top-color: var(--info); }
    .module-system { border-top-color: var(--neutral-500); }
    .module-scm { border-top-color: #ea580c; }
    .module-hr { border-top-color: #9333ea; }
    .module-finance { border-top-color: var(--green-600); }
    .module-product { border-top-color: var(--amber-500); }
    
    .module-hub-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .module-hub-header span { font-size: 22px; color: var(--text-light); }
    .module-hub-header h4 { font-size: 15px; font-weight: 800; color: var(--text-main); margin: 0; }
    
    .module-hub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    
    .hub-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
        color: var(--text-main); background: var(--bg); border: 1px solid var(--border);
        cursor: pointer; transition: all 0.15s; text-decoration: none;
    }
    .hub-btn:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-1px); }
    .hub-btn span { font-size: 16px; }

/* --- From: Popup_System_Config.html --- */
/* ===== SETTINGS POPUP ===== */
.sp-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.55); backdrop-filter: blur(4px);
    z-index: 9999; display: none;
    align-items: center; justify-content: center;
}
.sp-overlay.active { display: flex; }

.sp-card {
    background: var(--surface, #fff);
    width: 92vw; max-width: 520px;
    max-height: 85vh;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    animation: spSlideUp 0.25s ease-out;
}
@keyframes spSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.sp-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); border-radius: 14px 14px 0 0;
}
.sp-header h3 {
    font-size: 1rem; font-weight: 700;
    color: var(--text-inverse, #fff); margin: 0;
}
.sp-header p {
    font-size: 0.75rem; color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
}
.sp-close {
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: none;
    color: rgba(255,255,255,0.7); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.sp-close:hover { background: rgba(255,255,255,0.2); color: var(--text-inverse, #fff); }

/* Body */
.sp-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
}

/* Form */
.sp-form { display: flex; flex-direction: column; gap: 16px; }
.sp-field { display: flex; flex-direction: column; gap: 4px; }
.sp-field.half { width: calc(50% - 6px); }
.sp-row { display: flex; gap: 12px; flex-wrap: wrap; }

.sp-label {
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-light);
}
.sp-label .required { color: var(--danger); }

.sp-input, .sp-select {
    width: 100%; padding: 9px 12px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem;
    color: var(--text-main);
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}
.sp-input:focus, .sp-select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.sp-input[readonly] {
    background: #f0f1f3; color: var(--text-light); cursor: not-allowed;
}
.sp-input.mono { font-family: 'SF Mono', 'Fira Code', monospace; }

/* Toggle */
.sp-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
}
.sp-toggle-label { font-size: 0.8125rem; color: var(--text-main); font-weight: 500; }
.sp-toggle-desc { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }

/* Footer */
.sp-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border);
}
.sp-btn {
    padding: 8px 20px; border-radius: 8px;
    font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.2s;
}
.sp-btn-cancel {
    background: transparent; color: var(--text-light);
}
.sp-btn-cancel:hover { background: var(--bg); }
.sp-btn-save {
    background: var(--primary); color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sp-btn-save:hover { filter: brightness(1.1); }
.sp-btn-delete {
    background: transparent; color: var(--danger);
    margin-right: auto;
}
.sp-btn-delete:hover { background: rgba(239,68,68,0.08); }

/* --- From: Popup_System_Role.html --- */
/* ===== ROLE POPUP ===== */
.rp-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.55); backdrop-filter: blur(4px);
    z-index: 9999; display: none;
    align-items: center; justify-content: center;
}
.rp-overlay.active { display: flex; }

.rp-card {
    background: var(--surface, #fff);
    width: 92vw; max-width: 620px;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    animation: rpSlideUp 0.25s ease-out;
}
@keyframes rpSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.rp-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    background: var(--gradient-primary); border-radius: 14px 14px 0 0;
}
.rp-header h3 { font-size: 1rem; font-weight: 700; color: var(--text-inverse, #fff); margin: 0; }
.rp-header p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 4px 0 0; }

.rp-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.rp-section-title {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--primary);
    margin: 20px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
}
.rp-section-title:first-child { margin-top: 0; }

/* Preset select */
.rp-preset-select {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 0.8125rem; background: var(--surface);
    color: var(--text-main); cursor: pointer; transition: border-color 0.2s;
    font-family: inherit;
}
.rp-preset-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37,71,139,0.1); }
.rp-preset-select optgroup { font-weight: 700; font-size: 0.8rem; color: var(--primary); }

/* Preset badge */
.rp-preset-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; font-size: 0.65rem; font-weight: 600;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary); border-radius: 4px; margin-top: 6px;
}
.rp-preset-badge .material-symbols-outlined { font-size: 12px; }

/* Permission Grid — 4 columns */
.rp-perm-grid {
    display: grid; grid-template-columns: 1fr auto auto auto;
    gap: 0; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
}
.rp-perm-row { display: contents; }
.rp-perm-row:hover > * { background: var(--bg); }
.rp-perm-label {
    padding: 10px 14px; font-size: 0.8125rem;
    color: var(--text-main); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.rp-perm-label .material-symbols-outlined { font-size: 1.1rem; color: var(--text-light); }
.rp-perm-toggle {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--border);
}
.rp-perm-row:last-child .rp-perm-label,
.rp-perm-row:last-child .rp-perm-toggle { border-bottom: none; }

.rp-perm-header {
    font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-light);
    padding: 8px 14px; background: var(--bg);
}
.rp-perm-header.rp-perm-toggle-header {
    border-left: 1px solid var(--border); text-align: center;
}

/* Scope radio */
.rp-scope-grid { display: flex; gap: 8px; margin-top: 4px; }
.rp-scope-option {
    flex: 1; padding: 12px; border: 1.5px solid var(--border);
    border-radius: 10px; cursor: pointer; text-align: center;
    transition: all 0.2s; background: var(--bg);
}
.rp-scope-option:hover { border-color: var(--primary); }
.rp-scope-option.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.rp-scope-icon { font-size: 1.5rem; color: var(--text-light); margin-bottom: 4px; }
.rp-scope-option.active .rp-scope-icon { color: var(--primary); }
.rp-scope-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); }
.rp-scope-desc { font-size: 0.6875rem; color: var(--text-light); margin-top: 2px; }

/* Special perms */
.rp-special-grid {
    display: grid; grid-template-columns: 1fr auto;
    gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}

.rp-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border);
}

.rp-id-badge {
    display: inline-block; padding: 2px 8px; font-size: 0.7rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-light); font-family: monospace;
    margin-left: 8px;
}