@charset "UTF-8";
/* Mixin */
/* Set các giá trị với màn hình tương ứng */
.head-box {
  background: #eee6;
  height: 35px;
  line-height: 35px;
  color: #08a66c;
  font-size: 16px !important;
  position: relative;
  margin: 0;
  font-family: RobotoBold;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-bottom: 0px;
  text-transform: uppercase; }

.content-day {
  border: 1px solid #e0e0e0;
  border-top: 0; }

.item-box {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0; }

.head-title-tab {
  color: #08a66c  !important; }

.item-box-aval {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0; }
  .item-box-aval .des_item {
    border: 1px solid #e0e0e0;
    border-left: 0;
    border-top: 0;
    padding: 5px 10px; }

.row-item-box {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  width: 100%; }

#chi-tiet-ngay-amduong .divtagh3 {
  text-transform: uppercase;
  font-weight: bold; }

#chi-tiet-ngay-amduong .tagh4 {
  font-weight: bold;
  color: #08a66c;
  text-transform: uppercase; }

.line_border {
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  padding: 5px; }

.header h1 {
  background: #88c685;
  height: 35px;
  line-height: 35px;
  color: #fff;
  font-size: 14pt;
  position: relative;
  margin: 0; }

.todaylink {
  border-radius: 3px;
  font-size: 14px;
  color: #FFF;
  display: block;
  background: #71C6E5;
  width: 180px;
  padding: 5px;
  margin: 10px auto;
  padding: 5px;
  text-align: center;
  text-decoration: none; }

.bg-calendar {
  font-family: 'RobotoBold'; }
  @media (max-width: 1024px) {
    .bg-calendar {
      flex-direction: column; } }

