/* =============================================================
   app.css — Ghi Chú App
   Responsive: Mobile (≤680px) | Tablet (681-960px) | Desktop (961px+)
   Browser: Chrome, Firefox, Safari, Edge (2020+)
   Theme: Light / Dark qua data-theme attribute
   ============================================================= */

/* ===================== RESET & BASE ========================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* CSS Variables — đổi theme chỉ cần thay đổi ở đây */
:root {
  /* Layout */
  --sidebar-w: 280px;     /* chiều rộng sidebar desktop */

  /* Border radius */
  --r:    6px;            /* góc bo tiêu chuẩn */
  --r-lg: 12px;           /* góc bo lớn (card, modal) */

  /* Animation */
  --t: 0.18s ease;

  /* --- Light theme --- */
  --bg:         #f5f5f0;
  --surface:    #ffffff;
  --surface2:   #f0ede8;
  --border:     #e0ddd8;
  --text:       #1c1c1e;
  --text-sub:   #6e6e73;
  --accent:     #f5a623;
  --accent-h:   #e09010;
  --danger:     #e53e3e;
  --note-hover: #fff8ee;
  --note-act:   #fff3d6;
  --shadow:     0 1px 4px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --input-bg:   #f7f7f5;
  --topbar-bg:  #fafaf8;
}

[data-theme="dark"] {
  --bg:         #1c1c1e;
  --surface:    #2c2c2e;
  --surface2:   #3a3a3c;
  --border:     #48484a;
  --text:       #f2f2f7;
  --text-sub:   #98989d;
  --accent:     #f5a623;
  --accent-h:   #ffc04d;
  --danger:     #ff6b6b;
  --note-hover: #38383a;
  --note-act:   #4a3f28;
  --shadow:     0 1px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.4);
  --input-bg:   #3a3a3c;
  --topbar-bg:  #2c2c2e;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--accent);
}

/* ===================== AUTH MODAL =========================== */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;                     /* top:0 right:0 bottom:0 left:0 */
  z-index: 1000;
  padding: 16px;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.auth-box {
  position: relative;           /* trên backdrop */
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  -webkit-animation: fadeUp 0.2s ease;
          animation: fadeUp 0.2s ease;
}

@-webkit-keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-box h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
}

.auth-box .sub {
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
  margin-bottom: 24px;
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-sub);
  padding: 4px 8px;
  border-radius: var(--r);
  line-height: 1;
  transition: background var(--t), color var(--t);
}
.auth-close:hover { background: var(--surface2); color: var(--text); }

/* Form field */
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t);
}
.field input:focus {
  border-color: var(--accent);
}

.auth-error {
  background: #fff0f0;
  color: var(--danger);
  border-radius: var(--r);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
[data-theme="dark"] .auth-error { background: #3d1515; }
.auth-error.show { display: block; }

.btn-primary {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--t);
  margin-top: 4px;
}
.btn-primary:hover  { background: var(--accent-h); }
.btn-primary:active { opacity: 0.85; }

.auth-toggle {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-sub);
}
.auth-toggle a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

/* ===================== APP LAYOUT =========================== */
#app {
  display: flex;
  height: 100vh;
  height: 100dvh;   /* dynamic viewport height — tự trừ address bar mobile */
  overflow: hidden;
}

/* =================== SIDEBAR ================================ */
.sidebar {
  position: relative;
  width: var(--sidebar-w);
  min-width: 180px;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: transform var(--t), width var(--t);
  flex-shrink: 0;
  overflow: hidden;
}

/* Sidebar khi ẩn: dịch sang trái */
.sidebar.hidden {
  width: 0 !important;
  min-width: 0;
  border-right: none;
  overflow: hidden;
}

/* Header sidebar: icons */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}

/* Search */
.search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.search-wrap input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t);
}
.search-wrap input:focus { border-color: var(--accent); }

