/* RESET CSS */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
i,
dl,
dt,
dd,
ol,
ukeyli,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    font-weight: 400;
}

b {
    font-weight: 600;
}

body {
    font-size: 15px;
    background-image: linear-gradient(to right, #ff863f, #f75636);
}

button {
    outline: 0;
}

input {
    outline: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    fontyweight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

a {
    text-decoration: none !important;
}

a:focus {
    text-decoration: none !important;
}

body {
    background: #fff;
    font-family: 'Roboto', sans-serif;
    overflow-y: scroll;
    position: relative !important;
    font-size: 17px;
    background-image: linear-gradient(to right, #fb6b26, #f32b0a);
}

#onTop {
    position: fixed;
    right: 20px;
    bottom: 85px;
    width: 45px;
    height: 45px;
}

#onTop img {
    width: 100%;
    height: 100%;
}

.danger {
    color: #d00101 !important;
    font-weight: 500;
}

.black {
    color: black !important;
    font-weight: 500;
}

.grey {
    color: #717171 !important;
    font-weight: 500;
}

.green {
    color: #459c03 !important;
    font-weight: 500;
}

.orange {
    color: #f7951f !important;
    font-weight: 500;
}

.blue {
    color: #0071e6 !important;
    font-weight: 500;
}

.txt_yellow {
    color: #e49114 !important;
}

.body-account {
    background: #eeeeee !important;
}

.border-none {
    border: none !important;
}

.text_cat {
    color: #0e8400 !important;
}

.text_hung {
    color: #6f0a00 !important;
}

/* CUSTOM FANCY */
.fancybox-slide--iframe .fancybox-content {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.fancybox-slide--iframe {
    padding: 0 !important;
}

.fancybox-button--close {
    display: none !important;
}

/*--------------*/
.calender_wrap {
    padding-bottom: 65px;
}

.default_wrap {
    padding-bottom: 65px;
}

.block {
    float: left;
    width: 100%;
}

.bg_xam {
    background-color: #9a9697;
}

.bg_tochy {
    background-color: #4ac573;
}

.bg_daian {
    background-color: #ff543c;
}

.bg_tieucat {
    background-color: #ffa100;
}

.fl_left {
    float: left;
}

.fl_right {
    float: right;
}

.margin-right-0 {
    margin-right: 0px !important;
}

.header_wrap {
    background-image: linear-gradient(to bottom, #da4322, #e84423);
    position: fixed;
    width: 100%;
    z-index: 999;
}

.header_top {
    height: 55px;
    position: relative;
}

.header_top .cl-today img {
    opacity: 1 !important;
}

.act_nav {
    float: left;
    margin: 2px 0px;
}

.act_nav a {
    font-size: 29px;
    color: #fff;
    float: left;
    margin: 9px 12px;
}

.logo {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 205px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.logo img {
    width: 38px;
    float: left;
    margin: 8px 10px 8px 0px;
}

.logo h1 {
    font-size: 25px;
    margin: 13px 0px 14px 0px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

.act_cur_day {
    float: right;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 2px 0px;
}

.act_cur_day img {
    width: 28px;
    height: 28px;
    margin-top: 10px;
    opacity: 0.3;
    float: right;
    margin-right: 10px;
}

.date_pick {
    height: 45px;
    position: relative;
}

.date_quick_month {
    width: 45px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.date_quick_month span {
    font-size: 30px;
    color: #fff;
}

.date_quick_month a {
    font-size: 30px;
    color: #fff;
}

.date_pick_main {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 320px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.date_pick_day {
    width: 155px;
    height: 35px;
    float: left;
    line-height: 35px;
    background: #ef5234;
    padding: 0px 7px;
    text-align: center;
    border-radius: 2px;
    display: block;
}

.date_pick_day span {
    color: #fff;
}

.date_pick_day i {
    float: right;
    margin-top: 5px;
    color: #fff;
}

.date_pick_time {
    width: 155px;
    height: 35px;
    float: right;
    line-height: 35px;
    background: #ef5234;
    padding: 0px 7px;
    text-align: center;
    color: white;
    border: 0px;
    border-radius: 2px;
}

.date_pick_time span {
    color: #fff;
}

.date_pick_time i {
    float: right;
    margin-top: 5px;
    color: #fff;
}

.calender {
    margin-top: 100px;
}

.days_week {
    height: 40px;
    background: #efefef;
    position: fixed;
    z-index: 999;
}

.days_week ul {
    padding: 0;
    margin: 0;
}

.days_week ul li {
    float: left;
    list-style: none;
    width: 14.2%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.days_week ul li span {}

.days_week ul li span.sunday {
    color: #e40000;
}

.days_listing {
    background: #fff;
    margin-top: 40px;
    z-index: 999;
}

.days_listing ul {
    padding: 0;
    margin: 5px 0px 5px 0px;
}

.days_listing ul li {
    float: left;
    list-style: none;
    width: 100%;
    margin: 0.25% 0% 0.25% 0%;
}

.item_days {
    float: left;
    list-style: none;
    width: 13.7%;
    text-align: center;
    margin-right: 0.25%;
    margin-left: 0.25%;
    padding-top: 4px;
}

.spinyear {}

.spinyear .lunar_num {
    color: #e40000 !important;
}

.tet {
    background: #fff url(/themes/mobile/v1.0/images/ic_tet.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: 38px !important;
    background-position: right -5px !important;
}

.solar_first {
    background: #fff url(/themes/mobile/v1.0/images/ic_firework.gif) !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: 0px 0px;
}

.solar_first .solar_num {
    color: #e40000 !important;
}

.today {
    background: #ffa05c !important;
    border-radius: 5px;
    border: solid 1px #ce5600;
}

.today .solar_num {
    color: #fff !important;
}

.today .lunar_num {
    color: #fff !important;
}

.today .lunar_name {
    color: #fff !important;
}

.days_listing .selected {
    background: #e64323 !important;
    border-radius: 5px;
    border: solid 1px #e64322;
}

.days_listing .selected a span b.danger {
    color: #ffeb85 !important;
}

.days_listing .selected .solar_num {
    color: #fff !important;
}

.days_listing .selected .lunar_num {
    color: #fff !important;
}

.days_listing .selected .lunar_name {
    color: #fff !important;
}

.days_listing .current {
    background: #e64323;
    border-radius: 5px;
}

.days_listing .current .solar_num {
    color: #fff !important;
}

.days_listing .current .lunar_num {
    color: #fff !important;
}

.days_listing .current .lunar_name {
    color: #fff !important;
}

.offday {
    background: #fff;
}

.offday .solar_num {
    color: #e2e2e2 !important;
}

.offday .lunar_num {
    color: #e2e2e2 !important;
}

.offday .lunar_name {
    color: #e2e2e2 !important;
}

.sunday .solar_num {
    color: #e40000 !important;
}

.days_listing .item_days .top {
    float: left;
    height: 25px;
    position: relative;
    width: 100%;
    padding: 4px 0px 0px 2px;
}

.days_listing .item_days .top img {
    position: absolute;
    width: 13px;
    right: 4px;
    top: -2px;
}

.days_listing .item_days a {
    float: left;
    width: 100%;
    display: block;
}

.days_listing .item_days .solar_num {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    float: left;
    height: 25px;
    left: 0;
    bottom: 0;
    line-height: 25px;
    color: black;
}

.days_listing .item_days .first {
    color: #e40000;
}

.days_listing .item_days .lunar_num {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    color: #2a9e16;
    position: absolute;
    right: 5px;
    top: 10px;
}

.days_listing .item_days .lunar_name {
    font-size: 10px;
    display: block;
    text-align: center;
    text-transform: capitalize;
    color: #f7900e;
    padding: 2px 0px 3px 0px;
}

.content_main_wrap {
    padding: 10px;
}

.content_block {}

.hiepky_top {
    background: #fff;
    border-radius: 8px;
}

.hiepky_top_left {
    float: left;
    width: 45%;
    height: 130px;
    padding-top: 10px;
    overflow: hidden;
    border-right: solid 1px #ef5134;
    position: relative;
}

.hiepky_top_left .solar_month_year {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600;
    color: #8a8888;
}

.hiepky_top_left .solar_day {
    text-align: center;
    font-size: 53px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #ef5134;
    height: 60px;
    line-height: 60px;
}

.hiepky_top_left .lunar_day {
    height: 40px;
    padding: 0px 0px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hiepky_top_left .lunar_day .lunar_day_date {
    height: 35px;
    display: inline-block;
    margin: 0;
    float: none;
    text-align: left;
    line-height: 37px;
    font-size: 30px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #888787;
    margin-left: 0px;
    padding-right: 0px;
}

.hiepky_top_left .lunar_day span {
    float: none;
    font-size: 13px;
    margin-top: 4px;
    color: #656564;
    line-height: 15px;
    display: inline-block;
    text-align: left;
}

.hiepky_top_right {
    float: left;
    width: 55%;
    height: 130px;
    overflow: hidden;
}

.hiepky_top_right ul {
    list-style: none;
    padding: 0;
    height: 120px;
    margin: 0;
    width: 100%;
}

.hiepky_top_right ul li {
    width: 25%;
    float: left;
    height: 130px;
    text-align: center;
    padding-top: 10px;
    border-right: solid 1px #ef5134;
}

.hiepky_top_right ul li:last-child {
    border-right: none;
}

.hiepky_top_right ul li .lunar_tit_name {
    text-align: center;
    color: #2f2f2f;
    font-weight: 500;
    font-size: 16px;
}

.hiepky_top_right ul li .lunar_tit_cont {
    font-weight: 500;
    margin: 15px 0px;
}

.hiepky_top_right ul li .lunar_tit_cont span {
    font-weight: 500;
    display: block;
    font-size: 16px;
}

.hiepky_nguhanh {
    background: #fff;
    border-radius: 8px;
    margin-top: 10px;
}

.hiepky_nguhanh .title {}

.hiepky_nguhanh .title h2 {
    margin: 0;
    height: 60px;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    line-height: 60px;
    border-bottom: solid 1px #ececec;
    color: #da4323;
}

.hiepky_nguhanh .content {
    background: #f9f9f9;
    border-radius: 0px 0px 8px 8px;
}

.hiepky_nguhanh .content ul {
    padding: 0px 10px;
    list-style: none;
    margin: 10px 0px;
}

.hiepky_nguhanh .content ul li {
    margin-bottom: 10px;
}

.hiepky_nguhanh .content ul li .name {
    float: left;
    width: 30%;
    text-align: right;
}

.hiepky_nguhanh .content ul li .name h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 2px 10px 0px 0px;
    line-height: 22px;
}

.hiepky_nguhanh .content ul li p {
    float: right;
    width: 70%;
    margin: 0;
}

.hiepky_nguhanh .content ul li b {
    font-weight: 600;
    color: #404040;
}

.hiepky_gioxuathanh {
    background: #fff;
    border-radius: 8px;
    margin-top: 10px;
}

.hiepky_gioxuathanh .title {}

.hiepky_gioxuathanh .title h2 {
    margin: 0;
    height: 60px;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    line-height: 60px;
    border-bottom: solid 1px #ececec;
    color: #da4323;
}

.hiepky_gioxuathanh .content {
    background: #ffefea;
    border-radius: 0px 0px 8px 8px;
}

.hiepky_gioxuathanh .content ul {
    padding: 0px 10px;
    list-style: none;
    margin: 10px 0px;
}

.hiepky_gioxuathanh .content ul li {
    margin-bottom: 2%;
    float: left;
    width: 32%;
    margin-right: 2%;
    border-radius: 10px 10px 0px 0px;
    border: none;
}

.hiepky_gioxuathanh .content ul li .name {
    float: left;
    width: 100%;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
}

.hiepky_gioxuathanh .content ul li .name h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    height: 34px;
    line-height: 35px;
    color: #fff;
}

.hiepky_gioxuathanh .content ul li .dtls {
    background: #fff;
    padding: 5px;
}

.hiepky_gioxuathanh .content ul li .dtls .dtls_date {
    font-size: 14px;
    padding: 0px 0px;
    line-height: 22px;
    text-align: center;
}

.hiepky_gioxuathanh .content ul li .dtls .result {
    font-size: 13px;
    background: #f5f5f5;
    text-align: center;
    margin: 5px 0px 0px 0px;
    padding: 3px 0px;
}

.hiepky_others {
    background: #fff;
    border-radius: 8px;
    margin-top: 10px;
}

.hiepky_others .title {
    border-bottom: solid 1px #ececec;
}

.hiepky_others .title h2 {
    margin: 0;
    height: 60px;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    line-height: 60px;
    color: #e89832;
}

.hiepky_others .title h2 span {
    text-transform: initial;
}

.hiepky_others .content {
    border-radius: 0px 0px 8px 8px;
    text-align: justify;
}

.hiepky_others .content_related {
    padding: 10px;
    float: left;
    width: 100%;
}

.hiepky_others .ky b {
    font-weight: 600;
}

.hiepky_others .hungthan b {
    font-weight: 600;
}

.hiepky_others .nghi b {
    font-weight: 600;
}

.hiepky_others .catthan {
    color: #007527;
}

.hiepky_others .hungthan {
    color: #ad5c18;
}

.hiepky_others_times .title h2 {
    height: 35px;
    line-height: 35px;
    margin-top: 10px;
}

.hiepky_others_times .title span {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.hiepky_others_times .title span font[color=green] {
    color: #509800;
}

.hiepky_others_times .title span font[color=brown] {
    color: rgb(165, 42, 42);
}

.hiepky_others_times .title h3 span {
    display: inline-block !important;
    margin-bottom: 0;
}

.hiepky_others_times .title h3 span {}

.hiepky_others_times .title h3 span i {
    color: #424242;
    margin-right: 3px;
    font-size: 17px;
}

.hiepky_others_times .title h3 span .fa-star {
    color: #f9a72c;
    font-size: 17px;
}

.hiepky_others .time {
    color: #a26c3e;
}

.hiepky_others .time ul {
    padding: 0;
    list-style: none;
}

.hiepky_others .time ul li {}

.hiepky_others .time ul li .title {
    border-bottom: 0;
    margin-bottom: 20px;
    margin-top: 10px;
}

.hiepky_others .time ul li .title h3 {
    margin: 0;
    font-size: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1d1d1d;
    border-left: solid 5px #e6e6e6;
    padding-left: 10px;
    line-height: 27px;
    text-transform: uppercase;
    background: whitesmoke;
    padding-top: 10px;
    padding-bottom: 10px;
}

.hiepky_others .time .content {}

.hiepky_others .time .content ul {}

.hiepky_others .time .content ul li {
    border-bottom: dashed 1px #cecece;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.hiepky_others .time .content ul li:last-child {
    border-bottom: none;
}

.hiepky_others .time .content ul li p font {
    color: black;
}

.hiepky_others .time .content ul li p font[color=green] {
    color: #509800;
}

.hiepky_others .time .content ul li p font[color=green] a {
    color: #509800;
}

.hiepky_others .time .content ul li p font[color=green] a.lnk3 {
    font-weight: 600;
}

.hiepky_others .time .content ul li p font[color=green] i {
    color: #509800;
}

.hiepky_others .time .content ul li p font[color=brown] {
    color: rgb(165, 42, 42);
}

.hiepky_others .time .content ul li p font[color=brown] a {
    color: rgb(165, 42, 42);
}

.hiepky_others .time .content ul li p a {}

.hiepky_others .time .content ul li p i {
    font-style: inherit;
}

.hiepky_others .time .content ul li span {
    float: left;
    margin-right: 5px;
    width: 42px;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
}

.hiepky_others .time .content ul li .time_tinh {
    background-color: #c30000;
}

.hiepky_others .time .content ul li .time_nghi {
    background-color: #509800;
}

.hiepky_others .time .content ul li .time_ky {
    background-color: #8c6101;
}

.slide {
    margin: 10px 0px 0px 0px;
    background: #fff;
    border-radius: 8px;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/*NAVIGATION CALENDAR*/
.nav_calendar {
    height: 65px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fafafa;
    border-top: solid 1px #e2e2e2;
}

.nav_calendar ul {
    padding: 0px 10px;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.nav_calendar ul li {
    font-size: 15px;
    text-align: center;
    height: 65px;
    background-size: 53px;
    background-repeat: no-repeat;
    background-position: center 3px;
}

.nav_calendar ul li.hiepky {
    background-image: url('/themes/mobile/v1.0/images/ic_hiep_ky.png');
}

.nav_calendar ul li.hiepky_active {
    background-image: url('/themes/mobile/v1.0/images/ic_hiep_ky_active.png');
}

.nav_calendar ul li.phitinh {
    background-image: url('/themes/mobile/v1.0/images/ic_phitinh.png');
}

.nav_calendar ul li.phitinh_active {
    background-image: url('/themes/mobile/v1.0/images/ic_phitinh_active.png');
}

.nav_calendar ul li.nhithapbattu {
    background-image: url('/themes/mobile/v1.0/images/ic_nhithapbattu.png');
}

.nav_calendar ul li.nhithapbattu_active {
    background-image: url('/themes/mobile/v1.0/images/ic_nhithapbattu_active.png');
}

.nav_calendar ul li.vanhan {
    background-image: url('/themes/mobile/v1.0/images/ic_vanhan.png');
}

.nav_calendar ul li.vanhan_active {
    background-image: url('/themes/mobile/v1.0/images/ic_vanhan_active.png');
}

.nav_calendar ul li.xaynha {
    background-image: url('/themes/mobile/v1.0/images/ic_xaynha.png');
}

.nav_calendar ul li.xaynha_active {
    background-image: url('/themes/mobile/v1.0/images/ic_xaynha_active.png');
}

.nav_calendar ul li a {
    display: block;
    height: 65px;
    float: left;
    width: 100%;
}

.nav_calendar ul li.active span {
    color: #ef2a1f;
}

.nav_calendar ul li a span {
    margin-top: 38px;
    display: block;
    color: #525252;
    font-size: 14px;
}

.default_wrap {}

.default_wrap .header {
    height: 55px;
    position: relative;
}

.default_wrap .header .title {
    height: 55px;
}

.default_wrap .header .title h1 {
    font-size: 25px;
    margin: 13px 0px 14px 0px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-align: center;
}

.default_wrap .content {}

.default_wrap .content .xaynha {
    padding: 10px;
}

.default_wrap .content .xaynha .des {}

.default_wrap .content .xaynha .des p {
    color: #ffffff;
    font-size: 14px;
    line-height: 19px;
}

.default_wrap .content .xaynha .main {
    text-align: center;
    margin: 20px 0px;
}

.default_wrap .content .xaynha .main .eight_direction {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
}

.default_wrap .content .xaynha .main .eight_direction img {
    width: 100%;
    height: 100%;
}

.default_wrap .content .xaynha .main .eight_direction a {
    position: absolute;
    display: block;
}

.default_wrap .content .xaynha .main .eight_direction .trungcung {
    width: 90px;
    height: 90px;
    top: 105px;
    left: 105px;
}

.default_wrap .content .xaynha .main .eight_direction .nam {
    width: 64px;
    height: 69px;
    top: 5px;
    left: 119px;
}

.default_wrap .content .xaynha .main .eight_direction .taynam {
    width: 64px;
    height: 65px;
    top: 40px;
    right: 42px;
}

.default_wrap .content .xaynha .main .eight_direction .tay {
    width: 64px;
    height: 65px;
    top: 117px;
    right: 5px;
}

.default_wrap .content .xaynha .main .eight_direction .taybac {
    width: 64px;
    height: 65px;
    bottom: 40px;
    right: 42px;
}

.default_wrap .content .xaynha .main .eight_direction .bac {
    width: 64px;
    height: 69px;
    bottom: 5px;
    left: 119px;
}

.default_wrap .content .xaynha .main .eight_direction .dongbac {
    width: 64px;
    height: 65px;
    bottom: 40px;
    left: 42px;
}

.default_wrap .content .xaynha .main .eight_direction .dong {
    width: 64px;
    height: 65px;
    top: 117px;
    left: 5px;
}

.default_wrap .content .xaynha .main .eight_direction .dongnam {
    width: 64px;
    height: 65px;
    top: 40px;
    left: 42px;
}

/* DETAIL DIRECTION */
.direction .direction_wrap .header .eight_direction {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.direction .direction_wrap .header .eight_direction img {
    width: 100%;
    height: 100%;
}

.direction .direction_wrap .header .eight_direction a {
    position: absolute;
    display: block;
}

.direction .direction_wrap .header .eight_direction .trungcung {
    width: 60px;
    height: 58px;
    top: 71px;
    left: 69px;
}

.direction .direction_wrap .header .eight_direction .nam {
    width: 43px;
    height: 43px;
    top: 2px;
    left: 79px;
}

.direction .direction_wrap .header .eight_direction .taynam {
    width: 40px;
    height: 42px;
    top: 29px;
    right: 30px;
}

.direction .direction_wrap .header .eight_direction .tay {
    width: 40px;
    height: 42px;
    top: 79px;
    right: 5px;
}

.direction .direction_wrap .header .eight_direction .taybac {
    width: 40px;
    height: 40px;
    bottom: 32px;
    right: 31px;
}

.direction .direction_wrap .header .eight_direction .bac {
    width: 43px;
    height: 43px;
    bottom: 2px;
    left: 79px;
}

.direction .direction_wrap .header .eight_direction .dongbac {
    width: 40px;
    height: 42px;
    bottom: 29px;
    left: 30px;
}

.direction .direction_wrap .header .eight_direction .dong {
    width: 40px;
    height: 42px;
    top: 79px;
    left: 5px;
}

.direction .direction_wrap .header .eight_direction .dongnam {
    width: 40px;
    height: 40px;
    top: 32px;
    left: 31px;
}

.default_wrap .content .xaynha .info {
    text-align: center;
    height: 35px;
    margin-top: 14px;
}

.default_wrap .content .xaynha .info span {
    padding: 10px 15px;
    background: #fff;
    border-radius: 6px;
    color: #535353;
    font-size: 14px;
    cursor: pointer;
}

.default_wrap .content .xaynha .info span i {
    color: #e75a0c;
}

.direction {
    padding: 0 !important;
}

.direction_popup {
    position: relative;
}

.direction_popup .close {
    width: 35px;
    height: 35px;
    position: absolute;
    background: #ffffff;
    text-align: center;
    line-height: 35px;
    color: #e63c18;
    text-shadow: inherit;
    font-weight: 300;
    opacity: 0.8;
    font-size: 21px;
    border-radius: 50px;
    left: 10px;
    top: 10px;
}

.direction .direction_wrap {}

.direction .direction_wrap .header {
    background-image: linear-gradient(to right, #e85d0b, #e63b19);
    height: 240px;
    padding: 20px;
    text-align: center;
}

.direction .direction_wrap .header img {
    height: 200px;
}

.direction .direction_wrap .content {
    background: #f3f3f3;
}

.direction .direction_wrap .content .content_wrap {
    padding: 20px 10px;
}

.direction .fancybox-close-small {
    color: #fff !important;
}

.direction .direction_info {}

.direction .direction_info .header {
    background-image: linear-gradient(to right, #e85d0b, #e63b19);
    padding: 20px;
    text-align: center;
}

.direction .direction_info .header h1 {
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    color: #f7f7f7;
    margin-bottom: 20px;
}

.direction .direction_info .content {}

.direction .direction_info .content .content_wrap {
    padding: 20px 10px;
}

.direction .direction_info .content .content_wrap p {
    margin-bottom: 20px;
}

.direction .direction_info .content .content_wrap p b {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.direction .fancybox-close-small {
    color: #fff !important;
}

/*VAN HAN*/

.default_wrap .content .vanhan {
    padding: 0px 10px 10px 10px;
}

.default_wrap .content .vanhan .des {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}

.default_wrap .content .vanhan .des h2 {
    color: #e64016;
    font-size: 20px;
    text-align: center;
    margin: 5px 0px 10px 0px;
    line-height: 26px;
}

.default_wrap .content .vanhan .des p {
    color: #423f3f;
    font-size: 14px;
    line-height: 19px;
}

.default_wrap .content .vanhan .main .congiap {
    padding: 0;
    float: left;
    width: 100%;
    margin-top: 20px;
}

/* BLOCK CON GIAP */
.congiap ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.congiap ul li {
    float: left;
    width: 15%;
    position: relative;
    background: #ff6246;
    border-radius: 50%;
    margin-right: 2%;
    margin-bottom: 2%;
    background-size: 100%;
    background-repeat: no-repeat;
}

.congiap ul li:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.congiap ul li a {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    height: 100%;
}

.congiap ul li.code_1 {
    background-image: url('/themes/mobile/v1.0/images/ic_ty.png');
}

.congiap ul li.code_2 {
    background-image: url('/themes/mobile/v1.0/images/ic_suu.png');
}

.congiap ul li.code_3 {
    background-image: url('/themes/mobile/v1.0/images/ic_dan.png');
}

.congiap ul li.code_4 {
    background-image: url('/themes/mobile/v1.0/images/ic_mao.png');
}

.congiap ul li.code_5 {
    background-image: url('/themes/mobile/v1.0/images/ic_thin.png');
}

.congiap ul li.code_6 {
    background-image: url('/themes/mobile/v1.0/images/ic_ti.png');
}

.congiap ul li.code_7 {
    background-image: url('/themes/mobile/v1.0/images/ic_ngo.png');
}

.congiap ul li.code_8 {
    background-image: url('/themes/mobile/v1.0/images/ic_mui.png');
}

.congiap ul li.code_9 {
    background-image: url('/themes/mobile/v1.0/images/ic_than.png');
}

.congiap ul li.code_10 {
    background-image: url('/themes/mobile/v1.0/images/ic_dau.png');
}

.congiap ul li.code_11 {
    background-image: url('/themes/mobile/v1.0/images/ic_tuat.png');
}

.congiap ul li.code_12 {
    background-image: url('/themes/mobile/v1.0/images/ic_hoi.png');
}

.congiap ul li.code_1_active {
    background-image: url('/themes/mobile/v1.0/images/ic_ty_act.png');
}

.congiap ul li.code_2_active {
    background-image: url('/themes/mobile/v1.0/images/ic_suu_act.png');
}

.congiap ul li.code_3_active {
    background-image: url('/themes/mobile/v1.0/images/ic_dan_act.png');
}

.congiap ul li.code_4_active {
    background-image: url('/themes/mobile/v1.0/images/ic_mao_act.png');
}

.congiap ul li.code_5_active {
    background-image: url('/themes/mobile/v1.0/images/ic_thin_act.png');
}

.congiap ul li.code_6_active {
    background-image: url('/themes/mobile/v1.0/images/ic_ti_act.png');
}

.congiap ul li.code_7_active {
    background-image: url('/themes/mobile/v1.0/images/ic_ngo_act.png');
}

.congiap ul li.code_8_active {
    background-image: url('/themes/mobile/v1.0/images/ic_mui_act.png');
}

.congiap ul li.code_9_active {
    background-image: url('/themes/mobile/v1.0/images/ic_than_act.png');
}

.congiap ul li.code_10_active {
    background-image: url('/themes/mobile/v1.0/images/ic_dau_act.png');
}

.congiap ul li.code_11_active {
    background-image: url('/themes/mobile/v1.0/images/ic_tuat_act.png');
}

.congiap ul li.code_12_active {
    background-image: url('/themes/mobile/v1.0/images/ic_hoi_act.png');
}

/*VAN HAN*/
.congiap {
    padding: 0 !important;
}

.congiap_popup {
    position: relative;
}

.congiap_popup .close {
    width: 35px;
    height: 35px;
    position: absolute;
    background: #ffffff;
    text-align: center;
    line-height: 35px;
    color: #e63c18;
    text-shadow: inherit;
    font-weight: 300;
    opacity: 0.8;
    font-size: 21px;
    border-radius: 50px;
    left: 10px;
    top: 10px;
}

.congiap_popup .congiap_wrap {}

.congiap_popup .congiap_wrap .congiap ul {
    float: left;
    width: 100%;
    padding: 0px 10px 10px 10px;
}

.congiap_popup .congiap_wrap .congiap ul li {
    height: auto !important;
}

.congiap_popup .congiap_wrap .header .title {}

.congiap_popup .congiap_wrap .header .title h1 {
    font-size: 25px;
    margin: 13px 0px 14px 0px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: capitalize;
    text-align: center;
    line-height: 32px;
}

.congiap_popup .content_wrap {}

.congiap_popup .content_wrap .tuoi_img {
    background: #fff;
    text-align: center;
    padding: 20px 0px 20px 0px;
    border: none;
}

.congiap_popup .content_wrap .tuoi_img img {
    width: 110px;
}

.congiap_popup .content_wrap .tuoi_danhsach {
    text-align: center;
    padding: 10px 0px;
    background: #fff;
    margin: 0;
    color: #3a3939;
    font-size: 14px;
}

.congiap_popup .content_wrap .luu_nien_van_the {
    background: #fff;
}

.congiap_popup .content_wrap .luu_nien_van_the img {}

.congiap_popup .content_wrap .luu_nien_van_the .content_dtls {
    padding: 10px;
}

.congiap_popup .content_wrap .block_congiap_title {
    height: 120px;
    float: left;
    width: 100%;
}

.congiap_popup .content_wrap .bg_text_red {
    background-image: url(/themes/mobile/v1.0/images/ic_vanhan_detail_body_title_red.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}

.congiap_popup .content_wrap .bg_text_white {
    background-image: url('/themes/mobile/v1.0/images/ic_vanhan_detail_body_title_white.png');
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}

.congiap_popup .content_wrap .block_congiap_title h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 49px;
    font-family: 'Roboto Condensed', sans-serif;
}

.congiap_popup .content_wrap .block_congiap_title h2.text_red {
    color: #f75735;
}

.congiap_popup .content_wrap .block_congiap_title h2.text_white {
    color: #fff;
}

.congiap_popup .content_wrap .rslt_dtls {}

.congiap_popup .content_wrap .rslt_dtls .content {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul {
    margin: 10px;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    height: auto;
    margin: 0;
    margin-bottom: 10px;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li:after {
    padding: 0px !important;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li h3 {
    font-size: 17px;
    text-align: center;
    margin: 5px 5px 15px 5px;
    font-weight: 500;
    border-bottom: solid 1px #efefef;
    padding-bottom: 15px;
    line-height: 22px;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li .vote {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li .menh {
    color: #777777;
    font-size: 15px;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li i {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li i.active {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li h3 .cont {}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li .vote .fa-star {
    color: #ffb100;
}

.congiap_popup .content_wrap .rslt_dtls .content .content_dtls ul li .vote .fa-star-o {
    color: #525252;
}

/* ACCOUNT */
.account_nav_popup {
    position: relative;
    background-image: linear-gradient(to bottom, #da4322, #e84423);
}

.account_nav_popup .close {
    width: 35px;
    height: 35px;
    position: absolute;
    background: #ffffff;
    text-align: center;
    line-height: 35px;
    color: #e63c18;
    text-shadow: inherit;
    font-weight: 300;
    opacity: 0.8;
    font-size: 21px;
    border-radius: 50%;
    left: 10px;
    top: 10px;
}

.account_direct .title {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    text-align: center;
    height: 55px;
    line-height: 55px;
    color: #ffeeea;
    font-weight: 500;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
}

.account_nav_popup .add {
    height: 35px;
    position: absolute;
    background: #ffffff;
    text-align: center;
    line-height: 35px;
    color: #e63c18;
    text-shadow: inherit;
    font-weight: 400;
    opacity: 0.8;
    border-radius: 15px;
    right: 10px;
    top: 10px;
    padding: 0px 10px;
}

.account_direct {
    position: relative;
    height: 55px;
}

.account_direct .txt_menu {
    position: absolute;
    color: #fff;
    font-weight: 400;
    left: 53px;
    top: 15px;
}

.account_wrap {
    padding: 10px;
}

.account_info {
    height: 70px;
    background: #fff;
    border-radius: 8px;
    position: relative;
}

.account_info_avatar {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
    background: #eeeeee;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
}

.account_info_avatar span {}

.account_info_avatar span i {
    color: #c3c3c3;
}

.account_info h1 {
    font-size: 17px;
    font-weight: 500;
    left: 70px;
    position: absolute;
    top: 15px;
    margin: 0;
    color: #333333;
}

.account_info span {
    font-size: 15px;
    font-weight: 400;
    left: 70px;
    position: absolute;
    top: 35px;
    color: #9c9c9c;
}

.account_info .premium {
    color: #f7330b !important;
}

.account_info b {
    font-size: 15px;
    font-weight: 400;
    color: #3d7ea5;
}

.account_sidebar {
    margin-top: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}

.account_sidebar ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.account_sidebar ul li {
    border-bottom: solid 1px #f3f0f0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.account_sidebar ul li .order_new {
    font-size: 14px;
    margin-top: 2px;
    color: #0071e6;
}

.account_sidebar ul li:last-child {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.account_sidebar ul li a {
    display: block;
}

.account_sidebar ul li span {
    color: #383838;
    font-size: 15px;
}

/* AUTH LOGIN */
.register_content .verifyPhoneNote {
    color: #383838;
    margin-top: 15px;
}

.register_content {
    text-align: center;
    padding-top: 15px;
}

.register_content_logo {}

.register_content_logo img {
    width: 100px;
    border-radius: 10px;
}

.register_content_title {
    font-size: 25px;
    margin: 25px 0px;
    font-weight: 300;
    color: #ffcf87;
}

.register_content_social {
    margin: 10px 0px;
}

.register_cont_gg {
    float: right;
    background: #5b78f3;
}

.register_content_social_btn {
    height: 50px;
    border-radius: 4px;
    background-color: #486bb5;
    line-height: 50px;
    text-align: center;
    color: #fff;
    float: left;
}

.register_content_social_btn>a {
    color: #fff;
    display: block;
    font-size: 16px;
}

.register_content_or {
    font-size: 14px;
    color: #4c4c4c;
    text-align: center;
}

.register_content_frm {
    margin-top: 20px;
}

.register_content_frm input {
    height: 50px;
    border-radius: 8px;
    background-color: #ffffff;
    border: none;
    padding: 0px 10px;
    width: 100%;
    margin-bottom: 10px;
    float: left;
    font-size: 14px;
}

.register_sbm {
    margin: 10px 0px;
}

.register_sbm button {
    height: 48px;
    border-radius: 5px;
    font-family: 'Roboto Condensed', sans-serif;
    width: 100%;
    font-weight: 400;
    color: #fff;
    border: none;
    background: #dc4423;
    text-transform: uppercase;
}

.register_or_login {
    width: 100%;
    padding-top: 15px;
    margin-bottom: 0;
    line-height: normal;
    float: left;
    text-align: center;
}

.register_or_login a {
    font-size: 17px;
    color: #2682ec;
    font-weight: 400;
}

.alert_err_form .text-danger {
    color: #a94442;
    font-size: 14px;
    text-align: left;
    margin-bottom: 0px;
}

.register_content .text-danger {
    color: #bf4745;
    font-size: 11px;
    padding-left: 10px;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.register_content .error_system {
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

/*PICK DATE TIME*/

#pick_time {
    position: relative;
    background: #fff2ef;
    padding: 0;
    border-radius: 8px;
    display: none;
    width: 95%;
    position: relative;
    overflow: hidden;
}

#pick_time form {
    background: #fff2f0;
    padding: 13px;
    margin-bottom: 0;
}

.pick_time_date {}

.pick_time_date select {
    margin-bottom: 10px;
    border: solid 1px #ffded6;
    box-shadow: none !important;
    height: 40px;
    line-height: 30px;
    font-size: 14px;
    padding: 0px 4px;
    background: #fdece8;
    -webkit-appearance: none;
}

.pick_time_hour select {
    margin-bottom: 10px;
    border: solid 1px #e6e3e3;
    box-shadow: none !important;
    height: 40px;
    line-height: 30px;
    font-size: 14px;
}

.pick_time_date label {
    font-size: 15px;
}

#pick_time button {
    width: 100%;
    background: #e84423;
    border: solid 1px;
    height: 40px;
}

#pick_time .col-div-3 {
    width: 33.33%;
    float: left;
}

#pick_time .col-div-6 {
    width: 50%;
    float: left;
}

.pick_timt_view {
    background: #e84423;
    height: 50px;
    text-align: center;
    font-size: 15px;
    line-height: 50px;
    border-radius: 5px 5px 0px 0px;
    position: relative;
}

.pick_timt_view span {
    font-weight: 500;
    font-size: 17px;
    color: #ffd9d2;
}

.pick_timt_view .btn-close-popup {
    font-size: 14px;
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    background: #ef5d40;
    border-radius: 50%;
    margin: 6px 13px;
}

.pick_timt_view .btn-close-popup i {
    color: #fff;
    margin-top: 11px;
}

/* NHI THAP BAT TU */

.ntbt_top_right {
    float: left;
    width: 100%;
    overflow: hidden;
}

.ntbt_top_right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.ntbt_top_right ul li {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 10px;
    border-right: solid 1px #ef5134;
}

.ntbt_top_right ul li:last-child {
    border-right: none;
}

.ntbt_top_right ul li .lunar_tit_name {
    font-size: 20px;
    text-align: center;
    color: #2f2f2f;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 20px;
}

.ntbt_top_right ul li .lunar_tit_cont {
    font-size: 13px;
    font-weight: 500;
    margin: 8px 0px 8px 0px;
}

.ntbt_y,
.ntbt_m,
.ntbt_d,
.ntbt_h {
    font-weight: 500;
    text-transform: capitalize;
}

.nam_tho_cc span,
.thang_tho_cc span,
.ngay_tho_cc span,
.gio_tho_cc span {
    display: inherit !important;
}

.ntbt_top_right ul li .lunar_tit_cont span {
    font-size: 16px;
    color: black;
    text-transform: capitalize;
}

.content_related_ntbt {
    padding: 10px;
    float: left;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

/* PHI TINH */

.phi_tinh {
    background: #fff;
    border-radius: 8px;
    margin: 10px 0px;
    padding: 10px;
}

.phi_tinh ul {
    padding: 0;
    list-style: none;
}

.phi_tinh ul li {
    margin-right: 2.6%;
    float: left;
    width: 23%;
}

.phi_tinh ul li h3 {
    margin: 0;
    font-size: 17px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 5px;
}

.phi_tinh ul li .phi_tinh_main {
    border-top: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;
}

.phi_tinh ul li .phi_tinh_main .item {
    float: left;
    width: 33.33%;
    border-right: solid 1px #d0d0d0;
    border-bottom: solid 1px #d0d0d0;
}

.phi_tinh ul li .phi_tinh_main .item span {
    position: relative;
    display: block;
}

.phi_tinh ul li .phi_tinh_main .item span:after {
    content: "";
    display: block;
    padding-top: 100%;
}

.phi_tinh ul li .phi_tinh_main .item span b {
    position: absolute;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif;
}

.phi_tinh ul li .phi_tinh_main .item span b.danger {
    color: #ff3d32;
}

.phi_tinh .note {
    color: #b3b3b3;
    font-size: 14px;
    text-align: center;
}

.phi_tinh a {
    color: black;
}

.phitinh {
    padding: 0 !important;
}

.phitinh_popup {
    background: #da4322;
    height: auto;
    padding-top: 45px;
}

.phitinh_popup .close {
    width: 35px;
    height: 35px;
    position: absolute;
    background: #ffffff;
    text-align: center;
    line-height: 35px;
    color: #e63c18;
    text-shadow: inherit;
    font-weight: 300;
    opacity: 0.8;
    font-size: 21px;
    border-radius: 50px;
    left: 10px;
    top: 10px;
}

.phitinh_main {
    text-align: center;
    padding: 0px 0px;
    background: #fff;
    padding-bottom: 200px;
}

.phitinh_direction {
    width: 370px;
    height: 370px;
    position: relative;
    margin: 0 auto;
}

.phitinh_direction img {
    width: 100%;
    height: 100%;
}

.phitinh_chi {
    height: 180px;
    background: #565656;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.phitinh_chi .date {
    width: 100%;
    float: left;
    height: 48px;
    background-image: linear-gradient(to bottom, #da4322, #e84423);
}

.phitinh_chi .date .act_day {
    width: 45px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    margin: 7px 0px;
}

.phitinh_chi .date .act_day i {
    margin-top: 2px;
    font-size: 23px;
    color: #fff;
}

.phitinh_chi .date .next_day {}

.phitinh_chi .date .previous_day {}

.phitinh_chi .date .view_day {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 270px;
    margin-top: 7px;
    margin-bottom: 7px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    color: #fff;
}

.phitinh_chi .date .view_day span {
    float: left;
    width: 105px;
    margin: 0px 82px;
}

.phitinh_chi .date .view_day span i {
    float: right;
    margin-left: 5px;
    margin-top: 3px;
}

.phitinh_chi .main {
    float: left;
    width: 100%;
    background: #fff;
    height: 130px;
}

.phitinh_chi .main ul {
    list-style: none;
    padding: 0px 10px;
    float: left;
    width: 100%;
    margin: 9px 0px;
}

.phitinh_chi .main ul li {
    float: left;
    width: 16.6%;
    height: 56px;
}

.phitinh_chi .main ul li .name {
    height: 25px;
    text-align: center;
    font-weight: 500;
    margin-top: 5px;
    color: black;
}

.phitinh_chi .main ul li span {
    display: block;
    text-align: center;
    color: #757575;
    font-size: 14px;
    font-weight: 400;
}

.phitinh_chi .main .active {
    background: #e24322;
    border-radius: 8px;
}

.phitinh_chi .main .active .name {
    color: #fff;
}

.phitinh_chi .main .active span {
    color: #fff;
}

.phitinh_direction {
    position: relative;
}

.phitinh_direction ul {
    position: absolute;
    background: #fff;
    width: 176px;
    height: 175px;
    top: 97px;
    margin: 0;
    padding: 0;
    list-style: none;
    left: 97px;
    border-top: solid 1px #f0f0f0;
    border-left: solid 1px #f0f0f0;
}

.phitinh_direction ul li {
    width: 58.3px;
    height: 57.3px;
    float: left;
    border-right: solid 1px #f0f0f0;
    border-bottom: solid 1px #f0f0f0;
}

.phitinh_direction ul li .item {}

.phitinh_direction ul li .item span {
    float: left;
    width: 28.5px;
    height: 28.5px;
    text-align: center;
    line-height: 28.5px;
}

.phitinh_direction ul li .item span b {}

.footer {
    float: left;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    color: #353535;
}

.app_info {
    background: #fff;
    padding-bottom: 100px;
}

.app_info_title {
    text-align: center;
    padding: 0px 10px;
}

.app_info_title h1 {
    font-size: 25px;
    text-transform: uppercase;
    line-height: 31px;
}

.app_info_content {
    padding: 0px 10px;
    text-align: justify;
}

/* Events */
.events_wrap {}

.events {}

.events_listing {}

.events_listing ul {
    padding: 0;
    list-style: none;
}

.events_listing ul li {
    padding: 15px 40px 15px 15px;
    border-bottom: solid 1px #efefef;
    position: relative;
    background: #fff url(/themes/mobile/v1.0/images/ic_arrow_right.png);
    background-repeat: no-repeat;
    background-position: 98%;
    background-size: 20px;
}

.events_listing ul li:last-child {
    border-bottom: none;
}

.events_listing ul li a {
    display: block;
    line-height: 23px;
    color: #1d1d1d;
}

.events_listing ul li a i {}

.events_listing ul li a span i {
    color: #f63b0a;
}

.events_listing ul li a span {
    font-size: 14px;
    color: #f63b0a;
}

.events_listing ul li a span i {}

#event_calendar {}

#event_calendar .content {
    margin: 10px;
}

#event_calendar .content input {
    width: 100%;
    border: solid 1px #e2e2e2;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    padding: 0px 10px;
    color: #212121;
    font-weight: 500;
}

#event_calendar .content textarea {
    margin-top: 10px;
    width: 100%;
    border: solid 1px #e2e2e2;
    height: 112px;
    resize: none;
    border-radius: 5px;
    padding: 10px 10px;
    color: #505050;
    outline: none;
    -webkit-appearance: none;
}

#event_calendar .date_view {
    text-align: center;
}

#event_calendar .date_view span {
    color: #f7390a;
    font-weight: 500;
}

#event_calendar .date_view select {
    border: solid 1px #d7d7d7;
    background: #dddddd;
    border-radius: 5px;
}

#event_calendar .date_type {
    margin: 10px 0px;
    float: left;
    width: 100%;
}

#event_calendar .date_type ul {
    float: left;
    width: 100%;
    padding: 0;
}

#event_calendar .date_type ul li {
    width: 50%;
    text-align: center;
    float: left;
    list-style: none;
}

#event_calendar .date_time {
    padding: 10px;
    background: #e2e2e2;
}

#event_calendar .date_time span {
    color: #f7390a;
    font-weight: 500;
}

#event_calendar .date_time select {
    color: #f7390a;
    font-weight: 500;
    border: solid 1px #d4d4d4;
    border-radius: 4px;
}

#event_calendar .date_loop ul {
    list-style: none;
    background: #e2e2e2;
    padding: 10px 0px;
    margin: 0;
}

#event_calendar .date_loop .title {
    text-align: center;
    margin: 10px 0px;
    font-weight: 500;
    text-transform: capitalize;
}

#event_calendar .date_loop ul li {
    width: 33.33%;
    float: left;
    text-align: center;
}

#event_calendar .date_loop ul li span {}

#event_calendar .date_noti ul {
    list-style: none;
    background: #e2e2e2;
    padding: 10px 15px;
}

#event_calendar .date_noti .title {
    text-align: center;
    margin: 10px 0px;
    font-weight: 500;
    text-transform: capitalize;
}

#event_calendar .date_noti ul li {
    float: left;
    text-align: center;
}

#event_calendar .date_noti ul li span {}

#event_calendar .date_act {
    margin: 10px 0px;
}

#event_calendar .date_act ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

#event_calendar .date_act ul li {
    float: left;
    width: 33.33%;
    text-align: center;
}

#event_calendar .date_act ul li a {
    background: #ffe8e2;
    padding: 6px 10px;
    border: solid 1px #f44c0a;
    border-radius: 5px;
    color: #272727;
    display: inline-block;
}

#event_calendar .date_act ul li button {
    background: #fff;
    padding: 6px 10px;
    border: solid 1px #f44c0a;
    border-radius: 5px;
    color: #3c3c3c;
    display: inline-block;
}

.event_view {
    padding: 10px 10px 0px 10px;
}

.event_view .main {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}

.event_view .main .title {
    color: #232323;
    font-weight: 400;
    line-height: 18px;
    font-size: 17px;
}

.event_view .main .title span {
    color: #337ab7;
    font-weight: 500;
    font-size: 15px;
}

.event_view .main .title a {
    color: #3c3c3c;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
}

.event_view .main .title a span {
    color: #337ab7;
    font-weight: 400;
}

.notifications_content {
    padding: 10px;
}

.notifications_content .title {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    line-height: 25px;
    color: #f63409;
    text-align: center;
}

.notifications_content .time {
    font-size: 15px;
    color: #5f5f5f;
    border-bottom: solid 1px #cecece;
    padding-bottom: 15px;
    margin-bottom: 10px;
    text-align: center;
}

.notifications_content .content {
    text-align: justify;
}

.notifications_content .link {
    margin-top: 10px;
}

.notifications_content .link a {}

/*CHECKOUT*/
.checkout_wrap {}

.checkout {}

.checkout_wrap .notification_icon {
    text-align: center;
    margin: 30px 0px;
}

.checkout_wrap .notification_icon i {
    font-size: 150px;
    color: #7ba933;
}

.checkout_wrap .notification_content {
    text-align: center;
    padding: 0px 20px;
    font-size: 17px;
}

.checkout_wrap .notification_icon_fail i {
    color: #d4d4d4;
}

.checkout_wrap .notification_hotline {
    text-align: center;
    padding: 0px 20px;
    margin-top: 15px;
    color: #9c1a00;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
}

.listing_func {
    padding: 0;
    list-style: none;
    margin: 0;
}

.listing_func .odd {
    background: #fff url('/themes/mobile/v1.0/images/ic_verified.png');
    background-repeat: no-repeat !important;
    background-size: 27px !important;
    background-position: 95%;
}

.listing_func li {
    height: 55px;
    line-height: 55px;
    padding: 0px 15px;
    background: url('/themes/mobile/v1.0/images/ic_verified.png');
    background-repeat: no-repeat !important;
    background-size: 27px !important;
    background-position: 95%;
}

.listing_func li span {
    color: #3c3c3c;
}

.update_premium {
    background: #fff;
    padding-top: 50px;
    padding: 30px 15px;
}

.update_premium a {
    display: block;
    width: 100%;
    background: #f7330b;
    border-radius: 8px;
    line-height: 23px;
    text-align: center;
    padding: 13px 0px;
}

.update_premium span {
    font-size: 17px;
    color: #f3f3f3;
    font-weight: 500;
}

.update_premium p {
    color: #ffc9bd;
    font-size: 16px;
    margin: 0;
}

.checkout .hotline {
    text-align: center;
    background: #fff;
    padding-bottom: 25px;
    font-size: 14px;
}

.checkout .danger {
    text-align: center;
    background: #fff;
    margin: 0;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 22px;
}

.active_key {}

.active_key_content .error_system {
    padding: 5px 15px;
    text-align: center;
    background: #ffc8bd;
    margin: 0px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.active_key_content .tip {
    padding: 15px;
    margin: 0;
    font-size: 14px;
    color: #fff;
    line-height: 18px;
    text-align: justify;
}

.active_key_content form {
    padding: 0px 15px 15px 15px;
    margin: 0;
    display: block;
}

.active_key_content form input[name=keys] {
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    color: black;
    font-size: 17px;
}

.buy_premium {
    padding: 15px;
    background: url(/themes/mobile/v1.0/images/bg_lock.png);
    background-size: 100%;
    height: 150px;
}

.buy_premium .note {
    font-size: 15px;
    padding: 40px 40px;
    text-align: center;
}

.buy_premium .note span {
    color: #41a918;
    font-weight: 500;
}

.buy_premium .bottom {
    position: absolute;
    width: 43px;
    height: 251px;
    background-image: linear-gradient(to left, #dedede, #ffffff);
    opacity: 0.5;
    z-index: 9999;
    right: 0;
}


/* ===== BẮT ĐẦU CSS CHO KỲ MÔN PHI CUNG GIỜ ===== */

/* --- Container chính --- */
.kymon-mini-chart {
    width: 100%;
    border-radius: 8px;
    background: #fdfdfd;
    border: 1px solid #ddd;
    margin-top: 10px;
}

/* --- Bảng thông tin Cục, Độn, Tuần Thủ... --- */
#thongTinKyMon {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 5px;
    
    /* Cỡ chữ nhỏ hơn cho phù hợp */
}

#thongTinKyMon th,
#thongTinKyMon td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 4px;
    font-size: 9px;
}

#thongTinKyMon thead th {
    background-color: rgb(231, 97, 60);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

/* --- Lưới Kỳ Môn --- */
.qimen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #ccc;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Giữ cho lưới luôn vuông */
}