.index-calendar {
  padding: 10px; }
  .index-calendar .main-title {
    text-transform: uppercase;
    text-align: center;
    background: #c20000;
    color: #fff; }
  .index-calendar .info-day-page {
    color: #fff; }
  @media (max-width: 479px) {
    .index-calendar .index-calendar {
      font-size: 14px;
      padding: 1px; } }
  .index-calendar .head-top-date {
    font-family: RobotoBold;
    background: #f7cbcb;
    text-align: center;
    align-items: center;
    padding: 5px 0;
    width: 100%; }

.btn-view-month {
  cursor: pointer; }

.index-calendar-div {
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  padding: 10px; }
  .index-calendar-div .main-link {
    position: absolute;
    font-weight: bold;
    font-size: 40px;
    width: 50px;
    height: 50px;
    background: #c20000;
    border-radius: 50%;
    color: #fff;
    cursor: pointer; }
    .index-calendar-div .main-link i {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px; }
    .index-calendar-div .main-link i:before {
      color: #fff; }
    .index-calendar-div .main-link i:hover i:before {
      color: #489e70; }
  .index-calendar-div .link-prev-day {
    left: 0px;
    top: 40%; }
  .index-calendar-div .link-next-day {
    right: 0px;
    top: 40%; }
  @media (max-width: 1024px) {
    .index-calendar-div {
      flex-direction: column; } }

.index-calendar .index-calendar-div .index-calendar-month-year {
  width: 275px;
  height: 45px;
  line-height: 41px;
  text-align: center;
  margin: 10px auto 0;
  white-space: nowrap;
  color: #bb6e00;
  font-size: 25px;
  font-weight: bold;
  border: 2px solid #bb6e00; }

.index-calendar .index-calendar-div .index-calendar-day-of-week {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ebf864; }

.index-calendar .index-calendar-div .index-calendar-day {
  width: 255px;
  height: 170px;
  line-height: 120px;
  text-align: center;
  padding: 15px 0 20px;
  margin: 20px auto 0;
  border-bottom: 2px solid #bb6e00;
  font-size: 163px;
  font-weight: bold;
  color: #bb6e00; }

.index-calendar .index-calendar-div .index-calendar-day-home {
  width: 100%;
  text-align: center;
  padding: 15px 0 20px;
  margin: 10px auto 0;
  font-size: 163px;
  font-weight: bold;
  color: #c20000; }

.index-calendar .index-calendar-div .date-am {
  color: #006e33; }

.index-calendar .index-calendar-div .date-duong {
  color: #d9001b; }

.index-calendar .index-calendar-div .index-calendar-lunar {
  margin-top: 15px;
  text-align: center;
  color: #bb6e00;
  padding: 0 5px; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar h4 {
    color: #bb6e00; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar-lunar-title {
    margin: 10px auto 2px;
    font-weight: bold;
    font-size: 17px; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar-thang-am {
    font-weight: bold; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar-tiet-khi {
    font-weight: bold; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar-ngay-am {
    font-size: 26px;
    padding: 0;
    font-weight: bold; }
  .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar .index-calendar-div .index-calendar-lunar .index-calendar-info-can-chi {
    font-weight: bold; }

.info-detail-lunar {
  margin-top: 14px;
  text-align: center;
  padding: 5px 5px;
  border-top: 1px solid #e0e0e0; }
  .info-detail-lunar span {
    font-weight: 400; }

.fillter-incalendar {
  justify-content: flex-end; }
  .fillter-incalendar select {
    max-width: 80px; }
  .fillter-incalendar span {
    background-color: #08a66c;
    color: #fff;
    border-radius: 4px;
    padding: 6px 12px;
    border: 1px solid;
    font-size: 14px;
    height: 34px; }

.index-calendar .event-of-month {
  padding: 10px; }
  .index-calendar .event-of-month .index-calendar .event-of-month .panel-event {
    border-color: #bb6e00;
    background-color: #e7f9f2; }
    .index-calendar .event-of-month .index-calendar .event-of-month .panel-event .index-calendar .event-of-month .panel-event .panel-heading {
      background-color: #bb6e00;
      color: #FFF; }

.month-calendar {
  margin: auto;
  border-color: #e88135;
  width: 100%; }
  .month-calendar .div-row {
    border-left: 1px solid #f2f2f2; }
    .month-calendar .div-row .div-col {
      float: left;
      display: inline-block;
      position: relative;
      width: 14.285714285714286%;
      height: 90px;
      font-size: 28px;
      color: #252525;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
      border-right: 1px solid #f2f2f2;
      padding: 5px 10px;
      text-align: left;
      cursor: pointer; }
      .month-calendar .div-row .div-col:hover {
        background-color: #bcdfbb; }
      @media (max-width: 479px) {
        .month-calendar .div-row .div-col {
          font-size: 15px; } }
      .month-calendar .div-row .div-col .t2t6 {
        position: relative;
        float: left; }
      .month-calendar .div-row .div-col .bad:before {
        background: #95149a; }
      .month-calendar .div-row .div-col .good:before {
        background: #c20000; }
      .month-calendar .div-row .div-col .t2t6::before {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        width: 5px;
        height: 5px;
        border-radius: 50%; }
      .month-calendar .div-row .div-col .t7 {
        color: #0f7d5c;
        font-weight: bold; }
      .month-calendar .div-row .div-col .cn {
        color: #d9001b;
        font-weight: bold; }
      .month-calendar .div-row .div-col .div-lunar-date {
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 18px;
        display: block;
        width: 100%;
        text-align: right;
        color: #7f7f7f; }
        @media (max-width: 479px) {
          .month-calendar .div-row .div-col .div-lunar-date {
            font-size: 11px; } }
      .month-calendar .div-row .div-col.choosen {
        background-color: #daf5d9;
        color: #7f7f7f; }
        .month-calendar .div-row .div-col.choosen .div-lunar-date {
          color: #7f7f7f; }
      .month-calendar .div-row .div-col.current-date {
        background-color: #FC624D; }
        .month-calendar .div-row .div-col.current-date div {
          color: #000 !important; }
        .month-calendar .div-row .div-col.current-date .div-lunar-date {
          color: #fff !important; }
        .month-calendar .div-row .div-col.current-date .event-holiday {
          color: #fff; }
      .month-calendar .div-row .div-col.day-of-week {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        padding-top: 16px;
        height: 50px;
        background: #fff;
        color: #66625e; }
        @media (max-width: 479px) {
          .month-calendar .div-row .div-col.day-of-week {
            font-size: 12px;
            padding-left: 0;
            padding-right: 0;
            padding-top: 15px; }
            .month-calendar .div-row .div-col.day-of-week:last-child {
              padding-left: 10px;
              padding-right: 10px;
              padding-top: 7px; } }
  .month-calendar .month-name {
    padding: 10px;
    text-align: center; }
  .month-calendar .head-div {
    padding: 10px;
    text-align: center;
    position: relative;
    background: #c20000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .month-calendar .head-div a {
      background: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      display: flex;
      align-items: center;
      justify-content: center; }
    .month-calendar .head-div .head-link {
      font-weight: bold;
      font-size: 30px;
      color: #fff;
      cursor: pointer; }
      .month-calendar .head-div .head-link i:before {
        color: #c20000; }
      .month-calendar .head-div .head-link:hover i:before {
        color: #08a66c; }
      .month-calendar .head-div .head-link.link-prev-year {
        left: 10px;
        top: 10px; }
      .month-calendar .head-div .head-link.link-prev-month {
        left: 50px;
        top: 10px; }
      .month-calendar .head-div .head-link.link-next-year {
        right: 10px;
        top: 10px; }
      .month-calendar .head-div .head-link.link-next-month {
        right: 50px;
        top: 10px; }
    .month-calendar .head-div .head-title {
      display: inline-block;
      padding: 9px 10px 2px;
      color: #fff;
      text-transform: uppercase;
      font-size: 17px;
      font-weight: bold;
      margin: 0px; }

.no-wrap {
  white-space: nowrap; }

.quote {
  display: inline-block;
  overflow: hidden; }
  .quote blockquote {
    background-color: #fff;
    border: solid 2px #757575;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 1em;
    position: relative; }
    .quote blockquote:before {
      background-color: #fff;
      bottom: -10%;
      content: "";
      left: 0;
      position: absolute;
      right: 0;
      top: -10%;
      transform: rotate(-15deg) skew(5deg); }
    .quote blockquote cite {
      display: block;
      font-style: italic;
      text-align: right; }
      .quote blockquote cite:before {
        content: "- "; }
    .quote blockquote > * {
      position: relative;
      z-index: 1; }

.animated-border-quote {
  max-width: 21em;
  overflow: hidden;
  margin: auto;
  margin-bottom: 10px; }
  .animated-border-quote blockquote {
    background-color: #fff;
    border: solid 1px #d9001b;
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    position: relative;
    font-size: 14px; }
    .animated-border-quote blockquote:before {
      animation: clockwise 10s infinite linear;
      background-color: #fff;
      bottom: 10%;
      content: "";
      left: 0;
      opacity: 0.7;
      position: absolute;
      right: 0;
      top: 10%; }
    .animated-border-quote blockquote:after {
      animation: counter 20s infinite linear;
      background-color: #fff;
      bottom: 10%;
      content: "";
      left: 0;
      opacity: 0.7;
      position: absolute;
      right: 0;
      top: 10%; }
    .animated-border-quote blockquote cite {
      display: block;
      font-style: italic;
      text-align: right; }
      .animated-border-quote blockquote cite:before {
        content: "- "; }
    .animated-border-quote blockquote > * {
      position: relative;
      z-index: 1; }

@keyframes clockwise {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes counter {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(-360deg); } }

/* Mixin */
/* Set các giá trị với màn hình tương ứng */
#ngay-tot .mo-ta {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px; }

#ngay-tot .box-good > tbody > tr > td {
  border-color: #66a063; }

#ngay-tot .box-bad > tbody > tr > td {
  border-color: #000; }

#ngay-tot .row-day-good-bad {
  background-color: #FFF; }
  @media (max-width: 479px) {
    #ngay-tot .row-day-good-bad td {
      width: 100%;
      float: left; }
      #ngay-tot .row-day-good-bad td:first-child {
        border-bottom: none; } }

#ngay-tot .table-bordered > tbody > tr > td.ngay-tot-date-info {
  min-width: 300px;
  text-align: center;
  padding: 0;
  min-height: 100px; }

#ngay-tot .table-ngay-tot-col-2 {
  width: 75%;
  text-align: left;
  padding: 10px 5px 0 10px;
  line-height: 24px; }

#ngay-tot .table-ngay-tot-col-2 p {
  margin: 0;
  padding: 0 0 5px 0;
  line-height: 16px; }

#ngay-tot .table-ngay-tot-col-2 p:last-child {
  padding: 0; }

#ngay-tot .ngay-tot-thu-thang {
  padding: 10px 5px; }

#ngay-tot .ngay-tot-thu-thang-thu {
  color: #464646; }

#ngay-tot .ngay-tot-thu-thang p {
  margin: 0;
  font-size: 34px;
  line-height: 30px;
  font-weight: bold; }

#ngay-tot .best-date-bg {
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold; }

#ngay-tot .day-good {
  background-color: #08a66c;
  color: #FFF; }

#ngay-tot .day-bad {
  background-color: #000;
  color: #FFF; }

.boxLich {
  border-bottom: 1px solid #CCC;
  margin-bottom: 15px; }

.boxLichduong_left {
  float: left;
  width: 50%;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 20px 18px 10px; }
  .boxLichduong_left .title_lichduong {
    background: #ff6161;
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    padding: 5px; }

.boxlunar_left {
  float: left;
  width: 100%;
  text-align: center;
  padding: 20px 18px 10px; }

.boxlunar_right {
  float: left;
  width: 100%;
  text-align: center;
  border-top: 1px solid #B9E0EF;
  padding: 20px 18px 10px; }

.ngay-tot-date-info .type_change_calendar {
  margin: 10px auto; }

.ngay-tot-date-info .solar_date {
  margin: 10px auto; }

.type_bad .type_change_calendar {
  background: #201f1f; }

.type_change_calendar {
  background: #08a66c;
  color: #fff;
  font-size: 10pt;
  transform: translateY(-50%);
  right: 30px;
  border-radius: 3px;
  padding: 0 10px;
  cursor: pointer;
  height: 25px;
  line-height: 25px;
  width: 200px;
  margin: 0 auto;
  margin-top: 20px;
  font-weight: 700;
  z-index: 1; }

.ngay_am {
  color: #222;
  font-size: 30px;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

.ngay_duong {
  color: #222;
  font-size: 30px;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

.link-filter {
  padding: 5px 12px 6px; }
  .link-filter.active {
    outline: 2px solid #08a66c;
    background: #fff;
    color: #fff !important;
    font-weight: bold; }

.link-filter.all {
  outline: 2px solid #08a66c;
  color: #08a66c  !important;
  background: #fff; }

.link-filter.bad {
  background: #000;
  outline: 2px solid #000; }

.link-filter.good {
  background: #08a66c;
  outline: 2px solid #08a66c; }

.nav-link-tu-vi {
  padding: 20px; }

/* detail date */
@media (max-width: 479px) {
  #chi-tiet-ngay-main .flex {
    flex-direction: column; }
  #chi-tiet-ngay-main .text-right {
    text-align: center; }
  #chi-tiet-ngay-main .none_line_border_left {
    border-left: 1px solid #e0e0e0  !important; } }

@media (max-width: 768px) {
  .month-calendar .div-row .div-col {
    height: 60px; }
  #calendar-index .head-div {
    display: inline-block;
    width: 100%; }
    #calendar-index .head-div div {
      justify-content: space-between;
      margin: 5px 0; }
  #calendar-index .event-holiday {
    display: none; } }

.rows-hhd {
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold; }

.notebadgood {
  position: relative;
  float: left;
  padding-left: 10px;
  margin-right: 50px;
  font-style: italic; }

.notebadgood:before {
  content: "";
  top: 10px;
  left: 0px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute; }

.notebadgood.bad:before {
  background: #95149a; }

.notebadgood.good:before {
  background: #c20000; }

/*# sourceMappingURL=common-calendar-am-duong-lich.css.map */