@font-face {
    font-family: "Schibsted Grotesk";
    src: url("/assets/fonts/Schibsted-Grotesk.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }
   .menu-right li {
      padding: 15px 15px;
      border-radius: 4px;
      background: var(--Cyan---10, #EEF9FB);
    }
     .menu-left .logo {
      display: block;
    }
     .menu-right svg {
      position: absolute;
      top: 7px;
      left: 7px;
    }
    .header input[type="text"] {
      display: none;
    }
    
    .header a {
      color: #000;
    }
    
    .header input[type="text"] {
      background: rgba(0, 136, 170, 0.08);
      color: #000;
    }
    .menu-left .logo {
      display: block !important;
    }
    .header .logo-center {
      opacity: 0;
      visibility: hidden;
      transform: scale(0.8);
    }
    
    .header .logo-left {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
    
    .header .logo-left span {
      color: rgba(17, 17, 17, 1);
    }

   .box-search {
        margin-top: -45%;
   }
  .tuvi-section {
    position: relative;
    min-height: 760px;
    padding: 48px 20px 90px;
    overflow: hidden;
 }

.tuvi-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 890px;
  margin: 0 auto;
}

.gold-ranking-box{
    background:#f2e7e7;
    padding:10px;
    border-radius:12px;
    overflow-x:auto;
}

.gold-ranking-header,
.gold-ranking-row{
    display:grid;
    grid-template-columns:2.2fr 1.4fr 1.2fr 2.2fr 2fr;
    gap:20px;
    align-items:center;
}

.gold-ranking-header{
    background:#b91610;
    color:#fff;
    font-size:26px;
    font-weight:700;
    padding:18px 20px;
}

.gold-ranking-row{
    padding:15px 12px;
    font-size:22px;
    font-weight:600;
    color:#111;
}

.gold-ranking-row .score{
    color:#b91610;
    font-weight:700;
}

.gold-ranking-header div {
      color: var(--Text-White---Primary, #FFF);
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}
.gold-ranking-row div {
  color: var(--Text-Black---Primary, #111);

  /* Heading/H2/16 */
  font-family: Archivo;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 137.5% */
}
@media(max-width:991px){

    .gold-ranking-header,
    .gold-ranking-row{
        min-width:900px;
    }

    .gold-ranking-box{
        padding:15px;
    }

    .gold-ranking-header{
        font-size:18px;
    }

    .gold-ranking-row{
        font-size:16px;
        padding:20px 15px;
    }
}

.tuvi-title {
    color: var(--Text-Black---Primary, #111);
    text-align: center;
    font-family: Archivo;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 62px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.tuvi-form {
  width: 100%;
}

.form-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-group label {
  display: block;
 color: var(--Alpha-Black---100, #111);
    font-family: Archivo;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 16px;
  border: 1px solid #c9ced1;
  background-color: #f7f7f7;
  color: #161616;
  font-size: 20px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
      border-radius: 4px;
    border: 1px solid var(--Alpha-Black---20, rgba(17, 17, 17, 0.20));
    background: var(--Gray---02, #F9F9F9);
    color: var(--Text-Black---Tertiary, rgba(60, 60, 67, 0.40));
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

.form-group input::placeholder,
.form-group select:invalid {
  color: #aaa;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #b91d17;
  box-shadow: 0 0 0 3px rgba(185, 29, 23, 0.08);
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
   background-image: url("/images/icon-select-arrow.svg");
    background-position: calc(100% - 22px) center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.tuvi-submit {
  width: 100%;
  margin-top: 0;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
      display: flex;
    height: 48px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    grid-row: 5 / span 1;
    grid-column: 1 / span 6;
    justify-self: stretch;
    color: var(--Text-White---Primary, #FFF);
    text-align: center;
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    border-radius: 4px;
background: var(--Red---main, #AC1F18);
box-shadow: 2px 3px 0 0 var(--Red---strong, #862617);
}

.tuvi-submit:hover {
  background: #a91914;
}

.tuvi-submit:active {
  transform: translateY(1px);
}
 #horoscope-table-wrap {
        display: flex;
    }

  
.box-card .lvn-card {
    width: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.box-card .lvn-title {
    text-align: center;
    margin-bottom: 24px;
}

.box-card .lvn-title h2 {
    margin: 0;
    text-align: left;
    color: var(--Text-Black---Primary, #111);
    font-family: Archivo;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
}
.box-card .table-la-so {
    min-width: 720px;
}

.box-card .overview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 124px;
    height: 48px;
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    background: var(--Red---main, #AC1F18);
    box-shadow: 2px 3px 0 0 var(--Red---strong, #862617);
}
.box-btn-download {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.box-btn-download svg {
    margin-right: 5px;
}
@media (min-width: 1200px) { 
    #horoscope-table-wrap { 
        min-width: 880px;
    }
    .box-btn-download { 
        width: 880px;
    }
    #horoscope-table-wrap {
        justify-content: center;
    }
}
.box-card .lvn-share {
    margin-top: 28px;
    text-align: center;
}

.box-card .lvn-share p {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.box-card .lvn-share-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.box-card .lvn-share-btns button {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.box-card .btn-fb {
    background: #1877f2;
}

.box-card .btn-ig {
    background: #d62976;
}

.box-card .btn-wa {
    background: #25d366;
}

/* Mây trang trí dạng placeholder, nếu có ảnh mây thì thay background-image ở đây */
.tuvi-cloud {
  position: absolute;
  z-index: 1;
  width: 390px;
  height: 150px;
  opacity: 0.55;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 72%, transparent 0 18px, #e9b5b2 19px 22px, transparent 23px),
    radial-gradient(circle at 35% 55%, transparent 0 48px, #e9b5b2 49px 53px, transparent 54px),
    radial-gradient(circle at 52% 45%, transparent 0 58px, #e9b5b2 59px 63px, transparent 64px),
    radial-gradient(circle at 72% 70%, transparent 0 42px, #e9b5b2 43px 47px, transparent 48px);
}

.tuvi-cloud-left {
  left: -20px;
  bottom: 105px;
}

.tuvi-cloud-right {
  right: -20px;
  bottom: 105px;
  transform: scaleX(-1);
}

.box {
    max-width: 840px;
}
.box__content {
    color: var(--Text-Black---Primary, #111);
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
     width: 100%;
}
.box {
    background: var(--Gray---01, #fcfcfc);
    max-width: 500px;
    padding: 5px 24px;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .12);
    margin: 40px 0;
}
.box__title {
    margin: 0 0 40px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #f0a8c2;
}
#careerForm {
    display: flex;
    justify-content: center;
}
.box__content p strong {
    color: var(--Text-Black---Primary, #111);
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    width: 100%;
}
.box__content p  {
  margin-bottom: 24px;
}
.box__content em strong { 
  color: var(--Red---main, #AC1F18);
    text-align: center;
    font-family: Archivo;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
@media (max-width: 768px) {
    .box-tab {
        width: 94%;
    }
    .box__title {
      font-size: 18px;
      margin-bottom: 24px;
    }
    .box {
      padding: 24px;
    }
    .box__content {
        font-size: 14px;
        max-width: 100%;
    }
}
.box-tab {
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, .12));
}

@media (max-width: 768px) {
  .tuvi-section {
    padding: 42px 16px 70px;
  }

  .tuvi-title {
    margin-bottom: 36px;
    font-size: 38px;
  }

  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid {
    gap: 16px;
    margin-bottom: 16px;
  }

  .form-group label {
    font-size: 15px;
  }

  .form-group input,
  .form-group select {
    height: 54px;
    font-size: 17px;
  }

  .tuvi-submit {
    height: 58px;
    font-size: 18px;
  }
      .box-card {
        margin-top: 28px;
        padding: 20px 14px;
        border-radius: 14px;
        overflow: auto;
    }
    #horoscope-table-wrap {
        overflow: auto;
    }
    .box-card .lvn-title h2 {
        font-size: 24px;
    }
    .box-search { 
        position: absolute;
        top: 280px;
    }

  .tuvi-cloud {
    display: none;
  }
}
    @media (max-width: 677px) {  
      .menu-left .logo {
          display: block !important;
      }
    }
  
    .header { 
      background: #fff !important;
    }
  
    @media (max-width: 768px) {
    .tuvi-section {
        position: relative;
        min-height: auto;
        padding: 0 32px 70px;
        overflow: hidden;
    }

    .tuvi-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .tuvi-title {
        margin: 48px 0 62px;
        color: var(--Text-Black---Primary, #111);
        text-align: center;
        font-family: Archivo, sans-serif;
        font-size: 38px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .tuvi-form {
        width: 100%;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 18px;
        margin-bottom: 18px;
    }

    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .form-grid-ns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .form-grid-2 .form-group,
    .form-grid-3 .form-group {
        grid-column: span 2;
    }

    .form-grid-3 .form-group:nth-child(2),
    .form-grid-3 .form-group:nth-child(3) {
        grid-column: span 1;
    }

    .form-grid:nth-of-type(3) .form-group {
        grid-column: span 1;
    }

    .form-grid:nth-of-type(4) .form-group {
        grid-column: span 2;
    }

    .form-group label,
    .form-label {
        display: block;
        margin-bottom: 0px;
        color: var(--Alpha-Black---100, #111);
        font-family: Archivo, sans-serif;
        font-size: 21px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    .form-group input,
    .form-group select,
    .form-control {
        width: 100%;
        height: 58px;
        padding: 0 48px 0 16px;
        border-radius: 4px;
        border: 1px solid var(--Alpha-Black---20, rgba(17, 17, 17, 0.20));
        background-color: var(--Gray---02, #F9F9F9);
        color: #111;
        font-family: Archivo, sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        outline: none;
        box-shadow: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-group input::placeholder,
    .form-control::placeholder {
        color: rgba(60, 60, 67, 0.40);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-control:focus {
        border-color: #AC1F18;
        box-shadow: 0 0 0 3px rgba(172, 31, 24, 0.08);
    }

    .form-group select,
    select.form-control {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        background-image: url("/images/icon-select-arrow.svg");
        background-position: calc(100% - 22px) center;
        background-size: 10px 22px;
        background-repeat: no-repeat;
    }

    .tuvi-submit {
        display: flex;
        width: 100%;
        height: 60px;
        margin-top: 18px;
        padding: 0 16px;
        justify-content: center;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 4px;
        background: var(--Red---main, #AC1F18);
        box-shadow: 2px 5px 0 0 var(--Red---strong, #862617);
        color: var(--Text-White---Primary, #FFF);
        text-align: center;
        font-family: Archivo, sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
    }

    .tuvi-submit:hover {
        background: #a91914;
    }

    .tuvi-submit:active {
        transform: translateY(1px);
    }

    .tuvi-cloud {
        display: none;
    }
}

@media (max-width: 480px) {

    .tuvi-section {
        padding: 0 37px 70px;
    }

    .tuvi-title {
        margin-top: 70px;
        font-size: 28px;
        line-height: 0px;
    }

    .form-grid {
        gap: 12px 5px;
        margin-bottom: 0px;
    }

    .form-group label,
    .form-label {
        font-size: 14px;
        line-height: 28px;
    }

    .form-group input,
    .form-group select,
    .form-control {
        height: 40px;
        font-size: 14px;
        line-height: 22px;
    }

    .tuvi-submit {
        height: 40px;
        font-size: 16px;
        line-height: 22px;
    }
    .box-card .overview-btn {
        height: 40px;
        padding: 0 8px;
    }
    .box-btn-download {
        justify-content: left;
    }
}

@media (max-width: 677px) {
    .menu-left .logo {
        display: block !important;
    }

    .header {
        background: #fff !important;
    }
}

    /* ============================
     BASE LAYOUT & PAGE BACKGROUND
     ============================ */
  * { box-sizing: border-box; }
  body { margin: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; color: #222; }
  
  /* full page background (viền xanh gradient giống ảnh) */
  .page-bg {
        background: linear-gradient(0deg, var(--Red---10, #F7E9E8) 0%, var(--Red---main, #AC1F18) 23.61%, var(--Red---main, #AC1F18) 59%, var(--Pink---weak, #EC7696) 79.35%, var(--Pink---pastel, #FFEBF4) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 65px;
    max-height: 600px;
  }
  
  .page-bg .container {
    max-width: 1440px;
  }
  
  /* ============================
     LOVE BOX with image shape bg
     ============================ */
  .section-box {
    background-image: url(/images/horoscope/bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    overflow: visible;
    margin-top: 60px;
  }
  
  /* nội dung bên trong: trái nội dung, phải icon lớn */
  .section-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 555px;
  }
  
  /* text column */
  .section-text { 
    flex: 1;
    max-width: 680px;
    margin-top: 200px;
    margin-left: 120px;
   }
  
  /* tiêu đề */
  .section-text h1,
  .section-text .section-text-title {
    color: #111;
    font-size: 44px;
    font-weight: 700;
    line-height: 62px;
    text-align: left;
  }
  
  /* mô tả */
  .section-text p {
    color: var(--Text-Black---Secondary, rgba(60, 60, 67, 0.68));
    font-family: Archivo;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  

/* Responsive */
@media (max-width: 768px) {
  .content-header h1 {
    font-size: 22px;
  }

  .content-main h2 {
    font-size: 18px;
  }
}


/* Responsive */
@media (max-width: 768px) {
  .calendar-grid {
    gap: 2px;
  }
  .tooltip-content {
    left: 0% !important;
  }
  .day {
    padding: 5px 3px;
  }
  .stars { 
    gap: 0px;
  }
  .stars { 
    padding: 0px;
  }
  .day.good { 
    padding-top: 15px;
  }
  .date-search { 
    margin-top: -600px;
    width: 94%;
    left: 3%;
  }
  .day-stars svg {
    width: 6px;
  }
  .day strong,
  .day span { 
    font-size: 7px;
  }

  .calendar-header {
    font-size: 10px;
    padding: 10px;
  }
}

.share-inline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 28px 0;
  color: #7a7a7a;
  font-size: 14px;
}

/* Đường kẻ hai bên */
.share-inline .line {
  flex: 1;
  height: 1px;
  background: #d6d6d6;
}

/* Khối giữa */
.share-center {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* Text */
.share-text {
  font-size: 14px;
  color: #7a7a7a;
}

/* Icon */
.share-icons {
  display: flex;
  gap: 28px;
}

.share-icons .icon {
  font-size: 20px;
  color: #1f4e5f; /* xanh đậm giống ảnh */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.share-icons .icon:hover {
  opacity: 0.7;
}

.lunar-calendar-box {
  /* border: 1px solid #d8b57c; */
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

/* Header nâu */
.lunar-calendar-header {
  background: #a35a00;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 20px;
  font-weight: 600;
}

/* Body 2 cột */
.lunar-calendar-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Cột chung */
.calendar-col {
  padding: 20px;
  text-align: center;
}

/* Title mỗi cột */
.col-title {
  background: #e9f8fc;
  padding: 12px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.col-title.red {
  color: #d60000;
}

/* ====== RESET NHẸ ====== */
.vncal * { box-sizing: border-box; }
.vncal { font-family: Arial, Helvetica, sans-serif; color:#111; }
.vncal__heading { font-size: 28px; margin: 0 0 14px; }

/* ====== HEADER ĐỎ ====== */
.vncal__header{
  background:#8a231a;
  padding:18px 20px;
  text-align:center;
}
.vncal__headerTitle{
  margin:0;
  color:#fff;
  font-size:26px;
  font-weight:700;
}

/* ====== TAB BAR ====== */
.vncal__tabs{
  display:flex;
  width:100%;
}
.vncal__tab{
  flex:1;
  text-align:center;
  padding:16px 12px;
  font-weight:600;
  font-size:18px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.vncal__tab--light{ background:#fff; color:#111; }
.vncal__tab--dark{ background:#111; color:#fff; }

/* ====== CARD TRẮNG LỚN ====== */
.vncal__card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  padding:0;
  margin-top:18px;
  overflow:hidden;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  position: relative;
}

/* ====== GRID 2 CỘT ====== */
.vncal__grid{
  display:flex;
  gap:0;
  min-height:520px;
}

/* CỘT CHUNG */
.vncal__col{
  flex:1;
  position:relative;
  padding:36px 40px;
  background:#fff;
}

/* “MŨI NHỌN” Ở ĐỈNH MỖI CỘT (như ảnh) */
.vncal__grid::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:14px solid #efefef; /* màu nền phía trên card */
  z-index: 9999;
}

.vncal__grid::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #efefef;
  z-index: 9999;
}

/* NỀN PHÂN CỘT */
.vncal__col--solar{
  background:linear-gradient(#ffffff, #fbf6e7);
}
.vncal__col--lunar{
  background:linear-gradient(#ffffff, #f3f3f3);
}

/* ====== LEFT CONTENT ====== */
.vncal__metaTitle{
  text-align:center;
  font-size:22px;
  font-weight:700;
  margin-top:6px;
  margin-bottom:18px;
}
.vncal__weekday{
  text-align:center;
  letter-spacing:1px;
  font-size:18px;
  margin-bottom:18px;
  color:#2b2b2b;
}
.vncal__bigNumber{
  text-align:center;
  font-weight:800;
  line-height:1;
}
.vncal__bigNumber--solar{
  font-size:120px;
  color:#b32017;
  text-shadow:3px 3px 0 rgba(0,0,0,0.18);
  margin-bottom:26px;
}
.vncal__zodiac{ display:flex; justify-content:center; }
.vncal__zodiac img{ width:90px; height:90px; border-radius:50%; object-fit:cover; }

/* ====== RIGHT CONTENT ====== */
.vncal__metaRow{
  /* display:flex; */
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:10px;
}
.vncal__badge{
  background:#dff2df;
  color:#2e7d32;
  padding:10px 16px;
  font-weight:700;
  border-radius:4px;
  font-size:16px;
  margin-left: 40%;
}
.vncal__bigNumber--lunar{
  font-size:120px;
  color:#111;
  text-shadow:3px 3px 0 rgba(179,32,23,0.22);
  margin:8px 0 18px;
}

/* 3 dòng Ngày/Tháng/Năm */
.vncal__info3{
  width:100%;
  max-width:560px;
  margin:0 auto 14px;
}
.vncal__info3Row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  padding:8px 0;
  align-items:center;
}
.vncal__label{ color:#6f6f6f; }
.vncal__hanh{ color:#2c6db2; font-weight:600; margin-left:6px; }

/* strip xám */
.vncal__strip{
  background:#e9e9e9;
  padding:12px 5px;
  text-align:center;
  border-radius:2px;
  margin:10px auto 18px;
  max-width:640px;
  color:#555;
  font-size: 15px;
}

/* 2 cột Tiết khí/Trực/Sao/Lục nhâm */
.vncal__twoCols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 60px;
  max-width:640px;
  margin:0 auto 18px;
}
.vncal__pairLabel{ color:#7a7a7a; margin-bottom:6px; }
.vncal__pairValue{ font-weight:700; }
.vncal__pairValue--red{ color:#a01f16; }

/* 2 dòng cuối */
.vncal__line{
  max-width:640px;
  margin:10px auto 0;
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}
.vncal__lineLabel{ color:#7a7a7a; }
.vncal__lineValue{ font-weight:700; }
.vncal__lineValue--red{ color:#a01f16; }

/* ====== RESPONSIVE ====== */
@media (max-width: 900px){
  .vncal__grid{ flex-direction:column; }
  .vncal__col{ padding:28px 18px; }
  .vncal__bigNumber--solar,
  .vncal__bigNumber--lunar{ font-size:96px; }
  .vncal__info3Row{ grid-template-columns:120px 1fr; }
  .vncal__twoCols{ grid-template-columns:1fr; gap:12px; }
}
  
  .box-breadcrumb {
      background: var(--Red---10, #F7E9E8);
    display: flex;
    justify-content: center;
  }
  
  .breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      color: #666;
      padding-top: 140px;
  }
  .breadcrumb .bc-item { color: var(--Text-Black---Primary, #111);; text-decoration: none; font-weight: 500; }
  .breadcrumb .bc-item:hover { text-decoration: underline; }
  .breadcrumb .bc-sep { color: #ccc; }
  .breadcrumb .bc-current { font-weight: 600; margin-left: 30px; position: relative; text-transform: uppercase;}
  .breadcrumb .bc-current img { 
    position: absolute;
    left: -30px;
    top: -3px;
  }
  
  :root{
      --bg:#fdeaf0;
      --accent:#e63c82;
      --accent-dark:#c52e6d;
      --blue:#1a75bb;
      --card-bg:#fff;
      --muted:#9aa3ad;
      --soft:#ffeff4;
      --sidebar:#fff0f5;
      --dashed:#f1dfe6;
      --radius:14px;
    }
    
    *{box-sizing:border-box}
    /* page layout */
    .box-wrap {
      background:var(--Pink---pastel, #F7E9E8);
      padding: 100px 0;
    }
  
    .wrap{
      max-width:1200px;
      margin:0px auto;
      padding: 0 0px;
      display:grid;
      grid-template-columns: 1fr 300px;
      gap:28px;
      align-items:start;
    }
    
    /* title left above main card */
    .page-title{
      grid-column: 1 / span 2;
      font-weight: 600;
      color: #111;
      margin-bottom: 18px;
      line-height: 1.4;
      text-align: left;
      padding-left: 6px;
      color: var(--Text-Black---Primary, #111);
      font-family: Archivo;
      font-size: 22px;
      font-style: normal;
      font-weight: 600;
      line-height: 30px;
      align-self: stretch;
    }
    p.page-note {
      color: var(--Text-Black---Secondary, rgba(60, 60, 67, 0.68));
      font-family: Archivo;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      padding-left: 6px;
    }
    /* main white card with cut corners */
    .form-card{
      position:relative;
      background:var(--card-bg);
      padding:34px 36px 20px;
      overflow:visible;
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
      /* emulate cut corners with pseudo elements */
    }
    /* inner content layered above pseudoelements */
    .form-card .inner{
      position:relative;
      z-index:2;
    }
    
    /* icons row */
    .icons-row{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:30px;
      margin-bottom:6px;
    }
    .person{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      margin-left: 10px;
      margin-right: 25px;
    }
    .person img{ display:block; width:68px; height:68px; object-fit:contain;}
    .person h3{ margin:0; font-size:15px; font-weight:600;}
    .person.male h3{ 
      color: var(--Blue---main, #1661AB);
      text-align: right;
      font-family: Archivo;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 30px;
    }
    .person.female h3{ 
      color: var(--Pink---main, #EE2C79);
      font-family: Archivo;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 30px;
    }
    .person.male  img {
      margin-left: 100px;
    }
    .person.female  img {
      margin-right: 100px;
    }
    /* heart badge */
    .heart{
      width:44px;
      height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #toast {
      position: fixed;
      top: 20px;
      right: 20px;
      min-width: 260px;
      padding: 14px 18px;
      background-color: #e74c3c;
      color: #fff;
      border-radius: 8px;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.3s ease;
      z-index: 9999;
  }
  
  #toast.show {
      opacity: 1;
      transform: translateY(0);
  }
    /* form row */
    .form-row{
      margin-top:12px;
      display:flex;
      gap:0px;
      align-items:flex-start;
      justify-content:space-between;
    }
    
    /* each side */
    .side{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:flex-start;
      text-align:left;
    }
    
    /* center area (we want input aligned horizontally) */
    .side .label{
      font-size:13px;
      color:var(--muted);
      margin-left:6px;
    }
    
    /* input group - emulate select + input horizontally */
    .input-line{
      display:flex;
      gap:12px;
      align-items:center;
      width:100%;
    }
    .form-card .select,
    .form-card .text{
      padding: 10px 12px;
      border-radius: 8px;
      outline: none;
      border-radius: 4px;
      border: 1px solid var(--Blue---strong, #144A74);
      background: var(--Blue---10, #E8EFF7);
      color: var(--Blue---30, #78A3CE);
      text-align: right;
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
    }
    .form-card .text::placeholder,
    .form-card .select::placeholder {
      color: var(--Blue---30, #78A3CE);
      text-align: right;
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
    }
    .form-card .select{ width:110px; min-width:90px; }
    .form-card .text{ flex:1; min-width:180px; }
    
    /* visually separate left/right inputs like in image:
       right side inputs colored faint pink */
    .side.female .text{
      border-radius: 4px;
      border: 1px solid var(--Pink---strong, #9B1E64);
      background: var(--Pink---10, #FDD5E6);
      color: var(--Pink---30, #F585B1);
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
    }
    .side.female .select{ 
      border-radius: 4px;
      border: 1px solid var(--Pink---strong, #9B1E64);
      background: var(--Pink---10, #FDD5E6);
      color: var(--Pink---strong, #9B1E64);
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
    }
    .side.female .select::placeholder,
    .side.female .text::placeholder {
      color: var(--Pink---strong, #9B1E64);
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
    }
    /* center narrow spacer (heart column) */
    .heart-col{ width:70px; display:flex; align-items:center; justify-content:center; }
    
    /* button centered under form */
    .btn-wrap{
      display:flex;
      justify-content:center;
      margin-top:20px;
    }
    .btn{
      color: #fff;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      width: 227px;
      height: 48px;
      padding: 0 16px;
      justify-content: center;
      align-items: center;
      gap: 12px;
      border-radius: 4px;
      background: var(--Pink---main, #EE2C79);
      box-shadow: 0 3px 0 0 var(--Pink---strong, #9B1E64);
      color: var(--Text-White---Primary, #FFF);
      text-align: center;
  
      /* Heading/H2/16 */
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 22px; /* 137.5% */
    }
    .btn:hover{ background:var(--accent-dark); }
    
    /* note area below */
    .card-note{
      display:flex;
      gap:28px;
      margin-top:22px;
      color:#6c7280;
      font-size:13px;
      align-items:flex-start;
    }
    .note-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 25px;
      position: relative;
    }
    .note-title strong {
      line-height: 24px;
    }
    .note-title strong svg {
      margin-top: 0px;
      position: absolute;
      right: 45px;
    }
  
    .note-col {
      flex: 1 0 0;
      color: var(--Text-Black---Secondary, rgba(60, 60, 67, 0.60));
      font-family: Archivo;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }
   
    /* right sidebar */
    .sidebar{
      padding: 18px;
      box-shadow: 0 6px 14px rgba(18, 21, 24, 0.03);
      height: fit-content;
     background: var(--Alpha-White---40, rgba(255, 255, 255, 0.40));
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    }
    .sidebar img {
      height: 30px;
    }
    .sidebar h4{ margin:0 0 10px 0; font-size:15px; font-weight:600; color:#111; }
    .sidebar ul{ list-style:none; padding:0; margin:0; }
    .sidebar li{
      display:flex;
      gap:12px;
      align-items:center;
      padding:12px 8px;
      border-bottom:1px dashed var(--dashed);
      font-size:14px;
      color:#262626;
    }
    /* .sidebar .dot{
      background: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
      height: 32px;
      align-self: stretch;
      aspect-ratio: 1 / 1;
    } */
    
    /* small responsive */
    
    /* mobile stacked form: stack left/heart/right vertically */
    @media (max-width:640px){
      .form-row{ flex-direction:column; align-items:center; }
      .side{ width:100%; align-items:center; text-align:center;}
      .input-line{ justify-content:center; }
      .select{ width:36%; }
      .text{ min-width:220px; }
      .heart-col{ width:auto; margin:0; }
      .card-note{ flex-direction:column; gap:12px; }
    }
  
    .containter {
      margin: 0 auto;
      text-align: center;
      max-width: 1200px;
    }
    /* Thông tin 2 bên */
    .info {
      display: flex;
      width: 147px;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;  
      margin-top: 120px;
    }
    .info-left {
      text-align: left;
      margin-left: -30px;
    }
    .info-right {
      text-align: right;
      margin-right: -60px;
    }
    span.menh {
      font-family: "Schibsted Grotesk", sans-serif;
      color: var(--Text-White---Primary, #FFF);
      text-align: center;
      text-shadow: 0 0 2px var(--Blue---strong, #144A74);
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: var(--Blue---strong, #144A74);
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 18px;
      text-transform: uppercase;
    }
    /* Giữa */
    .center-content {
      flex: 1;
      text-align: center;
      position: relative;
    }
    .center-content h2 {
      font-size: 24px;
      margin-bottom: 16px;
      font-weight: 700;
    }
    
    /* Hai thẻ bói */
    .pair-tags {
      display: flex;
      justify-content: center;
      gap: 50px;
      margin-top: 36%;
    }
    
    .symbol {
      font-size: 36px;
      margin: 4px 0;
    }
    .pair-tags .male {
      position: absolute;
      right: 57%;
      bottom: -20px;
    }
    .pair-tags .female {
      position: absolute;
      right: 31%;
      bottom: -20px;
    }
    .pair-tags .male .desc {
      transform: rotate(-7.5deg);
    }
    .destiny {
      position: absolute;
      top: 70%;
      left: 28%;
    }
    .destiny-female {
      left: 61%;
    }
    .pair-tags .female .desc { 
      transform: rotate(9.99deg);
      margin-right: -30px;
    }
    /* Thanh điểm */
    .result-bars {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding-bottom: 24px;
    }
    
    .bar-item {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 15px;
    }
    
    .bar-item .label,
    .bar-item span.value {
      color: var(--Text-Black---Primary, #111);
      font-family: Archivo;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
    }
    .bar-item span.value { 
      width: 220px;
      margin-left: 16px;
    }
    .bar-item .label {
      width: 105px;
    }
    
    .bar {
      flex: 1;
      height: 24px;
      overflow: hidden;
      border-radius: 1px;
      background: var(--Alpha-Black---10, rgba(17, 17, 17, 0.10));
    }
    .fill {
      height: 100%;
      background: #f9d25c;
      transition: width 0.6s ease;
    }
    
    .score-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
    }
    
    .circle-chart {
      position: relative;
      width: 348px;
      height: 348px;
    }
    
    .center-heart {
      position: absolute;
      top: 50%;
      left: 48%;
    }
    .info p {
      color: var(--Blue---pastel, #DCE9F5);
  
      /* Heading/H2/16 */
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 22px; /* 137.5% */
    }
    .progress-ring {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    
    .ring-bg {
      fill: none;
      stroke: #f9dce7;
      stroke-width: 3.8;
    }
    
    .ring-progress {
      fill: none;
      stroke: #e64276;
      stroke-width: 3.8;
      stroke-linecap: round;
      stroke-dasharray: 100, 100; /* full circle */
      stroke-dashoffset: calc(100 - (5 * 10)); /* 5/10 điểm => 50% */
      transition: stroke-dashoffset 0.6s ease;
    }
    
    /* Nhãn điểm bên phải */
    .score-label {
      background: #fff;
      padding: 16px 24px;
      border-radius: 10px;
      position: relative;
      margin-left: 40px;
      color: var(--Pink---main, #EE2C79);
      text-align: center;
  
      /* Heading/H2/24 */
      font-family: Archivo;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 34px; /* 141.667% */
    }
    .score-label::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: transparent #fff transparent transparent;
    }
    
    .ellipse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center bottom;
    }
    
    /* Mỗi ellipse cách nhau 36 độ */
    .ellipse-1  { transform: rotate(0deg)   translateY(-110px); }
    .ellipse-2  { transform: rotate(36deg)  translateY(-110px); }
    .ellipse-3  { transform: rotate(72deg)  translateY(-110px); }
    .ellipse-4  { transform: rotate(108deg) translateY(-110px); }
    .ellipse-5  { transform: rotate(144deg) translateY(-110px); }
    .ellipse-6  { transform: rotate(180deg) translateY(-110px); }
    .ellipse-7  { transform: rotate(216deg) translateY(-110px); }
    .ellipse-8  { transform: rotate(252deg) translateY(-110px); }
    .ellipse-9  { transform: rotate(288deg) translateY(-110px); }
    .ellipse-10 { transform: rotate(324deg) translateY(-110px); }
    
    .result-box {
      padding: 30px 40px;
      border-radius: 10px;
      position: relative;
      width: 100%;
      margin: 40px auto;
      color: #1a1a1a;
      font-family: 'Arial', sans-serif;
      max-width: 1200px;
    }
    .result-header {
      background: var(--Pink---10, #FDD5E6);
      display: flex;
      padding: 28px 8px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    }
    /* Góc nhọn hai bên */
    .result-box::before,
    .result-box::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 15px solid transparent;
    }
    
    
    .result-header h3 {
      margin-bottom: 20px;
      color: var(--Pink---strong, #9B1E64);
      font-family: Archivo;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
    }
    .box-left,
    .box-right {
      top: 30px;
      position: absolute;
    }
    .box-right {
      right: 35px;
    }
    .box-left {
      left: 35px;
    }
    .result-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .result-left {
      flex: 0 0 25%;
      text-align: left;
    }
    
    .result-left .result-title {
      color: var(--Blue---strong, #144A74);
      font-family: Archivo;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 34px;
    }
    
    .result-left .result-sub {
      color: var(--Text-Black---Secondary, rgba(60, 60, 67, 0.60));
      font-family: Archivo;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }
    
    .result-right {
      flex: 1;
      color: var(--Blue---strong, #144A74);
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
      text-align: left;
    }
    
    .result-right b {
      color: #A0386E;
    }
    
    .result-share {
      text-align: center;
      margin-top: 30px;
      color: #666;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .result-share hr {
      flex: 1;
      border: none;
      border-top: 1px solid #d9b7c9;
    }
    
    .result-share span {
      white-space: nowrap;
    }
    
    .social-icons a {
      color: #264C73;
      font-size: 18px;
      text-decoration: none;
    }
    
    .social-icons a:hover {
      color: #A0386E;
    }
    
    
    .section-about {
      background: #20466f;
      color: #fff;
      padding: 100px 0;
    }
    .bg-red {
      background:rgba(238, 44, 121, 1);
    }
    .section-about .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
    }
    .bc-current {
  
    }
    .section-about h2 {
      letter-spacing: 1px;
      color: var(--Text-White---Primary, #FFF);
      font-family: Archivo;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 34px;
      padding-bottom: 24px;
    }
    
    .content {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 120px;
    }
    
    /* --- Left tags --- */
    .image-box {
      position: relative;
      max-width: 520px;
      border-radius: 6px;
      display: flex;
    }
    .image-box img {
      max-width: 520px;
    }
    
    .tag .string {
      position: absolute;
      top: -40px;
      left: 50%;
      width: 4px;
      height: 50px;
      background: #fbe8a2;
      border-radius: 2px;
      transform: translateX(-50%);
    }
    
    .tag .title {
      font-size: 14px;
      font-weight: 600;
    }
    .tag .label {
      font-size: 13px;
      margin-bottom: 8px;
      color: #555;
    }
    .symbol {
      font-size: 38px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .desc {
      font-size: 12px;
      font-weight: 600;
      width: 100px;
    }
  
    
    .heart {
      position: absolute;
      color: #fff;
      font-size: 28px;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 30px;
    }
    
    .cloud {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 200px;
      height: 40px;
      background: #fff;
      border-radius: 100px;
      filter: blur(6px);
      transform: translateX(-50%);
    }
    
    /* --- Right list --- */
    .info-box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
      flex: 1 0 0;
    }
    
    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }
    
    .num {
      opacity: 0.6;
      min-width: 75px;
      color: var(--Blue---weak, #93B5CF);
      font-size:48px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-transform: uppercase;
    }
    .text {
      max-width: 450px;
    }
    .text h4 {
      color: var(--Text-White---Primary, #FFF);
      font-family: Archivo;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 30px;
    }
  
    .text p {
      line-height: 1.5;
      color: var(--Text-White---Secondary, rgba(235, 235, 245, 0.60));
      font-family: Archivo;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
  
    .mobile {
      display: none;
    }
    @media (min-width: 1200px) {  
      .section-tips {
        width: 650px;
      }
      .box-breadcrumb {
        padding-top: 100px;
      }
    }
    @media (min-width: 768px) and (max-width: 1200px)   {  
      .wrap {
        grid-template-columns: 540px 1fr;
        gap: 10px;
        margin-left: 12px;
      }
      .form-card { 
        padding: 30px 20px 20px;
      }
      .person { 
        margin-left: 10px;
        margin-right: 10px;
      }
      .icons-row { 
        gap: 10px;
      }
      .form-card .select { 
        width: 60px;
        min-width: 70px;
        font-size: 13px !important;
        padding: 10px 8px;
      }
      .form-card .text,
      .side.female .text  {
        min-width: 69px;
        font-size: 13px;
        padding: 10px 8px;
      }
      .section-text h1,
      .section-text-title { 
        font-size: 30px;
        line-height: 30px;
      }
      .section-icon-pc { 
        margin-right: 5%;
        margin-top: 5%;
        max-width: 225px;
      }
      .section-text { 
        max-width: 500px;
        margin-top: 12px;
        margin-left: 12px;
      }
      .section-content { 
        min-height: 300px;
      }
      .section-text p { 
        line-height: 20px;
        font-size: 13px;
      }
      .num { 
        font-size: 30px;
        min-width: 30px;
      }
      .text h4 { 
        line-height: 20px;
        font-size: 14px;
      }
      .image-box { 
        max-width: 300px;
      }
      .image-box img {
        max-width: 300px;
      }
      .section-about,
      .faq-section  { 
        padding: 50px 12px;
      }
      .faq-layout { 
        gap: 50px;
      }
      .content { 
        gap: 50px;
      }
      .text p { 
        line-height: 15px;
        font-size: 13px;
      }
    } 
    @media (max-width: 767px) { 
      .sidebar li { 
        border-bottom: none !important;
      }
      .section-text .section-text-title, .section-text h1 {
        font-size: 28px;
      }
      .section-box {
        background-image: url(/images/card-reading/bg_mb.webp);
      }
      .text h4 { 
        font-size: 20px;
      }
      .text p { 
        font-size: 14px;
      }
      .icon-menu {
        display: block;
      }
      .section-text p { 
        /* Body/16 */
        font-family: Archivo;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 137.5% */
        width: 75%;
      }
      .tips-left { 
        display: flex;
        padding: 16px 0;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        border-right:none;
        width: 100%;
      }
      .tips-right { 
        padding: 20px;
        width: 100%;
      }
      /* .section-tips { 
        display: none;
      } */
      .section-text { 
        margin-left: 50px;
        padding-top: 50px;
      }
      .section-content { 
        display: inline;
      }
      .page-bg { 
        margin-top: -100px;
        padding: 0;
      }
      .desktop { 
        display: none;
      }
      .section-icon-mb { 
        display: flex;
        justify-content: center;
      }
      .section-icon-mb img {
        max-height: 250px;
        margin-left: 10%;
      }
      .section-box {
        height: 1200px;
      }
      .page-bg { 
        max-height: 695px;
        height: 100%;
      }
      .section-text h1,
      .section-text-title { 
        font-family: Archivo;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 38px;
        margin-top: 24px;
      }
      .page-title { 
        font-size: 20px;
        margin-bottom: 0px;
        line-height: 24px;
      }
      .form-card { 
        padding: 20px;
        position: relative;
      }
      .section-text { 
        margin-left: 0px;
      }
      .section-text p,
      .section-text h1,
      .section-text-title {
        margin-left: 12%;
        width: 70%;
      }
      .section-tips { 
        padding: 16px 8px;
        flex-direction: column;
        align-items: center;
        flex: 1 0 0;
        align-self: stretch;
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
      }
      .tips-right li { 
        font-size: 13px;
      }
      .box-breadcrumb { 
        padding-top: 40px;
      }
      .breadcrumb { 
        display: flex;
        justify-content: left;
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px 15px;
        border-radius: 5px;
        margin-top: 120px;
      }
  
      .heart,
      .heart-col { 
        display: none;
      }
      .person h3 { 
        position: absolute;
        width: 100%;
      }
      .person.female h3 { 
        top: 250px;
        right: 0px;
      }
      .person.male h3 { 
        top: 60px;
        right: 0px;
        text-align: left;
      }
      .side.male {
        margin-bottom: 150px;
        margin-top: 80px;
      }
      .person img { 
        position: absolute;
        left: 0px;
        width: 60px;
      }
      .person.male img {
        margin-left: 0px;
      }
      .input-line .select {
        order: 2;
      }
      .form-card .select, .form-card .text,
      .form-card .text::placeholder,
      .form-card .select::placeholder {
        text-align: left;
      }
      .sidebar { 
        padding-left: 3%;
        margin: 24px 3%;
      }
      .input-line .text {
        order: 1;
      }
      .person img {
        top: -5px;
      }
      .female img {
        top: 180px;
      }
      .bar-item { 
        display: inline;
        text-align: left;
        position: relative;
      }
      .bar-item span.value { 
        position: absolute;
        right: 0px;
        top: 0px;
        text-align: right;
      }
      .bar { 
        margin-top: 8px;
      }
      .score-box { 
        justify-content: unset;
        position: relative;
      }
      .score-label { 
        position: absolute;
        top: 420px;
        left: 23%;
      }
      .result-box { 
        margin-top: 150px;
      }
      .result-content { 
        display: inline;
      }
      .info p { 
        font-size: 14px;
        line-height: 20px;
      }
      .info { 
        margin-top: 260px;
      }
      .info-left { 
        margin-left: -35px;
      }
      .info-right { 
        margin-right: -35px;
      }
      .pair-tags .male,
      .pair-tags .female {
        position: unset;
      }
      .info { 
        width: auto;
      }
      .pair-tags .male {
        right: 70%;
        bottom: -70px;
      }
      span.menh { 
        font-size: 9px;
      }
      .pair-tags .female {
        right: 35%;
        bottom: -65px;
      }
      .desc { 
        margin: 0px !important;
      }
      .destiny { 
        left: 7%;
        margin-top: -30px;
      }
      .center-content {
        position: absolute;
        width: 80%;
        left: 20%; 
      }
      .destiny-female { 
        left: 55%;
      }
      .score-label::before { 
        display: none;
      }
      .result-right p {
        color: var(--Blue---strong, #144A74);
        font-family: Archivo;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: left;
      }
      .mobile { 
        display: block;
      }
      .result-header { 
        padding: 24px 10px;
      }
      .related-box h2 { 
        display: grid;
      }
      .news-nav { 
        display: none !important;
      }
      .section-about h2 { 
        font-size: 20px;
        text-align: center;
        line-height: 38px;
      }
      .content,
      .info-item { 
        display: inline;
      }
      .info-item {
        padding: 20px 12px;
      }
      .info-box { 
        gap: 0px;
        margin-top: 20px;
      }
      .info-box .text {
        margin-top: 16px;
      }
      .section-about { 
        padding: 60px 0;
      }
      .image-box img { 
        width: 100%;
      }
      .box-wrap { 
        padding-top: 100px;
      }
      /* .page-title,
      .form-card,
      .card-note,
      .result-bars,
      .result-header {
        margin-left: 3%;
        margin-right: 3%;
      } */
      .tips-left h3 {  
        font-size: 22px;
      }
      .wrap { 
        display: inline;
      }
      .box-right {
        right: 12px;
      }
      .box-left {
        left: 12px;
      }
      .result-box { 
        padding: 30px 0px;
      }
      .icon-love img { 
        margin-left: -35px;
      }
      .section-icon-mb {
        display: flex !important;
      }
      .sidebar ul { 
        display: flex;
        gap: 20px;
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        overflow-y: hidden;
      }
      .social-icons,
      .result-share { 
        gap: 0px !important;
      }
      .result-share span { 
        margin-left: 5px;
      }
    }
  
    @media (min-width: 600px) and (max-width: 767px)  {   
      .info-left {
        margin-left: 15%;
      }
      .info-right {
        margin-right: 15%;
      }
      .destiny-female {
        left: 48%;
      }
      .destiny-male {
        left: 18%;
      }
      .result-frame { 
        height: 400px;
      }
      .pair-tags {
        gap: 8%;
        margin-top: 21%;
        margin-left: -26%;
      }
    }
    @media (min-width: 550px) and (max-width: 600px)  {  
      .info-left {
        margin-left: 40px;
      }
      .info-right {
        margin-right: 40px;
      }
      .info {
        margin-top: 320px;
      }
      .pair-tags {
        display: flex;
        justify-content: center;
        gap: 13%;
        margin-top: 25%;
        width: 100%;
        margin-left: -13%;
      }
      .destiny-male { 
        left: 14%;
      }
      .destiny-female {
        left: 52%;
      }
      .info {
        margin-top: 55%;
        gap: 0px;
      }
    }
  
    @media (min-width: 500px) and (max-width: 550px)  {  
      .info-left {
        margin-left: 40px;
      }
      .info-right {
        margin-right: 40px;
      }
      .info {
        margin-top: 320px;
      }
      .pair-tags {
        display: flex;
        justify-content: center;
        gap: 15%;
        margin-top: 25%;
        width: 100%;
        margin-left: -12%;
      }
      .destiny-male { 
        left: 11%;
      }
      .destiny-female {
        left: 54%;
      }
      .info {
        margin-top: 75%;
        gap: 0px;
      }
    }
    
    @media (max-width: 500px) {  
      .info-left {
        margin-left: -20px;
      }
      .info-right {
        margin-right: -20px;
      }
      .pair-tags .male { 
        bottom: -60px;
      }
      .pair-tags {
        display: flex;
        justify-content: center;
        gap: 13%;
        margin-top: 31%;
        width: 100%;
        margin-left: -13%;
      }
      .info {
        margin-top: 95%;
        gap: 0px;
      }
    }