/* Tabs */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox: ẩn scrollbar */
  -ms-overflow-style: none;         /* IE: ẩn scrollbar */
}
.sidebar-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.sidebar-tabs button {
  flex: 1;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sidebar-tabs button:hover { color: var(--text); }
.sidebar-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-more-btn {
  flex: none !important;
  width: 32px;
  padding: 0 !important;
  border-bottom: 2px solid transparent;
  color: var(--text-sub);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: color var(--t), border-color var(--t);
}
.tab-more-btn:hover { color: var(--text); }
.tab-more-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-more-dropdown {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  min-width: 150px;
  z-index: 300;
  overflow: hidden;
}
.tab-more-dropdown.open { display: block; }
.tab-more-dropdown button {
  flex: none !important;
  width: 100%;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  background: none;
  border: none;
  border-bottom: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.tab-more-dropdown button:hover { background: var(--surface2); color: var(--text); }
.tab-more-dropdown button.active { color: var(--accent); background: var(--surface2); }

/* Danh sách ghi chú */
.notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* Scrollbar đẹp trên desktop */
.notes-list::-webkit-scrollbar { width: 4px; }
.notes-list::-webkit-scrollbar-track { background: transparent; }
.notes-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.note-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-sub);
  font-size: 13px;
}

/* Note item trong sidebar */
.note-item {
  position: relative;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r);
  margin: 1px 6px;
  transition: background var(--t);
}
.note-item:hover    { background: var(--note-hover); }
.note-item.active   { background: var(--note-act); }
.note-item.pinned   { border-left: 3px solid var(--accent); padding-left: 11px; }

.note-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.note-item-excerpt {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}
.note-item-meta {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Public tab: note item với thumbnail + excerpt */
.note-item-pub {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
}
/* Wrapper: placeholder + img chồng lên nhau */
.note-pub-thumb-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.note-pub-thumb-ph {
  width: 100%;
  height: 100%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
}
/* Ảnh đè lên placeholder khi load thành công */
.note-pub-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.note-pub-body {
  flex: 1;
  min-width: 0;
}
.note-pub-excerpt {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 3px 0 4px;
}
.note-item-pub .note-item-title { margin-bottom: 0; }

/* Hover actions: Pin / Lock / Delete */
.note-actions {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: none;               /* ẩn mặc định, hiện khi hover */
  gap: 2px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 2px;
  box-shadow: var(--shadow);
}
.note-item:hover .note-actions { display: flex; }

.note-action-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.note-action-btn:hover { background: var(--surface2); color: var(--text); }
.note-action-btn.active { color: var(--accent); }

/* Sidebar footer: user info + login/logout */
.sidebar-footer {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  gap: 6px;
  min-height: 48px;
}
.user-info {
  flex: 1;
  font-size: 13px;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* Sidebar resizer (kéo để thay đổi chiều rộng) */
.sidebar-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.1s;
  position: relative;
  z-index: 5;
}
.sidebar-resizer:hover,
.sidebar-resizer.dragging { background: var(--accent); }

/* =================== EDITOR AREA ============================ */
.editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-width: 0;                /* quan trọng: ngăn flex item bị tràn */
  position: relative;
}

/* Nút hiện lại sidebar khi đã ẩn */
.sidebar-show-btn {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 32px;
  height: 32px;
  display: none;               /* hiện khi sidebar ẩn (bằng JS) */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--t);
}
.sidebar-show-btn:hover { background: var(--surface2); }
.sidebar-show-btn svg { width: 16px; height: 16px; stroke: var(--text); }

/* Empty state */
.editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-sub);
  padding: 24px;
}
.editor-empty svg {
  width: 56px;
  height: 56px;
  opacity: 0.3;
  stroke: var(--text-sub);
}
.editor-empty p {
  font-size: 15px;
  color: var(--text-sub);
}
.editor-empty button {
  padding: 9px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t);
}
.editor-empty button:hover { background: var(--accent-h); }

/* =================== TOPBAR ================================= */
.editor-topbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 8px 12px 8px 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}

/* Menu button (mobile only) — cao bằng 2 hàng như copy block */
.topbar-menu-btn {
  align-self: stretch;
  width: 44px;
  height: auto;
  padding: 0;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
}

/* Main column: title row + pills row */
.topbar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.topbar-row1 {
  display: flex;
  align-items: center;
  padding: 2px 0 1px;
}
.topbar-row2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0 2px;
  flex-wrap: wrap;
}

/* Tiêu đề ghi chú */
.note-title-input {
  flex: 1;
  min-width: 80px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  padding: 4px 0;
}
.note-title-input:disabled { opacity: 0.6; }
.note-title-input::placeholder { color: var(--text-sub); font-weight: 400; }

/* Trạng thái lưu (nằm trong statusbar) */
.save-status {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

/* Pills dùng chung (share pills + adv toggle) */
.pill {
  height: 26px;
  padding: 0 9px;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: none;
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Share pills wrapper */
.share-pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Block copy: cao bằng 2 hàng, hiện 5 ký tự share code nổi bật */
.btn-copy-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  align-self: stretch;
  min-width: 62px;
  padding: 0 12px;
  margin-left: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: none;
  color: var(--text-sub);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t);
}
.btn-copy-block:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy-block:hover #share-url-short { color: var(--accent); }
#share-url-short {
  font-family: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  transition: color var(--t);
}

