/* ===== START abc.css ===== */
#_ngaysinh {
  text-align: center;
}

#_thangsinh {
  text-align: center;
}

#_namsinh {
  text-align: center;
}

#_giosinh {
  text-align: center;
}

#_phutsinh {
  text-align: center;
}

#_namhan {
  text-align: center;
}

#_thanghan {
  text-align: center;
}

#_ngayhan {
  text-align: center;
}

#myCanvas {
  position: relative;
  margin: 20px auto;
  width: 800px;
  height: 10px;
}

#saveCanvas {
  display: flex;
  margin: 10px auto;
  justify-content: center;
}

#saveCanvas_ss {
  display: flex;
  margin: 10px auto;
  justify-content: center;
}

/* //////////////////// */

#canvasContainer {
  position: relative;
}


#myCanvas_4h_lk {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 0px;
}



/* //////////////////// */
#saveCanvas_4h {
  display: flex;
  margin: 10px auto;
  justify-content: center;
}



#saveCanvas_4h_ss {
  display: flex;
  margin: 10px auto;
  justify-content: center;
}

.btn+.btn {
  margin-left: 20px;
}

.btn:hover {
  opacity: 0.8;
}

.btn:active {
  transform: translateY(0.5px);
}

.btnlaso {
  display: inline-block;
  background-color: #000;
  background-image: linear-gradient(125deg, #a72879, #064497);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 6px 16px;
  border: none;
  width: 200px;
  cursor: pointer;
}

.btnlaso:hover {
  opacity: 0.8;
}

.btnlaso:active {
  transform: translateY(0.5px);
}


.get-in-touch {
  max-width: 750px;
  margin: 20px auto;
  padding: 5px;
  border: solid;
  border-color: rgb(212, 219, 218);
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.get-in-touch .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 2.0em;
  line-height: 38px;
  padding-bottom: 5px;
  color: #5543ca;
  background: #5543ca;
  background: -moz-linear-gradient(left, #f4524d 0%, #5543ca 100%) !important;
  background: -webkit-linear-gradient(left, #f4524d 0%, #5543ca 100%) !important;
  background: linear-gradient(to right, #f4524d 0%, #5543ca 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

.get-in-touch-doingay {
  max-width: 780px;
  margin: 20px auto;
  border: solid;
  border-color: rgb(178, 233, 215);
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.get-in-touch-doingay .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.5em;
  line-height: 48px;
  padding-bottom: 10px;
  color: #5543ca;
  background: #5543ca;
  background: -moz-linear-gradient(left, #f4524d 0%, #5543ca 100%) !important;
  background: -webkit-linear-gradient(left, #f4524d 0%, #5543ca 100%) !important;
  background: linear-gradient(to right, #f4524d 0%, #5543ca 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

.get-in-touch2 {
  max-width: 750px;
  max-height: 1080px;
  margin: 20px auto;
  padding: 0px;
  border: solid;
  border-color: rgb(245, 218, 218);
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.get-in-touch2 .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.0em;
  line-height: 18px;
  padding-bottom: 0px;
  color: #35c07b;
  background: #b31de0;
  background: -moz-linear-gradient(left, #c025a6 0%, #1890a5 100%) !important;
  background: -webkit-linear-gradient(left, #fc0800 0%, #0e1b96 100%) !important;
  background: linear-gradient(to right, #aa8f8f 0%, #860d72 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

.get-in-touch3 {
  max-width: 750px;
  max-height: 1080px;
  margin: 20px auto;
  padding: 0px;
  border: solid;
  border-color: rgb(212, 219, 218);
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.get-in-touch3 .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.0em;
  line-height: 18px;
  padding-top: 0px;
  padding-bottom: 10px;
  color: #35c07b;
  background: #b31de0;
  background: -moz-linear-gradient(left, #c025a6 0%, #1890a5 100%) !important;
  background: -webkit-linear-gradient(left, #fc0800 0%, #0e1b96 100%) !important;
  background: linear-gradient(to right, #aa8f8f 0%, #860d72 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}



.thongtinlaso .form-field {
  position: relative;
  margin: 20px 0px;
}

.thongtinlaso .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.thongtinlaso .input-text:focus {
  outline: none;
}

.thongtinlaso .input-text:focus+.label,
.thongtinlaso .input-text.not-empty+.label {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.thongtinlaso .label {
  position: absolute;
  left: 20px;
  bottom: 25px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,
    -webkit-transform .2s ease-in-out;
}

.thongtinlaso .submit-btn {
  display: inline-block;
  background-color: #000;
  background-image: linear-gradient(125deg, #a72879, #064497);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width: 200px;
  cursor: pointer;
}

/*//////////////////////////////////*/
.thongtinlicham .form-field {
  position: relative;
  margin: 20px 0px;
}

.thongtinlicham .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.thongtinlicham .input-text:focus {
  outline: none;
}

.thongtinlicham .input-text:focus+.label,
.thongtinlicham .input-text.not-empty+.label {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.thongtinlicham .label {
  position: absolute;
  left: 20px;
  bottom: 25px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,
    -webkit-transform .2s ease-in-out;
}

.thongtinlicham .submit-btn {
  display: inline-block;
  background-color: #000;
  background-image: linear-gradient(125deg, #a72879, #064497);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width: 200px;
  cursor: pointer;
}

/*////////////////////////////////*/
.thongtindoingay .form-field {
  position: relative;
  margin: 20px 0px;
}

.thongtindoingay .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.thongtindoingay .input-text:focus {
  outline: none;
}

.thongtindoingay .input-text:focus+.label,
.thongtindoingay .input-text.not-empty+.label {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.thongtindoingay .label {
  position: absolute;
  left: 20px;
  bottom: 24px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,
    -webkit-transform .2s ease-in-out;
}

.custom-legend {
  color: #5543ca;
  margin-bottom: 10px;
}

/********************************
********************************/
.thongtinluachon .form-field {
  position: relative;
  margin: 2px 0px;
}

.thongtinluachon .input-text {
  display: block;
  width: 100%;
  height: 16px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 16px;
  font-weight: 400;
}

.thongtinluachon .input-text:focus {
  outline: none;
}

.thongtinluachon .input-text:focus+.label,
.thongtinluachon .input-text.not-empty+.label {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.thongtinluachon .label {
  position: sticky;
  left: 20px;
  bottom: 18px;
  font-size: 18px;
  line-height: 16px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,
    -webkit-transform .2s ease-in-out;
}

.thongtinluachon .submit-btn {
  display: inline-block;
  background-color: #000;
  background-image: linear-gradient(125deg, #a72879, #064497);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width: 200px;
  cursor: pointer;
}



#L_DD {
  text-align: center;
}

#L_MM {
  text-align: center;
}

#L_YY {
  text-align: center;
}

#S_DD {
  text-align: center;
}

#S_MM {
  text-align: center;
}

#S_YY {
  text-align: center;
}

#L_CC {
  text-align: center;
}


/* Đảm bảo modal có scrollbar khi nội dung quá dài */
#profileModal .modal-body,
#horoscopeModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}


/**/
html {
  background-color: #292929 !important;
}

/**/
.tuvdt-app-container {
  padding-top: 1px;
  background-image: url('/image/hinh33.jpg') !important;
  /* Đường dẫn đến hình ảnh */
  background-size: 100% !important;
  /* Phù hợp kích thước hình ảnh với body */
  background-repeat: repeat;
}

/* Ẩn thanh cuộn dọc 
body {
    overflow-y: hidden;
}
*/

.Danhsachlaso {
  display: inline-block;
  background-color: #97a0a8 !important;
  color: #ffffff;
  letter-spacing: 0.5px;
  font-size: 16px;
  border: none;
  width: 100px;
  cursor: pointer;
  text-align: center;
  padding: 6px 6px;

}

.Danhsachlaso:hover {
  opacity: 0.9;
}

.Danhsachlaso:active {
  transform: translateY(0.5px);
}

.left-aligned-label {
  text-align: left;
}

.success {
  background-color: #04AA6D;
}

/* Green */
.info {
  background-color: #66a0cf;
}

/* Blue */
.warning {
  background-color: #ff9800;
}

/* Orange */
.btn-danger {
  background-color: #b86660;
}

/* Red */
.other {
  background-color: #e7e7e7;
  color: black;
}

/* Gray */

.modal.fade {
  transition: opacity .22s ease !important;
}


/* Kiểu mặc định của con trỏ */
.get-in-touch .title {
  cursor: auto;
  /* Hoặc bất kỳ kiểu nào bạn muốn sử dụng mặc định cho con trỏ chuột */
}

/* Kiểu con trỏ khi di chuột vào phần tử */
.change-cursor {
  cursor: pointer;
  /* Hoặc bất kỳ kiểu con trỏ nào bạn muốn sử dụng */
}

.get-in-touch .label {
  padding-bottom: 10px;
}

.get-in-touch3 .label {
  padding-bottom: 10px;
}

.input-text {
  background-color: #F5F5F5;
  border-color: #afaeb9 !important;
  /*transparent !important;*/
  /*#fcfcfc; */
}

.popup {
  display: none;
  position: absolute;
  background-color: rgba(76, 175, 80, 0.8);
  /* Màu xanh lá cây với độ trong suốt 0.8 */
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 15px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  width: 330px;
  min-width: 250px;
}

.popup.active {
  display: block;
  opacity: 1;
}

.popup h3 {
  font-size: 18px;
  margin-bottom: 0px;
}

/* CSS cho ngày tháng năm coi hạn */
.date-section {
  border: 1px solid #d0d4dc;
  border-radius: 8px;
  padding-top: 8px;
}

.date-section .input-text {
  color: #c0392b !important;
  /* màu chữ trong input */
  font-style: italic !important;
}

.date-section .label {
  color: #7295d3 !important;
  /* màu label */
  font-style: italic !important;
}

.date-section input::placeholder {
  color: #6ea8fe;
  /* placeholder nhạt (nếu cần) */
}

/* --- BUTTONS IN ONE ROW ON MOBILE --- */
.button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0px;

  padding-left: 40px;
  padding-right: 40px;

  width: 100%;
  box-sizing: border-box;

  justify-content: center;
  /* ⭐ căn giữa cả 3 nút */
}

.button-row .btn {
  /* ⭐ width theo nội dung */
  white-space: nowrap;
}






/* ===== END abc.css ===== */