* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.lich-am-container{
    --double-padding: unset !important;
    background-color: #911D1D !important;
    max-width: unset !important;
    width: unset !important;
    padding-top: 25px !important;
    margin-top: 0 !important;
}


.marginTopHeader {
    margin-top: 25px !important;
}

.marginBottom {
    margin-bottom: 25px !important;
}

.has-global-padding > .alignfull {
    margin-right: 0;
    margin-left: 0;
}

.has-global-padding {
    padding-right: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-left: 0;
}

.margin-year{
    margin: 0% 10%;
}
body {
    font-family: 'Inter', sans-serif !important;
    color: #5E503F !important;
    line-height: 1.3;
}

main {
    
}

ul {
        list-style-type: none;
}

h2, h3 {
    font-family:  unset !important;
    margin-bottom: 0px !important;
}

.class-margin{
    margin: 0% 10%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* header-calendar */
.header-calendar {
    /* background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3); */
}

.header-calendar h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}


.header-calendar .subtitle {
    font-size: 1.2em;
    opacity: 0.9;
}

/* Main Content Layout */
.main-content {
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

/* Current Day Info */
.current-day-info {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-left: 5px solid #27ae60;
}

.current-day-info h2 {
    color: #27ae60;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.selectMonth{
    max-width: 160px;
    margin: 0 auto;
    cursor: pointer;
}


.date-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.solar-date, .lunar-date {
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    background: #f8f9fa;
}

.solar-date {
    border-left: 4px solid #3498db;
}

.lunar-date {
    border-left: 4px solid #e74c3c;
}

.date-number {
    font-size: 2.5em;
    font-weight: bold;
    color: #2c3e50;
}

.date-label {
    font-size: 0.9em;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Calendar Controls */
.calendar-controls {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-left: 5px solid #9b59b6;
}

.calendar-controls h2 {
    color: #9b59b6;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.controls-row {
    display: flex; 
    font-size: 26px;
    justify-content: center; 
    align-items: center; 
    gap: 10px;
    font-weight: 600;
    color: #FFFFFF;
}

.controls-row h2 {
    color: #FFFFFF !important;
    width: unset !important;
    font-weight: 600;
    font-size: 26px ;
}

.controls-row select {
    padding: 0px 15px !important;
    margin: unset !important;
    width: 160px;
    font-size: 26px;
    color: #C89A32;
    font-weight: 600 !important;
    border: 2px solid #ddd;
    text-align: center;
    border-radius: 8px;
    background: #FFF7E9;
    cursor: pointer;
    transition: border-color 0.3s;
}

.controls-row select:focus {
    outline: none;
    border-color: #FFF7E9;
    color: #C89A32 !important;
}

.controls-row button {
    padding: 10px 20px;
    background: #9b59b6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s;
}

.controls-row button:hover {
    background: #8e44ad;
}

/* Calendar Grid */
.calendar-container {
    /* background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px; */
}

.calendar-header {
    text-align: center;
    margin-bottom: 20px;
}

.calendar-header h3 {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin: 0px;
    padding: 10px 0px;;
    font-size: 1.5em;
}

.header-calendar-button {
    border: none !important;
    background: none !important;
    text-decoration: underline;
    font-weight: 400;
    color: #FFFFFF;
    padding: 0px 15px;
    font-style: italic;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: #E6C1C3;
    overflow: hidden;
}

.calendar-day-header {
    background: #F9EBEB;
    color: #5E503F;
    padding: 5px 5px;
    text-align: center;
    font-weight: bold;
}

.calendar-day {
    background: #FADADB;
    padding: 10px 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 60px;
    position: relative;
}

.calendar-day:hover {
    background: #DC1435;
    transform: translateY(-2px);
}

.calendar-day.selected {
    background: #DC1435 !important;
    color: white;
}

.calendar-day-top img {
    width: 16px;
    height: 16px;
}

.calendar-day-top .good-day {
    color: #F58293 !important;
}

.calendar-day-top .nor-day {
    color: #999999 !important;
}

.calendar-day-top .bad-day {
    color: #f007ff !important;
}

.calendar-day-top .hide-day {
    display: none;
}

.calendar-day .solar-day {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 2px;
}

.calendar-day .lunar-day {
    font-size: 13px;
    color: #7f8c8d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.calendar-day.selected .lunar-day {
    color: rgba(255,255,255,0.8);
}

.calendar-bottom{
    display: flex; 
    padding: 10px 20px;
    gap: 15px;
}

.calendar-bottom .good-day {
    color: #F58293 !important;
}

.calendar-bottom .bad-day {
    color: #f007ff !important;
}

.calendar-bottom .nor-day {
    color: #999999 !important;
}

.txtHeader-White {
    font-weight: 700;
    font-size: 26px;
    color: #FFFFFF;
    line-height: normal;
    text-align: center;
    padding: 5px 20px;
}

.txt-White {
    font-weight: 400;
    color: #FFFFFF;
    font-size: 13px;
    font-style: italic;
    text-align: left;
    padding: 10px 30px;
}

.txt-White h3{
    margin: 10px 0px !important;
}

.txt-White h4{
    margin: 10px 0px !important;
}

.txt-White h2{
    margin: 10px 0px !important;
}

.txt-White h1{
    margin: 10px 0px !important;
}

.txt-White ul {
    list-style-type: circle !important;
}

.txt-White table {
    border-collapse: collapse !important;
    margin: 0 0 1rem !important;
     border: 1px solid #FFFFFF;
    width: 100%;
}


.txt-White table th,
.txt-White table td {
    border: 1px solid #FFFFFF;
    padding: 8px;
    color: #fff;
}


.imgFullDiv{
    position: absolute;
    width: 91%;
    height: 100%;
    top: 0;
    margin: 0px 20px;
    object-fit: cover;
}

.backgroundNormal{
    width: 100%;
    height: 100%;
    border-width: 20px; /* kích thước 4 cạnh */
    border-style: solid;
    border-image: url('../images/bg.svg') 20 fill stretch; /* 20 là phần cắt góc */
    margin: 13px !important;
    padding: 0!important;
}

.backgroundVip{
    width: 100%;
    height: 100%;
    border-width: 20px; /* kích thước 4 cạnh */
    border-style: solid;
    border-image: url('../images/bg-vip.svg') 20 fill stretch; /* 20 là phần cắt góc */
    margin: 0 auto;
    padding: 0!important;
}

.txtCalendarDay-left {
    font-weight: 600;
    text-align: left;
    padding: 10px 0px;
}

.txtCalendarDay-left span {
    border: 1px solid #C89A32;
    padding: 2px 6px;
    background-color: #FFF7E9;
    color: #C89A32;
}


.txtCalendarDay-right {
    font-weight: 600;
    text-align: right;
    padding: 10px 0px;
}

.txtCalendarDay-right span {
    border: 1px solid #C89A32;
    background-color: #FFF7E9;
    padding: 2px 6px;
    color: #1A0D53;
}

.txtCalendarDay {
    max-width: 500px;
    margin-bottom: 20px;
}


.txtCalendarDay-center {
    font-weight: 600;
    text-align: center;
    padding: 10px 0px;
}

.calender-day-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột */
    position: relative;
    gap: 10px;
    position: relative;
    z-index: 1;
    padding: 30px;
}

.box-yellow{
    margin-top: 15px;
    border: 1px solid #C89A32;
}

.box-yellow-header{
    background-color: #C89A32;
    padding: 8px;
    font-weight: 700;
}

.box-yellow2{
    margin-top: 15px;
    border: 1px solid #DAB96C;
}

.box-yellow2-header{
    background-color: #DAB96C;
    padding: 8px;
    font-weight: 700;
}

.box-pink{
    margin-top: 15px;
    border: 1px solid #F5E3E3;
}

.box-pink-header{
    background-color: #F5E3E3;
    padding: 8px;
    font-weight: 700;
}

.box-content li {
    border-bottom: 1px solid #F2F2F2;
    padding: 5px 0px;
    margin: 0 1rem .25rem 1rem !important;
}

.box-content{
    padding: 10px;
    font-size: 16px;
}

.content-star p {
    margin: 0px !important;
    padding: 4px 0px;
    border-bottom: 1px solid #F2F2F2;
}

.boxGioHoangDao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #ccc;
}

