/* =========================================================================
   QUILL DARK THEME — TÙY BIẾN GIAO DIỆN NỀN TỐI CHO BỘ SOẠN THẢO QUILL
   ========================================================================= */

/* 1. Khung chứa thanh công cụ (Toolbar) */
.ql-toolbar.ql-snow {
  background: #1a222d !important;
  border: 1px solid #303c4c !important;
  border-radius: 9px 9px 0 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  padding: 6px 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin-right: 10px !important;
}

.ql-snow .ql-formats:last-child {
  margin-right: 0 !important;
}

/* 2. Khung nội dung soạn thảo (Container & Editor) */
.ql-container.ql-snow {
  background: #171e28 !important;
  border: 1px solid #303c4c !important;
  border-top: none !important;
  border-radius: 0 0 9px 9px !important;
  color: #cbd5e1 !important;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ql-editor {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  padding: 18px 24px !important;
  outline: none !important;
  color: #cbd5e1 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Chữ mờ placeholder khi chưa gõ */
.ql-editor.ql-blank::before {
  color: #718096 !important;
  font-style: normal !important;
  left: 24px !important;
}

/* 3. Màu biểu tượng SVG trong thanh công cụ */
.ql-snow .ql-stroke {
  stroke: #cbd5e1 !important;
  stroke-width: 1.75 !important;
}

.ql-snow .ql-fill {
  fill: #cbd5e1 !important;
}

.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1.25 !important;
}

/* Các nút bấm thanh công cụ */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
  border-radius: 5px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: 0.15s !important;
}

.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* Hiệu ứng khi rê chuột & kích hoạt nút */
.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button:focus,
.ql-snow .ql-toolbar button.ql-active {
  background: #29384a !important;
  border-color: #405775 !important;
}

.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: #78a9ff !important;
}

.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: #78a9ff !important;
}

/* 4. Dropdown danh sách (Font, Header, Size) & Icon Picker (Màu chữ, Màu nền, Căn lề) */
.ql-snow .ql-picker {
  color: #cbd5e1 !important;
  height: 30px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  float: none !important;
}

/* Kích thước dropdown đủ rộng cho chữ tiếng Việt, không bị xuống dòng */
.ql-snow .ql-picker.ql-header {
  width: 145px !important;
}

.ql-snow .ql-picker.ql-font {
  width: 135px !important;
}

.ql-snow .ql-picker.ql-size {
  width: 105px !important;
}

/* Nhãn hiển thị giá trị dạng văn bản (Header, Font, Size) */
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 22px 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  outline: none !important;
  line-height: 28px !important;
  position: relative !important;
  cursor: pointer !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label::before {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 28px !important;
  display: inline-block !important;
  max-width: 100% !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label svg {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label:hover,
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-expanded .ql-picker-label {
  background: #29384a !important;
  border-color: #405775 !important;
  color: #e2efff !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label .ql-stroke {
  stroke: #9db6da !important;
}

/* Các Picker biểu tượng: Màu chữ (.ql-color), Màu nền (.ql-background), Căn lề (.ql-align) */
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  position: relative !important;
}

.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
}

.ql-snow .ql-color-picker .ql-picker-label::before,
.ql-snow .ql-icon-picker .ql-picker-label::before {
  display: none !important;
  content: none !important;
}

.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  display: block !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  float: none !important;
}

/* Biểu tượng hiển thị mặc định rõ ràng */
.ql-snow .ql-color-picker .ql-picker-label .ql-stroke:not(.ql-color-label),
.ql-snow .ql-icon-picker .ql-picker-label .ql-stroke {
  stroke: #cbd5e1 !important;
  stroke-width: 1.75 !important;
}

.ql-snow .ql-color-picker .ql-picker-label .ql-fill:not(.ql-color-label),
.ql-snow .ql-icon-picker .ql-picker-label .ql-fill {
  fill: #cbd5e1 !important;
}

/* Vạch màu dưới chữ A (Màu chữ) và nền (Màu nền) */
.ql-snow .ql-color-picker .ql-picker-label line.ql-color-label {
  stroke-width: 2 !important;
}

.ql-snow .ql-color-picker .ql-picker-label line.ql-color-label.ql-transparent {
  stroke: #ff7b72 !important;
}

/* Hiệu ứng khi rê chuột & khi mở rộng dropdown */
.ql-snow .ql-color-picker .ql-picker-label:hover,
.ql-snow .ql-color-picker.ql-expanded .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label:hover,
.ql-snow .ql-icon-picker.ql-expanded .ql-picker-label {
  background: #29384a !important;
  border-color: #405775 !important;
}

.ql-snow .ql-color-picker .ql-picker-label:hover .ql-stroke:not(.ql-color-label),
.ql-snow .ql-color-picker.ql-expanded .ql-picker-label .ql-stroke:not(.ql-color-label),
.ql-snow .ql-icon-picker .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-icon-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #78a9ff !important;
}

