/* Màu, chữ, nút dùng chung cho trang đăng nhập và app. Khuôn theo bộ slide: giấy dó, sơn mài đỏ, vàng đồng, Times New Roman. */
:root {
  --son: #7A0E14;
  --son-2: #8A1F24;
  --son-dam: #5E1015;
  --son-nhat: #F6E3D4;
  --dong: #B8862F;
  --dong-dam: #8F6420;
  --dong-nhat: #F3E6C8;
  --giay: #FBF5EA;
  --giay-2: #F4EBDD;
  --giay-3: #EADBC2;
  --trang: #FFFDF8;
  --muc: #2A0E10;
  --muc-2: #4A3B36;
  --muc-3: #6B5E55;
  --vien: #E3D3B8;
  --vien-dam: #CDB48C;
  --khop: #1F6B57;
  --cho: #9A5B00;
  --loi: #A3262A;
  --phong: 'Times New Roman', Times, 'Noto Serif', serif;
  --bo-goc: 10px;
  --bong: 0 1px 2px rgba(42, 14, 16, .08), 0 8px 24px rgba(42, 14, 16, .08);
  --nhanh: 160ms;
  --vua: 240ms;
  --em: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--phong);
  font-size: 18px;
  line-height: 1.5;
  color: var(--muc);
  background: var(--giay);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--dong); outline-offset: 2px; border-radius: 6px; }

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--bo-goc);
  border: 1px solid var(--vien-dam); background: var(--trang); color: var(--muc);
  font-size: 17px; font-weight: 600; letter-spacing: .2px;
  transition: background var(--nhanh) var(--em), border-color var(--nhanh) var(--em), transform var(--nhanh) var(--em);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.nut:hover { background: var(--giay-2); border-color: var(--dong); }
.nut:active { transform: scale(.97); }
.nut svg { width: 20px; height: 20px; flex: none; }
.nut-chinh { background: var(--son); border-color: var(--son); color: #FFF8EE; }
.nut-chinh:hover { background: var(--son-2); border-color: var(--son-2); }
.nut-tron { width: 44px; padding: 0; }
.nut[disabled] { opacity: .55; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}