/* --- Cung (Palace) --- */
.palace {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border: 1px solid #ccc;
    font-weight: bold;
    position: relative;
    background-color: #ffffff;
    font-size: 12px;
    /* Cỡ chữ nhỏ hơn */
}

.center-palace {
    background-color: #fdfde7;
    /* Màu vàng nhạt cho trung cung */
}

.palace-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1px;
    box-sizing: border-box;
    width: 100%;
}

.palace-heaven-stem {
    grid-area: 1 / 1;
}

.palace-star {
    grid-area: 1 / 2;
}

.palace-phitinh-number {
    grid-area: 1 / 3;
    color: rgb(22, 103, 175);
}

/* CSS Cập Nhật Cho Cách Cục & Icon Trạng Thái */
.palace-cach-cuc {
    /* Thay đổi: Chỉ chiếm 2 cột đầu tiên của hàng giữa */
    grid-area: 2 / 1 / 3 / 3;
    font-size: 0.5em;
    /* <<< THAY ĐỔI TẠI ĐÂY */
    font-weight: normal;
    color: #0d5aa1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    /* Thêm mới: Căn nội dung về bên trái */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.palace-status-icons-container {
    /* Giữ nguyên: Vẫn ở cột thứ 3, mép phải */
    grid-area: 2 / 3;
    font-size: 0.9em;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}