/* =================== ADVANCED PANEL ========================= */
.adv-panel {
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Hàng link chia sẻ */
.adv-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: var(--r);
}
.adv-label-xs { color: var(--text-sub); font-size: 12px; flex-shrink: 0; }
.share-url-text {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

/* 3 nút toggle tính năng */
.adv-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.adv-feature-pill {
  padding: 5px 12px;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);        /* góc bo tiêu chuẩn (không phải pill) */
  background: none;
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--t);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.adv-feature-pill:hover { border-color: var(--accent); color: var(--accent); }
.adv-feature-pill.active {
  background: rgba(245,166,35,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
/* Khi note đã có mật khẩu: highlight btn nâng cao */
.btn-adv-toggle.has-password {
  border-color: var(--accent);
  color: var(--accent);
}
.adv-feature-pill.has-password {
  background: rgba(245,166,35,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.adv-feature-pill.has-expire {
  background: rgba(245,166,35,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.adv-badge {
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 5px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

/* Sub panel (password / readers / expire) */
.adv-sub {
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: var(--r);
  -webkit-animation: fadeDown 0.15s ease;
          animation: fadeDown 0.15s ease;
}
@-webkit-keyframes fadeDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.adv-sub-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Input trong adv panel */
.adv-input {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t);
  height: 32px;
}
.adv-input:focus { border-color: var(--accent); }
.adv-input-wide  { flex: 1; min-width: 160px; }

/* Action buttons trong adv panel */
.btn-adv-action {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  height: 32px;
  white-space: nowrap;
  transition: background var(--t);
  flex-shrink: 0;
}
.btn-adv-action:hover  { background: var(--accent-h); }
.btn-adv-remove {
  padding: 5px 10px;
  font-size: 12px;
  background: none;
  border: 1.5px solid var(--danger);
  color: var(--danger);
  border-radius: var(--r);
  cursor: pointer;
  height: 32px;
  white-space: nowrap;
  transition: background var(--t);
  flex-shrink: 0;
}
.btn-adv-remove:hover { background: rgba(229,62,62,0.08); }

/* Expire options */
.expire-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radio-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.radio-opt input[type="radio"]   { cursor: pointer; accent-color: var(--accent); }
.radio-opt input[type="number"]  {
  width: 60px;
  padding: 3px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.radio-opt input[type="number"]:focus { border-color: var(--accent); }

/* Readers list */
.readers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 4px;
}
.reader-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text);
}
.reader-tag button {
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
}
.reader-tag button:hover { color: var(--danger); }

/* =================== FLOATING TOOLBAR ======================= */
/* iOS Notes style: dark callout + arrow */
.ft {
  position: fixed;
  z-index: 500;
  display: none;                /* hiện bằng JS khi có selection */
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;         /* tắt events khi ẩn */
}
.ft.show {
  display: block;
  pointer-events: auto;
}

.ft-bar {
  display: flex;
  align-items: center;
  background: #2c2c2e;          /* dark cho cả light/dark mode */
  border-radius: 10px;
  padding: 4px 6px;
  gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  height: 42px;
}

.ft-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: #f2f2f7;
  border-radius: 7px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent; /* xóa highlight trên iOS */
}
.ft-btn:hover  { background: rgba(255,255,255,0.12); }
.ft-btn.active { background: rgba(245,166,35,0.3); color: #f5a623; }
.ft-text { font-size: 13px; font-weight: 600; }
.ft-erase { font-size: 12px; color: #ff6b6b; }
.ft-erase:hover { background: rgba(255,107,107,0.15); }

.ft-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Mũi tên của callout */
.ft-arrow {
  width: 10px;
  height: 6px;
  margin: 0 auto;
  position: relative;
}
.ft-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

/* Mũi tên hướng xuống (toolbar nằm trên text) */
.ft.above .ft-arrow::before {
  top: 0;
  border-top: 6px solid #2c2c2e;
}
/* Mũi tên hướng lên (toolbar nằm dưới text) */
.ft.below .ft-arrow {
  order: -1;                     /* đưa arrow lên trước bar */
}
.ft.below .ft-arrow::before {
  bottom: 0;
  border-bottom: 6px solid #2c2c2e;
}

/* =================== SPEED-DIAL ============================= */
.speed-dial {
  position: absolute;
  bottom: 48px; /* trên statusbar */
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.sd-trigger {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform var(--t), background var(--t);
  flex-shrink: 0;
}
.sd-trigger:hover { background: var(--accent-hover, #0077cc); }
.speed-dial.open .sd-trigger { transform: rotate(45deg); }

.speed-dial-items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
}
.speed-dial.open .speed-dial-items {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: background var(--t), border-color var(--t);
}
.sd-item:hover { background: var(--surface2); border-color: var(--text-sub); }

/* =================== STATUS BAR ============================ */
.editor-statusbar {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--topbar-bg);
  flex-shrink: 0;
}
.statusbar-main {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px 0 0;
}
.statusbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-right: 0;
}
.char-count {
  font-size: 11px;
  color: var(--text-sub);
  padding-left: 10px;
  flex-shrink: 0;
}
#history-time {
  font-size: 11px;
  opacity: 0.8;
}

/* =================== EDITOR CONTENT ========================= */
.editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  outline: none;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  min-height: 0;
}

/* Placeholder (dùng data-attribute) */
.editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-sub);
  pointer-events: none;
}

/* Định dạng nội dung trong editor */
.editor-content p   { margin: 0 0 4px; }
.editor-content h2  { font-size: 20px; font-weight: 700; margin: 12px 0 6px; }
.editor-content h3  { font-size: 17px; font-weight: 600; margin: 10px 0 4px; }
.editor-content ul,
.editor-content ol  { padding-left: 24px; margin: 4px 0; }
.editor-content li  { margin: 2px 0; }
.editor-content a   { color: var(--accent); }
.editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  margin: 8px 0;
  display: block;
}
.editor-content img.img-error,
.viewer-body img.img-error {
  min-height: 100px;
  width: 100%;
  max-width: 100%;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  opacity: 0.8;
  cursor: default;
}
/* Checklist item */
.editor-content li input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--accent);
}

