* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f6f8;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 420px;
  margin: auto;
  padding: 20px;
  background: #ffffff;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-top: 12px;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}

textarea {
  height: 70px;
}

.slots-box {
  margin-top: 10px;
}

/* SLOT BUTTON */
.slot-btn {
  margin: 5px 5px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #3498db;
  background: #ecf6fd;
  cursor: pointer;
}

.slot-btn.selected {
  background: #3498db;
  color: white;
}

/* BUTTONS */
button {
  width: 100%;
  padding: 12px;
  margin-top: 15px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: #95a5a6;
  color: white;
}

.secondary-btn:hover {
  background: #7f8c8d;
}

.danger-btn {
  background: #e74c3c;
  color: white;
}

.danger-btn:disabled {
  background: #f5b7b1;
  cursor: not-allowed;
}

/* DIVIDER */
.divider {
  margin: 25px 0;
  border-top: 1px solid #ddd;
}

/* RESULT */
.result-box {
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.5;
}

/* PC */
@media (min-width: 768px) {
  .container {
    margin-top: 30px;
    border-radius: 10px;
  }
}

.info-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: #16a085;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.info-btn:hover {
  background: #138d75;
}

.info-box p {
  margin: 12px 0;
  line-height: 1.6;
}

.info-box a {
  color: #3498db;
  text-decoration: none;
}

.info-box a:hover {
  text-decoration: underline;
}

.map-box {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.map-box iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

/* Canh giữa logo và khoảng cách dưới */
.logo-container {
    text-align: center;
    margin-bottom: 10px;
}

/* Kích thước logo chuẩn cho desktop */
.logo {
    width: 200px;  /* Logo có kích thước cố định trên màn hình lớn */
    height: auto;
    max-width: 100%;  /* Đảm bảo logo không bị vỡ khi thu nhỏ */
}

/* Media query cho thiết bị di động */
@media (max-width: 768px) {
    .logo {
        width: 150px;  /* Logo sẽ nhỏ hơn trên màn hình di động */
	height: auto;
    }
}

/* Media query cho thiết bị di động rất nhỏ (như điện thoại có màn hình nhỏ) */
@media (max-width: 480px) {
    .logo {
        width: 120px;  /* Logo sẽ nhỏ hơn nữa trên màn hình rất nhỏ */
	height: auto;
    }
}

  #slots .het-cho {
    color: red;        /* chữ màu đỏ */
    font-weight: bold; /* in đậm */
  }


/*  otp html*/
.otp-container {
  max-width: 400px;
  text-align: center;
}

.otp-inputs {
  display: flex;
  justify-content: space-between; /* cách đều các ô */
  gap: 8px; /* khoảng cách giữa các input */
  max-width: 320px; /* tổng chiều rộng container input */
  margin: 0 auto; /* căn giữa trên mobile */
}

.otp-inputs input {
  width: 40px;       /* chiều rộng mỗi ô */
  height: 50px;      /* chiều cao */
  font-size: 24px;   /* chữ to, dễ nhìn */
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
}

.otp-inputs input:focus {
  border-color: #007bff; /* màu khi focus */
  box-shadow: 0 0 3px rgba(0,123,255,0.5);
}

.error-text {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Container ẩn mặc định */
.hidden {
  display: none;
}

/* Thông tin cảnh báo chữ đỏ, nền vàng, không bullet */
.thongtin-item {
  color: blue;                  /* chữ đỏ */
  background-color: #FFD700;   /* nền vàng */
  padding: 8px 10px;
  margin: 5px 0;
  border-radius: 5px;
  font-size: 16px;
  word-wrap: break-word;
}

/* Responsive cho mobile */
@media (max-width: 480px) {
  .thongtin-item {
    font-size: 14px;
  }
}