/* Dùng chung cho cả ba trang: nút, hộp thoại form, các ô nhập.
   Nạp sau khối <style> riêng của từng trang. */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

:focus-visible { outline: 2px solid #1F4034; outline-offset: 2px; }

/* style-hover cua design canvas -> CSS that */
.btn-solid:hover { background: #163027; }
.btn-solid[disabled] { background: rgba(22,25,28,0.18); cursor: not-allowed; }
.btn-outline:hover,
.btn-ghost:hover,
.nut-nho:hover { border-color: #1F4034; color: #1F4034; }

.nut-nho {
  padding: 8px 16px; border: 1px solid rgba(22,25,28,0.22); border-radius: 2px;
  background: transparent; font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px; font-weight: 500; color: #16191C; cursor: pointer;
}

/* Hộp thoại chứa form (đăng nhập, gửi hồ sơ) */
dialog.hop-form {
  border: 0; padding: 0; background: #FFFDF8; max-width: 560px;
  width: calc(100% - 48px); border-radius: 3px; margin: 48px auto;
  animation: riseIn 0.24s ease both;
}
dialog.hop-form::backdrop { background: rgba(22,25,28,0.55); }

.than-form { padding: clamp(26px, 4vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.truong { display: flex; flex-direction: column; gap: 7px; }
.nhan { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(22,25,28,0.65); }

.o-nhap {
  width: 100%; padding: 11px 13px; border: 1px solid rgba(22,25,28,0.2);
  background: #FFFDF8; border-radius: 2px; font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px; line-height: 1.55; color: #16191C;
}
.o-nhap:focus { border-color: #1F4034; }
textarea.o-nhap { resize: vertical; }

.hang-doi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }

.bao {
  font-size: 13px; line-height: 1.6; padding: 12px 14px; border-radius: 2px;
  background: rgba(156,123,63,0.1); border: 1px solid rgba(156,123,63,0.4); color: #7A5C28;
}

@media (prefers-reduced-motion: reduce) {
  dialog.hop-form { animation: none; }
}

/* ------------------------------------------------------------------ *
   Header trên điện thoại
   Menu chính thu vào nút ba gạch để logo và nút Đăng nhập nằm chung một
   hàng. Ngăn kéo menu dùng lại <dialog>, nên không cần thêm JavaScript:
   js/hop-thoai.js đã lo mở, đóng, phím Esc, bấm nền và khoá cuộn.
 * ------------------------------------------------------------------ */

.nut-menu {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 36px; padding: 0; flex: none;
  border: 1px solid rgba(22,25,28,0.22); border-radius: 2px;
  background: transparent; cursor: pointer;
}
.nut-menu i { display: block; width: 17px; height: 1.5px; background: #16191C; position: relative; }
.nut-menu i::before,
.nut-menu i::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: #16191C;
}
.nut-menu i::before { top: -5.5px; }
.nut-menu i::after  { top: 5.5px; }

@media (max-width: 720px) {
  /* Một hàng duy nhất: logo bên trái, Đăng nhập + ba gạch bên phải */
  .thanh-dau { flex-wrap: nowrap !important; gap: 12px !important; }
  .thanh-dau .khoi-phai { gap: 8px !important; flex-wrap: nowrap !important; }
  .thanh-dau .menu-chinh { display: none !important; }
  .thanh-dau .nhan-hieu-ten { font-size: 15px; }
  .thanh-dau .nhan-hieu-phu { display: none; }   /* nhường chỗ cho một hàng */
  .thanh-dau .nut-nho { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
  .nut-menu { display: inline-flex; }
}

dialog.hop-menu {
  border: 0; padding: 0; background: #F6F3EC;
  width: min(320px, 86vw); max-width: none;
  height: 100%; max-height: 100%; margin: 0 0 0 auto;
  animation: truotVao 0.2s ease both;
}
dialog.hop-menu::backdrop { background: rgba(22,25,28,0.5); }

.than-menu { padding: 20px 22px 26px; display: flex; flex-direction: column; }
.than-menu .dong-dau { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.than-menu .nhan { margin: 0; }
.than-menu a {
  padding: 14px 2px; font-size: 15px; color: #16191C;
  border-bottom: 1px solid rgba(22,25,28,0.12);
}
.than-menu a[aria-current] { color: #1F4034; font-weight: 500; }

@keyframes truotVao {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* Hộp thoại rộng hơn cho nội dung có bảng */
dialog.hop-rong { max-width: 760px; }

@media (prefers-reduced-motion: reduce) {
  dialog.hop-menu { animation: none; }
}