.palace-earth-stem {
    grid-area: 3 / 1;
}

.palace-door {
    grid-area: 3 / 2;
}

.palace-deity {
    grid-area: 3 / 3;
}

/* --- Màu Cát/Hung --- */
.auspicious {
    color: #d9534f;
    /* Màu đỏ */
    font-weight: bold;
}

/* --- Viền màu cho các cung --- */
.qimen-grid .palace:nth-child(1) {
    border-top: 3px solid #28a745;
    border-left: 3px solid #28a745;
}

/* Tốn */
.qimen-grid .palace:nth-child(2) {
    border-top: 3px solid rgb(227, 61, 37);
}

/* Ly */
.qimen-grid .palace:nth-child(3) {
    border-top: 3px solid rgb(241, 173, 0);
    border-right: 3px solid rgb(241, 173, 0);
}

/* Khôn */
.qimen-grid .palace:nth-child(4) {
    border-left: 3px solid #28a745;
}

/* Chấn */
.qimen-grid .palace:nth-child(6) {
    border-right: 3px solid rgb(163, 163, 163);
}

/* Đoài */
.qimen-grid .palace:nth-child(7) {
    border-left: 3px solid rgb(241, 173, 0);
    border-bottom: 3px solid rgb(241, 173, 0);
}

/* Cấn */
.qimen-grid .palace:nth-child(8) {
    border-bottom: 3px solid rgb(51, 140, 196);
}

