/* Style được thiết kế lại theo Google Material Design */

body {
    /* background: url(../images/bg1.jpg) center/cover; */
}

:root {
    /* BẢNG MÀU CHUẨN (Dựa trên Logo & Phân tích) */
    --primary-color: #FF5722;      /* Cam Đậm (Deep Orange 500 #FB8C00) - Màu chủ đạo từ Logo */
    --primary-light: #FFCCBC;      /* Cam nhạt (làm nền nhẹ) */
    --secondary-color: #4CAF50;    /* Xanh lá (Green 500) - Màu bổ trợ thiên nhiên */
    --secondary-bg: #E8F5E9;       /* Xanh lá cực nhạt (làm nền header lịch) */
    --text-dark: #212121;          /* Chữ đen chính */
    --text-grey: #757575;          /* Chữ phụ */
    --bg-body: #F5F5F5;            /* Nền trang xám nhẹ */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-dark);
    /* padding-bottom: 50px; */
}

/* --- STYLE CHO CÁC HYPERLINK --- */
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    color: var(--secondary-color);
}

.text-gradient {
    /* 1. Tạo màu nền gradient (tùy chỉnh màu theo ý thích) */
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    /* 2. Cắt nền theo hình dáng của chữ */
    -webkit-background-clip: text; /* Cho Chrome, Safari, Edge */
    background-clip: text;         /* Chuẩn W3C (cho Firefox) */

    /* 3. Làm trong suốt màu chữ gốc để lộ nền gradient bên dưới */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */

    /* Tùy chỉnh thêm (không bắt buộc) */
    font-weight: bold;
}

.app-title {
    /* font-size: 20px; */
    font-weight: 800; /*Đậm hơn để khỏe khoắn*/
    text-transform: uppercase;
    /* Cách 1: Gradient (Hiện đại) */
    background: linear-gradient(to right, var(--primary-color), #F39C12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Cách 2: Đơn sắc (An toàn) */
    /* color: var(--primary-color); */
}

/* --- PHẦN 1: THẺ HIỂN THỊ CHI TIẾT (TOP CARD) --- */
.card-detail {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
}

/* Header của thẻ chi tiết */
.detail-header {
    /* background: linear-gradient(to right, #FFF3E0, #FFFFFF, #FFF3E0); Gradient cam rất nhẹ */
    /* background: var(--primary-light); Gradient cam rất nhẹ */
    /* color: var(--primary-color); */
    background-color: var(--primary-color); /* Cam đậm */
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: .5rem;
    border-bottom: 1px solid #eee;
}
.detail-header .btn-nav {
    font-size: 1em;
}
.detail-header .today {
    background-color: #fff;
    color: var(--primary-color);
    font-weight: normal;
}
.detail-header .today.btn-nav:hover {
    background-color: var(--primary-light);
}
.btn-nav.about {
    color: var(--primary-color);
    font-size: 1.75em !important;
}
.btn-nav.about:hover {
    background-color: var(--primary-light);
}

.about-modal img {
    height: 64px;
}

/* Số ngày dương lịch to đùng */
.big-day {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(255, 87, 34, 0.1);
}

.day-name {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Phần thông tin 3 cột bên dưới */
.info-grid {
    border-top: 1px solid #eee;
}
.info-col {
    /* padding: 15px 5px; */
    padding: 15px 5px 2px;
    border-right: 1px solid #eee;
}
.info-col:last-child {
    border-right: none;
}
.info-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--secondary-color); /* Tiêu đề con dùng màu Xanh */
    text-transform: uppercase;
    margin-bottom: 5px;
}
.info-content {
    font-size: 0.9rem;
    color: var(--text-grey);
    line-height: 1.4;
}
.lunar-day-big {
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--primary-color); /* Số âm lịch dùng màu Cam */
    line-height: 1;
    display: block;
}
#time {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.5em;
}
.thangam {
    text-transform: uppercase;
}
.special-day {
    color: var(--primary-color) !important;
}
.bad, .good {
    position: relative;
}
.bad:before, .good::before {
    content: '';
    position: absolute;
    top: 5px;
    right: -6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.solar-num.bad:before, .solar-num.good::before {
    top: 0;
    right: 0;
}
.bad:before {
    background-color: #e1e1e1;
}
.good:before {
    background-color: var(--secondary-color);
}

/* --- PHẦN 2: LỊCH THÁNG (BOTTOM CARD) --- */
.calendar-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

/* Header điều hướng tháng */
.calendar-nav {
    background-color: var(--secondary-bg); /* Nền xanh nhạt */
    background-color: #E8F5E9; /* Nền xanh nhạt */
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calendar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2E7D32; /* Chữ xanh đậm hơn nền */
}
.btn-nav {
    color: #2E7D32;
    font-size: 1.2rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}
.btn-nav:hover {
    background-color: rgba(76, 175, 80, 0.2);
}

/* Grid Lịch */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Các ô bằng nhau */
}

/* Hàng Thứ trong tuần */
.th-cell {
    text-align: center;
    padding: 15px 0;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
}
.th-cell.weekend {
    color: var(--primary-color);
}

/* Ô ngày */
.day-cell {
    background-color: #fff;
    /* height: 60px; */
    vertical-align: top;
    padding: .5rem;
    /* border-bottom: 1px solid #f0f0f0; */
    /* border-right: 1px solid #f0f0f0; */
    border: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}
.day-cell:hover {
    background-color: #eaeaea;
}

.day-cell span {
    display: block;
    line-height: 1;
}
/* Số Dương lịch */
.solar-num {
    font-size: 1rem;
    font-weight: 500;
    display: block;
}
/* Số Âm lịch */
.lunar-num {
    font-size: .75rem;
    color: var(--text-grey);
    text-align: right;
    margin-top: .5rem;
    /* position: absolute; */
    /* bottom: 5px; */
    /* right: 8px; */
}
/* Day info */
.day-info {
    font-size: .75em;
    text-align: center;
}

/* Ngày cuối tuần */
.day-cell.weekend .solar-num {
    color: var(--primary-color);
}

/* NGÀY ĐANG CHỌN (ACTIVE) */
.day-cell.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
    border-radius: 8px;
    transform: scale(0.95); /* Thu nhỏ xíu để tạo hiệu ứng nổi */
    border: none;
}
.day-cell.active .solar-num,
.day-cell.active .lunar-num,
.day-cell.active .day-info {
    color: #fff !important;
}

/* Ngày hôm nay (Today) - viền xanh */
.day-cell.today {
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
}

/* Ngày mờ (tháng trước/sau) */
.day-cell.faded {
    background-color: #fafafa;
}
.day-cell.faded .solar-num,
.day-cell.faded .lunar-num,
.day-cell.faded .day-info {
    opacity: .2;
}

.duonglich {
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url(../images/bg2.jpg) center/cover;
}
.duonglich .btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    font-size: 2em;
}
.duonglich .btn-nav.btn-prev {
    left: 0;
}
.duonglich .btn-nav.btn-next {
    right: 0;
}

header {
    background: linear-gradient(to right, #FFF3E0, #FFFFFF, #FFF3E0); /* Gradient cam rất nhẹ */
    padding: .5rem;
    text-transform: uppercase;
    border: solid 1px #FFF3E0;
    border: solid 1px var(--primary-color);
    border-radius: 1rem 0;
}
header img {
    height: 40px;
}

footer {
    color: var(--text-grey);
    font-size: .9em;
}
footer a {
    color: inherit;
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .solar-num {
        font-size: 1.2rem;
    }
    .lunar-num {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: .5rem;
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    header img {
        height: 64px;
    }
}