/* ===================================================== */
/* UTILITIES.CSS                                         */
/* Các class tiện ích dùng chung trên toàn website.      */
/* File này chứa helper nhỏ: ẩn text, margin, background */
/* và các class hỗ trợ layout nhanh.                     */
/* ===================================================== */


/* ===================================================== */
/* SCREEN READER ONLY                                    */
/* Ẩn nội dung khỏi giao diện nhưng vẫn cho screen reader */
/* đọc được. Dùng cho accessibility.                     */
/* ===================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===================================================== */
/* TEXT HELPERS                                          */
/* Các class hỗ trợ màu chữ và căn chữ.                  */
/* ===================================================== */

/* Màu chữ phụ, dùng cho mô tả hoặc thông tin ít nổi bật */
.muted {
  color: var(--color-muted);
}

/* Căn chữ ra giữa */
.text-center {
  text-align: center;
}


/* ===================================================== */
/* STACK HELPERS                                         */
/* Tạo khoảng cách dọc giữa các phần tử con.             */
/* Chỉ áp dụng từ phần tử con thứ hai trở đi.            */
/* ===================================================== */

.stack-sm > * + * {
  margin-top: 10px;
}

.stack-md > * + * {
  margin-top: 18px;
}

.stack-lg > * + * {
  margin-top: 28px;
}


/* ===================================================== */
/* ALIGNMENT HELPERS                                     */
/* Helper căn chỉnh nhanh trong grid/flex layout.        */
/* ===================================================== */

/* Đẩy item xuống cuối vùng chứa theo trục dọc của grid */
.align-end {
  align-self: end;
}


/* ===================================================== */
/* DIVIDER                                               */
/* Đường kẻ ngang dùng để tách nội dung.                 */
/* ===================================================== */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-line);
}


/* ===================================================== */
/* BACKGROUND HELPERS                                    */
/* Các nền trang trí nhẹ dùng cho section hoặc panel.    */
/* ===================================================== */

/* Nền wash mềm với các vùng màu rất nhẹ */
.wash-bg::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(170, 63, 34, 0.06),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 74%,
      rgba(66, 37, 22, 0.05),
      transparent 27%
    );
  content: "";
}

/* Nền kiểu giấy Hanji, tạo cảm giác giấy thủ công Hàn Quốc */
.hanji {
  background:
    linear-gradient(
      120deg,
      rgba(255, 250, 242, 0.84),
      rgba(244, 234, 221, 0.72)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(54, 31, 19, 0.018) 0 1px,
      transparent 1px 7px
    );
}


/* ===================================================== */
/* VISIBILITY HELPERS                                    */
/* Ẩn phần tử khỏi giao diện.                            */
/* Dùng khi JavaScript cần bật/tắt nội dung.             */
/* ===================================================== */

.is-hidden {
  display: none !important;
}


/* ===================================================== */
/* SPACING HELPERS                                       */
/* Các class margin-top nhanh.                           */
/* Ví dụ: .mt-24 nghĩa là margin-top: 24px.              */
/* ===================================================== */

.mt-16 {
  margin-top: 16px;
}

.mt-18 {
  margin-top: 18px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-26 {
  margin-top: 26px;
}

.mt-28 {
  margin-top: 28px;
}