.ql-snow .ql-color-picker .ql-picker-label:hover .ql-fill:not(.ql-color-label),
.ql-snow .ql-color-picker.ql-expanded .ql-picker-label .ql-fill:not(.ql-color-label),
.ql-snow .ql-icon-picker .ql-picker-label:hover .ql-fill,
.ql-snow .ql-icon-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #78a9ff !important;
}

/* Menu dropdown chung */
.ql-snow .ql-picker-options {
  background-color: #17202c !important;
  border: 1px solid #36485e !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6) !important;
  color: #cbd5e1 !important;
  padding: 6px !important;
  white-space: nowrap !important;
  z-index: 50 !important;
}

/* Các mục trong dropdown văn bản (Header, Font, Size) */
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-options {
  width: auto !important;
  min-width: 100% !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item {
  padding: 6px 10px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item:hover,
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item.ql-selected {
  background: #2a3a4f !important;
  color: #78a9ff !important;
}

/* Bảng chọn màu (Color Swatches) */
.ql-snow .ql-color-picker .ql-picker-options {
  width: 172px !important;
  padding: 8px !important;
}

.ql-snow .ql-color-picker .ql-picker-item {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 3px !important;
  border-radius: 4px !important;
  border: 1px solid #2e3d50 !important;
  cursor: pointer !important;
  float: left !important;
  box-sizing: border-box !important;
  transition: transform 0.12s ease, border-color 0.12s ease !important;
}

.ql-snow .ql-color-picker .ql-picker-item:hover,
.ql-snow .ql-color-picker .ql-picker-item.ql-selected {
  transform: scale(1.22) !important;
  border-color: #fff !important;
  outline: 1px solid #78a9ff !important;
  z-index: 2 !important;
}

/* Menu chọn căn lề (.ql-align) */
.ql-snow .ql-icon-picker .ql-picker-options {
  width: auto !important;
  min-width: 34px !important;
  padding: 4px !important;
}

.ql-snow .ql-icon-picker.ql-expanded .ql-picker-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ql-snow .ql-icon-picker .ql-picker-item {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

.ql-snow .ql-icon-picker .ql-picker-item svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.ql-snow .ql-icon-picker .ql-picker-item .ql-stroke {
  stroke: #cbd5e1 !important;
  stroke-width: 1.75 !important;
}

.ql-snow .ql-icon-picker .ql-picker-item:hover,
.ql-snow .ql-icon-picker .ql-picker-item.ql-selected {
  background: #29384a !important;
}

.ql-snow .ql-icon-picker .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-icon-picker .ql-picker-item.ql-selected .ql-stroke {
  stroke: #78a9ff !important;
}

/* 5. Khối mã (Code block) & Trích dẫn (Blockquote) */
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #11161e !important;
  color: #bcd5fb !important;
  border: 1px solid #303c4c !important;
  border-radius: 7px !important;
  padding: 14px 16px !important;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.ql-snow .ql-editor blockquote {
  border-left: 3px solid #6a94e0 !important;
  background: #1e2937 !important;
  color: #c4d3e5 !important;
  padding: 10px 16px !important;
  border-radius: 0 7px 7px 0 !important;
  margin: 14px 0 !important;
}

/* 6. Danh sách việc cần làm (Checklist) */
.ql-snow .ql-editor ul[data-checked] > li::before {
  color: #78a9ff !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.ql-snow .ql-editor ul[data-checked="true"] > li {
  color: #8292a7 !important;
  text-decoration: line-through !important;
}

/* 7. Đường kẻ phân cách & Liên kết */
.ql-snow .ql-editor hr {
  border: none !important;
  border-top: 1px solid #303c4c !important;
  margin: 20px 0 !important;
}

.ql-snow .ql-editor a {
  color: #78a9ff !important;
  text-decoration: underline !important;
}

/* 8. Hộp thoại chèn liên kết / video (Tooltip) */
.ql-snow .ql-tooltip {
  background-color: #1e2837 !important;
  border: 1px solid #3b4e68 !important;
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  padding: 8px 12px !important;
}

.ql-snow .ql-tooltip input[type="text"] {
  background: #111821 !important;
  border: 1px solid #303c4c !important;
  border-radius: 5px !important;
  color: #e9eef6 !important;
  padding: 5px 8px !important;
  outline: none !important;
}

.ql-snow .ql-tooltip .ql-action {
  color: #78a9ff !important;
  font-weight: 600 !important;
}

/* 9. Nút HTML Source toggle */
.ql-html-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: #9db6da !important;
  font: 700 11px Consolas, monospace !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ql-html-btn:hover {
  background: #29384a !important;
  color: #78a9ff !important;
  border-color: #455a73 !important;
}

.ql-html-btn.active {
  background: #243954 !important;
  color: #78a9ff !important;
  border-color: #5c82b8 !important;
}

/* 10. Định dạng hình ảnh trong bài viết */
.ql-snow .ql-editor img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 14px auto !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid #303c4c !important;
}