/* Desktop (default grid) */
.custom-grid {
    height: 81vh; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.grid-item {
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    font-weight: bold;
    background: #fff;
    display: flex;                /* เปิดใช้ flex */
    flex-direction: column;
    align-items: center;          /* จัดกลางแนวนอน */
    justify-content: center;      /* จัดกลางแนวตั้ง */
    text-align: center;           /* เผื่อข้อความหลายบรรทัด */
    overflow: hidden;
}


/* Desktop Layout */
.div1 { grid-area: 1 / 1 / 2 / 3; background-color: #FCFCFC; }
.div2 { grid-area: 2 / 1 / 3 / 2; background-color: #ebe1f119; color: #473E91; }
.div3 { grid-area: 2 / 2 / 3 / 3; background-color: #ebe1f119; color: #473E91; }
.div4 { grid-area: 3 / 1 / 4 / 3; background-color: #ebe1f119; color: #473E91; }
.div5 { grid-area: 1 / 3 / 3 / 4; background-color: #fff8e1; }
.div6 { grid-area: 3 / 3 / 4 / 4; background-color: #ebe1f119; color: #473E91; }

/* Iframe responsive */
.responsive-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

.isx-progress-ring {
    --progress: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#9D73EF calc(var(--progress) * 1%), #ddd 0);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.isx-progress-ring::before {
    content: "";
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
}

.isx-progress-ring span {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    color: #473E91;
}

/* Mobile Layout */
@media (max-width: 767.98px) {
    .custom-grid {
        display: flex;           
        flex-direction: column;  
        height: auto;            
    }
    .grid-item {
        width: 100%;
        min-height: 200px;
        overflow-y: visible;
    }
    /* div5 (calendar) ให้สูงพิเศษเต็ม ๆ */
    .div5 {
        min-height: 500px; /* ปรับความสูงได้ตามต้องการ */
    }
    .responsive-iframe {
        min-height: 500px; 
    }
}