/* Khảm */
.qimen-grid .palace:nth-child(9) {
    border-right: 3px solid rgb(163, 163, 163);
    border-bottom: 3px solid rgb(163, 163, 163);
}

/* Càn */

/* ===== KẾT THÚC CSS CHO KỲ MÔN PHI CUNG GIỜ ===== */


/* ===== BẮT ĐẦU CSS CHO BẢNG TỨ TRỤ ===== */
.qimen-info {
    width: 100%;
    margin-top: 5px;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
    border-radius: 0 0 8px 8px;
    /* Bo góc dưới */
    overflow: hidden;
    /* Cần thiết để bo góc hoạt động */
    border: 1px solid #ddd;
    border-top: none;
    /* Bỏ viền trên để liền với biểu đồ Kỳ Môn */
}

.qimen-info th,
.qimen-info td {
    border: 1px solid #e5e5e5;
    text-align: center;
    padding: 6px;
}

.qimen-info thead th {
    background-color: #e84423;
    /* Màu cam chủ đạo của bạn */
    color: white;
    font-weight: bold;
}

.qimen-info .can-chi {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.qimen-info .nap-am {
    font-size: 0.8rem;
    color: #666;
}

/* ===== KẾT THÚC CSS CHO BẢNG TỨ TRỤ ===== */


/* ===== BẮT ĐẦU CSS CHO ICON KHÔNG VONG & DỊCH MÃ ===== */

/* Container chứa các icon trạng thái trong một cung */
.palace-status-icons-container {
    grid-area: 2 / 3;
    /* Đặt ở góc phải của hàng giữa */
    font-size: 0.9em;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}

/* Style cho chữ "KV" */
.kv-icon {
    font-family: "Font Awesome 6 Free";
    font-weight: 500;
    font-size: 0.8em;
    color: #8884d8;
    /* Màu tím nhạt */
}

/* Style cho icon Dịch Mã (con ngựa) */
.dm-icon {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    /* Cần font-weight 900 để hiển thị icon solid */
    font-size: 1em;
    color: #a0522d;
    /* Màu nâu */
}

/* ===== KẾT THÚC CSS CHO ICON ===== */

/* ===== BẮT ĐẦU CSS CẬP NHẬT CHO LOGO CHÌM ===== */

/* Bổ sung position: relative cho cung trung tâm */
.center-palace {
    position: relative;
    /* Bắt buộc để logo định vị theo cung này */
    background-color: #fdfde7;
}

/* Định vị lại logo để nằm giữa cung trung tâm */
.qimen-watermark-logo {
    position: absolute;
    top: 50%;
    /* Dịch xuống giữa theo chiều dọc */
    left: 50%;
    /* Dịch sang giữa theo chiều ngang */
    transform: translate(-50%, -50%);
    /* Căn giữa tuyệt đối */
    opacity: 0.8;
    /* Có thể tăng độ mờ một chút */
    width: 100%;
    /* Kích thước logo bằng 60% chiều rộng của cung */
    height: auto;
    pointer-events: none;
    /* Đảm bảo logo không chặn các tương tác chuột */
    z-index: 0;
    /* Đặt logo ở lớp dưới cùng */
}

/* ===== KẾT THÚC CSS CẬP NHẬT ===== */


/* ===== BẮT ĐẦU CSS CHO CỬA SỔ DIỄN GIẢI (MODAL) ===== */
.kymon-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    box-sizing: border-box;
}