/* Code block */
.code-block {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 8px 0;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SFMono-Regular',
               'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono',
               'DejaVu Sans Mono', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  display: block;
}
.code-block code {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  outline: none;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-variant-ligatures: none;
}
/* Code block trong viewer (trang share) */
.note-body .code-block,
.note-body pre.code-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
/* Nút copy trong code block (chỉ hiện ở view mode) */
.copy-code-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  line-height: 1.6;
}
.code-block:hover .copy-code-btn {
  opacity: 1;
}
.copy-code-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Locked editor: màu mờ hơn, typing bị chặn qua contenteditable=false */
.editor-locked {
  opacity: 0.7;
  cursor: default;
  user-select: text;
}

/* =================== ATTACHMENTS BAR ======================== */
.attachments-bar {
  /* Nằm trong statusbar, không có border riêng */
  display: flex;
  align-items: stretch;
  position: static;
}
/* pub-attachments-bar: stack column so list appears above header */
#pub-attachments-bar {
  flex-direction: column;
  border-top: 1px solid var(--border);
}
#pub-attachments-bar .attach-header {
  border-right: none;
  border-top: 1px solid var(--border);
  width: 100%;
}

.attach-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 32px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-sub);
  -webkit-user-select: none;
          user-select: none;
  border-right: 1px solid var(--border);
  transition: background var(--t), color var(--t);
}
.attach-header:hover { color: var(--text); background: var(--surface2); }
.attach-toggle-icon { font-size: 14px; transition: transform var(--t); line-height: 1; }
.attachments-bar.open .attach-toggle-icon,
#editor-statusbar.open .attach-toggle-icon { transform: rotate(90deg); }
.attach-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 6px;
  font-weight: 600;
  line-height: 1.4;
}

/* Danh sách file: mở rộng inline phía trên header */
.attach-list {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  max-height: 220px;
  overflow-y: auto;
}
/* For statusbar: toggled via class on #editor-statusbar */
#editor-statusbar.open > .attach-list { display: flex; }
/* For pub-attachments-bar: toggled via class on the bar itself */
.attachments-bar.open > .attach-list { display: flex; }

/* File đính kèm */
.attach-item {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

/* Ảnh thumbnail */
.attach-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity var(--t);
}
.attach-img:hover { opacity: 0.85; }

/* File không phải ảnh */
.attach-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-file:hover { background: var(--note-hover); }

