/**
 * THEME DARK & VIEW EXTENSIONS (NOTE V4 ONLINE V2)
 * Tách từ inline style index.html nhằm tối ưu dung lượng và chống Context Rot
 */

/* Bổ sung để đảm bảo Cột 1 (Sidebar) cố định 100% khi chuyển đổi các mục */
    .content-container {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      overflow: hidden !important;
      background: #131922 !important;
    }
    .view-pane {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
    .view-pane[hidden],
    #viewNotes[hidden],
    #viewDetail[hidden],
    #viewFolders[hidden],
    #viewTags[hidden],
    #viewReminders[hidden],
    #viewTrash[hidden],
    #viewBackup[hidden],
    #viewProfile[hidden],
    #viewSettings[hidden],
    #viewGeminiAssistant[hidden],
    #viewPublicShare[hidden] {
      display: none !important;
    }

    #viewSettings:not([hidden]) {
      width: 100% !important;
      height: 100% !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      min-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #viewSettings iframe,
    #settingsSubpageIframe {
      width: 100% !important;
      height: 100% !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      border: none !important;
      outline: none !important;
      background: #0d131d !important;
      display: block !important;
    }

    #viewGeminiAssistant:not([hidden]) {
      padding: 24px 32px 48px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      overflow-y: auto !important;
      height: 100% !important;
      gap: 20px;
    }

    .gemini-quick-pill {
      background: #1e293b;
      border: 1px solid #334155;
      color: #94a3b8;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11.5px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .gemini-quick-pill:hover {
      background: #253346;
      color: #38bdf8;
      border-color: #0284c7;
    }
    @media (max-width: 900px) {
      .gemini-assistant-grid {
        grid-template-columns: 1fr !important;
      }
    }

    #viewNotes:not([hidden]) {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    #viewNotes .note-list {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 7px 18px 10px;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #2b394d transparent;
    }

    #viewNotes .note-list::-webkit-scrollbar {
      width: 6px;
    }

    #viewNotes .note-list::-webkit-scrollbar-track {
      background: transparent;
    }

    #viewNotes .note-list::-webkit-scrollbar-thumb {
      background: #2b394d;
      border-radius: 4px;
    }

    #viewNotes .note-list::-webkit-scrollbar-thumb:hover {
      background: #3e5370;
    }

    /* Đảm bảo vùng soạn thảo trong view detail full 100% Cột 2 trên Desktop */
    @media (min-width: 769px) {
      #viewDetail:not([hidden]) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 8px 14px 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #11161e !important;
        scrollbar-width: thin;
        scrollbar-color: #2b394d transparent;
      }

      #viewDetail::-webkit-scrollbar {
        width: 6px;
      }

      #viewDetail::-webkit-scrollbar-track {
        background: transparent;
      }

      #viewDetail::-webkit-scrollbar-thumb {
        background: #2b394d;
        border-radius: 4px;
      }

      #viewDetail::-webkit-scrollbar-thumb:hover {
        background: #3e5370;
      }
      #viewDetail .detail-title {
        font-size: 24px !important;
        line-height: 1.4 !important;
        min-height: 46px !important;
        padding: 6px 0 8px !important;
        margin-bottom: 2px !important;
        box-sizing: border-box !important;
        resize: none !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        flex: 0 0 auto !important;
        border: none !important;
        border-bottom: 1px solid #293544 !important;
        outline: none !important;
        width: 100% !important;
      }
      #viewDetail .detail-meta-line {
        margin-top: 6px !important;
        flex: 0 0 auto !important;
      }
      #viewDetail .note-tag-area {
        margin: 8px 0 10px !important;
        flex: 0 0 auto !important;
      }
      .ql-formats-heading button.ql-header {
        display: none !important;
      }
    }
    #viewDetail .editor-shell {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      width: 100% !important;
    }
    #quillEditor {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      transition: flex 0.2s ease !important;
    }
    /* Chế độ chia đôi Live Preview: Mã nguồn HTML ở nửa dưới */
    .editor-shell.has-split #quillEditor {
      flex: 1 1 50% !important;
      min-height: 140px !important;
      border-bottom: none !important;
      border-radius: 0 !important;
    }
    .source-panel {
      display: flex;
      flex-direction: column;
      flex: 1 1 50%;
      min-height: 140px;
      border: 1px solid #303c4c;
      border-top: 2px solid #486e9e;
      border-radius: 0 0 9px 9px;
      background: #0f141c;
      overflow: hidden;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
      transition: flex 0.2s ease;
    }
    .source-panel[hidden] {
      display: none !important;
    }
    .source-panel-header {
      height: 30px;
      padding: 0 12px;
      background: #17202c;
      border-bottom: 1px solid #283547;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #9cb2cf;
      font-size: 11px;
      flex: 0 0 auto;
      user-select: none;
    }
    .source-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 600;
      color: #d1def0;
    }
    .source-tag {
      padding: 1px 5px;
      background: #24354c;
      border-radius: 4px;
      color: #78a9ff;
      font-family: Consolas, monospace;
      font-size: 10px;
    }
    .source-hint {
      color: #72849c;
      font-weight: 400;
      font-size: 10px;
    }
    .source-close-btn {
      height: 20px;
      padding: 0 8px;
      border: 1px solid #364962;
      border-radius: 4px;
      background: #1c2736;
      color: #a9bece;
      font-size: 10px;
      cursor: pointer;
      transition: 0.15s;
    }
    .source-close-btn:hover {
      background: #2a3c53;
      color: #fff;
      border-color: #55749c;
    }
    .html-source {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      height: 100%;
      resize: none;
      overflow: auto;
      padding: 12px 16px;
      border: none;
      outline: none;
      background: #0c1017;
      color: #9cdcfe;
      font: 12px/1.65 Consolas, "Cascadia Code", "Courier New", monospace;
      tab-size: 2;
      white-space: pre-wrap;
      word-break: break-all;
      box-sizing: border-box;
    }
    .html-source:focus {
      background: #0b0f15;
    }
    #viewDetail .detail-footer {
      flex: 0 0 auto !important;
      padding: 10px 0 4px !important;
    }
    /* Vùng hiển thị feature pages */
    #viewReminders, #viewTrash, #viewBackup {
      padding: 28px 36px;
      box-sizing: border-box;
    }

    /* Giao diện full Cột 2 cho Quản lý Thư mục */
    #viewFolders:not([hidden]) {
      padding: 24px 28px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: auto !important;
      background: #131922 !important;
    }

    /* Giao diện full Cột 2 VÀ full chiều cao 100% cho Quản lý Nhãn */
    #viewTags:not([hidden]) {
      padding: 24px 28px 16px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      background: #11161e !important;
    }

    /* Giao diện full Cột 2 cho Sao lưu & Khôi phục (Full width) */
    #viewBackup:not([hidden]) {
      padding: 26px 32px 48px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      background: #11161e !important;
    }

    #viewBackup .backup-crumb {
      color: #7b8fa7;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    #viewBackup .backup-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
      width: 100%;
    }

    #viewBackup .backup-head h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
      color: #eef3fa;
      letter-spacing: -0.03em;
    }

    #viewBackup .backup-head p {
      margin: 6px 0 0;
      color: #91a0b3;
      font-size: 11.5px;
    }

    #viewBackup .backup-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    #viewBackup .backup-btn {
      height: 34px;
      padding: 0 13px;
      border: 1px solid #39485b;
      border-radius: 7px;
      background: #202a37;
      color: #d4deea;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.16s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      box-sizing: border-box;
    }

    #viewBackup .backup-btn:hover {
      border-color: #6785a7;
      background: #263548;
      color: #ffffff;
      transform: translateY(-1px);
    }

    #viewBackup .backup-btn.primary {
      border-color: #4779c9;
      background: #4779c9;
      color: #fff;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(71, 121, 201, 0.28);
    }

    #viewBackup .backup-btn.primary:hover {
      background: #568be0;
      border-color: #568be0;
    }

    #viewBackup .backup-btn.green {
      border-color: #37634f;
      background: #20352f;
      color: #a5e1c5;
    }

    #viewBackup .backup-btn.green:hover {
      background: #28473e;
      border-color: #487e65;
      color: #c9f5e1;
    }

    #viewBackup .backup-btn.danger {
      border-color: #674448;
      background: #302326;
      color: #f0aaa4;
    }

    #viewBackup .backup-btn.danger:hover {
      background: #452a2f;
      border-color: #8c5258;
      color: #ffd0cb;
    }

    #viewBackup .backup-btn.sm {
      height: 28px;
      padding: 0 9px;
      font-size: 10px;
    }

    #viewBackup .backup-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    /* Banner trạng thái sao lưu */
    #viewBackup .backup-status-banner {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 18px;
      border: 1px solid #345444;
      border-radius: 10px;
      background: linear-gradient(110deg, #1b302b, #19262b);
      margin-bottom: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    #viewBackup .backup-status-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: #244338;
      color: #8de0b8;
      font-size: 18px;
      flex-shrink: 0;
    }

    #viewBackup .backup-status-text {
      flex: 1;
      min-width: 0;
    }

    #viewBackup .backup-status-title {
      font-size: 13px;
      font-weight: 700;
      color: #d8f2e6;
    }

    #viewBackup .backup-status-caption {
      margin-top: 4px;
      color: #93ad9f;
      font-size: 11px;
    }

    #viewBackup .backup-status-time {
      color: #aac7b7;
      font-size: 11px;
      text-align: right;
      white-space: nowrap;
      line-height: 1.45;
      flex-shrink: 0;
    }

    /* Lưới 2 cột full width */
    #viewBackup .backup-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.95fr);
      gap: 16px;
      align-items: start;
      width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 1080px) {
      #viewBackup .backup-grid {
        grid-template-columns: 1fr;
      }
      #viewBackup .backup-head {
        flex-direction: column;
      }
      #viewBackup .backup-buttons {
        align-self: flex-start;
      }
    }

    #viewBackup .backup-col-left,
    #viewBackup .backup-col-right {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }

    /* Thẻ Card */
    #viewBackup .backup-card {
      border: 1px solid #2d3948;
      border-radius: 10px;
      background: linear-gradient(145deg, #1a232e, #171e27);
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
    }

    #viewBackup .backup-card-head {
      padding: 15px 18px;
      border-bottom: 1px solid #2b3644;
    }

    #viewBackup .backup-card-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #e8eef7;
    }

    #viewBackup .backup-card-help {
      margin: 5px 0 0;
      color: #8999ad;
      font-size: 11px;
      line-height: 1.55;
    }

    /* Vị trí lưu */
    #viewBackup .backup-location {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 16px;
      padding: 12px 14px;
      border: 1px solid #354253;
      border-radius: 8px;
      background: #151c25;
    }

    #viewBackup .backup-loc-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      background: #24354a;
      color: #9cc1f3;
      font-size: 14px;
      flex-shrink: 0;
    }

    #viewBackup .backup-loc-name {
      font-size: 11.5px;
      font-weight: 650;
      color: #dce5ef;
    }

    #viewBackup .backup-loc-path {
      margin-top: 3px;
      color: #8595a9;
      font-size: 10px;
      overflow-wrap: anywhere;
      font-family: Consolas, monospace;
    }

    /* Các thành phần được sao lưu */
    #viewBackup .backup-includes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 0 16px;
      margin-bottom: 14px;
    }

    @media (max-width: 600px) {
      #viewBackup .backup-includes {
        grid-template-columns: 1fr;
      }
    }

    #viewBackup .backup-include {
      padding: 10px 11px;
      border: 1px solid #2c3948;
      border-radius: 7px;
      background: #151c25;
      color: #d1dce8;
      font-size: 10.5px;
      font-weight: 600;
    }

    #viewBackup .backup-include span {
      display: block;
      margin-top: 4px;
      color: #8292a6;
      font-size: 9.5px;
      font-weight: 400;
      line-height: 1.4;
    }

    /* Danh sách cài đặt */
    #viewBackup .backup-setting-list {
      padding: 0 16px 14px;
    }

    #viewBackup .backup-setting {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border-top: 1px solid #293442;
      color: #ced8e4;
      font-size: 11px;
    }

    #viewBackup .backup-setting small {
      display: block;
      margin-top: 3px;
      color: #8291a4;
      font-size: 10px;
    }

    #viewBackup .backup-select {
      height: 31px;
      min-width: 130px;
      padding: 0 8px;
      border: 1px solid #354253;
      border-radius: 6px;
      background: #111820;
      color: #d5deea;
      font-size: 11px;
      font-family: inherit;
    }

    /* Toggle switch */
    #viewBackup .backup-toggle {
      position: relative;
      width: 36px;
      height: 20px;
      flex: none;
      display: inline-block;
    }

    #viewBackup .backup-toggle input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      margin: 0;
      z-index: 2;
    }

    #viewBackup .backup-toggle i {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background: #3b4757;
      pointer-events: none;
      transition: background 0.18s;
    }

    #viewBackup .backup-toggle i:before {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #dce3ed;
      transition: 0.18s;
    }

    #viewBackup .backup-toggle input:checked + i {
      background: #4779c9;
    }

    #viewBackup .backup-toggle input:checked + i:before {
      transform: translateX(16px);
      background: #fff;
    }

    /* Hộp cảnh báo / thông tin safety */
    #viewBackup .backup-safety {
      display: flex;
      gap: 10px;
      margin: 14px 16px;
      padding: 11px 12px;
      border-radius: 7px;
      font-size: 10.5px;
      line-height: 1.55;
    }

    #viewBackup .backup-safety.amber {
      background: #302b22;
      color: #d2bf92;
      border: 1px solid #4a3e2a;
    }

    #viewBackup .backup-safety.green {
      background: #1b2f28;
      color: #a4e5c8;
      border: 1px solid #2b483c;
    }

    /* Phần khôi phục dữ liệu */
    #viewBackup .backup-restore-body {
      padding: 16px;
    }

    #viewBackup .backup-restore-steps {
      display: grid;
      gap: 11px;
      margin: 2px 0 14px;
    }

    #viewBackup .backup-step {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #b8c6d6;
      font-size: 11px;
      line-height: 1.5;
    }

    #viewBackup .backup-step-num {
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #28394b;
      color: #9ec0ef;
      font-size: 10px;
      font-weight: 700;
      flex: none;
    }

    #viewBackup .backup-restore-drop {
      padding: 16px 14px;
      border: 1px dashed #465b73;
      border-radius: 8px;
      background: #151d27;
      color: #9cabc0;
      text-align: center;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    #viewBackup .backup-restore-drop:hover,
    #viewBackup .backup-restore-drop.drag-over {
      border-color: #7eaaf0;
      background: #1a2533;
      color: #dce7f5;
    }

    #viewBackup .backup-restore-drop strong {
      display: block;
      margin-bottom: 5px;
      color: #d5e0ed;
      font-size: 11.5px;
    }

    #viewBackup .backup-restore-foot {
      margin-top: 12px;
      color: #7f8fa2;
      font-size: 10px;
      line-height: 1.5;
    }

    /* Danh sách lịch sử sao lưu */
    #viewBackup .backup-history-list {
      padding: 2px 16px 13px;
    }

    #viewBackup .backup-history-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #293442;
    }

    #viewBackup .backup-history-row:last-child {
      border-bottom: none;
    }

    #viewBackup .backup-file-icon {
      width: 34px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid #3b526d;
      border-radius: 7px;
      background: #202d3c;
      color: #9dc0f0;
      font-size: 15px;
      flex-shrink: 0;
    }

    #viewBackup .backup-file-info {
      min-width: 0;
      flex: 1;
    }

    #viewBackup .backup-file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 650;
      color: #dce5ef;
    }

    #viewBackup .backup-file-meta {
      margin-top: 4px;
      color: #8191a5;
      font-size: 10px;
    }

    #viewBackup .backup-file-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    #viewBackup .backup-empty-state {
      padding: 28px 12px;
      text-align: center;
      color: #8f9eb1;
      font-size: 11px;
    }

    /* Modal xác nhận khôi phục */
    .backup-modal {
      border: 1px solid #354253;
      border-radius: 12px;
      background: #18212c;
      color: #e5edf7;
      padding: 0;
      max-width: 480px;
      width: calc(100vw - 32px);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    }

    .backup-modal:not([open]) {
      display: none !important;
    }

    .backup-modal[open] {
      display: block !important;
      position: fixed;
      inset: 0;
      margin: auto;
      height: fit-content;
      z-index: 100;
    }

    .backup-modal::backdrop {
      background: rgba(5, 8, 12, 0.75);
      backdrop-filter: blur(2px);
    }

    .backup-modal-content {
      padding: 20px 22px;
    }

    .backup-modal-content h2 {
      font-size: 15px;
      margin: 0 0 8px;
      color: #f1f5f9;
      font-weight: 700;
    }

    .backup-modal-content p {
      margin: 0 0 16px;
      color: #91a0b3;
      font-size: 11px;
      line-height: 1.6;
    }

    .backup-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 18px;
    }

    .view-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
      width: 100%;
    }
    .view-title {
      font-size: 24px;
      font-weight: 700;
      color: #eef3fa;
      margin: 4px 0 3px;
      letter-spacing: -0.4px;
    }
    .view-desc {
      font-size: 11px;
      color: #96a3b5;
      margin: 0;
    }
    .action-btn-primary {
      height: 36px;
      padding: 0 14px;
      border: 1px solid #6391dc;
      border-radius: 8px;
      background: linear-gradient(100deg, #467cdb, #5a76dc);
      color: white;
      font-size: 11px;
      font-weight: 650;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(73, 127, 230, 0.25);
      transition: 0.18s;
      white-space: nowrap;
    }
    .action-btn-primary:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }
    .folders-panel {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* Huy hiệu Thư mục mặc định trên hàng danh sách */
    .default-folder-badge {
      display: inline-flex;
      align-items: center;
      margin-left: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      background: rgba(241, 199, 121, 0.16);
      border: 1px solid rgba(241, 199, 121, 0.45);
      color: #f1c779;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      vertical-align: middle;
    }
    .manage-list {
      width: 100%;
      border: 1px solid #2a3442;
      border-radius: 10px;
      overflow: hidden;
      background: #171e28;
    }
    .manage-row {
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      background: #171e28;
      border-bottom: 1px solid #242f3d;
      font-size: 13px;
      color: #d4dce8;
      transition: background 0.16s;
    }
    .manage-row:last-child {
      border-bottom: none;
    }
    .manage-row:hover {
      background: #1c2634;
    }
    /* Thư mục con: KHÔNG dùng gạch dọc, thụt lề nhẹ nhàng và nền tinh tế */
    .manage-row.child-folder {
      padding-left: 36px !important;
      position: relative;
      background: #141b24 !important;
      border-left: none !important;
      margin-left: 0 !important;
      width: 100% !important;
    }
    .manage-row.child-folder::before {
      display: none !important;
      content: none !important;
    }
    .manage-row .drag-handle {
      font-size: 16px;
      color: #64748b;
      cursor: grab;
      user-select: none;
      padding: 0 4px;
      flex-shrink: 0;
    }
    .manage-row .drag-handle:hover {
      color: #94a3b8;
    }
    .manage-row .folder-mark {
      font-size: 14px;
      color: #78a9ff;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }
    .manage-row .folder-mark .sub-arrow {
      color: #60a5fa;
      font-size: 13px;
      font-weight: 700;
      margin-right: 2px;
      opacity: 0.85;
    }
    .manage-row .manage-name {
      flex: 1;
      min-width: 0;
    }
    .manage-row .manage-name strong {
      font-size: 13px;
      font-weight: 600;
      color: #edf3fa;
    }
    .manage-row .manage-sub {
      font-size: 11px;
      color: #8795a8;
      margin-top: 2px;
    }

    /* Nhóm nút thao tác icon trên hàng thư mục (gọn gàng, hiện đại) */
    .folder-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .manage-row .row-action-btn {
      width: 32px;
      height: 30px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #334356;
      border-radius: 6px;
      background: #1e2735;
      color: #cbd5e1;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .manage-row .row-action-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
    }
    .manage-row .row-action-btn:hover {
      background: #2a384b;
      border-color: #4a5e78;
      color: #fff;
      transform: translateY(-1px);
    }
    .manage-row .row-action-btn.set-default:hover {
      background: #2b3524;
      border-color: #f1c779;
      color: #f1c779;
    }
    .manage-row .row-action-btn.add-child:hover {
      background: #1c334d;
      border-color: #3b82f6;
      color: #60a5fa;
    }
    .manage-row .row-action-btn.rename:hover {
      background: #253346;
      border-color: #60a5fa;
      color: #93c5fd;
    }
    .manage-row .row-action-btn.danger {
      color: #e59999;
      border-color: #55393f;
    }
    .manage-row .row-action-btn.danger:hover {
      background: #50272c;
      border-color: #7d3b44;
      color: #ffb8b8;
    }
    .manage-row .row-action-btn.disabled,
    .manage-row .row-action-btn.danger.disabled {
      opacity: 0.35 !important;
      cursor: not-allowed !important;
      border-color: #2b3543 !important;
      background: #18202a !important;
      color: #6d7b8c !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .manage-row .row-action-btn.disabled:hover,
    .manage-row .row-action-btn.danger.disabled:hover {
      background: #18202a !important;
      border-color: #2b3543 !important;
      color: #6d7b8c !important;
      transform: none !important;
    }
    .manage-row.dragging {
      opacity: 0.4;
      background: #29384d;
    }
    .manage-row.drag-over {
      box-shadow: inset 0 2px 0 #78a9ff;
      background: #1f2b3b;
    }

    /* Banner hướng dẫn cài đặt thư mục full width viền nét đứt */
    .folder-manage-instruction-banner {
      width: 100%;
      box-sizing: border-box;
      border: 1px dashed #3a4b60;
      border-radius: 8px;
      padding: 10px 14px;
      background: rgba(23, 31, 42, 0.7);
      color: #9cb2cf;
      font-size: 11.5px;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .folder-manage-instruction-banner strong {
      color: #e2e8f0;
    }
    .folder-manage-instruction-banner .banner-pill {
      display: inline-block;
      margin: 2px 3px;
      padding: 2px 7px;
      background: #1e2837;
      border: 1px solid #324357;
      border-radius: 5px;
      color: #cbd5e1;
      font-size: 11px;
      white-space: nowrap;
    }

    /* Nút cuộn / mở thư mục lớn trong Cài đặt Tất cả ghi nhớ */
    .folder-collapse-btn {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #1c2634;
      border: 1px solid #2f3d50;
      border-radius: 4px;
      color: #8fa5c2;
      cursor: pointer;
      padding: 0;
      transition: all 0.16s ease;
      flex-shrink: 0;
    }
    .folder-collapse-btn:hover {
      background: #27374b;
      border-color: #486180;
      color: #e5f0ff;
    }
    .folder-collapse-btn svg {
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .folder-collapse-btn.collapsed svg {
      transform: rotate(-90deg);
    }
    .folder-collapse-btn.expanded svg {
      transform: rotate(0deg);
    }
    .folder-collapse-spacer {
      width: 22px;
      height: 22px;
      display: inline-block;
      flex-shrink: 0;
    }
    .manage-row.manage-row-collapsed {
      display: none !important;
    }

    /* Tùy biến Cột 1 (Sidebar): Chiều cao gọn gàng, cố định đỉnh & đáy, chỉ cuộn vùng Thư mục con */
    .sidebar {
      padding: 14px 10px 14px !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
    .sidebar::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    .sidebar .quick,
    .sidebar .sidebar-tags,
    .sidebar .sidebar-gap,
    .sidebar .tree-row[data-folder="Tất cả ghi nhớ"] {
      flex-shrink: 0 !important;
    }
    .sidebar .spacer {
      display: none !important;
    }
    .sidebar .manage {
      flex-shrink: 0 !important;
      margin-top: auto !important;
      border-top: 1px solid var(--line) !important;
      padding-top: 4px !important;
    }
    .sidebar-folder-wrap {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    /* Vùng danh sách thư mục: Cuộn độc lập mượt mà, thanh cuộn Tàng hình chuẩn macOS / Notion */
    #sidebarFolderList {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scroll-behavior: smooth;
      scrollbar-width: none !important; /* Firefox */
      -ms-overflow-style: none !important; /* IE & Edge */
    }
    #sidebarFolderList::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
    }

        /* Mũi tên nhấp nháy báo hiệu cuộn xuống ở đáy danh sách thư mục (Không thanh viền nền, chỉ mũi tên ở giữa) */
    .folder-scroll-cue {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, rgba(19, 25, 34, 0) 0%, rgba(19, 25, 34, 0.65) 45%, rgba(19, 25, 34, 0.95) 100%);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s ease, visibility 0.22s ease;
      z-index: 10;
    }
    .folder-scroll-cue.visible {
      opacity: 1;
      visibility: visible;
    }
    .folder-scroll-cue .cue-arrow-btn {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 24px;
      background: transparent;
      border: none;
      outline: none;
      color: #9fc3f8;
      cursor: pointer;
      user-select: none;
      transition: color 0.18s ease, transform 0.18s ease;
      animation: cueArrowPulse 1.8s ease-in-out infinite;
    }
    .folder-scroll-cue .cue-arrow-btn:hover {
      color: #ffffff;
      animation-play-state: paused;
      transform: translateY(3px) scale(1.15);
    }
    .folder-scroll-cue .cue-arrow {
      flex-shrink: 0;
      stroke: currentColor;
    }

    /* Hiệu ứng nhịp thở nhấp nháy & chuyển động mũi tên chỉ xuống */
    @keyframes cueArrowPulse {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.55;
        filter: drop-shadow(0 0 2px rgba(120, 169, 255, 0.25));
      }
      50% {
        transform: translateY(3px);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(120, 169, 255, 0.75));
      }
    }

    .tree-row {
      height: 29px !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 0 8px !important;
      margin: 1px 0 !important;
      border-radius: 6px !important;
      color: #c3ccda !important;
      font-size: 13px !important;
      cursor: pointer !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    .tree-row > span:not(.count):not(.tree-icon):not(.caret) {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      min-width: 0 !important;
    }
    .tree-row:hover {
      background: #202b3a !important;
      color: #ffffff !important;
    }
    .tree-row:not(.child) {
      font-weight: 600 !important;
      color: #d6e0ec !important;
    }
    .tree-row.child {
      padding-left: 36px !important;
      font-size: 12.5px !important;
      font-weight: 400 !important;
      color: #b0bfd2 !important;
      height: 27px !important;
    }
    .tree-row.child::before {
      display: none !important;
    }
    .sidebar .settings-children-group {
      display: none !important;
      flex-direction: column !important;
      width: 100% !important;
      margin: 2px 0 4px 0 !important;
      padding: 0 !important;
      gap: 1px !important;
      box-sizing: border-box !important;
    }
    .sidebar #sidebarNavSettingsGroup:not(.collapsed) + .settings-children-group,
    .sidebar .settings-children-group.is-expanded {
      display: flex !important;
    }
    /* BỎ HOÀN TOÀN MŨI TÊN (CARET QUA PHẢI & ĐI XUỐNG) TRONG CỘT 1 (SIDEBAR) */
    .sidebar .caret,
    .sidebar #caretSettingsGroup,
    .sidebar .folder-caret-arrow {
      display: none !important;
    }
    .sidebar .settings-children-group .settings-subnav {
      height: 31px !important;
      min-height: 31px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 0 10px 0 24px !important;
      margin: 1px 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
      border-radius: 6px !important;
      border: none !important;
      background: transparent !important;
      color: #cbd5e1 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      cursor: pointer !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    .sidebar .settings-children-group .settings-subnav:hover {
      background: #202b3a !important;
      color: #ffffff !important;
    }
    .sidebar .settings-children-group .settings-subnav.selected,
    .sidebar .settings-children-group .settings-subnav.is-active {
      background: #243752 !important;
      color: #d9e9ff !important;
      box-shadow: inset 3px 0 #78a9ff !important;
      font-weight: 600 !important;
    }
    .sidebar .settings-children-group .settings-subnav .tree-icon {
      width: 16px !important;
      text-align: center !important;
      font-size: 13.5px !important;
      flex-shrink: 0 !important;
      line-height: 1 !important;
    }
    .sidebar .settings-children-group .settings-subnav .subnav-label,
    .sidebar .settings-children-group .settings-subnav span:not(.tree-icon) {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 12.5px !important;
      color: inherit !important;
    }
    .tree-row.selected {
      background: #243752 !important;
      color: #d9e9ff !important;
      box-shadow: inset 2px 0 #78a9ff !important;
      font-weight: 600 !important;
    }
    .tree-row .caret {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 16px !important;
      height: 16px !important;
      border-radius: 4px !important;
      color: #8da2ba !important;
      cursor: pointer !important;
      user-select: none !important;
      flex-shrink: 0 !important;
      margin-right: -1px !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    .tree-row .caret:hover {
      background: #28374a !important;
      color: #78a9ff !important;
    }
    .tree-row .caret .caret-svg {
      display: block !important;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      transform-origin: center !important;
    }
    /* Khi cuộn lại (collapsed): xoay mũi tên chỉ sang phải */
    .tree-row.collapsed .caret .caret-svg {
      transform: rotate(-90deg) !important;
    }
    /* Ẩn các thư mục con khi thư mục cha bị cuộn lại */
    .tree-row.child.folder-collapsed {
      display: none !important;
    }
    /* Thư mục lớn không có con: ẩn caret */
    .tree-row .caret.empty {
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .tree-row .tree-icon {
      width: 16px !important;
      text-align: center !important;
      flex-shrink: 0 !important;
      color: #78a9ff !important;
      font-size: 12px !important;
      line-height: 1 !important;
    }
    .tree-row.child .tree-icon {
      font-size: 12px !important;
      color: #8da9ce !important;
      width: 16px !important;
      text-align: center !important;
    }
    .tree-row .count {
      margin-left: auto !important;
      color: #738499 !important;
      font-size: 10px !important;
    }

    /* Quản lý nhãn: Full chiều cao Cột 2, bảng nhãn co giãn tối đa */
    #viewTags .tag-heading, #profileTagsSection .tag-heading {
      flex: 0 0 auto !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 0 16px 0 !important;
    }

    #viewTags .tag-toolbar, #profileTagsSection .tag-toolbar {
      flex: 0 0 auto !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 0 14px 0 !important;
    }

    #viewTags .tag-table, #profileTagsSection .tag-table {
      flex: 1 1 auto !important;
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      border: 1px solid #2a3442 !important;
      border-radius: 11px !important;
      background: #171e28 !important;
      overflow: hidden !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    }

    #viewTags .tag-table, #profileTagsSection .tag-table-head {
      flex: 0 0 auto !important;
      height: 38px !important;
      line-height: 38px !important;
      background: #1c2430 !important;
      border-bottom: 1px solid #2a3442 !important;
      padding: 0 17px !important;
    }

    #viewTags #tagRows, #profileTagsSection #tagRows {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      min-height: 0 !important;
    }

    #viewTags .tag-row, #profileTagsSection .tag-row {
      min-height: 48px !important;
      padding: 6px 17px !important;
      border-bottom: 1px solid #242e3b !important;
      align-items: center !important;
    }

    #viewTags .tag-row, #profileTagsSection .tag-row:last-child {
      border-bottom: none !important;
    }

    #viewTags .tag-pagination, #profileTagsSection .tag-pagination {
      flex: 0 0 auto !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 12px 0 0 0 !important;
    }

    /* Menu Dropdown Sắp Xếp Trực Quan */
    .sort-dropdown-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .sort-btn {
      height: 30px;
      padding: 0 10px;
      border: 1px solid #303c4c;
      border-radius: 7px;
      background: #1b232e;
      color: #cdd7e5;
      font: 12px "Segoe UI", system-ui, sans-serif;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .sort-btn:hover {
      background: #243242;
      border-color: #486180;
      color: #ffffff;
    }
    .sort-dropdown-wrap.open .sort-btn {
      background: #24354c;
      border-color: #5d83b5;
      color: #78a9ff;
    }
    .sort-btn .sort-icon {
      font-size: 13px;
      color: #78a9ff;
      line-height: 1;
    }
    .sort-btn .sort-current-label {
      font-size: 12px;
      white-space: nowrap;
    }
    .sort-btn .sort-caret {
      font-size: 10px;
      color: #8da2ba;
      line-height: 1;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sort-dropdown-wrap.open .sort-btn .sort-caret {
      transform: rotate(180deg);
    }
    .sort-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 175px;
      padding: 5px;
      background: #17202c;
      border: 1px solid #334458;
      border-radius: 8px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
      z-index: 99999 !important;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sort-menu[hidden] {
      display: none !important;
    }
    .sort-menu-item {
      height: 32px;
      padding: 0 10px;
      border: none;
      border-radius: 5px;
      background: transparent;
      color: #cbd5e1;
      font: 12px "Segoe UI", system-ui, sans-serif;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      text-align: left;
      user-select: none;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .sort-menu-item:hover {
      background: #233142;
      color: #ffffff;
    }
    .sort-menu-item.active {
      color: #78a9ff;
      font-weight: 600;
      background: #1d2c3e;
    }
    .sort-menu-item .sort-check {
      width: 14px;
      text-align: center;
      font-size: 12px;
      color: #70d6b0;
      visibility: hidden;
      flex-shrink: 0;
    }
    .sort-menu-item.active .sort-check {
      visibility: visible;
    }
    .sort-menu-divider {
      height: 1px;
      margin: 4px 6px;
      background: #27374a;
    }

    /* Nút Ghim trong màn hình Chi tiết & Soạn thảo (#viewDetail) */
    .btn-pin-detail {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 24px;
      padding: 0 9px;
      border: 1px solid #36485c;
      border-radius: 6px;
      background: #17212d;
      color: #9cb0c8;
      font: 11px "Segoe UI", system-ui, sans-serif;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }
    .btn-pin-detail:hover {
      background: #223144;
      border-color: #4d6888;
      color: #edf4fc;
    }
    .btn-pin-detail .pin-star {
      font-size: 13px;
      line-height: 1;
      color: #728499;
      transition: color 0.15s, transform 0.15s;
    }
    .btn-pin-detail:hover .pin-star {
      color: #f1c779;
      transform: scale(1.15);
    }
    .btn-pin-detail.pinned {
      background: rgba(241, 199, 121, 0.14);
      border-color: #e6c175;
      color: #f6d289;
      font-weight: 600;
      box-shadow: 0 0 10px rgba(241, 199, 121, 0.15);
    }
    .btn-pin-detail.pinned .pin-star {
      color: #f1c779;
      transform: scale(1.1);
      filter: drop-shadow(0 0 3px rgba(241, 199, 121, 0.6));
    }
    .btn-pin-detail.pinned:hover {
      background: rgba(241, 199, 121, 0.22);
      border-color: #fbd68c;
      color: #fff;
    }

    /* Thẻ ghi nhớ đã ghim trong danh sách */
    .note-card.is-pinned {
      border-left: 3px solid #f1c779 !important;
      background: linear-gradient(90deg, rgba(241, 199, 121, 0.06) 0%, rgba(26, 36, 49, 0.6) 100%);
    }
    .note-card .pin {
      margin-left: auto;
      color: #f1c779;
      font-size: 13px;
      line-height: 1;
      filter: drop-shadow(0 0 3px rgba(241, 199, 121, 0.4));
    }

    /* =========================================================================
       NHẮC VIỆC (REMINDERS) - GIAI ĐOẠN 1
       ========================================================================= */

    /* 1. Huy hiệu Nhắc việc trên thẻ ghi nhớ Cột 2 */
    .card-reminder-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.5;
      white-space: nowrap;
      user-select: none;
      transition: all 0.15s ease;
    }
    .card-reminder-badge.overdue {
      background: rgba(239, 68, 68, 0.16);
      border: 1px solid rgba(239, 68, 68, 0.45);
      color: #fca5a5;
    }
    .card-reminder-badge.today {
      background: rgba(245, 158, 11, 0.16);
      border: 1px solid rgba(245, 158, 11, 0.45);
      color: #fcd34d;
    }
    .card-reminder-badge.upcoming {
      background: rgba(59, 130, 246, 0.14);
      border: 1px solid rgba(59, 130, 246, 0.35);
      color: #93c5fd;
    }

    /* 2. Cảnh báo quá hạn ở Cột 1 (Sidebar) */
    .sidebar .count.has-overdue {
      background: #742525 !important;
      color: #ffc4c4 !important;
      font-weight: 700 !important;
      padding: 1px 6px !important;
      border-radius: 8px !important;
      box-shadow: 0 0 6px rgba(239, 68, 68, 0.4) !important;
    }

    /* 3. Bộ điều khiển Nhắc việc thông minh trong màn hình Chi tiết */
    .reminder-panel {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-reminder-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      background: #17212e;
      border: 1px solid #2d3e54;
      color: #96a9c2;
      font: 11px "Segoe UI", sans-serif;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }
    .btn-reminder-trigger:hover,
    .btn-reminder-trigger.open {
      background: #202d3e;
      border-color: #486487;
      color: #e2ecf8;
    }
    .btn-reminder-trigger .rem-icon {
      color: #78a9ff;
      font-size: 12px;
    }
    .btn-reminder-trigger .rem-caret {
      font-size: 9px;
      color: #7489a3;
      transition: transform 0.2s;
    }
    .btn-reminder-trigger.open .rem-caret {
      transform: rotate(180deg);
    }

    /* Menu chọn nhanh thời gian nhắc việc */
    .reminder-quick-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 276px;
      padding: 10px;
      background: #16202c;
      border: 1px solid #324357;
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
      z-index: 60;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .reminder-quick-menu[hidden] {
      display: none !important;
    }
    .reminder-menu-header {
      font-size: 11px;
      font-weight: 650;
      color: #9eb5d0;
      padding-bottom: 4px;
      border-bottom: 1px solid #243242;
    }
    .reminder-presets {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .rem-preset-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 6px 8px;
      background: #1e2a3a;
      border: 1px solid #2d3e52;
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      transition: all 0.14s;
    }
    .rem-preset-btn:hover {
      background: #26384f;
      border-color: #4b6a91;
      transform: translateY(-1px);
    }
    .rem-preset-btn .preset-label {
      font-size: 10.5px;
      color: #cbd7e6;
      font-weight: 600;
    }
    .rem-preset-btn .preset-time {
      font-size: 9.5px;
      color: #79a7eb;
    }
    .reminder-custom-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-top: 6px;
      border-top: 1px solid #243242;
    }
    .reminder-custom-row .custom-label {
      font-size: 10.5px;
      color: #8fa5bf;
    }
    .reminder-datetime-input {
      width: 100%;
      height: 28px;
      padding: 0 8px;
      border: 1px solid #334458;
      border-radius: 5px;
      background: #0f151e;
      color: #e2ecf8;
      color-scheme: dark;
      font: 11px "Segoe UI", sans-serif;
      box-sizing: border-box;
    }
    .reminder-datetime-input:focus {
      border-color: #5c87bf;
      outline: none;
    }

    /* Thanh nhắc việc đang hoạt động (Active Bar) */
    .reminder-active-bar {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 3px 6px 3px 10px;
      background: #172230;
      border: 1px solid #2f435c;
      border-radius: 6px;
    }
    .reminder-active-bar[hidden] {
      display: none !important;
    }
    .reminder-active-bar.is-overdue {
      background: #271a1a;
      border-color: #5c2c2c;
    }
    .reminder-active-bar.is-today {
      background: #241e15;
      border-color: #574121;
    }
    .reminder-active-info {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #cbd8e8;
      font-weight: 550;
    }
    .reminder-active-bar.is-overdue .reminder-active-info {
      color: #fca5a5;
    }
    .reminder-active-bar.is-today .reminder-active-info {
      color: #fcd34d;
    }
    .reminder-active-badge {
      font-size: 9px;
      padding: 1px 5px;
      border-radius: 3px;
      background: rgba(59, 130, 246, 0.2);
      color: #93c5fd;
      font-weight: 600;
    }
    .reminder-active-bar.is-overdue .reminder-active-badge {
      background: rgba(239, 68, 68, 0.25);
      color: #fca5a5;
    }
    .reminder-active-bar.is-today .reminder-active-badge {
      background: rgba(245, 158, 11, 0.25);
      color: #fcd34d;
    }
    .reminder-active-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 4px;
      padding-left: 6px;
      border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .rem-act-btn {
      height: 22px;
      padding: 0 7px;
      border-radius: 4px;
      border: 1px solid transparent;
      background: transparent;
      font: 10px "Segoe UI", sans-serif;
      cursor: pointer;
      user-select: none;
      transition: all 0.12s;
      white-space: nowrap;
    }
    .rem-act-btn.done {
      background: rgba(34, 197, 94, 0.15);
      border-color: rgba(34, 197, 94, 0.35);
      color: #86efac;
      font-weight: 600;
    }
    .rem-act-btn.done:hover {
      background: rgba(34, 197, 94, 0.3);
      color: #ffffff;
    }
    .rem-act-btn.snooze, .rem-act-btn.edit {
      background: #1e2b3c;
      border-color: #31445b;
      color: #9fb8d7;
    }
    .rem-act-btn.snooze:hover, .rem-act-btn.edit:hover {
      background: #27384f;
      color: #ffffff;
    }
    .rem-act-btn.cancel {
      color: #a0aec0;
    }
    .rem-act-btn.cancel:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #fca5a5;
    }

    /* Tùy chọn lặp lại định kỳ (1 ngày, tuần, tháng, năm) */
    .reminder-repeat-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-top: 6px;
      border-top: 1px solid #243242;
    }
    .reminder-repeat-row .custom-label {
      font-size: 10.5px;
      color: #8fa5bf;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .reminder-repeat-pills {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
    }
    .rem-repeat-pill {
      height: 25px;
      padding: 0 4px;
      border-radius: 5px;
      border: 1px solid #2d3e52;
      background: #172230;
      color: #9cb0c9;
      font: 600 10px "Segoe UI", system-ui, sans-serif;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.14s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .rem-repeat-pill:hover {
      background: #233449;
      color: #e2ecf8;
      border-color: #48668a;
    }
    .rem-repeat-pill.active {
      background: rgba(56, 189, 248, 0.18);
      border-color: #38bdf8;
      color: #7dd3fc;
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
    }
    .reminder-repeat-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9.5px;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(56, 189, 248, 0.16);
      border: 1px solid rgba(56, 189, 248, 0.35);
      color: #7dd3fc;
      font-weight: 600;
      white-space: nowrap;
    }
    .reminder-repeat-badge[hidden] {
      display: none !important;
    }

    /* Nút Icon Nhắc hẹn trên Thanh công cụ soạn thảo (#quillToolbar) */
    #quillToolbar .ql-reminder-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #fbbf24 !important;
      position: relative;
      transition: transform 0.15s ease, background 0.15s ease;
    }
    #quillToolbar .ql-reminder-btn:hover {
      background: #29384a !important;
      border-color: #405775 !important;
      color: #78a9ff !important;
      transform: none !important;
    }
    #quillToolbar .ql-reminder-btn:hover svg {
      stroke: #78a9ff !important;
    }

    /* Thẻ/Chip Nhắc hẹn chèn trực tiếp trong nội dung văn bản (.ql-inline-reminder) */
    .ql-inline-reminder {
      display: inline-flex;
      align-items: center;
      vertical-align: baseline;
      margin: 2px 4px;
      user-select: none;
      cursor: pointer;
    }
    .ql-inline-reminder .inline-rem-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 9px;
      border-radius: 14px;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.45;
      background: rgba(59, 130, 246, 0.16);
      border: 1px solid rgba(96, 165, 250, 0.45);
      color: #93c5fd;
      transition: all 0.15s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    .ql-inline-reminder:hover .inline-rem-chip {
      filter: brightness(1.15);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
    }
    .ql-inline-reminder.is-today .inline-rem-chip {
      background: rgba(245, 158, 11, 0.18);
      border-color: rgba(251, 191, 36, 0.55);
      color: #fcd34d;
    }
    .ql-inline-reminder.is-overdue .inline-rem-chip {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(248, 113, 113, 0.55);
      color: #fca5a5;
    }
    .ql-inline-reminder.is-done .inline-rem-chip {
      background: rgba(34, 197, 94, 0.14);
      border-color: rgba(74, 222, 128, 0.4);
      color: #86efac;
      opacity: 0.82;
    }
    .ql-inline-reminder.is-done .inline-rem-title {
      text-decoration: line-through;
    }
    .ql-inline-reminder .inline-rem-repeat {
      padding: 0 5px;
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.45);
      font-size: 10px;
      color: #7dd3fc;
      font-weight: 700;
    }
    .ql-inline-reminder .inline-rem-title {
      font-weight: 700;
      color: #f8fafc;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Hộp thoại Đặt / Sửa lịch nhắc hẹn trong nội dung (#inlineReminderDialog) */
    .inline-reminder-dialog:not([open]) {
      display: none !important;
    }
    .inline-reminder-dialog[open] {
      display: flex !important;
      flex-direction: column !important;
    }
    .inline-reminder-dialog {
      width: min(420px, calc(100vw - 24px)) !important;
      max-width: 420px !important;
      padding: 0 !important;
      border: 1px solid #334458 !important;
      border-radius: 12px !important;
      background: #16202c !important;
      color: #e2ecf8 !important;
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65) !important;
      position: fixed !important;
      inset: 0 !important;
      margin: auto !important;
      height: fit-content !important;
      overflow: hidden !important;
      z-index: 999 !important;
    }
    .inline-reminder-dialog::backdrop {
      background: rgba(6, 10, 16, 0.72) !important;
      backdrop-filter: blur(3px) !important;
    }
    .inline-rem-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px;
      background: #111924;
      border-bottom: 1px solid #253447;
    }
    .inline-rem-modal-head h3 {
      margin: 0;
      font-size: 13.5px;
      font-weight: 700;
      color: #f1f5f9;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .inline-rem-modal-close {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .inline-rem-modal-close:hover {
      background: #1e293b;
      color: #fff;
    }
    .inline-rem-modal-body {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .inline-rem-field-label {
      font-size: 11px;
      font-weight: 600;
      color: #9fb3c8;
      margin-bottom: 4px;
      display: block;
    }
    .inline-rem-text-input {
      width: 100%;
      height: 34px;
      padding: 0 10px;
      border: 1px solid #334458;
      border-radius: 6px;
      background: #0f151e;
      color: #f1f5f9;
      font: 12px "Segoe UI", system-ui, sans-serif;
      box-sizing: border-box;
      outline: none;
    }
    .inline-rem-text-input:focus {
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
    }
    .inline-rem-modal-foot {
      padding: 11px 16px;
      background: #111924;
      border-top: 1px solid #253447;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    /* =========================================================================
       GIAI ĐOẠN 2: DIALOG CÀI ĐẶT EMAIL NHẮC VIỆC (SMTP GMAIL) - THIẾT KẾ GỌN
       ========================================================================= */
    .email-settings-dialog:not([open]) {
      display: none !important;
    }
    .email-settings-dialog[open] {
      display: flex !important;
      flex-direction: column !important;
    }
    .email-settings-dialog {
      width: min(540px, calc(100vw - 32px)) !important;
      max-width: 540px !important;
      max-height: 90vh !important;
      padding: 16px 20px 14px !important;
      border: 1px solid #334155 !important;
      border-radius: 12px !important;
      background: #17202c !important;
      color: #e2e8f0 !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
      overflow: hidden !important;
      position: fixed !important;
      inset: 0 !important;
      margin: auto !important;
    }
    .email-settings-dialog::backdrop {
      background: rgba(5, 8, 13, 0.75) !important;
      backdrop-filter: blur(4px) !important;
    }
    .email-settings-content {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 4px;
      overflow-y: auto;
      padding-right: 4px;
      flex: 1 1 auto;
      min-height: 0;
    }
    .email-settings-content::-webkit-scrollbar {
      width: 5px;
    }
    .email-settings-content::-webkit-scrollbar-thumb {
      background: #2b394d;
      border-radius: 4px;
    }
    .email-settings-content::-webkit-scrollbar-thumb:hover {
      background: #3e5370;
    }

    .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .email-toggle-card.compact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      background: #121923;
      border: 1px solid #233449;
      border-radius: 8px;
    }
    .email-toggle-card.compact .email-toggle-info strong {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #edf2f9;
      margin-bottom: 1px;
    }
    .email-toggle-card.compact .email-toggle-info span {
      display: block;
      font-size: 10px;
      color: #7f92a7;
      line-height: 1.35;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
      flex-shrink: 0;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #2b394d;
      transition: 0.2s;
      border-radius: 22px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background-color: #ffffff;
      transition: 0.2s;
      border-radius: 50%;
    }
    .toggle-switch input:checked + .toggle-slider {
      background: linear-gradient(100deg, #3b82f6, #6366f1);
    }
    .toggle-switch input:checked + .toggle-slider:before {
      transform: translateX(18px);
    }

    .field-label.compact {
      display: block;
      margin: 0 0 3px 0;
      color: #94a3b8;
      font-size: 10.5px;
      font-weight: 600;
    }

    .text-field.compact {
      width: 100% !important;
      height: 32px !important;
      padding: 0 9px !important;
      border: 1px solid #2b3a4f !important;
      border-radius: 6px !important;
      background: #0d1520 !important;
      color: #f1f5f9 !important;
      font: 11.5px "Segoe UI", sans-serif !important;
      outline: 0 !important;
      box-sizing: border-box !important;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .text-field.compact:focus {
      border-color: #4b88e8 !important;
      box-shadow: 0 0 0 2px rgba(75, 136, 232, 0.25) !important;
    }

    .password-field-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }
    .password-field-wrapper .text-field.compact {
      padding-right: 32px !important;
    }
    .btn-toggle-pw {
      position: absolute;
      right: 6px;
      background: transparent;
      border: none;
      color: #7b8e9f;
      cursor: pointer;
      font-size: 13px;
      padding: 3px 5px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
    .btn-toggle-pw:hover {
      color: #e2e8f0;
      background: rgba(255, 255, 255, 0.08);
    }

    .email-guide-details {
      background: #0e1622;
      border: 1px dashed #2f4055;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 10.5px;
      transition: background 0.15s;
    }
    .email-guide-details[open] {
      background: #111a28;
      border-style: solid;
      border-color: #3b82f6;
    }
    .email-guide-details summary {
      cursor: pointer;
      font-weight: 600;
      color: #60a5fa;
      user-select: none;
      outline: none;
      font-size: 10.5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .email-guide-details summary:hover {
      color: #93c5fd;
    }
    .guide-steps-body {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #1f2c3d;
    }
    .guide-steps {
      margin: 0;
      padding-left: 17px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: 10.5px;
      color: #cbd5e1;
      line-height: 1.45;
    }
    .guide-steps a {
      color: #60a5fa;
      text-decoration: underline;
    }

    .email-content-compact-box {
      background: #121923;
      border: 1px solid #233449;
      border-radius: 8px;
      padding: 9px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .field-hint-mini {
      font-size: 9.5px;
      color: #64748b;
      font-weight: normal;
    }
    .content-options-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-top: 5px;
      border-top: 1px solid #1a2433;
      flex-wrap: wrap;
    }
    .content-checkbox-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 10.5px;
      color: #cbd5e1;
      cursor: pointer;
      user-select: none;
    }
    .content-checkbox-label input[type="checkbox"] {
      width: 14px;
      height: 14px;
      cursor: pointer;
      accent-color: #3b82f6;
    }

    .advanced-smtp-details {
      background: #101722;
      border: 1px solid #212e3e;
      border-radius: 6px;
      padding: 5px 9px;
      font-size: 10.5px;
      color: #8da0b7;
    }
    .advanced-smtp-details summary {
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      color: #8da0b7;
      outline: none;
    }
    .advanced-smtp-details summary:hover {
      color: #cbd5e1;
    }
    .smtp-advanced-grid {
      display: grid;
      grid-template-columns: 1fr 90px;
      gap: 9px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #1d2938;
    }

    .email-test-feedback {
      padding: 7px 11px;
      border-radius: 6px;
      font-size: 10.5px;
      line-height: 1.4;
    }
    .email-test-feedback[hidden] {
      display: none !important;
    }
    .email-test-feedback.success {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6ee7b7;
    }
    .email-test-feedback.error {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }
    .email-test-feedback.loading {
      background: rgba(59, 130, 246, 0.15);
      border: 1px solid rgba(59, 130, 246, 0.4);
      color: #93c5fd;
    }

    .email-dialog-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #233449;
      flex-shrink: 0;
    }
    .btn-test-email {
      height: 30px;
      padding: 0 11px;
      border: 1px solid #3b82f6;
      border-radius: 6px;
      background: rgba(59, 130, 246, 0.12);
      color: #93c5fd;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.15s, color 0.15s;
    }
    .btn-test-email:hover {
      background: rgba(59, 130, 246, 0.25);
      color: #ffffff;
    }
    .btn-test-email:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* =========================================================================
       QUẢN LÝ NGƯỜI DÙNG, PHÂN QUYỀN & AUTH (MULTI-TENANT UI)
       ========================================================================= */
    .user-capsule {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 32px;
      padding: 0 10px 0 3px;
      border-radius: 20px;
      background: #17212e;
      border: 1px solid #2d3e52;
      cursor: pointer;
      user-select: none;
      transition: all 0.16s ease;
      position: relative;
    }
    .user-capsule:hover {
      background: #202d3e;
      border-color: #4a678f;
    }
    .user-capsule .avatar-circle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      color: white;
      font-size: 11px;
      font-weight: 700;
      display: grid;
      place-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .user-capsule .user-info-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
      text-align: left;
    }
    .topbar {
      position: relative;
      z-index: 1200 !important;
      overflow: visible !important;
    }
    .top-actions {
      position: relative;
      z-index: 1201 !important;
      overflow: visible !important;
    }
    .user-capsule .user-name-display {
      font-size: 11px;
      font-weight: 650;
      color: #e2ecf8;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-capsule .user-role-badge {
      font-size: 9px;
      font-weight: 600;
      color: #f1c779;
      letter-spacing: 0.3px;
    }
    .user-capsule .capsule-caret {
      font-size: 9px;
      color: #7489a3;
      margin-left: 2px;
      transition: transform 0.2s;
    }
    .user-capsule.open .capsule-caret {
      transform: rotate(180deg);
    }
    .user-dropdown-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      z-index: 1202 !important;
      overflow: visible !important;
    }
    .user-dropdown-wrap.open {
      z-index: 1300 !important;
    }
    .user-dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 260px;
      width: max-content;
      max-width: 340px;
      background: #17212e;
      border: 1px solid #2f4157;
      border-radius: 10px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 4px 14px rgba(0,0,0,0.4);
      padding: 6px;
      z-index: 999999 !important;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .user-dropdown-menu[hidden] {
      display: none !important;
    }
    .user-menu-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px 10px;
    }
    .user-menu-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .user-menu-meta {
      flex: 1;
      min-width: 0;
    }
    .user-menu-fullname {
      font-size: 12.5px;
      font-weight: 700;
      color: #f1f5f9;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 240px;
    }
    .user-menu-username {
      font-size: 11px;
      color: #94a3b8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 240px;
    }
    .user-menu-divider {
      height: 1px;
      background: #253549;
      margin: 3px 0;
    }
    .user-menu-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: #cbd5e1;
      font-size: 12px;
      cursor: pointer;
      text-align: left;
      width: 100%;
      white-space: nowrap;
      transition: background 0.14s, color 0.14s;
    }
    .user-menu-item:hover {
      background: #223247;
      color: #ffffff;
    }
    .user-menu-item.danger {
      color: #fca5a5;
    }
    .user-menu-item.danger:hover {
      background: rgba(239, 68, 68, 0.16);
      color: #fecaca;
    }

    /* Màn hình Quản trị Người dùng & Thông tin cá nhân */
    #viewProfile:not([hidden]) {
      padding: 24px 28px 48px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      background: #11161e !important;
      gap: 16px;
    }
    .admin-compact-stat-pills {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .admin-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 10px;
      border-radius: 7px;
      background: #17212e;
      border: 1px solid #28374a;
      font-size: 11.5px;
      color: #94a3b8;
      white-space: nowrap;
    }
    .admin-stat-pill strong {
      font-size: 13px;
      font-weight: 800;
      color: #f1f5f9;
    }
    .admin-stat-pill.active strong { color: #70d6b0; }
    .admin-stat-pill.pending strong { color: #f59e0b; }
    .admin-stat-pill.blocked strong { color: #f87171; }
    .admin-auto-approve-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 32px;
      padding: 0 11px;
      border-radius: 8px;
      background: #17212e;
      border: 1px solid #2d3e54;
      font-size: 11.5px;
      font-weight: 600;
      color: #cbd5e1;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .admin-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      width: 100%;
    }
    .admin-stat-card {
      padding: 14px 18px;
      border-radius: 10px;
      background: #17212e;
      border: 1px solid #28374a;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .admin-stat-card .stat-number {
      font-size: 24px;
      font-weight: 800;
      color: #f1f5f9;
    }
    .admin-stat-card .stat-label {
      font-size: 11px;
      color: #8fa2b8;
    }
    .admin-stat-card.active .stat-number { color: #70d6b0; }
    .admin-stat-card.pending .stat-number { color: #f59e0b; }
    .admin-stat-card.blocked .stat-number { color: #f87171; }

    .admin-setting-card {
      padding: 16px 20px;
      border-radius: 10px;
      background: linear-gradient(135deg, #182332 0%, #131c28 100%);
      border: 1px solid #2d3e54;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .setting-title-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .setting-icon {
      font-size: 20px;
      color: #f59e0b;
      flex-shrink: 0;
    }
    .admin-card-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #f1f5f9;
    }
    .admin-card-subtitle {
      font-size: 11.5px;
      color: #94a3b8;
      margin-top: 4px;
      line-height: 1.5;
    }

    .admin-table-card {
      border-radius: 10px;
      background: #17212e;
      border: 1px solid #28374a;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    .admin-table-header {
      padding: 10px 16px;
      border-bottom: 1px solid #253344;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      flex: none;
    }
    .admin-table-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #e2ecf8;
    }
    .admin-table-search input {
      height: 29px;
      padding: 0 12px;
      border-radius: 6px;
      background: #101722;
      border: 1px solid #2b3d52;
      color: #e2ecf8;
      font-size: 11px;
      width: 260px;
      outline: none;
    }
    .admin-table-search input:focus {
      border-color: #4a77b5;
    }
    .admin-table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: left;
    }
    .admin-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      padding: 9px 14px;
      background: #131b26;
      color: #7d92ab;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.5px;
      border-bottom: 1px solid #243447;
      white-space: nowrap;
    }
    .admin-table td {
      padding: 8px 14px;
      border-bottom: 1px solid #1f2c3d;
      color: #cbd5e1;
      vertical-align: middle;
    }
    .admin-table tr:last-child td {
      border-bottom: none;
    }
    .admin-table tr:hover td {
      background: #1b2738;
    }
    .user-cell-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .user-cell-name {
      font-weight: 650;
      color: #f8fafc;
    }
    .user-cell-sub {
      font-size: 10.5px;
      color: #7d92ab;
    }
    .badge-role {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
    }
    .badge-role.admin {
      background: rgba(245, 158, 11, 0.16);
      border: 1px solid rgba(245, 158, 11, 0.45);
      color: #fcd34d;
    }
    .badge-role.user {
      background: rgba(59, 130, 246, 0.14);
      border: 1px solid rgba(59, 130, 246, 0.35);
      color: #93c5fd;
    }
    .badge-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
    }
    .badge-status.approved {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6ee7b7;
    }
    .badge-status.pending {
      background: rgba(245, 158, 11, 0.18);
      border: 1px solid rgba(245, 158, 11, 0.5);
      color: #fcd34d;
    }
    .badge-status.blocked {
      background: rgba(239, 68, 68, 0.16);
      border: 1px solid rgba(239, 68, 68, 0.45);
      color: #fca5a5;
    }
    .table-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }
    .btn-table-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      line-height: 1;
      height: 26px;
      padding: 0 9px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid #33465d;
      background: #1a2533;
      color: #cdd7e5;
      transition: all 0.14s;
      white-space: nowrap;
      vertical-align: middle;
    }
    .action-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      line-height: 1;
      vertical-align: middle;
    }
    /* Dải Nhãn không viền tích hợp ngay trên dòng Tất cả ghi nhớ (.pane-head) kèm 2 mũi tên cuộn ngang */
    .pane-head {
      overflow: visible !important;
      position: relative !important;
      z-index: 500 !important;
      gap: 14px;
    }
    .pane-head-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 10px;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    .popular-tags-viewport {
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-behavior: smooth;
      display: flex;
      align-items: center;
    }
    .popular-tags-viewport::-webkit-scrollbar {
      display: none;
    }
    .pane-head-tags .popular-tags {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 2px 0;
      margin: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .pane-head-tags .popular-tag {
      height: 26px;
      padding: 0 11px;
      border: 0 !important;
      border-radius: 13px;
      font-size: 11px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: none !important;
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .pane-head-tags .popular-tag:hover {
      filter: brightness(1.15);
      transform: translateY(-1px);
    }
    .pane-head-tags .popular-tag.active {
      font-weight: 700;
      box-shadow: none !important;
    }
    .tag-scroll-arrow {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #2e3e52;
      background: #1b2533;
      color: #cbd5e1;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      user-select: none;
      transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    }
    .tag-scroll-arrow:hover:not(:disabled) {
      background: #28384d;
      border-color: #4b688b;
      color: #ffffff;
    }
    .tag-scroll-arrow:disabled {
      cursor: default;
    }
    .tag-scroll-arrow[hidden] {
      display: none !important;
    }
    @media (max-width: 768px) {
      .pane-head-tags {
        display: none !important;
      }
    }
    .btn-table-action:hover {
      background: #25364c;
      border-color: #4a678f;
      color: #ffffff;
    }
    .btn-table-action.primary {
      background: linear-gradient(100deg, #10b981, #059669);
      border-color: #10b981;
      color: #ffffff;
    }
    .btn-table-action.primary:hover {
      filter: brightness(1.15);
    }
    .btn-table-action.danger {
      background: rgba(239, 68, 68, 0.12);
      border-color: rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }
    .btn-table-action.danger:hover {
      background: rgba(239, 68, 68, 0.25);
      color: #ffffff;
    }

    /* Chế độ Khóa màn hình bắt buộc đăng nhập */
    body.require-login .app,
    html.require-login-pre .app {
      filter: blur(10px) brightness(0.45);
      pointer-events: none !important;
      user-select: none !important;
      opacity: 0.45;
      transition: filter 0.25s ease, opacity 0.25s ease;
    }
    body.require-login #btnCloseAuthModal,
    html.require-login-pre #btnCloseAuthModal {
      display: none !important;
    }

    /* Auth Modal */
    .auth-modal {
      border: 1px solid #2f435c;
      border-radius: 14px;
      background: #141c27;
      color: #e5edf7;
      padding: 0;
      max-width: 440px;
      width: calc(100vw - 32px);
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.75);
      pointer-events: auto !important;
      user-select: auto !important;
    }
    .auth-modal * {
      pointer-events: auto;
    }
    .auth-modal:not([open]) {
      display: none !important;
    }
    .auth-modal[open] {
      display: block !important;
      position: fixed;
      inset: 0;
      margin: auto;
      height: fit-content;
      z-index: 120;
    }
    .auth-modal::backdrop {
      background: rgba(5, 8, 12, 0.82);
      backdrop-filter: blur(4px);
    }
    .auth-modal-content {
      padding: 24px 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .auth-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .auth-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .auth-logo {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      display: grid;
      place-items: center;
      color: white;
      font-size: 14px;
      font-weight: 700;
    }
    .auth-app-name {
      font-size: 15px;
      font-weight: 750;
      color: #f1f5f9;
    }
    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #0f151e;
      padding: 3px;
      border-radius: 8px;
      border: 1px solid #243346;
    }
    .auth-tab-btn {
      height: 32px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #8da2ba;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.16s ease;
    }
    .auth-tab-btn.active {
      background: #1e2b3c;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .auth-feedback {
      padding: 9px 13px;
      border-radius: 7px;
      font-size: 11.5px;
      line-height: 1.45;
    }
    .auth-feedback[hidden] {
      display: none !important;
    }
    .auth-feedback.error {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }
    .auth-feedback.success {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6ee7b7;
    }
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .auth-form[hidden] {
      display: none !important;
    }
    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .auth-storage-note {
      padding: 10px 12px;
      border-radius: 7px;
      background: #0e1520;
      border: 1px solid #233549;
      color: #9cb2cd;
      font-size: 10.5px;
      line-height: 1.5;
    }
    .auth-hint {
      margin-top: 4px;
      text-align: center;
      font-size: 10.5px;
      color: #7e91a6;
    }
    .auth-link {
      font-size: 11.5px;
      color: #60a5fa;
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      transition: color 0.15s;
    }
    .auth-link:hover {
      color: #93c5fd;
      text-decoration: underline;
    }


    /* Profile View Layout & Styling - Sleek, Compact & Mobile-First */
    #viewProfile:not([hidden]) {
      padding: 14px 22px 28px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      background: #11161e !important;
      gap: 12px;
    }
    .profile-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding-bottom: 2px;
      flex: none;
    }
    .profile-top-left {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .profile-subtabs {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #151d28;
      border: 1px solid #263547;
      border-radius: 8px;
      padding: 3px;
      overflow-x: auto;
      max-width: 100%;
      scrollbar-width: none;
    }
    .profile-subtabs::-webkit-scrollbar {
      display: none;
    }
    .profile-subtab-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      line-height: 1;
      height: 28px;
      padding: 0 11px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #8fa3ba;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
      vertical-align: middle;
    }
    .profile-subtab-btn:hover {
      color: #e2ecf8;
      background: rgba(255,255,255,0.04);
    }
    .profile-subtab-btn.active {
      background: #253852;
      color: #7dd3fc;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
    .profile-top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    /* Thẻ Hồ sơ hợp nhất (Ảnh đại diện + Tài khoản + Họ tên + Email trên 1 khối ngang gọn) */
    .profile-unified-identity-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      background: linear-gradient(135deg, #172231 0%, #141d29 100%);
      border: 1px solid #2a3b50;
      border-radius: 10px;
      padding: 13px 18px;
      box-sizing: border-box;
    }
    .profile-identity-left {
      display: flex;
      align-items: center;
      gap: 13px;
      padding-right: 18px;
      border-right: 1px solid #243447;
    }
    .profile-avatar-preview {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      color: white;
      font-size: 24px;
      font-weight: 700;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38), 0 0 0 2px rgba(59, 130, 246, 0.38);
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .profile-avatar-preview img,
    .avatar-circle img,
    .user-menu-avatar img,
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }
    .profile-identity-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .profile-identity-badges {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .profile-username-chip {
      font-size: 13px;
      font-weight: 700;
      color: #60a5fa;
    }
    .profile-role-chip,
    #profileR2RoleBadge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px;
      line-height: 1 !important;
      height: 22px;
      font-size: 10.5px;
      font-weight: 700;
      padding: 0 9px !important;
      border-radius: 12px;
      background: rgba(59, 130, 246, 0.15);
      border: 1px solid rgba(59, 130, 246, 0.35);
      color: #93c5fd;
      vertical-align: middle;
    }
    .profile-avatar-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .profile-basic-form-inline {
      display: grid;
      grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.1fr) minmax(130px, 0.9fr) auto;
      gap: 10px;
      align-items: end;
      width: 100%;
    }
    /* Lưới 2 cột cân đối cho Đổi mật khẩu & Mã PIN, và AI & Cloudflare R2 */
    .profile-grid-2col {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
      gap: 12px;
      align-items: stretch;
      width: 100%;
    }
    .profile-form-grid-2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      width: 100%;
    }
    .profile-form-grid-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      width: 100%;
    }
    .profile-form-grid-passwords {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      width: 100%;
    }
    .profile-card {
      background: #17212e;
      border: 1px solid #28374a;
      border-radius: 10px;
      padding: 13px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      min-width: 0;
    }
    .profile-card .field-label {
      display: block !important;
      margin: 0 0 4px 0 !important;
      color: #cbd5e1 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
    }
    .profile-card .text-field {
      width: 100% !important;
      height: 33px !important;
      padding: 0 10px !important;
      border: 1px solid #2b3e55 !important;
      border-radius: 6px !important;
      background: #0e1520 !important;
      color: #f1f5f9 !important;
      font: 12px "Segoe UI", sans-serif !important;
      outline: 0 !important;
      box-sizing: border-box !important;
      transition: border-color 0.15s, box-shadow 0.15s !important;
    }
    .profile-card textarea.text-field {
      height: auto !important;
      min-height: 76px !important;
      max-height: 320px !important;
      padding: 8px 10px !important;
      resize: vertical !important;
      line-height: 1.5 !important;
      font-family: inherit !important;
      white-space: pre-wrap !important;
      transition: min-height 0.2s ease !important;
    }
    .profile-card textarea.text-field.expanded {
      min-height: 240px !important;
    }
    .profile-card .text-field:focus {
      border-color: #60a5fa !important;
      box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18) !important;
    }
    .profile-card .text-field::placeholder {
      color: #64748b !important;
      font-size: 11px !important;
    }
    .profile-card .password-field-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }
    .profile-card .password-field-wrapper .text-field {
      padding-right: 32px !important;
    }
    .profile-card .password-field-wrapper .btn-toggle-pw {
      position: absolute;
      right: 4px;
      background: transparent;
      border: none;
      color: #7b8e9f;
      cursor: pointer;
      font-size: 12px;
      padding: 3px 5px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
    .profile-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #223143;
      padding-bottom: 8px;
      gap: 8px;
    }
    .profile-card-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #f1f5f9;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .profile-form {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .r2-guide-details {
      background: rgba(14, 165, 233, 0.07);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-radius: 7px;
      padding: 6px 11px;
      font-size: 11px;
      color: #bae6fd;
    }
    .r2-guide-details summary {
      cursor: pointer;
      font-weight: 600;
      color: #38bdf8;
      user-select: none;
    }
    @media (max-width: 900px) {
      .profile-unified-identity-card {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .profile-identity-left {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid #243447;
        padding-bottom: 10px;
      }
      .profile-basic-form-inline {
        grid-template-columns: 1fr 1fr;
      }
      .profile-basic-form-inline .profile-save-btn-cell {
        grid-column: 1 / -1;
      }
    }
    @media (max-width: 600px) {
      .profile-basic-form-inline {
        grid-template-columns: 1fr;
      }
      .profile-grid-2col {
        grid-template-columns: 1fr;
      }
    }

    /* =========================================================================
       KHÓA ỨNG DỤNG BẰNG MÃ PIN 4 SỐ (PIN LOCK STYLES)
       ========================================================================= */
    .switch-toggle {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .switch-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .switch-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #334155;
      transition: 0.25s ease;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .switch-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: 0.25s ease;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    .switch-toggle input:checked + .switch-slider {
      background-color: #10b981;
    }
    .switch-toggle input:checked + .switch-slider:before {
      transform: translateX(20px);
    }
    .pin-badge-status {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      background: rgba(148, 163, 184, 0.15);
      color: #94a3b8;
    }
    .pin-badge-status.active {
      background: rgba(16, 185, 129, 0.18);
      color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    /* Màn hình khóa PIN Fullscreen Overlay */
    .pin-lock-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999999;
      background: rgba(11, 17, 29, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      touch-action: manipulation;
      animation: pinOverlayFadeIn 0.25s ease-out;
    }
    .pin-lock-overlay[hidden] {
      display: none !important;
    }
    /* Khi ứng dụng bị khóa PIN: Làm mờ toàn bộ nền bên dưới và chặn tương tác */
    body.pin-locked {
      overflow: hidden !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }
    body.pin-locked main,
    body.pin-locked header,
    body.pin-locked aside,
    body.pin-locked .app-container,
    body.pin-locked .workspace-container,
    body.pin-locked #notesList,
    body.pin-locked #editorPanel {
      filter: blur(14px) !important;
      pointer-events: none !important;
    }
    @keyframes pinOverlayFadeIn {
      from { opacity: 0; transform: scale(1.02); }
      to { opacity: 1; transform: scale(1); }
    }
    .pin-lock-card {
      background: #17212e;
      border: 1px solid #28374a;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
      border-radius: 20px;
      padding: 28px 24px;
      width: 100%;
      max-width: 320px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      position: relative;
    }
    .pin-lock-shield-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(96, 165, 250, 0.12);
      border: 1px solid rgba(96, 165, 250, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .pin-lock-title {
      font-size: 19px;
      font-weight: 700;
      color: #f8fafc;
      margin: 0 0 4px 0;
    }
    .pin-lock-sub {
      font-size: 12px;
      color: #94a3b8;
      margin: 0 0 18px 0;
    }
    .pin-dots-container {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 12px;
    }
    .pin-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid #64748b;
      background: transparent;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pin-dot.filled {
      background: #60a5fa;
      border-color: #60a5fa;
      box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
      transform: scale(1.15);
    }
    .pin-dot.error {
      background: #ef4444 !important;
      border-color: #ef4444 !important;
      box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
    }
    .pin-dot.success {
      background: #10b981 !important;
      border-color: #10b981 !important;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
    }
    .pin-error-msg {
      font-size: 12px;
      color: #f87171;
      min-height: 18px;
      margin-bottom: 12px;
      font-weight: 500;
    }
    .pin-error-msg[hidden] {
      visibility: hidden;
      display: block !important;
    }
    .pin-shake {
      animation: pinShakeAnim 0.4s ease-in-out;
    }
    @keyframes pinShakeAnim {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-8px); }
      40%, 80% { transform: translateX(8px); }
    }
    .pin-keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 250px;
      margin-bottom: 14px;
    }
    .pin-key {
      width: 60px;
      height: 60px;
      margin: 0 auto;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #f1f5f9;
      font-size: 22px;
      font-weight: 600;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      touch-action: manipulation;
      transition: all 0.15s ease;
      user-select: none;
    }
    .pin-key:active {
      transform: scale(0.92);
      background: rgba(96, 165, 250, 0.2);
      border-color: #60a5fa;
    }
    .pin-key.pin-key-clear {
      font-size: 15px;
      color: #94a3b8;
    }
    .pin-key.pin-key-backspace {
      font-size: 18px;
      color: #94a3b8;
    }
    .pin-forgot-box {
      margin-top: 2px;
    }
    .btn-forgot-pin {
      background: transparent;
      border: none;
      color: #60a5fa;
      font-size: 12.5px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      transition: all 0.15s;
    }
    .btn-forgot-pin:hover {
      text-decoration: underline;
      background: rgba(96, 165, 250, 0.1);
    }
    .pin-forgot-modal {
      position: absolute;
      inset: 0;
      background: rgba(11, 17, 29, 0.95);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 10;
      border-radius: 20px;
      animation: pinOverlayFadeIn 0.2s ease-out;
    }
    .pin-forgot-modal[hidden] {
      display: none !important;
    }
    .pin-forgot-modal-content {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 20px;
      width: 100%;
      max-width: 280px;
      text-align: left;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    /* =========================================================================
       TÍNH NĂNG IN ẤN & XUẤT PDF (PRINT STYLES & DIALOG)
       ========================================================================= */
    .btn-print-notes-action {
      height: 31px;
      padding: 0 11px;
      border: 1px solid #364b66;
      border-radius: 8px;
      background: #1b2636;
      color: #cbdcf2;
      font: 600 11.5px "Segoe UI", sans-serif;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .btn-print-notes-action:hover {
      background: #25384f;
      border-color: #5880b2;
      color: #ffffff;
      transform: translateY(-1px);
    }
    .btn-print-detail {
      cursor: pointer;
    }
    .btn-print-detail:hover {
      background: #223144;
      border-color: #4d6888;
      color: #edf4fc;
    }

    /* Print Dialog UI */
    .print-dialog {
      border: 1px solid #2f435c;
      border-radius: 14px;
      background: #141c27;
      color: #e5edf7;
      padding: 0;
      max-width: 580px;
      width: calc(100vw - 32px);
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.75);
    }
    .print-dialog:not([open]) {
      display: none !important;
    }
    .print-dialog[open] {
      display: block !important;
      position: fixed;
      inset: 0;
      margin: auto;
      height: fit-content;
      max-height: 90vh;
      z-index: 120;
    }
    .print-dialog::backdrop {
      background: rgba(5, 8, 12, 0.82);
      backdrop-filter: blur(4px);
    }
    .print-dialog-content {
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-height: 85vh;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .print-dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid #233448;
      padding-bottom: 12px;
    }
    .print-dialog-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .print-dialog-icon {
      font-size: 24px;
      color: #60a5fa;
    }
    .print-dialog-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #f1f5f9;
    }
    .print-dialog-subtitle {
      margin: 2px 0 0;
      font-size: 11.5px;
      color: #94a3b8;
    }

    /* Scope selection */
    .print-scope-box {
      background: #0f1722;
      border: 1px solid #25374d;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .print-scope-label {
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .print-scope-options {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .print-radio-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid #283a4f;
      background: #172230;
      color: #cbd5e1;
      font-size: 11.5px;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }
    .print-radio-pill:has(input:checked) {
      background: #253c5c;
      border-color: #60a5fa;
      color: #ffffff;
      font-weight: 600;
    }
    .print-radio-pill input {
      margin: 0;
      accent-color: #3b82f6;
    }

    /* Print Notes List */
    .print-list-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .print-list-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }
    .print-select-all-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      font-weight: 600;
      color: #cbd5e1;
      cursor: pointer;
      user-select: none;
    }
    .print-select-all-label input {
      margin: 0;
      accent-color: #3b82f6;
    }
    .print-search-input {
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      background: #0d1520;
      border: 1px solid #2a3d54;
      color: #e2ecf8;
      font-size: 11px;
      width: 170px;
      outline: none;
    }
    .print-search-input:focus {
      border-color: #60a5fa;
    }
    .print-notes-list {
      max-height: 220px;
      overflow-y: auto;
      background: #0d1520;
      border: 1px solid #25374d;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .print-note-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 10px;
      border-radius: 6px;
      background: #141f2c;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .print-note-item:hover {
      background: #1c2b3d;
      border-color: #364d68;
    }
    .print-note-item input[type="checkbox"] {
      margin: 0;
      accent-color: #3b82f6;
      flex-shrink: 0;
    }
    .print-note-item-title {
      font-size: 12px;
      font-weight: 600;
      color: #f1f5f9;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .print-note-item-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #8da2ba;
      flex-shrink: 0;
    }
    .print-note-folder-pill {
      background: #1e2c3e;
      border: 1px solid #334863;
      padding: 1px 6px;
      border-radius: 4px;
      color: #93c5fd;
    }

    /* Print Options */
    .print-options-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 12px;
      padding: 10px 14px;
      background: #0f1722;
      border: 1px solid #25374d;
      border-radius: 8px;
    }
    @media (max-width: 500px) {
      .print-options-grid {
        grid-template-columns: 1fr;
      }
    }
    .print-opt-check {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      color: #cbd5e1;
      cursor: pointer;
      user-select: none;
    }
    .print-opt-check input {
      margin: 0;
      accent-color: #3b82f6;
    }

    /* Print Dialog Actions */
    .print-dialog-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 4px;
    }

    /* Khung in ấn ẩn ở chế độ xem bình thường */
    .print-area {
      display: none !important;
    }

    /* =========================================================================
       CSS CHUẨN XUẤT RA MÁY IN VÀ FILE PDF (@media print)
       ========================================================================= */
    @media print {
      @page {
        size: A4 portrait;
        margin: 15mm 15mm 15mm 15mm;
      }
      *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
      }
      html, body {
        background: #ffffff !important;
        color: #111827 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      /* Ẩn toàn bộ UI phần mềm */
      .app, .topbar, .workspace, .sidebar, .content-container,
      dialog, .settings-toast, .user-dropdown-menu {
        display: none !important;
      }
      /* Chỉ hiện khu vực printArea */
      .print-area {
        display: block !important;
        background: #ffffff !important;
        color: #111827 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .print-doc-header {
        border-bottom: 2px solid #1f2937;
        padding-bottom: 10px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .print-doc-app-name {
        font-size: 14pt;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #111827;
      }
      .print-doc-print-time {
        font-size: 8.5pt;
        color: #6b7280;
      }
      .print-toc-box {
        margin-bottom: 24px;
        padding: 14px 18px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #f9fafb;
      }
      .print-toc-title {
        font-size: 13pt;
        font-weight: 700;
        margin: 0 0 10px 0;
        color: #111827;
      }
      .print-toc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
      }
      .print-toc-table th, .print-toc-table td {
        padding: 6px 8px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }
      .print-toc-table th {
        font-weight: 700;
        color: #374151;
        background: #f3f4f6;
      }
      .print-page-break {
        page-break-before: always !important;
        break-before: page !important;
      }
      .print-note-article {
        margin-bottom: 24px;
        padding-bottom: 18px;
        border-bottom: 1px dashed #d1d5db;
        break-inside: auto;
        page-break-inside: auto;
      }
      .print-note-article.keep-together {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }
      .print-note-article:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
      .print-note-title {
        font-size: 18pt !important;
        font-weight: 800 !important;
        color: #111827 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
      }
      .print-note-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 9pt !important;
        color: #4b5563 !important;
        margin-bottom: 14px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
      }
      .print-pill {
        display: inline-block !important;
        padding: 1px 6px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        font-size: 8.5pt !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
      }
      .print-note-body {
        font-size: 10.5pt !important;
        line-height: 1.65 !important;
        color: #1f2937 !important;
      }
      .print-note-body img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        margin: 8px 0 !important;
        page-break-inside: avoid !important;
      }
      .print-no-images img {
        display: none !important;
      }
      .print-note-body h1 { font-size: 15pt !important; font-weight: 700 !important; margin: 14px 0 6px !important; }
      .print-note-body h2 { font-size: 13pt !important; font-weight: 700 !important; margin: 12px 0 5px !important; }
      .print-note-body h3 { font-size: 11.5pt !important; font-weight: 700 !important; margin: 10px 0 4px !important; }
      .print-note-body p { margin: 6px 0 !important; }
      .print-note-body ul, .print-note-body ol { padding-left: 22px !important; margin: 6px 0 !important; }
      .print-note-body li { margin: 3px 0 !important; }
      .print-note-body blockquote {
        border-left: 3px solid #3b82f6 !important;
        padding: 4px 12px !important;
        margin: 8px 0 !important;
        color: #4b5563 !important;
        background: #f9fafb !important;
      }
      .print-note-body pre, .print-note-body code {
        font-family: Consolas, monospace !important;
        background: #f3f4f6 !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-size: 9.5pt !important;
      }
      .print-note-footer {
        font-size: 8pt !important;
        color: #9ca3af !important;
        margin-top: 14px !important;
        display: flex !important;
        justify-content: space-between !important;
        border-top: 1px dotted #e5e7eb !important;
        padding-top: 6px !important;
      }
    }

    /* =========================================================================
       TÍNH NĂNG CHIA SẺ GHI NHỚ (NOTE SHARING MODAL & UI)
       ========================================================================= */
    .share-modal:not([open]) {
      display: none !important;
    }
    .share-modal[open] {
      display: flex !important;
      flex-direction: column !important;
      position: fixed !important;
      inset: 0 !important;
      margin: auto !important;
      z-index: 125 !important;
    }
    .share-modal {
      width: min(540px, calc(100vw - 32px)) !important;
      max-width: 540px !important;
      max-height: 90vh !important;
      padding: 0 !important;
      border: 1px solid #2e4157 !important;
      border-radius: 14px !important;
      background: #141c27 !important;
      color: #e2e8f0 !important;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8) !important;
      overflow: hidden !important;
    }
    .share-modal::backdrop {
      background: rgba(5, 8, 13, 0.78) !important;
      backdrop-filter: blur(4px) !important;
    }
    .share-modal-content {
      display: flex;
      flex-direction: column;
      padding: 20px 22px 18px;
      gap: 16px;
      max-height: 90vh;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .share-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #233449;
      padding-bottom: 12px;
    }
    .share-header-title-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .share-header-icon {
      font-size: 24px;
    }
    .share-title-text {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #f1f5f9;
    }
    .share-subtitle-text {
      margin: 2px 0 0;
      font-size: 12px;
      color: #94a3b8;
      max-width: 360px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .btn-share-modal-close {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 18px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
    }
    .btn-share-modal-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }
    .share-invite-area {
      background: #0f1622;
      border: 1px solid #243548;
      border-radius: 10px;
      padding: 12px 14px;
    }
    .share-field-label {
      display: block;
      font-size: 11.5px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 8px;
    }
    .share-input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .share-input-wrapper {
      position: relative;
      flex: 1;
    }
    .share-input-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #64748b;
      font-size: 13px;
      pointer-events: none;
    }
    .share-text-input {
      width: 100%;
      box-sizing: border-box;
      background: #172230;
      border: 1px solid #2d4157;
      border-radius: 7px;
      padding: 8px 10px 8px 30px;
      color: #f8fafc;
      font-size: 12px;
      outline: none;
      transition: border-color 0.15s;
    }
    .share-text-input:focus {
      border-color: #38bdf8;
    }
    .share-role-select {
      background: #172230;
      border: 1px solid #2d4157;
      border-radius: 7px;
      padding: 8px 10px;
      color: #f8fafc;
      font-size: 12px;
      cursor: pointer;
      outline: none;
    }
    .btn-share-action {
      background: #0284c7;
      color: #fff;
      border: none;
      border-radius: 7px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .btn-share-action:hover {
      background: #0369a1;
    }
    .btn-share-action:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .share-status-alert {
      margin-top: 8px;
      font-size: 11.5px;
      padding: 6px 10px;
      border-radius: 6px;
    }
    .share-status-alert.error {
      background: rgba(239, 68, 68, 0.15);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }
    .share-status-alert.success {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }
    .share-list-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .share-list-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      font-weight: 600;
      color: #94a3b8;
    }
    .share-collaborator-count {
      font-size: 11px;
      color: #64748b;
    }
    .share-collaborators-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
    }
    .share-user-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #0f1622;
      border: 1px solid #203043;
      border-radius: 8px;
      gap: 10px;
    }
    .share-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .share-user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #1e293b;
      color: #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
      flex-shrink: 0;
      border: 1px solid #334155;
    }
    .share-user-meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .share-user-email {
      font-size: 12.5px;
      color: #f1f5f9;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .share-user-role-label {
      font-size: 10.5px;
      color: #64748b;
    }
    .share-user-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .share-perm-badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 500;
    }
    .share-perm-badge.owner {
      background: rgba(56, 189, 248, 0.15);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }
    .share-perm-badge.edit {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }
    .share-perm-badge.view {
      background: rgba(148, 163, 184, 0.15);
      color: #94a3b8;
      border: 1px solid rgba(148, 163, 184, 0.3);
    }
    .share-perm-select-inline {
      background: #172230;
      border: 1px solid #2d4157;
      border-radius: 6px;
      padding: 4px 8px;
      color: #f1f5f9;
      font-size: 11.5px;
      outline: none;
      cursor: pointer;
    }
    .btn-share-revoke {
      background: none;
      border: 1px solid transparent;
      color: #f87171;
      padding: 4px 7px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      transition: all 0.15s;
    }
    .btn-share-revoke:hover {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.3);
    }
    .share-invite-area[hidden],
    .share-recipient-leave-box[hidden] {
      display: none !important;
    }
    .share-recipient-leave-box {
      display: flex;
      justify-content: center;
      padding: 6px 0;
    }
    .btn-leave-share {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: #f87171;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .btn-leave-share:hover {
      background: rgba(239, 68, 68, 0.22);
    }
    .share-modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #233449;
      padding-top: 12px;
      gap: 12px;
    }
    .share-footer-tip {
      font-size: 10.5px;
      color: #64748b;
      line-height: 1.4;
      flex: 1;
    }
    .btn-share-done {
      background: #253344;
      border: 1px solid #36485d;
      color: #e2e8f0;
      border-radius: 7px;
      padding: 7px 18px;
      font-size: 12px;
      cursor: pointer;
      font-weight: 500;
    }
    .btn-share-done:hover {
      background: #314256;
    }

    /* Nút Chia sẻ SÁNG LÊN khi ghi nhớ có trạng thái chia sẻ */
    .btn-share-detail.is-active-share {
      color: #38bdf8 !important;
      background: rgba(56, 189, 248, 0.18) !important;
      border-color: rgba(56, 189, 248, 0.55) !important;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
      font-weight: 600 !important;
    }
    .btn-share-detail.is-active-share span {
      color: #38bdf8 !important;
    }
    .btn-mobile-act#btnMobileShareDetail.is-active-share {
      color: #38bdf8 !important;
      background: rgba(56, 189, 248, 0.22) !important;
      border-color: rgba(56, 189, 248, 0.6) !important;
      box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
    }
    .btn-mobile-act#btnMobileShareDetail.is-active-share svg {
      stroke: #38bdf8 !important;
      filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7));
    }

    /* Mục chia sẻ bằng liên kết công khai (Public link share) */
    .share-link-section {
      background: #0f1622;
      border: 1px solid #243548;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .share-link-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .share-link-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .share-link-icon {
      font-size: 20px;
      flex-shrink: 0;
    }
    .share-link-title {
      font-size: 13px;
      font-weight: 600;
      color: #f1f5f9;
    }
    .share-link-desc {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 2px;
      line-height: 1.4;
    }
    .share-toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .share-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .share-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #263548;
      transition: .25s;
      border-radius: 24px;
      border: 1px solid #3b4e65;
    }
    .share-toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 2px;
      bottom: 2px;
      background-color: #cbd5e1;
      transition: .25s;
      border-radius: 50%;
    }
    .share-toggle-switch input:checked + .share-toggle-slider {
      background-color: #0284c7;
      border-color: #38bdf8;
    }
    .share-toggle-switch input:checked + .share-toggle-slider:before {
      transform: translateX(20px);
      background-color: #ffffff;
    }
    .share-link-box {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #141c27;
      border: 1px solid #233449;
      border-radius: 8px;
      padding: 10px;
      animation: fadeInShareLink 0.2s ease;
    }
    @keyframes fadeInShareLink {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .share-link-input-group {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .share-link-url-input {
      flex: 1;
      min-width: 0;
      background: #0b1118;
      border: 1px solid #283a4f;
      border-radius: 7px;
      padding: 8px 10px;
      color: #38bdf8;
      font-size: 11.5px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      outline: none;
    }
    .btn-copy-share-url {
      background: linear-gradient(135deg, #0284c7, #2563eb);
      color: #ffffff;
      border: none;
      border-radius: 7px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      transition: all 0.15s ease;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }
    .btn-copy-share-url:hover {
      background: linear-gradient(135deg, #0369a1, #1d4ed8);
    }
    .btn-copy-share-url.copied {
      background: #10b981 !important;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
    }
    .share-link-note-hint {
      font-size: 11px;
      color: #64748b;
    }

    /* Banner thông báo đồng bộ thời gian thực từ thiết bị khác */
    .remote-sync-banner {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 8px;
      padding: 8px 12px;
      margin: 6px 0 10px;
      font-size: 12px;
      color: #fef3c7;
      animation: fadeInBanner 0.25s ease;
      box-sizing: border-box;
      width: 100%;
    }
    .remote-sync-banner[hidden] {
      display: none !important;
    }
    .remote-sync-banner.is-live {
      background: rgba(56, 189, 248, 0.12);
      border-color: rgba(56, 189, 248, 0.4);
      color: #e0f2fe;
    }
    .remote-sync-banner.is-conflict {
      background: rgba(239, 68, 68, 0.14);
      border-color: rgba(239, 68, 68, 0.45);
      color: #fee2e2;
    }
    .remote-sync-icon {
      font-size: 15px;
      line-height: 1;
      flex-shrink: 0;
    }
    .remote-sync-text {
      flex: 1 1 200px;
      font-size: 12px;
      line-height: 1.45;
    }
    .remote-sync-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-left: auto;
      flex-shrink: 0;
    }
    .btn-sync-action {
      padding: 4px 10px;
      font-size: 11px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      cursor: pointer;
      font-weight: 550;
      transition: 0.15s;
    }
    .btn-sync-action:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    .btn-sync-action.primary {
      background: #0284c7;
      border-color: #38bdf8;
      color: #fff;
    }
    .btn-sync-action.primary:hover {
      background: #0369a1;
    }
    @keyframes fadeInBanner {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Thẻ badge trên Note Card */
    .card-shared-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 10.5px;
      font-weight: 600;
      padding: 1.5px 6px;
      border-radius: 4px;
    }
    .card-shared-badge.edit {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }
    .card-shared-badge.view {
      background: rgba(56, 189, 248, 0.15);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    /* =========================================================================
       GIAO DIỆN CHIA SẺ CÔNG KHAI (CHỈ HIỂN THỊ TIÊU ĐỀ VÀ NỘI DUNG)
       ========================================================================= */
    body.public-share-mode {
      background: #0b0f17 !important;
      overflow-x: hidden !important;
    }
    body.public-share-mode .topbar,
    body.public-share-mode #appSidebar,
    body.public-share-mode .sidebar,
    body.public-share-mode .mobile-bottom-nav,
    body.public-share-mode .mobile-menu-toggle,
    body.public-share-mode .mobile-fab,
    body.public-share-mode #pinLockOverlay,
    body.public-share-mode #authModal,
    body.public-share-mode .sidebar-backdrop,
    body.public-share-mode .mobile-tags-bar,
    body.public-share-mode .mobile-btn-ai-summary {
      display: none !important;
    }
    body.public-share-mode .workspace {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100vh !important;
      height: 100dvh !important;
      display: block !important;
      background: #0b0f17 !important;
    }
    body.public-share-mode .content-container {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      background: #0b0f17 !important;
    }
    #viewPublicShare:not([hidden]) {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      background: #0b0f17 !important;
      padding: 32px 20px 80px 20px !important;
      box-sizing: border-box !important;
    }
    .public-share-wrapper {
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .public-share-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .public-share-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .public-share-logo {
      font-size: 20px;
      color: #38bdf8;
    }
    .public-share-appname {
      font-size: 16px;
      font-weight: 700;
      color: #f1f5f9;
      letter-spacing: -0.2px;
    }
    .public-share-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .public-share-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: rgba(56, 189, 248, 0.1);
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 20px;
      color: #38bdf8;
      font-size: 11.5px;
      font-weight: 600;
    }
    .btn-public-edit-back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px;
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 20px;
      color: #4ade80;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-public-edit-back:hover {
      background: rgba(34, 197, 94, 0.22);
    }
    .public-share-card {
      width: 100%;
      box-sizing: border-box;
    }
    .public-share-loading[hidden],
    .public-share-error[hidden],
    .public-share-body[hidden] {
      display: none !important;
    }
    .public-share-body:not([hidden]) {
      display: block !important;
    }
    .public-share-content .note-audio-card {
      margin: 12px 0 16px 0 !important;
      position: relative;
      z-index: 5;
      white-space: normal !important;
      line-height: 1.4 !important;
    }
    .public-share-content .note-audio-card * {
      white-space: normal;
    }
    .public-share-content .note-audio-card .track-title,
    .public-share-content .note-audio-card .podcast-eyebrow,
    .public-share-content .note-audio-card .podcast-sub-row,
    .public-share-content .note-audio-card .podcast-sub-row span,
    .public-share-content .note-audio-card .podcast-times-row span,
    .public-share-content .note-audio-card button,
    .public-share-content .note-audio-card button span {
      white-space: nowrap !important;
    }
    .public-share-content .note-audio-progress-wrap {
      cursor: pointer;
    }
    .public-share-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      gap: 16px;
      color: #94a3b8;
      font-size: 15px;
    }
    .public-share-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(56, 189, 248, 0.18);
      border-top-color: #38bdf8;
      border-radius: 50%;
      animation: publicShareSpin 0.8s linear infinite;
    }
    @keyframes publicShareSpin {
      to { transform: rotate(360deg); }
    }
    .public-share-error {
      text-align: center;
      padding: 60px 20px;
      background: rgba(239, 68, 68, 0.06);
      border: 1px solid rgba(239, 68, 68, 0.2);
      border-radius: 14px;
      margin-top: 20px;
    }
    .public-share-title {
      font-size: 32px;
      font-weight: 700;
      line-height: 1.35;
      color: #f8fafc;
      letter-spacing: -0.4px;
      margin: 0 0 24px 0;
      word-break: break-word;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      user-select: text;
    }
    .public-share-content {
      font-size: 16px;
      line-height: 1.8;
      color: #cbd5e1;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      user-select: text;
    }
    .public-share-content img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 12px 0;
    }
    .public-share-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
    }
    .public-share-content th,
    .public-share-content td {
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 8px 12px;
    }
    .public-share-content th {
      background: rgba(255, 255, 255, 0.04);
      font-weight: 600;
    }
    .public-share-content blockquote {
      border-left: 3px solid #38bdf8;
      padding-left: 14px;
      margin: 14px 0;
      color: #94a3b8;
      font-style: italic;
    }
    .public-share-content pre {
      background: #070a0f;
      padding: 14px;
      border-radius: 8px;
      overflow-x: auto;
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 13.5px;
    }
    @media (max-width: 768px) {
      #viewPublicShare:not([hidden]) {
        padding: 18px 14px 60px 14px !important;
      }
      .public-share-title {
        font-size: 22px;
        margin-bottom: 16px;
        padding-bottom: 12px;
      }
      .public-share-content {
        font-size: 14.5px;
        line-height: 1.65;
      }
    }

    /* ==================== ĐẢM BẢO TOPBAR & MENU DROPDOWN LUÔN NỔI ĐÚNG LỚP STACKING CONTEXT ==================== */
    .topbar {
      position: relative !important;
      z-index: 1200 !important;
      overflow: visible !important;
    }
    .top-actions,
    .user-dropdown-wrap {
      position: relative !important;
      z-index: 1201 !important;
      overflow: visible !important;
    }
    .user-dropdown-wrap.open {
      z-index: 1300 !important;
    }
    .user-dropdown-menu {
      z-index: 999999 !important;
    }
    #viewNotes .pane-head,
    .pane-head {
      position: relative !important;
      z-index: 500 !important;
      overflow: visible !important;
    }
    #viewNotes .notes-controls,
    .notes-controls {
      position: relative !important;
      z-index: 501 !important;
      overflow: visible !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      margin-left: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      white-space: nowrap !important;
    }
    #viewNotes .notes-controls .new-note,
    #viewNotes .notes-controls .sort-dropdown-wrap,
    #viewNotes .notes-controls .col-dropdown-wrap,
    #viewNotes .notes-controls .btn-print-notes-action,
    .notes-controls .new-note,
    .notes-controls .sort-dropdown-wrap,
    .notes-controls .col-dropdown-wrap,
    .notes-controls .btn-print-notes-action {
      flex-shrink: 0 !important;
    }
    #viewNotes .sort-dropdown-wrap,
    #viewNotes .col-dropdown-wrap,
    .sort-dropdown-wrap,
    .col-dropdown-wrap {
      position: relative !important;
      z-index: 502 !important;
      overflow: visible !important;
    }
    #viewNotes .sort-dropdown-wrap.open,
    #viewNotes .col-dropdown-wrap.open,
    .sort-dropdown-wrap.open,
    .col-dropdown-wrap.open {
      z-index: 505 !important;
    }
    #viewNotes .sort-menu,
    #viewNotes .col-dropdown-menu,
    #viewNotes .overflow-tags-menu,
    .sort-menu,
    .col-dropdown-menu,
    .overflow-tags-menu {
      z-index: 99999 !important;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }
    #viewNotes .note-list,
    .note-list {
      position: relative !important;
      z-index: 1 !important;
    }
    #btnTagScrollLeft,
    #btnTagScrollRight {
      display: none !important;
    }

    /* Đảm bảo thẻ icon Audio, Nhắc việc, Chia sẻ, Ghim không bao giờ bị che hoặc co rúm */
    .card-audio-badge,
    .card-reminder-badge,
    .card-shared-badge,
    .note-card .pin {
      flex-shrink: 0 !important;
    }
    /* Bỏ giới hạn max-width của nhãn */
    .note-meta-left .tag,
    .note-list.cols-4 .note-meta-left .tag {
      max-width: none !important;
      flex-shrink: 0 !important;
    }
    /* Khoảng cách trên 8px đến tiêu đề, khoảng cách dưới 8px từ dòng nhãn, căn giữa dọc để trên dưới hình bằng nhau */
    .note-card,
    .note-list .note-card {
      padding: 8px !important;
      gap: 8px !important;
      align-items: center !important;
    }
    /* Khung viền hình hiển thị cách hình bên trong 3px, khoảng cách trên dưới bằng nhau, biểu tượng cảm xúc nằm chính giữa khung hình */
    .note-card-thumb,
    .note-list .note-card-thumb {
      align-self: center !important;
      margin: auto 0 !important;
      padding: 3px !important;
      border: 1px solid #2d3e54 !important;
      border-radius: 12px !important;
      box-sizing: border-box !important;
      background: #141d27 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .note-card-thumb-inner {
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      font-size: 42px !important;
      line-height: 1 !important;
      box-sizing: border-box !important;
    }
    .note-card-thumb-emoji {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1 !important;
      font-size: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: translateY(-1px) !important;
    }
    .note-card-thumb-img {
      border-radius: 8px !important;
    }
    /* Khoảng cách đường gạch ngang và nội dung tóm tắt 8px */
    .note-card-body .note-meta {
      margin-top: 8px !important;
      padding-top: 8px !important;
    }