/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --huph-green: #1f6d3c;
  --huph-green-soft: #e6f4ea;
}

body {
  background: #f3f6f4;
}

/* Nút hành động chính dùng màu xanh lá HUPH thay vì màu mặc định của Bootstrap */
.btn-huph {
  background-color: var(--huph-green);
  border-color: var(--huph-green);
  color: #fff;
}
.btn-huph:hover,
.btn-huph:focus {
  background-color: #18542e;
  border-color: #18542e;
  color: #fff;
}
.btn-huph:disabled {
  background-color: var(--huph-green);
  border-color: var(--huph-green);
  opacity: 0.6;
}

.text-huph {
  color: var(--huph-green) !important;
}

/* Ô nhập người nhận kiểu chip, dùng chung input Bootstrap bên trong */
.recipient-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.recipient-box input {
  border: none;
  outline: none;
  flex: 1 1;
  min-width: 160px;
  padding: 4px;
  background: transparent;
}

/* Thư viện ảnh */
.gallery-item {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background: #f2f4f7;
}

.gallery-item.selected {
  border-color: var(--huph-green);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item .delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  opacity: 0.85;
}

.gallery-item .delete-btn:hover {
  opacity: 1;
}

/* Vùng kéo thả ảnh banner */
.dropzone {
  border: 2px dashed #ced4da;
  border-radius: 8px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  background: #fafbfa;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover {
  border-color: var(--huph-green);
}

.dropzone-active {
  border-color: var(--huph-green);
  background: var(--huph-green-soft);
}

/* Trình soạn thảo Quill */
.quill-wrapper .ql-container {
  min-height: 220px;
  font-size: 14px;
  background: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.quill-wrapper .ql-toolbar {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Khung xem trước email: cố định tỉ lệ 16:9 cho dễ nhìn, nội dung dài hơn thì cuộn bên trong */
.preview-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@supports not (aspect-ratio: 16 / 9) {
  .preview-ratio {
    height: 0;
    padding-bottom: 56.25%; /* fallback cho trình duyệt cũ không hỗ trợ aspect-ratio */
  }
}