/* RESET */
.lav-box,.lav-box *{box-sizing:border-box}

/* WRAPPER */
.lav-box{
width:100%;
max-width:760px;
margin:0 auto;
background:#fff;
border:1px solid #087b31;
font-family:Arial,sans-serif;
color:#000;
overflow:hidden;
font-size:16px;
}

/* HEADER */
.lav-header{
background:#087b31;
color:#fff;
text-align:center;
font-weight:700;
padding:10px;
font-size:18px;
}

/* TOP */
.lav-top-grid{display:grid;grid-template-columns:1fr 1fr}
.lav-top-col{
min-height:245px;
text-align:center;
border-right:1px solid #087b31
}
.lav-top-col:last-child{border-right:0}

.lav-col-title{
background:#087b31;
color:#fff;
padding:10px;
font-weight:700;
font-size:16px;
}

.lav-month-label{
padding:10px 4px;
font-size:16px;
}

/* BIG NUMBER */
.lav-big{
font-size:82px;
line-height:1;
font-weight:800;
}


.lav-solar-day{color:#ff5b00}
.lav-lunar-day{color:#087b31}

/* SUB */
.lav-sub{
font-size:16px;
padding:6px;
line-height:1.4;
}

/* GOOD HOURS */
.lav-good-head{
background:#087b31;
color:#fff;
text-align:center;
padding:10px;
font-weight:700;
font-size:16px;
}

.lav-good-line{
text-align:center;
padding:10px;
font-size:16px;
border-bottom:1px solid #087b31;
}

/* NOTE */
.lav-note{
padding:10px 0;
font-size:16px;
font-weight:700;
}
.lav-note span{color:red}
.lav-note b{color:#a000b5}

/* MONTH HEAD */
.lav-month-head{
display:grid;
grid-template-columns:48px 1fr 48px;
align-items:center;
background:#087b31;
color:#fff;
min-height:48px;
text-align:center;
font-weight:700;
font-size:18px;
}

/* NAV */
.lav-nav{
width:48px;
height:48px;
border:0;
background:transparent;
position:relative;
cursor:pointer;
padding:0;
}

.lav-nav:before{
content:"";
position:absolute;
top:50%;
transform:translateY(-50%);
}

.lav-prev:before{
left:16px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:14px solid #fff;
}

.lav-next:before{
right:16px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:14px solid #fff;
}

/* WEEK */
.lav-week,
.lav-calendar{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
}

.lav-week div{
background:#087b31;
color:#fff;
border:1px solid #0a7b2f;
text-align:center;
font-size:16px;
font-weight:700;
padding:10px 2px;
}

/* CALENDAR */
.lav-calendar{gap:0}

/* CELL */
.lav-cell{
aspect-ratio:1/1;
min-width:0;
border:1px solid #0a7b2f;
border-radius:0 !important;
background:#fff;
position:relative;
padding:8px 6px;
text-align:left;
cursor:pointer;
display:block;
margin:0;
overflow:hidden;
font-size:16px;
}

button.lav-cell{
appearance:none;
-webkit-appearance:none;
width:100%;
color:inherit;
}

/* EMPTY */
.lav-empty{
background:#5ab65a;
cursor:default;
border-radius:0 !important;
}

/* SELECT */
.lav-selected{background:#82f073}

/* TEXT */
.lav-duong{
display:block;
font-size:18px;
font-weight:700;
line-height:1;
}

.lav-saturday .lav-duong{color:#008b28}
.lav-sunday .lav-duong{color:#ff5b00}

/* ÂM */
.lav-am{
display:block;
text-align:center;
font-size:16px;
margin-top:14px;
line-height:1.2;
}

/* 🔥 CAN CHI (PHẦN BẠN KHOANH) */
.lav-calendar .lav-canchi{
display:block;
text-align:center;
font-size:12px !important; /* ✅ đúng yêu cầu */
margin-top:4px;
line-height:1.2;
font-weight:500;
color:#333;
}

/* DOT */
.lav-dot{
position:absolute;
top:10px;
right:10px;
width:6px;
height:6px;
border-radius:50%;
}

.lav-dot-good{background:red}
.lav-dot-bad{background:#a000b5}

/* DETAIL */
.lav-detail-title{
background:#087b31;
color:#fff;
text-align:center;
padding:10px;
font-weight:700;
font-size:16px;
}

.lav-detail{
display:grid;
grid-template-columns:140px 1fr;
font-size:16px;
line-height:1.5;
}

.lav-detail>div{
padding:8px;
border-top:1px solid #087b31;
}

.lav-detail>div:nth-child(odd){
font-weight:700;
border-right:1px solid #087b31;
}

/* MOBILE */
@media(max-width:520px){

.lav-header{font-size:16px}
.lav-big{font-size:60px}

.lav-week div{
font-size:16px;
padding:8px 2px;
}

.lav-duong{font-size:16px}
.lav-am{font-size:16px}

/* Ẩn can chi mobile */
.lav-canchi{display:none}

.lav-detail{
grid-template-columns:120px 1fr;
font-size:16px;
}

}

/* HEADER FLEX CHUẨN */
.lav-header{
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
}

/* TEXT CENTER */
.lav-header-text{
flex:1;
text-align:center;
}

/* NÚT TAM GIÁC */
.lav-day-prev,
.lav-day-next{
width:40px;
height:40px;
background:transparent;
border:none;
cursor:pointer;
position:relative;
}

/* ICON TAM GIÁC */
.lav-day-prev::before,
.lav-day-next::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

/* TRÁI */
.lav-day-prev::before{
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:12px solid #fff;
}

/* PHẢI */
.lav-day-next::before{
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:12px solid #fff;
}

/* MOBILE NHỎ LẠI */
@media(max-width:520px){
.lav-day-prev,
.lav-day-next{
width:32px;
height:32px;
}
}


/* FONT ARIAL CHO TOÀN BỘ BẢNG LỊCH */
.lav-calendar,
.lav-calendar *{
    font-family: Arial, sans-serif !important;
}

/* ================= FIX MOBILE CALENDAR ================= */
@media(max-width:520px){

/* WEEK HEADER KHÔNG BỊ VỠ */
.lav-week{
    grid-template-columns: repeat(7, 1fr);
}

.lav-week div{
    font-size:12px;              /* nhỏ lại */
    padding:6px 2px;
    line-height:1.2;
    word-break:break-word;       /* không bị tràn */
}

/* KHÔNG CHO XUỐNG DÒNG BỂ GRID */
.lav-week div br{
    display:none;
}

/* CELL KHÔNG BỊ CẮT */
.lav-cell{
    aspect-ratio:auto !important;   /* bỏ vuông cứng */
    min-height:70px;                /* giữ layout đẹp */
    padding:6px 4px;
    overflow:visible;               /* QUAN TRỌNG */
}

/* SỐ TO KHÔNG ĐÈ */
.lav-duong{
    font-size:15px;
}

/* ÂM LỊCH GỌN LẠI */
.lav-am{
    font-size:12px;
    margin-top:6px;
}

/* DOT KHÔNG ĐÈ */
.lav-dot{
    top:6px;
    right:6px;
}

/* HEADER KHÔNG BỊ ĐẨY */
.lav-month-head{
    font-size:14px;
    padding:4px 0;
}

/* TEXT HEADER KHÔNG TRÀN */
.lav-header-text{
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

}