/* Nút xóa attachment */
.attach-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.attach-item:hover .attach-del { display: flex; }

/* =================== HISTORY PANEL ========================== */
.history-panel {
  position: absolute;
  top: 52px;                    /* dưới topbar */
  right: 0;
  width: 260px;
  max-height: calc(100vh - 52px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: var(--r);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
  -webkit-animation: slideLeft 0.2s ease;
          animation: slideLeft 0.2s ease;
}
@-webkit-keyframes slideLeft {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.history-title { font-size: 13px; font-weight: 600; }

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.history-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
}

.history-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.history-item:hover { background: var(--surface2); }
.hi-time  { font-size: 11px; color: var(--text-sub); margin-bottom: 2px; }
.hi-title { font-size: 13px; font-weight: 500; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-hi-restore {
  margin-top: 6px;
  padding: 3px 10px;
  font-size: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
}
.btn-hi-restore:hover { background: var(--accent-h); }

/* =================== BUTTONS (icon) ========================= */
/* Icon button chuẩn */
.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.btn-icon:hover  { background: var(--surface2); color: var(--text); }
.btn-icon svg    { width: 18px; height: 18px; stroke: currentColor; }
.topbar-menu-btn svg { width: 22px; height: 22px; }
.btn-icon.danger:hover { background: rgba(229,62,62,0.1); color: var(--danger); }

/* Icon button nhỏ */
.btn-icon-xs {
  background: none;
  border: none;
  border-radius: var(--r);
  padding: 3px 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-sub);
  transition: background var(--t), color var(--t);
}
.btn-icon-xs:hover { background: var(--surface2); color: var(--text); }

/* Icon button + text (bottom toolbar) */
.btn-icon-sm {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text-sub);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--t);
}
.btn-icon-sm:hover { background: var(--surface2); color: var(--text); border-color: var(--text-sub); }

/* Advanced toggle button: active = outlined (không fill) */
.btn-adv-toggle.active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* =================== TOAST ================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #1c1c1e;
  color: #f2f2f7;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="dark"] .toast { background: #f2f2f7; color: #1c1c1e; }

/* =================== PUBLIC VIEWER PANEL ==================== */
/* Panel xem ghi chú công khai trong ứng dụng (không mở tab mới) */

/* Topbar cao hơn để chứa 2 dòng: tiêu đề + meta */
.pub-topbar {
  align-items: center;   /* căn giữa theo chiều dọc tất cả con */
  min-height: 56px;
  padding: 8px 14px;
  gap: 10px;
  overflow-x: visible;   /* không cắt icon */
}
/* Nút hamburger: căn giữa dọc tường minh, không bị kéo lên đầu */
#pub-btn-menu {
  align-self: center;
  flex-shrink: 0;
}
/* Nút Edit (chủ sở hữu) */
.btn-edit-pub-icon {
  flex-shrink: 0;
  color: var(--text-sub);
}
.btn-edit-pub-icon:hover { color: var(--accent); background: var(--surface2); }

/* Khối tiêu đề + meta (chiếm hết chiều rộng còn lại) */
.pub-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Tiêu đề ghi chú công khai */
.pub-title-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Meta: tác giả + ngày */
.pub-meta-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.pub-meta-inline .pub-by { color: var(--text-sub); }
.pub-meta-inline strong  { color: var(--text); font-weight: 600; }

/* Nút icon clone (bookmark+) */
.btn-clone-icon {
  flex-shrink: 0;
  color: var(--accent);
}
.btn-clone-icon:hover { color: var(--accent-h); background: var(--surface2); }

/* Nội dung read-only */
.pub-content-ro {
  cursor: default !important;
  user-select: text;
}
.pub-content-ro:focus { outline: none; }

/* =================== VIEWER PAGE =========================== */
/* Trang xem ghi chú chia sẻ (s/index.php) */
.viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.viewer-logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.viewer-meta {
  font-size: 13px;
  color: var(--text-sub);
}
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background var(--t);
  display: flex;
  align-items: center;
  gap: 5px;
}
.theme-toggle:hover { background: var(--surface2); }

.viewer-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px;
}

.viewer-content h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.viewer-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}
.viewer-body p   { margin-bottom: 8px; }
.viewer-body h2  { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
.viewer-body h3  { font-size: 17px; font-weight: 600; margin: 12px 0 6px; }
.viewer-body ul,
.viewer-body ol  { padding-left: 24px; margin: 8px 0; }
.viewer-body li  { margin: 3px 0; }
.viewer-body a   { color: var(--accent); }
.viewer-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  margin: 8px 0;
  display: block;
}
/* img-error đã định nghĩa ở trên, dùng chung */
.viewer-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--text-sub);
  font-style: italic;
}