.kymon-modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.kymon-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #888;
}

.kymon-modal-header h2 {
    margin-top: 0;
    color: #e84423;
    font-size: 1.2rem;
    text-align: center;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.info-table th,
.info-table td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
}

.info-table th {
    background-color: #f5f5f5;
}

.giai-thich-section h3 {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin: 1rem 0 0.5rem 0;
}

.giai-thich-section p {
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    /* Giữ nguyên định dạng xuống dòng của dữ liệu */
}

/* CSS cho các yếu tố có thể click trong modal */
.info-table .kmdg-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    font-weight: bold;
    color: #005a87;
    transition: color 0.2s, background-color 0.2s;
}

.info-table .kmdg-clickable:hover {
    color: #d9534f;
}

.info-table .kmdg-clickable.active {
    background-color: #e0f2fe;
    color: #0ea5e9;
    border-radius: 4px;
    text-decoration: none;
}

#kmdg-detail-content {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

#kmdg-detail-content h4 {
    color: #e84423;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

#kmdg-detail-content h5 {
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

#kmdg-detail-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

#kmdg-detail-content li {
    margin-bottom: 0.3rem;
}

#kmdg-detail-nav {
    display: none;
    /* Ẩn theo mặc định */
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.back-to-khac-ung-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    color: #e84423;
    transition: background-color 0.2s, color 0.2s;
}

