/* Màn đăng nhập — thẻ .dang-nhap-the; ≥1024 tách 2 cột thương hiệu | form */

.dang-nhap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--k16);
}

.dang-nhap-the {
  width: 100%;
  max-width: 400px;
  background: var(--the);
  border-radius: var(--bo-l);
  box-shadow: var(--bong-noi);
  padding: var(--k16);
  display: flex;
  flex-direction: column;
  gap: var(--k12);
  animation: man-vao var(--chuyen) both;
  overflow: hidden;
}

/* Khối thương hiệu: mobile xếp trên form, desktop nền nâu gradient */
.dang-nhap-thuong-hieu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k12);
  text-align: center;
}

.dang-nhap-the .logo {
  display: flex;
  justify-content: center;
  padding-bottom: var(--k4);
}

.dang-nhap-the .logo img {
  height: 48px;
  width: auto;
}

.dang-nhap-the h1 {
  text-align: center;
}

.dang-nhap-the .chu-thich {
  display: block;
  text-align: center;
  font-size: var(--cc-chu-thich);
  font-style: italic;
  color: var(--chu-3);
}

/* Thẻ form */
.dang-nhap-form {
  display: flex;
  flex-direction: column;
  gap: var(--k12);
}

.dang-nhap-form form,
.dang-nhap-the > form {
  display: flex;
  flex-direction: column;
  gap: var(--k12);
}

.dang-nhap-the label {
  display: block;
  margin-bottom: var(--k8);
  color: var(--chu-2);
  font-weight: 700;
}

.dang-nhap-the input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  height: var(--loc-cao);
  padding: 0 var(--k12);
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: var(--be-mat);
  color: var(--chu);
  font-size: var(--cc-than);
  transition: border-color var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh);
}

.dang-nhap-the input:not([type="checkbox"]):not([type="radio"]):focus,
.dang-nhap-the input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 1px;
  border-color: var(--xanh);
}

/* Nút đăng nhập 3D: nền xanh, đáy xanh đậm */
.dang-nhap-the .nut-chinh {
  width: 100%;
  height: var(--loc-cao);
  margin-top: var(--k4);
  border: 0;
  border-radius: 10px;
  background: var(--xanh);
  color: #fff;
  font-size: var(--cc-than);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--xanh-dam);
  transition: transform var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh), background-color var(--chuyen-nhanh);
}

.dang-nhap-the .nut-chinh:hover {
  background: var(--xanh-dam);
}

.dang-nhap-the .nut-chinh:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--xanh-dam);
}

.dang-nhap-the .nut-chinh:focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
}

.loi-dang-nhap {
  background: var(--do-nhat);
  color: var(--do);
  border-radius: 10px;
  padding: var(--k8) var(--k12);
  font-weight: 700;
}

/* Desktop: 2 cột 50/50 */
@media (min-width: 1024px) {
  .dang-nhap-the {
    max-width: 960px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .dang-nhap-thuong-hieu {
    justify-content: center;
    padding: 24px;
    background: linear-gradient(160deg, #3B2314 0%, #7A4A2B 100%);
    border-radius: var(--bo-l) 0 0 var(--bo-l);
    color: #fff;
  }

  .dang-nhap-thuong-hieu h1 {
    color: #fff;
  }

  .dang-nhap-thuong-hieu .chu-thich {
    color: var(--kem-chu);
  }

  .dang-nhap-form {
    justify-content: center;
    padding: 24px;
    background: var(--the);
    border-radius: 0 var(--bo-l) var(--bo-l) 0;
  }
}

/* Mobile: 1 cột, giữ thẻ gọn */
@media (max-width: 640px) {
  .dang-nhap-the {
    padding: 24px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dang-nhap-the {
    animation: none;
  }
}