.txtDayTop {
    border: 1px solid #F5E3E3;
    display: flex;
}

.txtDayTop span {
    padding: 8px 15px;
    font-weight: 700;
}

.boxGioHoangDao div {
    border: 1px solid #ddd;
    padding: 5px;
}

.header-overview{
    font-weight: 700;
    padding-top: 20px;
}

/* Detailed Information Sections */
.detailed-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.info-section {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-top: 4px solid #27ae60;
}

.info-section h3 {
    color: #27ae60;
    margin-bottom: 15px;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-section .icon {
    width: 24px;
    height: 24px;
    background: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8em;
}

.info-content {
    line-height: 1.8;
}

.info-content .highlight {
    background: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.info-content .good {
    color: #27ae60;
    font-weight: bold;
}

.info-content .bad {
    color: #e74c3c;
    font-weight: bold;
}

.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ecf0f1;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list li::before {
    content: "•";
    color: #27ae60;
    font-weight: bold;
    margin-right: 10px;
}

/* Special Sections */
.gio-hoang-dao {
    border-top-color: #f39c12;
}

.gio-hoang-dao h3 {
    color: #f39c12;
}

.gio-hoang-dao .icon {
    background: #f39c12;
}

.gio-hac-dao {
    border-top-color: #e74c3c;
}

.gio-hac-dao h3 {
    color: #e74c3c;
}

.gio-hac-dao .icon {
    background: #e74c3c;
}

.huong-xuat-hanh {
    border-top-color: #3498db;
}

.huong-xuat-hanh h3 {
    color: #3498db;
}

.huong-xuat-hanh .icon {
    background: #3498db;
}

.ngoc-hap-thong-thu {
    border-top-color: #9b59b6;
}

.ngoc-hap-thong-thu h3 {
    color: #9b59b6;
}

.ngoc-hap-thong-thu .icon {
    background: #9b59b6;
}

.thap-nhi-kien-tru {
    border-top-color: #1abc9c;
}

.thap-nhi-kien-tru h3 {
    color: #1abc9c;
}

.thap-nhi-kien-tru .icon {
    background: #1abc9c;
}

.banh-to-bach-ky {
    border-top-color: #e67e22;
}

.banh-to-bach-ky h3 {
    color: #e67e22;
}

.banh-to-bach-ky .icon {
    background: #e67e22;
}

.cac-ngay-ky {
    border-top-color: #c0392b;
}

.cac-ngay-ky h3 {
    color: #c0392b;
}

.cac-ngay-ky .icon {
    background: #c0392b;
}

.ngu-hanh {
    border-top-color: #8e44ad;
}

.ngu-hanh h3 {
    color: #8e44ad;
}

.ngu-hanh .icon {
    background: #8e44ad;
}

.khong-minh-luc-dieu {
    border-top-color: #16a085;
}

.khong-minh-luc-dieu h3 {
    color: #16a085;
}

.khong-minh-luc-dieu .icon {
    background: #16a085;
}

.nhi-thap-bat-tu {
    border-top-color: #d35400;
}

.nhi-thap-bat-tu h3 {
    color: #d35400;
}

.nhi-thap-bat-tu .icon {
    background: #d35400;
}

/* Loading Animation */
.loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.loading::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #27ae60;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

.rounded {
    border-radius: 0.25rem;
}

.break-words {
    overflow-wrap: break-word;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.vncal-detail .table-responsive {
    overflow-x: auto;
}
.vncal-detail .table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    background-color: #fff;
}

.table {
    display: table;
    max-width: 100%;
    margin-bottom: 20px;
}

.table-bordered {
    border: 1px solid #ddd;
}

.vncal-detail .table th, .vncal-detail .table td {
    border: 1px solid #dee2e6;
    padding: 12px 15px;
    vertical-align: top;
}

.vncal-detail .table p {
    margin: 6px 0;
    line-height: 1.6;
    word-break: auto-phrase;
}
.vncal-detail .table label {
    font-weight: bold;
    color: #333;
    display: unset;
}

.calendar-day-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.calendar-day-bot {
    color: #a751b1;
}

.info-content-day{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.buttonHoangDao {
    background: #c99a3b;
    color: #fff;
    border: 2px solid #8d2c1a;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 180px;
    min-height: 60px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 0;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.buttonHoangDao .solar {

    font-weight: bold;
    display: flex;
    align-items: center;
}

.buttonHoangDao .lunar {
    font-weight: normal;
    color: #fff;
    width: 100%;
    opacity: 0.9;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.buttonHoangDao:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #b88a2a;
}

.buttonHacDao {
    background: #1A0D53;
    color: #fff;
    border: 2px solid #8d2c1a;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 180px;
    min-height: 60px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 0;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.buttonHacDao .solar {

    font-weight: bold;
    display: flex;
    align-items: center;
}

.buttonHacDao .lunar {
    font-weight: normal;
    color: #fff;
    width: 100%;
    opacity: 0.9;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.buttonHacDao:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #241177;
}

.owl-carousel .item-top{
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF !important;
    background-color: #DAB96C;
}

.owl-carousel .today{
    background-color: #C89A32 !important;
}

.owl-carousel .item-bot{
    color: #777777;
    background-color: #FFFFFF;
    padding: 3px;
    min-height: 108px;
    line-height: 1.5 !important;
    display: flex;
    flex-direction: column;
}


.owl-carousel .item-bot .solar-day .left{
    display: flex;
    align-items: baseline;
}

.owl-carousel .item-bot .solar-day .left img{
    padding-left: 4px;
}

.owl-carousel .item-bot .solar-day .left {
    font-size: 13px ;
}

.owl-carousel .item-bot .solar-day .left span{
    font-size: 22px !important;
}

.owl-carousel .item-bot .lunar-day {
    font-size: 13px ;
}

.owl-carousel .item-bot .lunar-day span{
    font-size: 22px !important;
}

.owl-carousel .item-bot .canchi {
    font-size: 13px ;
    height: 25px;
}

.owl-carousel .item-bot .lunar-day {
    display: flex;
    align-items: baseline;
    justify-content: end;
}

.owl-carousel .owl-item img {
    width: 20px !important;
}

.owl-carousel .item-bot .lunar-day img{
    padding-left: 4px;
}

.owl-carousel .solar-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.owl-carousel .item-bot .canchi {
    align-content: center;
    text-align: center;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.owl-carousel, .owl-stage-outer, .owl-stage{
    max-height: 140px;
}

.shortenInfor{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.shortenDiv{
    width: 50%;
}

.shortenDiv div{
    padding: 5px 0px;
}

.iconShorten {
    color: #006e33;
}

.sonar-shorten {
    color: #f60;
    font-weight: 700;
    border: 1px solid #bcccc3;
    padding: 4px 6px;
    letter-spacing: 3px;
    margin-left: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.lunar-shorten {
    color: #0b730b;
    font-weight: 700;
    border: 1px solid #bcccc3;
    padding: 4px 6px;
    letter-spacing: 3px;
    margin-left: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}


.txtOverview-flex img {
        width: 40px;
}

.txtOverview-Header{
    font-weight: 600;
    padding: 15px 0;
}

.txtOverview-flex{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    gap: 15px;
}

.owl-carousel .owl-item { 
    width: 155px !important;
    cursor: pointer;
}


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

/* Responsive Design */
@media (max-width: 768px) {
    .lich-am-container{
        margin: 0 !important;
        --double-padding: unset !important;
        max-width: unset !important;
        width: unset !important;
    }

    .calendar-day-top img {
        width: 12px;
        height: 12px;
    }

    .class-margin{
        margin: 0% 3%;
    }

    .margin-year{
        margin: 0%;
    }
    .shortenInfor{
        display: block;
    }

    .shortenDiv{
        width: 100%;
    }

    .col {
        padding: 0px !important;
    }

    .header-overview{
        font-size: 16px;
    }

    .txtOverview{
        font-size: 13px;
    }

    .txtOverview-Header{
        font-size: 16px;
    }

    .txtOverview-flex img {
        width: 30px;
        height: 30px;
    }

    .header-calendar-button {
        font-size: 13px;
    }
    .txtCalendarDay-left {
        font-size: 16px;
        padding: 5px 0px;
    }

    .txtCalendarDay-right {
        font-size: 16px;
        padding: 5px 0px;
    }

    .txtCalendarDay-center {
        font-size: 16px;
        padding: 5px 0px;
    }

    .txtHeader-White{
        font-size: 21px;
    }

    .txt-White{
        font-size: 13px;
    }

    .buttonHoangDao {
        min-width: 140px;
        padding: 0px 5px;
    }


    .buttonHoangDao .solar {
        font-size: 16px;
    }

    .buttonHoangDao .lunar {
        font-size: 14px;
    }

    .buttonHacDao {
        min-width: 140px;
        padding: 0px 5px;
    }
    
    .buttonHacDao .solar {
        font-size: 16px;
    }

    .buttonHacDao .lunar {
        font-size: 14px;
    }

    .calendar-day-header {
        font-size: 13px;
    }
    
    .controls-row {
        font-size: 16px !important;
    }

    .controls-row h2 {
        font-size: 20px;
    }

    .main-content {
        grid-template-columns: 1fr;
    }
    
    .date-display {
        grid-template-columns: 1fr;
    }
    
    .controls-row select {
       font-size: 16px !important;
       width: 100px;
    }
    
    .calendar-bottom {
        font-size: 10px;
    }

    .calendar-grid {
        font-size: 0.9em;
    }
    
    .calendar-day {
        min-height: 50px;
        padding: 8px 3px;
    }
    
    .detailed-info {
        grid-template-columns: 1fr;
    }
    
    .header-calendar {
        padding: 0px 20px;
    }

    .header-calendar h1 {
        font-size: 2em;
    }

    .owl-carousel .item-top{
        font-size: 11px;
    }

    .owl-carousel img{
        width: 17px !important;
        height: 17px !important;
    }

    .owl-carousel .owl-item { 
        width: 110px !important;
        margin-right: 5px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .owl-carousel .owl-item { 
        width: 110px !important;
        margin-right: 5px !important;
    }
    
    .header-calendar {
        padding: 20px 15px;
    }
    
    .header-calendar h1 {
        font-size: 1.8em;
    }
    
    .calendar-day {
        min-height: 40px;
        padding: 5px 2px;
    }
     .owl-carousel .item-top{
        font-size: 10px;
    }

    .owl-carousel .item-bot {
        min-height: 100px;
    }


    .calendar-day .solar-day {
        font-size: 1em;
    }
    
    .calendar-day .lunar-day {
        font-size: 10px;
    }
}