.back-to-khac-ung-btn:hover {
    background-color: #f0f0f1;
}

/* ===== KẾT THÚC CSS CHO CỬA SỔ DIỄN GIẢI ===== */


/* --- TÙY CHỈNH FONT CHO PHẦN DIỄN GIẢI KỲ MÔN --- */

/* Định dạng chung cho vùng nội dung chi tiết */
#kmdg-detail-content {
    font-family: 'Roboto', sans-serif;
    color: #333;
    /* Màu chữ chính, dễ đọc hơn */
    line-height: 1.6;
    /* Tăng khoảng cách dòng cho dễ đọc */
}

/* Định dạng cho tiêu đề của mỗi mục (vd: Khái Niệm, Nhân Vật) */
#kmdg-detail-content h5 {
    font-family: 'Roboto Condensed', sans-serif;
    /* Dùng font 'Roboto Condensed' cho tiêu đề */
    font-size: 12px;
    /* Cỡ chữ lớn hơn một chút cho tiêu đề mục */
    font-weight: 700;
    /* In đậm */
    color: #c13c1e;
    /* Sử dụng màu nhấn của trang */
    margin-top: 15px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
    /* Thêm đường gạch chân mờ */
}

/* Định dạng cho các đoạn văn bản (nội dung) */
#kmdg-detail-content p {
    font-size: 10px;
    /* Cỡ chữ tiêu chuẩn cho nội dung */
    margin-bottom: 12px;
}

