/* UI giống ảnh mẫu (tuvi-moi) */
html { scroll-behavior: smooth; background-color: #f2f8f8;}
body{font-family: Arial, Helvetica, sans-serif;}
.lapque-root {
  width: 100%;
  background: #f2f8f8;
  padding: 18px 0 32px;
  font-size:18px
}

/* Form */
#divkhungnhap{
  width: 100%;
  margin: 0 auto;
  padding: 10px 18px 0;
  background: transparent;
  height: auto;
  max-height: none;
}

#divkhungnhap h1{
  margin: 8px 0 16px;
  font-size: 56px;
  letter-spacing: 1px;
  font-weight: 700;
  color:blue;
  text-align:center;
}

.btn-seri{
  background: #0485d5;
  color: #fff;
  text-decoration:none;
  font-weight:700;
}

.form-horizontal{
  max-width: 100%;
  margin: 0 auto;
}

.form-group{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 10px 0;
  justify-content: center;
}
.control-label{
  width: 30%;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: blue;
  padding-top:0 !important;
}
.form-group > div{ width: 60%; }
.form-group > div{ position: relative; }
.lapque-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 20px);
  z-index: 9999;
  background: rgba(68,96,132, .7);
  border: 1px solid #cfd9de;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  max-height: 240px;
  overflow: auto;
  color: #fff;
}
.lapque-suggest-item{
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px solid #eef2f4;
}
.lapque-suggest-item:last-child{ border-bottom: 0; }
.lapque-suggest-item:hover{background: rgba(0,0,255,.5);}
.form-group > div table tr td{padding-left: 10px; color:#000}
.form-control{
  width:100%;
  height: 44px;
  font-size: 18px;
  font-weight: 600;
  background: #fff;
  padding: 6px 10px;
  border: 1px solid #cfd9de;
  border-radius: 4px;
  color: #123;
}
table { border-collapse: collapse; }
table td { padding: 0; }

#xemketqua{
  display:inline-block;
  background:#e9f0f4;
  color:blue;
  border: 1px solid #bcd0dc;
  border-radius: 3px;
  text-decoration:none;
  font-weight:700;
  /* font-size: 18px; */
}
#xemketqua:hover{ background:#dfeaf1; }

.padding0{ padding:0 }


#kqque{
  width:100%;
  margin: 0 auto;
  padding: 0 18px 24px;
  background: transparent;
  height: auto;
  max-height: none;
}
.ngayam{
  margin: 16px 0 10px;
  font-size: 1.3em;
  font-weight: 700;
  color:blue;
  text-align:center;
  line-height: 1.15;
}
.hoten{
  font-style: italic;
  font-weight: 700;
  font-size: 1.5em;
  color: blue;
  min-height: 10px;
  text-align:center;
  font-family: Times;
  text-transform: uppercase
}
.lapque-thoigian, .lapque-canchi{
  margin: 0;
  font-size: 1.3em;
  font-weight: 700;
  color: #0000ff;
  text-align:center;
}

.quechinh,.quebien{
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 30px;
  font-weight: 700;
  color:blue;
  margin: 0 0 8px;
}

/* UI bảng quẻ giống ảnh mẫu */
.que-info{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin: 6px auto 18px;
  display:flex;
  gap: 60px;
  align-items:flex-start;
  justify-content: space-between;
}
.que-col-chu{flex: 1 1 70%;}
.que-col-bien{flex: 0 0 30%;}
.que-info h3{margin: 0 0 8px; line-height: 1.2;}
.chi-tiet-que{width:100%; border-collapse:collapse;}
.chi-tiet-que tr{border-bottom:none;}
.chi-tiet-que tr td{
  font-size: 25px;
  font-weight: 700;
  padding: 10px 10px;
  white-space:nowrap;
  border-bottom: 0px;
  color:#000
}
.chi-tiet-que tr td img.hao-tuong{width: 34px !important; height: 5px; display:block;}
.chi-tiet-que .hao-dong td:first-child { color: red;}
.chi-tiet-que tr td.the-ung{color: #c31ced}
.chi-tiet-que tr td.thansat{color: #8b81cd}

@media (max-width: 980px){
  .lapque-root{font-size: 14px}
  #divkhungnhap h1{ font-size: 32px; }
  .form-group{ justify-content: flex-start; }
  .form-control{font-size: 14px;}
  .control-label{width: 30%; font-size: 13px; line-height: 1}
  .form-group > div{ width: 100%; }
  .que-info{ gap: 18px; }
  .que-info h3{font-size: 2.5vw;}
  .ngayam,.lapque-thoigian, .lapque-canchi{font-size: 3vw; margin: 0;}
  .que-col-chu{flex: 1 1 70%;}
  .que-col-bien{flex: 0 0 30%;}
  .chi-tiet-que tr td{
    font-size: 3vw;
    padding: 1vh 0;
    border: 0px solid;
    border-collapse: collapse;}
}
@media (max-width: 700px){
  #divkhungnhap{ padding: 10px 12px 0; }
  #divkhungnhap h1{ font-size: 28px; }
  .form-group{flex-direction: row;align-items: center;gap: 6px;}
  .form-group > div{width: 70%;}
  .form-group:last-child > div{width: 100%;}
  .que-info{flex-direction: row;gap: 10px;}
  .que-col-bien{ flex: 1 1 auto; }
  .ngayam{font-size: 1.7em;}
  .chi-tiet-que tr td{
    font-size: 3vw;
    padding: 1vh 0px;}
  .chi-tiet-que tr td img.hao-tuong{ width: 26px !important; height: 4px; }
  .lapque-thoigian, .lapque-canchi{font-size: 1.7em;line-height: 1;}
}
.lapque-error{ padding:10px; border:1px solid #f3b4b4; background:#fff5f5; color:#a40000; border-radius:10px; text-align:left; }