*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Arial;
  background:#ffffff;
  color:#1c1e21;
  -webkit-font-smoothing: antialiased;
}

/* ===== CONTAINER ===== */
.container{
  display:flex;
  min-height:100vh;
}

/* ===== LEFT ===== */
.left{
  width:50%;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;

  border-right:none; /* ❌ XÓA VẠCH NGẮN */
}

.right{
  width:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 80px;

  border-left:1px solid #e4e6eb; /* ✅ GIỮ VẠCH DÀI */
}

/* ===== FORM FULL ===== */
.login-box{
  width:100%;
  max-width:none; /* QUAN TRỌNG: bỏ giới hạn */
}

/* ===== TITLE ===== */
.login-box h2{
  font-size:18px;
  font-weight:700;
  margin-bottom:18px;
}

/* ===== INPUT ===== */
input{
  width:100%;
  padding:18px;
  margin-bottom:14px;
  border:1px solid #ccd0d5;
  border-radius:12px;
  font-size:16px;
}

input:focus{
  outline:none;
  border:1px solid #1877f2;
  box-shadow:0 0 0 2px #e7f3ff;
}

/* ===== LOGIN BUTTON ===== */
.login-btn{
  width:100%;
  padding:16px;
  border-radius:30px;
  background:#1877f2;
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
}

/* ===== ERROR ===== */
.error{
  color:#e41e3f;
  font-size:13px;
  margin-bottom:10px;
  display:none;
}

/* ===== LINK ===== */
.link{
  text-align:center;
  margin:16px 0;
}

.link a{
  color:#1c1e21; /* đen */
  font-size:14px;
  text-decoration:none;
  font-weight:600;
}

/* ===== CREATE BUTTON ===== */
.create{
  width:100%;
  padding:16px;
  border:1px solid #1877f2;
  background:#fff;
  border-radius:30px;
  color:#1877f2;
  font-weight:700;
  cursor:pointer;
}

/* ===== META (CHỈ CHỮ, IN ĐẬM) ===== */
.meta{
  margin-top:25px;
  text-align:center;
  font-size:14px;
  color:#1c1e21;

  font-weight:500; /* mỏng vừa đẹp */
}

/* KHÔNG ICON */
.meta::before{
  content:"";
}

/* ===== FOOTER ===== */
.footer{
  width:100%;
  background:#ffffff;
  padding:20px 40px;
  font-size:12px;
  color:#737373;
  border-top:1px solid #ddd;
}

.footer-lang,
.footer-links{
  text-align:center;
  margin-bottom:8px;
}

.footer-copy{
  text-align:center;
  margin-top:10px;
}

/* ===== HOVER ===== */
.footer span:hover{
  text-decoration:underline;
  cursor:pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){

  .container{
    flex-direction:column;
  }

  .left{
    width:100%;
    height:250px;
  }

  .right{
    width:100%;
    border:none;
    padding:20px;
  }
body{
  margin:0;
  font-family:Arial;
  background:#f0f2f5; /* nền xám FB */
}
}/* nền full */
.twofa-screen{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start; /* dính lên trên */
  padding-top:20px; /* nếu muốn sát hẳn thì để 0 */
  background:#f0f2f5; /* cùng 1 màu */
}
/* bỏ khung trắng hoàn toàn */
.twofa-box{
  width:720px;
  background:transparent;  /* 👈 QUAN TRỌNG */
  border-radius:14px;         /* 👈 bỏ bo góc */
  box-shadow:none;         /* 👈 bỏ bóng */
  padding:40px;               /* 👈 bỏ khoảng trắng */
}
/* tiêu đề */
.twofa-box h2{
  font-size:24px;
  margin-bottom:10px;
}

/* mô tả */
.twofa-box p{
  font-size:15px;
  color:#65676b;
}

/* ảnh to, cân giữa */
.twofa-img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:12px;
  margin:20px 0;
}

/* input lớn */
#code{
  width:100%;
  padding:16px;
  font-size:16px;
  border-radius:10px;
  border:1px solid #ccd0d5;
  margin-bottom:12px;
}

/* button to */
#btn{
  width:100%;
  padding:16px;
  font-size:16px;
  border:none;
  border-radius:30px;
  background:#1877f2;
  color:#fff;
}

/* lỗi */
#fa-error{
  display:none;
  color:#e41e3f;
  margin-bottom:10px;
}

/* timer */
#timer{
  font-size:14px;
  color:#65676b;
  margin-bottom:12px;
}

/* meta */
.meta{
  margin-top:20px;
  font-weight:500;
  font-size:14px;
}
/* nút continue đã full nên nó tự giữa */

.try-another{
  display:block;
  width:100%;              /* 👈 full ngang */
  text-align:center;       /* 👈 căn giữa chữ */
  margin-top:12px;
  font-size:14px;
  color:#1877f2;
  cursor:pointer;
  font-weight:500;
}

.try-another:hover{
  text-decoration:underline;
}