/* Định dạng cho danh sách gạch đầu dòng */
#kmdg-detail-content ul {
    font-size: 10px;
    list-style-type: disc;
    /* Giữ kiểu gạch đầu dòng là hình tròn */
    padding-left: 20px;
    /* Thụt lề vào trong cho dễ nhìn */
    margin-bottom: 12px;
}

#kmdg-detail-content li {
    margin-bottom: 6px;
    /* Tạo khoảng cách nhỏ giữa các mục trong danh sách */
}


/* Sử dụng Flexbox cho container chính */
/* Container chính của khu vực chọn ngày giờ */


/* --- CÀI ĐẶT CHUNG CHO BẢNG KỲ MÔN --- */
.kymon-chart-container {
    background: #ffffff;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kymon-chart-container h4 {
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 1rem 0;
    color: #0073aa;
}


/* Mặc định ẩn tất cả các panel */
.kymon-chart-panel {
    display: none; /* Mặc định ẩn tất cả các panel */
}
.kymon-chart-panel.active {
    display: block; /* Chỉ hiển thị panel có class active */
}


/* --- CSS cho Menu trượt --- */
/* --- CSS Nâng Cấp cho Menu trượt --- */
.side-nav {
    height: 100%;
    width: 0; /* Mặc định ẩn */
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    /* Hiệu ứng kính mờ (glassmorphism) */
    background: rgba(10, 10, 20, 0.8); /* Nền mờ màu xanh đen đậm */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Hỗ trợ Safari */
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Viền phải mờ ảo */
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
}

