.guide-admin-editor {
  padding: 26px;
  margin-bottom: 24px;
  border-color: #385b72;
  background: #142639;
}
.guide-admin-editor > .panel-heading {
  margin-bottom: 15px;
}
.guide-admin-editor > .admin-hint {
  margin-bottom: 22px;
}
.guide-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 23px;
  padding: 15px;
  background: #112031;
  border: 1px solid #2f495f;
  border-radius: 9px;
}
.guide-editor-toolbar > label {
  margin: 0;
  white-space: nowrap;
  font-size: 10px;
  color: #aac7d9;
}
.guide-editor-toolbar > .live-select {
  max-width: 310px;
}
.guide-editor-toolbar > .text-button {
  margin-left: auto;
  white-space: nowrap;
}
.guide-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 21px;
}
.guide-edit-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 !important;
  min-width: 0;
}
.guide-edit-field > span {
  font-size: 10px;
  color: #aac6d8;
  line-height: 1.7;
}
.guide-edit-field input,
.guide-edit-field textarea,
.guide-edit-field select {
  width: 100%;
  min-width: 0;
  background: #102131;
  color: #d5e8f5;
  border: 1px solid #36566d;
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  text-transform: none;
}
.guide-edit-field textarea {
  line-height: 1.8;
  resize: vertical;
  min-height: 104px;
}
.guide-edit-field:has(textarea) {
  grid-column: 1/-1;
}
.guide-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0 16px;
  border-top: 1px solid #2d485f;
  margin-top: 24px;
}
.guide-list-heading h3 {
  font-size: 13px;
  font-weight: 550;
  margin: 0;
}
.guide-list-heading .button {
  font-size: 10px;
}
.guide-edit-list {
  display: grid;
  gap: 17px;
}
.guide-edit-item {
  background: #102234;
  border: 1px solid #314f67;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  gap: 16px;
}
.guide-edit-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.guide-edit-item-heading > strong {
  font-size: 12px;
  font-weight: 550;
  color: #b9ddf1;
}
.guide-edit-item-heading > div {
  display: flex;
  gap: 7px;
}
.guide-edit-item-heading button {
  border: 1px solid #42627a;
  border-radius: 5px;
  background: #203a4e;
  color: #b3d6e9;
  font-size: 10px;
  padding: 6px 10px;
}
.guide-edit-item-heading .guide-remove {
  background: #382d31;
  border-color: #684b52;
  color: #dcaab2;
}
.guide-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #35516a;
  margin-top: 24px;
  padding-top: 20px;
}
.guide-editor-footer > span {
  font-size: 9px;
  color: #8bacbf;
  line-height: 1.8;
}
.guide-editor-footer > div {
  display: flex;
  gap: 10px;
}
.guide-editor-footer .button {
  font-size: 10px;
}
.guide-preview-dialog {
  width: min(1120px, 94vw);
  max-width: 1120px;
  max-height: 90vh;
  overflow: auto;
  padding: 0;
  background: #0e1c2b;
  color: #e3f0f9;
  border: 1px solid #4a7591;
  border-radius: 13px;
  box-shadow: 0 24px 90px #0007;
}
.guide-preview-dialog::backdrop {
  background: #04101dbb;
  backdrop-filter: blur(4px);
}
.guide-preview-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 25px;
  background: #142b3ff7;
  border-bottom: 1px solid #365871;
}
.guide-preview-header h2 {
  font-size: 15px;
}
.guide-preview-header p {
  font-size: 10px;
  color: #93b1c8;
  margin: 8px 0 0;
}
.guide-preview-content {
  padding: 25px;
}
.guide-preview-content .help-winter-hero {
  display: block;
}
.guide-preview-section {
  margin: 30px 0;
}
.guide-preview-section-label {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #48718c;
  color: #b8e2f6;
  background: #203e53;
  font-size: 11px;
}
.guide-authored-text,
#guide-hero-title,
#guide-hero-description,
#guide-cta-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.guide-faq-link {
  margin-top: 12px;
  font-size: 10px;
}
.guides-no-faq {
  grid-template-columns: 1fr;
}
.zalo-tutorial-steps .text-button {
  margin-top: 13px;
}
.guide-preview-content p {
  max-width: none;
}
@media (max-width: 750px) {
  .guide-editor-toolbar {
    flex-wrap: wrap;
  }
  .guide-editor-toolbar > .live-select {
    max-width: none;
    flex: 1;
    min-width: 180px;
  }
  .guide-editor-toolbar > .text-button {
    margin-left: 0;
  }
  .guide-editor-grid {
    grid-template-columns: 1fr;
  }
  .guide-editor-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .guide-editor-footer > div > .button {
    flex: 1;
  }
  .guide-admin-editor {
    padding: 20px;
  }
  .guide-edit-item {
    padding: 17px;
  }
  .guide-preview-content {
    padding: 17px;
  }
  .guide-preview-header {
    padding: 16px;
  }
  .guide-preview-content .tutorial-grid {
    grid-template-columns: 1fr;
  }
  .guide-preview-dialog {
    width: 96vw;
    max-height: 94vh;
  }
}
.guide-video-link {
  margin: 16px 0;
  padding: 15px 18px;
  border: 1px solid #a6a97980;
  border-radius: 18px;
  background: #234735;
}
.guide-video-link a {
  color: #f2d39a;
  font-weight: 700;
  text-decoration: none;
}