/* Attachments section */
.viewer-attach       { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.viewer-attach h3    { font-size: 14px; color: var(--text-sub); margin-bottom: 12px; }
.attach-grid         { display: flex; flex-wrap: wrap; gap: 12px; }
.attach-grid img     { width: 100px; height: 100px; object-fit: cover;
                       border-radius: var(--r); cursor: pointer; }
.attach-grid a       { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
                       background: var(--surface2); border-radius: var(--r); color: var(--text);
                       text-decoration: none; font-size: 13px; }
.attach-grid a:hover { background: var(--note-hover); }

/* Clone note button */
.clone-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t);
}
.clone-btn:hover { background: var(--accent-h); }

/* Password gate */
.pw-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px;
}
.pw-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.pw-box h2    { font-size: 20px; margin-bottom: 8px; }
.pw-box p     { color: var(--text-sub); font-size: 14px; margin-bottom: 24px; }
.pw-error     { color: var(--danger); font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.pw-box input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: border-color var(--t);
}
.pw-box input:focus { border-color: var(--accent); }
.pw-box button[type="submit"] {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t);
}
.pw-box button[type="submit"]:hover { background: var(--accent-h); }

/* Expired page */
.expired-box         { text-align: center; padding: 80px 24px; }
.expired-box h2      { font-size: 24px; margin-bottom: 12px; }
.expired-box p       { color: var(--text-sub); margin-bottom: 24px; }
.expired-box a       { color: var(--accent); text-decoration: none; font-weight: 600; }

/* =================== RESPONSIVE =========================== */

/* --- Tablet: 681px – 960px --- */
@media (max-width: 960px) {
  :root { --sidebar-w: 240px; }
}

/* --- Mobile: ≤680px --- */
@media (max-width: 680px) {
  /* Sidebar overlay: nằm đè lên editor */
  #app {
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100% !important;     /* full width trên mobile */
    max-width: 100% !important;
    height: 100%;               /* stretch theo top/bottom */
    transform: translateX(-100%);
    transition: transform var(--t);
    box-shadow: none;
  }

  /* Khi sidebar mở: dịch vào, hiện backdrop */
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .sidebar-resizer { display: none; }

  /* Editor chiếm full màn hình */
  .editor-area {
    width: 100%;
  }

  /* Giảm padding trên mobile */
  .editor-content    { padding: 16px; }
  .editor-topbar     { padding: 6px 10px 6px 12px; }
  .btn-copy-block    { min-width: 54px; padding: 0 8px; }
  #share-url-short   { font-size: 12px; letter-spacing: 0.5px; }
  .adv-panel         { padding: 8px 12px; }
  .viewer-content    { padding: 20px 16px; }

  /* Lịch sử: full width */
  .history-panel {
    width: 100%;
    top: 52px;
    left: 0;
    right: 0;
    border-left: none;
  }

  /* Bottom toolbar: nhỏ hơn */
  .bottom-toolbar { padding: 6px 12px; }

  /* Font-size 16px cho mọi input/textarea/contenteditable — ngăn iOS Safari auto-zoom */
  input, textarea, select, .adv-input,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  /* Touch targets: ít nhất 44px */
  .btn-icon { width: 44px; height: 44px; }
  .sidebar-tabs button { padding: 12px 6px; }
  .note-item { padding: 12px 14px; }

  /* Ẩn note-actions trên mobile (dùng touch hold) */
  .note-item:hover .note-actions { display: none; }
  .note-item.show-actions .note-actions { display: flex; }
}

/* --- Mobile backdrop khi sidebar mở --- */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.mobile-backdrop.show { display: block; }

/* =================== SCROLLBAR GLOBAL ====================== */
@media (min-width: 681px) {
  ::-webkit-scrollbar       { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-sub); }
}

/* =================== UTILITIES ============================ */
/* Ẩn element (dùng JS .style.display) */
[hidden] { display: none !important; }

/* =================== IOS SAFARI FIX ====================== */
/* Ngăn Safari zoom khi focus vào input (yêu cầu font-size >= 16px)  */
/* max(16px, 1em): giữ font lớn hơn nếu có, không ép nhỏ xuống       */
@supports (-webkit-touch-callout: none) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea,
  select,
  [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }
}