/* Tiêu đề Menu */
.side-nav-header {
    padding: 10px 32px;
    margin-bottom: 20px;
    text-align: center;
}

.side-nav-header h4 {
    color: #FFD700; /* Màu vàng Gold sang trọng */
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif; /* Giữ font cũ cho nhất quán */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}


/* Các mục menu */
.side-nav a {
    padding: 15px 15px 15px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #e0e0e0; /* Màu chữ trắng ngà */
    display: flex; /* Dùng flexbox để căn icon và chữ */
    align-items: center;
    transition: 0.3s;
    border-left: 4px solid transparent; /* Viền trái trong suốt để tạo hiệu ứng hover */
}

/* Icon trong menu */
.side-nav a i {
    width: 30px; /* Tạo không gian cho icon */
    margin-right: 15px; /* Khoảng cách giữa icon và chữ */
    color: #FFD700; /* Icon màu vàng Gold */
    font-size: 16px;
}

/* Hiệu ứng khi di chuột qua */
.side-nav a:hover {
    background: rgba(255, 215, 0, 0.1); /* Nền vàng mờ */
    color: #ffffff; /* Chữ sáng lên */
    border-left: 4px solid #FFD700; /* Viền vàng hiện ra */
}

/* Nút đóng (X) */
.side-nav .close-btn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 36px;
    color: #e0e0e0;
}

.side-nav .close-btn:hover {
    color: #FFD700;
}


/* Bổ sung CSS để tùy chỉnh icon tab Kỳ Môn */
/* --- BỔ SUNG CSS CHO TAB KỲ MÔN --- */

/* Trạng thái mặc định (tối) cho tất cả các tab */
.nav_calendar ul li.phitinh a {
    background: url('/themes/mobile/v1.0/images/ic_phitinh.png') no-repeat center 5px; /* Icon tối */
    background-size: 50px; /* Điều chỉnh kích thước icon nếu cần */
    color: #888; /* Màu chữ tối/mờ */
}

/* Trạng thái được chọn (sáng) cho tab có class 'active' */
.nav_calendar ul li.phitinh.active a {
    background: url('/themes/mobile/v1.0/images/ic_phitinh_active.png') no-repeat center 5px; /* Icon sáng */
    background-size: 50px;
    color: #da4323; /* Màu chữ sáng, nổi bật */
}

/* Thêm hiệu ứng chuyển đổi mượt mà (tùy chọn) */
.nav_calendar ul li.phitinh a {
    transition: all 0.2s ease-in-out;
}


/* --- CSS cho phần Trạng Trình Nguyễn Bỉnh Khiêm --- */
.trang-trinh-list {
    list-style-type: none; /* Bỏ dấu chấm đầu dòng */
    padding: 0;
    margin: 0;
    column-count: 2; /* Chia thành 2 cột */
    column-gap: 20px; /* Khoảng cách giữa 2 cột */
}

.trang-trinh-list li {
    padding-bottom: 8px; /* Khoảng cách giữa các dòng */
    break-inside: avoid; /* Ngăn một mục bị ngắt giữa 2 cột */
    font-size: 12px;
}

/* --- CSS cho bảng Đổng Công hiển thị DỌC --- */
.dong-cong-vertical-table {
    width: 100%;
    border-collapse: collapse; /* Gộp đường viền */
}
.dong-cong-vertical-table td {
    border: 1px solid #e2e2e2;
    padding: 8px 10px;
    vertical-align: top;
    font-size: 12px;
}
.dong-cong-vertical-table .dong-cong-label {
    font-weight: normal;
    background-color: #f9f9f9;
    width: 100px; /* Cố định chiều rộng cột tiêu đề */
    color: #333;
}
.dong-cong-vertical-table .dong-cong-value p,
.dong-cong-vertical-table .dong-cong-value b {
    margin: 0;
    font-weight: normal; /* Chỉnh lại font-weight cho nội dung */
    color: #555;
}


/* --- CSS để chỉnh cỡ chữ phần Chi Tiết Giờ Hiện Tại --- */

/* Chỉnh cỡ chữ cho tiêu đề chính */
#current-hour-details-container .title h2 {
    line-height: 1.4;
}

/* Chỉnh cỡ chữ cho dòng Can Chi và kết quả */
#current-hour-details-container .title span {
    font-size: 14px;
}

/* Chỉnh cỡ chữ cho các nhãn "Tinh", "Nghi", "Kỵ" và nội dung chi tiết */
#current-hour-details-container .content .time_main,
#current-hour-details-container .content p {
    font-size: 14px;
    line-height: 1.5;
}